@signalsafe/tree-spec-editor 0.2.3 → 0.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (65) hide show
  1. package/README.md +74 -25
  2. package/dist/index.d.ts +8 -10
  3. package/dist/index.d.ts.map +1 -1
  4. package/dist/index.js +7 -10
  5. package/dist/lib/PanelHeaderCollapseCarets.d.ts.map +1 -1
  6. package/dist/lib/PanelHeaderCollapseCarets.js +2 -1
  7. package/dist/lib/panelHelpers.d.ts +8 -1
  8. package/dist/lib/panelHelpers.d.ts.map +1 -1
  9. package/dist/lib/panelHelpers.js +14 -6
  10. package/dist/lib/panelNodeLink.d.ts.map +1 -1
  11. package/dist/lib/panelNodeLink.js +2 -1
  12. package/dist/lib/selectionStyles.d.ts +6 -6
  13. package/dist/lib/selectionStyles.d.ts.map +1 -1
  14. package/dist/lib/selectionStyles.js +6 -6
  15. package/dist/modals/AuditLogModal.d.ts +0 -6
  16. package/dist/modals/AuditLogModal.d.ts.map +1 -1
  17. package/dist/modals/AuditLogModal.js +6 -5
  18. package/dist/modals/DraftHistoryModal.d.ts +0 -10
  19. package/dist/modals/DraftHistoryModal.d.ts.map +1 -1
  20. package/dist/modals/DraftHistoryModal.js +6 -5
  21. package/dist/modals/PublishReviewModal.d.ts.map +1 -1
  22. package/dist/modals/PublishReviewModal.js +3 -2
  23. package/dist/panels/AdvancedJsonPanel.d.ts +1 -1
  24. package/dist/panels/AdvancedJsonPanel.d.ts.map +1 -1
  25. package/dist/panels/AdvancedJsonPanel.js +3 -3
  26. package/dist/panels/AppearancePanel.d.ts.map +1 -1
  27. package/dist/panels/AppearancePanel.js +6 -8
  28. package/dist/panels/ChoiceEdgeAppearanceFields.d.ts.map +1 -1
  29. package/dist/panels/ChoiceEdgeAppearanceFields.js +4 -3
  30. package/dist/panels/ChoiceTemplatesPanel.d.ts.map +1 -1
  31. package/dist/panels/ChoiceTemplatesPanel.js +3 -2
  32. package/dist/panels/GraphEditorInfoPanel.d.ts.map +1 -1
  33. package/dist/panels/GraphEditorInfoPanel.js +5 -4
  34. package/dist/panels/InspectorPanel.d.ts.map +1 -1
  35. package/dist/panels/InspectorPanel.js +1 -1
  36. package/dist/panels/IssuesPanel.d.ts.map +1 -1
  37. package/dist/panels/IssuesPanel.js +4 -5
  38. package/dist/panels/NodesPanel.d.ts.map +1 -1
  39. package/dist/panels/NodesPanel.js +7 -6
  40. package/dist/panels/SelectedEdgePanel.d.ts.map +1 -1
  41. package/dist/panels/SelectedEdgePanel.js +2 -1
  42. package/dist/panels/ToolbarPanel.d.ts +6 -18
  43. package/dist/panels/ToolbarPanel.d.ts.map +1 -1
  44. package/dist/panels/ToolbarPanel.js +10 -24
  45. package/dist/panels/inspector/ChoiceEditorCard.d.ts.map +1 -1
  46. package/dist/panels/inspector/ChoiceEditorCard.js +5 -4
  47. package/dist/panels/inspector/ChoiceEditorList.d.ts.map +1 -1
  48. package/dist/panels/inspector/ChoiceEditorList.js +3 -1
  49. package/dist/panels/inspector/NodeTypeField.d.ts.map +1 -1
  50. package/dist/panels/inspector/NodeTypeField.js +4 -3
  51. package/dist/panels/inspector/RequiredNodeCard.d.ts.map +1 -1
  52. package/dist/panels/inspector/RequiredNodeCard.js +3 -2
  53. package/dist/panels/inspector/choiceActionIconProps.d.ts +3 -2
  54. package/dist/panels/inspector/choiceActionIconProps.d.ts.map +1 -1
  55. package/dist/panels/inspector/choiceActionIconProps.js +4 -2
  56. package/dist/ui/editorClasses.d.ts +66 -0
  57. package/dist/ui/editorClasses.d.ts.map +1 -0
  58. package/dist/ui/editorClasses.js +89 -0
  59. package/dist/ui/primitives.d.ts +23 -0
  60. package/dist/ui/primitives.d.ts.map +1 -0
  61. package/dist/ui/primitives.js +32 -0
  62. package/docs/UI_KIT_AGNOSTIC_REFACTOR.md +186 -0
  63. package/docs/UI_KIT_AGNOSTIC_USAGE.md +129 -0
  64. package/package.json +8 -9
  65. package/README.standalone.md +0 -14
package/README.md CHANGED
@@ -1,17 +1,17 @@
1
1
  # `@signalsafe/tree-spec-editor`
2
2
 
3
- React **Bootstrap UI shell** for authoring TreeSpec graphs: canvas (from `@signalsafe/tree-spec-editor-react`), sidebar panels, modals, and toolbar helpers.
3
+ 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.
4
4
 
5
5
  | | |
6
6
  |---|---|
7
7
  | **npm** | `@signalsafe/tree-spec-editor` |
8
8
  | **GitHub** | [SignalSafeSoftware/tree-spec-editor](https://github.com/SignalSafeSoftware/tree-spec-editor) |
9
- | **Peer deps** | `react`, `react-dom`, `reactflow`, `react-bootstrap` |
9
+ | **Peer deps** | `react`, `react-dom`, `reactflow` |
10
10
 
11
11
  ## What this package does
12
12
 
13
13
  - Ships a ready-to-embed **graph editor UI** (`TreeSpecGraphEditor` re-export, panels, modals, toolbar).
14
- - Re-exports selected **editor-core helpers** and types for one-stop imports in Bootstrap hosts.
14
+ - Re-exports selected **editor-core helpers** and types for one-stop imports in React hosts.
15
15
 
16
16
  ## What this package does not do
17
17
 
@@ -26,18 +26,66 @@ React **Bootstrap UI shell** for authoring TreeSpec graphs: canvas (from `@signa
26
26
  | Wire | `@signalsafe/tree-spec` |
27
27
  | Editor model | `@signalsafe/tree-spec-editor-core` |
28
28
  | React Flow canvas | `@signalsafe/tree-spec-editor-react` |
29
- | **Bootstrap shell (this package)** | `@signalsafe/tree-spec-editor` |
29
+ | **UI shell (this package)** | `@signalsafe/tree-spec-editor` |
30
30
 
31
31
  ## Install
32
32
 
33
33
  ```bash
34
- npm install @signalsafe/tree-spec-editor @signalsafe/tree-spec-editor-react @signalsafe/tree-spec-editor-core @signalsafe/tree-spec react react-dom reactflow react-bootstrap bootstrap
34
+ npm install @signalsafe/tree-spec-editor @signalsafe/tree-spec-editor-react @signalsafe/tree-spec-editor-core @signalsafe/tree-spec react react-dom reactflow
35
35
  ```
36
36
 
37
- Load Bootstrap CSS in your app. Import React Flow CSS as documented in `@signalsafe/tree-spec-editor-react`.
37
+ 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).
38
+
39
+ ## UI-kit agnostic styling
40
+
41
+ This package renders **semantic HTML** with stable **`graph-editor-*` classes**. Your app owns Bootstrap, Material UI, Tailwind, or plain CSS.
42
+
43
+ **Docs:** [docs/UI_KIT_AGNOSTIC_USAGE.md](./docs/UI_KIT_AGNOSTIC_USAGE.md) (class hooks, render props, DeliveryPlus migration).
44
+
45
+ ### Minimal plain HTML example
46
+
47
+ Panels work without any UI library once you map the hooks:
48
+
49
+ ```tsx
50
+ import { ToolbarPanel, IssuesPanel } from '@signalsafe/tree-spec-editor';
51
+
52
+ // Host CSS (global stylesheet or CSS module)
53
+ const editorStyles = `
54
+ .graph-editor-card { border: 1px solid #ccc; border-radius: 6px; margin-bottom: 1rem; }
55
+ .graph-editor-card__header { padding: 0.5rem 0.75rem; background: #f5f5f5; font-weight: 600; }
56
+ .graph-editor-list__item { padding: 0.5rem 0.75rem; border-top: 1px solid #eee; }
57
+ .graph-editor-list__item--selected { background: #e7f1ff; }
58
+ .graph-editor-btn { padding: 0.25rem 0.75rem; border: 1px solid #999; border-radius: 4px; background: #fff; }
59
+ .graph-editor-badge--error { background: #dc3545; color: #fff; padding: 0.1rem 0.4rem; border-radius: 4px; }
60
+ `;
61
+
62
+ export function EditorChrome() {
63
+ return (
64
+ <>
65
+ <style>{editorStyles}</style>
66
+ <ToolbarPanel items={[{ kind: 'button', id: 'save', label: 'Save', onClick: () => {} }]} />
67
+ <IssuesPanel issues={[]} lastValidatedAt={null} onSelectIssue={() => {}} />
68
+ </>
69
+ );
70
+ }
71
+ ```
72
+
73
+ ### Optional: Bootstrap styling in the host app (not a package requirement)
74
+
75
+ If your host already uses Bootstrap, add **host-owned** CSS that maps hooks to Bootstrap utilities — the package does not import Bootstrap:
76
+
77
+ ```css
78
+ /* Host app: graph-editor-bootstrap-bridge.css (example) */
79
+ .graph-editor-card { /* mirror .card rules or @import bootstrap */ }
80
+ .graph-editor-btn--neutral { /* mirror .btn.btn-outline-secondary */ }
81
+ .graph-editor-list__item--selected { /* mirror .list-group-item-primary */ }
82
+ .graph-editor-badge--error { /* mirror .badge.text-bg-danger */ }
83
+ ```
38
84
 
39
85
  ## Development
40
86
 
87
+ 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).
88
+
41
89
  `yarn build` uses `tsconfig.build.json` and resolves `@signalsafe/*` from `node_modules`. Ecosystem sibling `paths` in `tsconfig.json` apply to local typecheck/tests only.
42
90
 
43
91
  ```bash
@@ -71,13 +119,14 @@ Published consumers import only the package root. Layer stack:
71
119
  | Wire | [`@signalsafe/tree-spec`](../tree-spec/README.md) | TreeSpec wire types, constants, compile/lint. Pure TS. |
72
120
  | Core | [`@signalsafe/tree-spec-editor-core`](../tree-spec-editor-core/README.md) | Editor model, tree operations, layout/autosave/keyboard helpers, constants. Pure TS. |
73
121
  | React | [`@signalsafe/tree-spec-editor-react`](../tree-spec-editor-react/README.md) | React Flow canvas (`TreeSpecGraphEditor`). React-specific, UI-library-agnostic. |
74
- | 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. |
122
+ | 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`. |
75
123
 
76
124
  | Directory | Contents |
77
125
  |-----------|----------|
78
- | `src/panels/` | Sidebar, toolbar, inspector, and JSON chrome components (React + `react-bootstrap`) |
79
- | `src/modals/` | Publish review, draft history, and audit log dialogs (React + `react-bootstrap`) |
80
- | `src/lib/panelHelpers.ts` | `getIssueSeverityBadgeClass` (Bootstrap-flavored — Material / Angular shells ship their own equivalent) |
126
+ | `src/panels/` | Sidebar, toolbar, inspector, and JSON chrome components (UI-kit agnostic React) |
127
+ | `src/modals/` | Publish review, draft history, and audit log dialogs (UI-kit agnostic React) |
128
+ | `src/ui/` | UI-kit agnostic primitives and `graph-editor-*` class tokens |
129
+ | `src/lib/panelHelpers.ts` | `getIssueSeverityToken`, `getIssueSeverityBadgeClass` (semantic badge hooks) |
81
130
  | `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` |
82
131
 
83
132
  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`**.
@@ -86,7 +135,7 @@ Tests live under `tests/panels/`, `tests/modals/`, and `tests/index.test.ts` in
86
135
 
87
136
  | You want… | Import from |
88
137
  |----------|-------------|
89
- | The full React + Bootstrap editor (canvas + panels + modals + toolbar) | `@signalsafe/tree-spec-editor` (this package) |
138
+ | The full React editor shell (canvas + panels + modals + toolbar) | `@signalsafe/tree-spec-editor` (this package) |
90
139
  | Just the canvas, with your own UI library (Material / Tailwind / custom) | `@signalsafe/tree-spec-editor-react` |
91
140
  | Just the framework-agnostic helpers (CLI, server-side preview, Angular shell) | `@signalsafe/tree-spec-editor-core` |
92
141
  | Just the wire contract (validation, compile, lint) | `@signalsafe/tree-spec` |
@@ -99,7 +148,7 @@ Tests live under `tests/panels/`, `tests/modals/`, and `tests/index.test.ts` in
99
148
  | Angular editor | `@signalsafe/tree-spec-editor-angular` (planned) + `-core` |
100
149
  | Vue editor | `@signalsafe/tree-spec-editor-vue` (planned) + `-core` |
101
150
 
102
- This package (`@signalsafe/tree-spec-editor`) **remains the Bootstrap reference shell** — it does not become Material, Angular, or Vue.
151
+ 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.
103
152
 
104
153
  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.
105
154
 
@@ -108,7 +157,7 @@ See package READMEs in the [`tree-spec-editor-core`](https://github.com/SignalSa
108
157
  Typical host apps import from **three** packages:
109
158
 
110
159
  ```tsx
111
- // Bootstrap UI shell — panels, modals, toolbar, canvas default export
160
+ // UI shell — panels, modals, toolbar, canvas default export
112
161
  import TreeSpecGraphEditor, { AppearancePanel, buildDefaultToolbarSpec, … } from '@signalsafe/tree-spec-editor';
113
162
 
114
163
  // Stateful orchestration hook (not re-exported from the shell barrel)
@@ -211,7 +260,7 @@ export function ExampleTreeSpecEditor(): JSX.Element {
211
260
  - `LIST_SELECTION_CLASS`, `CANVAS_SELECTION_CLASS`, …: shared CSS class helpers for list/canvas selection highlighting.
212
261
  - `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`.
213
262
  - `PublishReviewModal`, `DraftHistoryModal`, `AuditLogModal`: presentational modals for the publish-review / draft-snapshot / audit-log authoring flows; all strings are overridable.
214
- - `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.
263
+ - `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.
215
264
  - `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).
216
265
  - `getAutosaveStatusLabel`, `getKeyboardShortcutAction`, `shouldQueueInitialValidation`: editor-lifecycle helpers (default autosave label, default keyboard-shortcut mapper, "should we validate on load?" tri-state policy).
217
266
  - `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.
@@ -221,7 +270,7 @@ export function ExampleTreeSpecEditor(): JSX.Element {
221
270
  - `GraphSelection` and `GraphEditorIssue`: optional selection and issue-display types.
222
271
  - `autoLayoutTree` and `getNextSpawnPosition`: layout helpers for placing nodes.
223
272
  - `lintEditorTree`, `getTransition`, `upsertTransition`, `deleteTransitionsForChoice`: editor helpers for validation and transition updates.
224
- - `buildStableEntries`, `getIssueSeverityBadgeClass`: small helpers reused by the sidebar panels and available for hosts that compose their own UI.
273
+ - `buildStableEntries`, `getIssueSeverityBadgeClass`, `getIssueSeverityToken`: small helpers reused by the sidebar panels and available for hosts that compose their own UI.
225
274
 
226
275
  ## Feature Examples
227
276
 
@@ -391,7 +440,7 @@ The package also ships two presentational components for the editor's left rail.
391
440
 
392
441
  ### `IssuesPanel`
393
442
 
394
- 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`.
443
+ 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`.
395
444
 
396
445
  ```tsx
397
446
  import { useMemo, useState, type JSX } from 'react';
@@ -530,7 +579,7 @@ export function CompiledTreeSpecPanel({ tree }: Props): JSX.Element {
530
579
 
531
580
  ### `InspectorPanel`
532
581
 
533
- 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:
582
+ 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:
534
583
 
535
584
  - **Type** `<select>` (with the package's `TREE_SPEC_NODE_TYPE_PRESETS` + custom-value input, or a host-supplied **choice type** catalog via `choiceTypes` / `onSetChoiceType`).
536
585
  - **Prompt** `<textarea>`.
@@ -696,7 +745,7 @@ Optional compact read-only card that surfaces the currently selected transition.
696
745
 
697
746
  ## Modals
698
747
 
699
- 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.
748
+ 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.
700
749
 
701
750
  ### `PublishReviewModal`
702
751
 
@@ -809,7 +858,7 @@ function DraftHistoryModalContainer({
809
858
 
810
859
  ### `AuditLogModal`
811
860
 
812
- 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.
861
+ 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.
813
862
 
814
863
  ```tsx
815
864
  import { AuditLogModal, type TreeSpecAuditEventItem } from '@signalsafe/tree-spec-editor';
@@ -878,7 +927,7 @@ const items = buildDefaultToolbarSpec({
878
927
  ### `ToolbarPanel`
879
928
 
880
929
  A data-driven toolbar for editor pages. Hosts pass an `items: ToolbarItem[]`
881
- array; the package renders Bootstrap chrome (`Button`, `Dropdown`, badge,
930
+ array; the package renders semantic toolbar markup (`<button>`, `<details>` menu, badges,
882
931
  muted text) inside a single flex wrapper. Project-specific concerns —
883
932
  adapter capability gates, dropdown vocabularies, button labels, and disabled
884
933
  rules — stay in the host as closures inside each item. Prefer
@@ -911,10 +960,10 @@ const items: ToolbarItem[] = [
911
960
 
912
961
  **Item kinds.** Each `ToolbarItem` is one of:
913
962
 
914
- - `kind: 'button'`: `label`, `onClick`, optional `variant` (Bootstrap variant string, default `outline-secondary`), `disabled`, `title`, `className`.
915
- - `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 />`.
916
- - `kind: 'badge'`: `label`, optional `variant` (Bootstrap badge variant, default `secondary`) or full `className` override.
917
- - `kind: 'text'`: `content`, optional `className` (default `"ms-2 text-muted font-size-12"`).
963
+ - `kind: 'button'`: `label`, `onClick`, optional `variant` (tone hook or legacy Bootstrap variant string — mapped to `graph-editor-btn--*`), `disabled`, `title`, `className`.
964
+ - `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.
965
+ - `kind: 'badge'`: `label`, optional `variant` (tone hook) or full `className` override.
966
+ - `kind: 'text'`: `content`, optional `className` (default muted toolbar text classes).
918
967
  - `kind: 'custom'`: `render: () => ReactNode` for one-offs the package shouldn't know about (e.g. `<Link>` from `react-router-dom`).
919
968
 
920
969
  Every item supports an optional `id` used as the React key. `ToolbarPanel` also accepts an optional `className` to override the outer wrapper styling.
@@ -1195,7 +1244,7 @@ function addPromptNode(tree: EditorTree): EditorTree {
1195
1244
  ## Notes
1196
1245
 
1197
1246
  - Import from the package root only.
1198
- - Install `react`, `react-dom`, `reactflow`, and `react-bootstrap` in the consuming app, and load Bootstrap CSS as usual.
1247
+ - Install `react`, `react-dom`, and `reactflow` in the consuming app. Style panels with your UI library or CSS targeting `graph-editor-*` classes.
1199
1248
  - If you need wire-format compile/decompile helpers, use `@signalsafe/tree-spec`.
1200
1249
 
1201
1250
  ## Repository
package/dist/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * @packageDocumentation
3
- * React + Bootstrap implementation of the TreeSpec graph editor.
3
+ * UI-kit agnostic TreeSpec graph editor shell.
4
4
  *
5
5
  * Layered architecture:
6
6
  * - `@signalsafe/tree-spec` — wire contract (pure TS, no UI).
@@ -8,18 +8,15 @@
8
8
  * and constants (no React, no DOM).
9
9
  * - `@signalsafe/tree-spec-editor-react` — headless React: React Flow canvas
10
10
  * (no UI library).
11
- * - **`@signalsafe/tree-spec-editor`** (this package) — React + Bootstrap shell:
12
- * sidebar panels, modals, toolbar, and the Bootstrap severity badge helper.
13
- *
14
- * The framework-agnostic surface from `-core` and the canvas from `-react`
15
- * are re-exported from this barrel for consumer convenience. Hosts targeting
16
- * alternative UI libraries (e.g. Material) should consume `-react` plus their
17
- * own UI shell instead.
11
+ * - **`@signalsafe/tree-spec-editor`** (this package) — composable panels,
12
+ * modals, toolbar, and semantic `graph-editor-*` class hooks. Hosts style
13
+ * with Bootstrap, Material UI, or custom CSS.
18
14
  *
19
15
  * Source layout:
20
16
  * - `panels/` — sidebar / toolbar / inspector presentational components
21
17
  * - `modals/` — authoring-flow dialogs
22
- * - `lib/` — UI-flavored helpers (Bootstrap severity badge classes)
18
+ * - `ui/` — UI-kit agnostic primitives and class tokens
19
+ * - `lib/` — panel helpers and toolbar builders
23
20
  */
24
21
  export { default } from '@signalsafe/tree-spec-editor-react';
25
22
  export type { TreeSpecGraphEditorProps, GraphEditorVersionInfo } from '@signalsafe/tree-spec-editor-react';
@@ -50,7 +47,8 @@ export { default as AuditLogModal } from './modals/AuditLogModal.js';
50
47
  export type { AuditLogModalProps } from './modals/AuditLogModal.js';
51
48
  export { default as ToolbarPanel, TOOLBAR_ITEM_KIND } from './panels/ToolbarPanel.js';
52
49
  export type { ToolbarPanelProps, ToolbarItem, ToolbarItemKind, ToolbarButtonItem, ToolbarDropdownItem, ToolbarDropdownEntry, ToolbarBadgeItem, ToolbarTextItem, ToolbarCustomItem, } from './panels/ToolbarPanel.js';
53
- export { getIssueSeverityBadgeClass } from './lib/panelHelpers.js';
50
+ export { getIssueSeverityBadgeClass, getIssueSeverityToken } from './lib/panelHelpers.js';
51
+ export type { IssueSeverityToken } from './lib/panelHelpers.js';
54
52
  export { LIST_SELECTION_CLASS, CANVAS_SELECTION_CLASS, LIST_SELECTION_TEXT_CLASS, CANVAS_SELECTION_TEXT_CLASS } from './lib/selectionStyles.js';
55
53
  export { default as PanelHeaderCollapseCarets } from './lib/PanelHeaderCollapseCarets.js';
56
54
  export { buildDefaultToolbarSpec } from './lib/buildDefaultToolbarSpec.js';
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
package/dist/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * @packageDocumentation
3
- * React + Bootstrap implementation of the TreeSpec graph editor.
3
+ * UI-kit agnostic TreeSpec graph editor shell.
4
4
  *
5
5
  * Layered architecture:
6
6
  * - `@signalsafe/tree-spec` — wire contract (pure TS, no UI).
@@ -8,18 +8,15 @@
8
8
  * and constants (no React, no DOM).
9
9
  * - `@signalsafe/tree-spec-editor-react` — headless React: React Flow canvas
10
10
  * (no UI library).
11
- * - **`@signalsafe/tree-spec-editor`** (this package) — React + Bootstrap shell:
12
- * sidebar panels, modals, toolbar, and the Bootstrap severity badge helper.
13
- *
14
- * The framework-agnostic surface from `-core` and the canvas from `-react`
15
- * are re-exported from this barrel for consumer convenience. Hosts targeting
16
- * alternative UI libraries (e.g. Material) should consume `-react` plus their
17
- * own UI shell instead.
11
+ * - **`@signalsafe/tree-spec-editor`** (this package) — composable panels,
12
+ * modals, toolbar, and semantic `graph-editor-*` class hooks. Hosts style
13
+ * with Bootstrap, Material UI, or custom CSS.
18
14
  *
19
15
  * Source layout:
20
16
  * - `panels/` — sidebar / toolbar / inspector presentational components
21
17
  * - `modals/` — authoring-flow dialogs
22
- * - `lib/` — UI-flavored helpers (Bootstrap severity badge classes)
18
+ * - `ui/` — UI-kit agnostic primitives and class tokens
19
+ * - `lib/` — panel helpers and toolbar builders
23
20
  */
24
21
  export { default } from '@signalsafe/tree-spec-editor-react';
25
22
  export { default as IssuesPanel } from './panels/IssuesPanel.js';
@@ -35,7 +32,7 @@ export { default as PublishReviewModal } from './modals/PublishReviewModal.js';
35
32
  export { default as DraftHistoryModal } from './modals/DraftHistoryModal.js';
36
33
  export { default as AuditLogModal } from './modals/AuditLogModal.js';
37
34
  export { default as ToolbarPanel, TOOLBAR_ITEM_KIND } from './panels/ToolbarPanel.js';
38
- export { getIssueSeverityBadgeClass } from './lib/panelHelpers.js';
35
+ export { getIssueSeverityBadgeClass, getIssueSeverityToken } from './lib/panelHelpers.js';
39
36
  export { LIST_SELECTION_CLASS, CANVAS_SELECTION_CLASS, LIST_SELECTION_TEXT_CLASS, CANVAS_SELECTION_TEXT_CLASS } from './lib/selectionStyles.js';
40
37
  export { default as PanelHeaderCollapseCarets } from './lib/PanelHeaderCollapseCarets.js';
41
38
  export { buildDefaultToolbarSpec } from './lib/buildDefaultToolbarSpec.js';
@@ -1 +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"}
1
+ {"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"}
@@ -1,5 +1,6 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { EditorIconButton } from '../ui/primitives.js';
2
3
  /** Collapse/expand carets for card panel headers. */
3
4
  export default function PanelHeaderCollapseCarets({ expanded, onToggle, }) {
4
- 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 }) }));
5
+ return (_jsx(EditorIconButton, { "aria-expanded": expanded, "aria-label": expanded ? 'Collapse panel' : 'Expand panel', onClick: onToggle, children: expanded ? '▲' : '▼' }));
5
6
  }
@@ -1,3 +1,10 @@
1
- /** Bootstrap severity badge class for issue rows. */
1
+ /** Semantic severity token for host UI mapping. */
2
+ export type IssueSeverityToken = 'error' | 'warning' | 'info' | 'neutral';
3
+ /** Maps a TreeSpec issue severity to a UI-kit agnostic token. */
4
+ export declare function getIssueSeverityToken(severity: string): IssueSeverityToken;
5
+ /**
6
+ * Returns semantic badge class hooks for issue rows.
7
+ * Hosts style `.graph-editor-badge--*` with Bootstrap, MUI, or custom CSS.
8
+ */
2
9
  export declare function getIssueSeverityBadgeClass(severity: string): string;
3
10
  //# sourceMappingURL=panelHelpers.d.ts.map
@@ -1 +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"}
1
+ {"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"}
@@ -1,14 +1,22 @@
1
1
  import { TREE_SPEC_ISSUE_SEVERITY } from '@signalsafe/tree-spec';
2
- /** Bootstrap severity badge class for issue rows. */
3
- export function getIssueSeverityBadgeClass(severity) {
2
+ import { EDITOR_BADGE } from '../ui/editorClasses.js';
3
+ /** Maps a TreeSpec issue severity to a UI-kit agnostic token. */
4
+ export function getIssueSeverityToken(severity) {
4
5
  switch (severity) {
5
6
  case TREE_SPEC_ISSUE_SEVERITY.ERROR:
6
- return 'text-bg-danger';
7
+ return 'error';
7
8
  case TREE_SPEC_ISSUE_SEVERITY.WARNING:
8
- return 'text-bg-warning text-dark';
9
+ return 'warning';
9
10
  case TREE_SPEC_ISSUE_SEVERITY.INFO:
10
- return 'text-bg-info text-dark';
11
+ return 'info';
11
12
  default:
12
- return 'text-bg-secondary';
13
+ return 'neutral';
13
14
  }
14
15
  }
16
+ /**
17
+ * Returns semantic badge class hooks for issue rows.
18
+ * Hosts style `.graph-editor-badge--*` with Bootstrap, MUI, or custom CSS.
19
+ */
20
+ export function getIssueSeverityBadgeClass(severity) {
21
+ return `${EDITOR_BADGE} graph-editor-badge--${getIssueSeverityToken(severity)}`;
22
+ }
@@ -1 +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"}
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;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"}
@@ -1,10 +1,11 @@
1
1
  import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { EDITOR_BTN, joinClasses } from '../ui/editorClasses.js';
2
3
  /** Clickable node id for panel breadcrumb lines; plain text when `onNodeSelect` is unset. */
3
4
  export function PanelNodeLink({ nodeId, onNodeSelect, }) {
4
5
  if (!onNodeSelect) {
5
6
  return nodeId;
6
7
  }
7
- return (_jsx("button", { type: "button", className: "btn btn-link p-0 align-baseline font-size-12", onClick: () => onNodeSelect(nodeId), children: nodeId }));
8
+ return (_jsx("button", { type: "button", className: joinClasses(EDITOR_BTN, 'graph-editor-btn--link', 'graph-editor-text--sm'), onClick: () => onNodeSelect(nodeId), children: nodeId }));
8
9
  }
9
10
  /** Default `from · choice → to` line for selected transitions. */
10
11
  export function renderDefaultEdgeBreadcrumb(edge, { onNodeSelect }) {
@@ -1,9 +1,9 @@
1
- /** Bootstrap list-group selection highlight (subtle primary background). */
2
- export declare const LIST_SELECTION_CLASS = "list-group-item-primary";
3
- /** Dark readable text on {@link LIST_SELECTION_CLASS} rows (sidebar Nodes / Issues). */
4
- export declare const LIST_SELECTION_TEXT_CLASS = "graph-editor-sidebar-selected";
1
+ /** List row selection highlight (sidebar Nodes / Issues). */
2
+ export declare const LIST_SELECTION_CLASS = "graph-editor-list__item--selected";
3
+ /** Readable text on selected sidebar rows. */
4
+ export declare const LIST_SELECTION_TEXT_CLASS = "graph-editor-list__item-text--selected";
5
5
  /** Canvas / card selection highlight matching list selection. */
6
- export declare const CANVAS_SELECTION_CLASS = "bg-primary-subtle";
7
- /** Dark readable text on {@link CANVAS_SELECTION_CLASS} graph nodes. */
6
+ export declare const CANVAS_SELECTION_CLASS = "graph-editor-canvas__selected";
7
+ /** Readable text on selected canvas nodes. */
8
8
  export declare const CANVAS_SELECTION_TEXT_CLASS = "graph-editor-canvas-selected";
9
9
  //# sourceMappingURL=selectionStyles.d.ts.map
@@ -1 +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"}
1
+ {"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"}
@@ -1,8 +1,8 @@
1
- /** Bootstrap list-group selection highlight (subtle primary background). */
2
- export const LIST_SELECTION_CLASS = 'list-group-item-primary';
3
- /** Dark readable text on {@link LIST_SELECTION_CLASS} rows (sidebar Nodes / Issues). */
4
- export const LIST_SELECTION_TEXT_CLASS = 'graph-editor-sidebar-selected';
1
+ /** List row selection highlight (sidebar Nodes / Issues). */
2
+ export const LIST_SELECTION_CLASS = 'graph-editor-list__item--selected';
3
+ /** Readable text on selected sidebar rows. */
4
+ export const LIST_SELECTION_TEXT_CLASS = 'graph-editor-list__item-text--selected';
5
5
  /** Canvas / card selection highlight matching list selection. */
6
- export const CANVAS_SELECTION_CLASS = 'bg-primary-subtle';
7
- /** Dark readable text on {@link CANVAS_SELECTION_CLASS} graph nodes. */
6
+ export const CANVAS_SELECTION_CLASS = 'graph-editor-canvas__selected';
7
+ /** Readable text on selected canvas nodes. */
8
8
  export const CANVAS_SELECTION_TEXT_CLASS = 'graph-editor-canvas-selected';
@@ -4,17 +4,11 @@ export interface AuditLogModalProps {
4
4
  loadingAudit: boolean;
5
5
  auditEvents: TreeSpecAuditEventItem[];
6
6
  onClose: () => void;
7
- /** Override the modal title (default "Audit log"). */
8
7
  title?: string;
9
- /** Override the muted subtitle below the title. */
10
8
  subtitle?: string;
11
- /** Override the loading state text. */
12
9
  loadingText?: string;
13
- /** Override the empty-state text (when there are zero events). */
14
10
  emptyStateText?: string;
15
- /** Override the "Actor ID:" label prefix shown for events that have an actor. */
16
11
  actorLabel?: string;
17
- /** Override the Close button label in the footer. */
18
12
  closeLabel?: string;
19
13
  }
20
14
  export default function AuditLogModal({ show, loadingAudit, auditEvents, onClose, title, subtitle, loadingText, emptyStateText, actorLabel, closeLabel, }: Readonly<AuditLogModalProps>): import("react").JSX.Element | null;
@@ -1 +1 @@
1
- {"version":3,"file":"AuditLogModal.d.ts","sourceRoot":"","sources":["../../src/modals/AuditLogModal.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,mCAAmC,CAAC;AAEhF,MAAM,WAAW,kBAAkB;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,OAAO,CAAC;IACtB,WAAW,EAAE,sBAAsB,EAAE,CAAC;IACtC,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kEAAkE;IAClE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iFAAiF;IACjF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qDAAqD;IACrD,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AASD,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAClC,IAAI,EACJ,YAAY,EACZ,WAAW,EACX,OAAO,EACP,KAAqB,EACrB,QAA2B,EAC3B,WAAkC,EAClC,cAAyC,EACzC,UAAgC,EAChC,UAAgC,GACnC,EAAE,QAAQ,CAAC,kBAAkB,CAAC,sCAwD9B"}
1
+ {"version":3,"file":"AuditLogModal.d.ts","sourceRoot":"","sources":["../../src/modals/AuditLogModal.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,mCAAmC,CAAC;AAqBhF,MAAM,WAAW,kBAAkB;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,OAAO,CAAC;IACtB,WAAW,EAAE,sBAAsB,EAAE,CAAC;IACtC,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AASD,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAClC,IAAI,EACJ,YAAY,EACZ,WAAW,EACX,OAAO,EACP,KAAqB,EACrB,QAA2B,EAC3B,WAAkC,EAClC,cAAyC,EACzC,UAAgC,EAChC,UAAgC,GACnC,EAAE,QAAQ,CAAC,kBAAkB,CAAC,sCA8D9B"}
@@ -1,5 +1,6 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { Button, CloseButton } from 'react-bootstrap';
2
+ import { EDITOR_BADGE, EDITOR_FLEX_BETWEEN, EDITOR_MODAL, EDITOR_MODAL_BODY, EDITOR_MODAL_CONTENT, EDITOR_MODAL_DIALOG, EDITOR_MODAL_FOOTER, EDITOR_MODAL_HEADER, EDITOR_MODAL_TITLE, EDITOR_MONO, EDITOR_MUTED, EDITOR_SCROLL, EDITOR_SPACING_MB_0, EDITOR_SPACING_MT_1, joinClasses, } from '../ui/editorClasses.js';
3
+ import { EditorButton, EditorCloseButton } from '../ui/primitives.js';
3
4
  const DEFAULT_TITLE = 'Audit log';
4
5
  const DEFAULT_SUBTITLE = 'Authoring actions for this tree_spec version.';
5
6
  const DEFAULT_LOADING_TEXT = 'Loading…';
@@ -11,13 +12,13 @@ export default function AuditLogModal({ show, loadingAudit, auditEvents, onClose
11
12
  return null;
12
13
  let auditContent;
13
14
  if (loadingAudit) {
14
- auditContent = _jsx("div", { className: "text-muted", children: loadingText });
15
+ auditContent = _jsx("div", { className: EDITOR_MUTED, children: loadingText });
15
16
  }
16
17
  else if (auditEvents.length === 0) {
17
- auditContent = (_jsx("div", { className: "text-muted", children: _jsx("em", { children: emptyStateText }) }));
18
+ auditContent = (_jsx("div", { className: EDITOR_MUTED, children: _jsx("em", { children: emptyStateText }) }));
18
19
  }
19
20
  else {
20
- auditContent = (_jsx("ul", { className: "list-unstyled mb-0 overflow-auto-max-h-400", children: auditEvents.map((e) => (_jsxs("li", { className: "border-bottom py-2", children: [_jsxs("div", { className: "d-flex justify-content-between align-items-start", children: [_jsx("span", { className: "badge bg-secondary me-2", children: e.action }), _jsx("span", { className: "text-muted font-size-12", children: new Date(e.created_on).toLocaleString() })] }), e.actor == null ? null : (_jsxs("span", { className: "text-muted font-size-12", children: [actorLabel, " ", e.actor] })), e.detail && Object.keys(e.detail).length > 0 ? (_jsx("pre", { className: "mb-0 mt-1 small text-muted font-size-11", children: JSON.stringify(e.detail) })) : null] }, e.id))) }));
21
+ auditContent = (_jsx("ul", { className: joinClasses('graph-editor-list--plain', EDITOR_SCROLL, EDITOR_SPACING_MB_0), children: auditEvents.map((e) => (_jsxs("li", { className: "graph-editor-list__plain-item", children: [_jsxs("div", { className: EDITOR_FLEX_BETWEEN, children: [_jsx("span", { className: joinClasses(EDITOR_BADGE, 'graph-editor-badge--neutral'), children: e.action }), _jsx("span", { className: joinClasses(EDITOR_MUTED, 'graph-editor-text--sm'), children: new Date(e.created_on).toLocaleString() })] }), e.actor == null ? null : (_jsxs("span", { className: joinClasses(EDITOR_MUTED, 'graph-editor-text--sm'), children: [actorLabel, " ", e.actor] })), e.detail && Object.keys(e.detail).length > 0 ? (_jsx("pre", { className: joinClasses(EDITOR_MONO, EDITOR_MUTED, 'graph-editor-text--sm', EDITOR_SPACING_MB_0, EDITOR_SPACING_MT_1), children: JSON.stringify(e.detail) })) : null] }, e.id))) }));
21
22
  }
22
- return (_jsx("dialog", { className: "modal d-block modal-backdrop-dark", open: true, children: _jsx("div", { className: "modal-dialog modal-lg", children: _jsxs("div", { className: "modal-content", children: [_jsxs("div", { className: "modal-header", children: [_jsx("h5", { className: "modal-title", children: title }), _jsx(CloseButton, { "aria-label": "Close", onClick: onClose })] }), _jsxs("div", { className: "modal-body", children: [_jsx("p", { className: "text-muted font-size-13", children: subtitle }), auditContent] }), _jsx("div", { className: "modal-footer", children: _jsx(Button, { variant: "secondary", onClick: onClose, children: closeLabel }) })] }) }) }));
23
+ return (_jsx("dialog", { className: joinClasses(EDITOR_MODAL, 'graph-editor-modal--open'), open: true, children: _jsx("div", { className: joinClasses(EDITOR_MODAL_DIALOG, 'graph-editor-modal__dialog--lg'), children: _jsxs("div", { className: EDITOR_MODAL_CONTENT, children: [_jsxs("div", { className: EDITOR_MODAL_HEADER, children: [_jsx("h2", { className: EDITOR_MODAL_TITLE, children: title }), _jsx(EditorCloseButton, { onClick: onClose })] }), _jsxs("div", { className: EDITOR_MODAL_BODY, children: [_jsx("p", { className: joinClasses(EDITOR_MUTED, 'graph-editor-text--sm'), children: subtitle }), auditContent] }), _jsx("div", { className: EDITOR_MODAL_FOOTER, children: _jsx(EditorButton, { tone: "neutral", onClick: onClose, children: closeLabel }) })] }) }) }));
23
24
  }
@@ -9,25 +9,15 @@ export interface DraftHistoryModalProps {
9
9
  onClose: () => void;
10
10
  onCreateSnapshot: () => void;
11
11
  onRestoreSnapshot: (snapshotId: string) => void;
12
- /** Override the modal title (default "Draft history"). */
13
12
  title?: string;
14
- /** Override the muted subtitle below the title. */
15
13
  subtitle?: string;
16
- /** Override the "Snapshots (newest first)" caption above the list. */
17
14
  listCaption?: string;
18
- /** Override the "Create snapshot" button label. */
19
15
  createSnapshotLabel?: string;
20
- /** Override the "Creating\u2026" label while a create is in flight. */
21
16
  creatingSnapshotLabel?: string;
22
- /** Override the "Restore" button label. */
23
17
  restoreLabel?: string;
24
- /** Override the "Restoring\u2026" button label while a restore is in flight. */
25
18
  restoringLabel?: string;
26
- /** Override the loading state text. */
27
19
  loadingText?: string;
28
- /** Override the empty-state text (when there are zero snapshots). */
29
20
  emptyStateText?: string;
30
- /** Override the Close button label in the footer. */
31
21
  closeLabel?: string;
32
22
  }
33
23
  export default function DraftHistoryModal({ show, loadingSnapshots, snapshots, restoringSnapshotId, creatingSnapshot, tree, onClose, onCreateSnapshot, onRestoreSnapshot, title, subtitle, listCaption, createSnapshotLabel, creatingSnapshotLabel, restoreLabel, restoringLabel, loadingText, emptyStateText, closeLabel, }: Readonly<DraftHistoryModalProps>): import("react").JSX.Element | null;
@@ -1 +1 @@
1
- {"version":3,"file":"DraftHistoryModal.d.ts","sourceRoot":"","sources":["../../src/modals/DraftHistoryModal.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,UAAU,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AAE1F,MAAM,WAAW,sBAAsB;IACnC,IAAI,EAAE,OAAO,CAAC;IACd,gBAAgB,EAAE,OAAO,CAAC;IAC1B,SAAS,EAAE,oBAAoB,EAAE,CAAC;IAClC,mBAAmB,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,IAAI,EAAE,UAAU,GAAG,IAAI,CAAC;IACxB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,iBAAiB,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAEhD,0DAA0D;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sEAAsE;IACtE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mDAAmD;IACnD,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,uEAAuE;IACvE,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gFAAgF;IAChF,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qEAAqE;IACrE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,qDAAqD;IACrD,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAcD,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACtC,IAAI,EACJ,gBAAgB,EAChB,SAAS,EACT,mBAAmB,EACnB,gBAAgB,EAChB,IAAI,EACJ,OAAO,EACP,gBAAgB,EAChB,iBAAiB,EACjB,KAAqB,EACrB,QAA2B,EAC3B,WAAkC,EAClC,mBAA0C,EAC1C,qBAA8C,EAC9C,YAAoC,EACpC,cAAwC,EACxC,WAAkC,EAClC,cAAyC,EACzC,UAAgC,GACnC,EAAE,QAAQ,CAAC,sBAAsB,CAAC,sCAuElC"}
1
+ {"version":3,"file":"DraftHistoryModal.d.ts","sourceRoot":"","sources":["../../src/modals/DraftHistoryModal.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AAmB1F,MAAM,WAAW,sBAAsB;IACnC,IAAI,EAAE,OAAO,CAAC;IACd,gBAAgB,EAAE,OAAO,CAAC;IAC1B,SAAS,EAAE,oBAAoB,EAAE,CAAC;IAClC,mBAAmB,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,IAAI,EAAE,UAAU,GAAG,IAAI,CAAC;IACxB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,iBAAiB,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAEhD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAcD,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACtC,IAAI,EACJ,gBAAgB,EAChB,SAAS,EACT,mBAAmB,EACnB,gBAAgB,EAChB,IAAI,EACJ,OAAO,EACP,gBAAgB,EAChB,iBAAiB,EACjB,KAAqB,EACrB,QAA2B,EAC3B,WAAkC,EAClC,mBAA0C,EAC1C,qBAA8C,EAC9C,YAAoC,EACpC,cAAwC,EACxC,WAAkC,EAClC,cAAyC,EACzC,UAAgC,GACnC,EAAE,QAAQ,CAAC,sBAAsB,CAAC,sCAsElC"}
@@ -1,5 +1,6 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { Button, CloseButton } from 'react-bootstrap';
2
+ import { EDITOR_FLEX_BETWEEN, EDITOR_MODAL, EDITOR_MODAL_BODY, EDITOR_MODAL_CONTENT, EDITOR_MODAL_DIALOG, EDITOR_MODAL_FOOTER, EDITOR_MODAL_HEADER, EDITOR_MODAL_TITLE, EDITOR_MUTED, EDITOR_SCROLL, EDITOR_SPACING_MB_0, EDITOR_SPACING_MB_3, joinClasses, } from '../ui/editorClasses.js';
3
+ import { EditorButton, EditorCloseButton } from '../ui/primitives.js';
3
4
  const DEFAULT_TITLE = 'Draft history';
4
5
  const DEFAULT_SUBTITLE = 'Restore an earlier snapshot into the current draft. Creating a snapshot saves the current graph state.';
5
6
  const DEFAULT_LIST_CAPTION = 'Snapshots (newest first)';
@@ -15,13 +16,13 @@ export default function DraftHistoryModal({ show, loadingSnapshots, snapshots, r
15
16
  return null;
16
17
  let snapshotsContent;
17
18
  if (loadingSnapshots) {
18
- snapshotsContent = _jsx("div", { className: "text-muted", children: loadingText });
19
+ snapshotsContent = _jsx("div", { className: EDITOR_MUTED, children: loadingText });
19
20
  }
20
21
  else if (snapshots.length === 0) {
21
- snapshotsContent = (_jsx("div", { className: "text-muted", children: _jsx("em", { children: emptyStateText }) }));
22
+ snapshotsContent = (_jsx("div", { className: EDITOR_MUTED, children: _jsx("em", { children: emptyStateText }) }));
22
23
  }
23
24
  else {
24
- snapshotsContent = (_jsx("ul", { className: "list-unstyled mb-0 overflow-auto-max-h-320", children: snapshots.map((s) => (_jsxs("li", { className: "d-flex justify-content-between align-items-center border-bottom py-2", children: [_jsxs("div", { children: [_jsx("span", { className: "text-muted font-size-12", children: new Date(s.created_on).toLocaleString() }), s.label ? _jsx("span", { className: "ms-2", children: s.label }) : null, s.spec_hash ? (_jsxs("span", { className: "ms-2 text-muted font-size-11", children: [s.spec_hash.slice(0, 8), "\u2026"] })) : null] }), _jsx(Button, { variant: "outline-warning", onClick: () => onRestoreSnapshot(s.id), disabled: restoringSnapshotId !== null, children: restoringSnapshotId === s.id ? restoringLabel : restoreLabel })] }, s.id))) }));
25
+ snapshotsContent = (_jsx("ul", { className: joinClasses('graph-editor-list--plain', EDITOR_SCROLL, EDITOR_SPACING_MB_0), children: snapshots.map((s) => (_jsxs("li", { className: joinClasses(EDITOR_FLEX_BETWEEN, 'graph-editor-list__plain-item'), children: [_jsxs("div", { children: [_jsx("span", { className: EDITOR_MUTED, children: new Date(s.created_on).toLocaleString() }), s.label ? _jsx("span", { className: "graph-editor-inline-gap", children: s.label }) : null, s.spec_hash ? (_jsxs("span", { className: joinClasses(EDITOR_MUTED, 'graph-editor-text--sm'), children: [s.spec_hash.slice(0, 8), "\u2026"] })) : null] }), _jsx(EditorButton, { tone: "warning", onClick: () => onRestoreSnapshot(s.id), disabled: restoringSnapshotId !== null, children: restoringSnapshotId === s.id ? restoringLabel : restoreLabel })] }, s.id))) }));
25
26
  }
26
- return (_jsx("dialog", { className: "modal d-block modal-backdrop-dark", open: true, children: _jsx("div", { className: "modal-dialog modal-lg", children: _jsxs("div", { className: "modal-content", children: [_jsxs("div", { className: "modal-header", children: [_jsx("h5", { className: "modal-title", children: title }), _jsx(CloseButton, { "aria-label": "Close", onClick: onClose })] }), _jsxs("div", { className: "modal-body", children: [_jsx("p", { className: "text-muted font-size-13", children: subtitle }), _jsxs("div", { className: "d-flex justify-content-between align-items-center mb-3", children: [_jsx("span", { className: "text-muted font-size-13", children: listCaption }), _jsx(Button, { variant: "outline-primary", onClick: onCreateSnapshot, disabled: !tree || creatingSnapshot, children: creatingSnapshot ? creatingSnapshotLabel : createSnapshotLabel })] }), snapshotsContent] }), _jsx("div", { className: "modal-footer", children: _jsx(Button, { variant: "secondary", onClick: onClose, children: closeLabel }) })] }) }) }));
27
+ return (_jsx("dialog", { className: joinClasses(EDITOR_MODAL, 'graph-editor-modal--open'), open: true, children: _jsx("div", { className: joinClasses(EDITOR_MODAL_DIALOG, 'graph-editor-modal__dialog--lg'), children: _jsxs("div", { className: EDITOR_MODAL_CONTENT, children: [_jsxs("div", { className: EDITOR_MODAL_HEADER, children: [_jsx("h2", { className: EDITOR_MODAL_TITLE, children: title }), _jsx(EditorCloseButton, { onClick: onClose })] }), _jsxs("div", { className: EDITOR_MODAL_BODY, children: [_jsx("p", { className: joinClasses(EDITOR_MUTED, 'graph-editor-text--sm'), children: subtitle }), _jsxs("div", { className: joinClasses(EDITOR_FLEX_BETWEEN, EDITOR_SPACING_MB_3), children: [_jsx("span", { className: joinClasses(EDITOR_MUTED, 'graph-editor-text--sm'), children: listCaption }), _jsx(EditorButton, { tone: "primary", onClick: onCreateSnapshot, disabled: !tree || creatingSnapshot, children: creatingSnapshot ? creatingSnapshotLabel : createSnapshotLabel })] }), snapshotsContent] }), _jsx("div", { className: EDITOR_MODAL_FOOTER, children: _jsx(EditorButton, { tone: "neutral", onClick: onClose, children: closeLabel }) })] }) }) }));
27
28
  }
@@ -1 +1 @@
1
- {"version":3,"file":"PublishReviewModal.d.ts","sourceRoot":"","sources":["../../src/modals/PublishReviewModal.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAA4B,KAAK,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAGrF,OAAO,EAAsB,KAAK,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAExF,MAAM,WAAW,uBAAuB;IACpC,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,UAAU,GAAG,IAAI,CAAC;IACxB,YAAY,EAAE,UAAU,GAAG,IAAI,CAAC;IAChC,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB,UAAU,EAAE,OAAO,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,kBAAkB,EAAE,CAChB,MAAM,EAAE,UAAU,GAAG,IAAI,EACzB,KAAK,EAAE,UAAU,KAChB;QAAE,KAAK,EAAE,MAAM,EAAE,CAAC;QAAC,UAAU,EAAE,OAAO,CAAA;KAAE,CAAC;IAE9C,4EAA4E;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iEAAiE;IACjE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mEAAmE;IACnE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,wCAAwC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iEAAiE;IACjE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uFAAuF;IACvF,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B;AAUD,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACvC,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,MAAM,EACN,UAAU,EACV,OAAO,EACP,SAAS,EACT,kBAAkB,EAClB,KAAqB,EACrB,WAAkC,EAClC,cAAyC,EACzC,WAAkC,EAClC,YAAoC,EACpC,eAA0C,GAC7C,EAAE,QAAQ,CAAC,uBAAuB,CAAC,sCAyCnC"}
1
+ {"version":3,"file":"PublishReviewModal.d.ts","sourceRoot":"","sources":["../../src/modals/PublishReviewModal.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAA4B,KAAK,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAErF,OAAO,EAAsB,KAAK,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAexF,MAAM,WAAW,uBAAuB;IACpC,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,UAAU,GAAG,IAAI,CAAC;IACxB,YAAY,EAAE,UAAU,GAAG,IAAI,CAAC;IAChC,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB,UAAU,EAAE,OAAO,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,kBAAkB,EAAE,CAChB,MAAM,EAAE,UAAU,GAAG,IAAI,EACzB,KAAK,EAAE,UAAU,KAChB;QAAE,KAAK,EAAE,MAAM,EAAE,CAAC;QAAC,UAAU,EAAE,OAAO,CAAA;KAAE,CAAC;IAE9C,4EAA4E;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iEAAiE;IACjE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mEAAmE;IACnE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,wCAAwC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iEAAiE;IACjE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uFAAuF;IACvF,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B;AAUD,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACvC,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,MAAM,EACN,UAAU,EACV,OAAO,EACP,SAAS,EACT,kBAAkB,EAClB,KAAqB,EACrB,WAAkC,EAClC,cAAyC,EACzC,WAAkC,EAClC,YAAoC,EACpC,eAA0C,GAC7C,EAAE,QAAQ,CAAC,uBAAuB,CAAC,sCA2CnC"}