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

package/dist/hooks/useEditorAdapter.js

@@ -0,0 +1,281 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { compileTreeSpec, decompileTreeSpec, lintTreeSpecWire, TREE_SPEC_ISSUE_SEVERITY, } from '@signalsafe/tree-spec';
+import { autoLayoutTree, AUTOSAVE_STATUS, coerceTreeSpecWireForEditor as defaultCoerceRawSpec, needsInitialLayout, lintEditorTree, parsePydanticOutcomeErrors as defaultParseServerErrorMessage, shouldQueueInitialValidation as defaultShouldQueueInitialValidation, } from '@signalsafe/tree-spec-editor-core';
+export function useEditorAdapter(adapterOptions) {
+    const { options, tree, isPublished, setIsPublished, replaceTreeWithoutHistory, lastSavedKeyRef, setAutosaveStatus, } = adapterOptions;
+    const { adapter, entityId, coerceRawSpec = defaultCoerceRawSpec, onCloneNavigate, parseServerErrorMessage = defaultParseServerErrorMessage, shouldQueueInitialValidation = defaultShouldQueueInitialValidation, } = options;
+    const [loading, setLoading] = useState(true);
+    const [saving, setSaving] = useState(false);
+    const [publishing, setPublishing] = useState(false);
+    const [rawTreeSpec, setRawTreeSpec] = useState(null);
+    const [versionInfo, setVersionInfo] = useState(null);
+    const [localIssues, setLocalIssues] = useState([]);
+    const [serverIssues, setServerIssues] = useState([]);
+    const [lastValidatedAt, setLastValidatedAt] = useState(null);
+    const [showDraftHistory, setShowDraftHistory] = useState(false);
+    const [showAudit, setShowAudit] = useState(false);
+    const [showPublishModal, setShowPublishModal] = useState(false);
+    const [snapshots, setSnapshots] = useState([]);
+    const [auditEvents, setAuditEvents] = useState([]);
+    const [loadingSnapshots, setLoadingSnapshots] = useState(false);
+    const [loadingAudit, setLoadingAudit] = useState(false);
+    const [restoringSnapshotId, setRestoringSnapshotId] = useState(null);
+    const [creatingSnapshot, setCreatingSnapshot] = useState(false);
+    const [cloning, setCloning] = useState(false);
+    const validateRef = useRef(async () => undefined);
+    const saveDraftRef = useRef(async () => undefined);
+    const compiledTreeSpec = useMemo(() => (tree ? compileTreeSpec(tree) : null), [tree]);
+    useEffect(() => {
+        let cancelled = false;
+        async function load() {
+            if (!entityId)
+                return;
+            setLoading(true);
+            setVersionInfo(null);
+            try {
+                const raw = await adapter.getVersion(entityId);
+                if (cancelled)
+                    return;
+                setIsPublished(Boolean(raw?.is_published));
+                setVersionInfo(raw?.info ?? null);
+                const rawSpec = raw?.tree_spec;
+                const spec = coerceRawSpec(rawSpec);
+                if (spec == null) {
+                    setRawTreeSpec(null);
+                    replaceTreeWithoutHistory(null);
+                    setVersionInfo(raw?.info ?? null);
+                }
+                else {
+                    setRawTreeSpec(spec);
+                    let nextTree = decompileTreeSpec(spec);
+                    if (needsInitialLayout(nextTree)) {
+                        nextTree = autoLayoutTree(nextTree);
+                    }
+                    replaceTreeWithoutHistory(nextTree);
+                    setLocalIssues([...lintTreeSpecWire(spec), ...lintEditorTree(nextTree)]);
+                    if (shouldQueueInitialValidation(raw?.is_published)) {
+                        queueMicrotask(() => {
+                            void validateRef.current(spec);
+                        });
+                    }
+                    lastSavedKeyRef.current = JSON.stringify(spec);
+                    setAutosaveStatus(AUTOSAVE_STATUS.IDLE);
+                }
+            }
+            catch {
+                if (cancelled)
+                    return;
+                setRawTreeSpec(null);
+                replaceTreeWithoutHistory(null);
+                setVersionInfo(null);
+            }
+            finally {
+                if (!cancelled)
+                    setLoading(false);
+            }
+        }
+        if (entityId)
+            void load();
+        return () => {
+            cancelled = true;
+        };
+    }, [
+        entityId,
+        adapter,
+        coerceRawSpec,
+        shouldQueueInitialValidation,
+        replaceTreeWithoutHistory,
+        lastSavedKeyRef,
+        setAutosaveStatus,
+        setIsPublished,
+    ]);
+    useEffect(() => {
+        if (!tree || !compiledTreeSpec)
+            return;
+        setLocalIssues([...lintTreeSpecWire(compiledTreeSpec), ...lintEditorTree(tree)]);
+    }, [tree, compiledTreeSpec]);
+    const validate = useCallback(async (specOverride) => {
+        if (!entityId)
+            return undefined;
+        const spec = specOverride ?? (tree ? compileTreeSpec(tree) : rawTreeSpec);
+        if (!spec)
+            return undefined;
+        if (!adapter.validate) {
+            setLastValidatedAt(new Date().toISOString());
+            return { valid: true };
+        }
+        try {
+            const payload = await adapter.validate(entityId, spec);
+            const nextIssues = (payload?.issues ?? []).map((i) => {
+                const severity = i.severity ?? i.level ?? TREE_SPEC_ISSUE_SEVERITY.ERROR;
+                return {
+                    severity,
+                    message: String(i.message ?? 'Issue'),
+                    node_id: i.node_id ?? undefined,
+                    choice_id: i.choice_id ?? undefined,
+                };
+            });
+            setServerIssues(nextIssues);
+            setLastValidatedAt(new Date().toISOString());
+            return payload;
+        }
+        catch (err) {
+            const ex = err;
+            const errData = ex?.response?.data;
+            const msg = errData?.detail ??
+                errData?.error ??
+                err?.message ??
+                'Validation failed';
+            const parsed = parseServerErrorMessage(String(msg));
+            setServerIssues(parsed ?? [{ severity: TREE_SPEC_ISSUE_SEVERITY.ERROR, message: String(msg) }]);
+            setLastValidatedAt(new Date().toISOString());
+            return {
+                valid: false,
+                issues: [{ severity: TREE_SPEC_ISSUE_SEVERITY.ERROR, message: String(msg) }],
+            };
+        }
+    }, [adapter, entityId, parseServerErrorMessage, rawTreeSpec, tree]);
+    useEffect(() => {
+        validateRef.current = validate;
+    }, [validate]);
+    const saveDraft = useCallback(async () => {
+        if (!entityId || !tree)
+            return;
+        if (isPublished)
+            return;
+        setSaving(true);
+        setAutosaveStatus(AUTOSAVE_STATUS.SAVING);
+        try {
+            const compiled = compileTreeSpec(tree);
+            await adapter.updateVersion(entityId, { tree_spec: compiled });
+            setRawTreeSpec(compiled);
+            lastSavedKeyRef.current = JSON.stringify(compiled);
+            setAutosaveStatus(AUTOSAVE_STATUS.SAVED);
+        }
+        finally {
+            setSaving(false);
+        }
+    }, [adapter, entityId, isPublished, tree, lastSavedKeyRef, setAutosaveStatus]);
+    useEffect(() => {
+        saveDraftRef.current = saveDraft;
+    }, [saveDraft]);
+    useEffect(() => {
+        const listSnapshots = adapter.listSnapshots;
+        if (!listSnapshots || !showDraftHistory || !entityId)
+            return;
+        let cancelled = false;
+        setLoadingSnapshots(true);
+        void (async () => {
+            try {
+                const list = await listSnapshots(entityId);
+                if (!cancelled)
+                    setSnapshots(list);
+            }
+            finally {
+                if (!cancelled)
+                    setLoadingSnapshots(false);
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [adapter, showDraftHistory, entityId]);
+    const createSnapshot = useCallback(async () => {
+        if (!entityId || !tree || !adapter.createSnapshot || !adapter.listSnapshots)
+            return;
+        setCreatingSnapshot(true);
+        try {
+            const compiled = compileTreeSpec(tree);
+            await adapter.createSnapshot(entityId, { label: '', tree_spec: compiled });
+            const list = await adapter.listSnapshots(entityId);
+            setSnapshots(list);
+        }
+        finally {
+            setCreatingSnapshot(false);
+        }
+    }, [adapter, entityId, tree]);
+    const restoreSnapshot = useCallback(async (snapshotId) => {
+        if (!entityId || !adapter.restoreSnapshot)
+            return;
+        setRestoringSnapshotId(snapshotId);
+        try {
+            const { tree_spec: rawSpec } = await adapter.restoreSnapshot(entityId, snapshotId);
+            const spec = coerceRawSpec(rawSpec);
+            if (spec != null) {
+                setRawTreeSpec(spec);
+                replaceTreeWithoutHistory(decompileTreeSpec(spec));
+                lastSavedKeyRef.current = JSON.stringify(spec);
+                setAutosaveStatus(AUTOSAVE_STATUS.IDLE);
+            }
+            setShowDraftHistory(false);
+        }
+        finally {
+            setRestoringSnapshotId(null);
+        }
+    }, [adapter, coerceRawSpec, entityId, replaceTreeWithoutHistory, lastSavedKeyRef, setAutosaveStatus]);
+    useEffect(() => {
+        const listAudit = adapter.listAudit;
+        if (!listAudit || !showAudit || !entityId)
+            return;
+        let cancelled = false;
+        setLoadingAudit(true);
+        void (async () => {
+            try {
+                const list = await listAudit(entityId);
+                if (!cancelled)
+                    setAuditEvents(list);
+            }
+            finally {
+                if (!cancelled)
+                    setLoadingAudit(false);
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [adapter, showAudit, entityId]);
+    const cloneToDraft = useCallback(async () => {
+        if (!entityId || !adapter.cloneToDraft)
+            return;
+        setCloning(true);
+        try {
+            const { id: newId } = await adapter.cloneToDraft(entityId);
+            if (newId)
+                onCloneNavigate?.(newId);
+        }
+        finally {
+            setCloning(false);
+        }
+    }, [adapter, entityId, onCloneNavigate]);
+    return {
+        loading,
+        saving,
+        publishing,
+        setPublishing,
+        creatingSnapshot,
+        cloning,
+        restoringSnapshotId,
+        lastValidatedAt,
+        rawTreeSpec,
+        versionInfo,
+        localIssues,
+        serverIssues,
+        snapshots,
+        auditEvents,
+        loadingSnapshots,
+        loadingAudit,
+        showDraftHistory,
+        setShowDraftHistory,
+        showAudit,
+        setShowAudit,
+        showPublishModal,
+        setShowPublishModal,
+        validate,
+        saveDraft,
+        createSnapshot,
+        restoreSnapshot,
+        cloneToDraft,
+        validateRef,
+        saveDraftRef,
+    };
+}

package/dist/hooks/useEditorAutosave.d.ts

@@ -0,0 +1,18 @@
+import { type MutableRefObject, type RefObject } from 'react';
+import { type AutosaveStatus, type EditorTree } from '@signalsafe/tree-spec-editor-core';
+import type { UseTreeSpecEditorActions } from './types';
+export type UseEditorAutosaveOptions = {
+    enableAutosave: boolean;
+    autosaveDebounceMs: number;
+    entityId: string | undefined;
+    tree: EditorTree | null;
+    isPublished: boolean;
+    saving: boolean;
+    publishing: boolean;
+    autosaveStatus: AutosaveStatus;
+    setAutosaveStatus: (status: AutosaveStatus) => void;
+    lastSavedKeyRef: MutableRefObject<string>;
+    saveDraftRef: RefObject<UseTreeSpecEditorActions['saveDraft']>;
+};
+export declare function useEditorAutosave(options: UseEditorAutosaveOptions): void;
+//# sourceMappingURL=useEditorAutosave.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useEditorAutosave.d.ts","sourceRoot":"","sources":["../../src/hooks/useEditorAutosave.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,gBAAgB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAIjF,OAAO,EAAmB,KAAK,cAAc,EAAE,KAAK,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAE1G,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;AAExD,MAAM,MAAM,wBAAwB,GAAG;IACnC,cAAc,EAAE,OAAO,CAAC;IACxB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,IAAI,EAAE,UAAU,GAAG,IAAI,CAAC;IACxB,WAAW,EAAE,OAAO,CAAC;IACrB,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,OAAO,CAAC;IACpB,cAAc,EAAE,cAAc,CAAC;IAC/B,iBAAiB,EAAE,CAAC,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC;IACpD,eAAe,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAC1C,YAAY,EAAE,SAAS,CAAC,wBAAwB,CAAC,WAAW,CAAC,CAAC,CAAC;CAClE,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,wBAAwB,GAAG,IAAI,CA2CzE"}

package/dist/hooks/useEditorAutosave.js

@@ -0,0 +1,37 @@
+import { useEffect, useRef } from 'react';
+import { compileTreeSpec } from '@signalsafe/tree-spec';
+import { AUTOSAVE_STATUS } from '@signalsafe/tree-spec-editor-core';
+export function useEditorAutosave(options) {
+    const { enableAutosave, autosaveDebounceMs, entityId, tree, isPublished, saving, publishing, autosaveStatus, setAutosaveStatus, lastSavedKeyRef, saveDraftRef, } = options;
+    const autosaveTimerRef = useRef(null);
+    useEffect(() => {
+        if (!enableAutosave)
+            return;
+        if (!entityId || !tree)
+            return;
+        if (isPublished)
+            return;
+        if (saving || publishing)
+            return;
+        const compiled = compileTreeSpec(tree);
+        const key = JSON.stringify(compiled);
+        if (key === lastSavedKeyRef.current) {
+            if (autosaveStatus !== AUTOSAVE_STATUS.SAVED)
+                setAutosaveStatus(AUTOSAVE_STATUS.IDLE);
+            return;
+        }
+        setAutosaveStatus(AUTOSAVE_STATUS.DIRTY);
+        autosaveTimerRef.current = globalThis.setTimeout(() => {
+            void saveDraftRef.current?.();
+        }, autosaveDebounceMs);
+        return () => {
+            if (autosaveTimerRef.current) {
+                globalThis.clearTimeout(autosaveTimerRef.current);
+                autosaveTimerRef.current = null;
+            }
+        };
+        // NOTE: autosaveStatus is intentionally NOT in deps. The dirty/idle
+        // bookkeeping above flips status, and re-running the effect on every
+        // status change would reset the debounce timer.
+    }, [tree, entityId, isPublished, saving, publishing, autosaveDebounceMs, enableAutosave]);
+}

package/dist/hooks/useEditorHistory.d.ts

@@ -0,0 +1,16 @@
+import { type EditorTree, type GraphSelection } from '@signalsafe/tree-spec-editor-core';
+export type UseEditorHistoryResult = {
+    tree: EditorTree | null;
+    canUndo: boolean;
+    canRedo: boolean;
+    hasCopiedNode: boolean;
+    commitTree: (next: EditorTree | null) => void;
+    replaceTreeWithoutHistory: (next: EditorTree | null) => void;
+    undo: () => boolean;
+    redo: () => boolean;
+    copySelectedNode: (selection: GraphSelection) => boolean;
+    pasteCopiedNode: (setSelection: (next: GraphSelection) => void, setFocusNodeId: (id: string | null) => void) => boolean;
+    duplicateNodeById: (nodeId: string, setSelection: (next: GraphSelection) => void, setFocusNodeId: (id: string | null) => void) => string | undefined;
+};
+export declare function useEditorHistory(isPublished: boolean): UseEditorHistoryResult;
+//# sourceMappingURL=useEditorHistory.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useEditorHistory.d.ts","sourceRoot":"","sources":["../../src/hooks/useEditorHistory.ts"],"names":[],"mappings":"AAEA,OAAO,EAaH,KAAK,UAAU,EACf,KAAK,cAAc,EACtB,MAAM,mCAAmC,CAAC;AAE3C,MAAM,MAAM,sBAAsB,GAAG;IACjC,IAAI,EAAE,UAAU,GAAG,IAAI,CAAC;IACxB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,EAAE,OAAO,CAAC;IACvB,UAAU,EAAE,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9C,yBAAyB,EAAE,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7D,IAAI,EAAE,MAAM,OAAO,CAAC;IACpB,IAAI,EAAE,MAAM,OAAO,CAAC;IACpB,gBAAgB,EAAE,CAAC,SAAS,EAAE,cAAc,KAAK,OAAO,CAAC;IACrD,eAAe,EAAE,CACjB,YAAY,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,EAC5C,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,KAC1C,OAAO,CAAC;IACb,iBAAiB,EAAE,CACf,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,EAC5C,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,KAC1C,MAAM,GAAG,SAAS,CAAC;CAC3B,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,WAAW,EAAE,OAAO,GAAG,sBAAsB,CAsH7E"}

package/dist/hooks/useEditorHistory.js

@@ -0,0 +1,103 @@
+import { useCallback, useRef, useState } from 'react';
+import { canRedoEditorHistory, canUndoEditorHistory, clearEditorHistory, createEditorHistoryStack, duplicateNode, editorTreesEqual, END_NODE_ID, GRAPH_SELECTION_KIND, popEditorRedo, popEditorUndo, pushEditorHistory, } from '@signalsafe/tree-spec-editor-core';
+export function useEditorHistory(isPublished) {
+    const [tree, setTree] = useState(null);
+    const historyRef = useRef(createEditorHistoryStack());
+    const copiedNodeIdRef = useRef(null);
+    const [canUndo, setCanUndo] = useState(false);
+    const [canRedo, setCanRedo] = useState(false);
+    const [hasCopiedNode, setHasCopiedNode] = useState(false);
+    const syncHistoryMeta = useCallback(() => {
+        const stack = historyRef.current;
+        setCanUndo(canUndoEditorHistory(stack));
+        setCanRedo(canRedoEditorHistory(stack));
+    }, []);
+    const resetEditorHistory = useCallback(() => {
+        clearEditorHistory(historyRef.current);
+        copiedNodeIdRef.current = null;
+        setHasCopiedNode(false);
+        syncHistoryMeta();
+    }, [syncHistoryMeta]);
+    const commitTree = useCallback((next) => {
+        setTree((prev) => {
+            if (prev && next && !editorTreesEqual(prev, next)) {
+                pushEditorHistory(historyRef.current, prev);
+            }
+            return next;
+        });
+        queueMicrotask(syncHistoryMeta);
+    }, [syncHistoryMeta]);
+    const replaceTreeWithoutHistory = useCallback((next) => {
+        resetEditorHistory();
+        setTree(next);
+    }, [resetEditorHistory]);
+    const undo = useCallback(() => {
+        if (!tree || isPublished)
+            return false;
+        const result = popEditorUndo(historyRef.current, tree);
+        if (!result)
+            return false;
+        historyRef.current.future.unshift(result.currentSnapshot);
+        setTree(result.nextTree);
+        queueMicrotask(syncHistoryMeta);
+        return true;
+    }, [tree, isPublished, syncHistoryMeta]);
+    const redo = useCallback(() => {
+        if (!tree || isPublished)
+            return false;
+        const result = popEditorRedo(historyRef.current, tree);
+        if (!result)
+            return false;
+        historyRef.current.past.push(result.currentSnapshot);
+        setTree(result.nextTree);
+        queueMicrotask(syncHistoryMeta);
+        return true;
+    }, [tree, isPublished, syncHistoryMeta]);
+    const copySelectedNode = useCallback((selection) => {
+        if (selection.kind !== GRAPH_SELECTION_KIND.NODE || !selection.id)
+            return false;
+        if (selection.id === END_NODE_ID)
+            return false;
+        copiedNodeIdRef.current = selection.id;
+        setHasCopiedNode(true);
+        return true;
+    }, []);
+    const pasteCopiedNode = useCallback((setSelection, setFocusNodeId) => {
+        if (!tree || isPublished)
+            return false;
+        const sourceId = copiedNodeIdRef.current;
+        if (!sourceId)
+            return false;
+        const duplicated = duplicateNode(tree, sourceId);
+        if (!duplicated)
+            return false;
+        commitTree(duplicated.nextTree);
+        setSelection({ kind: GRAPH_SELECTION_KIND.NODE, id: duplicated.nextNodeId });
+        setFocusNodeId(duplicated.nextNodeId);
+        return true;
+    }, [tree, isPublished, commitTree]);
+    const duplicateNodeById = useCallback((nodeId, setSelection, setFocusNodeId) => {
+        if (!tree || isPublished)
+            return undefined;
+        const duplicated = duplicateNode(tree, nodeId);
+        if (!duplicated)
+            return undefined;
+        commitTree(duplicated.nextTree);
+        setSelection({ kind: GRAPH_SELECTION_KIND.NODE, id: duplicated.nextNodeId });
+        setFocusNodeId(duplicated.nextNodeId);
+        return duplicated.nextNodeId;
+    }, [tree, isPublished, commitTree]);
+    return {
+        tree,
+        canUndo,
+        canRedo,
+        hasCopiedNode,
+        commitTree,
+        replaceTreeWithoutHistory,
+        undo,
+        redo,
+        copySelectedNode,
+        pasteCopiedNode,
+        duplicateNodeById,
+    };
+}

package/dist/hooks/useEditorSelection.d.ts

@@ -0,0 +1,22 @@
+import { type EditorNode, type EditorTransition, type EditorTree, type GraphSelection } from '@signalsafe/tree-spec-editor-core';
+export type UseEditorSelectionResult = {
+    selection: GraphSelection;
+    focusNodeId: string | null;
+    focusChoiceId: string | null;
+    fitViewNonce: number;
+    selectedNode: EditorNode | null;
+    selectedEdge: EditorTransition | null;
+    inspectorNode: EditorNode | null;
+    selectChoice: (nodeId: string, choiceId: string) => void;
+    applySelection: (next: GraphSelection) => void;
+    setFocusNodeId: (id: string | null) => void;
+    setFocusChoiceId: (id: string | null) => void;
+    triggerResetView: () => void;
+    selectIssue: (issue: {
+        node_id?: string;
+        choice_id?: string;
+    }) => void;
+    setSelection: (next: GraphSelection) => void;
+};
+export declare function useEditorSelection(tree: EditorTree | null): UseEditorSelectionResult;
+//# sourceMappingURL=useEditorSelection.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useEditorSelection.d.ts","sourceRoot":"","sources":["../../src/hooks/useEditorSelection.ts"],"names":[],"mappings":"AAEA,OAAO,EAIH,KAAK,UAAU,EACf,KAAK,gBAAgB,EACrB,KAAK,UAAU,EACf,KAAK,cAAc,EACtB,MAAM,mCAAmC,CAAC;AAE3C,MAAM,MAAM,wBAAwB,GAAG;IACnC,SAAS,EAAE,cAAc,CAAC;IAC1B,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,UAAU,GAAG,IAAI,CAAC;IAChC,YAAY,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACtC,aAAa,EAAE,UAAU,GAAG,IAAI,CAAC;IACjC,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,cAAc,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;IAC/C,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC5C,gBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9C,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,WAAW,EAAE,CAAC,KAAK,EAAE;QAAE,OAAO,CAAC,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACvE,YAAY,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;CAChD,CAAC;AAEF,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI,GAAG,wBAAwB,CA6EpF"}

package/dist/hooks/useEditorSelection.js

@@ -0,0 +1,76 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { END_NODE_ID, GRAPH_SELECTION_KIND, resolveGraphSelectionFocus, } from '@signalsafe/tree-spec-editor-core';
+export function useEditorSelection(tree) {
+    const [selection, setSelection] = useState({ kind: null, id: null });
+    const [focusNodeId, setFocusNodeId] = useState(null);
+    const [focusChoiceId, setFocusChoiceId] = useState(null);
+    const [fitViewNonce, setFitViewNonce] = useState(0);
+    const selectChoice = useCallback((nodeId, choiceId) => {
+        setSelection({ kind: GRAPH_SELECTION_KIND.NODE, id: nodeId });
+        setFocusChoiceId(choiceId);
+        setFocusNodeId(nodeId);
+    }, []);
+    const applySelection = useCallback((next) => {
+        setSelection(next);
+        if (next.kind === GRAPH_SELECTION_KIND.EDGE && next.id && tree) {
+            const edge = tree.transitions.find((t) => t.id === next.id);
+            if (!edge)
+                return;
+        }
+        const { focusNodeId: nextFocusNodeId, focusChoiceId: nextFocusChoiceId } = resolveGraphSelectionFocus(next, tree);
+        setFocusNodeId(nextFocusNodeId);
+        setFocusChoiceId(nextFocusChoiceId);
+    }, [tree]);
+    const selectedNode = useMemo(() => {
+        if (!tree || selection.kind !== GRAPH_SELECTION_KIND.NODE || !selection.id)
+            return null;
+        if (selection.id === END_NODE_ID)
+            return null;
+        return tree.nodes[selection.id] ?? null;
+    }, [tree, selection]);
+    const selectedEdge = useMemo(() => {
+        if (!tree || selection.kind !== GRAPH_SELECTION_KIND.EDGE || !selection.id)
+            return null;
+        return tree.transitions.find((t) => t.id === selection.id) ?? null;
+    }, [tree, selection]);
+    const inspectorNode = useMemo(() => {
+        if (selectedNode)
+            return selectedNode;
+        if (selectedEdge)
+            return tree?.nodes[selectedEdge.fromNodeId] ?? null;
+        return null;
+    }, [selectedNode, selectedEdge, tree]);
+    const triggerResetView = useCallback(() => setFitViewNonce((n) => n + 1), []);
+    const selectIssue = useCallback((issue) => {
+        if (!issue.node_id)
+            return;
+        setSelection({ kind: GRAPH_SELECTION_KIND.NODE, id: issue.node_id });
+        setFocusNodeId(issue.node_id);
+        setFocusChoiceId(issue.choice_id ?? null);
+        setFitViewNonce((n) => n + 1);
+    }, []);
+    useEffect(() => {
+        if (!inspectorNode || !focusChoiceId)
+            return;
+        if (typeof document === 'undefined')
+            return;
+        const el = document.getElementById(`choice-editor-${inspectorNode.id}-${focusChoiceId}`);
+        el?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+    }, [inspectorNode, focusChoiceId]);
+    return {
+        selection,
+        focusNodeId,
+        focusChoiceId,
+        fitViewNonce,
+        selectedNode,
+        selectedEdge,
+        inspectorNode,
+        selectChoice,
+        applySelection,
+        setFocusNodeId,
+        setFocusChoiceId,
+        triggerResetView,
+        selectIssue,
+        setSelection,
+    };
+}

package/dist/hooks/useGraphConnect.d.ts

@@ -0,0 +1,22 @@
+import { type MutableRefObject } from 'react';
+import type { Connection, Edge } from 'reactflow';
+import { type EditorTree, type GraphSelection } from '@signalsafe/tree-spec-editor-core';
+export type UseGraphConnectOptions = {
+    treeRef: MutableRefObject<EditorTree>;
+    onChange: (next: EditorTree) => void;
+    onSelect?: (sel: GraphSelection) => void;
+    readOnly: boolean;
+};
+export type UseGraphConnectResult = {
+    onConnect: (conn: Connection) => void;
+    onConnectStart: (_event: unknown, params: {
+        nodeId: string | null;
+        handleId: string | null;
+    }) => void;
+    onConnectEnd: (event: MouseEvent | TouchEvent) => void;
+    onReconnect: (oldEdge: Edge, newConnection: Connection) => void;
+    onEdgesDelete: (deleted: Edge[]) => void;
+    isValidConnection: (conn: Connection) => boolean;
+};
+export declare function useGraphConnect(options: UseGraphConnectOptions): UseGraphConnectResult;
+//# sourceMappingURL=useGraphConnect.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useGraphConnect.d.ts","sourceRoot":"","sources":["../../src/hooks/useGraphConnect.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,KAAK,gBAAgB,EAAE,MAAM,OAAO,CAAC;AACnE,OAAO,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAGlD,OAAO,EAMH,KAAK,UAAU,EACf,KAAK,cAAc,EACtB,MAAM,mCAAmC,CAAC;AAI3C,MAAM,MAAM,sBAAsB,GAAG;IACjC,OAAO,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACtC,QAAQ,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;IACrC,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,cAAc,KAAK,IAAI,CAAC;IACzC,QAAQ,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAChC,SAAS,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,cAAc,EAAE,CACZ,MAAM,EAAE,OAAO,EACf,MAAM,EAAE;QAAE,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;QAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,KACzD,IAAI,CAAC;IACV,YAAY,EAAE,CAAC,KAAK,EAAE,UAAU,GAAG,UAAU,KAAK,IAAI,CAAC;IACvD,WAAW,EAAE,CAAC,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,UAAU,KAAK,IAAI,CAAC;IAChE,aAAa,EAAE,CAAC,OAAO,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACzC,iBAAiB,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,OAAO,CAAC;CACpD,CAAC;AAEF,wBAAgB,eAAe,CAAC,OAAO,EAAE,sBAAsB,GAAG,qBAAqB,CAmGtF"}

package/dist/hooks/useGraphConnect.js

@@ -0,0 +1,75 @@
+import { useCallback, useRef } from 'react';
+import { useReactFlow } from 'reactflow';
+import { GRAPH_SELECTION_KIND, applyEditorConnect, applyEditorConnectOnDrop, applyEditorReconnect, isValidEditorConnection, } from '@signalsafe/tree-spec-editor-core';
+import { isReactFlowPaneTarget } from '../canvas/typeGuards';
+export function useGraphConnect(options) {
+    const { treeRef, onChange, onSelect, readOnly } = options;
+    const rf = useReactFlow();
+    const connectCompletedRef = useRef(false);
+    const pendingConnectRef = useRef(null);
+    const onConnect = useCallback((conn) => {
+        connectCompletedRef.current = true;
+        const nextTree = applyEditorConnect(treeRef.current, conn);
+        if (!nextTree)
+            return;
+        onChange(nextTree);
+    }, [onChange, treeRef]);
+    const onConnectStart = useCallback((_event, params) => {
+        connectCompletedRef.current = false;
+        if (!params.nodeId || !params.handleId) {
+            pendingConnectRef.current = null;
+            return;
+        }
+        pendingConnectRef.current = {
+            source: params.nodeId,
+            sourceHandle: params.handleId,
+        };
+    }, []);
+    const onConnectEnd = useCallback((event) => {
+        if (readOnly || connectCompletedRef.current) {
+            pendingConnectRef.current = null;
+            return;
+        }
+        const pending = pendingConnectRef.current;
+        pendingConnectRef.current = null;
+        if (!pending)
+            return;
+        if (!isReactFlowPaneTarget(event.target)) {
+            return;
+        }
+        const clientX = 'clientX' in event ? event.clientX : event.changedTouches?.[0]?.clientX;
+        const clientY = 'clientY' in event ? event.clientY : event.changedTouches?.[0]?.clientY;
+        if (clientX == null || clientY == null)
+            return;
+        const dropPosition = rf.screenToFlowPosition({ x: clientX, y: clientY });
+        const result = applyEditorConnectOnDrop(treeRef.current, pending.source, pending.sourceHandle, dropPosition);
+        if (!result)
+            return;
+        onChange(result.nextTree);
+        onSelect?.({ kind: GRAPH_SELECTION_KIND.NODE, id: result.nextNodeId });
+    }, [onChange, onSelect, readOnly, rf, treeRef]);
+    const isValidConnection = useCallback((conn) => isValidEditorConnection(treeRef.current, conn), [treeRef]);
+    const onReconnect = useCallback((oldEdge, newConnection) => {
+        const nextTree = applyEditorReconnect(treeRef.current, oldEdge, newConnection);
+        if (!nextTree)
+            return;
+        onChange(nextTree);
+    }, [onChange, treeRef]);
+    const onEdgesDelete = useCallback((deleted) => {
+        const deletedIds = new Set(deleted.map((edge) => String(edge.id)));
+        if (deletedIds.size === 0)
+            return;
+        onChange({
+            ...treeRef.current,
+            transitions: treeRef.current.transitions.filter((t) => !deletedIds.has(t.id)),
+        });
+    }, [onChange, treeRef]);
+    return {
+        onConnect,
+        onConnectStart,
+        onConnectEnd,
+        onReconnect,
+        onEdgesDelete,
+        isValidConnection,
+    };
+}