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

package/README.md

@@ -1,64 +1,148 @@
 # @signalsafe/tree-spec-editor-react
 
-Headless React layer for the SignalSafe TreeSpec graph editor. Renders the
-React Flow canvas, owns React state plumbing, and exposes the editor as a
-single React component — without depending on any specific UI library.
+Headless **React + React Flow** layer for the SignalSafe TreeSpec graph editor: canvas component, orchestration hook, and wiring to `@signalsafe/tree-spec-editor-core`.
 
-This is the React-specific sibling to **[`@signalsafe/tree-spec-editor-core`](../tree-spec-editor-core/README.md)**. The core package owns model + helpers (zero UI deps); this package owns React rendering. UI shells (e.g. `@signalsafe/tree-spec-editor` for React + Bootstrap, planned `@signalsafe/tree-spec-editor-react-mui` for React + Material) layer on top.
+| | |
+|---|---|
+| **npm** | `@signalsafe/tree-spec-editor-react` |
+| **GitHub** | [SignalSafeSoftware/tree-spec-editor-react](https://github.com/SignalSafeSoftware/tree-spec-editor-react) |
+| **Peer deps** | `react`, `react-dom`, `reactflow` (^18 / ^11) — **no UI library required** |
 
-## What this package owns
+## UI-kit agnostic canvas
 
-- **`TreeSpecGraphEditor`** — the React Flow canvas (Background, Controls, MiniMap, custom node renderer, transition edges, selection wiring, choice focus highlighting, focus/fit-view).
-- **`useTreeSpecEditor`** — stateful orchestration hook (load, autosave, validate, publish, selection, undo/redo, choice/edge helpers). Exposes `inspectorNode` (selected node or edge source node), `focusChoiceId`, and `selectedEdge` for sidebar panels.
-- **`TreeSpecGraphEditorProps`** — props type.
+The React Flow canvas uses **semantic HTML** and **`graph-editor-*` class hooks** only. It does **not** require Bootstrap CSS, Bootstrap Icons, or any component library.
 
-## Canvas selection behavior
+**Host applications own styling.** Map `graph-editor-*` in your theme, or pass `className` on `TreeSpecGraphEditor` for layout/sizing. See [docs/UI_KIT_AGNOSTIC_CANVAS.md](./docs/UI_KIT_AGNOSTIC_CANVAS.md).
+
+## What this package does
 
-| Selection | Inspector context | Contextual zoom (`contextualZoom`, default `true`) |
-|-----------|-------------------|-----------------------------------------------------|
-| **Node** | `selectedNode` | Fits viewport to the node |
-| **Edge** | `inspectorNode` = source node; `focusChoiceId` = source choice | **No pan/zoom** (viewport stays put) |
-| **Choice** (canvas or inspector focus) | `focusChoiceId` set; nodes list highlights via `focusNodeId` | Fits when the parent node is selected |
+- Renders **`TreeSpecGraphEditor`** (React Flow canvas, custom nodes/edges, selection).
+- Exposes **`useTreeSpecEditor`** for load/validate/autosave/publish orchestration (host injects adapter callbacks).
+- Re-exports core editor types used by the hook.
 
-Pass `onChoiceSelect` + `focusChoiceId` to keep canvas choice rows, inspector choice cards, and the nodes list in sync. Pass `contextualZoom={false}` to disable automatic viewport fitting on node selection.
+## What this package does not do
 
-## What lives elsewhere
+- Sidebar panels, modals, toolbars, or UI-kit chrome — use `@signalsafe/tree-spec-editor` or your own UI shell.
+- Routing, HTTP, authentication, or persistence — host app provides adapter implementations.
+- Wire compile/publish to a backend without your adapter code.
 
-| Concern | Package |
-|--------|---------|
-| Editor model, tree operations, layout, autosave/keyboard helpers, choice edge hints | `@signalsafe/tree-spec-editor-core` |
-| Sidebar panels, inspector, modals, toolbar (Bootstrap-styled) | `@signalsafe/tree-spec-editor` |
-| Material-styled React shell (planned) | `@signalsafe/tree-spec-editor-react-mui` |
-| Angular shell + canvas (planned) | `@signalsafe/tree-spec-editor-angular` |
-| Vue shell + canvas (planned) | `@signalsafe/tree-spec-editor-vue` |
+## Install
 
-## Maintainer notes
+```bash
+npm install @signalsafe/tree-spec-editor-react @signalsafe/tree-spec-editor-core @signalsafe/tree-spec react react-dom reactflow
+```
 
-- **This package stays React + reactflow only.** Angular/Vue hosts will use `-core` with their own canvas packages, not `-react`.
-- **Material (React)** hosts should add `-react-mui` (planned), reusing this canvas unchanged.
-- Layer boundaries and refactor plan: [docs/ai/packages-editor-architecture.md](../../docs/ai/packages-editor-architecture.md).
+### React Flow CSS (required)
 
-## Install
+This package imports `reactflow/dist/style.css` from source. Bundlers treat it as a side effect (`sideEffects: ["**/*.css"]` in `package.json`).
+
+Ensure your app loads React Flow styles, for example:
+
+```ts
+import "reactflow/dist/style.css";
+```
+
+If you use `@signalsafe/tree-spec-editor` as the authoring shell, map `graph-editor-*` canvas hooks in host CSS — Bootstrap is optional and host-owned.
+
+## Quick start
+
+```tsx
+import { useState } from "react";
+import TreeSpecGraphEditor from "@signalsafe/tree-spec-editor-react";
+import {
+    END_NODE_ID,
+    type EditorTree,
+} from "@signalsafe/tree-spec-editor-core";
+
+const initialTree: EditorTree = {
+    start_node: "start",
+    nodes: {
+        start: {
+            id: "start",
+            type: "prompt",
+            prompt: "Example prompt",
+            choices: [{ id: "done", label: "Finish" }],
+            position: { x: 40, y: 120 },
+        },
+    },
+    transitions: [
+        {
+            id: "t1",
+            fromNodeId: "start",
+            fromChoiceId: "done",
+            toNodeId: END_NODE_ID,
+            outcome: "safe",
+        },
+    ],
+};
+
+export function ExampleCanvas() {
+    const [tree, setTree] = useState(initialTree);
+    return (
+        <TreeSpecGraphEditor
+            tree={tree}
+            onChange={setTree}
+            className="graph-editor-canvas-root my-canvas-host"
+        />
+    );
+}
+```
+
+For full authoring flows (load/save/validate), compose **`useTreeSpecEditor`** with your adapter — see tests and `@signalsafe/tree-spec-editor` for a reference shell.
+
+## Public exports
+
+| Export | Purpose |
+|---|---|
+| `default` / `TreeSpecGraphEditor` | React Flow canvas |
+| `TreeSpecGraphEditorProps` | Canvas props |
+| `useTreeSpecEditor` | Stateful editor orchestration |
+| `TreeSpecEditorAdapter`, `UseTreeSpecEditorResult`, … | Adapter and hook types |
+
+Import from `@signalsafe/tree-spec-editor-react` only (no subpath exports).
+
+## Package boundaries
+
+| Layer | Package |
+|---|---|
+| Wire | `@signalsafe/tree-spec` |
+| Editor model | `@signalsafe/tree-spec-editor-core` |
+| **React canvas (this package)** | `@signalsafe/tree-spec-editor-react` |
+| Authoring shell | `@signalsafe/tree-spec-editor` |
+
+## Canvas selection behavior
+
+| Selection | Inspector context | Contextual zoom (default on) |
+|---|---|---|
+| Node | selected node | fits node in viewport |
+| Edge | source node + focused choice | viewport unchanged |
+| Choice | `focusChoiceId` set | fits parent node when selected |
+
+Pass `contextualZoom={false}` to disable automatic viewport fitting.
+
+## Development
+
+Requires Node.js **>=22.12.0** (`engines.node`). CI runs checks, tests, and smoke on Node **22** and **24**; publish uses Node **24**.
+
+`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
-npm install @signalsafe/tree-spec-editor-react react react-dom reactflow
+yarn install
+yarn build
+yarn test
+yarn typecheck
 ```
 
-`reactflow` is a peer dependency; you must install it (and ship its CSS,
-e.g. `import 'reactflow/dist/style.css';`) in the consuming app. The
-package itself imports the CSS file from its source, so bundlers that
-resolve module references will pick it up automatically.
+## Security
 
-## Why a separate package?
+See [SECURITY.md](./SECURITY.md). Host applications must authenticate users, authorize edits, and validate TreeSpec JSON server-side before publish.
 
-This layer is React-specific but **UI-library-agnostic**. Hosts that want
-to ship a Material-styled editor only need to publish their own UI shell
-(panels, modals, toolbar) — they reuse the canvas and the editor model
-unchanged. This also keeps `@signalsafe/tree-spec-editor` (the
-Bootstrap variant) from being the sole React entry point.
+## Changelog and releases
 
-## Repository
+- [CHANGELOG.md](./CHANGELOG.md)
+- [RELEASING.md](./RELEASING.md)
 
-Standalone source and releases: [SignalSafeSoftware/tree-spec-editor-react](https://github.com/SignalSafeSoftware/tree-spec-editor-react).
+## Related packages
 
-Published as [`@signalsafe/tree-spec-editor-react`](https://www.npmjs.com/package/@signalsafe/tree-spec-editor-react) on npm.
+- [`@signalsafe/tree-spec-editor-core`](https://github.com/SignalSafeSoftware/tree-spec-editor-core) — framework-agnostic editor helpers.
+- [`@signalsafe/tree-spec-editor`](https://github.com/SignalSafeSoftware/tree-spec-editor) — UI-kit agnostic authoring shell (panels, modals, toolbar).

package/dist/TreeSpecGraphEditor.d.ts

@@ -15,7 +15,7 @@ export type TreeSpecGraphEditorProps = {
     /** Focused choice on the currently selected node (canvas + inspector sync). */
     focusChoiceId?: string | null;
     fitViewNonce?: number;
-    /** Optional class for the outer container (default includes h-70vh border rounded). */
+    /** Optional class for the outer container (default: `graph-editor-canvas-root`). */
     className?: string;
     /** When true, disables canvas editing affordances (toolbar, resize, context menu). */
     readOnly?: boolean;
@@ -30,7 +30,7 @@ export type TreeSpecGraphEditorProps = {
      * Skipped when `focusNodeId` already targets the same node.
      */
     contextualZoom?: boolean;
-    /** Canvas chrome mode — host should pass Bootstrap `colorScheme` (`light` / `dark`). */
+    /** Canvas chrome mode — host theme hint (`light` / `dark`). */
     colorMode?: 'light' | 'dark';
 };
 export default function TreeSpecGraphEditor(props: Readonly<TreeSpecGraphEditorProps>): import("react").JSX.Element;

package/dist/TreeSpecGraphEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TreeSpecGraphEditor.d.ts","sourceRoot":"","sources":["../src/TreeSpecGraphEditor.tsx"],"names":[],"mappings":"AAYA,OAAO,0BAA0B,CAAC;AAElC,OAAO,EAKH,KAAK,UAAU,EACf,KAAK,cAAc,EACnB,KAAK,gBAAgB,EACxB,MAAM,mCAAmC,CAAC;AAsB3C,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,gGAAgG;IAChG,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5D,oFAAoF;IACpF,kBAAkB,CAAC,EAAE,CACjB,UAAU,EAAE,MAAM,EAClB,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,MAAM,EAChB,OAAO,EAAE,MAAM,KACd,IAAI,CAAC;IACV,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,+EAA+E;IAC/E,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uFAAuF;IACvF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sFAAsF;IACtF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uEAAuE;IACvE,eAAe,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,oEAAoE;IACpE,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,kDAAkD;IAClD,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,wFAAwF;IACxF,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAChC,CAAC;AA4PF,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,KAAK,EAAE,QAAQ,CAAC,wBAAwB,CAAC,+BAMpF"}
+{"version":3,"file":"TreeSpecGraphEditor.d.ts","sourceRoot":"","sources":["../src/TreeSpecGraphEditor.tsx"],"names":[],"mappings":"AAYA,OAAO,0BAA0B,CAAC;AAElC,OAAO,EAKH,KAAK,UAAU,EACf,KAAK,cAAc,EACnB,KAAK,gBAAgB,EACxB,MAAM,mCAAmC,CAAC;AAuB3C,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,gGAAgG;IAChG,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5D,oFAAoF;IACpF,kBAAkB,CAAC,EAAE,CACjB,UAAU,EAAE,MAAM,EAClB,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,MAAM,EAChB,OAAO,EAAE,MAAM,KACd,IAAI,CAAC;IACV,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,+EAA+E;IAC/E,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oFAAoF;IACpF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sFAAsF;IACtF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uEAAuE;IACvE,eAAe,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,oEAAoE;IACpE,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,kDAAkD;IAClD,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAChC,CAAC;AA4PF,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,KAAK,EAAE,QAAQ,CAAC,wBAAwB,CAAC,+BAMpF"}

package/dist/TreeSpecGraphEditor.js

@@ -3,23 +3,24 @@ import { useCallback, useMemo, useRef, useState } from 'react';
 import ReactFlow, { Background, ConnectionMode, Controls, MiniMap, ReactFlowProvider, useReactFlow, } from 'reactflow';
 import 'reactflow/dist/style.css';
 import { GRAPH_SELECTION_KIND, choiceIdFromHandle, resolveGraphViewport, LAYOUT_SNAP_GRID, } from '@signalsafe/tree-spec-editor-core';
-import { GraphEditorCanvasContext, } from './GraphEditorCanvasContext';
-import { buildEdgeMarker, getIssueEdgeStyle, resolveSelectedEdgeStroke } from './canvas/edgeStyle';
-import { CANVAS_CLASS } from './canvas/constants';
-import { resolveCanvasFocusChoiceId } from './canvas/focusChoice';
-import { isChoiceRowClickTarget } from './canvas/typeGuards';
-import { GraphCanvasContextMenu } from './contextMenu/GraphCanvasContextMenu';
-import { EndNode } from './nodes/EndNode';
-import { PromptNode } from './nodes/PromptNode';
-import { joinClasses } from './utils/joinClasses';
-import { useCanvasContextMenu } from './hooks/useCanvasContextMenu';
-import { useCanvasGraphState } from './hooks/useCanvasGraphState';
-import { useCanvasIssueIndex } from './hooks/useCanvasIssueIndex';
-import { useCanvasNodeResize } from './hooks/useCanvasNodeResize';
-import { useCanvasViewport } from './hooks/useCanvasViewport';
-import { useChoiceDragDrop } from './hooks/useChoiceDragDrop';
-import { useGraphConnect } from './hooks/useGraphConnect';
-function TreeSpecGraphInner({ tree, onChange, issues = [], selected, onSelect, onChoiceSelect, onRepositionChoice, focusNodeId, focusChoiceId = null, showMiniMap = true, fitViewNonce, className = 'h-70vh border rounded', readOnly = false, onDuplicateNode, onDeleteNode, onAutoLayout, contextualZoom = true, colorMode = 'light', }) {
+import { GraphEditorCanvasContext, } from './GraphEditorCanvasContext.js';
+import { buildEdgeMarker, getIssueEdgeStyle, resolveSelectedEdgeStroke } from './canvas/edgeStyle.js';
+import { CANVAS_CLASS } from './canvas/constants.js';
+import { EDITOR_CANVAS_ROOT } from './ui/editorClasses.js';
+import { resolveCanvasFocusChoiceId } from './canvas/focusChoice.js';
+import { isChoiceRowClickTarget } from './canvas/typeGuards.js';
+import { GraphCanvasContextMenu } from './contextMenu/GraphCanvasContextMenu.js';
+import { EndNode } from './nodes/EndNode.js';
+import { PromptNode } from './nodes/PromptNode.js';
+import { joinClasses } from './utils/joinClasses.js';
+import { useCanvasContextMenu } from './hooks/useCanvasContextMenu.js';
+import { useCanvasGraphState } from './hooks/useCanvasGraphState.js';
+import { useCanvasIssueIndex } from './hooks/useCanvasIssueIndex.js';
+import { useCanvasNodeResize } from './hooks/useCanvasNodeResize.js';
+import { useCanvasViewport } from './hooks/useCanvasViewport.js';
+import { useChoiceDragDrop } from './hooks/useChoiceDragDrop.js';
+import { useGraphConnect } from './hooks/useGraphConnect.js';
+function TreeSpecGraphInner({ tree, onChange, issues = [], selected, onSelect, onChoiceSelect, onRepositionChoice, focusNodeId, focusChoiceId = null, showMiniMap = true, fitViewNonce, className = EDITOR_CANVAS_ROOT, readOnly = false, onDuplicateNode, onDeleteNode, onAutoLayout, contextualZoom = true, colorMode = 'light', }) {
     const rf = useReactFlow();
     const treeRef = useRef(tree);
     treeRef.current = tree;

package/dist/canvas/constants.d.ts

@@ -1,6 +1,6 @@
 import { MarkerType } from 'reactflow';
 /** Background highlight when the node matches editor selection (sidebar / issues / canvas). */
-export declare const CANVAS_NODE_SELECTED_CLASS = "bg-primary-subtle";
+export declare const CANVAS_NODE_SELECTED_CLASS = "graph-editor-canvas__selected";
 /** Dark readable text on selected canvas node cards. */
 export declare const CANVAS_NODE_SELECTED_TEXT_CLASS = "graph-editor-canvas-selected";
 export declare const CANVAS_CLASS = "graph-editor-canvas";
@@ -18,13 +18,14 @@ export declare const CHOICE_ROW_SELECTABLE_CLASS = "graph-editor-choice-row-sele
 export declare const CHOICE_HANDLE_CLASS = "graph-editor-handle graph-editor-choice-handle";
 export declare const NODE_DRAG_HANDLE_CLASS = "graph-editor-drag-handle";
 export declare const NODE_DRAG_HANDLE_SELECTOR = ".graph-editor-drag-handle";
-export declare const TARGET_HANDLE_CLASS_DEFAULT = "handle-bg-default graph-editor-target-handle";
-export declare const TARGET_HANDLE_CLASS_DANGER = "handle-bg-danger graph-editor-target-handle";
-export declare const CONTEXT_MENU_CLASS = "graph-editor-context-menu dropdown-menu show position-fixed shadow-sm";
+export declare const TARGET_HANDLE_CLASS_DEFAULT = "graph-editor-target-handle graph-editor-target-handle--default";
+export declare const TARGET_HANDLE_CLASS_DANGER = "graph-editor-target-handle graph-editor-target-handle--danger";
+export declare const CONTEXT_MENU_CLASS: string;
 export declare const REACT_FLOW_PANE_CLASS = "react-flow__pane";
-export declare const BORDER_DANGER_CLASS = "border-danger";
-export declare const BORDER_WARNING_CLASS = "border-warning";
-export declare const END_NODE_WIDTH_CLASS = "w-180";
+export declare const BORDER_DANGER_CLASS = "graph-editor-canvas-node--border-danger";
+export declare const BORDER_WARNING_CLASS = "graph-editor-canvas-node--border-warning";
+export declare const END_NODE_WIDTH_CLASS = "graph-editor-canvas-node--end-width";
+export declare const CANVAS_NODE_CARD_CLASS: string;
 export declare const MIN_NODE_WIDTH = 180;
 export declare const MAX_NODE_WIDTH = 560;
 export declare const MIN_NODE_HEIGHT = 80;

package/dist/canvas/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/canvas/constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAEvC,+FAA+F;AAC/F,eAAO,MAAM,0BAA0B,sBAAsB,CAAC;AAE9D,wDAAwD;AACxD,eAAO,MAAM,+BAA+B,iCAAiC,CAAC;AAE9E,eAAO,MAAM,YAAY,wBAAwB,CAAC;AAClD,eAAO,MAAM,iBAAiB,6BAA6B,CAAC;AAC5D,eAAO,MAAM,sBAAsB,kCAAkC,CAAC;AACtE,eAAO,MAAM,4BAA4B,wCAAwC,CAAC;AAElF,eAAO,MAAM,gBAAgB,4BAA4B,CAAC;AAC1D,eAAO,MAAM,mBAAmB,6BAAyB,CAAC;AAC1D,eAAO,MAAM,wBAAwB,oCAAoC,CAAC;AAC1E,eAAO,MAAM,2BAA2B,qCAAiC,CAAC;AAC1E,eAAO,MAAM,wBAAwB,oCAAoC,CAAC;AAC1E,eAAO,MAAM,wBAAwB,oCAAoC,CAAC;AAC1E,eAAO,MAAM,uBAAuB,mCAAmC,CAAC;AACxE,eAAO,MAAM,2BAA2B,uCAAuC,CAAC;AAChF,eAAO,MAAM,mBAAmB,mDAAmD,CAAC;AAEpF,eAAO,MAAM,sBAAsB,6BAA6B,CAAC;AACjE,eAAO,MAAM,yBAAyB,8BAA+B,CAAC;AAEtE,eAAO,MAAM,2BAA2B,iDAAiD,CAAC;AAC1F,eAAO,MAAM,0BAA0B,gDAAgD,CAAC;AAExF,eAAO,MAAM,kBAAkB,0EAA0E,CAAC;AAE1G,eAAO,MAAM,qBAAqB,qBAAqB,CAAC;AAExD,eAAO,MAAM,mBAAmB,kBAAkB,CAAC;AACnD,eAAO,MAAM,oBAAoB,mBAAmB,CAAC;AAErD,eAAO,MAAM,oBAAoB,UAAU,CAAC;AAE5C,eAAO,MAAM,cAAc,MAAM,CAAC;AAClC,eAAO,MAAM,cAAc,MAAM,CAAC;AAClC,eAAO,MAAM,eAAe,KAAK,CAAC;AAClC,eAAO,MAAM,eAAe,MAAM,CAAC;AAEnC,qGAAqG;AACrG,eAAO,MAAM,oBAAoB,SAAS,CAAC;AAE3C,eAAO,MAAM,iBAAiB;;;;CAI7B,CAAC;AAEF,eAAO,MAAM,gBAAgB,OAAO,CAAC;AACrC,eAAO,MAAM,oBAAoB,YAAY,CAAC"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/canvas/constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAKvC,+FAA+F;AAC/F,eAAO,MAAM,0BAA0B,kCAAkC,CAAC;AAE1E,wDAAwD;AACxD,eAAO,MAAM,+BAA+B,iCAAiC,CAAC;AAE9E,eAAO,MAAM,YAAY,wBAAwB,CAAC;AAClD,eAAO,MAAM,iBAAiB,6BAA6B,CAAC;AAC5D,eAAO,MAAM,sBAAsB,kCAAkC,CAAC;AACtE,eAAO,MAAM,4BAA4B,wCAAwC,CAAC;AAElF,eAAO,MAAM,gBAAgB,4BAA4B,CAAC;AAC1D,eAAO,MAAM,mBAAmB,6BAAyB,CAAC;AAC1D,eAAO,MAAM,wBAAwB,oCAAoC,CAAC;AAC1E,eAAO,MAAM,2BAA2B,qCAAiC,CAAC;AAC1E,eAAO,MAAM,wBAAwB,oCAAoC,CAAC;AAC1E,eAAO,MAAM,wBAAwB,oCAAoC,CAAC;AAC1E,eAAO,MAAM,uBAAuB,mCAAmC,CAAC;AACxE,eAAO,MAAM,2BAA2B,uCAAuC,CAAC;AAChF,eAAO,MAAM,mBAAmB,mDAAmD,CAAC;AAEpF,eAAO,MAAM,sBAAsB,6BAA6B,CAAC;AACjE,eAAO,MAAM,yBAAyB,8BAA+B,CAAC;AAEtE,eAAO,MAAM,2BAA2B,mEAAmE,CAAC;AAC5G,eAAO,MAAM,0BAA0B,kEAAkE,CAAC;AAE1G,eAAO,MAAM,kBAAkB,QAM9B,CAAC;AAEF,eAAO,MAAM,qBAAqB,qBAAqB,CAAC;AAExD,eAAO,MAAM,mBAAmB,4CAA4C,CAAC;AAC7E,eAAO,MAAM,oBAAoB,6CAA6C,CAAC;AAE/E,eAAO,MAAM,oBAAoB,wCAAwC,CAAC;AAE1E,eAAO,MAAM,sBAAsB,QAA8D,CAAC;AAElG,eAAO,MAAM,cAAc,MAAM,CAAC;AAClC,eAAO,MAAM,cAAc,MAAM,CAAC;AAClC,eAAO,MAAM,eAAe,KAAK,CAAC;AAClC,eAAO,MAAM,eAAe,MAAM,CAAC;AAEnC,qGAAqG;AACrG,eAAO,MAAM,oBAAoB,SAAS,CAAC;AAE3C,eAAO,MAAM,iBAAiB;;;;CAI7B,CAAC;AAEF,eAAO,MAAM,gBAAgB,OAAO,CAAC;AACrC,eAAO,MAAM,oBAAoB,YAAY,CAAC"}

package/dist/canvas/constants.js

@@ -1,6 +1,8 @@
 import { MarkerType } from 'reactflow';
+import { joinClasses } from '../utils/joinClasses.js';
+import { EDITOR_CARD, EDITOR_DROPDOWN_MENU, EDITOR_ROUNDED } from '../ui/editorClasses.js';
 /** Background highlight when the node matches editor selection (sidebar / issues / canvas). */
-export const CANVAS_NODE_SELECTED_CLASS = 'bg-primary-subtle';
+export const CANVAS_NODE_SELECTED_CLASS = 'graph-editor-canvas__selected';
 /** Dark readable text on selected canvas node cards. */
 export const CANVAS_NODE_SELECTED_TEXT_CLASS = 'graph-editor-canvas-selected';
 export const CANVAS_CLASS = 'graph-editor-canvas';
@@ -18,13 +20,14 @@ export const CHOICE_ROW_SELECTABLE_CLASS = 'graph-editor-choice-row-selectable';
 export const CHOICE_HANDLE_CLASS = 'graph-editor-handle graph-editor-choice-handle';
 export const NODE_DRAG_HANDLE_CLASS = 'graph-editor-drag-handle';
 export const NODE_DRAG_HANDLE_SELECTOR = `.${NODE_DRAG_HANDLE_CLASS}`;
-export const TARGET_HANDLE_CLASS_DEFAULT = 'handle-bg-default graph-editor-target-handle';
-export const TARGET_HANDLE_CLASS_DANGER = 'handle-bg-danger graph-editor-target-handle';
-export const CONTEXT_MENU_CLASS = 'graph-editor-context-menu dropdown-menu show position-fixed shadow-sm';
+export const TARGET_HANDLE_CLASS_DEFAULT = 'graph-editor-target-handle graph-editor-target-handle--default';
+export const TARGET_HANDLE_CLASS_DANGER = 'graph-editor-target-handle graph-editor-target-handle--danger';
+export const CONTEXT_MENU_CLASS = joinClasses('graph-editor-context-menu', EDITOR_DROPDOWN_MENU, 'graph-editor-dropdown__menu--open', 'graph-editor-context-menu--fixed', 'graph-editor-shadow--sm');
 export const REACT_FLOW_PANE_CLASS = 'react-flow__pane';
-export const BORDER_DANGER_CLASS = 'border-danger';
-export const BORDER_WARNING_CLASS = 'border-warning';
-export const END_NODE_WIDTH_CLASS = 'w-180';
+export const BORDER_DANGER_CLASS = 'graph-editor-canvas-node--border-danger';
+export const BORDER_WARNING_CLASS = 'graph-editor-canvas-node--border-warning';
+export const END_NODE_WIDTH_CLASS = 'graph-editor-canvas-node--end-width';
+export const CANVAS_NODE_CARD_CLASS = joinClasses(EDITOR_CARD, EDITOR_ROUNDED, CANVAS_NODE_CLASS);
 export const MIN_NODE_WIDTH = 180;
 export const MAX_NODE_WIDTH = 560;
 export const MIN_NODE_HEIGHT = 80;

package/dist/canvas/edgeBuilders.js

@@ -1,7 +1,7 @@
 import { TERMINAL_OUTCOME } from '@signalsafe/tree-spec';
 import { END_NODE_ID, choiceIdFromHandle, resolveDefaultEdgeType, resolveEffectiveEdgeType, resolveEdgeStrokeColor, shouldShowEdgeLabel, } from '@signalsafe/tree-spec-editor-core';
-import { CHOICE_HANDLE_PREFIX, TARGET_HANDLE_ID, } from './constants';
-import { buildEdgeMarker, buildEdgeStyle, resolveEdgePathStroke } from './edgeStyle';
+import { CHOICE_HANDLE_PREFIX, TARGET_HANDLE_ID, } from './constants.js';
+import { buildEdgeMarker, buildEdgeStyle, resolveEdgePathStroke } from './edgeStyle.js';
 export function edgeLabelForTransition(tree, t) {
     const node = tree.nodes[t.fromNodeId];
     const choice = node?.choices?.find((c) => c.id === t.fromChoiceId);

package/dist/canvas/edgeStyle.js

@@ -1,5 +1,5 @@
 import { DEFAULT_CANVAS_EDGE_STROKE } from '@signalsafe/tree-spec-editor-core';
-import { BORDER_DANGER_CLASS, BORDER_WARNING_CLASS, EDGE_ARROW_MARKER, SELECTED_EDGE_STROKE } from './constants';
+import { BORDER_DANGER_CLASS, BORDER_WARNING_CLASS, EDGE_ARROW_MARKER, SELECTED_EDGE_STROKE } from './constants.js';
 export function getPromptNodeBorderClass(hasErrors, warningCount) {
     if (hasErrors) {
         return BORDER_DANGER_CLASS;

package/dist/canvas/typeGuards.js

@@ -1,4 +1,4 @@
-import { CHOICE_ROW_SELECTOR, REACT_FLOW_PANE_CLASS } from './constants';
+import { CHOICE_ROW_SELECTOR, REACT_FLOW_PANE_CLASS } from './constants.js';
 export function isChoiceRowClickTarget(target) {
     if (target == null || typeof target !== 'object')
         return false;

package/dist/contextMenu/GraphCanvasContextMenu.d.ts

@@ -1,4 +1,4 @@
-import type { CanvasContextMenuState } from './types';
+import type { CanvasContextMenuState } from './types.js';
 export declare function GraphCanvasContextMenu({ menu, readOnly, onClose, onDuplicateNode, onDeleteNode, onAutoLayout, }: Readonly<{
     menu: CanvasContextMenuState | null;
     readOnly: boolean;

package/dist/contextMenu/GraphCanvasContextMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GraphCanvasContextMenu.d.ts","sourceRoot":"","sources":["../../src/contextMenu/GraphCanvasContextMenu.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAEtD,wBAAgB,sBAAsB,CAAC,EACnC,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,eAAe,EACf,YAAY,EACZ,YAAY,GACf,EAAE,QAAQ,CAAC;IACR,IAAI,EAAE,sBAAsB,GAAG,IAAI,CAAC;IACpC,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,eAAe,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B,CAAC,sCAwDD"}
+{"version":3,"file":"GraphCanvasContextMenu.d.ts","sourceRoot":"","sources":["../../src/contextMenu/GraphCanvasContextMenu.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAC;AAEzD,wBAAgB,sBAAsB,CAAC,EACnC,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,eAAe,EACf,YAAY,EACZ,YAAY,GACf,EAAE,QAAQ,CAAC;IACR,IAAI,EAAE,sBAAsB,GAAG,IAAI,CAAC;IACpC,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,eAAe,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B,CAAC,sCAwDD"}

package/dist/contextMenu/GraphCanvasContextMenu.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { END_NODE_ID } from '@signalsafe/tree-spec-editor-core';
-import { CONTEXT_MENU_CLASS } from '../canvas/constants';
-import { joinClasses } from '../utils/joinClasses';
+import { CONTEXT_MENU_CLASS } from '../canvas/constants.js';
+import { editorDropdownItemClass } from '../ui/editorClasses.js';
 export function GraphCanvasContextMenu({ menu, readOnly, onClose, onDuplicateNode, onDeleteNode, onAutoLayout, }) {
     if (!menu || readOnly)
         return null;
@@ -32,7 +32,7 @@ export function GraphCanvasContextMenu({ menu, readOnly, onClose, onDuplicateNod
     }
     if (items.length === 0)
         return null;
-    return (_jsx("div", { className: CONTEXT_MENU_CLASS, style: { left: menu.x, top: menu.y, zIndex: 1050 }, role: "menu", tabIndex: -1, onContextMenu: (event) => event.preventDefault(), onPointerDown: (event) => event.stopPropagation(), children: items.map((item) => (_jsx("button", { type: "button", className: joinClasses('dropdown-item', item.danger && 'text-danger'), role: "menuitem", onClick: () => {
+    return (_jsx("div", { className: CONTEXT_MENU_CLASS, style: { left: menu.x, top: menu.y, zIndex: 1050 }, role: "menu", tabIndex: -1, onContextMenu: (event) => event.preventDefault(), onPointerDown: (event) => event.stopPropagation(), children: items.map((item) => (_jsx("button", { type: "button", className: editorDropdownItemClass(item.danger), role: "menuitem", onClick: () => {
                 item.onClick();
                 onClose();
             }, children: item.label }, item.key))) }));

package/dist/hooks/useCanvasContextMenu.d.ts

@@ -1,6 +1,6 @@
 import { type MouseEvent } from 'react';
 import type { Node } from 'reactflow';
-import type { CanvasContextMenuState } from '../contextMenu/types';
+import type { CanvasContextMenuState } from '../contextMenu/types.js';
 export type UseCanvasContextMenuOptions = {
     readOnly: boolean;
     onAutoLayout?: () => void;

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

@@ -1 +1 @@
-{"version":3,"file":"useCanvasContextMenu.d.ts","sourceRoot":"","sources":["../../src/hooks/useCanvasContextMenu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoC,KAAK,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1E,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEtC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAEnE,MAAM,MAAM,2BAA2B,GAAG;IACtC,QAAQ,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACrC,WAAW,EAAE,sBAAsB,GAAG,IAAI,CAAC;IAC3C,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,iBAAiB,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAC3D,iBAAiB,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;CAClD,CAAC;AAEF,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,2BAA2B,GAAG,0BAA0B,CAsDrG"}
+{"version":3,"file":"useCanvasContextMenu.d.ts","sourceRoot":"","sources":["../../src/hooks/useCanvasContextMenu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoC,KAAK,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1E,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEtC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAEtE,MAAM,MAAM,2BAA2B,GAAG;IACtC,QAAQ,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACrC,WAAW,EAAE,sBAAsB,GAAG,IAAI,CAAC;IAC3C,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,iBAAiB,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAC3D,iBAAiB,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;CAClD,CAAC;AAEF,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,2BAA2B,GAAG,0BAA0B,CAsDrG"}

package/dist/hooks/useCanvasGraphState.js

@@ -1,8 +1,8 @@
 import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useEdgesState, useNodesState, } from 'reactflow';
 import { END_NODE_ID, getEditorHints, isNodeLocked, patchGraphEditorMeta, resolveCanvasNodeWidth, resolveEndNodePosition, snapPosition, } from '@signalsafe/tree-spec-editor-core';
-import { buildEdgesFromTransitions, buildTransitionsFromEdges } from '../canvas/edgeBuilders';
-import { NODE_DRAG_HANDLE_SELECTOR } from '../canvas/constants';
+import { buildEdgesFromTransitions, buildTransitionsFromEdges } from '../canvas/edgeBuilders.js';
+import { NODE_DRAG_HANDLE_SELECTOR } from '../canvas/constants.js';
 export function useCanvasGraphState(options) {
     const { tree, onChange, issues, issuesByNode, readOnly, resizeHeightByNodeId, isResizingRef, suppressViewportSaveRef, } = options;
     const isDraggingRef = useRef(false);

package/dist/hooks/useEditorAdapter.d.ts

@@ -1,7 +1,7 @@
 import { type MutableRefObject, type RefObject } from 'react';
 import { type TreeSpecIssue, type TreeSpecWire } from '@signalsafe/tree-spec';
 import { type AutosaveStatus, type EditorTree, type TreeSpecAuditEventItem, type TreeSpecSnapshotItem } from '@signalsafe/tree-spec-editor-core';
-import type { GraphEditorVersionInfo, UseTreeSpecEditorActions, UseTreeSpecEditorOptions } from './types';
+import type { GraphEditorVersionInfo, UseTreeSpecEditorActions, UseTreeSpecEditorOptions } from './types.js';
 export type UseEditorAdapterOptions = {
     options: UseTreeSpecEditorOptions;
     tree: EditorTree | null;

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

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

package/dist/hooks/useEditorAutosave.d.ts

@@ -1,6 +1,6 @@
 import { type MutableRefObject, type RefObject } from 'react';
 import { type AutosaveStatus, type EditorTree } from '@signalsafe/tree-spec-editor-core';
-import type { UseTreeSpecEditorActions } from './types';
+import type { UseTreeSpecEditorActions } from './types.js';
 export type UseEditorAutosaveOptions = {
     enableAutosave: boolean;
     autosaveDebounceMs: number;

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

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

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

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

package/dist/hooks/useEditorSelection.js

@@ -13,8 +13,7 @@ export function useEditorSelection(tree) {
     const applySelection = useCallback((next) => {
         setSelection(next);
         if (next.kind === GRAPH_SELECTION_KIND.EDGE && next.id && tree) {
-            const edge = tree.transitions.find((t) => t.id === next.id);
-            if (!edge)
+            if (!tree.transitions.some((t) => t.id === next.id))
                 return;
         }
         const { focusNodeId: nextFocusNodeId, focusChoiceId: nextFocusChoiceId } = resolveGraphSelectionFocus(next, tree);

package/dist/hooks/useGraphConnect.js

@@ -1,7 +1,7 @@
 import { useCallback, useRef } from 'react';
 import { useReactFlow } from 'reactflow';
 import { GRAPH_SELECTION_KIND, applyEditorConnect, applyEditorConnectOnDrop, applyEditorReconnect, isValidEditorConnection, } from '@signalsafe/tree-spec-editor-core';
-import { isReactFlowPaneTarget } from '../canvas/typeGuards';
+import { isReactFlowPaneTarget } from '../canvas/typeGuards.js';
 export function useGraphConnect(options) {
     const { treeRef, onChange, onSelect, readOnly } = options;
     const rf = useReactFlow();

package/dist/hooks/useTreeSpecEditor.d.ts

@@ -1,4 +1,4 @@
-import type { UseTreeSpecEditorOptions, UseTreeSpecEditorResult } from './types';
+import type { UseTreeSpecEditorOptions, UseTreeSpecEditorResult } from './types.js';
 /**
  * Headless React hook that owns the full stateful behavior of the SignalSafe
  * TreeSpec graph editor — loading, autosave, validation, publish, snapshots,

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

@@ -1 +1 @@
-{"version":3,"file":"useTreeSpecEditor.d.ts","sourceRoot":"","sources":["../../src/hooks/useTreeSpecEditor.ts"],"names":[],"mappings":"AAwCA,OAAO,KAAK,EAER,wBAAwB,EACxB,uBAAuB,EAE1B,MAAM,SAAS,CAAC;AAcjB;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,wBAAwB,GAAG,uBAAuB,CA6f5F"}
+{"version":3,"file":"useTreeSpecEditor.d.ts","sourceRoot":"","sources":["../../src/hooks/useTreeSpecEditor.ts"],"names":[],"mappings":"AAwCA,OAAO,KAAK,EAER,wBAAwB,EACxB,uBAAuB,EAE1B,MAAM,YAAY,CAAC;AAcpB;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,wBAAwB,GAAG,uBAAuB,CA6f5F"}

package/dist/hooks/useTreeSpecEditor.js

@@ -1,11 +1,11 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { compileTreeSpec, decompileTreeSpec, TERMINAL_OUTCOME, TREE_SPEC_ISSUE_SEVERITY, } from '@signalsafe/tree-spec';
 import { applyTreeTemplate, autoLayoutTree, AUTOSAVE_STATUS, deleteNode, deleteTransitionsForChoice, END_NODE_ID, getNextSpawnPosition, getTransition, GRAPH_SELECTION_KIND, moveChoiceInTree, moveNodeChoice, patchChoiceEdgeHints, patchGraphEditorMeta, renameNodeChoiceId, safeUUID, upsertTransition, } from '@signalsafe/tree-spec-editor-core';
-import { useEditorAdapter } from './useEditorAdapter';
-import { useEditorAutosave } from './useEditorAutosave';
-import { useEditorHistory } from './useEditorHistory';
-import { useEditorSelection } from './useEditorSelection';
-import { dispatchEditorKeyboardShortcut, resolveEditorKeyboardShortcutAction } from './keyboardShortcutDispatch';
+import { useEditorAdapter } from './useEditorAdapter.js';
+import { useEditorAutosave } from './useEditorAutosave.js';
+import { useEditorHistory } from './useEditorHistory.js';
+import { useEditorSelection } from './useEditorSelection.js';
+import { dispatchEditorKeyboardShortcut, resolveEditorKeyboardShortcutAction } from './keyboardShortcutDispatch.js';
 const DEFAULT_AUTOSAVE_DEBOUNCE_MS = 2500;
 function isTextFieldTarget(target) {
     const tag = target instanceof HTMLElement ? target.tagName.toLowerCase() : '';

package/dist/index.d.ts

@@ -10,8 +10,8 @@
  * UI shells layer on top of this package; routing is host-injected via hook
  * callbacks.
  */
-export { default } from './TreeSpecGraphEditor';
-export type { TreeSpecGraphEditorProps } from './TreeSpecGraphEditor';
-export { useTreeSpecEditor } from './hooks/useTreeSpecEditor';
-export type { AdapterValidationIssue, GraphEditorVersionInfo, TreeSpecEditorAdapter, UseTreeSpecEditorActions, UseTreeSpecEditorOptions, UseTreeSpecEditorResult, UseTreeSpecEditorState, } from './hooks/types';
+export { default } from './TreeSpecGraphEditor.js';
+export type { TreeSpecGraphEditorProps } from './TreeSpecGraphEditor.js';
+export { useTreeSpecEditor } from './hooks/useTreeSpecEditor.js';
+export type { AdapterValidationIssue, GraphEditorVersionInfo, TreeSpecEditorAdapter, UseTreeSpecEditorActions, UseTreeSpecEditorOptions, UseTreeSpecEditorResult, UseTreeSpecEditorState, } from './hooks/types.js';
 //# 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":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,YAAY,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AAEtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,YAAY,EACR,sBAAsB,EACtB,sBAAsB,EACtB,qBAAqB,EACrB,wBAAwB,EACxB,wBAAwB,EACxB,uBAAuB,EACvB,sBAAsB,GACzB,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,YAAY,EAAE,wBAAwB,EAAE,MAAM,0BAA0B,CAAC;AAEzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,YAAY,EACR,sBAAsB,EACtB,sBAAsB,EACtB,qBAAqB,EACrB,wBAAwB,EACxB,wBAAwB,EACxB,uBAAuB,EACvB,sBAAsB,GACzB,MAAM,kBAAkB,CAAC"}

package/dist/index.js

@@ -10,5 +10,5 @@
  * UI shells layer on top of this package; routing is host-injected via hook
  * callbacks.
  */
-export { default } from './TreeSpecGraphEditor';
-export { useTreeSpecEditor } from './hooks/useTreeSpecEditor';
+export { default } from './TreeSpecGraphEditor.js';
+export { useTreeSpecEditor } from './hooks/useTreeSpecEditor.js';

package/dist/nodes/ChoiceCanvasRow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChoiceCanvasRow.d.ts","sourceRoot":"","sources":["../../src/nodes/ChoiceCanvasRow.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAkBtE,wBAAgB,eAAe,CAAC,EAC5B,MAAM,EACN,MAAM,EACN,WAAW,EACX,aAAa,EACb,eAAe,EACf,QAAQ,GACX,EAAE,QAAQ,CAAC;IACR,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,YAAY,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,eAAe,EAAE,MAAM,CAAC;IACxB,QAAQ,EAAE,OAAO,CAAC;CACrB,CAAC,+BAqHD"}
+{"version":3,"file":"ChoiceCanvasRow.d.ts","sourceRoot":"","sources":["../../src/nodes/ChoiceCanvasRow.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAkCtE,wBAAgB,eAAe,CAAC,EAC5B,MAAM,EACN,MAAM,EACN,WAAW,EACX,aAAa,EACb,eAAe,EACf,QAAQ,GACX,EAAE,QAAQ,CAAC;IACR,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,YAAY,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,eAAe,EAAE,MAAM,CAAC;IACxB,QAAQ,EAAE,OAAO,CAAC;CACrB,CAAC,+BAoID"}

package/dist/nodes/ChoiceCanvasRow.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Handle, Position } from 'reactflow';
-import { CANVAS_NODE_SELECTED_CLASS, CANVAS_NODE_SELECTED_TEXT_CLASS, CANVAS_CHOICE_SELECTED_CLASS, CHOICE_DRAG_HANDLE_CLASS, CHOICE_DRAG_HANDLE_SELECTOR, CHOICE_DROP_TARGET_CLASS, CHOICE_HANDLE_CLASS, CHOICE_ROW_CLASS, CHOICE_ROW_SELECT_CLASS, CHOICE_ROW_SELECTABLE_CLASS, CHOICE_HANDLE_PREFIX, } from '../canvas/constants';
-import { useGraphEditorCanvas } from '../GraphEditorCanvasContext';
-import { joinClasses } from '../utils/joinClasses';
+import { CANVAS_NODE_SELECTED_CLASS, CANVAS_NODE_SELECTED_TEXT_CLASS, CANVAS_CHOICE_SELECTED_CLASS, CHOICE_DRAG_HANDLE_CLASS, CHOICE_DRAG_HANDLE_SELECTOR, CHOICE_DROP_TARGET_CLASS, CHOICE_HANDLE_CLASS, CHOICE_ROW_CLASS, CHOICE_ROW_SELECT_CLASS, CHOICE_ROW_SELECTABLE_CLASS, CHOICE_HANDLE_PREFIX, } from '../canvas/constants.js';
+import { useGraphEditorCanvas } from '../GraphEditorCanvasContext.js';
+import { EDITOR_FLEX_ALIGN_CENTER, EDITOR_FLEX_GROW_1, EDITOR_FLEX_ROW, EDITOR_FLEX_SHRINK_0, EDITOR_ICON, EDITOR_LIST_ITEM, EDITOR_MIN_W_0, EDITOR_SPACING_GAP_1, EDITOR_SPACING_P_0, EDITOR_SPACING_PX_2, EDITOR_SPACING_PY_2, EDITOR_TEXT_START, EDITOR_W_FULL, editorBadgeToneClass, joinClasses, } from '../ui/editorClasses.js';
 export function ChoiceCanvasRow({ nodeId, choice, choiceIndex, focusChoiceId, choiceTextClass, readOnly, }) {
     const { choiceDrag, choiceDropTarget, onSelectChoice, onChoiceDragStart, onChoiceDragEnd, onChoiceDragOver, onChoiceDrop, } = useGraphEditorCanvas();
     const isFocused = focusChoiceId === choice.id;
@@ -38,12 +38,12 @@ export function ChoiceCanvasRow({ nodeId, choice, choiceIndex, focusChoiceId, ch
         event.stopPropagation();
         onSelectChoice(nodeId, choice.id);
     };
-    return (_jsx("li", { className: joinClasses('list-group-item p-0 border-0', isDropTarget && CHOICE_DROP_TARGET_CLASS), onDragOver: handleDragOver, onDrop: handleDrop, children: _jsxs("div", { className: joinClasses('d-flex align-items-center gap-1 min-w-0 py-2 px-2 w-100', CHOICE_ROW_CLASS, isFocused && CANVAS_CHOICE_SELECTED_CLASS, isFocused && CANVAS_NODE_SELECTED_CLASS, isFocused && CANVAS_NODE_SELECTED_TEXT_CLASS), children: [readOnly ? null : (_jsx("button", { type: "button", className: `${CHOICE_DRAG_HANDLE_CLASS} flex-shrink-0`, draggable: true, onDragStart: (event) => {
+    return (_jsx("li", { className: joinClasses(EDITOR_LIST_ITEM, EDITOR_SPACING_P_0, 'graph-editor-list__item--plain', isDropTarget && CHOICE_DROP_TARGET_CLASS), onDragOver: handleDragOver, onDrop: handleDrop, children: _jsxs("div", { className: joinClasses(EDITOR_FLEX_ROW, EDITOR_FLEX_ALIGN_CENTER, EDITOR_SPACING_GAP_1, EDITOR_MIN_W_0, EDITOR_SPACING_PY_2, EDITOR_SPACING_PX_2, EDITOR_W_FULL, CHOICE_ROW_CLASS, isFocused && CANVAS_CHOICE_SELECTED_CLASS, isFocused && CANVAS_NODE_SELECTED_CLASS, isFocused && CANVAS_NODE_SELECTED_TEXT_CLASS), children: [readOnly ? null : (_jsx("button", { type: "button", className: joinClasses(CHOICE_DRAG_HANDLE_CLASS, EDITOR_FLEX_SHRINK_0), draggable: true, onDragStart: (event) => {
                         event.stopPropagation();
                         onChoiceDragStart(nodeId, choice.id);
                         event.dataTransfer.effectAllowed = 'move';
                         event.dataTransfer.setData('text/plain', `${nodeId}::${choice.id}`);
-                    }, onDragEnd: () => onChoiceDragEnd(), onClick: (event) => event.stopPropagation(), title: "Drag to reorder or move to another node", "aria-label": "Drag choice", children: _jsx("i", { className: "bi bi-grip-vertical", "aria-hidden": true }) })), _jsxs("button", { type: "button", className: joinClasses(CHOICE_ROW_SELECT_CLASS, 'text-start flex-grow-1 min-w-0 d-flex align-items-center gap-1', readOnly ? '' : CHOICE_ROW_SELECTABLE_CLASS), disabled: readOnly, onClick: handleChoiceSelect, onKeyDown: (event) => {
+                    }, onDragEnd: () => onChoiceDragEnd(), onClick: (event) => event.stopPropagation(), title: "Drag to reorder or move to another node", "aria-label": "Drag choice", children: _jsx("span", { className: joinClasses(EDITOR_ICON, 'graph-editor-icon--grip'), "aria-hidden": true, children: "\u22EE\u22EE" }) })), _jsxs("button", { type: "button", className: joinClasses(CHOICE_ROW_SELECT_CLASS, EDITOR_TEXT_START, EDITOR_FLEX_GROW_1, EDITOR_MIN_W_0, EDITOR_FLEX_ROW, EDITOR_FLEX_ALIGN_CENTER, EDITOR_SPACING_GAP_1, readOnly ? '' : CHOICE_ROW_SELECTABLE_CLASS), disabled: readOnly, onClick: handleChoiceSelect, onKeyDown: (event) => {
                         if (readOnly)
                             return;
                         if (event.key === 'Enter' || event.key === ' ') {
@@ -51,5 +51,5 @@ export function ChoiceCanvasRow({ nodeId, choice, choiceIndex, focusChoiceId, ch
                             event.stopPropagation();
                             onSelectChoice(nodeId, choice.id);
                         }
-                    }, children: [_jsx("span", { className: joinClasses(choiceTextClass, 'flex-grow-1 min-w-0'), title: choice.label, children: choice.label }), _jsx("span", { className: "badge bg-light text-dark flex-shrink-0", children: choice.id })] }), _jsx(Handle, { type: "source", position: Position.Right, id: `${CHOICE_HANDLE_PREFIX}${choice.id}`, className: CHOICE_HANDLE_CLASS })] }) }));
+                    }, children: [_jsx("span", { className: joinClasses(choiceTextClass, EDITOR_FLEX_GROW_1, EDITOR_MIN_W_0), title: choice.label, children: choice.label }), _jsx("span", { className: joinClasses(editorBadgeToneClass('neutral'), EDITOR_FLEX_SHRINK_0), children: choice.id })] }), _jsx(Handle, { type: "source", position: Position.Right, id: `${CHOICE_HANDLE_PREFIX}${choice.id}`, className: CHOICE_HANDLE_CLASS })] }) }));
 }

package/dist/nodes/EndNode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EndNode.d.ts","sourceRoot":"","sources":["../../src/nodes/EndNode.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AAa7D,wBAAgB,OAAO,CAAC,EAAE,QAAQ,EAAE,EAAE,SAAS,+BAoB9C"}
+{"version":3,"file":"EndNode.d.ts","sourceRoot":"","sources":["../../src/nodes/EndNode.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AAsB7D,wBAAgB,OAAO,CAAC,EAAE,QAAQ,EAAE,EAAE,SAAS,+BAkB9C"}

package/dist/nodes/EndNode.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Handle, Position } from 'reactflow';
-import { BORDER_DANGER_CLASS, CANVAS_NODE_CLASS, CANVAS_NODE_SELECTED_CLASS, CANVAS_NODE_SELECTED_TEXT_CLASS, END_NODE_WIDTH_CLASS, TARGET_HANDLE_CLASS_DANGER, TARGET_HANDLE_ID, } from '../canvas/constants';
-import { joinClasses } from '../utils/joinClasses';
+import { BORDER_DANGER_CLASS, CANVAS_NODE_CARD_CLASS, CANVAS_NODE_SELECTED_CLASS, CANVAS_NODE_SELECTED_TEXT_CLASS, END_NODE_WIDTH_CLASS, TARGET_HANDLE_CLASS_DANGER, TARGET_HANDLE_ID, } from '../canvas/constants.js';
+import { EDITOR_CARD_BODY, EDITOR_MUTED, EDITOR_SPACING_P_2, EDITOR_TEXT_BOLD, EDITOR_TEXT_CENTER, EDITOR_TEXT_DANGER, EDITOR_TEXT_SM, joinClasses, } from '../ui/editorClasses.js';
 export function EndNode({ selected }) {
-    return (_jsxs("div", { className: joinClasses('card', 'rounded', CANVAS_NODE_CLASS, BORDER_DANGER_CLASS, END_NODE_WIDTH_CLASS, selected && CANVAS_NODE_SELECTED_CLASS, selected && CANVAS_NODE_SELECTED_TEXT_CLASS), children: [_jsx(Handle, { type: "target", position: Position.Left, id: TARGET_HANDLE_ID, className: TARGET_HANDLE_CLASS_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" })] })] }));
+    return (_jsxs("div", { className: joinClasses(CANVAS_NODE_CARD_CLASS, BORDER_DANGER_CLASS, END_NODE_WIDTH_CLASS, selected && CANVAS_NODE_SELECTED_CLASS, selected && CANVAS_NODE_SELECTED_TEXT_CLASS), children: [_jsx(Handle, { type: "target", position: Position.Left, id: TARGET_HANDLE_ID, className: TARGET_HANDLE_CLASS_DANGER }), _jsxs("div", { className: joinClasses(EDITOR_CARD_BODY, EDITOR_SPACING_P_2, EDITOR_TEXT_CENTER), children: [_jsx("div", { className: joinClasses(EDITOR_TEXT_BOLD, EDITOR_TEXT_DANGER), children: "END" }), _jsx("div", { className: joinClasses(EDITOR_MUTED, EDITOR_TEXT_SM), children: "Outcome required" })] })] }));
 }

package/dist/nodes/PromptNode.d.ts

@@ -1,5 +1,5 @@
 import { type NodeProps } from 'reactflow';
-import type { PromptNodeData } from './types';
+import type { PromptNodeData } from './types.js';
 type PromptNodeProps = Readonly<NodeProps<PromptNodeData>>;
 export declare function PromptNode({ data, selected, id }: PromptNodeProps): import("react").JSX.Element;
 export {};

package/dist/nodes/PromptNode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PromptNode.d.ts","sourceRoot":"","sources":["../../src/nodes/PromptNode.tsx"],"names":[],"mappings":"AACA,OAAO,EAAyD,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AA2BlG,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C,KAAK,eAAe,GAAG,QAAQ,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC,CAAC;AAE3D,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,eAAe,+BA+GjE"}
+{"version":3,"file":"PromptNode.d.ts","sourceRoot":"","sources":["../../src/nodes/PromptNode.tsx"],"names":[],"mappings":"AACA,OAAO,EAAyD,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AAoClG,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEjD,KAAK,eAAe,GAAG,QAAQ,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC,CAAC;AAE3D,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,eAAe,+BA6GjE"}

package/dist/nodes/PromptNode.js

@@ -2,13 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useCallback, useEffect } from 'react';
 import { Handle, NodeResizer, Position, useUpdateNodeInternals } from 'reactflow';
 import { editorHintsToStyle, getEditorHints, nodeTextWrapClassName, resolveNodeTextWrap, } from '@signalsafe/tree-spec-editor-core';
-import { CANVAS_NODE_BODY_CLASS, CANVAS_NODE_CLASS, CANVAS_NODE_SELECTED_CLASS, CANVAS_NODE_SELECTED_TEXT_CLASS, MIN_NODE_HEIGHT, MAX_NODE_HEIGHT, MIN_NODE_WIDTH, MAX_NODE_WIDTH, TARGET_HANDLE_CLASS_DEFAULT, TARGET_HANDLE_ID, } from '../canvas/constants';
-import { getPromptNodeBorderClass } from '../canvas/edgeStyle';
-import { useGraphEditorCanvas } from '../GraphEditorCanvasContext';
-import { joinClasses } from '../utils/joinClasses';
-import { PromptNodeChoicesList } from './PromptNodeChoicesList';
-import { PromptNodeHeader } from './PromptNodeHeader';
-import { PromptNodeToolbar } from './PromptNodeToolbar';
+import { CANVAS_NODE_BODY_CLASS, CANVAS_NODE_CARD_CLASS, CANVAS_NODE_SELECTED_CLASS, CANVAS_NODE_SELECTED_TEXT_CLASS, MIN_NODE_HEIGHT, MAX_NODE_HEIGHT, MIN_NODE_WIDTH, MAX_NODE_WIDTH, TARGET_HANDLE_CLASS_DEFAULT, TARGET_HANDLE_ID, } from '../canvas/constants.js';
+import { getPromptNodeBorderClass } from '../canvas/edgeStyle.js';
+import { useGraphEditorCanvas } from '../GraphEditorCanvasContext.js';
+import { EDITOR_CARD_BODY, EDITOR_MIN_W_0, EDITOR_MUTED, EDITOR_SPACING_MB_0, EDITOR_SPACING_PX_2, EDITOR_SPACING_PY_2, EDITOR_TEXT_SM, joinClasses, } from '../ui/editorClasses.js';
+import { PromptNodeChoicesList } from './PromptNodeChoicesList.js';
+import { PromptNodeHeader } from './PromptNodeHeader.js';
+import { PromptNodeToolbar } from './PromptNodeToolbar.js';
 export function PromptNode({ data, selected, id }) {
     const n = data.node;
     const choices = n.choices ?? [];
@@ -47,5 +47,5 @@ export function PromptNode({ data, selected, id }) {
                     onResizeNodeStart(id, params.width, params.height);
                 }, onResize: handleResize, onResizeEnd: (_event, params) => {
                     onResizeNode(id, params.width, params.height);
-                } })) : null, _jsxs("div", { className: joinClasses('card', 'rounded', CANVAS_NODE_CLASS, borderClass, showNodeHighlight && CANVAS_NODE_SELECTED_CLASS, showNodeHighlight && CANVAS_NODE_SELECTED_TEXT_CLASS), style: cardStyle, children: [_jsx(Handle, { type: "target", position: Position.Left, id: TARGET_HANDLE_ID, className: TARGET_HANDLE_CLASS_DEFAULT }), _jsx(PromptNodeHeader, { node: n, data: data, editor: editor, locked: locked, readOnly: readOnly }), _jsxs("div", { className: `${CANVAS_NODE_BODY_CLASS} min-w-0`, style: scrollBodyStyle, children: [_jsx("div", { className: "card-body py-2 px-2 min-w-0 nodrag", children: _jsx("div", { className: joinClasses('font-size-12 mb-0', promptTextClass), title: n.prompt || undefined, children: n.prompt || _jsx("em", { className: "text-muted", children: "(empty prompt)" }) }) }), _jsx(PromptNodeChoicesList, { nodeId: id, choices: choices, focusChoiceId: focusChoiceId, choiceTextClass: choiceTextClass, readOnly: readOnly, choiceDrag: choiceDrag, choiceDropTarget: choiceDropTarget, onChoiceDragOver: onChoiceDragOver, onChoiceDrop: onChoiceDrop })] })] })] }));
+                } })) : null, _jsxs("div", { className: joinClasses(CANVAS_NODE_CARD_CLASS, borderClass, showNodeHighlight && CANVAS_NODE_SELECTED_CLASS, showNodeHighlight && CANVAS_NODE_SELECTED_TEXT_CLASS), style: cardStyle, children: [_jsx(Handle, { type: "target", position: Position.Left, id: TARGET_HANDLE_ID, className: TARGET_HANDLE_CLASS_DEFAULT }), _jsx(PromptNodeHeader, { node: n, data: data, editor: editor, locked: locked, readOnly: readOnly }), _jsxs("div", { className: joinClasses(CANVAS_NODE_BODY_CLASS, EDITOR_MIN_W_0), style: scrollBodyStyle, children: [_jsx("div", { className: joinClasses(EDITOR_CARD_BODY, EDITOR_SPACING_PY_2, EDITOR_SPACING_PX_2, EDITOR_MIN_W_0, 'nodrag'), children: _jsx("div", { className: joinClasses(EDITOR_TEXT_SM, EDITOR_SPACING_MB_0, promptTextClass), title: n.prompt || undefined, children: n.prompt || _jsx("em", { className: EDITOR_MUTED, children: "(empty prompt)" }) }) }), _jsx(PromptNodeChoicesList, { nodeId: id, choices: choices, focusChoiceId: focusChoiceId, choiceTextClass: choiceTextClass, readOnly: readOnly, choiceDrag: choiceDrag, choiceDropTarget: choiceDropTarget, onChoiceDragOver: onChoiceDragOver, onChoiceDrop: onChoiceDrop })] })] })] }));
 }

package/dist/nodes/PromptNodeChoicesList.d.ts

@@ -1,5 +1,5 @@
 import { type EditorChoice } from '@signalsafe/tree-spec-editor-core';
-import { type GraphEditorCanvasContextValue } from '../GraphEditorCanvasContext';
+import { type GraphEditorCanvasContextValue } from '../GraphEditorCanvasContext.js';
 export declare function PromptNodeChoicesList({ nodeId, choices, focusChoiceId, choiceTextClass, readOnly, choiceDrag, choiceDropTarget, onChoiceDragOver, onChoiceDrop, }: Readonly<{
     nodeId: string;
     choices: EditorChoice[];

package/dist/nodes/PromptNodeChoicesList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PromptNodeChoicesList.d.ts","sourceRoot":"","sources":["../../src/nodes/PromptNodeChoicesList.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAMtE,OAAO,EAAE,KAAK,6BAA6B,EAAE,MAAM,6BAA6B,CAAC;AAIjF,wBAAgB,qBAAqB,CAAC,EAClC,MAAM,EACN,OAAO,EACP,aAAa,EACb,eAAe,EACf,QAAQ,EACR,UAAU,EACV,gBAAgB,EAChB,gBAAgB,EAChB,YAAY,GACf,EAAE,QAAQ,CAAC;IACR,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,eAAe,EAAE,MAAM,CAAC;IACxB,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,6BAA6B,CAAC,YAAY,CAAC,CAAC;IACxD,gBAAgB,EAAE,6BAA6B,CAAC,kBAAkB,CAAC,CAAC;IACpE,gBAAgB,EAAE,6BAA6B,CAAC,kBAAkB,CAAC,CAAC;IACpE,YAAY,EAAE,6BAA6B,CAAC,cAAc,CAAC,CAAC;CAC/D,CAAC,+BA2DD"}
+{"version":3,"file":"PromptNodeChoicesList.d.ts","sourceRoot":"","sources":["../../src/nodes/PromptNodeChoicesList.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAMtE,OAAO,EAAE,KAAK,6BAA6B,EAAE,MAAM,gCAAgC,CAAC;AAapF,wBAAgB,qBAAqB,CAAC,EAClC,MAAM,EACN,OAAO,EACP,aAAa,EACb,eAAe,EACf,QAAQ,EACR,UAAU,EACV,gBAAgB,EAChB,gBAAgB,EAChB,YAAY,GACf,EAAE,QAAQ,CAAC;IACR,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,eAAe,EAAE,MAAM,CAAC;IACxB,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,6BAA6B,CAAC,YAAY,CAAC,CAAC;IACxD,gBAAgB,EAAE,6BAA6B,CAAC,kBAAkB,CAAC,CAAC;IACpE,gBAAgB,EAAE,6BAA6B,CAAC,kBAAkB,CAAC,CAAC;IACpE,YAAY,EAAE,6BAA6B,CAAC,cAAc,CAAC,CAAC;CAC/D,CAAC,+BA8DD"}

package/dist/nodes/PromptNodeChoicesList.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CHOICE_DROP_APPEND_CLASS, CHOICE_DROP_TARGET_CLASS, } from '../canvas/constants';
-import { joinClasses } from '../utils/joinClasses';
-import { ChoiceCanvasRow } from './ChoiceCanvasRow';
+import { CHOICE_DROP_APPEND_CLASS, CHOICE_DROP_TARGET_CLASS, } from '../canvas/constants.js';
+import { EDITOR_LIST_FLUSH, EDITOR_LIST_ITEM_EMPTY, EDITOR_MIN_W_0, EDITOR_MUTED, EDITOR_SPACING_PX_2, EDITOR_SPACING_PY_2, EDITOR_TEXT_SM, joinClasses, } from '../ui/editorClasses.js';
+import { ChoiceCanvasRow } from './ChoiceCanvasRow.js';
 export function PromptNodeChoicesList({ nodeId, choices, focusChoiceId, choiceTextClass, readOnly, choiceDrag, choiceDropTarget, onChoiceDragOver, onChoiceDrop, }) {
     const handleListDragOver = (event) => {
         if (readOnly || !choiceDrag)
@@ -18,7 +18,7 @@ export function PromptNodeChoicesList({ nodeId, choices, focusChoiceId, choiceTe
         event.stopPropagation();
         onChoiceDrop(nodeId, choices.length);
     };
-    return (_jsxs("ul", { className: "list-group list-group-flush font-size-12 min-w-0 nodrag", "aria-label": "Node choices", onDragOver: handleListDragOver, onDrop: handleListDrop, children: [choices.length === 0 ? (_jsx("li", { className: joinClasses('list-group-item py-2 px-2 text-muted', choiceDrag && CHOICE_DROP_TARGET_CLASS), children: _jsx("em", { children: "No choices" }) })) : (choices.map((c, choiceIndex) => (_jsx(ChoiceCanvasRow, { nodeId: nodeId, choice: c, choiceIndex: choiceIndex, focusChoiceId: focusChoiceId, choiceTextClass: choiceTextClass, readOnly: readOnly }, c.id)))), choiceDrag && readOnly === false && choices.length > 0 ? (_jsx("li", { className: joinClasses(CHOICE_DROP_APPEND_CLASS, 'list-unstyled', choiceDropTarget?.nodeId === nodeId &&
+    return (_jsxs("ul", { className: joinClasses(EDITOR_LIST_FLUSH, EDITOR_TEXT_SM, EDITOR_MIN_W_0, 'nodrag'), "aria-label": "Node choices", onDragOver: handleListDragOver, onDrop: handleListDrop, children: [choices.length === 0 ? (_jsx("li", { className: joinClasses(EDITOR_LIST_ITEM_EMPTY, EDITOR_SPACING_PY_2, EDITOR_SPACING_PX_2, EDITOR_MUTED, choiceDrag && CHOICE_DROP_TARGET_CLASS), children: _jsx("em", { children: "No choices" }) })) : (choices.map((c, choiceIndex) => (_jsx(ChoiceCanvasRow, { nodeId: nodeId, choice: c, choiceIndex: choiceIndex, focusChoiceId: focusChoiceId, choiceTextClass: choiceTextClass, readOnly: readOnly }, c.id)))), choiceDrag && readOnly === false && choices.length > 0 ? (_jsx("li", { className: joinClasses(CHOICE_DROP_APPEND_CLASS, 'graph-editor-list__append-target', choiceDropTarget?.nodeId === nodeId &&
                     choiceDropTarget.index === choices.length &&
                     CHOICE_DROP_TARGET_CLASS), "aria-hidden": true })) : null] }));
 }

package/dist/nodes/PromptNodeHeader.d.ts

@@ -1,5 +1,5 @@
 import { getEditorHints, type EditorNode } from '@signalsafe/tree-spec-editor-core';
-import type { PromptNodeData } from './types';
+import type { PromptNodeData } from './types.js';
 export declare function PromptNodeHeader({ node, data, editor, locked, readOnly, }: Readonly<{
     node: EditorNode;
     data: PromptNodeData;

package/dist/nodes/PromptNodeHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PromptNodeHeader.d.ts","sourceRoot":"","sources":["../../src/nodes/PromptNodeHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,KAAK,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAIpF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C,wBAAgB,gBAAgB,CAAC,EAC7B,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,MAAM,EACN,QAAQ,GACX,EAAE,QAAQ,CAAC;IACR,IAAI,EAAE,UAAU,CAAC;IACjB,IAAI,EAAE,cAAc,CAAC;IACrB,MAAM,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;IAC1C,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;CACrB,CAAC,+BAkCD"}
+{"version":3,"file":"PromptNodeHeader.d.ts","sourceRoot":"","sources":["../../src/nodes/PromptNodeHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,KAAK,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAyBpF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEjD,wBAAgB,gBAAgB,CAAC,EAC7B,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,MAAM,EACN,QAAQ,GACX,EAAE,QAAQ,CAAC;IACR,IAAI,EAAE,UAAU,CAAC;IACjB,IAAI,EAAE,cAAc,CAAC;IACrB,MAAM,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;IAC1C,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;CACrB,CAAC,+BA2DD"}

package/dist/nodes/PromptNodeHeader.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { NODE_DRAG_HANDLE_CLASS } from '../canvas/constants';
-import { PromptNodeIssueBadges } from './PromptNodeIssueBadges';
+import { NODE_DRAG_HANDLE_CLASS } from '../canvas/constants.js';
+import { EDITOR_CARD_HEADER_MUTED, EDITOR_FLEX_ALIGN_START, EDITOR_FLEX_BETWEEN, EDITOR_FLEX_GROW_1, EDITOR_FLEX_ROW, EDITOR_FLEX_SHRINK_0, EDITOR_ICON, EDITOR_MIN_W_0, EDITOR_MUTED, EDITOR_OVERFLOW_HIDDEN, EDITOR_SPACING_GAP_1, EDITOR_SPACING_GAP_2, EDITOR_SPACING_MS_1, EDITOR_SPACING_PX_2, EDITOR_SPACING_PY_2, EDITOR_TEXT_BOLD, EDITOR_TEXT_MD, EDITOR_TEXT_XS, joinClasses, } from '../ui/editorClasses.js';
+import { PromptNodeIssueBadges } from './PromptNodeIssueBadges.js';
 export function PromptNodeHeader({ node, data, editor, locked, readOnly, }) {
-    return (_jsx("div", { className: "card-header bg-body-secondary py-2 px-2 min-w-0 flex-shrink-0", children: _jsxs("div", { className: "d-flex justify-content-between align-items-start gap-2 min-w-0", children: [_jsxs("div", { className: "d-flex align-items-start gap-1 min-w-0 flex-grow-1 overflow-hidden", children: [locked || readOnly ? null : (_jsx("span", { className: `${NODE_DRAG_HANDLE_CLASS} flex-shrink-0`, title: "Drag node", "aria-label": "Drag node", children: _jsx("i", { className: "bi bi-grip-vertical", "aria-hidden": true }) })), _jsx("div", { className: "min-w-0 flex-grow-1 overflow-hidden", children: _jsxs("div", { className: "fw-bold font-size-13", children: [data.isStart ? '▶ ' : '', node.type, editor.locked ? (_jsx("i", { className: "bi bi-lock-fill ms-1 text-secondary", title: "Locked", "aria-hidden": true })) : null, _jsx(PromptNodeIssueBadges, { issuesTotal: data.issuesTotal, issuesErrors: data.issuesErrors, issuesWarnings: data.issuesWarnings, issuesInfo: data.issuesInfo })] }) })] }), _jsx("div", { className: "text-muted font-size-11 flex-shrink-0", children: node.id.slice(0, 8) })] }) }));
+    return (_jsx("div", { className: joinClasses(EDITOR_CARD_HEADER_MUTED, EDITOR_SPACING_PY_2, EDITOR_SPACING_PX_2, EDITOR_MIN_W_0, EDITOR_FLEX_SHRINK_0), children: _jsxs("div", { className: joinClasses(EDITOR_FLEX_BETWEEN, EDITOR_FLEX_ALIGN_START, EDITOR_SPACING_GAP_2, EDITOR_MIN_W_0), children: [_jsxs("div", { className: joinClasses(EDITOR_FLEX_ROW, EDITOR_FLEX_ALIGN_START, EDITOR_SPACING_GAP_1, EDITOR_MIN_W_0, EDITOR_FLEX_GROW_1, EDITOR_OVERFLOW_HIDDEN), children: [locked || readOnly ? null : (_jsx("span", { className: joinClasses(NODE_DRAG_HANDLE_CLASS, EDITOR_FLEX_SHRINK_0), title: "Drag node", "aria-label": "Drag node", children: _jsx("span", { className: joinClasses(EDITOR_ICON, 'graph-editor-icon--grip'), "aria-hidden": true, children: "\u22EE\u22EE" }) })), _jsx("div", { className: joinClasses(EDITOR_MIN_W_0, EDITOR_FLEX_GROW_1, EDITOR_OVERFLOW_HIDDEN), children: _jsxs("div", { className: joinClasses(EDITOR_TEXT_BOLD, EDITOR_TEXT_MD), children: [data.isStart ? '▶ ' : '', node.type, editor.locked ? (_jsx("span", { className: joinClasses(EDITOR_ICON, 'graph-editor-icon--lock', EDITOR_SPACING_MS_1), title: "Locked", "aria-hidden": true, children: "\uD83D\uDD12" })) : null, _jsx(PromptNodeIssueBadges, { issuesTotal: data.issuesTotal, issuesErrors: data.issuesErrors, issuesWarnings: data.issuesWarnings, issuesInfo: data.issuesInfo })] }) })] }), _jsx("div", { className: joinClasses(EDITOR_MUTED, EDITOR_TEXT_XS, EDITOR_FLEX_SHRINK_0), children: node.id.slice(0, 8) })] }) }));
 }

package/dist/nodes/PromptNodeIssueBadges.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PromptNodeIssueBadges.d.ts","sourceRoot":"","sources":["../../src/nodes/PromptNodeIssueBadges.tsx"],"names":[],"mappings":"AAAA,wBAAgB,qBAAqB,CAAC,EAClC,WAAW,EACX,YAAY,EACZ,cAAc,EACd,UAAU,GACb,EAAE,QAAQ,CAAC;IACR,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;CACtB,CAAC,sCAcD"}
+{"version":3,"file":"PromptNodeIssueBadges.d.ts","sourceRoot":"","sources":["../../src/nodes/PromptNodeIssueBadges.tsx"],"names":[],"mappings":"AAEA,wBAAgB,qBAAqB,CAAC,EAClC,WAAW,EACX,YAAY,EACZ,cAAc,EACd,UAAU,GACb,EAAE,QAAQ,CAAC;IACR,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;CACtB,CAAC,sCAgBD"}

package/dist/nodes/PromptNodeIssueBadges.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { EDITOR_SPACING_ME_1, EDITOR_SPACING_MS_2, editorBadgeToneClass } from '../ui/editorClasses.js';
 export function PromptNodeIssueBadges({ issuesTotal, issuesErrors, issuesWarnings, issuesInfo, }) {
     if (issuesTotal <= 0)
         return null;
-    return (_jsxs("span", { className: "ms-2", title: `${issuesErrors} errors, ${issuesWarnings} warnings, ${issuesInfo} info`, children: [issuesErrors > 0 ? _jsx("span", { className: "badge bg-danger me-1", children: issuesErrors }) : null, issuesWarnings > 0 ? (_jsx("span", { className: "badge bg-warning text-dark me-1", children: issuesWarnings })) : null, issuesInfo > 0 ? _jsx("span", { className: "badge bg-info text-dark", children: issuesInfo }) : null] }));
+    return (_jsxs("span", { className: EDITOR_SPACING_MS_2, title: `${issuesErrors} errors, ${issuesWarnings} warnings, ${issuesInfo} info`, children: [issuesErrors > 0 ? (_jsx("span", { className: `${editorBadgeToneClass('danger')} ${EDITOR_SPACING_ME_1}`, children: issuesErrors })) : null, issuesWarnings > 0 ? (_jsx("span", { className: `${editorBadgeToneClass('warning')} ${EDITOR_SPACING_ME_1}`, children: issuesWarnings })) : null, issuesInfo > 0 ? _jsx("span", { className: editorBadgeToneClass('info'), children: issuesInfo }) : null] }));
 }

package/dist/nodes/PromptNodeToolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PromptNodeToolbar.d.ts","sourceRoot":"","sources":["../../src/nodes/PromptNodeToolbar.tsx"],"names":[],"mappings":"AAEA,wBAAgB,iBAAiB,CAAC,EAC9B,MAAM,EACN,eAAe,EACf,YAAY,GACf,EAAE,QAAQ,CAAC;IACR,MAAM,EAAE,MAAM,CAAC;IACf,eAAe,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC,CAAC,+BA0BD"}
+{"version":3,"file":"PromptNodeToolbar.d.ts","sourceRoot":"","sources":["../../src/nodes/PromptNodeToolbar.tsx"],"names":[],"mappings":"AASA,wBAAgB,iBAAiB,CAAC,EAC9B,MAAM,EACN,eAAe,EACf,YAAY,GACf,EAAE,QAAQ,CAAC;IACR,MAAM,EAAE,MAAM,CAAC;IACf,eAAe,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC,CAAC,+BA8BD"}

package/dist/nodes/PromptNodeToolbar.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Position, NodeToolbar } from 'reactflow';
+import { EDITOR_BTN_GROUP, EDITOR_ICON, EDITOR_SR_ONLY, editorBtnToneClass, } from '../ui/editorClasses.js';
 export function PromptNodeToolbar({ nodeId, onDuplicateNode, onDeleteNode, }) {
-    return (_jsx(NodeToolbar, { isVisible: true, position: Position.Bottom, offset: 8, align: "start", children: _jsxs("fieldset", { className: "btn-group btn-group-sm shadow-sm border-0 p-0 m-0", children: [_jsx("legend", { className: "visually-hidden", children: "Node actions" }), _jsx("button", { type: "button", className: "btn btn-light border", title: "Duplicate node", "aria-label": "Duplicate node", onClick: () => onDuplicateNode(nodeId), children: _jsx("i", { className: "bi bi-files", "aria-hidden": true }) }), _jsx("button", { type: "button", className: "btn btn-light border text-danger", title: "Delete node", "aria-label": "Delete node", onClick: () => onDeleteNode(nodeId), children: _jsx("i", { className: "bi bi-trash", "aria-hidden": true }) })] }) }));
+    return (_jsx(NodeToolbar, { isVisible: true, position: Position.Bottom, offset: 8, align: "start", children: _jsxs("fieldset", { className: EDITOR_BTN_GROUP, children: [_jsx("legend", { className: EDITOR_SR_ONLY, children: "Node actions" }), _jsx("button", { type: "button", className: editorBtnToneClass('light'), title: "Duplicate node", "aria-label": "Duplicate node", onClick: () => onDuplicateNode(nodeId), children: _jsx("span", { className: EDITOR_ICON, "aria-hidden": true, children: "\u29C9" }) }), _jsx("button", { type: "button", className: editorBtnToneClass('danger'), title: "Delete node", "aria-label": "Delete node", onClick: () => onDeleteNode(nodeId), children: _jsx("span", { className: EDITOR_ICON, "aria-hidden": true, children: "\u2715" }) })] }) }));
 }

package/dist/ui/editorClasses.d.ts

@@ -0,0 +1,53 @@
+/** UI-kit agnostic canvas class hooks (aligned with @signalsafe/tree-spec-editor). */
+import { joinClasses } from '../utils/joinClasses.js';
+export { joinClasses };
+export declare const EDITOR_CARD = "graph-editor-card";
+export declare const EDITOR_CARD_HEADER = "graph-editor-card__header";
+export declare const EDITOR_CARD_BODY = "graph-editor-card__body";
+export declare const EDITOR_CARD_HEADER_MUTED = "graph-editor-card__header graph-editor-surface--muted";
+export declare const EDITOR_LIST = "graph-editor-list";
+export declare const EDITOR_LIST_FLUSH = "graph-editor-list graph-editor-list--flush";
+export declare const EDITOR_LIST_ITEM = "graph-editor-list__item";
+export declare const EDITOR_LIST_ITEM_EMPTY = "graph-editor-list__item graph-editor-list__item--empty";
+export declare const EDITOR_BTN = "graph-editor-btn";
+export declare const EDITOR_BTN_GROUP = "graph-editor-btn-group graph-editor-btn-group--sm";
+export declare const EDITOR_BADGE = "graph-editor-badge";
+export declare const EDITOR_DROPDOWN_MENU = "graph-editor-dropdown__menu";
+export declare const EDITOR_DROPDOWN_ITEM = "graph-editor-dropdown__item";
+export declare const EDITOR_FLEX = "graph-editor-flex";
+export declare const EDITOR_FLEX_BETWEEN = "graph-editor-flex graph-editor-flex--between";
+export declare const EDITOR_FLEX_ROW = "graph-editor-flex graph-editor-flex--row";
+export declare const EDITOR_FLEX_ALIGN_START = "graph-editor-flex graph-editor-flex--align-start";
+export declare const EDITOR_FLEX_ALIGN_CENTER = "graph-editor-flex graph-editor-flex--align-center";
+export declare const EDITOR_MIN_W_0 = "graph-editor-min-w-0";
+export declare const EDITOR_FLEX_SHRINK_0 = "graph-editor-flex-shrink-0";
+export declare const EDITOR_FLEX_GROW_1 = "graph-editor-flex-grow-1";
+export declare const EDITOR_OVERFLOW_HIDDEN = "graph-editor-overflow-hidden";
+export declare const EDITOR_W_FULL = "graph-editor-w-full";
+export declare const EDITOR_MUTED = "graph-editor-muted";
+export declare const EDITOR_TEXT_DANGER = "graph-editor-text--danger";
+export declare const EDITOR_TEXT_CENTER = "graph-editor-text--center";
+export declare const EDITOR_TEXT_START = "graph-editor-text--start";
+export declare const EDITOR_TEXT_BOLD = "graph-editor-text--bold";
+export declare const EDITOR_TEXT_XS = "graph-editor-text--xs";
+export declare const EDITOR_TEXT_SM = "graph-editor-text--sm";
+export declare const EDITOR_TEXT_MD = "graph-editor-text--md";
+export declare const EDITOR_SPACING_PY_2 = "graph-editor-spacing--py-2";
+export declare const EDITOR_SPACING_PX_2 = "graph-editor-spacing--px-2";
+export declare const EDITOR_SPACING_P_2 = "graph-editor-spacing--p-2";
+export declare const EDITOR_SPACING_GAP_1 = "graph-editor-spacing--gap-1";
+export declare const EDITOR_SPACING_GAP_2 = "graph-editor-spacing--gap-2";
+export declare const EDITOR_SPACING_MB_0 = "graph-editor-spacing--mb-0";
+export declare const EDITOR_SPACING_MS_1 = "graph-editor-spacing--ms-1";
+export declare const EDITOR_SPACING_MS_2 = "graph-editor-spacing--ms-2";
+export declare const EDITOR_SPACING_ME_1 = "graph-editor-spacing--me-1";
+export declare const EDITOR_SPACING_P_0 = "graph-editor-spacing--p-0";
+export declare const EDITOR_SPACING_M_0 = "graph-editor-spacing--m-0";
+export declare const EDITOR_ROUNDED = "graph-editor-rounded";
+export declare const EDITOR_SR_ONLY = "graph-editor-sr-only";
+export declare const EDITOR_ICON = "graph-editor-icon";
+export declare const EDITOR_CANVAS_ROOT = "graph-editor-canvas-root";
+export declare function editorBtnToneClass(variant?: string): string;
+export declare function editorBadgeToneClass(variant: 'danger' | 'warning' | 'info' | 'neutral'): string;
+export declare function editorDropdownItemClass(danger?: boolean): string;
+//# sourceMappingURL=editorClasses.d.ts.map

package/dist/ui/editorClasses.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"editorClasses.d.ts","sourceRoot":"","sources":["../../src/ui/editorClasses.ts"],"names":[],"mappings":"AAAA,sFAAsF;AAEtF,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtD,OAAO,EAAE,WAAW,EAAE,CAAC;AAEvB,eAAO,MAAM,WAAW,sBAAsB,CAAC;AAC/C,eAAO,MAAM,kBAAkB,8BAA8B,CAAC;AAC9D,eAAO,MAAM,gBAAgB,4BAA4B,CAAC;AAC1D,eAAO,MAAM,wBAAwB,0DAA0D,CAAC;AAEhG,eAAO,MAAM,WAAW,sBAAsB,CAAC;AAC/C,eAAO,MAAM,iBAAiB,+CAA+C,CAAC;AAC9E,eAAO,MAAM,gBAAgB,4BAA4B,CAAC;AAC1D,eAAO,MAAM,sBAAsB,2DAA2D,CAAC;AAE/F,eAAO,MAAM,UAAU,qBAAqB,CAAC;AAC7C,eAAO,MAAM,gBAAgB,sDAAsD,CAAC;AACpF,eAAO,MAAM,YAAY,uBAAuB,CAAC;AAEjD,eAAO,MAAM,oBAAoB,gCAAgC,CAAC;AAClE,eAAO,MAAM,oBAAoB,gCAAgC,CAAC;AAElE,eAAO,MAAM,WAAW,sBAAsB,CAAC;AAC/C,eAAO,MAAM,mBAAmB,iDAAiD,CAAC;AAClF,eAAO,MAAM,eAAe,6CAA6C,CAAC;AAC1E,eAAO,MAAM,uBAAuB,qDAAqD,CAAC;AAC1F,eAAO,MAAM,wBAAwB,sDAAsD,CAAC;AAC5F,eAAO,MAAM,cAAc,yBAAyB,CAAC;AACrD,eAAO,MAAM,oBAAoB,+BAA+B,CAAC;AACjE,eAAO,MAAM,kBAAkB,6BAA6B,CAAC;AAC7D,eAAO,MAAM,sBAAsB,iCAAiC,CAAC;AACrE,eAAO,MAAM,aAAa,wBAAwB,CAAC;AAEnD,eAAO,MAAM,YAAY,uBAAuB,CAAC;AACjD,eAAO,MAAM,kBAAkB,8BAA8B,CAAC;AAC9D,eAAO,MAAM,kBAAkB,8BAA8B,CAAC;AAC9D,eAAO,MAAM,iBAAiB,6BAA6B,CAAC;AAC5D,eAAO,MAAM,gBAAgB,4BAA4B,CAAC;AAC1D,eAAO,MAAM,cAAc,0BAA0B,CAAC;AACtD,eAAO,MAAM,cAAc,0BAA0B,CAAC;AACtD,eAAO,MAAM,cAAc,0BAA0B,CAAC;AAEtD,eAAO,MAAM,mBAAmB,+BAA+B,CAAC;AAChE,eAAO,MAAM,mBAAmB,+BAA+B,CAAC;AAChE,eAAO,MAAM,kBAAkB,8BAA8B,CAAC;AAC9D,eAAO,MAAM,oBAAoB,gCAAgC,CAAC;AAClE,eAAO,MAAM,oBAAoB,gCAAgC,CAAC;AAClE,eAAO,MAAM,mBAAmB,+BAA+B,CAAC;AAChE,eAAO,MAAM,mBAAmB,+BAA+B,CAAC;AAChE,eAAO,MAAM,mBAAmB,+BAA+B,CAAC;AAChE,eAAO,MAAM,mBAAmB,+BAA+B,CAAC;AAChE,eAAO,MAAM,kBAAkB,8BAA8B,CAAC;AAC9D,eAAO,MAAM,kBAAkB,8BAA8B,CAAC;AAE9D,eAAO,MAAM,cAAc,yBAAyB,CAAC;AACrD,eAAO,MAAM,cAAc,yBAAyB,CAAC;AACrD,eAAO,MAAM,WAAW,sBAAsB,CAAC;AAE/C,eAAO,MAAM,kBAAkB,6BAA6B,CAAC;AAE7D,wBAAgB,kBAAkB,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAG3D;AAED,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAE/F;AAED,wBAAgB,uBAAuB,CAAC,MAAM,CAAC,EAAE,OAAO,GAAG,MAAM,CAEhE"}

package/dist/ui/editorClasses.js

@@ -0,0 +1,69 @@
+/** UI-kit agnostic canvas class hooks (aligned with @signalsafe/tree-spec-editor). */
+import { joinClasses } from '../utils/joinClasses.js';
+export { joinClasses };
+export const EDITOR_CARD = 'graph-editor-card';
+export const EDITOR_CARD_HEADER = 'graph-editor-card__header';
+export const EDITOR_CARD_BODY = 'graph-editor-card__body';
+export const EDITOR_CARD_HEADER_MUTED = 'graph-editor-card__header graph-editor-surface--muted';
+export const EDITOR_LIST = 'graph-editor-list';
+export const EDITOR_LIST_FLUSH = 'graph-editor-list graph-editor-list--flush';
+export const EDITOR_LIST_ITEM = 'graph-editor-list__item';
+export const EDITOR_LIST_ITEM_EMPTY = 'graph-editor-list__item graph-editor-list__item--empty';
+export const EDITOR_BTN = 'graph-editor-btn';
+export const EDITOR_BTN_GROUP = 'graph-editor-btn-group graph-editor-btn-group--sm';
+export const EDITOR_BADGE = 'graph-editor-badge';
+export const EDITOR_DROPDOWN_MENU = 'graph-editor-dropdown__menu';
+export const EDITOR_DROPDOWN_ITEM = 'graph-editor-dropdown__item';
+export const EDITOR_FLEX = 'graph-editor-flex';
+export const EDITOR_FLEX_BETWEEN = 'graph-editor-flex graph-editor-flex--between';
+export const EDITOR_FLEX_ROW = 'graph-editor-flex graph-editor-flex--row';
+export const EDITOR_FLEX_ALIGN_START = 'graph-editor-flex graph-editor-flex--align-start';
+export const EDITOR_FLEX_ALIGN_CENTER = 'graph-editor-flex graph-editor-flex--align-center';
+export const EDITOR_MIN_W_0 = 'graph-editor-min-w-0';
+export const EDITOR_FLEX_SHRINK_0 = 'graph-editor-flex-shrink-0';
+export const EDITOR_FLEX_GROW_1 = 'graph-editor-flex-grow-1';
+export const EDITOR_OVERFLOW_HIDDEN = 'graph-editor-overflow-hidden';
+export const EDITOR_W_FULL = 'graph-editor-w-full';
+export const EDITOR_MUTED = 'graph-editor-muted';
+export const EDITOR_TEXT_DANGER = 'graph-editor-text--danger';
+export const EDITOR_TEXT_CENTER = 'graph-editor-text--center';
+export const EDITOR_TEXT_START = 'graph-editor-text--start';
+export const EDITOR_TEXT_BOLD = 'graph-editor-text--bold';
+export const EDITOR_TEXT_XS = 'graph-editor-text--xs';
+export const EDITOR_TEXT_SM = 'graph-editor-text--sm';
+export const EDITOR_TEXT_MD = 'graph-editor-text--md';
+export const EDITOR_SPACING_PY_2 = 'graph-editor-spacing--py-2';
+export const EDITOR_SPACING_PX_2 = 'graph-editor-spacing--px-2';
+export const EDITOR_SPACING_P_2 = 'graph-editor-spacing--p-2';
+export const EDITOR_SPACING_GAP_1 = 'graph-editor-spacing--gap-1';
+export const EDITOR_SPACING_GAP_2 = 'graph-editor-spacing--gap-2';
+export const EDITOR_SPACING_MB_0 = 'graph-editor-spacing--mb-0';
+export const EDITOR_SPACING_MS_1 = 'graph-editor-spacing--ms-1';
+export const EDITOR_SPACING_MS_2 = 'graph-editor-spacing--ms-2';
+export const EDITOR_SPACING_ME_1 = 'graph-editor-spacing--me-1';
+export const EDITOR_SPACING_P_0 = 'graph-editor-spacing--p-0';
+export const EDITOR_SPACING_M_0 = 'graph-editor-spacing--m-0';
+export const EDITOR_ROUNDED = 'graph-editor-rounded';
+export const EDITOR_SR_ONLY = 'graph-editor-sr-only';
+export const EDITOR_ICON = 'graph-editor-icon';
+export const EDITOR_CANVAS_ROOT = 'graph-editor-canvas-root';
+export function editorBtnToneClass(variant) {
+    const tone = normalizeBtnTone(variant);
+    return `${EDITOR_BTN} graph-editor-btn--${tone}`;
+}
+export function editorBadgeToneClass(variant) {
+    return `${EDITOR_BADGE} graph-editor-badge--${variant}`;
+}
+export function editorDropdownItemClass(danger) {
+    return joinClasses(EDITOR_DROPDOWN_ITEM, danger && 'graph-editor-dropdown__item--danger');
+}
+function normalizeBtnTone(variant) {
+    if (!variant)
+        return 'neutral';
+    const map = {
+        light: 'light',
+        danger: 'danger',
+        neutral: 'neutral',
+    };
+    return map[variant] ?? variant.replace(/^outline-/, '');
+}

package/docs/UI_KIT_AGNOSTIC_CANVAS.md

@@ -0,0 +1,65 @@
+# Canvas UI-kit agnostic styling
+
+**Package:** `@signalsafe/tree-spec-editor-react`  
+**Status:** Implemented (0.2.0+)
+
+---
+
+## Summary
+
+The React Flow canvas emits **semantic HTML** with stable **`graph-editor-*` class hooks**. It does **not** require Bootstrap CSS or Bootstrap Icons.
+
+**Host applications own styling.** Map `graph-editor-*` classes in your theme (DeliveryPlus, Tailwind, MUI, etc.) or override via the `className` prop on `TreeSpecGraphEditor`.
+
+Peer dependencies: `react`, `react-dom`, `reactflow` only.
+
+---
+
+## Class hooks
+
+Canvas nodes, choices, toolbars, and context menus use tokens from `src/ui/editorClasses.ts` and `src/canvas/constants.ts`:
+
+| Area | Example classes |
+|------|-----------------|
+| Canvas root | `graph-editor-canvas-root`, `graph-editor-canvas` |
+| Node card | `graph-editor-card`, `graph-editor-canvas-node`, `graph-editor-card__header`, `graph-editor-card__body` |
+| Selection | `graph-editor-canvas__selected`, `graph-editor-canvas-selected`, `graph-editor-canvas-choice-selected` |
+| Issue borders | `graph-editor-canvas-node--border-danger`, `graph-editor-canvas-node--border-warning` |
+| Lists / choices | `graph-editor-list`, `graph-editor-list__item`, `graph-editor-choice-row` |
+| Badges | `graph-editor-badge`, `graph-editor-badge--danger` / `--warning` / `--info` |
+| Toolbar | `graph-editor-btn-group`, `graph-editor-btn`, `graph-editor-btn--light` |
+| Context menu | `graph-editor-context-menu`, `graph-editor-dropdown__menu`, `graph-editor-dropdown__item` |
+| Handles | `graph-editor-target-handle`, `graph-editor-choice-handle` |
+
+Text wrap helpers from `@signalsafe/tree-spec-editor-core` already use `graph-editor-node-text-*` classes.
+
+---
+
+## Host override strategy
+
+1. **CSS bridge** — add host styles targeting `graph-editor-*` (recommended for DeliveryPlus migration).
+2. **`className` prop** — pass layout/sizing classes on `TreeSpecGraphEditor` (default is `graph-editor-canvas-root`).
+3. **Shell package** — `@signalsafe/tree-spec-editor` can map the same hooks to Bootstrap utilities in host SCSS.
+
+This package ships **no CSS file**; `sideEffects: ["**/*.css"]` applies only to the React Flow stylesheet import.
+
+---
+
+## Migration from 0.1.x
+
+| Before (0.1.x) | After (0.2.0) |
+|----------------|---------------|
+| `bg-primary-subtle` selection highlight | `graph-editor-canvas__selected` |
+| `border-warning` / `border-danger` | `graph-editor-canvas-node--border-warning` / `--border-danger` |
+| Bootstrap `card`, `list-group`, `btn`, `badge` | `graph-editor-card`, `graph-editor-list`, `graph-editor-btn`, `graph-editor-badge` |
+| Default `className="h-70vh border rounded"` | Default `className="graph-editor-canvas-root"` |
+| Bootstrap Icons (`bi bi-*`) | Unicode / `graph-editor-icon` spans |
+
+**Semver:** minor (0.2.0) — DOM class contract change; component props unchanged.
+
+---
+
+## Related packages
+
+- `@signalsafe/tree-spec-editor` — full authoring shell (UI-kit agnostic panels; host-owned Bootstrap optional)
+- `@signalsafe/tree-spec-editor-core` — headless model and layout helpers

package/package.json

@@ -1,8 +1,8 @@
 {
     "name": "@signalsafe/tree-spec-editor-react",
-    "version": "0.1.2",
+    "version": "0.2.0",
     "type": "module",
-    "description": "Headless React canvas for the SignalSafe TreeSpec graph editor (React Flow shell, no UI library).",
+    "description": "UI-kit agnostic React Flow canvas for the SignalSafe TreeSpec graph editor (no UI library).",
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -23,7 +23,9 @@
         "typescript",
         "signalsafe"
     ],
-    "sideEffects": false,
+    "sideEffects": [
+        "**/*.css"
+    ],
     "main": "./dist/index.js",
     "types": "./dist/index.d.ts",
     "exports": {
@@ -34,28 +36,33 @@
         }
     },
     "files": [
-        "dist",
-        "README.md",
-        "LICENSE"
+    "dist",
+    "README.md",
+    "LICENSE",
+    "docs"
     ],
     "engines": {
-        "node": ">=18"
+        "node": ">=22.12.0"
     },
+    "packageManager": "yarn@1.22.22",
     "publishConfig": {
         "access": "public"
     },
     "scripts": {
         "build": "tsc -p tsconfig.build.json",
+        "lint": "yarn typecheck",
         "typecheck": "tsc --noEmit",
         "pack:local": "npm pack --pack-destination ../../dist/reusable-npm",
+        "smoke:package": "node scripts/smoke-package.mjs",
         "prepublishOnly": "npm run build",
         "prepare": "npm run build",
         "test": "vitest run",
+        "test:coverage": "yarn test --coverage",
         "test:monorepo": "cd ../../frontend && yarn vitest run --config vitest.tree-spec-editor-react.config.ts"
     },
     "dependencies": {
-        "@signalsafe/tree-spec": "^0.3.1",
-        "@signalsafe/tree-spec-editor-core": "^0.1.2"
+        "@signalsafe/tree-spec": "^0.3.3",
+        "@signalsafe/tree-spec-editor-core": "^0.1.4"
     },
     "peerDependencies": {
         "react": "^18.0.0",
@@ -71,6 +78,7 @@
         "react-test-renderer": "^18.3.1",
         "reactflow": "^11.11.4",
         "typescript": "^5.4.2",
+        "@vitest/coverage-v8": "^3.2.4",
         "vitest": "^3.2.4"
     }
 }