Svelte 5 migration

2025-03-18 17:16:21 +03:00 · 2024-10-30 23:38:20 +05:30
parent 8cf4ac432d
commit 190bac8c70
15 changed files with 411 additions and 381 deletions
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -86,7 +86,7 @@ module.exports = {
          j: true,
          k: true,
          param: true,
-          props: true,
+          Props: true,
          req: true,
          res: true,
          str: true,
--- a/package.json
+++ b/package.json
@@ -25,8 +25,8 @@
    "@cypress/snapshot": "2.1.7",
    "@fortawesome/fontawesome-free": "^6.5.1",
    "@sveltejs/adapter-static": "3.0.4",
-    "@sveltejs/kit": "2.5.26",
-    "@sveltejs/vite-plugin-svelte": "^3.0.1",
+    "@sveltejs/kit": "^2.5.27",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
    "@testing-library/svelte": "4.2.3",
    "@types/dompurify": "^3.0.5",
    "@types/lodash-es": "^4.17.12",
@@ -47,7 +47,7 @@
    "eslint-plugin-es": "^4.1.0",
    "eslint-plugin-no-only-tests": "^3.1.0",
    "eslint-plugin-postcss-modules": "^2.0.0",
-    "eslint-plugin-svelte": "^2.35.1",
+    "eslint-plugin-svelte": "^2.45.1",
    "eslint-plugin-tailwindcss": "^3.13.1",
    "eslint-plugin-unicorn": "^50.0.1",
    "eslint-plugin-vitest": "^0.5.0",
@@ -59,14 +59,14 @@
    "postcss": "^8.4.33",
    "postcss-load-config": "5.1.0",
    "prettier": "^3.1.0",
-    "prettier-plugin-svelte": "^3.1.2",
+    "prettier-plugin-svelte": "^3.2.6",
    "prettier-plugin-tailwindcss": "^0.6.0",
-    "svelte": "^4.2.8",
-    "svelte-preprocess": "^5.1.3",
+    "svelte": "^5.0.0",
+    "svelte-preprocess": "^6.0.0",
    "tailwindcss": "^3.4.1",
    "tslib": "^2.6.2",
-    "typescript": "^5.3.3",
-    "vite": "^5.0.11",
+    "typescript": "^5.5.0",
+    "vite": "^5.4.4",
    "vitest": "^1.1.3",
    "vitest-dom": "^0.1.1"
  },
--- a/src/lib/components/Actions.svelte
+++ b/src/lib/components/Actions.svelte
@@ -6,9 +6,9 @@
  import { pakoSerde } from '$lib/util/serde';
  import { stateStore } from '$lib/util/state';
  import { logEvent } from '$lib/util/stats';
+  import { version as FAVersion } from '@fortawesome/fontawesome-free/package.json';
  import dayjs from 'dayjs';
  import { toBase64 } from 'js-base64';
-  import { version as FAVersion } from '@fortawesome/fontawesome-free/package.json';

  const FONT_AWESOME_URL = `https://cdnjs.cloudflare.com/ajax/libs/font-awesome/${FAVersion}/css/all.min.css`;

@@ -149,7 +149,7 @@ ${svgString}`);
    logEvent('copyMarkdown');
  };

-  let gistURL = '';
+  let gistURL = $state('');
  stateStore.subscribe(({ loader }) => {
    if (loader?.type === 'gist') {
      // @ts-expect-error Gist will have url
@@ -165,14 +165,14 @@ ${svgString}`);
    logEvent('loadGist');
  };

-  let iUrl: string;
-  let svgUrl: string;
-  let krokiUrl: string;
-  let mdCode: string;
-  let imagemodeselected = 'auto';
-  let userimagesize = 1080;
+  let iUrl: string | undefined = $state();
+  let svgUrl: string | undefined = $state();
+  let krokiUrl: string | undefined = $state();
+  let mdCode: string | undefined = $state();
+  let imagemodeselected = $state('auto');
+  let userimagesize = $state(1080);

-  let isNetlify = false;
+  let isNetlify = $state(false);
  if (browser && ['mermaid.live', 'netlify'].some((path) => window.location.host.includes(path))) {
    isNetlify = true;
  }
@@ -187,32 +187,32 @@ ${svgString}`);
 <Card title="Actions" isOpen={false}>
  <div class="m-2 flex flex-wrap gap-2">
    {#if isClipboardAvailable()}
-      <button class="action-btn w-full" on:click={onCopyClipboard}
-        ><i class="far fa-copy mr-2" /> Copy Image to clipboard
+      <button class="action-btn w-full" onclick={onCopyClipboard}
+        ><i class="far fa-copy mr-2"></i> Copy Image to clipboard
      </button>
    {/if}
-    <button id="downloadPNG" class="action-btn flex-grow" on:click={onDownloadPNG}>
-      <i class="fas fa-download mr-2" /> PNG
+    <button id="downloadPNG" class="action-btn flex-grow" onclick={onDownloadPNG}>
+      <i class="fas fa-download mr-2"></i> PNG
    </button>
-    <button id="downloadSVG" class="action-btn flex-grow" on:click={onDownloadSVG}>
-      <i class="fas fa-download mr-2" /> SVG
+    <button id="downloadSVG" class="action-btn flex-grow" onclick={onDownloadSVG}>
+      <i class="fas fa-download mr-2"></i> SVG
    </button>
    {#if rendererUrl}
      <a target="_blank" rel="noreferrer" class="flex-grow" href={iUrl}>
        <button class="action-btn w-full">
-          <i class="fas fa-external-link-alt mr-2" /> PNG
+          <i class="fas fa-external-link-alt mr-2"></i> PNG
        </button>
      </a>
      <a target="_blank" rel="noreferrer" class="flex-grow" href={svgUrl}>
        <button class="action-btn w-full">
-          <i class="fas fa-external-link-alt mr-2" /> SVG
+          <i class="fas fa-external-link-alt mr-2"></i> SVG
        </button>
      </a>
    {/if}
    {#if krokiRendererUrl}
      <a target="_blank" rel="noreferrer" class="flex-grow" href={krokiUrl}>
        <button class="action-btn w-full">
-          <i class="fas fa-external-link-alt mr-2" /> Kroki
+          <i class="fas fa-external-link-alt mr-2"></i> Kroki
        </button>
      </a>
    {/if}
@@ -244,9 +244,9 @@ ${svgString}`);

    {#if rendererUrl}
      <div class="flex w-full items-center gap-2">
-        <input class="input" id="markdown" type="text" value={mdCode} on:click={onCopyMarkdown} />
+        <input class="input" id="markdown" type="text" value={mdCode} onclick={onCopyMarkdown} />
        <label for="markdown">
-          <button class="btn btn-primary btn-md flex-auto" on:click={onCopyMarkdown}>
+          <button class="btn btn-primary btn-md flex-auto" onclick={onCopyMarkdown}>
            Copy Markdown
          </button>
        </label>
@@ -261,7 +261,7 @@ ${svgString}`);
        bind:value={gistURL}
        placeholder="Enter Gist URL" />
      <label for="gist">
-        <button class="btn btn-primary btn-md flex-auto" on:click={loadGist}> Load Gist </button>
+        <button class="btn btn-primary btn-md flex-auto" onclick={loadGist}> Load Gist </button>
      </label>
    </div>
    {#if isNetlify}
--- a/src/lib/components/Card/Card.svelte
+++ b/src/lib/components/Card/Card.svelte
@@ -1,14 +1,38 @@
 <script lang="ts">
  import type { Tab } from '$lib/types';
+  import type { Snippet } from 'svelte';
  import { slide } from 'svelte/transition';
  import Tabs from './Tabs.svelte';
-  export let isCloseable = true;
-  export let isOpen = true;
-  export let tabs: Tab[] = [];
-  export let activeTabID = '';
-  export let title: string;
-  $: isOpen = isCloseable ? isOpen : true;
-  $: isTabsShown = isOpen && tabs.length > 0;
+
+  interface Props {
+    isClosable?: boolean;
+    isOpen?: boolean;
+    tabs?: Tab[];
+    activeTabID?: string;
+    title: string;
+    onselect?: (tab: Tab) => void;
+    actions?: Snippet;
+    children?: Snippet;
+  }
+
+  let {
+    isClosable = true,
+    isOpen = true,
+    tabs = [],
+    activeTabID = '',
+    title,
+    onselect,
+    actions,
+    children
+  }: Props = $props();
+
+  const toggleCardOpen = () => {
+    if (isClosable) {
+      isOpen = !isOpen;
+    }
+  };
+
+  let isTabsShown = $derived(isOpen && tabs.length > 0);
 </script>

 <div class="card m-2 flex flex-grow flex-col overflow-hidden rounded shadow-2xl">
@@ -16,18 +40,18 @@
    role="toolbar"
    tabindex="0"
    class="bg-primary p-2 {isTabsShown ? 'pb-0' : ''} flex-none cursor-pointer"
-    on:click={() => (isOpen = !isOpen)}
-    on:keypress={() => (isOpen = !isOpen)}>
+    onclick={toggleCardOpen}
+    onkeypress={toggleCardOpen}>
    <div class="flex justify-between">
-      <Tabs on:select {tabs} bind:isOpen {title} {isCloseable} {activeTabID} />
+      <Tabs {onselect} {tabs} bind:isOpen {title} {isClosable} {activeTabID} />
      <div class="flex items-center gap-x-4 {isTabsShown ? '-mt-2' : ''}">
-        <slot name="actions" />
+        {@render actions?.()}
      </div>
    </div>
  </div>
  {#if isOpen}
    <div class="card-body flex-grow overflow-auto p-0 text-base-content" transition:slide>
-      <slot />
+      {@render children?.()}
    </div>
  {/if}
 </div>
--- a/src/lib/components/Card/Tabs.svelte
+++ b/src/lib/components/Card/Tabs.svelte
@@ -1,34 +1,43 @@
 <script lang="ts">
-  import type { Tab, TabEvents } from '$lib/types';
-  import { createEventDispatcher } from 'svelte';
+  import type { Tab } from '$lib/types';
  import { fade } from 'svelte/transition';
-  export let isCloseable = true;
-  export let tabs: Tab[];
-  export let title: string;
-  export let isOpen = false;
-  export let activeTabID: string;
+
+  let {
+    isClosable = true,
+    tabs,
+    title,
+    isOpen = $bindable(false),
+    activeTabID = $bindable(),
+    onselect
+  }: {
+    isClosable?: boolean;
+    tabs: Tab[];
+    title: string;
+    isOpen?: boolean;
+    activeTabID: string;
+    onselect?: (tab: Tab) => void;
+  } = $props();

  if (!activeTabID && tabs.length > 0) {
    activeTabID = tabs[0].id;
  }
-  const dispatch = createEventDispatcher<TabEvents>();
+
  const toggleTabs = (tab: Tab) => {
+    return (event: Event) => {
+      event.stopPropagation();
      activeTabID = tab.id;
-    dispatch('select', tab);
+      onselect?.(tab);
+    };
  };
 </script>

 <div class="flex cursor-default">
-  <span
-    role="menubar"
-    tabindex="0"
-    class="mr-2 font-semibold"
-    on:click|stopPropagation={() => (isOpen = !isOpen)}
-    on:keypress|stopPropagation={() => (isOpen = !isOpen)}>
-    {#if isCloseable}
-      <i class="fas fa-chevron-right icon" class:isOpen />
+  <span role="menubar" tabindex="0" class="mr-2 font-semibold">
+    {#if isClosable}
+      <i class="fas fa-chevron-right icon mr-1" class:isOpen></i>
    {/if}
-    {title}</span>
+    {title}
+  </span>
  {#if isOpen && tabs}
    <ul class="tabs" transition:fade>
      {#each tabs as tab}
@@ -36,9 +45,9 @@
          role="tab"
          tabindex="0"
          class="tab tab-lifted {activeTabID === tab.id ? 'tab-active' : 'text-primary-content'}"
-          on:click|stopPropagation={() => toggleTabs(tab)}
-          on:keypress|stopPropagation={() => toggleTabs(tab)}>
-          <i class="mr-1 {tab.icon}" />
+          onclick={toggleTabs(tab)}
+          onkeypress={toggleTabs(tab)}>
+          <i class="mr-1 {tab.icon}"></i>
          {tab.title}
        </div>
      {/each}
--- a/src/lib/components/Editor.svelte
+++ b/src/lib/components/Editor.svelte
@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
  declare global {
    interface Window {
      Cypress: boolean;
@@ -20,7 +20,7 @@
  import monacoJsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
  import { onDestroy, onMount } from 'svelte';

-  let divElement: HTMLDivElement | undefined;
+  let divElement: HTMLDivElement | undefined = $state();
  let editor: monaco.editor.IStandaloneCodeEditor | undefined;
  let editorOptions: monaco.editor.IStandaloneEditorConstructionOptions = {
    minimap: {
@@ -133,11 +133,11 @@
 </script>

 <div class="flex h-full flex-col">
-  <div bind:this={divElement} id="editor" class="h-full flex-grow overflow-hidden" />
+  <div bind:this={divElement} id="editor" class="h-full flex-grow overflow-hidden"></div>
  {#if $stateStore.error instanceof Error}
    <div class="flex flex-col text-sm text-neutral-100">
      <div class="flex items-center gap-2 bg-red-700 p-2">
-        <i class="fa fa-exclamation-circle w-4" aria-hidden="true" />
+        <i class="fa fa-exclamation-circle w-4" aria-hidden="true"></i>
        <p>Diagram syntax error</p>
      </div>
      <div class="max-h-32 overflow-auto bg-red-600 p-2 font-mono">
--- a/src/lib/components/History/History.svelte
+++ b/src/lib/components/History/History.svelte
@@ -1,31 +1,33 @@
 <script lang="ts">
+  import { stopPropagation } from 'svelte/legacy';
+
  import Card from '$lib/components/Card/Card.svelte';
-  import { inputStateStore, getStateString } from '$lib/util/state';
+  import type { HistoryEntry, HistoryType, State, Tab } from '$lib/types';
+  import { notify, prompt } from '$lib/util/notify';
+  import { getStateString, inputStateStore } from '$lib/util/state';
+  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 {
    addHistoryEntry,
-    historyModeStore,
    clearHistoryData,
    getPreviousState,
+    historyModeStore,
    historyStore,
    loaderHistoryStore,
    restoreHistory
  } from './history';
-  import { notify, prompt } from '$lib/util/notify';
-  import { onMount } from 'svelte';
-  import { get } from 'svelte/store';
-  import dayjs from 'dayjs';
-  import dayjsRelativeTime from 'dayjs/plugin/relativeTime';
-  import type { HistoryEntry, HistoryType, State, Tab } from '$lib/types';
-  import { logEvent } from '$lib/util/stats';

  dayjs.extend(dayjsRelativeTime);

  const HISTORY_SAVE_INTERVAL = 60_000;

-  const tabSelectHandler = (message: CustomEvent<Tab>) => {
-    historyModeStore.set(message.detail.id as HistoryType);
+  const tabSelectHandler = (tab: Tab) => {
+    historyModeStore.set(tab.id as HistoryType);
  };
-  let tabs: Tab[] = [
+  let tabs: Tab[] = $state([
    {
      id: 'manual',
      title: 'Saved',
@@ -36,7 +38,7 @@
      title: 'Timeline',
      icon: 'fas fa-history'
    }
-  ];
+  ]);

  const downloadHistory = () => {
    const data = get(historyStore);
@@ -117,38 +119,42 @@
      historyModeStore.set('loader');
    }
  });
-
-  let isOpen = false;
 </script>

-<Card on:select={tabSelectHandler} bind:isOpen {tabs} title="History">
-  <div slot="actions">
+<Card onselect={tabSelectHandler} isOpen={false} {tabs} title="History">
+  {#snippet actions()}
+    <div>
      <button
        id="uploadHistory"
        class="btn btn-secondary btn-xs w-12"
-      on:click|stopPropagation={() => uploadHistory()}
-      title="Upload history"><i class="fa fa-upload" /></button>
+        onclick={stopPropagation(() => uploadHistory())}
+        title="Upload history"
+        aria-label="Upload history"><i class="fa fa-upload"></i></button>
      {#if $historyStore.length > 0}
        <button
          id="downloadHistory"
          class="btn btn-secondary btn-xs w-12"
-        on:click|stopPropagation={() => downloadHistory()}
-        title="Download history"><i class="fa fa-download" /></button>
+          onclick={stopPropagation(() => downloadHistory())}
+          title="Download history"
+          aria-label="Download history"><i class="fa fa-download"></i></button>
      {/if}
      |
      <button
        id="saveHistory"
        class="btn btn-success btn-xs w-12"
-      on:click|stopPropagation={() => saveHistory()}
-      title="Save current state"><i class="far fa-save" /></button>
+        onclick={stopPropagation(() => saveHistory())}
+        title="Save current state"
+        aria-label="Save current state"><i class="far fa-save"></i></button>
      {#if $historyModeStore !== 'loader'}
        <button
          id="clearHistory"
          class="btn btn-error btn-xs w-12"
-        on:click|stopPropagation={() => clearHistory()}
-        title="Delete all saved states"><i class="fas fa-trash-alt" /></button>
+          onclick={stopPropagation(() => clearHistory())}
+          title="Delete all saved states"
+          aria-label="Delete all saved states"><i class="fas fa-trash-alt"></i></button>
      {/if}
    </div>
+  {/snippet}
  <ul class="h-56 space-y-2 overflow-auto p-2" id="historyList">
    {#if $historyStore.length > 0}
      {#each $historyStore as { id, state, time, name, url, type }}
@@ -169,11 +175,11 @@
              </div>
            </div>
            <div class="flex content-center gap-2">
-              <button class="btn btn-success" on:click={() => restoreHistoryItem(state)}
-                ><i class="fas fa-undo mr-1" />Restore</button>
+              <button class="btn btn-success" onclick={() => restoreHistoryItem(state)}
+                ><i class="fas fa-undo mr-1"></i>Restore</button>
              {#if type !== 'loader'}
-                <button class="btn btn-error" on:click={() => clearHistory(id)}
-                  ><i class="fas fa-trash-alt mr-1" />Delete</button>
+                <button class="btn btn-error" onclick={() => clearHistory(id)}
+                  ><i class="fas fa-trash-alt mr-1"></i>Delete</button>
              {/if}
            </div>
          </div>
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -1,6 +1,6 @@
-<script context="module" lang="ts">
-  import { version } from 'mermaid/package.json';
+<script module lang="ts">
  import { logEvent, plausible } from '$lib/util/stats';
+  import { version } from 'mermaid/package.json';
  void logEvent('version', {
    mermaidVersion: version
  });
@@ -8,13 +8,13 @@

 <script lang="ts">
  import { env } from '$lib/util/env';
-  import Theme from './Theme.svelte';
  import { dismissPromotion, getActivePromotion } from '$lib/util/promos/promo';
  import Privacy from './Privacy.svelte';
+  import Theme from './Theme.svelte';

  const { isEnabledMermaidChartLinks } = env;

-  let isMenuOpen = false;
+  let isMenuOpen = $state(false);

  function toggleMenu() {
    isMenuOpen = !isMenuOpen;
@@ -57,7 +57,7 @@
    });
  }

-  let activePromotion = getActivePromotion();
+  let activePromotion = $state(getActivePromotion());

  const trackBannerClick = () => {
    if (!plausible || !activePromotion) {
@@ -76,18 +76,19 @@
      class="flex flex-grow"
      role="button"
      tabindex="0"
-      on:click={trackBannerClick}
-      on:keypress={trackBannerClick}>
-      <svelte:component this={activePromotion.component} />
+      onclick={trackBannerClick}
+      onkeypress={trackBannerClick}>
+      <activePromotion.component />
    </div>
    <button
      class="rounded hover:text-black"
      title="Dismiss banner"
-      on:click={() => {
+      aria-label="Dismiss banner"
+      onclick={() => {
        dismissPromotion(activePromotion?.id);
        activePromotion = undefined;
      }}>
-      <i class="fa fa-close px-2" />
+      <i class="fa fa-close px-2"></i>
    </button>
  </div>
 {/if}
@@ -136,7 +137,7 @@
    type="checkbox"
    id="menu-toggle"
    bind:checked={isMenuOpen}
-    on:click={toggleMenu} />
+    onclick={toggleMenu} />

  <div class="hidden w-full lg:flex lg:w-auto lg:items-center" id="menu">
    <Theme />
@@ -148,7 +149,7 @@
        <li>
          <a class="btn btn-ghost" target="_blank" {href}>
            {#if icon}
-              <i class={icon} />
+              <i class={icon}></i>
            {:else if img}
              <img src={img} alt={title} />
            {/if}
--- a/src/lib/components/Preset.svelte
+++ b/src/lib/components/Preset.svelte
@@ -225,10 +225,10 @@ packet-beta
    {#each diagramOrder as sample}
      <button
        class="btn btn-primary btn-sm w-fit min-w-20 flex-grow normal-case"
-        on:click={() => loadSampleDiagram(sample)}>
+        onclick={() => loadSampleDiagram(sample)}>
        {sample}
        {#if newDiagrams.includes(sample)}
-          <span class="fa fa-heart ml-2" />
+          <span class="fa fa-heart ml-2"></span>
        {/if}
      </button>
    {/each}
--- a/src/lib/components/Theme.svelte
+++ b/src/lib/components/Theme.svelte
@@ -27,7 +27,7 @@
 </script>

 <div class="dropdown hidden lg:block">
-  <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+  <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
  <div tabindex="0" class="btn btn-ghost">
    <svg
      xmlns="http://www.w3.org/2000/svg"
@@ -49,7 +49,7 @@
  </div>
  <div
    class="dropdown-content top-px mt-14 h-96 w-56 overflow-y-auto bg-base-200 text-base-content shadow-2xl">
-    <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+    <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
    <ul tabindex="0" class="menu compact p-4">
      {#each themes as theme}
        <li class:bordered={$themeStore.theme !== undefined && theme.includes($themeStore.theme)}>
@@ -57,8 +57,8 @@
            role="menuitem"
            tabindex="0"
            class="btn btn-ghost justify-start"
-            on:click={() => setTheme(theme)}
-            on:keypress={() => setTheme(theme)}>{theme}</span>
+            onclick={() => setTheme(theme)}
+            onkeypress={() => setTheme(theme)}>{theme}</span>
        </li>
      {/each}
    </ul>
--- a/src/lib/components/View.svelte
+++ b/src/lib/components/View.svelte
@@ -12,12 +12,12 @@

  let code = '';
  let config = '';
-  let container: HTMLDivElement;
+  let container: HTMLDivElement | undefined = $state();
  let rough: boolean;
-  let view: HTMLDivElement;
-  let error = false;
-  let outOfSync = false;
-  let hide = false;
+  let view: HTMLDivElement | undefined = $state();
+  let error = $state(false);
+  let outOfSync = $state(false);
+  let hide = $state(false);
  let manualUpdate = true;
  let panZoomEnabled = $stateStore.panZoom;
  let pzoom: typeof panzoom | undefined;
@@ -93,7 +93,7 @@
        config = state.mermaid;
        panZoomEnabled = state.panZoom;
        rough = state.rough;
-        const scroll = view.parentElement?.scrollTop;
+        const scroll = view?.parentElement?.scrollTop;
        delete container.dataset.processed;
        const { svg, bindFunctions } = await renderDiagram(
          Object.assign({}, JSON.parse(state.mermaid)) as MermaidConfig,
@@ -131,7 +131,7 @@
            }
          }
        }
-        if (view.parentElement && scroll) {
+        if (view?.parentElement && scroll) {
          view.parentElement.scrollTop = scroll;
        }
        error = false;
@@ -171,13 +171,13 @@
    {#if $stateStore.autoSync}
      It will be updated automatically.
    {:else}
-      Press <i class="fas fa-sync" /> (Sync button) or <kbd>{cmdKey} + Enter</kbd> to sync.
+      Press <i class="fas fa-sync"></i> (Sync button) or <kbd>{cmdKey} + Enter</kbd> to sync.
    {/if}
  </div>
 {/if}

 <div id="view" bind:this={view} class="h-full p-2" class:error class:outOfSync>
-  <div id="container" bind:this={container} class="h-full overflow-auto" class:hide />
+  <div id="container" bind:this={container} class="h-full overflow-auto" class:hide></div>
 </div>

 <style>
--- a/src/lib/util/promos/August2024.svelte
+++ b/src/lib/util/promos/August2024.svelte
@@ -23,7 +23,7 @@
  ];

  let index = Math.floor(Math.random() * taglines.length);
-  let currentTagline = taglines[index];
+  let currentTagline = $state(taglines[index]);

  const interval = setInterval(() => {
    index = (index + 1) % taglines.length;
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,11 +1,17 @@
 <script lang="ts">
-  import '../app.postcss';
  import { base } from '$app/paths';
-  import { onMount } from 'svelte';
  import { loadingStateStore } from '$lib/util/loading';
-  import { setTheme, themeStore } from '$lib/util/theme';
  import { toggleDarkTheme } from '$lib/util/state';
+  import { setTheme, themeStore } from '$lib/util/theme';
  import { initHandler } from '$lib/util/util';
+  import { onMount, type Snippet } from 'svelte';
+  import '../app.postcss';
+
+  interface Props {
+    children?: Snippet;
+  }
+
+  let { children }: Props = $props();

  // This can be removed once https://github.com/sveltejs/kit/issues/1612 is fixed.
  // Then move it into src and vite will bundle it automatically.
@@ -42,14 +48,14 @@
 </script>

 <main class="h-screen text-primary-content">
-  <slot />
+  {@render children?.()}
 </main>

 {#if $loadingStateStore.loading}
  <div
    class="absolute left-0 top-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 class="loader mx-auto"></div>
      <div>{$loadingStateStore.message}</div>
    </div>
  </div>
--- a/src/routes/edit/+page.svelte
+++ b/src/routes/edit/+page.svelte
@@ -84,9 +84,9 @@
      config: '/syntax/xyChart.html#chart-configurations'
    }
  };
-  let docURL = docURLBase;
-  let activeTabID = 'code';
-  let docKey = '';
+  let docURL = $state(docURLBase);
+  let activeTabID = $state('code');
+  let docKey = $state('');
  stateStore.subscribe(({ code, editorMode }: ValidatedState) => {
    activeTabID = editorMode;
    const codeTypeMatch = /(\S+)\s/.exec(code);
@@ -97,8 +97,8 @@
    }
  });

-  const tabSelectHandler = (message: CustomEvent<Tab>) => {
-    const editorMode: EditorMode = message.detail.id === 'code' ? 'code' : 'config';
+  const tabSelectHandler = (tab: Tab) => {
+    const editorMode: EditorMode = tab.id === 'code' ? 'code' : 'config';
    updateCodeStore({ editorMode });
  };

@@ -145,8 +145,9 @@
  <Navbar />
  <div class="flex flex-1 overflow-hidden">
    <div class="hidden flex-col md:flex" id="editorPane" style="width: 40%">
-      <Card on:select={tabSelectHandler} {tabs} isCloseable={false} {activeTabID} title="Mermaid">
-        <div slot="actions" class="flex flex-row items-center">
+      <Card onselect={tabSelectHandler} {tabs} isClosable={false} {activeTabID} title="Mermaid">
+        {#snippet actions()}
+          <div class="flex flex-row items-center">
            <div class="form-control flex-row items-center">
              <label class="label cursor-pointer" for="autoSync">
                <span> Auto sync</span>
@@ -162,18 +163,20 @@
              <button
                class="btn btn-secondary btn-xs mr-1"
                title="Sync Diagram ({cmdKey} + Enter)"
+                aria-label="Sync Diagram"
                data-cy="sync"
-              on:click={syncDiagram}><i class="fas fa-sync" /></button>
+                onclick={syncDiagram}><i class="fas fa-sync"></i></button>
            {/if}

            <button
              class="btn btn-secondary btn-xs"
              title="View documentation for {docKey.replace('Diagram', '')} diagram">
              <a target="_blank" href={docURL} data-cy="docs">
-              <i class="fas fa-book mr-1" />Docs
+                <i class="fas fa-book mr-1"></i>Docs
              </a>
            </button>
          </div>
+        {/snippet}

        <Editor />
      </Card>
@@ -184,10 +187,11 @@
        <Actions />
      </div>
    </div>
-    <div id="resizeHandler" class="hidden md:block" />
+    <div id="resizeHandler" class="hidden md:block"></div>
    <div class="flex flex-1 flex-col overflow-hidden">
-      <Card title="Diagram" isCloseable={false}>
-        <div slot="actions" class="flex flex-row items-center gap-2">
+      <Card title="Diagram" isClosable={false}>
+        {#snippet actions()}
+          <div class="flex flex-row items-center gap-2">
            <label
              class="label flex cursor-pointer gap-1 py-0"
              title="Rough mode is in beta. Features like clickable nodes, Pan & Zoom, will be disabled."
@@ -215,17 +219,19 @@
              href={`${base}/view#${$stateStore.serialized}`}
              target="_blank"
              class="btn btn-secondary btn-xs gap-1"
-            title="View diagram in new page"><i class="fas fa-external-link-alt" />Full screen</a>
+              title="View diagram in new page"
+              ><i class="fas fa-external-link-alt"></i>Full screen</a>
            {#if env.isEnabledMermaidChartLinks}
              <a
                href={`${MCBaseURL}/app/plugin/save?state=${$stateStore.serialized}`}
                target="_blank"
                class="btn btn-secondary btn-xs gap-1 bg-[#FF3570]"
                title="Save diagram in Mermaid Chart"
-              ><img src="./mermaidchart-logo.svg" class="h-5 w-5" alt="Mermaid chart logo" />Save to
-              Mermaid Chart</a>
+                ><img src="./mermaidchart-logo.svg" class="h-5 w-5" alt="Mermaid chart logo" />Save
+                to Mermaid Chart</a>
            {/if}
          </div>
+        {/snippet}

        <div class="flex-1 overflow-auto">
          <View />
--- a/yarn.lock
+++ b/yarn.lock
@@ -12,7 +12,7 @@
  resolved "https://registry.yarnpkg.com/@alloc/quick-lru/-/quick-lru-5.2.0.tgz#7bf68b20c0a350f936915fcae06f58e32007ce30"
  integrity sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==

-"@ampproject/remapping@^2.2.1":
+"@ampproject/remapping@^2.3.0":
  version "2.3.0"
  resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.3.0.tgz#ed441b6fa600072520ce18b43d2c8cc8caecc7f4"
  integrity sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==
@@ -485,7 +485,7 @@
    "@jridgewell/resolve-uri" "^3.1.0"
    "@jridgewell/sourcemap-codec" "^1.4.14"

-"@jridgewell/trace-mapping@^0.3.18", "@jridgewell/trace-mapping@^0.3.24":
+"@jridgewell/trace-mapping@^0.3.24":
  version "0.3.25"
  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz#15f190e98895f3fc23276ee14bc76b675c2e50f0"
  integrity sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==
@@ -636,14 +636,14 @@
  resolved "https://registry.yarnpkg.com/@sveltejs/adapter-static/-/adapter-static-3.0.4.tgz#5ab50410156c1c71dc78404e498fc38207aa59e4"
  integrity sha512-Qm4GAHCnRXwfWG9/AtnQ7mqjyjTs7i0Opyb8H2KH9rMR7fLxqiPx/tXeoE6HHo66+72CjyOb4nFH3lrejY4vzA==

-"@sveltejs/kit@2.5.26":
-  version "2.5.26"
-  resolved "https://registry.yarnpkg.com/@sveltejs/kit/-/kit-2.5.26.tgz#f6a73027346d2f2e3be120446f5dccace6ca6c25"
-  integrity sha512-8l1JTIM2L+bS8ebq1E+nGjv/YSKSnD9Q19bYIUkc41vaEG2JjVUx6ikvPIJv2hkQAuqJLzoPrXlKk4KcyWOv3Q==
+"@sveltejs/kit@^2.5.27":
+  version "2.7.3"
+  resolved "https://registry.yarnpkg.com/@sveltejs/kit/-/kit-2.7.3.tgz#83a4d7145d89a16e939c6c72f1fe928a176c7986"
+  integrity sha512-Vx7nq5MJ86I8qXYsVidC5PX6xm+uxt8DydvOdmJoyOK7LvGP18OFEG359yY+aa51t6pENvqZAMqAREQQx1OI2Q==
  dependencies:
    "@types/cookie" "^0.6.0"
    cookie "^0.6.0"
-    devalue "^5.0.0"
+    devalue "^5.1.0"
    esm-env "^1.0.0"
    import-meta-resolve "^4.1.0"
    kleur "^4.1.5"
@@ -651,28 +651,27 @@
    mrmime "^2.0.0"
    sade "^1.8.1"
    set-cookie-parser "^2.6.0"
-    sirv "^2.0.4"
+    sirv "^3.0.0"
    tiny-glob "^0.2.9"

-"@sveltejs/vite-plugin-svelte-inspector@^2.1.0":
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-2.1.0.tgz#116ba2b73be43c1d7d93de749f37becc7e45bb8c"
-  integrity sha512-9QX28IymvBlSCqsCll5t0kQVxipsfhFFL+L2t3nTWfXnddYwxBuAEtTtlaVQpRz9c37BhJjltSeY4AJSC03SSg==
+"@sveltejs/vite-plugin-svelte-inspector@^3.0.0-next.0||^3.0.0":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@sveltejs/vite-plugin-svelte-inspector/-/vite-plugin-svelte-inspector-3.0.1.tgz#006bcab6ea90e09c65459133d4e3eaa6b1e83e28"
+  integrity sha512-2CKypmj1sM4GE7HjllT7UKmo4Q6L5xFRd7VMGEWhYnZ+wc6AUVU01IBd7yUi6WnFndEwWoMNOd6e8UjoN0nbvQ==
  dependencies:
-    debug "^4.3.4"
+    debug "^4.3.7"

-"@sveltejs/vite-plugin-svelte@^3.0.1":
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-3.1.2.tgz#be3120b52e6d9facb55d58392b0dad9e5a35ba6f"
-  integrity sha512-Txsm1tJvtiYeLUVRNqxZGKR/mI+CzuIQuc2gn+YCs9rMTowpNZ2Nqt53JdL8KF9bLhAf2ruR/dr9eZCwdTriRA==
+"@sveltejs/vite-plugin-svelte@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-4.0.0.tgz#4e7c2fe6fd262f6bbd7dc82085a76654cbaeafe5"
+  integrity sha512-kpVJwF+gNiMEsoHaw+FJL76IYiwBikkxYU83+BpqQLdVMff19KeRKLd2wisS8niNBMJ2omv5gG+iGDDwd8jzag==
  dependencies:
-    "@sveltejs/vite-plugin-svelte-inspector" "^2.1.0"
-    debug "^4.3.4"
+    "@sveltejs/vite-plugin-svelte-inspector" "^3.0.0-next.0||^3.0.0"
+    debug "^4.3.7"
    deepmerge "^4.3.1"
    kleur "^4.1.5"
-    magic-string "^0.30.10"
-    svelte-hmr "^0.16.0"
-    vitefu "^0.2.5"
+    magic-string "^0.30.12"
+    vitefu "^1.0.3"

 "@tanstack/virtual-core@3.1.3":
  version "3.1.3"
@@ -744,6 +743,11 @@
  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.5.tgz#a6ce3e556e00fd9895dd872dd172ad0d4bd687f4"
  integrity sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==

+"@types/estree@^1.0.5":
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.6.tgz#628effeeae2064a1b4e79f78e81d87b7e5fc7b50"
+  integrity sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==
+
 "@types/istanbul-lib-coverage@^2.0.1":
  version "2.0.4"
  resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz#8467d4b3c087805d63580480890791277ce35c44"
@@ -788,11 +792,6 @@
  resolved "https://registry.yarnpkg.com/@types/pako/-/pako-2.0.3.tgz#b6993334f3af27c158f3fe0dfeeba987c578afb1"
  integrity sha512-bq0hMV9opAcrmE0Byyo0fY3Ew4tgOevJmQ9grUhpXQhYfyLJ1Kqg3P33JT5fdbT2AjeAjR51zqqVjAL/HMkx7Q==

-"@types/pug@^2.0.6":
-  version "2.0.10"
-  resolved "https://registry.yarnpkg.com/@types/pug/-/pug-2.0.10.tgz#52f8dbd6113517aef901db20b4f3fca543b88c1f"
-  integrity sha512-Sk/uYFOBAB7mb74XcpizmH0KOR2Pv3D2Hmrh1Dmy5BmK3MpdSa5kqZcg6EKBdklU0bFXX9gCfzvpnyUehrPIuA==
-
 "@types/ramda@^0.28.20":
  version "0.28.25"
  resolved "https://registry.yarnpkg.com/@types/ramda/-/ramda-0.28.25.tgz#68080ef9eed92cddcd2c727cf3fe09f6a093e475"
@@ -1184,6 +1183,11 @@ acorn-jsx@^5.3.2:
  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
  integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==

+acorn-typescript@^1.4.13:
+  version "1.4.13"
+  resolved "https://registry.yarnpkg.com/acorn-typescript/-/acorn-typescript-1.4.13.tgz#5f851c8bdda0aa716ffdd5f6ac084df8acc6f5ea"
+  integrity sha512-xsc9Xv0xlVfwp2o7sQ+GCQ1PgbkdcpWdTzrwXxO3xDMTAywVS3oXVOcOHuRjAPkS4P9b+yc/qNF15460v+jp4Q==
+
 acorn-walk@^8.0.2:
  version "8.2.0"
  resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-8.2.0.tgz#741210f2e2426454508853a2f44d0ab83b7f69c1"
@@ -1199,16 +1203,16 @@ acorn@^8.1.0, acorn@^8.8.2:
  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.10.0.tgz#8be5b3907a67221a81ab23c7889c4c5526b62ec5"
  integrity sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==

-acorn@^8.10.0:
-  version "8.12.0"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.12.0.tgz#1627bfa2e058148036133b8d9b51a700663c294c"
-  integrity sha512-RTvkC4w+KNXrM39/lWCUaG0IbRkWdCv7W/IOW9oU6SawyxulvkQy5HQPVTKxEjczcUvapcrw3cFx/60VN/NRNw==
-
 acorn@^8.11.3:
  version "8.11.3"
  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.11.3.tgz#71e0b14e13a4ec160724b38fb7b0f233b1b81d7a"
  integrity sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==

+acorn@^8.12.1:
+  version "8.14.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.14.0.tgz#063e2c70cac5fb4f6467f0b11152e04c682795b0"
+  integrity sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==
+
 acorn@^8.9.0:
  version "8.12.1"
  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.12.1.tgz#71616bdccbe25e27a54439e0046e89ca76df2248"
@@ -1359,6 +1363,11 @@ aria-query@^5.3.0:
  dependencies:
    dequal "^2.0.3"

+aria-query@^5.3.1:
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.3.2.tgz#93f81a43480e33a338f19163a3d10a50c01dcd59"
+  integrity sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==
+
 array-buffer-byte-length@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/array-buffer-byte-length/-/array-buffer-byte-length-1.0.0.tgz#fabe8bc193fea865f317fe7807085ee0dee5aead"
@@ -1443,12 +1452,10 @@ aws4@^1.8.0:
  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.12.0.tgz#ce1c9d143389679e253b314241ea9aa5cec980d3"
  integrity sha512-NmWvPnx0F1SfrQbYwOi7OeaNGokp9XhzNioJ/CSBs8Qa4vxug81mhJEAVZwxXuBmYB5KDRfMq/F3RR0BIU7sWg==

-axobject-query@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-4.0.0.tgz#04a4c90dce33cc5d606c76d6216e3b250ff70dab"
-  integrity sha512-+60uv1hiVFhHZeO+Lz0RYzsVHy5Wr1ayX0mwda9KPDVLNJgZ1T9Ny7VmFbLDzxsH0D87I86vgj3gFrjTJUYznw==
-  dependencies:
-    dequal "^2.0.3"
+axobject-query@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-4.1.0.tgz#28768c76d0e3cff21bc62a9e2d0b6ac30042a1ee"
+  integrity sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==

 balanced-match@^1.0.0:
  version "1.0.2"
@@ -1546,7 +1553,7 @@ browserslist@^4.23.0, browserslist@^4.23.3:
    node-releases "^2.0.18"
    update-browserslist-db "^1.1.0"

-buffer-crc32@^0.2.5, buffer-crc32@~0.2.3:
+buffer-crc32@~0.2.3:
  version "0.2.13"
  resolved "https://registry.yarnpkg.com/buffer-crc32/-/buffer-crc32-0.2.13.tgz#0d333e3f00eac50aa1454abd30ef8c2a5d9a7242"
  integrity sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==
@@ -1816,17 +1823,6 @@ cliui@^7.0.2:
    strip-ansi "^6.0.0"
    wrap-ansi "^7.0.0"

-code-red@^1.0.3:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/code-red/-/code-red-1.0.4.tgz#59ba5c9d1d320a4ef795bc10a28bd42bfebe3e35"
-  integrity sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==
-  dependencies:
-    "@jridgewell/sourcemap-codec" "^1.4.15"
-    "@types/estree" "^1.0.1"
-    acorn "^8.10.0"
-    estree-walker "^3.0.3"
-    periscopic "^3.1.0"
-
 color-convert@^1.9.0:
  version "1.9.3"
  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
@@ -2567,7 +2563,7 @@ debug@^4.3.4, debug@~4.3.6:
  dependencies:
    ms "2.1.2"

-debug@^4.3.6:
+debug@^4.3.6, debug@^4.3.7:
  version "4.3.7"
  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.7.tgz#87945b4151a011d76d95a198d7111c865c360a52"
  integrity sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==
@@ -2654,15 +2650,10 @@ dequal@^2.0.3:
  resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.3.tgz#2644214f1997d39ed0ee0ece72335490a7ac67be"
  integrity sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==

-detect-indent@^6.1.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-6.1.0.tgz#592485ebbbf6b3b1ab2be175c8393d04ca0d57e6"
-  integrity sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==
-
-devalue@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/devalue/-/devalue-5.0.0.tgz#1ca0099a7d715b4d6cac3924e770ccbbc584ad98"
-  integrity sha512-gO+/OMXF7488D+u3ue+G7Y4AA3ZmUnB3eHJXmBTgNHvr4ZNzl36A0ZtG+XCRNYCkYx/bFmw4qtkoFLa+wSrwAA==
+devalue@^5.1.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/devalue/-/devalue-5.1.1.tgz#a71887ac0f354652851752654e4bd435a53891ae"
+  integrity sha512-maua5KUiapvEwiEAe+XnlZ3Rh0GD+qI1J/nb9vrJc3muPXvcF/8gXYTWF76+5DAqHyDUtOIImEuo0YKE9mshVw==

 didyoumean@^1.2.2:
  version "1.2.2"
@@ -2880,11 +2871,6 @@ es-get-iterator@^1.1.3:
    isarray "^2.0.5"
    stop-iteration-iterator "^1.0.0"

-es6-promise@^3.1.2:
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-3.3.1.tgz#a08cdde84ccdbf34d027a1451bc91d4bcd28a613"
-  integrity sha512-SOp9Phqvqn7jtEUxPWdWfWoLmyt2VaJ6MpvP9Comy1MceMXqE6bxvaTu4iaxpYYPzhny28Lc+M87/c2cPK6lDg==
-
 esbuild@^0.21.3:
  version "0.21.5"
  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.21.5.tgz#9ca301b120922959b766360d8ac830da0d02997d"
@@ -2988,22 +2974,22 @@ eslint-plugin-postcss-modules@^2.0.0:
    postcss-modules-scope "^3.0.0"
    postcss-modules-values "^4.0.0"

-eslint-plugin-svelte@^2.35.1:
-  version "2.43.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-svelte/-/eslint-plugin-svelte-2.43.0.tgz#bcfaec0e114e3450071415c3ef9c57dcf7ce118f"
-  integrity sha512-REkxQWvg2pp7QVLxQNa+dJ97xUqRe7Y2JJbSWkHSuszu0VcblZtXkPBPckkivk99y5CdLw4slqfPylL2d/X4jQ==
+eslint-plugin-svelte@^2.45.1:
+  version "2.46.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-svelte/-/eslint-plugin-svelte-2.46.0.tgz#87bcc2820233065f79114012203b082319ff03e9"
+  integrity sha512-1A7iEMkzmCZ9/Iz+EAfOGYL8IoIG6zeKEq1SmpxGeM5SXmoQq+ZNnCpXFVJpsxPWYx8jIVGMerQMzX20cqUl0g==
  dependencies:
    "@eslint-community/eslint-utils" "^4.4.0"
    "@jridgewell/sourcemap-codec" "^1.4.15"
    eslint-compat-utils "^0.5.1"
    esutils "^2.0.3"
-    known-css-properties "^0.34.0"
+    known-css-properties "^0.35.0"
    postcss "^8.4.38"
    postcss-load-config "^3.1.4"
    postcss-safe-parser "^6.0.0"
    postcss-selector-parser "^6.1.0"
    semver "^7.6.2"
-    svelte-eslint-parser "^0.41.0"
+    svelte-eslint-parser "^0.43.0"

 eslint-plugin-tailwindcss@^3.13.1:
  version "3.17.4"
@@ -3137,6 +3123,14 @@ esquery@^1.4.2, esquery@^1.5.0:
  dependencies:
    estraverse "^5.1.0"

+esrap@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/esrap/-/esrap-1.2.2.tgz#b9e3afee3f12238563a763b7fa86220de2c53203"
+  integrity sha512-F2pSJklxx1BlQIQgooczXCPHmcWpn6EsP5oo73LQfonG9fIlIENQ8vMmfGXeojP9MrkzUNAfyU5vdFlR9shHAw==
+  dependencies:
+    "@jridgewell/sourcemap-codec" "^1.4.15"
+    "@types/estree" "^1.0.1"
+
 esrecurse@^4.3.0:
  version "4.3.0"
  resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.3.0.tgz#7ad7964d679abb28bee72cec63758b1c5d2c9921"
@@ -3159,7 +3153,7 @@ estree-walker@^2.0.2:
  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
  integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==

-estree-walker@^3.0.0, estree-walker@^3.0.3:
+estree-walker@^3.0.3:
  version "3.0.3"
  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-3.0.3.tgz#67c3e549ec402a487b4fc193d1953a524752340d"
  integrity sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==
@@ -3608,7 +3602,7 @@ gopd@^1.0.1:
  dependencies:
    get-intrinsic "^1.1.3"

-graceful-fs@^4.1.3, graceful-fs@^4.1.6, graceful-fs@^4.2.0:
+graceful-fs@^4.1.6, graceful-fs@^4.2.0:
  version "4.2.11"
  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3"
  integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
@@ -4016,7 +4010,7 @@ is-potential-custom-element-name@^1.0.1:
  resolved "https://registry.yarnpkg.com/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz#171ed6f19e3ac554394edf78caa05784a45bebb5"
  integrity sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==

-is-reference@^3.0.0, is-reference@^3.0.1:
+is-reference@^3.0.2:
  version "3.0.2"
  resolved "https://registry.yarnpkg.com/is-reference/-/is-reference-3.0.2.tgz#154747a01f45cd962404ee89d43837af2cba247c"
  integrity sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==
@@ -4304,10 +4298,10 @@ kleur@^4.1.5:
  resolved "https://registry.yarnpkg.com/kleur/-/kleur-4.1.5.tgz#95106101795f7050c6c650f350c683febddb1780"
  integrity sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==

-known-css-properties@^0.34.0:
-  version "0.34.0"
-  resolved "https://registry.yarnpkg.com/known-css-properties/-/known-css-properties-0.34.0.tgz#ccd7e9f4388302231b3f174a8b1d5b1f7b576cea"
-  integrity sha512-tBECoUqNFbyAY4RrbqsBQqDFpGXAEbdD5QKr8kACx3+rnArmuuR22nKQWKazvp07N9yjTyDZaw/20UIH8tL9DQ==
+known-css-properties@^0.35.0:
+  version "0.35.0"
+  resolved "https://registry.yarnpkg.com/known-css-properties/-/known-css-properties-0.35.0.tgz#f6f8e40ab4e5700fa32f5b2ef5218a56bc853bd6"
+  integrity sha512-a/RAk2BfKk+WFGhhOCAYqSiFLc34k8Mt/6NWRI4joER0EYUzXIcFivjjnoD3+XU1DggLn/tZc3DOAgke7l8a4A==

 kolorist@^1.8.0:
  version "1.8.0"
@@ -4535,7 +4529,14 @@ magic-string@^0.30.10:
  dependencies:
    "@jridgewell/sourcemap-codec" "^1.5.0"

-magic-string@^0.30.4, magic-string@^0.30.5:
+magic-string@^0.30.11, magic-string@^0.30.12:
+  version "0.30.12"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.12.tgz#9eb11c9d072b9bcb4940a5b2c2e1a217e4ee1a60"
+  integrity sha512-Ea8I3sQMVXr8JhN4z+H/d8zwo+tYDgHE9+5G4Wnrwhs0gaK9fXTKx0Tw5Xwsd/bCPTTZNRAdpyzvoeORe9LYpw==
+  dependencies:
+    "@jridgewell/sourcemap-codec" "^1.5.0"
+
+magic-string@^0.30.5:
  version "0.30.10"
  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.10.tgz#123d9c41a0cb5640c892b041d4cfb3bd0aa4b39e"
  integrity sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==
@@ -4665,7 +4666,7 @@ minimatch@^9.0.4:
  dependencies:
    brace-expansion "^2.0.1"

-minimist@^1.2.0, minimist@^1.2.6, minimist@^1.2.8:
+minimist@^1.2.6, minimist@^1.2.8:
  version "1.2.8"
  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
  integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==
@@ -4675,7 +4676,7 @@ minimist@^1.2.0, minimist@^1.2.6, minimist@^1.2.8:
  resolved "https://registry.yarnpkg.com/minipass/-/minipass-7.1.2.tgz#93a9626ce5e5e66bd4db86849e7515e92340a707"
  integrity sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==

-mkdirp@^0.5.1, mkdirp@~0.5.1:
+mkdirp@~0.5.1:
  version "0.5.6"
  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.6.tgz#7def03d2432dcae4ba1d611445c48396062255f6"
  integrity sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==
@@ -5078,15 +5079,6 @@ performance-now@^2.1.0:
  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
  integrity sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==

-periscopic@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/periscopic/-/periscopic-3.1.0.tgz#7e9037bf51c5855bd33b48928828db4afa79d97a"
-  integrity sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==
-  dependencies:
-    "@types/estree" "^1.0.0"
-    estree-walker "^3.0.0"
-    is-reference "^3.0.0"
-
 picocolors@^1.0.0, picocolors@^1.0.1:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.0.tgz#5358b76a78cde483ba5cef6a9dc9671440b27d59"
@@ -5547,10 +5539,10 @@ prelude-ls@^1.2.1:
  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
  integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==

-prettier-plugin-svelte@^3.1.2:
-  version "3.2.6"
-  resolved "https://registry.yarnpkg.com/prettier-plugin-svelte/-/prettier-plugin-svelte-3.2.6.tgz#22e5b6783a2c87bfe112e0f4b1886ea3db236bf4"
-  integrity sha512-Y1XWLw7vXUQQZmgv1JAEiLcErqUniAF2wO7QJsw8BVMvpLET2dI5WpEIEJx1r11iHVdSMzQxivyfrH9On9t2IQ==
+prettier-plugin-svelte@^3.2.6:
+  version "3.2.7"
+  resolved "https://registry.yarnpkg.com/prettier-plugin-svelte/-/prettier-plugin-svelte-3.2.7.tgz#10db2d553b48c6ed412e2d00688f8d2eaa274f8a"
+  integrity sha512-/Dswx/ea0lV34If1eDcG3nulQ63YNr5KPDfMsjbdtpSWOxKKJ7nAc2qlVuYwEvCr4raIuredNoR7K4JCkmTGaQ==

 prettier-plugin-tailwindcss@^0.6.0:
  version "0.6.6"
@@ -5834,13 +5826,6 @@ rfdc@^1.4.1:
  resolved "https://registry.yarnpkg.com/rfdc/-/rfdc-1.4.1.tgz#778f76c4fb731d93414e8f925fbecf64cce7f6ca"
  integrity sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==

-rimraf@^2.5.2:
-  version "2.7.1"
-  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
-  integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
-  dependencies:
-    glob "^7.1.3"
-
 rimraf@^3.0.0, rimraf@^3.0.2:
  version "3.0.2"
  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
@@ -5934,16 +5919,6 @@ safe-stable-stringify@^2.3.1:
  resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
  integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==

-sander@^0.5.0:
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/sander/-/sander-0.5.1.tgz#741e245e231f07cafb6fdf0f133adfa216a502ad"
-  integrity sha512-3lVqBir7WuKDHGrKRDn/1Ye3kwpXaDOMsiRP1wd6wpZW56gJhsbp5RqQpA6JG/P+pkXizygnr1dKR8vzWaVsfA==
-  dependencies:
-    es6-promise "^3.1.2"
-    graceful-fs "^4.1.3"
-    mkdirp "^0.5.1"
-    rimraf "^2.5.2"
-
 saxes@^6.0.0:
  version "6.0.0"
  resolved "https://registry.yarnpkg.com/saxes/-/saxes-6.0.0.tgz#fe5b4a4768df4f14a201b1ba6a65c1f3d9988cc5"
@@ -6047,6 +6022,15 @@ sirv@^2.0.4:
    mrmime "^2.0.0"
    totalist "^3.0.0"

+sirv@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/sirv/-/sirv-3.0.0.tgz#f8d90fc528f65dff04cb597a88609d4e8a4361ce"
+  integrity sha512-BPwJGUeDaDCHihkORDchNyyTvWFhcusy1XMmhEVTQTwGeybFbp8YEmB+njbPnth1FibULBSBVwCQni25XlCUDg==
+  dependencies:
+    "@polka/url" "^1.0.0-next.24"
+    mrmime "^2.0.0"
+    totalist "^3.0.0"
+
 slash@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
@@ -6117,16 +6101,6 @@ sonic-boom@^3.7.0:
  dependencies:
    atomic-sleep "^1.0.0"

-sorcery@^0.11.0:
-  version "0.11.0"
-  resolved "https://registry.yarnpkg.com/sorcery/-/sorcery-0.11.0.tgz#310c80ee993433854bb55bb9aa4003acd147fca8"
-  integrity sha512-J69LQ22xrQB1cIFJhPfgtLuI6BpWRiWu1Y3vSsIwK/eAScqJxd/+CJlUuHQRdX2C9NGFamq+KqNywGgaThwfHw==
-  dependencies:
-    "@jridgewell/sourcemap-codec" "^1.4.14"
-    buffer-crc32 "^0.2.5"
-    minimist "^1.2.0"
-    sander "^0.5.0"
-
 source-map-js@^1.0.1, source-map-js@^1.0.2, source-map-js@^1.2.0:
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.0.tgz#16b809c162517b5b8c3e7dcd315a2a5c2612b2af"
@@ -6376,10 +6350,10 @@ supports-preserve-symlinks-flag@^1.0.0:
  resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
  integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==

-svelte-eslint-parser@^0.41.0:
-  version "0.41.0"
-  resolved "https://registry.yarnpkg.com/svelte-eslint-parser/-/svelte-eslint-parser-0.41.0.tgz#7d02c2314abe7dc4fe0e935bf4fcc28078c590f2"
-  integrity sha512-L6f4hOL+AbgfBIB52Z310pg1d2QjRqm7wy3kI1W6hhdhX5bvu7+f0R6w4ykp5HoDdzq+vGhIJmsisaiJDGmVfA==
+svelte-eslint-parser@^0.43.0:
+  version "0.43.0"
+  resolved "https://registry.yarnpkg.com/svelte-eslint-parser/-/svelte-eslint-parser-0.43.0.tgz#649e80f65183c4c1d1536d03dcb903e0632f4da4"
+  integrity sha512-GpU52uPKKcVnh8tKN5P4UZpJ/fUDndmq7wfsvoVXsyP+aY0anol7Yqo01fyrlaWGMFfm4av5DyrjlaXdLRJvGA==
  dependencies:
    eslint-scope "^7.2.2"
    eslint-visitor-keys "^3.4.3"
@@ -6387,41 +6361,29 @@ svelte-eslint-parser@^0.41.0:
    postcss "^8.4.39"
    postcss-scss "^4.0.9"

-svelte-hmr@^0.16.0:
-  version "0.16.0"
-  resolved "https://registry.yarnpkg.com/svelte-hmr/-/svelte-hmr-0.16.0.tgz#9f345b7d1c1662f1613747ed7e82507e376c1716"
-  integrity sha512-Gyc7cOS3VJzLlfj7wKS0ZnzDVdv3Pn2IuVeJPk9m2skfhcu5bq3wtIZyQGggr7/Iim5rH5cncyQft/kRLupcnA==
+svelte-preprocess@^6.0.0:
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/svelte-preprocess/-/svelte-preprocess-6.0.3.tgz#fdc1f9dc41b6f22bf8b1f059e9f21eaaae181eeb"
+  integrity sha512-PLG2k05qHdhmRG7zR/dyo5qKvakhm8IJ+hD2eFRQmMLHp7X3eJnjeupUtvuRpbNiF31RjVw45W+abDwHEmP5OA==

-svelte-preprocess@^5.1.3:
+svelte@^5.0.0:
  version "5.1.4"
-  resolved "https://registry.yarnpkg.com/svelte-preprocess/-/svelte-preprocess-5.1.4.tgz#14ada075c94bbd2b71c5ec70ff72f8ebe1c95b91"
-  integrity sha512-IvnbQ6D6Ao3Gg6ftiM5tdbR6aAETwjhHV+UKGf5bHGYR69RQvF1ho0JKPcbUON4vy4R7zom13jPjgdOWCQ5hDA==
+  resolved "https://registry.yarnpkg.com/svelte/-/svelte-5.1.4.tgz#2ea2764925f33a19fb609746a35d8a029862bde9"
+  integrity sha512-qgHDV7AyvBZa2pbf+V0tnvWrN1LKD8LdUsBkR/SSYVVN6zXexiXnOy5Pjcjft2y/2NJJVa8ORUHFVn3oiWCLVQ==
  dependencies:
-    "@types/pug" "^2.0.6"
-    detect-indent "^6.1.0"
-    magic-string "^0.30.5"
-    sorcery "^0.11.0"
-    strip-indent "^3.0.0"
-
-svelte@^4.2.8:
-  version "4.2.18"
-  resolved "https://registry.yarnpkg.com/svelte/-/svelte-4.2.18.tgz#33dbce74e83eb6dcc54dbea25f9758b1d8e8bb78"
-  integrity sha512-d0FdzYIiAePqRJEb90WlJDkjUEx42xhivxN8muUBmfZnP+tzUgz12DJ2hRJi8sIHCME7jeK1PTMgKPSfTd8JrA==
-  dependencies:
-    "@ampproject/remapping" "^2.2.1"
-    "@jridgewell/sourcemap-codec" "^1.4.15"
-    "@jridgewell/trace-mapping" "^0.3.18"
-    "@types/estree" "^1.0.1"
-    acorn "^8.9.0"
-    aria-query "^5.3.0"
-    axobject-query "^4.0.0"
-    code-red "^1.0.3"
-    css-tree "^2.3.1"
-    estree-walker "^3.0.3"
-    is-reference "^3.0.1"
+    "@ampproject/remapping" "^2.3.0"
+    "@jridgewell/sourcemap-codec" "^1.5.0"
+    "@types/estree" "^1.0.5"
+    acorn "^8.12.1"
+    acorn-typescript "^1.4.13"
+    aria-query "^5.3.1"
+    axobject-query "^4.1.0"
+    esm-env "^1.0.0"
+    esrap "^1.2.2"
+    is-reference "^3.0.2"
    locate-character "^3.0.0"
-    magic-string "^0.30.4"
-    periscopic "^3.1.0"
+    magic-string "^0.30.11"
+    zimmerframe "^1.1.2"

 svg-pan-zoom@3.6.1:
  version "3.6.1"
@@ -6699,10 +6661,10 @@ type-fest@^0.8.1:
  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.8.1.tgz#09e249ebde851d3b1e48d27c105444667f17b83d"
  integrity sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==

-typescript@^5.3.3:
-  version "5.5.4"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.5.4.tgz#d9852d6c82bad2d2eda4fd74a5762a8f5909e9ba"
-  integrity sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==
+typescript@^5.5.0:
+  version "5.6.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.6.3.tgz#5f3449e31c9d94febb17de03cc081dd56d81db5b"
+  integrity sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==

 ufo@^1.5.3:
  version "1.5.3"
@@ -6812,7 +6774,7 @@ vite-node@1.6.0:
    picocolors "^1.0.0"
    vite "^5.0.0"

-vite@^5.0.0, vite@^5.0.11:
+vite@^5.0.0:
  version "5.4.3"
  resolved "https://registry.yarnpkg.com/vite/-/vite-5.4.3.tgz#771c470e808cb6732f204e1ee96c2ed65b97a0eb"
  integrity sha512-IH+nl64eq9lJjFqU+/yrRnrHPVTlgy42/+IzbOdaFDVlyLgI/wDlf+FCobXLX1cT0X5+7LMyH1mIy2xJdLfo8Q==
@@ -6823,10 +6785,21 @@ vite@^5.0.0, vite@^5.0.11:
  optionalDependencies:
    fsevents "~2.3.3"

-vitefu@^0.2.5:
-  version "0.2.5"
-  resolved "https://registry.yarnpkg.com/vitefu/-/vitefu-0.2.5.tgz#c1b93c377fbdd3e5ddd69840ea3aa70b40d90969"
-  integrity sha512-SgHtMLoqaeeGnd2evZ849ZbACbnwQCIwRH57t18FxcXoZop0uQu0uzlIhJBlF/eWVzuce0sHeqPcDo+evVcg8Q==
+vite@^5.4.4:
+  version "5.4.10"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-5.4.10.tgz#d358a7bd8beda6cf0f3b7a450a8c7693a4f80c18"
+  integrity sha512-1hvaPshuPUtxeQ0hsVH3Mud0ZanOLwVTneA1EgbAM5LhaZEqyPWGRQ7BtaMvUrTDeEaC8pxtj6a6jku3x4z6SQ==
+  dependencies:
+    esbuild "^0.21.3"
+    postcss "^8.4.43"
+    rollup "^4.20.0"
+  optionalDependencies:
+    fsevents "~2.3.3"
+
+vitefu@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/vitefu/-/vitefu-1.0.3.tgz#0467c75ee2be951c35246605b7fdbdbfd03b65d1"
+  integrity sha512-iKKfOMBHob2WxEJbqbJjHAkmYgvFDPhuqrO82om83S8RLk+17FtyMBfcyeH8GqD0ihShtkMW/zzJgiA51hCNCQ==

 vitest-dom@^0.1.1:
  version "0.1.1"
@@ -7133,3 +7106,8 @@ yocto-queue@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-1.0.0.tgz#7f816433fb2cbc511ec8bf7d263c3b58a1a3c251"
  integrity sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==
+
+zimmerframe@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/zimmerframe/-/zimmerframe-1.1.2.tgz#5b75f1fa83b07ae2a428d51e50f58e2ae6855e5e"
+  integrity sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w==