@signalsafe/tree-spec-editor 0.1.0 → 0.1.1

package/README.md

@@ -1,45 +1,373 @@
 # `@signalsafe/tree-spec-editor`
 
-Reusable **TreeSpec** graph editor (React Flow): canvas, selection, node/edge editing, and authoring helpers (compile/decompile, lint, layout).
+React graph editor for authoring `TreeSpec` content.
 
-**Platform architecture:** see **[docs/development/reusable-packages-architecture.md](../../docs/development/reusable-packages-architecture.md)** (editor flow vs simulator runtime).
+This package gives you a ready-to-embed editor component plus a small set of editor helpers. It is focused on graph editing only: nodes, choices, transitions, selection, layout, and validation hints.
 
-## Purpose
+## Install
 
-- Embed graph authoring in admin or content apps without pulling simulator runtime or API layers.
+```bash
+npm install @signalsafe/tree-spec-editor react react-dom reactflow
+```
+
+## Happy Path
+
+The smallest useful integration is:
+
+1. Keep an `EditorTree` in React state.
+2. Render `TreeSpecGraphEditor`.
+3. Replace the state value in `onChange`.
+
+The screenshot below was captured from the exact example tree in this section.
+
+![Happy path editor example](./docs/tree-spec-editor-happy-path.png)
+
+```tsx
+import { useState, type JSX } from 'react';
+import TreeSpecGraphEditor, {
+    END_NODE_ID,
+    type EditorTree,
+} from '@signalsafe/tree-spec-editor';
+
+const initialTree: EditorTree = {
+    start_node: 'start',
+    nodes: {
+        start: {
+            id: 'start',
+            type: 'prompt',
+            prompt: 'A message asks for your company password.',
+            choices: [
+                { id: 'report', label: 'Report it to security' },
+                { id: 'enter-password', label: 'Enter my password' },
+            ],
+            position: { x: 40, y: 260 },
+        },
+        follow_up: {
+            id: 'follow_up',
+            type: 'prompt',
+            prompt: 'Security asks for a screenshot.',
+            choices: [{ id: 'send', label: 'Send the screenshot' }],
+            position: { x: 420, y: 420 },
+        },
+    },
+    transitions: [
+        {
+            id: 'start-report',
+            fromNodeId: 'start',
+            fromChoiceId: 'report',
+            toNodeId: 'follow_up',
+        },
+        {
+            id: 'start-enter-password',
+            fromNodeId: 'start',
+            fromChoiceId: 'enter-password',
+            toNodeId: END_NODE_ID,
+            outcome: 'compromised',
+        },
+        {
+            id: 'follow-up-send',
+            fromNodeId: 'follow_up',
+            fromChoiceId: 'send',
+            toNodeId: END_NODE_ID,
+            outcome: 'safe',
+        },
+    ],
+};
 
-## What belongs here
+export function ExampleTreeSpecEditor(): JSX.Element {
+    const [tree, setTree] = useState<EditorTree>(initialTree);
 
-- `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`.
+    return (
+        <TreeSpecGraphEditor
+            tree={tree}
+            onChange={setTree}
+            className="h-[70vh] rounded border"
+        />
+    );
+}
+```
+
+## What You Get
+
+- `TreeSpecGraphEditor`: the default React editor component.
+- `EditorTree`, `EditorNode`, `EditorTransition`, `EditorChoice`: editor model types.
+- `GraphSelection` and `GraphEditorIssue`: optional selection and issue-display types.
+- `autoLayoutTree` and `getNextSpawnPosition`: layout helpers for placing nodes.
+- `lintEditorTree`, `getTransition`, `upsertTransition`, `deleteTransitionsForChoice`: editor helpers for validation and transition updates.
 
-## What does **not** belong here
+## Feature Examples
 
-- Simulator runtime, session stepping, **routing**, **autosave**, **HTTP/API**, or tenant/company-specific UI.
+### Show validation issues
 
-## Dependency direction
+Pass `issues` when you want the editor to highlight problem nodes and edges.
 
-- Depends on **`@signalsafe/tree-spec`** and peer **`react`**, **`react-dom`**, **`reactflow`**.
-- **Does not** depend on `simulator-core` or app packages.
+The screenshot below was captured from the exact example tree in this section.
 
-## Usage
+![Validation issues example](./docs/tree-spec-editor-issues.png)
 
 ```tsx
-import TreeSpecGraphEditor, { lintEditorTree } from '@signalsafe/tree-spec-editor';
-import { compileTreeSpec } from '@signalsafe/tree-spec';
+import { useMemo, useState, type JSX } from 'react';
+import TreeSpecGraphEditor, {
+    END_NODE_ID,
+    lintEditorTree,
+    type EditorTree,
+    type GraphEditorIssue,
+} from '@signalsafe/tree-spec-editor';
+
+const validationTree: EditorTree = {
+    start_node: 'start',
+    nodes: {
+        start: {
+            id: 'start',
+            type: 'prompt',
+            prompt: 'Review the message before acting.',
+            choices: [
+                { id: 'investigate', label: 'Investigate' },
+                { id: 'escalate', label: 'Escalate' },
+            ],
+            position: { x: 40, y: 260 },
+        },
+        follow_up: {
+            id: 'follow_up',
+            type: 'prompt',
+            prompt: 'Collect a screenshot and report it.',
+            choices: [{ id: 'send', label: 'Send screenshot' }],
+            position: { x: 420, y: 420 },
+        },
+    },
+    transitions: [
+        {
+            id: 'start-investigate',
+            fromNodeId: 'start',
+            fromChoiceId: 'investigate',
+            toNodeId: 'follow_up',
+        },
+        {
+            id: 'start-escalate',
+            fromNodeId: 'start',
+            fromChoiceId: 'escalate',
+            toNodeId: END_NODE_ID,
+        },
+        {
+            id: 'follow-up-send',
+            fromNodeId: 'follow_up',
+            fromChoiceId: 'send',
+            toNodeId: END_NODE_ID,
+            outcome: 'safe',
+        },
+    ],
+};
+
+export function EditorWithIssues(): JSX.Element {
+    const [tree, setTree] = useState<EditorTree>(validationTree);
+    const issues = useMemo<GraphEditorIssue[]>(() => lintEditorTree(tree), [tree]);
+
+    return <TreeSpecGraphEditor tree={tree} onChange={setTree} issues={issues} />;
+}
 ```
 
-## Consumer expectations
+### Track selection
 
-- 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.
+Pass `selected` and `onSelect` when another part of your page needs to know which node or edge is active.
+
+```tsx
+import { useState, type JSX } from 'react';
+import TreeSpecGraphEditor, {
+    type EditorTree,
+    type GraphSelection,
+} from '@signalsafe/tree-spec-editor';
 
-## Public API
+type Props = {
+    initialTree: EditorTree;
+};
 
-Only the **entry** (`src/index.ts`) is supported for semver — **no** `package.json` subpath `exports` (use the barrel to avoid accidental deep imports).
+export function EditorWithSelection({ initialTree }: Props): JSX.Element {
+    const [tree, setTree] = useState<EditorTree>(initialTree);
+    const [selected, setSelected] = useState<GraphSelection>({ kind: null, id: null });
 
-## Publishing notes
+    return (
+        <TreeSpecGraphEditor
+            tree={tree}
+            onChange={setTree}
+            selected={selected}
+            onSelect={setSelected}
+        />
+    );
+}
+```
+
+### Focus a node and hide the minimap
+
+Use `focusNodeId` when you want the editor to center a node, and `showMiniMap={false}` when you want a simpler layout.
+
+```tsx
+import { useState, type JSX } from 'react';
+import TreeSpecGraphEditor, {
+    type EditorTree,
+} from '@signalsafe/tree-spec-editor';
+
+type Props = {
+    initialTree: EditorTree;
+};
+
+export function FocusedEditor({ initialTree }: Props): JSX.Element {
+    const [tree, setTree] = useState<EditorTree>(initialTree);
+
+    return (
+        <TreeSpecGraphEditor
+            tree={tree}
+            onChange={setTree}
+            focusNodeId="start"
+            showMiniMap={false}
+        />
+    );
+}
+```
+
+### Refit the graph after external changes
+
+Increment `fitViewNonce` when your page adds, removes, or rearranges nodes and you want the editor to recenter everything.
+
+```tsx
+import { useState, type JSX } from 'react';
+import TreeSpecGraphEditor, {
+    type EditorTree,
+} from '@signalsafe/tree-spec-editor';
+
+type Props = {
+    initialTree: EditorTree;
+};
+
+export function EditorWithFitView({ initialTree }: Props): JSX.Element {
+    const [tree, setTree] = useState<EditorTree>(initialTree);
+    const [fitViewNonce, setFitViewNonce] = useState<number>(1);
+
+    return (
+        <>
+            <button type="button" onClick={() => setFitViewNonce((value) => value + 1)}>
+                Refit graph
+            </button>
+            <TreeSpecGraphEditor
+                tree={tree}
+                onChange={setTree}
+                fitViewNonce={fitViewNonce}
+            />
+        </>
+    );
+}
+```
 
-- `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`.
+## Helper Examples
+
+Use `autoLayoutTree` before first render when you want a readable default layout.
+
+```tsx
+import { autoLayoutTree, type EditorTree } from '@signalsafe/tree-spec-editor';
+
+const tree: EditorTree = autoLayoutTree({
+    start_node: 'start',
+    nodes: {
+        start: {
+            id: 'start',
+            type: 'prompt',
+            prompt: 'Choose a response',
+            choices: [{ id: 'continue', label: 'Continue' }],
+            position: { x: 0, y: 0 },
+        },
+    },
+    transitions: [],
+});
+```
+
+Use `lintEditorTree` when you want editor-side warnings or errors to display next to nodes and edges.
+
+```tsx
+import { lintEditorTree, type GraphEditorIssue } from '@signalsafe/tree-spec-editor';
+
+const issues: GraphEditorIssue[] = lintEditorTree(tree);
+```
+
+Use `getTransition`, `upsertTransition`, and `deleteTransitionsForChoice` when a host toolbar needs to read or replace a choice transition.
+
+```tsx
+import {
+    END_NODE_ID,
+    deleteTransitionsForChoice,
+    getTransition,
+    upsertTransition,
+    type EditorTree,
+    type EditorTransition,
+} from '@signalsafe/tree-spec-editor';
+
+function connectChoiceToEnd(tree: EditorTree, fromNodeId: string, fromChoiceId: string): EditorTree {
+    const existing = getTransition(tree, fromNodeId, fromChoiceId);
+
+    const nextTransition: EditorTransition = {
+        id: existing?.id ?? `${fromNodeId}-${fromChoiceId}-to-end`,
+        fromNodeId,
+        fromChoiceId,
+        toNodeId: END_NODE_ID,
+        outcome: 'safe',
+    };
+
+    return upsertTransition(tree, nextTransition);
+}
+
+function clearChoiceTransition(tree: EditorTree, fromNodeId: string, fromChoiceId: string): EditorTree {
+    return deleteTransitionsForChoice(tree, fromNodeId, fromChoiceId);
+}
+```
+
+Use `parsePydanticOutcomeErrors` when your backend returns a generic validation string and you want node-level editor issues.
+
+```tsx
+import {
+    parsePydanticOutcomeErrors,
+    type GraphEditorIssue,
+} from '@signalsafe/tree-spec-editor';
+
+const backendMessage =
+    "Transition to END must include outcome. input_value={'from': ['start', 'escalate'], 'to': 'END'}";
+
+const issues: GraphEditorIssue[] = parsePydanticOutcomeErrors(backendMessage) ?? [];
+```
+
+Use `getNextSpawnPosition`, `safeUUID`, and `TREE_SPEC_NODE_TYPE_PRESETS` when a host UI creates new nodes outside the canvas.
+
+```tsx
+import {
+    TREE_SPEC_NODE_TYPE_PRESETS,
+    getNextSpawnPosition,
+    safeUUID,
+    type EditorNode,
+    type EditorTree,
+} from '@signalsafe/tree-spec-editor';
+
+function addPromptNode(tree: EditorTree): EditorTree {
+    const id = safeUUID();
+    const position = getNextSpawnPosition(tree);
+    const type = TREE_SPEC_NODE_TYPE_PRESETS[0];
+
+    const nextNode: EditorNode = {
+        id,
+        type,
+        prompt: 'New step',
+        choices: [{ id: 'choice-1', label: 'New choice' }],
+        position,
+    };
+
+    return {
+        ...tree,
+        nodes: {
+            ...tree.nodes,
+            [id]: nextNode,
+        },
+    };
+}
+```
+
+## Notes
+
+- Import from the package root only.
+- Install `react`, `react-dom`, and `reactflow` in the consuming app.
+- If you need wire-format compile/decompile helpers, use `@signalsafe/tree-spec`.

package/dist/TreeSpecGraphEditor.d.ts

@@ -12,5 +12,5 @@ export type TreeSpecGraphEditorProps = {
     /** 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;
+export default function TreeSpecGraphEditor(props: Readonly<TreeSpecGraphEditorProps>): import("react/jsx-runtime").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":"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"}
+{"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;AA6YF,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,KAAK,EAAE,QAAQ,CAAC,wBAAwB,CAAC,2CAMpF"}

package/dist/TreeSpecGraphEditor.js

@@ -4,11 +4,27 @@ import ReactFlow, { Background, Controls, Handle, MiniMap, Position, ReactFlowPr
 import 'reactflow/dist/style.css';
 import { safeUUID } from './editorHelpers';
 import { END_NODE_ID, } from './model';
+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 }) {
     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: {
+    const borderClass = getPromptNodeBorderClass(hasErrors, data.issuesWarnings);
+    return (_jsxs("div", { className: `card card-min-width-280 ${borderClass}`, 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%',
@@ -52,7 +68,7 @@ function buildTransitionsFromEdges(edges, existing) {
         const fromChoiceId = choiceIdFromHandle(e.sourceHandle);
         const prior = existingById.get(String(e.id));
         return {
-            id: e.id || safeUUID(),
+            id: String(e.id),
             fromNodeId: String(e.source),
             fromChoiceId: fromChoiceId,
             toNodeId: String(e.target),
@@ -145,7 +161,7 @@ function TreeSpecGraphInner({ tree, onChange, issues = [], selected, onSelect, f
             const n = rf.getNode(focusNodeId);
             if (!n)
                 return;
-            rf.setCenter(n.position.x + 150, n.position.y + 60, { zoom: 1.0, duration: 300 });
+            rf.setCenter(n.position.x + 150, n.position.y + 60, { zoom: 1, duration: 300 });
         }
         catch {
             // ignore
@@ -247,7 +263,7 @@ function TreeSpecGraphInner({ tree, onChange, issues = [], selected, onSelect, f
                 return {
                     ...e,
                     selected: selected?.kind === 'edge' && selected.id === e.id,
-                    style: hasIssue ? { ...(e.style ?? {}), strokeWidth: 2, strokeDasharray: '6 4' } : e.style,
+                    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, {})] }) }));
 }

package/dist/editorHelpers.d.ts.map

@@ -1 +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"}
+{"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;AAY5G,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,CAW9E"}

package/dist/editorHelpers.js

@@ -1,6 +1,15 @@
 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'];
+function parseOutcomeErrorMessage(lowerMessage) {
+    if (lowerMessage.includes('transition to end must include outcome')) {
+        return 'Transition to END must include outcome (safe / at_risk / compromised).';
+    }
+    if (lowerMessage.includes('non-end transition must not include outcome')) {
+        return 'Non-END transition must not include outcome.';
+    }
+    return 'Validation error';
+}
 export function safeUUID() {
     const crypto = globalThis.crypto;
     return crypto && typeof crypto.randomUUID === 'function'
@@ -51,12 +60,7 @@ export function parsePydanticOutcomeErrors(msg) {
     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';
+        const message = parseOutcomeErrorMessage(msg.toLowerCase());
         issues.push({ severity: 'error', message, node_id, choice_id });
     }
     return issues.length ? issues : null;

package/dist/treeLayout.d.ts.map

@@ -1 +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"}
+{"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,CAyD3D"}

package/dist/treeLayout.js

@@ -27,7 +27,7 @@ export function autoLayoutTree(tree) {
     };
     while (q.length) {
         const cur = q.shift();
-        const curLevel = level[cur] ?? 0;
+        const curLevel = level[cur];
         for (const nxt of outgoing(cur)) {
             if (level[nxt] !== undefined)
                 continue;
@@ -38,12 +38,10 @@ export function autoLayoutTree(tree) {
     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;
-        }
+        level[id] ?? (level[id] = maxLevel + 1);
     }
     for (const id of allNodeIds) {
-        const l = level[id] ?? 0;
+        const l = level[id];
         if (!byLevel[l])
             byLevel[l] = [];
         byLevel[l].push(id);
@@ -55,11 +53,9 @@ export function autoLayoutTree(tree) {
     const nextNodes = { ...tree.nodes };
     for (const [lvlStr, ids] of Object.entries(byLevel)) {
         const lvl = Number(lvlStr);
-        ids.sort();
+        ids.sort((left, right) => left.localeCompare(right));
         ids.forEach((id, idx) => {
             const n = nextNodes[id];
-            if (!n)
-                return;
             n.position = { x: marginX + lvl * spacingX, y: marginY + idx * spacingY };
         });
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@signalsafe/tree-spec-editor",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "private": false,
   "type": "module",
   "description": "Reusable TreeSpec graph editor (React Flow) and authoring helpers (no API or routing)",
@@ -23,6 +23,7 @@
   },
   "files": [
     "dist",
+    "docs",
     "README.md"
   ],
   "publishConfig": {
@@ -57,6 +58,7 @@
     "@types/react-dom": "^18.2.22",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-test-renderer": "18.3.1",
     "reactflow": "^11.11.4",
     "typescript": "^5.4.2"
   }