Merge pull request 'CI pipeline: Docker build workflow' (#1 ) from develop into master

remove Buildx setup, native ARM64 Docker already available
disable Mermaid Chart links in build
2026-06-24 15:10:04 +02:00 · 2026-06-24 15:07:50 +02:00 · 2026-06-24 15:06:24 +02:00 · 2026-06-24 15:01:56 +02:00 · 2026-06-24 14:55:20 +02:00 · 2026-06-24 14:45:21 +02:00
51 changed files with 1899 additions and 1422 deletions
@@ -0,0 +1,49 @@
+name: Docker Build
+
+on:
+  push:
+    branches:
+      - master
+      - develop
+  pull_request:
+    branches:
+      - master
+      - develop
+
+jobs:
+  docker:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Login to Gitea Container Registry
+        if: github.event_name == 'push'
+        uses: docker/login-action@v3
+        with:
+          registry: gitea.forkless.com
+          username: ${{ secrets.GITEAUSER }}
+          password: ${{ secrets.GITEATOKEN }}
+
+      - name: Docker metadata
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: gitea.forkless.com/forkless/mermaid-live-editor
+          tags: |
+            type=raw,value=latest,enable=${{ github.ref_name == 'master' }}
+            type=raw,value=nightly,enable=${{ github.ref_name == 'develop' }}
+            type=sha,prefix={{branch}}-
+
+      - name: Build and push
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          target: mermaid
+          push: ${{ github.event_name == 'push' }}
+          pull: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          build-args: |
+            MERMAID_RENDERER_URL=${{ vars.MERMAID_RENDERER_URL || 'https://mermaid.ink' }}
+            MERMAID_KROKI_RENDERER_URL=${{ vars.MERMAID_KROKI_RENDERER_URL || 'https://kroki.io' }}
+            MERMAID_IS_ENABLED_MERMAID_CHART_LINKS=false
@@ -39,5 +39,8 @@ jobs:
      - name: Lint
        run: pnpm lint

+      - name: Type check
+        run: pnpm check
+
      - name: Run unit tests
        run: pnpm test:unit
@@ -15,3 +15,4 @@
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+.playwright-mcp/
@@ -116,6 +116,7 @@ This app is created with Svelte Kit.
 ## Release

 When a PR is created targeting master, it will be built and deployed by Netlify.
+
 The URL will be indicated in a Comment in the PR.

 Once the PR is merged, it will automatically be released.
@@ -9,6 +9,8 @@
    "dev:test": "pnpm dev",
    "build": "vite build",
    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
    "lint": "prettier --check --cache . && eslint .",
    "lint:fix": "prettier --write --cache . && eslint --fix .",
    "format": "prettier --write --cache .",
@@ -29,26 +31,26 @@
    "@fortawesome/fontawesome-free": "^7.2.0",
    "@iconify-json/hugeicons": "^1.2.29",
    "@iconify-json/logos": "^1.2.11",
-    "@iconify-json/material-symbols": "^1.2.76",
+    "@iconify-json/material-symbols": "^1.2.79",
    "@iconify-json/mdi": "^1.2.3",
    "@playwright/test": "^1.60.0",
    "@sveltejs/adapter-static": "^3.0.10",
    "@sveltejs/kit": "^2.63.1",
    "@sveltejs/vite-plugin-svelte": "^7.1.2",
    "@tailwindcss/typography": "^0.5.20",
-    "@tailwindcss/vite": "^4.3.0",
+    "@tailwindcss/vite": "^4.3.1",
    "@types/hammerjs": "^2.0.46",
    "@types/lodash-es": "^4.17.12",
-    "@types/node": "^24.12.4",
+    "@types/node": "^24.13.2",
    "@types/pako": "2.0.4",
-    "@vitest/coverage-v8": "^4.1.8",
-    "@vitest/ui": "^4.1.8",
+    "@vitest/coverage-v8": "^4.1.9",
+    "@vitest/ui": "^4.1.9",
    "autoprefixer": "^10.5.0",
    "bits-ui": "^2.18.1",
    "c8": "11.0.0",
    "chai": "^6.2.2",
    "clsx": "^2.1.1",
-    "cssnano": "^8.0.1",
+    "cssnano": "^8.0.2",
    "dotenv": "^17.4.2",
    "eslint": "^10.4.1",
    "eslint-config-prettier": "^10.1.8",
@@ -57,8 +59,7 @@
    "eslint-plugin-sort-keys": "^2.3.5",
    "eslint-plugin-svelte": "^3.19.0",
    "eslint-plugin-tailwindcss": "^3.18.3",
-    "eslint-plugin-unicorn": "^65.0.0",
-    "esserializer": "^1.3.11",
+    "eslint-plugin-unicorn": "^65.0.1",
    "globals": "^17.6.0",
    "husky": "^9.1.7",
    "jsdom": "^29.1.1",
@@ -66,15 +67,16 @@
    "lucide-svelte": "^1.0.1",
    "node-html-parser": "^7.1.0",
    "paneforge": "1.0.2",
-    "prettier": "^3.8.3",
-    "prettier-plugin-svelte": "^4.1.0",
+    "prettier": "^3.8.4",
+    "prettier-plugin-svelte": "^4.1.1",
    "prettier-plugin-tailwindcss": "^0.8.0",
    "svelte": "^5.56.3",
+    "svelte-check": "^4.6.0",
    "svelte-preprocess": "^6.0.5",
    "svelte-sonner": "^1.1.1",
    "tailwind-merge": "^3.6.0",
    "tailwind-variants": "^3.2.2",
-    "tailwindcss": "^4.3.0",
+    "tailwindcss": "^4.3.1",
    "tslib": "^2.8.1",
    "tw-animate-css": "^1.4.0",
    "typescript": "^6.0.3",
@@ -82,7 +84,7 @@
    "unplugin-icons": "^23.0.1",
    "vite": "^8.0.16",
    "vite-plugin-devtools-json": "^1.0.0",
-    "vitest": "^4.1.8",
+    "vitest": "^4.1.9",
    "vitest-dom": "^0.1.1"
  },
  "dependencies": {
@@ -91,7 +93,7 @@
    "@codemirror/lang-yaml": "^6.1.3",
    "@codemirror/language": "^6.12.3",
    "@codemirror/state": "^6.6.0",
-    "@codemirror/view": "^6.43.0",
+    "@codemirror/view": "^6.43.1",
    "@fontsource-variable/recursive": "^5.2.8",
    "@fsegurai/codemirror-theme-vscode-dark": "^6.2.6",
    "@fsegurai/codemirror-theme-vscode-light": "^6.2.6",
@@ -123,7 +125,7 @@
  "engines": {
    "node": ">=24.16.0"
  },
-  "packageManager": "pnpm@10.34.1+sha512.b58fbde6dca66a929538021581f648b4570b6ca19b18e7cbd7f2c07a7b24454155388dacdf08f2af3678e88a6d1fe04f9d609df24bf51735a060ea041b374ab7",
+  "packageManager": "pnpm@10.34.4+sha512.8768be55200ae3f2226b6527fcca2687e14bc4e5f12d7721a0f25da3df47915177058648db4177baf348120fa0ba2752d8d8d93f6beaf1fe64ae18da8de961af",
  "pnpm": {
    "onlyBuiltDependencies": [
      "deasync",
@@ -11,7 +11,7 @@
  import { getDomain } from '$/util/util';
  import { browser } from '$app/environment';
  import { waitForRender } from '$lib/util/autoSync';
-  import { inputStateStore, stateStore, urlsStore } from '$lib/util/state';
+  import { inputState, updateCodeStore, urls, validatedState } from '$lib/util/state.svelte';
  import { logEvent } from '$lib/util/stats';
  import { version as FAVersion } from '@fortawesome/fontawesome-free/package.json';
  import dayjs from 'dayjs';
@@ -80,7 +80,7 @@
      svg = getSvgElement();
    }

-    if ($stateStore.rough) {
+    if (validatedState.current.rough) {
      fixForeignObjectClipping(svg);
    }

@@ -106,7 +106,7 @@ ${svgString}`);
  };

  const exportImage = async (event: Event, exporter: Exporter) => {
-    $inputStateStore.panZoom = false;
+    updateCodeStore({ panZoom: false });
    await new Promise((resolve) => setTimeout(resolve, 1000));
    await waitForRender();
    const canvas = document.createElement('canvas');
@@ -149,14 +149,14 @@ ${svgString}`);
    const image = new Image();
    image.addEventListener('load', () => {
      exporter(context, image)();
-      $inputStateStore.panZoom = true;
+      updateCodeStore({ panZoom: true });
    });
    image.src = `data:image/svg+xml;base64,${getBase64SVG(svg, canvas.width, canvas.height)}`;
    // Fallback to set panZoom to true after 2 seconds
    // This is a workaround for the case when the image is not loaded
    setTimeout(() => {
-      if (!$inputStateStore.panZoom) {
-        $inputStateStore.panZoom = true;
+      if (!inputState.panZoom) {
+        updateCodeStore({ panZoom: true });
      }
    }, 2000);
    event.stopPropagation();
@@ -199,7 +199,10 @@ ${svgString}`);
    };
  };

-  const onCopyClipboard = async (event: Event) => {
+  const onCopyClipboard = async (event?: Event) => {
+    if (!event) {
+      return;
+    }
    await exportImage(event, clipboardCopy);
    logEvent('copyClipboard');
  };
@@ -219,7 +222,8 @@ ${svgString}`);
  };

  let gistURL = $state('');
-  stateStore.subscribe(({ loader }) => {
+  $effect(() => {
+    const { loader } = validatedState.current;
    if (loader?.type === 'gist') {
      gistURL = loader.config.url;
    }
@@ -284,10 +288,10 @@ ${svgString}`);
        bind:value={imageSize} />
    </div>
    <div class="flex gap-2">
-      {@render dualActionButton('PNG', onDownloadPNG, $urlsStore.png)}
-      {@render dualActionButton('SVG', onDownloadSVG, $urlsStore.svg)}
-      <ExternalLinkWrapper domain={getDomain($urlsStore.kroki)} isVisible={!!$urlsStore.kroki}>
-        <a target="_blank" rel="noreferrer" class="flex-grow" href={$urlsStore.kroki}>
+      {@render dualActionButton('PNG', onDownloadPNG, urls.current.png)}
+      {@render dualActionButton('SVG', onDownloadSVG, urls.current.svg)}
+      <ExternalLinkWrapper domain={getDomain(urls.current.kroki)} isVisible={!!urls.current.kroki}>
+        <a target="_blank" rel="noreferrer" class="flex-grow" href={urls.current.kroki}>
          <Button class="action-btn flex w-full items-center gap-2">
            <ExternalLinkIcon /> Kroki
          </Button>
@@ -300,9 +304,9 @@ ${svgString}`);
    {/if}
    <ExternalLinkWrapper
      labelPrefix="Thumbnail generated by"
-      domain={getDomain($urlsStore.png)}
-      isVisible={!!$urlsStore.mdCode}>
-      <CopyInput value={$urlsStore.mdCode} label="Copy Markdown" testID={TID.copyMarkdown} />
+      domain={getDomain(urls.current.png)}
+      isVisible={!!urls.current.mdCode}>
+      <CopyInput value={urls.current.mdCode} label="Copy Markdown" testID={TID.copyMarkdown} />
    </ExternalLinkWrapper>
    <div class="flex w-full items-center gap-2">
      <Input type="url" bind:value={gistURL} placeholder="Enter Gist URL" />
@@ -14,9 +14,8 @@
    onselect?: (tab: Tab) => void;
  } = $props();

-  if (!activeTabID && tabs.length > 0) {
-    activeTabID = tabs[0].id;
-  }
+  // Derive (don't mutate the prop) so the highlight tracks a bound activeTabID.
+  const effectiveTabID = $derived(activeTabID || tabs[0]?.id);

  const toggleTabs = (tab: Tab) => {
    return (event: Event) => {
@@ -34,7 +33,7 @@
        variant="ghost"
        class={[
          'px-2',
-          activeTabID === tab.id && 'rounded-b-none border-b-2 border-b-primary-foreground/50'
+          effectiveTabID === tab.id && 'rounded-b-none border-b-2 border-b-primary-foreground/50'
        ]}
        onclick={toggleTabs(tab)}
        onkeypress={toggleTabs(tab)}>
@@ -1,7 +1,7 @@
 <script lang="ts">
  import type { EditorProps } from '$/types';
  import { env } from '$/util/env';
-  import { stateStore, urlsStore } from '$/util/state';
+  import { urls, validatedState } from '$/util/state.svelte';
  import { logMermaidChartClick } from '$/util/stats';
  import { AIPromptViewZoneManager } from '$lib/util/AIPromptViewZoneManager';
  import { initEditor } from '$lib/util/monacoExtra';
@@ -115,7 +115,7 @@
      throw new Error('divEl is undefined');
    }

-    monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+    monaco.json.jsonDefaults.setDiagnosticsOptions({
      validate: true,
      enableSchemaRequest: true,
      schemas: [
@@ -150,48 +150,6 @@
      onUpdate(currentText);
    });

-    const unsubscribeState = stateStore.subscribe(({ errorMarkers, editorMode, code, mermaid }) => {
-      if (!editor) {
-        return;
-      }
-
-      const model = editorMode === 'code' ? mermaidModel : jsonModel;
-
-      if (editor.getModel()?.id !== model.id) {
-        editor.setModel(model);
-        renderAIPromptGutterGlyphIcon();
-      }
-
-      // Clear decorations if not in 'code' mode, or if the model changes
-      if (editorMode !== 'code' || editor.getModel()?.id !== mermaidModel.id) {
-        decorationsCollection?.clear();
-      }
-
-      // Update editor text if it's different
-      const newText = editorMode === 'code' ? code : mermaid;
-      if (newText !== currentText) {
-        isUpdatingFromState = true;
-        try {
-          editor.setScrollTop(0);
-          editor.pushUndoStop();
-          editor.executeEdits('updateCode', [
-            {
-              range: model.getFullModelRange(),
-              text: newText
-            }
-          ]);
-          editor.pushUndoStop();
-          currentText = newText;
-        } finally {
-          isUpdatingFromState = false;
-        }
-        renderAIPromptGutterGlyphIcon();
-      }
-
-      // Display/clear errors
-      monaco.editor.setModelMarkers(model, 'mermaid', errorMarkers);
-    });
-
    editor.onMouseMove((e) => {
      if (!editor) return;
      if (showPopup) return;
@@ -222,7 +180,6 @@
    renderAIPromptGutterGlyphIcon();

    return () => {
-      unsubscribeState();
      resizeObserver.disconnect();
      jsonModel.dispose();
      mermaidModel.dispose();
@@ -230,6 +187,49 @@
      editor?.dispose();
    };
  });
+
+  $effect(() => {
+    const { errorMarkers, editorMode, code, mermaid } = validatedState.current;
+    if (!editor) {
+      return;
+    }
+
+    const model = editorMode === 'code' ? mermaidModel : jsonModel;
+
+    if (editor.getModel()?.id !== model.id) {
+      editor.setModel(model);
+      renderAIPromptGutterGlyphIcon();
+    }
+
+    // Clear decorations if not in 'code' mode, or if the model changes
+    if (editorMode !== 'code' || editor.getModel()?.id !== mermaidModel.id) {
+      decorationsCollection?.clear();
+    }
+
+    // Update editor text if it's different
+    const newText = editorMode === 'code' ? code : mermaid;
+    if (newText !== currentText) {
+      isUpdatingFromState = true;
+      try {
+        editor.setScrollTop(0);
+        editor.pushUndoStop();
+        editor.executeEdits('updateCode', [
+          {
+            range: model.getFullModelRange(),
+            text: newText
+          }
+        ]);
+        editor.pushUndoStop();
+        currentText = newText;
+      } finally {
+        isUpdatingFromState = false;
+      }
+      renderAIPromptGutterGlyphIcon();
+    }
+
+    // Display/clear errors
+    monaco.editor.setModelMarkers(model, 'mermaid', errorMarkers);
+  });
 </script>

 <div class="relative h-full grow overflow-hidden">
@@ -243,7 +243,7 @@
      onTryFree={() => {
        logMermaidChartClick('vibeDiagramming');
        window.open(
-          $urlsStore.mermaidChart({ medium: 'vibe_diagramming' }).save,
+          urls.current.mermaidChart({ medium: 'vibe_diagramming' }).save,
          '_blank',
          'noopener'
        );
@@ -4,7 +4,7 @@
  import type { DocumentationConfig } from '$/types';
  import { env } from '$/util/env';
  import { standardizeDiagramType } from '$/util/mermaid';
-  import { stateStore } from '$/util/state';
+  import { validatedState } from '$/util/state.svelte';
  import BookIcon from '~icons/material-symbols/book-2-outline-rounded';

  const docURLBase = env.docsUrl;
@@ -92,12 +92,14 @@
  } as const satisfies DocumentationConfig;

  const doc = $derived.by(() => {
-    const { editorMode, diagramType } = $stateStore;
+    const { editorMode, diagramType } = validatedState.current;
    if (!diagramType) {
      return { key: '', url: docURLBase };
    }
    const key = standardizeDiagramType(diagramType);
-    const docConfig = docMap[key] ?? { code: '' };
+    const docConfig: { code: string; config?: string } = docMap[key as keyof typeof docMap] ?? {
+      code: ''
+    };
    const url = docURLBase + (docConfig[editorMode] ?? docConfig.code ?? '');
    return { key, url };
  });
@@ -6,14 +6,14 @@
  import { Button } from '$/components/ui/button';
  import { TID } from '$/constants';
  import { env } from '$/util/env';
-  import { stateStore, updateCode, updateConfig, urlsStore } from '$lib/util/state';
+  import { updateCode, updateConfig, urls, validatedState } from '$lib/util/state.svelte';
  import { logMermaidChartClick } from '$lib/util/stats';
  import { debounce } from 'lodash-es';
  import ExclamationCircleIcon from '~icons/material-symbols/error-outline-rounded';

  const { isMobile } = $props<{ isMobile: boolean }>();
  const onUpdate = (text: string) => {
-    if ($stateStore.editorMode === 'code') {
+    if (validatedState.current.editorMode === 'code') {
      updateCode(text);
    } else {
      updateConfig(text);
@@ -27,7 +27,7 @@
  }, 3000);

  $effect(() => {
-    if ($stateStore.error) {
+    if (validatedState.current.error) {
      showErrorDebounced();
    } else {
      showErrorDebounced.cancel();
@@ -46,27 +46,27 @@
  {:else}
    <DesktopEditor {onUpdate} />
  {/if}
-  {#if showError && $stateStore.error instanceof Error}
+  {#if showError && validatedState.current.error instanceof Error}
    <div class="flex flex-col text-sm" data-testid={TID.errorContainer}>
      <div class="flex items-center justify-between gap-2 bg-slate-900 p-2 text-white">
        <div class="flex w-fit items-center gap-2">
          <ExclamationCircleIcon class="size-6 text-destructive" aria-hidden="true" />
          <div class="flex flex-col">
            <p>Syntax error</p>
-            {#if env.isEnabledMermaidChartLinks && $stateStore.editorMode === 'code'}
+            {#if env.isEnabledMermaidChartLinks && validatedState.current.editorMode === 'code'}
              <p class="text-xs text-white/60" data-testid={TID.aiHelpText}>
                Create a free account to repair with AI
              </p>
            {/if}
          </div>
        </div>
-        {#if $stateStore.editorMode === 'code'}
+        {#if validatedState.current.editorMode === 'code'}
          <McWrapper>
            <Button
              variant="accent"
              size="sm"
              data-testid={TID.aiRepairButton}
-              href={$urlsStore.mermaidChart({ medium: 'ai_repair' }).save}
+              href={urls.current.mermaidChart({ medium: 'ai_repair' }).save}
              target="_blank"
              onclick={() => logMermaidChartClick('aiRepair')}>
              <MermaidChartIcon />
@@ -76,7 +76,7 @@
        {/if}
      </div>
      <output class="max-h-32 overflow-auto bg-muted p-2" name="mermaid-error" for="editor">
-        <pre>{$stateStore.error?.toString()}</pre>
+        <pre>{validatedState.current.error?.toString()}</pre>
      </output>
    </div>
  {/if}
@@ -3,7 +3,7 @@
  import MermaidChartIcon from '$/components/MermaidChartIcon.svelte';
  import { Button } from '$/components/ui/button';
  import { standardizeDiagramType } from '$/util/mermaid';
-  import { stateStore, urlsStore } from '$/util/state';
+  import { validatedState, urls } from '$/util/state.svelte';
  import { logMermaidChartClick } from '$/util/stats';
  import { quintInOut } from 'svelte/easing';
  import { slide } from 'svelte/transition';
@@ -19,7 +19,7 @@
  ]);

  const diagramType = $derived.by(() => {
-    const dt = $stateStore.diagramType;
+    const dt = validatedState.current.diagramType;
    return dt ? standardizeDiagramType(dt) : undefined;
  });

@@ -39,7 +39,7 @@
  let currentActionIndex = $state(0);

  const availableActions = $derived.by<EnhancedEditAction[]>(() => {
-    if (!$stateStore.diagramType) {
+    if (!validatedState.current.diagramType) {
      return [];
    }

@@ -98,7 +98,7 @@
    <Button
      variant="secondary"
      size="sm"
-      href={$urlsStore.mermaidChart({
+      href={urls.current.mermaidChart({
        medium: currentAction.medium,
        campaign: currentAction.campaign
      }).save}
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { stateStore } from '$/util/state';
+  import { validatedState } from '$/util/state.svelte';
  import * as Tooltip from '$lib/components/ui/tooltip';
  import type { ComponentProps, Snippet } from 'svelte';
  import ExternalLinkIcon from '~icons/material-symbols/open-in-new-rounded';
@@ -25,7 +25,7 @@
  } = $props();

  let shouldDisableComponent = $derived(
-    shouldCheckDiagramType && $stateStore.diagramType === 'zenuml'
+    shouldCheckDiagramType && validatedState.current.diagramType === 'zenuml'
  );
 </script>

@@ -2,12 +2,11 @@
  import Card from '$lib/components/Card/Card.svelte';
  import type { HistoryEntry, HistoryType, State, Tab } from '$lib/types';
  import { notify, prompt } from '$lib/util/notify';
-  import { getStateString, inputStateStore } from '$lib/util/state';
+  import { serializeState } from '$lib/util/serde';
+  import { inputState, replaceInputState } from '$lib/util/state.svelte';
  import { logEvent } from '$lib/util/stats';
  import dayjs from 'dayjs';
  import dayjsRelativeTime from 'dayjs/plugin/relativeTime';
-  import { onMount } from 'svelte';
-  import { get } from 'svelte/store';
  import BookmarkIcon from '~icons/material-symbols/bookmark-outline-rounded';
  import TrashAltIcon from '~icons/material-symbols/delete-outline-rounded';
  import DownloadIcon from '~icons/material-symbols/download-rounded';
@@ -16,41 +15,51 @@
  import UploadIcon from '~icons/material-symbols/upload-rounded';
  import HistoryIcon from '~icons/mdi/clock-outline';
  import GitAltIcon from '~icons/mdi/git';
+  import OpenInNewIcon from '~icons/material-symbols/open-in-new-rounded';
  import { Button } from '../ui/button';
  import { Separator } from '../ui/separator';
  import {
-    addHistoryEntry,
-    clearHistoryData,
-    getPreviousState,
-    historyModeStore,
-    historyStore,
-    loaderHistoryStore,
-    restoreHistory
-  } from './history';
+    addManualEntry,
+    clearActive,
+    historyState,
+    removeEntry,
+    restoreEntries,
+    setMode
+  } from './historyState.svelte';

  dayjs.extend(dayjsRelativeTime);

-  const HISTORY_SAVE_INTERVAL = 60_000;
+  const baseTabs: Tab[] = [
+    { id: 'manual', title: 'Saved', icon: BookmarkIcon },
+    { id: 'auto', title: 'Timeline', icon: HistoryIcon }
+  ];
+  const loaderTab: Tab = { id: 'loader', title: 'Revisions', icon: GitAltIcon };
+
+  const tabs = $derived(
+    historyState.loaderEntries.length > 0 ? [loaderTab, ...baseTabs] : baseTabs
+  );
+
+  // Surface revisions once when they first appear; the user can switch away after.
+  let revisionsShown = false;
+  $effect(() => {
+    if (historyState.loaderEntries.length > 0 && !revisionsShown) {
+      revisionsShown = true;
+      setMode('loader');
+    }
+  });
+
+  const emptyMessage = $derived(
+    historyState.mode === 'auto'
+      ? 'No timeline snapshots yet.\nThe Timeline is saved automatically every minute.'
+      : 'No saved states yet.\nClick the Save button to bookmark the current diagram and restore it later.'
+  );

  const tabSelectHandler = (tab: Tab) => {
-    historyModeStore.set(tab.id as HistoryType);
+    setMode(tab.id as HistoryType);
  };

-  let tabs: Tab[] = $state([
-    {
-      id: 'manual',
-      title: 'Saved',
-      icon: BookmarkIcon
-    },
-    {
-      id: 'auto',
-      title: 'Timeline',
-      icon: HistoryIcon
-    }
-  ]);
-
  const downloadHistory = () => {
-    const data = get(historyStore);
+    const data = historyState.entries;
    const blob = new Blob([JSON.stringify(data)], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
@@ -58,9 +67,7 @@
    a.download = `mermaid-history-${dayjs().format('YYYY-MM-DD-HHmmss')}.json`;
    a.click();
    URL.revokeObjectURL(url);
-    logEvent('history', {
-      action: 'download'
-    });
+    logEvent('history', { action: 'download' });
  };

  const uploadHistory = () => {
@@ -73,59 +80,39 @@
        return;
      }
      const data: HistoryEntry[] = JSON.parse(await file.text());
-      restoreHistory(data);
+      const { restored, invalid, duplicates } = restoreEntries(data);
+      notify(`${restored} restored, ${duplicates} duplicate, ${invalid} invalid.`);
    });
    input.click();
  };

-  const saveHistory = (auto = false) => {
-    const currentState: string = getStateString();
-    const previousState: string = getPreviousState(auto);
-    if (previousState !== currentState) {
-      addHistoryEntry({
-        state: $inputStateStore,
-        time: Date.now(),
-        type: auto ? 'auto' : 'manual'
-      });
-    } else if (!auto) {
+  const saveHistory = () => {
+    if (!addManualEntry($state.snapshot(inputState))) {
      notify('State already saved.');
    }
  };

-  const clearHistory = (id?: string): void => {
-    if (!id && !prompt('Clear all saved items?')) {
-      return;
+  const clearAll = () => {
+    if (prompt('Clear all saved items?')) {
+      clearActive();
    }
-    clearHistoryData(id);
  };

  const restoreHistoryItem = (state: State): void => {
-    inputStateStore.set({ ...state, updateDiagram: true });
+    replaceInputState({ ...state, updateDiagram: true });
  };

-  onMount(() => {
-    historyModeStore.set('manual');
-    setInterval(() => {
-      saveHistory(true);
-    }, HISTORY_SAVE_INTERVAL);
-  });
+  // Absolute editor URL for an entry, so the link can be opened in a new tab or copied.
+  const entryUrl = (state: State): string =>
+    `${window.location.origin}${window.location.pathname}#${serializeState(state)}`;

-  loaderHistoryStore.subscribe((entries) => {
-    if (entries.length > 0 && tabs.length === 2) {
-      tabs = [
-        {
-          id: 'loader',
-          title: 'Revisions',
-          icon: GitAltIcon
-        },
-        ...tabs
-      ];
-      historyModeStore.set('loader');
-    }
-  });
+  // Serialize each entry's URL once per change rather than per row on every render.
+  const entriesWithUrl = $derived(
+    historyState.entries.map((entry) => ({ ...entry, openUrl: entryUrl(entry.state) }))
+  );
 </script>

-<Card onselect={tabSelectHandler} isOpen isClosable={false} {tabs}>
+<Card onselect={tabSelectHandler} isOpen isClosable={false} {tabs} activeTabID={historyState.mode}>
  {#snippet actions()}
    <div class="flex items-center gap-2">
      <Button
@@ -134,7 +121,7 @@
        id="uploadHistory"
        onclick={uploadHistory}
        title="Upload history"><UploadIcon /></Button>
-      {#if $historyStore.length > 0}
+      {#if historyState.entries.length > 0}
        <Button
          id="downloadHistory"
          size="icon"
@@ -147,22 +134,22 @@
        id="saveHistory"
        size="icon"
        variant="ghost"
-        onclick={() => saveHistory()}
+        onclick={saveHistory}
        title="Save current state"><SaveIcon /></Button>
-      {#if $historyModeStore !== 'loader'}
+      {#if historyState.mode !== 'loader'}
        <Button
          id="clearHistory"
          size="icon"
          variant="ghost"
          class="hover:text-destructive"
-          onclick={() => clearHistory()}
+          onclick={clearAll}
          title="Delete all saved states"><TrashAltIcon /></Button>
      {/if}
    </div>
  {/snippet}
  <ul class="flex h-full min-w-fit flex-col gap-2 overflow-auto p-2" id="historyList">
-    {#if $historyStore.length > 0}
-      {#each $historyStore as { id, state, time, name, url, type } (id)}
+    {#if entriesWithUrl.length > 0}
+      {#each entriesWithUrl as { id, state, time, name, url, type, openUrl } (id)}
        <li class="flex flex-col gap-2">
          <div class="flex items-center justify-between">
            <div class="flex flex-col">
@@ -184,7 +171,20 @@
              <span class="text-sm whitespace-nowrap text-primary-foreground/50">
                {dayjs(time).fromNow()}
              </span>
-              <Button size="icon" variant="ghost" onclick={() => restoreHistoryItem(state)}>
+              <Button
+                href={openUrl}
+                target="_blank"
+                rel="noopener"
+                size="icon"
+                variant="ghost"
+                title="Open in new tab">
+                <OpenInNewIcon />
+              </Button>
+              <Button
+                size="icon"
+                variant="ghost"
+                title="Restore this version"
+                onclick={() => restoreHistoryItem(state)}>
                <UndoIcon />
              </Button>
              {#if type !== 'loader'}
@@ -192,7 +192,8 @@
                  size="icon"
                  variant="ghost"
                  class="hover:text-destructive"
-                  onclick={() => clearHistory(id)}>
+                  title="Delete this version"
+                  onclick={() => removeEntry(id)}>
                  <TrashAltIcon />
                </Button>
              {/if}
@@ -202,11 +203,7 @@
        </li>
      {/each}
    {:else}
-      <div class="m-2 text-center">
-        No items in History<br />
-        Click the Save button to save current state and restore it later.<br />
-        Timeline will automatically be saved every minute.
-      </div>
+      <div class="m-2 text-center whitespace-pre-line">{emptyMessage}</div>
    {/if}
  </ul>
 </Card>
@@ -1,126 +0,0 @@
-import type { HistoryEntry } from '$lib/types';
-import { defaultState } from '$lib/util/state';
-import { get } from 'svelte/store';
-import { describe, expect, it } from 'vitest';
-import {
-  addHistoryEntry,
-  clearHistoryData,
-  historyModeStore,
-  historyStore,
-  injectHistoryIDs
-} from './history';
-
-describe('history', () => {
-  it('should handle saving individual history entry', () => {
-    expect(window.localStorage.getItem('manualHistoryStore')).toBe('[]');
-    expect(window.localStorage.getItem('autoHistoryStore')).toBe('[]');
-
-    addHistoryEntry({
-      state: defaultState,
-      time: 12_345,
-      type: 'manual'
-    });
-
-    const [manualEntry] = JSON.parse(
-      window.localStorage.getItem('manualHistoryStore') ?? '[]'
-    ) as HistoryEntry[];
-
-    expect(manualEntry.time).toBe(12_345);
-    expect(manualEntry.type).toBe('manual');
-    expect(manualEntry.name).not.toBeNull();
-    expect(manualEntry.state).not.toBeNull();
-
-    addHistoryEntry({
-      state: defaultState,
-      time: 54_321,
-      type: 'auto'
-    });
-
-    const [autoEntry] = JSON.parse(
-      window.localStorage.getItem('autoHistoryStore') ?? '[]'
-    ) as HistoryEntry[];
-
-    expect(autoEntry.time).toBe(54_321);
-    expect(autoEntry.type).toBe('auto');
-    expect(autoEntry.name).not.toBeNull();
-    expect(autoEntry.state).not.toBeNull();
-
-    historyModeStore.set('manual');
-    clearHistoryData();
-    historyModeStore.set('auto');
-    clearHistoryData();
-    expect(window.localStorage.getItem('manualHistoryStore')).toBe('[]');
-    expect(window.localStorage.getItem('autoHistoryStore')).toBe('[]');
-  });
-
-  it('should clear history entries', () => {
-    addHistoryEntry({
-      state: defaultState,
-      time: 12_345,
-      type: 'manual'
-    });
-    addHistoryEntry({
-      state: { ...defaultState, code: 'graph TD\\n    A[Christmas] -->|Get money| B(Go shopping)' },
-      time: 123_456,
-      type: 'manual'
-    });
-
-    historyModeStore.set('manual');
-    const store: HistoryEntry[] = get(historyStore);
-    expect(store.length).toBe(2);
-    clearHistoryData(store[1].id);
-    expect(get(historyStore).length).toBe(1);
-    clearHistoryData();
-    expect(get(historyStore).length).toBe(0);
-
-    historyModeStore.set('auto');
-    addHistoryEntry({
-      state: defaultState,
-      time: 54_321,
-      type: 'auto'
-    });
-    addHistoryEntry({
-      state: { ...defaultState, code: 'graph TD\\n    A[Christmas] -->|Get money| B(Go shopping)' },
-      time: 654_321,
-      type: 'auto'
-    });
-    expect(get(historyStore).length).toBe(2);
-    clearHistoryData();
-    expect(get(historyStore).length).toBe(0);
-    // Test calling when history is empty
-    clearHistoryData();
-    expect(get(historyStore).length).toBe(0);
-  });
-});
-
-describe('history migration', () => {
-  it('should inject history IDs as migration', () => {
-    window.localStorage.setItem(
-      'manualHistoryStore',
-      '[{"state":{"code":"graph TD\\n    A[Halloween] -->|Get money| B(Go shopping)","mermaid":"{\\n  \\"theme\\": \\"dark\\"\\n}","autoSync":true,"updateDiagram":false},"time":0,"type":"manual","name":"hollow-art"},{"state":{"code":"graph TD\\n    A[Christmas] -->|Get money| B(Go shopping)","mermaid":"{\\n  \\"theme\\": \\"dark\\"\\n}","autoSync":true,"updateDiagram":true},"time":0,"type":"manual","name":"helpful-ocean"}]'
-    );
-    window.localStorage.setItem(
-      'autoHistoryStore',
-      '[{"state":{"code":"graph TD\\n    A[New Year] -->|Get money| B(Go shopping)","mermaid":"{\\n  \\"theme\\": \\"dark\\"\\n}","autoSync":true,"updateDiagram":false},"time":0,"type":"auto","name":"barking-dog"},{"state":{"code":"graph TD\\n    A[Christmas] -->|Get money| B(Go shopping)","mermaid":"{\\n  \\"theme\\": \\"dark\\"\\n}","autoSync":true,"updateDiagram":true},"time":0,"type":"manual","name":"needy-mosquito"}]'
-    );
-    let manualHistoryStore = JSON.parse(
-        window.localStorage.getItem('manualHistoryStore') ?? '[]'
-      ) as HistoryEntry[],
-      autoHistoryStore = JSON.parse(
-        window.localStorage.getItem('autoHistoryStore') ?? '[]'
-      ) as HistoryEntry[];
-    expect(manualHistoryStore.every(({ id }) => id !== undefined)).toBe(false);
-    expect(autoHistoryStore.every(({ id }) => id !== undefined)).toBe(false);
-
-    injectHistoryIDs();
-
-    manualHistoryStore = JSON.parse(
-      window.localStorage.getItem('manualHistoryStore') ?? '[]'
-    ) as HistoryEntry[];
-    autoHistoryStore = JSON.parse(
-      window.localStorage.getItem('autoHistoryStore') ?? '[]'
-    ) as HistoryEntry[];
-    expect(manualHistoryStore.every(({ id }) => id !== undefined)).toBe(true);
-    expect(autoHistoryStore.every(({ id }) => id !== undefined)).toBe(true);
-  });
-});
@@ -1,151 +0,0 @@
-import type { HistoryEntry, HistoryType, Optional } from '$lib/types';
-import { localStorage, persist } from '$lib/util/persist';
-import { logEvent } from '$lib/util/stats';
-import { generateSlug } from 'random-word-slugs';
-import type { Readable, Writable } from 'svelte/store';
-import { derived, get, writable } from 'svelte/store';
-import { v4 as uuidV4 } from 'uuid';
-
-const MAX_AUTO_HISTORY_LENGTH = 30;
-
-export const historyModeStore: Writable<HistoryType> = persist(
-  writable('manual'),
-  localStorage(),
-  'autoHistoryMode'
-);
-
-const autoHistoryStore: Writable<HistoryEntry[]> = persist(
-  writable([]),
-  localStorage(),
-  'autoHistoryStore'
-);
-
-const manualHistoryStore: Writable<HistoryEntry[]> = persist(
-  writable([]),
-  localStorage(),
-  'manualHistoryStore'
-);
-
-export const loaderHistoryStore: Writable<HistoryEntry[]> = writable([]);
-
-export const historyStore: Readable<HistoryEntry[]> = derived(
-  [historyModeStore, autoHistoryStore, manualHistoryStore, loaderHistoryStore],
-  ([historyMode, autoHistories, manualHistories, loadedHistories], set) => {
-    switch (historyMode) {
-      case 'auto': {
-        set(autoHistories);
-        break;
-      }
-      case 'manual': {
-        set(manualHistories);
-        break;
-      }
-      case 'loader': {
-        set(loadedHistories);
-        break;
-      }
-      default: {
-        set(autoHistories);
-      }
-    }
-  }
-);
-
-export const addHistoryEntry = (entryToAdd: Optional<HistoryEntry, 'id'>): void => {
-  const entry: HistoryEntry = {
-    ...entryToAdd,
-    id: uuidV4()
-  };
-
-  if (entry.type === 'loader') {
-    loaderHistoryStore.update((entries) => [entry, ...entries]);
-    return;
-  }
-
-  if (!entry.name) {
-    entry.name = generateSlug(2);
-  }
-
-  if (entry.type === 'auto') {
-    autoHistoryStore.update((entries) => {
-      if (entries.length >= MAX_AUTO_HISTORY_LENGTH) {
-        entries = entries.slice(0, MAX_AUTO_HISTORY_LENGTH - 1);
-      }
-      return [entry, ...entries];
-    });
-  }
-
-  manualHistoryStore.update((entries) => [entry, ...entries]);
-  logEvent('history', { action: 'save' });
-};
-
-export const clearHistoryData = (idToClear?: string): void => {
-  (get(historyModeStore) === 'auto' ? autoHistoryStore : manualHistoryStore).update((entries) => {
-    if (get(historyModeStore) !== 'loader') {
-      entries = entries.filter(({ id }) => idToClear && id != idToClear);
-      logEvent('history', { action: 'clear', type: idToClear ? 'single' : 'all' });
-    }
-    return entries;
-  });
-};
-
-export const getPreviousState = (auto: boolean): string => {
-  const entries = get(auto ? autoHistoryStore : manualHistoryStore);
-  if (entries.length > 0) {
-    return JSON.stringify(entries[0].state);
-  }
-  return '';
-};
-
-export const restoreHistory = (data: HistoryEntry[]) => {
-  const entries = data.filter((element) => validateEntry(element));
-  const invalidEntryCount = data.length - entries.length;
-  if (invalidEntryCount > 0) {
-    console.error(`${invalidEntryCount} invalid history entries were removed.`);
-    console.error(data);
-  }
-  if (entries.length > 0) {
-    let entryCount = 0;
-    (entries[0].type === 'auto' ? autoHistoryStore : manualHistoryStore).update((existing) => {
-      const existingIDs = new Set(existing.map(({ id }) => id));
-      const newEntries = entries.filter(({ id }) => !existingIDs.has(id));
-      entryCount = newEntries.length;
-      const combined = [...existing, ...newEntries];
-      combined.sort((a, b) => b.time - a.time);
-      return combined;
-    });
-
-    alert(
-      `${entryCount} entries restored. ${invalidEntryCount} invalid, ${
-        entries.length - entryCount
-      } duplicates.`
-    );
-    logEvent('history', {
-      action: 'restore',
-      success: entryCount,
-      invalid: invalidEntryCount,
-      duplicates: entries.length - entryCount
-    });
-  } else {
-    alert('No valid entries found.');
-  }
-};
-const setIDs = (entries: HistoryEntry[]) => {
-  for (const entry of entries) {
-    if (!entry.id) {
-      entry.id = uuidV4();
-    }
-  }
-  return entries;
-};
-
-export const injectHistoryIDs = (): void => {
-  autoHistoryStore.update(setIDs);
-  manualHistoryStore.update(setIDs);
-};
-
-const validateEntry = (entry: HistoryEntry): boolean => {
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-expect-error
-  return entry.type && entry.state && entry.time && true;
-};
@@ -0,0 +1,177 @@
+import type { HistoryEntry, HistoryType, Optional, State } from '$lib/types';
+import { persisted, readJSON, type Persisted } from '$lib/util/persist.svelte';
+import { inputState } from '$lib/util/state.svelte';
+import { logEvent } from '$lib/util/stats';
+import { generateSlug } from 'random-word-slugs';
+import { v4 as uuidV4 } from 'uuid';
+
+const MAX_AUTO_HISTORY_LENGTH = 30;
+const AUTO_SAVE_INTERVAL = 60_000;
+
+const auto = persisted<HistoryEntry[]>('autoHistoryStore', []);
+const manual = persisted<HistoryEntry[]>('manualHistoryStore', []);
+const mode = persisted<HistoryType>('autoHistoryMode', 'manual');
+let loader = $state<HistoryEntry[]>([]);
+
+// Loader entries are in-memory, so a persisted 'loader' mode is empty after reload.
+if (mode.value === 'loader') {
+  mode.value = 'manual';
+}
+
+// The persisted slot backing a mode; loader is in-memory and has no slot.
+const slotFor = (m: HistoryType): Persisted<HistoryEntry[]> | null => {
+  switch (m) {
+    case 'auto': {
+      return auto;
+    }
+    case 'manual': {
+      return manual;
+    }
+    default: {
+      return null;
+    }
+  }
+};
+
+export const historyState = {
+  get entries(): HistoryEntry[] {
+    return slotFor(mode.value)?.value ?? loader;
+  },
+  get loaderEntries(): HistoryEntry[] {
+    return loader;
+  },
+  get mode(): HistoryType {
+    return mode.value;
+  }
+};
+
+export const setMode = (next: HistoryType): void => {
+  mode.value = next;
+};
+
+// Dedup key: only the fields that define the diagram, so volatile/view-only
+// fields (renderCount, pan/zoom, …) don't count as a change.
+export const stateKey = (state: State): string =>
+  JSON.stringify({ code: state.code, mermaid: state.mermaid });
+
+const createEntry = (state: State, type: 'auto' | 'manual'): HistoryEntry => ({
+  id: uuidV4(),
+  name: generateSlug(2),
+  state,
+  time: Date.now(),
+  type
+});
+
+// Returns true if added, false if it duplicated the most recent entry.
+const addEntry = (
+  slot: Persisted<HistoryEntry[]>,
+  state: State,
+  type: 'auto' | 'manual',
+  maxLength?: number
+): boolean => {
+  const entries = slot.value;
+  if (entries.length > 0 && stateKey(entries[0].state) === stateKey(state)) {
+    return false;
+  }
+  const trimmed =
+    maxLength && entries.length >= maxLength ? entries.slice(0, maxLength - 1) : entries;
+  slot.value = [createEntry(state, type), ...trimmed];
+  logEvent('history', { action: 'save', type });
+  return true;
+};
+
+export const addManualEntry = (state: State): boolean => addEntry(manual, state, 'manual');
+
+export const addAutoEntry = (state: State): boolean =>
+  addEntry(auto, state, 'auto', MAX_AUTO_HISTORY_LENGTH);
+
+// Replaces the in-memory revisions (e.g. when a gist is loaded), assigning ids.
+export const setLoaderEntries = (entries: Optional<HistoryEntry, 'id'>[]): void => {
+  loader = entries.map((entry) =>
+    entry.id ? (entry as HistoryEntry) : { ...entry, id: uuidV4() }
+  );
+};
+
+export const removeEntry = (id: string): void => {
+  const slot = slotFor(mode.value);
+  if (!slot) {
+    return;
+  }
+  slot.value = slot.value.filter((entry) => entry.id !== id);
+  logEvent('history', { action: 'clear', type: 'single' });
+};
+
+export const clearActive = (): void => {
+  const slot = slotFor(mode.value);
+  if (!slot) {
+    return;
+  }
+  slot.value = [];
+  logEvent('history', { action: 'clear', type: 'all' });
+};
+
+const validateEntry = (entry: HistoryEntry): boolean =>
+  Boolean(entry && entry.type && entry.state) && typeof entry.time === 'number';
+
+export interface RestoreResult {
+  restored: number;
+  invalid: number;
+  duplicates: number;
+}
+
+// Routes each uploaded entry to the store matching its own type, skipping ids
+// that already exist.
+export const restoreEntries = (data: HistoryEntry[]): RestoreResult => {
+  const valid = data.filter((entry) => validateEntry(entry));
+  const invalid = data.length - valid.length;
+  let restored = 0;
+
+  const slots: [HistoryType, Persisted<HistoryEntry[]>][] = [
+    ['auto', auto],
+    ['manual', manual]
+  ];
+  for (const [type, slot] of slots) {
+    const incoming = valid.filter((entry) => entry.type === type);
+    if (incoming.length === 0) {
+      continue;
+    }
+    const existingIDs = slot.value.map(({ id }) => id);
+    const fresh = incoming.filter(({ id }) => !existingIDs.includes(id));
+    restored += fresh.length;
+    slot.value = [...slot.value, ...fresh].sort((a, b) => b.time - a.time);
+  }
+
+  const duplicates = valid.length - restored;
+  logEvent('history', { action: 'restore', duplicates, invalid, success: restored });
+  return { restored, invalid, duplicates };
+};
+
+const setIDs = (entries: HistoryEntry[]): HistoryEntry[] =>
+  entries.map((entry) => (entry.id ? entry : { ...entry, id: uuidV4() }));
+
+// One-time migration: re-reads localStorage so entries written by an older
+// version get ids, then persists and updates the reactive state.
+export const injectHistoryIDs = (): void => {
+  auto.value = setIDs(readJSON<HistoryEntry[]>('autoHistoryStore', []));
+  manual.value = setIDs(readJSON<HistoryEntry[]>('manualHistoryStore', []));
+};
+
+let autoSaveTimer: ReturnType<typeof setInterval> | undefined;
+
+// Idempotent; returns the stop function for use as a lifecycle cleanup.
+export const startAutoSave = (): (() => void) => {
+  if (autoSaveTimer === undefined) {
+    autoSaveTimer = setInterval(
+      () => addAutoEntry($state.snapshot(inputState)),
+      AUTO_SAVE_INTERVAL
+    );
+  }
+  return stopAutoSave;
+};
+
+export const stopAutoSave = (): void => {
+  if (autoSaveTimer !== undefined) {
+    clearInterval(autoSaveTimer);
+    autoSaveTimer = undefined;
+  }
+};
@@ -0,0 +1,314 @@
+import type { HistoryEntry } from '$lib/types';
+import { defaultState, replaceInputState } from '$lib/util/state.svelte';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import {
+  addAutoEntry,
+  addManualEntry,
+  clearActive,
+  historyState,
+  injectHistoryIDs,
+  removeEntry,
+  restoreEntries,
+  setLoaderEntries,
+  setMode,
+  startAutoSave,
+  stateKey,
+  stopAutoSave
+} from './historyState.svelte';
+
+const codeState = (code: string) => ({ ...defaultState, code });
+
+/** Read the entries currently shown for a given mode. */
+const entriesFor = (mode: 'auto' | 'manual' | 'loader'): HistoryEntry[] => {
+  setMode(mode);
+  return historyState.entries;
+};
+
+beforeEach(() => {
+  // Reset every store through the public API so tests don't leak into each other.
+  setMode('manual');
+  clearActive();
+  setMode('auto');
+  clearActive();
+  setLoaderEntries([]);
+  setMode('manual');
+});
+
+describe('stateKey', () => {
+  it('ignores volatile and view-only fields, keying only on code + config', () => {
+    const a = {
+      ...defaultState,
+      code: 'graph TD\n A-->B',
+      panZoom: true,
+      renderCount: 1,
+      updateDiagram: true
+    };
+    const b = {
+      ...defaultState,
+      code: 'graph TD\n A-->B',
+      pan: { x: 5, y: 5 },
+      panZoom: false,
+      renderCount: 99,
+      updateDiagram: false
+    };
+    expect(stateKey(a)).toBe(stateKey(b));
+  });
+
+  it('differs when code differs', () => {
+    expect(stateKey(codeState('graph TD\n A-->B'))).not.toBe(
+      stateKey(codeState('graph TD\n A-->C'))
+    );
+  });
+
+  it('differs when config differs', () => {
+    const a = { ...defaultState, mermaid: '{"theme":"dark"}' };
+    const b = { ...defaultState, mermaid: '{"theme":"forest"}' };
+    expect(stateKey(a)).not.toBe(stateKey(b));
+  });
+});
+
+describe('addManualEntry', () => {
+  it('adds to the manual store only, never the auto store', () => {
+    expect(addManualEntry(codeState('graph TD\n A-->B'))).toBe(true);
+    expect(entriesFor('manual')).toHaveLength(1);
+    expect(entriesFor('auto')).toHaveLength(0);
+  });
+
+  it('returns false and does not add a duplicate of the latest entry', () => {
+    const state = codeState('graph TD\n A-->B');
+    expect(addManualEntry(state)).toBe(true);
+    expect(addManualEntry(state)).toBe(false);
+    expect(entriesFor('manual')).toHaveLength(1);
+  });
+
+  it('treats states differing only in volatile/view fields as duplicates', () => {
+    expect(addManualEntry({ ...defaultState, code: 'graph TD\n A-->B', renderCount: 1 })).toBe(
+      true
+    );
+    expect(
+      addManualEntry({
+        ...defaultState,
+        code: 'graph TD\n A-->B',
+        panZoom: false,
+        renderCount: 2,
+        updateDiagram: true
+      })
+    ).toBe(false);
+    expect(entriesFor('manual')).toHaveLength(1);
+  });
+
+  it('adds a new entry when the code changes', () => {
+    expect(addManualEntry(codeState('graph TD\n A-->B'))).toBe(true);
+    expect(addManualEntry(codeState('graph TD\n A-->C'))).toBe(true);
+    expect(entriesFor('manual')).toHaveLength(2);
+  });
+
+  it('generates an id and a name for each entry', () => {
+    addManualEntry(codeState('graph TD\n A-->B'));
+    const [entry] = entriesFor('manual');
+    expect(entry.id).toBeTruthy();
+    expect(entry.name).toBeTruthy();
+    expect(entry.type).toBe('manual');
+  });
+});
+
+describe('addAutoEntry', () => {
+  it('adds to the auto store only, never the manual store', () => {
+    expect(addAutoEntry(codeState('graph TD\n A-->B'))).toBe(true);
+    expect(entriesFor('auto')).toHaveLength(1);
+    expect(entriesFor('manual')).toHaveLength(0);
+  });
+
+  it('returns false and does not add a duplicate of the latest entry', () => {
+    const state = codeState('graph TD\n A-->B');
+    expect(addAutoEntry(state)).toBe(true);
+    expect(addAutoEntry(state)).toBe(false);
+    expect(entriesFor('auto')).toHaveLength(1);
+  });
+
+  it('caps the auto store at 30 entries, dropping the oldest', () => {
+    for (let i = 0; i < 35; i++) {
+      addAutoEntry(codeState(`graph TD\n A-->B${i}`));
+    }
+    const entries = entriesFor('auto');
+    expect(entries).toHaveLength(30);
+    expect(entries[0].state.code).toBe('graph TD\n A-->B34');
+  });
+});
+
+describe('historyState.entries', () => {
+  it('reflects the active mode', () => {
+    addManualEntry(codeState('manual-code'));
+    addAutoEntry(codeState('auto-code'));
+
+    setMode('manual');
+    expect(historyState.entries).toHaveLength(1);
+    expect(historyState.entries[0].state.code).toBe('manual-code');
+
+    setMode('auto');
+    expect(historyState.entries).toHaveLength(1);
+    expect(historyState.entries[0].state.code).toBe('auto-code');
+
+    setMode('loader');
+    expect(historyState.entries).toHaveLength(0);
+  });
+});
+
+describe('removeEntry / clearActive', () => {
+  it('removes a single entry from the active store by id', () => {
+    addManualEntry(codeState('graph TD\n A-->B'));
+    addManualEntry(codeState('graph TD\n A-->C'));
+    setMode('manual');
+    const target = historyState.entries[1].id;
+    removeEntry(target);
+    expect(historyState.entries).toHaveLength(1);
+    expect(historyState.entries.some((e) => e.id === target)).toBe(false);
+  });
+
+  it('clears all entries in the active store only', () => {
+    addManualEntry(codeState('graph TD\n A-->B'));
+    addAutoEntry(codeState('graph TD\n A-->C'));
+    setMode('manual');
+    clearActive();
+    expect(entriesFor('manual')).toHaveLength(0);
+    expect(entriesFor('auto')).toHaveLength(1);
+  });
+
+  it('does nothing in loader mode', () => {
+    setLoaderEntries([
+      { name: 'rev', state: defaultState, time: 1, type: 'loader', url: 'http://x' }
+    ]);
+    setMode('loader');
+    clearActive();
+    expect(historyState.entries).toHaveLength(1);
+  });
+});
+
+describe('setLoaderEntries', () => {
+  it('replaces the in-memory revisions and assigns ids', () => {
+    setLoaderEntries([
+      { name: 'v1', state: defaultState, time: 1, type: 'loader', url: 'http://x/1' },
+      { name: 'v2', state: defaultState, time: 2, type: 'loader', url: 'http://x/2' }
+    ]);
+    setMode('loader');
+    expect(historyState.entries).toHaveLength(2);
+    expect(historyState.entries.every((e) => e.id)).toBe(true);
+
+    setLoaderEntries([
+      { name: 'only', state: defaultState, time: 3, type: 'loader', url: 'http://x/3' }
+    ]);
+    expect(historyState.entries).toHaveLength(1);
+    expect(historyState.entries[0].name).toBe('only');
+  });
+});
+
+describe('restoreEntries', () => {
+  it('routes each entry to the store matching its own type', () => {
+    const result = restoreEntries([
+      { id: 'a1', name: 'a', state: defaultState, time: 10, type: 'auto' },
+      { id: 'm1', name: 'm', state: defaultState, time: 20, type: 'manual' }
+    ]);
+    expect(result.restored).toBe(2);
+    expect(entriesFor('auto').map((e) => e.id)).toEqual(['a1']);
+    expect(entriesFor('manual').map((e) => e.id)).toEqual(['m1']);
+  });
+
+  it('skips duplicates by id and reports them', () => {
+    restoreEntries([{ id: 'm1', name: 'm', state: defaultState, time: 20, type: 'manual' }]);
+    const result = restoreEntries([
+      { id: 'm1', name: 'm', state: defaultState, time: 20, type: 'manual' },
+      { id: 'm2', name: 'm2', state: defaultState, time: 30, type: 'manual' }
+    ]);
+    expect(result.restored).toBe(1);
+    expect(result.duplicates).toBe(1);
+    expect(entriesFor('manual')).toHaveLength(2);
+  });
+
+  it('reports invalid entries and does not restore them', () => {
+    const result = restoreEntries([
+      { id: 'm1', name: 'm', state: defaultState, time: 20, type: 'manual' },
+      { foo: 'bar' } as unknown as HistoryEntry
+    ]);
+    expect(result.restored).toBe(1);
+    expect(result.invalid).toBe(1);
+  });
+
+  it('sorts restored entries newest first', () => {
+    restoreEntries([
+      { id: 'm1', name: 'old', state: defaultState, time: 10, type: 'manual' },
+      { id: 'm2', name: 'new', state: defaultState, time: 30, type: 'manual' },
+      { id: 'm3', name: 'mid', state: defaultState, time: 20, type: 'manual' }
+    ]);
+    expect(entriesFor('manual').map((e) => e.time)).toEqual([30, 20, 10]);
+  });
+
+  it('restores entries whose time is 0 (epoch) instead of treating them as invalid', () => {
+    const result = restoreEntries([
+      { id: 'm0', name: 'epoch', state: defaultState, time: 0, type: 'manual' }
+    ]);
+    expect(result.restored).toBe(1);
+    expect(result.invalid).toBe(0);
+    expect(entriesFor('manual')).toHaveLength(1);
+  });
+});
+
+describe('injectHistoryIDs migration', () => {
+  it('adds ids to persisted entries that lack them', () => {
+    window.localStorage.setItem(
+      'manualHistoryStore',
+      '[{"state":{"code":"a"},"time":1,"type":"manual","name":"x"}]'
+    );
+    window.localStorage.setItem(
+      'autoHistoryStore',
+      '[{"state":{"code":"b"},"time":2,"type":"auto","name":"y"}]'
+    );
+    injectHistoryIDs();
+    const manual = JSON.parse(
+      window.localStorage.getItem('manualHistoryStore') ?? '[]'
+    ) as HistoryEntry[];
+    const auto = JSON.parse(
+      window.localStorage.getItem('autoHistoryStore') ?? '[]'
+    ) as HistoryEntry[];
+    expect(manual).toHaveLength(1);
+    expect(auto).toHaveLength(1);
+    expect(manual.every(({ id }) => id !== undefined)).toBe(true);
+    expect(auto.every(({ id }) => id !== undefined)).toBe(true);
+  });
+});
+
+describe('auto-save lifecycle', () => {
+  afterEach(() => {
+    stopAutoSave();
+    vi.useRealTimers();
+  });
+
+  it('records an auto entry on each interval from the current editor state', () => {
+    vi.useFakeTimers();
+    replaceInputState(codeState('graph TD\n auto-saved'));
+    startAutoSave();
+    vi.advanceTimersByTime(60_000);
+    const entries = entriesFor('auto');
+    expect(entries).toHaveLength(1);
+    expect(entries[0].state.code).toBe('graph TD\n auto-saved');
+  });
+
+  it('is idempotent: calling startAutoSave twice does not double-record', () => {
+    vi.useFakeTimers();
+    replaceInputState(codeState('graph TD\n once'));
+    startAutoSave();
+    startAutoSave();
+    vi.advanceTimersByTime(60_000);
+    expect(entriesFor('auto')).toHaveLength(1);
+  });
+
+  it('stops recording after stopAutoSave', () => {
+    vi.useFakeTimers();
+    replaceInputState(codeState('graph TD\n stoppable'));
+    startAutoSave();
+    vi.advanceTimersByTime(60_000);
+    stopAutoSave();
+    replaceInputState(codeState('graph TD\n after-stop'));
+    vi.advanceTimersByTime(60_000);
+    expect(entriesFor('auto')).toHaveLength(1);
+  });
+});
@@ -3,7 +3,7 @@
  import * as Popover from '$/components/ui/popover';
  import { Switch } from '$/components/ui/switch';
  import { env } from '$/util/env';
-  import { urlsStore } from '$/util/state';
+  import { urls } from '$/util/state.svelte';
  import { logMermaidChartClick } from '$/util/stats';
  import { cn } from '$/utils';
  import { mode, setMode } from 'mode-watcher';
@@ -28,14 +28,14 @@
    sharesData?: boolean;
    checkDiagramType?: boolean;
    isSectionEnd?: boolean;
-    renderer: (item: Omit<MenuItem, 'renderer'>) => ReturnType<Snippet>;
+    renderer: Snippet<[Omit<MenuItem, 'renderer'>]>;
  }

  const menuItems: MenuItem[] = $derived([
-    { label: 'New', icon: AddIcon, href: $urlsStore.new, renderer: menuItem },
+    { label: 'New', icon: AddIcon, href: urls.current.new, renderer: menuItem },
    { label: 'Duplicate', icon: DuplicateIcon, href: window.location.href, renderer: menuItem },
    {
-      href: $urlsStore.mermaidChart({ medium: 'main_menu' }).playground,
+      href: urls.current.mermaidChart({ medium: 'main_menu' }).playground,
      icon: PlaygroundIcon,
      isSectionEnd: true,
      label: 'Edit in Playground',
@@ -62,7 +62,7 @@
    },
    {
      checkDiagramType: false,
-      href: $urlsStore.mermaidChart({ medium: 'main_menu' }).plugins,
+      href: urls.current.mermaidChart({ medium: 'main_menu' }).plugins,
      icon: PluginIcon,
      label: 'Plugins',
      onclick: () => logMermaidChartClick('plugins'),
@@ -79,7 +79,7 @@
    {
      checkDiagramType: false,
      class: 'text-accent border-b-0',
-      href: $urlsStore.mermaidChart({ medium: 'main_menu' }).home,
+      href: urls.current.mermaidChart({ medium: 'main_menu' }).home,
      icon: MermaidChartIcon,
      label: 'Mermaid',
      onclick: () => logMermaidChartClick('mermaidHome'),
@@ -89,7 +89,7 @@
  ]);
 </script>

-{#snippet menuItem(options: MenuItem)}
+{#snippet menuItem(options: Omit<MenuItem, 'renderer'>)}
  <a
    href={options.href}
    target="_blank"
@@ -104,7 +104,7 @@
  </a>
 {/snippet}

-{#snippet mcMenuItem(item: MenuItem)}
+{#snippet mcMenuItem(item: Omit<MenuItem, 'renderer'>)}
  <McWrapper
    side="right"
    labelPrefix={item.sharesData === false ? 'Opens a new tab in' : undefined}
@@ -114,7 +114,7 @@
  </McWrapper>
 {/snippet}

-{#snippet darkModeMenuItem(options: MenuItem)}
+{#snippet darkModeMenuItem(options: Omit<MenuItem, 'renderer'>)}
  <div
    class={cn(
      'flex cursor-pointer items-center justify-between border-b-2 px-3 py-2 hover:bg-muted',
@@ -1,6 +1,6 @@
 <script lang="ts">
  import type { EditorProps } from '$/types';
-  import { stateStore } from '$/util/state';
+  import { validatedState } from '$/util/state.svelte';
  import { json, jsonLanguage } from '@codemirror/lang-json';
  import { markdown } from '@codemirror/lang-markdown';
  import { yamlFrontmatter } from '@codemirror/lang-yaml';
@@ -15,8 +15,12 @@

  let editorView: EditorView | undefined;
  let editorContainer: HTMLDivElement;
-  let currentText = $state('');
+  // Deliberately not $state: the sync effect below both reads and writes it,
+  // so a reactive currentText would make every keystroke re-run the effect
+  // against the not-yet-revalidated state and revert the user's input.
+  let currentText = '';
  const themeCompartment = new Compartment();
+  const languageCompartment = new Compartment();

  const { onUpdate }: EditorProps = $props();

@@ -27,8 +31,6 @@
  });

  onMount(() => {
-    const languageCompartment = new Compartment();
-
    editorView = new EditorView({
      state: EditorState.create({
        doc: currentText,
@@ -62,37 +64,37 @@
      parent: editorContainer
    });

-    const unsubscribeState = stateStore.subscribe(({ editorMode, code, mermaid }) => {
-      const text = editorMode === 'code' ? code : mermaid;
-      if (currentText === text || !editorView) {
-        return;
-      }
-      currentText = text;
-      editorView.dispatch({
-        changes: {
-          from: 0,
-          to: editorView.state.doc.length,
-          insert: text
-        }
-      });
-      const stateLanguage = editorView.state.facet(language);
-      const isStateJson = stateLanguage === jsonLanguage;
-      const isCodeJson = editorMode === 'config';
-      if (stateLanguage && isStateJson === isCodeJson) {
-        return;
-      }
-      editorView.dispatch({
-        effects: languageCompartment.reconfigure(
-          isCodeJson ? json() : yamlFrontmatter({ content: markdown() })
-        )
-      });
-    });
-
    return () => {
-      unsubscribeState();
      editorView?.destroy();
    };
  });
+
+  $effect(() => {
+    const { editorMode, code, mermaid } = validatedState.current;
+    const text = editorMode === 'code' ? code : mermaid;
+    if (currentText === text || !editorView) {
+      return;
+    }
+    currentText = text;
+    editorView.dispatch({
+      changes: {
+        from: 0,
+        to: editorView.state.doc.length,
+        insert: text
+      }
+    });
+    const stateLanguage = editorView.state.facet(language);
+    const isStateJson = stateLanguage === jsonLanguage;
+    const isCodeJson = editorMode === 'config';
+    if (stateLanguage && isStateJson === isCodeJson) {
+      return;
+    }
+    editorView.dispatch({
+      effects: languageCompartment.reconfigure(
+        isCodeJson ? json() : yamlFrontmatter({ content: markdown() })
+      )
+    });
+  });
 </script>

 <div bind:this={editorContainer} class="size-full"></div>
@@ -12,8 +12,8 @@
  import MainMenu from '$/components/MainMenu.svelte';
  import { Button } from '$/components/ui/button';
  import { Separator } from '$/components/ui/separator';
-  import { dismissPromotion, getActivePromotion } from '$lib/util/promos/promo';
-  import type { ComponentProps, Snippet } from 'svelte';
+  import { dismissPromotion, getActivePromotion } from '$lib/util/promos/promo.svelte';
+  import { untrack, type ComponentProps, type Snippet } from 'svelte';
  import MermaidIcon from '~icons/custom/mermaid';
  import CloseIcon from '~icons/material-symbols/close-rounded';
  import GithubIcon from '~icons/mdi/github';
@@ -41,7 +41,7 @@
    }
  ];

-  let activePromotion = $state(hidePromotion ? undefined : getActivePromotion());
+  let activePromotion = $state(untrack(() => (hidePromotion ? undefined : getActivePromotion())));

  const trackBannerClick = () => {
    if (!activePromotion) {
@@ -84,7 +84,7 @@
  <div class="flex flex-1 items-center gap-2">
    <MainMenu />
    <MermaidIcon class="size-6" />
-    <a href={resolve('/')} class="whitespace-nowrap text-accent">
+    <a href={resolve('/', {})} class="whitespace-nowrap text-accent">
      {#if !mobileToggle}
        Mermaid
      {/if}
@@ -3,7 +3,7 @@
  import { Button } from '$/components/ui/button';
  import { Separator } from '$/components/ui/separator';
  import type { PanZoomState } from '$/util/panZoom';
-  import { urlsStore } from '$/util/state';
+  import { urls } from '$/util/state.svelte';
  import ExpandIcon from '~icons/material-symbols/open-in-full-rounded';
  import ArrowsToCircleIcon from '~icons/material-symbols/screenshot-frame-2';
  import MagnifyingGlassPlusIcon from '~icons/material-symbols/zoom-in';
@@ -28,7 +28,7 @@
    <MagnifyingGlassPlusIcon />
  </Button>
  <Separator orientation="vertical" class="hidden sm:block" />
-  <Button variant="ghost" size="icon" title="Full Screen" href={$urlsStore.view} target="_blank">
+  <Button variant="ghost" size="icon" title="Full Screen" href={urls.current.view} target="_blank">
    <ExpandIcon />
  </Button>
 </FloatingToolbar>
@@ -1,13 +1,20 @@
 <script lang="ts">
  import Card from '$/components/Card/Card.svelte';
-  import { Button } from '$/components/ui/button';
-  import { getSampleDiagrams } from '$/util/mermaid';
-  import { updateCode } from '$lib/util/state';
+  import { Button, buttonVariants } from '$/components/ui/button';
+  import * as Popover from '$/components/ui/popover';
+  import { getSampleDiagrams, type SampleExample } from '$/util/mermaid';
+  import { updateCode } from '$lib/util/state.svelte';
  import { logEvent } from '$lib/util/stats';
+  import { cn } from '$lib/utils';
  import ShapesIcon from '~icons/material-symbols/account-tree-outline-rounded';
+  import ChevronDownIcon from '~icons/material-symbols/keyboard-arrow-down-rounded';

-  const extras = {
-    ZenUML: `zenuml
+  const extras: Record<string, SampleExample[]> = {
+    ZenUML: [
+      {
+        title: 'Order Service',
+        isDefault: true,
+        code: `zenuml
    title Order Service
    @Actor Client #FFEBE6
    @Boundary OrderController #0747A6
@@ -25,21 +32,24 @@
        if(order != null) {
          par {
            PurchaseService.createPO(order)
-            InvoiceService.createInvoice(order)      
-          }      
+            InvoiceService.createInvoice(order)
+          }
        }
      }
    }
    `
+      }
+    ]
  };

-  const samples = { ...getSampleDiagrams(), ...extras } as const;
-  const loadSampleDiagram = (diagramType: string): void => {
-    updateCode(samples[diagramType], {
+  const samples = { ...getSampleDiagrams(), ...extras };
+
+  const loadSampleDiagram = (diagramType: string, example: SampleExample): void => {
+    updateCode(example.code, {
      resetPanZoom: true,
      updateDiagram: true
    });
-    logEvent('loadSampleDiagram', { diagramType });
+    logEvent('loadSampleDiagram', { diagramType, exampleTitle: example.title });
  };

  const mainDiagrams = [
@@ -62,12 +72,39 @@
 <Card title="Sample Diagrams" isOpen isStackable icon={{ component: ShapesIcon }}>
  <div class="flex h-fit max-h-52 flex-wrap gap-2 overflow-y-auto p-2">
    {#each diagramOrder as sample (sample)}
-      <Button
-        size="sm"
-        class="w-fit min-w-20 flex-grow normal-case"
-        onclick={() => loadSampleDiagram(sample)}>
-        {sample}
-      </Button>
+      {@const examples = samples[sample]}
+      <div class="flex min-w-20 flex-grow">
+        <Button
+          size="sm"
+          class={cn('flex-grow normal-case', examples.length > 1 && 'rounded-r-none')}
+          onclick={() => loadSampleDiagram(sample, examples[0])}>
+          {sample}
+        </Button>
+        {#if examples.length > 1}
+          <Popover.Root>
+            <Popover.Trigger
+              aria-label="Choose a {sample} example"
+              class={cn(
+                buttonVariants({ size: 'sm' }),
+                'rounded-l-none border-l border-primary-foreground/30 px-0.5 [&_svg]:size-5'
+              )}>
+              <ChevronDownIcon />
+            </Popover.Trigger>
+            <Popover.Content align="start" class="flex w-fit flex-col gap-1 p-1">
+              {#each examples as example (example.title)}
+                <Popover.Close
+                  class={cn(
+                    buttonVariants({ variant: 'ghost', size: 'sm' }),
+                    'justify-start normal-case'
+                  )}
+                  onclick={() => loadSampleDiagram(sample, example)}>
+                  {example.title}
+                </Popover.Close>
+              {/each}
+            </Popover.Content>
+          </Popover.Root>
+        {/if}
+      </div>
    {/each}
  </div>
 </Card>
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
  import ExternalLinkWrapper from '$/components/ExternalLinkWrapper.svelte';
  import * as Dialog from '$/components/ui/dialog';
  import { env } from '$/util/env';
@@ -1,9 +1,9 @@
-<script>
+<script lang="ts">
  import { buttonVariants } from '$/components/ui/button';
  import * as Dialog from '$/components/ui/dialog';
  import { Separator } from '$/components/ui/separator';
  import { env } from '$/util/env';
-  import { urlsStore } from '$/util/state';
+  import { urls } from '$/util/state.svelte';
  import { asset } from '$app/paths';
  import ShareIcon from '~icons/material-symbols/share';
  import CopyInput from './CopyInput.svelte';
@@ -38,7 +38,7 @@
            <MermaidChartIcon class="size-5" />
            Mermaid Chart Playground
          </h2>
-          <CopyInput value={$urlsStore.mermaidChart({ medium: 'share' }).playground} />
+          <CopyInput value={urls.current.mermaidChart({ medium: 'share' }).playground} />
          <Dialog.Description>
            Opens the Mermaid Chart Playground with Mermaid AI, Visual Editor, and more.
          </Dialog.Description>
@@ -1,21 +1,27 @@
 <script lang="ts">
  import FloatingToolbar from '$/components/FloatingToolbar.svelte';
  import { Toggle } from '$/components/ui/toggle';
-  import { defaultState, inputStateStore } from '$/util/state';
+  import { defaultState, inputState, updateCodeStore } from '$/util/state.svelte';
  import RoughIcon from '~icons/material-symbols/draw-outline-rounded';
  import BackgroundIcon from '~icons/material-symbols/grid-4x4-rounded';

-  if ($inputStateStore.grid === undefined) {
+  if (inputState.grid === undefined) {
    // Handle cases where old states were saved without grid option
-    $inputStateStore.grid = defaultState.grid;
+    updateCodeStore({ grid: defaultState.grid });
  }
 </script>

 <FloatingToolbar>
-  <Toggle bind:pressed={$inputStateStore.rough} size="sm" title="Hand-Drawn">
+  <Toggle
+    bind:pressed={() => inputState.rough, (rough) => updateCodeStore({ rough })}
+    size="sm"
+    title="Hand-Drawn">
    <RoughIcon />
  </Toggle>
-  <Toggle bind:pressed={$inputStateStore.grid} size="sm" title="Background Grid">
+  <Toggle
+    bind:pressed={() => inputState.grid ?? defaultState.grid, (grid) => updateCodeStore({ grid })}
+    size="sm"
+    title="Background Grid">
    <BackgroundIcon />
  </Toggle>
 </FloatingToolbar>
@@ -3,7 +3,7 @@
  import { recordRenderTime, shouldRefreshView } from '$/util/autoSync';
  import { render as renderDiagram } from '$/util/mermaid';
  import { PanZoomState } from '$/util/panZoom';
-  import { inputStateStore, stateStore, updateCodeStore } from '$/util/state';
+  import { updateCodeStore, validatedState } from '$/util/state.svelte';
  import { saveStatistics } from '$/util/stats';
  import FontAwesome, { mayContainFontAwesome } from '$lib/components/FontAwesome.svelte';
  import uniqueID from 'lodash-es/uniqueId';
@@ -133,18 +133,20 @@
    const renderTime = Date.now() - startTime;
    saveStatistics({ code, diagramType, isRough: state.rough, renderTime });
    recordRenderTime(renderTime, () => {
-      $inputStateStore.updateDiagram = true;
+      updateCodeStore({ updateDiagram: true });
    });
  };

  onMount(() => {
    setupPanZoomObserver();
-    // Queue state changes to avoid race condition
-    let pendingStateChange = Promise.resolve();
-    stateStore.subscribe((state) => {
-      // eslint-disable-next-line @typescript-eslint/no-empty-function
-      pendingStateChange = pendingStateChange.then(() => handleStateChange(state).catch(() => {}));
-    });
+  });
+
+  // Queue state changes to avoid race condition
+  let pendingStateChange = Promise.resolve();
+  $effect(() => {
+    const state = validatedState.current;
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    pendingStateChange = pendingStateChange.then(() => handleStateChange(state).catch(() => {}));
  });
 </script>

@@ -1,3 +1,5 @@
+<script lang="ts"></script>
+
 <div class="text-center">
  <a
    href="https://mermaid.ai/privacy-policy"
@@ -24,8 +24,12 @@
  }: ToggleGroupPrimitive.RootProps & ToggleVariants = $props();

  setToggleGroupCtx({
-    variant,
-    size
+    get variant() {
+      return variant;
+    },
+    get size() {
+      return size;
+    }
  });
 </script>

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { addHistoryEntry } from '$lib/components/History/history';
+import { setLoaderEntries } from '$lib/components/History/historyState.svelte';
 import type { State } from '$lib/types';
-import { defaultState } from '$lib/util/state';
+import { defaultState } from '$lib/util/state.svelte';
 import { fetchJSON, fetchText } from '$lib/util/util';

 const codeFileName = 'code.mmd';
@@ -117,14 +117,16 @@ export const loadGistData = async (gistURL: string): Promise<State> => {
    throw new Error('Invalid gist provided');
  }
  const state = getStateFromGist(entry, gistURL);
-  for (const gist of gistHistory) {
-    addHistoryEntry({
-      name: `${gist.author} v${gist.version}`,
-      state: getStateFromGist(gist),
-      time: gist.time,
-      type: 'loader',
-      url: gist.url
-    });
-  }
+  setLoaderEntries(
+    gistHistory
+      .map((gist) => ({
+        name: `${gist.author} v${gist.version}`,
+        state: getStateFromGist(gist),
+        time: gist.time,
+        type: 'loader' as const,
+        url: gist.url
+      }))
+      .reverse()
+  );
  return state;
 };
@@ -1,5 +1,5 @@
 import type { Loader, State } from '$lib/types';
-import { defaultState, sanitizeConfig, updateCodeStore } from '$lib/util/state';
+import { defaultState, sanitizeConfig, updateCodeStore } from '$lib/util/state.svelte';
 import { fetchText } from '$lib/util/util';
 import { loadGistData } from './gist';

@@ -0,0 +1,14 @@
+import type { LoadingState } from '$lib/types';
+
+export const loadingState = $state<LoadingState>({ loading: false });
+
+export const initLoading = async <T>(message: string, task: Promise<T>): Promise<T> => {
+  loadingState.loading = true;
+  loadingState.message = message;
+  try {
+    return await task;
+  } finally {
+    loadingState.loading = false;
+    loadingState.message = undefined;
+  }
+};
@@ -1,20 +0,0 @@
-import { writable } from 'svelte/store';
-import type { Writable } from 'svelte/store';
-import type { LoadingState } from '$lib/types';
-
-const defaultLoading: LoadingState = {
-  loading: false
-};
-
-export const loadingStateStore: Writable<LoadingState> = writable(defaultLoading);
-export const initLoading = async <T>(message: string, task: Promise<T>): Promise<T> => {
-  loadingStateStore.set({
-    loading: true,
-    message
-  });
-  const result: T = await task;
-  loadingStateStore.set({
-    loading: false
-  });
-  return result;
-};
@@ -0,0 +1,23 @@
+import { describe, expect, it } from 'vitest';
+import { getSampleDiagrams } from './mermaid';
+
+describe('getSampleDiagrams', () => {
+  const samples = getSampleDiagrams();
+
+  it('should return at least one example per diagram', () => {
+    expect(Object.keys(samples).length).toBeGreaterThan(0);
+    for (const [name, examples] of Object.entries(samples)) {
+      expect(examples.length, `${name} should have at least one example`).toBeGreaterThan(0);
+      for (const example of examples) {
+        expect(example.title, `${name} has an example without a title`).toBeTruthy();
+        expect(example.code, `${name} example "${example.title}" has no code`).toBeTruthy();
+      }
+    }
+  });
+
+  it('should list the default example first', () => {
+    for (const [name, examples] of Object.entries(samples)) {
+      expect(examples[0].isDefault, `${name} should have its default example first`).toBe(true);
+    }
+  });
+});
@@ -49,20 +49,20 @@ export const standardizeDiagramType = (diagramType: string) => {

 type DiagramDefinition = (typeof diagramData)[number];

+export type SampleExample = DiagramDefinition['examples'][number];
+
 const isValidDiagram = (diagram: DiagramDefinition): diagram is Required<DiagramDefinition> => {
  return Boolean(diagram.name && diagram.examples && diagram.examples.length > 0);
 };

-export const getSampleDiagrams = () => {
-  const diagrams = diagramData
-    .filter((d) => isValidDiagram(d))
-    .map(({ examples, ...rest }) => ({
-      ...rest,
-      example: examples?.filter(({ isDefault }) => isDefault)[0]
-    }));
-  const examples: Record<string, string> = {};
-  for (const diagram of diagrams) {
-    examples[diagram.name.replace(/ (Diagram|Chart|Graph)/, '')] = diagram.example.code;
+export const getSampleDiagrams = (): Record<string, SampleExample[]> => {
+  const samples: Record<string, SampleExample[]> = {};
+  for (const diagram of diagramData.filter((d) => isValidDiagram(d))) {
+    // The default example comes first, so it is loaded when clicking the
+    // diagram name and shown at the top of the example dropdown.
+    samples[diagram.name.replace(/ (Diagram|Chart|Graph)/, '')] = [...diagram.examples].sort(
+      (a, b) => Number(b.isDefault ?? false) - Number(a.isDefault ?? false)
+    );
  }
-  return examples;
+  return samples;
 };
@@ -1,6 +1,5 @@
-import { writable, get, type Writable } from 'svelte/store';
-import { persist, localStorage } from '$lib/util/persist';
-import { injectHistoryIDs } from '$lib/components/History/history';
+import { injectHistoryIDs } from '$lib/components/History/historyState.svelte';
+import { persisted } from '$lib/util/persist.svelte';
 import { logEvent } from './stats';

 interface MigrationState {
@@ -11,14 +10,10 @@ const migrations: Record<string, () => void> = {
  injectHistoryIDs
 };

-const migrationStore: Writable<MigrationState> = persist(
-  writable({ version: -1 }),
-  localStorage(),
-  'migrations'
-);
+const migrationState = persisted<MigrationState>('migrations', { version: -1 });

 export const applyMigrations = (): void => {
-  const { version }: MigrationState = get(migrationStore);
+  const { version } = migrationState.value;
  const allMigrations = Object.entries(migrations);
  if (version === allMigrations.length - 1) {
    return;
@@ -29,7 +24,7 @@ export const applyMigrations = (): void => {
    console.log(`Applying migration ${i}: ${key}.`);
    fn();
    logEvent('migration', { key });
-    migrationStore.set({ version: i });
+    migrationState.value = { version: i };
  }
  logEvent('migration', { status: 'complete', from: version, to: allMigrations.length - 1 });
 };
@@ -14,7 +14,7 @@ describe('migrations', () => {
  });

  it('should migrate from v0 to v1', async () => {
-    const { applyMigrations } = await import('./migrations');
+    const { applyMigrations } = await import('./migrations.svelte');
    let manualHistoryStore: HistoryEntry[] = JSON.parse(
      window.localStorage.getItem('manualHistoryStore') ?? '[]'
    ) as HistoryEntry[];
@@ -0,0 +1,66 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+import { persisted, readJSON, writeJSON } from './persist.svelte';
+
+beforeEach(() => {
+  window.localStorage.clear();
+});
+
+describe('readJSON', () => {
+  it('returns the fallback when the key is missing', () => {
+    expect(readJSON('missing', 'fallback')).toBe('fallback');
+  });
+
+  it('returns the parsed value when present', () => {
+    window.localStorage.setItem('key', '{"a":1}');
+    expect(readJSON<{ a: number }>('key', { a: 0 })).toEqual({ a: 1 });
+  });
+
+  it('returns the fallback when the stored value is corrupt', () => {
+    window.localStorage.setItem('corrupt', '{oops');
+    expect(readJSON('corrupt', 'fallback')).toBe('fallback');
+    // The previous persistence layer could write the literal string "undefined".
+    window.localStorage.setItem('legacy', 'undefined');
+    expect(readJSON('legacy', 'fallback')).toBe('fallback');
+  });
+
+  it('returns the fallback when the stored value parses to null', () => {
+    // The pre-runes persistence layer treated a stored null as absent.
+    window.localStorage.setItem('legacy-null', 'null');
+    expect(readJSON('legacy-null', 'fallback')).toBe('fallback');
+  });
+});
+
+describe('writeJSON', () => {
+  it('round-trips values through localStorage as JSON', () => {
+    writeJSON('key', { nested: { value: 2 } });
+    expect(window.localStorage.getItem('key')).toBe('{"nested":{"value":2}}');
+    expect(readJSON('key', {})).toEqual({ nested: { value: 2 } });
+  });
+});
+
+describe('persisted', () => {
+  it('initialises from storage when a value exists', () => {
+    window.localStorage.setItem('counter', '5');
+    const counter = persisted('counter', 0);
+    expect(counter.value).toBe(5);
+  });
+
+  it('uses the initial value when storage is empty, without writing it', () => {
+    const counter = persisted('counter', 7);
+    expect(counter.value).toBe(7);
+    expect(window.localStorage.getItem('counter')).toBeNull();
+  });
+
+  it('persists on assignment and exposes the new value', () => {
+    const counter = persisted('counter', 0);
+    counter.value = 42;
+    expect(counter.value).toBe(42);
+    expect(window.localStorage.getItem('counter')).toBe('42');
+  });
+
+  it('uses the initial value when storage holds a literal null', () => {
+    window.localStorage.setItem('settings', 'null');
+    const settings = persisted('settings', { theme: 'default' });
+    expect(settings.value).toEqual({ theme: 'default' });
+  });
+});
@@ -0,0 +1,53 @@
+/**
+ * Runes-based localStorage persistence, shared by the persisted state in
+ * `state.svelte.ts`, `migrations.svelte.ts`, `promo.svelte.ts` and History.
+ *
+ * Values are stored as plain JSON. Reads of missing or corrupt values fall
+ * back to the provided default, so values written by older versions of the
+ * editor (which serialized plain objects to the same JSON shape) stay loadable.
+ */
+
+const hasStorage = (): boolean => typeof window !== 'undefined' && !!window.localStorage;
+
+export const readJSON = <T>(key: string, fallback: T): T => {
+  if (!hasStorage()) {
+    return fallback;
+  }
+  try {
+    const raw = window.localStorage.getItem(key);
+    if (raw === null) {
+      return fallback;
+    }
+    // A stored literal "null" means the value is absent: the pre-runes
+    // persistence layer never wrote null and treated it as missing.
+    return (JSON.parse(raw) as T) ?? fallback;
+  } catch {
+    return fallback;
+  }
+};
+
+export const writeJSON = (key: string, value: unknown): void => {
+  if (hasStorage()) {
+    window.localStorage.setItem(key, JSON.stringify(value));
+  }
+};
+
+export interface Persisted<T> {
+  value: T;
+}
+
+// A localStorage-backed reactive value. Reads on init, writes on every set.
+// Raw state: replace `value` wholesale to change it. With a deep proxy,
+// in-place mutation would update the UI without ever being persisted.
+export const persisted = <T>(key: string, initial: T): Persisted<T> => {
+  let value = $state.raw<T>(readJSON(key, initial));
+  return {
+    get value() {
+      return value;
+    },
+    set value(next: T) {
+      value = next;
+      writeJSON(key, next);
+    }
+  };
+};
@@ -1,254 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-// Copied from https://github.com/MacFJA/svelte-persistent-store
-// # The MIT License (MIT)
-
-// Copyright (c) 2021 [MacFJA](https://github.com/MacFJA)
-
-// > Permission is hereby granted, free of charge, to any person obtaining a copy
-// > of this software and associated documentation files (the "Software"), to deal
-// > in the Software without restriction, including without limitation the rights
-// > to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-// > copies of the Software, and to permit persons to whom the Software is
-// > furnished to do so, subject to the following conditions:
-// >
-// > The above copyright notice and this permission notice shall be included in
-// > all copies or substantial portions of the Software.
-// >
-// > THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-// > IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-// > FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-// > AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-// > LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-// > OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-// > THE SOFTWARE.
-
-import ESSerializer from 'esserializer';
-import type { Writable } from 'svelte/store';
-
-/**
- * Disabled warnings about missing/unavailable storages
- */
-export function disableWarnings(): void {
-  noWarnings = true;
-}
-/**
- * If set to true, no warning will be emitted if the requested Storage is not found.
- * This option can be useful when the lib is used on a server.
- */
-let noWarnings = false;
-/**
- * List of storages where the warning have already been displayed.
- */
-const alreadyWarnFor: string[] = [];
-
-/**
- * Add a log to indicate that the requested Storage have not been found.
- * @param {string} storageName
- */
-const warnStorageNotFound = (storageName: string) => {
-  const isProduction = typeof process !== 'undefined' && process.env.NODE_ENV === 'production';
-
-  if (!noWarnings && !alreadyWarnFor.includes(storageName) && !isProduction) {
-    let message = `Unable to find the ${storageName}. No data will be persisted.`;
-    if (typeof window === 'undefined') {
-      message +=
-        '\n' +
-        'Are you running on a server? Most of storages are not available while running on a server.';
-    }
-    console.warn(message);
-    alreadyWarnFor.push(storageName);
-  }
-};
-
-const serialize = (value: unknown): string => ESSerializer.serialize(value);
-const deserialize = (value?: string | null): unknown => {
-  // @TODO: to remove in the next major
-  if (value === 'undefined') {
-    return undefined;
-  }
-
-  if (value !== null && value !== undefined) {
-    try {
-      return ESSerializer.deserialize(value);
-    } catch {
-      // Do nothing
-      // use the value "as is"
-    }
-    try {
-      return JSON.parse(value);
-    } catch {
-      // Do nothing
-      // use the value "as is"
-    }
-  }
-  return value;
-};
-
-/**
- * A store that keep it's value in time.
- */
-export interface PersistentStore<T> extends Writable<T> {
-  /**
-   * Delete the store value from the persistent storage
-   */
-  delete(): void;
-}
-
-/**
- * Storage interface
- */
-export interface StorageInterface<T> {
-  /**
-   * Get a value from the storage.
-   *
-   * If the value doesn't exists in the storage, `null` should be returned.
-   * This method MUST be synchronous.
-   * @param key The key/name of the value to retrieve
-   */
-  getValue(key: string): T | null;
-
-  /**
-   * Save a value in the storage.
-   * @param key The key/name of the value to save
-   * @param value The value to save
-   */
-  setValue(key: string, value: T): void;
-
-  /**
-   * Remove a value from the storage
-   * @param key The key/name of the value to remove
-   */
-  deleteValue(key: string): void;
-}
-
-export interface SelfUpdateStorageInterface<T> extends StorageInterface<T> {
-  /**
-   * Add a listener to the storage values changes
-   * @param {string} key The key to listen
-   * @param {(newValue: T) => void} listener The listener callback function
-   */
-  addListener(key: string, listener: (newValue: T) => void): void;
-  /**
-   * Remove a listener from the storage values changes
-   * @param {string} key The key that was listened
-   * @param {(newValue: T) => void} listener The listener callback function to remove
-   */
-  removeListener(key: string, listener: (newValue: T) => void): void;
-}
-
-/**
- * Make a store persistent
- * @param {Writable<*>} store The store to enhance
- * @param {StorageInterface} storage The storage to use
- * @param {string} key The name of the data key
- */
-export function persist<T>(
-  store: Writable<T>,
-  storage: StorageInterface<T>,
-  key: string
-): PersistentStore<T> {
-  const initialValue = storage.getValue(key);
-
-  if (null !== initialValue) {
-    store.set(initialValue);
-  }
-
-  if ('addListener' in storage) {
-    (storage as SelfUpdateStorageInterface<T>).addListener(key, (newValue) => {
-      store.set(newValue);
-    });
-  }
-
-  store.subscribe((value) => {
-    storage.setValue(key, value);
-  });
-
-  return {
-    ...store,
-    delete() {
-      storage.deleteValue(key);
-    }
-  };
-}
-
-function getBrowserStorage(
-  browserStorage: Storage,
-  listenExternalChanges = false
-): SelfUpdateStorageInterface<any> {
-  const listeners: { key: string; listener: (newValue: any) => void }[] = [];
-  const listenerFunction = (event: StorageEvent) => {
-    const eventKey = event.key;
-    if (event.storageArea === browserStorage) {
-      for (const { listener } of listeners.filter(({ key }) => key === eventKey)) {
-        listener(deserialize(event.newValue));
-      }
-    }
-  };
-  const connect = () => {
-    if (listenExternalChanges && typeof window !== 'undefined' && window.addEventListener) {
-      window.addEventListener('storage', listenerFunction);
-    }
-  };
-  const disconnect = () => {
-    if (listenExternalChanges && typeof window !== 'undefined' && window.removeEventListener) {
-      window.removeEventListener('storage', listenerFunction);
-    }
-  };
-
-  return {
-    addListener(key: string, listener: (newValue: any) => void) {
-      listeners.push({ key, listener });
-      if (listeners.length === 1) {
-        connect();
-      }
-    },
-    deleteValue(key: string) {
-      browserStorage.removeItem(key);
-    },
-    getValue(key: string): any {
-      const value = browserStorage.getItem(key);
-      return deserialize(value);
-    },
-    removeListener(key: string, listener: (newValue: any) => void) {
-      const index = listeners.indexOf({ key, listener });
-      if (index !== -1) {
-        listeners.splice(index, 1);
-      }
-      if (listeners.length === 0) {
-        disconnect();
-      }
-    },
-    setValue(key: string, value: any) {
-      browserStorage.setItem(key, serialize(value));
-    }
-  };
-}
-
-/**
- * Storage implementation that use the browser local storage
- * @param listenExternalChanges - Update the store if the localStorage is updated from another page
- */
-export function localStorage<T>(listenExternalChanges = false): StorageInterface<T> {
-  if (typeof window !== 'undefined' && window.localStorage) {
-    return getBrowserStorage(window.localStorage, listenExternalChanges);
-  }
-  warnStorageNotFound('window.localStorage');
-  return noopStorage();
-}
-
-/**
- * Storage implementation that do nothing
- */
-export function noopStorage<T>(): StorageInterface<T> {
-  return {
-    getValue(): null {
-      return null;
-    },
-    deleteValue() {
-      // Do nothing
-    },
-    setValue() {
-      // Do nothing
-    }
-  };
-}
@@ -1,9 +1,8 @@
 import { env } from '$lib/util/env';
 import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';
-import type { Component } from 'svelte';
-import { get, writable, type Writable } from 'svelte/store';
-import { localStorage, persist } from '../persist';
+import type { Component, Snippet } from 'svelte';
+import { persisted } from '../persist.svelte';
 import April2025 from './April2025.svelte';
 import JS2026 from './JS2026.svelte';

@@ -12,7 +11,7 @@ dayjs.extend(duration);
 interface Promotion {
  startDate: Date;
  endDate: Date;
-  component: Component;
+  component: Component<{ closeBanner: Snippet }>;
  hideDurationMs: number;
 }

@@ -35,25 +34,21 @@ export const dismissPromotion = (id?: string): void => {
  if (!id || !promotions[id]) {
    return;
  }
-  hiddenPromotionsStore.update((dismissedIDs) => {
-    dismissedIDs[id] = dayjs().add(promotions[id].hideDurationMs).valueOf();
-    return dismissedIDs;
-  });
+  hiddenPromotions.value = {
+    ...hiddenPromotions.value,
+    [id]: dayjs().add(promotions[id].hideDurationMs).valueOf()
+  };
 };

-const hiddenPromotionsStore: Writable<Record<string, number>> = persist(
-  writable({}),
-  localStorage(),
-  'hiddenPromotions'
-);
+const hiddenPromotions = persisted<Record<string, number>>('hiddenPromotions', {});

 export const getActivePromotion = (): (Promotion & { id: string }) | undefined => {
  if (!env.isEnabledMermaidChartLinks) {
    return;
  }

-  const hidePromotionsUntil = get(hiddenPromotionsStore);
-  const now = new Date();
+  const hidePromotionsUntil = hiddenPromotions.value;
+  const now = dayjs();
  const promotionWithID = Object.entries(promotions)
    .filter(
      ([id, p]) =>
@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest';
 import { serializeState, deserializeState, type SerdeType } from './serde';
-import { defaultState } from './state';
+import { defaultState } from './state.svelte';
 import type { State } from '$lib/types';

 const verifySerde = (state: State, serde?: SerdeType): string => {
@@ -0,0 +1,88 @@
+import type { State } from '$lib/types';
+import { flushSync } from 'svelte';
+import { describe, expect, it } from 'vitest';
+import {
+  defaultState,
+  inputState,
+  loadState,
+  replaceInputState,
+  toggleDarkTheme,
+  updateCode,
+  updateCodeStore,
+  updateConfig,
+  verifyState
+} from './state.svelte';
+
+// Runs `body` inside an effect and reports how often the effect (re-)runs.
+const countEffectRuns = (body: () => void): { runs: () => number; stop: () => void } => {
+  let runs = 0;
+  const stop = $effect.root(() => {
+    $effect(() => {
+      runs++;
+      body();
+    });
+  });
+  flushSync();
+  return { runs: () => runs, stop };
+};
+
+const readStoredState = (): State =>
+  JSON.parse(window.localStorage.getItem('codeStore') ?? '{}') as State;
+
+describe('update functions called from effects', () => {
+  // Effects that call an update function must not subscribe to the input
+  // state the function reads, or unrelated state changes re-fire the effect
+  // (and self-reads loop, e.g. the dark-theme effect in +layout.svelte).
+  const cases: [string, () => void][] = [
+    ['updateCodeStore', () => updateCodeStore({})],
+    ['updateCode', () => updateCode('graph TD\n inside-effect')],
+    ['updateConfig', () => updateConfig('{"theme":"default"}')],
+    ['toggleDarkTheme', () => toggleDarkTheme(false)],
+    ['replaceInputState', () => replaceInputState({ ...defaultState })],
+    ['verifyState', () => verifyState()],
+    ['loadState', () => loadState('')]
+  ];
+
+  it.each(cases)('%s does not make the calling effect track input state', (_name, call) => {
+    const counter = countEffectRuns(call);
+    try {
+      expect(counter.runs()).toBe(1);
+      updateCode('graph TD\n external-change');
+      updateConfig('{"theme":"forest"}');
+      updateCodeStore({ pan: { x: 1, y: 2 } });
+      flushSync();
+      expect(counter.runs()).toBe(1);
+    } finally {
+      counter.stop();
+    }
+  });
+});
+
+describe('update functions persist input state', () => {
+  it('updateCode writes the new code to localStorage', () => {
+    updateCode('graph TD\n persisted-by-test');
+    expect(readStoredState().code).toBe('graph TD\n persisted-by-test');
+  });
+
+  it('updateCodeStore merges partial state and persists it', () => {
+    updateCodeStore({ rough: true });
+    expect(inputState.rough).toBe(true);
+    expect(readStoredState().rough).toBe(true);
+  });
+
+  it('replaceInputState drops keys absent from the next state and persists', () => {
+    updateCodeStore({ pan: { x: 1, y: 2 } });
+    expect(inputState.pan).toEqual({ x: 1, y: 2 });
+    replaceInputState({ ...defaultState });
+    expect(inputState.pan).toBeUndefined();
+    expect(readStoredState().pan).toBeUndefined();
+    expect(readStoredState().code).toBe(defaultState.code);
+  });
+
+  it('verifyState forces panZoom back on', () => {
+    updateCodeStore({ panZoom: false });
+    verifyState();
+    expect(inputState.panZoom).toBe(true);
+    expect(readStoredState().panZoom).toBe(true);
+  });
+});
@@ -1,7 +1,8 @@
 import type { ErrorHash, MarkerData, State, ValidatedState } from '$/types';
+import { resolve } from '$app/paths';
 import { debounce, get as lodashGet } from 'lodash-es';
 import type { MermaidConfig } from 'mermaid';
-import { derived, get, writable, type Readable } from 'svelte/store';
+import { untrack } from 'svelte';
 import { env } from './env';
 import {
  extractErrorLineText,
@@ -9,7 +10,7 @@ import {
  replaceLineNumberInErrorMessage
 } from './errorHandling';
 import { defaultMermaidConfig, parse } from './mermaid';
-import { localStorage, persist } from './persist';
+import { readJSON, writeJSON } from './persist.svelte';
 import { deserializeState, pakoSerde, serializeState } from './serde';
 import { errorDebug, formatJSON, getUTMSource, MCBaseURL } from './util';

@@ -41,30 +42,35 @@ const urlParseFailedState = `flowchart TD
    G --> |"No :("| H(Try using the Timeline tab in History <br/>from same browser you used to create the diagram.)
    click D href "https://github.com/mermaid-js/mermaid-live-editor/issues/new?assignees=&labels=bug&template=bug_report.md&title=Broken%20link" "Raise issue"`;

-// inputStateStore handles all updates and is shared externally when exporting via URL, History, etc.
-export const inputStateStore = persist(writable(defaultState), localStorage(), 'codeStore');
+const CODE_STORE_KEY = 'codeStore';

-export const currentState: ValidatedState = (() => {
-  const state = get(inputStateStore);
-  return {
-    ...state,
-    editorMode: state.editorMode ?? 'code',
-    error: undefined,
-    errorMarkers: [],
-    serialized: serializeState(state)
-  };
-})();
+// The single mutable input state; only update() below may write to it.
+// The fallback is cloned so mutations never write through to defaultState.
+const input = $state<State>(readJSON(CODE_STORE_KEY, { ...defaultState }));
+
+// inputState is shared externally when exporting via URL, History, etc.
+// It is reactive for reads; the read-only type keeps writes inside this
+// module, where update() persists and re-validates every change.
+export const inputState: Readonly<State> = input;
+
+const validatedStateOf = (state: State, serialized: string): ValidatedState => ({
+  ...state,
+  editorMode: state.editorMode ?? 'code',
+  error: undefined,
+  errorMarkers: [],
+  serialized
+});
+
+const initialState = $state.snapshot(input) as State;
+// Only ever replaced wholesale, so raw (shallow) reactivity is enough.
+let validatedCurrent = $state.raw<ValidatedState>(
+  validatedStateOf(initialState, serializeState(initialState))
+);

 let lastDiagramType = '';

 const processState = async (state: State) => {
-  const processed: ValidatedState = {
-    ...state,
-    editorMode: state.editorMode ?? 'code',
-    error: undefined,
-    errorMarkers: [],
-    serialized: ''
-  };
+  const processed = validatedStateOf(state, '');
  // No changes should be done to fields part of `state`.
  try {
    processed.serialized = serializeState(state);
@@ -119,23 +125,48 @@ const processState = async (state: State) => {
  return processed;
 };

-// All internal reads should be done via stateStore, but it should not be persisted/shared externally.
-export const stateStore: Readable<ValidatedState> = derived(
-  [inputStateStore],
-  ([state], set) => {
-    void processState(state).then(set);
-  },
-  currentState
-);
+// Replaces the old URL-hash store subscription; assigned by initURLSubscription.
+let updateHash: ((serialized: string) => void) | undefined;

-export const urlsStore = derived([stateStore], ([{ code, serialized }]) => {
+// Persist the current input state and asynchronously re-validate it,
+// publishing the result to `validatedState` (and the URL hash, once
+// initURLSubscription has run). Only called from update(), which suppresses
+// dependency tracking.
+const persistAndProcess = (): void => {
+  const snapshot = $state.snapshot(input) as State;
+  writeJSON(CODE_STORE_KEY, snapshot);
+  void processState(snapshot).then((processed) => {
+    validatedCurrent = processed;
+    updateHash?.(processed.serialized);
+  });
+};
+
+// The single mutation gateway: every update function funnels its writes
+// through here. The mutator runs untracked so effects that call an update
+// function never subscribe to the input state it reads, and the trailing
+// persist + re-validate cannot be forgotten by a new update function.
+const update = (mutate: (state: State) => void): void => {
+  untrack(() => {
+    mutate(input);
+    persistAndProcess();
+  });
+};
+
+// All internal reads should be done via validatedState, but it should not be
+// persisted/shared externally.
+export const validatedState = {
+  get current(): ValidatedState {
+    return validatedCurrent;
+  }
+};
+
+const urlsCurrent = $derived.by(() => {
+  const { code, serialized } = validatedCurrent;
  const { krokiRendererUrl, rendererUrl } = env;
  const png = rendererUrl ? `${rendererUrl}/img/${serialized}?type=png` : '';
  return {
    kroki: krokiRendererUrl ? `${krokiRendererUrl}/mermaid/svg/${pakoSerde.serialize(code)}` : '',
-    mdCode: png
-      ? `[![](${png})](${window.location.protocol}//${window.location.host}${window.location.pathname}#${serialized})`
-      : '',
+    mdCode: png ? `[![](${png})](${window.location.href})` : '',
    mermaidChart: ({
      medium,
      campaign
@@ -164,13 +195,19 @@ export const urlsStore = derived([stateStore], ([{ code, serialized }]) => {
        home: `${MCBaseURL}/?${params}`
      };
    },
-    new: `${window.location.protocol}//${window.location.host}${window.location.pathname}#${serializeState(defaultState)}`,
+    new: `${resolve('/edit', {})}#${serializeState(defaultState)}`,
    png,
    svg: rendererUrl ? `${rendererUrl}/svg/${serialized}` : '',
-    view: `/view#${serialized}`
+    view: `${resolve('/view', {})}#${serialized}`
  };
 });

+export const urls = {
+  get current() {
+    return urlsCurrent;
+  }
+};
+
 /**
 * Gets a list of paths that contain unsafe keys which might pose security risks.
 *
@@ -189,7 +226,7 @@ function getUnsafePaths(object: object, unsafeKeys: string[], path: string[] = [
    }
  }
  Object.keys(object).forEach((key) => {
-    const value = object[key] as unknown;
+    const value = (object as Record<string, unknown>)[key];
    const currentPath = [...path, key];
    // Prototype pollution check.
    if (key.startsWith('__')) {
@@ -251,28 +288,32 @@ export const sanitizeConfig = (config: string | MermaidConfig) => {
 };

 export const loadState = (data: string): void => {
-  let state: State;
  console.log(`Loading '${data}'`);
-  try {
-    state = deserializeState(data);
-    state.mermaid = sanitizeConfig(state.mermaid || defaultState.mermaid);
-  } catch (error) {
-    state = get(inputStateStore);
-    if (data) {
-      console.error('Init error', error);
-      state.code = urlParseFailedState;
-      state.mermaid = defaultState.mermaid;
+  update((state) => {
+    let next: State;
+    try {
+      next = deserializeState(data);
+      next.mermaid = sanitizeConfig(next.mermaid || defaultState.mermaid);
+    } catch (error) {
+      next = $state.snapshot(state) as State;
+      if (data) {
+        console.error('Init error', error);
+        next.code = urlParseFailedState;
+        next.mermaid = defaultState.mermaid;
+      }
    }
-  }
-  updateCodeStore(state);
+    applyPartial(state, next);
+  });
 };

 let renderCount = 0;
+const applyPartial = (state: State, newState: Partial<State>): void => {
+  renderCount++;
+  Object.assign(state, newState, { renderCount });
+};
+
 export const updateCodeStore = (newState: Partial<State>): void => {
-  inputStateStore.update((state) => {
-    renderCount++;
-    return { ...state, ...newState, renderCount };
-  });
+  update((state) => applyPartial(state, newState));
 };

 export const updateCode = (
@@ -284,12 +325,13 @@ export const updateCode = (
 ): void => {
  errorDebug();

-  inputStateStore.update((state) => {
+  update((state) => {
    if (resetPanZoom) {
      state.pan = undefined;
      state.zoom = undefined;
    }
-    return { ...state, code, updateDiagram };
+    state.code = code;
+    state.updateDiagram = updateDiagram;
  });
 };

@@ -298,33 +340,36 @@ export const updateConfig = (config: string): void => {
 };

 export const toggleDarkTheme = (dark: boolean): void => {
-  inputStateStore.update((state) => {
+  update((state) => {
    const config = JSON.parse(state.mermaid) as MermaidConfig;
    if (!config.theme || ['dark', 'default'].includes(config.theme)) {
      config.theme = dark ? 'dark' : 'default';
    }
-    return { ...state, mermaid: formatJSON(config) };
+    state.mermaid = formatJSON(config);
+  });
+};
+
+// Replaces the whole input state (e.g. when restoring a history entry),
+// dropping keys the next state does not define.
+export const replaceInputState = (next: State): void => {
+  update((state) => {
+    for (const key of Object.keys(state)) {
+      if (!(key in next)) {
+        // eslint-disable-next-line @typescript-eslint/no-dynamic-delete -- full-replace semantics
+        delete (state as unknown as Record<string, unknown>)[key];
+      }
+    }
+    Object.assign(state, next);
  });
 };

 export const initURLSubscription = (): void => {
-  const updateHash = debounce((hash) => {
-    history.replaceState(undefined, '', `#${hash}`);
+  updateHash = debounce((serialized: string) => {
+    history.replaceState(undefined, '', `#${serialized}`);
  }, 250);
-
-  stateStore.subscribe(({ serialized }) => {
-    updateHash(serialized);
-  });
-};
-
-export const getStateString = (): string => {
-  return JSON.stringify(get(inputStateStore));
+  updateHash(validatedCurrent.serialized);
 };

 export const verifyState = (): void => {
-  const state = get(inputStateStore);
-  if (!state.panZoom) {
-    state.panZoom = true;
-  }
-  updateCodeStore(state);
+  update((state) => applyPartial(state, state.panZoom ? {} : { panZoom: true }));
 };
@@ -1,10 +1,10 @@
 import { C } from '$/constants';
 import { env } from './env';
 import { loadDataFromUrl } from './fileLoaders/loader';
-import { initLoading } from './loading';
+import { initLoading } from './loading.svelte';
 import { isOnMermaidAI } from './migration/domainMigration';
-import { applyMigrations } from './migrations';
-import { initURLSubscription, loadState, updateCodeStore, verifyState } from './state';
+import { applyMigrations } from './migrations.svelte';
+import { initURLSubscription, loadState, updateCodeStore, verifyState } from './state.svelte';
 import { getAnalyticsSafeUrl, initAnalytics, plausible } from './stats';

 export const getDomain = (url?: string): string => {
@@ -1,21 +1,21 @@
 <script>
  import { goto } from '$app/navigation';
  import { resolve } from '$app/paths';
-  import { page } from '$app/stores';
+  import { page } from '$app/state';
  import { onMount } from 'svelte';

  // Only redirect if it's a 404 error
  onMount(() => {
-    if ($page.status === 404) {
+    if (page.status === 404) {
      goto(resolve('/'));
    }
  });
 </script>

-{#if $page.status !== 404}
+{#if page.status !== 404}
  <div class="container mx-auto p-8">
-    <h1 class="mb-4 text-2xl font-bold">Error {$page.status}</h1>
-    <p class="mb-4">{$page.error?.message || 'An unexpected error occurred'}</p>
+    <h1 class="mb-4 text-2xl font-bold">Error {page.status}</h1>
+    <p class="mb-4">{page.error?.message || 'An unexpected error occurred'}</p>
    <a href={resolve('/')} class="text-blue-500 hover:underline">Return to Home</a>
  </div>
 {/if}
@@ -1,7 +1,7 @@
 <script lang="ts">
  import { Toaster } from '$/components/ui/sonner/index.js';
-  import { loadingStateStore } from '$/util/loading';
-  import { toggleDarkTheme } from '$/util/state';
+  import { loadingState } from '$/util/loading.svelte';
+  import { toggleDarkTheme } from '$/util/state.svelte';
  import { initHandler } from '$/util/util';
  import { base } from '$app/paths';
  import { mode, ModeWatcher } from 'mode-watcher';
@@ -45,12 +45,12 @@
  {@render children()}
 </main>

-{#if $loadingStateStore.loading}
+{#if loadingState.loading}
  <div
    class="absolute top-0 left-0 z-50 flex h-screen w-screen justify-center bg-gray-600 align-middle opacity-50">
    <div class="my-auto text-4xl font-bold text-indigo-100">
      <div class="loader mx-auto"></div>
-      <div>{$loadingStateStore.message}</div>
+      <div>{loadingState.message}</div>
    </div>
  </div>
 {/if}
@@ -5,6 +5,7 @@
  import Editor from '$/components/Editor.svelte';
  import EnhancedEditsButton from '$/components/EnhancedEditsButton.svelte';
  import History from '$/components/History/History.svelte';
+  import { startAutoSave } from '$/components/History/historyState.svelte';
  import McWrapper from '$/components/McWrapper.svelte';
  import MermaidChartIcon from '$/components/MermaidChartIcon.svelte';
  import EditorChooserModal from '$/components/migration/EditorChooserModal.svelte';
@@ -22,7 +23,7 @@
  import type { EditorMode, Tab } from '$/types';
  import { shouldShowEditorChooser } from '$/util/migration/domainMigration';
  import { PanZoomState } from '$/util/panZoom';
-  import { stateStore, updateCodeStore, urlsStore } from '$/util/state';
+  import { validatedState, updateCodeStore, urls } from '$/util/state.svelte';
  import { logEvent, logMermaidChartClick } from '$/util/stats';
  import { initHandler } from '$/util/util';
  import { onMount } from 'svelte';
@@ -63,6 +64,9 @@
    });
  });

+  // Record the Timeline for the whole session, not just while the panel is open.
+  onMount(() => startAutoSave());
+
  let isHistoryOpen = $state(false);

  let editorPane: Resizable.Pane | undefined;
@@ -87,7 +91,7 @@
  {/snippet}

  <Navbar mobileToggle={isMobile ? mobileToggle : undefined}>
-    <Toggle bind:pressed={isHistoryOpen} size="sm">
+    <Toggle bind:pressed={isHistoryOpen} size="sm" title="History" aria-label="History">
      <HistoryIcon />
    </Toggle>
    <Share />
@@ -95,7 +99,7 @@
      <Button
        variant="accent"
        size="sm"
-        href={$urlsStore.mermaidChart({ medium: 'save_diagram' }).save}
+        href={urls.current.mermaidChart({ medium: 'save_diagram' }).save}
        target="_blank"
        onclick={() => logMermaidChartClick('saveDiagram')}>
        <MermaidChartIcon />
@@ -120,7 +124,7 @@
              onselect={tabSelectHandler}
              isOpen
              tabs={editorTabs}
-              activeTabID={$stateStore.editorMode}
+              activeTabID={validatedState.current.editorMode}
              isClosable={false}>
              {#snippet actions()}
                <DiagramDocButton />
@@ -136,7 +140,7 @@
        </Resizable.Pane>
        <Resizable.Handle class="mr-1 hidden opacity-0 sm:block" />
        <Resizable.Pane minSize={15} class="relative flex h-full flex-1 flex-col overflow-hidden">
-          <View {panZoomState} shouldShowGrid={$stateStore.grid} />
+          <View {panZoomState} shouldShowGrid={validatedState.current.grid} />
          <div class="absolute top-0 left-5 hidden md:block"><EnhancedEditsButton /></div>
          <div class="absolute top-0 right-0"><PanZoomToolbar {panZoomState} /></div>
          <div class="absolute right-0 bottom-0"><VersionSecurityToolbar /></div>
@@ -1,84 +1,147 @@
-import { expect, test } from '@playwright/test';
-import { typeInEditor } from './utils';
+import { expect, test, type Page } from '@playwright/test';

-test.describe.skip('Save History', () => {
+const config = '{\n  "theme": "default"\n}';
+
+const entry = (id: string, name: string, type: 'manual' | 'auto', label: string) => ({
+  id,
+  name,
+  type,
+  time: Number(id.slice(2)),
+  state: {
+    code: `flowchart TD\n  A[${label}]`,
+    mermaid: config,
+    autoSync: true,
+    updateDiagram: false
+  }
+});
+
+const manualHistory = [
+  entry('m-2', 'hollow-art', 'manual', 'Halloween'),
+  entry('m-1', 'helpful-ocean', 'manual', 'Pumpkin')
+];
+const autoHistory = [
+  entry('a-2', 'barking-dog', 'auto', 'NewYear'),
+  entry('a-1', 'needy-mosquito', 'auto', 'Fireworks')
+];
+
+const openHistory = (page: Page) => page.getByRole('button', { name: 'History' }).click();
+
+test.describe('History', () => {
  test.beforeEach(async ({ page }) => {
+    // Freeze time so auto-save snapshots are deterministic.
    await page.addInitScript(() => {
-      Object.defineProperty(Date, 'now', {
-        value: () => new Date(2022, 0, 1).getTime()
-      });
+      Object.defineProperty(Date, 'now', { value: () => new Date(2022, 0, 1).getTime() });
    });
    await page.goto('/edit');
-    await page.getByText('History').click();
  });

-  test('should load history from localstorage', async ({ page }) => {
-    await page.evaluate(() => {
-      localStorage.setItem(
-        'manualHistoryStore',
-        '[{"state":{"code":"graph TD\\n    A[Halloween] -->|Get money| B(Go shopping)","mermaid":"{\\n  \\"theme\\": \\"dark\\"\\n}","autoSync":true,"updateDiagram":false},"time":0,"type":"manual","id":"d7ea820e-21dd-418a-b984-fd58acde09df","name":"hollow-art"},{"state":{"code":"graph TD\\n    A[Christmas] -->|Get money| B(Go shopping)","mermaid":"{\\n  \\"theme\\": \\"dark\\"\\n}","autoSync":true,"updateDiagram":true},"time":0,"type":"manual","id":"b749ffc6-522b-4a44-86cf-7c1ffc3146b3","name":"helpful-ocean"}]'
-      );
-      localStorage.setItem(
-        'autoHistoryStore',
-        '[{"state":{"code":"graph TD\\n    A[New Year] -->|Get money| B(Go shopping)","mermaid":"{\\n  \\"theme\\": \\"dark\\"\\n}","autoSync":true,"updateDiagram":false},"time":0,"type":"auto","id":"69ea820e-522b-4a44-86cf-fd58acde09df","name":"barking-dog"},{"state":{"code":"graph TD\\n    A[Christmas] -->|Get money| B(Go shopping)","mermaid":"{\\n  \\"theme\\": \\"dark\\"\\n}","autoSync":true,"updateDiagram":true},"time":0,"type":"manual","id":"x749ffc6-21dd-418a-b984-7c1ffc3146b3","name":"needy-mosquito"}]'
-      );
-    });
+  test('loads Saved and Timeline history from localStorage and restores entries', async ({
+    page
+  }) => {
+    await page.evaluate(
+      ([manual, auto]) => {
+        localStorage.setItem('manualHistoryStore', manual);
+        localStorage.setItem('autoHistoryStore', auto);
+      },
+      [JSON.stringify(manualHistory), JSON.stringify(autoHistory)]
+    );
    await page.reload();
-    await page.getByText('History').click();
+    await openHistory(page);
+
+    // Saved tab is active by default.
    await expect(page.locator('#historyList li')).toHaveCount(2);
-    await expect(page.locator('#historyList').getByText('No items in History')).not.toBeVisible();
-    await expect(page.locator('#historyList')).toContainText('helpful-ocean');
    await expect(page.locator('#historyList')).toContainText('hollow-art');
-    await page.getByText('Restore').first().click();
-    await expect(page.locator('#view').getByText('Halloween')).toBeVisible();
-    await page.getByText('Timeline').click();
+    await expect(page.locator('#historyList')).toContainText('helpful-ocean');

+    await page.getByRole('button', { name: 'Restore this version' }).first().click();
+    await expect(page.locator('#view')).toContainText('Halloween');
+
+    // Switching to the Timeline tab shows the auto entries only.
+    await page.getByRole('tab', { name: 'Timeline' }).click();
    await expect(page.locator('#historyList li')).toHaveCount(2);
-    await expect(page.locator('#historyList').getByText('No items in History')).not.toBeVisible();
-    await expect(page.locator('#historyList')).toContainText('needy-mosquito');
    await expect(page.locator('#historyList')).toContainText('barking-dog');
-    await page.getByText('Restore').first().click();
-    await expect(page.locator('#view').getByText('New Year')).toBeVisible();
+    await expect(page.locator('#historyList')).toContainText('needy-mosquito');
+    await expect(page.locator('#historyList')).not.toContainText('hollow-art');
+
+    await page.getByRole('button', { name: 'Restore this version' }).first().click();
+    await expect(page.locator('#view')).toContainText('NewYear');
  });

-  test.skip('should save when clicked', async ({ page }) => {
-    await expect(page.locator('#historyList li')).toHaveCount(0);
-    await expect(page.locator('#historyList')).toContainText('No items in History');
-    await page.locator('#saveHistory').click();
-    await expect(page.locator('#historyList').getByText('No items in History')).not.toBeVisible();
-    await expect(page.locator('#historyList li')).toHaveCount(1);
-    const dialogPromise = page.waitForEvent('dialog');
-    await page.locator('#saveHistory').click();
-    const dialog = await dialogPromise;
-    expect(dialog.message()).toBe('State already saved.');
-    await dialog.accept();
+  test('each entry has a copyable link that opens it in a new tab', async ({ page }) => {
+    await page.evaluate(
+      (manual) => localStorage.setItem('manualHistoryStore', manual),
+      JSON.stringify(manualHistory)
+    );
+    await page.reload();
+    await openHistory(page);

-    await typeInEditor(page, '  C --> HistoryTest');
+    // It is a real link (so it can be copied / opened in a new tab), not a button.
+    const link = page.getByRole('link', { name: 'Open in new tab' }).first();
+    await expect(link).toHaveAttribute('target', '_blank');
+    const href = await link.getAttribute('href');
+    expect(href).toContain('/edit#pako:');
+
+    // Following it loads that entry's diagram.
+    await page.goto(href ?? '');
+    await expect(page.locator('#view')).toContainText('Halloween');
+  });
+
+  test('keeps the active tab highlighted when switching modes', async ({ page }) => {
+    await openHistory(page);
+    const saved = page.getByRole('tab', { name: 'Saved' });
+    const timeline = page.getByRole('tab', { name: 'Timeline' });
+
+    await expect(saved).toHaveClass(/border-b-2/);
+    await expect(timeline).not.toHaveClass(/border-b-2/);
+
+    await timeline.click();
+    await expect(timeline).toHaveClass(/border-b-2/);
+    await expect(saved).not.toHaveClass(/border-b-2/);
+  });
+
+  test('saves the current state and reports duplicates', async ({ page }) => {
+    await openHistory(page);
+    await expect(page.locator('#historyList li')).toHaveCount(0);
+
+    await page.locator('#saveHistory').click();
+    await expect(page.locator('#historyList li')).toHaveCount(1);
+
+    // Saving again without changes does not add a duplicate and notifies the user.
+    await page.locator('#saveHistory').click();
+    await expect(page.getByText('State already saved.')).toBeVisible();
+    await expect(page.locator('#historyList li')).toHaveCount(1);
+
+    // Loading a different sample changes the state, so it saves as a new entry.
+    await page.getByRole('button', { name: 'Sequence', exact: true }).click();
+    await expect(page.locator('#view')).not.toContainText('Christmas');
    await page.locator('#saveHistory').click();
    await expect(page.locator('#historyList li')).toHaveCount(2);
  });

-  test.skip('should be able to restore and delete', async ({ page }) => {
+  test('auto-saves to the Timeline only, never the Saved list', async ({ page }) => {
+    await openHistory(page);
    await page.locator('#saveHistory').click();
-    await typeInEditor(page, '  C --> HistoryTest');
-    await expect(page.locator('#historyList').getByText('No items in History')).not.toBeVisible();
    await expect(page.locator('#historyList li')).toHaveCount(1);
-    await expect(page.locator('#view').getByText('HistoryTest')).toBeVisible();
-    await page.getByText('Restore').click();
-    await expect(page.locator('#view').getByText('HistoryTest')).not.toBeVisible();
-    await page.getByText('Delete').click();
-    await expect(page.locator('#historyList li')).toHaveCount(0);
-    await expect(page.locator('#historyList')).toContainText('No items in History');
+
+    await page.getByRole('tab', { name: 'Timeline' }).click();
+    // A manual save must not appear under Timeline.
+    await expect(page.locator('#historyList')).toContainText('No timeline snapshots yet.');
+  });
+
+  test('deletes a single entry and clears all after confirmation', async ({ page }) => {
+    await openHistory(page);
    await page.locator('#saveHistory').click();
-    await typeInEditor(page, '  C --> HistoryTest');
+    await page.getByRole('button', { name: 'Sequence', exact: true }).click();
+    await expect(page.locator('#view')).not.toContainText('Christmas');
    await page.locator('#saveHistory').click();
-    await page.locator('#editor').type('ing');
+    await expect(page.locator('#historyList li')).toHaveCount(2);
+
+    await page.getByRole('button', { name: 'Delete this version' }).first().click();
+    await expect(page.locator('#historyList li')).toHaveCount(1);
+
+    page.on('dialog', (dialog) => dialog.accept());
    await page.locator('#clearHistory').click();
-
-    const dialog = await page.waitForEvent('dialog');
-    expect(dialog.message()).toBe('Clear all saved items?');
-    await dialog.accept();
-
-    await expect(page.locator('#historyList')).toContainText('No items in History');
+    await expect(page.locator('#historyList li')).toHaveCount(0);
+    await expect(page.locator('#historyList')).toContainText('No saved states yet.');
  });
 });
@@ -12,6 +12,7 @@
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true,
    "strictNullChecks": true,
+    "skipLibCheck": true,
    "types": ["vitest/importMeta", "@playwright/test"]
  },
  "extends": "./.svelte-kit/tsconfig.json"
@@ -33,6 +33,8 @@ export default defineConfig({
  envPrefix: 'MERMAID_',
  server: { port: 3000, host: true },
  preview: { port: 3000, host: true },
+  // Vitest otherwise resolves Svelte's server build, where $effect is a no-op.
+  resolve: process.env.VITEST ? { conditions: ['browser'] } : undefined,
  test: {
    environment: 'jsdom',
    // in-source testing