@stephen-netu/design-system 0.2.1 → 0.2.2

package/dist/fabric/layout/KanbanColumn.svelte

@@ -1,278 +1,44 @@
 <script lang="ts">
-  /**
-   * KanbanColumn - Fabric Component
-   * 
-   * Droppable column for kanban cards with header and scrollable content.
-   * 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 { Plus, MoreHorizontal } from '@lucide/svelte';
-  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;
-  }
-
-  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';
-    onDragOver?.(column.id);
-  }
-
-  function handleDragEnter() {
-    dragCounter++;
-  }
-
-  function handleDragLeave() {
-    dragCounter--;
-    if (dragCounter === 0) {
-      onDragLeave?.(column.id);
-    }
-  }
-
-  function handleDrop(e: DragEvent) {
-    e.preventDefault();
-    dragCounter = 0;
-    
-    const cardId = e.dataTransfer?.getData('application/kanban-card');
-    if (cardId) {
-      onDrop?.(column.id, cardId);
-    }
-  }
-
-  function handleCardDragStart(card: CardData, e: DragEvent) {
-    if (e.dataTransfer) {
-      e.dataTransfer.setData('application/kanban-card', card.id);
-      e.dataTransfer.effectAllowed = 'move';
-    }
-    onCardDragStart?.(card);
-  }
-
-  const cardCount = $derived(cards.length);
-  const atLimit = $derived(column.limit ? cardCount >= column.limit : false);
+  import KanbanColumn from '../../l0-layout/kanban/KanbanColumn.svelte';
+  import type { Props } from '../../l0-layout/kanban/KanbanColumn.svelte';
+
+  let {
+    column,
+    isDropTarget = false,
+    isCollapsed = false,
+    isMoveTarget = false,
+    onCardClick,
+    onCardDragStart,
+    onCardDragEnd,
+    onDrop,
+    onDragOver,
+    onDragLeave,
+    onAddCard,
+    onMenuClick,
+    onCardKeyDown,
+    moveMode = false,
+    children,
+    actions,
+    class: className = '',
+  }: Props = $props();
 </script>
 
-<div
-  class="kanban-column"
-  class:drop-target={isDropTarget}
-  class:collapsed={isCollapsed}
-  class:at-limit={atLimit}
-  ondragover={handleDragOver}
-  ondragenter={handleDragEnter}
-  ondragleave={handleDragLeave}
-  ondrop={handleDrop}
-  role="region"
-  aria-label="Column: {column.title}"
->
-  <div class="column-header">
-    <div 
-      class="column-color" 
-      style="background: {column.color || 'var(--color-accent, var(--color-accent))'}"
-    ></div>
-    <button 
-      class="column-title-btn"
-      onclick={() => onToggleCollapse?.(column.id)}
-      aria-expanded={!isCollapsed}
-    >
-      <span class="column-title">{column.title}</span>
-      <span class="card-count" class:limit-near={atLimit}>
-        {cardCount}{column.limit ? `/${column.limit}` : ''}
-      </span>
-    </button>
-    <button 
-      class="menu-btn"
-      onclick={() => onMenuClick?.(column.id)}
-      aria-label="Column menu"
-    >
-      <MoreHorizontal size={16} />
-    </button>
-  </div>
-
-  {#if !isCollapsed}
-    <div class="column-content" role="list">
-      {#each cards as card (card.id)}
-        {#await import('./KanbanCard.svelte') then { default: KanbanCard }}
-          <KanbanCard
-            {card}
-            onClick={onCardClick}
-            onDragStart={(c) => handleCardDragStart(c, event as unknown as DragEvent)}
-            onDragEnd={onCardDragEnd}
-          />
-        {/await}
-      {/each}
-    </div>
-
-    <button 
-      class="add-card-btn"
-      onclick={() => onAddCard?.(column.id)}
-      disabled={atLimit}
-    >
-      <Plus size={14} />
-      Add card
-    </button>
-  {/if}
-</div>
-
-<style>
-  .kanban-column {
-    display: flex;
-    flex-direction: column;
-    width: 280px;
-    min-width: 280px;
-    max-height: 100%;
-    background: var(--color-bg-canvas, #1a1a1a);
-    border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
-    border-radius: var(--radius-lg, 0.5rem);
-    transition: border-color 0.15s, box-shadow 0.15s;
-  }
-
-  .kanban-column.drop-target {
-    border-color: var(--color-accent, var(--color-accent));
-    box-shadow: 0 0 0 2px var(--color-accent-muted);
-  }
-
-  .kanban-column.collapsed {
-    width: auto;
-    min-width: unset;
-  }
-
-  .kanban-column.at-limit {
-    border-color: var(--color-warning, rgba(243, 156, 18, 0.3));
-  }
-
-  .column-header {
-    display: flex;
-    align-items: center;
-    gap: var(--space-2);
-    padding: 12px;
-    border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
-  }
-
-  .column-color {
-    width: 12px;
-    height: 12px;
-    border-radius: var(--radius-sm, 0.25rem);
-    flex-shrink: 0;
-  }
-
-  .column-title-btn {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--space-2);
-    background: none;
-    border: none;
-    cursor: pointer;
-    padding: 4px;
-    border-radius: var(--radius-sm, 0.25rem);
-    color: inherit;
-    text-align: left;
-  }
-
-  .column-title-btn:hover {
-    background: rgba(255,255,255,0.05);
-  }
-
-  .column-title {
-    font-size: 13px;
-    font-weight: 600;
-    color: var(--color-text-primary, #f2efe9);
-  }
-
-  .card-count {
-    font-size: 11px;
-    padding: 2px 6px;
-    background: var(--color-bg-panel, #222222);
-    border-radius: var(--radius-sm, 0.25rem);
-    color: var(--color-text-tertiary, #706858);
-  }
-
-  .card-count.limit-near {
-    color: var(--color-warning, #f39c12);
-    background: rgba(243, 156, 18, 0.1);
-  }
-
-  .menu-btn {
-    background: none;
-    border: none;
-    color: var(--color-text-tertiary, #706858);
-    cursor: pointer;
-    padding: 4px;
-    border-radius: var(--radius-sm, 0.25rem);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    opacity: 0;
-    transition: opacity 0.15s, background 0.15s;
-  }
-
-  .kanban-column:hover .menu-btn {
-    opacity: 1;
-  }
-
-  .menu-btn:hover {
-    background: rgba(255,255,255,0.05);
-    color: var(--color-text-secondary, #a09880);
-  }
-
-  .column-content {
-    flex: 1;
-    overflow-y: auto;
-    padding: 12px;
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-2);
-  }
-
-  .add-card-btn {
-    margin: 0 12px 12px;
-    padding: 8px 12px;
-    background: transparent;
-    border: 1px dashed var(--border-default, #333333);
-    border-radius: var(--radius-md, 0.375rem);
-    color: var(--color-text-tertiary, #706858);
-    font-size: 12px;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--space-15);
-    transition: border-color 0.15s, color 0.15s;
-  }
-
-  .add-card-btn:hover:not(:disabled) {
-    border-color: var(--color-accent, var(--color-accent));
-    color: var(--color-accent, var(--color-accent));
-  }
-
-  .add-card-btn:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-</style>
+<KanbanColumn
+  {column}
+  {isDropTarget}
+  {isCollapsed}
+  {isMoveTarget}
+  {onCardClick}
+  {onCardDragStart}
+  {onCardDragEnd}
+  {onDrop}
+  {onDragOver}
+  {onDragLeave}
+  {onAddCard}
+  {onMenuClick}
+  {onCardKeyDown}
+  {moveMode}
+  {children}
+  {actions}
+  class={className}
+/>

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

@@ -1,25 +1,5 @@
-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;
-}
+import KanbanColumn from '../../l0-layout/kanban/KanbanColumn.svelte';
+import type { Props } from '../../l0-layout/kanban/KanbanColumn.svelte';
 declare const KanbanColumn: import("svelte").Component<Props, {}, "">;
 type KanbanColumn = ReturnType<typeof KanbanColumn>;
 export default KanbanColumn;

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

@@ -1 +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"}
+{"version":3,"file":"KanbanColumn.svelte.d.ts","sourceRoot":"","sources":["../../../src/fabric/layout/KanbanColumn.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,YAAY,MAAM,4CAA4C,CAAC;AACtE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,4CAA4C,CAAC;AA+BxE,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

@@ -8,13 +8,10 @@
  */
 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 type { ColumnData } from '../../l0-layout/kanban/KanbanColumn.svelte';
+export type { CardData } from '../../l0-layout/kanban/KanbanCard.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

@@ -1 +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"}
+{"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,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,YAAY,EAAE,UAAU,EAAE,MAAM,4CAA4C,CAAC;AAC7E,YAAY,EAAE,QAAQ,EAAE,MAAM,0CAA0C,CAAC;AAGzE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,YAAY,EAAE,aAAa,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/fabric/layout/index.js

@@ -7,7 +7,7 @@
  * @adr 2026-04-12-leap-substrate-refactor-001
  */
 export { default as GlassBox } from './GlassBox.svelte';
-// Kanban
+// Kanban — canonical l0-layout components re-exported for fabric compatibility (F-24)
 export { default as KanbanBoard } from './KanbanBoard.svelte';
 export { default as KanbanColumn } from './KanbanColumn.svelte';
 export { default as KanbanCard } from './KanbanCard.svelte';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAOA,OAAO,YAAY,CAAC;AAEpB,OAAO,4CAA4C,CAAC;AACpD,OAAO,+BAA+B,CAAC;AACvC,OAAO,6BAA6B,CAAC;AAGrC,cAAc,gBAAgB,CAAC;AAE/B,cAAc,iBAAiB,CAAC;AAEhC,cAAc,iBAAiB,CAAC;AAEhC,cAAc,aAAa,CAAC;AAE5B,cAAc,gBAAgB,CAAC;AAE/B,cAAc,YAAY,CAAC;AAE3B,cAAc,gBAAgB,CAAC;AAE/B,cAAc,YAAY,CAAC;AAE3B,cAAc,eAAe,CAAC;AAE9B,cAAc,iBAAiB,CAAC;AAEhC,cAAc,aAAa,CAAC;AAE5B,cAAc,YAAY,CAAC;AAG3B,YAAY,EACV,SAAS,EACT,SAAS,EACT,aAAa,EACb,UAAU,EACV,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,aAAa,EACb,aAAa,EACb,eAAe,GAChB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,sBAAsB,EAAE,iBAAiB,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAOA,OAAO,YAAY,CAAC;AAEpB,OAAO,4CAA4C,CAAC;AACpD,OAAO,+BAA+B,CAAC;AACvC,OAAO,6BAA6B,CAAC;AAGrC,cAAc,gBAAgB,CAAC;AAE/B,cAAc,iBAAiB,CAAC;AAEhC,cAAc,iBAAiB,CAAC;AAEhC,cAAc,aAAa,CAAC;AAE5B,cAAc,gBAAgB,CAAC;AAE/B,cAAc,YAAY,CAAC;AAE3B,cAAc,gBAAgB,CAAC;AAE/B,cAAc,YAAY,CAAC;AAE3B,cAAc,eAAe,CAAC;AAE9B,cAAc,iBAAiB,CAAC;AAGhC,cAAc,aAAa,CAAC;AAG5B,cAAc,YAAY,CAAC;AAG3B,YAAY,EACV,SAAS,EACT,SAAS,EACT,aAAa,EACb,UAAU,EACV,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,aAAa,EACb,aAAa,EACb,eAAe,GAChB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,sBAAsB,EAAE,iBAAiB,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/index.js

@@ -29,9 +29,11 @@ export * from './f0-forms';
 export * from './d0-data-viz';
 // N0 Node Graph — Visual composition primitives (SVG DAG, <100 nodes)
 export * from './n0-node-graph';
-// Epistemic types — Assay, Allay, Expert, Provenance
+// Epistemic types — public LEAP plugin contracts for assay, allay,
+// expert identity, and provenance metadata.
 export * from './epistemic';
-// Platform — cross-boundary protocols (HUD, etc.)
+// Platform protocols — public LEAP shell/plugin boundary metadata,
+// including HUD contribution and indicator contracts.
 export * from './platform';
 export { EDGE_REVEAL_STAGGER_MS } from './n1-flow-canvas/types.js';
 export { nodeHitTest, domEventToCanvasCoords, parseMentionEdges, parseGroupedSequenceEdges } from './n1-flow-canvas/utils.js';

package/dist/l0-layout/SectionSplitter.svelte

@@ -52,7 +52,7 @@
     justify-content: center;
     cursor: ns-resize;
     background: var(--color-bg-panel, #222);
-    border-top: 1px solid var(--border-color, #333);
+    border-top: 1px solid var(--color-border, #333);
     flex-shrink: 0;
     user-select: none;
     transition: background 0.1s, border-top-color 0.1s;
@@ -60,8 +60,8 @@
 
   .section-splitter:hover,
   .section-splitter--active {
-    background: color-mix(in srgb, var(--accent-primary, var(--color-accent)) 10%, var(--color-bg-panel, #222));
-    border-top-color: var(--accent-primary, var(--color-accent));
+    background: color-mix(in srgb, var(--color-accent) 10%, var(--color-bg-panel, #222));
+    border-top-color: var(--color-accent);
   }
 
   /* Three-line grip — center line via element, top/bottom via box-shadow */
@@ -77,7 +77,7 @@
 
   .section-splitter:hover .section-splitter__grip,
   .section-splitter--active .section-splitter__grip {
-    background: var(--accent-primary, var(--color-accent));
-    box-shadow: 0 -4px 0 var(--accent-primary, var(--color-accent)), 0 4px 0 var(--accent-primary, var(--color-accent));
+    background: var(--color-accent);
+    box-shadow: 0 -4px 0 var(--color-accent), 0 4px 0 var(--color-accent);
   }
 </style>

package/dist/l0-layout/block-writer/BlockItem.svelte

@@ -128,10 +128,12 @@
     overflow: hidden;
   }
 
-  .ds-tiny-indicator.ds-phase-seed { border-left: 3px solid var(--color-phase-seed, #8fbc8f); }
-  .ds-tiny-indicator.ds-phase-sprout { border-left: 3px solid var(--color-phase-sprout, #90ee90); }
-  .ds-tiny-indicator.ds-phase-flower { border-left: 3px solid var(--color-phase-flower, #ffa500); }
-  .ds-tiny-indicator.ds-phase-scelle { border-left: 3px solid var(--color-phase-scelle, #ff4500); }
+  /* Phase colors follow PHASE_CONFIG (block-writer-types.ts) */
+  .ds-tiny-indicator.ds-phase-seed { border-left: 3px solid var(--color-warning); }
+  .ds-tiny-indicator.ds-phase-sprout { border-left: 3px solid var(--color-info); }
+  .ds-tiny-indicator.ds-phase-go { border-left: 3px solid var(--color-success); }
+  .ds-tiny-indicator.ds-phase-freeze { border-left: 3px solid var(--color-accent); }
+  .ds-tiny-indicator.ds-phase-compost { border-left: 3px solid var(--color-neutral); }
 
   .ds-tiny-id {
     font-family: var(--font-mono, monospace);

package/dist/l0-layout/card/CompactCard.svelte

@@ -78,11 +78,11 @@
 </Card>
 
 <style>
-  .ds-compact-card {
+  :global(.ds-compact-card) {
     transition: box-shadow var(--transition-normal);
   }
   
-  .ds-compact-card:hover {
+  :global(.ds-compact-card:hover) {
     box-shadow: var(--shadow-card-hover);
   }
   
@@ -104,11 +104,12 @@
   }
   
   /* Hide overflow preview text when not hovered */
-  .ds-compact-card:hover .ds-card-preview {
+  :global(.ds-compact-card:hover) .ds-card-preview {
     max-height: 4.5rem; /* ~3 lines */
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-line-clamp: 3;
+    line-clamp: 3;
   }
 </style>

package/dist/l0-layout/grant/GrantCard.svelte

@@ -47,15 +47,23 @@
   let cardClasses = $derived(
     `ds-grant-card ${className}${isInteractive ? ' is-interactive' : ''}${selected ? ' is-selected' : ''}`
   );
+  let cardAttrs = $derived(isInteractive ? {
+    role: 'button',
+    tabindex: 0,
+    onclick,
+    onkeydown: (e: KeyboardEvent) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        onclick?.(new MouseEvent('click'));
+      }
+    },
+    'aria-pressed': selected
+  } : {});
 </script>
 
 <div
   class={cardClasses}
-  role={isInteractive ? 'button' : 'region'}
-  tabindex={isInteractive ? 0 : undefined}
-  onclick={onclick}
-  onkeydown={isInteractive ? (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onclick?.(new MouseEvent('click')); } } : undefined}
-  aria-pressed={isInteractive ? selected : undefined}
+  {...cardAttrs}
 >
   <div class="ds-grant-card-header">
     <h3 class="ds-grant-card-title" title={title}>{title}</h3>
@@ -129,6 +137,7 @@
     flex: 1;
     display: -webkit-box;
     -webkit-line-clamp: 2;
+    line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
   }
@@ -156,6 +165,7 @@
     margin: 0;
     display: -webkit-box;
     -webkit-line-clamp: 3;
+    line-clamp: 3;
     -webkit-box-orient: vertical;
     overflow: hidden;
     line-height: 1.4;

package/dist/l0-layout/grant/GrantCard.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GrantCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/l0-layout/grant/GrantCard.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIpC,UAAU,KAAK;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAuEH,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"GrantCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/l0-layout/grant/GrantCard.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIpC,UAAU,KAAK;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAmFH,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/l0-layout/index.d.ts

@@ -4,6 +4,8 @@ export { default as KanbanViewLayout } from './kanban/KanbanViewLayout.svelte';
 export { default as KanbanBoard } from './kanban/KanbanBoard.svelte';
 export { default as KanbanColumn } from './kanban/KanbanColumn.svelte';
 export { default as KanbanCard } from './kanban/KanbanCard.svelte';
+export type { ColumnData } from './kanban/KanbanColumn.svelte';
+export type { CardData } from './kanban/KanbanCard.svelte';
 export { default as SnapPanel } from './SnapPanel.svelte';
 export { default as VirtualGrid } from './VirtualGrid.svelte';
 export type { PanelPosition, PanelMode, PanelSnap } from './SnapPanel.svelte';

package/dist/l0-layout/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/l0-layout/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,oCAAoC,CAAC;AAChF,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,6BAA6B,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,8BAA8B,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAGnE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,YAAY,EAAE,aAAa,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC9E,YAAY,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAGrD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAClE,YAAY,EACV,UAAU,EACV,cAAc,EACd,UAAU,EACV,SAAS,EACT,UAAU,GACX,MAAM,qBAAqB,CAAC;AAG7B,cAAc,sBAAsB,CAAC;AAGrC,OAAO,EACL,WAAW,EACX,SAAS,EACT,WAAW,EACX,YAAY,EACZ,oBAAoB,EACpB,YAAY,EACZ,cAAc,EACd,oBAAoB,GACrB,MAAM,yBAAyB,CAAC;AAEjC,YAAY,EACV,YAAY,EACZ,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,YAAY,EACZ,WAAW,GACZ,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAGhF,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAGtE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,iCAAiC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/l0-layout/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,oCAAoC,CAAC;AAChF,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAE/E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,6BAA6B,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,8BAA8B,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACnE,YAAY,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC/D,YAAY,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAG3D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,YAAY,EAAE,aAAa,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC9E,YAAY,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAGrD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAClE,YAAY,EACV,UAAU,EACV,cAAc,EACd,UAAU,EACV,SAAS,EACT,UAAU,GACX,MAAM,qBAAqB,CAAC;AAG7B,cAAc,sBAAsB,CAAC;AAGrC,OAAO,EACL,WAAW,EACX,SAAS,EACT,WAAW,EACX,YAAY,EACZ,oBAAoB,EACpB,YAAY,EACZ,cAAc,EACd,oBAAoB,GACrB,MAAM,yBAAyB,CAAC;AAEjC,YAAY,EACV,YAAY,EACZ,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,YAAY,EACZ,WAAW,GACZ,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAGhF,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAGtE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,iCAAiC,CAAC"}

package/dist/l0-layout/index.js

@@ -2,6 +2,7 @@
 export { default as WorkspaceLayout } from './workspace/WorkspaceLayout.svelte';
 export { default as ChatViewLayout } from './chat-view/ChatViewLayout.svelte';
 export { default as KanbanViewLayout } from './kanban/KanbanViewLayout.svelte';
+// Kanban — canonical l0-layout surface (F-24)
 export { default as KanbanBoard } from './kanban/KanbanBoard.svelte';
 export { default as KanbanColumn } from './kanban/KanbanColumn.svelte';
 export { default as KanbanCard } from './kanban/KanbanCard.svelte';