@stephen-netu/design-system 0.2.2 → 0.5.1

package/dist/editor/useFilePersistence.js

@@ -0,0 +1,117 @@
+import { getMtimeMs, isTauri, readTextFile, writeTextFile } from '../t0-transport/fs';
+export function useFilePersistence(options) {
+    const persistenceAvailable = isTauri();
+    let interval = null;
+    let focusHandler = null;
+    async function refreshLastKnownMtime() {
+        const filePath = options.getFilePath();
+        if (!filePath || !persistenceAvailable)
+            return;
+        try {
+            options.setLastKnownMtimeMs(await getMtimeMs(filePath));
+        }
+        catch {
+            return;
+        }
+    }
+    async function checkExternalChanges() {
+        const filePath = options.getFilePath();
+        if (!filePath || !persistenceAvailable || options.getIsCheckingExternalChanges() || options.getShowExternalChangeDialog() || !options.getIsDirty()) {
+            return;
+        }
+        options.setIsCheckingExternalChanges(true);
+        try {
+            const mtime = await getMtimeMs(filePath);
+            const lastKnownMtimeMs = options.getLastKnownMtimeMs();
+            if (mtime !== null && lastKnownMtimeMs !== null && mtime > lastKnownMtimeMs) {
+                options.setShowExternalChangeDialog(true);
+            }
+        }
+        catch (err) {
+            console.debug('External change check failed:', err);
+        }
+        finally {
+            options.setIsCheckingExternalChanges(false);
+        }
+    }
+    async function saveContent() {
+        const filePath = options.getFilePath();
+        if (!options.getIsDirty() || options.getIsSaving() || !filePath || !persistenceAvailable)
+            return;
+        options.setIsSaving(true);
+        options.setSaveError(null);
+        try {
+            await writeTextFile(filePath, options.getContent());
+            options.setIsDirty(false);
+            options.onSave?.();
+            await refreshLastKnownMtime();
+        }
+        catch (err) {
+            options.setSaveError(err instanceof Error ? err.message : String(err));
+            console.error('Failed to save file:', err);
+        }
+        finally {
+            options.setIsSaving(false);
+        }
+    }
+    async function reloadFromDisk() {
+        const filePath = options.getFilePath();
+        if (!filePath)
+            return;
+        try {
+            const newContent = await readTextFile(filePath);
+            const view = options.getEditorView();
+            if (view) {
+                view.dispatch({ changes: { from: 0, to: view.state.doc.length, insert: newContent } });
+            }
+            options.setContent(newContent);
+            options.setIsDirty(false);
+            options.setSaveError(null);
+            options.onExternalChange?.(newContent);
+            options.onChange?.(newContent);
+            await refreshLastKnownMtime();
+        }
+        catch (err) {
+            console.error('Failed to reload file:', err);
+            options.setSaveError(err instanceof Error ? err.message : 'Failed to reload file');
+        }
+        finally {
+            options.setShowExternalChangeDialog(false);
+        }
+    }
+    function keepCurrent() {
+        options.setShowExternalChangeDialog(false);
+        options.setIsDirty(true);
+    }
+    function startExternalChangeMonitoring() {
+        if (!persistenceAvailable)
+            return () => { };
+        const filePath = options.getFilePath();
+        if (filePath) {
+            getMtimeMs(filePath).then((m) => options.setLastKnownMtimeMs(m)).catch(() => { });
+        }
+        interval = setInterval(() => { void checkExternalChanges(); }, 2000);
+        focusHandler = () => { void checkExternalChanges(); };
+        window.addEventListener('focus', focusHandler);
+        return stopExternalChangeMonitoring;
+    }
+    function stopExternalChangeMonitoring() {
+        if (interval) {
+            clearInterval(interval);
+            interval = null;
+        }
+        if (focusHandler) {
+            window.removeEventListener('focus', focusHandler);
+            focusHandler = null;
+        }
+    }
+    return {
+        persistenceAvailable,
+        startExternalChangeMonitoring,
+        stopExternalChangeMonitoring,
+        checkExternalChanges,
+        saveContent,
+        reloadFromDisk,
+        keepCurrent
+    };
+}

package/dist/fabric/ai/ChatPanel.svelte

@@ -260,7 +260,8 @@
   </div>
 </div>
 
-<style>
+  <!-- svelte-ignore css_unused_selector -->
+  <style>
   .chat-panel {
     display: flex;
     flex-direction: column;
@@ -292,15 +293,15 @@
     padding: 6px;
     background: transparent;
     border: none;
-    border-radius: var(--radius-sm, 4px);
+    border-radius: 0;
     color: var(--color-text-tertiary, #6b6b6b);
     cursor: pointer;
-    transition: all 0.15s ease;
+    transition: color var(--transition-fast, 110ms) linear, background var(--transition-fast, 110ms) linear;
   }
 
   .clear-btn:hover {
-    background: var(--border-subtle, #2a2a2a);
-    color: var(--color-error, #ef4444);
+    background: var(--border-subtle, #262b30);
+    color: var(--color-error, #c14a4a);
   }
 
   .messages-container {
@@ -353,58 +354,59 @@
   }
 
   .message-bubble {
-    padding: 10px 14px;
-    border-radius: var(--radius-xl, 12px);
-    font-size: 13px;
-    line-height: 1.5;
+    padding: var(--ui-pad-y, 5px) var(--ui-pad-x, 8px);
+    font-size: var(--ui-font, 13px);
+    line-height: var(--ui-leading, 1.35);
   }
 
+  /* User bubble: accent-subtle bg + live edge. Accent fill (subtle) justified:
+     this is a sender-identity readout, same logic as toggle thumb. */
   .message.user .message-bubble {
-    background: var(--color-accent);
-    color: white;
-    border-bottom-right-radius: 4px;
+    background: var(--color-accent-subtle);
+    color: var(--color-text-primary);
+    box-shadow: inset -2px 0 0 var(--color-accent);
   }
 
   .message.assistant .message-bubble {
-    background: var(--color-bg-panel-elevated, #252525);
-    color: var(--color-text-primary, #e0e0e0);
-    border: 1px solid var(--border-subtle, #2a2a2a);
-    border-bottom-left-radius: 4px;
+    background: var(--color-bg-panel-elevated, #1c2024);
+    color: var(--color-text-primary);
+    border: 1px solid var(--border-default, #262b30);
+    box-shadow: inset 2px 0 0 var(--border-default);
   }
 
-  .message-content :global(h1),
-  .message-content :global(h2),
-  .message-content :global(h3) {
+  .message-content h1,
+  .message-content h2,
+  .message-content h3 {
     font-size: 14px;
     margin: 8px 0 4px 0;
   }
 
-  .message-content :global(p) {
+  .message-content p {
     margin: 0 0 4px 0;
   }
 
-  .message-content :global(code) {
+  .message-content code {
     background: rgba(0, 0, 0, 0.2);
     padding: 2px 4px;
-    border-radius: var(--radius-sm, 3px);
+    border-radius: 0;
     font-family: var(--font-mono, 'JetBrains Mono', monospace);
     font-size: 0.9em;
   }
 
-  .message-content :global(pre) {
+  .message-content pre {
     background: rgba(0, 0, 0, 0.3);
     padding: 8px;
-    border-radius: var(--radius-md, 6px);
+    border-radius: 0;
     overflow-x: auto;
     margin: 4px 0;
   }
 
-  .message-content :global(pre code) {
+  .message-content pre code {
     background: none;
     padding: 0;
   }
 
-  .message-content :global(ul) {
+  .message-content ul {
     margin: 4px 0;
     padding-left: 20px;
   }
@@ -437,20 +439,21 @@
     display: inline-flex;
     align-items: center;
     gap: var(--space-1);
-    padding: 4px 8px;
+    padding: 2px 6px;
     background: var(--color-accent-subtle);
-    border: 1px solid var(--color-accent);
-    border-radius: var(--radius-xl, 12px);
+    border: 1px solid var(--color-accent-muted);
     color: var(--color-accent);
-    font-size: 11px;
+    font-family: var(--font-mono);
+    font-size: var(--ui-label, 9px);
+    letter-spacing: 0.05em;
     cursor: pointer;
-    transition: all 0.15s ease;
+    transition: background var(--transition-fast, 110ms) linear, box-shadow var(--transition-fast, 110ms) linear;
     max-width: 150px;
   }
 
   .citation-chip:hover {
-    background: var(--color-accent);
-    color: white;
+    background: var(--color-accent-muted);
+    box-shadow: inset 2px 0 0 var(--color-accent);
   }
 
   .citation-source {
@@ -467,28 +470,26 @@
   .citation-popover {
     display: none;
     position: absolute;
-    bottom: calc(100% + 8px);
+    bottom: calc(100% + 6px);
     left: 50%;
     transform: translateX(-50%);
     width: 220px;
-    padding: 10px 12px;
-    background: var(--color-bg-panel-elevated, #252525);
-    border: 1px solid var(--border-subtle, #2a2a2a);
-    border-left: 3px solid var(--color-accent);
-    border-radius: var(--radius-md, 6px);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    padding: var(--ui-pad-y, 5px) var(--ui-pad-x, 8px);
+    background: var(--color-bg-panel-elevated, #1c2024);
+    border: 1px solid var(--border-default, #262b30);
+    border-left: 2px solid var(--color-accent);
     z-index: 10;
     pointer-events: none;
   }
 
   .citation-wrapper:hover .citation-popover {
     display: block;
-    animation: popover-fade 0.15s ease-out;
+    animation: popover-fade var(--transition-fast, 110ms) linear;
   }
 
   @keyframes popover-fade {
-    from { opacity: 0; transform: translateX(-50%) translateY(4px); }
-    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
+    from { opacity: 0; }
+    to   { opacity: 1; }
   }
 
   .citation-snippet {
@@ -506,13 +507,12 @@
   }
 
   .error-message {
-    padding: 10px 14px;
-    background: var(--color-error-bg, rgba(239, 68, 68, 0.1));
-    border: 1px solid var(--color-error, #ef4444);
-    border-radius: var(--radius-lg, 8px);
-    color: var(--color-error, #ef4444);
-    font-size: 13px;
-    margin-top: 8px;
+    padding: var(--ui-pad-y, 5px) var(--ui-pad-x, 8px);
+    background: var(--color-error-bg, rgba(193, 74, 74, 0.1));
+    border: 1px solid var(--color-error, #c14a4a);
+    color: var(--color-error, #c14a4a);
+    font-size: var(--ui-font, 13px);
+    margin-top: 6px;
   }
 
   .input-container {
@@ -532,7 +532,7 @@
     padding: 10px 14px;
     background: var(--color-bg-panel-elevated, #252525);
     border: 1px solid var(--border-subtle, #2a2a2a);
-    border-radius: var(--radius-xl, 20px);
+    border-radius: 0;
     color: var(--color-text-primary, #e0e0e0);
     font-size: 13px;
     outline: none;
@@ -552,25 +552,24 @@
     cursor: not-allowed;
   }
 
+  /* Send button: accent fill justified — submit = functional state (action, not decoration) */
   .send-btn {
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 36px;
-    height: 36px;
+    width: var(--ui-control-h, 24px);
+    height: var(--ui-control-h, 24px);
     padding: 0;
     background: var(--color-accent);
     border: none;
-    border-radius: 50%;
-    color: white;
+    color: var(--color-bg-app, #0a0b0c);
     cursor: pointer;
-    transition: all 0.15s ease;
+    transition: background var(--transition-fast, 110ms) linear;
     flex-shrink: 0;
   }
 
   .send-btn:hover:not(:disabled) {
-    background: var(--color-accent-hover, #c9894f);
-    transform: scale(1.05);
+    background: var(--color-accent-hover);
   }
 
   .send-btn:disabled {
@@ -634,15 +633,15 @@
     padding: 4px;
     background: transparent;
     border: none;
-    border-radius: var(--radius-sm, 4px);
+    border-radius: 0;
     color: var(--color-text-tertiary, #6b6b6b);
     cursor: pointer;
-    transition: all 0.15s ease;
+    transition: color var(--transition-fast, 110ms) linear, background var(--transition-fast, 110ms) linear;
     flex-shrink: 0;
   }
 
   .clear-context-btn:hover {
-    background: var(--border-subtle, #2a2a2a);
-    color: var(--color-error, #ef4444);
+    background: var(--border-subtle, #262b30);
+    color: var(--color-error, #c14a4a);
   }
 </style>

package/dist/fabric/ai/ChatPanel.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatPanel.svelte.d.ts","sourceRoot":"","sources":["../../../src/fabric/ai/ChatPanel.svelte.ts"],"names":[],"mappings":"AAgBE,MAAM,WAAW,QAAQ;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,GAAG,WAAW,CAAC;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,SAAS,CAAC,EAAE,IAAI,CAAC;CAClB;AAED,UAAU,KAAK;IAEb,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,OAAO,CAAC;IACrB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAGrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,WAAW,EAAE,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IAGtB,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,eAAe,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAG3C,WAAW,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;IAGvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AA0LH,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"ChatPanel.svelte.d.ts","sourceRoot":"","sources":["../../../src/fabric/ai/ChatPanel.svelte.ts"],"names":[],"mappings":"AAgBE,MAAM,WAAW,QAAQ;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,GAAG,WAAW,CAAC;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,SAAS,CAAC,EAAE,IAAI,CAAC;CAClB;AAED,UAAU,KAAK;IAEb,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,OAAO,CAAC;IACrB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAGrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,WAAW,EAAE,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IAGtB,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,eAAe,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAG3C,WAAW,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;IAGvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AA2LH,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/fabric/ai/ResearchPanel.svelte

@@ -298,9 +298,8 @@
     display: flex;
     flex-direction: column;
     height: 100%;
-    background: var(--color-bg-panel, #222222);
-    border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
-    border-radius: var(--radius-md, 0.5rem);
+    background: var(--color-bg-panel, #181c20);
+    border: 1px solid var(--border-default, #262b30);
     overflow: hidden;
   }
 
@@ -324,7 +323,7 @@
     gap: var(--space-1);
     background: var(--color-bg-canvas, #1a1a1a);
     padding: 2px;
-    border-radius: var(--radius-sm, 0.25rem);
+    border-radius: 0;
   }
 
   .mode-btn {
@@ -334,13 +333,15 @@
     border: none;
     color: var(--color-text-secondary, #a09880);
     cursor: pointer;
-    border-radius: var(--radius-sm, 0.25rem);
-    transition: all 0.15s;
+    border-radius: 0;
+    transition: background var(--transition-fast, 110ms) linear, color var(--transition-fast, 110ms) linear;
   }
 
+  /* Active mode fill justified — mode selection is a functional state readout */
   .mode-btn.active {
-    background: var(--color-accent, var(--color-accent));
-    color: var(--color-text-primary, #f2efe9);
+    background: var(--color-accent-subtle);
+    color: var(--color-text-primary);
+    box-shadow: inset 0 -2px 0 var(--color-accent);
   }
 
   .query-form {
@@ -356,7 +357,7 @@
     padding: 8px 12px;
     background: var(--color-bg-canvas, #1a1a1a);
     border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
-    border-radius: var(--radius-sm, 0.25rem);
+    border-radius: 0;
     color: var(--color-text-primary, #f2efe9);
     font-size: 14px;
     outline: none;
@@ -387,7 +388,7 @@
     border: none;
     color: var(--color-text-secondary, #a09880);
     cursor: pointer;
-    border-radius: var(--radius-sm, 0.25rem);
+    border-radius: 0;
   }
 
   .clear-btn:hover {
@@ -404,7 +405,7 @@
   .result-card {
     padding: 12px;
     background: var(--color-bg-canvas, #1a1a1a);
-    border-radius: var(--radius-sm, 0.25rem);
+    border-radius: 0;
   }
 
   .result-header {
@@ -456,19 +457,22 @@
 
   .credibility {
     padding: 1px 6px;
-    border-radius: var(--radius-sm, 0.25rem);
-    background: rgba(229, 57, 53, 0.2);
-    color: #e53935;
+    font-family: var(--font-mono);
+    font-size: var(--ui-label, 9px);
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    background: color-mix(in srgb, var(--color-error) 12%, transparent);
+    color: var(--color-error);
   }
 
   .credibility.medium {
-    background: rgba(255, 152, 0, 0.2);
-    color: #ff9800;
+    background: color-mix(in srgb, var(--color-warning) 12%, transparent);
+    color: var(--color-warning);
   }
 
   .credibility.high {
-    background: rgba(76, 175, 80, 0.2);
-    color: #4caf50;
+    background: color-mix(in srgb, var(--color-success) 12%, transparent);
+    color: var(--color-success);
   }
 
   .empty-state {
@@ -491,16 +495,19 @@
     display: flex;
     align-items: center;
     gap: var(--space-15);
-    padding: 6px 16px;
+    padding: 4px 12px;
     background: none;
-    border: 1px solid var(--color-error, #e53935);
-    border-radius: var(--radius-sm, 0.25rem);
-    color: var(--color-error, #e53935);
-    font-size: 12px;
+    border: 1px solid color-mix(in srgb, var(--color-error) 55%, transparent);
+    color: var(--color-error);
+    font-family: var(--font-mono);
+    font-size: var(--ui-label, 10px);
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
     cursor: pointer;
+    transition: background var(--transition-fast, 110ms) linear;
   }
 
   .cancel-btn:hover {
-    background: rgba(229, 57, 53, 0.1);
+    background: color-mix(in srgb, var(--color-error) 12%, transparent);
   }
 </style>