@stephen-netu/design-system 0.1.0

package/src/fabric/layout/KanbanBoard.svelte

@@ -0,0 +1,158 @@
+<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;
+  }
+
+  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;
+  }
+
+  const props: 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 = props.columns.find(c => 
+      c.cards.some(card => card.id === cardId)
+    );
+    
+    if (sourceColumn && sourceColumn.column.id !== targetColumnId) {
+      props.onCardMove?.(cardId, sourceColumn.column.id, targetColumnId);
+    }
+
+    draggedCardId = null;
+    activeDropColumn = null;
+  }
+</script>
+
+{#await import('./KanbanColumn.svelte') then { default: KanbanColumn }}
+  <div class="kanban-board" role="region" aria-label="{props.title || 'Kanban board'}">
+    {#if props.title}
+      <header class="board-header">
+        <h2 class="board-title">{props.title}</h2>
+        <button 
+          class="add-column-btn"
+          onclick={() => props.onAddColumn?.()}
+        >
+          + Add Column
+        </button>
+      </header>
+    {/if}
+
+    <div class="board-content" role="list">
+      {#each props.columns as columnState (columnState.column.id)}
+        <KanbanColumn
+          column={columnState.column}
+          cards={columnState.cards}
+          isDropTarget={activeDropColumn === columnState.column.id}
+          isCollapsed={columnState.isCollapsed}
+          onCardClick={props.onCardClick}
+          onCardDragStart={handleCardDragStart}
+          onCardDragEnd={handleCardDragEnd}
+          onDrop={handleDrop}
+          onDragOver={handleDragOver}
+          onDragLeave={handleDragLeave}
+          onAddCard={props.onAddCard}
+          onMenuClick={props.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, #b87333);
+    color: var(--color-accent, #b87333);
+  }
+
+  .board-content {
+    display: flex;
+    gap: 16px;
+    padding: 16px 20px;
+    overflow-x: auto;
+    overflow-y: hidden;
+    flex: 1;
+    align-items: flex-start;
+  }
+</style>

package/src/fabric/layout/KanbanCard.svelte

@@ -0,0 +1,226 @@
+<script lang="ts">
+  /**
+   * KanbanCard - Fabric Component
+   * 
+   * Draggable kanban card with metadata display.
+   * 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 { GripVertical, Clock, Tag } from '@lucide/svelte';
+
+  export interface CardData {
+    id: string;
+    title: string;
+    description?: string;
+    priority?: 'low' | 'medium' | 'high';
+    tags?: string[];
+    dueDate?: Date;
+    assignee?: string;
+    metadata?: Record<string, unknown>;
+  }
+
+  interface Props {
+    card: CardData;
+    isDragging?: boolean;
+    isSelected?: boolean;
+    disabled?: boolean;
+    onClick?: (card: CardData) => void;
+    onDragStart?: (card: CardData) => void;
+    onDragEnd?: (card: CardData) => void;
+  }
+
+  const props: Props = $props();
+
+  function priorityColor(p: string | undefined): string {
+    switch (p) {
+      case 'high': return 'var(--color-error, #c0392b)';
+      case 'medium': return 'var(--color-warning, #f39c12)';
+      case 'low': return 'var(--color-success, #27ae60)';
+      default: return 'var(--color-text-tertiary, #706858)';
+    }
+  }
+
+  function formatDate(date: Date | undefined): string {
+    if (!date) return '';
+    return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+  }
+</script>
+
+<div
+  class="kanban-card"
+  class:dragging={props.isDragging}
+  class:selected={props.isSelected}
+  class:disabled={props.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}
+>
+  <div class="card-header">
+    {#if props.card.priority}
+      <span 
+        class="priority-indicator" 
+        style="background: {priorityColor(props.card.priority)}"
+        title="Priority: {props.card.priority}"
+      ></span>
+    {/if}
+    <span class="card-title">{props.card.title}</span>
+    <GripVertical size={14} class="drag-handle" />
+  </div>
+
+  {#if props.card.description}
+    <p class="card-description">{props.card.description}</p>
+  {/if}
+
+  <div class="card-footer">
+    {#if props.card.tags && props.card.tags.length > 0}
+      <div class="tags">
+        {#each props.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}
+      </div>
+    {/if}
+
+    {#if props.card.dueDate}
+      <span class="due-date" class:overdue={props.card.dueDate < new Date()}>
+        <Clock size={12} />
+        {formatDate(props.card.dueDate)}
+      </span>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .kanban-card {
+    background: var(--color-bg-panel, #222222);
+    border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
+    border-radius: var(--radius-md, 0.375rem);
+    padding: 12px;
+    cursor: grab;
+    transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
+    user-select: none;
+  }
+
+  .kanban-card:hover {
+    border-color: var(--border-default, #333333);
+    box-shadow: var(--shadow-sm, 0 2px 4px rgba(0,0,0,0.2));
+  }
+
+  .kanban-card.dragging {
+    opacity: 0.5;
+    transform: rotate(2deg);
+    box-shadow: var(--shadow-lg, 0 4px 12px rgba(0,0,0,0.3));
+  }
+
+  .kanban-card.selected {
+    border-color: var(--color-accent, #b87333);
+    box-shadow: 0 0 0 2px rgba(184, 115, 51, 0.2);
+  }
+
+  .kanban-card.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  .card-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 8px;
+  }
+
+  .priority-indicator {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+
+  .card-title {
+    flex: 1;
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--color-text-primary, #f2efe9);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  :global(.drag-handle) {
+    color: var(--color-text-tertiary, #706858);
+    opacity: 0;
+    transition: opacity 0.15s;
+  }
+
+  .kanban-card:hover :global(.drag-handle) {
+    opacity: 1;
+  }
+
+  .card-description {
+    font-size: 12px;
+    color: var(--color-text-secondary, #a09880);
+    line-height: 1.4;
+    margin: 0 0 12px 0;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    line-clamp: 3;
+    -webkit-box-orient: vertical;
+    box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .card-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+  }
+
+  .tags {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    flex-wrap: wrap;
+  }
+
+  .tag {
+    display: inline-flex;
+    align-items: center;
+    gap: 3px;
+    font-size: 10px;
+    padding: 2px 6px;
+    background: var(--color-bg-canvas, #1a1a1a);
+    border-radius: var(--radius-sm, 0.25rem);
+    color: var(--color-text-tertiary, #706858);
+  }
+
+  .tag-more {
+    font-size: 10px;
+    color: var(--color-text-tertiary, #706858);
+  }
+
+  .due-date {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 11px;
+    color: var(--color-text-tertiary, #706858);
+  }
+
+  .due-date.overdue {
+    color: var(--color-error, #c0392b);
+  }
+</style>

package/src/fabric/layout/KanbanColumn.svelte

@@ -0,0 +1,278 @@
+<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;
+  }
+
+  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;
+  }
+
+  const props: Props = $props();
+
+  let dragCounter = $state(0);
+
+  function handleDragOver(e: DragEvent) {
+    e.preventDefault();
+    if (e.dataTransfer) e.dataTransfer.dropEffect = 'move';
+    props.onDragOver?.(props.column.id);
+  }
+
+  function handleDragEnter() {
+    dragCounter++;
+  }
+
+  function handleDragLeave() {
+    dragCounter--;
+    if (dragCounter === 0) {
+      props.onDragLeave?.(props.column.id);
+    }
+  }
+
+  function handleDrop(e: DragEvent) {
+    e.preventDefault();
+    dragCounter = 0;
+    
+    const cardId = e.dataTransfer?.getData('application/kanban-card');
+    if (cardId) {
+      props.onDrop?.(props.column.id, cardId);
+    }
+  }
+
+  function handleCardDragStart(card: CardData, e: DragEvent) {
+    if (e.dataTransfer) {
+      e.dataTransfer.setData('application/kanban-card', card.id);
+      e.dataTransfer.effectAllowed = 'move';
+    }
+    props.onCardDragStart?.(card);
+  }
+
+  const cardCount = $derived(props.cards.length);
+  const atLimit = $derived(props.column.limit ? cardCount >= props.column.limit : false);
+</script>
+
+<div
+  class="kanban-column"
+  class:drop-target={props.isDropTarget}
+  class:collapsed={props.isCollapsed}
+  class:at-limit={atLimit}
+  ondragover={handleDragOver}
+  ondragenter={handleDragEnter}
+  ondragleave={handleDragLeave}
+  ondrop={handleDrop}
+  role="region"
+  aria-label="Column: {props.column.title}"
+>
+  <div class="column-header">
+    <div 
+      class="column-color" 
+      style="background: {props.column.color || 'var(--color-accent, #b87333)'}"
+    ></div>
+    <button 
+      class="column-title-btn"
+      onclick={() => props.onToggleCollapse?.(props.column.id)}
+      aria-expanded={!props.isCollapsed}
+    >
+      <span class="column-title">{props.column.title}</span>
+      <span class="card-count" class:limit-near={atLimit}>
+        {cardCount}{props.column.limit ? `/${props.column.limit}` : ''}
+      </span>
+    </button>
+    <button 
+      class="menu-btn"
+      onclick={() => props.onMenuClick?.(props.column.id)}
+      aria-label="Column menu"
+    >
+      <MoreHorizontal size={16} />
+    </button>
+  </div>
+
+  {#if !props.isCollapsed}
+    <div class="column-content" role="list">
+      {#each props.cards as card (card.id)}
+        {#await import('./KanbanCard.svelte') then { default: KanbanCard }}
+          <KanbanCard
+            {card}
+            onClick={props.onCardClick}
+            onDragStart={(c) => handleCardDragStart(c, event as unknown as DragEvent)}
+            onDragEnd={props.onCardDragEnd}
+          />
+        {/await}
+      {/each}
+    </div>
+
+    <button 
+      class="add-card-btn"
+      onclick={() => props.onAddCard?.(props.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, #b87333);
+    box-shadow: 0 0 0 2px rgba(184, 115, 51, 0.2);
+  }
+
+  .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: 8px;
+    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: 8px;
+    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: 8px;
+  }
+
+  .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: 6px;
+    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);
+  }
+
+  .add-card-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+</style>

package/src/fabric/layout/index.ts

@@ -0,0 +1,17 @@
+/**
+ * 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';