@signalsafe/tree-spec-editor 0.2.1 → 0.2.3

package/LICENSE

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

package/README.md

@@ -1,20 +1,70 @@
 # `@signalsafe/tree-spec-editor`
 
-React graph editor for authoring `TreeSpec` content.
+React **Bootstrap UI shell** for authoring TreeSpec graphs: canvas (from `@signalsafe/tree-spec-editor-react`), sidebar panels, modals, and toolbar helpers.
 
-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.
+| | |
+|---|---|
+| **npm** | `@signalsafe/tree-spec-editor` |
+| **GitHub** | [SignalSafeSoftware/tree-spec-editor](https://github.com/SignalSafeSoftware/tree-spec-editor) |
+| **Peer deps** | `react`, `react-dom`, `reactflow`, `react-bootstrap` |
+
+## What this package does
+
+- Ships a ready-to-embed **graph editor UI** (`TreeSpecGraphEditor` re-export, panels, modals, toolbar).
+- Re-exports selected **editor-core helpers** and types for one-stop imports in Bootstrap hosts.
+
+## What this package does not do
+
+- Routing, REST/GraphQL clients, or authentication — your host app loads/saves drafts and enforces permissions.
+- Wire compile/publish without your adapter — use `useTreeSpecEditor` from `@signalsafe/tree-spec-editor-react` with a host adapter.
+- React Flow CSS by itself — the canvas lives in `-editor-react`; **consumers may need** `import 'reactflow/dist/style.css'` in the app entry (see `@signalsafe/tree-spec-editor-react` README). This package keeps `sideEffects: false` because it does not import CSS directly.
+
+## Package stack
+
+| Layer | Package |
+|---|---|
+| Wire | `@signalsafe/tree-spec` |
+| Editor model | `@signalsafe/tree-spec-editor-core` |
+| React Flow canvas | `@signalsafe/tree-spec-editor-react` |
+| **Bootstrap shell (this package)** | `@signalsafe/tree-spec-editor` |
 
 ## Install
 
 ```bash
-npm install @signalsafe/tree-spec-editor react react-dom reactflow react-bootstrap
+npm install @signalsafe/tree-spec-editor @signalsafe/tree-spec-editor-react @signalsafe/tree-spec-editor-core @signalsafe/tree-spec react react-dom reactflow react-bootstrap bootstrap
+```
+
+Load Bootstrap CSS in your app. Import React Flow CSS as documented in `@signalsafe/tree-spec-editor-react`.
+
+## Development
+
+`yarn build` uses `tsconfig.build.json` and resolves `@signalsafe/*` from `node_modules`. Ecosystem sibling `paths` in `tsconfig.json` apply to local typecheck/tests only.
+
+```bash
+yarn install
+yarn build
+yarn test
+yarn typecheck
 ```
 
-The package ships React components that use `react-bootstrap` primitives (cards, buttons, form controls). The consuming app must install `react-bootstrap@^2.10.0` and load Bootstrap CSS in the usual way.
+## Security
+
+See [SECURITY.md](./SECURITY.md). Host applications must enforce authorization, validate TreeSpec server-side, and control publish permissions.
+
+## Changelog and releases
+
+- [CHANGELOG.md](./CHANGELOG.md)
+- [RELEASING.md](./RELEASING.md)
+
+---
+
+## Detailed component reference
+
+The sections below document panels, modals, toolbar items, and integration patterns. Import from **`@signalsafe/tree-spec-editor`** package root only (no subpath exports).
 
 ## Source layout (maintainers)
 
-Published consumers import only the package root (`@signalsafe/tree-spec-editor`). This package is the **React + Bootstrap UI shell** in the layered editor stack:
+Published consumers import only the package root. Layer stack:
 
 | Layer | Package | Owns |
 |-------|---------|------|
@@ -30,7 +80,7 @@ Published consumers import only the package root (`@signalsafe/tree-spec-editor`
 | `src/lib/panelHelpers.ts` | `getIssueSeverityBadgeClass` (Bootstrap-flavored — Material / Angular shells ship their own equivalent) |
 | `src/index.ts` | Public barrel — **do not** import from subpaths in apps. Re-exports the canvas from `@signalsafe/tree-spec-editor-react` and the framework-agnostic surface from `@signalsafe/tree-spec-editor-core` |
 
-Tests live under `tests/panels/`, `tests/modals/`, plus `tests/index.test.ts` for the barrel. The canvas test lives in **`packages/tree-spec-editor-react/tests/`** and the framework-agnostic helper tests live in **`packages/tree-spec-editor-core/tests/`**.
+Tests live under `tests/panels/`, `tests/modals/`, and `tests/index.test.ts` in this repo. Canvas tests live in **`tree-spec-editor-react`**; core helper tests live in **`tree-spec-editor-core`**.
 
 ## Choosing the right package
 
@@ -41,6 +91,35 @@ Tests live under `tests/panels/`, `tests/modals/`, plus `tests/index.test.ts` fo
 | Just the framework-agnostic helpers (CLI, server-side preview, Angular shell) | `@signalsafe/tree-spec-editor-core` |
 | Just the wire contract (validation, compile, lint) | `@signalsafe/tree-spec` |
 
+### Planned framework shells (separate packages)
+
+| You want… | Import from |
+|----------|-------------|
+| React + Material panels/modals (reuse React Flow canvas) | `@signalsafe/tree-spec-editor-react-mui` (planned) + `-react` |
+| Angular editor | `@signalsafe/tree-spec-editor-angular` (planned) + `-core` |
+| Vue editor | `@signalsafe/tree-spec-editor-vue` (planned) + `-core` |
+
+This package (`@signalsafe/tree-spec-editor`) **remains the Bootstrap reference shell** — it does not become Material, Angular, or Vue.
+
+See package READMEs in the [`tree-spec-editor-core`](https://github.com/SignalSafeSoftware/tree-spec-editor-core) and [`tree-spec-editor-react`](https://github.com/SignalSafeSoftware/tree-spec-editor-react) repos for layer rules.
+
+## Host import pattern
+
+Typical host apps import from **three** packages:
+
+```tsx
+// Bootstrap UI shell — panels, modals, toolbar, canvas default export
+import TreeSpecGraphEditor, { AppearancePanel, buildDefaultToolbarSpec, … } from '@signalsafe/tree-spec-editor';
+
+// Stateful orchestration hook (not re-exported from the shell barrel)
+import { useTreeSpecEditor } from '@signalsafe/tree-spec-editor-react';
+
+// Framework-agnostic helpers and constants (prefer over shell re-exports)
+import { resolveDefaultEdgeType, GRAPH_SELECTION_KIND, computeTreeDiffSummary } from '@signalsafe/tree-spec-editor-core';
+```
+
+ESLint nudges hosts to import listed framework-agnostic symbols from `-core` instead of the shell barrel.
+
 ## Happy Path
 
 The smallest useful integration is:
@@ -49,9 +128,9 @@ The smallest useful integration is:
 2. Render `TreeSpecGraphEditor`.
 3. Replace the state value in `onChange`.
 
-The screenshot below was captured from the exact example tree in this section.
+The example below uses a minimal in-memory tree (screenshot assets are not bundled in the npm package).
 
-![Happy path editor example](https://raw.githubusercontent.com/denverprogrammer/DeliveryPlus/main/packages/tree-spec-editor/docs/tree-spec-editor-happy-path.png)
+<!-- Screenshot: add your own capture when integrating the editor in your app -->
 
 ```tsx
 import { useState, type JSX } from 'react';
@@ -123,8 +202,14 @@ export function ExampleTreeSpecEditor(): JSX.Element {
 - `TreeSpecGraphEditor`: the default React editor component.
 - `IssuesPanel`, `NodesPanel`: presentational sidebar panels for issues and node search/selection.
 - `AdvancedJsonPanel`: presentational card chrome for displaying a host-owned JSON renderer (e.g. the compiled `tree_spec`).
-- `InspectorPanel`: right-rail node inspector (Type / Prompt / Choices with Label / Next / Outcome / Delete) with optional render-prop slots and overridable outcome options for project-specific extensions.
-- `SelectedEdgePanel`: compact read-only card showing the currently selected transition.
+- `GraphEditorInfoPanel`: left-rail metadata card (scenario/version ids, draft/published badge, autosave status, validation timestamp, scenario-level default edge type).
+- `InspectorPanel`: right-rail node inspector (Type / Prompt / Choices with Type / Label / Next / Outcome / reorder-delete icon actions) with optional render-prop slots, `onFocusChoice` for selection sync, and overridable outcome options.
+- `AppearancePanel`: right-rail canvas-only styling for the selected node and/or the selected edge's source choice (node appearance + per-choice edge appearance in one panel).
+- `ChoiceEdgeAppearanceFields`: embeddable per-choice edge styling fields (used by `AppearancePanel`; also exported for custom layouts).
+- `ChoiceTemplatesPanel`: preset choice bundles for custom host layouts (**not wired** in the reference graph editor page; pair with `appendChoiceTemplate` from `-core`).
+- `SelectedEdgePanel`: optional compact **read-only** card for a selected transition (for editing, use `AppearancePanel`).
+- `LIST_SELECTION_CLASS`, `CANVAS_SELECTION_CLASS`, …: shared CSS class helpers for list/canvas selection highlighting.
+- `buildDefaultToolbarSpec`: builds the default action toolbar (`+ Add`, Templates, layout, Undo/Redo, validate/history/audit/snapshot/clone, save/publish/preview) without status chrome — draft/autosave live in `GraphEditorInfoPanel`.
 - `PublishReviewModal`, `DraftHistoryModal`, `AuditLogModal`: presentational modals for the publish-review / draft-snapshot / audit-log authoring flows; all strings are overridable.
 - `ToolbarPanel`: data-driven toolbar that takes an `items: ToolbarItem[]` array (`button` / `dropdown` / `badge` / `text` / `custom` kinds) and renders Bootstrap chrome in a single flex wrapper.
 - `duplicateNode`, `deleteNode`, `computeTreeDiffSummary`, `applyTreeTemplate`: project-agnostic tree-operation helpers (clone a node, delete a node with cascade, summarize a structural diff, insert a reusable subgraph template).
@@ -144,9 +229,9 @@ export function ExampleTreeSpecEditor(): JSX.Element {
 
 Pass `issues` when you want the editor to highlight problem nodes and edges.
 
-The screenshot below was captured from the exact example tree in this section.
+The example below demonstrates validation highlighting (screenshot assets are not bundled in the npm package).
 
-![Validation issues example](https://raw.githubusercontent.com/denverprogrammer/DeliveryPlus/main/packages/tree-spec-editor/docs/tree-spec-editor-issues.png)
+<!-- Screenshot: add your own capture when integrating the editor in your app -->
 
 ```tsx
 import { useMemo, useState, type JSX } from 'react';
@@ -445,19 +530,19 @@ export function CompiledTreeSpecPanel({ tree }: Props): JSX.Element {
 
 ### `InspectorPanel`
 
-The right-rail node inspector. When a node is selected, it renders two Bootstrap cards: **Required** (Type, Prompt, and `renderExtraNodeFields`) and **Choices** (list-group rows). The universal fields the package owns:
+The right-rail node inspector. When a node is in context (selected directly, or as the source of a selected edge), it renders two Bootstrap cards: **Required** (Type, Prompt, and `renderExtraNodeFields`) and **Choices** (list-group rows). The universal fields the package owns:
 
-- **Type** `<select>` (with the package's `TREE_SPEC_NODE_TYPE_PRESETS` + custom-value input).
+- **Type** `<select>` (with the package's `TREE_SPEC_NODE_TYPE_PRESETS` + custom-value input, or a host-supplied **choice type** catalog via `choiceTypes` / `onSetChoiceType`).
 - **Prompt** `<textarea>`.
-- **Choices** list with **Label**, **Next** (target-node `<select>`), and a **delete** control per choice.
-- **Outcome** `<select>` per choice — only shown when the choice targets `END_NODE_ID`. Default options are the canonical `TerminalOutcome` values from `@signalsafe/tree-spec` (`safe` / `at_risk` / `compromised`).
+- **Choices** list with per-row **Type**, **Label**, **Next** (target-node `<select>`), **Outcome** (only when Next is `END_NODE_ID`), and **reorder / delete** icon actions styled like agGrid row actions (`action-icon`).
+- Focusing any field in a choice row should call `onFocusChoice(choiceId)` so the canvas, nodes list, and choice highlight stay in sync (typical host: `selectChoice(nodeId, choiceId)`).
 
 For project-specific UI, `InspectorPanel` exposes **render-prop slots** so the package stays generic while hosts can extend it without forking. The package owns nothing app-specific.
 
 ```tsx
 import {
+    AppearancePanel,
     InspectorPanel,
-    SelectedEdgePanel,
     type EditorNode,
     type EditorTree,
     type EditorTransition,
@@ -465,6 +550,7 @@ import {
 
 function RightRail({
     tree,
+    inspectorNode,
     selectedNode,
     selectedEdge,
     focusChoiceId,
@@ -472,10 +558,17 @@ function RightRail({
     onUpdateSelectedNode,
     onAddChoice,
     onDeleteChoice,
+    onMoveChoice,
+    onSetChoiceType,
     onSetChoiceTarget,
     onSetChoiceOutcome,
+    onFocusChoice,
+    onUpdateChoiceEdgeHints,
+    choiceTypes,
 }: {
     tree: EditorTree;
+    /** Node shown in Required/Choices — selected node or edge source node. */
+    inspectorNode: EditorNode | null;
     selectedNode: EditorNode | null;
     selectedEdge: EditorTransition | null;
     focusChoiceId: string | null;
@@ -483,29 +576,57 @@ function RightRail({
     onUpdateSelectedNode: (patch: Partial<EditorNode>) => void;
     onAddChoice: () => void;
     onDeleteChoice: (choiceId: string) => void;
+    onMoveChoice?: (choiceId: string, direction: 'up' | 'down') => void;
+    onSetChoiceType?: (choiceId: string, typeId: string, defaultLabel?: string) => void;
     onSetChoiceTarget: (choiceId: string, targetNodeId: string) => void;
     onSetChoiceOutcome: (choiceId: string, outcome: string) => void;
+    onFocusChoice?: (choiceId: string) => void;
+    onUpdateChoiceEdgeHints?: (
+        nodeId: string,
+        choiceId: string,
+        patch: Partial<import('@signalsafe/tree-spec-editor-core').ChoiceEdgeHints>,
+    ) => void;
+    choiceTypes?: ReadonlyArray<{ id: string; label: string }>;
 }) {
     return (
         <>
-            <InspectorPanel
-                tree={tree}
-                selectedNode={selectedNode}
-                focusChoiceId={focusChoiceId}
-                isPublished={isPublished}
-                onUpdateSelectedNode={onUpdateSelectedNode}
-                onAddChoice={onAddChoice}
-                onDeleteChoice={onDeleteChoice}
-                onSetChoiceTarget={onSetChoiceTarget}
-                onSetChoiceOutcome={onSetChoiceOutcome}
-                renderExtraNodeFields={({ node, onUpdateNode }) => (
-                    <YourProjectNodeMetadataFields node={node} onChange={onUpdateNode} />
-                )}
-                renderExtraChoiceFields={({ choice, onUpdateNode }) => (
-                    <YourProjectChoiceMetadataFields choice={choice} onChange={onUpdateNode} />
-                )}
-            />
-            <SelectedEdgePanel selectedEdge={selectedEdge} />
+            {inspectorNode ? (
+                <InspectorPanel
+                    tree={tree}
+                    selectedNode={inspectorNode}
+                    focusChoiceId={focusChoiceId}
+                    isPublished={isPublished}
+                    onUpdateSelectedNode={onUpdateSelectedNode}
+                    onAddChoice={onAddChoice}
+                    onDeleteChoice={onDeleteChoice}
+                    onMoveChoice={onMoveChoice}
+                    onSetChoiceType={onSetChoiceType}
+                    onSetChoiceTarget={onSetChoiceTarget}
+                    onSetChoiceOutcome={onSetChoiceOutcome}
+                    onFocusChoice={onFocusChoice}
+                    choiceTypes={choiceTypes}
+                    renderExtraNodeFields={({ node, onUpdateNode }) => (
+                        <YourProjectNodeMetadataFields node={node} onChange={onUpdateNode} />
+                    )}
+                    renderExtraChoiceFields={({ choice, onUpdateNode }) => (
+                        <YourProjectChoiceMetadataFields choice={choice} onChange={onUpdateNode} />
+                    )}
+                />
+            ) : null}
+            {selectedNode || selectedEdge ? (
+                <AppearancePanel
+                    tree={tree}
+                    selectedNode={selectedNode}
+                    selectedEdge={selectedEdge}
+                    focusChoiceId={focusChoiceId}
+                    isPublished={isPublished}
+                    onUpdateSelectedNode={onUpdateSelectedNode}
+                    onUpdateChoiceEdgeHints={onUpdateChoiceEdgeHints}
+                    renderAppearanceFields={({ node, isPublished, onUpdateNode }) => (
+                        <NodeAppearanceFields node={node} isPublished={isPublished} onUpdateNode={onUpdateNode} />
+                    )}
+                />
+            ) : null}
         </>
     );
 }
@@ -515,6 +636,9 @@ function RightRail({
 
 - `outcomeOptions`: override the END-transition outcome `<select>` options (e.g. `[{ value: 'pass', label: 'Pass' }, { value: 'fail', label: 'Fail' }]`). Defaults to the canonical `TerminalOutcome` values exported as `DEFAULT_OUTCOME_OPTIONS`.
 - `hideOutcomeField`: hide the outcome `<select>` entirely (useful when the host manages outcomes via `renderExtraChoiceFields` or stores them outside the wire format).
+- `choiceTypes` / `onSetChoiceType`: host-defined stable choice-type ids for the per-choice **Type** `<select>` (e.g. `verify`, `risky`, `bad`).
+- `onMoveChoice`: when set, shows up/down icon actions to reorder choices within the node.
+- `onFocusChoice`: invoked when the user focuses any control inside a choice card; use to sync canvas/node-list highlighting.
 - `renderExtraNodeFields({ tree, node, isPublished, onUpdateNode })`: render extra UI below the Prompt textarea, scoped to the currently-selected node. Use for project-specific node metadata (render hints, scoring, classification, etc.).
 - `renderExtraChoiceFields({ tree, node, choice, transition, isPublished, onUpdateNode })`: render extra UI below each choice card (after Next/Outcome). Use for project-specific per-choice metadata.
 - `onDeleteSelectedNode`: when set, shows a delete-node icon in the Required card header; wire to `useTreeSpecEditor().actions.deleteSelectedNode` (or equivalent). Disabled automatically when `isPublished` is true.
@@ -522,14 +646,53 @@ function RightRail({
 - `emptyStateText`: text shown when no node is selected (default `"Select a node to edit it."`).
 - `typeHelperText`: muted helper text under the Type field (default explains the open `type` string).
 
+### `GraphEditorInfoPanel`
+
+Left-rail metadata card for the scenario version being edited. Shows scenario/version ids, name, created/updated timestamps, a **Draft** / **Published** badge, **autosave status**, last validation time, and (when wired) the scenario-level **default edge type** dropdown (`smoothstep` / `straight` / `step`).
+
+Use this panel instead of duplicating draft/autosave badges in the top toolbar.
+
+### `AppearancePanel`
+
+Right-rail panel for **canvas-only** styling. Combines:
+
+- **Node appearance** (colors, width/height, text wrap, lock) when a node is selected and no choice/edge context is active — hosts inject fields via `renderAppearanceFields`.
+- **Edge appearance** for the active choice when an edge is selected or a choice is focused — stroke color (default matches React Flow gray via `DEFAULT_CANVAS_EDGE_STROKE`), label visibility, and per-choice edge type override.
+
+Scenario-level default edge routing lives in `GraphEditorInfoPanel`, not here.
+
+Hosts typically pair node fields with a project-specific component:
+
+```tsx
+import { AppearancePanel, InspectorPanel } from '@signalsafe/tree-spec-editor';
+import NodeAppearanceFields from '../ui/components/NodeAppearanceFields';
+
+<InspectorPanel /* Required + Choices; pass inspectorNode when edge-selected */ />
+<AppearancePanel
+    tree={tree}
+    selectedNode={selectedNode}
+    selectedEdge={selectedEdge}
+    focusChoiceId={focusChoiceId}
+    isPublished={isPublished}
+    onUpdateSelectedNode={onUpdateSelectedNode}
+    onUpdateChoiceEdgeHints={updateChoiceEdgeHints}
+    renderAppearanceFields={({ node, isPublished, onUpdateNode }) => (
+        <NodeAppearanceFields node={node} isPublished={isPublished} onUpdateNode={onUpdateNode} />
+    )}
+/>
+```
+
+Wire format details: [`@signalsafe/tree-spec` README](../tree-spec/README.md) — **Graph editor metadata**.
+
 ### `SelectedEdgePanel`
 
-The compact read-only card that surfaces the currently selected transition. Returns `null` when `selectedEdge` is `null`, so hosts can render it unconditionally.
+Optional compact read-only card that surfaces the currently selected transition. Returns `null` when `selectedEdge` is `null`. **For editing**, prefer `AppearancePanel` + `InspectorPanel` (edge selection keeps the source node's choices visible and focuses the source choice). Keep `SelectedEdgePanel` only when you want a minimal read-only summary without the full appearance UI.
 
 `SelectedEdgePanel` accepts these optional props:
 
 - `title`: header title text (default `"Selected Edge"`).
-- `renderDetails(edge)`: replace the default `from · choice → to` line with a custom renderer.
+- `onNodeSelect(nodeId)`: when set, the default details line renders **from** and **to** node ids as link buttons that invoke this callback (typical host: `setSelection({ kind: 'node', id })` plus `setFocusNodeId`).
+- `renderDetails(edge, { onNodeSelect })`: replace the default `from · choice → to` line with a custom renderer.
 
 ## Modals
 
@@ -682,32 +845,52 @@ function AuditLogModalContainer({
 
 ## Toolbar
 
+### `buildDefaultToolbarSpec`
+
+Builds the default TreeSpec editor toolbar item list from hook state, actions, and adapter capability flags. Includes **+ Add**, **Templates**, layout buttons, **Undo** / **Redo** (when `actions.undo` / `actions.redo` are wired), optional validate/history/audit/snapshot/clone actions, **Save draft**, **Publish**, and **Preview** — but **not** draft/autosave status chrome (use `GraphEditorInfoPanel` for that) and **not** a back link by default (use page breadcrumbs or pass optional `toolbarBackSlot` when you want a toolbar back control).
+
+```tsx
+import { buildDefaultToolbarSpec, ToolbarPanel } from '@signalsafe/tree-spec-editor';
+
+const items = buildDefaultToolbarSpec({
+    state: editor, // isPublished, canUndo, canRedo, saving, publishing, canPublish, hasTree, …
+    actions: {
+        ...editor.actions,
+        undo: () => editor.actions.undo(),
+        redo: () => editor.actions.redo(),
+    },
+    capabilities: {
+        canValidate: Boolean(adapter.validate),
+        canPublish: Boolean(adapter.publish),
+        // …
+    },
+    nodeTypes: [{ type: 'prompt' }, { type: 'email' }],
+    templates: [{ id: 'starter', label: 'Starter', spec: MY_TEMPLATE }],
+    preview: { onClick: openPreview, disabled: !versionId },
+    // toolbarBackSlot: { render: () => <Link to="/library">Back</Link> }, // optional — prefer breadcrumbs
+    showUndoRedo: true, // default; set false to hide Undo/Redo buttons
+    extraItems: [], // optional trailing ToolbarItem entries
+});
+
+<ToolbarPanel items={items} />;
+```
+
 ### `ToolbarPanel`
 
 A data-driven toolbar for editor pages. Hosts pass an `items: ToolbarItem[]`
 array; the package renders Bootstrap chrome (`Button`, `Dropdown`, badge,
-muted text) inside a single flex wrapper. All project-specific concerns —
-adapter capability gates, dropdown vocabularies, button labels, disabled
-rules, and router-aware links — stay in the host as closures inside each
-item.
+muted text) inside a single flex wrapper. Project-specific concerns —
+adapter capability gates, dropdown vocabularies, button labels, and disabled
+rules — stay in the host as closures inside each item. Prefer
+`buildDefaultToolbarSpec` for the standard action set.
 
 ```tsx
 import {
     ToolbarPanel,
     type ToolbarItem,
 } from '@signalsafe/tree-spec-editor';
-import { Link } from 'react-router-dom';
 
 const items: ToolbarItem[] = [
-    {
-        kind: 'custom',
-        id: 'back',
-        render: () => (
-            <Link className="btn btn-outline-secondary" to="/scenarios">
-                Back
-            </Link>
-        ),
-    },
     {
         kind: 'dropdown',
         id: 'add',
@@ -716,14 +899,11 @@ const items: ToolbarItem[] = [
         entries: [
             { id: 'prompt', label: 'Prompt', onClick: () => addNode('prompt') },
             { id: 'email', label: 'Email', onClick: () => addNode('email') },
-            { id: 'div', label: '', divider: true },
-            { id: 'outcome', label: 'Outcome node', onClick: () => addNode('outcome') },
         ],
     },
-    { kind: 'button', id: 'reset', label: 'Reset view', onClick: onReset, title: 'Reset view to fit graph' },
-    { kind: 'button', id: 'save', label: saving ? 'Saving…' : 'Save Draft', variant: 'primary', onClick: onSave, disabled: saving },
-    { kind: 'badge', id: 'status', label: isPublished ? 'Published (read-only)' : 'Draft', variant: isPublished ? 'success' : 'secondary' },
-    { kind: 'text', id: 'autosave', content: autosaveLabel },
+    { kind: 'button', id: 'reset', label: 'Reset view', onClick: onReset },
+    { kind: 'button', id: 'save', label: saving ? 'Saving…' : 'Save draft', onClick: onSave, disabled: saving },
+    { kind: 'button', id: 'preview', label: 'Preview', onClick: onPreview },
 ];
 
 <ToolbarPanel items={items} />;
@@ -843,21 +1023,12 @@ Small pure helpers for the parts of an editor page that aren't graph-shaped: the
 
 ### `getAutosaveStatusLabel(status)`
 
-Maps an `AutosaveStatus` (`'idle' | 'dirty' | 'saving' | 'saved'`) to a default toolbar label. Returns the empty string for `'idle'` so the toolbar can render nothing between editing sessions.
+Maps an `AutosaveStatus` (`'idle' | 'dirty' | 'saving' | 'saved'`) to a default label. Returns the empty string for `'idle'`. The reference host page shows this in **`GraphEditorInfoPanel`**, not the top toolbar.
 
 ```tsx
-import {
-    getAutosaveStatusLabel,
-    ToolbarPanel,
-    type AutosaveStatus,
-    type ToolbarItem,
-} from '@signalsafe/tree-spec-editor';
+import { getAutosaveStatusLabel } from '@signalsafe/tree-spec-editor';
 
-function buildToolbar(autosaveStatus: AutosaveStatus): ToolbarItem[] {
-    return [
-        { kind: 'text', id: 'autosave', content: getAutosaveStatusLabel(autosaveStatus) },
-    ];
-}
+const label = getAutosaveStatusLabel(autosaveStatus); // e.g. "Saved ✓"
 ```
 
 ### `getKeyboardShortcutAction(params)`
@@ -1026,3 +1197,9 @@ function addPromptNode(tree: EditorTree): EditorTree {
 - Import from the package root only.
 - Install `react`, `react-dom`, `reactflow`, and `react-bootstrap` in the consuming app, and load Bootstrap CSS as usual.
 - If you need wire-format compile/decompile helpers, use `@signalsafe/tree-spec`.
+
+## Repository
+
+Standalone source and releases: [SignalSafeSoftware/tree-spec-editor](https://github.com/SignalSafeSoftware/tree-spec-editor).
+
+Published as [`@signalsafe/tree-spec-editor`](https://www.npmjs.com/package/@signalsafe/tree-spec-editor) on npm.

package/README.standalone.md

@@ -0,0 +1,14 @@
+# Standalone export
+
+This tree was generated by `scripts/export-standalone-npm-package.sh tree-spec-editor` from the DeliveryPlus monorepo.
+
+```bash
+git init
+git branch -M main
+git add .
+git commit -m "Sync tree-spec-editor from DeliveryPlus"
+git remote add origin git@github.com:SignalSafeSoftware/tree-spec-editor.git
+git push -u origin main
+```
+
+See `RELEASING.md` for npm publish steps.

package/dist/index.d.ts

@@ -23,31 +23,39 @@
  */
 export { default } from '@signalsafe/tree-spec-editor-react';
 export type { TreeSpecGraphEditorProps, GraphEditorVersionInfo } from '@signalsafe/tree-spec-editor-react';
-export { default as IssuesPanel } from './panels/IssuesPanel';
-export type { IssuesPanelProps } from './panels/IssuesPanel';
-export { default as GraphEditorInfoPanel } from './panels/GraphEditorInfoPanel';
-export type { GraphEditorInfoPanelProps } from './panels/GraphEditorInfoPanel';
-export { default as NodesPanel } from './panels/NodesPanel';
-export type { NodesPanelProps } from './panels/NodesPanel';
-export { default as AdvancedJsonPanel } from './panels/AdvancedJsonPanel';
-export type { AdvancedJsonPanelProps } from './panels/AdvancedJsonPanel';
-export { default as InspectorPanel, DEFAULT_OUTCOME_OPTIONS } from './panels/InspectorPanel';
-export type { InspectorPanelProps, InspectorNodeRenderContext, InspectorChoiceRenderContext, } from './panels/InspectorPanel';
-export { default as SelectedEdgePanel } from './panels/SelectedEdgePanel';
-export type { SelectedEdgePanelProps } from './panels/SelectedEdgePanel';
-export { default as PublishReviewModal } from './modals/PublishReviewModal';
-export type { PublishReviewModalProps } from './modals/PublishReviewModal';
-export { default as DraftHistoryModal } from './modals/DraftHistoryModal';
-export type { DraftHistoryModalProps } from './modals/DraftHistoryModal';
-export { default as AuditLogModal } from './modals/AuditLogModal';
-export type { AuditLogModalProps } from './modals/AuditLogModal';
-export { default as ToolbarPanel, TOOLBAR_ITEM_KIND } from './panels/ToolbarPanel';
-export type { ToolbarPanelProps, ToolbarItem, ToolbarItemKind, ToolbarButtonItem, ToolbarDropdownItem, ToolbarDropdownEntry, ToolbarBadgeItem, ToolbarTextItem, ToolbarCustomItem, } from './panels/ToolbarPanel';
-export { getIssueSeverityBadgeClass } from './lib/panelHelpers';
-export { default as PanelHeaderCollapseCarets } from './lib/PanelHeaderCollapseCarets';
-export { buildDefaultToolbarSpec } from './lib/buildDefaultToolbarSpec';
-export type { BuildDefaultToolbarSpecOptions, DefaultToolbarActions, DefaultToolbarCapabilities, DefaultToolbarLabels, DefaultToolbarNodeType, DefaultToolbarState, DefaultToolbarTemplate, } from './lib/buildDefaultToolbarSpec';
-export { END_NODE_ID, GRAPH_SELECTION_KIND, safeUUID, getTransition, upsertTransition, deleteTransitionsForChoice, lintEditorTree, parsePydanticOutcomeErrors, shouldQueueInitialValidation, TREE_SPEC_NODE_TYPE_PRESETS, autoLayoutTree, getNextSpawnPosition, getAutosaveStatusLabel, AUTOSAVE_STATUS, getKeyboardShortcutAction, KEYBOARD_SHORTCUT_ACTION, applyTreeTemplate, computeTreeDiffSummary, deleteNode, duplicateNode, buildStableEntries, } from '@signalsafe/tree-spec-editor-core';
-export type { EditorChoice, EditorNode, EditorTransition, EditorTree, GraphEditorIssue, GraphSelection, GraphSelectionKind, ReactFlowEdgeChange, ReactFlowNodeChange, TreeSpecAuditEventItem, TreeSpecSnapshotItem, TreeSpecNodeTypePreset, AutosaveStatus, KeyboardShortcutAction, KeyboardShortcutParams, ApplyTreeTemplateOptions, TreeDiffSummary, TreeTemplateNodeSpec, TreeTemplateSpec, TreeTemplateTransitionSpec, } from '@signalsafe/tree-spec-editor-core';
+export { default as IssuesPanel } from './panels/IssuesPanel.js';
+export type { IssuesPanelProps } from './panels/IssuesPanel.js';
+export { default as GraphEditorInfoPanel } from './panels/GraphEditorInfoPanel.js';
+export type { GraphEditorInfoPanelProps } from './panels/GraphEditorInfoPanel.js';
+export { default as NodesPanel } from './panels/NodesPanel.js';
+export type { NodesPanelProps } from './panels/NodesPanel.js';
+export { default as AdvancedJsonPanel } from './panels/AdvancedJsonPanel.js';
+export type { AdvancedJsonPanelProps } from './panels/AdvancedJsonPanel.js';
+export { default as InspectorPanel, DEFAULT_OUTCOME_OPTIONS } from './panels/InspectorPanel.js';
+export type { InspectorPanelProps, InspectorNodeRenderContext, InspectorChoiceRenderContext, } from './panels/InspectorPanel.js';
+export { default as AppearancePanel } from './panels/AppearancePanel.js';
+export type { AppearancePanelProps } from './panels/AppearancePanel.js';
+export { default as SelectedEdgePanel } from './panels/SelectedEdgePanel.js';
+export type { SelectedEdgePanelProps } from './panels/SelectedEdgePanel.js';
+export { default as ChoiceTemplatesPanel } from './panels/ChoiceTemplatesPanel.js';
+export type { ChoiceTemplatesPanelProps, ChoiceTemplateItem, ChoicePresetItem } from './panels/ChoiceTemplatesPanel.js';
+export type { ChoiceTypeOption } from './panels/InspectorPanel.js';
+export { default as ChoiceEdgeAppearanceFields } from './panels/ChoiceEdgeAppearanceFields.js';
+export type { ChoiceEdgeAppearanceFieldsProps } from './panels/ChoiceEdgeAppearanceFields.js';
+export { default as PublishReviewModal } from './modals/PublishReviewModal.js';
+export type { PublishReviewModalProps } from './modals/PublishReviewModal.js';
+export { default as DraftHistoryModal } from './modals/DraftHistoryModal.js';
+export type { DraftHistoryModalProps } from './modals/DraftHistoryModal.js';
+export { default as AuditLogModal } from './modals/AuditLogModal.js';
+export type { AuditLogModalProps } from './modals/AuditLogModal.js';
+export { default as ToolbarPanel, TOOLBAR_ITEM_KIND } from './panels/ToolbarPanel.js';
+export type { ToolbarPanelProps, ToolbarItem, ToolbarItemKind, ToolbarButtonItem, ToolbarDropdownItem, ToolbarDropdownEntry, ToolbarBadgeItem, ToolbarTextItem, ToolbarCustomItem, } from './panels/ToolbarPanel.js';
+export { getIssueSeverityBadgeClass } from './lib/panelHelpers.js';
+export { LIST_SELECTION_CLASS, CANVAS_SELECTION_CLASS, LIST_SELECTION_TEXT_CLASS, CANVAS_SELECTION_TEXT_CLASS } from './lib/selectionStyles.js';
+export { default as PanelHeaderCollapseCarets } from './lib/PanelHeaderCollapseCarets.js';
+export { buildDefaultToolbarSpec } from './lib/buildDefaultToolbarSpec.js';
+export type { BuildDefaultToolbarSpecOptions, DefaultToolbarActions, DefaultToolbarCapabilities, DefaultToolbarLabels, DefaultToolbarNodeType, DefaultToolbarState, DefaultToolbarTemplate, } from './lib/buildDefaultToolbarSpec.js';
+export { END_NODE_ID, GRAPH_SELECTION_KIND, safeUUID, getTransition, upsertTransition, deleteTransitionsForChoice, lintEditorTree, parsePydanticOutcomeErrors, shouldQueueInitialValidation, TREE_SPEC_NODE_TYPE_PRESETS, autoLayoutTree, getNextSpawnPosition, needsInitialLayout, getThemeHints, getEditorHints, isNodeLocked, patchEditorHints, editorHintsToStyle, RENDER_HINTS_THEME_NS, RENDER_HINTS_EDITOR_NS, GRAPH_POSITION_KEY, getAutosaveStatusLabel, AUTOSAVE_STATUS, getKeyboardShortcutAction, KEYBOARD_SHORTCUT_ACTION, applyTreeTemplate, applyEditorConnectOnDrop, computeTreeDiffSummary, deleteNode, duplicateNode, buildStableEntries, } from '@signalsafe/tree-spec-editor-core';
+export type { EditorChoice, EditorNode, EditorTransition, EditorTree, GraphEditorIssue, GraphSelection, GraphSelectionKind, ReactFlowEdgeChange, ReactFlowNodeChange, TreeSpecAuditEventItem, TreeSpecSnapshotItem, TreeSpecNodeTypePreset, AutosaveStatus, KeyboardShortcutAction, KeyboardShortcutParams, ApplyTreeTemplateOptions, TreeDiffSummary, TreeTemplateNodeSpec, TreeTemplateSpec, TreeTemplateTransitionSpec, ConnectOnDropOptions, NodeEditorHints, GraphPosition, } from '@signalsafe/tree-spec-editor-core';
 export type { TreeSpecIssue, TreeSpecWire } from '@signalsafe/tree-spec';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}