Merge pull request #1980 from mermaid-js/chore/update-all-deps

chore: update all dependencies to latest versions

package.json

@@ -23,97 +23,96 @@
     "test:e2e:debug": "playwright test --debug"
   },
   "devDependencies": {
-    "@eslint/compat": "^1.2.5",
-    "@eslint/eslintrc": "^3.3.3",
-    "@eslint/js": "^9.39.2",
-    "@fortawesome/fontawesome-free": "^6.7.2",
-    "@iconify-json/hugeicons": "^1.2.26",
+    "@eslint/compat": "^2.1.0",
+    "@eslint/eslintrc": "^3.3.5",
+    "@eslint/js": "^10.0.1",
+    "@fortawesome/fontawesome-free": "^7.2.0",
+    "@iconify-json/hugeicons": "^1.2.29",
     "@iconify-json/logos": "^1.2.11",
-    "@iconify-json/material-symbols": "^1.2.20",
+    "@iconify-json/material-symbols": "^1.2.76",
     "@iconify-json/mdi": "^1.2.3",
     "@playwright/test": "^1.60.0",
-    "@sveltejs/adapter-static": "^3.0.9",
-    "@sveltejs/kit": "^2.37.0",
-    "@sveltejs/vite-plugin-svelte": "^6.1.3",
-    "@tailwindcss/typography": "^0.5.19",
-    "@tailwindcss/vite": "^4.1.18",
+    "@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",
     "@types/hammerjs": "^2.0.46",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^24.12.0",
-    "@types/pako": "2.0.3",
-    "@types/uuid": "9.0.8",
-    "@vitest/coverage-v8": "^3.2.4",
-    "@vitest/ui": "^3.2.4",
-    "autoprefixer": "^10.4.21",
-    "bits-ui": "^2.9.6",
-    "c8": "7.14.0",
-    "chai": "^4.5.0",
+    "@types/pako": "2.0.4",
+    "@vitest/coverage-v8": "^4.1.8",
+    "@vitest/ui": "^4.1.8",
+    "autoprefixer": "^10.5.0",
+    "bits-ui": "^2.18.1",
+    "c8": "11.0.0",
+    "chai": "^6.2.2",
     "clsx": "^2.1.1",
-    "cssnano": "^6.1.2",
-    "dotenv": "^17.3.1",
-    "eslint": "^9.39.2",
+    "cssnano": "^8.0.1",
+    "dotenv": "^17.4.2",
+    "eslint": "^10.4.1",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-es": "^4.1.0",
-    "eslint-plugin-no-only-tests": "^3.3.0",
+    "eslint-plugin-no-only-tests": "^3.4.0",
     "eslint-plugin-sort-keys": "^2.3.5",
-    "eslint-plugin-svelte": "^3.0.0",
-    "eslint-plugin-tailwindcss": "^3.18.2",
-    "eslint-plugin-unicorn": "^60.0.0",
+    "eslint-plugin-svelte": "^3.19.0",
+    "eslint-plugin-tailwindcss": "^3.18.3",
+    "eslint-plugin-unicorn": "^65.0.0",
     "esserializer": "^1.3.11",
-    "globals": "^16.0.0",
-    "husky": "^8.0.3",
-    "jsdom": "^25.0.1",
-    "lint-staged": "^15.5.1",
-    "lucide-svelte": "^0.507.0",
-    "node-html-parser": "^6.1.13",
-    "paneforge": "1.0.0-next.6",
-    "prettier": "^3.8.1",
-    "prettier-plugin-svelte": "^3.4.1",
-    "prettier-plugin-tailwindcss": "^0.7.2",
-    "svelte": "^5.38.6",
-    "svelte-preprocess": "^6.0.3",
-    "svelte-sonner": "^1.0.5",
-    "tailwind-merge": "^3.3.1",
-    "tailwind-variants": "^3.1.0",
-    "tailwindcss": "^4.1.18",
+    "globals": "^17.6.0",
+    "husky": "^9.1.7",
+    "jsdom": "^29.1.1",
+    "lint-staged": "^17.0.7",
+    "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-plugin-tailwindcss": "^0.8.0",
+    "svelte": "^5.56.3",
+    "svelte-preprocess": "^6.0.5",
+    "svelte-sonner": "^1.1.1",
+    "tailwind-merge": "^3.6.0",
+    "tailwind-variants": "^3.2.2",
+    "tailwindcss": "^4.3.0",
     "tslib": "^2.8.1",
-    "tw-animate-css": "^1.3.8",
-    "typescript": "^5.9.2",
-    "typescript-eslint": "^8.42.0",
-    "unplugin-icons": "^22.2.0",
-    "vite": "^7.1.4",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.60.1",
+    "unplugin-icons": "^23.0.1",
+    "vite": "^8.0.16",
     "vite-plugin-devtools-json": "^1.0.0",
-    "vitest": "^3.2.4",
+    "vitest": "^4.1.8",
     "vitest-dom": "^0.1.1"
   },
   "dependencies": {
-    "@codemirror/lang-json": "^6.0.1",
-    "@codemirror/lang-markdown": "^6.3.2",
-    "@codemirror/lang-yaml": "^6.1.2",
-    "@codemirror/language": "^6.11.0",
-    "@codemirror/state": "^6.5.2",
-    "@codemirror/view": "^6.36.7",
-    "@fontsource-variable/recursive": "^5.2.5",
-    "@fsegurai/codemirror-theme-vscode-dark": "^6.1.4",
-    "@fsegurai/codemirror-theme-vscode-light": "^6.1.4",
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/lang-markdown": "^6.5.0",
+    "@codemirror/lang-yaml": "^6.1.3",
+    "@codemirror/language": "^6.12.3",
+    "@codemirror/state": "^6.6.0",
+    "@codemirror/view": "^6.43.0",
+    "@fontsource-variable/recursive": "^5.2.8",
+    "@fsegurai/codemirror-theme-vscode-dark": "^6.2.6",
+    "@fsegurai/codemirror-theme-vscode-light": "^6.2.6",
     "@mermaid-js/examples": "^1.2.0",
     "@mermaid-js/layout-elk": "^0.2.1",
     "@mermaid-js/layout-tidy-tree": "^0.2.2",
     "@mermaid-js/mermaid-zenuml": "^0.2.3",
-    "codemirror": "^6.0.1",
-    "dayjs": "^1.11.13",
+    "codemirror": "^6.0.2",
+    "dayjs": "^1.11.21",
     "hammerjs": "^2.0.8",
-    "js-base64": "3.7.7",
-    "lodash-es": "^4.17.21",
+    "js-base64": "3.7.8",
+    "lodash-es": "^4.18.1",
     "mermaid": "^11.15.0",
-    "mode-watcher": "^0.5.1",
-    "monaco-editor": "0.52.2",
+    "mode-watcher": "^1.1.0",
+    "monaco-editor": "0.55.1",
     "pako": "2.1.0",
     "plausible-tracker": "^0.3.9",
     "random-word-slugs": "0.1.7",
     "svg-pan-zoom": "3.6.2",
-    "svg2roughjs": "^3.2.1",
-    "uuid": "9.0.1"
+    "svg2roughjs": "^3.2.3",
+    "uuid": "14.0.0"
   },
   "lint-staged": {
     "*.{ts,svelte,js,css,md,json}": [

src/lib/components/DesktopEditor.svelte

@@ -34,6 +34,16 @@
   let lastMouseLine = 0;
   const aiPromptManager = new AIPromptViewZoneManager();
 
+  const applyEditorTheme = (currentMode: typeof mode.current) => {
+    if (!editor) return;
+    monaco.editor.setTheme(`mermaid${currentMode === 'dark' ? '-dark' : ''}`);
+    divElement?.classList.toggle('mermaid-dark', currentMode === 'dark');
+  };
+
+  $effect(() => {
+    applyEditorTheme(mode.current);
+  });
+
   const jsonModel = monaco.editor.createModel(
     '',
     'json',
@@ -183,12 +193,8 @@
       renderAIPromptGutterGlyphIcon();
     });
 
-    const unsubscribeMode = mode.subscribe((mode) => {
-      if (editor) {
-        monaco.editor.setTheme(`mermaid${mode === 'dark' ? '-dark' : ''}`);
-        divElement?.classList.toggle('mermaid-dark', mode === 'dark');
-      }
-    });
+    applyEditorTheme(mode.current);
+
     const resizeObserver = new ResizeObserver((entries) => {
       editor?.layout({
         height: entries[0].contentRect.height,
@@ -204,7 +210,6 @@
 
     return () => {
       unsubscribeState();
-      unsubscribeMode();
       resizeObserver.disconnect();
       jsonModel.dispose();
       mermaidModel.dispose();

src/lib/components/MainMenu.svelte

@@ -126,7 +126,7 @@
       Dark Mode
     </span>
     <Switch
-      checked={$mode === 'dark'}
+      checked={mode.current === 'dark'}
       onCheckedChange={(dark) => setMode(dark ? 'dark' : 'light')} />
   </div>
 {/snippet}

src/lib/components/MobileEditor.svelte

@@ -16,11 +16,17 @@
   let editorView: EditorView | undefined;
   let editorContainer: HTMLDivElement;
   let currentText = $state('');
+  const themeCompartment = new Compartment();
 
   const { onUpdate }: EditorProps = $props();
 
+  $effect(() => {
+    editorView?.dispatch({
+      effects: themeCompartment.reconfigure(mode.current === 'dark' ? vsCodeDark : vsCodeLight)
+    });
+  });
+
   onMount(() => {
-    const themeCompartment = new Compartment();
     const languageCompartment = new Compartment();
 
     editorView = new EditorView({
@@ -56,12 +62,6 @@
       parent: editorContainer
     });
 
-    const unsubscribeMode = mode.subscribe((mode) => {
-      editorView?.dispatch({
-        effects: themeCompartment.reconfigure(mode === 'dark' ? vsCodeDark : vsCodeLight)
-      });
-    });
-
     const unsubscribeState = stateStore.subscribe(({ editorMode, code, mermaid }) => {
       const text = editorMode === 'code' ? code : mermaid;
       if (currentText === text || !editorView) {
@@ -89,7 +89,6 @@
     });
 
     return () => {
-      unsubscribeMode();
       unsubscribeState();
       editorView?.destroy();
     };

src/lib/components/Navbar.svelte

@@ -8,6 +8,7 @@
 </script>
 
 <script lang="ts">
+  import { resolve } from '$app/paths';
   import MainMenu from '$/components/MainMenu.svelte';
   import { Button } from '$/components/ui/button';
   import { Separator } from '$/components/ui/separator';
@@ -83,7 +84,7 @@
   <div class="flex flex-1 items-center gap-2">
     <MainMenu />
     <MermaidIcon class="size-6" />
-    <a href="/" class="whitespace-nowrap text-accent">
+    <a href={resolve('/')} class="whitespace-nowrap text-accent">
       {#if !mobileToggle}
         Mermaid
       {/if}

src/lib/components/ThemeIcon.svelte

@@ -24,12 +24,12 @@
 </script>
 
 <div class="inline-grid">
-  {#key $mode}
+  {#key mode.current}
     <div
       in:spin={{ clockWise: true }}
       out:spin={{ clockWise: false }}
       class="col-start-1 row-start-1">
-      {#if $mode === 'dark'}
+      {#if mode.current === 'dark'}
         <MoonIcon />
       {:else}
         <SunIcon />

src/lib/components/VersionSecurityToolbar.svelte

@@ -23,9 +23,9 @@
     variant="ghost"
     size="icon"
     data-testid={TID.themeToggleButton}
-    title="Switch to {$mode === 'dark' ? 'light' : 'dark'} theme"
+    title="Switch to {mode.current === 'dark' ? 'light' : 'dark'} theme"
     class="[&_svg]:size-5"
-    onclick={() => setMode($mode === 'dark' ? 'light' : 'dark')}>
+    onclick={() => setMode(mode.current === 'dark' ? 'light' : 'dark')}>
     <ThemeIcon />
   </Button>
 </FloatingToolbar>

src/lib/components/View.svelte

@@ -153,7 +153,7 @@
 <div
   id="view"
   bind:this={view}
-  class={['h-full w-full', shouldShowGrid && `grid-bg-${$mode}`, error && 'opacity-50']}>
+  class={['h-full w-full', shouldShowGrid && `grid-bg-${mode.current}`, error && 'opacity-50']}>
   <div id="container" bind:this={container} class="h-full overflow-auto"></div>
 </div>
 

src/lib/components/ui/sonner/sonner.svelte

@@ -6,7 +6,7 @@
 </script>
 
 <Sonner
-  theme={$mode}
+  theme={mode.current}
   class="toaster group"
   toastOptions={{
     classes: {

src/lib/util/promos/April2025.svelte

@@ -60,6 +60,13 @@
   onDestroy(() => {
     clearInterval(interval);
   });
+
+  const taglineHref = $derived(
+    `${MCBaseURL}${currentTagline.url.path}?${new URLSearchParams({
+      ...commonParams,
+      ...currentTagline.url.params
+    }).toString()}`
+  );
 </script>
 
 <div
@@ -70,11 +77,9 @@
   <div class="grid grow">
     {#key currentTagline}
       <a
-        href="{MCBaseURL}{currentTagline.url.path}?{new URLSearchParams({
-          ...commonParams,
-          ...currentTagline.url.params
-        }).toString()}"
+        href={taglineHref}
         target="_blank"
+        rel="noopener noreferrer"
         class="col-start-1 row-start-1 flex items-center justify-center gap-4 no-underline"
         in:fade={{ delay: 800 }}
         out:fade={{ duration: 1000 }}>

src/routes/+error.svelte

@@ -1,12 +1,13 @@
 <script>
   import { goto } from '$app/navigation';
+  import { resolve } from '$app/paths';
   import { page } from '$app/stores';
   import { onMount } from 'svelte';
 
   // Only redirect if it's a 404 error
   onMount(() => {
     if ($page.status === 404) {
-      goto('/');
+      goto(resolve('/'));
     }
   });
 </script>
@@ -15,6 +16,6 @@
   <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>
-    <a href="/" class="text-blue-500 hover:underline">Return to Home</a>
+    <a href={resolve('/')} class="text-blue-500 hover:underline">Return to Home</a>
   </div>
 {/if}

src/routes/+layout.svelte

@@ -34,7 +34,7 @@
   });
 
   $effect(() => {
-    toggleDarkTheme($mode === 'dark');
+    toggleDarkTheme(mode.current === 'dark');
   });
 </script>