Merge pull request #1991 from mermaid-js/renovate/patch-all-minor-patch

fix(deps): update all non-major dependencies (patch)
fix(deps): update all non-major dependencies
2026-06-19 19:23:27 +00:00 · 2026-06-19 09:54:22 +00:00 · 2026-06-10 18:43:03 +00:00 · 2026-06-11 00:09:45 +05:30 · 2026-06-10 18:35:50 +00:00 · 2026-06-10 23:57:27 +05:30
49 changed files with 1849 additions and 1422 deletions
@@ -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/
@@ -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
Author	SHA1	Message	Date
Sidharth VinodandGitHub	335f4bbfde	Merge pull request #1991 from mermaid-js/renovate/patch-all-minor-patch fix(deps): update all non-major dependencies (patch)	2026-06-19 19:23:27 +00:00
renovate[bot]andGitHub	bc235e7498	fix(deps): update all non-major dependencies	2026-06-19 09:54:22 +00:00
Sidharth VinodandGitHub	7f08e5b970	Merge pull request #1987 from mermaid-js/sidv/examplesSelection feat: add example picker dropdown to sample diagrams	2026-06-10 18:43:03 +00:00
Sidharth VinodandClaude Fable 5	a257f78d8e	feat: add example picker dropdown to sample diagrams Each diagram type in the Sample Diagrams panel is now a split button: clicking the diagram name loads its default example, and a dropdown arrow on the right (shown when a diagram has more than one example) opens a popover listing all examples for that diagram. - getSampleDiagrams now returns all examples per diagram with the default example first, instead of flattening to the default's code - loadSampleDiagram analytics now include the chosen example title https://claude.ai/code/session_015rUgHChBEkquLu77fMxmQ6 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>	2026-06-11 00:09:45 +05:30
Sidharth VinodandGitHub	9cd92e1fd6	Merge pull request #1988 from mermaid-js/sidv/runes-migration-fixes fix: Address regressions and structural risks in the runes migration	2026-06-10 18:35:50 +00:00
Sidharth VinodandClaude Fable 5	c253054916	refactor: Make persisted() values raw state The getter handed out a deep $state proxy, so in-place mutation of a persisted array/record would update the UI while silently never being written to localStorage. All consumers already replace .value wholesale; $state.raw makes that the only semantics and drops the per-read proxy overhead. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>	2026-06-10 23:57:27 +05:30
Sidharth VinodandClaude Fable 5	d2f067a540	refactor: Route every input state mutation through one untracked gateway The untrack()/persistAndProcess() pair was a per-function convention: each update function had to remember both, a forgotten untrack would let calling effects subscribe to input state (the bug fixed in `6a9a306e`), and a forgotten persistAndProcess would silently skip persistence and re-validation. A single update(mutate) gateway now makes both structural, and the scattered untrack calls (three of which were dead) are gone. Also: - Export inputState as Readonly<State> so writes outside the update functions are type errors instead of comment violations. - Share the 'codeStore' key as a constant instead of two literals. - Reuse validatedStateOf() in processState instead of duplicating the validated-state defaults. - Use $state.raw for validatedCurrent: it is only ever replaced wholesale, so deep proxying every published state was pure overhead. The new state.svelte.test.ts pins the invariants: update functions never make a calling effect track input state, and every mutation persists. Vitest needed resolve.conditions=['browser'] for those tests — it was loading Svelte's server build, where $effect is a no-op. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>	2026-06-10 23:57:01 +05:30
Sidharth VinodandClaude Fable 5	59105628f4	fix: Treat a stored JSON null as a missing persisted value readJSON returned any successfully parsed value, so a localStorage entry holding the literal "null" came back as null instead of the fallback — and a null inputState crashes module init on every load until storage is cleared. The deleted MacFJA persist layer guarded this with `null !== initialValue`; restore that behavior. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>	2026-06-10 23:53:00 +05:30
Sidharth VinodandClaude Fable 5	144b4dc190	fix: Stop mobile editor from reverting keystrokes currentText was $state, and the validated-state sync $effect both reads and writes it. Every keystroke (which sets currentText in the CodeMirror updateListener) therefore re-ran the effect while re-validation was still in flight, dispatching a full-document replacement with the stale validatedState text — visibly reverting the keystroke and resetting the cursor until validation caught up. The effect only needs to react to validatedState publishes, so make currentText a plain variable, matching DesktopEditor. No unit test: the repo has no component-test harness, and CodeMirror cannot mount under jsdom without one. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>	2026-06-10 23:51:57 +05:30
Sidharth VinodandClaude Fable 5	6a9a306ed7	fix: Untrack input state reads inside state update functions toggleDarkTheme runs inside the layout $effect; without untrack the effect starts depending on inputState.mermaid and re-adds the default theme whenever a loaded config replaces it (caught by the unsafe-config scrub e2e test). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>	2026-06-10 00:44:16 +05:30
Sidharth VinodandClaude Fable 5	337e9f86ac	refactor: Use $app/state instead of $app/stores in error page Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>	2026-06-10 00:38:55 +05:30
Sidharth VinodandClaude Fable 5	c9cfaa10e7	refactor: Replace vendored svelte-persistent-store with shared persisted rune History now uses the shared persist.svelte helpers, the MacFJA store copy is deleted, and the esserializer dependency it required is dropped. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>	2026-06-10 00:37:53 +05:30
Sidharth VinodandClaude Fable 5	ed06c07c06	refactor: Migrate hidden promotions store to the persisted rune Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>	2026-06-10 00:36:58 +05:30
Sidharth VinodandClaude Fable 5	a49503a1f0	refactor: Migrate the migrations store to the persisted rune Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>	2026-06-10 00:35:41 +05:30
Sidharth VinodandClaude Fable 5	81aaafc085	refactor: Migrate loading state from svelte/store to runes Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>	2026-06-10 00:35:00 +05:30
Sidharth VinodandClaude Fable 5	b3c8bd6c28	refactor: Migrate editor state from svelte/store to runes Replace the writable+derived store pipeline in state.ts with a state.svelte.ts module: a deep $state inputState mutated only through the exported update functions, each of which persists the snapshot and re-validates it asynchronously into validatedState.current (with urls.current derived from it). Store subscriptions in components become $effect blocks, and the rough/grid toggles use function bindings. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>	2026-06-10 00:34:07 +05:30
Sidharth VinodandClaude Fable 5	ca96ca8771	feat: Add shared runes-based localStorage persistence module Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>	2026-06-10 00:23:48 +05:30
Sidharth VinodandGitHub	219d8af74f	Merge pull request #1984 from mermaid-js/sidv/fixViewURL fix: base URL handling	2026-06-09 19:40:49 +05:30
Sidharth Vinod	49c5928202	fix: Resolve URLs in urlsStore	2026-06-09 19:32:08 +05:30
Sidharth VinodandGitHub	459c22cf09	Merge pull request #1982 from mermaid-js/sidv/rewrite-timeline-history fix: Rewrite Timeline/Saved history state and UI handling	2026-06-08 15:01:44 +00:00
Sidharth VinodandClaude Opus 4.8	f25b3c82cd	refactor: De-duplicate mode routing and drop dead getStateString Code-review cleanup: - Collapse the two mode switches (the historyState.entries getter and activeSlot) into a single slotFor(mode) helper; entries now reads `slotFor(mode)?.value ?? loader`. - Remove the now-unused getStateString export from state.ts (its only consumer was rewritten off it in this PR). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-06-08 20:28:50 +05:30
Sidharth VinodandClaude Opus 4.8	2db9355b7b	fix: Accept time:0 entries and precompute history entry URLs Code-review follow-ups: - validateEntry no longer rejects entries whose time is 0 (epoch); it now checks `typeof time === 'number'`, so restoring/uploading such entries works instead of silently dropping them. - History.svelte serializes each entry's "open in new tab" URL once via a $derived list instead of calling serializeState (pako deflate) per row on every render. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-06-08 20:22:40 +05:30
Sidharth VinodandClaude Opus 4.8	8dd9cb49a0	feat: Add "open in new tab" link to history entries Each history entry now has a third action: a real anchor (rendered via the Button's href, target="_blank") linking to the editor with that entry's serialized state. Being a normal link, users can also copy it or open it in a new tab via the context menu. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-06-08 20:03:31 +05:30
Sidharth VinodandClaude Opus 4.8	64e8822e32	fix: Make svelte-check pass and resolve TS6/Svelte 5.56 type errors Adding the `svelte-check` CI gate surfaced pre-existing type errors and warnings under develop's TypeScript 6 / Svelte 5.56 bump. Fixes them so `pnpm check` reports 0 errors / 0 warnings: - Add `lang="ts"` to Share/Privacy (and a script to PrivacyPolicyLink) so importers get real declarations instead of implicit `any`. - Replace the deprecated `monaco.languages.json` with the new top-level `monaco.json` namespace (proper API, no casts). - Navbar: use `resolve('/', {})` instead of the deprecated `base`. - Type the promo `component` as `Component<{ closeBanner: Snippet }>` and MainMenu's `renderer` as `Snippet<[Omit<MenuItem, 'renderer'>]>`. - Index-by-string casts in state.ts / Preset / DiagramDocumentationButton. - Make Actions' clipboard handler accept an optional event. - toggle-group: expose variant/size via getters to fix the state_referenced_locally warning. - Make the History e2e save/delete cases change state via a sample diagram (deterministic) instead of editor typing. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-06-08 19:53:25 +05:30
Sidharth Vinod	a3a3f8ffbe	Update .gitignore	2026-06-08 19:28:39 +05:30
Sidharth VinodandClaude Opus 4.8	e6333e9d7f	refactor: Convert history state to Svelte 5 runes + add svelte-check Migrate the Timeline/Saved history state module to idiomatic Svelte 5 runes and wire up type-checking. - Rename history.ts -> historyState.svelte.ts and replace the Svelte stores with $state-backed reactive values, removing the get() calls (the only remaining one reads the external inputStateStore). A small localStorage-backed `persisted()` helper keeps the same keys, so user data is preserved. Consumers read via the reactive `historyState` getter object instead of store auto-subscriptions. - The gist loader now replaces the in-memory revisions in one call (setLoaderEntries) instead of appending, so loading a new gist no longer accumulates stale revisions. - Add svelte-check: new `check` script, a "Type check" step in the unit-tests CI workflow, and skipLibCheck so the check passes on the dependency .d.ts files. svelte-check reports 0 errors / 0 warnings. - Add accessible labels to the History toggle and the per-item Restore/Delete buttons (a11y + testability). - Unskip tests/history.spec.ts and rewrite it against the new UI: load-from-localStorage + restore, tab-highlight follows the mode, save/dedupe, auto-vs-manual isolation, and delete/clear. All pass. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-06-08 19:28:38 +05:30
Sidharth VinodandClaude Opus 4.8	3628acec02	fix: Rewrite Timeline/Saved history state and UI handling The auto (Timeline) and manual (Saved) history handling had several bugs. This rewrites the state module into a small, tested source-of-truth API and turns History.svelte into a thin view. Bugs fixed: - Auto-saves no longer leak into the Saved list. addEntry now writes only to the store for its own type (previously every entry was also pushed to the manual store). - Dedup is keyed on code + config via stateKey() instead of the whole input state, so volatile/view-only fields (renderCount, updateDiagram, pan/zoom) no longer cause spurious saves or hide real edits. - The active-tab highlight tracks the history mode. History binds activeTabID={$historyModeStore} and Tabs derives the highlight reactively instead of mutating its prop once, which had frozen it on the first tab. - Auto-save runs for the whole edit session via startAutoSave() in +page, with proper cleanup. Previously the interval lived in History.svelte, only ran while the panel was open, and was never cleared (leaking a new interval on every open). - restoreEntries() routes each uploaded entry to the store matching its own type instead of dumping everything into one store by the first entry's type. The persisted localStorage keys (autoHistoryStore, manualHistoryStore, autoHistoryMode) are unchanged, so existing user data is preserved. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-06-08 19:27:23 +05:30
Sidharth VinodandGitHub	ebced635c9	Merge pull request #1774 from mermaid-js/sidv/fixUndo fix: #1753 Undo in Monaco	2026-06-08 13:16:56 +00:00