@stephen-netu/design-system 0.1.0 → 0.2.1

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fabric/feedback/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,YAAY,EAAE,KAAK,IAAI,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC5E,YAAY,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEzD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,YAAY,EAAE,KAAK,IAAI,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAClE,YAAY,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/fabric/feedback/index.js

@@ -0,0 +1,10 @@
+/**
+ * Fabric Feedback Components
+ *
+ * Toast notifications and status indicators.
+ *
+ * @package @kos/design-system/fabric/feedback
+ * @adr 2026-04-12-leap-substrate-refactor-001
+ */
+export { default as ToastContainer } from './ToastContainer.svelte';
+export { default as StatusBar } from './StatusBar.svelte';

package/{src/fabric/index.ts → dist/fabric/index.d.ts}

@@ -1,37 +1,28 @@
 /**
  * KOS Design System - Fabric Layer
- * 
+ *
  * Composable UI components for LEAP apps.
  * 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 { 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';
  */
-
-// Layout
-export { GlassBox, KanbanBoard, KanbanColumn, KanbanCard } from './layout';
-export type { CardData, ColumnData } from './layout';
-
-// Navigation
+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';
-
-// Data
-export { FileTree } from './data';
 export type { FileEntry } from './data';
-
-// Input
 export { CommandBar, KeyboardShortcuts } from './input';
 export type { ShortcutBinding, ShortcutGroup } from './input';
-
-// AI
-export { ChatPanel } from './ai';
+export type { CommandBarProps } from './input';
+export { ChatPanel, ResearchPanel } from './ai';
 export type { Message, Citation, ContextCard } from './ai';
-
-// Feedback
 export { ToastContainer, StatusBar } from './feedback';
 export type { ToastType, ViewMode, ConnectionState } from './feedback';
+export type { ToastContainerProps, StatusBarProps } from './feedback';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}

package/dist/fabric/index.js

@@ -0,0 +1,23 @@
+/**
+ * KOS Design System - Fabric Layer
+ *
+ * Composable UI components for LEAP apps.
+ * 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 { 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';
+ */
+// Layout
+export { GlassBox, KanbanBoard, KanbanColumn, KanbanCard, CollapsiblePanel } from './layout';
+// Navigation
+export { ActivityRail } from './navigation';
+// Input
+export { CommandBar, KeyboardShortcuts } from './input';
+// AI
+export { ChatPanel, ResearchPanel } from './ai';
+// Feedback
+export { ToastContainer, StatusBar } from './feedback';

package/dist/fabric/input/CommandBar.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+  /**
+   * CommandBar - Fabric Component
+   * 
+   * Application header with vault selection and shortcuts.
+   * Decoupled from shell stores - uses props/callbacks for all state.
+   * 
+   * @package @kos/design-system/fabric/input
+   * @adr 2026-04-12-leap-substrate-refactor-001
+   */
+  export interface Props {
+    /** App name to display */
+    appName: string;
+    /** Current mode/view label */
+    modeLabel?: string;
+    /** Callback when vault selector clicked */
+    onselectvault?: () => void;
+    /** Callback when keybind settings clicked */
+    onopenkeybindsettings?: () => void;
+  }
+
+  let { appName, modeLabel, onselectvault, onopenkeybindsettings }: Props = $props();
+</script>
+
+<header class="command-bar scanlines">
+  <span class="app-name">{appName}</span>
+  <div class="spacer"></div>
+  <button class="cmd-btn" onclick={onselectvault}>SELECT VAULT</button>
+  <button class="cmd-btn" onclick={onopenkeybindsettings}>SHORTCUTS</button>
+  {#if modeLabel}
+    <span class="mode-label">{modeLabel.toUpperCase()}</span>
+  {/if}
+</header>
+
+<style>
+  .command-bar {
+    display: flex;
+    align-items: center;
+    height: 40px;
+    padding: 0 12px;
+    background: var(--color-bg-canvas);
+    border-top: 2px solid var(--border-default);
+    border-bottom: 2px solid var(--border-default);
+    gap: var(--space-3);
+  }
+
+  .app-name {
+    font-weight: 600;
+    color: var(--color-text-primary);
+    font-size: 14px;
+    font-family: var(--font-mono);
+    letter-spacing: 0.05em;
+  }
+
+  .spacer {
+    flex: 1;
+  }
+
+  .cmd-btn {
+    background: transparent;
+    border: 2px solid var(--border-subtle);
+    border-radius: 0; /* Military sharp edges */
+    color: var(--color-text-secondary);
+    cursor: pointer;
+    font-size: 13px;
+    padding: 4px 8px;
+    transition: border-color 0.15s, color 0.15s, background 0.15s;
+    font-family: var(--font-mono);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    font-weight: 500;
+  }
+
+  .cmd-btn:hover {
+    color: var(--color-text-primary);
+    background: var(--color-bg-panel);
+    border-color: var(--border-hover);
+  }
+
+  .mode-label {
+    font-size: 12px;
+    color: var(--color-text-tertiary);
+    padding: 2px 8px;
+    background: var(--color-bg-panel);
+    border: 2px solid var(--border-subtle);
+    border-radius: 0;
+    font-family: var(--font-mono);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    font-weight: 500;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .command-bar { transition: none; }
+  }
+</style>

package/dist/fabric/input/CommandBar.svelte.d.ts

@@ -0,0 +1,23 @@
+/**
+ * CommandBar - Fabric Component
+ *
+ * Application header with vault selection and shortcuts.
+ * Decoupled from shell stores - uses props/callbacks for all state.
+ *
+ * @package @kos/design-system/fabric/input
+ * @adr 2026-04-12-leap-substrate-refactor-001
+ */
+export interface Props {
+    /** App name to display */
+    appName: string;
+    /** Current mode/view label */
+    modeLabel?: string;
+    /** Callback when vault selector clicked */
+    onselectvault?: () => void;
+    /** 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

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

@@ -0,0 +1 @@
+{"version":3,"file":"CommandBar.svelte.d.ts","sourceRoot":"","sources":["../../../src/fabric/input/CommandBar.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,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/fabric/input/CommandBar.test.js

@@ -0,0 +1,46 @@
+import { afterEach, describe, it, expect, vi } from 'vitest';
+import { cleanup, render, fireEvent } from '@testing-library/svelte';
+import CommandBar from './CommandBar.svelte';
+describe('CommandBar', () => {
+    afterEach(() => cleanup());
+    it('renders the app name', () => {
+        const { container } = render(CommandBar, { 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 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 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 buttons = Array.from(container.querySelectorAll('button'));
+        const btn = buttons.find(b => b.textContent?.trim() === 'SELECT VAULT');
+        await fireEvent.click(btn);
+        expect(handler).toHaveBeenCalledTimes(1);
+    });
+    it('calls onopenkeybindsettings when SHORTCUTS is clicked', async () => {
+        const handler = vi.fn();
+        const { container } = render(CommandBar, { 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' });
+        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' });
+        expect(container.querySelector('.mode-label')).toBeNull();
+    });
+});

package/{src → dist}/fabric/input/KeyboardShortcuts.svelte

@@ -31,23 +31,22 @@
     title?: string;
   }
 
-  const props: Props = $props();
+  let { groups, isOpen, onClose, onShortcutClick, searchable, title }: Props = $props();
 
   let searchQuery = $state('');
   let searchInput: HTMLInputElement | null = $state(null);
 
-  // Focus search when opened
   $effect(() => {
-    if (props.isOpen && props.searchable && searchInput) {
+    if (isOpen && searchable && searchInput) {
       searchInput.focus();
     }
   });
 
   const filteredGroups = $derived(() => {
-    if (!props.searchable || !searchQuery.trim()) return props.groups;
+    if (!searchable || !searchQuery.trim()) return groups;
 
     const query = searchQuery.toLowerCase();
-    return props.groups
+    return groups
       .map(group => ({
         ...group,
         shortcuts: group.shortcuts.filter(s =>
@@ -79,25 +78,25 @@
 
   function handleKeydown(e: KeyboardEvent) {
     // Close on Escape
-    if (e.key === 'Escape' && props.isOpen) {
-      props.onClose();
+    if (e.key === 'Escape' && isOpen) {
+      onClose();
     }
   }
 </script>
 
 <svelte:window onkeydown={handleKeydown} />
 
-{#if props.isOpen}
-  <div class="shortcuts-overlay" role="dialog" aria-modal="true" aria-label={props.title || 'Keyboard shortcuts'}>
+{#if isOpen}
+  <div class="shortcuts-overlay" role="dialog" aria-modal="true" aria-label={title || 'Keyboard shortcuts'}>
     <div class="shortcuts-panel">
       <header class="panel-header">
-        <h2 class="panel-title">{props.title || 'Keyboard shortcuts'}</h2>
-        <button class="close-btn" onclick={props.onClose} aria-label="Close">
+        <h2 class="panel-title">{title || 'Keyboard shortcuts'}</h2>
+        <button class="close-btn" onclick={onClose} aria-label="Close">
           <X size={18} />
         </button>
       </header>
 
-      {#if props.searchable}
+      {#if searchable}
         <div class="search-box">
           <Command size={14} />
           <input
@@ -124,7 +123,7 @@
                 <li class="shortcut-item" role="listitem">
                   <button
                     class="shortcut-btn"
-                    onclick={() => props.onShortcutClick?.(shortcut)}
+                    onclick={() => onShortcutClick?.(shortcut)}
                     title={shortcut.scope ? `Scope: ${shortcut.scope}` : undefined}
                   >
                     <span class="shortcut-keys">
@@ -218,7 +217,7 @@
   .search-box {
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: var(--space-2);
     padding: 12px 20px;
     border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
     color: var(--color-text-tertiary, #706858);
@@ -278,7 +277,7 @@
     padding: 0;
     display: flex;
     flex-direction: column;
-    gap: 4px;
+    gap: var(--space-1);
   }
 
   .shortcut-item {
@@ -289,7 +288,7 @@
     width: 100%;
     display: flex;
     align-items: center;
-    gap: 16px;
+    gap: var(--space-4);
     padding: 10px 12px;
     background: none;
     border: 1px solid transparent;
@@ -307,7 +306,7 @@
   .shortcut-keys {
     display: flex;
     align-items: center;
-    gap: 4px;
+    gap: var(--space-1);
     min-width: 100px;
   }
 
@@ -350,7 +349,7 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    gap: 12px;
+    gap: var(--space-3);
     padding: 40px;
     color: var(--color-text-tertiary, #706858);
   }

package/dist/fabric/input/KeyboardShortcuts.svelte.d.ts

@@ -0,0 +1,22 @@
+export interface ShortcutBinding {
+    key: string;
+    modifiers?: ('ctrl' | 'alt' | 'shift' | 'meta')[];
+    description: string;
+    scope?: string;
+}
+export interface ShortcutGroup {
+    name: string;
+    shortcuts: ShortcutBinding[];
+}
+interface Props {
+    groups: ShortcutGroup[];
+    isOpen: boolean;
+    onClose: () => void;
+    onShortcutClick?: (shortcut: ShortcutBinding) => void;
+    searchable?: boolean;
+    title?: string;
+}
+declare const KeyboardShortcuts: import("svelte").Component<Props, {}, "">;
+type KeyboardShortcuts = ReturnType<typeof KeyboardShortcuts>;
+export default KeyboardShortcuts;
+//# sourceMappingURL=KeyboardShortcuts.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"KeyboardShortcuts.svelte.d.ts","sourceRoot":"","sources":["../../../src/fabric/input/KeyboardShortcuts.svelte.ts"],"names":[],"mappings":"AAeE,MAAM,WAAW,eAAe;IAC9B,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,CAAC,MAAM,GAAG,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC,EAAE,CAAC;IAClD,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,eAAe,EAAE,CAAC;CAC9B;AAED,UAAU,KAAK;IACb,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,eAAe,CAAC,EAAE,CAAC,QAAQ,EAAE,eAAe,KAAK,IAAI,CAAC;IACtD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAiIH,QAAA,MAAM,iBAAiB,2CAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/fabric/input/KeyboardShortcuts.test.js

@@ -0,0 +1,89 @@
+import { afterEach, describe, it, expect, vi } from 'vitest';
+import { cleanup, render, fireEvent } from '@testing-library/svelte';
+import KeyboardShortcuts from './KeyboardShortcuts.svelte';
+const baseGroups = [
+    {
+        name: 'General',
+        shortcuts: [
+            { key: 'k', modifiers: ['ctrl'], description: 'Open command bar' },
+            { key: 'n', modifiers: ['ctrl', 'shift'], description: 'New note', scope: 'global' },
+        ],
+    },
+    {
+        name: 'Navigation',
+        shortcuts: [
+            { key: 'Escape', description: 'Close dialog' },
+        ],
+    },
+];
+const baseProps = {
+    groups: baseGroups,
+    isOpen: true,
+    onClose: vi.fn(),
+};
+describe('KeyboardShortcuts', () => {
+    afterEach(() => cleanup());
+    it('renders the overlay and panel when isOpen is true', () => {
+        const { container } = render(KeyboardShortcuts, { props: baseProps });
+        expect(container.querySelector('.shortcuts-overlay')).toBeTruthy();
+        expect(container.querySelector('.shortcuts-panel')).toBeTruthy();
+    });
+    it('does not render when isOpen is false', () => {
+        const { container } = render(KeyboardShortcuts, { props: { ...baseProps, isOpen: false } });
+        expect(container.querySelector('.shortcuts-overlay')).toBeNull();
+    });
+    it('renders group titles and shortcut descriptions', () => {
+        const { container } = render(KeyboardShortcuts, { props: baseProps });
+        expect(container.querySelector('.group-title')?.textContent).toBe('General');
+        const items = container.querySelectorAll('.shortcut-item');
+        expect(items.length).toBe(3);
+    });
+    it('renders modifier keys with correct labels (Ctrl, Shift)', () => {
+        const { container } = render(KeyboardShortcuts, { props: baseProps });
+        const firstItemKeys = container.querySelectorAll('.shortcut-item')[0].querySelectorAll('.key');
+        expect(firstItemKeys[0].textContent).toBe('Ctrl');
+        expect(firstItemKeys[1].textContent).toBe('K');
+    });
+    it('renders multiple modifiers (Ctrl + Shift)', () => {
+        const { container } = render(KeyboardShortcuts, { props: baseProps });
+        const secondItemKeys = container.querySelectorAll('.shortcut-item')[1].querySelectorAll('.key');
+        expect(secondItemKeys.length).toBe(3);
+        expect(secondItemKeys[0].textContent).toBe('Ctrl');
+        expect(secondItemKeys[1].textContent).toBe('Shift');
+        expect(secondItemKeys[2].textContent).toBe('N');
+    });
+    it('renders scope badge when shortcut has a scope', () => {
+        const { container } = render(KeyboardShortcuts, { props: baseProps });
+        const scopeBadges = container.querySelectorAll('.shortcut-scope');
+        expect(scopeBadges.length).toBe(1);
+        expect(scopeBadges[0].textContent).toBe('global');
+    });
+    it('calls onClose when the close button is clicked', async () => {
+        const onClose = vi.fn();
+        const { container } = render(KeyboardShortcuts, { props: { ...baseProps, onClose } });
+        const closeBtn = container.querySelector('.close-btn');
+        await fireEvent.click(closeBtn);
+        expect(onClose).toHaveBeenCalledTimes(1);
+    });
+    it('calls onShortcutClick with the shortcut when a shortcut is clicked', async () => {
+        const onShortcutClick = vi.fn();
+        const { container } = render(KeyboardShortcuts, { props: { ...baseProps, onShortcutClick } });
+        const firstShortcutBtn = container.querySelector('.shortcut-btn');
+        await fireEvent.click(firstShortcutBtn);
+        expect(onShortcutClick).toHaveBeenCalledTimes(1);
+        expect(onShortcutClick).toHaveBeenCalledWith(baseGroups[0].shortcuts[0]);
+    });
+    it('renders custom title when provided', () => {
+        const { container } = render(KeyboardShortcuts, { props: { ...baseProps, title: 'My Shortcuts' } });
+        expect(container.querySelector('.panel-title')?.textContent).toBe('My Shortcuts');
+    });
+    it('renders search box when searchable is true', () => {
+        const { container } = render(KeyboardShortcuts, { props: { ...baseProps, searchable: true } });
+        expect(container.querySelector('.search-box')).toBeTruthy();
+        expect(container.querySelector('input[placeholder="Search shortcuts..."]')).toBeTruthy();
+    });
+    it('does not render search box when searchable is false', () => {
+        const { container } = render(KeyboardShortcuts, { props: { ...baseProps, searchable: false } });
+        expect(container.querySelector('.search-box')).toBeNull();
+    });
+});

package/{src/fabric/input/index.ts → dist/fabric/input/index.d.ts}

@@ -1,12 +1,13 @@
 /**
  * Fabric Input Components
- * 
+ *
  * Input patterns and command interfaces.
- * 
+ *
  * @package @kos/design-system/fabric/input
  * @adr 2026-04-12-leap-substrate-refactor-001
  */
-
 export { default as CommandBar } from './CommandBar.svelte';
+export type { Props as CommandBarProps } from './CommandBar.svelte';
 export { default as KeyboardShortcuts } from './KeyboardShortcuts.svelte';
 export type { ShortcutBinding, ShortcutGroup } from './KeyboardShortcuts.svelte';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fabric/input/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,YAAY,EAAE,KAAK,IAAI,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC1E,YAAY,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC"}

package/dist/fabric/input/index.js

@@ -0,0 +1,10 @@
+/**
+ * Fabric Input Components
+ *
+ * Input patterns and command interfaces.
+ *
+ * @package @kos/design-system/fabric/input
+ * @adr 2026-04-12-leap-substrate-refactor-001
+ */
+export { default as CommandBar } from './CommandBar.svelte';
+export { default as KeyboardShortcuts } from './KeyboardShortcuts.svelte';