@stephen-netu/design-system 0.2.1 → 0.5.1

package/dist/demos/AmbientPrimitivesDemo.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+  // Ambient Primitives Demo — visual check for the marketing/docs-surface
+  // primitives added alongside src/p0-primitives/tokens/ambient.css:
+  // gradient text, ambient glow, LiveDot, ThemeSwatchGroup, WindowFrame,
+  // StackedCard, scroll-reveal, and ParticleAssembleMark. None of these
+  // are wired into console/product chrome — this page is the opt-in demo.
+
+  import '../p0-primitives/tokens/ambient.css';
+  import LiveDot from '../u0-primitives/live-dot/LiveDot.svelte';
+  import ThemeSwatchGroup from '../u0-primitives/theme-swatch-group/ThemeSwatchGroup.svelte';
+  import WindowFrame from '../u0-primitives/window-frame/WindowFrame.svelte';
+  import StackedCard from '../l0-layout/card/StackedCard.svelte';
+  import ParticleAssembleMark from '../spatial/ParticleAssembleMark.svelte';
+  import { reveal } from '../p0-primitives/utils/reveal';
+
+  // Example seed list — a taste call for whoever wires this into a real
+  // page; swap freely. Each swatch sets --accent-primary directly, no
+  // parallel palette authoring.
+  const swatches = [
+    { hex: '#b87333', label: 'Brass (default)' },
+    { hex: '#4fa8a2', label: 'Teal' },
+    { hex: '#d4a04c', label: 'Amber' },
+    { hex: '#8b7fb0', label: 'Violet' },
+    { hex: '#c14a4a', label: 'Crimson' }
+  ];
+
+  let accent = $state('#b87333');
+
+  $effect(() => {
+    document.documentElement.style.setProperty('--accent-primary', accent);
+  });
+
+  // A simple generic mark (diamond over a triangle) — deliberately not
+  // Mesa's actual logomark. ParticleAssembleMark accepts any polygon set.
+  const shapes = [
+    { points: [[100, 10], [190, 100], [100, 190], [10, 100]] as [number, number][], tone: 'primary' as const },
+    { points: [[100, 70], [140, 130], [60, 130]] as [number, number][], tone: 'secondary' as const }
+  ];
+</script>
+
+<div class="demo bg-ambient-glow">
+  <section use:reveal>
+    <h2 class="text-gradient-accent">Ambient primitives</h2>
+    <p>Opt-in marketing/docs-surface additions — import <code>ambient.css</code> explicitly.</p>
+  </section>
+
+  <section use:reveal={{ delayMs: 80 }}>
+    <h3>ThemeSwatchGroup</h3>
+    <ThemeSwatchGroup {swatches} bind:value={accent} />
+  </section>
+
+  <section use:reveal={{ delayMs: 120 }}>
+    <h3>LiveDot</h3>
+    <div class="row">
+      <LiveDot variant="cleared" aria-label="Cleared" />
+      <LiveDot variant="pending" aria-label="Pending" />
+      <LiveDot variant="blocked" aria-label="Blocked" />
+      <LiveDot variant="degraded" aria-label="Degraded" pulse={false} />
+    </div>
+  </section>
+
+  <section use:reveal={{ delayMs: 160 }}>
+    <h3>WindowFrame</h3>
+    <WindowFrame title="PROPERTY SEARCH">
+      <p>Slotted content renders here.</p>
+    </WindowFrame>
+  </section>
+
+  <section use:reveal={{ delayMs: 200 }}>
+    <h3>StackedCard</h3>
+    <StackedCard>
+      <p>Front-sheet content, two decorative sheets behind it.</p>
+    </StackedCard>
+  </section>
+
+  <section use:reveal={{ delayMs: 240 }}>
+    <h3>ParticleAssembleMark</h3>
+    <ParticleAssembleMark
+      {shapes}
+      viewBoxWidth={200}
+      viewBoxHeight={200}
+      width={160}
+      height={160}
+      primaryColor={accent}
+      secondaryColor="var(--color-text-primary)"
+    />
+  </section>
+</div>
+
+<style>
+  .demo {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-8);
+    padding: var(--space-8);
+  }
+
+  .row {
+    display: flex;
+    gap: var(--space-4);
+    align-items: center;
+  }
+</style>

package/dist/demos/AmbientPrimitivesDemo.svelte.d.ts

@@ -0,0 +1,5 @@
+import '../p0-primitives/tokens/ambient.css';
+declare const AmbientPrimitivesDemo: import("svelte").Component<Record<string, never>, {}, "">;
+type AmbientPrimitivesDemo = ReturnType<typeof AmbientPrimitivesDemo>;
+export default AmbientPrimitivesDemo;
+//# sourceMappingURL=AmbientPrimitivesDemo.svelte.d.ts.map

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

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

package/dist/demos/BspSizingInfographic.svelte

@@ -158,7 +158,7 @@
     margin: 0 auto;
     font-family: system-ui, sans-serif;
     color: var(--color-text-primary, #e8e4dc);
-    background: var(--color-bg, #1a1918);
+    background: var(--color-bg-canvas, #1a1918);
     min-height: 100vh;
     overflow-y: auto;
   }
@@ -168,26 +168,6 @@
     margin-bottom: 32px;
   }
   
-  .debug {
-    margin-top: 16px;
-    padding: 12px;
-    background: var(--color-accent-subtle);
-    border: 1px solid var(--color-accent, var(--color-accent));
-    border-radius: 6px;
-    font-family: monospace;
-    font-size: 12px;
-    text-align: left;
-  }
-  
-  .debug ul {
-    margin: 8px 0;
-    padding-left: 20px;
-  }
-  
-  .debug li {
-    margin: 2px 0;
-  }
-  
   h2 {
     margin: 0 0 8px 0;
     font-size: 24px;
@@ -318,22 +298,11 @@
     width: 100%;
   }
   
-  .mini-title {
-    font-weight: bold;
-    margin-bottom: 2px;
-  }
-  
   .mini-lines {
     color: var(--color-text-muted, #706858);
     font-size: 10px;
   }
   
-  .preview-header {
-    font-weight: bold;
-    margin-bottom: 4px;
-    font-size: 11px;
-  }
-  
   .preview-body {
     color: var(--color-text-secondary, #a89b8c);
     font-size: 10px;
@@ -350,6 +319,7 @@
     overflow: hidden;
     display: -webkit-box;
     -webkit-line-clamp: 2;
+    line-clamp: 2;
     -webkit-box-orient: vertical;
   }
   
@@ -358,6 +328,7 @@
     overflow: hidden;
     display: -webkit-box;
     -webkit-line-clamp: 6;
+    line-clamp: 6;
     -webkit-box-orient: vertical;
   }
   

package/dist/demos/NodepadBlocksShowcase.svelte

@@ -6,6 +6,7 @@
   // - NO collapse button (content flows naturally)
   
   import { NodepadBlock, type EnchantedBlockData } from '../x0-enchanted-blocks';
+  import { debug } from '../p0-primitives/debug';
   
   // Mock blocks as EnchantedBlockData (not wrapped in TaskView)
   const mockBlocks: EnchantedBlockData[] = [
@@ -72,7 +73,7 @@ The block should just flow naturally—no collapse buttons needed.`,
       block.content = newContent;
       block.modifiedAt = Date.now();
     }
-    console.log(`Changed ${id}: ${newContent.slice(0, 30)}...`);
+    debug.log(`Changed ${id}: ${newContent.slice(0, 30)}...`);
   }
   
   function handleTypeChange(id: string, newType: string) {

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

@@ -1 +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"}
+{"version":3,"file":"NodepadBlocksShowcase.svelte.d.ts","sourceRoot":"","sources":["../../src/demos/NodepadBlocksShowcase.svelte.ts"],"names":[],"mappings":"AA6HA,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

@@ -2,4 +2,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';
+export { default as AmbientPrimitivesDemo } from './AmbientPrimitivesDemo.svelte';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +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"}
+{"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;AACtE,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,gCAAgC,CAAC"}

package/dist/demos/index.js

@@ -4,3 +4,4 @@ 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';
+export { default as AmbientPrimitivesDemo } from './AmbientPrimitivesDemo.svelte';

package/dist/editor/CodeEditor.svelte

@@ -14,12 +14,13 @@
   import { expansion } from './extensions/expansion';
   import { autocomplete } from './extensions/autocomplete';
   import { spellcheck } from './extensions/spellcheck';
+  import CorrectionTooltip from './components/CorrectionTooltip.svelte';
+  import { resolveAccentRamp } from '../p0-primitives/canvas-theme.js';
   import type { CompletionSource } from './extensions/autocomplete';
-  import type { SpellCheckDictionary } from './extensions/spellcheck';
+  import type { SpellCheckCorrection, 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;
@@ -28,12 +29,18 @@
     spellCheckDictionary?: SpellCheckDictionary;
   }
 
+  interface ActiveCorrection extends SpellCheckCorrection {
+    from: number;
+    to: number;
+  }
+
   let { content, source = '', isActive, onContentChange, onBlur, completionSource, spellCheckDictionary }: Props = $props();
 
   let container: HTMLElement | null = $state(null);
   let view: EditorView | null = null;
   let skipSync = false;
   let detectedLang = $state('text');
+  let activeCorrection = $state<ActiveCorrection | null>(null);
 
   // Detect language from source path/extension or content shebang
   async function detectLanguageExtension(): Promise<Extension> {
@@ -85,33 +92,72 @@
     return [];
   }
 
-  // Loge dark theme (matches MarkdownEditor)
-  const logeTheme = EditorView.theme({
-    '&': { background: 'transparent', height: '100%', color: '#e8e0d0' },
-    '.cm-scroller': {
-      fontFamily: 'var(--font-mono, monospace)',
-      fontSize: '11px',
-      lineHeight: '1.6',
-      overflow: 'auto',
-    },
-    '.cm-content': { padding: '6px 8px', caretColor: '#b87333' },
-    '.cm-cursor': { borderLeftColor: '#b87333' },
-    '.cm-focused': { outline: 'none' },
-    '.cm-selectionBackground, ::selection': { background: 'rgba(184,115,51,0.2)' },
-    '.cm-gutters': {
-      background: '#1a1a1a',
-      borderRight: '1px solid #2a2a2a',
-      color: '#5a5248',
-      fontSize: '10px',
-    },
-    '.cm-lineNumbers .cm-gutterElement': { padding: '0 6px 0 4px' },
-    '.cm-activeLine': { background: 'rgba(184,115,51,0.05)' },
-    '.cm-activeLineGutter': { background: 'rgba(184,115,51,0.08)' },
-  }, { dark: true });
+  async function handleCorrectionClick(
+    correction: SpellCheckCorrection,
+    _view: EditorView,
+    from: number,
+    to: number
+  ) {
+    activeCorrection = { ...correction, from, to };
+  }
+
+  function handleAcceptCorrection(suggestion: string) {
+    if (!activeCorrection || !view) return;
+    view.dispatch({
+      changes: { from: activeCorrection.from, to: activeCorrection.to, insert: suggestion },
+    });
+    activeCorrection = null;
+  }
+
+  function handleAddWordToDictionary() {
+    if (!activeCorrection) return;
+    spellCheckDictionary?.addWord(activeCorrection.original);
+    activeCorrection = null;
+  }
+
+  function handleDismissCorrection() {
+    activeCorrection = null;
+  }
+
+  // Loge dark theme — built from runtime CSS tokens so the user's accent
+  // and any overriding ThemeProvider are respected. Constructed in onMount
+  // where the DOM is available for getComputedStyle.
+  function buildLogeTheme(): Extension {
+    const acc = resolveAccentRamp(document.documentElement);
+    const cs = getComputedStyle(document.documentElement);
+    const rv = (p: string, fb: string) => cs.getPropertyValue(p).trim() || fb;
+    return EditorView.theme({
+      '&': { background: 'transparent', height: '100%', color: rv('--color-text-primary', '#e7e9eb') },
+      '.cm-scroller': {
+        fontFamily: 'var(--font-mono, monospace)',
+        fontSize: '11px',
+        lineHeight: '1.6',
+        overflow: 'auto',
+      },
+      '.cm-content': { padding: '6px 8px', caretColor: acc.solid },
+      '.cm-cursor': { borderLeftColor: acc.solid },
+      '.cm-focused': { outline: 'none' },
+      '.cm-selectionBackground, ::selection': { background: acc.alpha(0.2) },
+      '.cm-gutters': {
+        background: rv('--color-bg-app', '#0a0b0c'),
+        borderRight: `1px solid ${rv('--border-default', '#262b30')}`,
+        color: rv('--color-text-tertiary', '#646b72'),
+        fontSize: '10px',
+      },
+      '.cm-lineNumbers .cm-gutterElement': { padding: '0 6px 0 4px' },
+      '.cm-activeLine': { background: acc.alpha(0.05) },
+      '.cm-activeLineGutter': { background: acc.alpha(0.08) },
+    }, { dark: true });
+  }
+  // Placeholder until onMount — replaced before EditorView construction.
+  let logeTheme: Extension = [];
 
   onMount(async () => {
     if (!container) return;
 
+    // Build theme now that DOM is available — accent reads --accent-primary.
+    logeTheme = buildLogeTheme();
+
     const langExtension = await detectLanguageExtension();
 
     const onEscape = keymap.of([{
@@ -131,10 +177,11 @@
           autoFormat(),
           expansion(),
           ...(completionSource ? [autocomplete({ source: completionSource })] : []),
-          ...(spellCheckDictionary ? [spellcheck(spellCheckDictionary)] : []),
+          ...(spellCheckDictionary ? spellcheck(spellCheckDictionary, { onCorrectionClick: handleCorrectionClick }) : []),
           EditorView.updateListener.of((update: ViewUpdate) => {
             if (update.docChanged) {
               skipSync = true;
+              activeCorrection = null;
               onContentChange?.(update.state.doc.toString());
             }
           }),
@@ -170,6 +217,16 @@
   {/if}
 </div>
 
+{#if activeCorrection}
+  <CorrectionTooltip
+    correction={{ original: activeCorrection.original, suggestions: activeCorrection.suggestions }}
+    position={activeCorrection.position}
+    onAccept={handleAcceptCorrection}
+    onDismiss={handleDismissCorrection}
+    onAddToDictionary={handleAddWordToDictionary}
+  />
+{/if}
+
 <style>
   .code-editor {
     width: 100%;

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

@@ -2,7 +2,6 @@ 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;

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

@@ -1 +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"}
+{"version":3,"file":"CodeEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/editor/CodeEditor.svelte.ts"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,KAAK,EAAwB,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAGxF,UAAU,KAAK;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,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;AA4NH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/editor/CodeEditor.test.js

@@ -0,0 +1,38 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { render, cleanup } from '@testing-library/svelte';
+import CodeEditor from './CodeEditor.svelte';
+afterEach(() => {
+    cleanup();
+});
+describe('editor/CodeEditor', () => {
+    it('exports a valid Svelte component', () => {
+        expect(CodeEditor).toBeDefined();
+        expect(typeof CodeEditor).toBe('function');
+    });
+    it('renders editor container', () => {
+        const { container } = render(CodeEditor, {
+            content: 'const x = 1;',
+            source: 'test.ts',
+            isActive: true,
+        });
+        expect(container.querySelector('.code-editor')).not.toBeNull();
+    });
+    it('renders with text content', () => {
+        const { container } = render(CodeEditor, {
+            content: 'hello world',
+            source: '',
+            isActive: false,
+        });
+        expect(container.querySelector('.code-editor')).not.toBeNull();
+    });
+    it('calls onContentChange when content changes', async () => {
+        const onContentChange = vi.fn();
+        const { container } = render(CodeEditor, {
+            content: 'initial',
+            source: 'test.ts',
+            isActive: true,
+            onContentChange,
+        });
+        expect(container.querySelector('.code-editor')).not.toBeNull();
+    });
+});

package/dist/editor/ExternalChangeDialog.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+  /**
+   * ExternalChangeDialog — shown when the open file is modified on disk outside
+   * the editor. The parent owns the open/close state and the reload/keep logic;
+   * this component is purely presentational.
+   */
+  interface Props {
+    onReload: () => void;
+    onKeepCurrent: () => void;
+  }
+
+  let { onReload, onKeepCurrent }: Props = $props();
+</script>
+
+<div class="dialog-overlay">
+  <div class="dialog">
+    <div class="dialog-header">
+      <h3>File Changed Externally</h3>
+    </div>
+    <div class="dialog-body">
+      <p>This file has been modified outside of Atelier.</p>
+      <p>Would you like to reload it from disk, or keep your current changes?</p>
+    </div>
+    <div class="dialog-footer">
+      <button class="action-btn" onclick={onKeepCurrent}>
+        Keep Current
+      </button>
+      <button class="action-btn primary" onclick={onReload}>
+        Reload from Disk
+      </button>
+    </div>
+  </div>
+</div>
+
+<style>
+  .dialog-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.7);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+  }
+
+  .dialog {
+    background: var(--color-bg-panel, #1a1a1a);
+    border: 1px solid var(--border-subtle, #2a2a2a);
+    border-radius: var(--radius-lg, 8px);
+    min-width: 400px;
+    max-width: 500px;
+    box-shadow: var(--shadow-lg, 0 10px 40px rgba(0,0,0,0.5));
+  }
+
+  .dialog-header {
+    padding: 16px 20px;
+    border-bottom: 1px solid var(--border-subtle, #2a2a2a);
+  }
+
+  .dialog-header h3 {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--color-text-primary, #f5f2eb);
+  }
+
+  .dialog-body {
+    padding: 20px;
+  }
+
+  .dialog-body p {
+    margin: 0 0 12px 0;
+    color: var(--color-text-secondary, #a0a0a0);
+    font-size: 14px;
+    line-height: 1.5;
+  }
+
+  .dialog-body p:last-child {
+    margin-bottom: 0;
+  }
+
+  .dialog-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--space-3);
+    padding: 16px 20px;
+    border-top: 1px solid var(--border-subtle, #2a2a2a);
+  }
+
+  /* Button styles mirror MarkdownEditor's .action-btn — scoped styles do not
+     cross component boundaries, so the dialog carries its own copy. */
+  .action-btn {
+    padding: 6px 12px;
+    border: 1px solid var(--border-subtle, #2a2a2a);
+    background: var(--color-bg-panel-elevated, #252525);
+    color: var(--color-text-secondary, #a0a0a0);
+    border-radius: var(--radius-sm, 4px);
+    cursor: pointer;
+    font-size: 13px;
+    transition: all 0.15s ease;
+  }
+
+  .action-btn:hover {
+    background: var(--border-subtle);
+    color: var(--color-text-primary, #f5f2eb);
+  }
+
+  .action-btn.primary {
+    background: var(--color-accent);
+    color: white;
+    border-color: var(--color-accent);
+  }
+
+  .action-btn.primary:hover {
+    background: var(--color-accent-hover, #c9843d);
+  }
+</style>

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

@@ -0,0 +1,13 @@
+/**
+ * ExternalChangeDialog — shown when the open file is modified on disk outside
+ * the editor. The parent owns the open/close state and the reload/keep logic;
+ * this component is purely presentational.
+ */
+interface Props {
+    onReload: () => void;
+    onKeepCurrent: () => void;
+}
+declare const ExternalChangeDialog: import("svelte").Component<Props, {}, "">;
+type ExternalChangeDialog = ReturnType<typeof ExternalChangeDialog>;
+export default ExternalChangeDialog;
+//# sourceMappingURL=ExternalChangeDialog.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExternalChangeDialog.svelte.d.ts","sourceRoot":"","sources":["../../src/editor/ExternalChangeDialog.svelte.ts"],"names":[],"mappings":"AAGE;;;;GAIG;AACH,UAAU,KAAK;IACb,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,EAAE,MAAM,IAAI,CAAC;CAC3B;AA+BH,QAAA,MAAM,oBAAoB,2CAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}