@stephen-netu/design-system 0.1.0 → 0.2.0

package/{src → dist}/fabric/layout/KanbanBoard.svelte

@@ -18,7 +18,7 @@
     isCollapsed?: boolean;
   }
 
-  interface Props {
+  export interface Props {
     columns: ColumnState[];
     onCardMove?: (cardId: string, sourceColumnId: string, targetColumnId: string) => void;
     onCardClick?: (card: CardData) => void;
@@ -28,7 +28,7 @@
     title?: string;
   }
 
-  const props: Props = $props();
+  let { columns, onCardMove, onCardClick, onAddCard, onAddColumn, onColumnMenuClick, title }: Props = $props();
 
   let draggedCardId = $state<string | null>(null);
   let activeDropColumn = $state<string | null>(null);
@@ -57,12 +57,12 @@
   function handleDrop(targetColumnId: string, cardId: string) {
     if (!draggedCardId) return;
 
-    const sourceColumn = props.columns.find(c => 
+    const sourceColumn = columns.find(c => 
       c.cards.some(card => card.id === cardId)
     );
     
     if (sourceColumn && sourceColumn.column.id !== targetColumnId) {
-      props.onCardMove?.(cardId, sourceColumn.column.id, targetColumnId);
+      onCardMove?.(cardId, sourceColumn.column.id, targetColumnId);
     }
 
     draggedCardId = null;
@@ -71,13 +71,13 @@
 </script>
 
 {#await import('./KanbanColumn.svelte') then { default: KanbanColumn }}
-  <div class="kanban-board" role="region" aria-label="{props.title || 'Kanban board'}">
-    {#if props.title}
+  <div class="kanban-board" role="region" aria-label="{title || 'Kanban board'}">
+    {#if title}
       <header class="board-header">
-        <h2 class="board-title">{props.title}</h2>
+        <h2 class="board-title">{title}</h2>
         <button 
           class="add-column-btn"
-          onclick={() => props.onAddColumn?.()}
+          onclick={() => onAddColumn?.()}
         >
           + Add Column
         </button>
@@ -85,20 +85,20 @@
     {/if}
 
     <div class="board-content" role="list">
-      {#each props.columns as columnState (columnState.column.id)}
+      {#each columns as columnState (columnState.column.id)}
         <KanbanColumn
           column={columnState.column}
           cards={columnState.cards}
           isDropTarget={activeDropColumn === columnState.column.id}
           isCollapsed={columnState.isCollapsed}
-          onCardClick={props.onCardClick}
+          onCardClick={onCardClick}
           onCardDragStart={handleCardDragStart}
           onCardDragEnd={handleCardDragEnd}
           onDrop={handleDrop}
           onDragOver={handleDragOver}
           onDragLeave={handleDragLeave}
-          onAddCard={props.onAddCard}
-          onMenuClick={props.onColumnMenuClick}
+          onAddCard={onAddCard}
+          onMenuClick={onColumnMenuClick}
         />
       {/each}
     </div>
@@ -142,13 +142,13 @@
   }
 
   .add-column-btn:hover {
-    border-color: var(--color-accent, #b87333);
-    color: var(--color-accent, #b87333);
+    border-color: var(--color-accent, var(--color-accent));
+    color: var(--color-accent, var(--color-accent));
   }
 
   .board-content {
     display: flex;
-    gap: 16px;
+    gap: var(--space-4);
     padding: 16px 20px;
     overflow-x: auto;
     overflow-y: hidden;

package/dist/fabric/layout/KanbanBoard.svelte.d.ts

@@ -0,0 +1,30 @@
+/**
+   * 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;
+}
+declare const KanbanBoard: import("svelte").Component<Props, {}, "">;
+type KanbanBoard = ReturnType<typeof KanbanBoard>;
+export default KanbanBoard;
+//# sourceMappingURL=KanbanBoard.svelte.d.ts.map

package/dist/fabric/layout/KanbanBoard.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KanbanBoard.svelte.d.ts","sourceRoot":"","sources":["../../../src/fabric/layout/KanbanBoard.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;;;KAQK;AACL,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAGlD,UAAU,WAAW;IACnB,MAAM,EAAE,UAAU,CAAC;IACnB,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,KAAK;IACpB,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,KAAK,IAAI,CAAC;IACtF,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACvC,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,iBAAiB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAyEH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/fabric/layout/KanbanBoard.test.js

@@ -0,0 +1,25 @@
+import { afterEach, describe, it, expect } from 'vitest';
+import { cleanup, render } from '@testing-library/svelte';
+import KanbanBoard from './KanbanBoard.svelte';
+// This component uses `{#await import('./KanbanColumn.svelte')}` for lazy loading.
+// In tests the dynamic import doesn't resolve in jsdom, so we test what renders
+// synchronously: an error boundary slot. When that's absent the component renders
+// nothing until the promise resolves.
+describe('KanbanBoard', () => {
+    afterEach(() => cleanup());
+    it('exports a valid Svelte component', () => {
+        expect(KanbanBoard).toBeDefined();
+        expect(typeof KanbanBoard).toBe('function');
+    });
+    it('initializes draggedCardId and activeDropColumn state', async () => {
+        const { component } = render(KanbanBoard, {
+            props: {
+                columns: [
+                    { column: { id: 'c1', title: 'Backlog' }, cards: [{ id: 'card1', title: 'Task 1' }] },
+                ],
+            },
+        });
+        // Component mounted without crashing — even if {#await} hasn't resolved yet
+        expect(component).toBeDefined();
+    });
+});

package/{src → dist}/fabric/layout/KanbanCard.svelte

@@ -21,7 +21,7 @@
     metadata?: Record<string, unknown>;
   }
 
-  interface Props {
+  export interface Props {
     card: CardData;
     isDragging?: boolean;
     isSelected?: boolean;
@@ -31,7 +31,7 @@
     onDragEnd?: (card: CardData) => void;
   }
 
-  const props: Props = $props();
+  let { card, isDragging, isSelected, disabled, onClick, onDragStart, onDragEnd }: Props = $props();
 
   function priorityColor(p: string | undefined): string {
     switch (p) {
@@ -50,53 +50,53 @@
 
 <div
   class="kanban-card"
-  class:dragging={props.isDragging}
-  class:selected={props.isSelected}
-  class:disabled={props.disabled}
+  class:dragging={isDragging}
+  class:selected={isSelected}
+  class:disabled={disabled}
   role="button"
   tabindex="0"
-  aria-grabbed={props.isDragging}
-  onclick={() => props.onClick?.(props.card)}
-  onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') props.onClick?.(props.card); }}
-  ondragstart={() => props.onDragStart?.(props.card)}
-  ondragend={() => props.onDragEnd?.(props.card)}
-  draggable={!props.disabled}
+  aria-grabbed={isDragging}
+  onclick={() => onClick?.(card)}
+  onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') onClick?.(card); }}
+  ondragstart={() => onDragStart?.(card)}
+  ondragend={() => onDragEnd?.(card)}
+  draggable={!disabled}
 >
   <div class="card-header">
-    {#if props.card.priority}
+    {#if card.priority}
       <span 
         class="priority-indicator" 
-        style="background: {priorityColor(props.card.priority)}"
-        title="Priority: {props.card.priority}"
+        style="background: {priorityColor(card.priority)}"
+        title="Priority: {card.priority}"
       ></span>
     {/if}
-    <span class="card-title">{props.card.title}</span>
+    <span class="card-title">{card.title}</span>
     <GripVertical size={14} class="drag-handle" />
   </div>
 
-  {#if props.card.description}
-    <p class="card-description">{props.card.description}</p>
+  {#if card.description}
+    <p class="card-description">{card.description}</p>
   {/if}
 
   <div class="card-footer">
-    {#if props.card.tags && props.card.tags.length > 0}
+    {#if card.tags && card.tags.length > 0}
       <div class="tags">
-        {#each props.card.tags.slice(0, 3) as tag}
+        {#each card.tags.slice(0, 3) as tag}
           <span class="tag">
             <Tag size={10} />
             {tag}
           </span>
         {/each}
-        {#if props.card.tags.length > 3}
-          <span class="tag-more">+{props.card.tags.length - 3}</span>
+        {#if card.tags.length > 3}
+          <span class="tag-more">+{card.tags.length - 3}</span>
         {/if}
       </div>
     {/if}
 
-    {#if props.card.dueDate}
-      <span class="due-date" class:overdue={props.card.dueDate < new Date()}>
+    {#if card.dueDate}
+      <span class="due-date" class:overdue={card.dueDate < new Date()}>
         <Clock size={12} />
-        {formatDate(props.card.dueDate)}
+        {formatDate(card.dueDate)}
       </span>
     {/if}
   </div>
@@ -125,8 +125,8 @@
   }
 
   .kanban-card.selected {
-    border-color: var(--color-accent, #b87333);
-    box-shadow: 0 0 0 2px rgba(184, 115, 51, 0.2);
+    border-color: var(--color-accent, var(--color-accent));
+    box-shadow: 0 0 0 2px var(--color-accent-muted);
   }
 
   .kanban-card.disabled {
@@ -138,7 +138,7 @@
   .card-header {
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: var(--space-2);
     margin-bottom: 8px;
   }
 
@@ -186,13 +186,13 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: 8px;
+    gap: var(--space-2);
   }
 
   .tags {
     display: flex;
     align-items: center;
-    gap: 4px;
+    gap: var(--space-2);
     flex-wrap: wrap;
   }
 
@@ -215,7 +215,7 @@
   .due-date {
     display: inline-flex;
     align-items: center;
-    gap: 4px;
+    gap: var(--space-1);
     font-size: 11px;
     color: var(--color-text-tertiary, #706858);
   }

package/dist/fabric/layout/KanbanCard.svelte.d.ts

@@ -0,0 +1,23 @@
+export interface CardData {
+    id: string;
+    title: string;
+    description?: string;
+    priority?: 'low' | 'medium' | 'high';
+    tags?: string[];
+    dueDate?: Date;
+    assignee?: string;
+    metadata?: Record<string, unknown>;
+}
+export interface Props {
+    card: CardData;
+    isDragging?: boolean;
+    isSelected?: boolean;
+    disabled?: boolean;
+    onClick?: (card: CardData) => void;
+    onDragStart?: (card: CardData) => void;
+    onDragEnd?: (card: CardData) => void;
+}
+declare const KanbanCard: import("svelte").Component<Props, {}, "">;
+type KanbanCard = ReturnType<typeof KanbanCard>;
+export default KanbanCard;
+//# sourceMappingURL=KanbanCard.svelte.d.ts.map

package/dist/fabric/layout/KanbanCard.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KanbanCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/fabric/layout/KanbanCard.svelte.ts"],"names":[],"mappings":"AAeE,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;IACrC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACpC;AAED,MAAM,WAAW,KAAK;IACpB,IAAI,EAAE,QAAQ,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACnC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACvC,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;CACtC;AAiEH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/{src → dist}/fabric/layout/KanbanColumn.svelte

@@ -18,7 +18,7 @@
     limit?: number;
   }
 
-  interface Props {
+  export interface Props {
     column: ColumnData;
     cards: CardData[];
     isDropTarget?: boolean;
@@ -34,14 +34,14 @@
     onMenuClick?: (columnId: string) => void;
   }
 
-  const props: Props = $props();
+  let { column, cards, isDropTarget, isCollapsed, onCardClick, onCardDragStart, onCardDragEnd, onDrop, onDragOver, onDragLeave, onAddCard, onToggleCollapse, onMenuClick }: Props = $props();
 
   let dragCounter = $state(0);
 
   function handleDragOver(e: DragEvent) {
     e.preventDefault();
     if (e.dataTransfer) e.dataTransfer.dropEffect = 'move';
-    props.onDragOver?.(props.column.id);
+    onDragOver?.(column.id);
   }
 
   function handleDragEnter() {
@@ -51,7 +51,7 @@
   function handleDragLeave() {
     dragCounter--;
     if (dragCounter === 0) {
-      props.onDragLeave?.(props.column.id);
+      onDragLeave?.(column.id);
     }
   }
 
@@ -61,7 +61,7 @@
     
     const cardId = e.dataTransfer?.getData('application/kanban-card');
     if (cardId) {
-      props.onDrop?.(props.column.id, cardId);
+      onDrop?.(column.id, cardId);
     }
   }
 
@@ -70,58 +70,58 @@
       e.dataTransfer.setData('application/kanban-card', card.id);
       e.dataTransfer.effectAllowed = 'move';
     }
-    props.onCardDragStart?.(card);
+    onCardDragStart?.(card);
   }
 
-  const cardCount = $derived(props.cards.length);
-  const atLimit = $derived(props.column.limit ? cardCount >= props.column.limit : false);
+  const cardCount = $derived(cards.length);
+  const atLimit = $derived(column.limit ? cardCount >= column.limit : false);
 </script>
 
 <div
   class="kanban-column"
-  class:drop-target={props.isDropTarget}
-  class:collapsed={props.isCollapsed}
+  class:drop-target={isDropTarget}
+  class:collapsed={isCollapsed}
   class:at-limit={atLimit}
   ondragover={handleDragOver}
   ondragenter={handleDragEnter}
   ondragleave={handleDragLeave}
   ondrop={handleDrop}
   role="region"
-  aria-label="Column: {props.column.title}"
+  aria-label="Column: {column.title}"
 >
   <div class="column-header">
     <div 
       class="column-color" 
-      style="background: {props.column.color || 'var(--color-accent, #b87333)'}"
+      style="background: {column.color || 'var(--color-accent, var(--color-accent))'}"
     ></div>
     <button 
       class="column-title-btn"
-      onclick={() => props.onToggleCollapse?.(props.column.id)}
-      aria-expanded={!props.isCollapsed}
+      onclick={() => onToggleCollapse?.(column.id)}
+      aria-expanded={!isCollapsed}
     >
-      <span class="column-title">{props.column.title}</span>
+      <span class="column-title">{column.title}</span>
       <span class="card-count" class:limit-near={atLimit}>
-        {cardCount}{props.column.limit ? `/${props.column.limit}` : ''}
+        {cardCount}{column.limit ? `/${column.limit}` : ''}
       </span>
     </button>
     <button 
       class="menu-btn"
-      onclick={() => props.onMenuClick?.(props.column.id)}
+      onclick={() => onMenuClick?.(column.id)}
       aria-label="Column menu"
     >
       <MoreHorizontal size={16} />
     </button>
   </div>
 
-  {#if !props.isCollapsed}
+  {#if !isCollapsed}
     <div class="column-content" role="list">
-      {#each props.cards as card (card.id)}
+      {#each cards as card (card.id)}
         {#await import('./KanbanCard.svelte') then { default: KanbanCard }}
           <KanbanCard
             {card}
-            onClick={props.onCardClick}
+            onClick={onCardClick}
             onDragStart={(c) => handleCardDragStart(c, event as unknown as DragEvent)}
-            onDragEnd={props.onCardDragEnd}
+            onDragEnd={onCardDragEnd}
           />
         {/await}
       {/each}
@@ -129,7 +129,7 @@
 
     <button 
       class="add-card-btn"
-      onclick={() => props.onAddCard?.(props.column.id)}
+      onclick={() => onAddCard?.(column.id)}
       disabled={atLimit}
     >
       <Plus size={14} />
@@ -152,8 +152,8 @@
   }
 
   .kanban-column.drop-target {
-    border-color: var(--color-accent, #b87333);
-    box-shadow: 0 0 0 2px rgba(184, 115, 51, 0.2);
+    border-color: var(--color-accent, var(--color-accent));
+    box-shadow: 0 0 0 2px var(--color-accent-muted);
   }
 
   .kanban-column.collapsed {
@@ -168,7 +168,7 @@
   .column-header {
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: var(--space-2);
     padding: 12px;
     border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
   }
@@ -185,7 +185,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: 8px;
+    gap: var(--space-2);
     background: none;
     border: none;
     cursor: pointer;
@@ -247,7 +247,7 @@
     padding: 12px;
     display: flex;
     flex-direction: column;
-    gap: 8px;
+    gap: var(--space-2);
   }
 
   .add-card-btn {
@@ -262,13 +262,13 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: 6px;
+    gap: var(--space-15);
     transition: border-color 0.15s, color 0.15s;
   }
 
   .add-card-btn:hover:not(:disabled) {
-    border-color: var(--color-accent, #b87333);
-    color: var(--color-accent, #b87333);
+    border-color: var(--color-accent, var(--color-accent));
+    color: var(--color-accent, var(--color-accent));
   }
 
   .add-card-btn:disabled {

package/dist/fabric/layout/KanbanColumn.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { CardData } from './KanbanCard.svelte';
+export interface ColumnData {
+    id: string;
+    title: string;
+    color?: string;
+    limit?: number;
+}
+export interface Props {
+    column: ColumnData;
+    cards: CardData[];
+    isDropTarget?: boolean;
+    isCollapsed?: boolean;
+    onCardClick?: (card: CardData) => void;
+    onCardDragStart?: (card: CardData) => void;
+    onCardDragEnd?: (card: CardData) => void;
+    onDrop?: (columnId: string, cardId: string) => void;
+    onDragOver?: (columnId: string) => void;
+    onDragLeave?: (columnId: string) => void;
+    onAddCard?: (columnId: string) => void;
+    onToggleCollapse?: (columnId: string) => void;
+    onMenuClick?: (columnId: string) => void;
+}
+declare const KanbanColumn: import("svelte").Component<Props, {}, "">;
+type KanbanColumn = ReturnType<typeof KanbanColumn>;
+export default KanbanColumn;
+//# sourceMappingURL=KanbanColumn.svelte.d.ts.map

package/dist/fabric/layout/KanbanColumn.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KanbanColumn.svelte.d.ts","sourceRoot":"","sources":["../../../src/fabric/layout/KanbanColumn.svelte.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAGlD,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,KAAK;IACpB,MAAM,EAAE,UAAU,CAAC;IACnB,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACvC,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC3C,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACzC,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C;AAqFH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

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

@@ -0,0 +1,20 @@
+/**
+ * Fabric Layout Components
+ *
+ * Layout primitives for app structure.
+ *
+ * @package @kos/design-system/fabric/layout
+ * @adr 2026-04-12-leap-substrate-refactor-001
+ */
+export { default as GlassBox } from './GlassBox.svelte';
+export { default as KanbanBoard } from './KanbanBoard.svelte';
+export type { Props as KanbanBoardProps } from './KanbanBoard.svelte';
+export { default as KanbanColumn } from './KanbanColumn.svelte';
+export type { Props as KanbanColumnProps } from './KanbanColumn.svelte';
+export { default as KanbanCard } from './KanbanCard.svelte';
+export type { Props as KanbanCardProps } from './KanbanCard.svelte';
+export type { CardData } from './KanbanCard.svelte';
+export type { ColumnData } from './KanbanColumn.svelte';
+export { default as CollapsiblePanel } from './CollapsiblePanel.svelte';
+export type { PanelPosition, PanelMode, PanelSnap } from './CollapsiblePanel.svelte';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fabric/layout/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAGxD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,YAAY,EAAE,KAAK,IAAI,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,YAAY,EAAE,KAAK,IAAI,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,YAAY,EAAE,KAAK,IAAI,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACpE,YAAY,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AACpD,YAAY,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAGxD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,YAAY,EAAE,aAAa,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC"}

package/{src/fabric/layout/index.ts → dist/fabric/layout/index.js}

@@ -1,17 +1,15 @@
 /**
  * Fabric Layout Components
- * 
+ *
  * Layout primitives for app structure.
- * 
+ *
  * @package @kos/design-system/fabric/layout
  * @adr 2026-04-12-leap-substrate-refactor-001
  */
-
 export { default as GlassBox } from './GlassBox.svelte';
-
 // Kanban
 export { default as KanbanBoard } from './KanbanBoard.svelte';
 export { default as KanbanColumn } from './KanbanColumn.svelte';
 export { default as KanbanCard } from './KanbanCard.svelte';
-export type { CardData } from './KanbanCard.svelte';
-export type { ColumnData } from './KanbanColumn.svelte';
+// Collapsible Panel
+export { default as CollapsiblePanel } from './CollapsiblePanel.svelte';