@bpmnkit/plugins 0.0.8

package/dist/form-viewer/form-viewer.js

@@ -0,0 +1,376 @@
+import { injectFormViewerStyles } from "./css.js";
+/**
+ * Standalone read-only Camunda Form viewer.
+ *
+ * Renders a `FormDefinition` as a static HTML preview of all component types.
+ * Does not depend on `@bpmnkit/canvas`.
+ */
+export class FormViewer {
+    _container;
+    _root;
+    _theme;
+    _form = null;
+    constructor(options) {
+        this._container = options.container;
+        this._theme = options.theme ?? "dark";
+        injectFormViewerStyles();
+        this._root = document.createElement("div");
+        this._root.className = `form-viewer ${this._theme}`;
+        this._container.appendChild(this._root);
+    }
+    /** Load and render a FormDefinition. */
+    load(form) {
+        this._form = form;
+        this._render();
+    }
+    /** Clear the view. */
+    clear() {
+        this._form = null;
+        this._root.innerHTML = "";
+    }
+    /** Set the theme. */
+    setTheme(theme) {
+        this._root.classList.remove(this._theme);
+        this._theme = theme;
+        this._root.classList.add(theme);
+    }
+    /** Remove the viewer from the DOM. */
+    destroy() {
+        this._root.remove();
+    }
+    _render() {
+        if (!this._form)
+            return;
+        this._root.innerHTML = "";
+        const body = document.createElement("div");
+        body.className = "form-viewer-body";
+        renderComponents(this._form.components, body);
+        this._root.appendChild(body);
+    }
+}
+/** Group components by their layout.row, preserving order. */
+function groupByRow(components) {
+    const rows = [];
+    const rowMap = new Map();
+    for (const c of components) {
+        const rowKey = c.layout?.row ?? `__solo_${c.id}`;
+        let row = rowMap.get(rowKey);
+        if (!row) {
+            row = [];
+            rowMap.set(rowKey, row);
+            rows.push(row);
+        }
+        row.push(c);
+    }
+    return rows;
+}
+function renderComponents(components, parent) {
+    const rows = groupByRow(components);
+    for (const row of rows) {
+        const rowEl = document.createElement("div");
+        rowEl.className = "fv-row";
+        for (const c of row) {
+            const wrapper = document.createElement("div");
+            wrapper.className = "fv-field";
+            if (c.layout?.columns !== null && c.layout?.columns !== undefined) {
+                wrapper.style.flex = `0 0 calc(${c.layout.columns} / 12 * 100% - 6px)`;
+            }
+            renderComponent(c, wrapper);
+            rowEl.appendChild(wrapper);
+        }
+        parent.appendChild(rowEl);
+    }
+}
+function renderComponent(c, parent) {
+    // Cast to specific type in each case because FormUnknownComponent's index signature
+    // prevents TypeScript from narrowing properties via the discriminant alone.
+    const type = c.type;
+    switch (type) {
+        case "text":
+            renderText(c, parent);
+            break;
+        case "textfield":
+            renderTextField(c.label, "Text…", parent);
+            break;
+        case "textarea":
+            renderTextarea(c.label, "Text…", parent);
+            break;
+        case "number":
+            renderTextField(c.label, "0", parent);
+            break;
+        case "datetime":
+            renderDatetime(c, parent);
+            break;
+        case "select": {
+            const s = c;
+            renderSelect(s.label, s.values ?? [], parent);
+            break;
+        }
+        case "radio": {
+            const r = c;
+            renderChoices(r.label, r.values ?? [], "radio", parent);
+            break;
+        }
+        case "checkbox":
+            renderCheckbox(c.label, parent);
+            break;
+        case "checklist": {
+            const cl = c;
+            renderChoices(cl.label, cl.values ?? [], "checklist", parent);
+            break;
+        }
+        case "taglist": {
+            const tl = c;
+            renderTaglist(tl.label, tl.values ?? [], parent);
+            break;
+        }
+        case "button":
+            renderButton(c.label, parent);
+            break;
+        case "group": {
+            const g = c;
+            renderGroup(g.label, g.components, parent);
+            break;
+        }
+        case "dynamiclist": {
+            const dl = c;
+            renderDynamicList(dl.label, dl.components, parent);
+            break;
+        }
+        case "table": {
+            const t = c;
+            renderTable(t.label, t.columns ?? [], parent);
+            break;
+        }
+        case "image":
+            renderImage(c.alt, parent);
+            break;
+        case "iframe": {
+            const iframe = c;
+            renderIframe(iframe.label, iframe.url, parent);
+            break;
+        }
+        case "separator":
+            parent.appendChild(document.createElement("hr")).className = "fv-separator";
+            break;
+        case "spacer": {
+            const spacer = document.createElement("div");
+            spacer.className = "fv-spacer";
+            spacer.style.height = `${c.height ?? 20}px`;
+            parent.appendChild(spacer);
+            break;
+        }
+        case "documentPreview":
+            renderDocumentPreview(c.label, parent);
+            break;
+        case "html":
+            renderHtml(c.content, parent);
+            break;
+        case "expression":
+            renderExpression(c.expression, parent);
+            break;
+        case "filepicker":
+            renderFilepicker(c.label, parent);
+            break;
+        default:
+            renderUnknown(type, parent);
+    }
+}
+function label(text) {
+    const el = document.createElement("label");
+    el.className = "fv-label";
+    el.textContent = text;
+    return el;
+}
+function renderTextField(labelText, placeholder, parent) {
+    parent.appendChild(label(labelText));
+    const input = document.createElement("div");
+    input.className = "fv-input";
+    input.textContent = placeholder;
+    parent.appendChild(input);
+}
+function renderTextarea(labelText, placeholder, parent) {
+    parent.appendChild(label(labelText));
+    const input = document.createElement("div");
+    input.className = "fv-input fv-textarea";
+    input.textContent = placeholder;
+    parent.appendChild(input);
+}
+function renderDatetime(c, parent) {
+    parent.appendChild(label("Date / Time"));
+    const wrapper = document.createElement("div");
+    wrapper.className = "fv-datetime-inputs";
+    if (!c.subtype || c.subtype === "date" || c.subtype === "datetime") {
+        const d = document.createElement("div");
+        d.className = "fv-input";
+        d.textContent = c.dateLabel ?? "Date…";
+        wrapper.appendChild(d);
+    }
+    if (c.subtype === "time" || c.subtype === "datetime") {
+        const t = document.createElement("div");
+        t.className = "fv-input";
+        t.textContent = c.timeLabel ?? "Time…";
+        wrapper.appendChild(t);
+    }
+    parent.appendChild(wrapper);
+}
+function renderSelect(labelText, values, parent) {
+    parent.appendChild(label(labelText));
+    const input = document.createElement("div");
+    input.className = "fv-input";
+    const first = values[0];
+    input.textContent = first ? first.label : "Select…";
+    parent.appendChild(input);
+}
+function renderChoices(labelText, values, type, parent) {
+    parent.appendChild(label(labelText));
+    for (const v of values) {
+        const row = document.createElement("div");
+        row.className = "fv-option-row";
+        const dot = document.createElement("div");
+        dot.className = type === "radio" ? "fv-option-dot" : "fv-option-square";
+        row.appendChild(dot);
+        row.appendChild(document.createTextNode(v.label));
+        parent.appendChild(row);
+    }
+}
+function renderCheckbox(labelText, parent) {
+    const row = document.createElement("div");
+    row.className = "fv-option-row";
+    const box = document.createElement("div");
+    box.className = "fv-option-square";
+    row.appendChild(box);
+    row.appendChild(document.createTextNode(labelText));
+    parent.appendChild(row);
+}
+function renderTaglist(labelText, values, parent) {
+    parent.appendChild(label(labelText));
+    const tags = document.createElement("div");
+    tags.className = "fv-tags";
+    for (const v of values.slice(0, 3)) {
+        const tag = document.createElement("span");
+        tag.className = "fv-tag";
+        tag.textContent = v.label;
+        tags.appendChild(tag);
+    }
+    parent.appendChild(tags);
+}
+function renderButton(labelText, parent) {
+    const btn = document.createElement("div");
+    btn.className = "fv-btn";
+    btn.textContent = labelText;
+    parent.appendChild(btn);
+}
+function renderGroup(labelText, components, parent) {
+    const group = document.createElement("div");
+    group.className = "fv-group";
+    const groupLabel = document.createElement("div");
+    groupLabel.className = "fv-group-label";
+    groupLabel.textContent = labelText;
+    group.appendChild(groupLabel);
+    renderComponents(components, group);
+    parent.appendChild(group);
+}
+function renderDynamicList(labelText, components, parent) {
+    const dl = document.createElement("div");
+    dl.className = "fv-dynamic-list";
+    if (labelText) {
+        const dlLabel = document.createElement("div");
+        dlLabel.className = "fv-dynamic-list-label";
+        dlLabel.textContent = labelText;
+        dl.appendChild(dlLabel);
+    }
+    renderComponents(components, dl);
+    parent.appendChild(dl);
+}
+function renderTable(labelText, columns, parent) {
+    if (labelText)
+        parent.appendChild(label(labelText));
+    const table = document.createElement("table");
+    table.className = "fv-table";
+    const thead = document.createElement("thead");
+    const tr = document.createElement("tr");
+    for (const col of columns) {
+        const th = document.createElement("th");
+        th.textContent = col.label;
+        tr.appendChild(th);
+    }
+    thead.appendChild(tr);
+    table.appendChild(thead);
+    // One empty data row as placeholder
+    const tbody = document.createElement("tbody");
+    const dataRow = document.createElement("tr");
+    for (const _ of columns) {
+        const td = document.createElement("td");
+        td.innerHTML = " ";
+        dataRow.appendChild(td);
+    }
+    tbody.appendChild(dataRow);
+    table.appendChild(tbody);
+    parent.appendChild(table);
+}
+function renderImage(alt, parent) {
+    const el = document.createElement("div");
+    el.className = "fv-image";
+    el.textContent = alt ? `[Image: ${alt}]` : "[Image]";
+    parent.appendChild(el);
+}
+function renderIframe(labelText, url, parent) {
+    const el = document.createElement("div");
+    el.className = "fv-iframe";
+    el.textContent = labelText ? `[iFrame: ${labelText}]` : url ? `[iFrame: ${url}]` : "[iFrame]";
+    parent.appendChild(el);
+}
+function renderDocumentPreview(labelText, parent) {
+    const el = document.createElement("div");
+    el.className = "fv-document-preview";
+    el.textContent = labelText ? `[Document: ${labelText}]` : "[Document Preview]";
+    parent.appendChild(el);
+}
+function renderHtml(content, parent) {
+    const el = document.createElement("div");
+    el.className = "fv-html";
+    // Safe: we trust the form definition content (designer-authored, not user input)
+    el.innerHTML = content ?? "";
+    parent.appendChild(el);
+}
+function renderExpression(expression, parent) {
+    const el = document.createElement("div");
+    el.className = "fv-expression";
+    el.textContent = expression ? `= ${expression}` : "= …";
+    parent.appendChild(el);
+}
+function renderFilepicker(labelText, parent) {
+    if (labelText)
+        parent.appendChild(label(labelText));
+    const input = document.createElement("div");
+    input.className = "fv-input";
+    input.textContent = "Choose file…";
+    parent.appendChild(input);
+}
+function renderText(c, parent) {
+    const el = document.createElement("div");
+    el.className = "fv-text";
+    // Convert minimal markdown: # headings, **bold**, *italic*
+    el.innerHTML = minimalMarkdown(c.text ?? "");
+    parent.appendChild(el);
+}
+function renderUnknown(type, parent) {
+    const el = document.createElement("div");
+    el.className = "fv-input";
+    el.textContent = `[${type}]`;
+    parent.appendChild(el);
+}
+/** Very minimal markdown: headers, bold, italic. */
+function minimalMarkdown(md) {
+    return md
+        .replace(/&/g, "&")
+        .replace(/</g, "&lt;")
+        .replace(/^### (.+)$/gm, "<h3>$1</h3>")
+        .replace(/^## (.+)$/gm, "<h2>$1</h2>")
+        .replace(/^# (.+)$/gm, "<h1>$1</h1>")
+        .replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>")
+        .replace(/\*(.+?)\*/g, "<em>$1</em>")
+        .replace(/\n/g, "<br>");
+}
+//# sourceMappingURL=form-viewer.js.map

package/dist/form-viewer/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @bpmnkit/canvas-plugin-form-viewer — read-only Camunda Form viewer.
+ *
+ * Renders all Camunda Form component types as a static HTML preview.
+ * Built entirely in-repo — no dependency on @bpmnkit-io/form-js.
+ *
+ * @packageDocumentation
+ */
+export { FormViewer } from "./form-viewer.js";
+export type { FormViewerOptions } from "./form-viewer.js";
+export { FORM_VIEWER_CSS, injectFormViewerStyles } from "./css.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/form-viewer/index.js

@@ -0,0 +1,11 @@
+/**
+ * @bpmnkit/canvas-plugin-form-viewer — read-only Camunda Form viewer.
+ *
+ * Renders all Camunda Form component types as a static HTML preview.
+ * Built entirely in-repo — no dependency on @bpmnkit-io/form-js.
+ *
+ * @packageDocumentation
+ */
+export { FormViewer } from "./form-viewer.js";
+export { FORM_VIEWER_CSS, injectFormViewerStyles } from "./css.js";
+//# sourceMappingURL=index.js.map

package/dist/history/checkpoint.d.ts

@@ -0,0 +1,10 @@
+export interface Checkpoint {
+    id: string;
+    projectId: string;
+    fileId: string;
+    timestamp: number;
+    xml: string;
+}
+export declare function saveCheckpoint(projectId: string, fileId: string, xml: string): Promise<void>;
+export declare function listCheckpoints(projectId: string, fileId: string): Promise<Checkpoint[]>;
+//# sourceMappingURL=checkpoint.d.ts.map

package/dist/history/checkpoint.js

@@ -0,0 +1,92 @@
+const DB_NAME = "bpmnkit-ai";
+const STORE = "checkpoints";
+const MAX_TODAY = 50;
+const HISTORICAL_DAYS = 10;
+function openDb() {
+    return new Promise((resolve, reject) => {
+        const req = indexedDB.open(DB_NAME, 1);
+        req.onupgradeneeded = () => {
+            const db = req.result;
+            if (!db.objectStoreNames.contains(STORE)) {
+                const store = db.createObjectStore(STORE, { keyPath: "id" });
+                store.createIndex("byFile", ["projectId", "fileId"], { unique: false });
+                store.createIndex("byTimestamp", "timestamp", { unique: false });
+            }
+        };
+        req.onsuccess = () => resolve(req.result);
+        req.onerror = () => reject(req.error);
+    });
+}
+export async function saveCheckpoint(projectId, fileId, xml) {
+    const db = await openDb();
+    return new Promise((resolve, reject) => {
+        const tx = db.transaction(STORE, "readwrite");
+        const store = tx.objectStore(STORE);
+        const getReq = store.index("byFile").getAll(IDBKeyRange.only([projectId, fileId]));
+        getReq.onsuccess = () => {
+            const existing = getReq.result;
+            const todayStart = new Date();
+            todayStart.setHours(0, 0, 0, 0);
+            const todayMs = todayStart.getTime();
+            const cutoffMs = todayMs - HISTORICAL_DAYS * 24 * 60 * 60 * 1000;
+            // Today's checkpoints — keep MAX_TODAY - 1 (oldest pruned first)
+            const todayOnes = existing
+                .filter((cp) => cp.timestamp >= todayMs)
+                .sort((a, b) => a.timestamp - b.timestamp);
+            for (const cp of todayOnes.slice(0, Math.max(0, todayOnes.length - (MAX_TODAY - 1)))) {
+                store.delete(cp.id);
+            }
+            // Historical checkpoints — keep 1 (latest) per day, prune older than cutoff
+            const historical = existing.filter((cp) => cp.timestamp >= cutoffMs && cp.timestamp < todayMs);
+            const byDay = new Map();
+            for (const cp of historical) {
+                const d = new Date(cp.timestamp);
+                const key = `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`;
+                const arr = byDay.get(key) ?? [];
+                arr.push(cp);
+                byDay.set(key, arr);
+            }
+            for (const [, cps] of byDay) {
+                const sorted = cps.sort((a, b) => b.timestamp - a.timestamp);
+                for (const cp of sorted.slice(1))
+                    store.delete(cp.id);
+            }
+            // Delete anything beyond the historical window
+            for (const cp of existing.filter((c) => c.timestamp < cutoffMs)) {
+                store.delete(cp.id);
+            }
+            store.add({
+                id: crypto.randomUUID(),
+                projectId,
+                fileId,
+                timestamp: Date.now(),
+                xml,
+            });
+        };
+        tx.oncomplete = () => {
+            db.close();
+            resolve();
+        };
+        tx.onerror = () => {
+            db.close();
+            reject(tx.error);
+        };
+    });
+}
+export async function listCheckpoints(projectId, fileId) {
+    const db = await openDb();
+    return new Promise((resolve, reject) => {
+        const tx = db.transaction(STORE, "readonly");
+        const store = tx.objectStore(STORE);
+        const req = store.index("byFile").getAll(IDBKeyRange.only([projectId, fileId]));
+        req.onsuccess = () => {
+            db.close();
+            resolve(req.result.sort((a, b) => b.timestamp - a.timestamp));
+        };
+        req.onerror = () => {
+            db.close();
+            reject(req.error);
+        };
+    });
+}
+//# sourceMappingURL=checkpoint.js.map

package/dist/history/css.d.ts

@@ -0,0 +1,2 @@
+export declare function injectHistoryStyles(): void;
+//# sourceMappingURL=css.d.ts.map

package/dist/history/css.js

@@ -0,0 +1,130 @@
+const STYLE_ID = "bpmnkit-history-styles";
+export function injectHistoryStyles() {
+    if (document.getElementById(STYLE_ID))
+        return;
+    const style = document.createElement("style");
+    style.id = STYLE_ID;
+    style.textContent = `
+/* ── History pane ────────────────────────────────────────────────────────── */
+.bpmnkit-hist-pane {
+  display: flex; flex-direction: column; height: 100%; overflow: hidden;
+  font-family: system-ui, -apple-system, sans-serif;
+}
+.bpmnkit-hist-header {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 10px 14px 9px; flex-shrink: 0;
+  border-bottom: 1px solid rgba(255,255,255,0.08);
+}
+.bpmnkit-hist-header-title {
+  font-size: 10px; font-weight: 700; text-transform: uppercase;
+  letter-spacing: 0.08em; color: rgba(255,255,255,0.3);
+}
+.bpmnkit-hist-refresh {
+  width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
+  background: transparent; border: none; border-radius: 4px;
+  color: rgba(255,255,255,0.35); cursor: pointer; font-size: 14px; line-height: 1;
+  transition: color 0.1s, background 0.1s;
+}
+.bpmnkit-hist-refresh:hover { color: rgba(255,255,255,0.8); background: rgba(255,255,255,0.07); }
+.bpmnkit-hist-list {
+  flex: 1; overflow-y: auto; padding: 4px 0 8px;
+}
+.bpmnkit-hist-list::-webkit-scrollbar { width: 4px; }
+.bpmnkit-hist-list::-webkit-scrollbar-track { background: transparent; }
+.bpmnkit-hist-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 2px; }
+.bpmnkit-hist-group-label {
+  padding: 10px 14px 3px;
+  font-size: 10px; font-weight: 700; text-transform: uppercase;
+  letter-spacing: 0.07em; color: rgba(255,255,255,0.28);
+}
+.bpmnkit-hist-item {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 5px 14px; gap: 10px;
+  transition: background 0.1s;
+}
+.bpmnkit-hist-item:hover { background: rgba(255,255,255,0.04); }
+.bpmnkit-hist-item-time {
+  font-size: 12.5px; color: rgba(255,255,255,0.65);
+  font-variant-numeric: tabular-nums; flex: 1;
+}
+.bpmnkit-hist-restore {
+  flex-shrink: 0; font-size: 11px; padding: 3px 9px;
+  background: var(--bpmnkit-accent-subtle, rgba(107,157,247,0.15)); border: 1px solid rgba(76,142,247,0.3);
+  border-radius: 4px; color: rgba(140,185,255,0.85);
+  cursor: pointer; font-family: inherit;
+  transition: background 0.1s, border-color 0.1s, color 0.1s;
+}
+.bpmnkit-hist-restore:hover {
+  background: rgba(76,142,247,0.26); border-color: rgba(76,142,247,0.52);
+  color: rgba(180,210,255,0.95);
+}
+.bpmnkit-hist-empty {
+  padding: 32px 20px; text-align: center;
+  color: rgba(255,255,255,0.28); font-size: 12px; line-height: 1.65;
+}
+/* ── Confirm dialog ──────────────────────────────────────────────────────── */
+.bpmnkit-hist-confirm-overlay {
+  position: fixed; inset: 0; z-index: 10100;
+  background: rgba(0,0,0,0.55);
+  display: flex; align-items: center; justify-content: center;
+}
+.bpmnkit-hist-confirm-panel {
+  background: var(--bpmnkit-panel-bg, rgba(13,13,22,0.92)); border: 1px solid rgba(255,255,255,0.12);
+  border-radius: 10px; padding: 20px 22px; width: 300px;
+  box-shadow: 0 20px 60px rgba(0,0,0,0.7);
+  font-family: system-ui, -apple-system, sans-serif;
+}
+.bpmnkit-hist-confirm-title {
+  font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,0.9); margin-bottom: 7px;
+}
+.bpmnkit-hist-confirm-body {
+  font-size: 12px; color: rgba(255,255,255,0.5); line-height: 1.55; margin-bottom: 18px;
+}
+.bpmnkit-hist-confirm-actions { display: flex; justify-content: flex-end; gap: 7px; }
+.bpmnkit-hist-confirm-cancel {
+  padding: 5px 13px; background: transparent;
+  border: 1px solid rgba(255,255,255,0.14); border-radius: 6px;
+  color: rgba(255,255,255,0.55); font-size: 12px; cursor: pointer; font-family: inherit;
+  transition: background 0.1s, color 0.1s;
+}
+.bpmnkit-hist-confirm-cancel:hover { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.85); }
+.bpmnkit-hist-confirm-ok {
+  padding: 5px 13px; background: var(--bpmnkit-accent, #6b9df7);
+  border: 1px solid var(--bpmnkit-accent, #6b9df7); border-radius: 6px;
+  color: #fff; font-size: 12px; font-weight: 500; cursor: pointer; font-family: inherit;
+  transition: background 0.1s;
+}
+.bpmnkit-hist-confirm-ok:hover { background: var(--bpmnkit-accent, #6b9df7); }
+/* ── Light theme ─────────────────────────────────────────────────────────── */
+[data-bpmnkit-hud-theme="light"] .bpmnkit-hist-header { border-bottom-color: var(--bpmnkit-panel-border, rgba(0,0,0,0.08)); }
+[data-bpmnkit-hud-theme="light"] .bpmnkit-hist-header-title { color: rgba(0,0,0,0.3); }
+[data-bpmnkit-hud-theme="light"] .bpmnkit-hist-refresh { color: rgba(0,0,0,0.35); }
+[data-bpmnkit-hud-theme="light"] .bpmnkit-hist-refresh:hover { color: rgba(0,0,0,0.75); background: rgba(0,0,0,0.06); }
+[data-bpmnkit-hud-theme="light"] .bpmnkit-hist-group-label { color: rgba(0,0,0,0.3); }
+[data-bpmnkit-hud-theme="light"] .bpmnkit-hist-item:hover { background: rgba(0,0,0,0.035); }
+[data-bpmnkit-hud-theme="light"] .bpmnkit-hist-item-time { color: rgba(0,0,0,0.65); }
+[data-bpmnkit-hud-theme="light"] .bpmnkit-hist-restore {
+  background: var(--bpmnkit-accent-subtle, rgba(26,86,219,0.12)); border-color: rgba(26,86,219,0.25); color: rgba(26,86,219,0.9);
+}
+[data-bpmnkit-hud-theme="light"] .bpmnkit-hist-restore:hover {
+  background: rgba(26,86,219,0.16); border-color: rgba(26,86,219,0.45); color: rgba(26,86,219,1);
+}
+[data-bpmnkit-hud-theme="light"] .bpmnkit-hist-empty { color: rgba(0,0,0,0.3); }
+[data-bpmnkit-hud-theme="light"] .bpmnkit-hist-confirm-panel {
+  background: rgba(252,252,255,0.99); border-color: rgba(0,0,0,0.1);
+  box-shadow: 0 20px 60px rgba(0,0,0,0.18);
+}
+[data-bpmnkit-hud-theme="light"] .bpmnkit-hist-confirm-title { color: rgba(0,0,0,0.88); }
+[data-bpmnkit-hud-theme="light"] .bpmnkit-hist-confirm-body { color: rgba(0,0,0,0.5); }
+[data-bpmnkit-hud-theme="light"] .bpmnkit-hist-confirm-cancel {
+  border-color: rgba(0,0,0,0.14); color: rgba(0,0,0,0.55);
+}
+[data-bpmnkit-hud-theme="light"] .bpmnkit-hist-confirm-cancel:hover {
+  background: rgba(0,0,0,0.05); color: rgba(0,0,0,0.8);
+}
+[data-bpmnkit-hud-theme="light"] .bpmnkit-hist-confirm-ok { background: var(--bpmnkit-accent, #1a56db); border-color: var(--bpmnkit-accent, #1a56db); }
+[data-bpmnkit-hud-theme="light"] .bpmnkit-hist-confirm-ok:hover { background: #1648c2; }
+`;
+    document.head.appendChild(style);
+}
+//# sourceMappingURL=css.js.map

package/dist/history/history-panel.d.ts

@@ -0,0 +1,12 @@
+export interface HistoryPanelOptions {
+    getCurrentContext?(): {
+        projectId: string;
+        fileId: string;
+    } | null;
+    loadXml(xml: string): void;
+}
+export declare function createHistoryPanel(options: HistoryPanelOptions): {
+    el: HTMLElement;
+    refresh(): Promise<void>;
+};
+//# sourceMappingURL=history-panel.d.ts.map