@stephen-netu/design-system 0.2.0 → 0.2.2

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

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

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

@@ -1 +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"}
+{"version":3,"file":"KanbanBoard.svelte.d.ts","sourceRoot":"","sources":["../../../src/fabric/layout/KanbanBoard.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,WAAW,MAAM,2CAA2C,CAAC;AACpE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,2CAA2C,CAAC;AAuBvE,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

@@ -1,25 +1,140 @@
-import { afterEach, describe, it, expect } from 'vitest';
-import { cleanup, render } from '@testing-library/svelte';
+import { cleanup, fireEvent, render } from '@testing-library/svelte';
+import { afterEach, describe, it, expect, vi } from 'vitest';
 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, {
+    it('renders columns with title', async () => {
+        const { container } = render(KanbanBoard, {
             props: {
                 columns: [
                     { column: { id: 'c1', title: 'Backlog' }, cards: [{ id: 'card1', title: 'Task 1' }] },
+                    { column: { id: 'c2', title: 'In Progress' }, cards: [] },
                 ],
             },
         });
-        // Component mounted without crashing — even if {#await} hasn't resolved yet
-        expect(component).toBeDefined();
+        expect(container.querySelector('.ds-kanban-board')).not.toBeNull();
+        expect(container.querySelectorAll('.ds-kanban-column').length).toBe(2);
+        expect(container.querySelector('.ds-kanban-column-title')?.textContent).toBe('Backlog');
+    });
+    it('renders board title when provided', () => {
+        const { container } = render(KanbanBoard, {
+            props: {
+                title: 'My Board',
+                columns: [],
+            },
+        });
+        expect(container.querySelector('.ds-kanban-board-title')?.textContent).toBe('My Board');
+    });
+    it('renders cards within columns', () => {
+        const { container } = render(KanbanBoard, {
+            props: {
+                columns: [
+                    {
+                        column: { id: 'c1', title: 'Todo' },
+                        cards: [
+                            { id: 'card1', title: 'First Task', priority: 'high' },
+                            { id: 'card2', title: 'Second Task', priority: 'low' },
+                        ],
+                    },
+                ],
+            },
+        });
+        const titles = container.querySelectorAll('.ds-kanban-card-title');
+        expect(titles.length).toBe(2);
+        expect(titles[0]?.textContent).toBe('First Task');
+        expect(titles[1]?.textContent).toBe('Second Task');
+    });
+    it('renders priority indicator bars', () => {
+        const { container } = render(KanbanBoard, {
+            props: {
+                columns: [
+                    {
+                        column: { id: 'c1', title: 'Todo' },
+                        cards: [{ id: 'card1', title: 'Urgent Task', priority: 'urgent' }],
+                    },
+                ],
+            },
+        });
+        expect(container.querySelector('.ds-kanban-priority-bar')).not.toBeNull();
+    });
+    it('renders tags when provided', () => {
+        const { container } = render(KanbanBoard, {
+            props: {
+                columns: [
+                    {
+                        column: { id: 'c1', title: 'Todo' },
+                        cards: [{ id: 'card1', title: 'Tagged', tags: ['alpha', 'beta', 'gamma', 'delta'] }],
+                    },
+                ],
+            },
+        });
+        const tags = container.querySelectorAll('.ds-kanban-card-tag');
+        expect(tags.length).toBe(3); // max 3 shown
+        expect(container.querySelector('.ds-kanban-card-tag-more')?.textContent).toBe('+1');
+    });
+    it('moves a card with keyboard move mode', async () => {
+        const onCardMove = vi.fn();
+        const onCardClick = vi.fn();
+        const { container } = render(KanbanBoard, {
+            props: {
+                columns: [
+                    { column: { id: 'todo', title: 'Todo' }, cards: [{ id: 'task-1', title: 'Task 1' }] },
+                    { column: { id: 'doing', title: 'In Progress' }, cards: [] },
+                ],
+                onCardMove,
+                onCardClick,
+            },
+        });
+        const card = container.querySelector('.ds-kanban-card');
+        const interactiveCard = container.querySelector('.ds-card');
+        expect(card).not.toBeNull();
+        expect(interactiveCard).not.toBeNull();
+        await fireEvent.keyDown(interactiveCard, { key: ' ' });
+        expect(container.querySelector('.ds-kanban-move-toast')).not.toBeNull();
+        expect(card.classList.contains('is-selected')).toBe(true);
+        await fireEvent.keyDown(interactiveCard, { key: 'ArrowRight' });
+        expect(container.querySelector('.ds-kanban-move-target')?.textContent).toBe('→ In Progress');
+        await fireEvent.keyDown(interactiveCard, { key: 'Enter' });
+        expect(onCardMove).toHaveBeenCalledWith('task-1', 'todo', 'doing');
+        expect(onCardClick).not.toHaveBeenCalled();
+        expect(container.querySelector('.ds-kanban-move-toast')).toBeNull();
+    });
+    it('cancels keyboard move mode with Escape', async () => {
+        const onCardMove = vi.fn();
+        const { container } = render(KanbanBoard, {
+            props: {
+                columns: [
+                    { column: { id: 'todo', title: 'Todo' }, cards: [{ id: 'task-1', title: 'Task 1' }] },
+                    { column: { id: 'doing', title: 'In Progress' }, cards: [] },
+                ],
+                onCardMove,
+            },
+        });
+        const card = container.querySelector('.ds-kanban-card');
+        const interactiveCard = container.querySelector('.ds-card');
+        expect(card).not.toBeNull();
+        expect(interactiveCard).not.toBeNull();
+        await fireEvent.keyDown(interactiveCard, { key: ' ' });
+        await fireEvent.keyDown(interactiveCard, { key: 'ArrowRight' });
+        await fireEvent.keyDown(interactiveCard, { key: 'Escape' });
+        expect(onCardMove).not.toHaveBeenCalled();
+        expect(container.querySelector('.ds-kanban-move-toast')).toBeNull();
+    });
+    it('renders move-toast in keyboard move mode', () => {
+        // Move mode is internal state — verify the toast element exists in DOM when triggered
+        // This is tested via the board's reactive rendering; we verify the CSS class exists
+        const { container } = render(KanbanBoard, {
+            props: {
+                columns: [
+                    { column: { id: 'c1', title: 'Todo' }, cards: [{ id: 'card1', title: 'Task' }] },
+                ],
+            },
+        });
+        // Toast should not be visible initially
+        expect(container.querySelector('.ds-kanban-move-toast')).toBeNull();
     });
 });

package/dist/fabric/layout/KanbanCard.svelte

@@ -1,226 +1,30 @@
 <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>;
-  }
-
-  export interface Props {
-    card: CardData;
-    isDragging?: boolean;
-    isSelected?: boolean;
-    disabled?: boolean;
-    onClick?: (card: CardData) => void;
-    onDragStart?: (card: CardData) => void;
-    onDragEnd?: (card: CardData) => void;
-  }
-
-  let { card, isDragging, isSelected, disabled, onClick, onDragStart, onDragEnd }: 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' });
-  }
+  import KanbanCard from '../../l0-layout/kanban/KanbanCard.svelte';
+  import type { Props } from '../../l0-layout/kanban/KanbanCard.svelte';
+
+  let {
+    card,
+    isDragging = false,
+    isSelected = false,
+    disabled = false,
+    onClick,
+    onDragStart,
+    onDragEnd,
+    onKeyDown,
+    moveMode = false,
+    children,
+  }: Props = $props();
 </script>
 
-<div
-  class="kanban-card"
-  class:dragging={isDragging}
-  class:selected={isSelected}
-  class:disabled={disabled}
-  role="button"
-  tabindex="0"
-  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 card.priority}
-      <span 
-        class="priority-indicator" 
-        style="background: {priorityColor(card.priority)}"
-        title="Priority: {card.priority}"
-      ></span>
-    {/if}
-    <span class="card-title">{card.title}</span>
-    <GripVertical size={14} class="drag-handle" />
-  </div>
-
-  {#if card.description}
-    <p class="card-description">{card.description}</p>
-  {/if}
-
-  <div class="card-footer">
-    {#if card.tags && card.tags.length > 0}
-      <div class="tags">
-        {#each card.tags.slice(0, 3) as tag}
-          <span class="tag">
-            <Tag size={10} />
-            {tag}
-          </span>
-        {/each}
-        {#if card.tags.length > 3}
-          <span class="tag-more">+{card.tags.length - 3}</span>
-        {/if}
-      </div>
-    {/if}
-
-    {#if card.dueDate}
-      <span class="due-date" class:overdue={card.dueDate < new Date()}>
-        <Clock size={12} />
-        {formatDate(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, var(--color-accent));
-    box-shadow: 0 0 0 2px var(--color-accent-muted);
-  }
-
-  .kanban-card.disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-
-  .card-header {
-    display: flex;
-    align-items: center;
-    gap: var(--space-2);
-    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: var(--space-2);
-  }
-
-  .tags {
-    display: flex;
-    align-items: center;
-    gap: var(--space-2);
-    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: var(--space-1);
-    font-size: 11px;
-    color: var(--color-text-tertiary, #706858);
-  }
-
-  .due-date.overdue {
-    color: var(--color-error, #c0392b);
-  }
-</style>
+<KanbanCard
+  {card}
+  {isDragging}
+  {isSelected}
+  {disabled}
+  {onClick}
+  {onDragStart}
+  {onDragEnd}
+  {onKeyDown}
+  {moveMode}
+  {children}
+/>

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

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

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

@@ -1 +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"}
+{"version":3,"file":"KanbanCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/fabric/layout/KanbanCard.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,UAAU,MAAM,0CAA0C,CAAC;AAClE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0CAA0C,CAAC;AAwBtE,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}