@bpmnkit/editor 0.0.34 → 0.1.0

package/dist/dock.js

@@ -1,131 +1,109 @@
+import { injectChromeStyles } from "./chrome.js";
 const DOCK_STYLE_ID = "bpmnkit-side-dock-styles-v1";
 const STORAGE_KEY_WIDTH = "bpmnkit-side-dock-width";
 const STORAGE_KEY_COLLAPSED = "bpmnkit-side-dock-collapsed";
 const MIN_WIDTH = 280;
 const MAX_WIDTH = 700;
-const DEFAULT_WIDTH = 360;
+const DEFAULT_WIDTH = 340;
 const DOCK_CSS = `
-/* ── Side Dock ──────────────────────────────────────────────────────────── */
-.bpmnkit-side-dock__tab:disabled { opacity: 0.3; cursor: default; }
+/* ── Side dock ───────────────────────────────────────────────────────────
+   The properties panel, in the bpmnkit.com design system: flat, square,
+   hairline-bounded, mono uppercase labels. Grounds follow the HUD theme
+   variables declared in css.ts, so the two read as one piece of chrome.
+   ──────────────────────────────────────────────────────────────────────── */
 .bpmnkit-side-dock {
   position: fixed; right: 0; top: 36px; bottom: 0;
   z-index: 9999; display: flex; flex-direction: column;
-  background: rgba(18, 18, 26, 0.98);
-  border-left: 1px solid rgba(255,255,255,0.1);
-  box-shadow: -8px 0 40px rgba(0,0,0,0.6);
-  font-family: system-ui, -apple-system, sans-serif;
+  background: var(--bpmnkit-chrome-ground, #ffffff);
+  border-left: 1px solid var(--bpmnkit-chrome-line, rgba(255, 255, 255, 0.14));
+  font-family: var(--bpmnkit-ds-font-sans, system-ui, -apple-system, sans-serif);
   transition: width 0.22s ease;
 }
-/* Pill handle — sticks out from the left edge; always visible + clickable */
+/* Square handle — sticks out from the left edge; always visible + clickable */
 .bpmnkit-side-dock__collapse-handle {
   position: absolute; left: -20px; top: 50%; transform: translateY(-50%);
   width: 20px; height: 52px;
-  background: rgba(18, 18, 26, 0.98);
-  border: 1px solid rgba(255,255,255,0.1); border-right: none;
-  border-radius: 8px 0 0 8px;
+  background: var(--bpmnkit-chrome-ground, #ffffff);
+  border: 1px solid var(--bpmnkit-chrome-line, rgba(255, 255, 255, 0.14)); border-right: none;
   display: flex; align-items: center; justify-content: center;
   cursor: pointer; z-index: 1;
-  color: rgba(255,255,255,0.45); font-size: 14px; line-height: 1;
-  transition: color 0.1s, background 0.1s;
+  color: var(--bpmnkit-chrome-ink-4, #9aa1aa);
+  font-family: var(--bpmnkit-ds-font-mono, ui-monospace, monospace);
+  font-size: 13px; line-height: 1;
+  font-variant-emoji: text;
   user-select: none;
 }
-.bpmnkit-side-dock__collapse-handle:hover { color: #fff; background: rgba(40,40,60,0.99); }
+.bpmnkit-side-dock__collapse-handle:hover { color: var(--bpmnkit-chrome-ink, #f4f5f7); background: var(--bpmnkit-chrome-hover, rgba(255,255,255,0.07)); }
 .bpmnkit-side-dock__resize-handle {
   position: absolute; left: 0; top: 0; bottom: 0;
   width: 5px; cursor: ew-resize; z-index: 2;
 }
-.bpmnkit-side-dock__resize-handle:hover { background: rgba(76,142,247,0.35); }
+.bpmnkit-side-dock__resize-handle:hover { background: var(--bpmnkit-chrome-accent, #c9755c); }
+
+/* ── Tabs — equal-width row, the underline sits on the row's own rule ── */
 .bpmnkit-side-dock__tab-strip {
-  display: flex; align-items: center; height: 38px; flex-shrink: 0;
-  border-bottom: 1px solid rgba(255,255,255,0.08);
+  display: flex; align-items: stretch; height: 34px; flex-shrink: 0;
+  border-bottom: 1px solid var(--bpmnkit-chrome-line, rgba(255, 255, 255, 0.14));
+  overflow-x: auto; scrollbar-width: none;
 }
+.bpmnkit-side-dock__tab-strip::-webkit-scrollbar { display: none; }
+/* Equal-width while the labels fit; the strip scrolls rather than clipping them. */
 .bpmnkit-side-dock__tab {
-  padding: 0 16px; height: 100%; background: none; border: none;
-  border-bottom: 2px solid transparent; color: rgba(255,255,255,0.4);
-  cursor: pointer; font-size: 12px; font-weight: 500; white-space: nowrap;
-  transition: color 0.1s, border-color 0.1s;
-  font-family: system-ui, -apple-system, sans-serif;
+  flex: 1 0 auto;
+  padding: 0 10px; height: 100%; background: none; border: none;
+  border-bottom: 2px solid transparent; color: var(--bpmnkit-chrome-ink-4, #9aa1aa);
+  cursor: pointer; white-space: nowrap;
+  font-family: var(--bpmnkit-ds-font-mono, ui-monospace, monospace);
+  font-size: var(--bpmnkit-ds-t-mono-micro, 10.5px);
+  letter-spacing: 0.08em; text-transform: uppercase;
+}
+.bpmnkit-side-dock__tab:hover { color: var(--bpmnkit-chrome-ink-2, #c8ccd2); }
+.bpmnkit-side-dock__tab.active {
+  color: var(--bpmnkit-chrome-ink, #f4f5f7);
+  border-bottom-color: var(--bpmnkit-chrome-accent, #c9755c);
+  margin-bottom: -1px;
 }
-.bpmnkit-side-dock__tab:hover { color: rgba(255,255,255,0.75); }
-.bpmnkit-side-dock__tab.active { color: #4c8ef7; border-bottom-color: #4c8ef7; }
+.bpmnkit-side-dock__tab:disabled { opacity: 0.3; cursor: default; }
 .bpmnkit-side-dock__pane {
   flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0;
 }
 .bpmnkit-side-dock__pane--hidden { display: none; }
-/* Empty state — info widget + hint, shown when no element is selected */
+
+/* ── Empty state — info rows + hint, shown when nothing is selected ── */
 .bpmnkit-side-dock__empty {
   flex: 1; display: flex; flex-direction: column;
-  overflow-y: auto; padding: 14px 16px;
-  gap: 0;
+  overflow-y: auto; padding: 0 20px;
 }
 .bpmnkit-side-dock__info-row {
   display: flex; flex-direction: column;
-  padding: 10px 0;
-  border-bottom: 1px solid rgba(255,255,255,0.06);
-  gap: 3px;
+  padding: 14px 0;
+  border-bottom: 1px solid var(--bpmnkit-chrome-line-soft, rgba(255, 255, 255, 0.08));
+  gap: 7px;
 }
 .bpmnkit-side-dock__info-label {
-  font-size: 10px; font-weight: 700; text-transform: uppercase;
-  letter-spacing: 0.08em; color: rgba(255,255,255,0.3);
+  font-family: var(--bpmnkit-ds-font-mono, ui-monospace, monospace);
+  font-size: var(--bpmnkit-ds-t-mono-micro, 10.5px); letter-spacing: 0.12em;
+  text-transform: uppercase; color: var(--bpmnkit-chrome-ink-4, #9aa1aa);
 }
 .bpmnkit-side-dock__info-value {
-  font-size: 13px; color: rgba(255,255,255,0.75); word-break: break-word;
+  font-family: var(--bpmnkit-ds-font-mono, ui-monospace, monospace);
+  font-size: 12.5px; color: var(--bpmnkit-chrome-ink-2, #c8ccd2); word-break: break-word;
 }
+/* A sentence, not a label — --ink-4 does not clear 4.5:1 on a light ground. */
 .bpmnkit-side-dock__empty-hint {
-  font-size: 12px; color: rgba(255,255,255,0.25);
-  text-align: center; padding: 20px 0;
+  font-family: var(--bpmnkit-ds-font-mono, ui-monospace, monospace);
+  font-size: var(--bpmnkit-ds-t-mono-label, 11.5px); letter-spacing: 0.04em;
+  color: var(--bpmnkit-chrome-ink-2, #c8ccd2);
+  padding: 24px 0;
 }
-/* Collapsed state — only the pill handle remains visible */
+/* Collapsed state — only the handle remains visible */
 .bpmnkit-side-dock--collapsed .bpmnkit-side-dock__tab-strip,
 .bpmnkit-side-dock--collapsed .bpmnkit-side-dock__pane { display: none; }
 /* Push watermark left of the dock using a CSS variable updated by JS */
 .bpmnkit-watermark { right: calc(var(--bpmnkit-dock-width, 0px) + 8px) !important; }
-/* Light theme */
-[data-bpmnkit-hud-theme="light"] .bpmnkit-side-dock {
-  background: rgba(248,248,252,0.99); border-left-color: rgba(0,0,0,0.08);
-  box-shadow: -8px 0 40px rgba(0,0,0,0.12);
-}
-[data-bpmnkit-hud-theme="light"] .bpmnkit-side-dock__collapse-handle {
-  background: rgba(248,248,252,0.99); border-color: rgba(0,0,0,0.08); color: rgba(0,0,0,0.4);
-}
-[data-bpmnkit-hud-theme="light"] .bpmnkit-side-dock__collapse-handle:hover {
-  background: rgba(235,235,242,0.99); color: rgba(0,0,0,0.9);
-}
-[data-bpmnkit-hud-theme="light"] .bpmnkit-side-dock__tab-strip { border-bottom-color: rgba(0,0,0,0.07); }
-[data-bpmnkit-hud-theme="light"] .bpmnkit-side-dock__tab { color: rgba(0,0,0,0.4); }
-[data-bpmnkit-hud-theme="light"] .bpmnkit-side-dock__tab:hover { color: rgba(0,0,0,0.7); }
-[data-bpmnkit-hud-theme="light"] .bpmnkit-side-dock__tab.active { color: #1a56db; border-bottom-color: #1a56db; }
-[data-bpmnkit-hud-theme="light"] .bpmnkit-side-dock__resize-handle:hover { background: rgba(26,86,219,0.2); }
-[data-bpmnkit-hud-theme="light"] .bpmnkit-side-dock__info-label { color: rgba(0,0,0,0.3); }
-[data-bpmnkit-hud-theme="light"] .bpmnkit-side-dock__info-value { color: rgba(0,0,0,0.75); }
-[data-bpmnkit-hud-theme="light"] .bpmnkit-side-dock__info-row { border-bottom-color: rgba(0,0,0,0.06); }
-[data-bpmnkit-hud-theme="light"] .bpmnkit-side-dock__empty-hint { color: rgba(0,0,0,0.25); }
-/* Neon theme */
-[data-bpmnkit-hud-theme="neon"] .bpmnkit-side-dock {
-  background: oklch(6% 0.04 280);
-  border-left: 1px solid oklch(65% 0.28 280 / 0.35);
-  box-shadow: -8px 0 40px oklch(0% 0 0 / 0.8), -1px 0 20px oklch(65% 0.28 280 / 0.12);
-}
-[data-bpmnkit-hud-theme="neon"] .bpmnkit-side-dock__collapse-handle {
-  background: oklch(6% 0.04 280);
-  border-color: oklch(65% 0.28 280 / 0.35);
-  color: oklch(65% 0.28 280 / 0.6);
-}
-[data-bpmnkit-hud-theme="neon"] .bpmnkit-side-dock__collapse-handle:hover {
-  background: oklch(12% 0.04 270 / 0.99);
-  color: oklch(73% 0.16 280);
-}
-[data-bpmnkit-hud-theme="neon"] .bpmnkit-side-dock__tab-strip { border-bottom-color: oklch(65% 0.28 280 / 0.25); }
-[data-bpmnkit-hud-theme="neon"] .bpmnkit-side-dock__tab { color: oklch(50% 0.1 280); }
-[data-bpmnkit-hud-theme="neon"] .bpmnkit-side-dock__tab:hover { color: oklch(73% 0.16 280); }
-[data-bpmnkit-hud-theme="neon"] .bpmnkit-side-dock__tab.active { color: oklch(72% 0.18 185); border-bottom-color: oklch(72% 0.18 185); }
-[data-bpmnkit-hud-theme="neon"] .bpmnkit-side-dock__resize-handle:hover { background: oklch(65% 0.28 280 / 0.25); }
-[data-bpmnkit-hud-theme="neon"] .bpmnkit-side-dock__info-label { color: oklch(50% 0.06 280); }
-[data-bpmnkit-hud-theme="neon"] .bpmnkit-side-dock__info-value { color: oklch(73% 0.16 280); }
-[data-bpmnkit-hud-theme="neon"] .bpmnkit-side-dock__info-row { border-bottom-color: oklch(65% 0.28 280 / 0.1); }
-[data-bpmnkit-hud-theme="neon"] .bpmnkit-side-dock__empty-hint { color: oklch(45% 0.08 280); }
 `;
 function injectDockStyles() {
+    injectChromeStyles();
     if (document.getElementById(DOCK_STYLE_ID))
         return;
     const style = document.createElement("style");

package/dist/editor.js

@@ -295,8 +295,10 @@ export class BpmnEditor {
         injectEditorStyles();
         this._id = String(_instanceCounter++);
         this._t = options.translate ?? defaultTranslate;
-        // Resolve initial theme — localStorage overrides the options.theme when persistTheme is on
-        let initialTheme = options.theme ?? "neon";
+        // Resolve initial theme — localStorage overrides the options.theme when persistTheme is on.
+        // The shell's default is the design system's light `--canvas` ground; `neon` stays a
+        // white-label theme a host opts into.
+        let initialTheme = options.theme ?? "light";
         if (options.persistTheme) {
             try {
                 const stored = localStorage.getItem("bpmnkit-theme");
@@ -2384,6 +2386,14 @@ export class BpmnEditor {
             scrollToElement(id) {
                 self.scrollToElement(id);
             },
+            // The editor works on one plane — `diagrams[0]` — and has no drill-in.
+            // Saying so honestly is what lets a navigation plugin decline to drill
+            // here, rather than appearing to and doing nothing.
+            getPlanes() {
+                const plane = self._defs?.diagrams[0]?.plane;
+                return plane === undefined ? [] : [{ id: plane.bpmnElement, name: plane.bpmnElement }];
+            },
+            showPlane() { },
             getAbsoluteBBox(id) {
                 return self._absoluteBBox(id);
             },

package/dist/i18n.d.ts

@@ -11,4 +11,39 @@ export type Translate = (template: string, vars?: TranslateVars) => string;
 export declare function interpolate(template: string, vars?: TranslateVars): string;
 /** The default (identity) translator: no localization, just placeholder interpolation. */
 export declare function defaultTranslate(template: string, vars?: TranslateVars): string;
+/**
+ * A translator that also records what it was asked for.
+ *
+ * Localising a UI starts with knowing which strings it has, and the usual
+ * answer — grep the source for the translation call — produces a list nobody
+ * can trust: it includes strings behind code that no longer runs, and misses
+ * any built by concatenation. Harvesting from a *running* editor inverts that.
+ * Every key it observes is real by construction, and a key the harvest never
+ * observes is either dead or reachable only through a path the harvest does
+ * not exercise. Both are worth knowing, and neither is knowable from the
+ * source alone.
+ *
+ * @param base - The translator to delegate to. Defaults to identity, which is
+ *   what a harvest wants; pass a real one to record a live session instead.
+ *
+ * @example
+ * ```typescript
+ * const recorder = createTranslationRecorder();
+ * const editor = new BpmnEditor({ container, translate: recorder.translate });
+ * initEditorHud(editor);
+ * recorder.keys(); // every string the editor asked for while starting up
+ * ```
+ */
+export declare function createTranslationRecorder(base?: Translate): TranslationRecorder;
+/** A {@link Translate} that remembers every template it was given. */
+export interface TranslationRecorder {
+    /** Pass this to the editor as its `translate` option. */
+    translate: Translate;
+    /** Every template requested, in the order it was first asked for. */
+    keys(): string[];
+    /** The interpolation variables a template was given, sorted. */
+    placeholders(template: string): string[];
+    /** Forgets everything observed so far. */
+    reset(): void;
+}
 //# sourceMappingURL=i18n.d.ts.map

package/dist/i18n.js

@@ -8,4 +8,49 @@ export function interpolate(template, vars) {
 export function defaultTranslate(template, vars) {
     return interpolate(template, vars);
 }
+/**
+ * A translator that also records what it was asked for.
+ *
+ * Localising a UI starts with knowing which strings it has, and the usual
+ * answer — grep the source for the translation call — produces a list nobody
+ * can trust: it includes strings behind code that no longer runs, and misses
+ * any built by concatenation. Harvesting from a *running* editor inverts that.
+ * Every key it observes is real by construction, and a key the harvest never
+ * observes is either dead or reachable only through a path the harvest does
+ * not exercise. Both are worth knowing, and neither is knowable from the
+ * source alone.
+ *
+ * @param base - The translator to delegate to. Defaults to identity, which is
+ *   what a harvest wants; pass a real one to record a live session instead.
+ *
+ * @example
+ * ```typescript
+ * const recorder = createTranslationRecorder();
+ * const editor = new BpmnEditor({ container, translate: recorder.translate });
+ * initEditorHud(editor);
+ * recorder.keys(); // every string the editor asked for while starting up
+ * ```
+ */
+export function createTranslationRecorder(base = defaultTranslate) {
+    // Insertion-ordered, so the harvest reads in the order the UI asks.
+    const seen = new Map();
+    return {
+        translate(template, vars) {
+            const names = seen.get(template) ?? new Set();
+            for (const name of Object.keys(vars ?? {}))
+                names.add(name);
+            seen.set(template, names);
+            return base(template, vars);
+        },
+        keys() {
+            return [...seen.keys()];
+        },
+        placeholders(template) {
+            return [...(seen.get(template) ?? [])].sort();
+        },
+        reset() {
+            seen.clear();
+        },
+    };
+}
 //# sourceMappingURL=i18n.js.map

package/dist/index.d.ts

@@ -1,12 +1,14 @@
 export { BpmnEditor } from "./editor.js";
+export { CHROME_CSS, CHROME_STYLE_ID, injectChromeStyles } from "./chrome.js";
+export { injectStyle } from "./inject.js";
 export { createEmptyDefinitions } from "./modeling.js";
 export type { EditorEvents, EditorOptions, LabelPosition, Tool, CreateShapeType, HandleDir, PortDir, } from "./types.js";
 export { ELEMENT_GROUPS, ELEMENT_TYPE_LABELS, EXTERNAL_LABEL_TYPES, CONTEXTUAL_ADD_TYPES, getElementGroup, getValidLabelPositions, } from "./element-groups.js";
 export type { ElementGroup } from "./element-groups.js";
 export { initEditorHud } from "./hud.js";
 export type { HudOptions } from "./hud.js";
-export { defaultTranslate, interpolate } from "./i18n.js";
-export type { Translate, TranslateVars } from "./i18n.js";
+export { createTranslationRecorder, defaultTranslate, interpolate } from "./i18n.js";
+export type { Translate, TranslationRecorder, TranslateVars } from "./i18n.js";
 export { createSideDock } from "./dock.js";
 export type { SideDock } from "./dock.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -1,7 +1,9 @@
 export { BpmnEditor } from "./editor.js";
+export { CHROME_CSS, CHROME_STYLE_ID, injectChromeStyles } from "./chrome.js";
+export { injectStyle } from "./inject.js";
 export { createEmptyDefinitions } from "./modeling.js";
 export { ELEMENT_GROUPS, ELEMENT_TYPE_LABELS, EXTERNAL_LABEL_TYPES, CONTEXTUAL_ADD_TYPES, getElementGroup, getValidLabelPositions, } from "./element-groups.js";
 export { initEditorHud } from "./hud.js";
-export { defaultTranslate, interpolate } from "./i18n.js";
+export { createTranslationRecorder, defaultTranslate, interpolate } from "./i18n.js";
 export { createSideDock } from "./dock.js";
 //# sourceMappingURL=index.js.map

package/dist/inject.d.ts

@@ -0,0 +1,3 @@
+/** Injects a CSS string into `<head>` exactly once, keyed by id. */
+export declare function injectStyle(id: string, css: string): void;
+//# sourceMappingURL=inject.d.ts.map

package/dist/inject.js

@@ -0,0 +1,12 @@
+/** Injects a CSS string into `<head>` exactly once, keyed by id. */
+export function injectStyle(id, css) {
+    if (typeof document === "undefined")
+        return;
+    if (document.getElementById(id))
+        return;
+    const style = document.createElement("style");
+    style.id = id;
+    style.textContent = css;
+    document.head.appendChild(style);
+}
+//# sourceMappingURL=inject.js.map

package/dist/modal.js

@@ -1,5 +1,7 @@
+import { injectChromeStyles } from "./chrome.js";
 const MODAL_STYLE_ID = "bpmnkit-hud-modal-styles";
 function injectModalStyles() {
+    injectChromeStyles();
     if (document.getElementById(MODAL_STYLE_ID))
         return;
     const style = document.createElement("style");
@@ -7,76 +9,54 @@ function injectModalStyles() {
     style.textContent = `
 .bpmnkit-hud-modal-overlay {
   position: fixed; inset: 0; z-index: 300;
-  background: rgba(0,0,0,0.5);
+  background: color-mix(in srgb, var(--bpmnkit-ds-dark, #14161a) 55%, transparent);
   display: flex; align-items: center; justify-content: center;
 }
 .bpmnkit-hud-modal {
-  background: rgba(22, 22, 30, 0.97);
-  border: 1px solid rgba(255,255,255,0.12);
-  border-radius: 10px;
-  padding: 20px;
-  min-width: 300px; max-width: 90vw;
-  color: rgba(255,255,255,0.85);
-  font-family: system-ui, -apple-system, sans-serif;
-  box-shadow: 0 16px 48px rgba(0,0,0,0.6);
-  display: flex; flex-direction: column; gap: 12px;
+  background: var(--bpmnkit-chrome-ground, #ffffff);
+  border: 1px solid var(--bpmnkit-chrome-line, rgba(255, 255, 255, 0.14));
+  padding: 24px 26px;
+  min-width: 320px; max-width: 90vw;
+  color: var(--bpmnkit-chrome-ink-2, #c8ccd2);
+  font-family: var(--bpmnkit-ds-font-sans, system-ui, -apple-system, sans-serif);
+  display: flex; flex-direction: column; gap: 14px;
 }
 .bpmnkit-hud-modal-title {
-  font-size: 14px; font-weight: 600;
-  color: rgba(255,255,255,0.95);
+  font-family: var(--bpmnkit-ds-font-mono, ui-monospace, monospace);
+  font-size: var(--bpmnkit-ds-t-mono-micro, 10.5px); letter-spacing: 0.12em;
+  text-transform: uppercase; color: var(--bpmnkit-chrome-ink-4, #9aa1aa);
 }
 .bpmnkit-hud-modal-input {
-  width: 100%; padding: 6px 10px;
-  background: rgba(255,255,255,0.08);
-  border: 1px solid rgba(255,255,255,0.15);
-  border-radius: 6px;
-  color: rgba(255,255,255,0.9);
-  font-size: 13px;
+  width: 100%; padding: 7px 9px;
+  background: transparent;
+  border: 1px solid var(--bpmnkit-chrome-line, rgba(255, 255, 255, 0.14));
+  color: var(--bpmnkit-chrome-ink, #f4f5f7);
+  font-family: var(--bpmnkit-ds-font-mono, ui-monospace, monospace);
+  font-size: 12.5px;
   outline: none;
   box-sizing: border-box;
 }
-.bpmnkit-hud-modal-input:focus { border-color: rgba(60,120,220,0.6); }
-.bpmnkit-hud-modal-actions { display: flex; gap: 8px; justify-content: flex-end; }
+.bpmnkit-hud-modal-input:focus { border-color: var(--bpmnkit-chrome-accent, #c9755c); }
+.bpmnkit-hud-modal-actions { display: flex; gap: 10px; justify-content: flex-end; }
 .bpmnkit-hud-modal-btn {
-  font-size: 13px; padding: 6px 14px; border-radius: 6px;
-  cursor: pointer; font-weight: 500;
-  border: 1px solid rgba(255,255,255,0.12);
-  background: rgba(255,255,255,0.06);
-  color: rgba(255,255,255,0.8);
+  font-family: var(--bpmnkit-ds-font-mono, ui-monospace, monospace);
+  font-size: 12px; padding: 7px 16px;
+  cursor: pointer;
+  border: 1px solid var(--bpmnkit-chrome-line, rgba(255, 255, 255, 0.14));
+  background: transparent;
+  color: var(--bpmnkit-chrome-ink-2, #c8ccd2);
 }
-.bpmnkit-hud-modal-btn:hover { background: rgba(255,255,255,0.1); }
+.bpmnkit-hud-modal-btn:hover { background: var(--bpmnkit-chrome-hover, rgba(255,255,255,0.07)); color: var(--bpmnkit-chrome-ink, #f4f5f7); }
 .bpmnkit-hud-modal-btn--primary {
-  background: rgba(60,120,220,0.5);
-  border-color: rgba(60,120,220,0.7);
+  background: var(--bpmnkit-ds-accent, #a8503a);
+  border-color: var(--bpmnkit-ds-accent, #a8503a);
   color: #fff;
 }
-.bpmnkit-hud-modal-btn--primary:hover { background: rgba(60,120,220,0.65); }
-/* Light theme */
-[data-bpmnkit-hud-theme="light"] .bpmnkit-hud-modal {
-  background: rgba(252,252,254,0.98);
-  border-color: rgba(0,0,0,0.1);
-  color: rgba(0,0,0,0.8);
-  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
-}
-[data-bpmnkit-hud-theme="light"] .bpmnkit-hud-modal-title { color: rgba(0,0,0,0.88); }
-[data-bpmnkit-hud-theme="light"] .bpmnkit-hud-modal-input {
-  background: rgba(0,0,0,0.04);
-  border-color: rgba(0,0,0,0.15);
-  color: rgba(0,0,0,0.9);
-}
-[data-bpmnkit-hud-theme="light"] .bpmnkit-hud-modal-input:focus { border-color: rgba(0,80,200,0.4); }
-[data-bpmnkit-hud-theme="light"] .bpmnkit-hud-modal-btn {
-  border-color: rgba(0,0,0,0.12);
-  background: rgba(0,0,0,0.04);
-  color: rgba(0,0,0,0.7);
-}
-[data-bpmnkit-hud-theme="light"] .bpmnkit-hud-modal-btn:hover { background: rgba(0,0,0,0.08); }
-[data-bpmnkit-hud-theme="light"] .bpmnkit-hud-modal-btn--primary {
-  background: rgba(0,80,200,0.85);
-  border-color: rgba(0,80,200,0.9);
+.bpmnkit-hud-modal-btn--primary:hover {
+  background: var(--bpmnkit-ds-accent-hover, #8f412e);
+  border-color: var(--bpmnkit-ds-accent-hover, #8f412e);
   color: #fff;
 }
-[data-bpmnkit-hud-theme="light"] .bpmnkit-hud-modal-btn--primary:hover { background: rgba(0,80,200,1); }
 `;
     document.head.appendChild(style);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bpmnkit/editor",
-  "version": "0.0.34",
+  "version": "0.1.0",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -17,8 +17,8 @@
     "dist/**/*.d.ts"
   ],
   "dependencies": {
-    "@bpmnkit/canvas": "0.0.31",
-    "@bpmnkit/core": "0.2.0"
+    "@bpmnkit/canvas": "0.1.0",
+    "@bpmnkit/core": "0.3.0"
   },
   "description": "Full-featured interactive BPMN editor with undo/redo, HUD, and side-dock UI",
   "keywords": [