chore: Update imports, cleanup classes

src/lib/components/MainMenu.svelte

@@ -38,7 +38,7 @@
 
 <Popover.Root>
   <Popover.Trigger class="shrink-0">
-    <img class="size-6" src="./favicon.svg" alt="Mermaid Live Editor" />
+    <img class="size-6" src="/favicon.svg" alt="Mermaid Live Editor" />
   </Popover.Trigger>
   <Popover.Content align="start" class="flex flex-col overflow-hidden p-0" sideOffset={16}>
     {#each menuItems as item}

src/lib/components/PanZoomToolbar.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import FloatingToolbar from '$/components/FloatingToolbar.svelte';
   import { Button } from '$/components/ui/button';
   import { Separator } from '$/components/ui/separator';
   import type { PanZoomState } from '$/util/panZoom';
@@ -7,7 +8,6 @@
   import ArrowsToCircleIcon from '~icons/material-symbols/screenshot-frame-2';
   import MagnifyingGlassPlusIcon from '~icons/material-symbols/zoom-in';
   import MagnifyingGlassMinusIcon from '~icons/material-symbols/zoom-out';
-  import FloatingToolbar from './FloatingToolbar.svelte';
 
   let { panZoomState }: { panZoomState: PanZoomState } = $props();
 </script>

src/lib/components/Preset.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
+  import Card from '$/components/Card/Card.svelte';
   import { Button } from '$/components/ui/button';
-  import Card from '$lib/components/Card/Card.svelte';
   import { updateCode } from '$lib/util/state';
   import { logEvent } from '$lib/util/stats';
   import ShapesIcon from '~icons/material-symbols/account-tree-outline-rounded';

src/lib/components/Share.svelte

@@ -4,6 +4,7 @@
   import { Separator } from '$/components/ui/separator';
   import { env } from '$/util/env';
   import { urlsStore } from '$/util/state';
+  import ShareIcon from '~icons/material-symbols/share';
   import CopyInput from './CopyInput.svelte';
 </script>
 
@@ -11,14 +12,17 @@
   <Dialog.Trigger class={buttonVariants({ size: 'sm' })}>Share</Dialog.Trigger>
   <Dialog.Content>
     <Dialog.Header>
-      <Dialog.Title class="flex items-center gap-2 text-xl">Shareable links</Dialog.Title>
+      <Dialog.Title class="flex items-center gap-2 text-xl">
+        <ShareIcon class="size-5" /> Shareable links
+      </Dialog.Title>
       <Dialog.Description>Share your diagrams with others.</Dialog.Description>
     </Dialog.Header>
 
     <div class="flex flex-col gap-4">
       <div class="flex flex-col gap-2">
         <h2 class="flex items-center gap-2">
-          <img class="size-4" src="./favicon.svg" alt="Mermaid Live Editor" /> Mermaid Live Editor
+          <img class="size-5" src="./favicon.svg" alt="Mermaid Live Editor" />
+          Mermaid Live Editor
         </h2>
         <CopyInput value={window.location.href} />
         <Dialog.Description>
@@ -29,7 +33,8 @@
         <Separator />
         <div class="flex flex-col gap-2">
           <h2 class="flex items-center gap-2">
-            <img class="size-4" src="./mermaidchart-logo.svg" alt="Mermaid Chart" /> Mermaid Chart Playground
+            <img class="size-5" src="./mermaidchart-logo.svg" alt="Mermaid Chart" />
+            Mermaid Chart Playground
           </h2>
           <CopyInput value={$urlsStore.mermaidChart.playground} />
           <Dialog.Description>

src/lib/components/SyncRoughToolbar.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
+  import FloatingToolbar from '$/components/FloatingToolbar.svelte';
   import { Separator } from '$/components/ui/separator';
   import { Switch } from '$/components/ui/switch';
   import { defaultState, inputStateStore } from '$/util/state';
-  import FloatingToolbar from './FloatingToolbar.svelte';
 
   if ($inputStateStore.grid === undefined) {
     // Handle cases where old states were saved without grid option

src/lib/components/VersionSecurityToolbar.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
+  import FloatingToolbar from '$/components/FloatingToolbar.svelte';
+  import Privacy from '$/components/Privacy.svelte';
   import { Button } from '$/components/ui/button';
   import { Separator } from '$/components/ui/separator';
   import { version } from 'mermaid/package.json';
   import QuestionCircleIcon from '~icons/material-symbols/help-outline-rounded';
-  import FloatingToolbar from './FloatingToolbar.svelte';
-  import Privacy from './Privacy.svelte';
 </script>
 
 <FloatingToolbar>

src/lib/components/View.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
+  import type { State, ValidatedState } from '$/types';
+  import { recordRenderTime, shouldRefreshView } from '$/util/autoSync';
+  import { render as renderDiagram } from '$/util/mermaid';
   import { PanZoomState } from '$/util/panZoom';
-  import type { State, ValidatedState } from '$lib/types';
-  import { recordRenderTime, shouldRefreshView } from '$lib/util/autoSync';
-  import { render as renderDiagram } from '$lib/util/mermaid';
-  import { inputStateStore, stateStore, updateCodeStore } from '$lib/util/state';
-  import { logEvent, saveStatistics } from '$lib/util/stats';
+  import { inputStateStore, stateStore, updateCodeStore } from '$/util/state';
+  import { logEvent, saveStatistics } from '$/util/stats';
   import uniqueID from 'lodash-es/uniqueId';
   import type { MermaidConfig } from 'mermaid';
   import { mode } from 'mode-watcher';
@@ -139,7 +139,7 @@
 <div
   id="view"
   bind:this={view}
-  class={[shouldShowGrid && `grid-bg-${$mode}`, error && 'opacity-50', 'h-full w-full']}>
+  class={['h-full w-full', shouldShowGrid && `grid-bg-${$mode}`, error && 'opacity-50']}>
   <div id="container" bind:this={container} class="h-full overflow-auto"></div>
 </div>
 

src/lib/types.d.ts

@@ -57,10 +57,15 @@ export interface FileLoaderConfig {
   codeURL: string;
   configURL?: string;
 }
-export interface LoaderConfig {
-  type: 'gist' | 'files';
-  config: GistLoaderConfig | FileLoaderConfig;
-}
+export type LoaderConfig =
+  | {
+      type: 'gist';
+      config: GistLoaderConfig;
+    }
+  | {
+      type: 'files';
+      config: FileLoaderConfig;
+    };
 export type HistoryType = 'auto' | 'manual' | 'loader';
 export type HistoryEntry = { id: string; state: State; time: number; url?: string } & (
   | {

src/lib/util/util.ts

@@ -52,14 +52,10 @@ export const fetchText = async (url: string): Promise<string> => {
 };
 
 export const copyToClipboard = async (text: string) => {
-  if (!navigator.clipboard) {
-    return fallbackCopyToClipboard(text);
-  }
   try {
     await navigator.clipboard.writeText(text);
-    return true;
   } catch {
-    return fallbackCopyToClipboard(text);
+    fallbackCopyToClipboard(text);
   }
 };
 
@@ -75,14 +71,13 @@ function fallbackCopyToClipboard(text: string) {
   textArea.focus();
   textArea.select();
 
-  let success = false;
   try {
     // The deprecated but widely supported method
-    success = document.execCommand('copy');
+    document.execCommand('copy');
   } catch (error) {
     console.error('Failed to copy:', error);
+    throw error;
+  } finally {
+    textArea.remove();
   }
-
-  textArea.remove();
-  return success;
 }

src/routes/+layout.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
+  import { Toaster } from '$/components/ui/sonner/index.js';
+  import { loadingStateStore } from '$/util/loading';
+  import { toggleDarkTheme } from '$/util/state';
+  import { initHandler } from '$/util/util';
   import { base } from '$app/paths';
-  import { Toaster } from '$lib/components/ui/sonner/index.js';
-  import { loadingStateStore } from '$lib/util/loading';
-  import { toggleDarkTheme } from '$lib/util/state';
-  import { initHandler } from '$lib/util/util';
   import { mode, ModeWatcher } from 'mode-watcher';
   import { onMount, type Snippet } from 'svelte';
   import '../app.postcss';

src/routes/edit/+page.svelte

@@ -1,24 +1,24 @@
 <script lang="ts">
+  import Actions from '$/components/Actions.svelte';
+  import Card from '$/components/Card/Card.svelte';
   import DiagramDocButton from '$/components/DiagramDocumentationButton.svelte';
+  import Editor from '$/components/Editor.svelte';
   import History from '$/components/History/History.svelte';
   import McWrapper from '$/components/McWrapper.svelte';
+  import Navbar from '$/components/Navbar.svelte';
   import PanZoomToolbar from '$/components/PanZoomToolbar.svelte';
+  import Preset from '$/components/Preset.svelte';
   import Share from '$/components/Share.svelte';
   import SyncRoughToolbar from '$/components/SyncRoughToolbar.svelte';
   import { Button } from '$/components/ui/button';
   import * as Resizable from '$/components/ui/resizable';
   import { Toggle } from '$/components/ui/toggle';
   import VersionSecurityToolbar from '$/components/VersionSecurityToolbar.svelte';
+  import View from '$/components/View.svelte';
+  import type { EditorMode, Tab } from '$/types';
   import { PanZoomState } from '$/util/panZoom';
-  import Actions from '$lib/components/Actions.svelte';
-  import Card from '$lib/components/Card/Card.svelte';
-  import Editor from '$lib/components/Editor.svelte';
-  import Navbar from '$lib/components/Navbar.svelte';
-  import Preset from '$lib/components/Preset.svelte';
-  import View from '$lib/components/View.svelte';
-  import type { EditorMode, Tab } from '$lib/types';
-  import { stateStore, updateCodeStore, urlsStore } from '$lib/util/state';
-  import { initHandler } from '$lib/util/util';
+  import { stateStore, updateCodeStore, urlsStore } from '$/util/state';
+  import { initHandler } from '$/util/util';
   import { onMount } from 'svelte';
   import CodeIcon from '~icons/material-symbols/code-blocks-outline';
   import HistoryIcon from '~icons/material-symbols/history';
@@ -99,10 +99,7 @@
       </Resizable.Pane>
       {#if isHistoryOpen}
         <Resizable.Handle class="ml-1 hidden opacity-0 md:block" />
-        <Resizable.Pane
-          minSize={15}
-          defaultSize={30}
-          class="hidden h-full flex-grow flex-col md:flex">
+        <Resizable.Pane minSize={15} defaultSize={30} class="hidden h-full flex-grow md:flex">
           <History />
         </Resizable.Pane>
       {/if}

src/routes/view/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import View from '$lib/components/View.svelte';
-  import { initHandler } from '$lib/util/util';
+  import View from '$/components/View.svelte';
+  import { initHandler } from '$/util/util';
   import { onMount } from 'svelte';
   onMount(initHandler);
 </script>