@signalsafe/tree-spec-editor 0.2.2 → 0.3.0

package/dist/lib/selectionStyles.js

@@ -1,8 +1,8 @@
-/** Bootstrap list-group selection highlight (subtle primary background). */
-export const LIST_SELECTION_CLASS = 'list-group-item-primary';
-/** Dark readable text on {@link LIST_SELECTION_CLASS} rows (sidebar Nodes / Issues). */
-export const LIST_SELECTION_TEXT_CLASS = 'graph-editor-sidebar-selected';
+/** List row selection highlight (sidebar Nodes / Issues). */
+export const LIST_SELECTION_CLASS = 'graph-editor-list__item--selected';
+/** Readable text on selected sidebar rows. */
+export const LIST_SELECTION_TEXT_CLASS = 'graph-editor-list__item-text--selected';
 /** Canvas / card selection highlight matching list selection. */
-export const CANVAS_SELECTION_CLASS = 'bg-primary-subtle';
-/** Dark readable text on {@link CANVAS_SELECTION_CLASS} graph nodes. */
+export const CANVAS_SELECTION_CLASS = 'graph-editor-canvas__selected';
+/** Readable text on selected canvas nodes. */
 export const CANVAS_SELECTION_TEXT_CLASS = 'graph-editor-canvas-selected';

package/dist/modals/AuditLogModal.d.ts

@@ -4,17 +4,11 @@ export interface AuditLogModalProps {
     loadingAudit: boolean;
     auditEvents: TreeSpecAuditEventItem[];
     onClose: () => void;
-    /** Override the modal title (default "Audit log"). */
     title?: string;
-    /** Override the muted subtitle below the title. */
     subtitle?: string;
-    /** Override the loading state text. */
     loadingText?: string;
-    /** Override the empty-state text (when there are zero events). */
     emptyStateText?: string;
-    /** Override the "Actor ID:" label prefix shown for events that have an actor. */
     actorLabel?: string;
-    /** Override the Close button label in the footer. */
     closeLabel?: string;
 }
 export default function AuditLogModal({ show, loadingAudit, auditEvents, onClose, title, subtitle, loadingText, emptyStateText, actorLabel, closeLabel, }: Readonly<AuditLogModalProps>): import("react").JSX.Element | null;

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

@@ -1 +1 @@
-{"version":3,"file":"AuditLogModal.d.ts","sourceRoot":"","sources":["../../src/modals/AuditLogModal.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,mCAAmC,CAAC;AAEhF,MAAM,WAAW,kBAAkB;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,OAAO,CAAC;IACtB,WAAW,EAAE,sBAAsB,EAAE,CAAC;IACtC,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kEAAkE;IAClE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iFAAiF;IACjF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qDAAqD;IACrD,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AASD,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAClC,IAAI,EACJ,YAAY,EACZ,WAAW,EACX,OAAO,EACP,KAAqB,EACrB,QAA2B,EAC3B,WAAkC,EAClC,cAAyC,EACzC,UAAgC,EAChC,UAAgC,GACnC,EAAE,QAAQ,CAAC,kBAAkB,CAAC,sCAwD9B"}
+{"version":3,"file":"AuditLogModal.d.ts","sourceRoot":"","sources":["../../src/modals/AuditLogModal.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,mCAAmC,CAAC;AAqBhF,MAAM,WAAW,kBAAkB;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,OAAO,CAAC;IACtB,WAAW,EAAE,sBAAsB,EAAE,CAAC;IACtC,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AASD,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAClC,IAAI,EACJ,YAAY,EACZ,WAAW,EACX,OAAO,EACP,KAAqB,EACrB,QAA2B,EAC3B,WAAkC,EAClC,cAAyC,EACzC,UAAgC,EAChC,UAAgC,GACnC,EAAE,QAAQ,CAAC,kBAAkB,CAAC,sCA8D9B"}

package/dist/modals/AuditLogModal.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, CloseButton } from 'react-bootstrap';
+import { EDITOR_BADGE, EDITOR_FLEX_BETWEEN, EDITOR_MODAL, EDITOR_MODAL_BODY, EDITOR_MODAL_CONTENT, EDITOR_MODAL_DIALOG, EDITOR_MODAL_FOOTER, EDITOR_MODAL_HEADER, EDITOR_MODAL_TITLE, EDITOR_MONO, EDITOR_MUTED, EDITOR_SCROLL, EDITOR_SPACING_MB_0, EDITOR_SPACING_MT_1, joinClasses, } from '../ui/editorClasses.js';
+import { EditorButton, EditorCloseButton } from '../ui/primitives.js';
 const DEFAULT_TITLE = 'Audit log';
 const DEFAULT_SUBTITLE = 'Authoring actions for this tree_spec version.';
 const DEFAULT_LOADING_TEXT = 'Loading…';
@@ -11,13 +12,13 @@ export default function AuditLogModal({ show, loadingAudit, auditEvents, onClose
         return null;
     let auditContent;
     if (loadingAudit) {
-        auditContent = _jsx("div", { className: "text-muted", children: loadingText });
+        auditContent = _jsx("div", { className: EDITOR_MUTED, children: loadingText });
     }
     else if (auditEvents.length === 0) {
-        auditContent = (_jsx("div", { className: "text-muted", children: _jsx("em", { children: emptyStateText }) }));
+        auditContent = (_jsx("div", { className: EDITOR_MUTED, children: _jsx("em", { children: emptyStateText }) }));
     }
     else {
-        auditContent = (_jsx("ul", { className: "list-unstyled mb-0 overflow-auto-max-h-400", children: auditEvents.map((e) => (_jsxs("li", { className: "border-bottom py-2", children: [_jsxs("div", { className: "d-flex justify-content-between align-items-start", children: [_jsx("span", { className: "badge bg-secondary me-2", children: e.action }), _jsx("span", { className: "text-muted font-size-12", children: new Date(e.created_on).toLocaleString() })] }), e.actor == null ? null : (_jsxs("span", { className: "text-muted font-size-12", children: [actorLabel, " ", e.actor] })), e.detail && Object.keys(e.detail).length > 0 ? (_jsx("pre", { className: "mb-0 mt-1 small text-muted font-size-11", children: JSON.stringify(e.detail) })) : null] }, e.id))) }));
+        auditContent = (_jsx("ul", { className: joinClasses('graph-editor-list--plain', EDITOR_SCROLL, EDITOR_SPACING_MB_0), children: auditEvents.map((e) => (_jsxs("li", { className: "graph-editor-list__plain-item", children: [_jsxs("div", { className: EDITOR_FLEX_BETWEEN, children: [_jsx("span", { className: joinClasses(EDITOR_BADGE, 'graph-editor-badge--neutral'), children: e.action }), _jsx("span", { className: joinClasses(EDITOR_MUTED, 'graph-editor-text--sm'), children: new Date(e.created_on).toLocaleString() })] }), e.actor == null ? null : (_jsxs("span", { className: joinClasses(EDITOR_MUTED, 'graph-editor-text--sm'), children: [actorLabel, " ", e.actor] })), e.detail && Object.keys(e.detail).length > 0 ? (_jsx("pre", { className: joinClasses(EDITOR_MONO, EDITOR_MUTED, 'graph-editor-text--sm', EDITOR_SPACING_MB_0, EDITOR_SPACING_MT_1), children: JSON.stringify(e.detail) })) : null] }, e.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 }), auditContent] }), _jsx("div", { className: "modal-footer", children: _jsx(Button, { variant: "secondary", onClick: onClose, children: closeLabel }) })] }) }) }));
+    return (_jsx("dialog", { className: joinClasses(EDITOR_MODAL, 'graph-editor-modal--open'), open: true, children: _jsx("div", { className: joinClasses(EDITOR_MODAL_DIALOG, 'graph-editor-modal__dialog--lg'), children: _jsxs("div", { className: EDITOR_MODAL_CONTENT, children: [_jsxs("div", { className: EDITOR_MODAL_HEADER, children: [_jsx("h2", { className: EDITOR_MODAL_TITLE, children: title }), _jsx(EditorCloseButton, { onClick: onClose })] }), _jsxs("div", { className: EDITOR_MODAL_BODY, children: [_jsx("p", { className: joinClasses(EDITOR_MUTED, 'graph-editor-text--sm'), children: subtitle }), auditContent] }), _jsx("div", { className: EDITOR_MODAL_FOOTER, children: _jsx(EditorButton, { tone: "neutral", onClick: onClose, children: closeLabel }) })] }) }) }));
 }

package/dist/modals/DraftHistoryModal.d.ts

@@ -9,25 +9,15 @@ export interface DraftHistoryModalProps {
     onClose: () => void;
     onCreateSnapshot: () => void;
     onRestoreSnapshot: (snapshotId: string) => void;
-    /** Override the modal title (default "Draft history"). */
     title?: string;
-    /** Override the muted subtitle below the title. */
     subtitle?: string;
-    /** Override the "Snapshots (newest first)" caption above the list. */
     listCaption?: string;
-    /** Override the "Create snapshot" button label. */
     createSnapshotLabel?: string;
-    /** Override the "Creating\u2026" label while a create is in flight. */
     creatingSnapshotLabel?: string;
-    /** Override the "Restore" button label. */
     restoreLabel?: string;
-    /** Override the "Restoring\u2026" button label while a restore is in flight. */
     restoringLabel?: string;
-    /** Override the loading state text. */
     loadingText?: string;
-    /** Override the empty-state text (when there are zero snapshots). */
     emptyStateText?: string;
-    /** Override the Close button label in the footer. */
     closeLabel?: string;
 }
 export default function DraftHistoryModal({ show, loadingSnapshots, snapshots, restoringSnapshotId, creatingSnapshot, tree, onClose, onCreateSnapshot, onRestoreSnapshot, title, subtitle, listCaption, createSnapshotLabel, creatingSnapshotLabel, restoreLabel, restoringLabel, loadingText, emptyStateText, closeLabel, }: Readonly<DraftHistoryModalProps>): import("react").JSX.Element | null;

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

@@ -1 +1 @@
-{"version":3,"file":"DraftHistoryModal.d.ts","sourceRoot":"","sources":["../../src/modals/DraftHistoryModal.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,UAAU,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AAE1F,MAAM,WAAW,sBAAsB;IACnC,IAAI,EAAE,OAAO,CAAC;IACd,gBAAgB,EAAE,OAAO,CAAC;IAC1B,SAAS,EAAE,oBAAoB,EAAE,CAAC;IAClC,mBAAmB,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,IAAI,EAAE,UAAU,GAAG,IAAI,CAAC;IACxB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,iBAAiB,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAEhD,0DAA0D;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sEAAsE;IACtE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mDAAmD;IACnD,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,uEAAuE;IACvE,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gFAAgF;IAChF,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qEAAqE;IACrE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,qDAAqD;IACrD,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAcD,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACtC,IAAI,EACJ,gBAAgB,EAChB,SAAS,EACT,mBAAmB,EACnB,gBAAgB,EAChB,IAAI,EACJ,OAAO,EACP,gBAAgB,EAChB,iBAAiB,EACjB,KAAqB,EACrB,QAA2B,EAC3B,WAAkC,EAClC,mBAA0C,EAC1C,qBAA8C,EAC9C,YAAoC,EACpC,cAAwC,EACxC,WAAkC,EAClC,cAAyC,EACzC,UAAgC,GACnC,EAAE,QAAQ,CAAC,sBAAsB,CAAC,sCAuElC"}
+{"version":3,"file":"DraftHistoryModal.d.ts","sourceRoot":"","sources":["../../src/modals/DraftHistoryModal.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AAmB1F,MAAM,WAAW,sBAAsB;IACnC,IAAI,EAAE,OAAO,CAAC;IACd,gBAAgB,EAAE,OAAO,CAAC;IAC1B,SAAS,EAAE,oBAAoB,EAAE,CAAC;IAClC,mBAAmB,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,IAAI,EAAE,UAAU,GAAG,IAAI,CAAC;IACxB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,iBAAiB,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAEhD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAcD,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACtC,IAAI,EACJ,gBAAgB,EAChB,SAAS,EACT,mBAAmB,EACnB,gBAAgB,EAChB,IAAI,EACJ,OAAO,EACP,gBAAgB,EAChB,iBAAiB,EACjB,KAAqB,EACrB,QAA2B,EAC3B,WAAkC,EAClC,mBAA0C,EAC1C,qBAA8C,EAC9C,YAAoC,EACpC,cAAwC,EACxC,WAAkC,EAClC,cAAyC,EACzC,UAAgC,GACnC,EAAE,QAAQ,CAAC,sBAAsB,CAAC,sCAsElC"}

package/dist/modals/DraftHistoryModal.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, CloseButton } from 'react-bootstrap';
+import { EDITOR_FLEX_BETWEEN, EDITOR_MODAL, EDITOR_MODAL_BODY, EDITOR_MODAL_CONTENT, EDITOR_MODAL_DIALOG, EDITOR_MODAL_FOOTER, EDITOR_MODAL_HEADER, EDITOR_MODAL_TITLE, EDITOR_MUTED, EDITOR_SCROLL, EDITOR_SPACING_MB_0, EDITOR_SPACING_MB_3, joinClasses, } from '../ui/editorClasses.js';
+import { EditorButton, EditorCloseButton } from '../ui/primitives.js';
 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)';
@@ -15,13 +16,13 @@ export default function DraftHistoryModal({ show, loadingSnapshots, snapshots, r
         return null;
     let snapshotsContent;
     if (loadingSnapshots) {
-        snapshotsContent = _jsx("div", { className: "text-muted", children: loadingText });
+        snapshotsContent = _jsx("div", { className: EDITOR_MUTED, children: loadingText });
     }
     else if (snapshots.length === 0) {
-        snapshotsContent = (_jsx("div", { className: "text-muted", children: _jsx("em", { children: emptyStateText }) }));
+        snapshotsContent = (_jsx("div", { className: EDITOR_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_on).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))) }));
+        snapshotsContent = (_jsx("ul", { className: joinClasses('graph-editor-list--plain', EDITOR_SCROLL, EDITOR_SPACING_MB_0), children: snapshots.map((s) => (_jsxs("li", { className: joinClasses(EDITOR_FLEX_BETWEEN, 'graph-editor-list__plain-item'), children: [_jsxs("div", { children: [_jsx("span", { className: EDITOR_MUTED, children: new Date(s.created_on).toLocaleString() }), s.label ? _jsx("span", { className: "graph-editor-inline-gap", children: s.label }) : null, s.spec_hash ? (_jsxs("span", { className: joinClasses(EDITOR_MUTED, 'graph-editor-text--sm'), children: [s.spec_hash.slice(0, 8), "\u2026"] })) : null] }), _jsx(EditorButton, { tone: "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 }) })] }) }) }));
+    return (_jsx("dialog", { className: joinClasses(EDITOR_MODAL, 'graph-editor-modal--open'), open: true, children: _jsx("div", { className: joinClasses(EDITOR_MODAL_DIALOG, 'graph-editor-modal__dialog--lg'), children: _jsxs("div", { className: EDITOR_MODAL_CONTENT, children: [_jsxs("div", { className: EDITOR_MODAL_HEADER, children: [_jsx("h2", { className: EDITOR_MODAL_TITLE, children: title }), _jsx(EditorCloseButton, { onClick: onClose })] }), _jsxs("div", { className: EDITOR_MODAL_BODY, children: [_jsx("p", { className: joinClasses(EDITOR_MUTED, 'graph-editor-text--sm'), children: subtitle }), _jsxs("div", { className: joinClasses(EDITOR_FLEX_BETWEEN, EDITOR_SPACING_MB_3), children: [_jsx("span", { className: joinClasses(EDITOR_MUTED, 'graph-editor-text--sm'), children: listCaption }), _jsx(EditorButton, { tone: "primary", onClick: onCreateSnapshot, disabled: !tree || creatingSnapshot, children: creatingSnapshot ? creatingSnapshotLabel : createSnapshotLabel })] }), snapshotsContent] }), _jsx("div", { className: EDITOR_MODAL_FOOTER, children: _jsx(EditorButton, { tone: "neutral", onClick: onClose, children: closeLabel }) })] }) }) }));
 }

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

@@ -1 +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,sCAyCnC"}
+{"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;AAErF,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,sCA2CnC"}

package/dist/modals/PublishReviewModal.js

@@ -8,8 +8,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * 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';
+import { EDITOR_MODAL, EDITOR_MODAL_BODY, EDITOR_MODAL_CONTENT, EDITOR_MODAL_DIALOG, EDITOR_MODAL_FOOTER, EDITOR_MODAL_HEADER, EDITOR_MODAL_TITLE, editorAlertToneClass, joinClasses, } from '../ui/editorClasses.js';
+import { EditorButton, EditorCloseButton } from '../ui/primitives.js';
 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.';
@@ -21,5 +22,5 @@ export default function PublishReviewModal({ show, tree, baselineTree, issues, p
         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 })] })] }) }) }));
+    return (_jsx("dialog", { className: joinClasses(EDITOR_MODAL, 'graph-editor-modal--open'), open: true, children: _jsx("div", { className: joinClasses(EDITOR_MODAL_DIALOG, 'graph-editor-modal__dialog--lg'), children: _jsxs("div", { className: EDITOR_MODAL_CONTENT, children: [_jsxs("div", { className: EDITOR_MODAL_HEADER, children: [_jsx("h2", { className: EDITOR_MODAL_TITLE, children: title }), _jsx(EditorCloseButton, { onClick: onClose })] }), _jsxs("div", { className: EDITOR_MODAL_BODY, children: [_jsx("div", { className: editorAlertToneClass('info'), children: summaryText }), _jsx("ul", { children: diffLineEntries.map(({ item: line, key }) => (_jsx("li", { children: line }, key))) }), hasErrors ? (_jsx("div", { className: editorAlertToneClass('danger'), children: errorAlertText })) : null] }), _jsxs("div", { className: EDITOR_MODAL_FOOTER, children: [_jsx(EditorButton, { tone: "neutral", onClick: onClose, children: cancelLabel }), _jsx(EditorButton, { tone: "success", disabled: publishing || hasErrors, onClick: onPublish, children: publishing ? publishingLabel : publishLabel })] })] }) }) }));
 }

package/dist/panels/AdvancedJsonPanel.d.ts

@@ -20,7 +20,7 @@ export interface AdvancedJsonPanelProps {
     expandAllLabel?: string;
     /** Optional override for the collapse button label (default "Compress all"). */
     collapseAllLabel?: string;
-    /** Optional extra class names applied to the outer `card` element. */
+    /** 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.Element;

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

@@ -1 +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,+BAsClC"}
+{"version":3,"file":"AdvancedJsonPanel.d.ts","sourceRoot":"","sources":["../../src/panels/AdvancedJsonPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAsBvC,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,oEAAoE;IACpE,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,+BAwClC"}

package/dist/panels/AdvancedJsonPanel.js

@@ -1,11 +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';
+import PanelHeaderCollapseCarets from '../lib/PanelHeaderCollapseCarets.js';
+import { EDITOR_CARD, EDITOR_CARD_BODY, EDITOR_CARD_HEADER, EDITOR_FLEX_BETWEEN, EDITOR_FLEX_ROW, EDITOR_FLEX_SHRINK_0, EDITOR_FLEX_WRAP, EDITOR_HIDDEN, EDITOR_MIN_W_0, EDITOR_MUTED, EDITOR_SPACING_MS_AUTO, EDITOR_SPACING_MT_3, joinClasses, } from '../ui/editorClasses.js';
+import { EditorButton } from '../ui/primitives.js';
 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 })] }));
+    return (_jsxs("div", { className: joinClasses(EDITOR_CARD, EDITOR_SPACING_MT_3, className), children: [_jsxs("div", { className: joinClasses(EDITOR_CARD_HEADER, EDITOR_FLEX_BETWEEN, EDITOR_FLEX_WRAP), children: [_jsxs("div", { className: EDITOR_MIN_W_0, children: [_jsxs("div", { className: joinClasses(EDITOR_FLEX_ROW, EDITOR_FLEX_WRAP), children: [_jsx("span", { className: "graph-editor-text--bold", children: title }), _jsx(PanelHeaderCollapseCarets, { expanded: expanded, onToggle: () => setExpanded((v) => !v) })] }), subtitle ? _jsx("div", { className: joinClasses(EDITOR_MUTED, 'graph-editor-text--sm'), children: subtitle }) : null] }), hasButtons ? (_jsxs("div", { className: joinClasses(EDITOR_FLEX_ROW, EDITOR_FLEX_SHRINK_0, EDITOR_SPACING_MS_AUTO, 'graph-editor-btn-group'), children: [onExpandAll ? (_jsx(EditorButton, { tone: "neutral", onClick: onExpandAll, children: expandAllLabel })) : null, onCollapseAll ? (_jsx(EditorButton, { tone: "neutral", onClick: onCollapseAll, children: collapseAllLabel })) : null] })) : null] }), _jsx("div", { className: joinClasses(EDITOR_CARD_BODY, 'graph-editor-card__body--flush', !expanded && EDITOR_HIDDEN), "aria-hidden": !expanded, children: children })] }));
 }

package/dist/panels/AppearancePanel.d.ts

@@ -4,7 +4,7 @@
  */
 import type { ReactNode } from 'react';
 import { type ChoiceEdgeHints, type EditorNode, type EditorTransition, type EditorTree } from '@signalsafe/tree-spec-editor-core';
-import type { InspectorNodeRenderContext } from './InspectorPanel';
+import type { InspectorNodeRenderContext } from './InspectorPanel.js';
 export interface AppearancePanelProps {
     tree: EditorTree;
     selectedNode: EditorNode | null;

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

@@ -1 +1 @@
-{"version":3,"file":"AppearancePanel.d.ts","sourceRoot":"","sources":["../../src/panels/AppearancePanel.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,EAEH,KAAK,eAAe,EAEpB,KAAK,UAAU,EACf,KAAK,gBAAgB,EACrB,KAAK,UAAU,EAClB,MAAM,mCAAmC,CAAC;AAK3C,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,kBAAkB,CAAC;AAEnE,MAAM,WAAW,oBAAoB;IACjC,IAAI,EAAE,UAAU,CAAC;IACjB,YAAY,EAAE,UAAU,GAAG,IAAI,CAAC;IAChC,YAAY,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACvC,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oBAAoB,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;IAC3D,yFAAyF;IACzF,sBAAsB,EAAE,CAAC,GAAG,EAAE,0BAA0B,KAAK,SAAS,CAAC;IACvE,uBAAuB,CAAC,EAAE,CACtB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,OAAO,CAAC,eAAe,CAAC,KAC9B,IAAI,CAAC;IACV,0DAA0D;IAC1D,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,uDAAuD;IACvD,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAmID,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACpC,IAAI,EACJ,YAAY,EACZ,YAAmB,EACnB,aAAoB,EACpB,WAAmB,EACnB,oBAAoB,EACpB,sBAAsB,EACtB,uBAAuB,EACvB,YAAY,EACZ,KAAoB,EACpB,cAA4D,EAC5D,UAAkE,GACrE,EAAE,QAAQ,CAAC,oBAAoB,CAAC,+BA0EhC"}
+{"version":3,"file":"AppearancePanel.d.ts","sourceRoot":"","sources":["../../src/panels/AppearancePanel.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,EAEH,KAAK,eAAe,EAEpB,KAAK,UAAU,EACf,KAAK,gBAAgB,EACrB,KAAK,UAAU,EAClB,MAAM,mCAAmC,CAAC;AAkB3C,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,qBAAqB,CAAC;AAEtE,MAAM,WAAW,oBAAoB;IACjC,IAAI,EAAE,UAAU,CAAC;IACjB,YAAY,EAAE,UAAU,GAAG,IAAI,CAAC;IAChC,YAAY,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACvC,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oBAAoB,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;IAC3D,yFAAyF;IACzF,sBAAsB,EAAE,CAAC,GAAG,EAAE,0BAA0B,KAAK,SAAS,CAAC;IACvE,uBAAuB,CAAC,EAAE,CACtB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,OAAO,CAAC,eAAe,CAAC,KAC9B,IAAI,CAAC;IACV,0DAA0D;IAC1D,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,uDAAuD;IACvD,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAgID,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACpC,IAAI,EACJ,YAAY,EACZ,YAAmB,EACnB,aAAoB,EACpB,WAAmB,EACnB,oBAAoB,EACpB,sBAAsB,EACtB,uBAAuB,EACvB,YAAY,EACZ,KAAoB,EACpB,cAA4D,EAC5D,UAAkE,GACrE,EAAE,QAAQ,CAAC,oBAAoB,CAAC,+BA0EhC"}

package/dist/panels/AppearancePanel.js

@@ -1,9 +1,10 @@
 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';
+import PanelHeaderCollapseCarets from '../lib/PanelHeaderCollapseCarets.js';
+import { PanelNodeLink } from '../lib/panelNodeLink.js';
+import { EDITOR_CARD, EDITOR_CARD_BODY, EDITOR_CARD_HEADER, EDITOR_FLEX_ROW, EDITOR_HIDDEN, EDITOR_MIN_W_0, EDITOR_MUTED, EDITOR_SPACING_MB_2, EDITOR_SPACING_MB_3, EDITOR_SPACING_MT_3, joinClasses, } from '../ui/editorClasses.js';
+import ChoiceEdgeAppearanceFields from './ChoiceEdgeAppearanceFields.js';
 function resolveActiveChoiceId(choices, selectedEdge, focusChoiceId) {
     if (selectedEdge)
         return selectedEdge.fromChoiceId;
@@ -14,16 +15,13 @@ function resolveActiveChoiceId(choices, selectedEdge, focusChoiceId) {
 }
 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)'] }));
+    return (_jsxs("div", { className: joinClasses(EDITOR_MUTED, 'graph-editor-text--sm', EDITOR_SPACING_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 })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: joinClasses(EDITOR_MUTED, 'graph-editor-text--sm', EDITOR_SPACING_MB_2), children: EDGE_APPEARANCE_HELPER }), _jsx("div", { className: joinClasses('graph-editor-text--sm', 'graph-editor-text--semibold', EDITOR_SPACING_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';
+    return joinClasses(EDITOR_CARD_BODY, hasSelection && !expanded && EDITOR_HIDDEN);
 }
 function deriveAppearancePanelViewState({ tree, selectedNode, selectedEdge, focusChoiceId, onUpdateChoiceEdgeHints, }) {
     const edgeFocused = Boolean(selectedEdge);
@@ -67,10 +65,10 @@ export default function AppearancePanel({ tree, selectedNode, selectedEdge = nul
         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({
+    return (_jsxs("div", { className: joinClasses(EDITOR_CARD, EDITOR_SPACING_MT_3), children: [_jsxs("div", { className: joinClasses(EDITOR_CARD_HEADER, EDITOR_FLEX_ROW, EDITOR_MIN_W_0), children: [_jsx("span", { className: "graph-editor-text--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: joinClasses(EDITOR_MUTED, 'graph-editor-text--sm', EDITOR_SPACING_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 }) })) })] }));
+                                })] })) : 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: EDITOR_MUTED, children: _jsx("em", { children: emptyStateText }) })) })] }));
 }

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

@@ -1 +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"}
+{"version":3,"file":"ChoiceEdgeAppearanceFields.d.ts","sourceRoot":"","sources":["../../src/panels/ChoiceEdgeAppearanceFields.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIH,KAAK,eAAe,EACpB,KAAK,YAAY,EACpB,MAAM,mCAAmC,CAAC;AAoB3C,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

@@ -1,13 +1,14 @@
 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';
+import { EDITOR_FLEX_ROW, EDITOR_SPACING_MB_0, EDITOR_SPACING_MB_1, EDITOR_SPACING_MB_2, EDITOR_SPACING_MT_3, EDITOR_SPACING_PT_2, joinClasses, } from '../ui/editorClasses.js';
+import { EditorButton, EditorField, EditorInput, EditorLabel, EditorSelect, EditorSwitch, } from '../ui/primitives.js';
 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({
+    const fields = (_jsxs(_Fragment, { children: [_jsx(EditorSwitch, { id: `choice-edge-show-label-${choice.id}`, className: EDITOR_SPACING_MB_2, label: "Show label on canvas", checked: hints.showLabel !== false, disabled: isPublished, onChange: (event) => onPatch({ showLabel: event.target.checked }) }), _jsxs(EditorField, { className: EDITOR_SPACING_MB_2, children: [_jsx(EditorLabel, { className: joinClasses('graph-editor-text--sm', EDITOR_SPACING_MB_1), children: "Stroke color" }), _jsxs("div", { className: joinClasses(EDITOR_FLEX_ROW, 'graph-editor-flex--gap'), children: [_jsx(EditorInput, { type: "color", className: "graph-editor-appearance-color-input", value: resolveEdgeStrokeColorForDisplay(choice), disabled: isPublished, onChange: (event) => onPatch({ strokeColor: event.target.value }) }), _jsx(EditorButton, { tone: "neutral", disabled: isPublished || hints.strokeColor === undefined, onClick: () => onPatch({ strokeColor: undefined }), children: "Reset" })] })] }), _jsxs(EditorField, { className: EDITOR_SPACING_MB_0, children: [_jsx(EditorLabel, { className: joinClasses('graph-editor-text--sm', EDITOR_SPACING_MB_1), children: "Edge type" }), _jsx(EditorSelect, { 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] }));
+    return (_jsxs("div", { className: joinClasses('graph-editor-card__section', 'graph-editor-card__section--border-top', EDITOR_SPACING_MT_3, EDITOR_SPACING_PT_2), children: [_jsx("div", { className: joinClasses('graph-editor-text--sm', 'graph-editor-text--semibold', EDITOR_SPACING_MB_2), children: "Edge appearance (canvas only)" }), fields] }));
 }

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

@@ -1 +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"}
+{"version":3,"file":"ChoiceTemplatesPanel.d.ts","sourceRoot":"","sources":["../../src/panels/ChoiceTemplatesPanel.tsx"],"names":[],"mappings":"AAoBA;;;;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,+BAoCrC"}

package/dist/panels/ChoiceTemplatesPanel.js

@@ -1,9 +1,10 @@
 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';
+import PanelHeaderCollapseCarets from '../lib/PanelHeaderCollapseCarets.js';
+import { EDITOR_CARD, EDITOR_CARD_BODY, EDITOR_CARD_HEADER, EDITOR_FLEX_BETWEEN, EDITOR_FLEX_ROW, EDITOR_FLEX_WRAP, EDITOR_HIDDEN, EDITOR_MUTED, EDITOR_SPACING_MB_0, EDITOR_SPACING_MB_3, EDITOR_SPACING_PY_2, joinClasses, } from '../ui/editorClasses.js';
+import { EditorButton } from '../ui/primitives.js';
 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." })) })] }));
+    return (_jsxs("div", { className: joinClasses(EDITOR_CARD, EDITOR_SPACING_MB_3), children: [_jsxs("div", { className: joinClasses(EDITOR_CARD_HEADER, EDITOR_FLEX_BETWEEN), children: [_jsx("span", { className: "graph-editor-text--semibold", children: "Choice templates" }), _jsx(PanelHeaderCollapseCarets, { expanded: expanded, onToggle: () => setExpanded((value) => !value) })] }), _jsx("div", { className: joinClasses(EDITOR_CARD_BODY, EDITOR_SPACING_PY_2, !expanded && EDITOR_HIDDEN), "aria-hidden": !expanded, children: selectedNodeId ? (_jsx("div", { className: joinClasses(EDITOR_FLEX_ROW, EDITOR_FLEX_WRAP, 'graph-editor-flex--gap'), children: templates.map((template) => (_jsx(EditorButton, { tone: "neutral", disabled: disabled, title: template.choices.map((choice) => choice.label).join(' · '), onClick: () => onApplyTemplate(template), children: template.label }, template.id))) })) : (_jsx("p", { className: joinClasses(EDITOR_MUTED, 'graph-editor-text--sm', EDITOR_SPACING_MB_0), children: "Select a node to add preset choices." })) })] }));
 }

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,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"}
+{"version":3,"file":"GraphEditorInfoPanel.d.ts","sourceRoot":"","sources":["../../src/panels/GraphEditorInfoPanel.tsx"],"names":[],"mappings":"AAIA,OAAO,EAGH,KAAK,cAAc,EACnB,KAAK,mBAAmB,EAC3B,MAAM,mCAAmC,CAAC;AAyB3C,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,+BAyFrC"}

package/dist/panels/GraphEditorInfoPanel.js

@@ -1,13 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { Badge, Form, Table } from 'react-bootstrap';
-import PanelHeaderCollapseCarets from '../lib/PanelHeaderCollapseCarets';
+import PanelHeaderCollapseCarets from '../lib/PanelHeaderCollapseCarets.js';
 import { EDITOR_EDGE_TYPE_OPTIONS, getAutosaveStatusLabel, } from '@signalsafe/tree-spec-editor-core';
+import { EDITOR_CARD, EDITOR_CARD_BODY, EDITOR_CARD_HEADER, EDITOR_ALIGN_TOP, EDITOR_FLEX_ROW, EDITOR_FLEX_WRAP, EDITOR_HIDDEN, EDITOR_MONO, EDITOR_MUTED, EDITOR_SPACING_M_0, EDITOR_SPACING_MB_0, EDITOR_SPACING_MB_1, EDITOR_SPACING_MB_2, EDITOR_SPACING_MB_3, EDITOR_SPACING_MT_1, EDITOR_TABLE, EDITOR_TEXT_BREAK, editorBadgeToneClass, joinClasses, } from '../ui/editorClasses.js';
+import { EditorField, EditorLabel, EditorSelect } from '../ui/primitives.js';
 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 })] }));
+    return (_jsxs("tr", { children: [_jsx("td", { className: EDITOR_ALIGN_TOP, children: _jsx("strong", { children: label }) }), _jsx("td", { children: value })] }));
 }
 const STATUS_DRAFT = 'Draft';
 const STATUS_PUBLISHED = 'Published (read-only)';
@@ -19,7 +20,7 @@ function autosaveDisplay(isPublished, status) {
 }
 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) })] }) }), _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
+    return (_jsxs("div", { className: joinClasses(EDITOR_CARD, EDITOR_SPACING_MB_3), children: [_jsx("div", { className: EDITOR_CARD_HEADER, children: _jsxs("div", { className: joinClasses(EDITOR_FLEX_ROW, EDITOR_FLEX_WRAP), children: [_jsx("h5", { className: EDITOR_SPACING_MB_0, children: title }), _jsx(PanelHeaderCollapseCarets, { expanded: expanded, onToggle: () => setExpanded((v) => !v) })] }) }), _jsxs("div", { className: joinClasses(EDITOR_CARD_BODY, 'graph-editor-card__body--flush', !expanded && EDITOR_HIDDEN), "aria-hidden": !expanded, children: [_jsx("table", { className: joinClasses(EDITOR_TABLE, EDITOR_SPACING_M_0), children: _jsxs("tbody", { children: [_jsx(PropertyRow, { label: "Name", value: name }), _jsx(PropertyRow, { label: "Status", value: _jsx("span", { className: editorBadgeToneClass(isPublished ? 'success' : 'secondary'), children: isPublished ? STATUS_PUBLISHED : STATUS_DRAFT }) }), _jsx(PropertyRow, { label: "Save state", value: _jsx("span", { className: EDITOR_MUTED, children: autosaveDisplay(isPublished, autosaveStatus) }) }), _jsx(PropertyRow, { label: "Validated", value: _jsx("span", { className: EDITOR_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] })] }));
+                                            : 'Not validated' }) }), _jsx(PropertyRow, { label: "Scenario ID", value: _jsx("span", { className: joinClasses(EDITOR_MONO, 'graph-editor-text--sm', EDITOR_TEXT_BREAK), children: scenarioId }) }), _jsx(PropertyRow, { label: "Version ID", value: _jsx("span", { className: joinClasses(EDITOR_MONO, 'graph-editor-text--sm', EDITOR_TEXT_BREAK), children: versionId }) }), _jsx(PropertyRow, { label: "Created", value: createdAt ? formatTimestamp(createdAt) : '—' }), _jsx(PropertyRow, { label: "Updated", value: updatedAt ? formatTimestamp(updatedAt) : '—' })] }) }), onUpdateDefaultEdgeType ? (_jsxs("div", { className: "graph-editor-card__section graph-editor-card__section--border-top", children: [_jsx("div", { className: joinClasses('graph-editor-text--sm', 'graph-editor-text--semibold', EDITOR_SPACING_MB_2), children: "Global" }), _jsxs(EditorField, { className: EDITOR_SPACING_MB_0, children: [_jsx(EditorLabel, { className: joinClasses('graph-editor-text--sm', EDITOR_SPACING_MB_1), children: "Scenario default edge type" }), _jsx(EditorSelect, { 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: joinClasses(EDITOR_MUTED, 'graph-editor-text--sm', EDITOR_SPACING_MT_1), children: "Used when a choice edge type is set to Default." })] })] })) : null] })] }));
 }

package/dist/panels/InspectorPanel.d.ts

@@ -1,4 +1,4 @@
-import { type InspectorPanelProps } from './inspector/types';
-export { DEFAULT_OUTCOME_OPTIONS, type ChoiceTypeOption, type InspectorChoiceRenderContext, type InspectorNodeRenderContext, type InspectorPanelProps, } from './inspector/types';
+import { type InspectorPanelProps } from './inspector/types.js';
+export { DEFAULT_OUTCOME_OPTIONS, type ChoiceTypeOption, type InspectorChoiceRenderContext, type InspectorNodeRenderContext, type InspectorPanelProps, } from './inspector/types.js';
 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":"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"}
+{"version":3,"file":"InspectorPanel.d.ts","sourceRoot":"","sources":["../../src/panels/InspectorPanel.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAGH,KAAK,mBAAmB,EAC3B,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EACH,uBAAuB,EACvB,KAAK,gBAAgB,EACrB,KAAK,4BAA4B,EACjC,KAAK,0BAA0B,EAC/B,KAAK,mBAAmB,GAC3B,MAAM,sBAAsB,CAAC;AAE9B,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

@@ -14,10 +14,10 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  *   - `renderExtraChoiceFields`: render additional UI below each choice card.
  *   - `choiceTypes` / `onSetChoiceType`: host-defined choice type catalog (stable ids).
  */
-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';
+import ChoiceEditorList from './inspector/ChoiceEditorList.js';
+import RequiredNodeCard from './inspector/RequiredNodeCard.js';
+import { DEFAULT_OUTCOME_OPTIONS, DEFAULT_TYPE_HELPER_TEXT, } from './inspector/types.js';
+export { DEFAULT_OUTCOME_OPTIONS, } from './inspector/types.js';
 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 }) })) }));
+    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: "graph-editor-muted", children: _jsx("em", { children: emptyStateText }) })) }));
 }

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,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"}
+{"version":3,"file":"IssuesPanel.d.ts","sourceRoot":"","sources":["../../src/panels/IssuesPanel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAE3D,OAAO,EAGH,KAAK,UAAU,EACf,KAAK,cAAc,EACtB,MAAM,mCAAmC,CAAC;AA4B3C,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,+BAuI5B"}

package/dist/panels/IssuesPanel.js

@@ -1,10 +1,11 @@
 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, 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';
+import { getIssueSeverityBadgeClass } from '../lib/panelHelpers.js';
+import PanelHeaderCollapseCarets from '../lib/PanelHeaderCollapseCarets.js';
+import { LIST_SELECTION_CLASS, LIST_SELECTION_TEXT_CLASS } from '../lib/selectionStyles.js';
+import { EDITOR_CARD, EDITOR_CARD_BODY, EDITOR_CARD_HEADER, EDITOR_FLEX_BETWEEN, EDITOR_FLEX_GROW_1, EDITOR_FLEX_ROW, EDITOR_FLEX_SHRINK_0, EDITOR_HIDDEN, EDITOR_LIST, EDITOR_LIST_ITEM, EDITOR_MIN_W_0, EDITOR_MONO, EDITOR_MUTED, EDITOR_SCROLL, EDITOR_SPACING_MB_1, EDITOR_TEXT_BREAK, EDITOR_TEXT_END, EDITOR_TEXT_START, joinClasses, } from '../ui/editorClasses.js';
+import { EditorInput } from '../ui/primitives.js';
 function defaultFormatTimestamp(iso) {
     return new Date(iso).toLocaleString();
 }
@@ -42,12 +43,10 @@ export default function IssuesPanel({ issues, lastValidatedAt, onSelectIssue, is
     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 }) => {
+    return (_jsxs("div", { className: EDITOR_CARD, children: [_jsxs("div", { className: joinClasses(EDITOR_CARD_HEADER, EDITOR_FLEX_BETWEEN), children: [_jsxs("div", { className: joinClasses(EDITOR_FLEX_ROW, EDITOR_MIN_W_0), children: [_jsx("span", { className: "graph-editor-text--semibold", children: title }), _jsx(PanelHeaderCollapseCarets, { expanded: expanded, onToggle: () => setExpanded((v) => !v) })] }), showValidationSummaryInHeader ? (_jsx("span", { className: joinClasses(EDITOR_MUTED, 'graph-editor-text--sm', EDITOR_TEXT_END, EDITOR_FLEX_SHRINK_0), children: lastValidatedAt ? `Validated ${formatTimestamp(lastValidatedAt)}` : 'Not validated' })) : null] }), _jsx("div", { className: joinClasses(EDITOR_CARD_BODY, 'graph-editor-card__body--flush', !expanded && EDITOR_HIDDEN), "aria-hidden": !expanded, children: issues.length === 0 ? (_jsx("div", { className: EDITOR_LIST, children: _jsx("div", { className: joinClasses(EDITOR_LIST_ITEM, EDITOR_MUTED, 'graph-editor-text--sm'), children: _jsx("em", { children: "No issues" }) }) })) : (_jsxs(_Fragment, { children: [_jsx(EditorInput, { className: "graph-editor-input--list-search", placeholder: searchPlaceholder, value: issueSearch, onChange: (e) => onIssueSearchChange(e.target.value) }), _jsx("div", { className: joinClasses(EDITOR_SCROLL, 'overflow-auto-max-h-320'), children: issueEntries.length === 0 ? (_jsx("div", { className: EDITOR_LIST, children: _jsx("div", { className: joinClasses(EDITOR_LIST_ITEM, EDITOR_MUTED, 'graph-editor-text--sm'), children: _jsx("em", { children: "No matching issues." }) }) })) : (_jsx("div", { className: EDITOR_LIST, children: issueEntries.map(({ item: issue, key }) => {
                                     const typeLabel = nodeTypeLabel(tree, issue.node_id);
                                     const headerTitle = issueHeaderTitle(issue, typeLabel);
                                     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));
+                                    return (_jsxs("button", { type: "button", className: joinClasses(EDITOR_LIST_ITEM, 'graph-editor-list__item--button', isSelected && LIST_SELECTION_CLASS, isSelected && LIST_SELECTION_TEXT_CLASS), "aria-current": isSelected ? 'true' : undefined, onClick: () => onSelectIssue(issue), children: [_jsxs("div", { className: joinClasses(EDITOR_FLEX_BETWEEN, EDITOR_SPACING_MB_1, EDITOR_MIN_W_0), children: [_jsxs("div", { className: joinClasses(EDITOR_MIN_W_0, EDITOR_FLEX_GROW_1, EDITOR_TEXT_BREAK, EDITOR_TEXT_START), title: headerTitle, children: [_jsx("span", { className: "graph-editor-text--uppercase graph-editor-text--semibold", children: issue.node_id ?? '—' }), _jsx("span", { className: joinClasses('graph-editor-text--uppercase', !isSelected && EDITOR_MUTED), children: `, ${typeLabel}` })] }), _jsx("span", { className: joinClasses(getIssueSeverityBadgeClass(issue.severity), EDITOR_FLEX_SHRINK_0, 'graph-editor-text--uppercase'), children: issue.severity })] }), _jsx("p", { className: joinClasses(EDITOR_MONO, 'graph-editor-text--sm', EDITOR_TEXT_BREAK, EDITOR_SPACING_MB_1, !isSelected && EDITOR_MUTED), children: issue.message }), issue.choice_id ? (_jsx("small", { className: joinClasses(EDITOR_TEXT_BREAK, !isSelected && EDITOR_MUTED), children: issue.choice_id })) : null] }, key));
                                 }) })) })] })) })] }));
 }

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;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"}
+{"version":3,"file":"NodesPanel.d.ts","sourceRoot":"","sources":["../../src/panels/NodesPanel.tsx"],"names":[],"mappings":"AAGA,OAAO,EAIH,KAAK,UAAU,EACf,KAAK,cAAc,EACtB,MAAM,mCAAmC,CAAC;AA2B3C,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,+BA+J3B"}

package/dist/panels/NodesPanel.js

@@ -1,9 +1,10 @@
 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';
-import { LIST_SELECTION_CLASS, LIST_SELECTION_TEXT_CLASS } from '../lib/selectionStyles';
+import PanelHeaderCollapseCarets from '../lib/PanelHeaderCollapseCarets.js';
+import { LIST_SELECTION_CLASS, LIST_SELECTION_TEXT_CLASS } from '../lib/selectionStyles.js';
+import { EDITOR_CARD, EDITOR_CARD_FOOTER, EDITOR_CARD_HEADER, EDITOR_FLEX_BETWEEN, EDITOR_FLEX_GROW_1, EDITOR_FLEX_ROW, EDITOR_FLEX_SHRINK_0, EDITOR_HIDDEN, EDITOR_LIST, EDITOR_LIST_ITEM, EDITOR_MIN_W_0, EDITOR_MUTED, EDITOR_SCROLL, EDITOR_SPACING_MB_1, EDITOR_SPACING_ME_2, EDITOR_SPACING_MT_3, EDITOR_TEXT_BREAK, EDITOR_TEXT_START, joinClasses, } from '../ui/editorClasses.js';
+import { EditorIconButton, EditorInput, EditorSwitch } from '../ui/primitives.js';
 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) {
@@ -44,11 +45,11 @@ export default function NodesPanel({ tree, nodeSearch, selection, focusNodeId =
         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) => {
+    return (_jsxs("div", { className: joinClasses(EDITOR_CARD, EDITOR_SPACING_MT_3), children: [_jsxs("div", { className: joinClasses(EDITOR_CARD_HEADER, EDITOR_FLEX_BETWEEN), children: [_jsxs("div", { className: joinClasses(EDITOR_FLEX_ROW, EDITOR_MIN_W_0), children: [_jsx("span", { className: "graph-editor-text--semibold", children: "Nodes" }), _jsx(PanelHeaderCollapseCarets, { expanded: expanded, onToggle: () => setExpanded((v) => !v) })] }), onAddNode ? (_jsx(EditorIconButton, { className: joinClasses(EDITOR_FLEX_SHRINK_0, 'graph-editor-btn--primary'), "aria-label": "Add node", title: "Add node", onClick: onAddNode, children: "+" })) : null] }), _jsxs("div", { className: !expanded ? EDITOR_HIDDEN : undefined, "aria-hidden": !expanded, children: [_jsx(EditorInput, { className: "graph-editor-input--list-search", placeholder: searchPlaceholder, value: nodeSearch, onChange: (e) => onNodeSearchChange(e.target.value) }), _jsx("div", { className: joinClasses(EDITOR_SCROLL, 'overflow-auto-max-h-320'), children: filteredNodes.length === 0 ? (_jsx("div", { className: EDITOR_LIST, children: _jsx("div", { className: joinClasses(EDITOR_LIST_ITEM, EDITOR_MUTED, 'graph-editor-text--sm'), children: "No matching nodes." }) })) : (_jsx("div", { className: EDITOR_LIST, children: filteredNodes.map((n) => {
                                 const isSelected = isNodeRowSelected(n.id, selection, focusNodeId);
                                 const typeLabel = n.type || 'unknown';
-                                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" })] }) })] })] }));
+                                return (_jsx("div", { className: joinClasses(EDITOR_LIST_ITEM, isSelected && LIST_SELECTION_CLASS, isSelected && LIST_SELECTION_TEXT_CLASS), "aria-current": isSelected ? 'true' : undefined, children: _jsxs("div", { className: joinClasses(EDITOR_FLEX_BETWEEN, EDITOR_MIN_W_0), children: [_jsxs("button", { type: "button", className: joinClasses('graph-editor-list__item-action', EDITOR_FLEX_GROW_1, EDITOR_TEXT_START, EDITOR_MIN_W_0), onClick: () => onNodeSelect(n.id), children: [_jsx("div", { className: joinClasses(EDITOR_FLEX_BETWEEN, EDITOR_SPACING_MB_1, EDITOR_MIN_W_0), children: _jsxs("div", { className: joinClasses(EDITOR_MIN_W_0, EDITOR_FLEX_GROW_1, EDITOR_TEXT_BREAK, EDITOR_TEXT_START), title: `${n.id}, ${typeLabel}`, children: [_jsx("span", { className: joinClasses('graph-editor-text--uppercase', 'graph-editor-text--semibold', !isSelected && EDITOR_MUTED), children: n.id }), _jsx("span", { className: joinClasses('graph-editor-text--uppercase', !isSelected && EDITOR_MUTED), children: `, ${typeLabel}` })] }) }), _jsx("p", { className: joinClasses('graph-editor-text--sm', EDITOR_TEXT_BREAK, EDITOR_SPACING_MB_1, !isSelected && EDITOR_MUTED), children: n.prompt || '(empty)' }), _jsx("small", { className: !isSelected ? EDITOR_MUTED : undefined, children: choiceLine(n) })] }), onDeleteNode ? (_jsx(EditorIconButton, { className: joinClasses(EDITOR_FLEX_SHRINK_0, isPublished
+                                                    ? 'graph-editor-btn--disabled'
+                                                    : 'graph-editor-btn--danger'), "aria-label": `Delete node ${n.id}`, title: "Delete node", disabled: isPublished, onClick: () => onDeleteNode(n.id), children: "\uD83D\uDDD1" })) : null] }) }, n.id));
+                            }) })) }), _jsx("div", { className: joinClasses(EDITOR_CARD_FOOTER, 'graph-editor-card__footer--border-top'), children: _jsxs("div", { className: EDITOR_FLEX_BETWEEN, children: [_jsx("div", { className: joinClasses(EDITOR_MUTED, 'graph-editor-text--sm', EDITOR_TEXT_BREAK, EDITOR_MIN_W_0, EDITOR_FLEX_GROW_1, EDITOR_SPACING_ME_2), children: tipText }), _jsx(EditorSwitch, { id: "showMiniMapToggle", label: "Mini-map", checked: showMiniMap, onChange: (e) => onShowMiniMapChange(e.target.checked), className: "graph-editor-text--sm" })] }) })] })] }));
 }