@signalsafe/tree-spec-editor 0.1.1 → 0.2.0

package/dist/modals/DraftHistoryModal.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, CloseButton } from 'react-bootstrap';
+const DEFAULT_TITLE = 'Draft history';
+const DEFAULT_SUBTITLE = 'Restore an earlier snapshot into the current draft. Creating a snapshot saves the current graph state.';
+const DEFAULT_LIST_CAPTION = 'Snapshots (newest first)';
+const DEFAULT_CREATE_LABEL = 'Create snapshot';
+const DEFAULT_CREATING_LABEL = 'Creating…';
+const DEFAULT_RESTORE_LABEL = 'Restore';
+const DEFAULT_RESTORING_LABEL = 'Restoring…';
+const DEFAULT_LOADING_TEXT = 'Loading…';
+const DEFAULT_EMPTY_STATE_TEXT = 'No snapshots yet. Create one to save the current draft.';
+const DEFAULT_CLOSE_LABEL = 'Close';
+export default function DraftHistoryModal({ show, loadingSnapshots, snapshots, restoringSnapshotId, creatingSnapshot, tree, onClose, onCreateSnapshot, onRestoreSnapshot, title = DEFAULT_TITLE, subtitle = DEFAULT_SUBTITLE, listCaption = DEFAULT_LIST_CAPTION, createSnapshotLabel = DEFAULT_CREATE_LABEL, creatingSnapshotLabel = DEFAULT_CREATING_LABEL, restoreLabel = DEFAULT_RESTORE_LABEL, restoringLabel = DEFAULT_RESTORING_LABEL, loadingText = DEFAULT_LOADING_TEXT, emptyStateText = DEFAULT_EMPTY_STATE_TEXT, closeLabel = DEFAULT_CLOSE_LABEL, }) {
+    if (!show)
+        return null;
+    let snapshotsContent;
+    if (loadingSnapshots) {
+        snapshotsContent = _jsx("div", { className: "text-muted", children: loadingText });
+    }
+    else if (snapshots.length === 0) {
+        snapshotsContent = (_jsx("div", { className: "text-muted", children: _jsx("em", { children: emptyStateText }) }));
+    }
+    else {
+        snapshotsContent = (_jsx("ul", { className: "list-unstyled mb-0 overflow-auto-max-h-320", children: snapshots.map((s) => (_jsxs("li", { className: "d-flex justify-content-between align-items-center border-bottom py-2", children: [_jsxs("div", { children: [_jsx("span", { className: "text-muted font-size-12", children: new Date(s.created_at).toLocaleString() }), s.label ? _jsx("span", { className: "ms-2", children: s.label }) : null, s.spec_hash ? (_jsxs("span", { className: "ms-2 text-muted font-size-11", children: [s.spec_hash.slice(0, 8), "\u2026"] })) : null] }), _jsx(Button, { variant: "outline-warning", onClick: () => onRestoreSnapshot(s.id), disabled: restoringSnapshotId !== null, children: restoringSnapshotId === s.id ? restoringLabel : restoreLabel })] }, s.id))) }));
+    }
+    return (_jsx("dialog", { className: "modal d-block modal-backdrop-dark", open: true, children: _jsx("div", { className: "modal-dialog modal-lg", children: _jsxs("div", { className: "modal-content", children: [_jsxs("div", { className: "modal-header", children: [_jsx("h5", { className: "modal-title", children: title }), _jsx(CloseButton, { "aria-label": "Close", onClick: onClose })] }), _jsxs("div", { className: "modal-body", children: [_jsx("p", { className: "text-muted font-size-13", children: subtitle }), _jsxs("div", { className: "d-flex justify-content-between align-items-center mb-3", children: [_jsx("span", { className: "text-muted font-size-13", children: listCaption }), _jsx(Button, { variant: "outline-primary", onClick: onCreateSnapshot, disabled: !tree || creatingSnapshot, children: creatingSnapshot ? creatingSnapshotLabel : createSnapshotLabel })] }), snapshotsContent] }), _jsx("div", { className: "modal-footer", children: _jsx(Button, { variant: "secondary", onClick: onClose, children: closeLabel }) })] }) }) }));
+}

package/dist/modals/PublishReviewModal.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Publish-review modal for the TreeSpec graph editor.
+ *
+ * Presentational only: receives the current tree, the baseline tree (loaded from the
+ * server before edits), the current validation issues, and callbacks. The diff
+ * computation is injected via `computeDiffSummary` so the package stays free of
+ * host-specific diff logic.
+ */
+import { type TreeSpecIssue } from '@signalsafe/tree-spec';
+import { type EditorTree } from '@signalsafe/tree-spec-editor-core';
+export interface PublishReviewModalProps {
+    show: boolean;
+    tree: EditorTree | null;
+    baselineTree: EditorTree | null;
+    issues: TreeSpecIssue[];
+    publishing: boolean;
+    onClose: () => void;
+    onPublish: () => void;
+    computeDiffSummary: (before: EditorTree | null, after: EditorTree) => {
+        lines: string[];
+        hasChanges: boolean;
+    };
+    /** Override the card title (default "Review changes before publishing"). */
+    title?: string;
+    /** Override the info alert text shown above the diff summary. */
+    summaryText?: string;
+    /** Override the error alert shown when validation issues exist. */
+    errorAlertText?: string;
+    /** Override the Cancel button label. */
+    cancelLabel?: string;
+    /** Override the Publish button label (default "Publish now"). */
+    publishLabel?: string;
+    /** Override the Publish button label while publishing (default "Publishing\u2026"). */
+    publishingLabel?: string;
+}
+export default function PublishReviewModal({ show, tree, baselineTree, issues, publishing, onClose, onPublish, computeDiffSummary, title, summaryText, errorAlertText, cancelLabel, publishLabel, publishingLabel, }: Readonly<PublishReviewModalProps>): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=PublishReviewModal.d.ts.map

package/dist/modals/PublishReviewModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PublishReviewModal.d.ts","sourceRoot":"","sources":["../../src/modals/PublishReviewModal.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAA4B,KAAK,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAGrF,OAAO,EAAsB,KAAK,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAExF,MAAM,WAAW,uBAAuB;IACpC,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,UAAU,GAAG,IAAI,CAAC;IACxB,YAAY,EAAE,UAAU,GAAG,IAAI,CAAC;IAChC,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB,UAAU,EAAE,OAAO,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,kBAAkB,EAAE,CAChB,MAAM,EAAE,UAAU,GAAG,IAAI,EACzB,KAAK,EAAE,UAAU,KAChB;QAAE,KAAK,EAAE,MAAM,EAAE,CAAC;QAAC,UAAU,EAAE,OAAO,CAAA;KAAE,CAAC;IAE9C,4EAA4E;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iEAAiE;IACjE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mEAAmE;IACnE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,wCAAwC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iEAAiE;IACjE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uFAAuF;IACvF,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B;AAUD,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACvC,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,MAAM,EACN,UAAU,EACV,OAAO,EACP,SAAS,EACT,kBAAkB,EAClB,KAAqB,EACrB,WAAkC,EAClC,cAAyC,EACzC,WAAkC,EAClC,YAAoC,EACpC,eAA0C,GAC7C,EAAE,QAAQ,CAAC,uBAAuB,CAAC,kDAyCnC"}

package/dist/modals/PublishReviewModal.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Publish-review modal for the TreeSpec graph editor.
+ *
+ * Presentational only: receives the current tree, the baseline tree (loaded from the
+ * server before edits), the current validation issues, and callbacks. The diff
+ * computation is injected via `computeDiffSummary` so the package stays free of
+ * host-specific diff logic.
+ */
+import { TREE_SPEC_ISSUE_SEVERITY } from '@signalsafe/tree-spec';
+import { Button, CloseButton } from 'react-bootstrap';
+import { buildStableEntries } from '@signalsafe/tree-spec-editor-core';
+const DEFAULT_TITLE = 'Review changes before publishing';
+const DEFAULT_SUMMARY_TEXT = 'Publishing is immutable. This summary compares the loaded version spec to your current graph.';
+const DEFAULT_ERROR_ALERT_TEXT = 'Validation errors exist. Fix them before publishing.';
+const DEFAULT_CANCEL_LABEL = 'Cancel';
+const DEFAULT_PUBLISH_LABEL = 'Publish now';
+const DEFAULT_PUBLISHING_LABEL = 'Publishing…';
+export default function PublishReviewModal({ show, tree, baselineTree, issues, publishing, onClose, onPublish, computeDiffSummary, title = DEFAULT_TITLE, summaryText = DEFAULT_SUMMARY_TEXT, errorAlertText = DEFAULT_ERROR_ALERT_TEXT, cancelLabel = DEFAULT_CANCEL_LABEL, publishLabel = DEFAULT_PUBLISH_LABEL, publishingLabel = DEFAULT_PUBLISHING_LABEL, }) {
+    if (!show)
+        return null;
+    const hasErrors = issues.some((i) => i.severity === TREE_SPEC_ISSUE_SEVERITY.ERROR);
+    const diffLineEntries = buildStableEntries(tree ? computeDiffSummary(baselineTree, tree).lines : [], (line) => line);
+    return (_jsx("dialog", { className: "modal d-block modal-backdrop-dark", open: true, children: _jsx("div", { className: "modal-dialog modal-lg", children: _jsxs("div", { className: "modal-content", children: [_jsxs("div", { className: "modal-header", children: [_jsx("h5", { className: "modal-title", children: title }), _jsx(CloseButton, { "aria-label": "Close", onClick: onClose })] }), _jsxs("div", { className: "modal-body", children: [_jsx("div", { className: "alert alert-info font-size-13", children: summaryText }), _jsx("ul", { children: diffLineEntries.map(({ item: line, key }) => (_jsx("li", { children: line }, key))) }), hasErrors ? (_jsx("div", { className: "alert alert-danger", children: errorAlertText })) : null] }), _jsxs("div", { className: "modal-footer", children: [_jsx(Button, { variant: "outline-secondary", onClick: onClose, children: cancelLabel }), _jsx(Button, { variant: "success", disabled: publishing || hasErrors, onClick: onPublish, children: publishing ? publishingLabel : publishLabel })] })] }) }) }));
+}

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,2CA0G5B"}

package/dist/panels/IssuesPanel.js

@@ -0,0 +1,46 @@
+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("div", { role: "button", tabIndex: 0, className: "list-group-item list-group-item-action px-3 py-2 text-start", onClick: () => onSelectIssue(issue), onKeyDown: (e) => {
+                                            if (e.key === 'Enter' || e.key === ' ') {
+                                                e.preventDefault();
+                                                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,2CAyI3B"}

package/dist/panels/NodesPanel.js

@@ -0,0 +1,56 @@
+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 (_jsxs("div", { role: "button", tabIndex: 0, className: `list-group-item list-group-item-action text-start px-3 py-2${isSelected ? ' active' : ''}`, "aria-current": isSelected ? 'true' : undefined, onClick: () => onNodeSelect(n.id), onKeyDown: (e) => {
+                                        if (e.key === 'Enter' || e.key === ' ') {
+                                            e.preventDefault();
+                                            onNodeSelect(n.id);
+                                        }
+                                    }, 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: `${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}` })] }), 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: (e) => {
+                                                        e.stopPropagation();
+                                                        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] }), _jsx("p", { className: "mb-1 small text-truncate", style: { minWidth: 0 }, children: n.prompt || '(empty)' }), _jsx("small", { className: mutedMeta, children: choiceLine(n) })] }, 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) })] }) }));
+}