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

package/README.md

@@ -1,64 +1,140 @@
 # @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) |
 
-## What this package owns
+## What this package does
 
-- **`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.
+- 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.
 
-## Canvas selection behavior
+## What this package does not do
 
-| 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 |
+- Sidebar panels, modals, toolbars, or Bootstrap 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.
 
-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.
+## Install
 
-## What lives elsewhere
+```bash
+npm install @signalsafe/tree-spec-editor-react @signalsafe/tree-spec-editor-core @signalsafe/tree-spec react react-dom reactflow
+```
 
-| 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` |
+### React Flow CSS (required)
 
-## Maintainer notes
+This package imports `reactflow/dist/style.css` from source. Bundlers treat it as a side effect (`sideEffects: ["**/*.css"]` in `package.json`).
 
-- **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).
+Ensure your app loads React Flow styles, for example:
 
-## Install
+```ts
+import "reactflow/dist/style.css";
+```
+
+If you use `@signalsafe/tree-spec-editor` (Bootstrap shell), the canvas still comes from this package — consumers may need the CSS import in the app entry when tree-shaking.
+
+## 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="h-[60vh] border rounded"
+        />
+    );
+}
+```
+
+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` |
+| Bootstrap 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
+
+`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) — full Bootstrap UI shell.

package/README.standalone.md

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

package/dist/TreeSpecGraphEditor.js

@@ -3,22 +3,22 @@ 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';
+import { GraphEditorCanvasContext, } from './GraphEditorCanvasContext.js';
+import { buildEdgeMarker, getIssueEdgeStyle, resolveSelectedEdgeStroke } from './canvas/edgeStyle.js';
+import { CANVAS_CLASS } from './canvas/constants.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 = 'h-70vh border rounded', readOnly = false, onDuplicateNode, onDeleteNode, onAutoLayout, contextualZoom = true, colorMode = 'light', }) {
     const rf = useReactFlow();
     const treeRef = useRef(tree);

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.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 { joinClasses } from '../utils/joinClasses.js';
 export function GraphCanvasContextMenu({ menu, readOnly, onClose, onDuplicateNode, onDeleteNode, onAutoLayout, }) {
     if (!menu || readOnly)
         return null;

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/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/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/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.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.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.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 { joinClasses } from '../utils/joinClasses.js';
 export function ChoiceCanvasRow({ nodeId, choice, choiceIndex, focusChoiceId, choiceTextClass, readOnly, }) {
     const { choiceDrag, choiceDropTarget, onSelectChoice, onChoiceDragStart, onChoiceDragEnd, onChoiceDragOver, onChoiceDrop, } = useGraphEditorCanvas();
     const isFocused = focusChoiceId === choice.id;

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_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 { joinClasses } from '../utils/joinClasses.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" })] })] }));
 }

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.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_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 { joinClasses } from '../utils/joinClasses.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 ?? [];

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.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 { joinClasses } from '../utils/joinClasses.js';
+import { ChoiceCanvasRow } from './ChoiceCanvasRow.js';
 export function PromptNodeChoicesList({ nodeId, choices, focusChoiceId, choiceTextClass, readOnly, choiceDrag, choiceDropTarget, onChoiceDragOver, onChoiceDrop, }) {
     const handleListDragOver = (event) => {
         if (readOnly || !choiceDrag)

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.js

@@ -1,6 +1,6 @@
 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 { 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) })] }) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@signalsafe/tree-spec-editor-react",
-    "version": "0.1.2",
+    "version": "0.1.3",
     "type": "module",
     "description": "Headless React canvas for the SignalSafe TreeSpec graph editor (React Flow shell, no UI library).",
     "license": "MIT",
@@ -23,7 +23,9 @@
         "typescript",
         "signalsafe"
     ],
-    "sideEffects": false,
+    "sideEffects": [
+        "**/*.css"
+    ],
     "main": "./dist/index.js",
     "types": "./dist/index.d.ts",
     "exports": {
@@ -41,6 +43,7 @@
     "engines": {
         "node": ">=18"
     },
+    "packageManager": "yarn@1.22.22",
     "publishConfig": {
         "access": "public"
     },
@@ -48,14 +51,15 @@
         "build": "tsc -p tsconfig.build.json",
         "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: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.2",
+        "@signalsafe/tree-spec-editor-core": "^0.1.3"
     },
     "peerDependencies": {
         "react": "^18.0.0",
@@ -71,6 +75,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"
     }
 }