@bpmnkit/operate 0.0.8 → 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,6 +8,7 @@ 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");

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