@bpmnkit/operate 0.0.14 → 0.0.15

package/dist/css.js

@@ -668,8 +668,13 @@ const OPERATE_CSS = `
   display: flex;
   align-items: center;
   gap: 10px;
-  margin-bottom: 14px;
-  flex-wrap: wrap;
+  height: 40px;
+  flex-shrink: 0;
+  padding: 0 12px;
+  border-bottom: 1px solid var(--bpmnkit-border);
+  background: var(--bpmnkit-surface);
+  flex-wrap: nowrap;
+  overflow: hidden;
 }
 .op-def-meta-name {
   font-weight: 600;

package/dist/index.d.ts

@@ -1,3 +1,9 @@
 export { createOperate } from "./operate.js";
+export { createDefinitionDetailView } from "./views/definition-detail.js";
+export { createInstanceDetailView } from "./views/instance-detail.js";
+export { createDecisionDetailView } from "./views/decision-detail.js";
+export { DefinitionsStore } from "./stores/definitions.js";
+export { InstancesStore } from "./stores/instances.js";
+export { DecisionsStore } from "./stores/decisions.js";
 export type { DashboardData, IncidentResult, JobSearchResult, OperateApi, OperateOptions, ProcessDefinitionResult, ProcessInstanceResult, ProfileInfo, Theme, UserTaskResult, VariableResult, } from "./types.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -1,2 +1,8 @@
 export { createOperate } from "./operate.js";
+export { createDefinitionDetailView } from "./views/definition-detail.js";
+export { createInstanceDetailView } from "./views/instance-detail.js";
+export { createDecisionDetailView } from "./views/decision-detail.js";
+export { DefinitionsStore } from "./stores/definitions.js";
+export { InstancesStore } from "./stores/instances.js";
+export { DecisionsStore } from "./stores/decisions.js";
 //# sourceMappingURL=index.js.map

package/dist/views/definition-detail.d.ts

@@ -5,7 +5,7 @@ interface Config {
     mock: boolean;
     theme: "light" | "dark" | "neon";
     navigate?: (path: string) => void;
-    onOpenInEditor?: (xml: string, name: string) => void;
+    onOpenInEditor?: (xml: string, name: string, processDefinitionId: string | undefined) => void;
 }
 export declare function createDefinitionDetailView(definitionKey: string, store: DefinitionsStore, cfg: Config, onBack: () => void): {
     el: HTMLElement;

package/dist/views/definition-detail.js

@@ -1,6 +1,7 @@
 import { BpmnCanvas } from "@bpmnkit/canvas";
 import { createConfigPanelPlugin } from "@bpmnkit/plugins/config-panel";
 import { createConfigPanelBpmnPlugin } from "@bpmnkit/plugins/config-panel-bpmn";
+import { injectOperateStyles } from "../css.js";
 import { MOCK_BPMN_XML } from "../mock-data.js";
 function parseVariables(raw) {
     const trimmed = raw.trim();
@@ -18,30 +19,20 @@ function parseVariables(raw) {
     }
 }
 export function createDefinitionDetailView(definitionKey, store, cfg, onBack) {
+    injectOperateStyles();
     const el = document.createElement("div");
     el.className = "op-view op-def-detail";
-    // Breadcrumb
-    const breadcrumb = document.createElement("div");
-    breadcrumb.className = "op-breadcrumb";
-    const backBtn = document.createElement("button");
-    backBtn.className = "op-back-btn";
-    backBtn.textContent = "← Processes";
-    backBtn.addEventListener("click", onBack);
-    breadcrumb.appendChild(backBtn);
     let _openInEditorXml = null;
     let _openInEditorName = "";
+    let _openInEditorProcessId = undefined;
     const openInEditorBtn = document.createElement("button");
     openInEditorBtn.className = "op-action-btn";
     openInEditorBtn.textContent = "Open in Editor ↗";
-    openInEditorBtn.style.marginLeft = "auto";
     openInEditorBtn.style.display = "none";
     openInEditorBtn.addEventListener("click", () => {
         if (_openInEditorXml)
-            cfg.onOpenInEditor?.(_openInEditorXml, _openInEditorName);
+            cfg.onOpenInEditor?.(_openInEditorXml, _openInEditorName, _openInEditorProcessId);
     });
-    if (cfg.onOpenInEditor)
-        breadcrumb.appendChild(openInEditorBtn);
-    el.appendChild(breadcrumb);
     // Metadata row
     const meta = document.createElement("div");
     meta.className = "op-def-meta";
@@ -149,10 +140,14 @@ export function createDefinitionDetailView(definitionKey, store, cfg, onBack) {
         key.className = "op-instance-key";
         key.textContent = def.processDefinitionKey ?? "";
         meta.appendChild(key);
+        if (cfg.onOpenInEditor) {
+            openInEditorBtn.style.marginLeft = "auto";
+            meta.appendChild(openInEditorBtn);
+        }
         const startBtn = document.createElement("button");
         startBtn.className = "op-action-btn op-action-btn--primary";
         startBtn.textContent = "▶ Start Instance";
-        startBtn.style.marginLeft = "auto";
+        startBtn.style.marginLeft = cfg.onOpenInEditor ? "" : "auto";
         startBtn.addEventListener("click", () => showStartModal(def));
         meta.appendChild(startBtn);
     }
@@ -305,9 +300,10 @@ export function createDefinitionDetailView(definitionKey, store, cfg, onBack) {
         el.appendChild(overlay);
         setTimeout(() => bizInput.focus(), 0);
     }
-    function loadCanvas(xml, name) {
+    function loadCanvas(xml, name, processDefinitionId) {
         _openInEditorXml = xml;
         _openInEditorName = name;
+        _openInEditorProcessId = processDefinitionId;
         openInEditorBtn.style.display = "";
         canvas?.destroy();
         canvasWrap.innerHTML = "";
@@ -315,6 +311,7 @@ export function createDefinitionDetailView(definitionKey, store, cfg, onBack) {
             container: canvasWrap,
             xml,
             theme: cfg.theme,
+            fit: "center",
             plugins: [bridgePlugin, configPanel, configPanelBpmn],
         });
     }
@@ -322,12 +319,13 @@ export function createDefinitionDetailView(definitionKey, store, cfg, onBack) {
         const def = getDef();
         renderMeta(def);
         const mockName = def?.name ?? def?.processDefinitionId ?? "Process";
-        loadCanvas(MOCK_BPMN_XML, mockName);
+        loadCanvas(MOCK_BPMN_XML, mockName, def?.processDefinitionId);
     }
     else {
         const def = getDef();
         renderMeta(def);
         const defName = def?.name ?? def?.processDefinitionId ?? "Process";
+        const defProcessId = def?.processDefinitionId;
         fetch(`${cfg.proxyUrl}/api/process-definitions/${definitionKey}/xml`, {
             headers: {
                 accept: "text/xml",
@@ -335,7 +333,7 @@ export function createDefinitionDetailView(definitionKey, store, cfg, onBack) {
             },
         })
             .then((r) => r.text())
-            .then((xml) => loadCanvas(xml, defName))
+            .then((xml) => loadCanvas(xml, defName, defProcessId))
             .catch(() => {
             canvasWrap.innerHTML = `<div style="padding:24px;color:var(--bpmnkit-fg-muted)">Failed to load diagram</div>`;
         });
@@ -352,6 +350,7 @@ export function createDefinitionDetailView(definitionKey, store, cfg, onBack) {
         destroy() {
             canvas?.destroy();
             defUnsub();
+            el.remove();
         },
     };
 }

package/dist/views/instance-detail.js

@@ -3,6 +3,7 @@ import { createConfigPanelPlugin } from "@bpmnkit/plugins/config-panel";
 import { createConfigPanelBpmnPlugin } from "@bpmnkit/plugins/config-panel-bpmn";
 import { createTokenHighlightPlugin } from "@bpmnkit/plugins/token-highlight";
 import { badge } from "../components/badge.js";
+import { injectOperateStyles } from "../css.js";
 import { MOCK_ACTIVE_ELEMENTS, MOCK_BPMN_XML, MOCK_VARIABLES, MOCK_VISITED_ELEMENTS, } from "../mock-data.js";
 import { IncidentsStore } from "../stores/incidents.js";
 function relTime(iso) {
@@ -129,6 +130,7 @@ function highlightTextNodes(container, query) {
     }
 }
 export function createInstanceDetailView(instanceKey, instancesStore, cfg, onBack) {
+    injectOperateStyles();
     const el = document.createElement("div");
     el.className = "op-view op-instance-detail";
     // Breadcrumb

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bpmnkit/operate",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "description": "Monitoring and operations frontend for Camunda 8 clusters — real-time SSE, zero dependencies",
   "type": "module",
   "main": "./dist/index.js",
@@ -21,7 +21,7 @@
     "@bpmnkit/api": "0.0.13",
     "@bpmnkit/canvas": "0.0.15",
     "@bpmnkit/core": "0.0.15",
-    "@bpmnkit/plugins": "0.0.17",
+    "@bpmnkit/plugins": "0.0.18",
     "@bpmnkit/ui": "0.0.9"
   },
   "keywords": [