@signalsafe/tree-spec-editor-react 0.1.1 → 0.1.3

package/dist/TreeSpecGraphEditor.js

@@ -1,276 +1,149 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef } from 'react';
-import ReactFlow, { Background, Controls, Handle, MiniMap, Position, ReactFlowProvider, addEdge, useEdgesState, useNodesState, useReactFlow, } from 'reactflow';
+import { useCallback, useMemo, useRef, useState } from 'react';
+import ReactFlow, { Background, ConnectionMode, Controls, MiniMap, ReactFlowProvider, useReactFlow, } from 'reactflow';
 import 'reactflow/dist/style.css';
-import { TERMINAL_OUTCOME, TREE_SPEC_ISSUE_SEVERITY } from '@signalsafe/tree-spec';
-import { END_NODE_ID, GRAPH_SELECTION_KIND, safeUUID, } from '@signalsafe/tree-spec-editor-core';
-/** Background highlight when the node matches editor selection (sidebar / issues / canvas). */
-const CANVAS_NODE_SELECTED_CLASS = 'bg-primary-subtle';
-function joinClasses(...parts) {
-    return parts.filter(Boolean).join(' ');
-}
-function getPromptNodeBorderClass(hasErrors, warningCount) {
-    if (hasErrors) {
-        return 'border-danger';
-    }
-    if (warningCount > 0) {
-        return 'border-warning';
-    }
-    return '';
-}
-function getIssueEdgeStyle(style, hasIssue) {
-    if (!hasIssue) {
-        return style;
-    }
-    return style ? { ...style, strokeWidth: 2, strokeDasharray: '6 4' } : { strokeWidth: 2, strokeDasharray: '6 4' };
-}
-function PromptNode({ data, selected }) {
-    const n = data.node;
-    const choices = n.choices ?? [];
-    const hasErrors = data.issuesErrors > 0;
-    const borderClass = getPromptNodeBorderClass(hasErrors, data.issuesWarnings);
-    return (_jsxs("div", { className: joinClasses('card', 'card-min-width-280', borderClass, selected && CANVAS_NODE_SELECTED_CLASS), children: [_jsx(Handle, { type: "target", position: Position.Left, id: "in", className: "handle-bg-default" }), _jsxs("div", { className: "card-body p-2", children: [_jsxs("div", { className: "d-flex justify-content-between align-items-center", children: [_jsxs("div", { children: [_jsxs("div", { className: "fw-bold font-size-13", children: [data.isStart ? '▶ ' : '', n.type, data.issuesTotal > 0 ? (_jsxs("span", { className: "ms-2", title: `${data.issuesErrors} errors, ${data.issuesWarnings} warnings, ${data.issuesInfo} info`, children: [data.issuesErrors > 0 ? _jsx("span", { className: "badge bg-danger me-1", children: data.issuesErrors }) : null, data.issuesWarnings > 0 ? (_jsx("span", { className: "badge bg-warning text-dark me-1", children: data.issuesWarnings })) : null, data.issuesInfo > 0 ? _jsx("span", { className: "badge bg-info text-dark", children: data.issuesInfo }) : null] })) : null] }), _jsx("div", { className: "font-size-12 opacity-90 text-truncate", children: n.prompt || _jsx("em", { className: "text-muted", children: "(empty prompt)" }) })] }), _jsx("div", { className: "text-muted font-size-11", children: n.id.slice(0, 8) })] }), _jsx("hr", { className: "my-2" }), _jsx("div", { className: "font-size-12", children: choices.length === 0 ? (_jsx("div", { className: "text-muted", children: _jsx("em", { children: "No choices" }) })) : (_jsx("ul", { className: "list-unstyled mb-0", children: choices.map((c) => (_jsxs("li", { className: "d-flex justify-content-between align-items-center position-relative pr-18", children: [_jsx("span", { className: "text-truncate max-w-210", children: c.label }), _jsx("span", { className: "badge bg-light text-dark", children: c.id }), _jsx(Handle, { type: "source", position: Position.Right, id: `choice:${c.id}`, className: "graph-editor-handle", style: {
-                                            position: 'absolute',
-                                            right: -6,
-                                            top: '50%',
-                                            transform: 'translateY(-50%)',
-                                        } })] }, c.id))) })) })] })] }));
-}
-function EndNode({ selected }) {
-    return (_jsxs("div", { className: joinClasses('card', 'border-danger', 'w-180', selected && CANVAS_NODE_SELECTED_CLASS), children: [_jsx(Handle, { type: "target", position: Position.Left, id: "in", className: "handle-bg-danger" }), _jsxs("div", { className: "card-body p-2 text-center", children: [_jsx("div", { className: "fw-bold text-danger", children: "END" }), _jsx("div", { className: "text-muted font-size-12", children: "Outcome required" })] })] }));
-}
-function choiceIdFromHandle(h) {
-    if (!h)
-        return '';
-    if (h.startsWith('choice:'))
-        return h.slice('choice:'.length);
-    return h;
-}
-function edgeLabelForTransition(tree, t) {
-    const node = tree.nodes[t.fromNodeId];
-    const choice = node?.choices?.find((c) => c.id === t.fromChoiceId);
-    const base = choice?.label || t.fromChoiceId;
-    if (t.toNodeId === END_NODE_ID) {
-        const oc = t.outcome ?? TERMINAL_OUTCOME.AT_RISK;
-        return `${base}  →  END (${oc})`;
-    }
-    return base;
-}
-function buildEdgesFromTransitions(tree) {
-    return tree.transitions.map((t) => ({
-        id: t.id,
-        source: t.fromNodeId,
-        target: t.toNodeId,
-        sourceHandle: `choice:${t.fromChoiceId}`,
-        label: edgeLabelForTransition(tree, t),
-    }));
-}
-function buildTransitionsFromEdges(edges, existing) {
-    const existingById = new Map(existing.map((t) => [t.id, t]));
-    return edges
-        .filter((e) => e.source && e.target && e.source !== END_NODE_ID)
-        .map((e) => {
-        const fromChoiceId = choiceIdFromHandle(e.sourceHandle);
-        const prior = existingById.get(String(e.id));
-        return {
-            id: String(e.id),
-            fromNodeId: String(e.source),
-            fromChoiceId: fromChoiceId,
-            toNodeId: String(e.target),
-            outcome: String(e.target) === END_NODE_ID ? (prior?.outcome ?? TERMINAL_OUTCOME.AT_RISK) : undefined,
-        };
-    })
-        .filter((t) => t.fromChoiceId.length > 0);
-}
-function TreeSpecGraphInner({ tree, onChange, issues = [], selected, onSelect, focusNodeId, showMiniMap = true, fitViewNonce, className = 'h-70vh border rounded', }) {
+import { GRAPH_SELECTION_KIND, choiceIdFromHandle, resolveGraphViewport, LAYOUT_SNAP_GRID, } from '@signalsafe/tree-spec-editor-core';
+import { GraphEditorCanvasContext, } from './GraphEditorCanvasContext.js';
+import { buildEdgeMarker, getIssueEdgeStyle, resolveSelectedEdgeStroke } from './canvas/edgeStyle.js';
+import { CANVAS_CLASS } from './canvas/constants.js';
+import { resolveCanvasFocusChoiceId } from './canvas/focusChoice.js';
+import { isChoiceRowClickTarget } from './canvas/typeGuards.js';
+import { GraphCanvasContextMenu } from './contextMenu/GraphCanvasContextMenu.js';
+import { EndNode } from './nodes/EndNode.js';
+import { PromptNode } from './nodes/PromptNode.js';
+import { joinClasses } from './utils/joinClasses.js';
+import { useCanvasContextMenu } from './hooks/useCanvasContextMenu.js';
+import { useCanvasGraphState } from './hooks/useCanvasGraphState.js';
+import { useCanvasIssueIndex } from './hooks/useCanvasIssueIndex.js';
+import { useCanvasNodeResize } from './hooks/useCanvasNodeResize.js';
+import { useCanvasViewport } from './hooks/useCanvasViewport.js';
+import { useChoiceDragDrop } from './hooks/useChoiceDragDrop.js';
+import { useGraphConnect } from './hooks/useGraphConnect.js';
+function TreeSpecGraphInner({ tree, onChange, issues = [], selected, onSelect, onChoiceSelect, onRepositionChoice, focusNodeId, focusChoiceId = null, showMiniMap = true, fitViewNonce, className = 'h-70vh border rounded', readOnly = false, onDuplicateNode, onDeleteNode, onAutoLayout, contextualZoom = true, colorMode = 'light', }) {
     const rf = useReactFlow();
-    const isDraggingRef = useRef(false);
-    const nodesRef = useRef([]);
-    const edgesRef = useRef([]);
-    const issuesByNode = useMemo(() => {
-        const m = new Map();
-        for (const i of issues) {
-            if (!i.node_id)
-                continue;
-            const cur = m.get(i.node_id) ?? { total: 0, errors: 0, warnings: 0, info: 0 };
-            cur.total += 1;
-            const sev = String(i.severity ?? '').toLowerCase();
-            if (sev === TREE_SPEC_ISSUE_SEVERITY.WARNING)
-                cur.warnings += 1;
-            else if (sev === TREE_SPEC_ISSUE_SEVERITY.INFO)
-                cur.info += 1;
-            else
-                cur.errors += 1;
-            m.set(i.node_id, cur);
-        }
-        return m;
-    }, [issues]);
-    const issueKeySet = useMemo(() => {
-        const s = new Set();
-        for (const i of issues) {
-            if (!i.node_id || !i.choice_id)
-                continue;
-            s.add(`${i.node_id}::${i.choice_id}`);
-        }
-        return s;
-    }, [issues]);
-    const initialNodes = useMemo(() => {
-        const arr = [];
-        for (const n of Object.values(tree.nodes)) {
-            arr.push({
-                id: n.id,
-                type: 'promptNode',
-                position: n.position ?? { x: 0, y: 0 },
-                data: {
-                    node: n,
-                    isStart: tree.start_node === n.id,
-                    issuesTotal: issuesByNode.get(n.id)?.total ?? 0,
-                    issuesErrors: issuesByNode.get(n.id)?.errors ?? 0,
-                    issuesWarnings: issuesByNode.get(n.id)?.warnings ?? 0,
-                    issuesInfo: issuesByNode.get(n.id)?.info ?? 0,
-                },
-            });
-        }
-        arr.push({
-            id: END_NODE_ID,
-            type: 'endNode',
-            position: { x: 700, y: 0 },
-            data: {},
-            selectable: true,
-            draggable: true,
-        });
-        return arr;
-    }, [tree.nodes, tree.start_node, issuesByNode]);
-    const initialEdges = useMemo(() => buildEdgesFromTransitions(tree), [tree]);
-    const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
-    const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
-    useEffect(() => {
-        nodesRef.current = nodes;
-    }, [nodes]);
-    useEffect(() => {
-        edgesRef.current = edges;
-    }, [edges]);
-    const lastTreeRef = useRef('');
-    useEffect(() => {
-        const nextKey = JSON.stringify({ tree, issues: issues.length });
-        if (nextKey === lastTreeRef.current)
-            return;
-        lastTreeRef.current = nextKey;
-        setNodes(initialNodes);
-        setEdges(initialEdges);
-    }, [tree, issues.length, initialNodes, initialEdges, setNodes, setEdges]);
-    useEffect(() => {
-        if (!focusNodeId)
-            return;
-        try {
-            const n = rf.getNode(focusNodeId);
-            if (!n)
-                return;
-            rf.setCenter(n.position.x + 150, n.position.y + 60, { zoom: 1, duration: 300 });
-        }
-        catch {
-            // ignore
-        }
-    }, [focusNodeId, rf]);
-    useEffect(() => {
-        if (!fitViewNonce)
-            return;
-        const id = setTimeout(() => {
-            try {
-                rf.fitView({ padding: 0.2, duration: 300 });
-            }
-            catch {
-                // ignore
-            }
-        }, 100);
-        return () => clearTimeout(id);
-    }, [fitViewNonce, rf]);
+    const treeRef = useRef(tree);
+    treeRef.current = tree;
+    const suppressViewportSaveRef = useRef(true);
+    const isResizingRef = useRef(false);
+    const { issuesByNode, issueKeySet } = useCanvasIssueIndex(issues);
+    const { choiceDrag, choiceDropTarget, handleChoiceDragStart, handleChoiceDragEnd, handleChoiceDragOver, handleChoiceDrop, } = useChoiceDragDrop({
+        readOnly,
+        onChoiceSelect,
+        onSelect,
+        onRepositionChoice,
+    });
+    const { contextMenu, closeContextMenu, onNodeContextMenu, onPaneContextMenu } = useCanvasContextMenu({
+        readOnly,
+        onAutoLayout,
+    });
+    const [resizeHeightByNodeId, setResizeHeightByNodeId] = useState({});
+    const graphState = useCanvasGraphState({
+        tree,
+        onChange,
+        issues,
+        issuesByNode,
+        readOnly,
+        resizeHeightByNodeId,
+        isResizingRef,
+        suppressViewportSaveRef,
+    });
+    const { nodes, edges, onNodesChangeWrapped, onEdgesChangeWrapped, onNodeDragStart, onNodeDragStop, onMoveEnd, setNodes, } = graphState;
+    const resizeHandlers = useCanvasNodeResize({
+        readOnly,
+        treeRef,
+        onChange,
+        setNodes,
+        isResizingRef,
+        resizeHeightByNodeId,
+        setResizeHeightByNodeId,
+    });
+    useCanvasViewport({
+        rf,
+        focusNodeId,
+        fitViewNonce,
+        contextualZoom,
+        selected,
+        suppressViewportSaveRef,
+    });
+    const { onConnect, onConnectStart, onConnectEnd, onReconnect, onEdgesDelete, isValidConnection, } = useGraphConnect({
+        treeRef,
+        onChange,
+        onSelect,
+        readOnly,
+    });
+    const savedViewport = useMemo(() => resolveGraphViewport(tree), [tree._meta]);
     const nodeTypes = useMemo(() => ({
         promptNode: PromptNode,
         endNode: EndNode,
     }), []);
-    const commit = useCallback((nextNodes, nextEdges) => {
-        if (isDraggingRef.current)
+    const onNodeClick = useCallback((evt, node) => {
+        if (isChoiceRowClickTarget(evt.target))
             return;
-        const updatedNodes = { ...tree.nodes };
-        for (const n of nextNodes) {
-            if (n.id === END_NODE_ID)
-                continue;
-            const existing = updatedNodes[n.id];
-            if (!existing)
-                continue;
-            updatedNodes[n.id] = {
-                ...existing,
-                position: { x: n.position.x, y: n.position.y },
-            };
-        }
-        const transitions = buildTransitionsFromEdges(nextEdges, tree.transitions);
-        onChange({
-            ...tree,
-            nodes: updatedNodes,
-            transitions,
-        });
-    }, [tree, onChange]);
-    const onConnect = useCallback((conn) => {
-        const choiceId = choiceIdFromHandle(conn.sourceHandle);
-        if (!conn.source || !conn.target || !choiceId)
-            return;
-        const newEdge = {
-            id: safeUUID(),
-            source: conn.source,
-            target: conn.target,
-            sourceHandle: conn.sourceHandle,
-            label: choiceId,
-        };
-        setEdges((eds) => {
-            const next = addEdge(newEdge, eds);
-            commit(nodesRef.current, next);
-            return next;
-        });
-    }, [setEdges, commit]);
-    const onNodesChangeWrapped = useCallback((changes) => {
-        onNodesChange(changes);
-        const shouldCommit = changes.some((c) => {
-            if (c?.type === 'select' || c?.type === 'dimensions')
-                return false;
-            if (c?.type === 'position' && c?.dragging)
-                return false;
-            return true;
-        });
-        if (shouldCommit)
-            queueMicrotask(() => commit(nodesRef.current, edgesRef.current));
-    }, [onNodesChange, commit]);
-    const onEdgesChangeWrapped = useCallback((changes) => {
-        onEdgesChange(changes);
-        const shouldCommit = changes.some((c) => c?.type !== 'select');
-        if (shouldCommit)
-            queueMicrotask(() => commit(nodesRef.current, edgesRef.current));
-    }, [onEdgesChange, commit]);
-    const onNodeDragStart = useCallback(() => {
-        isDraggingRef.current = true;
-    }, []);
-    const onNodeDragStop = useCallback(() => {
-        isDraggingRef.current = false;
-        commit(nodesRef.current, edgesRef.current);
-    }, [commit]);
-    const onNodeClick = useCallback((_evt, node) => {
         onSelect?.({ kind: GRAPH_SELECTION_KIND.NODE, id: node.id });
     }, [onSelect]);
     const onEdgeClick = useCallback((_evt, edge) => {
         onSelect?.({ kind: GRAPH_SELECTION_KIND.EDGE, id: edge.id });
     }, [onSelect]);
-    return (_jsx("div", { className: className, children: _jsxs(ReactFlow, { nodes: nodes.map((n) => ({
-                ...n,
-                selected: selected?.kind === GRAPH_SELECTION_KIND.NODE && selected.id === n.id,
-            })), edges: edges.map((e) => {
-                const fromChoiceId = choiceIdFromHandle(e.sourceHandle);
-                const hasIssue = fromChoiceId ? issueKeySet.has(`${e.source}::${fromChoiceId}`) : false;
-                return {
-                    ...e,
-                    selected: selected?.kind === GRAPH_SELECTION_KIND.EDGE && selected.id === e.id,
-                    style: getIssueEdgeStyle(e.style, hasIssue),
-                };
-            }), onNodesChange: onNodesChangeWrapped, onEdgesChange: onEdgesChangeWrapped, onConnect: onConnect, onNodeDragStart: onNodeDragStart, onNodeDragStop: onNodeDragStop, onNodeClick: onNodeClick, onEdgeClick: onEdgeClick, nodeTypes: nodeTypes, children: [showMiniMap ? _jsx(MiniMap, {}) : null, _jsx(Controls, {}), _jsx(Background, {})] }) }));
+    const onPaneClick = useCallback(() => {
+        onSelect?.({ kind: null, id: null });
+    }, [onSelect]);
+    const canvasContextValue = useMemo(() => ({
+        readOnly,
+        onDuplicateNode: (nodeId) => onDuplicateNode?.(nodeId),
+        onDeleteNode: (nodeId) => onDeleteNode?.(nodeId),
+        onResizeNode: resizeHandlers.handleResizeNode,
+        onResizeNodeStart: resizeHandlers.handleResizeNodeStart,
+        onSelectChoice: (nodeId, choiceId) => {
+            if (onChoiceSelect) {
+                onChoiceSelect(nodeId, choiceId);
+                return;
+            }
+            onSelect?.({ kind: GRAPH_SELECTION_KIND.NODE, id: nodeId });
+        },
+        choiceDrag,
+        choiceDropTarget,
+        onChoiceDragStart: handleChoiceDragStart,
+        onChoiceDragEnd: handleChoiceDragEnd,
+        onChoiceDragOver: handleChoiceDragOver,
+        onChoiceDrop: handleChoiceDrop,
+    }), [
+        readOnly,
+        onDuplicateNode,
+        onDeleteNode,
+        resizeHandlers.handleResizeNode,
+        resizeHandlers.handleResizeNodeStart,
+        onSelect,
+        onChoiceSelect,
+        choiceDrag,
+        choiceDropTarget,
+        handleChoiceDragStart,
+        handleChoiceDragEnd,
+        handleChoiceDragOver,
+        handleChoiceDrop,
+    ]);
+    return (_jsx(GraphEditorCanvasContext.Provider, { value: canvasContextValue, children: _jsxs("div", { className: joinClasses(className, CANVAS_CLASS), "data-color-mode": colorMode, children: [_jsx(GraphCanvasContextMenu, { menu: contextMenu, readOnly: readOnly, onClose: closeContextMenu, onDuplicateNode: onDuplicateNode, onDeleteNode: onDeleteNode, onAutoLayout: onAutoLayout }), _jsxs(ReactFlow, { defaultViewport: savedViewport, elementsSelectable: false, selectNodesOnDrag: false, nodes: nodes.map((n) => ({
+                        ...n,
+                        selected: selected?.kind === GRAPH_SELECTION_KIND.NODE && selected.id === n.id,
+                        data: n.type === 'promptNode'
+                            ? {
+                                ...n.data,
+                                focusChoiceId: resolveCanvasFocusChoiceId(n.id, selected, focusNodeId, focusChoiceId),
+                            }
+                            : n.data,
+                    })), edges: edges.map((e) => {
+                        const fromChoiceId = choiceIdFromHandle(e.sourceHandle);
+                        const hasIssue = fromChoiceId ? issueKeySet.has(`${e.source}::${fromChoiceId}`) : false;
+                        const isEdgeSelected = selected?.kind === GRAPH_SELECTION_KIND.EDGE && selected.id === e.id;
+                        let style = getIssueEdgeStyle(e.style, hasIssue);
+                        const { style: resolvedStyle, stroke } = resolveSelectedEdgeStroke(style, isEdgeSelected);
+                        style = resolvedStyle;
+                        return {
+                            ...e,
+                            selected: isEdgeSelected,
+                            style,
+                            markerEnd: buildEdgeMarker(stroke),
+                        };
+                    }), onNodesChange: onNodesChangeWrapped, onEdgesChange: onEdgesChangeWrapped, onConnect: onConnect, onConnectStart: onConnectStart, onConnectEnd: onConnectEnd, onReconnect: onReconnect, onEdgesDelete: onEdgesDelete, isValidConnection: isValidConnection, connectionMode: ConnectionMode.Strict, snapToGrid: true, snapGrid: [LAYOUT_SNAP_GRID, LAYOUT_SNAP_GRID], onNodeDragStart: onNodeDragStart, onNodeDragStop: onNodeDragStop, onNodeClick: onNodeClick, onEdgeClick: onEdgeClick, onPaneClick: onPaneClick, onNodeContextMenu: onNodeContextMenu, onPaneContextMenu: onPaneContextMenu, onMoveEnd: onMoveEnd, nodeTypes: nodeTypes, children: [showMiniMap ? _jsx(MiniMap, { pannable: true, ariaLabel: "Canvas overview \u2014 drag to pan" }) : null, _jsx(Controls, {}), _jsx(Background, {})] })] }) }));
 }
 export default function TreeSpecGraphEditor(props) {
     return (_jsx(ReactFlowProvider, { children: _jsx(TreeSpecGraphInner, { ...props }) }));

package/dist/canvas/constants.d.ts

@@ -0,0 +1,41 @@
+import { MarkerType } from 'reactflow';
+/** Background highlight when the node matches editor selection (sidebar / issues / canvas). */
+export declare const CANVAS_NODE_SELECTED_CLASS = "bg-primary-subtle";
+/** Dark readable text on selected canvas node cards. */
+export declare const CANVAS_NODE_SELECTED_TEXT_CLASS = "graph-editor-canvas-selected";
+export declare const CANVAS_CLASS = "graph-editor-canvas";
+export declare const CANVAS_NODE_CLASS = "graph-editor-canvas-node";
+export declare const CANVAS_NODE_BODY_CLASS = "graph-editor-canvas-node-body";
+export declare const CANVAS_CHOICE_SELECTED_CLASS = "graph-editor-canvas-choice-selected";
+export declare const CHOICE_ROW_CLASS = "graph-editor-choice-row";
+export declare const CHOICE_ROW_SELECTOR = ".graph-editor-choice-row";
+export declare const CHOICE_DRAG_HANDLE_CLASS = "graph-editor-choice-drag-handle";
+export declare const CHOICE_DRAG_HANDLE_SELECTOR = ".graph-editor-choice-drag-handle";
+export declare const CHOICE_DROP_TARGET_CLASS = "graph-editor-choice-drop-target";
+export declare const CHOICE_DROP_APPEND_CLASS = "graph-editor-choice-drop-append";
+export declare const CHOICE_ROW_SELECT_CLASS = "graph-editor-choice-row-select";
+export declare const CHOICE_ROW_SELECTABLE_CLASS = "graph-editor-choice-row-selectable";
+export declare const CHOICE_HANDLE_CLASS = "graph-editor-handle graph-editor-choice-handle";
+export declare const NODE_DRAG_HANDLE_CLASS = "graph-editor-drag-handle";
+export declare const NODE_DRAG_HANDLE_SELECTOR = ".graph-editor-drag-handle";
+export declare const TARGET_HANDLE_CLASS_DEFAULT = "handle-bg-default graph-editor-target-handle";
+export declare const TARGET_HANDLE_CLASS_DANGER = "handle-bg-danger graph-editor-target-handle";
+export declare const CONTEXT_MENU_CLASS = "graph-editor-context-menu dropdown-menu show position-fixed shadow-sm";
+export declare const REACT_FLOW_PANE_CLASS = "react-flow__pane";
+export declare const BORDER_DANGER_CLASS = "border-danger";
+export declare const BORDER_WARNING_CLASS = "border-warning";
+export declare const END_NODE_WIDTH_CLASS = "w-180";
+export declare const MIN_NODE_WIDTH = 180;
+export declare const MAX_NODE_WIDTH = 560;
+export declare const MIN_NODE_HEIGHT = 80;
+export declare const MAX_NODE_HEIGHT = 480;
+/** Matches React Flow selected edge stroke (`.react-flow__edge.selected .react-flow__edge-path`). */
+export declare const SELECTED_EDGE_STROKE = "#555";
+export declare const EDGE_ARROW_MARKER: {
+    type: MarkerType;
+    width: number;
+    height: number;
+};
+export declare const TARGET_HANDLE_ID = "in";
+export declare const CHOICE_HANDLE_PREFIX = "choice:";
+//# sourceMappingURL=constants.d.ts.map

package/dist/canvas/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/canvas/constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAEvC,+FAA+F;AAC/F,eAAO,MAAM,0BAA0B,sBAAsB,CAAC;AAE9D,wDAAwD;AACxD,eAAO,MAAM,+BAA+B,iCAAiC,CAAC;AAE9E,eAAO,MAAM,YAAY,wBAAwB,CAAC;AAClD,eAAO,MAAM,iBAAiB,6BAA6B,CAAC;AAC5D,eAAO,MAAM,sBAAsB,kCAAkC,CAAC;AACtE,eAAO,MAAM,4BAA4B,wCAAwC,CAAC;AAElF,eAAO,MAAM,gBAAgB,4BAA4B,CAAC;AAC1D,eAAO,MAAM,mBAAmB,6BAAyB,CAAC;AAC1D,eAAO,MAAM,wBAAwB,oCAAoC,CAAC;AAC1E,eAAO,MAAM,2BAA2B,qCAAiC,CAAC;AAC1E,eAAO,MAAM,wBAAwB,oCAAoC,CAAC;AAC1E,eAAO,MAAM,wBAAwB,oCAAoC,CAAC;AAC1E,eAAO,MAAM,uBAAuB,mCAAmC,CAAC;AACxE,eAAO,MAAM,2BAA2B,uCAAuC,CAAC;AAChF,eAAO,MAAM,mBAAmB,mDAAmD,CAAC;AAEpF,eAAO,MAAM,sBAAsB,6BAA6B,CAAC;AACjE,eAAO,MAAM,yBAAyB,8BAA+B,CAAC;AAEtE,eAAO,MAAM,2BAA2B,iDAAiD,CAAC;AAC1F,eAAO,MAAM,0BAA0B,gDAAgD,CAAC;AAExF,eAAO,MAAM,kBAAkB,0EAA0E,CAAC;AAE1G,eAAO,MAAM,qBAAqB,qBAAqB,CAAC;AAExD,eAAO,MAAM,mBAAmB,kBAAkB,CAAC;AACnD,eAAO,MAAM,oBAAoB,mBAAmB,CAAC;AAErD,eAAO,MAAM,oBAAoB,UAAU,CAAC;AAE5C,eAAO,MAAM,cAAc,MAAM,CAAC;AAClC,eAAO,MAAM,cAAc,MAAM,CAAC;AAClC,eAAO,MAAM,eAAe,KAAK,CAAC;AAClC,eAAO,MAAM,eAAe,MAAM,CAAC;AAEnC,qGAAqG;AACrG,eAAO,MAAM,oBAAoB,SAAS,CAAC;AAE3C,eAAO,MAAM,iBAAiB;;;;CAI7B,CAAC;AAEF,eAAO,MAAM,gBAAgB,OAAO,CAAC;AACrC,eAAO,MAAM,oBAAoB,YAAY,CAAC"}

package/dist/canvas/constants.js

@@ -0,0 +1,40 @@
+import { MarkerType } from 'reactflow';
+/** Background highlight when the node matches editor selection (sidebar / issues / canvas). */
+export const CANVAS_NODE_SELECTED_CLASS = 'bg-primary-subtle';
+/** Dark readable text on selected canvas node cards. */
+export const CANVAS_NODE_SELECTED_TEXT_CLASS = 'graph-editor-canvas-selected';
+export const CANVAS_CLASS = 'graph-editor-canvas';
+export const CANVAS_NODE_CLASS = 'graph-editor-canvas-node';
+export const CANVAS_NODE_BODY_CLASS = 'graph-editor-canvas-node-body';
+export const CANVAS_CHOICE_SELECTED_CLASS = 'graph-editor-canvas-choice-selected';
+export const CHOICE_ROW_CLASS = 'graph-editor-choice-row';
+export const CHOICE_ROW_SELECTOR = `.${CHOICE_ROW_CLASS}`;
+export const CHOICE_DRAG_HANDLE_CLASS = 'graph-editor-choice-drag-handle';
+export const CHOICE_DRAG_HANDLE_SELECTOR = `.${CHOICE_DRAG_HANDLE_CLASS}`;
+export const CHOICE_DROP_TARGET_CLASS = 'graph-editor-choice-drop-target';
+export const CHOICE_DROP_APPEND_CLASS = 'graph-editor-choice-drop-append';
+export const CHOICE_ROW_SELECT_CLASS = 'graph-editor-choice-row-select';
+export const CHOICE_ROW_SELECTABLE_CLASS = 'graph-editor-choice-row-selectable';
+export const CHOICE_HANDLE_CLASS = 'graph-editor-handle graph-editor-choice-handle';
+export const NODE_DRAG_HANDLE_CLASS = 'graph-editor-drag-handle';
+export const NODE_DRAG_HANDLE_SELECTOR = `.${NODE_DRAG_HANDLE_CLASS}`;
+export const TARGET_HANDLE_CLASS_DEFAULT = 'handle-bg-default graph-editor-target-handle';
+export const TARGET_HANDLE_CLASS_DANGER = 'handle-bg-danger graph-editor-target-handle';
+export const CONTEXT_MENU_CLASS = 'graph-editor-context-menu dropdown-menu show position-fixed shadow-sm';
+export const REACT_FLOW_PANE_CLASS = 'react-flow__pane';
+export const BORDER_DANGER_CLASS = 'border-danger';
+export const BORDER_WARNING_CLASS = 'border-warning';
+export const END_NODE_WIDTH_CLASS = 'w-180';
+export const MIN_NODE_WIDTH = 180;
+export const MAX_NODE_WIDTH = 560;
+export const MIN_NODE_HEIGHT = 80;
+export const MAX_NODE_HEIGHT = 480;
+/** Matches React Flow selected edge stroke (`.react-flow__edge.selected .react-flow__edge-path`). */
+export const SELECTED_EDGE_STROKE = '#555';
+export const EDGE_ARROW_MARKER = {
+    type: MarkerType.ArrowClosed,
+    width: 16,
+    height: 16,
+};
+export const TARGET_HANDLE_ID = 'in';
+export const CHOICE_HANDLE_PREFIX = 'choice:';

package/dist/canvas/edgeBuilders.d.ts

@@ -0,0 +1,6 @@
+import { type EditorTree, type EditorTransition } from '@signalsafe/tree-spec-editor-core';
+import type { Edge } from 'reactflow';
+export declare function edgeLabelForTransition(tree: EditorTree, t: EditorTransition): string;
+export declare function buildEdgesFromTransitions(tree: EditorTree): Edge[];
+export declare function buildTransitionsFromEdges(edges: Edge[], existing: EditorTransition[]): EditorTransition[];
+//# sourceMappingURL=edgeBuilders.d.ts.map

package/dist/canvas/edgeBuilders.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"edgeBuilders.d.ts","sourceRoot":"","sources":["../../src/canvas/edgeBuilders.ts"],"names":[],"mappings":"AACA,OAAO,EAOH,KAAK,UAAU,EACf,KAAK,gBAAgB,EACxB,MAAM,mCAAmC,CAAC;AAC3C,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAQtC,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,UAAU,EAAE,CAAC,EAAE,gBAAgB,GAAG,MAAM,CASpF;AAED,wBAAgB,yBAAyB,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI,EAAE,CA0BlE;AAED,wBAAgB,yBAAyB,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAG,gBAAgB,EAAE,CAgBzG"}

package/dist/canvas/edgeBuilders.js

@@ -0,0 +1,57 @@
+import { TERMINAL_OUTCOME } from '@signalsafe/tree-spec';
+import { END_NODE_ID, choiceIdFromHandle, resolveDefaultEdgeType, resolveEffectiveEdgeType, resolveEdgeStrokeColor, shouldShowEdgeLabel, } from '@signalsafe/tree-spec-editor-core';
+import { CHOICE_HANDLE_PREFIX, TARGET_HANDLE_ID, } from './constants.js';
+import { buildEdgeMarker, buildEdgeStyle, resolveEdgePathStroke } from './edgeStyle.js';
+export function edgeLabelForTransition(tree, t) {
+    const node = tree.nodes[t.fromNodeId];
+    const choice = node?.choices?.find((c) => c.id === t.fromChoiceId);
+    const base = choice?.label || t.fromChoiceId;
+    if (t.toNodeId === END_NODE_ID) {
+        const oc = t.outcome ?? TERMINAL_OUTCOME.AT_RISK;
+        return `${base}  →  END (${oc})`;
+    }
+    return base;
+}
+export function buildEdgesFromTransitions(tree) {
+    return tree.transitions.map((t) => {
+        const node = tree.nodes[t.fromNodeId];
+        const choice = node?.choices?.find((c) => c.id === t.fromChoiceId);
+        const showLabel = choice ? shouldShowEdgeLabel(choice) : true;
+        const strokeColor = choice ? resolveEdgeStrokeColor(choice) : undefined;
+        const edgeType = choice
+            ? resolveEffectiveEdgeType(choice, tree._meta)
+            : resolveDefaultEdgeType(tree._meta);
+        const style = buildEdgeStyle(strokeColor);
+        const markerStroke = resolveEdgePathStroke(style);
+        return {
+            id: t.id,
+            source: t.fromNodeId,
+            target: t.toNodeId,
+            sourceHandle: `${CHOICE_HANDLE_PREFIX}${t.fromChoiceId}`,
+            targetHandle: TARGET_HANDLE_ID,
+            reconnectable: 'target',
+            type: edgeType,
+            label: showLabel ? edgeLabelForTransition(tree, t) : undefined,
+            labelShowBg: true,
+            markerEnd: buildEdgeMarker(markerStroke),
+            style,
+        };
+    });
+}
+export function buildTransitionsFromEdges(edges, existing) {
+    const existingById = new Map(existing.map((t) => [t.id, t]));
+    return edges
+        .filter((e) => e.source && e.target && e.source !== END_NODE_ID)
+        .map((e) => {
+        const fromChoiceId = choiceIdFromHandle(e.sourceHandle);
+        const prior = existingById.get(String(e.id));
+        return {
+            id: String(e.id),
+            fromNodeId: String(e.source),
+            fromChoiceId: fromChoiceId,
+            toNodeId: String(e.target),
+            outcome: String(e.target) === END_NODE_ID ? (prior?.outcome ?? TERMINAL_OUTCOME.AT_RISK) : undefined,
+        };
+    })
+        .filter((t) => t.fromChoiceId.length > 0);
+}

package/dist/canvas/edgeStyle.d.ts

@@ -0,0 +1,16 @@
+import type { Edge } from 'reactflow';
+export declare function getPromptNodeBorderClass(hasErrors: boolean, warningCount: number): string;
+export declare function getIssueEdgeStyle(style: Edge['style'], hasIssue: boolean): Edge['style'];
+export declare function resolveEdgePathStroke(style: Edge['style'] | undefined): string;
+export declare function buildEdgeMarker(stroke: string): {
+    color: string;
+    type: import("reactflow").MarkerType;
+    width: number;
+    height: number;
+};
+export declare function buildEdgeStyle(strokeColor: string | undefined): Edge['style'];
+export declare function resolveSelectedEdgeStroke(style: Edge['style'], isEdgeSelected: boolean): {
+    style: Edge['style'];
+    stroke: string;
+};
+//# sourceMappingURL=edgeStyle.d.ts.map

package/dist/canvas/edgeStyle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"edgeStyle.d.ts","sourceRoot":"","sources":["../../src/canvas/edgeStyle.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAItC,wBAAgB,wBAAwB,CAAC,SAAS,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,GAAG,MAAM,CAQzF;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,EAAE,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,CASxF;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,GAAG,SAAS,GAAG,MAAM,CAK9E;AAED,wBAAgB,eAAe,CAAC,MAAM,EAAE,MAAM;;;;;EAK7C;AAED,wBAAgB,cAAc,CAAC,WAAW,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,CAE7E;AAED,wBAAgB,yBAAyB,CACrC,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,EACpB,cAAc,EAAE,OAAO,GACxB;IAAE,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAO1C"}

package/dist/canvas/edgeStyle.js

@@ -0,0 +1,44 @@
+import { DEFAULT_CANVAS_EDGE_STROKE } from '@signalsafe/tree-spec-editor-core';
+import { BORDER_DANGER_CLASS, BORDER_WARNING_CLASS, EDGE_ARROW_MARKER, SELECTED_EDGE_STROKE } from './constants.js';
+export function getPromptNodeBorderClass(hasErrors, warningCount) {
+    if (hasErrors) {
+        return BORDER_DANGER_CLASS;
+    }
+    if (warningCount > 0) {
+        return BORDER_WARNING_CLASS;
+    }
+    return '';
+}
+export function getIssueEdgeStyle(style, hasIssue) {
+    if (!hasIssue) {
+        return style;
+    }
+    return {
+        ...style,
+        strokeWidth: 2,
+        strokeDasharray: '6 4',
+    };
+}
+export function resolveEdgePathStroke(style) {
+    if (style?.stroke && typeof style.stroke === 'string') {
+        return style.stroke;
+    }
+    return DEFAULT_CANVAS_EDGE_STROKE;
+}
+export function buildEdgeMarker(stroke) {
+    return {
+        ...EDGE_ARROW_MARKER,
+        color: stroke,
+    };
+}
+export function buildEdgeStyle(strokeColor) {
+    return strokeColor ? { stroke: strokeColor, strokeWidth: 2 } : { strokeWidth: 2 };
+}
+export function resolveSelectedEdgeStroke(style, isEdgeSelected) {
+    let nextStyle = style;
+    const stroke = isEdgeSelected ? SELECTED_EDGE_STROKE : resolveEdgePathStroke(nextStyle);
+    if (isEdgeSelected) {
+        nextStyle = { ...nextStyle, stroke: SELECTED_EDGE_STROKE };
+    }
+    return { style: nextStyle, stroke };
+}

package/dist/canvas/focusChoice.d.ts

@@ -0,0 +1,3 @@
+import { type GraphSelection } from '@signalsafe/tree-spec-editor-core';
+export declare function resolveCanvasFocusChoiceId(nodeId: string, selected: GraphSelection | undefined, focusNodeId: string | null | undefined, focusChoiceId: string | null | undefined): string | null;
+//# sourceMappingURL=focusChoice.d.ts.map

package/dist/canvas/focusChoice.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"focusChoice.d.ts","sourceRoot":"","sources":["../../src/canvas/focusChoice.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwB,KAAK,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAE9F,wBAAgB,0BAA0B,CACtC,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,cAAc,GAAG,SAAS,EACpC,WAAW,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EACtC,aAAa,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GACzC,MAAM,GAAG,IAAI,CASf"}