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

package/dist/hooks/useCanvasGraphState.d.ts

@@ -0,0 +1,29 @@
+import { type Edge, type Node, type OnEdgesChange, type OnNodesChange, type Viewport } from 'reactflow';
+import { type EditorTree, type GraphEditorIssue } from '@signalsafe/tree-spec-editor-core';
+export type UseCanvasGraphStateOptions = {
+    tree: EditorTree;
+    onChange: (next: EditorTree) => void;
+    issues: GraphEditorIssue[];
+    issuesByNode: Map<string, {
+        total: number;
+        errors: number;
+        warnings: number;
+        info: number;
+    }>;
+    readOnly: boolean;
+    resizeHeightByNodeId: Record<string, number>;
+    isResizingRef: React.MutableRefObject<boolean>;
+    suppressViewportSaveRef: React.MutableRefObject<boolean>;
+};
+export type UseCanvasGraphStateResult = {
+    nodes: Node[];
+    edges: Edge[];
+    onNodesChangeWrapped: OnNodesChange;
+    onEdgesChangeWrapped: OnEdgesChange;
+    onNodeDragStart: () => void;
+    onNodeDragStop: () => void;
+    onMoveEnd: (event: MouseEvent | TouchEvent, viewport: Viewport) => void;
+    setNodes: (value: Node[] | ((nodes: Node[]) => Node[])) => void;
+};
+export declare function useCanvasGraphState(options: UseCanvasGraphStateOptions): UseCanvasGraphStateResult;
+//# sourceMappingURL=useCanvasGraphState.d.ts.map

package/dist/hooks/useCanvasGraphState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCanvasGraphState.d.ts","sourceRoot":"","sources":["../../src/hooks/useCanvasGraphState.ts"],"names":[],"mappings":"AACA,OAAO,EAGH,KAAK,IAAI,EACT,KAAK,IAAI,EACT,KAAK,aAAa,EAClB,KAAK,aAAa,EAClB,KAAK,QAAQ,EAChB,MAAM,WAAW,CAAC;AAEnB,OAAO,EASH,KAAK,UAAU,EACf,KAAK,gBAAgB,EAGxB,MAAM,mCAAmC,CAAC;AAM3C,MAAM,MAAM,0BAA0B,GAAG;IACrC,IAAI,EAAE,UAAU,CAAC;IACjB,QAAQ,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;IACrC,MAAM,EAAE,gBAAgB,EAAE,CAAC;IAC3B,YAAY,EAAE,GAAG,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC7F,QAAQ,EAAE,OAAO,CAAC;IAClB,oBAAoB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC7C,aAAa,EAAE,KAAK,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAC/C,uBAAuB,EAAE,KAAK,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;CAC5D,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACpC,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,oBAAoB,EAAE,aAAa,CAAC;IACpC,oBAAoB,EAAE,aAAa,CAAC;IACpC,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,SAAS,EAAE,CAAC,KAAK,EAAE,UAAU,GAAG,UAAU,EAAE,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAC;IACxE,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,CAAC,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;CACnE,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,0BAA0B,GAAG,yBAAyB,CA4KlG"}

package/dist/hooks/useCanvasGraphState.js

@@ -0,0 +1,150 @@
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { useEdgesState, useNodesState, } from 'reactflow';
+import { END_NODE_ID, getEditorHints, isNodeLocked, patchGraphEditorMeta, resolveCanvasNodeWidth, resolveEndNodePosition, snapPosition, } from '@signalsafe/tree-spec-editor-core';
+import { buildEdgesFromTransitions, buildTransitionsFromEdges } from '../canvas/edgeBuilders';
+import { NODE_DRAG_HANDLE_SELECTOR } from '../canvas/constants';
+export function useCanvasGraphState(options) {
+    const { tree, onChange, issues, issuesByNode, readOnly, resizeHeightByNodeId, isResizingRef, suppressViewportSaveRef, } = options;
+    const isDraggingRef = useRef(false);
+    const nodesRef = useRef([]);
+    const edgesRef = useRef([]);
+    const treeRef = useRef(tree);
+    treeRef.current = tree;
+    const endNodePosition = useMemo(() => resolveEndNodePosition(tree), [tree._meta, tree.nodes]);
+    useEffect(() => {
+        suppressViewportSaveRef.current = true;
+        const id = globalThis.setTimeout(() => {
+            suppressViewportSaveRef.current = false;
+        }, 0);
+        return () => globalThis.clearTimeout(id);
+    }, [tree._meta, suppressViewportSaveRef]);
+    const initialNodes = useMemo(() => {
+        const arr = [];
+        for (const n of Object.values(tree.nodes)) {
+            const editor = getEditorHints(n);
+            const locked = isNodeLocked(n);
+            const nodeWidth = resolveCanvasNodeWidth(editor);
+            const nodeHeight = editor.height ?? resizeHeightByNodeId[n.id];
+            arr.push({
+                id: n.id,
+                type: 'promptNode',
+                position: n.position ?? { x: 0, y: 0 },
+                draggable: !locked,
+                dragHandle: locked || readOnly ? undefined : NODE_DRAG_HANDLE_SELECTOR,
+                style: {
+                    width: nodeWidth,
+                    ...(nodeHeight === undefined ? {} : { height: nodeHeight }),
+                },
+                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,
+                    lockedResizeHeight: resizeHeightByNodeId[n.id],
+                },
+            });
+        }
+        arr.push({
+            id: END_NODE_ID,
+            type: 'endNode',
+            position: endNodePosition,
+            data: {},
+            selectable: true,
+            draggable: true,
+        });
+        return arr;
+    }, [tree.nodes, tree.start_node, endNodePosition, issuesByNode, readOnly, resizeHeightByNodeId]);
+    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;
+        if (isResizingRef.current)
+            return;
+        lastTreeRef.current = nextKey;
+        setNodes(initialNodes);
+        setEdges(initialEdges);
+    }, [tree, issues.length, initialNodes, initialEdges, setNodes, setEdges, isResizingRef]);
+    const commit = useCallback((nextNodes, nextEdges) => {
+        if (isDraggingRef.current)
+            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;
+            if (isNodeLocked(existing))
+                continue;
+            updatedNodes[n.id] = {
+                ...existing,
+                position: snapPosition({ x: n.position.x, y: n.position.y }),
+            };
+        }
+        const transitions = buildTransitionsFromEdges(nextEdges, tree.transitions);
+        const endNode = nextNodes.find((n) => n.id === END_NODE_ID);
+        let nextTree = {
+            ...tree,
+            nodes: updatedNodes,
+            transitions,
+        };
+        if (endNode) {
+            nextTree = patchGraphEditorMeta(nextTree, {
+                end_position: { x: endNode.position.x, y: endNode.position.y },
+            });
+        }
+        onChange(nextTree);
+    }, [tree, onChange]);
+    const onMoveEnd = useCallback((_event, viewport) => {
+        if (suppressViewportSaveRef.current)
+            return;
+        onChange(patchGraphEditorMeta(tree, { viewport }));
+    }, [tree, onChange, suppressViewportSaveRef]);
+    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]);
+    return {
+        nodes,
+        edges,
+        onNodesChangeWrapped,
+        onEdgesChangeWrapped,
+        onNodeDragStart,
+        onNodeDragStop,
+        onMoveEnd,
+        setNodes,
+    };
+}

package/dist/hooks/useCanvasIssueIndex.d.ts

@@ -0,0 +1,12 @@
+import type { GraphEditorIssue } from '@signalsafe/tree-spec-editor-core';
+export type CanvasIssueIndex = {
+    issuesByNode: Map<string, {
+        total: number;
+        errors: number;
+        warnings: number;
+        info: number;
+    }>;
+    issueKeySet: Set<string>;
+};
+export declare function useCanvasIssueIndex(issues: GraphEditorIssue[]): CanvasIssueIndex;
+//# sourceMappingURL=useCanvasIssueIndex.d.ts.map

package/dist/hooks/useCanvasIssueIndex.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCanvasIssueIndex.d.ts","sourceRoot":"","sources":["../../src/hooks/useCanvasIssueIndex.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAE1E,MAAM,MAAM,gBAAgB,GAAG;IAC3B,YAAY,EAAE,GAAG,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC7F,WAAW,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;CAC5B,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,gBAAgB,EAAE,GAAG,gBAAgB,CA0BhF"}

package/dist/hooks/useCanvasIssueIndex.js

@@ -0,0 +1,32 @@
+import { useMemo } from 'react';
+import { TREE_SPEC_ISSUE_SEVERITY } from '@signalsafe/tree-spec';
+export function useCanvasIssueIndex(issues) {
+    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]);
+    return { issuesByNode, issueKeySet };
+}

package/dist/hooks/useCanvasNodeResize.d.ts

@@ -0,0 +1,17 @@
+import type { Node } from 'reactflow';
+import { type EditorTree } from '@signalsafe/tree-spec-editor-core';
+export type UseCanvasNodeResizeOptions = {
+    readOnly: boolean;
+    treeRef: React.MutableRefObject<EditorTree>;
+    onChange: (next: EditorTree) => void;
+    setNodes: (value: Node[] | ((nodes: Node[]) => Node[])) => void;
+    isResizingRef: React.MutableRefObject<boolean>;
+    resizeHeightByNodeId: Record<string, number>;
+    setResizeHeightByNodeId: React.Dispatch<React.SetStateAction<Record<string, number>>>;
+};
+export type UseCanvasNodeResizeResult = {
+    handleResizeNodeStart: (nodeId: string, width: number, height: number) => void;
+    handleResizeNode: (nodeId: string, width: number, height: number) => void;
+};
+export declare function useCanvasNodeResize(options: UseCanvasNodeResizeOptions): UseCanvasNodeResizeResult;
+//# sourceMappingURL=useCanvasNodeResize.d.ts.map

package/dist/hooks/useCanvasNodeResize.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCanvasNodeResize.d.ts","sourceRoot":"","sources":["../../src/hooks/useCanvasNodeResize.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEtC,OAAO,EAAkC,KAAK,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAEpG,MAAM,MAAM,0BAA0B,GAAG;IACrC,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,KAAK,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC;IAC5C,QAAQ,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,CAAC,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAChE,aAAa,EAAE,KAAK,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAC/C,oBAAoB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC7C,uBAAuB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC;CACzF,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACpC,qBAAqB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/E,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7E,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,0BAA0B,GAAG,yBAAyB,CAmElG"}

package/dist/hooks/useCanvasNodeResize.js

@@ -0,0 +1,53 @@
+import { useCallback } from 'react';
+import { isNodeLocked, patchEditorHints } from '@signalsafe/tree-spec-editor-core';
+export function useCanvasNodeResize(options) {
+    const { readOnly, treeRef, onChange, setNodes, isResizingRef, setResizeHeightByNodeId, } = options;
+    const handleResizeNodeStart = useCallback((nodeId, width, height) => {
+        if (readOnly)
+            return;
+        isResizingRef.current = true;
+        const lockedHeight = Math.round(height);
+        setResizeHeightByNodeId((prev) => ({ ...prev, [nodeId]: lockedHeight }));
+        setNodes((current) => current.map((node) => node.id === nodeId
+            ? {
+                ...node,
+                style: {
+                    ...node.style,
+                    width: Math.round(width),
+                    height: lockedHeight,
+                },
+                data: {
+                    ...node.data,
+                    lockedResizeHeight: lockedHeight,
+                },
+            }
+            : node));
+    }, [readOnly, setNodes, isResizingRef, setResizeHeightByNodeId]);
+    const handleResizeNode = useCallback((nodeId, width, height) => {
+        const node = treeRef.current.nodes[nodeId];
+        if (!node || isNodeLocked(node) || readOnly)
+            return;
+        isResizingRef.current = false;
+        setResizeHeightByNodeId((prev) => {
+            if (!(nodeId in prev))
+                return prev;
+            const next = { ...prev };
+            delete next[nodeId];
+            return next;
+        });
+        onChange({
+            ...treeRef.current,
+            nodes: {
+                ...treeRef.current.nodes,
+                [nodeId]: patchEditorHints(node, {
+                    width: Math.round(width),
+                    height: Math.round(height),
+                }),
+            },
+        });
+    }, [onChange, readOnly, treeRef, isResizingRef, setResizeHeightByNodeId]);
+    return {
+        handleResizeNodeStart,
+        handleResizeNode,
+    };
+}

package/dist/hooks/useCanvasViewport.d.ts

@@ -0,0 +1,12 @@
+import type { ReactFlowInstance } from 'reactflow';
+import { type GraphSelection } from '@signalsafe/tree-spec-editor-core';
+export type UseCanvasViewportOptions = {
+    rf: ReactFlowInstance;
+    focusNodeId?: string | null;
+    fitViewNonce?: number;
+    contextualZoom?: boolean;
+    selected?: GraphSelection;
+    suppressViewportSaveRef: React.MutableRefObject<boolean>;
+};
+export declare function useCanvasViewport(options: UseCanvasViewportOptions): void;
+//# sourceMappingURL=useCanvasViewport.d.ts.map

package/dist/hooks/useCanvasViewport.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCanvasViewport.d.ts","sourceRoot":"","sources":["../../src/hooks/useCanvasViewport.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAEnD,OAAO,EAAqC,KAAK,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAE3G,MAAM,MAAM,wBAAwB,GAAG;IACnC,EAAE,EAAE,iBAAiB,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,uBAAuB,EAAE,KAAK,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;CAC5D,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,wBAAwB,GAAG,IAAI,CAqFzE"}

package/dist/hooks/useCanvasViewport.js

@@ -0,0 +1,84 @@
+import { useEffect, useRef } from 'react';
+import { END_NODE_ID, GRAPH_SELECTION_KIND } from '@signalsafe/tree-spec-editor-core';
+export function useCanvasViewport(options) {
+    const { rf, focusNodeId, fitViewNonce, contextualZoom = true, selected, suppressViewportSaveRef, } = options;
+    const lastContextualSelectionRef = useRef(null);
+    useEffect(() => {
+        if (!focusNodeId)
+            return;
+        suppressViewportSaveRef.current = true;
+        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
+        }
+        const releaseId = globalThis.setTimeout(() => {
+            suppressViewportSaveRef.current = false;
+        }, 350);
+        return () => globalThis.clearTimeout(releaseId);
+    }, [focusNodeId, rf, suppressViewportSaveRef]);
+    useEffect(() => {
+        if (!fitViewNonce)
+            return;
+        suppressViewportSaveRef.current = true;
+        const id = globalThis.setTimeout(() => {
+            try {
+                rf.fitView({ padding: 0.2, duration: 300 });
+            }
+            catch {
+                // ignore
+            }
+        }, 100);
+        const releaseId = globalThis.setTimeout(() => {
+            suppressViewportSaveRef.current = false;
+        }, 450);
+        return () => {
+            globalThis.clearTimeout(id);
+            globalThis.clearTimeout(releaseId);
+        };
+    }, [fitViewNonce, rf, suppressViewportSaveRef]);
+    useEffect(() => {
+        if (!contextualZoom || !selected?.id)
+            return;
+        if (selected.kind === GRAPH_SELECTION_KIND.EDGE)
+            return;
+        if (focusNodeId && selected.kind === GRAPH_SELECTION_KIND.NODE && focusNodeId === selected.id) {
+            return;
+        }
+        const selectionKey = `${selected.kind}:${selected.id}`;
+        if (lastContextualSelectionRef.current === selectionKey)
+            return;
+        lastContextualSelectionRef.current = selectionKey;
+        const nodeIds = [];
+        if (selected.kind === GRAPH_SELECTION_KIND.NODE && selected.id !== END_NODE_ID) {
+            nodeIds.push(selected.id);
+        }
+        if (nodeIds.length === 0)
+            return;
+        suppressViewportSaveRef.current = true;
+        const id = globalThis.setTimeout(() => {
+            try {
+                rf.fitView({
+                    nodes: nodeIds.map((nodeId) => ({ id: nodeId })),
+                    padding: 0.35,
+                    duration: 250,
+                    maxZoom: 1.25,
+                });
+            }
+            catch {
+                // ignore
+            }
+        }, 0);
+        const releaseId = globalThis.setTimeout(() => {
+            suppressViewportSaveRef.current = false;
+        }, 300);
+        return () => {
+            globalThis.clearTimeout(id);
+            globalThis.clearTimeout(releaseId);
+        };
+    }, [contextualZoom, focusNodeId, rf, selected, suppressViewportSaveRef]);
+}

package/dist/hooks/useChoiceDragDrop.d.ts

@@ -0,0 +1,25 @@
+import { type GraphSelection } from '@signalsafe/tree-spec-editor-core';
+export type ChoiceDragState = {
+    sourceNodeId: string;
+    choiceId: string;
+};
+export type ChoiceDropTarget = {
+    nodeId: string;
+    index: number;
+};
+export type UseChoiceDragDropOptions = {
+    readOnly: boolean;
+    onChoiceSelect?: (nodeId: string, choiceId: string) => void;
+    onSelect?: (sel: GraphSelection) => void;
+    onRepositionChoice?: (fromNodeId: string, choiceId: string, toNodeId: string, toIndex: number) => void;
+};
+export type UseChoiceDragDropResult = {
+    choiceDrag: ChoiceDragState | null;
+    choiceDropTarget: ChoiceDropTarget | null;
+    handleChoiceDragStart: (nodeId: string, choiceId: string) => void;
+    handleChoiceDragEnd: () => void;
+    handleChoiceDragOver: (nodeId: string, index: number) => void;
+    handleChoiceDrop: (targetNodeId: string, targetIndex: number) => void;
+};
+export declare function useChoiceDragDrop(options: UseChoiceDragDropOptions): UseChoiceDragDropResult;
+//# sourceMappingURL=useChoiceDragDrop.d.ts.map

package/dist/hooks/useChoiceDragDrop.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChoiceDragDrop.d.ts","sourceRoot":"","sources":["../../src/hooks/useChoiceDragDrop.ts"],"names":[],"mappings":"AAEA,OAAO,EAAwB,KAAK,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAE9F,MAAM,MAAM,eAAe,GAAG;IAC1B,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACnC,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5D,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,cAAc,KAAK,IAAI,CAAC;IACzC,kBAAkB,CAAC,EAAE,CACjB,UAAU,EAAE,MAAM,EAClB,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,MAAM,EAChB,OAAO,EAAE,MAAM,KACd,IAAI,CAAC;CACb,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IAClC,UAAU,EAAE,eAAe,GAAG,IAAI,CAAC;IACnC,gBAAgB,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAC1C,qBAAqB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAClE,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,oBAAoB,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9D,gBAAgB,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;CACzE,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,wBAAwB,GAAG,uBAAuB,CAmD5F"}

package/dist/hooks/useChoiceDragDrop.js

@@ -0,0 +1,40 @@
+import { useCallback, useState } from 'react';
+import { GRAPH_SELECTION_KIND } from '@signalsafe/tree-spec-editor-core';
+export function useChoiceDragDrop(options) {
+    const { readOnly, onChoiceSelect, onSelect, onRepositionChoice } = options;
+    const [choiceDrag, setChoiceDrag] = useState(null);
+    const [choiceDropTarget, setChoiceDropTarget] = useState(null);
+    const handleChoiceDragStart = useCallback((nodeId, choiceId) => {
+        if (readOnly)
+            return;
+        setChoiceDrag({ sourceNodeId: nodeId, choiceId });
+        if (onChoiceSelect) {
+            onChoiceSelect(nodeId, choiceId);
+        }
+        else {
+            onSelect?.({ kind: GRAPH_SELECTION_KIND.NODE, id: nodeId });
+        }
+    }, [readOnly, onChoiceSelect, onSelect]);
+    const handleChoiceDragEnd = useCallback(() => {
+        setChoiceDrag(null);
+        setChoiceDropTarget(null);
+    }, []);
+    const handleChoiceDragOver = useCallback((nodeId, index) => {
+        setChoiceDropTarget({ nodeId, index });
+    }, []);
+    const handleChoiceDrop = useCallback((targetNodeId, targetIndex) => {
+        if (readOnly || !choiceDrag)
+            return;
+        onRepositionChoice?.(choiceDrag.sourceNodeId, choiceDrag.choiceId, targetNodeId, targetIndex);
+        setChoiceDrag(null);
+        setChoiceDropTarget(null);
+    }, [readOnly, choiceDrag, onRepositionChoice]);
+    return {
+        choiceDrag,
+        choiceDropTarget,
+        handleChoiceDragStart,
+        handleChoiceDragEnd,
+        handleChoiceDragOver,
+        handleChoiceDrop,
+    };
+}

package/dist/hooks/useEditorAdapter.d.ts

@@ -0,0 +1,46 @@
+import { type MutableRefObject, type RefObject } from 'react';
+import { type TreeSpecIssue, type TreeSpecWire } from '@signalsafe/tree-spec';
+import { type AutosaveStatus, type EditorTree, type TreeSpecAuditEventItem, type TreeSpecSnapshotItem } from '@signalsafe/tree-spec-editor-core';
+import type { GraphEditorVersionInfo, UseTreeSpecEditorActions, UseTreeSpecEditorOptions } from './types';
+export type UseEditorAdapterOptions = {
+    options: UseTreeSpecEditorOptions;
+    tree: EditorTree | null;
+    isPublished: boolean;
+    setIsPublished: (next: boolean) => void;
+    replaceTreeWithoutHistory: (next: EditorTree | null) => void;
+    lastSavedKeyRef: MutableRefObject<string>;
+    setAutosaveStatus: (status: AutosaveStatus) => void;
+};
+export type UseEditorAdapterResult = {
+    loading: boolean;
+    saving: boolean;
+    publishing: boolean;
+    setPublishing: (next: boolean) => void;
+    creatingSnapshot: boolean;
+    cloning: boolean;
+    restoringSnapshotId: string | null;
+    lastValidatedAt: string | null;
+    rawTreeSpec: TreeSpecWire | null;
+    versionInfo: GraphEditorVersionInfo | null;
+    localIssues: TreeSpecIssue[];
+    serverIssues: TreeSpecIssue[];
+    snapshots: TreeSpecSnapshotItem[];
+    auditEvents: TreeSpecAuditEventItem[];
+    loadingSnapshots: boolean;
+    loadingAudit: boolean;
+    showDraftHistory: boolean;
+    setShowDraftHistory: (next: boolean) => void;
+    showAudit: boolean;
+    setShowAudit: (next: boolean) => void;
+    showPublishModal: boolean;
+    setShowPublishModal: (next: boolean) => void;
+    validate: UseTreeSpecEditorActions['validate'];
+    saveDraft: UseTreeSpecEditorActions['saveDraft'];
+    createSnapshot: UseTreeSpecEditorActions['createSnapshot'];
+    restoreSnapshot: UseTreeSpecEditorActions['restoreSnapshot'];
+    cloneToDraft: UseTreeSpecEditorActions['cloneToDraft'];
+    validateRef: RefObject<UseTreeSpecEditorActions['validate']>;
+    saveDraftRef: RefObject<UseTreeSpecEditorActions['saveDraft']>;
+};
+export declare function useEditorAdapter(adapterOptions: UseEditorAdapterOptions): UseEditorAdapterResult;
+//# sourceMappingURL=useEditorAdapter.d.ts.map

package/dist/hooks/useEditorAdapter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEditorAdapter.d.ts","sourceRoot":"","sources":["../../src/hooks/useEditorAdapter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqD,KAAK,gBAAgB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEjH,OAAO,EAKH,KAAK,aAAa,EAClB,KAAK,YAAY,EACpB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAQH,KAAK,cAAc,EACnB,KAAK,UAAU,EACf,KAAK,sBAAsB,EAC3B,KAAK,oBAAoB,EAC5B,MAAM,mCAAmC,CAAC;AAE3C,OAAO,KAAK,EAER,sBAAsB,EACtB,wBAAwB,EACxB,wBAAwB,EAC3B,MAAM,SAAS,CAAC;AAEjB,MAAM,MAAM,uBAAuB,GAAG;IAClC,OAAO,EAAE,wBAAwB,CAAC;IAClC,IAAI,EAAE,UAAU,GAAG,IAAI,CAAC;IACxB,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,yBAAyB,EAAE,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7D,eAAe,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAC1C,iBAAiB,EAAE,CAAC,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC;CACvD,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACjC,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,OAAO,EAAE,OAAO,CAAC;IACjB,mBAAmB,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC,eAAe,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,WAAW,EAAE,YAAY,GAAG,IAAI,CAAC;IACjC,WAAW,EAAE,sBAAsB,GAAG,IAAI,CAAC;IAC3C,WAAW,EAAE,aAAa,EAAE,CAAC;IAC7B,YAAY,EAAE,aAAa,EAAE,CAAC;IAC9B,SAAS,EAAE,oBAAoB,EAAE,CAAC;IAClC,WAAW,EAAE,sBAAsB,EAAE,CAAC;IACtC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,YAAY,EAAE,OAAO,CAAC;IACtB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,mBAAmB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,mBAAmB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,QAAQ,EAAE,wBAAwB,CAAC,UAAU,CAAC,CAAC;IAC/C,SAAS,EAAE,wBAAwB,CAAC,WAAW,CAAC,CAAC;IACjD,cAAc,EAAE,wBAAwB,CAAC,gBAAgB,CAAC,CAAC;IAC3D,eAAe,EAAE,wBAAwB,CAAC,iBAAiB,CAAC,CAAC;IAC7D,YAAY,EAAE,wBAAwB,CAAC,cAAc,CAAC,CAAC;IACvD,WAAW,EAAE,SAAS,CAAC,wBAAwB,CAAC,UAAU,CAAC,CAAC,CAAC;IAC7D,YAAY,EAAE,SAAS,CAAC,wBAAwB,CAAC,WAAW,CAAC,CAAC,CAAC;CAClE,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,cAAc,EAAE,uBAAuB,GAAG,sBAAsB,CAsShG"}