@signalsafe/tree-spec-editor 0.2.2 → 0.3.0

package/README.md

@@ -1,42 +1,141 @@
 # `@signalsafe/tree-spec-editor`
 
-React graph editor for authoring `TreeSpec` content.
+React **UI-kit agnostic shell** for authoring TreeSpec graphs: canvas (from `@signalsafe/tree-spec-editor-react`), sidebar panels, modals, and toolbar helpers. Hosts style panels with Bootstrap, Material UI, or custom CSS via `graph-editor-*` class hooks.
 
-This package gives you a ready-to-embed editor component plus a small set of editor helpers. It is focused on graph editing only: nodes, choices, transitions, selection, layout, and validation hints.
+| | |
+|---|---|
+| **npm** | `@signalsafe/tree-spec-editor` |
+| **GitHub** | [SignalSafeSoftware/tree-spec-editor](https://github.com/SignalSafeSoftware/tree-spec-editor) |
+| **Peer deps** | `react`, `react-dom`, `reactflow` |
+
+## What this package does
+
+- Ships a ready-to-embed **graph editor UI** (`TreeSpecGraphEditor` re-export, panels, modals, toolbar).
+- Re-exports selected **editor-core helpers** and types for one-stop imports in React hosts.
+
+## What this package does not do
+
+- Routing, REST/GraphQL clients, or authentication — your host app loads/saves drafts and enforces permissions.
+- Wire compile/publish without your adapter — use `useTreeSpecEditor` from `@signalsafe/tree-spec-editor-react` with a host adapter.
+- React Flow CSS by itself — the canvas lives in `-editor-react`; **consumers may need** `import 'reactflow/dist/style.css'` in the app entry (see `@signalsafe/tree-spec-editor-react` README). This package keeps `sideEffects: false` because it does not import CSS directly.
+
+## Package stack
+
+| Layer | Package |
+|---|---|
+| Wire | `@signalsafe/tree-spec` |
+| Editor model | `@signalsafe/tree-spec-editor-core` |
+| React Flow canvas | `@signalsafe/tree-spec-editor-react` |
+| **UI shell (this package)** | `@signalsafe/tree-spec-editor` |
 
 ## Install
 
 ```bash
-npm install @signalsafe/tree-spec-editor react react-dom reactflow react-bootstrap
+npm install @signalsafe/tree-spec-editor @signalsafe/tree-spec-editor-react @signalsafe/tree-spec-editor-core @signalsafe/tree-spec react react-dom reactflow
+```
+
+Import React Flow CSS as documented in `@signalsafe/tree-spec-editor-react`. **Bootstrap is not required** — the host styles panels via `graph-editor-*` class hooks (see below).
+
+## UI-kit agnostic styling
+
+This package renders **semantic HTML** with stable **`graph-editor-*` classes**. Your app owns Bootstrap, Material UI, Tailwind, or plain CSS.
+
+**Docs:** [docs/UI_KIT_AGNOSTIC_USAGE.md](./docs/UI_KIT_AGNOSTIC_USAGE.md) (class hooks, render props, DeliveryPlus migration).
+
+### Minimal plain HTML example
+
+Panels work without any UI library once you map the hooks:
+
+```tsx
+import { ToolbarPanel, IssuesPanel } from '@signalsafe/tree-spec-editor';
+
+// Host CSS (global stylesheet or CSS module)
+const editorStyles = `
+  .graph-editor-card { border: 1px solid #ccc; border-radius: 6px; margin-bottom: 1rem; }
+  .graph-editor-card__header { padding: 0.5rem 0.75rem; background: #f5f5f5; font-weight: 600; }
+  .graph-editor-list__item { padding: 0.5rem 0.75rem; border-top: 1px solid #eee; }
+  .graph-editor-list__item--selected { background: #e7f1ff; }
+  .graph-editor-btn { padding: 0.25rem 0.75rem; border: 1px solid #999; border-radius: 4px; background: #fff; }
+  .graph-editor-badge--error { background: #dc3545; color: #fff; padding: 0.1rem 0.4rem; border-radius: 4px; }
+`;
+
+export function EditorChrome() {
+  return (
+    <>
+      <style>{editorStyles}</style>
+      <ToolbarPanel items={[{ kind: 'button', id: 'save', label: 'Save', onClick: () => {} }]} />
+      <IssuesPanel issues={[]} lastValidatedAt={null} onSelectIssue={() => {}} />
+    </>
+  );
+}
+```
+
+### Optional: Bootstrap styling in the host app (not a package requirement)
+
+If your host already uses Bootstrap, add **host-owned** CSS that maps hooks to Bootstrap utilities — the package does not import Bootstrap:
+
+```css
+/* Host app: graph-editor-bootstrap-bridge.css (example) */
+.graph-editor-card { /* mirror .card rules or @import bootstrap */ }
+.graph-editor-btn--neutral { /* mirror .btn.btn-outline-secondary */ }
+.graph-editor-list__item--selected { /* mirror .list-group-item-primary */ }
+.graph-editor-badge--error { /* mirror .badge.text-bg-danger */ }
+```
+
+## Development
+
+Requires Node.js **>=22.12.0** (`engines.node`). CI runs checks, tests, and smoke on Node **22** and **24**; publish uses Node **24**. Node 20 is no longer supported (GitHub Actions Node 20 deprecation).
+
+`yarn build` uses `tsconfig.build.json` and resolves `@signalsafe/*` from `node_modules`. Ecosystem sibling `paths` in `tsconfig.json` apply to local typecheck/tests only.
+
+```bash
+yarn install
+yarn build
+yarn test
+yarn typecheck
 ```
 
-The package ships React components that use `react-bootstrap` primitives (cards, buttons, form controls). The consuming app must install `react-bootstrap@^2.10.0` and load Bootstrap CSS in the usual way.
+## Security
+
+See [SECURITY.md](./SECURITY.md). Host applications must enforce authorization, validate TreeSpec server-side, and control publish permissions.
+
+## Changelog and releases
+
+- [CHANGELOG.md](./CHANGELOG.md)
+- [RELEASING.md](./RELEASING.md)
+
+---
+
+## Detailed component reference
+
+The sections below document panels, modals, toolbar items, and integration patterns. Import from **`@signalsafe/tree-spec-editor`** package root only (no subpath exports).
 
 ## Source layout (maintainers)
 
-Published consumers import only the package root (`@signalsafe/tree-spec-editor`). This package is the **React + Bootstrap UI shell** in the layered editor stack:
+Published consumers import only the package root. Layer stack:
 
 | Layer | Package | Owns |
 |-------|---------|------|
 | Wire | [`@signalsafe/tree-spec`](../tree-spec/README.md) | TreeSpec wire types, constants, compile/lint. Pure TS. |
 | Core | [`@signalsafe/tree-spec-editor-core`](../tree-spec-editor-core/README.md) | Editor model, tree operations, layout/autosave/keyboard helpers, constants. Pure TS. |
 | React | [`@signalsafe/tree-spec-editor-react`](../tree-spec-editor-react/README.md) | React Flow canvas (`TreeSpecGraphEditor`). React-specific, UI-library-agnostic. |
-| Shell | **`@signalsafe/tree-spec-editor`** (this package) | React + Bootstrap panels, modals, toolbar, Bootstrap badge helper. Re-exports the canvas from `-react` and the framework-agnostic surface from `-core` for one-stop import. |
+| Shell | **`@signalsafe/tree-spec-editor`** (this package) | UI-kit agnostic panels, modals, toolbar (`graph-editor-*` hooks). Re-exports canvas from `-react` and helpers from `-core`. |
 
 | Directory | Contents |
 |-----------|----------|
-| `src/panels/` | Sidebar, toolbar, inspector, and JSON chrome components (React + `react-bootstrap`) |
-| `src/modals/` | Publish review, draft history, and audit log dialogs (React + `react-bootstrap`) |
-| `src/lib/panelHelpers.ts` | `getIssueSeverityBadgeClass` (Bootstrap-flavored — Material / Angular shells ship their own equivalent) |
+| `src/panels/` | Sidebar, toolbar, inspector, and JSON chrome components (UI-kit agnostic React) |
+| `src/modals/` | Publish review, draft history, and audit log dialogs (UI-kit agnostic React) |
+| `src/ui/` | UI-kit agnostic primitives and `graph-editor-*` class tokens |
+| `src/lib/panelHelpers.ts` | `getIssueSeverityToken`, `getIssueSeverityBadgeClass` (semantic badge hooks) |
 | `src/index.ts` | Public barrel — **do not** import from subpaths in apps. Re-exports the canvas from `@signalsafe/tree-spec-editor-react` and the framework-agnostic surface from `@signalsafe/tree-spec-editor-core` |
 
-Tests live under `tests/panels/`, `tests/modals/`, plus `tests/index.test.ts` for the barrel. The canvas test lives in **`packages/tree-spec-editor-react/tests/`** and the framework-agnostic helper tests live in **`packages/tree-spec-editor-core/tests/`**.
+Tests live under `tests/panels/`, `tests/modals/`, and `tests/index.test.ts` in this repo. Canvas tests live in **`tree-spec-editor-react`**; core helper tests live in **`tree-spec-editor-core`**.
 
 ## Choosing the right package
 
 | You want… | Import from |
 |----------|-------------|
-| The full React + Bootstrap editor (canvas + panels + modals + toolbar) | `@signalsafe/tree-spec-editor` (this package) |
+| The full React editor shell (canvas + panels + modals + toolbar) | `@signalsafe/tree-spec-editor` (this package) |
 | Just the canvas, with your own UI library (Material / Tailwind / custom) | `@signalsafe/tree-spec-editor-react` |
 | Just the framework-agnostic helpers (CLI, server-side preview, Angular shell) | `@signalsafe/tree-spec-editor-core` |
 | Just the wire contract (validation, compile, lint) | `@signalsafe/tree-spec` |
@@ -49,16 +148,16 @@ Tests live under `tests/panels/`, `tests/modals/`, plus `tests/index.test.ts` fo
 | Angular editor | `@signalsafe/tree-spec-editor-angular` (planned) + `-core` |
 | Vue editor | `@signalsafe/tree-spec-editor-vue` (planned) + `-core` |
 
-This package (`@signalsafe/tree-spec-editor`) **remains the Bootstrap reference shell** — it does not become Material, Angular, or Vue.
+This package is **UI-kit agnostic** — it does not ship Material, Angular, or Vue implementations. Hosts style with their own UI library or CSS. A future `@signalsafe/tree-spec-editor-bootstrap` may offer a reference Bootstrap skin.
 
-See [docs/ai/packages-editor-architecture.md](../../docs/ai/packages-editor-architecture.md).
+See package READMEs in the [`tree-spec-editor-core`](https://github.com/SignalSafeSoftware/tree-spec-editor-core) and [`tree-spec-editor-react`](https://github.com/SignalSafeSoftware/tree-spec-editor-react) repos for layer rules.
 
-## Full-stack host import pattern
+## Host import pattern
 
-The reference host ([`ScenarioVersionGraphEditorPage`](../../frontend/shared/domains/content/ScenarioVersionGraphEditorPage.tsx)) imports from **three** packages:
+Typical host apps import from **three** packages:
 
 ```tsx
-// Bootstrap UI shell — panels, modals, toolbar, canvas default export
+// UI shell — panels, modals, toolbar, canvas default export
 import TreeSpecGraphEditor, { AppearancePanel, buildDefaultToolbarSpec, … } from '@signalsafe/tree-spec-editor';
 
 // Stateful orchestration hook (not re-exported from the shell barrel)
@@ -78,9 +177,9 @@ The smallest useful integration is:
 2. Render `TreeSpecGraphEditor`.
 3. Replace the state value in `onChange`.
 
-The screenshot below was captured from the exact example tree in this section.
+The example below uses a minimal in-memory tree (screenshot assets are not bundled in the npm package).
 
-![Happy path editor example](https://raw.githubusercontent.com/denverprogrammer/DeliveryPlus/main/packages/tree-spec-editor/docs/tree-spec-editor-happy-path.png)
+<!-- Screenshot: add your own capture when integrating the editor in your app -->
 
 ```tsx
 import { useState, type JSX } from 'react';
@@ -161,7 +260,7 @@ export function ExampleTreeSpecEditor(): JSX.Element {
 - `LIST_SELECTION_CLASS`, `CANVAS_SELECTION_CLASS`, …: shared CSS class helpers for list/canvas selection highlighting.
 - `buildDefaultToolbarSpec`: builds the default action toolbar (`+ Add`, Templates, layout, Undo/Redo, validate/history/audit/snapshot/clone, save/publish/preview) without status chrome — draft/autosave live in `GraphEditorInfoPanel`.
 - `PublishReviewModal`, `DraftHistoryModal`, `AuditLogModal`: presentational modals for the publish-review / draft-snapshot / audit-log authoring flows; all strings are overridable.
-- `ToolbarPanel`: data-driven toolbar that takes an `items: ToolbarItem[]` array (`button` / `dropdown` / `badge` / `text` / `custom` kinds) and renders Bootstrap chrome in a single flex wrapper.
+- `ToolbarPanel`: data-driven toolbar that takes an `items: ToolbarItem[]` array (`button` / `dropdown` / `badge` / `text` / `custom` kinds) and renders semantic HTML with `graph-editor-*` classes in a single flex wrapper.
 - `duplicateNode`, `deleteNode`, `computeTreeDiffSummary`, `applyTreeTemplate`: project-agnostic tree-operation helpers (clone a node, delete a node with cascade, summarize a structural diff, insert a reusable subgraph template).
 - `getAutosaveStatusLabel`, `getKeyboardShortcutAction`, `shouldQueueInitialValidation`: editor-lifecycle helpers (default autosave label, default keyboard-shortcut mapper, "should we validate on load?" tri-state policy).
 - `AUTOSAVE_STATUS`, `KEYBOARD_SHORTCUT_ACTION`, `GRAPH_SELECTION_KIND`, `TOOLBAR_ITEM_KIND`: runtime constant objects for the matching string-union types. Use these instead of bare string literals (`AUTOSAVE_STATUS.SAVING`, `KEYBOARD_SHORTCUT_ACTION.SAVE`, `GRAPH_SELECTION_KIND.NODE`, `TOOLBAR_ITEM_KIND.BUTTON`). The types (`AutosaveStatus`, `KeyboardShortcutAction`, `GraphSelectionKind`, `ToolbarItemKind`) are derived from these constants.
@@ -171,7 +270,7 @@ export function ExampleTreeSpecEditor(): JSX.Element {
 - `GraphSelection` and `GraphEditorIssue`: optional selection and issue-display types.
 - `autoLayoutTree` and `getNextSpawnPosition`: layout helpers for placing nodes.
 - `lintEditorTree`, `getTransition`, `upsertTransition`, `deleteTransitionsForChoice`: editor helpers for validation and transition updates.
-- `buildStableEntries`, `getIssueSeverityBadgeClass`: small helpers reused by the sidebar panels and available for hosts that compose their own UI.
+- `buildStableEntries`, `getIssueSeverityBadgeClass`, `getIssueSeverityToken`: small helpers reused by the sidebar panels and available for hosts that compose their own UI.
 
 ## Feature Examples
 
@@ -179,9 +278,9 @@ export function ExampleTreeSpecEditor(): JSX.Element {
 
 Pass `issues` when you want the editor to highlight problem nodes and edges.
 
-The screenshot below was captured from the exact example tree in this section.
+The example below demonstrates validation highlighting (screenshot assets are not bundled in the npm package).
 
-![Validation issues example](https://raw.githubusercontent.com/denverprogrammer/DeliveryPlus/main/packages/tree-spec-editor/docs/tree-spec-editor-issues.png)
+<!-- Screenshot: add your own capture when integrating the editor in your app -->
 
 ```tsx
 import { useMemo, useState, type JSX } from 'react';
@@ -341,7 +440,7 @@ The package also ships two presentational components for the editor's left rail.
 
 ### `IssuesPanel`
 
-Renders a Bootstrap **card** matching **`NodesPanel`** chrome (`card-header` + `bg-body-secondary`): the body is **`card-body p-0`** with **`list-group list-group-flush`**. Each issue row mirrors the **Nodes** header rhythm: **truncated `node id, type`** on the left (type resolved from the optional **`tree`** prop), **severity** as a **`badge`** on the right, then the **message** (monospace) and optional **choice id** line. The empty state is a single flush list item. Clicking a row invokes `onSelectIssue`.
+Renders a **card** (`graph-editor-card`) matching **`NodesPanel`** chrome: header plus flush list body. Each issue row mirrors the **Nodes** header rhythm: **truncated `node id, type`** on the left (type resolved from the optional **`tree`** prop), **severity** as a **`graph-editor-badge`** on the right, then the **message** (monospace) and optional **choice id** line. The empty state is a single list item. Clicking a row invokes `onSelectIssue`.
 
 ```tsx
 import { useMemo, useState, type JSX } from 'react';
@@ -480,7 +579,7 @@ export function CompiledTreeSpecPanel({ tree }: Props): JSX.Element {
 
 ### `InspectorPanel`
 
-The right-rail node inspector. When a node is in context (selected directly, or as the source of a selected edge), it renders two Bootstrap cards: **Required** (Type, Prompt, and `renderExtraNodeFields`) and **Choices** (list-group rows). The universal fields the package owns:
+The right-rail node inspector. When a node is in context (selected directly, or as the source of a selected edge), it renders two cards: **Required** (Type, Prompt, and `renderExtraNodeFields`) and **Choices** (list rows). The universal fields the package owns:
 
 - **Type** `<select>` (with the package's `TREE_SPEC_NODE_TYPE_PRESETS` + custom-value input, or a host-supplied **choice type** catalog via `choiceTypes` / `onSetChoiceType`).
 - **Prompt** `<textarea>`.
@@ -611,7 +710,7 @@ Right-rail panel for **canvas-only** styling. Combines:
 
 Scenario-level default edge routing lives in `GraphEditorInfoPanel`, not here.
 
-Hosts typically pair node fields with a project-specific component (for example `NodeAppearanceFields` in `frontend/shared`):
+Hosts typically pair node fields with a project-specific component:
 
 ```tsx
 import { AppearancePanel, InspectorPanel } from '@signalsafe/tree-spec-editor';
@@ -646,7 +745,7 @@ Optional compact read-only card that surfaces the currently selected transition.
 
 ## Modals
 
-Three presentational modals cover the standard TreeSpec authoring flows. Each renders Bootstrap-styled chrome via a native `<dialog>` element, owns its list/empty/loading rendering, and exposes overridable `title` / `subtitle` / `emptyStateText` / button-label props so the package stays free of project-specific wording. Hosts wire the data, fetch on `show`, and provide callbacks.
+Three presentational modals cover the standard TreeSpec authoring flows. Each uses a native `<dialog>` with `graph-editor-modal-*` classes, owns its list/empty/loading rendering, and exposes overridable `title` / `subtitle` / `emptyStateText` / button-label props so the package stays free of project-specific wording. Hosts wire the data, fetch on `show`, and provide callbacks.
 
 ### `PublishReviewModal`
 
@@ -759,7 +858,7 @@ function DraftHistoryModalContainer({
 
 ### `AuditLogModal`
 
-A modal that lists authoring audit events for the current tree_spec version. Each row shows the `action` as a Bootstrap badge, the formatted `created_at` timestamp, the optional `actor` (numeric id or string), and the optional `detail` JSON. The host owns the `auditEvents: TreeSpecAuditEventItem[]` array and the `loadingAudit` flag.
+A modal that lists authoring audit events for the current tree_spec version. Each row shows the `action` as a badge, the formatted `created_at` timestamp, the optional `actor` (numeric id or string), and the optional `detail` JSON. The host owns the `auditEvents: TreeSpecAuditEventItem[]` array and the `loadingAudit` flag.
 
 ```tsx
 import { AuditLogModal, type TreeSpecAuditEventItem } from '@signalsafe/tree-spec-editor';
@@ -828,7 +927,7 @@ const items = buildDefaultToolbarSpec({
 ### `ToolbarPanel`
 
 A data-driven toolbar for editor pages. Hosts pass an `items: ToolbarItem[]`
-array; the package renders Bootstrap chrome (`Button`, `Dropdown`, badge,
+array; the package renders semantic toolbar markup (`<button>`, `<details>` menu, badges,
 muted text) inside a single flex wrapper. Project-specific concerns —
 adapter capability gates, dropdown vocabularies, button labels, and disabled
 rules — stay in the host as closures inside each item. Prefer
@@ -861,10 +960,10 @@ const items: ToolbarItem[] = [
 
 **Item kinds.** Each `ToolbarItem` is one of:
 
-- `kind: 'button'`: `label`, `onClick`, optional `variant` (Bootstrap variant string, default `outline-secondary`), `disabled`, `title`, `className`.
-- `kind: 'dropdown'`: `label`, `entries` (array of `{ id?, label, onClick?, disabled?, divider? }`), optional `variant` (toggle variant, default `outline-secondary`), `disabled`, `className`. Entries with `divider: true` render a `<Dropdown.Divider />`.
-- `kind: 'badge'`: `label`, optional `variant` (Bootstrap badge variant, default `secondary`) or full `className` override.
-- `kind: 'text'`: `content`, optional `className` (default `"ms-2 text-muted font-size-12"`).
+- `kind: 'button'`: `label`, `onClick`, optional `variant` (tone hook or legacy Bootstrap variant string — mapped to `graph-editor-btn--*`), `disabled`, `title`, `className`.
+- `kind: 'dropdown'`: `label`, `entries` (array of `{ id?, label, onClick?, disabled?, divider? }`), optional `variant` (toggle tone), `disabled`, `className`. Entries with `divider: true` render a menu divider.
+- `kind: 'badge'`: `label`, optional `variant` (tone hook) or full `className` override.
+- `kind: 'text'`: `content`, optional `className` (default muted toolbar text classes).
 - `kind: 'custom'`: `render: () => ReactNode` for one-offs the package shouldn't know about (e.g. `<Link>` from `react-router-dom`).
 
 Every item supports an optional `id` used as the React key. `ToolbarPanel` also accepts an optional `className` to override the outer wrapper styling.
@@ -1145,7 +1244,7 @@ function addPromptNode(tree: EditorTree): EditorTree {
 ## Notes
 
 - Import from the package root only.
-- Install `react`, `react-dom`, `reactflow`, and `react-bootstrap` in the consuming app, and load Bootstrap CSS as usual.
+- Install `react`, `react-dom`, and `reactflow` in the consuming app. Style panels with your UI library or CSS targeting `graph-editor-*` classes.
 - If you need wire-format compile/decompile helpers, use `@signalsafe/tree-spec`.
 
 ## Repository

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 /**
  * @packageDocumentation
- * React + Bootstrap implementation of the TreeSpec graph editor.
+ * UI-kit agnostic TreeSpec graph editor shell.
  *
  * Layered architecture:
  * - `@signalsafe/tree-spec` — wire contract (pure TS, no UI).
@@ -8,53 +8,51 @@
  *   and constants (no React, no DOM).
  * - `@signalsafe/tree-spec-editor-react` — headless React: React Flow canvas
  *   (no UI library).
- * - **`@signalsafe/tree-spec-editor`** (this package) — React + Bootstrap shell:
- *   sidebar panels, modals, toolbar, and the Bootstrap severity badge helper.
- *
- * The framework-agnostic surface from `-core` and the canvas from `-react`
- * are re-exported from this barrel for consumer convenience. Hosts targeting
- * alternative UI libraries (e.g. Material) should consume `-react` plus their
- * own UI shell instead.
+ * - **`@signalsafe/tree-spec-editor`** (this package) — composable panels,
+ *   modals, toolbar, and semantic `graph-editor-*` class hooks. Hosts style
+ *   with Bootstrap, Material UI, or custom CSS.
  *
  * Source layout:
  * - `panels/` — sidebar / toolbar / inspector presentational components
  * - `modals/` — authoring-flow dialogs
- * - `lib/` — UI-flavored helpers (Bootstrap severity badge classes)
+ * - `ui/` — UI-kit agnostic primitives and class tokens
+ * - `lib/` — panel helpers and toolbar builders
  */
 export { default } from '@signalsafe/tree-spec-editor-react';
 export type { TreeSpecGraphEditorProps, GraphEditorVersionInfo } from '@signalsafe/tree-spec-editor-react';
-export { default as IssuesPanel } from './panels/IssuesPanel';
-export type { IssuesPanelProps } from './panels/IssuesPanel';
-export { default as GraphEditorInfoPanel } from './panels/GraphEditorInfoPanel';
-export type { GraphEditorInfoPanelProps } from './panels/GraphEditorInfoPanel';
-export { default as NodesPanel } from './panels/NodesPanel';
-export type { NodesPanelProps } from './panels/NodesPanel';
-export { default as AdvancedJsonPanel } from './panels/AdvancedJsonPanel';
-export type { AdvancedJsonPanelProps } from './panels/AdvancedJsonPanel';
-export { default as InspectorPanel, DEFAULT_OUTCOME_OPTIONS } from './panels/InspectorPanel';
-export type { InspectorPanelProps, InspectorNodeRenderContext, InspectorChoiceRenderContext, } from './panels/InspectorPanel';
-export { default as AppearancePanel } from './panels/AppearancePanel';
-export type { AppearancePanelProps } from './panels/AppearancePanel';
-export { default as SelectedEdgePanel } from './panels/SelectedEdgePanel';
-export type { SelectedEdgePanelProps } from './panels/SelectedEdgePanel';
-export { default as ChoiceTemplatesPanel } from './panels/ChoiceTemplatesPanel';
-export type { ChoiceTemplatesPanelProps, ChoiceTemplateItem, ChoicePresetItem } from './panels/ChoiceTemplatesPanel';
-export type { ChoiceTypeOption } from './panels/InspectorPanel';
-export { default as ChoiceEdgeAppearanceFields } from './panels/ChoiceEdgeAppearanceFields';
-export type { ChoiceEdgeAppearanceFieldsProps } from './panels/ChoiceEdgeAppearanceFields';
-export { default as PublishReviewModal } from './modals/PublishReviewModal';
-export type { PublishReviewModalProps } from './modals/PublishReviewModal';
-export { default as DraftHistoryModal } from './modals/DraftHistoryModal';
-export type { DraftHistoryModalProps } from './modals/DraftHistoryModal';
-export { default as AuditLogModal } from './modals/AuditLogModal';
-export type { AuditLogModalProps } from './modals/AuditLogModal';
-export { default as ToolbarPanel, TOOLBAR_ITEM_KIND } from './panels/ToolbarPanel';
-export type { ToolbarPanelProps, ToolbarItem, ToolbarItemKind, ToolbarButtonItem, ToolbarDropdownItem, ToolbarDropdownEntry, ToolbarBadgeItem, ToolbarTextItem, ToolbarCustomItem, } from './panels/ToolbarPanel';
-export { getIssueSeverityBadgeClass } from './lib/panelHelpers';
-export { LIST_SELECTION_CLASS, CANVAS_SELECTION_CLASS, LIST_SELECTION_TEXT_CLASS, CANVAS_SELECTION_TEXT_CLASS } from './lib/selectionStyles';
-export { default as PanelHeaderCollapseCarets } from './lib/PanelHeaderCollapseCarets';
-export { buildDefaultToolbarSpec } from './lib/buildDefaultToolbarSpec';
-export type { BuildDefaultToolbarSpecOptions, DefaultToolbarActions, DefaultToolbarCapabilities, DefaultToolbarLabels, DefaultToolbarNodeType, DefaultToolbarState, DefaultToolbarTemplate, } from './lib/buildDefaultToolbarSpec';
+export { default as IssuesPanel } from './panels/IssuesPanel.js';
+export type { IssuesPanelProps } from './panels/IssuesPanel.js';
+export { default as GraphEditorInfoPanel } from './panels/GraphEditorInfoPanel.js';
+export type { GraphEditorInfoPanelProps } from './panels/GraphEditorInfoPanel.js';
+export { default as NodesPanel } from './panels/NodesPanel.js';
+export type { NodesPanelProps } from './panels/NodesPanel.js';
+export { default as AdvancedJsonPanel } from './panels/AdvancedJsonPanel.js';
+export type { AdvancedJsonPanelProps } from './panels/AdvancedJsonPanel.js';
+export { default as InspectorPanel, DEFAULT_OUTCOME_OPTIONS } from './panels/InspectorPanel.js';
+export type { InspectorPanelProps, InspectorNodeRenderContext, InspectorChoiceRenderContext, } from './panels/InspectorPanel.js';
+export { default as AppearancePanel } from './panels/AppearancePanel.js';
+export type { AppearancePanelProps } from './panels/AppearancePanel.js';
+export { default as SelectedEdgePanel } from './panels/SelectedEdgePanel.js';
+export type { SelectedEdgePanelProps } from './panels/SelectedEdgePanel.js';
+export { default as ChoiceTemplatesPanel } from './panels/ChoiceTemplatesPanel.js';
+export type { ChoiceTemplatesPanelProps, ChoiceTemplateItem, ChoicePresetItem } from './panels/ChoiceTemplatesPanel.js';
+export type { ChoiceTypeOption } from './panels/InspectorPanel.js';
+export { default as ChoiceEdgeAppearanceFields } from './panels/ChoiceEdgeAppearanceFields.js';
+export type { ChoiceEdgeAppearanceFieldsProps } from './panels/ChoiceEdgeAppearanceFields.js';
+export { default as PublishReviewModal } from './modals/PublishReviewModal.js';
+export type { PublishReviewModalProps } from './modals/PublishReviewModal.js';
+export { default as DraftHistoryModal } from './modals/DraftHistoryModal.js';
+export type { DraftHistoryModalProps } from './modals/DraftHistoryModal.js';
+export { default as AuditLogModal } from './modals/AuditLogModal.js';
+export type { AuditLogModalProps } from './modals/AuditLogModal.js';
+export { default as ToolbarPanel, TOOLBAR_ITEM_KIND } from './panels/ToolbarPanel.js';
+export type { ToolbarPanelProps, ToolbarItem, ToolbarItemKind, ToolbarButtonItem, ToolbarDropdownItem, ToolbarDropdownEntry, ToolbarBadgeItem, ToolbarTextItem, ToolbarCustomItem, } from './panels/ToolbarPanel.js';
+export { getIssueSeverityBadgeClass, getIssueSeverityToken } from './lib/panelHelpers.js';
+export type { IssueSeverityToken } from './lib/panelHelpers.js';
+export { LIST_SELECTION_CLASS, CANVAS_SELECTION_CLASS, LIST_SELECTION_TEXT_CLASS, CANVAS_SELECTION_TEXT_CLASS } from './lib/selectionStyles.js';
+export { default as PanelHeaderCollapseCarets } from './lib/PanelHeaderCollapseCarets.js';
+export { buildDefaultToolbarSpec } from './lib/buildDefaultToolbarSpec.js';
+export type { BuildDefaultToolbarSpecOptions, DefaultToolbarActions, DefaultToolbarCapabilities, DefaultToolbarLabels, DefaultToolbarNodeType, DefaultToolbarState, DefaultToolbarTemplate, } from './lib/buildDefaultToolbarSpec.js';
 export { END_NODE_ID, GRAPH_SELECTION_KIND, safeUUID, getTransition, upsertTransition, deleteTransitionsForChoice, lintEditorTree, parsePydanticOutcomeErrors, shouldQueueInitialValidation, TREE_SPEC_NODE_TYPE_PRESETS, autoLayoutTree, getNextSpawnPosition, needsInitialLayout, getThemeHints, getEditorHints, isNodeLocked, patchEditorHints, editorHintsToStyle, RENDER_HINTS_THEME_NS, RENDER_HINTS_EDITOR_NS, GRAPH_POSITION_KEY, getAutosaveStatusLabel, AUTOSAVE_STATUS, getKeyboardShortcutAction, KEYBOARD_SHORTCUT_ACTION, applyTreeTemplate, applyEditorConnectOnDrop, computeTreeDiffSummary, deleteNode, duplicateNode, buildStableEntries, } from '@signalsafe/tree-spec-editor-core';
 export type { EditorChoice, EditorNode, EditorTransition, EditorTree, GraphEditorIssue, GraphSelection, GraphSelectionKind, ReactFlowEdgeChange, ReactFlowNodeChange, TreeSpecAuditEventItem, TreeSpecSnapshotItem, TreeSpecNodeTypePreset, AutosaveStatus, KeyboardShortcutAction, KeyboardShortcutParams, ApplyTreeTemplateOptions, TreeDiffSummary, TreeTemplateNodeSpec, TreeTemplateSpec, TreeTemplateTransitionSpec, ConnectOnDropOptions, NodeEditorHints, GraphPosition, } from '@signalsafe/tree-spec-editor-core';
 export type { TreeSpecIssue, TreeSpecWire } from '@signalsafe/tree-spec';

package/dist/index.d.ts.map

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

package/dist/index.js

@@ -1,6 +1,6 @@
 /**
  * @packageDocumentation
- * React + Bootstrap implementation of the TreeSpec graph editor.
+ * UI-kit agnostic TreeSpec graph editor shell.
  *
  * Layered architecture:
  * - `@signalsafe/tree-spec` — wire contract (pure TS, no UI).
@@ -8,37 +8,34 @@
  *   and constants (no React, no DOM).
  * - `@signalsafe/tree-spec-editor-react` — headless React: React Flow canvas
  *   (no UI library).
- * - **`@signalsafe/tree-spec-editor`** (this package) — React + Bootstrap shell:
- *   sidebar panels, modals, toolbar, and the Bootstrap severity badge helper.
- *
- * The framework-agnostic surface from `-core` and the canvas from `-react`
- * are re-exported from this barrel for consumer convenience. Hosts targeting
- * alternative UI libraries (e.g. Material) should consume `-react` plus their
- * own UI shell instead.
+ * - **`@signalsafe/tree-spec-editor`** (this package) — composable panels,
+ *   modals, toolbar, and semantic `graph-editor-*` class hooks. Hosts style
+ *   with Bootstrap, Material UI, or custom CSS.
  *
  * Source layout:
  * - `panels/` — sidebar / toolbar / inspector presentational components
  * - `modals/` — authoring-flow dialogs
- * - `lib/` — UI-flavored helpers (Bootstrap severity badge classes)
+ * - `ui/` — UI-kit agnostic primitives and class tokens
+ * - `lib/` — panel helpers and toolbar builders
  */
 export { default } from '@signalsafe/tree-spec-editor-react';
-export { default as IssuesPanel } from './panels/IssuesPanel';
-export { default as GraphEditorInfoPanel } from './panels/GraphEditorInfoPanel';
-export { default as NodesPanel } from './panels/NodesPanel';
-export { default as AdvancedJsonPanel } from './panels/AdvancedJsonPanel';
-export { default as InspectorPanel, DEFAULT_OUTCOME_OPTIONS } from './panels/InspectorPanel';
-export { default as AppearancePanel } from './panels/AppearancePanel';
-export { default as SelectedEdgePanel } from './panels/SelectedEdgePanel';
-export { default as ChoiceTemplatesPanel } from './panels/ChoiceTemplatesPanel';
-export { default as ChoiceEdgeAppearanceFields } from './panels/ChoiceEdgeAppearanceFields';
-export { default as PublishReviewModal } from './modals/PublishReviewModal';
-export { default as DraftHistoryModal } from './modals/DraftHistoryModal';
-export { default as AuditLogModal } from './modals/AuditLogModal';
-export { default as ToolbarPanel, TOOLBAR_ITEM_KIND } from './panels/ToolbarPanel';
-export { getIssueSeverityBadgeClass } from './lib/panelHelpers';
-export { LIST_SELECTION_CLASS, CANVAS_SELECTION_CLASS, LIST_SELECTION_TEXT_CLASS, CANVAS_SELECTION_TEXT_CLASS } from './lib/selectionStyles';
-export { default as PanelHeaderCollapseCarets } from './lib/PanelHeaderCollapseCarets';
-export { buildDefaultToolbarSpec } from './lib/buildDefaultToolbarSpec';
+export { default as IssuesPanel } from './panels/IssuesPanel.js';
+export { default as GraphEditorInfoPanel } from './panels/GraphEditorInfoPanel.js';
+export { default as NodesPanel } from './panels/NodesPanel.js';
+export { default as AdvancedJsonPanel } from './panels/AdvancedJsonPanel.js';
+export { default as InspectorPanel, DEFAULT_OUTCOME_OPTIONS } from './panels/InspectorPanel.js';
+export { default as AppearancePanel } from './panels/AppearancePanel.js';
+export { default as SelectedEdgePanel } from './panels/SelectedEdgePanel.js';
+export { default as ChoiceTemplatesPanel } from './panels/ChoiceTemplatesPanel.js';
+export { default as ChoiceEdgeAppearanceFields } from './panels/ChoiceEdgeAppearanceFields.js';
+export { default as PublishReviewModal } from './modals/PublishReviewModal.js';
+export { default as DraftHistoryModal } from './modals/DraftHistoryModal.js';
+export { default as AuditLogModal } from './modals/AuditLogModal.js';
+export { default as ToolbarPanel, TOOLBAR_ITEM_KIND } from './panels/ToolbarPanel.js';
+export { getIssueSeverityBadgeClass, getIssueSeverityToken } from './lib/panelHelpers.js';
+export { LIST_SELECTION_CLASS, CANVAS_SELECTION_CLASS, LIST_SELECTION_TEXT_CLASS, CANVAS_SELECTION_TEXT_CLASS } from './lib/selectionStyles.js';
+export { default as PanelHeaderCollapseCarets } from './lib/PanelHeaderCollapseCarets.js';
+export { buildDefaultToolbarSpec } from './lib/buildDefaultToolbarSpec.js';
 /* ------------------------------------------------------------------------- */
 /* Framework-agnostic re-exports from @signalsafe/tree-spec-editor-core.     */
 /* Hosts may consume these directly from `-core` to skip the React surface.  */

package/dist/lib/PanelHeaderCollapseCarets.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PanelHeaderCollapseCarets.d.ts","sourceRoot":"","sources":["../../src/lib/PanelHeaderCollapseCarets.tsx"],"names":[],"mappings":"AAAA,MAAM,WAAW,8BAA8B;IAC3C,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,qDAAqD;AACrD,MAAM,CAAC,OAAO,UAAU,yBAAyB,CAAC,EAC9C,QAAQ,EACR,QAAQ,GACX,EAAE,QAAQ,CAAC,8BAA8B,CAAC,+BAY1C"}
+{"version":3,"file":"PanelHeaderCollapseCarets.d.ts","sourceRoot":"","sources":["../../src/lib/PanelHeaderCollapseCarets.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,8BAA8B;IAC3C,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,qDAAqD;AACrD,MAAM,CAAC,OAAO,UAAU,yBAAyB,CAAC,EAC9C,QAAQ,EACR,QAAQ,GACX,EAAE,QAAQ,CAAC,8BAA8B,CAAC,+BAU1C"}

package/dist/lib/PanelHeaderCollapseCarets.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { EditorIconButton } from '../ui/primitives.js';
 /** Collapse/expand carets for card panel headers. */
 export default function PanelHeaderCollapseCarets({ expanded, onToggle, }) {
-    return (_jsx("button", { type: "button", className: "btn btn-sm btn-link text-body-secondary p-0 ms-1", "aria-expanded": expanded, "aria-label": expanded ? 'Collapse panel' : 'Expand panel', onClick: onToggle, children: _jsx("i", { className: `bi bi-caret-${expanded ? 'up' : 'down'}`, "aria-hidden": true }) }));
+    return (_jsx(EditorIconButton, { "aria-expanded": expanded, "aria-label": expanded ? 'Collapse panel' : 'Expand panel', onClick: onToggle, children: expanded ? '▲' : '▼' }));
 }

package/dist/lib/panelHelpers.d.ts

@@ -1,3 +1,10 @@
-/** Bootstrap severity badge class for issue rows. */
+/** Semantic severity token for host UI mapping. */
+export type IssueSeverityToken = 'error' | 'warning' | 'info' | 'neutral';
+/** Maps a TreeSpec issue severity to a UI-kit agnostic token. */
+export declare function getIssueSeverityToken(severity: string): IssueSeverityToken;
+/**
+ * Returns semantic badge class hooks for issue rows.
+ * Hosts style `.graph-editor-badge--*` with Bootstrap, MUI, or custom CSS.
+ */
 export declare function getIssueSeverityBadgeClass(severity: string): string;
 //# sourceMappingURL=panelHelpers.d.ts.map

package/dist/lib/panelHelpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"panelHelpers.d.ts","sourceRoot":"","sources":["../../src/lib/panelHelpers.ts"],"names":[],"mappings":"AAEA,qDAAqD;AACrD,wBAAgB,0BAA0B,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAWnE"}
+{"version":3,"file":"panelHelpers.d.ts","sourceRoot":"","sources":["../../src/lib/panelHelpers.ts"],"names":[],"mappings":"AAIA,mDAAmD;AACnD,MAAM,MAAM,kBAAkB,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAAC;AAE1E,iEAAiE;AACjE,wBAAgB,qBAAqB,CAAC,QAAQ,EAAE,MAAM,GAAG,kBAAkB,CAW1E;AAED;;;GAGG;AACH,wBAAgB,0BAA0B,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAEnE"}

package/dist/lib/panelHelpers.js

@@ -1,14 +1,22 @@
 import { TREE_SPEC_ISSUE_SEVERITY } from '@signalsafe/tree-spec';
-/** Bootstrap severity badge class for issue rows. */
-export function getIssueSeverityBadgeClass(severity) {
+import { EDITOR_BADGE } from '../ui/editorClasses.js';
+/** Maps a TreeSpec issue severity to a UI-kit agnostic token. */
+export function getIssueSeverityToken(severity) {
     switch (severity) {
         case TREE_SPEC_ISSUE_SEVERITY.ERROR:
-            return 'text-bg-danger';
+            return 'error';
         case TREE_SPEC_ISSUE_SEVERITY.WARNING:
-            return 'text-bg-warning text-dark';
+            return 'warning';
         case TREE_SPEC_ISSUE_SEVERITY.INFO:
-            return 'text-bg-info text-dark';
+            return 'info';
         default:
-            return 'text-bg-secondary';
+            return 'neutral';
     }
 }
+/**
+ * Returns semantic badge class hooks for issue rows.
+ * Hosts style `.graph-editor-badge--*` with Bootstrap, MUI, or custom CSS.
+ */
+export function getIssueSeverityBadgeClass(severity) {
+    return `${EDITOR_BADGE} graph-editor-badge--${getIssueSeverityToken(severity)}`;
+}

package/dist/lib/panelNodeLink.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"panelNodeLink.d.ts","sourceRoot":"","sources":["../../src/lib/panelNodeLink.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAE1E,MAAM,WAAW,oBAAoB;IACjC,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C;AAED,6FAA6F;AAC7F,wBAAgB,aAAa,CAAC,EAC1B,MAAM,EACN,YAAY,GACf,EAAE,QAAQ,CAAC;IACR,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C,CAAC,GAAG,SAAS,CAcb;AAED,kEAAkE;AAClE,wBAAgB,2BAA2B,CACvC,IAAI,EAAE,gBAAgB,EACtB,EAAE,YAAY,EAAE,EAAE,oBAAoB,GACvC,SAAS,CAUX"}
+{"version":3,"file":"panelNodeLink.d.ts","sourceRoot":"","sources":["../../src/lib/panelNodeLink.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAI1E,MAAM,WAAW,oBAAoB;IACjC,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C;AAED,6FAA6F;AAC7F,wBAAgB,aAAa,CAAC,EAC1B,MAAM,EACN,YAAY,GACf,EAAE,QAAQ,CAAC;IACR,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C,CAAC,GAAG,SAAS,CAcb;AAED,kEAAkE;AAClE,wBAAgB,2BAA2B,CACvC,IAAI,EAAE,gBAAgB,EACtB,EAAE,YAAY,EAAE,EAAE,oBAAoB,GACvC,SAAS,CAUX"}

package/dist/lib/panelNodeLink.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { EDITOR_BTN, joinClasses } from '../ui/editorClasses.js';
 /** Clickable node id for panel breadcrumb lines; plain text when `onNodeSelect` is unset. */
 export function PanelNodeLink({ nodeId, onNodeSelect, }) {
     if (!onNodeSelect) {
         return nodeId;
     }
-    return (_jsx("button", { type: "button", className: "btn btn-link p-0 align-baseline font-size-12", onClick: () => onNodeSelect(nodeId), children: nodeId }));
+    return (_jsx("button", { type: "button", className: joinClasses(EDITOR_BTN, 'graph-editor-btn--link', 'graph-editor-text--sm'), onClick: () => onNodeSelect(nodeId), children: nodeId }));
 }
 /** Default `from · choice → to` line for selected transitions. */
 export function renderDefaultEdgeBreadcrumb(edge, { onNodeSelect }) {

package/dist/lib/selectionStyles.d.ts

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

package/dist/lib/selectionStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"selectionStyles.d.ts","sourceRoot":"","sources":["../../src/lib/selectionStyles.ts"],"names":[],"mappings":"AAAA,4EAA4E;AAC5E,eAAO,MAAM,oBAAoB,4BAA4B,CAAC;AAE9D,wFAAwF;AACxF,eAAO,MAAM,yBAAyB,kCAAkC,CAAC;AAEzE,iEAAiE;AACjE,eAAO,MAAM,sBAAsB,sBAAsB,CAAC;AAE1D,wEAAwE;AACxE,eAAO,MAAM,2BAA2B,iCAAiC,CAAC"}
+{"version":3,"file":"selectionStyles.d.ts","sourceRoot":"","sources":["../../src/lib/selectionStyles.ts"],"names":[],"mappings":"AAAA,6DAA6D;AAC7D,eAAO,MAAM,oBAAoB,sCAAsC,CAAC;AAExE,8CAA8C;AAC9C,eAAO,MAAM,yBAAyB,2CAA2C,CAAC;AAElF,iEAAiE;AACjE,eAAO,MAAM,sBAAsB,kCAAkC,CAAC;AAEtE,8CAA8C;AAC9C,eAAO,MAAM,2BAA2B,iCAAiC,CAAC"}