@stephen-netu/design-system 0.2.0 → 0.2.2

package/dist/l0-layout/kanban/KanbanColumn.svelte

@@ -1,122 +1,169 @@
 <script lang="ts">
+  /**
+   * KanbanColumn — Merged canonical component.
+   *
+   * Combines fabric's ColumnState props pattern with l0's Snippet children,
+   * Badge composition, WIP limit, and ds-kanban-* CSS classes.
+   *
+   * @package @kos/design-system/fabric/layout
+   */
   import type { Snippet } from 'svelte';
-  import Badge from '../../u0-primitives/badge/Badge.svelte';
+  import type { CardData } from './KanbanCard.svelte';
 
-  interface Props {
+  export interface ColumnData {
     id: string;
     title: string;
-    count?: number;
+    color?: string;
     wipLimit?: number;
-    isOverLimit?: boolean;
+  }
+
+  export interface Props {
+    column: ColumnData;
+    isDropTarget?: boolean;
+    isCollapsed?: boolean;
+    isMoveTarget?: boolean;
+    onCardClick?: (card: CardData) => void;
+    onCardDragStart?: (card: CardData) => void;
+    onCardDragEnd?: () => void;
+    onDrop?: (targetColumnId: string, cardId: string) => void;
+    onDragOver?: (columnId: string) => void;
+    onDragLeave?: (columnId: string) => void;
+    onAddCard?: (columnId: string) => void;
+    onMenuClick?: (columnId: string) => void;
+    onCardKeyDown?: (e: KeyboardEvent, cardId: string, sourceColumnId: string) => void;
+    moveMode?: boolean;
+    children?: Snippet;
+    actions?: Snippet;
     class?: string;
-    ondragover?: (e: DragEvent) => void;
-    ondragleave?: (e: DragEvent) => void;
-    ondrop?: (e: DragEvent) => void;
-    children?: Snippet; // The KanbanCards go here
-    actions?: Snippet; // Additional header actions (e.g. + button)
   }
 
   let {
-    id,
-    title,
-    count = 0,
-    wipLimit,
-    isOverLimit = false,
-    class: className = '',
-    ondragover,
-    ondragleave,
-    ondrop,
+    column,
+    isDropTarget = false,
+    isCollapsed = false,
+    isMoveTarget = false,
+    onCardClick,
+    onCardDragStart,
+    onCardDragEnd,
+    onDrop,
+    onDragOver,
+    onDragLeave,
+    onAddCard,
+    onMenuClick,
+    onCardKeyDown,
+    moveMode = false,
     children,
-    actions
+    actions,
+    class: className = '',
   }: Props = $props();
 
   let isDragTarget = $state(false);
 
-  // Derived state for WIP limit
-  let overLimit = $derived(isOverLimit || (wipLimit !== undefined && count > wipLimit));
-
   function handleDragOver(e: DragEvent) {
-    e.preventDefault(); // Necessary to allow dropping
+    e.preventDefault();
     if (e.dataTransfer) {
       e.dataTransfer.dropEffect = 'move';
     }
     isDragTarget = true;
-    ondragover?.(e);
+    onDragOver?.(column.id);
   }
 
   function handleDragLeave(e: DragEvent) {
     isDragTarget = false;
-    ondragleave?.(e);
+    onDragLeave?.(column.id);
   }
 
   function handleDrop(e: DragEvent) {
     e.preventDefault();
     isDragTarget = false;
-    ondrop?.(e);
+    const cardId = e.dataTransfer?.getData('text/plain');
+    if (cardId) {
+      onDrop?.(column.id, cardId);
+    }
   }
 </script>
 
-<div 
+<div
   class="ds-kanban-column {className}"
-  class:is-over-limit={overLimit}
-  data-column-id={id}
+  class:is-move-target={isMoveTarget}
+  data-column-id={column.id}
 >
   <header class="ds-kanban-column-header">
     <div class="ds-kanban-column-title-group">
-      <h3 class="ds-kanban-column-title">{title}</h3>
-      <Badge
-        variant={overLimit ? 'status' : 'outline'}
-        color={overLimit ? 'error' : 'neutral'}
-        size="sm"
-      >
-        {count} {#if wipLimit}/ {wipLimit}{/if}
-      </Badge>
+      {#if column.color}
+        <span
+          class="ds-kanban-column-color"
+          style="background: {column.color}"
+        ></span>
+      {/if}
+      <h3 class="ds-kanban-column-title">{column.title}</h3>
     </div>
 
-    {#if actions}
-      <div class="ds-kanban-column-actions">
+    <div class="ds-kanban-column-actions">
+      {#if actions}
         {@render actions()}
-      </div>
-    {/if}
-  </header>
-
-  <div 
-    class="ds-kanban-column-content"
-    class:is-drag-target={isDragTarget}
-    role="region"
-    aria-label={`${title} column`}
-    ondragover={handleDragOver}
-    ondragleave={handleDragLeave}
-    ondrop={handleDrop}
-  >
-    <div class="ds-kanban-column-scroll-area">
-      {#if children}
-        {@render children()}
+      {/if}
+      {#if onAddCard}
+        <button
+          class="ds-kanban-column-add-btn"
+          onclick={() => onAddCard?.(column.id)}
+          title="Add card"
+          aria-label={`Add card to ${column.title}`}
+        >
+          +
+        </button>
+      {/if}
+      {#if onMenuClick}
+        <button
+          class="ds-kanban-column-menu-btn"
+          onclick={() => onMenuClick?.(column.id)}
+          title="Column menu"
+          aria-label={`Menu for ${column.title}`}
+        >
+          ⋯
+        </button>
       {/if}
     </div>
+  </header>
+
+  {#if !isCollapsed}
+    <div
+      class="ds-kanban-column-content"
+      class:is-drag-target={isDropTarget || isDragTarget}
+      role="region"
+      aria-label={`${column.title} column`}
+      ondragover={handleDragOver}
+      ondragleave={handleDragLeave}
+      ondrop={handleDrop}
+    >
+      <div class="ds-kanban-column-scroll-area">
+        {#if children}
+          {@render children()}
+        {/if}
+      </div>
 
-    <!-- Drop indicator overlay -->
-    <div class="ds-kanban-drop-indicator"></div>
-  </div>
+      <div class="ds-kanban-drop-indicator"></div>
+    </div>
+  {/if}
 </div>
 
 <style>
   .ds-kanban-column {
     display: flex;
     flex-direction: column;
-    min-width: 320px;
-    max-width: 360px;
+    min-width: 18.75rem;
+    max-width: 22.5rem;
     height: 100%;
     background: var(--color-bg-panel);
-    border-radius: var(--radius-lg);
-    border: 1px solid var(--border-default);
+    border-radius: var(--radius-lg, 0.5rem);
+    border: var(--border-width-thin) solid var(--border-default);
     flex-shrink: 0;
-    transition: border-color var(--transition-normal);
+    transition: border-color var(--transition-normal, 0.2s);
   }
 
-  .ds-kanban-column.is-over-limit {
-    border-color: rgba(166, 94, 94, 0.4);
-    box-shadow: 0 0 0 1px rgba(166, 94, 94, 0.1) inset;
+  .ds-kanban-column.is-move-target {
+    border-color: var(--color-accent);
+    box-shadow: 0 0 0 var(--border-width-thin) var(--color-accent);
   }
 
   .ds-kanban-column-header {
@@ -124,13 +171,21 @@
     align-items: center;
     justify-content: space-between;
     padding: var(--space-4);
-    border-bottom: 1px solid var(--border-subtle);
+    border-bottom: var(--border-width-thin) solid var(--border-subtle);
+    flex-shrink: 0;
   }
 
   .ds-kanban-column-title-group {
     display: flex;
     align-items: center;
-    gap: var(--space-3);
+    gap: var(--space-2);
+  }
+
+  .ds-kanban-column-color {
+    width: var(--space-2);
+    height: var(--space-2);
+    border-radius: 50%;
+    flex-shrink: 0;
   }
 
   .ds-kanban-column-title {
@@ -143,7 +198,29 @@
   .ds-kanban-column-actions {
     display: flex;
     align-items: center;
-    gap: var(--space-2);
+    gap: var(--space-1);
+  }
+
+  .ds-kanban-column-add-btn,
+  .ds-kanban-column-menu-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    border: none;
+    color: var(--color-text-tertiary);
+    padding: var(--space-1);
+    border-radius: var(--radius-sm, 0.25rem);
+    cursor: pointer;
+    font-size: var(--text-base);
+    line-height: 1;
+    transition: color 0.15s, background 0.15s;
+  }
+
+  .ds-kanban-column-add-btn:hover,
+  .ds-kanban-column-menu-btn:hover {
+    color: var(--color-text-secondary);
+    background: var(--color-bg-canvas);
   }
 
   .ds-kanban-column-content {
@@ -151,9 +228,8 @@
     flex: 1;
     display: flex;
     flex-direction: column;
-    min-height: 100px;
-    background: transparent;
-    transition: background var(--transition-fast);
+    min-height: 5rem;
+    transition: background var(--transition-fast, 0.15s);
   }
 
   .ds-kanban-column-scroll-area {
@@ -165,9 +241,8 @@
     height: 100%;
   }
 
-  /* Custom scrollbar for column */
   .ds-kanban-column-scroll-area::-webkit-scrollbar {
-    width: 6px;
+    width: var(--size-divider);
   }
   .ds-kanban-column-scroll-area::-webkit-scrollbar-thumb {
     background: rgba(255, 255, 255, 0.1);
@@ -177,19 +252,18 @@
     background: transparent;
   }
 
-  /* Drag Target State */
   .ds-kanban-column-content.is-drag-target {
-    background: var(--color-accent-faint); /* Very subtle brass tint */
+    background: var(--color-accent-faint, rgba(184,115,51,0.06));
   }
 
   .ds-kanban-drop-indicator {
     position: absolute;
     inset: var(--space-3);
-    border: 2px dashed var(--color-accent);
+    border: var(--border-width-default) dashed var(--color-accent);
     border-radius: var(--radius-md);
     opacity: 0;
     pointer-events: none;
-    transition: opacity var(--transition-fast);
+    transition: opacity var(--transition-fast, 0.15s);
   }
 
   .ds-kanban-column-content.is-drag-target .ds-kanban-drop-indicator {

package/dist/l0-layout/kanban/KanbanColumn.svelte.d.ts

@@ -1,16 +1,37 @@
+/**
+   * KanbanColumn — Merged canonical component.
+   *
+   * Combines fabric's ColumnState props pattern with l0's Snippet children,
+   * Badge composition, WIP limit, and ds-kanban-* CSS classes.
+   *
+   * @package @kos/design-system/fabric/layout
+   */
 import type { Snippet } from 'svelte';
-interface Props {
+import type { CardData } from './KanbanCard.svelte';
+export interface ColumnData {
     id: string;
     title: string;
-    count?: number;
+    color?: string;
     wipLimit?: number;
-    isOverLimit?: boolean;
-    class?: string;
-    ondragover?: (e: DragEvent) => void;
-    ondragleave?: (e: DragEvent) => void;
-    ondrop?: (e: DragEvent) => void;
+}
+export interface Props {
+    column: ColumnData;
+    isDropTarget?: boolean;
+    isCollapsed?: boolean;
+    isMoveTarget?: boolean;
+    onCardClick?: (card: CardData) => void;
+    onCardDragStart?: (card: CardData) => void;
+    onCardDragEnd?: () => void;
+    onDrop?: (targetColumnId: string, cardId: string) => void;
+    onDragOver?: (columnId: string) => void;
+    onDragLeave?: (columnId: string) => void;
+    onAddCard?: (columnId: string) => void;
+    onMenuClick?: (columnId: string) => void;
+    onCardKeyDown?: (e: KeyboardEvent, cardId: string, sourceColumnId: string) => void;
+    moveMode?: boolean;
     children?: Snippet;
     actions?: Snippet;
+    class?: string;
 }
 declare const KanbanColumn: import("svelte").Component<Props, {}, "">;
 type KanbanColumn = ReturnType<typeof KanbanColumn>;

package/dist/l0-layout/kanban/KanbanColumn.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"KanbanColumn.svelte.d.ts","sourceRoot":"","sources":["../../../src/l0-layout/kanban/KanbanColumn.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIpC,UAAU,KAAK;IACb,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,CAAC;IACpC,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,CAAC;IACrC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AA8EH,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/l0-layout/kanban/KanbanColumn.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;;KAOK;AACL,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,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,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,KAAK;IACpB,MAAM,EAAE,UAAU,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,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,MAAM,IAAI,CAAC;IAC3B,MAAM,CAAC,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1D,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,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,KAAK,IAAI,CAAC;IACnF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAiGH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

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

@@ -0,0 +1,6 @@
+export { default as KanbanBoard } from './KanbanBoard.svelte';
+export { default as KanbanColumn } from './KanbanColumn.svelte';
+export { default as KanbanCard } from './KanbanCard.svelte';
+export type { ColumnData } from './KanbanColumn.svelte';
+export type { CardData } from './KanbanCard.svelte';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/l0-layout/kanban/index.ts"],"names":[],"mappings":"AAAA,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,uBAAuB,CAAC;AACxD,YAAY,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/l0-layout/kanban/index.js

@@ -0,0 +1,3 @@
+export { default as KanbanBoard } from './KanbanBoard.svelte';
+export { default as KanbanColumn } from './KanbanColumn.svelte';
+export { default as KanbanCard } from './KanbanCard.svelte';

package/dist/n0-node-graph/Node.svelte

@@ -243,7 +243,7 @@
   }
 
   .n0-node-label {
-    fill: var(--color-text, #e8e0d0);
+    fill: var(--color-text-primary, #e8e0d0);
     font-family: system-ui, sans-serif;
     font-size: 13px;
     font-weight: 500;
@@ -262,7 +262,7 @@
   .n0-node-body {
     overflow: hidden;
     padding: 8px;
-    color: var(--color-text, #e8e0d0);
+    color: var(--color-text-primary, #e8e0d0);
     font-family: system-ui, sans-serif;
     font-size: 13px;
   }

package/dist/n0-node-graph/NodePalette.svelte

@@ -156,7 +156,7 @@
     border-right: 1px solid var(--n0-node-border);
     overflow: hidden;
     font-family: var(--font-mono, monospace);
-    color: var(--color-text, #e8e0d0);
+    color: var(--color-text-primary, #e8e0d0);
   }
 
   .n0-palette-search {
@@ -172,7 +172,7 @@
     background: var(--n0-canvas-bg);
     border: 1px solid var(--n0-node-border);
     border-radius: var(--radius-sm, 4px);
-    color: var(--color-text, #e8e0d0);
+    color: var(--color-text-primary, #e8e0d0);
     font-family: inherit;
     font-size: 0.8rem;
     outline: none;

package/dist/n1-flow-canvas/graph-state.test.js

@@ -0,0 +1,69 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { GraphState } from './graph-state.svelte';
+beforeEach(() => {
+    vi.useFakeTimers();
+});
+afterEach(() => {
+    vi.useRealTimers();
+});
+describe('n1-flow-canvas/GraphState', () => {
+    it('initializes with empty positions', () => {
+        const gs = new GraphState();
+        expect(gs.positions.size).toBe(0);
+        expect(gs.bfsOrder).toEqual([]);
+    });
+    it('applyLayout sets positions and bfsOrder', () => {
+        const gs = new GraphState();
+        const positions = new Map([
+            ['n1', { id: 'n1', x: 10, y: 20, width: 100, height: 50 }],
+            ['n2', { id: 'n2', x: 200, y: 300, width: 80, height: 40 }],
+        ]);
+        gs.applyLayout({ positions, bfsOrder: ['n1', 'n2'] });
+        vi.advanceTimersByTime(5000);
+        expect(gs.positions.size).toBe(2);
+        expect(gs.bfsOrder).toEqual(['n1', 'n2']);
+    });
+    it('setFocusCenter updates focusCenterId', () => {
+        const gs = new GraphState();
+        gs.setFocusCenter('n1');
+        expect(gs.focusCenterId).toBe('n1');
+    });
+    it('setLayoutRoot updates layoutRootId', () => {
+        const gs = new GraphState();
+        gs.setLayoutRoot('n1');
+        expect(gs.layoutRootId).toBe('n1');
+    });
+    it('setLayoutRoot calls onLayoutRootChange callback', () => {
+        const gs = new GraphState();
+        const callback = vi.fn();
+        gs.onLayoutRootChange = callback;
+        gs.setLayoutRoot('n1');
+        expect(callback).toHaveBeenCalledWith('n1');
+    });
+    it('destroy cancels animation', () => {
+        const gs = new GraphState();
+        const positions = new Map([
+            ['n1', { id: 'n1', x: 10, y: 20, width: 100, height: 50 }],
+        ]);
+        gs.applyLayout({ positions, bfsOrder: ['n1'] });
+        gs.destroy();
+        // Should not throw
+        vi.advanceTimersByTime(5000);
+    });
+    it('new applyLayout replaces previous positions', () => {
+        const gs = new GraphState();
+        const positions1 = new Map([
+            ['n1', { id: 'n1', x: 10, y: 20, width: 100, height: 50 }],
+        ]);
+        gs.applyLayout({ positions: positions1, bfsOrder: ['n1'] });
+        vi.advanceTimersByTime(5000);
+        const positions2 = new Map([
+            ['n2', { id: 'n2', x: 50, y: 60, width: 80, height: 40 }],
+        ]);
+        gs.applyLayout({ positions: positions2, bfsOrder: ['n2'] });
+        vi.advanceTimersByTime(5000);
+        expect(gs.positions.size).toBe(1);
+        expect(gs.positions.has('n2')).toBe(true);
+        expect(gs.positions.has('n1')).toBe(false);
+    });
+});

package/dist/n1-flow-canvas/utils.test.js

@@ -0,0 +1,116 @@
+import { describe, it, expect } from 'vitest';
+import { nodeHitTest, domEventToCanvasCoords, parseMentionEdges, parseGroupedSequenceEdges, } from './utils';
+describe('n1-flow-canvas/utils', () => {
+    describe('nodeHitTest', () => {
+        it('returns node id when point is inside a node rect', () => {
+            const positions = new Map([
+                ['n1', { id: 'n1', x: 10, y: 20, width: 100, height: 50 }],
+                ['n2', { id: 'n2', x: 200, y: 200, width: 80, height: 40 }],
+            ]);
+            expect(nodeHitTest(50, 40, positions)).toBe('n1');
+        });
+        it('returns null when point is outside all nodes', () => {
+            const positions = new Map([
+                ['n1', { id: 'n1', x: 10, y: 20, width: 100, height: 50 }],
+            ]);
+            expect(nodeHitTest(500, 500, positions)).toBeNull();
+        });
+        it('returns null for empty positions map', () => {
+            expect(nodeHitTest(50, 50, new Map())).toBeNull();
+        });
+        it('returns first matching node for overlapping rects', () => {
+            const positions = new Map();
+            positions.set('a', { id: 'a', x: 0, y: 0, width: 100, height: 100 });
+            positions.set('b', { id: 'b', x: 50, y: 50, width: 100, height: 100 });
+            const result = nodeHitTest(60, 60, positions);
+            expect(result).toBe('a');
+        });
+    });
+    describe('domEventToCanvasCoords', () => {
+        it('converts DOM event to canvas pixel coordinates', () => {
+            const mockEvent = {
+                clientX: 100,
+                clientY: 200,
+                currentTarget: {
+                    getBoundingClientRect: () => ({
+                        left: 50,
+                        top: 100,
+                        width: 200,
+                        height: 400,
+                    }),
+                },
+            };
+            const coords = domEventToCanvasCoords(mockEvent, 800, 1600);
+            expect(coords.x).toBe(200);
+            expect(coords.y).toBe(400);
+        });
+        it('handles identity scale (1:1)', () => {
+            const mockEvent = {
+                clientX: 150,
+                clientY: 250,
+                currentTarget: {
+                    getBoundingClientRect: () => ({
+                        left: 50,
+                        top: 50,
+                        width: 800,
+                        height: 600,
+                    }),
+                },
+            };
+            const coords = domEventToCanvasCoords(mockEvent, 800, 600);
+            expect(coords.x).toBe(100);
+            expect(coords.y).toBe(200);
+        });
+    });
+    describe('parseMentionEdges', () => {
+        it('parses edges from description mentions', () => {
+            const items = [
+                { id: 'wt-1', description: 'Depends on wt-2 for setup' },
+                { id: 'wt-2', description: 'No deps' },
+            ];
+            const edges = parseMentionEdges(items, (t) => t.id, (t) => t.description ?? '', /wt-(\d+)/g, (m) => `wt-${m}`);
+            expect(edges.size).toBe(1);
+            expect(edges.has('wt-1->wt-2')).toBe(true);
+        });
+        it('returns empty map for items with no mentions', () => {
+            const items = [
+                { id: 'wt-1', description: 'No references here' },
+                { id: 'wt-2', description: 'Also none' },
+            ];
+            const edges = parseMentionEdges(items, (t) => t.id, (t) => t.description ?? '', /wt-(\d+)/g, (m) => `wt-${m}`);
+            expect(edges.size).toBe(0);
+        });
+        it('skips mentions to unknown ids', () => {
+            const items = [
+                { id: 'wt-1', description: 'Depends on wt-999' },
+            ];
+            const edges = parseMentionEdges(items, (t) => t.id, (t) => t.description ?? '', /wt-(\d+)/g, (m) => `wt-${m}`);
+            expect(edges.size).toBe(0);
+        });
+    });
+    describe('parseGroupedSequenceEdges', () => {
+        it('chains items sharing the same group key', () => {
+            const items = [
+                { id: 'a', domain: 'x', workspace: 'w1', createdAt: '2024-01-01' },
+                { id: 'b', domain: 'x', workspace: 'w1', createdAt: '2024-01-02' },
+                { id: 'c', domain: 'x', workspace: 'w1', createdAt: '2024-01-03' },
+            ];
+            const edges = parseGroupedSequenceEdges(items, (t) => t.id, (t) => `${t.domain}:${t.workspace}`, (t) => t.createdAt);
+            expect(edges.size).toBe(2);
+            expect(edges.has('a->b')).toBe(true);
+            expect(edges.has('b->c')).toBe(true);
+        });
+        it('returns empty map for single-item groups', () => {
+            const items = [
+                { id: 'a', domain: 'x', workspace: 'w1', createdAt: '2024-01-01' },
+                { id: 'b', domain: 'y', workspace: 'w2', createdAt: '2024-01-01' },
+            ];
+            const edges = parseGroupedSequenceEdges(items, (t) => t.id, (t) => `${t.domain}:${t.workspace}`, (t) => t.createdAt);
+            expect(edges.size).toBe(0);
+        });
+        it('handles empty input', () => {
+            const edges = parseGroupedSequenceEdges([], (t) => t.id, (t) => t.group, (t) => t.sort);
+            expect(edges.size).toBe(0);
+        });
+    });
+});

package/dist/n3-force-graph/GraphTooltip.svelte

@@ -70,12 +70,12 @@
     z-index: 1000;
     pointer-events: none;
 
-    background: var(--bg-elevated, #2a2a2a);
+    background: var(--color-bg-elevated, #2a2a2a);
     border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
     border-radius: var(--radius-sm, 6px);
     padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
 
-    color: var(--text-primary, #f2efe9);
+    color: var(--color-text-primary, #f2efe9);
     font-family: var(--font-mono, 'JetBrains Mono', monospace);
     font-size: 0.75rem;
     line-height: 1.4;