@signalsafe/tree-spec-editor 0.2.1 → 0.2.2

package/dist/panels/AppearancePanel.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { getTransition, } from '@signalsafe/tree-spec-editor-core';
+import PanelHeaderCollapseCarets from '../lib/PanelHeaderCollapseCarets';
+import { PanelNodeLink } from '../lib/panelNodeLink';
+import ChoiceEdgeAppearanceFields from './ChoiceEdgeAppearanceFields';
+function resolveActiveChoiceId(choices, selectedEdge, focusChoiceId) {
+    if (selectedEdge)
+        return selectedEdge.fromChoiceId;
+    const ids = (choices ?? []).map((choice) => choice.id);
+    if (focusChoiceId && ids.includes(focusChoiceId))
+        return focusChoiceId;
+    return null;
+}
+const EDGE_APPEARANCE_HELPER = 'Canvas only (not shown in preview or training)';
+function EdgeContextBreadcrumb({ fromNodeId, choiceId, toNodeId, onNodeSelect, }) {
+    return (_jsxs("div", { className: "text-muted font-size-12 mb-3", children: [_jsx(PanelNodeLink, { nodeId: fromNodeId, onNodeSelect: onNodeSelect }), ' · ', choiceId, ' → ', toNodeId ? _jsx(PanelNodeLink, { nodeId: toNodeId, onNodeSelect: onNodeSelect }) : '(not connected)'] }));
+}
+function EdgeAppearanceSection({ choice, isPublished, onPatch, }) {
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "text-muted small mb-2", children: EDGE_APPEARANCE_HELPER }), _jsx("div", { className: "small fw-semibold mb-2", children: "Edge appearance" }), _jsx(ChoiceEdgeAppearanceFields, { variant: "embedded", choice: choice, isPublished: isPublished, onPatch: onPatch })] }));
+}
+function appearancePanelBodyClassName(hasSelection, expanded) {
+    if (hasSelection && !expanded) {
+        return 'card-body d-none';
+    }
+    return 'card-body';
+}
+function deriveAppearancePanelViewState({ tree, selectedNode, selectedEdge, focusChoiceId, onUpdateChoiceEdgeHints, }) {
+    const edgeFocused = Boolean(selectedEdge);
+    const contextNode = selectedNode ??
+        (selectedEdge ? tree.nodes[selectedEdge.fromNodeId] ?? null : null);
+    const choices = contextNode?.choices ?? [];
+    const activeChoiceId = resolveActiveChoiceId(choices, selectedEdge, focusChoiceId);
+    const activeChoice = activeChoiceId
+        ? choices.find((choice) => choice.id === activeChoiceId) ?? null
+        : null;
+    const choiceFocused = Boolean(focusChoiceId &&
+        !edgeFocused &&
+        selectedNode &&
+        choices.some((choice) => choice.id === focusChoiceId));
+    const edgeAppearanceMode = edgeFocused || choiceFocused;
+    const showEdgeAppearance = Boolean(onUpdateChoiceEdgeHints && contextNode && activeChoice && edgeAppearanceMode);
+    const showNodeAppearance = Boolean(contextNode && !edgeAppearanceMode);
+    const hasSelection = Boolean(selectedNode || selectedEdge);
+    const edgeFromNodeId = selectedEdge?.fromNodeId ?? (choiceFocused ? selectedNode?.id ?? null : null);
+    const edgeToNodeId = selectedEdge?.toNodeId ??
+        (edgeFromNodeId && activeChoiceId
+            ? getTransition(tree, edgeFromNodeId, activeChoiceId)?.toNodeId ?? null
+            : null);
+    return {
+        contextNode,
+        activeChoiceId,
+        activeChoice,
+        showEdgeAppearance,
+        showNodeAppearance,
+        hasSelection,
+        edgeFromNodeId,
+        edgeToNodeId,
+    };
+}
+export default function AppearancePanel({ tree, selectedNode, selectedEdge = null, focusChoiceId = null, isPublished = false, onUpdateSelectedNode, renderAppearanceFields, onUpdateChoiceEdgeHints, onNodeSelect, title = 'Appearance', emptyStateText = 'Select a node or edge to edit appearance.', helperText = 'Canvas node only (not shown in preview or training)', }) {
+    const [expanded, setExpanded] = useState(true);
+    const { contextNode, activeChoiceId, activeChoice, showEdgeAppearance, showNodeAppearance, hasSelection, edgeFromNodeId, edgeToNodeId, } = deriveAppearancePanelViewState({
+        tree,
+        selectedNode,
+        selectedEdge,
+        focusChoiceId,
+        onUpdateChoiceEdgeHints,
+    });
+    return (_jsxs("div", { className: "card mt-3", children: [_jsxs("div", { className: "card-header bg-body-secondary py-2 px-2 d-flex align-items-center min-w-0", children: [_jsx("span", { className: "fw-semibold", children: title }), hasSelection ? (_jsx(PanelHeaderCollapseCarets, { expanded: expanded, onToggle: () => setExpanded((v) => !v) })) : null] }), _jsx("div", { className: appearancePanelBodyClassName(hasSelection, expanded), "aria-hidden": Boolean(hasSelection && !expanded), children: hasSelection && contextNode ? (_jsxs(_Fragment, { children: [showNodeAppearance ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "text-muted small mb-2", children: helperText }), renderAppearanceFields({
+                                    tree,
+                                    node: contextNode,
+                                    isPublished,
+                                    onUpdateNode: onUpdateSelectedNode,
+                                })] })) : null, showEdgeAppearance && edgeFromNodeId && activeChoiceId && activeChoice ? (_jsxs(_Fragment, { children: [_jsx(EdgeContextBreadcrumb, { fromNodeId: edgeFromNodeId, choiceId: activeChoiceId, toNodeId: edgeToNodeId, onNodeSelect: onNodeSelect }), _jsx(EdgeAppearanceSection, { choice: activeChoice, isPublished: isPublished, onPatch: (patch) => onUpdateChoiceEdgeHints(contextNode.id, activeChoice.id, patch) })] })) : null] })) : (_jsx("div", { className: "text-muted", children: _jsx("em", { children: emptyStateText }) })) })] }));
+}

package/dist/panels/ChoiceEdgeAppearanceFields.d.ts

@@ -0,0 +1,10 @@
+import { type ChoiceEdgeHints, type EditorChoice } from '@signalsafe/tree-spec-editor-core';
+export interface ChoiceEdgeAppearanceFieldsProps {
+    choice: EditorChoice;
+    isPublished?: boolean;
+    onPatch: (patch: Partial<ChoiceEdgeHints>) => void;
+    /** Standalone adds a section border/title for embedding under choice cards. */
+    variant?: 'standalone' | 'embedded';
+}
+export default function ChoiceEdgeAppearanceFields({ choice, isPublished, onPatch, variant, }: Readonly<ChoiceEdgeAppearanceFieldsProps>): import("react").JSX.Element;
+//# sourceMappingURL=ChoiceEdgeAppearanceFields.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChoiceEdgeAppearanceFields.d.ts","sourceRoot":"","sources":["../../src/panels/ChoiceEdgeAppearanceFields.tsx"],"names":[],"mappings":"AAGA,OAAO,EAIH,KAAK,eAAe,EACpB,KAAK,YAAY,EACpB,MAAM,mCAAmC,CAAC;AAE3C,MAAM,WAAW,+BAA+B;IAC5C,MAAM,EAAE,YAAY,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC;IACnD,+EAA+E;IAC/E,OAAO,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACvC;AAED,MAAM,CAAC,OAAO,UAAU,0BAA0B,CAAC,EAC/C,MAAM,EACN,WAAmB,EACnB,OAAO,EACP,OAAsB,GACzB,EAAE,QAAQ,CAAC,+BAA+B,CAAC,+BAqE3C"}

package/dist/panels/ChoiceEdgeAppearanceFields.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Form } from 'react-bootstrap';
+import { EDITOR_EDGE_TYPE_OPTIONS, getChoiceEdgeHints, resolveEdgeStrokeColorForDisplay, } from '@signalsafe/tree-spec-editor-core';
+export default function ChoiceEdgeAppearanceFields({ choice, isPublished = false, onPatch, variant = 'standalone', }) {
+    const hints = getChoiceEdgeHints(choice);
+    const fields = (_jsxs(_Fragment, { children: [_jsx(Form.Check, { type: "switch", id: `choice-edge-show-label-${choice.id}`, className: "mb-2", label: "Show label on canvas", checked: hints.showLabel !== false, disabled: isPublished, onChange: (event) => onPatch({ showLabel: event.target.checked }) }), _jsxs(Form.Group, { className: "mb-2", children: [_jsx(Form.Label, { className: "small mb-1", children: "Stroke color" }), _jsxs("div", { className: "d-flex gap-2 align-items-center", children: [_jsx(Form.Control, { type: "color", className: "graph-editor-appearance-color-input", value: resolveEdgeStrokeColorForDisplay(choice), disabled: isPublished, onChange: (event) => onPatch({ strokeColor: event.target.value }) }), _jsx("button", { type: "button", className: "btn btn-sm btn-outline-secondary", disabled: isPublished || hints.strokeColor === undefined, onClick: () => onPatch({ strokeColor: undefined }), children: "Reset" })] })] }), _jsxs(Form.Group, { className: "mb-0", children: [_jsx(Form.Label, { className: "small mb-1", children: "Edge type" }), _jsx(Form.Select, { value: hints.edgeType ?? 'default', disabled: isPublished, onChange: (event) => onPatch({
+                            edgeType: event.target.value,
+                        }), children: EDITOR_EDGE_TYPE_OPTIONS.map((option) => (_jsx("option", { value: option.value ?? 'default', children: option.label }, option.value ?? 'default'))) })] })] }));
+    if (variant === 'embedded') {
+        return fields;
+    }
+    return (_jsxs("div", { className: "mt-3 pt-2 border-top", children: [_jsx("div", { className: "small fw-semibold mb-2", children: "Edge appearance (canvas only)" }), fields] }));
+}

package/dist/panels/ChoiceTemplatesPanel.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Preset choice bundles for quick insertion into a node.
+ * Exported for custom host layouts; not yet wired in the reference graph editor page.
+ * Pair with `appendChoiceTemplate` from `@signalsafe/tree-spec-editor-core`.
+ */
+/** Host-provided preset choice bundle (optional stable ids per choice). */
+export type ChoiceTemplateItem = {
+    id: string;
+    label: string;
+    choices: ReadonlyArray<{
+        label: string;
+        id?: string;
+    }>;
+};
+/** Host-provided single choice preset (stable id + default label). */
+export type ChoicePresetItem = {
+    id: string;
+    label: string;
+};
+export interface ChoiceTemplatesPanelProps {
+    templates: ReadonlyArray<ChoiceTemplateItem>;
+    selectedNodeId: string | null;
+    isPublished?: boolean;
+    onApplyTemplate: (template: ChoiceTemplateItem) => void;
+}
+export default function ChoiceTemplatesPanel({ templates, selectedNodeId, isPublished, onApplyTemplate, }: Readonly<ChoiceTemplatesPanelProps>): import("react").JSX.Element;
+//# sourceMappingURL=ChoiceTemplatesPanel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChoiceTemplatesPanel.d.ts","sourceRoot":"","sources":["../../src/panels/ChoiceTemplatesPanel.tsx"],"names":[],"mappings":"AAKA;;;;GAIG;AACH,2EAA2E;AAC3E,MAAM,MAAM,kBAAkB,GAAG;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,aAAa,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,EAAE,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CAC1D,CAAC;AAEF,sEAAsE;AACtE,MAAM,MAAM,gBAAgB,GAAG;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,WAAW,yBAAyB;IACtC,SAAS,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;IAC7C,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,EAAE,CAAC,QAAQ,EAAE,kBAAkB,KAAK,IAAI,CAAC;CAC3D;AAED,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EACzC,SAAS,EACT,cAAc,EACd,WAAmB,EACnB,eAAe,GAClB,EAAE,QAAQ,CAAC,yBAAyB,CAAC,+BAiCrC"}

package/dist/panels/ChoiceTemplatesPanel.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Button, Card } from 'react-bootstrap';
+import PanelHeaderCollapseCarets from '../lib/PanelHeaderCollapseCarets';
+export default function ChoiceTemplatesPanel({ templates, selectedNodeId, isPublished = false, onApplyTemplate, }) {
+    const [expanded, setExpanded] = useState(true);
+    const disabled = isPublished || !selectedNodeId;
+    return (_jsxs(Card, { className: "mb-3", children: [_jsxs(Card.Header, { className: "d-flex align-items-center justify-content-between py-2", children: [_jsx("span", { className: "fw-semibold", children: "Choice templates" }), _jsx(PanelHeaderCollapseCarets, { expanded: expanded, onToggle: () => setExpanded((value) => !value) })] }), _jsx("div", { className: `card-body py-2${expanded ? '' : ' d-none'}`, "aria-hidden": !expanded, children: selectedNodeId ? (_jsx("div", { className: "d-flex flex-wrap gap-2", children: templates.map((template) => (_jsx(Button, { type: "button", size: "sm", variant: "outline-secondary", disabled: disabled, title: template.choices.map((choice) => choice.label).join(' · '), onClick: () => onApplyTemplate(template), children: template.label }, template.id))) })) : (_jsx("p", { className: "text-muted small mb-0", children: "Select a node to add preset choices." })) })] }));
+}

package/dist/panels/GraphEditorInfoPanel.d.ts

@@ -1,4 +1,4 @@
-import { type AutosaveStatus } from '@signalsafe/tree-spec-editor-core';
+import { type AutosaveStatus, type GraphEditorEdgeType } from '@signalsafe/tree-spec-editor-core';
 export interface GraphEditorInfoPanelProps {
     scenarioId: string;
     versionId: string;
@@ -15,6 +15,9 @@ export interface GraphEditorInfoPanelProps {
     title?: string;
     /** Optional formatter for ISO timestamps. Defaults to `new Date(iso).toLocaleString()`. */
     formatTimestamp?: (iso: string) => string;
+    /** Scenario-level default edge routing when a choice uses Default. */
+    defaultEdgeType?: GraphEditorEdgeType;
+    onUpdateDefaultEdgeType?: (edgeType: GraphEditorEdgeType) => void;
 }
-export default function GraphEditorInfoPanel({ scenarioId, versionId, name, createdAt, updatedAt, isPublished, autosaveStatus, lastValidatedAt, title, formatTimestamp, }: Readonly<GraphEditorInfoPanelProps>): import("react/jsx-runtime").JSX.Element;
+export default function GraphEditorInfoPanel({ scenarioId, versionId, name, createdAt, updatedAt, isPublished, autosaveStatus, lastValidatedAt, title, formatTimestamp, defaultEdgeType, onUpdateDefaultEdgeType, }: Readonly<GraphEditorInfoPanelProps>): import("react").JSX.Element;
 //# sourceMappingURL=GraphEditorInfoPanel.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"GraphEditorInfoPanel.d.ts","sourceRoot":"","sources":["../../src/panels/GraphEditorInfoPanel.tsx"],"names":[],"mappings":"AAKA,OAAO,EAGH,KAAK,cAAc,EACnB,KAAK,mBAAmB,EAC3B,MAAM,mCAAmC,CAAC;AAE3C,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;IAC1C,sEAAsE;IACtE,eAAe,CAAC,EAAE,mBAAmB,CAAC;IACtC,uBAAuB,CAAC,EAAE,CAAC,QAAQ,EAAE,mBAAmB,KAAK,IAAI,CAAC;CACrE;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,EACxC,eAA8B,EAC9B,uBAAuB,GAC1B,EAAE,QAAQ,CAAC,yBAAyB,CAAC,+BAsFrC"}

package/dist/panels/GraphEditorInfoPanel.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { Badge, Table } from 'react-bootstrap';
+import { Badge, Form, Table } from 'react-bootstrap';
 import PanelHeaderCollapseCarets from '../lib/PanelHeaderCollapseCarets';
-import { getAutosaveStatusLabel } from '@signalsafe/tree-spec-editor-core';
+import { EDITOR_EDGE_TYPE_OPTIONS, getAutosaveStatusLabel, } from '@signalsafe/tree-spec-editor-core';
 function defaultFormatTimestamp(iso) {
     return new Date(iso).toLocaleString();
 }
@@ -17,9 +17,9 @@ function autosaveDisplay(isPublished, status) {
     const label = getAutosaveStatusLabel(status);
     return label || '—';
 }
-export default function GraphEditorInfoPanel({ scenarioId, versionId, name, createdAt, updatedAt, isPublished, autosaveStatus, lastValidatedAt, title = 'Info', formatTimestamp = defaultFormatTimestamp, }) {
+export default function GraphEditorInfoPanel({ scenarioId, versionId, name, createdAt, updatedAt, isPublished, autosaveStatus, lastValidatedAt, title = 'Info', formatTimestamp = defaultFormatTimestamp, defaultEdgeType = 'smoothstep', onUpdateDefaultEdgeType, }) {
     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) : '—' })] }) }) })] }));
+    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) })] }) }), _jsxs("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) : '—' })] }) }), onUpdateDefaultEdgeType ? (_jsxs("div", { className: "p-3 border-top", children: [_jsx("div", { className: "small fw-semibold mb-2", children: "Global" }), _jsxs(Form.Group, { className: "mb-0", children: [_jsx(Form.Label, { className: "small mb-1", children: "Scenario default edge type" }), _jsx(Form.Select, { value: defaultEdgeType, disabled: isPublished, onChange: (event) => onUpdateDefaultEdgeType(event.target.value), children: EDITOR_EDGE_TYPE_OPTIONS.filter((option) => option.value !== 'default').map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value))) }), _jsx("div", { className: "text-muted small mt-1", children: "Used when a choice edge type is set to Default." })] })] })) : null] })] }));
 }

package/dist/panels/InspectorPanel.d.ts

@@ -1,79 +1,4 @@
-/**
- * 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;
+import { type InspectorPanelProps } from './inspector/types';
+export { DEFAULT_OUTCOME_OPTIONS, type ChoiceTypeOption, type InspectorChoiceRenderContext, type InspectorNodeRenderContext, type InspectorPanelProps, } from './inspector/types';
+export default function InspectorPanel({ tree, selectedNode, focusChoiceId, isPublished, onUpdateSelectedNode, onAddChoice, onDeleteChoice, onMoveChoice, onSetChoiceTarget, onSetChoiceOutcome, outcomeOptions, hideOutcomeField, renderExtraNodeFields, renderExtraChoiceFields, choiceTypes, onSetChoiceType, title, emptyStateText, typeHelperText, onDeleteSelectedNode, onFocusChoice, }: Readonly<InspectorPanelProps>): import("react").JSX.Element;
 //# sourceMappingURL=InspectorPanel.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"InspectorPanel.d.ts","sourceRoot":"","sources":["../../src/panels/InspectorPanel.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAGH,KAAK,mBAAmB,EAC3B,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EACH,uBAAuB,EACvB,KAAK,gBAAgB,EACrB,KAAK,4BAA4B,EACjC,KAAK,0BAA0B,EAC/B,KAAK,mBAAmB,GAC3B,MAAM,mBAAmB,CAAC;AAE3B,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACnC,IAAI,EACJ,YAAY,EACZ,aAAoB,EACpB,WAAmB,EACnB,oBAAoB,EACpB,WAAW,EACX,cAAc,EACd,YAAY,EACZ,iBAAiB,EACjB,kBAAkB,EAClB,cAAwC,EACxC,gBAAwB,EACxB,qBAAqB,EACrB,uBAAuB,EACvB,WAAW,EACX,eAAe,EACf,KAAkB,EAClB,cAA4C,EAC5C,cAAyC,EACzC,oBAAoB,EACpB,aAAa,GAChB,EAAE,QAAQ,CAAC,mBAAmB,CAAC,+BAuC/B"}

package/dist/panels/InspectorPanel.js

@@ -1,63 +1,23 @@
-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';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * Canonical outcome values from the `@signalsafe/tree-spec` wire contract.
- * Hosts can override via the `outcomeOptions` prop.
+ * 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.
+ *   - `choiceTypes` / `onSetChoiceType`: host-defined choice type catalog (stable ids).
  */
-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 }) })) }));
+import ChoiceEditorList from './inspector/ChoiceEditorList';
+import RequiredNodeCard from './inspector/RequiredNodeCard';
+import { DEFAULT_OUTCOME_OPTIONS, DEFAULT_TYPE_HELPER_TEXT, } from './inspector/types';
+export { DEFAULT_OUTCOME_OPTIONS, } from './inspector/types';
+export default function InspectorPanel({ tree, selectedNode, focusChoiceId = null, isPublished = false, onUpdateSelectedNode, onAddChoice, onDeleteChoice, onMoveChoice, onSetChoiceTarget, onSetChoiceOutcome, outcomeOptions = DEFAULT_OUTCOME_OPTIONS, hideOutcomeField = false, renderExtraNodeFields, renderExtraChoiceFields, choiceTypes, onSetChoiceType, title = 'Required', emptyStateText = 'Select a node to edit it.', typeHelperText = DEFAULT_TYPE_HELPER_TEXT, onDeleteSelectedNode, onFocusChoice, }) {
+    return (_jsx("div", { children: selectedNode ? (_jsxs(_Fragment, { children: [_jsx(RequiredNodeCard, { tree: tree, selectedNode: selectedNode, isPublished: isPublished, title: title, typeHelperText: typeHelperText, onUpdateSelectedNode: onUpdateSelectedNode, onDeleteSelectedNode: onDeleteSelectedNode, renderExtraNodeFields: renderExtraNodeFields }), _jsx(ChoiceEditorList, { tree: tree, selectedNode: selectedNode, focusChoiceId: focusChoiceId, isPublished: isPublished, onAddChoice: onAddChoice, onUpdateSelectedNode: onUpdateSelectedNode, onDeleteChoice: onDeleteChoice, onMoveChoice: onMoveChoice, onSetChoiceTarget: onSetChoiceTarget, onSetChoiceOutcome: onSetChoiceOutcome, outcomeOptions: outcomeOptions, hideOutcomeField: hideOutcomeField, renderExtraChoiceFields: renderExtraChoiceFields, choiceTypes: choiceTypes, onSetChoiceType: onSetChoiceType, onFocusChoice: onFocusChoice })] })) : (_jsx("div", { className: "text-muted", children: _jsx("em", { children: emptyStateText }) })) }));
 }

package/dist/panels/IssuesPanel.d.ts

@@ -1,5 +1,5 @@
 import type { TreeSpecIssue } from '@signalsafe/tree-spec';
-import { type EditorTree } from '@signalsafe/tree-spec-editor-core';
+import { type EditorTree, type GraphSelection } from '@signalsafe/tree-spec-editor-core';
 export interface IssuesPanelProps {
     issues: TreeSpecIssue[];
     lastValidatedAt: string | null;
@@ -16,6 +16,10 @@ export interface IssuesPanelProps {
      * not have a tree in scope; type falls back to **—**.
      */
     tree?: EditorTree;
+    /** Current graph selection — used to highlight the active issue row. */
+    selection?: GraphSelection;
+    /** Focused choice id from the editor — pairs with `selection` for issue row highlight. */
+    focusChoiceId?: string | null;
     /** Optional override for the card header title. Defaults to "Issues". */
     title?: string;
     /** Optional placeholder for the search field. Defaults to "Search issues…". */
@@ -29,5 +33,5 @@ export interface IssuesPanelProps {
      */
     showValidationSummaryInHeader?: boolean;
 }
-export default function IssuesPanel({ issues, lastValidatedAt, onSelectIssue, issueSearch, onIssueSearchChange, tree, title, searchPlaceholder, formatTimestamp, showValidationSummaryInHeader, }: Readonly<IssuesPanelProps>): import("react/jsx-runtime").JSX.Element;
+export default function IssuesPanel({ issues, lastValidatedAt, onSelectIssue, issueSearch, onIssueSearchChange, tree, selection, focusChoiceId, title, searchPlaceholder, formatTimestamp, showValidationSummaryInHeader, }: Readonly<IssuesPanelProps>): import("react").JSX.Element;
 //# sourceMappingURL=IssuesPanel.d.ts.map

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

@@ -1 +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"}
+{"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,EAGH,KAAK,UAAU,EACf,KAAK,cAAc,EACtB,MAAM,mCAAmC,CAAC;AAM3C,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,wEAAwE;IACxE,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,0FAA0F;IAC1F,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,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;AAwCD,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAChC,MAAM,EACN,eAAe,EACf,aAAa,EACb,WAAW,EACX,mBAAmB,EACnB,IAAI,EACJ,SAAS,EACT,aAAoB,EACpB,KAAgB,EAChB,iBAAyC,EACzC,eAAwC,EACxC,6BAAoC,GACvC,EAAE,QAAQ,CAAC,gBAAgB,CAAC,+BAoH5B"}

package/dist/panels/IssuesPanel.js

@@ -1,9 +1,10 @@
 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 { buildStableEntries, GRAPH_SELECTION_KIND, } from '@signalsafe/tree-spec-editor-core';
 import { getIssueSeverityBadgeClass } from '../lib/panelHelpers';
 import PanelHeaderCollapseCarets from '../lib/PanelHeaderCollapseCarets';
+import { LIST_SELECTION_CLASS, LIST_SELECTION_TEXT_CLASS } from '../lib/selectionStyles';
 function defaultFormatTimestamp(iso) {
     return new Date(iso).toLocaleString();
 }
@@ -28,7 +29,15 @@ function issueMatchesQuery(issue, qLower, tree) {
     ];
     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, }) {
+function isIssueRowSelected(issue, selection, focusChoiceId) {
+    if (selection?.kind !== GRAPH_SELECTION_KIND.NODE || !issue.node_id) {
+        return false;
+    }
+    if (issue.node_id !== selection.id)
+        return false;
+    return (issue.choice_id ?? null) === (focusChoiceId ?? null);
+}
+export default function IssuesPanel({ issues, lastValidatedAt, onSelectIssue, issueSearch, onIssueSearchChange, tree, selection, focusChoiceId = null, 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]);
@@ -36,6 +45,9 @@ export default function IssuesPanel({ issues, lastValidatedAt, onSelectIssue, is
     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));
+                                    const isSelected = isIssueRowSelected(issue, selection, focusChoiceId);
+                                    return (_jsxs("button", { type: "button", className: `list-group-item px-3 py-2 text-start w-100 min-w-0${isSelected
+                                            ? ` ${LIST_SELECTION_CLASS} ${LIST_SELECTION_TEXT_CLASS}`
+                                            : ''}`, "aria-current": isSelected ? 'true' : undefined, onClick: () => onSelectIssue(issue), children: [_jsxs("div", { className: "d-flex w-100 justify-content-between align-items-start gap-2 mb-1 min-w-0", children: [_jsxs("div", { className: "min-w-0 flex-grow-1 text-break 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${isSelected ? '' : ' 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-break font-monospace${isSelected ? '' : ' text-body-secondary'}`, children: issue.message }), issue.choice_id ? (_jsx("small", { className: `text-break${isSelected ? '' : ' text-body-secondary'}`, children: issue.choice_id })) : null] }, key));
                                 }) })) })] })) })] }));
 }

package/dist/panels/NodesPanel.d.ts

@@ -3,6 +3,8 @@ export interface NodesPanelProps {
     tree: EditorTree;
     nodeSearch: string;
     selection: GraphSelection;
+    /** Node to highlight when a choice or edge is focused (may differ from `selection`). */
+    focusNodeId?: string | null;
     showMiniMap: boolean;
     onNodeSearchChange: (value: string) => void;
     onNodeSelect: (nodeId: string) => void;
@@ -24,5 +26,5 @@ export interface NodesPanelProps {
     /** 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;
+export default function NodesPanel({ tree, nodeSearch, selection, focusNodeId, showMiniMap, onNodeSearchChange, onNodeSelect, onShowMiniMapChange, searchPlaceholder, tipText, onAddNode, onDeleteNode, isPublished, }: Readonly<NodesPanelProps>): import("react").JSX.Element;
 //# sourceMappingURL=NodesPanel.d.ts.map

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

@@ -1 +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"}
+{"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;AAK3C,MAAM,WAAW,eAAe;IAC5B,IAAI,EAAE,UAAU,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,cAAc,CAAC;IAC1B,wFAAwF;IACxF,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,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;AAmCD,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAC/B,IAAI,EACJ,UAAU,EACV,SAAS,EACT,WAAkB,EAClB,WAAW,EACX,kBAAkB,EAClB,YAAY,EACZ,mBAAmB,EACnB,iBAAwC,EACxC,OAA0B,EAC1B,SAAS,EACT,YAAY,EACZ,WAAmB,GACtB,EAAE,QAAQ,CAAC,eAAe,CAAC,+BA8I3B"}

package/dist/panels/NodesPanel.js

@@ -3,6 +3,7 @@ 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';
+import { LIST_SELECTION_CLASS, LIST_SELECTION_TEXT_CLASS } from '../lib/selectionStyles';
 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) {
@@ -24,7 +25,12 @@ function compareNodesByTypeThenId(a, b) {
         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, }) {
+function isNodeRowSelected(nodeId, selection, focusNodeId) {
+    if (focusNodeId === nodeId)
+        return true;
+    return selection.kind === GRAPH_SELECTION_KIND.NODE && selection.id === nodeId;
+}
+export default function NodesPanel({ tree, nodeSearch, selection, focusNodeId = null, 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) => {
@@ -39,10 +45,10 @@ export default function NodesPanel({ tree, nodeSearch, selection, showMiniMap, o
     })
         .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 isSelected = isNodeRowSelected(n.id, selection, focusNodeId);
                                 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" })] }) })] })] }));
+                                return (_jsx("div", { className: `list-group-item px-3 py-2${isSelected
+                                        ? ` ${LIST_SELECTION_CLASS} ${LIST_SELECTION_TEXT_CLASS}`
+                                        : ''}`, "aria-current": isSelected ? 'true' : undefined, children: _jsxs("div", { className: "d-flex w-100 justify-content-between align-items-start gap-2 min-w-0", children: [_jsxs("button", { type: "button", className: "btn p-0 border-0 bg-transparent flex-grow-1 text-start min-w-0", onClick: () => onNodeSelect(n.id), children: [_jsx("div", { className: "d-flex w-100 justify-content-between align-items-center gap-2 mb-1 min-w-0", children: _jsxs("div", { className: "min-w-0 flex-grow-1 text-break text-start", title: `${n.id}, ${typeLabel}`, children: [_jsx("span", { className: `fs-6 fw-semibold text-uppercase${isSelected ? '' : ' text-body-secondary'}`, children: n.id }), _jsx("span", { className: `fs-6 text-uppercase${isSelected ? '' : ' text-body-secondary'}`, children: `, ${typeLabel}` })] }) }), _jsx("p", { className: `mb-1 small text-break${isSelected ? '' : ' text-body-secondary'}`, children: n.prompt || '(empty)' }), _jsx("small", { className: isSelected ? '' : ' text-body-secondary', 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 text-break min-w-0 flex-grow-1 me-2", 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

@@ -1,18 +1,25 @@
 /**
  * Compact read-only display of the currently selected transition.
  * Returns `null` when no edge is selected, so the host can render it unconditionally.
+ *
+ * For editing edge/choice appearance, use {@link AppearancePanel} instead.
  */
 import type { ReactNode } from 'react';
 import type { EditorTransition } from '@signalsafe/tree-spec-editor-core';
+import { type PanelNodeLinkContext } from '../lib/panelNodeLink';
+export type SelectedEdgeDetailsContext = PanelNodeLinkContext;
+export { PanelNodeLink } from '../lib/panelNodeLink';
 export interface SelectedEdgePanelProps {
     selectedEdge: EditorTransition | null;
+    /** Select a node when its id is clicked in the default details line. */
+    onNodeSelect?: (nodeId: string) => void;
     /** Override the card title (default "Selected Edge"). */
     title?: string;
     /**
      * Optional custom renderer for the edge details line. Defaults to
-     * `from \u00b7 choice \u2192 to`.
+     * `from · choice → to` with clickable node ids when `onNodeSelect` is set.
      */
-    renderDetails?: (edge: EditorTransition) => ReactNode;
+    renderDetails?: (edge: EditorTransition, ctx: SelectedEdgeDetailsContext) => ReactNode;
 }
-export default function SelectedEdgePanel({ selectedEdge, title, renderDetails, }: Readonly<SelectedEdgePanelProps>): import("react/jsx-runtime").JSX.Element | null;
+export default function SelectedEdgePanel({ selectedEdge, onNodeSelect, title, renderDetails, }: Readonly<SelectedEdgePanelProps>): import("react").JSX.Element | null;
 //# sourceMappingURL=SelectedEdgePanel.d.ts.map