@stephen-netu/design-system 0.2.1 → 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

@@ -5,21 +5,21 @@
  * Following ADR-2026-04-12-leap-substrate-refactor-001
  *
  * Import from specific subpaths for tree-shaking:
- *   import { Button } from '@kos/design-system/fabric/u0-primitives';
+ *   import { Button } from '@kos/design-system/u0-primitives';
  *   import { GlassBox } from '@kos/design-system/fabric/layout';
  *
  * Or use the barrel import for convenience:
- *   import { GlassBox, ActivityRail, FileTree, KanbanBoard, KanbanColumn, KanbanCard, CommandBar, KeyboardShortcuts, ChatPanel, ToastContainer, StatusBar } from '@kos/design-system/fabric';
+ *   import { GlassBox, ActivityRail, KanbanBoard, KanbanColumn, KanbanCard, AppHeaderBar, KeyboardShortcuts, ChatPanel, ToastContainer, StatusBar } from '@kos/design-system/fabric';
  */
 export { GlassBox, KanbanBoard, KanbanColumn, KanbanCard, CollapsiblePanel } from './layout';
 export type { CardData, ColumnData, PanelPosition, PanelMode, PanelSnap } from './layout';
-export type { KanbanBoardProps, KanbanColumnProps, KanbanCardProps } from './layout';
 export { ActivityRail } from './navigation';
 export type { RailItem, RailItemType } from './navigation';
+export { FileTree } from './data';
 export type { FileEntry } from './data';
-export { CommandBar, KeyboardShortcuts } from './input';
+export { AppHeaderBar, KeyboardShortcuts } from './input';
 export type { ShortcutBinding, ShortcutGroup } from './input';
-export type { CommandBarProps } from './input';
+export type { AppHeaderBarProps } from './input';
 export { ChatPanel, ResearchPanel } from './ai';
 export type { Message, Citation, ContextCard } from './ai';
 export { ToastContainer, StatusBar } from './feedback';

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;AAC1F,YAAY,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAGrF,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,UAAU,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AACxD,YAAY,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC9D,YAAY,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAG/C,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

@@ -5,18 +5,20 @@
  * Following ADR-2026-04-12-leap-substrate-refactor-001
  *
  * Import from specific subpaths for tree-shaking:
- *   import { Button } from '@kos/design-system/fabric/u0-primitives';
+ *   import { Button } from '@kos/design-system/u0-primitives';
  *   import { GlassBox } from '@kos/design-system/fabric/layout';
  *
  * Or use the barrel import for convenience:
- *   import { GlassBox, ActivityRail, FileTree, KanbanBoard, KanbanColumn, KanbanCard, CommandBar, KeyboardShortcuts, ChatPanel, ToastContainer, StatusBar } from '@kos/design-system/fabric';
+ *   import { GlassBox, ActivityRail, KanbanBoard, KanbanColumn, KanbanCard, AppHeaderBar, KeyboardShortcuts, ChatPanel, ToastContainer, StatusBar } from '@kos/design-system/fabric';
  */
 // Layout
 export { GlassBox, KanbanBoard, KanbanColumn, KanbanCard, CollapsiblePanel } from './layout';
 // Navigation
 export { ActivityRail } from './navigation';
+// Data
+export { FileTree } from './data';
 // Input
-export { CommandBar, KeyboardShortcuts } from './input';
+export { AppHeaderBar, KeyboardShortcuts } from './input';
 // AI
 export { ChatPanel, ResearchPanel } from './ai';
 // Feedback

package/dist/fabric/input/{CommandBar.svelte → AppHeaderBar.svelte}

@@ -1,7 +1,7 @@
 <script lang="ts">
   /**
-   * CommandBar - Fabric Component
-   * 
+   * AppHeaderBar — Fabric application header.
+   *
    * Application header with vault selection and shortcuts.
    * Decoupled from shell stores - uses props/callbacks for all state.
    * 
@@ -36,18 +36,18 @@
   .command-bar {
     display: flex;
     align-items: center;
-    height: 40px;
-    padding: 0 12px;
+    height: 2.5rem;
+    padding: 0 var(--space-3);
     background: var(--color-bg-canvas);
-    border-top: 2px solid var(--border-default);
-    border-bottom: 2px solid var(--border-default);
+    border-top: var(--border-width-default) solid var(--border-default);
+    border-bottom: var(--border-width-default) solid var(--border-default);
     gap: var(--space-3);
   }
 
   .app-name {
     font-weight: 600;
     color: var(--color-text-primary);
-    font-size: 14px;
+    font-size: var(--text-sm);
     font-family: var(--font-mono);
     letter-spacing: 0.05em;
   }
@@ -58,12 +58,12 @@
 
   .cmd-btn {
     background: transparent;
-    border: 2px solid var(--border-subtle);
+    border: var(--border-width-default) solid var(--border-subtle);
     border-radius: 0; /* Military sharp edges */
     color: var(--color-text-secondary);
     cursor: pointer;
-    font-size: 13px;
-    padding: 4px 8px;
+    font-size: 0.8125rem;
+    padding: var(--space-1) var(--space-2);
     transition: border-color 0.15s, color 0.15s, background 0.15s;
     font-family: var(--font-mono);
     text-transform: uppercase;
@@ -78,11 +78,11 @@
   }
 
   .mode-label {
-    font-size: 12px;
+    font-size: var(--text-xs);
     color: var(--color-text-tertiary);
-    padding: 2px 8px;
+    padding: var(--space-05) var(--space-2);
     background: var(--color-bg-panel);
-    border: 2px solid var(--border-subtle);
+    border: var(--border-width-default) solid var(--border-subtle);
     border-radius: 0;
     font-family: var(--font-mono);
     text-transform: uppercase;

package/dist/fabric/input/{CommandBar.svelte.d.ts → AppHeaderBar.svelte.d.ts}

@@ -1,5 +1,5 @@
 /**
- * CommandBar - Fabric Component
+ * AppHeaderBar — Fabric application header.
  *
  * Application header with vault selection and shortcuts.
  * Decoupled from shell stores - uses props/callbacks for all state.
@@ -17,7 +17,7 @@ export interface Props {
     /** Callback when keybind settings clicked */
     onopenkeybindsettings?: () => void;
 }
-declare const CommandBar: import("svelte").Component<Props, {}, "">;
-type CommandBar = ReturnType<typeof CommandBar>;
-export default CommandBar;
-//# sourceMappingURL=CommandBar.svelte.d.ts.map
+declare const AppHeaderBar: import("svelte").Component<Props, {}, "">;
+type AppHeaderBar = ReturnType<typeof AppHeaderBar>;
+export default AppHeaderBar;
+//# sourceMappingURL=AppHeaderBar.svelte.d.ts.map

package/dist/fabric/input/AppHeaderBar.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppHeaderBar.svelte.d.ts","sourceRoot":"","sources":["../../../src/fabric/input/AppHeaderBar.svelte.ts"],"names":[],"mappings":"AAGE;;;;;;;;GAQG;AACH,MAAM,WAAW,KAAK;IACpB,0BAA0B;IAC1B,OAAO,EAAE,MAAM,CAAC;IAChB,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,6CAA6C;IAC7C,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;CACpC;AAoBH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/fabric/input/{CommandBar.test.js → AppHeaderBar.test.js}

@@ -1,27 +1,27 @@
 import { afterEach, describe, it, expect, vi } from 'vitest';
 import { cleanup, render, fireEvent } from '@testing-library/svelte';
-import CommandBar from './CommandBar.svelte';
-describe('CommandBar', () => {
+import AppHeaderBar from './AppHeaderBar.svelte';
+describe('AppHeaderBar', () => {
     afterEach(() => cleanup());
     it('renders the app name', () => {
-        const { container } = render(CommandBar, { appName: 'TEST_APP' });
+        const { container } = render(AppHeaderBar, { appName: 'TEST_APP' });
         expect(container.querySelector('.app-name')?.textContent).toBe('TEST_APP');
     });
     it('renders SELECT VAULT button', () => {
-        const { container } = render(CommandBar, { appName: 'TEST_APP' });
+        const { container } = render(AppHeaderBar, { appName: 'TEST_APP' });
         const buttons = container.querySelectorAll('button');
         const found = Array.from(buttons).some(b => b.textContent?.trim() === 'SELECT VAULT');
         expect(found).toBe(true);
     });
     it('renders SHORTCUTS button', () => {
-        const { container } = render(CommandBar, { appName: 'TEST_APP' });
+        const { container } = render(AppHeaderBar, { appName: 'TEST_APP' });
         const buttons = container.querySelectorAll('button');
         const found = Array.from(buttons).some(b => b.textContent?.trim() === 'SHORTCUTS');
         expect(found).toBe(true);
     });
     it('calls onselectvault when SELECT VAULT is clicked', async () => {
         const handler = vi.fn();
-        const { container } = render(CommandBar, { appName: 'TEST_APP', onselectvault: handler });
+        const { container } = render(AppHeaderBar, { appName: 'TEST_APP', onselectvault: handler });
         const buttons = Array.from(container.querySelectorAll('button'));
         const btn = buttons.find(b => b.textContent?.trim() === 'SELECT VAULT');
         await fireEvent.click(btn);
@@ -29,18 +29,18 @@ describe('CommandBar', () => {
     });
     it('calls onopenkeybindsettings when SHORTCUTS is clicked', async () => {
         const handler = vi.fn();
-        const { container } = render(CommandBar, { appName: 'TEST_APP', onopenkeybindsettings: handler });
+        const { container } = render(AppHeaderBar, { appName: 'TEST_APP', onopenkeybindsettings: handler });
         const buttons = Array.from(container.querySelectorAll('button'));
         const btn = buttons.find(b => b.textContent?.trim() === 'SHORTCUTS');
         await fireEvent.click(btn);
         expect(handler).toHaveBeenCalledTimes(1);
     });
     it('renders mode label (uppercased) when modeLabel is provided', () => {
-        const { container } = render(CommandBar, { appName: 'TEST_APP', modeLabel: 'edit' });
+        const { container } = render(AppHeaderBar, { appName: 'TEST_APP', modeLabel: 'edit' });
         expect(container.querySelector('.mode-label')?.textContent).toBe('EDIT');
     });
     it('does NOT render mode label when modeLabel is not provided', () => {
-        const { container } = render(CommandBar, { appName: 'TEST_APP' });
+        const { container } = render(AppHeaderBar, { appName: 'TEST_APP' });
         expect(container.querySelector('.mode-label')).toBeNull();
     });
 });