@bpmnkit/plugins 0.0.8

package/dist/history/history-panel.js

@@ -0,0 +1,142 @@
+import { listCheckpoints } from "./checkpoint.js";
+import { injectHistoryStyles } from "./css.js";
+// ── Helpers ───────────────────────────────────────────────────────────────────
+function dayKey(ts) {
+    const d = new Date(ts);
+    return `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`;
+}
+function dayLabel(ts) {
+    const todayKey = dayKey(Date.now());
+    const yesterdayKey = dayKey(Date.now() - 86_400_000);
+    const key = dayKey(ts);
+    if (key === todayKey)
+        return "Today";
+    if (key === yesterdayKey)
+        return "Yesterday";
+    return new Date(ts).toLocaleDateString(undefined, {
+        weekday: "long",
+        month: "long",
+        day: "numeric",
+    });
+}
+function timeLabel(ts) {
+    return new Date(ts).toLocaleTimeString(undefined, {
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit",
+    });
+}
+// ── Custom confirm dialog ─────────────────────────────────────────────────────
+function showConfirm(onConfirm) {
+    const overlay = document.createElement("div");
+    overlay.className = "bpmnkit-hist-confirm-overlay";
+    const panel = document.createElement("div");
+    panel.className = "bpmnkit-hist-confirm-panel";
+    const titleEl = document.createElement("div");
+    titleEl.className = "bpmnkit-hist-confirm-title";
+    titleEl.textContent = "Restore checkpoint?";
+    const bodyEl = document.createElement("div");
+    bodyEl.className = "bpmnkit-hist-confirm-body";
+    bodyEl.textContent =
+        "Your current changes will be replaced with this checkpoint. This cannot be undone.";
+    const actions = document.createElement("div");
+    actions.className = "bpmnkit-hist-confirm-actions";
+    const cancelBtn = document.createElement("button");
+    cancelBtn.className = "bpmnkit-hist-confirm-cancel";
+    cancelBtn.textContent = "Cancel";
+    cancelBtn.addEventListener("click", () => overlay.remove());
+    const okBtn = document.createElement("button");
+    okBtn.className = "bpmnkit-hist-confirm-ok";
+    okBtn.textContent = "Restore";
+    okBtn.addEventListener("click", () => {
+        overlay.remove();
+        onConfirm();
+    });
+    actions.append(cancelBtn, okBtn);
+    panel.append(titleEl, bodyEl, actions);
+    overlay.append(panel);
+    overlay.addEventListener("click", (e) => {
+        if (e.target === overlay)
+            overlay.remove();
+    });
+    document.body.append(overlay);
+}
+// ── Panel ─────────────────────────────────────────────────────────────────────
+export function createHistoryPanel(options) {
+    injectHistoryStyles();
+    const el = document.createElement("div");
+    el.className = "bpmnkit-hist-pane";
+    // Header
+    const header = document.createElement("div");
+    header.className = "bpmnkit-hist-header";
+    const titleEl = document.createElement("span");
+    titleEl.className = "bpmnkit-hist-header-title";
+    titleEl.textContent = "Checkpoints";
+    const refreshBtn = document.createElement("button");
+    refreshBtn.className = "bpmnkit-hist-refresh";
+    refreshBtn.title = "Refresh";
+    refreshBtn.textContent = "↻";
+    header.append(titleEl, refreshBtn);
+    // List
+    const list = document.createElement("div");
+    list.className = "bpmnkit-hist-list";
+    el.append(header, list);
+    // ── Render ──
+    function render(checkpoints, hasContext) {
+        list.textContent = "";
+        if (!hasContext) {
+            const msg = document.createElement("div");
+            msg.className = "bpmnkit-hist-empty";
+            msg.textContent = "Open a saved file to view its checkpoint history.";
+            list.append(msg);
+            return;
+        }
+        if (checkpoints.length === 0) {
+            const msg = document.createElement("div");
+            msg.className = "bpmnkit-hist-empty";
+            msg.textContent = "No checkpoints yet. They are created automatically as you edit.";
+            list.append(msg);
+            return;
+        }
+        // Group by day (checkpoints already sorted newest-first)
+        let currentDay = "";
+        for (const cp of checkpoints) {
+            const day = dayKey(cp.timestamp);
+            if (day !== currentDay) {
+                currentDay = day;
+                const groupLabel = document.createElement("div");
+                groupLabel.className = "bpmnkit-hist-group-label";
+                groupLabel.textContent = dayLabel(cp.timestamp);
+                list.append(groupLabel);
+            }
+            const item = document.createElement("div");
+            item.className = "bpmnkit-hist-item";
+            const timeEl = document.createElement("span");
+            timeEl.className = "bpmnkit-hist-item-time";
+            timeEl.textContent = timeLabel(cp.timestamp);
+            const restoreBtn = document.createElement("button");
+            restoreBtn.className = "bpmnkit-hist-restore";
+            restoreBtn.textContent = "Restore";
+            restoreBtn.addEventListener("click", () => {
+                showConfirm(() => options.loadXml(cp.xml));
+            });
+            item.append(timeEl, restoreBtn);
+            list.append(item);
+        }
+    }
+    // ── Refresh ──
+    async function refresh() {
+        const ctx = options.getCurrentContext?.() ?? null;
+        if (!ctx) {
+            render([], false);
+            return;
+        }
+        const checkpoints = await listCheckpoints(ctx.projectId, ctx.fileId);
+        render(checkpoints, true);
+    }
+    refreshBtn.addEventListener("click", () => {
+        void refresh();
+    });
+    return { el, refresh };
+}
+//# sourceMappingURL=history-panel.js.map

package/dist/history/index.d.ts

@@ -0,0 +1,5 @@
+export { saveCheckpoint, listCheckpoints } from "./checkpoint.js";
+export type { Checkpoint } from "./checkpoint.js";
+export { createHistoryPanel } from "./history-panel.js";
+export type { HistoryPanelOptions } from "./history-panel.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/history/index.js

@@ -0,0 +1,3 @@
+export { saveCheckpoint, listCheckpoints } from "./checkpoint.js";
+export { createHistoryPanel } from "./history-panel.js";
+//# sourceMappingURL=index.js.map

package/dist/main-menu/css.d.ts

@@ -0,0 +1,4 @@
+export declare const MAIN_MENU_STYLE_ID = "bpmnkit-main-menu-styles-v2";
+export declare const MAIN_MENU_CSS = "\n.bpmnkit-main-menu-panel {\n  position: absolute;\n  top: 0;\n  right: 0;\n  height: 36px;\n  display: flex;\n  align-items: center;\n  gap: 3px;\n  padding: 0 6px;\n  background: #f0f4f8;\n  border: none;\n  border-left: 1px solid #d0d0d0;\n  border-radius: 0;\n  box-shadow: none;\n  z-index: 10000;\n}\n[data-theme=\"dark\"] .bpmnkit-main-menu-panel {\n  background: var(--bpmnkit-surface-2, #1e1e2e);\n  border-left-color: #313244;\n}\n.bpmnkit-canvas-host:has(.bpmnkit-main-menu-panel:not([style*=\"none\"])) .bpmnkit-tabs {\n  padding-right: 160px;\n}\n.bpmnkit-main-menu-title {\n  padding: 0 6px;\n  font-size: 12px;\n  font-weight: 600;\n  font-family: system-ui, sans-serif;\n  color: var(--bpmnkit-text, #333333);\n  white-space: nowrap;\n  user-select: none;\n  opacity: 0.75;\n}\n.bpmnkit-main-menu-sep {\n  width: 1px;\n  height: 16px;\n  background: var(--bpmnkit-overlay-border, var(--bpmnkit-panel-border, rgba(0, 0, 0, 0.08)));\n  flex-shrink: 0;\n}\n.bpmnkit-menu-btn {\n  width: 28px;\n  height: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: transparent;\n  border: 1px solid transparent;\n  border-radius: 4px;\n  color: var(--bpmnkit-text, #333333);\n  cursor: pointer;\n  padding: 0;\n  flex-shrink: 0;\n  transition: background 0.1s;\n}\n.bpmnkit-menu-btn:hover {\n  background: var(--bpmnkit-overlay-border, var(--bpmnkit-panel-border, rgba(0, 0, 0, 0.08)));\n}\n.bpmnkit-menu-btn svg {\n  width: 16px;\n  height: 16px;\n  pointer-events: none;\n}\n.bpmnkit-menu-dropdown {\n  position: fixed;\n  display: none;\n  flex-direction: column;\n  background: var(--bpmnkit-overlay-bg, rgba(248, 249, 250, 0.96));\n  border: 1px solid var(--bpmnkit-overlay-border, var(--bpmnkit-panel-border, rgba(0, 0, 0, 0.08)));\n  border-radius: 8px;\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);\n  z-index: 10001;\n  min-width: 220px;\n  overflow: hidden;\n}\n.bpmnkit-menu-dropdown.open { display: flex; }\n.bpmnkit-menu-level {\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n  padding: 4px;\n  position: relative;\n  z-index: 1;\n}\n@keyframes bpmnkit-menu-in-right {\n  from { opacity: 0; transform: translateX(20px); }\n  to   { opacity: 1; transform: translateX(0); }\n}\n@keyframes bpmnkit-menu-in-left {\n  from { opacity: 0; transform: translateX(-20px); }\n  to   { opacity: 1; transform: translateX(0); }\n}\n@keyframes bpmnkit-menu-out-left {\n  from { opacity: 1; transform: translateX(0); }\n  to   { opacity: 0; transform: translateX(-20px); }\n}\n@keyframes bpmnkit-menu-out-right {\n  from { opacity: 1; transform: translateX(0); }\n  to   { opacity: 0; transform: translateX(20px); }\n}\n.bpmnkit-menu-level--in-right  { animation: bpmnkit-menu-in-right  180ms ease-out forwards; }\n.bpmnkit-menu-level--in-left   { animation: bpmnkit-menu-in-left   180ms ease-out forwards; }\n.bpmnkit-menu-level--out-left  { animation: bpmnkit-menu-out-left  150ms ease-in  forwards; }\n.bpmnkit-menu-level--out-right { animation: bpmnkit-menu-out-right 150ms ease-in  forwards; }\n.bpmnkit-menu-drop-label {\n  padding: 3px 8px 1px;\n  font-size: 10px;\n  font-weight: 600;\n  font-family: system-ui, sans-serif;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n  color: var(--bpmnkit-text, #333333);\n  opacity: 0.45;\n}\n.bpmnkit-menu-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 8px;\n  background: transparent;\n  border: none;\n  border-radius: 5px;\n  color: var(--bpmnkit-text, #333333);\n  cursor: pointer;\n  font-family: system-ui, sans-serif;\n  font-size: 12px;\n  text-align: left;\n  width: 100%;\n  transition: background 0.1s;\n}\n.bpmnkit-menu-item:hover {\n  background: var(--bpmnkit-overlay-border, rgba(0, 0, 0, 0.06));\n}\n.bpmnkit-menu-item-check {\n  width: 12px;\n  height: 12px;\n  flex-shrink: 0;\n  color: var(--bpmnkit-highlight, var(--bpmnkit-accent, #1a56db));\n}\n.bpmnkit-menu-item-icon {\n  width: 14px;\n  height: 14px;\n  flex-shrink: 0;\n  opacity: 0.65;\n}\n.bpmnkit-menu-item-label {\n  flex: 1;\n}\n.bpmnkit-menu-item-arrow {\n  width: 12px;\n  height: 12px;\n  flex-shrink: 0;\n  opacity: 0.45;\n}\n.bpmnkit-menu-item-icon svg,\n.bpmnkit-menu-item-check svg,\n.bpmnkit-menu-item-arrow svg {\n  width: 100%;\n  height: 100%;\n}\n.bpmnkit-menu-back-row {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  padding: 2px 4px;\n}\n.bpmnkit-menu-back-btn {\n  width: 24px;\n  height: 24px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: transparent;\n  border: none;\n  border-radius: 4px;\n  color: var(--bpmnkit-text, #333333);\n  cursor: pointer;\n  padding: 0;\n  flex-shrink: 0;\n  transition: background 0.1s;\n}\n.bpmnkit-menu-back-btn:hover {\n  background: var(--bpmnkit-overlay-border, rgba(0, 0, 0, 0.06));\n}\n.bpmnkit-menu-back-btn svg {\n  width: 12px;\n  height: 12px;\n  pointer-events: none;\n}\n.bpmnkit-menu-level-title {\n  font-size: 12px;\n  font-weight: 600;\n  font-family: system-ui, sans-serif;\n  color: var(--bpmnkit-text, #333333);\n  flex: 1;\n}\n.bpmnkit-menu-info-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 5px 8px;\n  font-family: system-ui, sans-serif;\n  font-size: 12px;\n  color: var(--bpmnkit-text, #333333);\n  opacity: 0.75;\n}\n.bpmnkit-menu-info-text {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.bpmnkit-menu-info-action {\n  flex-shrink: 0;\n  border: 1px solid var(--bpmnkit-overlay-border, var(--bpmnkit-panel-border, rgba(0, 0, 0, 0.08)));\n  border-radius: 4px;\n  background: transparent;\n  color: var(--bpmnkit-text, #333333);\n  cursor: pointer;\n  padding: 2px 7px;\n  font-size: 11px;\n  font-family: system-ui, sans-serif;\n  transition: background 0.1s;\n}\n.bpmnkit-menu-info-action:hover {\n  background: var(--bpmnkit-overlay-border, rgba(0, 0, 0, 0.06));\n}\n.bpmnkit-menu-drop-sep {\n  height: 1px;\n  background: var(--bpmnkit-overlay-border, rgba(0,0,0,0.1));\n  margin: 3px 4px;\n}\n[data-bpmnkit-hud-theme=\"dark\"] .bpmnkit-menu-dropdown {\n  background: var(--bpmnkit-panel-bg, rgba(13,13,22,0.92));\n  border-color: var(--bpmnkit-panel-border, rgba(255, 255, 255, 0.08));\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);\n}\n[data-bpmnkit-hud-theme=\"dark\"] .bpmnkit-menu-item,\n[data-bpmnkit-hud-theme=\"dark\"] .bpmnkit-menu-back-btn,\n[data-bpmnkit-hud-theme=\"dark\"] .bpmnkit-menu-level-title,\n[data-bpmnkit-hud-theme=\"dark\"] .bpmnkit-menu-info-row,\n[data-bpmnkit-hud-theme=\"dark\"] .bpmnkit-menu-info-action,\n[data-bpmnkit-hud-theme=\"dark\"] .bpmnkit-menu-drop-label {\n  color: rgba(205, 214, 244, 0.9);\n}\n[data-bpmnkit-hud-theme=\"dark\"] .bpmnkit-menu-item:hover,\n[data-bpmnkit-hud-theme=\"dark\"] .bpmnkit-menu-back-btn:hover,\n[data-bpmnkit-hud-theme=\"dark\"] .bpmnkit-menu-info-action:hover {\n  background: rgba(255, 255, 255, 0.08);\n}\n[data-bpmnkit-hud-theme=\"dark\"] .bpmnkit-menu-info-action {\n  border-color: rgba(255, 255, 255, 0.15);\n}\n[data-bpmnkit-hud-theme=\"dark\"] .bpmnkit-menu-drop-sep {\n  background: var(--bpmnkit-panel-border, rgba(255, 255, 255, 0.08));\n}\n[data-bpmnkit-hud-theme=\"dark\"] .bpmnkit-menu-item-check {\n  color: var(--bpmnkit-accent-bright, #89b4fa);\n}\n";
+export declare function injectMainMenuStyles(): void;
+//# sourceMappingURL=css.d.ts.map

package/dist/main-menu/css.js

@@ -0,0 +1,272 @@
+export const MAIN_MENU_STYLE_ID = "bpmnkit-main-menu-styles-v2";
+export const MAIN_MENU_CSS = `
+.bpmnkit-main-menu-panel {
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  padding: 0 6px;
+  background: #f0f4f8;
+  border: none;
+  border-left: 1px solid #d0d0d0;
+  border-radius: 0;
+  box-shadow: none;
+  z-index: 10000;
+}
+[data-theme="dark"] .bpmnkit-main-menu-panel {
+  background: var(--bpmnkit-surface-2, #1e1e2e);
+  border-left-color: #313244;
+}
+.bpmnkit-canvas-host:has(.bpmnkit-main-menu-panel:not([style*="none"])) .bpmnkit-tabs {
+  padding-right: 160px;
+}
+.bpmnkit-main-menu-title {
+  padding: 0 6px;
+  font-size: 12px;
+  font-weight: 600;
+  font-family: system-ui, sans-serif;
+  color: var(--bpmnkit-text, #333333);
+  white-space: nowrap;
+  user-select: none;
+  opacity: 0.75;
+}
+.bpmnkit-main-menu-sep {
+  width: 1px;
+  height: 16px;
+  background: var(--bpmnkit-overlay-border, var(--bpmnkit-panel-border, rgba(0, 0, 0, 0.08)));
+  flex-shrink: 0;
+}
+.bpmnkit-menu-btn {
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  color: var(--bpmnkit-text, #333333);
+  cursor: pointer;
+  padding: 0;
+  flex-shrink: 0;
+  transition: background 0.1s;
+}
+.bpmnkit-menu-btn:hover {
+  background: var(--bpmnkit-overlay-border, var(--bpmnkit-panel-border, rgba(0, 0, 0, 0.08)));
+}
+.bpmnkit-menu-btn svg {
+  width: 16px;
+  height: 16px;
+  pointer-events: none;
+}
+.bpmnkit-menu-dropdown {
+  position: fixed;
+  display: none;
+  flex-direction: column;
+  background: var(--bpmnkit-overlay-bg, rgba(248, 249, 250, 0.96));
+  border: 1px solid var(--bpmnkit-overlay-border, var(--bpmnkit-panel-border, rgba(0, 0, 0, 0.08)));
+  border-radius: 8px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+  z-index: 10001;
+  min-width: 220px;
+  overflow: hidden;
+}
+.bpmnkit-menu-dropdown.open { display: flex; }
+.bpmnkit-menu-level {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  padding: 4px;
+  position: relative;
+  z-index: 1;
+}
+@keyframes bpmnkit-menu-in-right {
+  from { opacity: 0; transform: translateX(20px); }
+  to   { opacity: 1; transform: translateX(0); }
+}
+@keyframes bpmnkit-menu-in-left {
+  from { opacity: 0; transform: translateX(-20px); }
+  to   { opacity: 1; transform: translateX(0); }
+}
+@keyframes bpmnkit-menu-out-left {
+  from { opacity: 1; transform: translateX(0); }
+  to   { opacity: 0; transform: translateX(-20px); }
+}
+@keyframes bpmnkit-menu-out-right {
+  from { opacity: 1; transform: translateX(0); }
+  to   { opacity: 0; transform: translateX(20px); }
+}
+.bpmnkit-menu-level--in-right  { animation: bpmnkit-menu-in-right  180ms ease-out forwards; }
+.bpmnkit-menu-level--in-left   { animation: bpmnkit-menu-in-left   180ms ease-out forwards; }
+.bpmnkit-menu-level--out-left  { animation: bpmnkit-menu-out-left  150ms ease-in  forwards; }
+.bpmnkit-menu-level--out-right { animation: bpmnkit-menu-out-right 150ms ease-in  forwards; }
+.bpmnkit-menu-drop-label {
+  padding: 3px 8px 1px;
+  font-size: 10px;
+  font-weight: 600;
+  font-family: system-ui, sans-serif;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--bpmnkit-text, #333333);
+  opacity: 0.45;
+}
+.bpmnkit-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  background: transparent;
+  border: none;
+  border-radius: 5px;
+  color: var(--bpmnkit-text, #333333);
+  cursor: pointer;
+  font-family: system-ui, sans-serif;
+  font-size: 12px;
+  text-align: left;
+  width: 100%;
+  transition: background 0.1s;
+}
+.bpmnkit-menu-item:hover {
+  background: var(--bpmnkit-overlay-border, rgba(0, 0, 0, 0.06));
+}
+.bpmnkit-menu-item-check {
+  width: 12px;
+  height: 12px;
+  flex-shrink: 0;
+  color: var(--bpmnkit-highlight, var(--bpmnkit-accent, #1a56db));
+}
+.bpmnkit-menu-item-icon {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+  opacity: 0.65;
+}
+.bpmnkit-menu-item-label {
+  flex: 1;
+}
+.bpmnkit-menu-item-arrow {
+  width: 12px;
+  height: 12px;
+  flex-shrink: 0;
+  opacity: 0.45;
+}
+.bpmnkit-menu-item-icon svg,
+.bpmnkit-menu-item-check svg,
+.bpmnkit-menu-item-arrow svg {
+  width: 100%;
+  height: 100%;
+}
+.bpmnkit-menu-back-row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 4px;
+}
+.bpmnkit-menu-back-btn {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  color: var(--bpmnkit-text, #333333);
+  cursor: pointer;
+  padding: 0;
+  flex-shrink: 0;
+  transition: background 0.1s;
+}
+.bpmnkit-menu-back-btn:hover {
+  background: var(--bpmnkit-overlay-border, rgba(0, 0, 0, 0.06));
+}
+.bpmnkit-menu-back-btn svg {
+  width: 12px;
+  height: 12px;
+  pointer-events: none;
+}
+.bpmnkit-menu-level-title {
+  font-size: 12px;
+  font-weight: 600;
+  font-family: system-ui, sans-serif;
+  color: var(--bpmnkit-text, #333333);
+  flex: 1;
+}
+.bpmnkit-menu-info-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 5px 8px;
+  font-family: system-ui, sans-serif;
+  font-size: 12px;
+  color: var(--bpmnkit-text, #333333);
+  opacity: 0.75;
+}
+.bpmnkit-menu-info-text {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.bpmnkit-menu-info-action {
+  flex-shrink: 0;
+  border: 1px solid var(--bpmnkit-overlay-border, var(--bpmnkit-panel-border, rgba(0, 0, 0, 0.08)));
+  border-radius: 4px;
+  background: transparent;
+  color: var(--bpmnkit-text, #333333);
+  cursor: pointer;
+  padding: 2px 7px;
+  font-size: 11px;
+  font-family: system-ui, sans-serif;
+  transition: background 0.1s;
+}
+.bpmnkit-menu-info-action:hover {
+  background: var(--bpmnkit-overlay-border, rgba(0, 0, 0, 0.06));
+}
+.bpmnkit-menu-drop-sep {
+  height: 1px;
+  background: var(--bpmnkit-overlay-border, rgba(0,0,0,0.1));
+  margin: 3px 4px;
+}
+[data-bpmnkit-hud-theme="dark"] .bpmnkit-menu-dropdown {
+  background: var(--bpmnkit-panel-bg, rgba(13,13,22,0.92));
+  border-color: var(--bpmnkit-panel-border, rgba(255, 255, 255, 0.08));
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+}
+[data-bpmnkit-hud-theme="dark"] .bpmnkit-menu-item,
+[data-bpmnkit-hud-theme="dark"] .bpmnkit-menu-back-btn,
+[data-bpmnkit-hud-theme="dark"] .bpmnkit-menu-level-title,
+[data-bpmnkit-hud-theme="dark"] .bpmnkit-menu-info-row,
+[data-bpmnkit-hud-theme="dark"] .bpmnkit-menu-info-action,
+[data-bpmnkit-hud-theme="dark"] .bpmnkit-menu-drop-label {
+  color: rgba(205, 214, 244, 0.9);
+}
+[data-bpmnkit-hud-theme="dark"] .bpmnkit-menu-item:hover,
+[data-bpmnkit-hud-theme="dark"] .bpmnkit-menu-back-btn:hover,
+[data-bpmnkit-hud-theme="dark"] .bpmnkit-menu-info-action:hover {
+  background: rgba(255, 255, 255, 0.08);
+}
+[data-bpmnkit-hud-theme="dark"] .bpmnkit-menu-info-action {
+  border-color: rgba(255, 255, 255, 0.15);
+}
+[data-bpmnkit-hud-theme="dark"] .bpmnkit-menu-drop-sep {
+  background: var(--bpmnkit-panel-border, rgba(255, 255, 255, 0.08));
+}
+[data-bpmnkit-hud-theme="dark"] .bpmnkit-menu-item-check {
+  color: var(--bpmnkit-accent-bright, #89b4fa);
+}
+`;
+export function injectMainMenuStyles() {
+    if (typeof document === "undefined")
+        return;
+    if (document.getElementById(MAIN_MENU_STYLE_ID))
+        return;
+    const style = document.createElement("style");
+    style.id = MAIN_MENU_STYLE_ID;
+    style.textContent = MAIN_MENU_CSS;
+    document.head.appendChild(style);
+}
+//# sourceMappingURL=css.js.map

package/dist/main-menu/index.d.ts

@@ -0,0 +1,59 @@
+/**
+ * @bpmnkit/canvas-plugin-main-menu — main menu plugin for `@bpmnkit/canvas`.
+ *
+ * Adds a panel in the top-right corner of the canvas with an optional title
+ * and a menu button. The menu lets users switch between light, dark, and
+ * automatic (OS-preference) color themes. Supports drill-down navigation,
+ * dynamic items, and a programmatic API for title/items injection.
+ *
+ * @packageDocumentation
+ */
+import type { CanvasPlugin } from "@bpmnkit/canvas";
+export { MAIN_MENU_CSS, MAIN_MENU_STYLE_ID, injectMainMenuStyles } from "./css.js";
+/** A clickable action item in the main menu dropdown. */
+export interface MenuAction {
+    label: string;
+    icon?: string;
+    onClick: () => void;
+}
+/** A visual separator between groups of menu items. */
+export interface MenuSeparator {
+    type: "separator";
+}
+/** A drill-down item — clicking replaces dropdown content with a sub-menu. */
+export interface MenuDrill {
+    type: "drill";
+    label: string;
+    icon?: string;
+    items: MenuItem[] | (() => MenuItem[]);
+}
+/** A passive info row with optional inline action button. */
+export interface MenuInfo {
+    type: "info";
+    text: string;
+    actionLabel?: string;
+    onAction?: () => void;
+}
+export type MenuItem = MenuAction | MenuSeparator | MenuDrill | MenuInfo;
+export interface MainMenuOptions {
+    /** Optional title text shown to the left of the menu button. */
+    title?: string;
+    /** Extra items rendered above the Theme section in the dropdown. */
+    menuItems?: MenuItem[];
+}
+/** Programmatic API returned alongside the plugin. */
+export interface MainMenuApi {
+    /** Overwrite the title span text. */
+    setTitle(text: string): void;
+    /** Supply items prepended to the dropdown (above static menuItems) on each open. */
+    setDynamicItems(fn: () => MenuItem[]): void;
+}
+/**
+ * Creates a main menu plugin instance.
+ *
+ * Each call returns a fresh plugin — pass one instance per canvas.
+ */
+export declare function createMainMenuPlugin(options?: MainMenuOptions): CanvasPlugin & {
+    api: MainMenuApi;
+};
+//# sourceMappingURL=index.d.ts.map