@stephen-netu/design-system 0.2.0 → 0.2.2

package/dist/fabric/ai/ChatPanel.svelte

@@ -265,8 +265,8 @@
     display: flex;
     flex-direction: column;
     height: 100%;
-    background: var(--bg-panel, #1a1a1a);
-    color: var(--text-primary, #e0e0e0);
+    background: var(--color-bg-panel, #1a1a1a);
+    color: var(--color-text-primary, #e0e0e0);
   }
 
   .chat-header {
@@ -275,14 +275,14 @@
     justify-content: space-between;
     padding: 12px 16px;
     border-bottom: 1px solid var(--border-subtle, #2a2a2a);
-    background: var(--bg-panel, #1a1a1a);
+    background: var(--color-bg-panel, #1a1a1a);
   }
 
   .chat-title {
     font-size: 14px;
     font-weight: 600;
     margin: 0;
-    color: var(--text-primary, #e0e0e0);
+    color: var(--color-text-primary, #e0e0e0);
   }
 
   .clear-btn {
@@ -293,7 +293,7 @@
     background: transparent;
     border: none;
     border-radius: var(--radius-sm, 4px);
-    color: var(--text-tertiary, #6b6b6b);
+    color: var(--color-text-tertiary, #6b6b6b);
     cursor: pointer;
     transition: all 0.15s ease;
   }
@@ -329,13 +329,13 @@
 
   .empty-text {
     font-size: 14px;
-    color: var(--text-secondary, #a0a0a0);
+    color: var(--color-text-secondary, #a0a0a0);
     margin: 0 0 4px 0;
   }
 
   .empty-hint {
     font-size: 12px;
-    color: var(--text-tertiary, #6b6b6b);
+    color: var(--color-text-tertiary, #6b6b6b);
     margin: 0;
   }
 
@@ -360,14 +360,14 @@
   }
 
   .message.user .message-bubble {
-    background: var(--accent-primary, var(--color-accent));
+    background: var(--color-accent);
     color: white;
     border-bottom-right-radius: 4px;
   }
 
   .message.assistant .message-bubble {
-    background: var(--bg-panel-elevated, #252525);
-    color: var(--text-primary, #e0e0e0);
+    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;
   }
@@ -413,7 +413,7 @@
     display: inline-block;
     width: 2px;
     height: 1em;
-    background: var(--accent-primary, var(--color-accent));
+    background: var(--color-accent);
     margin-left: 2px;
     animation: blink 1s infinite;
     vertical-align: middle;
@@ -438,10 +438,10 @@
     align-items: center;
     gap: var(--space-1);
     padding: 4px 8px;
-    background: var(--accent-subtle, var(--color-accent-muted));
-    border: 1px solid var(--accent-primary, var(--color-accent));
+    background: var(--color-accent-subtle);
+    border: 1px solid var(--color-accent);
     border-radius: var(--radius-xl, 12px);
-    color: var(--accent-primary, var(--color-accent));
+    color: var(--color-accent);
     font-size: 11px;
     cursor: pointer;
     transition: all 0.15s ease;
@@ -449,7 +449,7 @@
   }
 
   .citation-chip:hover {
-    background: var(--accent-primary, var(--color-accent));
+    background: var(--color-accent);
     color: white;
   }
 
@@ -472,9 +472,9 @@
     transform: translateX(-50%);
     width: 220px;
     padding: 10px 12px;
-    background: var(--bg-panel-elevated, #252525);
+    background: var(--color-bg-panel-elevated, #252525);
     border: 1px solid var(--border-subtle, #2a2a2a);
-    border-left: 3px solid var(--accent-primary, var(--color-accent));
+    border-left: 3px solid var(--color-accent);
     border-radius: var(--radius-md, 6px);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
     z-index: 10;
@@ -495,13 +495,13 @@
     margin: 0 0 6px 0;
     font-size: 11px;
     line-height: 1.5;
-    color: var(--text-primary, #e0e0e0);
+    color: var(--color-text-primary, #e0e0e0);
     font-family: var(--font-mono, 'JetBrains Mono', monospace);
   }
 
   .citation-popover-source {
     font-size: 10px;
-    color: var(--text-tertiary, #6b6b6b);
+    color: var(--color-text-tertiary, #6b6b6b);
     font-style: italic;
   }
 
@@ -518,7 +518,7 @@
   .input-container {
     padding: 12px 16px;
     border-top: 1px solid var(--border-subtle, #2a2a2a);
-    background: var(--bg-panel, #1a1a1a);
+    background: var(--color-bg-panel, #1a1a1a);
   }
 
   .input-wrapper {
@@ -530,21 +530,21 @@
   .chat-input {
     flex: 1;
     padding: 10px 14px;
-    background: var(--bg-panel-elevated, #252525);
+    background: var(--color-bg-panel-elevated, #252525);
     border: 1px solid var(--border-subtle, #2a2a2a);
     border-radius: var(--radius-xl, 20px);
-    color: var(--text-primary, #e0e0e0);
+    color: var(--color-text-primary, #e0e0e0);
     font-size: 13px;
     outline: none;
     transition: border-color 0.15s ease;
   }
 
   .chat-input:focus {
-    border-color: var(--accent-primary, var(--color-accent));
+    border-color: var(--color-accent);
   }
 
   .chat-input::placeholder {
-    color: var(--text-tertiary, #6b6b6b);
+    color: var(--color-text-tertiary, #6b6b6b);
   }
 
   .chat-input:disabled {
@@ -559,7 +559,7 @@
     width: 36px;
     height: 36px;
     padding: 0;
-    background: var(--accent-primary, var(--color-accent));
+    background: var(--color-accent);
     border: none;
     border-radius: 50%;
     color: white;
@@ -569,7 +569,7 @@
   }
 
   .send-btn:hover:not(:disabled) {
-    background: var(--accent-hover, #c9894f);
+    background: var(--color-accent-hover, #c9894f);
     transform: scale(1.05);
   }
 
@@ -584,7 +584,7 @@
     align-items: center;
     justify-content: space-between;
     padding: 8px 12px;
-    background: var(--accent-subtle, var(--color-accent-subtle));
+    background: var(--color-accent-subtle, var(--color-accent-subtle));
     border-bottom: 1px solid var(--border-focus, var(--color-accent-muted));
     gap: var(--space-2);
   }
@@ -593,7 +593,7 @@
     display: flex;
     align-items: center;
     gap: var(--space-15);
-    color: var(--accent-primary, var(--color-accent));
+    color: var(--color-accent);
     font-size: 12px;
     font-weight: 500;
     white-space: nowrap;
@@ -617,10 +617,10 @@
   .context-chip {
     font-size: 11px;
     padding: 2px 8px;
-    background: var(--bg-panel-elevated, #252525);
+    background: var(--color-bg-panel-elevated, #252525);
     border: 1px solid var(--border-subtle, #2a2a2a);
     border-radius: var(--radius-lg, 10px);
-    color: var(--text-secondary, #a0a0a0);
+    color: var(--color-text-secondary, #a0a0a0);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -635,7 +635,7 @@
     background: transparent;
     border: none;
     border-radius: var(--radius-sm, 4px);
-    color: var(--text-tertiary, #6b6b6b);
+    color: var(--color-text-tertiary, #6b6b6b);
     cursor: pointer;
     transition: all 0.15s ease;
     flex-shrink: 0;

package/dist/fabric/ai/ResearchPanel.svelte

@@ -261,7 +261,9 @@
               >
                 {entry.title}
               </a>
-              <ExternalLink class="external-icon" size={12} />
+               <span class="external-icon">
+                 <ExternalLink size={12} />
+               </span>
             </div>
             <p class="result-snippet">{entry.snippet}</p>
             <div class="result-footer">
@@ -437,6 +439,7 @@
     margin: 0 0 8px;
     display: -webkit-box;
     -webkit-line-clamp: 2;
+    line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
   }
@@ -490,9 +493,9 @@
     gap: var(--space-15);
     padding: 6px 16px;
     background: none;
-    border: 1px solid var(--color-danger, #e53935);
+    border: 1px solid var(--color-error, #e53935);
     border-radius: var(--radius-sm, 0.25rem);
-    color: var(--color-danger, #e53935);
+    color: var(--color-error, #e53935);
     font-size: 12px;
     cursor: pointer;
   }

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

@@ -1 +1 @@
-{"version":3,"file":"ResearchPanel.svelte.d.ts","sourceRoot":"","sources":["../../../src/fabric/ai/ResearchPanel.svelte.ts"],"names":[],"mappings":"AAeE,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;IACrB,gBAAgB,EAAE,MAAM,CAAC;IACzB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;CACpB;AAED,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,aAAa,EAAE,CAAC;IACzB,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,gBAAgB,EAAE,MAAM,CAAC;IACzB,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAKD,UAAU,KAAK;IAEb,OAAO,EAAE,mBAAmB,GAAG,IAAI,CAAC;IACpC,QAAQ,EAAE,oBAAoB,GAAG,IAAI,CAAC;IACtC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IAGvB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACzE,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAChG,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,OAAO,EAAE,MAAM,IAAI,CAAC;IAGpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAuNH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"ResearchPanel.svelte.d.ts","sourceRoot":"","sources":["../../../src/fabric/ai/ResearchPanel.svelte.ts"],"names":[],"mappings":"AAeE,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;IACrB,gBAAgB,EAAE,MAAM,CAAC;IACzB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;CACpB;AAED,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,aAAa,EAAE,CAAC;IACzB,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,gBAAgB,EAAE,MAAM,CAAC;IACzB,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAKD,UAAU,KAAK;IAEb,OAAO,EAAE,mBAAmB,GAAG,IAAI,CAAC;IACpC,QAAQ,EAAE,oBAAoB,GAAG,IAAI,CAAC;IACtC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IAGvB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACzE,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAChG,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,OAAO,EAAE,MAAM,IAAI,CAAC;IAGpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAyNH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/fabric/index.d.ts

@@ -5,21 +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';
  */
 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 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,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,18 @@
  * 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';
 // 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();
     });
 });

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

@@ -6,8 +6,8 @@
  * @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 AppHeaderBar } from './AppHeaderBar.svelte';
+export type { Props as AppHeaderBarProps } from './AppHeaderBar.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

@@ -1 +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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fabric/input/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,YAAY,EAAE,KAAK,IAAI,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AACxE,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

@@ -6,5 +6,5 @@
  * @package @kos/design-system/fabric/input
  * @adr 2026-04-12-leap-substrate-refactor-001
  */
-export { default as CommandBar } from './CommandBar.svelte';
+export { default as AppHeaderBar } from './AppHeaderBar.svelte';
 export { default as KeyboardShortcuts } from './KeyboardShortcuts.svelte';

package/dist/fabric/layout/KanbanBoard.svelte

@@ -1,158 +1,28 @@
 <script lang="ts">
-  /**
-   * KanbanBoard - Fabric Component
-   * 
-   * Multi-column kanban board with drag-drop support.
-   * Decoupled from shell stores - uses props/callbacks for all state.
-   * 
-   * @package @kos/design-system/fabric/layout
-   * @adr 2026-04-12-leap-substrate-refactor-001
-   */
-  import type { ColumnData } from './KanbanColumn.svelte';
-  import type { CardData } from './KanbanCard.svelte';
-
-  interface ColumnState {
-    column: ColumnData;
-    cards: CardData[];
-    isDropTarget?: boolean;
-    isCollapsed?: boolean;
-  }
-
-  export interface Props {
-    columns: ColumnState[];
-    onCardMove?: (cardId: string, sourceColumnId: string, targetColumnId: string) => void;
-    onCardClick?: (card: CardData) => void;
-    onAddCard?: (columnId: string) => void;
-    onAddColumn?: () => void;
-    onColumnMenuClick?: (columnId: string) => void;
-    title?: string;
-  }
-
-  let { columns, onCardMove, onCardClick, onAddCard, onAddColumn, onColumnMenuClick, title }: Props = $props();
-
-  let draggedCardId = $state<string | null>(null);
-  let activeDropColumn = $state<string | null>(null);
-
-  function handleCardDragStart(card: CardData) {
-    draggedCardId = card.id;
-  }
-
-  function handleCardDragEnd() {
-    draggedCardId = null;
-    activeDropColumn = null;
-  }
-
-  function handleDragOver(columnId: string) {
-    if (draggedCardId && columnId !== activeDropColumn) {
-      activeDropColumn = columnId;
-    }
-  }
-
-  function handleDragLeave(columnId: string) {
-    if (activeDropColumn === columnId) {
-      activeDropColumn = null;
-    }
-  }
-
-  function handleDrop(targetColumnId: string, cardId: string) {
-    if (!draggedCardId) return;
-
-    const sourceColumn = columns.find(c => 
-      c.cards.some(card => card.id === cardId)
-    );
-    
-    if (sourceColumn && sourceColumn.column.id !== targetColumnId) {
-      onCardMove?.(cardId, sourceColumn.column.id, targetColumnId);
-    }
-
-    draggedCardId = null;
-    activeDropColumn = null;
-  }
+  import KanbanBoard from '../../l0-layout/kanban/KanbanBoard.svelte';
+  import type { Props } from '../../l0-layout/kanban/KanbanBoard.svelte';
+
+  let {
+    columns,
+    onCardMove,
+    onCardClick,
+    onAddCard,
+    onAddColumn,
+    onColumnMenuClick,
+    title,
+    header,
+    class: className = '',
+  }: Props = $props();
 </script>
 
-{#await import('./KanbanColumn.svelte') then { default: KanbanColumn }}
-  <div class="kanban-board" role="region" aria-label="{title || 'Kanban board'}">
-    {#if title}
-      <header class="board-header">
-        <h2 class="board-title">{title}</h2>
-        <button 
-          class="add-column-btn"
-          onclick={() => onAddColumn?.()}
-        >
-          + Add Column
-        </button>
-      </header>
-    {/if}
-
-    <div class="board-content" role="list">
-      {#each columns as columnState (columnState.column.id)}
-        <KanbanColumn
-          column={columnState.column}
-          cards={columnState.cards}
-          isDropTarget={activeDropColumn === columnState.column.id}
-          isCollapsed={columnState.isCollapsed}
-          onCardClick={onCardClick}
-          onCardDragStart={handleCardDragStart}
-          onCardDragEnd={handleCardDragEnd}
-          onDrop={handleDrop}
-          onDragOver={handleDragOver}
-          onDragLeave={handleDragLeave}
-          onAddCard={onAddCard}
-          onMenuClick={onColumnMenuClick}
-        />
-      {/each}
-    </div>
-  </div>
-{/await}
-
-<style>
-  .kanban-board {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    overflow: hidden;
-    background: var(--color-bg-root, #111111);
-  }
-
-  .board-header {
-    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));
-    flex-shrink: 0;
-  }
-
-  .board-title {
-    font-size: 18px;
-    font-weight: 600;
-    color: var(--color-text-primary, #f2efe9);
-    margin: 0;
-  }
-
-  .add-column-btn {
-    padding: 8px 16px;
-    background: transparent;
-    border: 1px solid var(--border-default, #333333);
-    border-radius: var(--radius-md, 0.375rem);
-    color: var(--color-text-secondary, #a09880);
-    font-size: 13px;
-    cursor: pointer;
-    transition: border-color 0.15s, color 0.15s;
-  }
-
-  .add-column-btn:hover {
-    border-color: var(--color-accent, var(--color-accent));
-    color: var(--color-accent, var(--color-accent));
-  }
-
-  .board-content {
-    display: flex;
-    gap: var(--space-4);
-    padding: 16px 20px;
-    overflow-x: auto;
-    overflow-y: hidden;
-    flex: 1;
-    align-items: flex-start;
-  }
-</style>
+<KanbanBoard
+  {columns}
+  {onCardMove}
+  {onCardClick}
+  {onAddCard}
+  {onAddColumn}
+  {onColumnMenuClick}
+  {title}
+  {header}
+  class={className}
+/>