@signalsafe/tree-spec-editor-react 0.1.0 → 0.1.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 SignalSafe Software
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -8,20 +8,35 @@ This is the React-specific sibling to **[`@signalsafe/tree-spec-editor-core`](..
 
 ## What this package owns
 
-- **`TreeSpecGraphEditor`** — the React Flow canvas (Background, Controls, MiniMap, custom node renderer, transition edges, selection wiring, focus/fit-view).
+- **`TreeSpecGraphEditor`** — the React Flow canvas (Background, Controls, MiniMap, custom node renderer, transition edges, selection wiring, choice focus highlighting, focus/fit-view).
+- **`useTreeSpecEditor`** — stateful orchestration hook (load, autosave, validate, publish, selection, undo/redo, choice/edge helpers). Exposes `inspectorNode` (selected node or edge source node), `focusChoiceId`, and `selectedEdge` for sidebar panels.
 - **`TreeSpecGraphEditorProps`** — props type.
-- Future: framework-shaped headless hooks (e.g. `useTreeSpecEditorState`,
-  `useGraphSelection`) that wrap the framework-agnostic helpers from
-  `tree-spec-editor-core`.
+
+## Canvas selection behavior
+
+| Selection | Inspector context | Contextual zoom (`contextualZoom`, default `true`) |
+|-----------|-------------------|-----------------------------------------------------|
+| **Node** | `selectedNode` | Fits viewport to the node |
+| **Edge** | `inspectorNode` = source node; `focusChoiceId` = source choice | **No pan/zoom** (viewport stays put) |
+| **Choice** (canvas or inspector focus) | `focusChoiceId` set; nodes list highlights via `focusNodeId` | Fits when the parent node is selected |
+
+Pass `onChoiceSelect` + `focusChoiceId` to keep canvas choice rows, inspector choice cards, and the nodes list in sync. Pass `contextualZoom={false}` to disable automatic viewport fitting on node selection.
 
 ## What lives elsewhere
 
 | Concern | Package |
 |--------|---------|
-| Editor model, tree operations, layout, autosave/keyboard helpers, constants | `@signalsafe/tree-spec-editor-core` |
+| Editor model, tree operations, layout, autosave/keyboard helpers, choice edge hints | `@signalsafe/tree-spec-editor-core` |
 | Sidebar panels, inspector, modals, toolbar (Bootstrap-styled) | `@signalsafe/tree-spec-editor` |
-| Material-styled UI shells (planned) | `@signalsafe/tree-spec-editor-react-mui` |
-| Angular implementation (planned) | `@signalsafe/tree-spec-editor-angular` |
+| Material-styled React shell (planned) | `@signalsafe/tree-spec-editor-react-mui` |
+| Angular shell + canvas (planned) | `@signalsafe/tree-spec-editor-angular` |
+| Vue shell + canvas (planned) | `@signalsafe/tree-spec-editor-vue` |
+
+## Maintainer notes
+
+- **This package stays React + reactflow only.** Angular/Vue hosts will use `-core` with their own canvas packages, not `-react`.
+- **Material (React)** hosts should add `-react-mui` (planned), reusing this canvas unchanged.
+- Layer boundaries and refactor plan: [docs/ai/packages-editor-architecture.md](../../docs/ai/packages-editor-architecture.md).
 
 ## Install
 
@@ -41,3 +56,9 @@ to ship a Material-styled editor only need to publish their own UI shell
 (panels, modals, toolbar) — they reuse the canvas and the editor model
 unchanged. This also keeps `@signalsafe/tree-spec-editor` (the
 Bootstrap variant) from being the sole React entry point.
+
+## Repository
+
+Standalone source and releases: [SignalSafeSoftware/tree-spec-editor-react](https://github.com/SignalSafeSoftware/tree-spec-editor-react).
+
+Published as [`@signalsafe/tree-spec-editor-react`](https://www.npmjs.com/package/@signalsafe/tree-spec-editor-react) on npm.

package/dist/GraphEditorCanvasContext.d.ts

@@ -0,0 +1,26 @@
+export type ChoiceDropTarget = {
+    nodeId: string;
+    index: number;
+};
+export type ChoiceDragState = {
+    sourceNodeId: string;
+    choiceId: string;
+};
+export type GraphEditorCanvasContextValue = {
+    readOnly: boolean;
+    onDuplicateNode: (nodeId: string) => void;
+    onDeleteNode: (nodeId: string) => void;
+    onResizeNode: (nodeId: string, width: number, height: number) => void;
+    /** Lock the node box height when a resize drag begins (prevents wrap reflow jumps). */
+    onResizeNodeStart: (nodeId: string, width: number, height: number) => void;
+    onSelectChoice: (nodeId: string, choiceId: string) => void;
+    choiceDrag: ChoiceDragState | null;
+    choiceDropTarget: ChoiceDropTarget | null;
+    onChoiceDragStart: (nodeId: string, choiceId: string) => void;
+    onChoiceDragEnd: () => void;
+    onChoiceDragOver: (nodeId: string, index: number) => void;
+    onChoiceDrop: (nodeId: string, index: number) => void;
+};
+export declare const GraphEditorCanvasContext: import("react").Context<GraphEditorCanvasContextValue>;
+export declare function useGraphEditorCanvas(): GraphEditorCanvasContextValue;
+//# sourceMappingURL=GraphEditorCanvasContext.d.ts.map

package/dist/GraphEditorCanvasContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GraphEditorCanvasContext.d.ts","sourceRoot":"","sources":["../src/GraphEditorCanvasContext.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,gBAAgB,GAAG;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC1B,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,6BAA6B,GAAG;IACxC,QAAQ,EAAE,OAAO,CAAC;IAClB,eAAe,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACtE,uFAAuF;IACvF,iBAAiB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3E,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3D,UAAU,EAAE,eAAe,GAAG,IAAI,CAAC;IACnC,gBAAgB,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAC1C,iBAAiB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9D,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1D,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzD,CAAC;AAmBF,eAAO,MAAM,wBAAwB,wDAA8B,CAAC;AAEpE,wBAAgB,oBAAoB,IAAI,6BAA6B,CAEpE"}

package/dist/GraphEditorCanvasContext.js

@@ -0,0 +1,20 @@
+import { createContext, useContext } from 'react';
+const noop = () => undefined;
+const defaultValue = {
+    readOnly: true,
+    onDuplicateNode: noop,
+    onDeleteNode: noop,
+    onResizeNode: noop,
+    onResizeNodeStart: noop,
+    onSelectChoice: noop,
+    choiceDrag: null,
+    choiceDropTarget: null,
+    onChoiceDragStart: noop,
+    onChoiceDragEnd: noop,
+    onChoiceDragOver: noop,
+    onChoiceDrop: noop,
+};
+export const GraphEditorCanvasContext = createContext(defaultValue);
+export function useGraphEditorCanvas() {
+    return useContext(GraphEditorCanvasContext);
+}

package/dist/TreeSpecGraphEditor.d.ts

@@ -7,10 +7,31 @@ export type TreeSpecGraphEditorProps = {
     showMiniMap?: boolean;
     selected?: GraphSelection;
     onSelect?: (sel: GraphSelection) => void;
+    /** Called when a choice row is clicked on the canvas (after `onSelect` for the parent node). */
+    onChoiceSelect?: (nodeId: string, choiceId: string) => void;
+    /** Called when a choice is dropped after drag (reorder or move to another node). */
+    onRepositionChoice?: (fromNodeId: string, choiceId: string, toNodeId: string, toIndex: number) => void;
     focusNodeId?: string | null;
+    /** Focused choice on the currently selected node (canvas + inspector sync). */
+    focusChoiceId?: string | null;
     fitViewNonce?: number;
     /** Optional class for the outer container (default includes h-70vh border rounded). */
     className?: string;
+    /** When true, disables canvas editing affordances (toolbar, resize, context menu). */
+    readOnly?: boolean;
+    /** Duplicate a prompt node from the canvas toolbar or context menu. */
+    onDuplicateNode?: (nodeId: string) => void;
+    /** Delete a prompt node from the canvas toolbar or context menu. */
+    onDeleteNode?: (nodeId: string) => void;
+    /** Run auto-layout from the pane context menu. */
+    onAutoLayout?: () => void;
+    /**
+     * When true (default), zooms the viewport to fit the current node/edge selection.
+     * Skipped when `focusNodeId` already targets the same node.
+     */
+    contextualZoom?: boolean;
+    /** Canvas chrome mode — host should pass Bootstrap `colorScheme` (`light` / `dark`). */
+    colorMode?: 'light' | 'dark';
 };
-export default function TreeSpecGraphEditor(props: Readonly<TreeSpecGraphEditorProps>): import("react/jsx-runtime").JSX.Element;
+export default function TreeSpecGraphEditor(props: Readonly<TreeSpecGraphEditorProps>): import("react").JSX.Element;
 //# sourceMappingURL=TreeSpecGraphEditor.d.ts.map

package/dist/TreeSpecGraphEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TreeSpecGraphEditor.d.ts","sourceRoot":"","sources":["../src/TreeSpecGraphEditor.tsx"],"names":[],"mappings":"AAkBA,OAAO,0BAA0B,CAAC;AAIlC,OAAO,EAKH,KAAK,UAAU,EAEf,KAAK,cAAc,EACnB,KAAK,gBAAgB,EAGxB,MAAM,mCAAmC,CAAC;AAE3C,MAAM,MAAM,wBAAwB,GAAG;IACnC,IAAI,EAAE,UAAU,CAAC;IACjB,QAAQ,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;IACrC,MAAM,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,cAAc,KAAK,IAAI,CAAC;IACzC,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uFAAuF;IACvF,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAkZF,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,KAAK,EAAE,QAAQ,CAAC,wBAAwB,CAAC,2CAMpF"}
+{"version":3,"file":"TreeSpecGraphEditor.d.ts","sourceRoot":"","sources":["../src/TreeSpecGraphEditor.tsx"],"names":[],"mappings":"AAYA,OAAO,0BAA0B,CAAC;AAElC,OAAO,EAKH,KAAK,UAAU,EACf,KAAK,cAAc,EACnB,KAAK,gBAAgB,EACxB,MAAM,mCAAmC,CAAC;AAsB3C,MAAM,MAAM,wBAAwB,GAAG;IACnC,IAAI,EAAE,UAAU,CAAC;IACjB,QAAQ,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;IACrC,MAAM,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,cAAc,KAAK,IAAI,CAAC;IACzC,gGAAgG;IAChG,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5D,oFAAoF;IACpF,kBAAkB,CAAC,EAAE,CACjB,UAAU,EAAE,MAAM,EAClB,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,MAAM,EAChB,OAAO,EAAE,MAAM,KACd,IAAI,CAAC;IACV,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,+EAA+E;IAC/E,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uFAAuF;IACvF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sFAAsF;IACtF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uEAAuE;IACvE,eAAe,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,oEAAoE;IACpE,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,kDAAkD;IAClD,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,wFAAwF;IACxF,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAChC,CAAC;AA4PF,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,KAAK,EAAE,QAAQ,CAAC,wBAAwB,CAAC,+BAMpF"}

package/dist/TreeSpecGraphEditor.js

@@ -1,273 +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 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: `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: `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';
+import { buildEdgeMarker, getIssueEdgeStyle, resolveSelectedEdgeStroke } from './canvas/edgeStyle';
+import { CANVAS_CLASS } from './canvas/constants';
+import { resolveCanvasFocusChoiceId } from './canvas/focusChoice';
+import { isChoiceRowClickTarget } from './canvas/typeGuards';
+import { GraphCanvasContextMenu } from './contextMenu/GraphCanvasContextMenu';
+import { EndNode } from './nodes/EndNode';
+import { PromptNode } from './nodes/PromptNode';
+import { joinClasses } from './utils/joinClasses';
+import { useCanvasContextMenu } from './hooks/useCanvasContextMenu';
+import { useCanvasGraphState } from './hooks/useCanvasGraphState';
+import { useCanvasIssueIndex } from './hooks/useCanvasIssueIndex';
+import { useCanvasNodeResize } from './hooks/useCanvasNodeResize';
+import { useCanvasViewport } from './hooks/useCanvasViewport';
+import { useChoiceDragDrop } from './hooks/useChoiceDragDrop';
+import { useGraphConnect } from './hooks/useGraphConnect';
+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"}