@signalsafe/tree-spec-editor 0.2.3 → 0.3.0

package/dist/panels/inspector/ChoiceEditorCard.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Form } from 'react-bootstrap';
 import { END_NODE_ID, getTransition, } from '@signalsafe/tree-spec-editor-core';
 import { LIST_SELECTION_CLASS, LIST_SELECTION_TEXT_CLASS } from '../../lib/selectionStyles.js';
+import { EDITOR_FLEX_ALIGN_END, EDITOR_FLEX_BETWEEN, EDITOR_FLEX_FILL, EDITOR_FLEX_GROW_1, EDITOR_FLEX_ROW, EDITOR_FLEX_SHRINK_0, EDITOR_LIST_ITEM, EDITOR_MIN_W_0, EDITOR_SPACING_MB_0, EDITOR_SPACING_MB_1, EDITOR_SPACING_MB_2, EDITOR_SPACING_MT_0, EDITOR_SPACING_MT_2, joinClasses, } from '../../ui/editorClasses.js';
+import { EditorField, EditorInput, EditorLabel, EditorSelect, } from '../../ui/primitives.js';
 import { choiceActionIconProps } from './choiceActionIconProps.js';
 export default function ChoiceEditorCard({ choice, tree, selectedNode, focusChoiceId, isPublished, canMoveUp, canMoveDown, usedChoiceTypeIds, onUpdateSelectedNode, onDeleteChoice, onMoveChoice, onSetChoiceTarget, onSetChoiceOutcome, onSetChoiceType, choiceTypes, outcomeOptions, hideOutcomeField, renderExtraChoiceFields, onFocusChoice, }) {
     const transition = getTransition(tree, selectedNode.id, choice.id);
@@ -12,18 +13,18 @@ export default function ChoiceEditorCard({ choice, tree, selectedNode, focusChoi
     const knownTypeIds = new Set((choiceTypes ?? []).map((type) => type.id));
     const showTypeSelect = Boolean(choiceTypes?.length && onSetChoiceType);
     const isCustomType = showTypeSelect && !knownTypeIds.has(choice.id);
-    return (_jsxs("div", { id: `choice-editor-${selectedNode.id}-${choice.id}`, className: `list-group-item py-3 px-3${isFocused ? ` ${LIST_SELECTION_CLASS} ${LIST_SELECTION_TEXT_CLASS}` : ''}`, onFocusCapture: () => onFocusChoice?.(choice.id), children: [_jsxs("div", { className: "d-flex w-100 justify-content-between align-items-end gap-2 mb-2", children: [_jsxs("div", { className: "d-flex flex-grow-1 min-w-0 gap-2", children: [showTypeSelect ? (_jsxs(Form.Group, { className: "mb-0 flex-fill min-w-0", children: [_jsx(Form.Label, { className: "mb-1", children: "Type" }), _jsxs(Form.Select, { value: isCustomType ? '__custom__' : choice.id, disabled: isPublished, "aria-label": `Choice type for ${choice.id}`, onChange: (event) => {
+    return (_jsxs("div", { id: `choice-editor-${selectedNode.id}-${choice.id}`, className: joinClasses(EDITOR_LIST_ITEM, isFocused && LIST_SELECTION_CLASS, isFocused && LIST_SELECTION_TEXT_CLASS), onFocusCapture: () => onFocusChoice?.(choice.id), children: [_jsxs("div", { className: joinClasses(EDITOR_FLEX_BETWEEN, EDITOR_SPACING_MB_2, EDITOR_FLEX_ALIGN_END), children: [_jsxs("div", { className: joinClasses(EDITOR_FLEX_ROW, EDITOR_FLEX_GROW_1, EDITOR_MIN_W_0, 'graph-editor-flex--gap'), children: [showTypeSelect ? (_jsxs(EditorField, { className: joinClasses(EDITOR_SPACING_MB_0, EDITOR_FLEX_FILL, EDITOR_MIN_W_0), children: [_jsx(EditorLabel, { className: EDITOR_SPACING_MB_1, children: "Type" }), _jsxs(EditorSelect, { value: isCustomType ? '__custom__' : choice.id, disabled: isPublished, "aria-label": `Choice type for ${choice.id}`, onChange: (event) => {
                                             const nextTypeId = event.target.value;
                                             if (nextTypeId && nextTypeId !== '__custom__') {
                                                 const type = choiceTypes.find((item) => item.id === nextTypeId);
                                                 onSetChoiceType(choice.id, nextTypeId, type?.label);
                                             }
-                                        }, children: [choiceTypes.map((type) => (_jsx("option", { value: type.id, disabled: type.id !== choice.id && usedChoiceTypeIds.has(type.id), title: type.label, children: type.id }, type.id))), isCustomType ? (_jsxs("option", { value: "__custom__", children: [choice.id, " (custom)"] })) : null] })] })) : (_jsxs(Form.Group, { className: "mb-0 flex-fill min-w-0", children: [_jsx(Form.Label, { className: "mb-1", children: "Type" }), _jsx(Form.Control, { plaintext: true, readOnly: true, className: "text-uppercase fw-semibold", value: choice.id })] })), hideOutcomeField ? null : (_jsxs(Form.Group, { className: "mb-0 flex-fill min-w-0", children: [_jsx(Form.Label, { className: "mb-1", children: "Outcome" }), showOutcome ? (_jsx(Form.Select, { value: outcomeValue, disabled: isPublished, "aria-label": `Outcome for ${choice.id}`, onChange: (e) => onSetChoiceOutcome(choice.id, e.target.value), children: outcomeOptions.map((opt) => (_jsx("option", { value: opt.value, children: opt.label }, opt.value))) })) : (_jsx(Form.Select, { disabled: true, "aria-label": `Outcome for ${choice.id}`, value: "", children: _jsx("option", { value: "", children: "When Next is END" }) }))] }))] }), _jsxs("div", { className: "d-flex align-items-center gap-2 flex-shrink-0", children: [onMoveChoice ? (_jsxs(_Fragment, { children: [_jsx("i", { ...choiceActionIconProps(() => onMoveChoice(choice.id, 'up'), 'Move choice up', 'bi bi-chevron-up text-secondary', isPublished || !canMoveUp) }), _jsx("i", { ...choiceActionIconProps(() => onMoveChoice(choice.id, 'down'), 'Move choice down', 'bi bi-chevron-down text-secondary', isPublished || !canMoveDown) })] })) : null, _jsx("i", { ...choiceActionIconProps(() => onDeleteChoice(choice.id), 'Delete choice', 'bi bi-trash text-danger') })] })] }), _jsx(Form.Label, { className: "mt-0", children: "Label" }), _jsx(Form.Control, { value: choice.label, onChange: (event) => {
+                                        }, children: [choiceTypes.map((type) => (_jsx("option", { value: type.id, disabled: type.id !== choice.id && usedChoiceTypeIds.has(type.id), title: type.label, children: type.id }, type.id))), isCustomType ? (_jsxs("option", { value: "__custom__", children: [choice.id, " (custom)"] })) : null] })] })) : (_jsxs(EditorField, { className: joinClasses(EDITOR_SPACING_MB_0, EDITOR_FLEX_FILL, EDITOR_MIN_W_0), children: [_jsx(EditorLabel, { className: EDITOR_SPACING_MB_1, children: "Type" }), _jsx(EditorInput, { readOnly: true, className: "graph-editor-input--plain graph-editor-text--uppercase graph-editor-text--semibold", value: choice.id })] })), hideOutcomeField ? null : (_jsxs(EditorField, { className: joinClasses(EDITOR_SPACING_MB_0, EDITOR_FLEX_FILL, EDITOR_MIN_W_0), children: [_jsx(EditorLabel, { className: EDITOR_SPACING_MB_1, children: "Outcome" }), showOutcome ? (_jsx(EditorSelect, { value: outcomeValue, disabled: isPublished, "aria-label": `Outcome for ${choice.id}`, onChange: (e) => onSetChoiceOutcome(choice.id, e.target.value), children: outcomeOptions.map((opt) => (_jsx("option", { value: opt.value, children: opt.label }, opt.value))) })) : (_jsx(EditorSelect, { disabled: true, "aria-label": `Outcome for ${choice.id}`, value: "", children: _jsx("option", { value: "", children: "When Next is END" }) }))] }))] }), _jsxs("div", { className: joinClasses(EDITOR_FLEX_ROW, EDITOR_FLEX_SHRINK_0, 'graph-editor-flex--gap'), children: [onMoveChoice ? (_jsxs(_Fragment, { children: [_jsx("span", { ...choiceActionIconProps(() => onMoveChoice(choice.id, 'up'), 'Move choice up', undefined, isPublished || !canMoveUp, '↑') }), _jsx("span", { ...choiceActionIconProps(() => onMoveChoice(choice.id, 'down'), 'Move choice down', undefined, isPublished || !canMoveDown, '↓') })] })) : null, _jsx("span", { ...choiceActionIconProps(() => onDeleteChoice(choice.id), 'Delete choice', 'graph-editor-action-icon--danger', isPublished, '×') })] })] }), _jsx(EditorLabel, { className: EDITOR_SPACING_MT_0, children: "Label" }), _jsx(EditorInput, { 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" })] }), renderExtraChoiceFields
+                } }), _jsx(EditorLabel, { className: EDITOR_SPACING_MT_2, children: "Next" }), _jsxs(EditorSelect, { 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" })] }), renderExtraChoiceFields
                 ? renderExtraChoiceFields({
                     tree,
                     node: selectedNode,

package/dist/panels/inspector/ChoiceEditorList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChoiceEditorList.d.ts","sourceRoot":"","sources":["../../../src/panels/inspector/ChoiceEditorList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAIhF,OAAO,KAAK,EAAE,gBAAgB,EAAE,4BAA4B,EAAE,MAAM,SAAS,CAAC;AAE9E,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACrC,IAAI,EACJ,YAAY,EACZ,aAAa,EACb,WAAW,EACX,WAAW,EACX,oBAAoB,EACpB,cAAc,EACd,YAAY,EACZ,iBAAiB,EACjB,kBAAkB,EAClB,eAAe,EACf,WAAW,EACX,cAAc,EACd,gBAAgB,EAChB,uBAAuB,EACvB,aAAa,GAChB,EAAE,QAAQ,CAAC;IACR,IAAI,EAAE,UAAU,CAAC;IACjB,YAAY,EAAE,UAAU,CAAC;IACzB,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,oBAAoB,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;IAC3D,cAAc,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,GAAG,MAAM,KAAK,IAAI,CAAC;IACpE,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;IAChE,eAAe,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACpF,WAAW,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAC9C,cAAc,EAAE,aAAa,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAChE,gBAAgB,EAAE,OAAO,CAAC;IAC1B,uBAAuB,CAAC,EAAE,CAAC,GAAG,EAAE,4BAA4B,KAAK,SAAS,CAAC;IAC3E,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C,CAAC,+BAqED"}
+{"version":3,"file":"ChoiceEditorList.d.ts","sourceRoot":"","sources":["../../../src/panels/inspector/ChoiceEditorList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAsBhF,OAAO,KAAK,EAAE,gBAAgB,EAAE,4BAA4B,EAAE,MAAM,YAAY,CAAC;AAEjF,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACrC,IAAI,EACJ,YAAY,EACZ,aAAa,EACb,WAAW,EACX,WAAW,EACX,oBAAoB,EACpB,cAAc,EACd,YAAY,EACZ,iBAAiB,EACjB,kBAAkB,EAClB,eAAe,EACf,WAAW,EACX,cAAc,EACd,gBAAgB,EAChB,uBAAuB,EACvB,aAAa,GAChB,EAAE,QAAQ,CAAC;IACR,IAAI,EAAE,UAAU,CAAC;IACjB,YAAY,EAAE,UAAU,CAAC;IACzB,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,oBAAoB,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;IAC3D,cAAc,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,GAAG,MAAM,KAAK,IAAI,CAAC;IACpE,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;IAChE,eAAe,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACpF,WAAW,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAC9C,cAAc,EAAE,aAAa,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAChE,gBAAgB,EAAE,OAAO,CAAC;IAC1B,uBAAuB,CAAC,EAAE,CAAC,GAAG,EAAE,4BAA4B,KAAK,SAAS,CAAC;IAC3E,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C,CAAC,+BAqED"}

package/dist/panels/inspector/ChoiceEditorList.js

@@ -1,10 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 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_HIDDEN, EDITOR_LIST, EDITOR_MIN_W_0, EDITOR_MUTED, EDITOR_SCROLL, EDITOR_SPACING_MT_3, EDITOR_SPACING_PX_3, EDITOR_SPACING_PY_3, joinClasses, } from '../../ui/editorClasses.js';
+import { EditorIconButton } from '../../ui/primitives.js';
 import ChoiceEditorCard from './ChoiceEditorCard.js';
 export default function ChoiceEditorList({ tree, selectedNode, focusChoiceId, isPublished, onAddChoice, onUpdateSelectedNode, onDeleteChoice, onMoveChoice, onSetChoiceTarget, onSetChoiceOutcome, onSetChoiceType, choiceTypes, outcomeOptions, hideOutcomeField, renderExtraChoiceFields, onFocusChoice, }) {
     const choices = selectedNode.choices ?? [];
     const [choicesExpanded, setChoicesExpanded] = useState(true);
     const usedChoiceTypeIds = new Set(choices.map((choice) => choice.id));
-    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("div", { className: "d-flex align-items-center gap-1 flex-shrink-0", children: _jsx("button", { type: "button", className: "btn p-0 border-0 bg-transparent flex-shrink-0", "aria-label": "Add choice", title: "Add choice", disabled: isPublished, onClick: onAddChoice, children: _jsx("i", { className: `bi bi-plus-lg action-icon${isPublished ? ' text-secondary opacity-50' : ' text-primary 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 overflow-auto-max-h-320", children: choices.map((choice, index) => (_jsx(ChoiceEditorCard, { choice: choice, tree: tree, selectedNode: selectedNode, focusChoiceId: focusChoiceId, isPublished: isPublished, canMoveUp: index > 0, canMoveDown: index < choices.length - 1, usedChoiceTypeIds: usedChoiceTypeIds, onUpdateSelectedNode: onUpdateSelectedNode, onDeleteChoice: onDeleteChoice, onMoveChoice: onMoveChoice, onSetChoiceTarget: onSetChoiceTarget, onSetChoiceOutcome: onSetChoiceOutcome, onSetChoiceType: onSetChoiceType, choiceTypes: choiceTypes, outcomeOptions: outcomeOptions, hideOutcomeField: hideOutcomeField, renderExtraChoiceFields: renderExtraChoiceFields, onFocusChoice: onFocusChoice }, choice.id))) })) })] }));
+    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: "Choices" }), _jsx(PanelHeaderCollapseCarets, { expanded: choicesExpanded, onToggle: () => setChoicesExpanded((v) => !v) })] }), _jsx("div", { className: joinClasses(EDITOR_FLEX_ROW, EDITOR_FLEX_SHRINK_0), children: _jsx(EditorIconButton, { className: joinClasses(EDITOR_FLEX_SHRINK_0, isPublished ? 'graph-editor-btn--disabled' : 'graph-editor-btn--primary'), "aria-label": "Add choice", title: "Add choice", disabled: isPublished, onClick: onAddChoice, children: "+" }) })] }), _jsx("div", { className: joinClasses(EDITOR_CARD_BODY, 'graph-editor-card__body--flush', !choicesExpanded && EDITOR_HIDDEN), "aria-hidden": !choicesExpanded, children: choices.length === 0 ? (_jsx("div", { className: joinClasses(EDITOR_MUTED, 'graph-editor-text--sm', EDITOR_SPACING_PY_3, EDITOR_SPACING_PX_3), children: _jsx("em", { children: "No choices" }) })) : (_jsx("div", { className: joinClasses(EDITOR_LIST, EDITOR_SCROLL, 'overflow-auto-max-h-320'), children: choices.map((choice, index) => (_jsx(ChoiceEditorCard, { choice: choice, tree: tree, selectedNode: selectedNode, focusChoiceId: focusChoiceId, isPublished: isPublished, canMoveUp: index > 0, canMoveDown: index < choices.length - 1, usedChoiceTypeIds: usedChoiceTypeIds, onUpdateSelectedNode: onUpdateSelectedNode, onDeleteChoice: onDeleteChoice, onMoveChoice: onMoveChoice, onSetChoiceTarget: onSetChoiceTarget, onSetChoiceOutcome: onSetChoiceOutcome, onSetChoiceType: onSetChoiceType, choiceTypes: choiceTypes, outcomeOptions: outcomeOptions, hideOutcomeField: hideOutcomeField, renderExtraChoiceFields: renderExtraChoiceFields, onFocusChoice: onFocusChoice }, choice.id))) })) })] }));
 }

package/dist/panels/inspector/NodeTypeField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NodeTypeField.d.ts","sourceRoot":"","sources":["../../../src/panels/inspector/NodeTypeField.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEH,KAAK,UAAU,EAClB,MAAM,mCAAmC,CAAC;AAE3C,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAClC,YAAY,EACZ,WAAW,EACX,oBAAoB,EACpB,cAAc,GACjB,EAAE,QAAQ,CAAC;IACR,YAAY,EAAE,UAAU,CAAC;IACzB,WAAW,EAAE,OAAO,CAAC;IACrB,oBAAoB,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;IAC3D,cAAc,EAAE,MAAM,CAAC;CAC1B,CAAC,+BAkCD"}
+{"version":3,"file":"NodeTypeField.d.ts","sourceRoot":"","sources":["../../../src/panels/inspector/NodeTypeField.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEH,KAAK,UAAU,EAClB,MAAM,mCAAmC,CAAC;AAW3C,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAClC,YAAY,EACZ,WAAW,EACX,oBAAoB,EACpB,cAAc,GACjB,EAAE,QAAQ,CAAC;IACR,YAAY,EAAE,UAAU,CAAC;IACzB,WAAW,EAAE,OAAO,CAAC;IACrB,oBAAoB,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;IAC3D,cAAc,EAAE,MAAM,CAAC;CAC1B,CAAC,+BAkCD"}

package/dist/panels/inspector/NodeTypeField.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Form } from 'react-bootstrap';
 import { TREE_SPEC_NODE_TYPE_PRESETS, } from '@signalsafe/tree-spec-editor-core';
+import { EDITOR_MUTED, EDITOR_SPACING_MB_2, EDITOR_SPACING_MT_1, EDITOR_SPACING_MT_2, joinClasses, } from '../../ui/editorClasses.js';
+import { EditorField, EditorInput, EditorLabel, EditorSelect } from '../../ui/primitives.js';
 export default 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) => {
+    return (_jsxs(EditorField, { className: EDITOR_SPACING_MB_2, children: [_jsx(EditorLabel, { children: "Type" }), _jsxs(EditorSelect, { 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 })] }));
+                }, 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(EditorInput, { className: EDITOR_SPACING_MT_2, value: selectedNode.type, onChange: (e) => onUpdateSelectedNode({ type: e.target.value }), placeholder: "Enter custom type\u2026", disabled: isPublished })), _jsx("div", { className: joinClasses(EDITOR_MUTED, 'graph-editor-text--sm', EDITOR_SPACING_MT_1), children: typeHelperText })] }));
 }

package/dist/panels/inspector/RequiredNodeCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RequiredNodeCard.d.ts","sourceRoot":"","sources":["../../../src/panels/inspector/RequiredNodeCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAe,SAAS,EAAE,MAAM,OAAO,CAAC;AAIpD,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAIhF,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,SAAS,CAAC;AAE1D,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACrC,IAAI,EACJ,YAAY,EACZ,WAAW,EACX,KAAK,EACL,cAAc,EACd,oBAAoB,EACpB,oBAAoB,EACpB,qBAAqB,GACxB,EAAE,QAAQ,CAAC;IACR,IAAI,EAAE,UAAU,CAAC;IACjB,YAAY,EAAE,UAAU,CAAC;IACzB,WAAW,EAAE,OAAO,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,MAAM,CAAC;IACvB,oBAAoB,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;IAC3D,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;IAClC,qBAAqB,CAAC,EAAE,CAAC,GAAG,EAAE,0BAA0B,KAAK,SAAS,CAAC;CAC1E,CAAC,+BA4DD"}
+{"version":3,"file":"RequiredNodeCard.d.ts","sourceRoot":"","sources":["../../../src/panels/inspector/RequiredNodeCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAe,SAAS,EAAE,MAAM,OAAO,CAAC;AAGpD,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAiBhF,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,YAAY,CAAC;AAE7D,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACrC,IAAI,EACJ,YAAY,EACZ,WAAW,EACX,KAAK,EACL,cAAc,EACd,oBAAoB,EACpB,oBAAoB,EACpB,qBAAqB,GACxB,EAAE,QAAQ,CAAC;IACR,IAAI,EAAE,UAAU,CAAC;IACjB,YAAY,EAAE,UAAU,CAAC;IACzB,WAAW,EAAE,OAAO,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,MAAM,CAAC;IACvB,oBAAoB,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC;IAC3D,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;IAClC,qBAAqB,CAAC,EAAE,CAAC,GAAG,EAAE,0BAA0B,KAAK,SAAS,CAAC;CAC1E,CAAC,+BA2DD"}

package/dist/panels/inspector/RequiredNodeCard.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { Form } from 'react-bootstrap';
 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_HIDDEN, EDITOR_MIN_W_0, EDITOR_SPACING_MB_2, joinClasses, } from '../../ui/editorClasses.js';
+import { EditorField, EditorIconButton, EditorLabel, EditorTextarea } from '../../ui/primitives.js';
 import NodeTypeField from './NodeTypeField.js';
 export default function RequiredNodeCard({ tree, selectedNode, isPublished, title, typeHelperText, onUpdateSelectedNode, onDeleteSelectedNode, renderExtraNodeFields, }) {
     const [requiredExpanded, setRequiredExpanded] = useState(true);
-    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: 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
+    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: requiredExpanded, onToggle: () => setRequiredExpanded((v) => !v) })] }), onDeleteSelectedNode ? (_jsx(EditorIconButton, { className: joinClasses(EDITOR_FLEX_SHRINK_0, isPublished ? 'graph-editor-btn--disabled' : 'graph-editor-btn--danger'), "aria-label": "Delete node", title: "Delete node", disabled: isPublished, onClick: onDeleteSelectedNode, children: "\uD83D\uDDD1" })) : null] }), _jsxs("div", { className: joinClasses(EDITOR_CARD_BODY, !requiredExpanded && EDITOR_HIDDEN), "aria-hidden": !requiredExpanded, children: [_jsx(NodeTypeField, { selectedNode: selectedNode, isPublished: isPublished, onUpdateSelectedNode: onUpdateSelectedNode, typeHelperText: typeHelperText }), _jsxs(EditorField, { className: EDITOR_SPACING_MB_2, children: [_jsx(EditorLabel, { children: "Prompt" }), _jsx(EditorTextarea, { rows: 4, value: selectedNode.prompt, onChange: (e) => onUpdateSelectedNode({ prompt: e.target.value }) })] }), renderExtraNodeFields
                         ? renderExtraNodeFields({
                             tree,
                             node: selectedNode,

package/dist/panels/inspector/choiceActionIconProps.d.ts

@@ -1,11 +1,12 @@
-import type { KeyboardEvent, MouseEvent } from 'react';
-export declare function choiceActionIconProps(onClick: () => void, title: string, className: string, disabled?: boolean): {
+import type { KeyboardEvent, MouseEvent, ReactNode } from 'react';
+export declare function choiceActionIconProps(onClick: () => void, title: string, className?: string, disabled?: boolean, children?: ReactNode): {
     role: "button";
     tabIndex: number;
     title: string;
     'aria-label': string;
     'aria-disabled': boolean | undefined;
     className: string;
+    children: ReactNode;
     onClick: ((event: MouseEvent<HTMLElement>) => void) | undefined;
     onKeyDown: ((event: KeyboardEvent<HTMLElement>) => void) | undefined;
 };

package/dist/panels/inspector/choiceActionIconProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"choiceActionIconProps.d.ts","sourceRoot":"","sources":["../../../src/panels/inspector/choiceActionIconProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEvD,wBAAgB,qBAAqB,CACjC,OAAO,EAAE,MAAM,IAAI,EACnB,KAAK,EAAE,MAAM,EACb,SAAS,EAAE,MAAM,EACjB,QAAQ,UAAQ;;;;;;;sBAaE,UAAU,CAAC,WAAW,CAAC;wBAOvB,aAAa,CAAC,WAAW,CAAC;EAQ/C"}
+{"version":3,"file":"choiceActionIconProps.d.ts","sourceRoot":"","sources":["../../../src/panels/inspector/choiceActionIconProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIlE,wBAAgB,qBAAqB,CACjC,OAAO,EAAE,MAAM,IAAI,EACnB,KAAK,EAAE,MAAM,EACb,SAAS,CAAC,EAAE,MAAM,EAClB,QAAQ,UAAQ,EAChB,QAAQ,CAAC,EAAE,SAAS;;;;;;;;sBAgBF,UAAU,CAAC,WAAW,CAAC;wBAOvB,aAAa,CAAC,WAAW,CAAC;EAQ/C"}

package/dist/panels/inspector/choiceActionIconProps.js

@@ -1,11 +1,13 @@
-export function choiceActionIconProps(onClick, title, className, disabled = false) {
+import { joinClasses } from '../../ui/editorClasses.js';
+export function choiceActionIconProps(onClick, title, className, disabled = false, children) {
     return {
         role: 'button',
         tabIndex: disabled ? -1 : 0,
         title,
         'aria-label': title,
         'aria-disabled': disabled ? true : undefined,
-        className: `${className} action-icon flex-shrink-0${disabled ? ' text-secondary opacity-50' : ' cursor-pointer'}`,
+        className: joinClasses('graph-editor-action-icon', className, disabled && 'graph-editor-action-icon--disabled'),
+        children,
         onClick: disabled
             ? undefined
             : (event) => {

package/dist/ui/editorClasses.d.ts

@@ -0,0 +1,66 @@
+/** UI-kit agnostic layout and shell class hooks (host styles via CSS or UI library). */
+export declare const EDITOR_CARD = "graph-editor-card";
+export declare const EDITOR_CARD_HEADER = "graph-editor-card__header";
+export declare const EDITOR_CARD_BODY = "graph-editor-card__body";
+export declare const EDITOR_CARD_FOOTER = "graph-editor-card__footer";
+export declare const EDITOR_LIST = "graph-editor-list";
+export declare const EDITOR_LIST_ITEM = "graph-editor-list__item";
+export declare const EDITOR_INPUT = "graph-editor-input";
+export declare const EDITOR_SELECT = "graph-editor-select";
+export declare const EDITOR_TEXTAREA = "graph-editor-textarea";
+export declare const EDITOR_CHECKBOX = "graph-editor-checkbox";
+export declare const EDITOR_BTN = "graph-editor-btn";
+export declare const EDITOR_BTN_ICON = "graph-editor-btn graph-editor-btn--icon";
+export declare const EDITOR_BADGE = "graph-editor-badge";
+export declare const EDITOR_MODAL = "graph-editor-modal";
+export declare const EDITOR_MODAL_DIALOG = "graph-editor-modal__dialog";
+export declare const EDITOR_MODAL_CONTENT = "graph-editor-modal__content";
+export declare const EDITOR_MODAL_HEADER = "graph-editor-modal__header";
+export declare const EDITOR_MODAL_BODY = "graph-editor-modal__body";
+export declare const EDITOR_MODAL_FOOTER = "graph-editor-modal__footer";
+export declare const EDITOR_MODAL_TITLE = "graph-editor-modal__title";
+export declare const EDITOR_ALERT = "graph-editor-alert";
+export declare const EDITOR_TABLE = "graph-editor-table";
+export declare const EDITOR_DROPDOWN = "graph-editor-dropdown";
+export declare const EDITOR_DROPDOWN_MENU = "graph-editor-dropdown__menu";
+export declare const EDITOR_DROPDOWN_ITEM = "graph-editor-dropdown__item";
+export declare const EDITOR_DROPDOWN_DIVIDER = "graph-editor-dropdown__divider";
+export declare const EDITOR_FIELD = "graph-editor-field";
+export declare const EDITOR_FIELD_LABEL = "graph-editor-field__label";
+export declare const EDITOR_FLEX = "graph-editor-flex";
+export declare const EDITOR_FLEX_BETWEEN = "graph-editor-flex graph-editor-flex--between";
+export declare const EDITOR_FLEX_ROW = "graph-editor-flex graph-editor-flex--row";
+export declare const EDITOR_FLEX_ALIGN_END = "graph-editor-flex graph-editor-flex--align-end";
+export declare const EDITOR_FLEX_WRAP = "graph-editor-flex graph-editor-flex--wrap";
+export declare const EDITOR_ALIGN_TOP = "graph-editor-align-top";
+export declare const EDITOR_MIN_W_0 = "graph-editor-min-w-0";
+export declare const EDITOR_FLEX_SHRINK_0 = "graph-editor-flex-shrink-0";
+export declare const EDITOR_FLEX_GROW_1 = "graph-editor-flex-grow-1";
+export declare const EDITOR_FLEX_FILL = "graph-editor-flex-fill";
+export declare const EDITOR_TEXT_BREAK = "graph-editor-text--break";
+export declare const EDITOR_TEXT_START = "graph-editor-text--start";
+export declare const EDITOR_TEXT_END = "graph-editor-text--end";
+export declare const EDITOR_SPACING_MB_0 = "graph-editor-spacing--mb-0";
+export declare const EDITOR_SPACING_MB_1 = "graph-editor-spacing--mb-1";
+export declare const EDITOR_SPACING_MB_2 = "graph-editor-spacing--mb-2";
+export declare const EDITOR_SPACING_MB_3 = "graph-editor-spacing--mb-3";
+export declare const EDITOR_SPACING_MT_0 = "graph-editor-spacing--mt-0";
+export declare const EDITOR_SPACING_MT_1 = "graph-editor-spacing--mt-1";
+export declare const EDITOR_SPACING_MT_2 = "graph-editor-spacing--mt-2";
+export declare const EDITOR_SPACING_MT_3 = "graph-editor-spacing--mt-3";
+export declare const EDITOR_SPACING_ME_2 = "graph-editor-spacing--me-2";
+export declare const EDITOR_SPACING_MS_AUTO = "graph-editor-spacing--ms-auto";
+export declare const EDITOR_SPACING_PY_2 = "graph-editor-spacing--py-2";
+export declare const EDITOR_SPACING_PY_3 = "graph-editor-spacing--py-3";
+export declare const EDITOR_SPACING_PX_3 = "graph-editor-spacing--px-3";
+export declare const EDITOR_SPACING_PT_2 = "graph-editor-spacing--pt-2";
+export declare const EDITOR_SPACING_M_0 = "graph-editor-spacing--m-0";
+export declare const EDITOR_MUTED = "graph-editor-muted";
+export declare const EDITOR_MONO = "graph-editor-mono";
+export declare const EDITOR_HIDDEN = "graph-editor-hidden";
+export declare const EDITOR_SCROLL = "graph-editor-scroll";
+export declare function editorBtnToneClass(variant?: string): string;
+export declare function editorBadgeToneClass(variant?: string): string;
+export declare function editorAlertToneClass(tone: 'info' | 'danger'): string;
+export declare function joinClasses(...parts: Array<string | false | null | undefined>): string;
+//# sourceMappingURL=editorClasses.d.ts.map

package/dist/ui/editorClasses.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"editorClasses.d.ts","sourceRoot":"","sources":["../../src/ui/editorClasses.ts"],"names":[],"mappings":"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"}

package/dist/ui/editorClasses.js

@@ -0,0 +1,89 @@
+/** UI-kit agnostic layout and shell class hooks (host styles via CSS or UI library). */
+export const EDITOR_CARD = 'graph-editor-card';
+export const EDITOR_CARD_HEADER = 'graph-editor-card__header';
+export const EDITOR_CARD_BODY = 'graph-editor-card__body';
+export const EDITOR_CARD_FOOTER = 'graph-editor-card__footer';
+export const EDITOR_LIST = 'graph-editor-list';
+export const EDITOR_LIST_ITEM = 'graph-editor-list__item';
+export const EDITOR_INPUT = 'graph-editor-input';
+export const EDITOR_SELECT = 'graph-editor-select';
+export const EDITOR_TEXTAREA = 'graph-editor-textarea';
+export const EDITOR_CHECKBOX = 'graph-editor-checkbox';
+export const EDITOR_BTN = 'graph-editor-btn';
+export const EDITOR_BTN_ICON = 'graph-editor-btn graph-editor-btn--icon';
+export const EDITOR_BADGE = 'graph-editor-badge';
+export const EDITOR_MODAL = 'graph-editor-modal';
+export const EDITOR_MODAL_DIALOG = 'graph-editor-modal__dialog';
+export const EDITOR_MODAL_CONTENT = 'graph-editor-modal__content';
+export const EDITOR_MODAL_HEADER = 'graph-editor-modal__header';
+export const EDITOR_MODAL_BODY = 'graph-editor-modal__body';
+export const EDITOR_MODAL_FOOTER = 'graph-editor-modal__footer';
+export const EDITOR_MODAL_TITLE = 'graph-editor-modal__title';
+export const EDITOR_ALERT = 'graph-editor-alert';
+export const EDITOR_TABLE = 'graph-editor-table';
+export const EDITOR_DROPDOWN = 'graph-editor-dropdown';
+export const EDITOR_DROPDOWN_MENU = 'graph-editor-dropdown__menu';
+export const EDITOR_DROPDOWN_ITEM = 'graph-editor-dropdown__item';
+export const EDITOR_DROPDOWN_DIVIDER = 'graph-editor-dropdown__divider';
+export const EDITOR_FIELD = 'graph-editor-field';
+export const EDITOR_FIELD_LABEL = 'graph-editor-field__label';
+export const EDITOR_FLEX = 'graph-editor-flex';
+export const EDITOR_FLEX_BETWEEN = 'graph-editor-flex graph-editor-flex--between';
+export const EDITOR_FLEX_ROW = 'graph-editor-flex graph-editor-flex--row';
+export const EDITOR_FLEX_ALIGN_END = 'graph-editor-flex graph-editor-flex--align-end';
+export const EDITOR_FLEX_WRAP = 'graph-editor-flex graph-editor-flex--wrap';
+export const EDITOR_ALIGN_TOP = 'graph-editor-align-top';
+export const EDITOR_MIN_W_0 = 'graph-editor-min-w-0';
+export const EDITOR_FLEX_SHRINK_0 = 'graph-editor-flex-shrink-0';
+export const EDITOR_FLEX_GROW_1 = 'graph-editor-flex-grow-1';
+export const EDITOR_FLEX_FILL = 'graph-editor-flex-fill';
+export const EDITOR_TEXT_BREAK = 'graph-editor-text--break';
+export const EDITOR_TEXT_START = 'graph-editor-text--start';
+export const EDITOR_TEXT_END = 'graph-editor-text--end';
+export const EDITOR_SPACING_MB_0 = 'graph-editor-spacing--mb-0';
+export const EDITOR_SPACING_MB_1 = 'graph-editor-spacing--mb-1';
+export const EDITOR_SPACING_MB_2 = 'graph-editor-spacing--mb-2';
+export const EDITOR_SPACING_MB_3 = 'graph-editor-spacing--mb-3';
+export const EDITOR_SPACING_MT_0 = 'graph-editor-spacing--mt-0';
+export const EDITOR_SPACING_MT_1 = 'graph-editor-spacing--mt-1';
+export const EDITOR_SPACING_MT_2 = 'graph-editor-spacing--mt-2';
+export const EDITOR_SPACING_MT_3 = 'graph-editor-spacing--mt-3';
+export const EDITOR_SPACING_ME_2 = 'graph-editor-spacing--me-2';
+export const EDITOR_SPACING_MS_AUTO = 'graph-editor-spacing--ms-auto';
+export const EDITOR_SPACING_PY_2 = 'graph-editor-spacing--py-2';
+export const EDITOR_SPACING_PY_3 = 'graph-editor-spacing--py-3';
+export const EDITOR_SPACING_PX_3 = 'graph-editor-spacing--px-3';
+export const EDITOR_SPACING_PT_2 = 'graph-editor-spacing--pt-2';
+export const EDITOR_SPACING_M_0 = 'graph-editor-spacing--m-0';
+export const EDITOR_MUTED = 'graph-editor-muted';
+export const EDITOR_MONO = 'graph-editor-mono';
+export const EDITOR_HIDDEN = 'graph-editor-hidden';
+export const EDITOR_SCROLL = 'graph-editor-scroll';
+export function editorBtnToneClass(variant) {
+    const tone = normalizeToolbarTone(variant);
+    return `${EDITOR_BTN} graph-editor-btn--${tone}`;
+}
+export function editorBadgeToneClass(variant) {
+    const tone = normalizeToolbarTone(variant ?? 'neutral');
+    return `${EDITOR_BADGE} graph-editor-badge--${tone}`;
+}
+export function editorAlertToneClass(tone) {
+    return `${EDITOR_ALERT} graph-editor-alert--${tone}`;
+}
+function normalizeToolbarTone(variant) {
+    if (!variant)
+        return 'neutral';
+    const map = {
+        'outline-secondary': 'neutral',
+        secondary: 'neutral',
+        success: 'success',
+        primary: 'primary',
+        danger: 'danger',
+        info: 'info',
+        warning: 'warning',
+    };
+    return map[variant] ?? variant.replace(/^outline-/, '');
+}
+export function joinClasses(...parts) {
+    return parts.filter(Boolean).join(' ');
+}

package/dist/ui/primitives.d.ts

@@ -0,0 +1,23 @@
+import type { ButtonHTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes, ReactNode, SelectHTMLAttributes, TextareaHTMLAttributes } from 'react';
+export declare function EditorButton({ tone, className, children, ...rest }: ButtonHTMLAttributes<HTMLButtonElement> & {
+    tone?: string;
+}): import("react").JSX.Element;
+export declare function EditorIconButton({ className, children, ...rest }: ButtonHTMLAttributes<HTMLButtonElement>): import("react").JSX.Element;
+export declare function EditorCloseButton({ className, label, ...rest }: ButtonHTMLAttributes<HTMLButtonElement> & {
+    label?: string;
+}): import("react").JSX.Element;
+export declare function EditorInput({ className, ...rest }: InputHTMLAttributes<HTMLInputElement>): import("react").JSX.Element;
+export declare function EditorSelect({ className, children, ...rest }: SelectHTMLAttributes<HTMLSelectElement>): import("react").JSX.Element;
+export declare function EditorTextarea({ className, ...rest }: TextareaHTMLAttributes<HTMLTextAreaElement>): import("react").JSX.Element;
+export declare function EditorField({ className, children, }: {
+    className?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function EditorLabel({ className, children, ...rest }: LabelHTMLAttributes<HTMLLabelElement>): import("react").JSX.Element;
+export declare function EditorCheckbox({ className, label, ...rest }: InputHTMLAttributes<HTMLInputElement> & {
+    label?: ReactNode;
+}): import("react").JSX.Element;
+export declare function EditorSwitch({ className, label, ...rest }: InputHTMLAttributes<HTMLInputElement> & {
+    label?: ReactNode;
+}): import("react").JSX.Element;
+//# sourceMappingURL=primitives.d.ts.map

package/dist/ui/primitives.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"primitives.d.ts","sourceRoot":"","sources":["../../src/ui/primitives.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,SAAS,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,OAAO,CAAC;AAcrJ,wBAAgB,YAAY,CAAC,EACzB,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACV,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,+BAM7D;AAED,wBAAgB,gBAAgB,CAAC,EAC7B,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACV,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,+BAMzC;AAED,wBAAgB,iBAAiB,CAAC,EAC9B,SAAS,EACT,KAAe,EACf,GAAG,IAAI,EACV,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,+BAW9D;AAED,wBAAgB,WAAW,CAAC,EACxB,SAAS,EACT,GAAG,IAAI,EACV,EAAE,mBAAmB,CAAC,gBAAgB,CAAC,+BAEvC;AAED,wBAAgB,YAAY,CAAC,EACzB,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACV,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,+BAMzC;AAED,wBAAgB,cAAc,CAAC,EAC3B,SAAS,EACT,GAAG,IAAI,EACV,EAAE,sBAAsB,CAAC,mBAAmB,CAAC,+BAE7C;AAED,wBAAgB,WAAW,CAAC,EACxB,SAAS,EACT,QAAQ,GACX,EAAE;IACC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACvB,+BAEA;AAED,wBAAgB,WAAW,CAAC,EACxB,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACV,EAAE,mBAAmB,CAAC,gBAAgB,CAAC,+BAMvC;AAED,wBAAgB,cAAc,CAAC,EAC3B,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACV,EAAE,mBAAmB,CAAC,gBAAgB,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,SAAS,CAAA;CAAE,+BAO/D;AAED,wBAAgB,YAAY,CAAC,EACzB,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACV,EAAE,mBAAmB,CAAC,gBAAgB,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,SAAS,CAAA;CAAE,+BAO/D"}

package/dist/ui/primitives.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { EDITOR_BTN, EDITOR_CHECKBOX, EDITOR_FIELD, EDITOR_FIELD_LABEL, EDITOR_INPUT, EDITOR_SELECT, EDITOR_TEXTAREA, editorBtnToneClass, joinClasses, } from './editorClasses.js';
+export function EditorButton({ tone, className, children, ...rest }) {
+    return (_jsx("button", { type: "button", className: joinClasses(editorBtnToneClass(tone), className), ...rest, children: children }));
+}
+export function EditorIconButton({ className, children, ...rest }) {
+    return (_jsx("button", { type: "button", className: joinClasses(`${EDITOR_BTN} graph-editor-btn--icon`, className), ...rest, children: children }));
+}
+export function EditorCloseButton({ className, label = 'Close', ...rest }) {
+    return (_jsx("button", { type: "button", className: joinClasses(`${EDITOR_BTN} graph-editor-btn--close`, className), "aria-label": label, ...rest, children: "\u00D7" }));
+}
+export function EditorInput({ className, ...rest }) {
+    return _jsx("input", { className: joinClasses(EDITOR_INPUT, className), ...rest });
+}
+export function EditorSelect({ className, children, ...rest }) {
+    return (_jsx("select", { className: joinClasses(EDITOR_SELECT, className), ...rest, children: children }));
+}
+export function EditorTextarea({ className, ...rest }) {
+    return _jsx("textarea", { className: joinClasses(EDITOR_TEXTAREA, className), ...rest });
+}
+export function EditorField({ className, children, }) {
+    return _jsx("div", { className: joinClasses(EDITOR_FIELD, className), children: children });
+}
+export function EditorLabel({ className, children, ...rest }) {
+    return (_jsx("label", { className: joinClasses(EDITOR_FIELD_LABEL, className), ...rest, children: children }));
+}
+export function EditorCheckbox({ className, label, ...rest }) {
+    return (_jsxs("label", { className: joinClasses(EDITOR_CHECKBOX, className), children: [_jsx("input", { type: "checkbox", ...rest }), label ? _jsx("span", { children: label }) : null] }));
+}
+export function EditorSwitch({ className, label, ...rest }) {
+    return (_jsxs("label", { className: joinClasses(`${EDITOR_CHECKBOX} graph-editor-checkbox--switch`, className), children: [_jsx("input", { type: "checkbox", role: "switch", ...rest }), label ? _jsx("span", { children: label }) : null] }));
+}

package/docs/UI_KIT_AGNOSTIC_REFACTOR.md

@@ -0,0 +1,186 @@
+# UI-kit agnostic editor refactor — design scan (Prompt 8)
+
+**Status:** Implemented on `cleanup` (Prompts 9–10, 9A). `@signalsafe/tree-spec-editor@0.3.0` and `@signalsafe/tree-spec-editor-react@0.2.0` are UI-kit agnostic. See [UI_KIT_AGNOSTIC_USAGE.md](./UI_KIT_AGNOSTIC_USAGE.md) and [`tree-spec-editor-react` canvas doc](../../tree-spec-editor-react/docs/UI_KIT_AGNOSTIC_CANVAS.md).
+
+---
+
+## Executive summary (historical — Prompt 8 scan)
+
+| Package | react-bootstrap | Bootstrap CSS classes | Ready for UI-kit agnostic goal |
+|---------|-----------------|----------------------|--------------------------------|
+| `tree-spec-editor-core` | None | None | **Yes** — already meets boundary |
+| `tree-spec-editor-react` | None | **None (0.2.0+)** | **Yes** — canvas uses `graph-editor-*` hooks |
+| `tree-spec-editor` | ~~**Yes** — 13 source files~~ → **None (0.3.0+)** | ~~**Yes**~~ → **`graph-editor-*` hooks** | **Yes** — shell refactor complete |
+
+**Likely semver:** `@signalsafe/tree-spec-editor` **0.3.0** (remove `react-bootstrap` peer; public panel/modal API and styling contract change). `@signalsafe/tree-spec-editor-react` **0.2.0** (canvas class renames / neutral tokens). `@signalsafe/tree-spec-editor-core` **patch or unchanged**.
+
+---
+
+## Search inventory (Prompt 8 task list)
+
+### `tree-spec-editor`
+
+| Category | Matches |
+|----------|---------|
+| **Runtime `react-bootstrap` imports** | 13 files under `src/` (see table below) |
+| **Bootstrap CSS only (no import)** | Modals (`<dialog>` + `modal-*`, `alert-*`), all sidebar panels (`card-*`, `list-group-*`, `btn-*`), `panelNodeLink.tsx`, `PanelHeaderCollapseCarets.tsx` |
+| **Public exports (Bootstrap-coupled)** | All panel/modal components; `ToolbarPanel`; `getIssueSeverityBadgeClass`; `LIST_*` / `CANVAS_*` selection class constants; `buildDefaultToolbarSpec` (variant strings) |
+| **Package metadata** | `peerDependencies.react-bootstrap`, keyword `react-bootstrap`, README install line includes `react-bootstrap bootstrap` |
+| **Tests** | `ToolbarPanel.test.ts` mocks `react-bootstrap`; `panelHelpers.test.ts` asserts `text-bg-*`; `NodesPanel` / `IssuesPanel` assert `list-group-item-primary` |
+| **Docs** | README positions package as “React **Bootstrap UI shell**” (throughout) |
+| **Not used** | `Tabs`, `Accordion`, `Overlay`, `Popover`, `Toast`, `react-bootstrap` `Modal` (native `<dialog>` + Bootstrap classes instead) |
+
+**Runtime `react-bootstrap` import sites:**
+
+| File | Components imported |
+|------|---------------------|
+| `src/modals/DraftHistoryModal.tsx` | `Button`, `CloseButton` |
+| `src/modals/AuditLogModal.tsx` | `Button`, `CloseButton` |
+| `src/modals/PublishReviewModal.tsx` | `Button`, `CloseButton` |
+| `src/panels/GraphEditorInfoPanel.tsx` | `Badge`, `Form`, `Table` |
+| `src/panels/AdvancedJsonPanel.tsx` | `Button` |
+| `src/panels/IssuesPanel.tsx` | `Form` |
+| `src/panels/NodesPanel.tsx` | `Form` |
+| `src/panels/ChoiceEdgeAppearanceFields.tsx` | `Form` |
+| `src/panels/inspector/ChoiceEditorCard.tsx` | `Form` |
+| `src/panels/inspector/NodeTypeField.tsx` | `Form` |
+| `src/panels/inspector/RequiredNodeCard.tsx` | `Form` |
+| `src/panels/ToolbarPanel.tsx` | `Button`, `Dropdown` |
+| `src/panels/ChoiceTemplatesPanel.tsx` | `Button`, `Card` |
+
+**Public API — types mentioning Bootstrap:**
+
+- `ToolbarButtonItem.variant`, `ToolbarDropdownItem.variant`, `ToolbarBadgeItem.variant` — documented as Bootstrap variant strings.
+- `PublishReviewModalProps.errorAlertText` — uses Bootstrap `alert-danger` markup (prop name only; rendering is Bootstrap CSS).
+
+### `tree-spec-editor-react`
+
+| Category | Matches |
+|----------|---------|
+| **react-bootstrap** | **None** (docs/comments only) |
+| **Bootstrap CSS in runtime** | 9 files: `PromptNode.tsx`, `PromptNodeHeader.tsx`, `PromptNodeChoicesList.tsx`, `PromptNodeIssueBadges.tsx`, `PromptNodeToolbar.tsx`, `ChoiceCanvasRow.tsx`, `EndNode.tsx`, `GraphCanvasContextMenu.tsx`, `canvas/constants.ts` (`dropdown-menu`, `card-*`, `badge`, `btn-*`, `list-group-*`, `bg-body-secondary`) |
+| **False positives** | `useTreeSpecEditor` “bootstrap graph” comments (data bootstrap, not UI) |
+| **Public API** | `TreeSpecGraphEditorProps.colorScheme` doc mentions Bootstrap `colorScheme` — host contract leak |
+
+### `tree-spec-editor-core`
+
+| Category | Matches |
+|----------|---------|
+| **All matches** | README / `index.ts` comments stating “no Bootstrap” — **docs only** |
+| **Runtime** | **Clean** |
+
+---
+
+## Current vs target boundaries
+
+### Target (ecosystem policy)
+
+1. **`tree-spec-editor-core`** — pure logic, no React/DOM/Bootstrap. **Already there.**
+2. **`tree-spec-editor-react`** — React Flow + hooks; **no Bootstrap/MUI**; neutral canvas markup.
+3. **`tree-spec-editor`** — UI-kit agnostic composition (hooks, primitives, render props); **must not** require `react-bootstrap` or Bootstrap CSS.
+
+### Optional future package
+
+`@signalsafe/tree-spec-editor-bootstrap` — migrate **today’s** panel/modal/toolbar implementations here for hosts that want the reference Bootstrap shell (including DeliveryPlus during transition).
+
+---
+
+## Refactor strategy (recommended phases)
+
+### Phase 0 — No behavior change (prep)
+
+- Add this design doc; align DeliveryPlus on timeline.
+- Snapshot README/API contract before refactors.
+
+### Phase 1 — `tree-spec-editor-react` neutral canvas
+
+- Replace Bootstrap class names in node/context-menu components with **`graph-editor-*`** semantic classes.
+- Ship minimal package CSS (or document host-provided tokens) mapping semantic classes → host theme.
+- Change `CONTEXT_MENU_CLASS` off `dropdown-menu` to neutral menu classes.
+- Update tests in `-react` that assert Bootstrap class strings.
+- **semver:** minor (`0.2.0`).
+
+### Phase 2 — Headless shell API in `tree-spec-editor`
+
+Introduce UI-kit agnostic layer **alongside** existing components (deprecate, then remove):
+
+| Pattern | Use for |
+|---------|---------|
+| **Hooks** | Re-export / wrap `useTreeSpecEditor` with panel-state helpers (`useInspectorState`, `useToolbarActions`) |
+| **Primitives** | Unstyled structural components: `EditorSidebarSection`, `EditorModalFrame`, `EditorListRow` — semantics + ARIA only |
+| **Render props / slots** | `InspectorPanel` already has `renderExtraNodeFields` / `renderExtraChoiceFields` — extend to **all** chrome (buttons, badges, inputs) |
+| **Data-only helpers** | Replace `getIssueSeverityBadgeClass` with `getIssueSeverityToken()` → `'error' \| 'warning' \| 'info'`; hosts map to UI |
+| **Selection tokens** | Replace exported `LIST_SELECTION_CLASS` Bootstrap strings with stable token constants |
+
+Remove from **`tree-spec-editor` public API** (breaking):
+
+- Direct export of Bootstrap-backed panels/modals **or** move them to `@signalsafe/tree-spec-editor-bootstrap`.
+
+### Phase 3 — Optional `@signalsafe/tree-spec-editor-bootstrap`
+
+- Move current `src/panels/`, `src/modals/`, Bootstrap `ToolbarPanel` implementation verbatim.
+- Keep peer deps: `react-bootstrap`, `bootstrap` (CSS loaded by host).
+- `tree-spec-editor` re-exports bootstrap package temporarily with deprecation notice.
+
+### Phase 4 — Docs & metadata
+
+- Remove `react-bootstrap` from `peerDependencies` and keywords on `@signalsafe/tree-spec-editor`.
+- README: primary path = hooks + render props; Bootstrap = optional add-on package.
+- **semver:** `@signalsafe/tree-spec-editor` **0.3.0**.
+
+---
+
+## DeliveryPlus migration impact
+
+**Today (inferred from package docs):**
+
+- Installs `@signalsafe/tree-spec-editor` + peers including **`react-bootstrap`** and **Bootstrap CSS**.
+- Uses exported panels, modals, toolbar, and canvas default export from one barrel.
+
+**After refactor:**
+
+- **Short term:** Pin `@signalsafe/tree-spec-editor-bootstrap` (or pre-0.3.0 line) until DeliveryPlus rebuilds shell with its UI library.
+- **Target:** Depend on `@signalsafe/tree-spec-editor-react` + `@signalsafe/tree-spec-editor-core` + **DeliveryPlus-owned** panel/modal components using render props / hooks.
+- **CSS:** Must load neutral `graph-editor-*` styles from `-react` (or map tokens in DeliveryPlus theme) — no implicit Bootstrap on canvas.
+
+**Do not modify DeliveryPlus in this prompt.**
+
+---
+
+## Risks
+
+| Risk | Mitigation |
+|------|------------|
+| Breaking visual parity | Optional bootstrap package; screenshot tests in bootstrap package only |
+| Class-based tests fail | Update tests to assert semantic tokens / `graph-editor-*` classes |
+| Hidden Bootstrap in `-react` | Phase 1 before removing bootstrap from shell |
+| Toolbar `variant` strings | Replace with theme-agnostic `tone: 'primary' \| 'neutral' \| 'danger'` |
+| Modal `<dialog>` + Bootstrap layout | `EditorModalFrame` primitive with slot for actions |
+
+---
+
+## Tests needed (implementation prompts)
+
+- [ ] `-react`: canvas renders without Bootstrap CSS loaded (layout smoke).
+- [ ] `-react`: context menu keyboard/a11y with neutral classes.
+- [ ] `tree-spec-editor`: hook + render-prop contract tests (no `react-bootstrap` import in package).
+- [ ] `tree-spec-editor-bootstrap`: port existing panel/modal vitest suite.
+- [ ] Cross-package: `buildDefaultToolbarSpec` works with agnostic toolbar renderer.
+- [ ] DeliveryPlus integration checklist (manual).
+
+---
+
+## Recommended action summary
+
+| Repo | Action |
+|------|--------|
+| `tree-spec-editor-core` | **None** — maintain boundary |
+| `tree-spec-editor-react` | **Phase 1 ✓** — Bootstrap CSS removed from canvas (`0.2.0`) |
+| `tree-spec-editor` | **Phase 2–4** — headless API + optional bootstrap split; **0.3.0** |
+
+---
+
+## References
+
+- Ecosystem boundaries: `prompts/summary.md` (Option A — UI-kit agnostic editor)
+- npm packages (release-ready on `cleanup`, not yet published): `@signalsafe/tree-spec-editor@0.3.0`, `@signalsafe/tree-spec-editor-react@0.2.0`, `@signalsafe/tree-spec-editor-core@0.1.3`