@stephen-netu/design-system 0.2.1 → 0.5.1

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(128,128,128,0.05));
   }
 
   .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/FlowCanvas.svelte

@@ -7,10 +7,11 @@
   import { Canvas, Layer } from 'svelte-canvas';
   import { getArrow } from 'perfect-arrows';
   import type { GraphSnapshot, GraphStateApi } from './types.js';
+  import type { CanvasTheme } from '../p0-primitives/canvas-theme';
   import { GraphState } from './graph-state.svelte.js';
   import { runLayout } from './layout.js';
   import { EDGE_REVEAL_STAGGER_MS } from './types.js';
-   import { getCanvasTheme } from '../p0-primitives/canvas-theme';
+  import { getCanvasTheme } from '../p0-primitives/canvas-theme';
 
   // ── Props ────────────────────────────────────────────────────────────────────
 
@@ -89,6 +90,18 @@
 
   const NODE_RADIUS = 4;
   const FONT = '12px var(--font-mono, monospace)';
+  const BADGE_FONT = '10px var(--font-mono, monospace)';
+
+  function statusColors(status: unknown, theme: CanvasTheme) {
+    switch (status) {
+      case 'Running': return { fill: theme.quaternion.j + '22', stroke: theme.quaternion.j, label: theme.quaternion.j };
+      case 'Passed':  return { fill: theme.quaternion.j + '18', stroke: theme.quaternion.j, label: theme.quaternion.j };
+      case 'Failed':  return { fill: theme.severity.critical + '22', stroke: theme.severity.critical, label: theme.severity.critical };
+      case 'Crashed': return { fill: theme.severity.critical + '22', stroke: theme.severity.critical, label: theme.severity.critical };
+      case 'Skipped': return { fill: theme.node, stroke: theme.severity.minor, label: theme.severity.minor };
+      default:        return { fill: theme.node, stroke: theme.nodeBorder, label: theme.nodeText };
+    }
+  }
 
   // ── Render ──────────────────────────────────────────────────────────────────
 
@@ -165,10 +178,12 @@
 
       const isFocus  = node.id === focusId;
       const { x, y, width: w, height: h } = pos;
+      const status = node.data?.['status'];
+      const { fill, stroke, label: labelColor } = statusColors(status, COLORS);
 
       // Node body
-      context.fillStyle   = isFocus ? COLORS.focus : COLORS.node;
-      context.strokeStyle = COLORS.nodeBorder;
+      context.fillStyle   = isFocus ? COLORS.focus : fill;
+      context.strokeStyle = isFocus ? COLORS.focus : stroke;
       context.lineWidth   = isFocus ? 2 : 1;
 
       context.beginPath();
@@ -177,14 +192,43 @@
       context.stroke();
 
       // Label
-      context.fillStyle  = COLORS.nodeText;
+      context.fillStyle  = isFocus ? '#000' : labelColor;
       context.font       = FONT;
       context.textAlign  = 'center';
       context.textBaseline = 'middle';
-      // Truncate if needed
       const maxWidth = w - 16;
-      const label = node.label.length > 18 ? node.label.slice(0, 16) + '…' : node.label;
+      const label = node.label.length > 20 ? node.label.slice(0, 18) + '…' : node.label;
       context.fillText(label, x + w / 2, y + h / 2, maxWidth);
+
+      // Error indicator
+      if (node.data?.['error']) {
+        context.fillStyle = COLORS.severity.critical;
+        context.font = '11px var(--font-mono, monospace)';
+        context.textAlign = 'right';
+        context.textBaseline = 'top';
+        context.fillText('⚠', x + w - 4, y + 4);
+      }
+
+      // Attempt badge (when > 1)
+      const attempt = node.data?.['attempt'];
+      if (typeof attempt === 'number' && attempt > 1) {
+        const badge = `#${attempt}`;
+        context.font = BADGE_FONT;
+        const bw = context.measureText(badge).width + 8;
+        const bh = 14;
+        const bx = x + w - bw - 4;
+        const by = y + h - bh - 4;
+
+        context.fillStyle = COLORS.accentRamp.solid;
+        context.beginPath();
+        context.roundRect(bx, by, bw, bh, 3);
+        context.fill();
+
+        context.fillStyle = '#000';
+        context.textAlign = 'center';
+        context.textBaseline = 'middle';
+        context.fillText(badge, bx + bw / 2, by + bh / 2);
+      }
     }
   }
 </script>

package/dist/n1-flow-canvas/FlowCanvas.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FlowCanvas.svelte.d.ts","sourceRoot":"","sources":["../../src/n1-flow-canvas/FlowCanvas.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAS7D,UAAU,KAAK;IACb,QAAQ,EAAE,aAAa,CAAC;IACxB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AA8LH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"FlowCanvas.svelte.d.ts","sourceRoot":"","sources":["../../src/n1-flow-canvas/FlowCanvas.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAU7D,UAAU,KAAK;IACb,QAAQ,EAAE,aAAa,CAAC;IACxB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AA0OH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

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/index.d.ts

@@ -3,4 +3,6 @@ export { EDGE_REVEAL_STAGGER_MS } from './types.js';
 export { default as FlowCanvas } from './FlowCanvas.svelte';
 export { GraphState } from './graph-state.svelte';
 export { nodeHitTest, domEventToCanvasCoords, parseMentionEdges, parseGroupedSequenceEdges } from './utils.js';
+export { pipelineStateToSnapshot, createEmptyPipelineSnapshot, PIPELINE_STAGE_NAMES, } from './pipeline-adapter.js';
+export type { PipelineState, PipelineStageData, PipelineStatus, PipelineTermination, } from './pipeline-adapter.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/n1-flow-canvas/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/n1-flow-canvas/index.ts"],"names":[],"mappings":"AAGA,YAAY,EACV,SAAS,EACT,SAAS,EACT,aAAa,EACb,UAAU,EACV,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,aAAa,EACb,aAAa,EACb,eAAe,GAChB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAC;AAEpD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,sBAAsB,EAAE,iBAAiB,EAAE,yBAAyB,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/n1-flow-canvas/index.ts"],"names":[],"mappings":"AAGA,YAAY,EACV,SAAS,EACT,SAAS,EACT,aAAa,EACb,UAAU,EACV,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,aAAa,EACb,aAAa,EACb,eAAe,GAChB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAC;AAEpD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,sBAAsB,EAAE,iBAAiB,EAAE,yBAAyB,EAAE,MAAM,YAAY,CAAC;AAC/G,OAAO,EACL,uBAAuB,EACvB,2BAA2B,EAC3B,oBAAoB,GACrB,MAAM,uBAAuB,CAAC;AAC/B,YAAY,EACV,aAAa,EACb,iBAAiB,EACjB,cAAc,EACd,mBAAmB,GACpB,MAAM,uBAAuB,CAAC"}

package/dist/n1-flow-canvas/index.js

@@ -4,3 +4,4 @@ export { EDGE_REVEAL_STAGGER_MS } from './types.js';
 export { default as FlowCanvas } from './FlowCanvas.svelte';
 export { GraphState } from './graph-state.svelte';
 export { nodeHitTest, domEventToCanvasCoords, parseMentionEdges, parseGroupedSequenceEdges } from './utils.js';
+export { pipelineStateToSnapshot, createEmptyPipelineSnapshot, PIPELINE_STAGE_NAMES, } from './pipeline-adapter.js';

package/dist/n1-flow-canvas/pipeline-adapter.d.ts

@@ -0,0 +1,37 @@
+import type { GraphSnapshot } from './types.js';
+export interface PipelineTermination {
+    reason: string;
+    final_tokens: number;
+}
+export interface PipelineStageData {
+    id: string;
+    name: string;
+    status: PipelineStatus;
+    attempt: number;
+    selected_model: string | null;
+    termination: PipelineTermination | null;
+    artifact_path: string | null;
+    error: string | null;
+    locked_by: string | null;
+    started_at: string | null;
+    completed_at: string | null;
+}
+export type PipelineStatus = 'Pending' | 'Running' | 'Passed' | 'Failed' | 'Skipped' | 'Crashed';
+export interface PipelineState {
+    run_id: string;
+    task_id: string;
+    requested_id: string;
+    base_main_sha: string | null;
+    prior_tos_status: string | null;
+    worktree_path: string | null;
+    stages: PipelineStageData[];
+    remediation_count: number;
+    max_remediation: number;
+    locked_by: string;
+    created_at: string;
+    updated_at: string;
+}
+export declare const PIPELINE_STAGE_NAMES: string[];
+export declare function pipelineStateToSnapshot(state: PipelineState): GraphSnapshot;
+export declare function createEmptyPipelineSnapshot(): GraphSnapshot;
+//# sourceMappingURL=pipeline-adapter.d.ts.map