@signalsafe/tree-spec-editor 0.1.2 → 0.2.1

package/dist/panels/AdvancedJsonPanel.d.ts

@@ -0,0 +1,27 @@
+import type { ReactNode } from 'react';
+export interface AdvancedJsonPanelProps {
+    /** The JSON editor (or any content) rendered inside the panel body. */
+    children: ReactNode;
+    /** Optional header title. Defaults to "Advanced JSON (read-only)". */
+    title?: string;
+    /** Optional muted subtitle line below the title. */
+    subtitle?: string;
+    /**
+     * Called when the user clicks the "Expand all" button. The button is rendered only when
+     * this callback is provided. Hosts typically wire this to a `JsonEditorHandle.expandAll()` ref.
+     */
+    onExpandAll?: () => void;
+    /**
+     * Called when the user clicks the "Compress all" button. The button is rendered only when
+     * this callback is provided. Hosts typically wire this to a `JsonEditorHandle.collapseAll()` ref.
+     */
+    onCollapseAll?: () => void;
+    /** Optional override for the expand button label (default "Expand all"). */
+    expandAllLabel?: string;
+    /** Optional override for the collapse button label (default "Compress all"). */
+    collapseAllLabel?: string;
+    /** Optional extra class names applied to the outer `card` element. */
+    className?: string;
+}
+export default function AdvancedJsonPanel({ children, title, subtitle, onExpandAll, onCollapseAll, expandAllLabel, collapseAllLabel, className, }: Readonly<AdvancedJsonPanelProps>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AdvancedJsonPanel.d.ts.map

package/dist/panels/AdvancedJsonPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdvancedJsonPanel.d.ts","sourceRoot":"","sources":["../../src/panels/AdvancedJsonPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,MAAM,WAAW,sBAAsB;IACnC,uEAAuE;IACvE,QAAQ,EAAE,SAAS,CAAC;IACpB,sEAAsE;IACtE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,4EAA4E;IAC5E,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gFAAgF;IAChF,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,sEAAsE;IACtE,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAID,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACtC,QAAQ,EACR,KAAqB,EACrB,QAAQ,EACR,WAAW,EACX,aAAa,EACb,cAA6B,EAC7B,gBAAiC,EACjC,SAAS,GACZ,EAAE,QAAQ,CAAC,sBAAsB,CAAC,2CAsClC"}

package/dist/panels/AdvancedJsonPanel.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Button } from 'react-bootstrap';
+import PanelHeaderCollapseCarets from '../lib/PanelHeaderCollapseCarets';
+const DEFAULT_TITLE = 'Advanced JSON (read-only)';
+export default function AdvancedJsonPanel({ children, title = DEFAULT_TITLE, subtitle, onExpandAll, onCollapseAll, expandAllLabel = 'Expand all', collapseAllLabel = 'Compress all', className, }) {
+    const [expanded, setExpanded] = useState(true);
+    const hasButtons = Boolean(onExpandAll) || Boolean(onCollapseAll);
+    const cardClassName = ['card', 'mt-3', className].filter(Boolean).join(' ');
+    return (_jsxs("div", { className: cardClassName, children: [_jsxs("div", { className: "card-header d-flex justify-content-between align-items-start gap-2 flex-wrap bg-body-secondary py-2 px-2", children: [_jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "d-flex align-items-center flex-wrap gap-1", children: [_jsx("span", { className: "fw-bold", children: title }), _jsx(PanelHeaderCollapseCarets, { expanded: expanded, onToggle: () => setExpanded((v) => !v) })] }), subtitle ? _jsx("div", { className: "text-muted font-size-12", children: subtitle }) : null] }), hasButtons ? (_jsxs("div", { className: "btn-group btn-group-sm flex-shrink-0 ms-auto", children: [onExpandAll ? (_jsx(Button, { type: "button", variant: "outline-secondary", onClick: onExpandAll, children: expandAllLabel })) : null, onCollapseAll ? (_jsx(Button, { type: "button", variant: "outline-secondary", onClick: onCollapseAll, children: collapseAllLabel })) : null] })) : null] }), _jsx("div", { className: `card-body p-0${expanded ? '' : ' d-none'}`, "aria-hidden": !expanded, children: children })] }));
+}

package/dist/panels/GraphEditorInfoPanel.d.ts

@@ -0,0 +1,20 @@
+import { type AutosaveStatus } from '@signalsafe/tree-spec-editor-core';
+export interface GraphEditorInfoPanelProps {
+    scenarioId: string;
+    versionId: string;
+    name: string;
+    createdAt: string | null;
+    updatedAt: string | null;
+    /** Whether this version is the published (read-only) revision. */
+    isPublished: boolean;
+    /** Autosave lifecycle state from the graph editor hook. */
+    autosaveStatus: AutosaveStatus;
+    /** Last validation time (ISO), or `null` if never validated in this session. */
+    lastValidatedAt: string | null;
+    /** Optional card header title. Defaults to "Info". */
+    title?: string;
+    /** Optional formatter for ISO timestamps. Defaults to `new Date(iso).toLocaleString()`. */
+    formatTimestamp?: (iso: string) => string;
+}
+export default function GraphEditorInfoPanel({ scenarioId, versionId, name, createdAt, updatedAt, isPublished, autosaveStatus, lastValidatedAt, title, formatTimestamp, }: Readonly<GraphEditorInfoPanelProps>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=GraphEditorInfoPanel.d.ts.map

package/dist/panels/GraphEditorInfoPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GraphEditorInfoPanel.d.ts","sourceRoot":"","sources":["../../src/panels/GraphEditorInfoPanel.tsx"],"names":[],"mappings":"AAKA,OAAO,EAA0B,KAAK,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAEhG,MAAM,WAAW,yBAAyB;IACtC,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,kEAAkE;IAClE,WAAW,EAAE,OAAO,CAAC;IACrB,2DAA2D;IAC3D,cAAc,EAAE,cAAc,CAAC;IAC/B,gFAAgF;IAChF,eAAe,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2FAA2F;IAC3F,eAAe,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;CAC7C;AA0BD,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EACzC,UAAU,EACV,SAAS,EACT,IAAI,EACJ,SAAS,EACT,SAAS,EACT,WAAW,EACX,cAAc,EACd,eAAe,EACf,KAAc,EACd,eAAwC,GAC3C,EAAE,QAAQ,CAAC,yBAAyB,CAAC,2CA4DrC"}

package/dist/panels/GraphEditorInfoPanel.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Badge, Table } from 'react-bootstrap';
+import PanelHeaderCollapseCarets from '../lib/PanelHeaderCollapseCarets';
+import { getAutosaveStatusLabel } from '@signalsafe/tree-spec-editor-core';
+function defaultFormatTimestamp(iso) {
+    return new Date(iso).toLocaleString();
+}
+function PropertyRow({ label, value }) {
+    return (_jsxs("tr", { children: [_jsx("td", { className: "align-top", children: _jsx("strong", { children: label }) }), _jsx("td", { children: value })] }));
+}
+const STATUS_DRAFT = 'Draft';
+const STATUS_PUBLISHED = 'Published (read-only)';
+function autosaveDisplay(isPublished, status) {
+    if (isPublished)
+        return '—';
+    const label = getAutosaveStatusLabel(status);
+    return label || '—';
+}
+export default function GraphEditorInfoPanel({ scenarioId, versionId, name, createdAt, updatedAt, isPublished, autosaveStatus, lastValidatedAt, title = 'Info', formatTimestamp = defaultFormatTimestamp, }) {
+    const [expanded, setExpanded] = useState(true);
+    return (_jsxs("div", { className: "card mb-3", children: [_jsx("div", { className: "card-header bg-body-secondary py-2 px-2", children: _jsxs("div", { className: "d-flex align-items-center flex-wrap gap-1", children: [_jsx("h5", { className: "mb-0", children: title }), _jsx(PanelHeaderCollapseCarets, { expanded: expanded, onToggle: () => setExpanded((v) => !v) })] }) }), _jsx("div", { className: `card-body p-0${expanded ? '' : ' d-none'}`, "aria-hidden": !expanded, children: _jsx(Table, { striped: true, bordered: true, hover: true, responsive: true, className: "m-0", children: _jsxs("tbody", { children: [_jsx(PropertyRow, { label: "Name", value: name }), _jsx(PropertyRow, { label: "Status", value: _jsx(Badge, { bg: isPublished ? 'success' : 'secondary', children: isPublished ? STATUS_PUBLISHED : STATUS_DRAFT }) }), _jsx(PropertyRow, { label: "Save state", value: _jsx("span", { className: "text-muted", children: autosaveDisplay(isPublished, autosaveStatus) }) }), _jsx(PropertyRow, { label: "Validated", value: _jsx("span", { className: "text-muted", children: lastValidatedAt
+                                        ? `Validated ${formatTimestamp(lastValidatedAt)}`
+                                        : 'Not validated' }) }), _jsx(PropertyRow, { label: "Scenario ID", value: _jsx("span", { className: "font-monospace small text-break", children: scenarioId }) }), _jsx(PropertyRow, { label: "Version ID", value: _jsx("span", { className: "font-monospace small text-break", children: versionId }) }), _jsx(PropertyRow, { label: "Created", value: createdAt ? formatTimestamp(createdAt) : '—' }), _jsx(PropertyRow, { label: "Updated", value: updatedAt ? formatTimestamp(updatedAt) : '—' })] }) }) })] }));
+}

package/dist/panels/InspectorPanel.d.ts

@@ -0,0 +1,79 @@
+/**
+ * Inspector panel for the TreeSpec graph editor.
+ *
+ * Renders a **Required** card (Type, Prompt, optional `renderExtraNodeFields`) and a **Choices**
+ * card (list-group rows with Label / Next / Outcome / delete). Hosts inject project-specific UI through optional render-prop slots:
+ *
+ *   - `outcomeOptions`: override the END-transition outcome `<select>` options
+ *     (default = the three canonical `TerminalOutcome` values from `@signalsafe/tree-spec`).
+ *   - `hideOutcomeField`: hide the outcome `<select>` entirely when the host manages outcomes
+ *     elsewhere.
+ *   - `renderExtraNodeFields`: render additional UI below the prompt textarea, scoped to the
+ *     currently-selected node.
+ *   - `renderExtraChoiceFields`: render additional UI below each choice card.
+ */
+import type { ReactNode } from 'react';
+import { type EditorChoice, type EditorNode, type EditorTransition, type EditorTree } from '@signalsafe/tree-spec-editor-core';
+/**
+ * Canonical outcome values from the `@signalsafe/tree-spec` wire contract.
+ * Hosts can override via the `outcomeOptions` prop.
+ */
+export declare const DEFAULT_OUTCOME_OPTIONS: ReadonlyArray<{
+    value: string;
+    label: string;
+}>;
+export interface InspectorNodeRenderContext {
+    tree: EditorTree;
+    node: EditorNode;
+    isPublished: boolean;
+    onUpdateNode: (patch: Partial<EditorNode>) => void;
+}
+export interface InspectorChoiceRenderContext {
+    tree: EditorTree;
+    node: EditorNode;
+    choice: EditorChoice;
+    transition: EditorTransition | undefined;
+    isPublished: boolean;
+    onUpdateNode: (patch: Partial<EditorNode>) => void;
+}
+export interface InspectorPanelProps {
+    tree: EditorTree;
+    selectedNode: EditorNode | null;
+    focusChoiceId?: string | null;
+    isPublished?: boolean;
+    onUpdateSelectedNode: (patch: Partial<EditorNode>) => void;
+    onAddChoice: () => void;
+    onDeleteChoice: (choiceId: string) => void;
+    onSetChoiceTarget: (choiceId: string, targetNodeId: string) => void;
+    onSetChoiceOutcome: (choiceId: string, outcome: string) => void;
+    /**
+     * Override the END-transition outcome `<select>` options.
+     * Defaults to the canonical TreeSpec `TerminalOutcome` values.
+     */
+    outcomeOptions?: ReadonlyArray<{
+        value: string;
+        label: string;
+    }>;
+    /** Hide the outcome selector entirely. Useful when the host manages outcomes elsewhere. */
+    hideOutcomeField?: boolean;
+    /** Render extra UI below the prompt textarea, scoped to the current node. */
+    renderExtraNodeFields?: (ctx: InspectorNodeRenderContext) => ReactNode;
+    /** Render extra UI below each choice card (after Next/Outcome). */
+    renderExtraChoiceFields?: (ctx: InspectorChoiceRenderContext) => ReactNode;
+    /**
+     * When set, shows a delete control in the Required card header (grid-style icon button).
+     * Typical host: `editor.actions.deleteSelectedNode`. Disabled when `isPublished` is true.
+     */
+    onDeleteSelectedNode?: () => void;
+    /** Override the Required card header (default "Required"). */
+    title?: string;
+    /** Override the empty-state message (default "Select a node to edit it."). */
+    emptyStateText?: string;
+    /**
+     * Override the muted helper text under the Type field.
+     * Defaults to: "Type is stored as a string in tree_spec. You can use presets or any custom value."
+     */
+    typeHelperText?: string;
+}
+export default function InspectorPanel({ tree, selectedNode, focusChoiceId, isPublished, onUpdateSelectedNode, onAddChoice, onDeleteChoice, onSetChoiceTarget, onSetChoiceOutcome, outcomeOptions, hideOutcomeField, renderExtraNodeFields, renderExtraChoiceFields, title, emptyStateText, typeHelperText, onDeleteSelectedNode, }: Readonly<InspectorPanelProps>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=InspectorPanel.d.ts.map

package/dist/panels/InspectorPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InspectorPanel.d.ts","sourceRoot":"","sources":["../../src/panels/InspectorPanel.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AACH,OAAO,KAAK,EAAe,SAAS,EAAE,MAAM,OAAO,CAAC;AAKpD,OAAO,EAIH,KAAK,YAAY,EACjB,KAAK,UAAU,EACf,KAAK,gBAAgB,EACrB,KAAK,UAAU,EAClB,MAAM,mCAAmC,CAAC;AAI3C;;;GAGG;AACH,eAAO,MAAM,uBAAuB,EAAE,aAAa,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAInF,CAAC;AAEF,MAAM,WAAW,0BAA0B;IACvC,IAAI,EAAE,UAAU,CAAC;IACjB,IAAI,EAAE,UAAU,CAAC;IACjB,WAAW,EAAE,OAAO,CAAC;IACrB,YAAY,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;CACtD;AAED,MAAM,WAAW,4BAA4B;IACzC,IAAI,EAAE,UAAU,CAAC;IACjB,IAAI,EAAE,UAAU,CAAC;IACjB,MAAM,EAAE,YAAY,CAAC;IACrB,UAAU,EAAE,gBAAgB,GAAG,SAAS,CAAC;IACzC,WAAW,EAAE,OAAO,CAAC;IACrB,YAAY,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;CACtD;AAED,MAAM,WAAW,mBAAmB;IAChC,IAAI,EAAE,UAAU,CAAC;IACjB,YAAY,EAAE,UAAU,GAAG,IAAI,CAAC;IAChC,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,oBAAoB,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;IAC3D,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,cAAc,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,iBAAiB,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IACpE,kBAAkB,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAEhE;;;OAGG;IACH,cAAc,CAAC,EAAE,aAAa,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACjE,2FAA2F;IAC3F,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,6EAA6E;IAC7E,qBAAqB,CAAC,EAAE,CAAC,GAAG,EAAE,0BAA0B,KAAK,SAAS,CAAC;IACvE,mEAAmE;IACnE,uBAAuB,CAAC,EAAE,CAAC,GAAG,EAAE,4BAA4B,KAAK,SAAS,CAAC;IAE3E;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;IAElC,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8EAA8E;IAC9E,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CAC3B;AAoPD,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACnC,IAAI,EACJ,YAAY,EACZ,aAAoB,EACpB,WAAmB,EACnB,oBAAoB,EACpB,WAAW,EACX,cAAc,EACd,iBAAiB,EACjB,kBAAkB,EAClB,cAAwC,EACxC,gBAAwB,EACxB,qBAAqB,EACrB,uBAAuB,EACvB,KAAkB,EAClB,cAA4C,EAC5C,cAAyC,EACzC,oBAAoB,GACvB,EAAE,QAAQ,CAAC,mBAAmB,CAAC,2CAkF/B"}

package/dist/panels/InspectorPanel.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Form } from 'react-bootstrap';
+import { TERMINAL_OUTCOME } from '@signalsafe/tree-spec';
+import { END_NODE_ID, getTransition, TREE_SPEC_NODE_TYPE_PRESETS, } from '@signalsafe/tree-spec-editor-core';
+import PanelHeaderCollapseCarets from '../lib/PanelHeaderCollapseCarets';
+/**
+ * Canonical outcome values from the `@signalsafe/tree-spec` wire contract.
+ * Hosts can override via the `outcomeOptions` prop.
+ */
+export const DEFAULT_OUTCOME_OPTIONS = [
+    { value: TERMINAL_OUTCOME.SAFE, label: TERMINAL_OUTCOME.SAFE },
+    { value: TERMINAL_OUTCOME.AT_RISK, label: TERMINAL_OUTCOME.AT_RISK },
+    { value: TERMINAL_OUTCOME.COMPROMISED, label: TERMINAL_OUTCOME.COMPROMISED },
+];
+const DEFAULT_TYPE_HELPER_TEXT = 'Type is stored as a string in tree_spec. You can use presets or any custom value.';
+function NodeTypeField({ selectedNode, isPublished, onUpdateSelectedNode, typeHelperText, }) {
+    const isPreset = TREE_SPEC_NODE_TYPE_PRESETS.includes(selectedNode.type);
+    return (_jsxs(Form.Group, { className: "mb-2", children: [_jsx(Form.Label, { children: "Type" }), _jsxs(Form.Select, { value: isPreset ? selectedNode.type : '__custom__', onChange: (e) => {
+                    const nextType = e.target.value;
+                    if (nextType === '__custom__')
+                        return;
+                    onUpdateSelectedNode({ type: nextType });
+                }, disabled: isPublished, children: [TREE_SPEC_NODE_TYPE_PRESETS.map((t) => (_jsx("option", { value: t, children: t }, t))), _jsx("option", { value: "__custom__", children: "custom\u2026" })] }), isPreset ? null : (_jsx(Form.Control, { className: "mt-2", value: selectedNode.type, onChange: (e) => onUpdateSelectedNode({ type: e.target.value }), placeholder: "Enter custom type\u2026", disabled: isPublished })), _jsx("div", { className: "text-muted mt-1 font-size-12", children: typeHelperText })] }));
+}
+function ChoiceEditorCard({ choice, tree, selectedNode, focusChoiceId, isPublished, onUpdateSelectedNode, onDeleteChoice, onSetChoiceTarget, onSetChoiceOutcome, outcomeOptions, hideOutcomeField, renderExtraChoiceFields, }) {
+    const transition = getTransition(tree, selectedNode.id, choice.id);
+    const targetNodeId = transition?.toNodeId ?? '';
+    const outcomeValue = transition?.outcome ?? outcomeOptions[0]?.value ?? '';
+    const isFocused = focusChoiceId === choice.id;
+    const showOutcome = !hideOutcomeField && targetNodeId === END_NODE_ID;
+    return (_jsxs("div", { id: `choice-editor-${selectedNode.id}-${choice.id}`, className: `list-group-item py-3 px-3${isFocused ? ' list-group-item-primary' : ''}`, children: [_jsxs("div", { className: "d-flex w-100 justify-content-between align-items-start gap-2 mb-2", children: [_jsx("h5", { className: `mb-0 text-uppercase fs-6 fw-semibold${isFocused ? '' : ' text-body-secondary'}`, children: choice.id }), _jsx("button", { type: "button", className: "btn p-0 border-0 bg-transparent flex-shrink-0", "aria-label": "Delete choice", title: "Delete choice", onClick: () => onDeleteChoice(choice.id), children: _jsx("i", { className: "bi bi-trash text-danger action-icon cursor-pointer", "aria-hidden": true }) })] }), _jsx(Form.Label, { className: "mt-0", children: "Label" }), _jsx(Form.Control, { value: choice.label, onChange: (event) => {
+                    const updatedChoices = (selectedNode.choices ?? []).map((existingChoice) => existingChoice.id === choice.id
+                        ? { ...existingChoice, label: event.target.value }
+                        : existingChoice);
+                    onUpdateSelectedNode({ choices: updatedChoices });
+                } }), _jsx(Form.Label, { className: "mt-2", children: "Next" }), _jsxs(Form.Select, { value: targetNodeId, onChange: (e) => onSetChoiceTarget(choice.id, e.target.value), children: [_jsx("option", { value: "", children: "(not connected)" }), Object.values(tree.nodes).map((n) => (_jsxs("option", { value: n.id, children: [n.id, " \u00B7 ", n.prompt?.slice(0, 40) || n.type] }, n.id))), _jsx("option", { value: END_NODE_ID, children: "END" })] }), showOutcome ? (_jsxs(_Fragment, { children: [_jsx(Form.Label, { className: "mt-2", children: "Outcome" }), _jsx(Form.Select, { value: outcomeValue, onChange: (e) => onSetChoiceOutcome(choice.id, e.target.value), children: outcomeOptions.map((opt) => (_jsx("option", { value: opt.value, children: opt.label }, opt.value))) })] })) : null, renderExtraChoiceFields
+                ? renderExtraChoiceFields({
+                    tree,
+                    node: selectedNode,
+                    choice,
+                    transition,
+                    isPublished,
+                    onUpdateNode: onUpdateSelectedNode,
+                })
+                : null] }));
+}
+function ChoiceEditorList({ tree, selectedNode, focusChoiceId, isPublished, onAddChoice, onUpdateSelectedNode, onDeleteChoice, onSetChoiceTarget, onSetChoiceOutcome, outcomeOptions, hideOutcomeField, renderExtraChoiceFields, }) {
+    const choices = selectedNode.choices ?? [];
+    const [choicesExpanded, setChoicesExpanded] = useState(true);
+    return (_jsxs("div", { className: "card mt-3", children: [_jsxs("div", { className: "card-header bg-body-secondary py-2 px-2 d-flex justify-content-between align-items-center gap-2", children: [_jsxs("div", { className: "d-flex align-items-center min-w-0", children: [_jsx("span", { className: "fw-semibold", children: "Choices" }), _jsx(PanelHeaderCollapseCarets, { expanded: choicesExpanded, onToggle: () => setChoicesExpanded((v) => !v) })] }), _jsx("button", { type: "button", className: "btn p-0 border-0 bg-transparent flex-shrink-0", "aria-label": "Add choice", title: "Add choice", onClick: onAddChoice, children: _jsx("i", { className: "bi bi-plus-lg text-primary action-icon cursor-pointer", "aria-hidden": true }) })] }), _jsx("div", { className: `card-body p-0${choicesExpanded ? '' : ' d-none'}`, "aria-hidden": !choicesExpanded, children: choices.length === 0 ? (_jsx("div", { className: "text-muted small py-3 px-3", children: _jsx("em", { children: "No choices" }) })) : (_jsx("div", { className: "list-group list-group-flush", children: choices.map((choice) => (_jsx(ChoiceEditorCard, { choice: choice, tree: tree, selectedNode: selectedNode, focusChoiceId: focusChoiceId, isPublished: isPublished, onUpdateSelectedNode: onUpdateSelectedNode, onDeleteChoice: onDeleteChoice, onSetChoiceTarget: onSetChoiceTarget, onSetChoiceOutcome: onSetChoiceOutcome, outcomeOptions: outcomeOptions, hideOutcomeField: hideOutcomeField, renderExtraChoiceFields: renderExtraChoiceFields }, choice.id))) })) })] }));
+}
+export default function InspectorPanel({ tree, selectedNode, focusChoiceId = null, isPublished = false, onUpdateSelectedNode, onAddChoice, onDeleteChoice, onSetChoiceTarget, onSetChoiceOutcome, outcomeOptions = DEFAULT_OUTCOME_OPTIONS, hideOutcomeField = false, renderExtraNodeFields, renderExtraChoiceFields, title = 'Required', emptyStateText = 'Select a node to edit it.', typeHelperText = DEFAULT_TYPE_HELPER_TEXT, onDeleteSelectedNode, }) {
+    const [requiredExpanded, setRequiredExpanded] = useState(true);
+    return (_jsx("div", { children: selectedNode ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "card", children: [_jsxs("div", { className: "card-header bg-body-secondary py-2 px-2 d-flex justify-content-between align-items-center gap-2", children: [_jsxs("div", { className: "d-flex align-items-center min-w-0", children: [_jsx("span", { className: "fw-semibold", children: title }), _jsx(PanelHeaderCollapseCarets, { expanded: requiredExpanded, onToggle: () => setRequiredExpanded((v) => !v) })] }), onDeleteSelectedNode ? (_jsx("button", { type: "button", className: "btn p-0 border-0 bg-transparent flex-shrink-0", "aria-label": "Delete node", title: "Delete node", disabled: isPublished, onClick: onDeleteSelectedNode, children: _jsx("i", { className: `bi bi-trash action-icon cursor-pointer${isPublished ? ' text-secondary opacity-50' : ' text-danger'}`, "aria-hidden": true }) })) : null] }), _jsxs("div", { className: `card-body${requiredExpanded ? '' : ' d-none'}`, "aria-hidden": !requiredExpanded, children: [_jsx(NodeTypeField, { selectedNode: selectedNode, isPublished: isPublished, onUpdateSelectedNode: onUpdateSelectedNode, typeHelperText: typeHelperText }), _jsxs(Form.Group, { className: "mb-2", children: [_jsx(Form.Label, { children: "Prompt" }), _jsx(Form.Control, { as: "textarea", rows: 4, value: selectedNode.prompt, onChange: (e) => onUpdateSelectedNode({ prompt: e.target.value }) })] }), renderExtraNodeFields
+                                    ? renderExtraNodeFields({
+                                        tree,
+                                        node: selectedNode,
+                                        isPublished,
+                                        onUpdateNode: onUpdateSelectedNode,
+                                    })
+                                    : null] })] }), _jsx(ChoiceEditorList, { tree: tree, selectedNode: selectedNode, focusChoiceId: focusChoiceId, isPublished: isPublished, onAddChoice: onAddChoice, onUpdateSelectedNode: onUpdateSelectedNode, onDeleteChoice: onDeleteChoice, onSetChoiceTarget: onSetChoiceTarget, onSetChoiceOutcome: onSetChoiceOutcome, outcomeOptions: outcomeOptions, hideOutcomeField: hideOutcomeField, renderExtraChoiceFields: renderExtraChoiceFields })] })) : (_jsx("div", { className: "text-muted", children: _jsx("em", { children: emptyStateText }) })) }));
+}

package/dist/panels/IssuesPanel.d.ts

@@ -0,0 +1,33 @@
+import type { TreeSpecIssue } from '@signalsafe/tree-spec';
+import { type EditorTree } from '@signalsafe/tree-spec-editor-core';
+export interface IssuesPanelProps {
+    issues: TreeSpecIssue[];
+    lastValidatedAt: string | null;
+    onSelectIssue: (issue: TreeSpecIssue) => void;
+    /**
+     * Search text for filtering the list (same pattern as {@link NodesPanelProps.nodeSearch}).
+     */
+    issueSearch: string;
+    /** Called when the user edits the issues search field. */
+    onIssueSearchChange: (value: string) => void;
+    /**
+     * When set, each issue row header shows **node id**, **type** (from `tree.nodes`), and a
+     * severity **badge** on the right (same header rhythm as **NodesPanel**). Omit when you do
+     * not have a tree in scope; type falls back to **—**.
+     */
+    tree?: EditorTree;
+    /** Optional override for the card header title. Defaults to "Issues". */
+    title?: string;
+    /** Optional placeholder for the search field. Defaults to "Search issues…". */
+    searchPlaceholder?: string;
+    /** Optional formatter for the validated-at timestamp. Defaults to `new Date(iso).toLocaleString()`. */
+    formatTimestamp?: (iso: string) => string;
+    /**
+     * When `false`, the "Validated …" / "Not validated" summary is not shown in
+     * this card header (e.g. when the host shows it in an info panel instead).
+     * Default: `true`.
+     */
+    showValidationSummaryInHeader?: boolean;
+}
+export default function IssuesPanel({ issues, lastValidatedAt, onSelectIssue, issueSearch, onIssueSearchChange, tree, title, searchPlaceholder, formatTimestamp, showValidationSummaryInHeader, }: Readonly<IssuesPanelProps>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=IssuesPanel.d.ts.map

package/dist/panels/IssuesPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IssuesPanel.d.ts","sourceRoot":"","sources":["../../src/panels/IssuesPanel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAE3D,OAAO,EAAsB,KAAK,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAKxF,MAAM,WAAW,gBAAgB;IAC7B,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB,eAAe,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,aAAa,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC9C;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB,0DAA0D;IAC1D,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,yEAAyE;IACzE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+EAA+E;IAC/E,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,uGAAuG;IACvG,eAAe,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IAC1C;;;;OAIG;IACH,6BAA6B,CAAC,EAAE,OAAO,CAAC;CAC3C;AA4BD,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAChC,MAAM,EACN,eAAe,EACf,aAAa,EACb,WAAW,EACX,mBAAmB,EACnB,IAAI,EACJ,KAAgB,EAChB,iBAAyC,EACzC,eAAwC,EACxC,6BAAoC,GACvC,EAAE,QAAQ,CAAC,gBAAgB,CAAC,2CAmG5B"}

package/dist/panels/IssuesPanel.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { Form } from 'react-bootstrap';
+import { buildStableEntries } from '@signalsafe/tree-spec-editor-core';
+import { getIssueSeverityBadgeClass } from '../lib/panelHelpers';
+import PanelHeaderCollapseCarets from '../lib/PanelHeaderCollapseCarets';
+function defaultFormatTimestamp(iso) {
+    return new Date(iso).toLocaleString();
+}
+function nodeTypeLabel(tree, nodeId) {
+    if (!nodeId || !tree?.nodes[nodeId])
+        return '—';
+    return tree.nodes[nodeId]?.type || 'unknown';
+}
+function issueHeaderTitle(issue, typeLabel) {
+    const idPart = issue.node_id ?? '—';
+    return `${idPart}, ${typeLabel}`;
+}
+function issueMatchesQuery(issue, qLower, tree) {
+    if (!qLower)
+        return true;
+    const parts = [
+        issue.severity,
+        issue.message,
+        issue.node_id ?? '',
+        issue.choice_id ?? '',
+        nodeTypeLabel(tree, issue.node_id),
+    ];
+    return parts.some((p) => p.toLowerCase().includes(qLower));
+}
+export default function IssuesPanel({ issues, lastValidatedAt, onSelectIssue, issueSearch, onIssueSearchChange, tree, title = 'Issues', searchPlaceholder = 'Search issues\u2026', formatTimestamp = defaultFormatTimestamp, showValidationSummaryInHeader = true, }) {
+    const [expanded, setExpanded] = useState(true);
+    const qLower = issueSearch.trim().toLowerCase();
+    const filteredIssues = useMemo(() => issues.filter((issue) => issueMatchesQuery(issue, qLower, tree)), [issues, qLower, tree]);
+    const issueEntries = buildStableEntries(filteredIssues, (issue) => `${issue.severity}-${issue.node_id ?? ''}-${issue.message}`);
+    return (_jsxs("div", { className: "card", children: [_jsxs("div", { className: "card-header bg-body-secondary py-2 px-2 d-flex justify-content-between align-items-center gap-2", children: [_jsxs("div", { className: "d-flex align-items-center min-w-0", children: [_jsx("span", { className: "fw-semibold", children: title }), _jsx(PanelHeaderCollapseCarets, { expanded: expanded, onToggle: () => setExpanded((v) => !v) })] }), showValidationSummaryInHeader ? (_jsx("span", { className: "text-muted font-size-12 text-end flex-shrink-0", children: lastValidatedAt ? `Validated ${formatTimestamp(lastValidatedAt)}` : 'Not validated' })) : null] }), _jsx("div", { className: `card-body p-0${expanded ? '' : ' d-none'}`, "aria-hidden": !expanded, children: issues.length === 0 ? (_jsx("div", { className: "list-group list-group-flush", children: _jsx("div", { className: "list-group-item text-muted small py-2 px-3 border-0", children: _jsx("em", { children: "No issues" }) }) })) : (_jsxs(_Fragment, { children: [_jsx(Form.Control, { className: "rounded-0 border-0 border-bottom shadow-none", placeholder: searchPlaceholder, value: issueSearch, onChange: (e) => onIssueSearchChange(e.target.value) }), _jsx("div", { className: "overflow-auto-max-h-320", children: issueEntries.length === 0 ? (_jsx("div", { className: "list-group list-group-flush", children: _jsx("div", { className: "list-group-item text-muted small py-2 px-3 border-0", children: _jsx("em", { children: "No matching issues." }) }) })) : (_jsx("div", { className: "list-group list-group-flush", children: issueEntries.map(({ item: issue, key }) => {
+                                    const typeLabel = nodeTypeLabel(tree, issue.node_id);
+                                    const headerTitle = issueHeaderTitle(issue, typeLabel);
+                                    return (_jsxs("button", { type: "button", className: "list-group-item list-group-item-action px-3 py-2 text-start w-100", onClick: () => onSelectIssue(issue), children: [_jsxs("div", { className: "d-flex w-100 justify-content-between align-items-center gap-2 mb-1", children: [_jsxs("div", { className: "min-w-0 flex-grow-1 text-truncate text-start", title: headerTitle, children: [_jsx("span", { className: "fs-6 fw-semibold text-uppercase", children: issue.node_id ?? '—' }), _jsx("span", { className: "fs-6 text-uppercase text-body-secondary", children: `, ${typeLabel}` })] }), _jsx("span", { className: `badge flex-shrink-0 text-uppercase ${getIssueSeverityBadgeClass(issue.severity)}`, children: issue.severity })] }), _jsx("p", { className: "mb-1 small text-truncate font-monospace", style: { minWidth: 0 }, children: issue.message }), issue.choice_id ? (_jsx("small", { className: "text-body-secondary", children: issue.choice_id })) : null] }, key));
+                                }) })) })] })) })] }));
+}

package/dist/panels/NodesPanel.d.ts

@@ -0,0 +1,28 @@
+import { type EditorTree, type GraphSelection } from '@signalsafe/tree-spec-editor-core';
+export interface NodesPanelProps {
+    tree: EditorTree;
+    nodeSearch: string;
+    selection: GraphSelection;
+    showMiniMap: boolean;
+    onNodeSearchChange: (value: string) => void;
+    onNodeSelect: (nodeId: string) => void;
+    onShowMiniMapChange: (checked: boolean) => void;
+    /** Optional placeholder text for the search input. */
+    searchPlaceholder?: string;
+    /** Optional tip text shown below the node list. */
+    tipText?: string;
+    /**
+     * When set, shows an add-node control in the card header (grid-style icon button).
+     * Typical host: `() => { void editor.actions.addNodeOfType('prompt'); }`.
+     */
+    onAddNode?: () => void;
+    /**
+     * When set, each node row shows a delete icon; invoke to remove that node id (e.g.
+     * `editor.actions.deleteNodeById`). Disabled when `isPublished` is true.
+     */
+    onDeleteNode?: (nodeId: string) => void;
+    /** When true, node delete controls are disabled (read-only published revision). */
+    isPublished?: boolean;
+}
+export default function NodesPanel({ tree, nodeSearch, selection, showMiniMap, onNodeSearchChange, onNodeSelect, onShowMiniMapChange, searchPlaceholder, tipText, onAddNode, onDeleteNode, isPublished, }: Readonly<NodesPanelProps>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=NodesPanel.d.ts.map

package/dist/panels/NodesPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NodesPanel.d.ts","sourceRoot":"","sources":["../../src/panels/NodesPanel.tsx"],"names":[],"mappings":"AAIA,OAAO,EAIH,KAAK,UAAU,EACf,KAAK,cAAc,EACtB,MAAM,mCAAmC,CAAC;AAI3C,MAAM,WAAW,eAAe;IAC5B,IAAI,EAAE,UAAU,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,cAAc,CAAC;IAC1B,WAAW,EAAE,OAAO,CAAC;IACrB,kBAAkB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,mBAAmB,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD,sDAAsD;IACtD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,mDAAmD;IACnD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,mFAAmF;IACnF,WAAW,CAAC,EAAE,OAAO,CAAC;CACzB;AA0BD,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAC/B,IAAI,EACJ,UAAU,EACV,SAAS,EACT,WAAW,EACX,kBAAkB,EAClB,YAAY,EACZ,mBAAmB,EACnB,iBAAwC,EACxC,OAA0B,EAC1B,SAAS,EACT,YAAY,EACZ,WAAmB,GACtB,EAAE,QAAQ,CAAC,eAAe,CAAC,2CAqI3B"}

package/dist/panels/NodesPanel.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Form } from 'react-bootstrap';
+import { GRAPH_SELECTION_KIND, TREE_SPEC_NODE_TYPE_PRESETS, } from '@signalsafe/tree-spec-editor-core';
+import PanelHeaderCollapseCarets from '../lib/PanelHeaderCollapseCarets';
+const DEFAULT_TIP_TEXT = 'Tip: connect choices by dragging the blue dots. Shortcuts: \u2318S save, \u2318\u21E7V validate, \u2318D duplicate, Del delete.';
+const TYPE_SORT_ORDER = new Map(TREE_SPEC_NODE_TYPE_PRESETS.map((t, i) => [t, i]));
+function choiceLine(n) {
+    const count = n.choices?.length ?? 0;
+    if (count === 0)
+        return 'No choices';
+    if (count === 1)
+        return '1 choice';
+    return `${count} choices`;
+}
+function compareNodesByTypeThenId(a, b) {
+    const ta = a.type || 'unknown';
+    const tb = b.type || 'unknown';
+    const oa = TYPE_SORT_ORDER.has(ta) ? TYPE_SORT_ORDER.get(ta) : 1000;
+    const ob = TYPE_SORT_ORDER.has(tb) ? TYPE_SORT_ORDER.get(tb) : 1000;
+    if (oa !== ob)
+        return oa - ob;
+    if (ta !== tb)
+        return ta.localeCompare(tb);
+    return a.id.localeCompare(b.id);
+}
+export default function NodesPanel({ tree, nodeSearch, selection, showMiniMap, onNodeSearchChange, onNodeSelect, onShowMiniMapChange, searchPlaceholder = 'Search nodes\u2026', tipText = DEFAULT_TIP_TEXT, onAddNode, onDeleteNode, isPublished = false, }) {
+    const [expanded, setExpanded] = useState(true);
+    const filteredNodes = Object.values(tree.nodes)
+        .filter((n) => {
+        const q = nodeSearch.trim().toLowerCase();
+        if (!q)
+            return true;
+        const hitPrompt = (n.prompt || '').toLowerCase().includes(q);
+        const hitId = n.id.toLowerCase().includes(q);
+        const hitType = (n.type || '').toLowerCase().includes(q);
+        const hitChoices = (n.choices ?? []).some((c) => (c.label || '').toLowerCase().includes(q) || c.id.toLowerCase().includes(q));
+        return hitPrompt || hitId || hitType || hitChoices;
+    })
+        .sort(compareNodesByTypeThenId);
+    return (_jsxs("div", { className: "card mt-3", children: [_jsxs("div", { className: "card-header bg-body-secondary py-2 px-2 d-flex justify-content-between align-items-center gap-2", children: [_jsxs("div", { className: "d-flex align-items-center min-w-0", children: [_jsx("span", { className: "fw-semibold", children: "Nodes" }), _jsx(PanelHeaderCollapseCarets, { expanded: expanded, onToggle: () => setExpanded((v) => !v) })] }), onAddNode ? (_jsx("button", { type: "button", className: "btn p-0 border-0 bg-transparent flex-shrink-0", "aria-label": "Add node", title: "Add node", onClick: onAddNode, children: _jsx("i", { className: "bi bi-plus-lg text-primary action-icon cursor-pointer", "aria-hidden": true }) })) : null] }), _jsxs("div", { className: expanded ? undefined : 'd-none', "aria-hidden": !expanded, children: [_jsx(Form.Control, { className: "rounded-0 border-0 border-bottom shadow-none", placeholder: searchPlaceholder, value: nodeSearch, onChange: (e) => onNodeSearchChange(e.target.value) }), _jsx("div", { className: "overflow-auto-max-h-320", children: filteredNodes.length === 0 ? (_jsx("div", { className: "list-group list-group-flush", children: _jsx("div", { className: "list-group-item text-muted small py-2 px-3", children: "No matching nodes." }) })) : (_jsx("div", { className: "list-group list-group-flush", children: filteredNodes.map((n) => {
+                                const isSelected = selection.kind === GRAPH_SELECTION_KIND.NODE && selection.id === n.id;
+                                const typeLabel = n.type || 'unknown';
+                                const mutedTop = isSelected ? '' : ' text-body-secondary';
+                                const mutedMeta = isSelected ? 'opacity-75' : 'text-body-secondary';
+                                return (_jsx("div", { className: `list-group-item px-3 py-2${isSelected ? ' active' : ''}`, "aria-current": isSelected ? 'true' : undefined, children: _jsxs("div", { className: "d-flex w-100 justify-content-between align-items-start gap-2", children: [_jsxs("button", { type: "button", className: "btn p-0 border-0 bg-transparent flex-grow-1 text-start", onClick: () => onNodeSelect(n.id), children: [_jsx("div", { className: "d-flex w-100 justify-content-between align-items-center gap-2 mb-1", children: _jsxs("div", { className: "min-w-0 flex-grow-1 text-truncate text-start", title: `${n.id}, ${typeLabel}`, children: [_jsx("span", { className: `fs-6 fw-semibold text-uppercase${mutedTop}`, children: n.id }), _jsx("span", { className: `fs-6 text-uppercase ${isSelected ? 'opacity-75' : 'text-body-secondary'}`, children: `, ${typeLabel}` })] }) }), _jsx("p", { className: "mb-1 small text-truncate", style: { minWidth: 0 }, children: n.prompt || '(empty)' }), _jsx("small", { className: mutedMeta, children: choiceLine(n) })] }), onDeleteNode ? (_jsx("button", { type: "button", className: "btn p-0 border-0 bg-transparent flex-shrink-0", "aria-label": `Delete node ${n.id}`, title: "Delete node", disabled: isPublished, onClick: () => onDeleteNode(n.id), children: _jsx("i", { className: `bi bi-trash action-icon cursor-pointer${isPublished ? ' text-secondary opacity-50' : ' text-danger'}`, "aria-hidden": true }) })) : null] }) }, n.id));
+                            }) })) }), _jsx("div", { className: "card-footer p-2 border-top", children: _jsxs("div", { className: "d-flex justify-content-between align-items-center", children: [_jsx("div", { className: "text-muted font-size-12", children: tipText }), _jsx(Form.Check, { type: "switch", id: "showMiniMapToggle", label: "Mini-map", checked: showMiniMap, onChange: (e) => onShowMiniMapChange(e.target.checked), className: "font-size-12" })] }) })] })] }));
+}

package/dist/panels/SelectedEdgePanel.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Compact read-only display of the currently selected transition.
+ * Returns `null` when no edge is selected, so the host can render it unconditionally.
+ */
+import type { ReactNode } from 'react';
+import type { EditorTransition } from '@signalsafe/tree-spec-editor-core';
+export interface SelectedEdgePanelProps {
+    selectedEdge: EditorTransition | null;
+    /** Override the card title (default "Selected Edge"). */
+    title?: string;
+    /**
+     * Optional custom renderer for the edge details line. Defaults to
+     * `from \u00b7 choice \u2192 to`.
+     */
+    renderDetails?: (edge: EditorTransition) => ReactNode;
+}
+export default function SelectedEdgePanel({ selectedEdge, title, renderDetails, }: Readonly<SelectedEdgePanelProps>): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=SelectedEdgePanel.d.ts.map

package/dist/panels/SelectedEdgePanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectedEdgePanel.d.ts","sourceRoot":"","sources":["../../src/panels/SelectedEdgePanel.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAE1E,MAAM,WAAW,sBAAsB;IACnC,YAAY,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACtC,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,gBAAgB,KAAK,SAAS,CAAC;CACzD;AAUD,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACtC,YAAY,EACZ,KAAuB,EACvB,aAAoC,GACvC,EAAE,QAAQ,CAAC,sBAAsB,CAAC,kDAWlC"}

package/dist/panels/SelectedEdgePanel.js

@@ -0,0 +1,9 @@
+import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+function defaultRenderDetails(edge) {
+    return (_jsxs(_Fragment, { children: [edge.fromNodeId, " \u00B7 ", edge.fromChoiceId, " \u2192 ", edge.toNodeId] }));
+}
+export default function SelectedEdgePanel({ selectedEdge, title = 'Selected Edge', renderDetails = defaultRenderDetails, }) {
+    if (!selectedEdge)
+        return null;
+    return (_jsx("div", { className: "card mt-3", children: _jsxs("div", { className: "card-body", children: [_jsx("div", { className: "fw-bold", children: title }), _jsx("div", { className: "text-muted font-size-12", children: renderDetails(selectedEdge) })] }) }));
+}

package/dist/panels/ToolbarPanel.d.ts

@@ -0,0 +1,88 @@
+/**
+ * Data-driven toolbar for the TreeSpec graph editor (and similar editor pages).
+ *
+ * Hosts pass an array of `ToolbarItem`s describing the visual elements they want in
+ * the toolbar — buttons, dropdowns, badges, plain text, or arbitrary custom render
+ * functions. The package owns layout (wrap, gap, alignment) and Bootstrap chrome;
+ * the host owns every label, disabled rule, adapter-gated visibility, and callback
+ * (encoded as closures inside each item).
+ *
+ * The `custom` item kind exists for one-offs like router-aware links — that way
+ * the package stays free of `react-router` (or any other) routing concerns.
+ */
+import { type ReactNode } from 'react';
+/**
+ * Discriminator values used by the `kind` field on every {@link ToolbarItem}.
+ * Use these constants instead of bare string literals (e.g.
+ * `{ kind: TOOLBAR_ITEM_KIND.BUTTON, ... }`).
+ */
+export declare const TOOLBAR_ITEM_KIND: {
+    readonly BUTTON: "button";
+    readonly DROPDOWN: "dropdown";
+    readonly BADGE: "badge";
+    readonly TEXT: "text";
+    readonly CUSTOM: "custom";
+};
+/** Allowed toolbar item kinds. Derived from {@link TOOLBAR_ITEM_KIND}. */
+export type ToolbarItemKind = (typeof TOOLBAR_ITEM_KIND)[keyof typeof TOOLBAR_ITEM_KIND];
+export interface ToolbarButtonItem {
+    kind: typeof TOOLBAR_ITEM_KIND.BUTTON;
+    /** Optional stable id used as the React key (otherwise list index is used). */
+    id?: string;
+    label: ReactNode;
+    onClick: () => void;
+    /** Bootstrap variant. Default: `"outline-secondary"`. */
+    variant?: string;
+    disabled?: boolean;
+    title?: string;
+    className?: string;
+}
+/** Single row inside a `ToolbarDropdownItem`. */
+export interface ToolbarDropdownEntry {
+    /** Optional stable id used as the React key (otherwise list index is used). */
+    id?: string;
+    label: ReactNode;
+    onClick?: () => void;
+    disabled?: boolean;
+    /** When true, render a `<Dropdown.Divider />` and ignore label/onClick. */
+    divider?: boolean;
+}
+export interface ToolbarDropdownItem {
+    kind: typeof TOOLBAR_ITEM_KIND.DROPDOWN;
+    id?: string;
+    label: ReactNode;
+    entries: ToolbarDropdownEntry[];
+    /** Bootstrap variant for the toggle. Default: `"outline-secondary"`. */
+    variant?: string;
+    disabled?: boolean;
+    className?: string;
+}
+export interface ToolbarBadgeItem {
+    kind: typeof TOOLBAR_ITEM_KIND.BADGE;
+    id?: string;
+    label: ReactNode;
+    /** Bootstrap badge variant (e.g. `"success"`, `"secondary"`). Default: `"secondary"`. */
+    variant?: string;
+    className?: string;
+}
+export interface ToolbarTextItem {
+    kind: typeof TOOLBAR_ITEM_KIND.TEXT;
+    id?: string;
+    content: ReactNode;
+    /** Override the default `"ms-2 text-muted font-size-12"` styling. */
+    className?: string;
+}
+export interface ToolbarCustomItem {
+    kind: typeof TOOLBAR_ITEM_KIND.CUSTOM;
+    id?: string;
+    /** Render any node. Use for project-specific elements (e.g. router-aware links). */
+    render: () => ReactNode;
+}
+export type ToolbarItem = ToolbarButtonItem | ToolbarDropdownItem | ToolbarBadgeItem | ToolbarTextItem | ToolbarCustomItem;
+export interface ToolbarPanelProps {
+    items: ToolbarItem[];
+    /** Override the outer wrapper className. Default: `"d-flex gap-2 align-items-center flex-wrap"`. */
+    className?: string;
+}
+export default function ToolbarPanel({ items, className, }: Readonly<ToolbarPanelProps>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ToolbarPanel.d.ts.map

package/dist/panels/ToolbarPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarPanel.d.ts","sourceRoot":"","sources":["../../src/panels/ToolbarPanel.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGjD;;;;GAIG;AACH,eAAO,MAAM,iBAAiB;;;;;;CAMpB,CAAC;AAEX,0EAA0E;AAC1E,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,OAAO,iBAAiB,CAAC,CAAC;AAEzF,MAAM,WAAW,iBAAiB;IAC9B,IAAI,EAAE,OAAO,iBAAiB,CAAC,MAAM,CAAC;IACtC,+EAA+E;IAC/E,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,yDAAyD;IACzD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,iDAAiD;AACjD,MAAM,WAAW,oBAAoB;IACjC,+EAA+E;IAC/E,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2EAA2E;IAC3E,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,mBAAmB;IAChC,IAAI,EAAE,OAAO,iBAAiB,CAAC,QAAQ,CAAC;IACxC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,EAAE,oBAAoB,EAAE,CAAC;IAChC,wEAAwE;IACxE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,gBAAgB;IAC7B,IAAI,EAAE,OAAO,iBAAiB,CAAC,KAAK,CAAC;IACrC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,SAAS,CAAC;IACjB,yFAAyF;IACzF,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,eAAe;IAC5B,IAAI,EAAE,OAAO,iBAAiB,CAAC,IAAI,CAAC;IACpC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,SAAS,CAAC;IACnB,qEAAqE;IACrE,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,iBAAiB;IAC9B,IAAI,EAAE,OAAO,iBAAiB,CAAC,MAAM,CAAC;IACtC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,oFAAoF;IACpF,MAAM,EAAE,MAAM,SAAS,CAAC;CAC3B;AAED,MAAM,MAAM,WAAW,GACjB,iBAAiB,GACjB,mBAAmB,GACnB,gBAAgB,GAChB,eAAe,GACf,iBAAiB,CAAC;AAExB,MAAM,WAAW,iBAAiB;IAC9B,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,oGAAoG;IACpG,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAyED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACjC,KAAK,EACL,SAAiC,GACpC,EAAE,QAAQ,CAAC,iBAAiB,CAAC,2CAQ7B"}

package/dist/panels/ToolbarPanel.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Data-driven toolbar for the TreeSpec graph editor (and similar editor pages).
+ *
+ * Hosts pass an array of `ToolbarItem`s describing the visual elements they want in
+ * the toolbar — buttons, dropdowns, badges, plain text, or arbitrary custom render
+ * functions. The package owns layout (wrap, gap, alignment) and Bootstrap chrome;
+ * the host owns every label, disabled rule, adapter-gated visibility, and callback
+ * (encoded as closures inside each item).
+ *
+ * The `custom` item kind exists for one-offs like router-aware links — that way
+ * the package stays free of `react-router` (or any other) routing concerns.
+ */
+import { Fragment } from 'react';
+import { Button, Dropdown } from 'react-bootstrap';
+/**
+ * Discriminator values used by the `kind` field on every {@link ToolbarItem}.
+ * Use these constants instead of bare string literals (e.g.
+ * `{ kind: TOOLBAR_ITEM_KIND.BUTTON, ... }`).
+ */
+export const TOOLBAR_ITEM_KIND = {
+    BUTTON: 'button',
+    DROPDOWN: 'dropdown',
+    BADGE: 'badge',
+    TEXT: 'text',
+    CUSTOM: 'custom',
+};
+const DEFAULT_BUTTON_VARIANT = 'outline-secondary';
+const DEFAULT_DROPDOWN_VARIANT = 'outline-secondary';
+const DEFAULT_BADGE_VARIANT = 'secondary';
+const DEFAULT_TEXT_CLASS = 'ms-2 text-muted font-size-12';
+const DEFAULT_WRAPPER_CLASS = 'd-flex gap-2 align-items-center flex-wrap';
+function renderItem(item) {
+    switch (item.kind) {
+        case TOOLBAR_ITEM_KIND.BUTTON:
+            return (_jsx(Button, { variant: item.variant ?? DEFAULT_BUTTON_VARIANT, onClick: item.onClick, disabled: item.disabled, title: item.title, className: item.className, children: item.label }));
+        case TOOLBAR_ITEM_KIND.DROPDOWN:
+            return (_jsxs(Dropdown, { className: item.className ?? 'd-inline', children: [_jsx(Dropdown.Toggle, { variant: item.variant ?? DEFAULT_DROPDOWN_VARIANT, disabled: item.disabled, children: item.label }), _jsx(Dropdown.Menu, { children: item.entries.map((entry, idx) => {
+                            const entryKey = entry.id ?? `entry-${idx}`;
+                            if (entry.divider) {
+                                return _jsx(Dropdown.Divider, {}, entryKey);
+                            }
+                            return (_jsx(Dropdown.Item, { onClick: entry.onClick, disabled: entry.disabled, children: entry.label }, entryKey));
+                        }) })] }));
+        case TOOLBAR_ITEM_KIND.BADGE:
+            return (_jsx("span", { className: item.className ?? `badge bg-${item.variant ?? DEFAULT_BADGE_VARIANT}`, children: item.label }));
+        case TOOLBAR_ITEM_KIND.TEXT:
+            return (_jsx("span", { className: item.className ?? DEFAULT_TEXT_CLASS, children: item.content }));
+        case TOOLBAR_ITEM_KIND.CUSTOM:
+            return item.render();
+        default: {
+            const exhaustive = item;
+            return exhaustive;
+        }
+    }
+}
+export default function ToolbarPanel({ items, className = DEFAULT_WRAPPER_CLASS, }) {
+    return (_jsx("div", { className: className, children: items.map((item, idx) => (_jsx(Fragment, { children: renderItem(item) }, item.id ?? `item-${idx}`))) }));
+}