@bpmnkit/operate 0.0.7 → 0.0.9

package/README.md

@@ -1,5 +1,5 @@
 <div align="center">
-  <img src="https://raw.githubusercontent.com/bpmnkit/monorepo/main/doc/logos/logo-2-gateway.svg" width="72" height="72" alt="BPMN Kit logo">
+  <a href="https://bpmnkit.com"><img src="https://bpmnkit.com/favicon.svg" width="72" height="72" alt="BPMN Kit logo"></a>
   <h1>@bpmnkit/operate</h1>
   <p>Monitoring and operations frontend for Camunda 8 clusters — real-time SSE, zero dependencies</p>
 
@@ -117,3 +117,7 @@ interface OperateApi {
 ## License
 
 [MIT](https://github.com/bpmnkit/monorepo/blob/main/LICENSE) © BPMN Kit — made by [u11g](https://u11g.com)
+
+<div align="center">
+  <a href="https://bpmnkit.com"><img src="https://bpmnkit.com/favicon.svg" width="32" height="32" alt="BPMN Kit"></a>
+</div>

package/dist/css.js

@@ -1064,6 +1064,235 @@ const OPERATE_CSS = `
 .op-kv-row { display: flex; gap: 12px; font-size: 12px; align-items: baseline; }
 .op-kv-key { color: var(--bpmnkit-fg-muted); min-width: 120px; flex-shrink: 0; font-weight: 500; }
 .op-kv-value { color: var(--bpmnkit-fg); font-family: monospace; word-break: break-all; }
+
+/* ── Search view ─────────────────────────────────────────────────────────── */
+.op-search-view {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  height: auto;
+  overflow-y: auto;
+}
+.op-search-tab-bar {
+  display: flex;
+  gap: 4px;
+  border-bottom: 1px solid var(--bpmnkit-border);
+  padding-bottom: 0;
+  margin-bottom: -8px;
+}
+.op-search-tab {
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  padding: 8px 16px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--bpmnkit-fg-muted);
+  cursor: pointer;
+  font-family: var(--bpmnkit-font);
+  transition: color 0.15s, border-color 0.15s;
+  margin-bottom: -1px;
+}
+.op-search-tab:hover { color: var(--bpmnkit-fg); }
+.op-search-tab--active {
+  color: var(--bpmnkit-fg);
+  border-bottom-color: var(--bpmnkit-accent);
+}
+.op-search-pane {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.op-search-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.op-search-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--bpmnkit-fg);
+}
+.op-search-template-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: auto;
+  flex-wrap: wrap;
+}
+.op-search-template-label {
+  font-size: 12px;
+  color: var(--bpmnkit-fg-muted);
+  white-space: nowrap;
+}
+.op-search-template-select {
+  background: var(--bpmnkit-surface-2);
+  color: var(--bpmnkit-fg);
+  border: 1px solid var(--bpmnkit-border);
+  border-radius: var(--bpmnkit-radius-sm);
+  padding: 4px 8px;
+  font-size: 12px;
+  cursor: pointer;
+  outline: none;
+  font-family: var(--bpmnkit-font);
+  max-width: 220px;
+}
+.op-search-template-select:focus { border-color: var(--bpmnkit-accent); }
+.op-search-builder {
+  background: var(--bpmnkit-surface);
+  border: 1px solid var(--bpmnkit-border);
+  border-radius: var(--bpmnkit-radius);
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.op-search-conditions {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.op-search-empty-hint {
+  font-size: 12px;
+  color: var(--bpmnkit-fg-muted);
+  font-style: italic;
+  padding: 4px 0;
+}
+.op-search-cond-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.op-search-field-select {
+  background: var(--bpmnkit-surface-2);
+  color: var(--bpmnkit-fg);
+  border: 1px solid var(--bpmnkit-border);
+  border-radius: var(--bpmnkit-radius-sm);
+  padding: 5px 8px;
+  font-size: 12px;
+  cursor: pointer;
+  outline: none;
+  font-family: var(--bpmnkit-font);
+  min-width: 200px;
+}
+.op-search-field-select:focus { border-color: var(--bpmnkit-accent); }
+.op-search-value-input {
+  flex: 1;
+  background: var(--bpmnkit-surface-2);
+  border: 1px solid var(--bpmnkit-border);
+  border-radius: var(--bpmnkit-radius-sm);
+  padding: 5px 10px;
+  font-size: 12px;
+  color: var(--bpmnkit-fg);
+  outline: none;
+  font-family: var(--bpmnkit-font);
+}
+.op-search-value-input:focus { border-color: var(--bpmnkit-accent); }
+.op-search-value-input::placeholder { color: var(--bpmnkit-fg-muted); }
+.op-search-value-select {
+  flex: 1;
+  background: var(--bpmnkit-surface-2);
+  color: var(--bpmnkit-fg);
+  border: 1px solid var(--bpmnkit-border);
+  border-radius: var(--bpmnkit-radius-sm);
+  padding: 5px 8px;
+  font-size: 12px;
+  cursor: pointer;
+  outline: none;
+  font-family: var(--bpmnkit-font);
+}
+.op-search-value-select:focus { border-color: var(--bpmnkit-accent); }
+.op-search-cond-remove {
+  background: none;
+  border: none;
+  color: var(--bpmnkit-fg-muted);
+  cursor: pointer;
+  font-size: 13px;
+  padding: 4px 6px;
+  border-radius: var(--bpmnkit-radius-sm);
+  line-height: 1;
+  flex-shrink: 0;
+}
+.op-search-cond-remove:hover { color: var(--bpmnkit-danger, #e05252); background: var(--bpmnkit-surface-2); }
+.op-search-add-btn {
+  align-self: flex-start;
+  background: none;
+  border: 1px dashed var(--bpmnkit-border);
+  border-radius: var(--bpmnkit-radius-sm);
+  padding: 5px 14px;
+  font-size: 12px;
+  color: var(--bpmnkit-fg-muted);
+  cursor: pointer;
+  font-family: var(--bpmnkit-font);
+  transition: border-color 0.15s, color 0.15s;
+}
+.op-search-add-btn:hover { border-color: var(--bpmnkit-accent); color: var(--bpmnkit-accent); }
+.op-search-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding-top: 4px;
+  border-top: 1px solid var(--bpmnkit-border);
+}
+.op-search-status {
+  font-size: 12px;
+  color: var(--bpmnkit-danger, #e05252);
+  flex: 1;
+}
+.op-search-results {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.op-search-results-heading {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--bpmnkit-fg);
+  padding-bottom: 6px;
+  border-bottom: 1px solid var(--bpmnkit-border);
+}
+.op-search-var-value {
+  font-family: var(--bpmnkit-font-mono);
+  font-size: 11px;
+  color: var(--bpmnkit-fg-muted);
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 340px;
+}
+.op-search-tab--ai { color: var(--bpmnkit-accent); }
+.op-search-tab--ai:hover { color: var(--bpmnkit-accent-bright, #3b82f6); }
+.op-search-tab--ai.op-search-tab--active { color: var(--bpmnkit-accent); border-bottom-color: var(--bpmnkit-accent); }
+.op-ai-search-row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+.op-ai-search-input {
+  flex: 1;
+  background: var(--bpmnkit-surface-2);
+  border: 1px solid var(--bpmnkit-border);
+  border-radius: var(--bpmnkit-radius-sm);
+  padding: 7px 12px;
+  font-size: 13px;
+  color: var(--bpmnkit-fg);
+  outline: none;
+  font-family: var(--bpmnkit-font);
+}
+.op-ai-search-input:focus { border-color: var(--bpmnkit-accent); }
+.op-ai-search-input::placeholder { color: var(--bpmnkit-fg-muted); }
+.op-ai-search-hint {
+  font-size: 11px;
+  color: var(--bpmnkit-fg-muted);
+}
+.op-ai-search-filter {
+  font-size: 11px;
+  color: var(--bpmnkit-fg-muted);
+  font-family: var(--bpmnkit-font-mono);
+  padding: 2px 0 6px;
+}
 `;
 export function injectOperateStyles() {
     injectStyle(OPERATE_STYLE_ID, OPERATE_CSS);

package/dist/operate.js

@@ -21,6 +21,7 @@ import { createInstancesView } from "./views/instances.js";
 import { createJobsView } from "./views/jobs.js";
 import { createMessagesView } from "./views/messages.js";
 import { createNav } from "./views/nav.js";
+import { createSearchView } from "./views/search.js";
 import { createTaskDetailView } from "./views/task-detail.js";
 import { createTasksView } from "./views/tasks.js";
 export function createOperate(options) {
@@ -28,7 +29,7 @@ export function createOperate(options) {
     injectOperateStyles();
     const { container, proxyUrl = "http://localhost:3033", pollInterval = 30_000, mock = false, } = options;
     let profile = options.profile ?? null;
-    const initialTheme = loadPersistedTheme() ?? options.theme ?? "auto";
+    const initialTheme = loadPersistedTheme() ?? options.theme ?? "neon";
     // ── Root element ──────────────────────────────────────────────────────────
     const el = document.createElement("div");
     el.className = "op-root";
@@ -110,7 +111,10 @@ export function createOperate(options) {
         content.appendChild(viewEl);
     }
     function getTheme() {
-        return el.getAttribute("data-theme") === "light" ? "light" : "dark";
+        const t = el.getAttribute("data-theme");
+        if (t === "light" || t === "neon")
+            return t;
+        return "dark";
     }
     router.on("/", () => {
         reconnectCurrent = () => {
@@ -274,6 +278,16 @@ export function createOperate(options) {
         const { el: vEl, destroy } = createMessagesView({ proxyUrl, profile, mock });
         showView(vEl, destroy);
     });
+    router.on("/search", () => {
+        reconnectCurrent = () => {
+            disconnectAll();
+        };
+        reconnectCurrent();
+        header.setTitle("Search");
+        nav.setActive("/search");
+        const { el: vEl, destroy } = createSearchView({ proxyUrl, profile, mock }, (path) => router.navigate(path));
+        showView(vEl, destroy);
+    });
     const stopRouter = router.start();
     // ── Public API ────────────────────────────────────────────────────────────
     return {

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

@@ -3,12 +3,12 @@ interface Config {
     proxyUrl: string;
     profile: string | null;
     mock: boolean;
-    theme: "light" | "dark";
+    theme: "light" | "dark" | "neon";
     navigate?: (path: string) => void;
 }
 export declare function createDecisionDetailView(definitionKey: string, store: DecisionsStore, cfg: Config, onBack: () => void): {
     el: HTMLElement;
-    setTheme(t: "light" | "dark"): void;
+    setTheme(t: "light" | "dark" | "neon"): void;
     destroy(): void;
 };
 export {};

package/dist/views/decision-detail.js

@@ -103,7 +103,10 @@ export function createDecisionDetailView(definitionKey, store, cfg, onBack) {
     function loadEditor(xml) {
         editor?.destroy();
         editorWrap.innerHTML = "";
-        editor = new DmnEditor({ container: editorWrap, theme: cfg.theme });
+        editor = new DmnEditor({
+            container: editorWrap,
+            theme: cfg.theme === "neon" ? "dark" : cfg.theme,
+        });
         editor.loadXML(xml).catch(() => { });
     }
     let xmlStarted = false;
@@ -156,7 +159,7 @@ export function createDecisionDetailView(definitionKey, store, cfg, onBack) {
     return {
         el,
         setTheme(t) {
-            editor?.setTheme(t);
+            editor?.setTheme(t === "neon" ? "dark" : t);
         },
         destroy() {
             unsub();

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

@@ -3,12 +3,12 @@ interface Config {
     proxyUrl: string;
     profile: string | null;
     mock: boolean;
-    theme: "light" | "dark";
+    theme: "light" | "dark" | "neon";
     navigate?: (path: string) => void;
 }
 export declare function createDefinitionDetailView(definitionKey: string, store: DefinitionsStore, cfg: Config, onBack: () => void): {
     el: HTMLElement;
-    setTheme(t: "light" | "dark"): void;
+    setTheme(t: "light" | "dark" | "neon"): void;
     destroy(): void;
 };
 export {};

package/dist/views/definition-detail.js

@@ -42,7 +42,7 @@ export function createDefinitionDetailView(definitionKey, store, cfg, onBack) {
     layout.appendChild(canvasWrap);
     const sidebar = document.createElement("div");
     sidebar.className = "op-detail-sidebar";
-    sidebar.dataset.bpmnHudTheme = cfg.theme;
+    sidebar.dataset.bpmnkitHudTheme = cfg.theme;
     layout.appendChild(sidebar);
     const tabBar = document.createElement("div");
     tabBar.className = "op-detail-tabs";
@@ -328,7 +328,7 @@ export function createDefinitionDetailView(definitionKey, store, cfg, onBack) {
         el,
         setTheme(t) {
             canvas?.setTheme(t);
-            sidebar.dataset.bpmnHudTheme = t;
+            sidebar.dataset.bpmnkitHudTheme = t;
         },
         destroy() {
             canvas?.destroy();

package/dist/views/header.d.ts

@@ -1,6 +1,6 @@
 import { type Theme } from "@bpmnkit/ui";
 import type { ProfileInfo } from "../types.js";
-export declare function createHeader(onProfileChange: (name: string) => void, onThemeChange: (theme: Theme, resolved: "light" | "dark") => void, initialTheme?: Theme): {
+export declare function createHeader(onProfileChange: (name: string) => void, onThemeChange: (theme: Theme, resolved: "light" | "dark" | "neon") => void, initialTheme?: Theme): {
     el: HTMLElement;
     setTitle(title: string): void;
     setProfiles(profiles: ProfileInfo[], active: string | null): void;

package/dist/views/header.js

@@ -1,5 +1,5 @@
 import { createThemeSwitcher } from "@bpmnkit/ui";
-export function createHeader(onProfileChange, onThemeChange, initialTheme = "auto") {
+export function createHeader(onProfileChange, onThemeChange, initialTheme = "neon") {
     const el = document.createElement("header");
     el.className = "op-header";
     const title = document.createElement("h1");

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

@@ -3,7 +3,7 @@ interface Config {
     proxyUrl: string;
     profile: string | null;
     mock: boolean;
-    theme: "light" | "dark";
+    theme: "light" | "dark" | "neon";
     navigate?: (path: string) => void;
 }
 export declare function createIncidentDetailView(incidentKey: string, store: IncidentsStore, cfg: Config, onBack: () => void): {

package/dist/views/incident-detail.js

@@ -64,7 +64,7 @@ export function createIncidentDetailView(incidentKey, store, cfg, onBack) {
     // Sidebar pane
     const sidebar = document.createElement("div");
     sidebar.className = "op-detail-sidebar";
-    sidebar.dataset.bpmnHudTheme = cfg.theme;
+    sidebar.dataset.bpmnkitHudTheme = cfg.theme;
     layout.appendChild(sidebar);
     // Tabs
     const tabNames = ["Details", "Properties", "AI Assist"];

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

@@ -4,12 +4,12 @@ interface Config {
     profile: string | null;
     interval: number;
     mock: boolean;
-    theme: "light" | "dark";
+    theme: "light" | "dark" | "neon";
     navigate?: (path: string) => void;
 }
 export declare function createInstanceDetailView(instanceKey: string, instancesStore: InstancesStore, cfg: Config, onBack: () => void): {
     el: HTMLElement;
-    setTheme(t: "light" | "dark"): void;
+    setTheme(t: "light" | "dark" | "neon"): void;
     destroy(): void;
 };
 export {};

package/dist/views/instance-detail.js

@@ -163,7 +163,7 @@ export function createInstanceDetailView(instanceKey, instancesStore, cfg, onBac
     // Sidebar pane
     const sidebar = document.createElement("div");
     sidebar.className = "op-detail-sidebar";
-    sidebar.dataset.bpmnHudTheme = cfg.theme;
+    sidebar.dataset.bpmnkitHudTheme = cfg.theme;
     layout.appendChild(sidebar);
     // Tabs in sidebar
     const tabs = ["Variables", "Incidents", "Properties"];
@@ -715,7 +715,7 @@ export function createInstanceDetailView(instanceKey, instancesStore, cfg, onBac
         el,
         setTheme(t) {
             canvas?.setTheme(t);
-            sidebar.dataset.bpmnHudTheme = t;
+            sidebar.dataset.bpmnkitHudTheme = t;
         },
         destroy() {
             canvas?.destroy();

package/dist/views/nav.js

@@ -8,17 +8,14 @@ const NAV_ITEMS = [
     { id: "/jobs", label: "Jobs", icon: IC_UI.jobs },
     { id: "/tasks", label: "Tasks", icon: IC_UI.tasks },
     { id: "/messages", label: "Messages", icon: IC_UI.messages },
+    { id: "/search", label: "Search", icon: IC_UI.search },
 ];
 export function createNav(onNavigate) {
     const el = document.createElement("nav");
     el.className = "op-nav";
     const logo = document.createElement("div");
     logo.className = "op-nav-logo";
-    logo.innerHTML = `<svg width="20" height="20" viewBox="0 0 100 100" aria-hidden="true">
-    <polygon points="50,8 92,50 50,92 8,50" fill="currentColor"/>
-    <line x1="50" y1="28" x2="50" y2="72" stroke="var(--bpmnkit-nav-bg)" stroke-width="12" stroke-linecap="round"/>
-    <line x1="28" y1="50" x2="72" y2="50" stroke="var(--bpmnkit-nav-bg)" stroke-width="12" stroke-linecap="round"/>
-  </svg>
+    logo.innerHTML = `<svg width="28" height="28" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path fill="#060609" d="m0 166.67c0 -92.0493 74.6207 -166.67 166.67 -166.67l666.66003 0c44.203613 0 86.5968 17.559824 117.853455 48.816513c31.256714 31.256691 48.81653 73.64986 48.81653 117.853485l0 666.66003c0 92.049255 -74.62073 166.66998 -166.66998 166.66998l-666.66003 0c-92.0493 0 -166.67 -74.62073 -166.67 -166.66998z" fill-rule="evenodd"/><path fill="#e954c2" d="m80.49353 127.48857l84.734375 0q42.71875 0 63.03125 20.578125q20.3125 20.578125 20.3125 61.828125l0 13.0625q0 26.96875 -9.1875 44.812485q-9.171875 17.828125 -29.8125 20.0625l-0.09375 -0.9375q44.234375 8.796875 44.234375 69.0625l0 28.0q0 40.8125 -21.96875 62.78125q-21.96875 21.96875 -63.25 21.96875l-88.0 0l0 -341.21875zm78.671875 132.99998q12.328125 0 17.921875 -5.7656097q5.59375 -5.78125 5.59375 -21.484375l0 -18.203125q0 -15.203125 -4.421875 -20.765625q-4.40625 -5.5625 -14.421875 -5.5625l-17.453125 0l0 71.781235l12.78125 0zm9.328125 146.98438q10.296875 0 14.8125 -4.984375q4.515625 -5.0 4.515625 -19.921875l0 -28.46875q0 -19.625 -5.703125 -26.0q-5.6875 -6.390625 -20.15625 -6.390625l-15.578125 0l0 85.765625l22.109375 0zm115.10724 -279.98438l82.875 0q41.4375 0 62.625 22.75q21.1875 22.734375 21.1875 65.265625l0 32.1875q0 42.531235 -21.1875 65.281235q-21.1875 22.734375 -62.625 22.734375l-16.984375 0l0 133.0l-65.890625 0l0 -341.21875zm82.875 146.99998q9.359375 0 13.640625 -4.75q4.28125 -4.765625 4.28125 -18.781235l0 -38.71875q0 -14.015625 -4.28125 -18.765625q-4.28125 -4.765625 -13.640625 -4.765625l-16.984375 0l0 85.781235l16.984375 0zm111.83243 -146.99998l86.859406 0l27.28125 239.99998l-0.9375 0l27.265625 -239.99998l86.875 0l0 341.21875l-63.09375 0l6.359375 -253.68748l0.921875 0.15625l-32.0 253.53123l-55.453125 0l-32.0 -253.53123l0.921875 -0.15625l6.359375 253.68748l-59.359406 0l0 -341.21875zm265.6392 0l77.328125 0l45.203125 201.62498l-0.921875 0.265625l-6.359375 -201.89061l60.296875 0l0 341.21875l-65.65625 0l-56.890625 -244.54686l0.9375 -0.265625l6.34375 244.81248l-60.28125 0l0 -341.21875z" fill-rule="nonzero"/><path fill="#ffffff" d="m270.9452 522.1202l65.890625 0l0 112.609375l53.4375 -112.609375l67.828125 0l-65.203125 127.90625l64.03125 213.3125l-68.875 0l-39.65625 -133.03125l-11.5625 23.390625l0 109.640625l-65.890625 0l0 -341.21875zm207.7738 0l65.890625 0l0 341.21875l-65.890625 0l0 -341.21875zm144.30109 61.21875l-53.671875 0l0 -61.21875l173.23438 0l0 61.21875l-53.671875 0l0 280.0l-65.890625 0l0 -280.0z" fill-rule="nonzero"/></svg>
   <span>Operate</span>`;
     el.appendChild(logo);
     const list = document.createElement("ul");

package/dist/views/search.d.ts

@@ -0,0 +1,11 @@
+interface Config {
+    proxyUrl: string;
+    profile: string | null;
+    mock: boolean;
+}
+export declare function createSearchView(cfg: Config, onNavigate: (path: string) => void): {
+    el: HTMLElement;
+    destroy(): void;
+};
+export {};
+//# sourceMappingURL=search.d.ts.map