@signalsafe/tree-spec-editor 0.1.0

package/README.md

@@ -0,0 +1,45 @@
+# `@signalsafe/tree-spec-editor`
+
+Reusable **TreeSpec** graph editor (React Flow): canvas, selection, node/edge editing, and authoring helpers (compile/decompile, lint, layout).
+
+**Platform architecture:** see **[docs/development/reusable-packages-architecture.md](../../docs/development/reusable-packages-architecture.md)** (editor flow vs simulator runtime).
+
+## Purpose
+
+- Embed graph authoring in admin or content apps without pulling simulator runtime or API layers.
+
+## What belongs here
+
+- `TreeSpecGraphEditor` (default export), editor model types (`EditorTree`, `GraphSelection`, …), `lintEditorTree`, `autoLayoutTree`, `getNextSpawnPosition`, transition helpers.
+- Pure wire helpers such as `compileTreeSpec`, `decompileTreeSpec`, `isTreeSpecWire`, and `lintTreeSpecWire` come from `@signalsafe/tree-spec`.
+
+## What does **not** belong here
+
+- Simulator runtime, session stepping, **routing**, **autosave**, **HTTP/API**, or tenant/company-specific UI.
+
+## Dependency direction
+
+- Depends on **`@signalsafe/tree-spec`** and peer **`react`**, **`react-dom`**, **`reactflow`**.
+- **Does not** depend on `simulator-core` or app packages.
+
+## Usage
+
+```tsx
+import TreeSpecGraphEditor, { lintEditorTree } from '@signalsafe/tree-spec-editor';
+import { compileTreeSpec } from '@signalsafe/tree-spec';
+```
+
+## Consumer expectations
+
+- Install `react`, `react-dom`, and `reactflow` in the consuming app.
+- This package ships a built `dist/` artifact and supports only the package root import.
+- A consumer is expected to provide its own bundler/runtime wiring; this package does not include host routing, autosave, or API transport.
+
+## Public API
+
+Only the **entry** (`src/index.ts`) is supported for semver — **no** `package.json` subpath `exports` (use the barrel to avoid accidental deep imports).
+
+## Publishing notes
+
+- `files: ["dist", "README.md"]`.
+- Private-registry rollout uses the same release workflow as `@signalsafe/tree-spec` and `@signalsafe/simulator-core`: `release:check`, `pack:local`, `pack:check`, `smoke:external`, `publish:dry-run`, `release:verify`.

package/dist/TreeSpecGraphEditor.d.ts

@@ -0,0 +1,16 @@
+import 'reactflow/dist/style.css';
+import { type EditorTree, type GraphSelection, type GraphEditorIssue } from './model';
+export type TreeSpecGraphEditorProps = {
+    tree: EditorTree;
+    onChange: (next: EditorTree) => void;
+    issues?: GraphEditorIssue[];
+    showMiniMap?: boolean;
+    selected?: GraphSelection;
+    onSelect?: (sel: GraphSelection) => void;
+    focusNodeId?: string | null;
+    fitViewNonce?: number;
+    /** Optional class for the outer container (default includes h-70vh border rounded). */
+    className?: string;
+};
+export default function TreeSpecGraphEditor(props: TreeSpecGraphEditorProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TreeSpecGraphEditor.d.ts.map

package/dist/TreeSpecGraphEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeSpecGraphEditor.d.ts","sourceRoot":"","sources":["../src/TreeSpecGraphEditor.tsx"],"names":[],"mappings":"AAiBA,OAAO,0BAA0B,CAAC;AAGlC,OAAO,EAGH,KAAK,UAAU,EAEf,KAAK,cAAc,EACnB,KAAK,gBAAgB,EAGxB,MAAM,SAAS,CAAC;AAEjB,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;AA2XF,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,2CAM1E"}

package/dist/TreeSpecGraphEditor.js

@@ -0,0 +1,256 @@
+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 'reactflow/dist/style.css';
+import { safeUUID } from './editorHelpers';
+import { END_NODE_ID, } from './model';
+function PromptNode({ data }) {
+    const n = data.node;
+    const choices = n.choices ?? [];
+    const hasErrors = data.issuesErrors > 0;
+    return (_jsxs("div", { className: `card card-min-width-280 ${hasErrors ? 'border-danger' : data.issuesWarnings > 0 ? 'border-warning' : ''}`, 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() {
+    return (_jsxs("div", { className: "card border-danger w-180", 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 ?? '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: e.id || safeUUID(),
+            fromNodeId: String(e.source),
+            fromChoiceId: fromChoiceId,
+            toNodeId: String(e.target),
+            outcome: String(e.target) === END_NODE_ID ? (prior?.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', }) {
+    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 === 'warning')
+                cur.warnings += 1;
+            else if (sev === '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.0, 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 nodeTypes = useMemo(() => ({
+        promptNode: PromptNode,
+        endNode: EndNode,
+    }), []);
+    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;
+            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: 'node', id: node.id });
+    }, [onSelect]);
+    const onEdgeClick = useCallback((_evt, edge) => {
+        onSelect?.({ kind: 'edge', id: edge.id });
+    }, [onSelect]);
+    return (_jsx("div", { className: className, children: _jsxs(ReactFlow, { nodes: nodes.map((n) => ({
+                ...n,
+                selected: selected?.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 === 'edge' && selected.id === e.id,
+                    style: hasIssue ? { ...(e.style ?? {}), strokeWidth: 2, strokeDasharray: '6 4' } : e.style,
+                };
+            }), 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, {})] }) }));
+}
+export default function TreeSpecGraphEditor(props) {
+    return (_jsx(ReactFlowProvider, { children: _jsx(TreeSpecGraphInner, { ...props }) }));
+}

package/dist/editorHelpers.d.ts

@@ -0,0 +1,16 @@
+import type { TreeSpecIssue } from '@signalsafe/tree-spec';
+import { type EditorTree, type EditorTransition } from './model';
+/** Common node `type` presets for authoring UIs. */
+export declare const TREE_SPEC_NODE_TYPE_PRESETS: readonly ["prompt", "email", "sms", "call", "web", "attachment"];
+export declare function safeUUID(): string;
+export declare function getTransition(tree: EditorTree, fromNodeId: string, fromChoiceId: string): EditorTransition | undefined;
+export declare function upsertTransition(tree: EditorTree, next: EditorTransition): EditorTree;
+export declare function deleteTransitionsForChoice(tree: EditorTree, fromNodeId: string, fromChoiceId: string): EditorTree;
+/** Extra structural checks on the decompiled editor tree (beyond wire lint). */
+export declare function lintEditorTree(t: EditorTree): TreeSpecIssue[];
+/**
+ * Parse backend Pydantic validation messages into actionable issues with node_id/choice_id.
+ * Hosts can use this when server returns a generic error string.
+ */
+export declare function parsePydanticOutcomeErrors(msg: string): TreeSpecIssue[] | null;
+//# sourceMappingURL=editorHelpers.d.ts.map

package/dist/editorHelpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"editorHelpers.d.ts","sourceRoot":"","sources":["../src/editorHelpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,EAAe,KAAK,UAAU,EAAE,KAAK,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE9E,oDAAoD;AACpD,eAAO,MAAM,2BAA2B,kEAAmE,CAAC;AAE5G,wBAAgB,QAAQ,IAAI,MAAM,CAKjC;AAED,wBAAgB,aAAa,CAAC,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,GAAG,gBAAgB,GAAG,SAAS,CAEtH;AAED,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,gBAAgB,GAAG,UAAU,CAMrF;AAED,wBAAgB,0BAA0B,CAAC,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,GAAG,UAAU,CAKjH;AAED,gFAAgF;AAChF,wBAAgB,cAAc,CAAC,CAAC,EAAE,UAAU,GAAG,aAAa,EAAE,CAa7D;AAED;;;GAGG;AACH,wBAAgB,0BAA0B,CAAC,GAAG,EAAE,MAAM,GAAG,aAAa,EAAE,GAAG,IAAI,CAiB9E"}

package/dist/editorHelpers.js

@@ -0,0 +1,63 @@
+import { END_NODE_ID } from './model';
+/** Common node `type` presets for authoring UIs. */
+export const TREE_SPEC_NODE_TYPE_PRESETS = ['prompt', 'email', 'sms', 'call', 'web', 'attachment'];
+export function safeUUID() {
+    const crypto = globalThis.crypto;
+    return crypto && typeof crypto.randomUUID === 'function'
+        ? crypto.randomUUID()
+        : `${Date.now()}-${Math.random()}`;
+}
+export function getTransition(tree, fromNodeId, fromChoiceId) {
+    return tree.transitions.find((t) => t.fromNodeId === fromNodeId && t.fromChoiceId === fromChoiceId);
+}
+export function upsertTransition(tree, next) {
+    const idx = tree.transitions.findIndex((t) => t.id === next.id);
+    const arr = [...tree.transitions];
+    if (idx >= 0)
+        arr[idx] = next;
+    else
+        arr.push(next);
+    return { ...tree, transitions: arr };
+}
+export function deleteTransitionsForChoice(tree, fromNodeId, fromChoiceId) {
+    return {
+        ...tree,
+        transitions: tree.transitions.filter((t) => !(t.fromNodeId === fromNodeId && t.fromChoiceId === fromChoiceId)),
+    };
+}
+/** Extra structural checks on the decompiled editor tree (beyond wire lint). */
+export function lintEditorTree(t) {
+    const issues = [];
+    for (const tr of t.transitions) {
+        if (tr.toNodeId === END_NODE_ID && !tr.outcome) {
+            issues.push({
+                severity: 'error',
+                message: 'Transition to END is missing outcome (safe / at_risk / compromised).',
+                node_id: tr.fromNodeId,
+                choice_id: tr.fromChoiceId,
+            });
+        }
+    }
+    return issues;
+}
+/**
+ * Parse backend Pydantic validation messages into actionable issues with node_id/choice_id.
+ * Hosts can use this when server returns a generic error string.
+ */
+export function parsePydanticOutcomeErrors(msg) {
+    const issues = [];
+    const re = /input_value=\{'from': \['([^']+)', '([^']+)'\],[^}]*\}/g;
+    let m;
+    while ((m = re.exec(msg)) !== null) {
+        const node_id = m[1];
+        const choice_id = m[2];
+        const lower = msg.toLowerCase();
+        const message = lower.includes('transition to end must include outcome')
+            ? 'Transition to END must include outcome (safe / at_risk / compromised).'
+            : lower.includes('non-end transition must not include outcome')
+                ? 'Non-END transition must not include outcome.'
+                : 'Validation error';
+        issues.push({ severity: 'error', message, node_id, choice_id });
+    }
+    return issues.length ? issues : null;
+}

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @packageDocumentation
+ * TreeSpec graph editor (React Flow) and authoring helpers. No API, routing, or simulator runtime.
+ */
+export { default } from './TreeSpecGraphEditor';
+export type { TreeSpecGraphEditorProps } from './TreeSpecGraphEditor';
+export { END_NODE_ID } from './model';
+export type { EditorChoice, EditorNode, EditorTransition, EditorTree, GraphEditorIssue, GraphSelection, ReactFlowEdgeChange, ReactFlowNodeChange, } from './model';
+export { safeUUID, getTransition, upsertTransition, deleteTransitionsForChoice, lintEditorTree, parsePydanticOutcomeErrors, TREE_SPEC_NODE_TYPE_PRESETS, } from './editorHelpers';
+export { autoLayoutTree, getNextSpawnPosition } from './treeLayout';
+export type { TreeSpecIssue, TreeSpecWire } from '@signalsafe/tree-spec';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAEhD,YAAY,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AAEtE,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AACtC,YAAY,EACR,YAAY,EACZ,UAAU,EACV,gBAAgB,EAChB,UAAU,EACV,gBAAgB,EAChB,cAAc,EACd,mBAAmB,EACnB,mBAAmB,GACtB,MAAM,SAAS,CAAC;AAEjB,OAAO,EACH,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,0BAA0B,EAC1B,cAAc,EACd,0BAA0B,EAC1B,2BAA2B,GAC9B,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAEpE,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/index.js

@@ -0,0 +1,8 @@
+/**
+ * @packageDocumentation
+ * TreeSpec graph editor (React Flow) and authoring helpers. No API, routing, or simulator runtime.
+ */
+export { default } from './TreeSpecGraphEditor';
+export { END_NODE_ID } from './model';
+export { safeUUID, getTransition, upsertTransition, deleteTransitionsForChoice, lintEditorTree, parsePydanticOutcomeErrors, TREE_SPEC_NODE_TYPE_PRESETS, } from './editorHelpers';
+export { autoLayoutTree, getNextSpawnPosition } from './treeLayout';

package/dist/model.d.ts

@@ -0,0 +1,23 @@
+export { END_NODE_ID, type TreeGraphChoice as EditorChoice, type TreeGraphNode as EditorNode, type TreeGraphTransition as EditorTransition, type TreeGraph as EditorTree, } from '@signalsafe/tree-spec';
+/** Selection in the graph editor (node or edge, with id). */
+export type GraphSelection = {
+    kind: 'node' | 'edge' | null;
+    id: string | null;
+};
+/** ReactFlow nodes change entry (type, dragging). */
+export interface ReactFlowNodeChange {
+    type?: string;
+    dragging?: boolean;
+}
+/** ReactFlow edges change entry (type). */
+export interface ReactFlowEdgeChange {
+    type?: string;
+}
+/** Validation/issue entry for graph editor (severity, message, optional node/choice). */
+export interface GraphEditorIssue {
+    severity: string;
+    message: string;
+    node_id?: string;
+    choice_id?: string;
+}
+//# sourceMappingURL=model.d.ts.map

package/dist/model.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"model.d.ts","sourceRoot":"","sources":["../src/model.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,WAAW,EACX,KAAK,eAAe,IAAI,YAAY,EACpC,KAAK,aAAa,IAAI,UAAU,EAChC,KAAK,mBAAmB,IAAI,gBAAgB,EAC5C,KAAK,SAAS,IAAI,UAAU,GAC/B,MAAM,uBAAuB,CAAC;AAE/B,6DAA6D;AAC7D,MAAM,MAAM,cAAc,GAAG;IAAE,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,CAAC;AAEjF,qDAAqD;AACrD,MAAM,WAAW,mBAAmB;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,2CAA2C;AAC3C,MAAM,WAAW,mBAAmB;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,yFAAyF;AACzF,MAAM,WAAW,gBAAgB;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB"}

package/dist/model.js

@@ -0,0 +1 @@
+export { END_NODE_ID, } from '@signalsafe/tree-spec';

package/dist/treeLayout.d.ts

@@ -0,0 +1,11 @@
+import { type EditorTree } from './model';
+/** Next default position for a newly added node (simple grid down the canvas). */
+export declare function getNextSpawnPosition(tree: EditorTree): {
+    x: number;
+    y: number;
+};
+/**
+ * Assign node positions in a layered layout from the start node (BFS), then fit-style grid.
+ */
+export declare function autoLayoutTree(tree: EditorTree): EditorTree;
+//# sourceMappingURL=treeLayout.d.ts.map

package/dist/treeLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"treeLayout.d.ts","sourceRoot":"","sources":["../src/treeLayout.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgC,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AAExE,kFAAkF;AAClF,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,UAAU,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAG/E;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,UAAU,GAAG,UAAU,CA4D3D"}

package/dist/treeLayout.js

@@ -0,0 +1,67 @@
+import { END_NODE_ID } from './model';
+/** Next default position for a newly added node (simple grid down the canvas). */
+export function getNextSpawnPosition(tree) {
+    const count = Object.keys(tree.nodes).length;
+    return { x: 80, y: 80 + count * 44 };
+}
+/**
+ * Assign node positions in a layered layout from the start node (BFS), then fit-style grid.
+ */
+export function autoLayoutTree(tree) {
+    const level = {};
+    const byLevel = {};
+    const q = [];
+    const start = tree.start_node;
+    level[start] = 0;
+    q.push(start);
+    const outgoing = (id) => {
+        const out = [];
+        for (const t of tree.transitions) {
+            if (t.fromNodeId !== id)
+                continue;
+            if (!t.toNodeId || t.toNodeId === END_NODE_ID)
+                continue;
+            out.push(t.toNodeId);
+        }
+        return out;
+    };
+    while (q.length) {
+        const cur = q.shift();
+        const curLevel = level[cur] ?? 0;
+        for (const nxt of outgoing(cur)) {
+            if (level[nxt] !== undefined)
+                continue;
+            level[nxt] = curLevel + 1;
+            q.push(nxt);
+        }
+    }
+    const allNodeIds = Object.keys(tree.nodes);
+    const maxLevel = Math.max(0, ...Object.values(level));
+    for (const id of allNodeIds) {
+        if (level[id] === undefined) {
+            level[id] = maxLevel + 1;
+        }
+    }
+    for (const id of allNodeIds) {
+        const l = level[id] ?? 0;
+        if (!byLevel[l])
+            byLevel[l] = [];
+        byLevel[l].push(id);
+    }
+    const spacingX = 420;
+    const spacingY = 180;
+    const marginX = 60;
+    const marginY = 40;
+    const nextNodes = { ...tree.nodes };
+    for (const [lvlStr, ids] of Object.entries(byLevel)) {
+        const lvl = Number(lvlStr);
+        ids.sort();
+        ids.forEach((id, idx) => {
+            const n = nextNodes[id];
+            if (!n)
+                return;
+            n.position = { x: marginX + lvl * spacingX, y: marginY + idx * spacingY };
+        });
+    }
+    return { ...tree, nodes: nextNodes };
+}

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@signalsafe/tree-spec-editor",
+  "version": "0.1.0",
+  "private": false,
+  "type": "module",
+  "description": "Reusable TreeSpec graph editor (React Flow) and authoring helpers (no API or routing)",
+  "license": "UNLICENSED",
+  "keywords": [
+    "tree-spec",
+    "react-flow",
+    "editor",
+    "signalsafe"
+  ],
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "restricted"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "typecheck": "tsc --noEmit",
+    "pack:local": "npm pack --pack-destination ../../dist/reusable-npm",
+    "release:check": "node ../../scripts/run-private-package-release-checks.mjs --mode prepublish",
+    "release:verify": "node ../../scripts/run-private-package-release-checks.mjs --mode postpublish",
+    "publish:preflight": "node ../../scripts/check-private-registry-preflight.mjs --scope @signalsafe",
+    "publish:dry-run": "npm publish --dry-run",
+    "publish:verify": "node ../../scripts/check-private-package-postpublish.mjs --scope @signalsafe --package @signalsafe/tree-spec-editor --version $npm_package_version",
+    "pack:check": "node ../../scripts/check-package-tarball.mjs --tgz \"../../dist/reusable-npm/signalsafe-tree-spec-editor-$npm_package_version.tgz\" --expect package/dist/index.js --expect package/dist/index.d.ts --expect package/package.json --expect package/README.md",
+    "smoke:external": "node ../../scripts/smoke-tree-spec-editor-external-consumer.mjs",
+    "smoke:published": "node ../../scripts/smoke-tree-spec-editor-external-consumer.mjs --source registry",
+    "prepublishOnly": "npm run build",
+    "prepare": "npm run build",
+    "test": "cd ../../frontend && yarn vitest run --config vitest.tree-spec-editor.config.ts"
+  },
+  "dependencies": {
+    "@signalsafe/tree-spec": "^0.1.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "reactflow": "^11.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "reactflow": "^11.11.4",
+    "typescript": "^5.4.2"
+  }
+}