@stephen-netu/design-system 0.1.0 → 0.2.1

package/dist/demos/NodepadBlocksShowcase.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NodepadBlocksShowcase.svelte.d.ts","sourceRoot":"","sources":["../../src/demos/NodepadBlocksShowcase.svelte.ts"],"names":[],"mappings":"AA2HA,QAAA,MAAM,qBAAqB,2DAAwC,CAAC;AACpE,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAC;AACtE,eAAe,qBAAqB,CAAC"}

package/dist/demos/index.d.ts

@@ -0,0 +1,5 @@
+export { default as NodepadBlocksShowcase } from './NodepadBlocksShowcase.svelte';
+export { default as BspZoneDemo } from './BspZoneDemo.svelte';
+export { default as BspSizingInfographic } from './BspSizingInfographic.svelte';
+export { default as ControlRoomDemo } from './ControlRoomDemo.svelte';
+//# sourceMappingURL=index.d.ts.map

package/dist/demos/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/demos/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAChF,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC"}

package/{src/demos/index.ts → dist/demos/index.js}

@@ -1,6 +1,5 @@
 // Demos — Design system showcase and examples
 // These are full-page demonstrations of design-system capabilities
-
 export { default as NodepadBlocksShowcase } from './NodepadBlocksShowcase.svelte';
 export { default as BspZoneDemo } from './BspZoneDemo.svelte';
 export { default as BspSizingInfographic } from './BspSizingInfographic.svelte';

package/{src → dist}/editor/CodeEditor.svelte

@@ -4,12 +4,18 @@
   // Falls back to plain text if no language matches.
 
   import { onMount, onDestroy } from 'svelte';
-  import { EditorView, keymap } from '@codemirror/view';
+  import { EditorView, keymap, type ViewUpdate } from '@codemirror/view';
   import { EditorState } from '@codemirror/state';
   import { defaultKeymap, history, historyKeymap, indentWithTab } from '@codemirror/commands';
   import { LanguageDescription } from '@codemirror/language';
   import { languages } from '@codemirror/language-data';
   import type { Extension } from '@codemirror/state';
+  import { autoFormat } from './extensions/autoformat';
+  import { expansion } from './extensions/expansion';
+  import { autocomplete } from './extensions/autocomplete';
+  import { spellcheck } from './extensions/spellcheck';
+  import type { CompletionSource } from './extensions/autocomplete';
+  import type { SpellCheckDictionary } from './extensions/spellcheck';
 
   interface Props {
     content: string;
@@ -18,9 +24,11 @@
     isActive: boolean;
     onContentChange?: (content: string) => void;
     onBlur?: () => void;
+    completionSource?: CompletionSource;
+    spellCheckDictionary?: SpellCheckDictionary;
   }
 
-  let { content, source = '', isActive, onContentChange, onBlur }: Props = $props();
+  let { content, source = '', isActive, onContentChange, onBlur, completionSource, spellCheckDictionary }: Props = $props();
 
   let container: HTMLElement | null = $state(null);
   let view: EditorView | null = null;
@@ -120,7 +128,11 @@
           onEscape,
           langExtension,
           logeTheme,
-          EditorView.updateListener.of((update) => {
+          autoFormat(),
+          expansion(),
+          ...(completionSource ? [autocomplete({ source: completionSource })] : []),
+          ...(spellCheckDictionary ? [spellcheck(spellCheckDictionary)] : []),
+          EditorView.updateListener.of((update: ViewUpdate) => {
             if (update.docChanged) {
               skipSync = true;
               onContentChange?.(update.state.doc.toString());

package/dist/editor/CodeEditor.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { CompletionSource } from './extensions/autocomplete';
+import type { SpellCheckDictionary } from './extensions/spellcheck';
+interface Props {
+    content: string;
+    /** Source hint — file path or URL, used for language detection */
+    source?: string;
+    isActive: boolean;
+    onContentChange?: (content: string) => void;
+    onBlur?: () => void;
+    completionSource?: CompletionSource;
+    spellCheckDictionary?: SpellCheckDictionary;
+}
+declare const CodeEditor: import("svelte").Component<Props, {}, "">;
+type CodeEditor = ReturnType<typeof CodeEditor>;
+export default CodeEditor;
+//# sourceMappingURL=CodeEditor.svelte.d.ts.map

package/dist/editor/CodeEditor.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/editor/CodeEditor.svelte.ts"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAGlE,UAAU,KAAK;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,kEAAkE;IAClE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,oBAAoB,CAAC,EAAE,oBAAoB,CAAC;CAC7C;AAuKH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/{src → dist}/editor/FindReplaceDialog.svelte

@@ -358,7 +358,7 @@
 
   .input-row {
     display: flex;
-    gap: 8px;
+    gap: var(--space-2);
     align-items: stretch;
   }
 
@@ -375,7 +375,7 @@
   }
 
   input:focus {
-    border-color: var(--accent-primary, #b87333);
+    border-color: var(--accent-primary, var(--color-accent));
   }
 
   input.no-match {
@@ -400,13 +400,13 @@
   }
 
   .case-btn:hover {
-    border-color: var(--accent-primary, #b87333);
+    border-color: var(--accent-primary, var(--color-accent));
     color: var(--text-primary, #e8e6e3);
   }
 
   .case-btn.active {
-    background: var(--accent-primary, #b87333);
-    border-color: var(--accent-primary, #b87333);
+    background: var(--accent-primary, var(--color-accent));
+    border-color: var(--accent-primary, var(--color-accent));
     color: white;
   }
 
@@ -430,7 +430,7 @@
 
   .nav-buttons {
     display: flex;
-    gap: 4px;
+    gap: var(--space-1);
   }
 
   .nav-btn {
@@ -447,9 +447,9 @@
   }
 
   .nav-btn:hover:not(:disabled) {
-    background: var(--accent-subtle, rgba(184, 115, 51, 0.15));
-    border-color: var(--accent-primary, #b87333);
-    color: var(--accent-primary, #b87333);
+    background: var(--accent-subtle, var(--color-accent-muted));
+    border-color: var(--accent-primary, var(--color-accent));
+    color: var(--accent-primary, var(--color-accent));
   }
 
   .nav-btn:disabled {
@@ -459,7 +459,7 @@
 
   .replace-buttons {
     display: flex;
-    gap: 6px;
+    gap: var(--space-15);
   }
 
   .action-btn {
@@ -479,13 +479,13 @@
   }
 
   .action-btn.secondary:hover:not(:disabled) {
-    border-color: var(--accent-primary, #b87333);
+    border-color: var(--accent-primary, var(--color-accent));
     color: var(--text-primary, #e8e6e3);
   }
 
   .action-btn.primary {
-    background: var(--accent-primary, #b87333);
-    border-color: var(--accent-primary, #b87333);
+    background: var(--accent-primary, var(--color-accent));
+    border-color: var(--accent-primary, var(--color-accent));
     color: white;
   }
 
@@ -502,7 +502,7 @@
   .mode-toggle {
     background: none;
     border: none;
-    color: var(--accent-primary, #b87333);
+    color: var(--accent-primary, var(--color-accent));
     font-size: 12px;
     cursor: pointer;
     padding: 4px 8px;
@@ -511,6 +511,6 @@
   }
 
   .mode-toggle:hover {
-    background: var(--accent-subtle, rgba(184, 115, 51, 0.15));
+    background: var(--accent-subtle, var(--color-accent-muted));
   }
 </style>

package/dist/editor/FindReplaceDialog.svelte.d.ts

@@ -0,0 +1,11 @@
+import { EditorView } from '@codemirror/view';
+interface Props {
+    editorView: EditorView | null;
+    isOpen: boolean;
+    onClose: () => void;
+    initialMode?: 'find' | 'replace';
+}
+declare const FindReplaceDialog: import("svelte").Component<Props, {}, "">;
+type FindReplaceDialog = ReturnType<typeof FindReplaceDialog>;
+export default FindReplaceDialog;
+//# sourceMappingURL=FindReplaceDialog.svelte.d.ts.map

package/dist/editor/FindReplaceDialog.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FindReplaceDialog.svelte.d.ts","sourceRoot":"","sources":["../../src/editor/FindReplaceDialog.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAgB5C,UAAU,KAAK;IACb,UAAU,EAAE,UAAU,GAAG,IAAI,CAAC;IAC9B,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAClC;AAiQH,QAAA,MAAM,iBAAiB,2CAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/{src → dist}/editor/MarkdownEditor.svelte

@@ -1,15 +1,19 @@
 <script lang="ts">
-  /**
-   * MarkdownEditor Component - Phase 2
-   *
-   * CodeMirror 6 integration with markdown support.
-   * Includes external file change detection and find/replace.
-   */
+   /**
+    * MarkdownEditor Component - Phase 2
+    *
+    * CodeMirror 6 integration with markdown support.
+    * Includes external file change detection and find/replace.
+    *
+    * NOTE: This is a heavy stateful component (CodeMirror creates ~200+ DOM nodes).
+    * Prefer {#if} over visibility:hidden when toggling to avoid mounting hidden
+    * editor instances. Use visibility:hidden only for the outer chrome wrapper.
+    */
 
   import { onMount, onDestroy, untrack } from 'svelte';
   import { EditorView, keymap, lineNumbers, highlightActiveLineGutter, highlightSpecialChars,
            drawSelection, dropCursor, rectangularSelection, crosshairCursor,
-           highlightActiveLine } from '@codemirror/view';
+           highlightActiveLine, type ViewUpdate } from '@codemirror/view';
   import { EditorState, type Extension } from '@codemirror/state';
   import { markdown } from '@codemirror/lang-markdown';
   import { defaultKeymap, history, historyKeymap } from '@codemirror/commands';
@@ -17,6 +21,12 @@
   import { writeFile, readFile } from '../tauri';
   import { vaultStore } from '../stores/vaultStore.svelte';
   import FindReplaceDialog from './FindReplaceDialog.svelte';
+  import { autoFormat } from './extensions/autoformat';
+  import { expansion } from './extensions/expansion';
+  import { autocomplete } from './extensions/autocomplete';
+  import { spellcheck } from './extensions/spellcheck';
+  import type { CompletionSource } from './extensions/autocomplete';
+  import type { SpellCheckDictionary } from './extensions/spellcheck';
 
   interface Props {
     filePath: string | null;
@@ -25,12 +35,13 @@
     onSave?: () => void;
     onClose?: () => void;
     onExternalChange?: (newContent: string) => void;
+    completionSource?: CompletionSource;
+    spellCheckDictionary?: SpellCheckDictionary;
   }
 
-  const props : Props = $props();
+  let { filePath, initialContent, onChange, onSave, onClose, onExternalChange, completionSource, spellCheckDictionary }: Props = $props();
 
-  // Editor state — untrack() tells Svelte we intentionally capture only the initial prop value
-  let content = $state(untrack(() => props.initialContent));
+  let content = $state(untrack(() => initialContent));
   let isDirty = $state(false);
   let isSaving = $state(false);
   let saveError = $state<string | null>(null);
@@ -52,7 +63,7 @@
   let showFindReplace = $state(false);
 
   // Computed
-  let fileName = $derived(props.filePath?.split('/').pop() || props.filePath || 'Untitled');
+  let fileName = $derived(filePath?.split('/').pop() || filePath || 'Untitled');
   let saveStatus = $derived(
     isSaving ? 'Saving...' : 
     saveError ? 'Error!' : 
@@ -131,11 +142,11 @@
 
   // Check for external file changes
   async function checkExternalChanges() {
-    if (!props.filePath || isCheckingExternalChanges || showExternalChangeDialog || !isDirty) return;
+    if (!filePath || isCheckingExternalChanges || showExternalChangeDialog || !isDirty) return;
     
     isCheckingExternalChanges = true;
     try {
-      const hasChanged = await vaultStore.hasFileChangedExternally(props.filePath);
+      const hasChanged = await vaultStore.hasFileChangedExternally(filePath);
       if (hasChanged) {
         showExternalChangeDialog = true;
       }
@@ -149,10 +160,10 @@
 
   // Handle reload from disk
   async function handleReloadFromDisk() {
-    if (!props.filePath) return;
+    if (!filePath) return;
     
     try {
-      const newContent = await readFile(props.filePath);
+      const newContent = await readFile(filePath);
       
       // Update editor content
       if (editorView) {
@@ -170,12 +181,12 @@
       saveError = null;
       
       // Notify parent
-      props.onExternalChange?.(newContent);
-      props.onChange?.(newContent);
+      onExternalChange?.(newContent);
+      onChange?.(newContent);
       
       // Update tracked state in vaultStore
-      const modifiedAt = await vaultStore.getFileModifiedTime(props.filePath);
-      vaultStore.updateFileState(props.filePath, newContent, modifiedAt);
+      const modifiedAt = await vaultStore.getFileModifiedTime(filePath);
+      vaultStore.updateFileState(filePath, newContent, modifiedAt);
     } catch (err) {
       console.error('Failed to reload file:', err);
       saveError = err instanceof Error ? err.message : 'Failed to reload file';
@@ -213,14 +224,18 @@
       markdown(),
       atelierTheme,
       saveKeymap,
-      EditorView.updateListener.of((update) => {
+      autoFormat(),
+      expansion(),
+      ...(completionSource ? [autocomplete({ source: completionSource })] : []),
+      ...(spellCheckDictionary ? [spellcheck(spellCheckDictionary)] : []),
+      EditorView.updateListener.of((update: ViewUpdate) => {
         if (update.docChanged) {
           content = update.state.doc.toString();
           isDirty = true;
           saveError = null;
-           props.onChange?.(content);
-          // Auto-save: debounced 800ms after last keystroke
-          if (props.filePath) {
+           onChange?.(content);
+           // Auto-save: debounced 800ms after last keystroke
+           if (filePath) {
             if (autoSaveTimeout) clearTimeout(autoSaveTimeout);
             autoSaveTimeout = setTimeout(() => saveContent(), 800);
           }
@@ -229,7 +244,7 @@
     ];
 
     const state = EditorState.create({
-        doc: props.initialContent,
+        doc: initialContent,
       extensions
     });
 
@@ -268,15 +283,15 @@
 
   // Update content when file changes
   $effect(() => {
-    if (editorView && props.initialContent !== editorView.state.doc.toString()) {
+    if (editorView && initialContent !== editorView.state.doc.toString()) {
       editorView.dispatch({
         changes: {
           from: 0,
           to: editorView.state.doc.length,
-          insert: props.initialContent
+          insert: initialContent
         }
       });
-      content = props.initialContent;
+      content = initialContent;
       isDirty = false;
       saveError = null;
     }
@@ -284,19 +299,19 @@
 
   // Save file
   async function saveContent() {
-    if (!isDirty || isSaving || !props.filePath) return;
+    if (!isDirty || isSaving || !filePath) return;
     
     isSaving = true;
     saveError = null;
     
     try {
-      await writeFile(props.filePath, content);
+      await writeFile(filePath, content);
       isDirty = false;
-      props.onSave?.();
+      onSave?.();
       
       // Update tracked modification time after save
-      const modifiedAt = await vaultStore.getFileModifiedTime(props.filePath);
-      vaultStore.updateFileState(props.filePath, content, modifiedAt);
+      const modifiedAt = await vaultStore.getFileModifiedTime(filePath);
+      vaultStore.updateFileState(filePath, content, modifiedAt);
     } catch (err) {
       saveError = err instanceof Error ? err.message : String(err);
       console.error('Failed to save file:', err);
@@ -341,15 +356,15 @@
       >
         Preview
       </button>
-      {#if props.onClose}
+      {#if onClose}
         <button 
           class="action-btn"
-          onclick={props.onClose}
+          onclick={onClose}
         >
           Close
         </button>
       {/if}
-      {#if !props.filePath}
+      {#if !filePath}
         <button
           class="action-btn primary"
           onclick={saveContent}
@@ -438,7 +453,7 @@
   .file-info {
     display: flex;
     align-items: center;
-    gap: 12px;
+    gap: var(--space-3);
   }
 
   .file-name {
@@ -452,7 +467,7 @@
   }
 
   .save-status.dirty {
-    color: var(--accent-primary, #b87333);
+    color: var(--accent-primary, var(--color-accent));
   }
 
   .save-status.error {
@@ -461,7 +476,7 @@
 
   .editor-actions {
     display: flex;
-    gap: 8px;
+    gap: var(--space-2);
   }
 
   .action-btn {
@@ -481,15 +496,15 @@
   }
 
   .action-btn.active {
-    background: var(--accent-subtle, rgba(184, 115, 51, 0.15));
-    color: var(--accent-primary, #b87333);
-    border-color: var(--accent-primary, #b87333);
+    background: var(--accent-subtle, var(--color-accent-muted));
+    color: var(--accent-primary, var(--color-accent));
+    border-color: var(--accent-primary, var(--color-accent));
   }
 
   .action-btn.primary {
-    background: var(--accent-primary, #b87333);
+    background: var(--accent-primary, var(--color-accent));
     color: white;
-    border-color: var(--accent-primary, #b87333);
+    border-color: var(--accent-primary, var(--color-accent));
   }
 
   .action-btn.primary:hover {
@@ -653,7 +668,7 @@
   .dialog-footer {
     display: flex;
     justify-content: flex-end;
-    gap: 12px;
+    gap: var(--space-3);
     padding: 16px 20px;
     border-top: 1px solid var(--border-subtle, #2a2a2a);
   }

package/dist/editor/MarkdownEditor.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { CompletionSource } from './extensions/autocomplete';
+import type { SpellCheckDictionary } from './extensions/spellcheck';
+interface Props {
+    filePath: string | null;
+    initialContent: string;
+    onChange?: (content: string) => void;
+    onSave?: () => void;
+    onClose?: () => void;
+    onExternalChange?: (newContent: string) => void;
+    completionSource?: CompletionSource;
+    spellCheckDictionary?: SpellCheckDictionary;
+}
+declare const MarkdownEditor: import("svelte").Component<Props, {}, "">;
+type MarkdownEditor = ReturnType<typeof MarkdownEditor>;
+export default MarkdownEditor;
+//# sourceMappingURL=MarkdownEditor.svelte.d.ts.map

package/dist/editor/MarkdownEditor.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkdownEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/editor/MarkdownEditor.svelte.ts"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAGlE,UAAU,KAAK;IACb,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,gBAAgB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,oBAAoB,CAAC,EAAE,oBAAoB,CAAC;CAC7C;AA6YH,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/editor/components/CorrectionTooltip.svelte

@@ -0,0 +1,167 @@
+<script lang="ts">
+    import { onMount, onDestroy } from 'svelte';
+
+    interface Suggestion {
+        word: string;
+        from: number;
+        to: number;
+    }
+
+    interface Props {
+        view: { coordsAtPos: (pos: number) => { top: number; left: number; bottom: number } | null; state: { doc: { sliceString: (from: number, to: number) => string }; selection: { main: { from: number; to: number } } } };
+        suggestion: Suggestion;
+        onAccept: (suggestion: string) => void;
+        onDismiss: () => void;
+        onAddToDictionary: () => void;
+    }
+
+    const { view, suggestion, onAccept, onDismiss, onAddToDictionary }: Props = $props();
+
+    let position = $state<{ top: number; left: number } | null>(null);
+    let dismissed = $state(false);
+
+    let word = $derived(view.state.doc.sliceString(suggestion.from, suggestion.to));
+    let suggestions = $derived(['Loading...']); // IMPLEMENTATION_REQUIRED(kos:default-324): wire up spellcheck dictionary suggestions
+
+    onMount(() => {
+        const coords = view.coordsAtPos(suggestion.from);
+        if (coords) {
+            position = { top: coords.bottom + 4, left: coords.left };
+        }
+    });
+
+    function handleKeydown(e: KeyboardEvent) {
+        if (e.key === 'Escape') {
+            e.preventDefault();
+            handleDismiss();
+        }
+    }
+
+    function handleDismiss() {
+        dismissed = true;
+        onDismiss();
+    }
+
+    onMount(() => {
+        window.addEventListener('keydown', handleKeydown);
+        return () => window.removeEventListener('keydown', handleKeydown);
+    });
+
+    onDestroy(() => {
+        if (!dismissed) handleDismiss();
+    });
+</script>
+
+{#if position && !dismissed}
+    <div
+        class="correction-tooltip"
+        style="position: fixed; top: {position.top}px; left: {position.left}px;"
+        role="tooltip"
+        tabindex="0"
+    >
+        <div class="correction-tooltip__header">
+            <span class="correction-tooltip__word">{word}</span>
+            <button class="correction-tooltip__close" onclick={handleDismiss} aria-label="Dismiss">
+                ✕
+            </button>
+        </div>
+        <ul class="correction-tooltip__suggestions">
+            {#each suggestions as s}
+                <li>
+                    <button class="correction-tooltip__suggestion" onclick={() => onAccept(s)}>
+                        {s}
+                    </button>
+                </li>
+            {/each}
+        </ul>
+        <div class="correction-tooltip__actions">
+            <button class="correction-tooltip__action" onclick={onAddToDictionary}>
+                Add to Dictionary
+            </button>
+        </div>
+    </div>
+{/if}
+
+<style>
+    .correction-tooltip {
+        background: var(--color-bg-panel, #1a1a1a);
+        border: 1px solid var(--border-default, #2a2a2a);
+        border-radius: var(--radius-md, 6px);
+        box-shadow: var(--shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.4));
+        min-width: 180px;
+        max-width: 280px;
+        z-index: 1000;
+        font-family: var(--font-sans, system-ui);
+        font-size: var(--text-sm, 13px);
+    }
+
+    .correction-tooltip__header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 8px 12px;
+        border-bottom: 1px solid var(--border-subtle, #2a2a2a);
+    }
+
+    .correction-tooltip__word {
+        font-weight: 600;
+        color: var(--color-text-primary, #f5f2eb);
+    }
+
+    .correction-tooltip__close {
+        background: none;
+        border: none;
+        color: var(--color-text-tertiary, #6b6b6b);
+        cursor: pointer;
+        padding: 2px 6px;
+        font-size: 12px;
+        line-height: 1;
+    }
+
+    .correction-tooltip__close:hover {
+        color: var(--color-text-primary, #f5f2eb);
+    }
+
+    .correction-tooltip__suggestions {
+        list-style: none;
+        margin: 0;
+        padding: 4px 0;
+        max-height: 200px;
+        overflow-y: auto;
+    }
+
+    .correction-tooltip__suggestion {
+        display: block;
+        width: 100%;
+        text-align: left;
+        padding: 6px 12px;
+        background: none;
+        border: none;
+        color: var(--color-text-primary, #f5f2eb);
+        cursor: pointer;
+        font-size: 13px;
+    }
+
+    .correction-tooltip__suggestion:hover {
+        background: var(--color-accent, #b87333);
+        color: #fff;
+    }
+
+    .correction-tooltip__actions {
+        border-top: 1px solid var(--border-subtle, #2a2a2a);
+        padding: 6px 12px;
+    }
+
+    .correction-tooltip__action {
+        background: none;
+        border: none;
+        color: var(--color-accent, #b87333);
+        cursor: pointer;
+        font-size: 12px;
+        padding: 0;
+    }
+
+    .correction-tooltip__action:hover {
+        text-decoration: underline;
+    }
+</style>