@atmos.build/ui 0.1.0

package/dist/flow/canvas/editor-context.d.ts

@@ -0,0 +1,23 @@
+export type FlowEditorContextValue = {
+    readonly hoveredEdgeId: string | null;
+    readonly highlightedNodeId: string | null;
+    readonly highlightedEdgeIds: ReadonlySet<string>;
+    readonly invalidNodeIds: ReadonlySet<string>;
+    readonly remoteSelectedNodeIds: ReadonlySet<string>;
+    readonly requestInsert: (edgeId: string) => void;
+    readonly deleteNode: (id: string) => void;
+    readonly deleteEdge: (id: string) => void;
+    readonly duplicateNode: (id: string) => void;
+    /** Read-only run replay overlay: gates editing affordances and colors nodes/edges by run status. */
+    readonly replay: boolean;
+    /** Per-node run status (`ok` / `error` / `running` / `waiting` / `skipped`) keyed by node id. */
+    readonly statusByNode: Readonly<Record<string, string>>;
+    /** Per-node run duration (ms) keyed by node id, shown as the node's stat during replay. */
+    readonly durationByNode: Readonly<Record<string, number>>;
+    /** Per source node, the handle ids whose outgoing edge the run took (branch highlight). */
+    readonly takenHandlesByNode: Readonly<Record<string, readonly string[]>>;
+    /** Traversed edges keyed by `from->to` node-pair, for the replay path highlight. */
+    readonly traversedEdgeIds: ReadonlySet<string>;
+};
+export declare const FlowEditorContext: import("react").Context<FlowEditorContextValue | null>;
+export declare function useFlowEditor(): FlowEditorContextValue | null;

package/dist/flow/canvas/editor-context.js

@@ -0,0 +1,6 @@
+'use client';
+import { createContext, useContext } from 'react';
+export const FlowEditorContext = createContext(null);
+export function useFlowEditor() {
+    return useContext(FlowEditorContext);
+}

package/dist/flow/canvas/graph-core.d.ts

@@ -0,0 +1,60 @@
+import { type Edge as RfEdge, type Node as RfNode } from 'reactflow';
+export declare const GRID = 4;
+export declare const NODE_W = 200;
+export declare const NODE_H = 64;
+export declare function snapCoord(value: number): number;
+export declare function edgeId(source: string, target: string, handle?: string | null): string;
+export declare function rfEdge<TEdge = unknown>(source: string, target: string, opts?: {
+    handle?: string | null;
+    data?: TEdge;
+    active?: boolean;
+    type?: string;
+}): RfEdge<TEdge>;
+export declare function findFreePosition<TData = unknown>(nodes: ReadonlyArray<Pick<RfNode<TData>, 'id' | 'position' | 'width' | 'height'>>, desired: {
+    x: number;
+    y: number;
+}, excludeId?: string): {
+    x: number;
+    y: number;
+};
+export type InlineInsert<TData> = {
+    position: {
+        x: number;
+        y: number;
+    };
+    shiftDownstream: (node: RfNode<TData>) => RfNode<TData>;
+};
+export declare function inlineInsertOnEdge<TData>(source: Pick<RfNode<TData>, 'position'>, target: Pick<RfNode<TData>, 'position'>): InlineInsert<TData> | null;
+export declare function restitchEdgesWithoutNode<TEdge>(edges: RfEdge<TEdge>[], id: string, buildBridge: (args: {
+    source: string;
+    target: string;
+    handle: string | undefined;
+    upstream: RfEdge<TEdge>;
+}) => RfEdge<TEdge>): RfEdge<TEdge>[];
+export declare function wouldCycle(edges: ReadonlyArray<Pick<RfEdge, 'source' | 'target'>>, source: string, target: string): boolean;
+export declare function wouldCycleFromAdjacency(adjacency: Map<string, readonly string[]>, source: string, target: string): boolean;
+export declare function layeredLayout<TData = unknown, TEdge = unknown>(nodes: RfNode<TData>[], edges: RfEdge<TEdge>[], handleOrderOf?: (sourceId: string, sourceHandle: string | null | undefined) => number | null): Map<string, {
+    x: number;
+    y: number;
+}>;
+export type DagHistory<TSnapshot> = {
+    record: (snapshot: TSnapshot, coalesceKey?: string | null) => void;
+    undo: (current: TSnapshot) => TSnapshot | null;
+    redo: (current: TSnapshot) => TSnapshot | null;
+    clear: () => void;
+    canUndo: () => boolean;
+    canRedo: () => boolean;
+};
+export declare function createDagHistory<TSnapshot>(limit?: number, now?: () => number): DagHistory<TSnapshot>;
+export type ClipboardPayload<TData, TEdge> = {
+    kind: string;
+    nodes: Array<Pick<RfNode<TData>, 'id' | 'position' | 'data'>>;
+    edges: Array<Pick<RfEdge<TEdge>, 'id' | 'source' | 'target' | 'sourceHandle' | 'data'>>;
+};
+export declare function serializeClipboard<TData, TEdge>(kind: string, nodes: RfNode<TData>[], edges: RfEdge<TEdge>[], selectedIds: ReadonlySet<string>): ClipboardPayload<TData, TEdge>;
+export declare function deserializeClipboard<TData, TEdge>(expectedKind: string, payload: ClipboardPayload<TData, TEdge>, opts?: {
+    nodeType?: string;
+}): {
+    nodes: RfNode<TData>[];
+    edges: RfEdge<TEdge>[];
+} | null;

package/dist/flow/canvas/graph-core.js

@@ -0,0 +1,296 @@
+import {} from 'reactflow';
+export const GRID = 4;
+export const NODE_W = 200;
+export const NODE_H = 64;
+const HISTORY_LIMIT = 50;
+const HISTORY_COALESCE_MS = 1200;
+export function snapCoord(value) {
+    return Math.round(value / GRID) * GRID;
+}
+export function edgeId(source, target, handle) {
+    return handle ? `${source}:${handle}->${target}` : `${source}->${target}`;
+}
+export function rfEdge(source, target, opts = {}) {
+    const { handle, data, type = 'atmos' } = opts;
+    return {
+        id: edgeId(source, target, handle),
+        source,
+        target,
+        ...(handle ? { sourceHandle: handle } : {}),
+        type,
+        ...(data !== undefined ? { data } : {}),
+    };
+}
+export function findFreePosition(nodes, desired, excludeId) {
+    const margin = 16;
+    let candidate = { x: snapCoord(desired.x), y: snapCoord(desired.y) };
+    for (let i = 0; i < 64; i += 1) {
+        const overlaps = nodes.some((node) => {
+            if (node.id === excludeId)
+                return false;
+            const w = node.width ?? NODE_W;
+            const h = node.height ?? NODE_H;
+            return (candidate.x < node.position.x + w + margin &&
+                candidate.x + NODE_W + margin > node.position.x &&
+                candidate.y < node.position.y + h + margin &&
+                candidate.y + NODE_H + margin > node.position.y);
+        });
+        if (!overlaps)
+            return candidate;
+        candidate = { x: candidate.x, y: candidate.y + NODE_H + 32 };
+    }
+    return candidate;
+}
+// Insert a node onto a left-to-right edge without dropping it below the line:
+// the new node takes the target's column (aligned to the source/target line)
+// and the target plus everything to its right slides one layer over to open the
+// gap. Returns null when the edge isn't forward (target left of source), so the
+// caller can fall back to free-position placement.
+export function inlineInsertOnEdge(source, target) {
+    const threshold = target.position.x;
+    if (threshold <= source.position.x)
+        return null;
+    const position = {
+        x: threshold,
+        y: snapCoord((source.position.y + target.position.y) / 2),
+    };
+    const shiftDownstream = (node) => node.position.x >= threshold
+        ? { ...node, position: { ...node.position, x: node.position.x + LAYER_X } }
+        : node;
+    return { position, shiftDownstream };
+}
+export function restitchEdgesWithoutNode(edges, id, buildBridge) {
+    const incoming = edges.filter((e) => e.target === id);
+    const outgoing = edges.filter((e) => e.source === id);
+    const remaining = edges.filter((e) => e.source !== id && e.target !== id);
+    const kept = [...remaining];
+    for (const i of incoming) {
+        for (const o of outgoing) {
+            if (i.source === o.target)
+                continue;
+            const handle = i.sourceHandle ?? undefined;
+            const bridgeId = edgeId(i.source, o.target, handle);
+            if (kept.some((e) => e.id === bridgeId ||
+                (e.source === i.source &&
+                    e.target === o.target &&
+                    (e.sourceHandle ?? null) === (handle ?? null))))
+                continue;
+            if (wouldCycle(kept, i.source, o.target))
+                continue;
+            kept.push(buildBridge({ source: i.source, target: o.target, handle, upstream: i }));
+        }
+    }
+    return kept;
+}
+export function wouldCycle(edges, source, target) {
+    if (source === target)
+        return true;
+    const adjacency = new Map();
+    for (const e of edges) {
+        const list = adjacency.get(e.source) ?? [];
+        list.push(e.target);
+        adjacency.set(e.source, list);
+    }
+    return wouldCycleFromAdjacency(adjacency, source, target);
+}
+export function wouldCycleFromAdjacency(adjacency, source, target) {
+    if (source === target)
+        return true;
+    const stack = [target];
+    const seen = new Set();
+    while (stack.length) {
+        const current = stack.pop();
+        if (current === source)
+            return true;
+        if (seen.has(current))
+            continue;
+        seen.add(current);
+        for (const next of adjacency.get(current) ?? [])
+            stack.push(next);
+    }
+    return false;
+}
+const LAYER_X = 280;
+const ROW_Y = 120;
+const LAYOUT_ORIGIN = { x: 48, y: 80 };
+export function layeredLayout(nodes, edges, handleOrderOf) {
+    const incoming = new Map();
+    const outgoing = new Map();
+    for (const n of nodes)
+        incoming.set(n.id, 0);
+    for (const e of edges) {
+        if (!incoming.has(e.target) || !incoming.has(e.source))
+            continue;
+        incoming.set(e.target, (incoming.get(e.target) ?? 0) + 1);
+        const list = outgoing.get(e.source) ?? [];
+        list.push(e.target);
+        outgoing.set(e.source, list);
+    }
+    const layer = new Map();
+    for (const n of nodes)
+        layer.set(n.id, 0);
+    const indegree = new Map(incoming);
+    const queue = nodes.filter((n) => (incoming.get(n.id) ?? 0) === 0).map((n) => n.id);
+    const visited = new Set();
+    while (queue.length) {
+        const id = queue.shift();
+        if (visited.has(id))
+            continue;
+        visited.add(id);
+        const here = layer.get(id) ?? 0;
+        for (const next of outgoing.get(id) ?? []) {
+            layer.set(next, Math.max(layer.get(next) ?? 0, here + 1));
+            indegree.set(next, (indegree.get(next) ?? 1) - 1);
+            if ((indegree.get(next) ?? 0) <= 0)
+                queue.push(next);
+        }
+    }
+    const byLayer = new Map();
+    for (const n of nodes) {
+        const l = layer.get(n.id) ?? 0;
+        const list = byLayer.get(l) ?? [];
+        list.push(n.id);
+        byLayer.set(l, list);
+    }
+    const parents = new Map();
+    const fallbackOrder = new Map();
+    for (const e of edges) {
+        if (!incoming.has(e.target) || !incoming.has(e.source))
+            continue;
+        let handleOrder = handleOrderOf?.(e.source, e.sourceHandle) ?? null;
+        if (handleOrder == null) {
+            handleOrder = fallbackOrder.get(e.source) ?? 0;
+            fallbackOrder.set(e.source, handleOrder + 1);
+        }
+        const list = parents.get(e.target) ?? [];
+        list.push({ id: e.source, handleOrder });
+        parents.set(e.target, list);
+    }
+    const inputOrder = new Map();
+    nodes.forEach((n, i) => inputOrder.set(n.id, i));
+    // Order each layer top-to-bottom so a node sits next to its parents
+    // (barycenter), and siblings stack in the same order as the source handles
+    // they leave from. Without this, targets keep their input order and edges
+    // weave across the gap, crossing each other and the nodes between layers.
+    const rank = new Map();
+    const result = new Map();
+    for (const l of [...byLayer.keys()].sort((a, b) => a - b)) {
+        const ranked = (byLayer.get(l) ?? []).map((id) => {
+            const placed = (parents.get(id) ?? []).filter((p) => rank.has(p.id));
+            const barycenter = placed.length
+                ? placed.reduce((sum, p) => sum + (rank.get(p.id) ?? 0), 0) / placed.length
+                : Number.POSITIVE_INFINITY;
+            const sibling = placed.length
+                ? placed.reduce((sum, p) => sum + p.handleOrder, 0) / placed.length
+                : 0;
+            return { id, barycenter, sibling, input: inputOrder.get(id) ?? 0 };
+        });
+        ranked.sort((a, b) => a.barycenter - b.barycenter || a.sibling - b.sibling || a.input - b.input);
+        ranked.forEach((entry, row) => {
+            rank.set(entry.id, row);
+            result.set(entry.id, { x: LAYOUT_ORIGIN.x + l * LAYER_X, y: LAYOUT_ORIGIN.y + row * ROW_Y });
+        });
+    }
+    return result;
+}
+export function createDagHistory(limit = HISTORY_LIMIT, now = Date.now) {
+    const past = [];
+    let future = [];
+    let lastKey = null;
+    let lastAt = 0;
+    return {
+        record(snapshot, coalesceKey = null) {
+            const ts = now();
+            future = [];
+            if (coalesceKey &&
+                coalesceKey === lastKey &&
+                ts - lastAt < HISTORY_COALESCE_MS &&
+                past.length > 0) {
+                lastAt = ts;
+                return;
+            }
+            const serialized = JSON.stringify(snapshot);
+            lastKey = coalesceKey;
+            lastAt = ts;
+            if (past[past.length - 1] === serialized)
+                return;
+            past.push(serialized);
+            if (past.length > limit)
+                past.shift();
+        },
+        undo(current) {
+            const prev = past.pop();
+            if (!prev)
+                return null;
+            future.push(JSON.stringify(current));
+            lastKey = null;
+            return JSON.parse(prev);
+        },
+        redo(current) {
+            const next = future.pop();
+            if (!next)
+                return null;
+            past.push(JSON.stringify(current));
+            if (past.length > limit)
+                past.shift();
+            lastKey = null;
+            return JSON.parse(next);
+        },
+        clear() {
+            past.length = 0;
+            future = [];
+            lastKey = null;
+            lastAt = 0;
+        },
+        canUndo: () => past.length > 0,
+        canRedo: () => future.length > 0,
+    };
+}
+export function serializeClipboard(kind, nodes, edges, selectedIds) {
+    return {
+        kind,
+        nodes: nodes
+            .filter((n) => selectedIds.has(n.id))
+            .map(({ id, position, data }) => ({ id, position, data })),
+        edges: edges
+            .filter((e) => selectedIds.has(e.source) && selectedIds.has(e.target))
+            .map(({ id, source, target, sourceHandle, data }) => ({
+            id,
+            source,
+            target,
+            sourceHandle,
+            data,
+        })),
+    };
+}
+let pasteSeq = 0;
+export function deserializeClipboard(expectedKind, payload, opts = {}) {
+    if (payload.kind !== expectedKind || payload.nodes.length === 0)
+        return null;
+    const nodeType = opts.nodeType ?? 'atmos';
+    pasteSeq += 1;
+    const suffix = `${Date.now().toString(36)}-${pasteSeq.toString(36)}`;
+    const idMap = new Map(payload.nodes.map((n, i) => [n.id, `${n.id}-copy-${suffix}-${i}`]));
+    const nodes = payload.nodes.map((n) => ({
+        id: idMap.get(n.id),
+        type: nodeType,
+        position: { x: n.position.x + 32, y: n.position.y + 32 },
+        selected: true,
+        data: n.data,
+    }));
+    const edges = payload.edges.reduce((acc, e) => {
+        const source = idMap.get(e.source);
+        const target = idMap.get(e.target);
+        if (!source || !target)
+            return acc;
+        acc.push({
+            ...rfEdge(source, target, {
+                ...(e.sourceHandle ? { handle: e.sourceHandle } : {}),
+                ...(e.data !== undefined ? { data: e.data } : {}),
+                type: nodeType,
+            }),
+        });
+        return acc;
+    }, []);
+    return { nodes, edges };
+}

package/dist/flow/canvas/minimap-sticky-overlay.d.ts

@@ -0,0 +1,4 @@
+import type { StickyNote } from './sticky-notes.js';
+export declare function MiniMapStickyOverlay({ annotations }: {
+    annotations: StickyNote[];
+}): import("react").JSX.Element | null;

package/dist/flow/canvas/minimap-sticky-overlay.js

@@ -0,0 +1,45 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useStore, getNodesBounds, getBoundsOfRects } from 'reactflow';
+const ELEMENT_WIDTH = 200;
+const ELEMENT_HEIGHT = 150;
+const OFFSET_SCALE = 5;
+const NOTE_WIDTH = 208;
+const NOTE_HEIGHT = 120;
+const NOTE_FILL = {
+    yellow: 'color-mix(in srgb, var(--color-amber-300) 28%, transparent)',
+    blue: 'color-mix(in srgb, var(--color-sky-300) 28%, transparent)',
+    green: 'color-mix(in srgb, var(--color-emerald-300) 28%, transparent)',
+    rose: 'color-mix(in srgb, var(--color-rose-300) 28%, transparent)',
+};
+const NOTE_STROKE = {
+    yellow: 'color-mix(in srgb, var(--color-amber-400) 45%, transparent)',
+    blue: 'color-mix(in srgb, var(--color-sky-400) 45%, transparent)',
+    green: 'color-mix(in srgb, var(--color-emerald-400) 45%, transparent)',
+    rose: 'color-mix(in srgb, var(--color-rose-400) 45%, transparent)',
+};
+const viewBoxSelector = (s) => {
+    const nodes = s.getNodes();
+    const viewBB = {
+        x: -s.transform[0] / s.transform[2],
+        y: -s.transform[1] / s.transform[2],
+        width: s.width / s.transform[2],
+        height: s.height / s.transform[2],
+    };
+    return nodes.length > 0 ? getBoundsOfRects(getNodesBounds(nodes, s.nodeOrigin), viewBB) : viewBB;
+};
+export function MiniMapStickyOverlay({ annotations }) {
+    const bounds = useStore(viewBoxSelector);
+    if (annotations.length === 0)
+        return null;
+    const viewScale = Math.max(bounds.width / ELEMENT_WIDTH, bounds.height / ELEMENT_HEIGHT);
+    const offset = OFFSET_SCALE * viewScale;
+    const x = bounds.x - (viewScale * ELEMENT_WIDTH - bounds.width) / 2 - offset;
+    const y = bounds.y - (viewScale * ELEMENT_HEIGHT - bounds.height) / 2 - offset;
+    const width = viewScale * ELEMENT_WIDTH + offset * 2;
+    const height = viewScale * ELEMENT_HEIGHT + offset * 2;
+    return (_jsx("svg", { width: ELEMENT_WIDTH, height: ELEMENT_HEIGHT, viewBox: `${x} ${y} ${width} ${height}`, className: "pointer-events-none", "aria-hidden": true, children: annotations.map((note) => {
+            const color = note.color ?? 'yellow';
+            return (_jsx("rect", { x: note.x, y: note.y, width: NOTE_WIDTH, height: NOTE_HEIGHT, rx: 6, fill: NOTE_FILL[color], stroke: NOTE_STROKE[color], strokeWidth: viewScale }, note.id));
+        }) }));
+}

package/dist/flow/canvas/node-card.d.ts

@@ -0,0 +1,46 @@
+import { type ReactNode } from 'react';
+export type FlowNodeSourceHandle = {
+    id: string;
+    top?: string | number;
+    label?: ReactNode;
+};
+export type FlowNodeTopTab = {
+    icon?: ReactNode;
+    label: ReactNode;
+    testId?: string;
+};
+export type FlowNodeCardProps = {
+    selected?: boolean;
+    highlighted?: boolean;
+    remoteSelected?: boolean;
+    running?: boolean;
+    completed?: boolean;
+    /** Amber outline for a node the run is paused on, awaiting approval. */
+    waiting?: boolean;
+    /** Destructive outline for a node whose run step failed. */
+    failed?: boolean;
+    /** Faded + dashed treatment for a node the run never reached (skipped branch). */
+    dimmed?: boolean;
+    /** Config/setup problem: destructive outline plus an alert marker on the icon. */
+    error?: boolean;
+    errorLabel?: string;
+    icon: ReactNode;
+    chipClassName?: string;
+    title: ReactNode;
+    summary?: ReactNode;
+    /** Small circular run-status marker pinned to the card's top-right corner. */
+    statusBadge?: ReactNode;
+    stat?: ReactNode;
+    topTab?: FlowNodeTopTab | null;
+    sourceHandles?: ReadonlyArray<FlowNodeSourceHandle>;
+    alwaysRowHandles?: boolean;
+    /** Source-handle rows to highlight as the branch the run actually took. */
+    takenHandleIds?: ReadonlySet<string>;
+    showTargetHandle?: boolean;
+    toolbarActions?: ReactNode;
+    width?: number;
+    height?: number;
+    headerClassName?: string;
+    testId?: string;
+};
+export declare function FlowNodeCard({ selected, highlighted, remoteSelected, running, completed, waiting, failed, dimmed, error, errorLabel, icon, chipClassName, title, summary, statusBadge, stat, topTab, sourceHandles, alwaysRowHandles, takenHandleIds, showTargetHandle, toolbarActions, width, height, headerClassName, testId, }: FlowNodeCardProps): import("react").JSX.Element;

package/dist/flow/canvas/node-card.js

@@ -0,0 +1,56 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { Handle, NodeToolbar, Position, useNodeId, useUpdateNodeInternals } from 'reactflow';
+import { AlertCircle } from 'lucide-react';
+import { cn } from '../../lib/cn.js';
+const HANDLE_CLASS = '!bg-background !border-border hover:!border-primary hover:!bg-primary/20 !size-2.5 !z-30 transition-colors';
+const COMPLETED_HANDLE_CLASS = '!border-primary';
+const HEADER_H = 56;
+export function FlowNodeCard({ selected = false, highlighted = false, remoteSelected = false, running = false, completed = false, waiting = false, failed = false, dimmed = false, error = false, errorLabel, icon, chipClassName, title, summary, statusBadge, stat, topTab, sourceHandles = [], alwaysRowHandles = false, takenHandleIds, showTargetHandle = true, toolbarActions, width = 200, height = 64, headerClassName, testId, }) {
+    const hasTab = topTab != null;
+    const rowMode = sourceHandles.length > 1 || (alwaysRowHandles && sourceHandles.length >= 1);
+    const soleHandle = sourceHandles.length === 1 ? sourceHandles[0] : null;
+    const active = selected || highlighted;
+    const handleClass = cn(HANDLE_CLASS, completed && COMPLETED_HANDLE_CLASS);
+    // React Flow caches handle geometry per node; reordering handles keeps the node
+    // size unchanged so the ResizeObserver never fires. Without this, edges keep
+    // pointing at the old handle positions after a reorder.
+    const nodeId = useNodeId();
+    const updateNodeInternals = useUpdateNodeInternals();
+    const handleSignature = sourceHandles.map((h) => h.id).join('|');
+    useEffect(() => {
+        if (nodeId)
+            updateNodeInternals(nodeId);
+    }, [nodeId, handleSignature, updateNodeInternals]);
+    return (_jsxs("div", { "data-testid": testId, style: rowMode ? { width, minHeight: height } : { width, height }, className: cn('bg-background group relative isolate rounded-lg border border-transparent shadow-[0_1px_2px_rgba(15,23,42,0.06)] transition-opacity select-none', 'before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:transition-colors', 
+        // The visible border is an ::after overlay above the trigger tab (z-10),
+        // so it stays unbroken where the tab meets the card.
+        'after:pointer-events-none after:absolute after:-inset-px after:z-20 after:rounded-[inherit] after:border after:transition-colors', hasTab && 'rounded-tl-none', dimmed && 'opacity-45 after:border-dashed', error
+            ? cn('after:border-destructive/70 before:bg-destructive/[0.05] ring-destructive/30', active ? 'ring-2' : 'ring-1')
+            : highlighted
+                ? 'after:border-primary/70 before:bg-primary/[0.055] ring-primary/25 ring-2'
+                : selected
+                    ? cn('before:bg-primary/[0.04] ring-primary/20 ring-2', completed ? 'after:border-primary' : 'after:border-primary/60')
+                    : remoteSelected
+                        ? 'ring-2 ring-sky-400/25 before:bg-sky-400/[0.055] after:border-sky-400/70'
+                        : waiting
+                            ? 'after:border-amber-500/70 before:bg-amber-500/[0.06]'
+                            : failed
+                                ? 'after:border-destructive/70 before:bg-destructive/[0.05]'
+                                : completed
+                                    ? 'after:border-primary'
+                                    : 'after:border-border/70 hover:after:border-foreground/25', (completed || waiting || failed) && 'after:border-[1.6px]', running && !error && 'after:border-primary/30'), children: [running ? _jsx("span", { "aria-hidden": true, className: "flow-node-running-ring" }) : null, toolbarActions != null ? (_jsx(NodeToolbar, { isVisible: selected, position: Position.Top, align: "end", offset: 6, children: _jsx("div", { className: "border-border/70 bg-background/95 flex items-center gap-1 rounded-md border p-0.5 shadow-sm", children: toolbarActions }) })) : null, hasTab ? (_jsxs("span", { "data-testid": topTab.testId, className: cn('absolute -top-[18px] flex h-[18px] max-w-full items-center gap-1.5 rounded-t-lg border border-b-0 px-2 font-mono text-[10px] leading-none', 
+                // When the trigger ran, the tab joins the completed outline as one
+                // open silhouette: its left edge aligns with the card's -inset-px
+                // border, it rides above the border overlay (z-30), and its ::after
+                // paints over the full border band beneath it so no seam shows.
+                completed && !error
+                    ? 'border-primary bg-background text-primary after:bg-background -left-px z-30 border-[1.6px] after:absolute after:inset-x-0 after:-bottom-px after:h-1'
+                    : active
+                        ? 'border-primary/30 bg-primary/[0.06] text-primary left-0 z-10'
+                        : 'border-border/70 bg-muted/60 text-muted-foreground left-0 z-10'), children: [topTab.icon != null ? (_jsx("span", { "aria-hidden": true, className: "flex shrink-0 items-center", children: topTab.icon })) : (_jsx("span", { className: "size-1.5 shrink-0 rounded-full bg-current/45", "aria-hidden": true })), _jsx("span", { className: "truncate", children: topTab.label })] })) : null, statusBadge != null ? (_jsx("span", { className: "absolute -top-2 -right-2 z-30 flex", children: statusBadge })) : null, _jsxs("div", { className: cn('flex min-w-0 items-center gap-2.5 p-3', headerClassName), style: { height: rowMode ? HEADER_H : height }, children: [_jsxs("span", { className: "relative flex shrink-0", children: [_jsx("span", { "aria-hidden": true, className: cn('flex size-8 items-center justify-center rounded-md', chipClassName), children: icon }), error ? (_jsx("span", { role: "img", "aria-label": errorLabel, className: "bg-background absolute -top-1 -right-1 flex size-3.5 items-center justify-center rounded-full", children: _jsx(AlertCircle, { className: "text-destructive size-3.5", strokeWidth: 2, fill: "var(--background)" }) })) : null] }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "flex min-w-0 items-center gap-1.5", children: _jsx("span", { className: "text-foreground/95 truncate text-[12.5px] leading-4 font-medium", children: title }) }), _jsxs("div", { className: "mt-0.5 flex min-w-0 items-center gap-1.5", children: [summary != null ? summary : null, stat ? (_jsx("span", { className: "text-muted-foreground/80 ml-auto shrink-0 font-mono text-[10px] tabular-nums", children: stat })) : null] })] })] }), rowMode ? (_jsx("div", { className: "border-border/55 border-t", children: sourceHandles.map((h) => {
+                    const taken = takenHandleIds?.has(h.id) ?? false;
+                    return (_jsxs("div", { className: cn('border-border/40 relative flex h-[22px] items-center justify-end gap-1.5 border-b px-2 text-[10px] last:border-b-0', taken ? 'text-primary bg-primary/[0.06] font-medium' : 'text-muted-foreground'), children: [_jsx("span", { className: "truncate font-mono", children: h.label }), _jsx(Handle, { id: h.id, type: "source", position: Position.Right, className: handleClass })] }, h.id));
+                }) })) : null, showTargetHandle ? (_jsx(Handle, { type: "target", position: Position.Left, style: rowMode ? { top: HEADER_H / 2 } : undefined, className: handleClass })) : null, !rowMode ? (soleHandle ? (_jsx(Handle, { id: soleHandle.id, type: "source", position: Position.Right, style: { top: soleHandle.top }, className: handleClass })) : (_jsx(Handle, { type: "source", position: Position.Right, className: handleClass }))) : null] }));
+}

package/dist/flow/canvas/node-library.d.ts

@@ -0,0 +1,40 @@
+import { type DragEvent as ReactDragEvent, type ReactNode } from 'react';
+export type NodeLibraryItem = {
+    kind: string;
+    label: string;
+    description?: string;
+    icon: ReactNode;
+    keywords?: readonly string[];
+    categoryLabel?: string;
+    iconChipClassName?: string;
+};
+export type NodeLibraryGroup = {
+    groupLabel: string;
+    items: NodeLibraryItem[];
+    note?: string;
+};
+export declare function nodeSearchRank(needle: string, name: string, category: string, description: string, keywords?: readonly string[]): number | null;
+export declare function NodeSearchList({ groups, onPick, isKindAvailable, emptyText, searchPlaceholder, resultsHeading, testIdPrefix, draggable, onItemDragStart, fill, }: {
+    groups: NodeLibraryGroup[];
+    onPick: (kind: string) => void;
+    isKindAvailable?: (kind: string) => boolean;
+    emptyText: string;
+    searchPlaceholder: string;
+    resultsHeading: string;
+    testIdPrefix?: string;
+    draggable?: boolean;
+    onItemDragStart?: (kind: string, event: ReactDragEvent<HTMLDivElement>) => void;
+    fill?: boolean;
+}): import("react").JSX.Element;
+export declare function NodePicker({ title, groups, onPick, onClose, isKindAvailable, emptyText, searchPlaceholder, resultsHeading, closeLabel, testIdPrefix, }: {
+    title: ReactNode;
+    groups: NodeLibraryGroup[];
+    onPick: (kind: string) => void;
+    onClose: () => void;
+    isKindAvailable?: (kind: string) => boolean;
+    emptyText: string;
+    searchPlaceholder: string;
+    resultsHeading: string;
+    closeLabel: string;
+    testIdPrefix?: string;
+}): import("react").JSX.Element;

package/dist/flow/canvas/node-library.js

@@ -0,0 +1,54 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from '../../components/command.js';
+import { cn } from '../../lib/cn.js';
+export function nodeSearchRank(needle, name, category, description, keywords = []) {
+    const n = name.toLowerCase();
+    if (n.startsWith(needle))
+        return 0;
+    if (n.split(/[^a-z0-9]+/i).some((word) => word.startsWith(needle)))
+        return 1;
+    if (n.includes(needle))
+        return 2;
+    if (keywords.some((keyword) => keyword.toLowerCase().startsWith(needle)))
+        return 3;
+    if (keywords.some((keyword) => keyword.toLowerCase().includes(needle)))
+        return 4;
+    if (category.toLowerCase().includes(needle))
+        return 5;
+    if (description.toLowerCase().includes(needle))
+        return 6;
+    return null;
+}
+export function NodeSearchList({ groups, onPick, isKindAvailable, emptyText, searchPlaceholder, resultsHeading, testIdPrefix = 'flow-pick', draggable = false, onItemDragStart, fill = false, }) {
+    const [query, setQuery] = useState('');
+    const needle = query.trim().toLowerCase();
+    const ranked = useMemo(() => {
+        if (!needle)
+            return null;
+        const matches = [];
+        for (const group of groups) {
+            for (const item of group.items) {
+                const rank = nodeSearchRank(needle, item.label, item.categoryLabel ?? group.groupLabel, item.description ?? '', item.keywords ?? []);
+                if (rank !== null)
+                    matches.push({ item, rank });
+            }
+        }
+        return matches.sort((a, b) => a.rank - b.rank || a.item.label.localeCompare(b.item.label));
+    }, [groups, needle]);
+    const renderItem = (item, showCategory) => {
+        const disabled = isKindAvailable ? !isKindAvailable(item.kind) : false;
+        const canDrag = draggable && !disabled;
+        return (_jsxs(CommandItem, { value: `${item.label} ${item.description ?? ''} ${item.categoryLabel ?? ''} ${(item.keywords ?? []).join(' ')}`, disabled: disabled, onSelect: () => {
+                if (!disabled)
+                    onPick(item.kind);
+            }, "data-testid": `${testIdPrefix}-${item.kind}`, draggable: canDrag, onDragStart: canDrag ? (event) => onItemDragStart?.(item.kind, event) : undefined, className: cn(disabled && 'cursor-not-allowed opacity-45', canDrag && 'cursor-grab active:cursor-grabbing'), children: [_jsx("span", { className: cn('inline-flex size-6 shrink-0 items-center justify-center rounded-md', item.iconChipClassName ?? 'bg-muted/55 text-muted-foreground'), children: item.icon }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsxs("span", { className: "flex items-baseline gap-2", children: [_jsx("span", { className: "text-foreground block truncate text-[12.5px]", children: item.label }), showCategory && item.categoryLabel ? (_jsx("span", { className: "text-muted-foreground/80 ml-auto shrink-0 text-[10.5px]", children: item.categoryLabel })) : null] }), item.description ? (_jsx("span", { className: "text-muted-foreground block truncate text-[11px]", children: item.description })) : null] })] }, item.kind));
+    };
+    return (_jsxs(Command, { shouldFilter: false, className: cn(fill && 'flex h-full min-h-0 flex-col'), children: [_jsx(CommandInput, { placeholder: searchPlaceholder, className: "h-10", value: query, onValueChange: setQuery }), _jsxs("div", { className: cn('relative', fill && 'min-h-0 flex-1'), children: [_jsxs(CommandList, { className: cn('overscroll-contain pb-4', fill ? 'h-full max-h-none min-h-0 flex-1' : 'max-h-[min(56vh,420px)]'), children: [_jsx(CommandEmpty, { children: emptyText }), ranked
+                                ? ranked.length > 0 && (_jsx(CommandGroup, { heading: resultsHeading, children: ranked.map((match) => renderItem(match.item, true)) }))
+                                : groups.map((group) => (_jsxs(CommandGroup, { heading: group.groupLabel, children: [group.note ? (_jsx("p", { className: "text-muted-foreground px-2 pb-1.5 text-[11px] leading-snug", children: group.note })) : null, group.items.map((item) => renderItem(item, false))] }, group.groupLabel)))] }), _jsx("div", { "aria-hidden": true, className: "from-background pointer-events-none absolute inset-x-0 bottom-0 h-6 bg-gradient-to-t to-transparent" })] })] }));
+}
+export function NodePicker({ title, groups, onPick, onClose, isKindAvailable, emptyText, searchPlaceholder, resultsHeading, closeLabel, testIdPrefix, }) {
+    return (_jsxs("div", { className: "absolute inset-0 z-20 flex items-start justify-center pt-16", role: "dialog", "aria-modal": "true", children: [_jsx("button", { type: "button", "aria-label": closeLabel, onClick: onClose, className: "bg-background/30 absolute inset-0 cursor-default backdrop-blur-[1px]" }), _jsxs("div", { className: "border-border/70 bg-background relative max-h-[70%] w-[min(420px,calc(100%-24px))] overflow-hidden rounded-lg border shadow-lg", children: [_jsx("div", { className: "border-border/60 bg-background sticky top-0 border-b px-3 py-2 text-[12.5px] font-medium", children: title }), _jsx(NodeSearchList, { groups: groups, onPick: onPick, isKindAvailable: isKindAvailable, emptyText: emptyText, searchPlaceholder: searchPlaceholder, resultsHeading: resultsHeading, ...(testIdPrefix ? { testIdPrefix } : {}) })] })] }));
+}