@signalsafe/tree-spec-editor 0.2.2 → 0.3.0

package/dist/panels/SelectedEdgePanel.d.ts

@@ -6,9 +6,9 @@
  */
 import type { ReactNode } from 'react';
 import type { EditorTransition } from '@signalsafe/tree-spec-editor-core';
-import { type PanelNodeLinkContext } from '../lib/panelNodeLink';
+import { type PanelNodeLinkContext } from '../lib/panelNodeLink.js';
 export type SelectedEdgeDetailsContext = PanelNodeLinkContext;
-export { PanelNodeLink } from '../lib/panelNodeLink';
+export { PanelNodeLink } from '../lib/panelNodeLink.js';
 export interface SelectedEdgePanelProps {
     selectedEdge: EditorTransition | null;
     /** Select a node when its id is clicked in the default details line. */

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

@@ -1 +1 @@
-{"version":3,"file":"SelectedEdgePanel.d.ts","sourceRoot":"","sources":["../../src/panels/SelectedEdgePanel.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAE1E,OAAO,EAA+B,KAAK,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAE9F,MAAM,MAAM,0BAA0B,GAAG,oBAAoB,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAErD,MAAM,WAAW,sBAAsB;IACnC,YAAY,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACtC,wEAAwE;IACxE,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,GAAG,EAAE,0BAA0B,KAAK,SAAS,CAAC;CAC1F;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACtC,YAAY,EACZ,YAAY,EACZ,KAAuB,EACvB,aAA2C,GAC9C,EAAE,QAAQ,CAAC,sBAAsB,CAAC,sCAalC"}
+{"version":3,"file":"SelectedEdgePanel.d.ts","sourceRoot":"","sources":["../../src/panels/SelectedEdgePanel.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAE1E,OAAO,EAA+B,KAAK,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AASjG,MAAM,MAAM,0BAA0B,GAAG,oBAAoB,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,MAAM,WAAW,sBAAsB;IACnC,YAAY,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACtC,wEAAwE;IACxE,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,GAAG,EAAE,0BAA0B,KAAK,SAAS,CAAC;CAC1F;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACtC,YAAY,EACZ,YAAY,EACZ,KAAuB,EACvB,aAA2C,GAC9C,EAAE,QAAQ,CAAC,sBAAsB,CAAC,sCAalC"}

package/dist/panels/SelectedEdgePanel.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { renderDefaultEdgeBreadcrumb } from '../lib/panelNodeLink';
-export { PanelNodeLink } from '../lib/panelNodeLink';
+import { renderDefaultEdgeBreadcrumb } from '../lib/panelNodeLink.js';
+import { EDITOR_CARD, EDITOR_CARD_BODY, EDITOR_MUTED, EDITOR_SPACING_MT_3, joinClasses, } from '../ui/editorClasses.js';
+export { PanelNodeLink } from '../lib/panelNodeLink.js';
 export default function SelectedEdgePanel({ selectedEdge, onNodeSelect, title = 'Selected Edge', renderDetails = renderDefaultEdgeBreadcrumb, }) {
     if (!selectedEdge)
         return null;
-    return (_jsx("div", { className: "card mt-3", children: _jsxs("div", { className: "card-body", children: [_jsx("div", { className: "fw-bold", children: title }), _jsx("div", { className: "text-muted font-size-12", children: renderDetails(selectedEdge, { onNodeSelect }) })] }) }));
+    return (_jsx("div", { className: joinClasses(EDITOR_CARD, EDITOR_SPACING_MT_3), children: _jsxs("div", { className: EDITOR_CARD_BODY, children: [_jsx("div", { className: "graph-editor-text--bold", children: title }), _jsx("div", { className: joinClasses(EDITOR_MUTED, 'graph-editor-text--sm'), children: renderDetails(selectedEdge, { onNodeSelect }) })] }) }));
 }

package/dist/panels/ToolbarPanel.d.ts

@@ -1,15 +1,3 @@
-/**
- * Data-driven toolbar for the TreeSpec graph editor (and similar editor pages).
- *
- * Hosts pass an array of `ToolbarItem`s describing the visual elements they want in
- * the toolbar — buttons, dropdowns, badges, plain text, or arbitrary custom render
- * functions. The package owns layout (wrap, gap, alignment) and Bootstrap chrome;
- * the host owns every label, disabled rule, adapter-gated visibility, and callback
- * (encoded as closures inside each item).
- *
- * The `custom` item kind exists for one-offs like router-aware links — that way
- * the package stays free of `react-router` (or any other) routing concerns.
- */
 import { type ReactNode } from 'react';
 /**
  * Discriminator values used by the `kind` field on every {@link ToolbarItem}.
@@ -31,7 +19,7 @@ export interface ToolbarButtonItem {
     id?: string;
     label: ReactNode;
     onClick: () => void;
-    /** Bootstrap variant. Default: `"outline-secondary"`. */
+    /** Visual tone hook (e.g. `neutral`, `success`, `primary`). Default: `neutral`. Legacy Bootstrap variant strings are mapped. */
     variant?: string;
     disabled?: boolean;
     title?: string;
@@ -44,7 +32,7 @@ export interface ToolbarDropdownEntry {
     label: ReactNode;
     onClick?: () => void;
     disabled?: boolean;
-    /** When true, render a `<Dropdown.Divider />` and ignore label/onClick. */
+    /** When true, render a menu divider and ignore label/onClick. */
     divider?: boolean;
 }
 export interface ToolbarDropdownItem {
@@ -52,7 +40,7 @@ export interface ToolbarDropdownItem {
     id?: string;
     label: ReactNode;
     entries: ToolbarDropdownEntry[];
-    /** Bootstrap variant for the toggle. Default: `"outline-secondary"`. */
+    /** Toggle tone hook. Default: `neutral`. Legacy Bootstrap variant strings are mapped. */
     variant?: string;
     disabled?: boolean;
     className?: string;
@@ -61,7 +49,7 @@ export interface ToolbarBadgeItem {
     kind: typeof TOOLBAR_ITEM_KIND.BADGE;
     id?: string;
     label: ReactNode;
-    /** Bootstrap badge variant (e.g. `"success"`, `"secondary"`). Default: `"secondary"`. */
+    /** Badge tone hook (e.g. `success`, `neutral`). Default: `neutral`. */
     variant?: string;
     className?: string;
 }
@@ -69,7 +57,7 @@ export interface ToolbarTextItem {
     kind: typeof TOOLBAR_ITEM_KIND.TEXT;
     id?: string;
     content: ReactNode;
-    /** Override the default `"ms-2 text-muted font-size-12"` styling. */
+    /** Override default muted toolbar text styling. */
     className?: string;
 }
 export interface ToolbarCustomItem {
@@ -81,7 +69,7 @@ export interface ToolbarCustomItem {
 export type ToolbarItem = ToolbarButtonItem | ToolbarDropdownItem | ToolbarBadgeItem | ToolbarTextItem | ToolbarCustomItem;
 export interface ToolbarPanelProps {
     items: ToolbarItem[];
-    /** Override the outer wrapper className. Default: `"d-flex gap-2 align-items-center flex-wrap"`. */
+    /** Override the outer wrapper className. */
     className?: string;
 }
 export default function ToolbarPanel({ items, className, }: Readonly<ToolbarPanelProps>): import("react").JSX.Element;

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

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

package/dist/panels/ToolbarPanel.js

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

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

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import { type EditorChoice, type EditorNode, type EditorTree } from '@signalsafe/tree-spec-editor-core';
-import type { ChoiceTypeOption, InspectorChoiceRenderContext } from './types';
+import type { ChoiceTypeOption, InspectorChoiceRenderContext } from './types.js';
 export default function ChoiceEditorCard({ choice, tree, selectedNode, focusChoiceId, isPublished, canMoveUp, canMoveDown, usedChoiceTypeIds, onUpdateSelectedNode, onDeleteChoice, onMoveChoice, onSetChoiceTarget, onSetChoiceOutcome, onSetChoiceType, choiceTypes, outcomeOptions, hideOutcomeField, renderExtraChoiceFields, onFocusChoice, }: Readonly<{
     choice: EditorChoice;
     tree: EditorTree;

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

@@ -1 +1 @@
-{"version":3,"file":"ChoiceEditorCard.d.ts","sourceRoot":"","sources":["../../../src/panels/inspector/ChoiceEditorCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAe,SAAS,EAAE,MAAM,OAAO,CAAC;AAGpD,OAAO,EAGH,KAAK,YAAY,EACjB,KAAK,UAAU,EACf,KAAK,UAAU,EAClB,MAAM,mCAAmC,CAAC;AAI3C,OAAO,KAAK,EAAE,gBAAgB,EAAE,4BAA4B,EAAE,MAAM,SAAS,CAAC;AAE9E,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACrC,MAAM,EACN,IAAI,EACJ,YAAY,EACZ,aAAa,EACb,WAAW,EACX,SAAS,EACT,WAAW,EACX,iBAAiB,EACjB,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,MAAM,EAAE,YAAY,CAAC;IACrB,IAAI,EAAE,UAAU,CAAC;IACjB,YAAY,EAAE,UAAU,CAAC;IACzB,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,WAAW,EAAE,OAAO,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,OAAO,CAAC;IACrB,iBAAiB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC/B,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,+BAsJD"}
+{"version":3,"file":"ChoiceEditorCard.d.ts","sourceRoot":"","sources":["../../../src/panels/inspector/ChoiceEditorCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAe,SAAS,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,EAGH,KAAK,YAAY,EACjB,KAAK,UAAU,EACf,KAAK,UAAU,EAClB,MAAM,mCAAmC,CAAC;AA0B3C,OAAO,KAAK,EAAE,gBAAgB,EAAE,4BAA4B,EAAE,MAAM,YAAY,CAAC;AAEjF,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACrC,MAAM,EACN,IAAI,EACJ,YAAY,EACZ,aAAa,EACb,WAAW,EACX,SAAS,EACT,WAAW,EACX,iBAAiB,EACjB,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,MAAM,EAAE,YAAY,CAAC;IACrB,IAAI,EAAE,UAAU,CAAC;IACjB,YAAY,EAAE,UAAU,CAAC;IACzB,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,WAAW,EAAE,OAAO,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,OAAO,CAAC;IACrB,iBAAiB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC/B,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,+BAgKD"}

package/dist/panels/inspector/ChoiceEditorCard.js

@@ -1,8 +1,9 @@
 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';
-import { choiceActionIconProps } from './choiceActionIconProps';
+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);
     const targetNodeId = transition?.toNodeId ?? '';
@@ -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

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import type { EditorNode, EditorTree } from '@signalsafe/tree-spec-editor-core';
-import type { ChoiceTypeOption, InspectorChoiceRenderContext } from './types';
+import type { ChoiceTypeOption, InspectorChoiceRenderContext } from './types.js';
 export default function ChoiceEditorList({ tree, selectedNode, focusChoiceId, isPublished, onAddChoice, onUpdateSelectedNode, onDeleteChoice, onMoveChoice, onSetChoiceTarget, onSetChoiceOutcome, onSetChoiceType, choiceTypes, outcomeOptions, hideOutcomeField, renderExtraChoiceFields, onFocusChoice, }: Readonly<{
     tree: EditorTree;
     selectedNode: EditorNode;

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';
-import ChoiceEditorCard from './ChoiceEditorCard';
+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

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import type { EditorNode, EditorTree } from '@signalsafe/tree-spec-editor-core';
-import type { InspectorNodeRenderContext } from './types';
+import type { InspectorNodeRenderContext } from './types.js';
 export default function RequiredNodeCard({ tree, selectedNode, isPublished, title, typeHelperText, onUpdateSelectedNode, onDeleteSelectedNode, renderExtraNodeFields, }: Readonly<{
     tree: EditorTree;
     selectedNode: EditorNode;

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';
-import NodeTypeField from './NodeTypeField';
+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":"AAAA,wFAAwF;AAExF,eAAO,MAAM,WAAW,sBAAsB,CAAC;AAC/C,eAAO,MAAM,kBAAkB,8BAA8B,CAAC;AAC9D,eAAO,MAAM,gBAAgB,4BAA4B,CAAC;AAC1D,eAAO,MAAM,kBAAkB,8BAA8B,CAAC;AAE9D,eAAO,MAAM,WAAW,sBAAsB,CAAC;AAC/C,eAAO,MAAM,gBAAgB,4BAA4B,CAAC;AAE1D,eAAO,MAAM,YAAY,uBAAuB,CAAC;AACjD,eAAO,MAAM,aAAa,wBAAwB,CAAC;AACnD,eAAO,MAAM,eAAe,0BAA0B,CAAC;AACvD,eAAO,MAAM,eAAe,0BAA0B,CAAC;AAEvD,eAAO,MAAM,UAAU,qBAAqB,CAAC;AAC7C,eAAO,MAAM,eAAe,4CAA4C,CAAC;AACzE,eAAO,MAAM,YAAY,uBAAuB,CAAC;AAEjD,eAAO,MAAM,YAAY,uBAAuB,CAAC;AACjD,eAAO,MAAM,mBAAmB,+BAA+B,CAAC;AAChE,eAAO,MAAM,oBAAoB,gCAAgC,CAAC;AAClE,eAAO,MAAM,mBAAmB,+BAA+B,CAAC;AAChE,eAAO,MAAM,iBAAiB,6BAA6B,CAAC;AAC5D,eAAO,MAAM,mBAAmB,+BAA+B,CAAC;AAChE,eAAO,MAAM,kBAAkB,8BAA8B,CAAC;AAE9D,eAAO,MAAM,YAAY,uBAAuB,CAAC;AACjD,eAAO,MAAM,YAAY,uBAAuB,CAAC;AAEjD,eAAO,MAAM,eAAe,0BAA0B,CAAC;AACvD,eAAO,MAAM,oBAAoB,gCAAgC,CAAC;AAClE,eAAO,MAAM,oBAAoB,gCAAgC,CAAC;AAClE,eAAO,MAAM,uBAAuB,mCAAmC,CAAC;AAExE,eAAO,MAAM,YAAY,uBAAuB,CAAC;AACjD,eAAO,MAAM,kBAAkB,8BAA8B,CAAC;AAE9D,eAAO,MAAM,WAAW,sBAAsB,CAAC;AAC/C,eAAO,MAAM,mBAAmB,iDAAiD,CAAC;AAClF,eAAO,MAAM,eAAe,6CAA6C,CAAC;AAC1E,eAAO,MAAM,qBAAqB,mDAAmD,CAAC;AACtF,eAAO,MAAM,gBAAgB,8CAA8C,CAAC;AAC5E,eAAO,MAAM,gBAAgB,2BAA2B,CAAC;AACzD,eAAO,MAAM,cAAc,yBAAyB,CAAC;AACrD,eAAO,MAAM,oBAAoB,+BAA+B,CAAC;AACjE,eAAO,MAAM,kBAAkB,6BAA6B,CAAC;AAC7D,eAAO,MAAM,gBAAgB,2BAA2B,CAAC;AACzD,eAAO,MAAM,iBAAiB,6BAA6B,CAAC;AAC5D,eAAO,MAAM,iBAAiB,6BAA6B,CAAC;AAC5D,eAAO,MAAM,eAAe,2BAA2B,CAAC;AACxD,eAAO,MAAM,mBAAmB,+BAA+B,CAAC;AAChE,eAAO,MAAM,mBAAmB,+BAA+B,CAAC;AAChE,eAAO,MAAM,mBAAmB,+BAA+B,CAAC;AAChE,eAAO,MAAM,mBAAmB,+BAA+B,CAAC;AAChE,eAAO,MAAM,mBAAmB,+BAA+B,CAAC;AAChE,eAAO,MAAM,mBAAmB,+BAA+B,CAAC;AAChE,eAAO,MAAM,mBAAmB,+BAA+B,CAAC;AAChE,eAAO,MAAM,mBAAmB,+BAA+B,CAAC;AAChE,eAAO,MAAM,mBAAmB,+BAA+B,CAAC;AAChE,eAAO,MAAM,sBAAsB,kCAAkC,CAAC;AACtE,eAAO,MAAM,mBAAmB,+BAA+B,CAAC;AAChE,eAAO,MAAM,mBAAmB,+BAA+B,CAAC;AAChE,eAAO,MAAM,mBAAmB,+BAA+B,CAAC;AAChE,eAAO,MAAM,mBAAmB,+BAA+B,CAAC;AAChE,eAAO,MAAM,kBAAkB,8BAA8B,CAAC;AAC9D,eAAO,MAAM,YAAY,uBAAuB,CAAC;AACjD,eAAO,MAAM,WAAW,sBAAsB,CAAC;AAC/C,eAAO,MAAM,aAAa,wBAAwB,CAAC;AACnD,eAAO,MAAM,aAAa,wBAAwB,CAAC;AAEnD,wBAAgB,kBAAkB,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAG3D;AAED,wBAAgB,oBAAoB,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAG7D;AAED,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,CAEpE;AAgBD,wBAAgB,WAAW,CAAC,GAAG,KAAK,EAAE,KAAK,CAAC,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC,GAAG,MAAM,CAEtF"}

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