@stephen-netu/design-system 0.2.2 → 0.5.1

package/dist/fabric/data/FileTree.svelte

@@ -0,0 +1,195 @@
+<script lang="ts">
+  /**
+   * FileTree - Fabric Component
+   *
+   * Hierarchical file browser tree with expand/collapse and selection.
+   * Decoupled from shell stores — uses props/callbacks for all state.
+   *
+   * @package @stephen-netu/design-system/fabric/data
+   */
+  import Self from './FileTree.svelte';
+  import { ChevronRight, FileText, Folder } from '@lucide/svelte';
+
+  export interface FileEntry {
+    id: string;
+    name: string;
+    type: 'file' | 'directory';
+    path: string;
+    children?: FileEntry[];
+    isExpanded?: boolean;
+    isSelected?: boolean;
+  }
+
+  interface Props {
+    items: FileEntry[];
+    onFileSelect: (entry: FileEntry) => void;
+    onDirectoryToggle?: (entry: FileEntry, expanded: boolean) => void;
+    class?: string;
+  }
+
+  let { items, onFileSelect, onDirectoryToggle, class: className = '' }: Props = $props();
+
+  let expandedPaths = $state<Set<string>>(new Set());
+  let selectedPath = $state<string | null>(null);
+
+  function handleToggle(entry: FileEntry) {
+    if (entry.type !== 'directory') return;
+
+    const next = new Set(expandedPaths);
+    if (next.has(entry.path)) {
+      next.delete(entry.path);
+    } else {
+      next.add(entry.path);
+    }
+    expandedPaths = next;
+    onDirectoryToggle?.(entry, next.has(entry.path));
+  }
+
+  function handleSelect(entry: FileEntry) {
+    if (entry.type === 'file') {
+      selectedPath = entry.path;
+    }
+    onFileSelect(entry);
+  }
+
+  function isExpanded(entry: FileEntry): boolean {
+    return entry.isExpanded ?? expandedPaths.has(entry.path);
+  }
+
+  function isSelected(entry: FileEntry): boolean {
+    return entry.isSelected ?? selectedPath === entry.path;
+  }
+
+  function handleChevronKeydown(entry: FileEntry, e: KeyboardEvent) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.stopPropagation();
+      e.preventDefault();
+      handleToggle(entry);
+    }
+  }
+</script>
+
+<div class="file-tree {className}">
+  {#each items as entry (entry.id)}
+    <div class="file-tree__node">
+      <button
+        class="file-tree__row"
+        class:file-tree__row--directory={entry.type === 'directory'}
+        class:file-tree__row--selected={isSelected(entry)}
+        onclick={() => handleSelect(entry)}
+        aria-expanded={entry.type === 'directory' ? isExpanded(entry) : undefined}
+        aria-current={isSelected(entry) ? 'true' : undefined}
+      >
+        {#if entry.type === 'directory'}
+          <span
+            class="file-tree__chevron"
+            class:file-tree__chevron--open={isExpanded(entry)}
+            onclick={(e) => { e.stopPropagation(); handleToggle(entry); }}
+            onkeydown={(e) => handleChevronKeydown(entry, e)}
+            role="button"
+            tabindex="0"
+            aria-label={isExpanded(entry) ? 'Collapse directory' : 'Expand directory'}
+          >
+            <ChevronRight size={12} />
+          </span>
+          <Folder size={14} class="file-tree__icon file-tree__icon--folder" />
+        {:else}
+          <span class="file-tree__spacer"></span>
+          <FileText size={14} class="file-tree__icon file-tree__icon--file" />
+        {/if}
+        <span class="file-tree__name">{entry.name}</span>
+      </button>
+
+      {#if entry.type === 'directory' && entry.children && isExpanded(entry)}
+        <div class="file-tree__children" role="group">
+          <Self items={entry.children} {onFileSelect} {onDirectoryToggle} />
+        </div>
+      {/if}
+    </div>
+  {/each}
+</div>
+
+<style>
+  .file-tree {
+    font-size: 13px;
+    line-height: 1.4;
+    color: var(--color-text-primary);
+    user-select: none;
+  }
+
+  .file-tree__node {
+    margin: 0;
+  }
+
+  .file-tree__row {
+    display: flex;
+    align-items: center;
+    gap: var(--space-1);
+    width: 100%;
+    padding: 2px 8px;
+    background: transparent;
+    border: none;
+    border-radius: 0;
+    color: var(--color-text-secondary);
+    cursor: pointer;
+    text-align: left;
+    font: inherit;
+    transition: background var(--transition-fast, 110ms) linear, color var(--transition-fast, 110ms) linear;
+  }
+
+  .file-tree__row:hover {
+    background: var(--color-bg-panel);
+    color: var(--color-text-primary);
+  }
+
+  .file-tree__row--selected {
+    background: var(--color-accent-subtle);
+    color: var(--color-accent);
+    box-shadow: inset 2px 0 0 var(--color-accent);
+  }
+
+  .file-tree__chevron {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 14px;
+    height: 14px;
+    color: var(--color-text-tertiary);
+    cursor: pointer;
+    transition: transform var(--transition-fast, 110ms) linear;
+    flex-shrink: 0;
+  }
+
+  .file-tree__chevron--open {
+    transform: rotate(90deg);
+    color: var(--color-accent);
+  }
+
+  .file-tree__spacer {
+    display: block;
+    width: 14px;
+    flex-shrink: 0;
+  }
+
+  .file-tree__icon {
+    flex-shrink: 0;
+  }
+
+  .file-tree__icon--folder {
+    color: var(--color-accent-muted, var(--color-accent));
+  }
+
+  .file-tree__icon--file {
+    color: var(--color-text-tertiary);
+  }
+
+  .file-tree__name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .file-tree__children {
+    padding-left: 16px;
+  }
+</style>

package/dist/fabric/data/FileTree.svelte.d.ts

@@ -0,0 +1,19 @@
+export interface FileEntry {
+    id: string;
+    name: string;
+    type: 'file' | 'directory';
+    path: string;
+    children?: FileEntry[];
+    isExpanded?: boolean;
+    isSelected?: boolean;
+}
+interface Props {
+    items: FileEntry[];
+    onFileSelect: (entry: FileEntry) => void;
+    onDirectoryToggle?: (entry: FileEntry, expanded: boolean) => void;
+    class?: string;
+}
+declare const FileTree: import("svelte").Component<Props, {}, "">;
+type FileTree = ReturnType<typeof FileTree>;
+export default FileTree;
+//# sourceMappingURL=FileTree.svelte.d.ts.map

package/dist/fabric/data/FileTree.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileTree.svelte.d.ts","sourceRoot":"","sources":["../../../src/fabric/data/FileTree.svelte.ts"],"names":[],"mappings":"AAeE,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,GAAG,WAAW,CAAC;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,SAAS,EAAE,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,UAAU,KAAK;IACb,KAAK,EAAE,SAAS,EAAE,CAAC;IACnB,YAAY,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACzC,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAClE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA+EH,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/fabric/data/FileTree.test.js

@@ -0,0 +1,127 @@
+import { afterEach, describe, it, expect, vi } from 'vitest';
+import { cleanup, render, fireEvent } from '@testing-library/svelte';
+import FileTree from './FileTree.svelte';
+const mockItems = [
+    {
+        id: '1',
+        name: 'src',
+        type: 'directory',
+        path: '/src',
+        children: [
+            { id: '2', name: 'index.ts', type: 'file', path: '/src/index.ts' },
+            {
+                id: '3',
+                name: 'components',
+                type: 'directory',
+                path: '/src/components',
+                children: [
+                    { id: '4', name: 'Button.svelte', type: 'file', path: '/src/components/Button.svelte' },
+                ],
+            },
+        ],
+    },
+    { id: '5', name: 'README.md', type: 'file', path: '/README.md' },
+];
+describe('FileTree', () => {
+    afterEach(() => cleanup());
+    it('renders top-level items', () => {
+        const { container } = render(FileTree, { props: { items: mockItems, onFileSelect: vi.fn() } });
+        expect(container.textContent).toContain('src');
+        expect(container.textContent).toContain('README.md');
+    });
+    it('shows children when directory is expanded via chevron click', async () => {
+        const { container } = render(FileTree, { props: { items: mockItems, onFileSelect: vi.fn() } });
+        const chevron = container.querySelector('.file-tree__chevron');
+        expect(chevron).not.toBeNull();
+        await fireEvent.click(chevron);
+        expect(container.textContent).toContain('index.ts');
+        expect(container.textContent).toContain('components');
+    });
+    it('hides children when directory is collapsed', async () => {
+        const { container } = render(FileTree, { props: { items: mockItems, onFileSelect: vi.fn() } });
+        const chevron = container.querySelector('.file-tree__chevron');
+        await fireEvent.click(chevron);
+        expect(container.textContent).toContain('index.ts');
+        await fireEvent.click(chevron);
+        expect(container.textContent).not.toContain('index.ts');
+    });
+    it('calls onFileSelect when a file row is clicked', async () => {
+        const onFileSelect = vi.fn();
+        const { container } = render(FileTree, { props: { items: mockItems, onFileSelect } });
+        const chevron = container.querySelector('.file-tree__chevron');
+        await fireEvent.click(chevron);
+        const fileRows = container.querySelectorAll('.file-tree__row');
+        const fileRow = Array.from(fileRows).find(r => r.textContent?.includes('index.ts'));
+        expect(fileRow).not.toBeNull();
+        await fireEvent.click(fileRow);
+        expect(onFileSelect).toHaveBeenCalledTimes(1);
+        expect(onFileSelect).toHaveBeenCalledWith(expect.objectContaining({ id: '2', name: 'index.ts' }));
+    });
+    it('applies selected class to the clicked file row', async () => {
+        const { container } = render(FileTree, { props: { items: mockItems, onFileSelect: vi.fn() } });
+        const chevron = container.querySelector('.file-tree__chevron');
+        await fireEvent.click(chevron);
+        const readmeRow = Array.from(container.querySelectorAll('.file-tree__row'))
+            .find(r => r.textContent?.includes('README.md'));
+        await fireEvent.click(readmeRow);
+        expect(readmeRow.classList.contains('file-tree__row--selected')).toBe(true);
+    });
+    it('calls onDirectoryToggle when a directory is expanded', async () => {
+        const onDirectoryToggle = vi.fn();
+        const { container } = render(FileTree, {
+            props: { items: mockItems, onFileSelect: vi.fn(), onDirectoryToggle },
+        });
+        const chevron = container.querySelector('.file-tree__chevron');
+        await fireEvent.click(chevron);
+        expect(onDirectoryToggle).toHaveBeenCalledTimes(1);
+        expect(onDirectoryToggle).toHaveBeenCalledWith(expect.objectContaining({ id: '1', name: 'src' }), true);
+    });
+    it('applies custom class name', () => {
+        const { container } = render(FileTree, {
+            props: { items: mockItems, onFileSelect: vi.fn(), class: 'custom-class' },
+        });
+        const el = container.querySelector('.file-tree');
+        expect(el?.classList.contains('custom-class')).toBe(true);
+    });
+    it('supports externally controlled isExpanded on directory items', () => {
+        const itemsWithExpanded = [
+            {
+                id: '1',
+                name: 'src',
+                type: 'directory',
+                path: '/src',
+                isExpanded: true,
+                children: [
+                    { id: '2', name: 'index.ts', type: 'file', path: '/src/index.ts' },
+                ],
+            },
+        ];
+        const { container } = render(FileTree, { props: { items: itemsWithExpanded, onFileSelect: vi.fn() } });
+        expect(container.textContent).toContain('index.ts');
+    });
+    it('supports externally controlled isSelected on file items', () => {
+        const itemsWithSelected = [
+            { id: '5', name: 'README.md', type: 'file', path: '/README.md', isSelected: true },
+        ];
+        const { container } = render(FileTree, { props: { items: itemsWithSelected, onFileSelect: vi.fn() } });
+        const row = container.querySelector('.file-tree__row--selected');
+        expect(row).not.toBeNull();
+        expect(row.textContent).toContain('README.md');
+    });
+    it('calls onDirectoryToggle with false when collapsing a directory', async () => {
+        const onDirectoryToggle = vi.fn();
+        const { container } = render(FileTree, {
+            props: { items: mockItems, onFileSelect: vi.fn(), onDirectoryToggle },
+        });
+        const chevron = container.querySelector('.file-tree__chevron');
+        await fireEvent.click(chevron);
+        await fireEvent.click(chevron);
+        expect(onDirectoryToggle).toHaveBeenCalledTimes(2);
+        expect(onDirectoryToggle).toHaveBeenLastCalledWith(expect.objectContaining({ id: '1', name: 'src' }), false);
+    });
+    it('sets aria-expanded on directory rows', () => {
+        const { container } = render(FileTree, { props: { items: mockItems, onFileSelect: vi.fn() } });
+        const dirRow = container.querySelector('[aria-expanded]');
+        expect(dirRow).not.toBeNull();
+    });
+});

package/dist/fabric/data/index.d.ts

@@ -2,14 +2,10 @@
  * Fabric Data Components
  *
  * Data visualization and management components.
+ *
+ * @package @stephen-netu/design-system/fabric/data
+ * @adr 2026-04-12-leap-substrate-refactor-001
  */
-export interface FileEntry {
-    id: string;
-    name: string;
-    type: 'file' | 'directory';
-    path: string;
-    children?: FileEntry[];
-    isExpanded?: boolean;
-    isSelected?: boolean;
-}
+export { default as FileTree } from './FileTree.svelte';
+export type { FileEntry } from './FileTree.svelte';
 //# sourceMappingURL=index.d.ts.map

package/dist/fabric/data/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fabric/data/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,GAAG,WAAW,CAAC;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,SAAS,EAAE,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fabric/data/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,YAAY,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/fabric/data/index.js

@@ -2,5 +2,8 @@
  * Fabric Data Components
  *
  * Data visualization and management components.
+ *
+ * @package @stephen-netu/design-system/fabric/data
+ * @adr 2026-04-12-leap-substrate-refactor-001
  */
-export {};
+export { default as FileTree } from './FileTree.svelte';

package/dist/fabric/index.d.ts

@@ -15,6 +15,7 @@ export { GlassBox, KanbanBoard, KanbanColumn, KanbanCard, CollapsiblePanel } fro
 export type { CardData, ColumnData, PanelPosition, PanelMode, PanelSnap } from './layout';
 export { ActivityRail } from './navigation';
 export type { RailItem, RailItemType } from './navigation';
+export { FileTree } from './data';
 export type { FileEntry } from './data';
 export { AppHeaderBar, KeyboardShortcuts } from './input';
 export type { ShortcutBinding, ShortcutGroup } from './input';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/fabric/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAGH,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,YAAY,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAC7F,YAAY,EAAE,QAAQ,EAAE,UAAU,EAAE,aAAa,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAG1F,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAC5C,YAAY,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAG3D,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAGxC,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAC1D,YAAY,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC9D,YAAY,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAGjD,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,MAAM,CAAC;AAChD,YAAY,EAAE,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,MAAM,CAAC;AAG3D,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AACvD,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AACvE,YAAY,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/fabric/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAGH,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,YAAY,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAC7F,YAAY,EAAE,QAAQ,EAAE,UAAU,EAAE,aAAa,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAG1F,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAC5C,YAAY,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAG3D,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAClC,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAGxC,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAC1D,YAAY,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC9D,YAAY,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAGjD,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,MAAM,CAAC;AAChD,YAAY,EAAE,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,MAAM,CAAC;AAG3D,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AACvD,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AACvE,YAAY,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC"}

package/dist/fabric/index.js

@@ -15,6 +15,8 @@
 export { GlassBox, KanbanBoard, KanbanColumn, KanbanCard, CollapsiblePanel } from './layout';
 // Navigation
 export { ActivityRail } from './navigation';
+// Data
+export { FileTree } from './data';
 // Input
 export { AppHeaderBar, KeyboardShortcuts } from './input';
 // AI

package/dist/fabric/input/KeyboardShortcuts.svelte

@@ -162,20 +162,20 @@
   .shortcuts-overlay {
     position: fixed;
     inset: 0;
-    background: rgba(0, 0, 0, 0.8);
+    background: rgba(0, 0, 0, 0.75);
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 10000;
-    backdrop-filter: blur(4px);
+    /* No backdrop-filter: depth via border + contrast only */
   }
 
   .shortcuts-panel {
     width: min(560px, 90vw);
     max-height: 80vh;
     background: var(--color-bg-panel, #222222);
-    border: 1px solid var(--border-default, #333333);
-    border-radius: var(--radius-xl, 0.75rem);
+    border: var(--border-width-default, 2px) solid var(--border-default, #333333);
+    border-radius: 0;
     display: flex;
     flex-direction: column;
     overflow: hidden;
@@ -185,33 +185,35 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 16px 20px;
-    border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
+    padding: var(--ui-pad-y, 5px) var(--ui-pad-x, 8px);
+    border-bottom: 1px solid var(--border-default, #333333);
   }
 
   .panel-title {
-    font-size: 16px;
+    font-family: var(--font-mono);
+    font-size: var(--ui-label, 10px);
     font-weight: 600;
-    color: var(--color-text-primary, #f2efe9);
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: var(--color-text-secondary, #a09880);
     margin: 0;
   }
 
   .close-btn {
     background: none;
-    border: none;
+    border: 1px solid transparent;
     color: var(--color-text-tertiary, #706858);
     cursor: pointer;
-    padding: 4px;
-    border-radius: var(--radius-sm, 0.25rem);
+    padding: 3px;
     display: flex;
     align-items: center;
     justify-content: center;
-    transition: color 0.15s, background 0.15s;
+    transition: color var(--transition-fast, 110ms) linear, border-color var(--transition-fast, 110ms) linear;
   }
 
   .close-btn:hover {
-    color: var(--color-text-primary, #f2efe9);
-    background: rgba(255, 255, 255, 0.05);
+    color: var(--color-text-primary, #e7e9eb);
+    border-color: var(--border-default, #333333);
   }
 
   .search-box {
@@ -242,7 +244,7 @@
     color: var(--color-text-tertiary, #706858);
     cursor: pointer;
     padding: 2px;
-    border-radius: var(--radius-sm, 0.25rem);
+    border-radius: 0;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -292,15 +294,15 @@
     padding: 10px 12px;
     background: none;
     border: 1px solid transparent;
-    border-radius: var(--radius-md, 0.375rem);
+    border-radius: 0;
     cursor: pointer;
     text-align: left;
     transition: background 0.15s, border-color 0.15s;
   }
 
   .shortcut-btn:hover {
-    background: var(--color-bg-canvas, #1a1a1a);
-    border-color: var(--border-subtle, rgba(255,255,255,0.06));
+    background: var(--color-bg-canvas, #0f1113);
+    border-color: var(--border-default, #333333);
   }
 
   .shortcut-keys {
@@ -319,7 +321,7 @@
     padding: 0 6px;
     background: var(--color-bg-canvas, #1a1a1a);
     border: 1px solid var(--border-default, #333333);
-    border-radius: var(--radius-sm, 0.25rem);
+    border-radius: 0;
     font-family: var(--font-mono, 'JetBrains Mono', monospace);
     font-size: 11px;
     font-weight: 500;
@@ -340,7 +342,7 @@
     font-size: 10px;
     padding: 2px 6px;
     background: var(--color-bg-canvas, #1a1a1a);
-    border-radius: var(--radius-sm, 0.25rem);
+    border-radius: 0;
     color: var(--color-text-tertiary, #706858);
   }
 
@@ -380,7 +382,7 @@
     margin: 0 2px;
     background: var(--color-bg-panel, #222222);
     border: 1px solid var(--border-default, #333333);
-    border-radius: var(--radius-sm, 0.25rem);
+    border-radius: 0;
     font-family: var(--font-mono, 'JetBrains Mono', monospace);
     font-size: 10px;
   }

package/dist/fabric/layout/CollapsiblePanel.svelte

@@ -238,7 +238,7 @@
     --panel-border: var(--border-subtle, 1px solid rgba(255, 255, 255, 0.06));
     --handle-bg: var(--color-bg-inset, #0f0f0f);
     --handle-hover-bg: var(--color-bg-canvas, #141414);
-    --accent-color: var(--color-accent, #00ff41);
+    --accent-color: var(--color-accent);
     --transition-duration: 300ms;
 
     display: flex;
@@ -290,7 +290,7 @@
     border-right: var(--panel-border);
     border-left: var(--panel-border);
     overflow: hidden;
-    transition: width var(--transition-duration) cubic-bezier(0.34, 1.56, 0.64, 1);
+    transition: width var(--transition-duration) linear;
     flex-shrink: 0;
   }
 
@@ -316,7 +316,7 @@
     cursor: pointer;
     user-select: none;
     position: relative;
-    transition: background 0.15s ease;
+    transition: background var(--transition-fast, 110ms) linear;
     min-height: 100%;
   }
 
@@ -341,25 +341,23 @@
     width: 2px;
     height: 64px;
     background: var(--color-text-muted, #555);
-    border-radius: var(--shape-border-radius, 1px);
-    transition: all 0.15s ease;
+    transition: background var(--transition-fast, 110ms) linear;
     flex-shrink: 0;
   }
 
   .panel-handle:hover .panel-handle__bar {
-    background: var(--color-text-primary, #ccc);
-    box-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
+    background: var(--color-text-secondary, #9aa1a8);
   }
 
+  /* Expanded/dragging: accent fill on the drag handle bar — functional
+     state indicator (open/dragging vs closed), same logic as toggle thumb */
   .panel-handle--expanded .panel-handle__bar {
     background: var(--accent-color);
-    box-shadow: 0 0 6px var(--accent-color);
-    opacity: 0.6;
+    opacity: 0.7;
   }
 
   .collapsible-panel--dragging .panel-handle__bar {
     background: var(--accent-color);
-    box-shadow: 0 0 8px var(--accent-color);
     opacity: 1;
   }
 

package/dist/fabric/navigation/ActivityRail.svelte

@@ -8,9 +8,7 @@
    * @package @kos/design-system/fabric/navigation
    * @adr 2026-04-12-leap-substrate-refactor-001
    */
-  // Lucide icons are Svelte 4 class components - use permissive typing
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  type IconComponent = any;
+  import type { LucideIcon } from '@lucide/svelte';
   import {
     LayoutGrid, FileText, Network, Columns2, Globe,
     FolderTree, MessageSquare, HelpCircle, Layers, Gauge, Wifi, Folder,
@@ -56,7 +54,7 @@
     ondropstreamcard,
   }: Props = $props();
 
-  const ICON_MAP: Record<string, IconComponent> = {
+  const ICON_MAP: Record<string, LucideIcon> = {
     'layout-grid': LayoutGrid,
     'file-text': FileText,
     'network': Network,
@@ -75,7 +73,7 @@
     'help-circle': HelpCircle,
   };
 
-  function getIcon(name: string): IconComponent {
+  function getIcon(name: string): LucideIcon {
     return ICON_MAP[name.toLowerCase()] ?? FileText;
   }
 

package/dist/fabric/navigation/ActivityRail.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActivityRail.svelte.d.ts","sourceRoot":"","sources":["../../../src/fabric/navigation/ActivityRail.svelte.ts"],"names":[],"mappings":"AAsBE,MAAM,MAAM,YAAY,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC;AAEpD,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,YAAY,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,KAAK;IACb,oCAAoC;IACpC,QAAQ,EAAE,QAAQ,EAAE,CAAC;IACrB,wCAAwC;IACxC,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,0CAA0C;IAC1C,UAAU,EAAE,QAAQ,EAAE,CAAC;IACvB,8BAA8B;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oCAAoC;IACpC,WAAW,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACtC,+BAA+B;IAC/B,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,yDAAyD;IACzD,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,WAAW,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CAC7G;AA+HH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ActivityRail.svelte.d.ts","sourceRoot":"","sources":["../../../src/fabric/navigation/ActivityRail.svelte.ts"],"names":[],"mappings":"AAoBE,MAAM,MAAM,YAAY,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC;AAEpD,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,YAAY,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,KAAK;IACb,oCAAoC;IACpC,QAAQ,EAAE,QAAQ,EAAE,CAAC;IACrB,wCAAwC;IACxC,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,0CAA0C;IAC1C,UAAU,EAAE,QAAQ,EAAE,CAAC;IACvB,8BAA8B;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oCAAoC;IACpC,WAAW,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACtC,+BAA+B;IAC/B,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,yDAAyD;IACzD,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,WAAW,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CAC7G;AAgIH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/g0-generative/components/Text.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  export interface Props {
+    content?: string;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    class?: string;
+  }
+
+  let { content = '', size = 'md', class: className = '' }: Props = $props();
+</script>
+
+<span class="openui-text size-{size} {className}">
+  {content}
+</span>
+
+<style>
+  .openui-text {
+    color: var(--color-text-primary, #f5f5f5);
+    font-family: var(--font-sans);
+    line-height: var(--line-height-normal, 1.5);
+  }
+
+  .size-sm {
+    font-size: var(--text-xs, 0.75rem);
+  }
+
+  .size-md {
+    font-size: var(--text-sm, 0.875rem);
+  }
+
+  .size-lg {
+    font-size: var(--text-base, 1rem);
+  }
+
+  .size-xl {
+    font-size: var(--text-lg, 1.125rem);
+    font-weight: var(--font-weight-semibold, 600);
+  }
+</style>

package/dist/g0-generative/components/Text.svelte.d.ts

@@ -0,0 +1,9 @@
+export interface Props {
+    content?: string;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    class?: string;
+}
+declare const Text: import("svelte").Component<Props, {}, "">;
+type Text = ReturnType<typeof Text>;
+export default Text;
+//# sourceMappingURL=Text.svelte.d.ts.map