@bpmnkit/plugins 0.0.14 → 0.0.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -0
- package/dist/ai-bridge/css.js +77 -0
- package/dist/command-palette/css.d.ts +1 -1
- package/dist/command-palette/css.js +38 -0
- package/dist/command-palette/index.js +2 -2
- package/dist/connector-catalog/index.d.ts +3 -2
- package/dist/connector-catalog/index.js +40 -4
- package/dist/deploy/css.d.ts +4 -0
- package/dist/deploy/css.js +150 -0
- package/dist/deploy/index.d.ts +25 -0
- package/dist/deploy/index.js +412 -0
- package/dist/element-docs/index.js +54 -0
- package/package.json +11 -7
package/README.md
CHANGED
|
@@ -151,6 +151,9 @@ const ai = createAiBridgePlugin({
|
|
|
151
151
|
| [`@bpmnkit/connector-gen`](https://www.npmjs.com/package/@bpmnkit/connector-gen) | Generate connector templates from OpenAPI specs |
|
|
152
152
|
| [`@bpmnkit/cli`](https://www.npmjs.com/package/@bpmnkit/cli) | Camunda 8 command-line interface (casen) |
|
|
153
153
|
| [`@bpmnkit/proxy`](https://www.npmjs.com/package/@bpmnkit/proxy) | Local AI bridge and Camunda API proxy server |
|
|
154
|
+
| [`@bpmnkit/cli-sdk`](https://www.npmjs.com/package/@bpmnkit/cli-sdk) | Plugin authoring SDK for the casen CLI |
|
|
155
|
+
| [`@bpmnkit/create-casen-plugin`](https://www.npmjs.com/package/@bpmnkit/create-casen-plugin) | Scaffold a new casen CLI plugin in seconds |
|
|
156
|
+
| [`@bpmnkit/casen-report`](https://www.npmjs.com/package/@bpmnkit/casen-report) | HTML reports from Camunda 8 incident and SLA data |
|
|
154
157
|
|
|
155
158
|
## License
|
|
156
159
|
|
package/dist/ai-bridge/css.js
CHANGED
|
@@ -360,6 +360,83 @@ export function injectAiBridgeStyles() {
|
|
|
360
360
|
border-color: rgba(0,80,200,0.25); background: rgba(0,80,200,0.07); color: rgba(0,60,180,0.85);
|
|
361
361
|
}
|
|
362
362
|
[data-bpmnkit-hud-theme="light"] .ai-companion-create:hover:not(:disabled) { background: rgba(0,80,200,0.13); }
|
|
363
|
+
/* ── Neon theme ── */
|
|
364
|
+
[data-bpmnkit-hud-theme="neon"] .ai-panel {
|
|
365
|
+
background: oklch(5% 0.025 270 / 0.97);
|
|
366
|
+
border-left-color: oklch(65% 0.28 280 / 0.18);
|
|
367
|
+
box-shadow: -8px 0 32px oklch(0% 0 0 / 0.6);
|
|
368
|
+
}
|
|
369
|
+
[data-bpmnkit-hud-theme="neon"] .ai-panel-header { border-bottom-color: oklch(65% 0.28 280 / 0.12); }
|
|
370
|
+
[data-bpmnkit-hud-theme="neon"] .ai-panel-status { border-bottom-color: oklch(65% 0.28 280 / 0.08); }
|
|
371
|
+
[data-bpmnkit-hud-theme="neon"] .ai-msg-user {
|
|
372
|
+
background: oklch(65% 0.28 280 / 0.18);
|
|
373
|
+
border-color: oklch(65% 0.28 280 / 0.3);
|
|
374
|
+
}
|
|
375
|
+
[data-bpmnkit-hud-theme="neon"] .ai-msg-ai {
|
|
376
|
+
background: oklch(65% 0.28 280 / 0.05);
|
|
377
|
+
border-color: oklch(65% 0.28 280 / 0.1);
|
|
378
|
+
}
|
|
379
|
+
[data-bpmnkit-hud-theme="neon"] .ai-msg-copy { border-color: oklch(65% 0.28 280 / 0.15); }
|
|
380
|
+
[data-bpmnkit-hud-theme="neon"] .ai-msg-copy:hover { border-color: oklch(65% 0.28 280 / 0.35); }
|
|
381
|
+
[data-bpmnkit-hud-theme="neon"] .ai-msg-preview { border-color: oklch(65% 0.28 280 / 0.12); }
|
|
382
|
+
[data-bpmnkit-hud-theme="neon"] .ai-welcome-example {
|
|
383
|
+
background: oklch(65% 0.28 280 / 0.04); border-color: oklch(65% 0.28 280 / 0.1);
|
|
384
|
+
}
|
|
385
|
+
[data-bpmnkit-hud-theme="neon"] .ai-welcome-example:hover {
|
|
386
|
+
background: oklch(65% 0.28 280 / 0.1); color: oklch(88% 0.02 270);
|
|
387
|
+
}
|
|
388
|
+
[data-bpmnkit-hud-theme="neon"] .ai-quick-actions { border-top-color: oklch(65% 0.28 280 / 0.08); }
|
|
389
|
+
[data-bpmnkit-hud-theme="neon"] .ai-quick-btn {
|
|
390
|
+
background: oklch(65% 0.28 280 / 0.06); border-color: oklch(65% 0.28 280 / 0.14);
|
|
391
|
+
color: oklch(65% 0.1 280);
|
|
392
|
+
}
|
|
393
|
+
[data-bpmnkit-hud-theme="neon"] .ai-quick-btn:hover:not(:disabled) {
|
|
394
|
+
background: oklch(65% 0.28 280 / 0.13); color: oklch(88% 0.02 270);
|
|
395
|
+
}
|
|
396
|
+
[data-bpmnkit-hud-theme="neon"] .ai-context-refs { border-top-color: oklch(65% 0.28 280 / 0.08); }
|
|
397
|
+
[data-bpmnkit-hud-theme="neon"] .ai-context-badge {
|
|
398
|
+
background: oklch(65% 0.28 280 / 0.12); border-color: oklch(65% 0.28 280 / 0.28);
|
|
399
|
+
color: oklch(75% 0.16 280);
|
|
400
|
+
}
|
|
401
|
+
[data-bpmnkit-hud-theme="neon"] .ai-context-badge__remove { color: oklch(65% 0.1 280 / 0.55); }
|
|
402
|
+
[data-bpmnkit-hud-theme="neon"] .ai-context-badge__remove:hover { color: oklch(88% 0.02 270); }
|
|
403
|
+
[data-bpmnkit-hud-theme="neon"] .ai-msg-context-chip {
|
|
404
|
+
background: oklch(65% 0.28 280 / 0.12); border-color: oklch(65% 0.28 280 / 0.25);
|
|
405
|
+
color: oklch(75% 0.16 280);
|
|
406
|
+
}
|
|
407
|
+
[data-bpmnkit-hud-theme="neon"] .ai-input-area { border-top-color: oklch(65% 0.28 280 / 0.1); }
|
|
408
|
+
[data-bpmnkit-hud-theme="neon"] .ai-textarea {
|
|
409
|
+
background: oklch(65% 0.28 280 / 0.05); border-color: oklch(65% 0.28 280 / 0.15);
|
|
410
|
+
}
|
|
411
|
+
[data-bpmnkit-hud-theme="neon"] .ai-textarea:focus { border-color: oklch(65% 0.28 280 / 0.45); }
|
|
412
|
+
[data-bpmnkit-hud-theme="neon"] .ai-send-btn {
|
|
413
|
+
background: oklch(65% 0.28 280 / 0.45); border-color: oklch(65% 0.28 280 / 0.65);
|
|
414
|
+
}
|
|
415
|
+
[data-bpmnkit-hud-theme="neon"] .ai-send-btn:hover:not(:disabled) { background: oklch(65% 0.28 280 / 0.6); }
|
|
416
|
+
[data-bpmnkit-hud-theme="neon"] .ai-hdr-btn {
|
|
417
|
+
background: oklch(65% 0.28 280 / 0.06); border-color: oklch(65% 0.28 280 / 0.12);
|
|
418
|
+
color: oklch(65% 0.1 280);
|
|
419
|
+
}
|
|
420
|
+
[data-bpmnkit-hud-theme="neon"] .ai-hdr-btn:hover { color: oklch(88% 0.02 270); }
|
|
421
|
+
[data-bpmnkit-hud-theme="neon"] .ai-backend-select {
|
|
422
|
+
background: oklch(65% 0.28 280 / 0.06); border-color: oklch(65% 0.28 280 / 0.12);
|
|
423
|
+
color: oklch(65% 0.1 280);
|
|
424
|
+
}
|
|
425
|
+
[data-bpmnkit-hud-theme="neon"] .ai-backend-select:hover { background: oklch(65% 0.28 280 / 0.12); }
|
|
426
|
+
[data-bpmnkit-hud-theme="neon"] .ai-hist-panel {
|
|
427
|
+
background: oklch(5% 0.025 270 / 0.97); border-color: oklch(65% 0.28 280 / 0.15);
|
|
428
|
+
}
|
|
429
|
+
[data-bpmnkit-hud-theme="neon"] .ai-hist-header { border-bottom-color: oklch(65% 0.28 280 / 0.1); }
|
|
430
|
+
[data-bpmnkit-hud-theme="neon"] .ai-hist-item { border-bottom-color: oklch(65% 0.28 280 / 0.07); }
|
|
431
|
+
[data-bpmnkit-hud-theme="neon"] .ai-hist-item:hover { background: oklch(65% 0.28 280 / 0.05); }
|
|
432
|
+
[data-bpmnkit-hud-theme="neon"] .ai-companion-offer {
|
|
433
|
+
background: oklch(65% 0.28 280 / 0.05); border-color: oklch(65% 0.28 280 / 0.15);
|
|
434
|
+
}
|
|
435
|
+
[data-bpmnkit-hud-theme="neon"] .ai-companion-create {
|
|
436
|
+
border-color: oklch(65% 0.28 280 / 0.25); background: oklch(65% 0.28 280 / 0.1);
|
|
437
|
+
color: oklch(75% 0.16 280);
|
|
438
|
+
}
|
|
439
|
+
[data-bpmnkit-hud-theme="neon"] .ai-companion-create:hover:not(:disabled) { background: oklch(65% 0.28 280 / 0.2); }
|
|
363
440
|
`;
|
|
364
441
|
document.head.appendChild(style);
|
|
365
442
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
export declare const COMMAND_PALETTE_STYLE_ID = "bpmnkit-command-palette-styles-v1";
|
|
2
|
-
export declare const COMMAND_PALETTE_CSS = "\n/* \u2500\u2500 Overlay backdrop \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-palette-overlay {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.45);\n backdrop-filter: blur(3px);\n z-index: 9999;\n display: flex;\n align-items: flex-start;\n justify-content: center;\n padding-top: 15vh;\n font-family: system-ui, -apple-system, sans-serif;\n}\n\n/* \u2500\u2500 Panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-palette-panel {\n width: min(560px, calc(100vw - 32px));\n background: var(--bpmnkit-panel-bg, rgba(13,13,22,0.92));\n border: 1px solid var(--bpmnkit-panel-border, rgba(255,255,255,0.08));\n border-radius: 12px;\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);\n overflow: hidden;\n display: flex;\n flex-direction: column;\n}\n\n/* \u2500\u2500 Search row \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-palette-search {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 0 16px;\n border-bottom: 1px solid rgba(255, 255, 255, 0.08);\n flex-shrink: 0;\n}\n.bpmnkit-palette-search-icon {\n display: flex;\n align-items: center;\n width: 16px;\n height: 16px;\n flex-shrink: 0;\n color: rgba(255, 255, 255, 0.35);\n pointer-events: none;\n}\n.bpmnkit-palette-search-icon svg { width: 16px; height: 16px; }\n.bpmnkit-palette-input {\n flex: 1;\n height: 48px;\n background: transparent;\n border: none;\n outline: none;\n color: rgba(255, 255, 255, 0.9);\n font-size: 14px;\n caret-color: var(--bpmnkit-accent, #6b9df7);\n}\n.bpmnkit-palette-input::placeholder { color: rgba(255, 255, 255, 0.3); }\n\n/* \u2500\u2500 Keyboard hint \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-palette-kbd {\n display: flex;\n align-items: center;\n gap: 3px;\n flex-shrink: 0;\n}\n.bpmnkit-palette-kbd kbd {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 2px 5px;\n background: rgba(255, 255, 255, 0.07);\n border: 1px solid rgba(255, 255, 255, 0.12);\n border-radius: 4px;\n font-family: system-ui, sans-serif;\n font-size: 11px;\n color: rgba(255, 255, 255, 0.4);\n line-height: 1;\n}\n\n/* \u2500\u2500 Commands list \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-palette-list {\n max-height: 360px;\n overflow-y: auto;\n padding: 4px;\n}\n.bpmnkit-palette-empty {\n padding: 20px 16px;\n text-align: center;\n color: rgba(255, 255, 255, 0.3);\n font-size: 13px;\n}\n.bpmnkit-palette-item {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 9px 12px;\n border-radius: 7px;\n cursor: pointer;\n color: rgba(255, 255, 255, 0.75);\n font-size: 13px;\n user-select: none;\n}\n.bpmnkit-palette-item:hover,\n.bpmnkit-palette-item.bpmnkit-palette-focused {\n background: rgba(255, 255, 255, 0.08);\n color: rgba(255, 255, 255, 0.95);\n}\n.bpmnkit-palette-item-title { flex: 1; }\n.bpmnkit-palette-item-desc {\n font-size: 11px;\n color: rgba(255, 255, 255, 0.35);\n}\n\n/* \u2500\u2500 Light theme overrides \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-palette--light .bpmnkit-palette-panel {\n background: rgba(250, 250, 252, 0.98);\n border-color: var(--bpmnkit-panel-border, rgba(0, 0, 0, 0.08));\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);\n}\n.bpmnkit-palette--light .bpmnkit-palette-search {\n border-bottom-color: var(--bpmnkit-panel-border, rgba(0, 0, 0, 0.08));\n}\n.bpmnkit-palette--light .bpmnkit-palette-search-icon { color: rgba(0, 0, 0, 0.35); }\n.bpmnkit-palette--light .bpmnkit-palette-input { color: rgba(0, 0, 0, 0.9); caret-color: var(--bpmnkit-accent, #1a56db); }\n.bpmnkit-palette--light .bpmnkit-palette-input::placeholder { color: rgba(0, 0, 0, 0.3); }\n.bpmnkit-palette--light .bpmnkit-palette-kbd kbd {\n background: rgba(0, 0, 0, 0.05);\n border-color: rgba(0, 0, 0, 0.12);\n color: rgba(0, 0, 0, 0.4);\n}\n.bpmnkit-palette--light .bpmnkit-palette-empty { color: rgba(0, 0, 0, 0.3); }\n.bpmnkit-palette--light .bpmnkit-palette-item { color: rgba(0, 0, 0, 0.75); }\n.bpmnkit-palette--light .bpmnkit-palette-item:hover,\n.bpmnkit-palette--light .bpmnkit-palette-item.bpmnkit-palette-focused {\n background: rgba(0, 0, 0, 0.06);\n color: rgba(0, 0, 0, 0.95);\n}\n.bpmnkit-palette--light .bpmnkit-palette-item-desc { color: rgba(0, 0, 0, 0.4); }\n\n/* \u2500\u2500 Section labels \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-palette-section {\n padding: 6px 12px 3px;\n font-size: 10px;\n font-weight: 600;\n letter-spacing: 0.06em;\n text-transform: uppercase;\n color: rgba(255, 255, 255, 0.28);\n user-select: none;\n}\n\n/* \u2500\u2500 Item leading icon (doc / ai) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-palette-item-icon {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n width: 14px;\n height: 14px;\n opacity: 0.55;\n}\n.bpmnkit-palette-item-icon svg { width: 14px; height: 14px; }\n\n/* \u2500\u2500 Doc items \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-palette-item--doc .bpmnkit-palette-item-title {\n color: var(--bpmnkit-accent-bright, #89b4fa);\n}\n.bpmnkit-palette-item--doc:hover .bpmnkit-palette-item-icon,\n.bpmnkit-palette-item--doc.bpmnkit-palette-focused .bpmnkit-palette-item-icon {\n opacity: 0.85;\n}\n\n/* \u2500\u2500 AI item \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-palette-item--ai .bpmnkit-palette-item-icon {\n color: var(--bpmnkit-accent, #6b9df7);\n opacity: 0.8;\n}\n.bpmnkit-palette-item--ai .bpmnkit-palette-item-title {\n color: var(--bpmnkit-accent, #6b9df7);\n font-style: italic;\n}\n.bpmnkit-palette-item--ai:not(.bpmnkit-palette-item--disabled):hover .bpmnkit-palette-item-icon,\n.bpmnkit-palette-item--ai:not(.bpmnkit-palette-item--disabled).bpmnkit-palette-focused .bpmnkit-palette-item-icon {\n opacity: 1;\n}\n\n/* \u2500\u2500 Disabled items \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-palette-item--disabled {\n opacity: 0.45;\n cursor: default;\n}\n.bpmnkit-palette-item--disabled:hover,\n.bpmnkit-palette-item--disabled.bpmnkit-palette-focused {\n background: rgba(255, 255, 255, 0.04);\n}\n\n/* \u2500\u2500 Light overrides for new additions \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-palette--light .bpmnkit-palette-section { color: rgba(0, 0, 0, 0.3); }\n.bpmnkit-palette--light .bpmnkit-palette-item--doc .bpmnkit-palette-item-title {\n color: var(--bpmnkit-accent-bright, #3b82f6);\n}\n.bpmnkit-palette--light .bpmnkit-palette-item--ai .bpmnkit-palette-item-icon,\n.bpmnkit-palette--light .bpmnkit-palette-item--ai .bpmnkit-palette-item-title {\n color: var(--bpmnkit-accent, #1a56db);\n}\n.bpmnkit-palette--light .bpmnkit-palette-item--disabled:hover,\n.bpmnkit-palette--light .bpmnkit-palette-item--disabled.bpmnkit-palette-focused {\n background: rgba(0, 0, 0, 0.03);\n}\n\n/* \u2500\u2500 Zen mode: hide internal canvas controls \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-zen-mode .bpmnkit-zoom-controls,\n.bpmnkit-zen-mode .bpmnkit-main-menu-panel {\n display: none !important;\n}\n";
|
|
2
|
+
export declare const COMMAND_PALETTE_CSS = "\n/* \u2500\u2500 Overlay backdrop \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-palette-overlay {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.45);\n backdrop-filter: blur(3px);\n z-index: 9999;\n display: flex;\n align-items: flex-start;\n justify-content: center;\n padding-top: 15vh;\n font-family: system-ui, -apple-system, sans-serif;\n}\n\n/* \u2500\u2500 Panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-palette-panel {\n width: min(560px, calc(100vw - 32px));\n background: var(--bpmnkit-panel-bg, rgba(13,13,22,0.92));\n border: 1px solid var(--bpmnkit-panel-border, rgba(255,255,255,0.08));\n border-radius: 12px;\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);\n overflow: hidden;\n display: flex;\n flex-direction: column;\n}\n\n/* \u2500\u2500 Search row \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-palette-search {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 0 16px;\n border-bottom: 1px solid rgba(255, 255, 255, 0.08);\n flex-shrink: 0;\n}\n.bpmnkit-palette-search-icon {\n display: flex;\n align-items: center;\n width: 16px;\n height: 16px;\n flex-shrink: 0;\n color: rgba(255, 255, 255, 0.35);\n pointer-events: none;\n}\n.bpmnkit-palette-search-icon svg { width: 16px; height: 16px; }\n.bpmnkit-palette-input {\n flex: 1;\n height: 48px;\n background: transparent;\n border: none;\n outline: none;\n color: rgba(255, 255, 255, 0.9);\n font-size: 14px;\n caret-color: var(--bpmnkit-accent, #6b9df7);\n}\n.bpmnkit-palette-input::placeholder { color: rgba(255, 255, 255, 0.3); }\n\n/* \u2500\u2500 Keyboard hint \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-palette-kbd {\n display: flex;\n align-items: center;\n gap: 3px;\n flex-shrink: 0;\n}\n.bpmnkit-palette-kbd kbd {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 2px 5px;\n background: rgba(255, 255, 255, 0.07);\n border: 1px solid rgba(255, 255, 255, 0.12);\n border-radius: 4px;\n font-family: system-ui, sans-serif;\n font-size: 11px;\n color: rgba(255, 255, 255, 0.4);\n line-height: 1;\n}\n\n/* \u2500\u2500 Commands list \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-palette-list {\n max-height: 360px;\n overflow-y: auto;\n padding: 4px;\n}\n.bpmnkit-palette-empty {\n padding: 20px 16px;\n text-align: center;\n color: rgba(255, 255, 255, 0.3);\n font-size: 13px;\n}\n.bpmnkit-palette-item {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 9px 12px;\n border-radius: 7px;\n cursor: pointer;\n color: rgba(255, 255, 255, 0.75);\n font-size: 13px;\n user-select: none;\n}\n.bpmnkit-palette-item:hover,\n.bpmnkit-palette-item.bpmnkit-palette-focused {\n background: rgba(255, 255, 255, 0.08);\n color: rgba(255, 255, 255, 0.95);\n}\n.bpmnkit-palette-item-title { flex: 1; }\n.bpmnkit-palette-item-desc {\n font-size: 11px;\n color: rgba(255, 255, 255, 0.35);\n}\n\n/* \u2500\u2500 Light theme overrides \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-palette--light .bpmnkit-palette-panel {\n background: rgba(250, 250, 252, 0.98);\n border-color: var(--bpmnkit-panel-border, rgba(0, 0, 0, 0.08));\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);\n}\n.bpmnkit-palette--light .bpmnkit-palette-search {\n border-bottom-color: var(--bpmnkit-panel-border, rgba(0, 0, 0, 0.08));\n}\n.bpmnkit-palette--light .bpmnkit-palette-search-icon { color: rgba(0, 0, 0, 0.35); }\n.bpmnkit-palette--light .bpmnkit-palette-input { color: rgba(0, 0, 0, 0.9); caret-color: var(--bpmnkit-accent, #1a56db); }\n.bpmnkit-palette--light .bpmnkit-palette-input::placeholder { color: rgba(0, 0, 0, 0.3); }\n.bpmnkit-palette--light .bpmnkit-palette-kbd kbd {\n background: rgba(0, 0, 0, 0.05);\n border-color: rgba(0, 0, 0, 0.12);\n color: rgba(0, 0, 0, 0.4);\n}\n.bpmnkit-palette--light .bpmnkit-palette-empty { color: rgba(0, 0, 0, 0.3); }\n.bpmnkit-palette--light .bpmnkit-palette-item { color: rgba(0, 0, 0, 0.75); }\n.bpmnkit-palette--light .bpmnkit-palette-item:hover,\n.bpmnkit-palette--light .bpmnkit-palette-item.bpmnkit-palette-focused {\n background: rgba(0, 0, 0, 0.06);\n color: rgba(0, 0, 0, 0.95);\n}\n.bpmnkit-palette--light .bpmnkit-palette-item-desc { color: rgba(0, 0, 0, 0.4); }\n\n/* \u2500\u2500 Section labels \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-palette-section {\n padding: 6px 12px 3px;\n font-size: 10px;\n font-weight: 600;\n letter-spacing: 0.06em;\n text-transform: uppercase;\n color: rgba(255, 255, 255, 0.28);\n user-select: none;\n}\n\n/* \u2500\u2500 Item leading icon (doc / ai) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-palette-item-icon {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n width: 14px;\n height: 14px;\n opacity: 0.55;\n}\n.bpmnkit-palette-item-icon svg { width: 14px; height: 14px; }\n\n/* \u2500\u2500 Doc items \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-palette-item--doc .bpmnkit-palette-item-title {\n color: var(--bpmnkit-accent-bright, #89b4fa);\n}\n.bpmnkit-palette-item--doc:hover .bpmnkit-palette-item-icon,\n.bpmnkit-palette-item--doc.bpmnkit-palette-focused .bpmnkit-palette-item-icon {\n opacity: 0.85;\n}\n\n/* \u2500\u2500 AI item \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-palette-item--ai .bpmnkit-palette-item-icon {\n color: var(--bpmnkit-accent, #6b9df7);\n opacity: 0.8;\n}\n.bpmnkit-palette-item--ai .bpmnkit-palette-item-title {\n color: var(--bpmnkit-accent, #6b9df7);\n font-style: italic;\n}\n.bpmnkit-palette-item--ai:not(.bpmnkit-palette-item--disabled):hover .bpmnkit-palette-item-icon,\n.bpmnkit-palette-item--ai:not(.bpmnkit-palette-item--disabled).bpmnkit-palette-focused .bpmnkit-palette-item-icon {\n opacity: 1;\n}\n\n/* \u2500\u2500 Disabled items \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-palette-item--disabled {\n opacity: 0.45;\n cursor: default;\n}\n.bpmnkit-palette-item--disabled:hover,\n.bpmnkit-palette-item--disabled.bpmnkit-palette-focused {\n background: rgba(255, 255, 255, 0.04);\n}\n\n/* \u2500\u2500 Light overrides for new additions \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-palette--light .bpmnkit-palette-section { color: rgba(0, 0, 0, 0.3); }\n.bpmnkit-palette--light .bpmnkit-palette-item--doc .bpmnkit-palette-item-title {\n color: var(--bpmnkit-accent-bright, #3b82f6);\n}\n.bpmnkit-palette--light .bpmnkit-palette-item--ai .bpmnkit-palette-item-icon,\n.bpmnkit-palette--light .bpmnkit-palette-item--ai .bpmnkit-palette-item-title {\n color: var(--bpmnkit-accent, #1a56db);\n}\n.bpmnkit-palette--light .bpmnkit-palette-item--disabled:hover,\n.bpmnkit-palette--light .bpmnkit-palette-item--disabled.bpmnkit-palette-focused {\n background: rgba(0, 0, 0, 0.03);\n}\n\n/* \u2500\u2500 Neon theme overrides \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-palette-panel {\n background: oklch(8% 0.03 270 / 0.96);\n border-color: oklch(65% 0.28 280 / 0.2);\n box-shadow: 0 20px 60px oklch(0% 0 0 / 0.7), 0 0 0 1px oklch(65% 0.28 280 / 0.15);\n}\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-palette-search {\n border-bottom-color: oklch(65% 0.28 280 / 0.15);\n}\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-palette-search-icon { color: oklch(50% 0.06 280); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-palette-input { color: oklch(73% 0.16 280); caret-color: oklch(72% 0.18 185); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-palette-input::placeholder { color: oklch(40% 0.06 280); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-palette-kbd kbd {\n background: oklch(65% 0.28 280 / 0.08);\n border-color: oklch(65% 0.28 280 / 0.2);\n color: oklch(50% 0.06 280);\n}\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-palette-empty { color: oklch(40% 0.06 280); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-palette-section { color: oklch(45% 0.08 280); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-palette-item { color: oklch(73% 0.16 280); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-palette-item:hover,\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-palette-item.bpmnkit-palette-focused {\n background: oklch(65% 0.28 280 / 0.1);\n color: oklch(85% 0.12 280);\n}\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-palette-item-desc { color: oklch(45% 0.08 280); }\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-palette-item--doc .bpmnkit-palette-item-title {\n color: oklch(72% 0.18 185);\n}\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-palette-item--ai .bpmnkit-palette-item-icon,\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-palette-item--ai .bpmnkit-palette-item-title {\n color: oklch(72% 0.18 185);\n}\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-palette-item--disabled:hover,\n[data-bpmnkit-hud-theme=\"neon\"] .bpmnkit-palette-item--disabled.bpmnkit-palette-focused {\n background: oklch(65% 0.28 280 / 0.04);\n}\n\n/* \u2500\u2500 Zen mode: hide internal canvas controls \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.bpmnkit-zen-mode .bpmnkit-zoom-controls,\n.bpmnkit-zen-mode .bpmnkit-main-menu-panel {\n display: none !important;\n}\n";
|
|
3
3
|
export declare function injectCommandPaletteStyles(): void;
|
|
4
4
|
//# sourceMappingURL=css.d.ts.map
|
|
@@ -207,6 +207,44 @@ export const COMMAND_PALETTE_CSS = `
|
|
|
207
207
|
background: rgba(0, 0, 0, 0.03);
|
|
208
208
|
}
|
|
209
209
|
|
|
210
|
+
/* ── Neon theme overrides ─────────────────────────────────────────────────── */
|
|
211
|
+
[data-bpmnkit-hud-theme="neon"] .bpmnkit-palette-panel {
|
|
212
|
+
background: oklch(8% 0.03 270 / 0.96);
|
|
213
|
+
border-color: oklch(65% 0.28 280 / 0.2);
|
|
214
|
+
box-shadow: 0 20px 60px oklch(0% 0 0 / 0.7), 0 0 0 1px oklch(65% 0.28 280 / 0.15);
|
|
215
|
+
}
|
|
216
|
+
[data-bpmnkit-hud-theme="neon"] .bpmnkit-palette-search {
|
|
217
|
+
border-bottom-color: oklch(65% 0.28 280 / 0.15);
|
|
218
|
+
}
|
|
219
|
+
[data-bpmnkit-hud-theme="neon"] .bpmnkit-palette-search-icon { color: oklch(50% 0.06 280); }
|
|
220
|
+
[data-bpmnkit-hud-theme="neon"] .bpmnkit-palette-input { color: oklch(73% 0.16 280); caret-color: oklch(72% 0.18 185); }
|
|
221
|
+
[data-bpmnkit-hud-theme="neon"] .bpmnkit-palette-input::placeholder { color: oklch(40% 0.06 280); }
|
|
222
|
+
[data-bpmnkit-hud-theme="neon"] .bpmnkit-palette-kbd kbd {
|
|
223
|
+
background: oklch(65% 0.28 280 / 0.08);
|
|
224
|
+
border-color: oklch(65% 0.28 280 / 0.2);
|
|
225
|
+
color: oklch(50% 0.06 280);
|
|
226
|
+
}
|
|
227
|
+
[data-bpmnkit-hud-theme="neon"] .bpmnkit-palette-empty { color: oklch(40% 0.06 280); }
|
|
228
|
+
[data-bpmnkit-hud-theme="neon"] .bpmnkit-palette-section { color: oklch(45% 0.08 280); }
|
|
229
|
+
[data-bpmnkit-hud-theme="neon"] .bpmnkit-palette-item { color: oklch(73% 0.16 280); }
|
|
230
|
+
[data-bpmnkit-hud-theme="neon"] .bpmnkit-palette-item:hover,
|
|
231
|
+
[data-bpmnkit-hud-theme="neon"] .bpmnkit-palette-item.bpmnkit-palette-focused {
|
|
232
|
+
background: oklch(65% 0.28 280 / 0.1);
|
|
233
|
+
color: oklch(85% 0.12 280);
|
|
234
|
+
}
|
|
235
|
+
[data-bpmnkit-hud-theme="neon"] .bpmnkit-palette-item-desc { color: oklch(45% 0.08 280); }
|
|
236
|
+
[data-bpmnkit-hud-theme="neon"] .bpmnkit-palette-item--doc .bpmnkit-palette-item-title {
|
|
237
|
+
color: oklch(72% 0.18 185);
|
|
238
|
+
}
|
|
239
|
+
[data-bpmnkit-hud-theme="neon"] .bpmnkit-palette-item--ai .bpmnkit-palette-item-icon,
|
|
240
|
+
[data-bpmnkit-hud-theme="neon"] .bpmnkit-palette-item--ai .bpmnkit-palette-item-title {
|
|
241
|
+
color: oklch(72% 0.18 185);
|
|
242
|
+
}
|
|
243
|
+
[data-bpmnkit-hud-theme="neon"] .bpmnkit-palette-item--disabled:hover,
|
|
244
|
+
[data-bpmnkit-hud-theme="neon"] .bpmnkit-palette-item--disabled.bpmnkit-palette-focused {
|
|
245
|
+
background: oklch(65% 0.28 280 / 0.04);
|
|
246
|
+
}
|
|
247
|
+
|
|
210
248
|
/* ── Zen mode: hide internal canvas controls ──────────────────────────────── */
|
|
211
249
|
.bpmnkit-zen-mode .bpmnkit-zoom-controls,
|
|
212
250
|
.bpmnkit-zen-mode .bpmnkit-main-menu-panel {
|
|
@@ -180,10 +180,10 @@ const EXTERNAL_ICON = '<svg viewBox="0 0 12 12" fill="none" stroke="currentColor
|
|
|
180
180
|
const AI_ICON = '<svg viewBox="0 0 16 16" fill="currentColor"><path d="M8 0a.5.5 0 0 1 .46.31l1.46 3.46 3.46 1.46a.5.5 0 0 1 0 .94l-3.46 1.46L8.46 11.1a.5.5 0 0 1-.92 0L6.08 7.63 2.62 6.17a.5.5 0 0 1 0-.94l3.46-1.46L7.54.31A.5.5 0 0 1 8 0zm0 2.08L6.96 4.54a.5.5 0 0 1-.28.28L4.22 5.7l2.46 1.04a.5.5 0 0 1 .28.28L8 9.48l1.04-2.46a.5.5 0 0 1 .28-.28L11.78 5.7 9.32 4.82a.5.5 0 0 1-.28-.28L8 2.08zm5 8.42a.5.5 0 0 1 .46.31l.6 1.43 1.43.6a.5.5 0 0 1 0 .92l-1.43.6-.6 1.43a.5.5 0 0 1-.92 0l-.6-1.43-1.43-.6a.5.5 0 0 1 0-.92l1.43-.6.6-1.43A.5.5 0 0 1 13 10.5zm0 1.79-.27.63a.5.5 0 0 1-.28.28l-.63.27.63.27a.5.5 0 0 1 .28.28l.27.63.27-.63a.5.5 0 0 1 .28-.28l.63-.27-.63-.27a.5.5 0 0 1-.28-.28L13 12.29z"/></svg>';
|
|
181
181
|
// ── Theme helper ──────────────────────────────────────────────────────────────
|
|
182
182
|
function resolveTheme(theme) {
|
|
183
|
-
if (theme === "dark")
|
|
184
|
-
return "dark";
|
|
185
183
|
if (theme === "light")
|
|
186
184
|
return "light";
|
|
185
|
+
if (theme === "dark" || theme === "neon")
|
|
186
|
+
return "dark";
|
|
187
187
|
return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
|
|
188
188
|
}
|
|
189
189
|
// ── Factory ───────────────────────────────────────────────────────────────────
|
|
@@ -7,8 +7,9 @@
|
|
|
7
7
|
* templates via `@bpmnkit/connector-gen`, and registers them in the
|
|
8
8
|
* config-panel-bpmn connector selector — no restart required.
|
|
9
9
|
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
10
|
+
* Additional commands accept any OpenAPI 3.x spec URL ("Import from OpenAPI
|
|
11
|
+
* URL…") or a local file upload ("Import from OpenAPI file…") for custom,
|
|
12
|
+
* private, or CORS-restricted APIs.
|
|
12
13
|
*
|
|
13
14
|
* ## Usage
|
|
14
15
|
* ```typescript
|
|
@@ -7,8 +7,9 @@
|
|
|
7
7
|
* templates via `@bpmnkit/connector-gen`, and registers them in the
|
|
8
8
|
* config-panel-bpmn connector selector — no restart required.
|
|
9
9
|
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
10
|
+
* Additional commands accept any OpenAPI 3.x spec URL ("Import from OpenAPI
|
|
11
|
+
* URL…") or a local file upload ("Import from OpenAPI file…") for custom,
|
|
12
|
+
* private, or CORS-restricted APIs.
|
|
12
13
|
*
|
|
13
14
|
* ## Usage
|
|
14
15
|
* ```typescript
|
|
@@ -23,7 +24,7 @@
|
|
|
23
24
|
*
|
|
24
25
|
* @packageDocumentation
|
|
25
26
|
*/
|
|
26
|
-
import { CATALOG, generateFromCatalog, generateFromUrl } from "@bpmnkit/connector-gen/browser";
|
|
27
|
+
import { CATALOG, generate, generateFromCatalog, generateFromUrl, } from "@bpmnkit/connector-gen/browser";
|
|
27
28
|
import { CONNECTOR_CATALOG_CSS, CONNECTOR_CATALOG_STYLE_ID, injectConnectorCatalogStyles, } from "./css.js";
|
|
28
29
|
export { CONNECTOR_CATALOG_CSS, CONNECTOR_CATALOG_STYLE_ID, injectConnectorCatalogStyles };
|
|
29
30
|
// ── Toast helper ──────────────────────────────────────────────────────────────
|
|
@@ -74,6 +75,33 @@ async function loadCatalogEntry(id, registrar) {
|
|
|
74
75
|
resolveToast(toast, `Import failed: ${msg}`, "error", 5000);
|
|
75
76
|
}
|
|
76
77
|
}
|
|
78
|
+
function loadFromFile(registrar) {
|
|
79
|
+
const input = document.createElement("input");
|
|
80
|
+
input.type = "file";
|
|
81
|
+
input.accept = ".json,.yaml,.yml";
|
|
82
|
+
input.onchange = async () => {
|
|
83
|
+
const file = input.files?.[0];
|
|
84
|
+
if (!file)
|
|
85
|
+
return;
|
|
86
|
+
const stem = file.name
|
|
87
|
+
.replace(/\.(json|ya?ml)$/i, "")
|
|
88
|
+
.replace(/[-_.]/g, " ")
|
|
89
|
+
.trim();
|
|
90
|
+
const prefix = stem.charAt(0).toUpperCase() + stem.slice(1) || "Custom";
|
|
91
|
+
const toast = showToast(`Parsing ${file.name}…`, "loading");
|
|
92
|
+
try {
|
|
93
|
+
const text = await file.text();
|
|
94
|
+
const templates = generate(text, { idPrefix: "io.custom" });
|
|
95
|
+
registerAll(withPrefix(templates, prefix), registrar);
|
|
96
|
+
resolveToast(toast, `${templates.length} operations imported`, "success", 3000);
|
|
97
|
+
}
|
|
98
|
+
catch (err) {
|
|
99
|
+
const msg = err instanceof Error ? err.message : String(err);
|
|
100
|
+
resolveToast(toast, `Import failed: ${msg}`, "error", 5000);
|
|
101
|
+
}
|
|
102
|
+
};
|
|
103
|
+
input.click();
|
|
104
|
+
}
|
|
77
105
|
async function loadFromUrl(url, registrar) {
|
|
78
106
|
// Derive idPrefix and a display prefix from the hostname
|
|
79
107
|
let idPrefix = "io.custom";
|
|
@@ -141,7 +169,15 @@ export function createConnectorCatalogPlugin(registrar, palette) {
|
|
|
141
169
|
});
|
|
142
170
|
},
|
|
143
171
|
};
|
|
144
|
-
|
|
172
|
+
const fileCmd = {
|
|
173
|
+
id: "connector-catalog:file",
|
|
174
|
+
title: "Import from OpenAPI file\u2026",
|
|
175
|
+
description: "Upload a local OpenAPI 3.x spec file (.json or .yaml)",
|
|
176
|
+
action() {
|
|
177
|
+
loadFromFile(registrar);
|
|
178
|
+
},
|
|
179
|
+
};
|
|
180
|
+
_deregister = palette.addCommands([...catalogCmds, urlCmd, fileCmd]);
|
|
145
181
|
},
|
|
146
182
|
uninstall() {
|
|
147
183
|
_deregister?.();
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
export declare const DEPLOY_STYLE_ID = "bpmnkit-deploy-plugin-styles-v1";
|
|
2
|
+
export declare const DEPLOY_CSS = "\n.dp-root {\n display: flex; flex-direction: column; height: 100%; overflow-y: auto;\n padding: 14px 16px; gap: 16px;\n font-family: system-ui, -apple-system, sans-serif;\n font-size: 13px; color: rgba(255,255,255,0.82);\n box-sizing: border-box;\n}\n.dp-section {\n display: flex; flex-direction: column; gap: 8px;\n}\n.dp-section-title {\n font-size: 10px; font-weight: 700; text-transform: uppercase;\n letter-spacing: 0.08em; color: rgba(255,255,255,0.3);\n margin-bottom: 2px;\n}\n.dp-row {\n display: flex; align-items: center; gap: 8px;\n}\n.dp-select {\n flex: 1; background: rgba(30,30,46,0.95); border: 1px solid rgba(255,255,255,0.12);\n border-radius: 5px; color: rgba(255,255,255,0.85); padding: 5px 8px;\n font-size: 12px; font-family: inherit; outline: none;\n appearance: none; -webkit-appearance: none;\n}\n.dp-select:focus { border-color: rgba(107,157,247,0.6); }\n.dp-btn {\n width: 100%; padding: 7px 12px; border-radius: 5px; border: none;\n font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer;\n transition: opacity 0.15s;\n}\n.dp-btn:disabled { opacity: 0.35; cursor: default; }\n.dp-btn-primary {\n background: var(--bpmnkit-accent, #1a56db); color: #fff;\n}\n.dp-btn-primary:hover:not(:disabled) { opacity: 0.88; }\n.dp-btn-secondary {\n background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.75);\n border: 1px solid rgba(255,255,255,0.12);\n}\n.dp-btn-secondary:hover:not(:disabled) { background: rgba(255,255,255,0.11); }\n.dp-status {\n display: flex; align-items: center; gap: 6px;\n padding: 6px 10px; border-radius: 5px; font-size: 12px;\n}\n.dp-status-ok { background: rgba(34,197,94,0.12); color: #4ade80; }\n.dp-status-warn { background: rgba(245,158,11,0.12); color: #fbbf24; }\n.dp-status-err { background: rgba(248,113,113,0.14); color: #f87171; }\n.dp-status-info { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.5); }\n.dp-dot {\n width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;\n}\n.dp-dot-ok { background: #4ade80; }\n.dp-dot-warn { background: #fbbf24; }\n.dp-dot-err { background: #f87171; }\n.dp-dot-info { background: rgba(255,255,255,0.3); }\n.dp-finding-list {\n display: flex; flex-direction: column; gap: 4px;\n}\n.dp-finding {\n display: flex; align-items: flex-start; gap: 6px;\n padding: 5px 8px; border-radius: 4px;\n background: rgba(248,113,113,0.08); font-size: 12px; color: rgba(255,255,255,0.7);\n}\n.dp-finding-badge {\n flex-shrink: 0; font-size: 10px; font-weight: 700; text-transform: uppercase;\n padding: 1px 5px; border-radius: 3px; margin-top: 1px;\n background: rgba(248,113,113,0.25); color: #f87171;\n}\n.dp-result-box {\n padding: 8px 10px; border-radius: 5px;\n background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.2);\n font-size: 12px; color: rgba(255,255,255,0.75); line-height: 1.5;\n}\n.dp-result-key {\n font-family: ui-monospace, monospace; font-size: 11px;\n color: rgba(107,157,247,0.9); word-break: break-all;\n}\n.dp-textarea {\n width: 100%; min-height: 72px; resize: vertical;\n background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);\n border-radius: 5px; color: rgba(255,255,255,0.82); padding: 6px 8px;\n font-size: 12px; font-family: ui-monospace, monospace; outline: none;\n box-sizing: border-box;\n}\n.dp-textarea:focus { border-color: rgba(107,157,247,0.6); }\n.dp-link {\n color: var(--bpmnkit-accent-bright, #89b4fa); text-decoration: none; font-size: 12px;\n}\n.dp-link:hover { text-decoration: underline; }\n.dp-divider {\n border: none; border-top: 1px solid rgba(255,255,255,0.07); margin: 0;\n}\n.dp-offline {\n display: flex; flex-direction: column; align-items: center; justify-content: center;\n flex: 1; gap: 10px; padding: 24px 16px; text-align: center;\n}\n.dp-offline-icon { font-size: 28px; opacity: 0.4; }\n.dp-offline-title { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.6); }\n.dp-offline-hint {\n font-size: 12px; color: rgba(255,255,255,0.3); line-height: 1.5;\n}\n.dp-offline-code {\n font-family: ui-monospace, monospace; font-size: 11px;\n background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);\n border-radius: 4px; padding: 4px 8px; color: rgba(255,255,255,0.5);\n white-space: pre;\n}\n/* Neon theme */\n[data-bpmnkit-hud-theme=\"neon\"] .dp-root { color: oklch(73% 0.16 280); }\n[data-bpmnkit-hud-theme=\"neon\"] .dp-section-title { color: oklch(50% 0.1 280); }\n[data-bpmnkit-hud-theme=\"neon\"] .dp-select {\n background: oklch(8% 0.04 280 / 0.98); border-color: oklch(65% 0.28 280 / 0.2);\n color: oklch(80% 0.14 280);\n}\n[data-bpmnkit-hud-theme=\"neon\"] .dp-select:focus { border-color: oklch(65% 0.28 280 / 0.55); }\n[data-bpmnkit-hud-theme=\"neon\"] .dp-btn-secondary {\n background: oklch(65% 0.28 280 / 0.07); border-color: oklch(65% 0.28 280 / 0.2);\n color: oklch(65% 0.1 280);\n}\n[data-bpmnkit-hud-theme=\"neon\"] .dp-btn-secondary:hover:not(:disabled) { background: oklch(65% 0.28 280 / 0.14); }\n[data-bpmnkit-hud-theme=\"neon\"] .dp-status-info { background: oklch(65% 0.28 280 / 0.05); color: oklch(55% 0.08 280); }\n[data-bpmnkit-hud-theme=\"neon\"] .dp-dot-info { background: oklch(50% 0.1 280); }\n[data-bpmnkit-hud-theme=\"neon\"] .dp-finding { background: oklch(55% 0.28 20 / 0.1); color: oklch(73% 0.1 280); }\n[data-bpmnkit-hud-theme=\"neon\"] .dp-result-box { border-color: oklch(55% 0.18 150 / 0.3); color: oklch(73% 0.1 280); }\n[data-bpmnkit-hud-theme=\"neon\"] .dp-result-key { color: oklch(72% 0.18 185); }\n[data-bpmnkit-hud-theme=\"neon\"] .dp-textarea {\n background: oklch(65% 0.28 280 / 0.04); border-color: oklch(65% 0.28 280 / 0.15);\n color: oklch(73% 0.16 280);\n}\n[data-bpmnkit-hud-theme=\"neon\"] .dp-textarea:focus { border-color: oklch(65% 0.28 280 / 0.45); }\n[data-bpmnkit-hud-theme=\"neon\"] .dp-link { color: oklch(72% 0.18 185); }\n[data-bpmnkit-hud-theme=\"neon\"] .dp-divider { border-top-color: oklch(65% 0.28 280 / 0.1); }\n[data-bpmnkit-hud-theme=\"neon\"] .dp-offline-title { color: oklch(55% 0.1 280); }\n[data-bpmnkit-hud-theme=\"neon\"] .dp-offline-hint { color: oklch(40% 0.06 280); }\n[data-bpmnkit-hud-theme=\"neon\"] .dp-offline-code {\n background: oklch(65% 0.28 280 / 0.05); border-color: oklch(65% 0.28 280 / 0.12);\n color: oklch(55% 0.1 280);\n}\n";
|
|
3
|
+
export declare function injectDeployStyles(): void;
|
|
4
|
+
//# sourceMappingURL=css.d.ts.map
|
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
export const DEPLOY_STYLE_ID = "bpmnkit-deploy-plugin-styles-v1";
|
|
2
|
+
export const DEPLOY_CSS = `
|
|
3
|
+
.dp-root {
|
|
4
|
+
display: flex; flex-direction: column; height: 100%; overflow-y: auto;
|
|
5
|
+
padding: 14px 16px; gap: 16px;
|
|
6
|
+
font-family: system-ui, -apple-system, sans-serif;
|
|
7
|
+
font-size: 13px; color: rgba(255,255,255,0.82);
|
|
8
|
+
box-sizing: border-box;
|
|
9
|
+
}
|
|
10
|
+
.dp-section {
|
|
11
|
+
display: flex; flex-direction: column; gap: 8px;
|
|
12
|
+
}
|
|
13
|
+
.dp-section-title {
|
|
14
|
+
font-size: 10px; font-weight: 700; text-transform: uppercase;
|
|
15
|
+
letter-spacing: 0.08em; color: rgba(255,255,255,0.3);
|
|
16
|
+
margin-bottom: 2px;
|
|
17
|
+
}
|
|
18
|
+
.dp-row {
|
|
19
|
+
display: flex; align-items: center; gap: 8px;
|
|
20
|
+
}
|
|
21
|
+
.dp-select {
|
|
22
|
+
flex: 1; background: rgba(30,30,46,0.95); border: 1px solid rgba(255,255,255,0.12);
|
|
23
|
+
border-radius: 5px; color: rgba(255,255,255,0.85); padding: 5px 8px;
|
|
24
|
+
font-size: 12px; font-family: inherit; outline: none;
|
|
25
|
+
appearance: none; -webkit-appearance: none;
|
|
26
|
+
}
|
|
27
|
+
.dp-select:focus { border-color: rgba(107,157,247,0.6); }
|
|
28
|
+
.dp-btn {
|
|
29
|
+
width: 100%; padding: 7px 12px; border-radius: 5px; border: none;
|
|
30
|
+
font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer;
|
|
31
|
+
transition: opacity 0.15s;
|
|
32
|
+
}
|
|
33
|
+
.dp-btn:disabled { opacity: 0.35; cursor: default; }
|
|
34
|
+
.dp-btn-primary {
|
|
35
|
+
background: var(--bpmnkit-accent, #1a56db); color: #fff;
|
|
36
|
+
}
|
|
37
|
+
.dp-btn-primary:hover:not(:disabled) { opacity: 0.88; }
|
|
38
|
+
.dp-btn-secondary {
|
|
39
|
+
background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.75);
|
|
40
|
+
border: 1px solid rgba(255,255,255,0.12);
|
|
41
|
+
}
|
|
42
|
+
.dp-btn-secondary:hover:not(:disabled) { background: rgba(255,255,255,0.11); }
|
|
43
|
+
.dp-status {
|
|
44
|
+
display: flex; align-items: center; gap: 6px;
|
|
45
|
+
padding: 6px 10px; border-radius: 5px; font-size: 12px;
|
|
46
|
+
}
|
|
47
|
+
.dp-status-ok { background: rgba(34,197,94,0.12); color: #4ade80; }
|
|
48
|
+
.dp-status-warn { background: rgba(245,158,11,0.12); color: #fbbf24; }
|
|
49
|
+
.dp-status-err { background: rgba(248,113,113,0.14); color: #f87171; }
|
|
50
|
+
.dp-status-info { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.5); }
|
|
51
|
+
.dp-dot {
|
|
52
|
+
width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
|
|
53
|
+
}
|
|
54
|
+
.dp-dot-ok { background: #4ade80; }
|
|
55
|
+
.dp-dot-warn { background: #fbbf24; }
|
|
56
|
+
.dp-dot-err { background: #f87171; }
|
|
57
|
+
.dp-dot-info { background: rgba(255,255,255,0.3); }
|
|
58
|
+
.dp-finding-list {
|
|
59
|
+
display: flex; flex-direction: column; gap: 4px;
|
|
60
|
+
}
|
|
61
|
+
.dp-finding {
|
|
62
|
+
display: flex; align-items: flex-start; gap: 6px;
|
|
63
|
+
padding: 5px 8px; border-radius: 4px;
|
|
64
|
+
background: rgba(248,113,113,0.08); font-size: 12px; color: rgba(255,255,255,0.7);
|
|
65
|
+
}
|
|
66
|
+
.dp-finding-badge {
|
|
67
|
+
flex-shrink: 0; font-size: 10px; font-weight: 700; text-transform: uppercase;
|
|
68
|
+
padding: 1px 5px; border-radius: 3px; margin-top: 1px;
|
|
69
|
+
background: rgba(248,113,113,0.25); color: #f87171;
|
|
70
|
+
}
|
|
71
|
+
.dp-result-box {
|
|
72
|
+
padding: 8px 10px; border-radius: 5px;
|
|
73
|
+
background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.2);
|
|
74
|
+
font-size: 12px; color: rgba(255,255,255,0.75); line-height: 1.5;
|
|
75
|
+
}
|
|
76
|
+
.dp-result-key {
|
|
77
|
+
font-family: ui-monospace, monospace; font-size: 11px;
|
|
78
|
+
color: rgba(107,157,247,0.9); word-break: break-all;
|
|
79
|
+
}
|
|
80
|
+
.dp-textarea {
|
|
81
|
+
width: 100%; min-height: 72px; resize: vertical;
|
|
82
|
+
background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
|
|
83
|
+
border-radius: 5px; color: rgba(255,255,255,0.82); padding: 6px 8px;
|
|
84
|
+
font-size: 12px; font-family: ui-monospace, monospace; outline: none;
|
|
85
|
+
box-sizing: border-box;
|
|
86
|
+
}
|
|
87
|
+
.dp-textarea:focus { border-color: rgba(107,157,247,0.6); }
|
|
88
|
+
.dp-link {
|
|
89
|
+
color: var(--bpmnkit-accent-bright, #89b4fa); text-decoration: none; font-size: 12px;
|
|
90
|
+
}
|
|
91
|
+
.dp-link:hover { text-decoration: underline; }
|
|
92
|
+
.dp-divider {
|
|
93
|
+
border: none; border-top: 1px solid rgba(255,255,255,0.07); margin: 0;
|
|
94
|
+
}
|
|
95
|
+
.dp-offline {
|
|
96
|
+
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
|
97
|
+
flex: 1; gap: 10px; padding: 24px 16px; text-align: center;
|
|
98
|
+
}
|
|
99
|
+
.dp-offline-icon { font-size: 28px; opacity: 0.4; }
|
|
100
|
+
.dp-offline-title { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.6); }
|
|
101
|
+
.dp-offline-hint {
|
|
102
|
+
font-size: 12px; color: rgba(255,255,255,0.3); line-height: 1.5;
|
|
103
|
+
}
|
|
104
|
+
.dp-offline-code {
|
|
105
|
+
font-family: ui-monospace, monospace; font-size: 11px;
|
|
106
|
+
background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
|
|
107
|
+
border-radius: 4px; padding: 4px 8px; color: rgba(255,255,255,0.5);
|
|
108
|
+
white-space: pre;
|
|
109
|
+
}
|
|
110
|
+
/* Neon theme */
|
|
111
|
+
[data-bpmnkit-hud-theme="neon"] .dp-root { color: oklch(73% 0.16 280); }
|
|
112
|
+
[data-bpmnkit-hud-theme="neon"] .dp-section-title { color: oklch(50% 0.1 280); }
|
|
113
|
+
[data-bpmnkit-hud-theme="neon"] .dp-select {
|
|
114
|
+
background: oklch(8% 0.04 280 / 0.98); border-color: oklch(65% 0.28 280 / 0.2);
|
|
115
|
+
color: oklch(80% 0.14 280);
|
|
116
|
+
}
|
|
117
|
+
[data-bpmnkit-hud-theme="neon"] .dp-select:focus { border-color: oklch(65% 0.28 280 / 0.55); }
|
|
118
|
+
[data-bpmnkit-hud-theme="neon"] .dp-btn-secondary {
|
|
119
|
+
background: oklch(65% 0.28 280 / 0.07); border-color: oklch(65% 0.28 280 / 0.2);
|
|
120
|
+
color: oklch(65% 0.1 280);
|
|
121
|
+
}
|
|
122
|
+
[data-bpmnkit-hud-theme="neon"] .dp-btn-secondary:hover:not(:disabled) { background: oklch(65% 0.28 280 / 0.14); }
|
|
123
|
+
[data-bpmnkit-hud-theme="neon"] .dp-status-info { background: oklch(65% 0.28 280 / 0.05); color: oklch(55% 0.08 280); }
|
|
124
|
+
[data-bpmnkit-hud-theme="neon"] .dp-dot-info { background: oklch(50% 0.1 280); }
|
|
125
|
+
[data-bpmnkit-hud-theme="neon"] .dp-finding { background: oklch(55% 0.28 20 / 0.1); color: oklch(73% 0.1 280); }
|
|
126
|
+
[data-bpmnkit-hud-theme="neon"] .dp-result-box { border-color: oklch(55% 0.18 150 / 0.3); color: oklch(73% 0.1 280); }
|
|
127
|
+
[data-bpmnkit-hud-theme="neon"] .dp-result-key { color: oklch(72% 0.18 185); }
|
|
128
|
+
[data-bpmnkit-hud-theme="neon"] .dp-textarea {
|
|
129
|
+
background: oklch(65% 0.28 280 / 0.04); border-color: oklch(65% 0.28 280 / 0.15);
|
|
130
|
+
color: oklch(73% 0.16 280);
|
|
131
|
+
}
|
|
132
|
+
[data-bpmnkit-hud-theme="neon"] .dp-textarea:focus { border-color: oklch(65% 0.28 280 / 0.45); }
|
|
133
|
+
[data-bpmnkit-hud-theme="neon"] .dp-link { color: oklch(72% 0.18 185); }
|
|
134
|
+
[data-bpmnkit-hud-theme="neon"] .dp-divider { border-top-color: oklch(65% 0.28 280 / 0.1); }
|
|
135
|
+
[data-bpmnkit-hud-theme="neon"] .dp-offline-title { color: oklch(55% 0.1 280); }
|
|
136
|
+
[data-bpmnkit-hud-theme="neon"] .dp-offline-hint { color: oklch(40% 0.06 280); }
|
|
137
|
+
[data-bpmnkit-hud-theme="neon"] .dp-offline-code {
|
|
138
|
+
background: oklch(65% 0.28 280 / 0.05); border-color: oklch(65% 0.28 280 / 0.12);
|
|
139
|
+
color: oklch(55% 0.1 280);
|
|
140
|
+
}
|
|
141
|
+
`;
|
|
142
|
+
export function injectDeployStyles() {
|
|
143
|
+
if (document.getElementById(DEPLOY_STYLE_ID))
|
|
144
|
+
return;
|
|
145
|
+
const style = document.createElement("style");
|
|
146
|
+
style.id = DEPLOY_STYLE_ID;
|
|
147
|
+
style.textContent = DEPLOY_CSS;
|
|
148
|
+
document.head.appendChild(style);
|
|
149
|
+
}
|
|
150
|
+
//# sourceMappingURL=css.js.map
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import type { CanvasPlugin } from "@bpmnkit/canvas";
|
|
2
|
+
import type { BpmnDefinitions } from "@bpmnkit/core";
|
|
3
|
+
import { DEPLOY_CSS, DEPLOY_STYLE_ID, injectDeployStyles } from "./css.js";
|
|
4
|
+
export { DEPLOY_CSS, DEPLOY_STYLE_ID, injectDeployStyles };
|
|
5
|
+
export interface DeployPluginOptions {
|
|
6
|
+
/** Base URL of the proxy server. Defaults to `http://localhost:3033`. */
|
|
7
|
+
proxyUrl?: string;
|
|
8
|
+
/** Base URL of the operate app, used to build "View in Operate" links. */
|
|
9
|
+
operateUrl?: string;
|
|
10
|
+
/** Return current BPMN definitions (for optimizer check and process ID extraction). */
|
|
11
|
+
getDefinitions(): BpmnDefinitions | null;
|
|
12
|
+
/** Return the raw BPMN XML to deploy. */
|
|
13
|
+
getXml(): string | null;
|
|
14
|
+
/** Return the filename for the deployed resource (e.g. "my-process.bpmn"). */
|
|
15
|
+
getFileName?(): string | null;
|
|
16
|
+
}
|
|
17
|
+
export interface DeployPlugin extends CanvasPlugin {
|
|
18
|
+
readonly name: "deploy";
|
|
19
|
+
/** Wire the plugin's UI into a container element (e.g. the SideDock deploy pane). */
|
|
20
|
+
mount(container: HTMLElement): void;
|
|
21
|
+
/** Call when the Deploy tab becomes active — refreshes proxy status. */
|
|
22
|
+
onTabActivated(): void;
|
|
23
|
+
}
|
|
24
|
+
export declare function createDeployPlugin(options: DeployPluginOptions): DeployPlugin;
|
|
25
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1,412 @@
|
|
|
1
|
+
import { optimize } from "@bpmnkit/core";
|
|
2
|
+
import { DEPLOY_CSS, DEPLOY_STYLE_ID, injectDeployStyles } from "./css.js";
|
|
3
|
+
export { DEPLOY_CSS, DEPLOY_STYLE_ID, injectDeployStyles };
|
|
4
|
+
function el(tag, cls, text) {
|
|
5
|
+
const e = document.createElement(tag);
|
|
6
|
+
e.className = cls;
|
|
7
|
+
if (text !== undefined)
|
|
8
|
+
e.textContent = text;
|
|
9
|
+
return e;
|
|
10
|
+
}
|
|
11
|
+
function statusEl(kind, text) {
|
|
12
|
+
const wrap = el("div", `dp-status dp-status-${kind}`);
|
|
13
|
+
const dot = el("span", `dp-dot dp-dot-${kind}`);
|
|
14
|
+
const msg = el("span", "");
|
|
15
|
+
msg.textContent = text;
|
|
16
|
+
wrap.appendChild(dot);
|
|
17
|
+
wrap.appendChild(msg);
|
|
18
|
+
return wrap;
|
|
19
|
+
}
|
|
20
|
+
// ── Plugin factory ─────────────────────────────────────────────────────────────
|
|
21
|
+
export function createDeployPlugin(options) {
|
|
22
|
+
const proxyUrl = (options.proxyUrl ?? "http://localhost:3033").replace(/\/$/, "");
|
|
23
|
+
const operateUrl = options.operateUrl?.replace(/\/$/, "") ?? null;
|
|
24
|
+
// Per-profile deploy results (processDefinitionKey from last deploy)
|
|
25
|
+
let _lastDeployedKey = null;
|
|
26
|
+
let _selectedProfile = null;
|
|
27
|
+
// ── Proxy helpers ──────────────────────────────────────────────────────────
|
|
28
|
+
async function proxyGet(path) {
|
|
29
|
+
const headers = { accept: "application/json" };
|
|
30
|
+
if (_selectedProfile)
|
|
31
|
+
headers["x-profile"] = _selectedProfile;
|
|
32
|
+
const res = await fetch(`${proxyUrl}${path}`, { headers });
|
|
33
|
+
if (!res.ok)
|
|
34
|
+
throw new Error(`HTTP ${res.status}`);
|
|
35
|
+
return res.json();
|
|
36
|
+
}
|
|
37
|
+
async function proxyPost(path, body) {
|
|
38
|
+
const headers = {
|
|
39
|
+
"content-type": "application/json",
|
|
40
|
+
accept: "application/json",
|
|
41
|
+
};
|
|
42
|
+
if (_selectedProfile)
|
|
43
|
+
headers["x-profile"] = _selectedProfile;
|
|
44
|
+
const res = await fetch(`${proxyUrl}${path}`, {
|
|
45
|
+
method: "POST",
|
|
46
|
+
headers,
|
|
47
|
+
body: JSON.stringify(body),
|
|
48
|
+
});
|
|
49
|
+
if (!res.ok) {
|
|
50
|
+
const text = await res.text();
|
|
51
|
+
throw new Error(`HTTP ${res.status}: ${text}`);
|
|
52
|
+
}
|
|
53
|
+
return res.json();
|
|
54
|
+
}
|
|
55
|
+
async function proxyPostMultipart(path, form) {
|
|
56
|
+
const headers = { accept: "application/json" };
|
|
57
|
+
if (_selectedProfile)
|
|
58
|
+
headers["x-profile"] = _selectedProfile;
|
|
59
|
+
const res = await fetch(`${proxyUrl}${path}`, {
|
|
60
|
+
method: "POST",
|
|
61
|
+
headers,
|
|
62
|
+
body: form,
|
|
63
|
+
});
|
|
64
|
+
if (!res.ok) {
|
|
65
|
+
const text = await res.text();
|
|
66
|
+
throw new Error(`HTTP ${res.status}: ${text}`);
|
|
67
|
+
}
|
|
68
|
+
return res.json();
|
|
69
|
+
}
|
|
70
|
+
// ── Panel render ───────────────────────────────────────────────────────────
|
|
71
|
+
let _root = null;
|
|
72
|
+
async function render() {
|
|
73
|
+
if (!_root)
|
|
74
|
+
return;
|
|
75
|
+
_root.innerHTML = "";
|
|
76
|
+
const container = _root;
|
|
77
|
+
try {
|
|
78
|
+
await fetch(`${proxyUrl}/status`, { signal: AbortSignal.timeout(2000) });
|
|
79
|
+
renderPanel(container);
|
|
80
|
+
}
|
|
81
|
+
catch {
|
|
82
|
+
renderOffline(container);
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
function renderOffline(container) {
|
|
86
|
+
const wrap = el("div", "dp-offline");
|
|
87
|
+
const icon = el("div", "dp-offline-icon");
|
|
88
|
+
icon.textContent = "⚙";
|
|
89
|
+
const title = el("div", "dp-offline-title", "Proxy server not running");
|
|
90
|
+
const hint = el("div", "dp-offline-hint", "Start the proxy server to deploy processes and manage instances:");
|
|
91
|
+
const code = el("pre", "dp-offline-code", "casen proxy start");
|
|
92
|
+
wrap.appendChild(icon);
|
|
93
|
+
wrap.appendChild(title);
|
|
94
|
+
wrap.appendChild(hint);
|
|
95
|
+
wrap.appendChild(code);
|
|
96
|
+
container.appendChild(wrap);
|
|
97
|
+
}
|
|
98
|
+
function renderPanel(container) {
|
|
99
|
+
const root = el("div", "dp-root");
|
|
100
|
+
container.appendChild(root);
|
|
101
|
+
// ── Profile section ────────────────────────────────────────────────────
|
|
102
|
+
const profileSection = el("div", "dp-section");
|
|
103
|
+
const profileTitle = el("div", "dp-section-title", "Profile");
|
|
104
|
+
const profileRow = el("div", "dp-row");
|
|
105
|
+
const profileSelect = el("select", "dp-select");
|
|
106
|
+
const refreshBtn = el("button", "dp-btn dp-btn-secondary");
|
|
107
|
+
refreshBtn.textContent = "↻";
|
|
108
|
+
refreshBtn.title = "Refresh";
|
|
109
|
+
refreshBtn.style.width = "32px";
|
|
110
|
+
refreshBtn.style.flexShrink = "0";
|
|
111
|
+
profileRow.appendChild(profileSelect);
|
|
112
|
+
profileRow.appendChild(refreshBtn);
|
|
113
|
+
profileSection.appendChild(profileTitle);
|
|
114
|
+
profileSection.appendChild(profileRow);
|
|
115
|
+
root.appendChild(profileSection);
|
|
116
|
+
// ── Cluster health section ─────────────────────────────────────────────
|
|
117
|
+
const clusterSection = el("div", "dp-section");
|
|
118
|
+
const clusterTitle = el("div", "dp-section-title", "Cluster");
|
|
119
|
+
const clusterStatus = el("div", "");
|
|
120
|
+
clusterStatus.appendChild(statusEl("info", "Select a profile to check cluster health"));
|
|
121
|
+
clusterSection.appendChild(clusterTitle);
|
|
122
|
+
clusterSection.appendChild(clusterStatus);
|
|
123
|
+
root.appendChild(clusterSection);
|
|
124
|
+
root.appendChild(el("hr", "dp-divider"));
|
|
125
|
+
// ── Optimizer section ──────────────────────────────────────────────────
|
|
126
|
+
const optSection = el("div", "dp-section");
|
|
127
|
+
const optTitle = el("div", "dp-section-title", "Process Validation");
|
|
128
|
+
const optStatus = el("div", "");
|
|
129
|
+
optStatus.appendChild(statusEl("info", "Loading…"));
|
|
130
|
+
optSection.appendChild(optTitle);
|
|
131
|
+
optSection.appendChild(optStatus);
|
|
132
|
+
root.appendChild(optSection);
|
|
133
|
+
// ── Deploy section ─────────────────────────────────────────────────────
|
|
134
|
+
const deploySection = el("div", "dp-section");
|
|
135
|
+
const deployBtn = el("button", "dp-btn dp-btn-primary", "Deploy Process");
|
|
136
|
+
deployBtn.disabled = true;
|
|
137
|
+
const deployStatus = el("div", "");
|
|
138
|
+
deploySection.appendChild(deployBtn);
|
|
139
|
+
deploySection.appendChild(deployStatus);
|
|
140
|
+
root.appendChild(deploySection);
|
|
141
|
+
// ── Start instance section (shown after deploy or if already deployed) ──
|
|
142
|
+
const startSection = el("div", "dp-section");
|
|
143
|
+
startSection.style.display = "none";
|
|
144
|
+
root.appendChild(el("hr", "dp-divider"));
|
|
145
|
+
const startTitle = el("div", "dp-section-title", "Start Process Instance");
|
|
146
|
+
const varLabel = el("div", "dp-section-title");
|
|
147
|
+
varLabel.style.textTransform = "none";
|
|
148
|
+
varLabel.style.fontSize = "11px";
|
|
149
|
+
varLabel.style.color = "rgba(255,255,255,0.4)";
|
|
150
|
+
varLabel.textContent = "Variables (JSON, optional)";
|
|
151
|
+
const varInput = el("textarea", "dp-textarea");
|
|
152
|
+
varInput.placeholder = '{\n "key": "value"\n}';
|
|
153
|
+
const startBtn = el("button", "dp-btn dp-btn-secondary", "Start Instance");
|
|
154
|
+
const startStatus = el("div", "");
|
|
155
|
+
startSection.appendChild(startTitle);
|
|
156
|
+
startSection.appendChild(varLabel);
|
|
157
|
+
startSection.appendChild(varInput);
|
|
158
|
+
startSection.appendChild(startBtn);
|
|
159
|
+
startSection.appendChild(startStatus);
|
|
160
|
+
root.appendChild(startSection);
|
|
161
|
+
// ── State ──────────────────────────────────────────────────────────────
|
|
162
|
+
let _topologyOk = false;
|
|
163
|
+
let _optimizerOk = false;
|
|
164
|
+
let _deployedKey = _lastDeployedKey;
|
|
165
|
+
function updateDeployBtn() {
|
|
166
|
+
deployBtn.disabled = !_topologyOk || !_optimizerOk;
|
|
167
|
+
}
|
|
168
|
+
// ── Profile loading ────────────────────────────────────────────────────
|
|
169
|
+
async function loadProfiles() {
|
|
170
|
+
try {
|
|
171
|
+
const profiles = await proxyGet("/profiles");
|
|
172
|
+
profileSelect.innerHTML = "";
|
|
173
|
+
for (const p of profiles) {
|
|
174
|
+
const opt = document.createElement("option");
|
|
175
|
+
opt.value = p.name;
|
|
176
|
+
opt.textContent = `${p.name}${p.active ? " ✓" : ""}`;
|
|
177
|
+
if (p.active && _selectedProfile === null) {
|
|
178
|
+
_selectedProfile = p.name;
|
|
179
|
+
opt.selected = true;
|
|
180
|
+
}
|
|
181
|
+
else if (p.name === _selectedProfile) {
|
|
182
|
+
opt.selected = true;
|
|
183
|
+
}
|
|
184
|
+
profileSelect.appendChild(opt);
|
|
185
|
+
}
|
|
186
|
+
if (profiles.length > 0 && _selectedProfile === null) {
|
|
187
|
+
const first = profiles[0];
|
|
188
|
+
if (first) {
|
|
189
|
+
_selectedProfile = first.name;
|
|
190
|
+
profileSelect.value = first.name;
|
|
191
|
+
}
|
|
192
|
+
}
|
|
193
|
+
await checkTopology();
|
|
194
|
+
}
|
|
195
|
+
catch {
|
|
196
|
+
profileSelect.innerHTML = '<option value="">No profiles found</option>';
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
profileSelect.addEventListener("change", () => {
|
|
200
|
+
_selectedProfile = profileSelect.value || null;
|
|
201
|
+
void checkTopology();
|
|
202
|
+
});
|
|
203
|
+
refreshBtn.addEventListener("click", () => {
|
|
204
|
+
void loadProfiles();
|
|
205
|
+
});
|
|
206
|
+
// ── Topology check ─────────────────────────────────────────────────────
|
|
207
|
+
async function checkTopology() {
|
|
208
|
+
clusterStatus.innerHTML = "";
|
|
209
|
+
clusterStatus.appendChild(statusEl("info", "Checking…"));
|
|
210
|
+
try {
|
|
211
|
+
const topo = await proxyGet("/api/topology");
|
|
212
|
+
_topologyOk = true;
|
|
213
|
+
const brokers = topo.brokers?.length ?? 0;
|
|
214
|
+
const version = topo.gatewayVersion ?? "unknown";
|
|
215
|
+
clusterStatus.innerHTML = "";
|
|
216
|
+
clusterStatus.appendChild(statusEl("ok", `Connected — ${brokers} broker${brokers === 1 ? "" : "s"}, gateway ${version}`));
|
|
217
|
+
}
|
|
218
|
+
catch (err) {
|
|
219
|
+
_topologyOk = false;
|
|
220
|
+
clusterStatus.innerHTML = "";
|
|
221
|
+
clusterStatus.appendChild(statusEl("err", `Cluster unreachable: ${String(err)}`));
|
|
222
|
+
}
|
|
223
|
+
updateDeployBtn();
|
|
224
|
+
await checkExistingDeployment();
|
|
225
|
+
}
|
|
226
|
+
// ── Optimizer check ────────────────────────────────────────────────────
|
|
227
|
+
function runOptimizerCheck() {
|
|
228
|
+
const defs = options.getDefinitions();
|
|
229
|
+
if (!defs) {
|
|
230
|
+
optStatus.innerHTML = "";
|
|
231
|
+
optStatus.appendChild(statusEl("info", "No process loaded"));
|
|
232
|
+
_optimizerOk = false;
|
|
233
|
+
updateDeployBtn();
|
|
234
|
+
return;
|
|
235
|
+
}
|
|
236
|
+
const report = optimize(defs);
|
|
237
|
+
const errors = report.findings.filter((f) => f.severity === "error");
|
|
238
|
+
const warnings = report.findings.filter((f) => f.severity === "warning");
|
|
239
|
+
optStatus.innerHTML = "";
|
|
240
|
+
if (errors.length > 0) {
|
|
241
|
+
_optimizerOk = false;
|
|
242
|
+
optStatus.appendChild(statusEl("err", `${errors.length} error${errors.length === 1 ? "" : "s"} — fix before deploying`));
|
|
243
|
+
const list = el("div", "dp-finding-list");
|
|
244
|
+
for (const f of errors) {
|
|
245
|
+
const item = el("div", "dp-finding");
|
|
246
|
+
const badge = el("span", "dp-finding-badge", "error");
|
|
247
|
+
const msg = el("span", "");
|
|
248
|
+
msg.textContent = f.message;
|
|
249
|
+
item.appendChild(badge);
|
|
250
|
+
item.appendChild(msg);
|
|
251
|
+
list.appendChild(item);
|
|
252
|
+
}
|
|
253
|
+
optStatus.appendChild(list);
|
|
254
|
+
}
|
|
255
|
+
else if (warnings.length > 0) {
|
|
256
|
+
_optimizerOk = true;
|
|
257
|
+
optStatus.appendChild(statusEl("warn", `${warnings.length} warning${warnings.length === 1 ? "" : "s"} — deploy allowed`));
|
|
258
|
+
}
|
|
259
|
+
else {
|
|
260
|
+
_optimizerOk = true;
|
|
261
|
+
optStatus.appendChild(statusEl("ok", "No issues found"));
|
|
262
|
+
}
|
|
263
|
+
updateDeployBtn();
|
|
264
|
+
}
|
|
265
|
+
// ── Check if already deployed ──────────────────────────────────────────
|
|
266
|
+
async function checkExistingDeployment() {
|
|
267
|
+
const defs = options.getDefinitions();
|
|
268
|
+
const processId = defs?.processes?.[0]?.id;
|
|
269
|
+
if (!processId || !_topologyOk)
|
|
270
|
+
return;
|
|
271
|
+
try {
|
|
272
|
+
const result = await proxyPost("/api/process-definitions/search", { filter: { bpmnProcessId: processId }, page: { from: 0, limit: 1 } });
|
|
273
|
+
const item = result.items?.[0];
|
|
274
|
+
if (item?.processDefinitionKey) {
|
|
275
|
+
_deployedKey = item.processDefinitionKey;
|
|
276
|
+
_lastDeployedKey = _deployedKey;
|
|
277
|
+
showStartSection();
|
|
278
|
+
}
|
|
279
|
+
}
|
|
280
|
+
catch {
|
|
281
|
+
// not yet deployed — no action needed
|
|
282
|
+
}
|
|
283
|
+
}
|
|
284
|
+
function showStartSection() {
|
|
285
|
+
startSection.style.display = "";
|
|
286
|
+
}
|
|
287
|
+
// ── Deploy ─────────────────────────────────────────────────────────────
|
|
288
|
+
deployBtn.addEventListener("click", () => {
|
|
289
|
+
void doDeploy();
|
|
290
|
+
});
|
|
291
|
+
async function doDeploy() {
|
|
292
|
+
const xml = options.getXml();
|
|
293
|
+
if (!xml) {
|
|
294
|
+
deployStatus.innerHTML = "";
|
|
295
|
+
deployStatus.appendChild(statusEl("err", "No process XML available"));
|
|
296
|
+
return;
|
|
297
|
+
}
|
|
298
|
+
const fileName = options.getFileName?.() ?? "process.bpmn";
|
|
299
|
+
deployBtn.disabled = true;
|
|
300
|
+
deployBtn.textContent = "Deploying…";
|
|
301
|
+
deployStatus.innerHTML = "";
|
|
302
|
+
try {
|
|
303
|
+
const form = new FormData();
|
|
304
|
+
const blob = new Blob([xml], { type: "application/xml" });
|
|
305
|
+
form.append("resources", blob, fileName);
|
|
306
|
+
const result = await proxyPostMultipart("/api/deployments", form);
|
|
307
|
+
const process = result.processes?.[0];
|
|
308
|
+
_deployedKey = process?.processDefinitionKey ?? null;
|
|
309
|
+
_lastDeployedKey = _deployedKey;
|
|
310
|
+
deployStatus.innerHTML = "";
|
|
311
|
+
const box = el("div", "dp-result-box");
|
|
312
|
+
const keyLine = document.createElement("div");
|
|
313
|
+
keyLine.textContent = "Deployment key: ";
|
|
314
|
+
const keySpan = el("span", "dp-result-key", result.deploymentKey ?? "—");
|
|
315
|
+
keyLine.appendChild(keySpan);
|
|
316
|
+
const defLine = document.createElement("div");
|
|
317
|
+
defLine.textContent = `Process: ${process?.bpmnProcessId ?? "—"} v${process?.version ?? "?"}`;
|
|
318
|
+
box.appendChild(keyLine);
|
|
319
|
+
box.appendChild(defLine);
|
|
320
|
+
deployStatus.appendChild(box);
|
|
321
|
+
showStartSection();
|
|
322
|
+
}
|
|
323
|
+
catch (err) {
|
|
324
|
+
deployStatus.innerHTML = "";
|
|
325
|
+
deployStatus.appendChild(statusEl("err", `Deploy failed: ${String(err)}`));
|
|
326
|
+
}
|
|
327
|
+
finally {
|
|
328
|
+
deployBtn.disabled = false;
|
|
329
|
+
deployBtn.textContent = "Deploy Process";
|
|
330
|
+
updateDeployBtn();
|
|
331
|
+
}
|
|
332
|
+
}
|
|
333
|
+
// ── Start instance ─────────────────────────────────────────────────────
|
|
334
|
+
startBtn.addEventListener("click", () => {
|
|
335
|
+
void doStartInstance();
|
|
336
|
+
});
|
|
337
|
+
async function doStartInstance() {
|
|
338
|
+
if (!_deployedKey) {
|
|
339
|
+
startStatus.innerHTML = "";
|
|
340
|
+
startStatus.appendChild(statusEl("err", "No deployed process key available"));
|
|
341
|
+
return;
|
|
342
|
+
}
|
|
343
|
+
let variables = {};
|
|
344
|
+
const raw = varInput.value.trim();
|
|
345
|
+
if (raw) {
|
|
346
|
+
try {
|
|
347
|
+
variables = JSON.parse(raw);
|
|
348
|
+
}
|
|
349
|
+
catch {
|
|
350
|
+
startStatus.innerHTML = "";
|
|
351
|
+
startStatus.appendChild(statusEl("err", "Variables must be valid JSON"));
|
|
352
|
+
return;
|
|
353
|
+
}
|
|
354
|
+
}
|
|
355
|
+
startBtn.disabled = true;
|
|
356
|
+
startBtn.textContent = "Starting…";
|
|
357
|
+
startStatus.innerHTML = "";
|
|
358
|
+
try {
|
|
359
|
+
const result = await proxyPost("/api/process-instances", {
|
|
360
|
+
processDefinitionKey: _deployedKey,
|
|
361
|
+
variables,
|
|
362
|
+
});
|
|
363
|
+
const instanceKey = result.processInstanceKey;
|
|
364
|
+
startStatus.innerHTML = "";
|
|
365
|
+
const box = el("div", "dp-result-box");
|
|
366
|
+
const keyLine = document.createElement("div");
|
|
367
|
+
keyLine.textContent = "Instance key: ";
|
|
368
|
+
const keySpan = el("span", "dp-result-key", instanceKey ?? "—");
|
|
369
|
+
keyLine.appendChild(keySpan);
|
|
370
|
+
box.appendChild(keyLine);
|
|
371
|
+
if (operateUrl && instanceKey) {
|
|
372
|
+
const linkLine = document.createElement("div");
|
|
373
|
+
linkLine.style.marginTop = "6px";
|
|
374
|
+
const link = el("a", "dp-link", "View in Operate →");
|
|
375
|
+
link.setAttribute("href", `${operateUrl}#/instances/${instanceKey}`);
|
|
376
|
+
link.setAttribute("target", "_blank");
|
|
377
|
+
link.setAttribute("rel", "noopener noreferrer");
|
|
378
|
+
linkLine.appendChild(link);
|
|
379
|
+
box.appendChild(linkLine);
|
|
380
|
+
}
|
|
381
|
+
startStatus.appendChild(box);
|
|
382
|
+
}
|
|
383
|
+
catch (err) {
|
|
384
|
+
startStatus.innerHTML = "";
|
|
385
|
+
startStatus.appendChild(statusEl("err", `Start failed: ${String(err)}`));
|
|
386
|
+
}
|
|
387
|
+
finally {
|
|
388
|
+
startBtn.disabled = false;
|
|
389
|
+
startBtn.textContent = "Start Instance";
|
|
390
|
+
}
|
|
391
|
+
}
|
|
392
|
+
// ── Initial load ───────────────────────────────────────────────────────
|
|
393
|
+
runOptimizerCheck();
|
|
394
|
+
void loadProfiles();
|
|
395
|
+
}
|
|
396
|
+
// ── CanvasPlugin interface ─────────────────────────────────────────────────
|
|
397
|
+
return {
|
|
398
|
+
name: "deploy",
|
|
399
|
+
install() {
|
|
400
|
+
injectDeployStyles();
|
|
401
|
+
},
|
|
402
|
+
mount(container) {
|
|
403
|
+
_root = container;
|
|
404
|
+
void render();
|
|
405
|
+
},
|
|
406
|
+
onTabActivated() {
|
|
407
|
+
// Re-render to get fresh proxy status and optimizer state
|
|
408
|
+
void render();
|
|
409
|
+
},
|
|
410
|
+
};
|
|
411
|
+
}
|
|
412
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -153,6 +153,60 @@ const CSS = `
|
|
|
153
153
|
[data-bpmnkit-hud-theme="light"] .bpmnkit-edocs__md hr { border-top-color: rgba(0,0,0,0.08); }
|
|
154
154
|
[data-bpmnkit-hud-theme="light"] .bpmnkit-edocs__detail-header { border-bottom-color: rgba(0,0,0,0.07); }
|
|
155
155
|
[data-bpmnkit-hud-theme="light"] .bpmnkit-edocs__shape-icon { color: rgba(0,0,0,0.55); }
|
|
156
|
+
/* Neon theme */
|
|
157
|
+
[data-bpmnkit-hud-theme="neon"] .bpmnkit-edocs { color: oklch(73% 0.16 280); }
|
|
158
|
+
[data-bpmnkit-hud-theme="neon"] .bpmnkit-edocs__search input {
|
|
159
|
+
background: oklch(65% 0.28 280 / 0.05); border-color: oklch(65% 0.28 280 / 0.15);
|
|
160
|
+
color: oklch(73% 0.16 280);
|
|
161
|
+
}
|
|
162
|
+
[data-bpmnkit-hud-theme="neon"] .bpmnkit-edocs__search input::placeholder { color: oklch(45% 0.08 280); }
|
|
163
|
+
[data-bpmnkit-hud-theme="neon"] .bpmnkit-edocs__search input:focus {
|
|
164
|
+
border-color: oklch(65% 0.28 280 / 0.5); background: oklch(65% 0.28 280 / 0.08);
|
|
165
|
+
}
|
|
166
|
+
[data-bpmnkit-hud-theme="neon"] .bpmnkit-edocs__cat-label {
|
|
167
|
+
color: oklch(45% 0.08 280); background: oklch(6% 0.04 280 / 0.98);
|
|
168
|
+
}
|
|
169
|
+
[data-bpmnkit-hud-theme="neon"] .bpmnkit-edocs__item:hover {
|
|
170
|
+
background: oklch(65% 0.28 280 / 0.06); border-left-color: oklch(72% 0.18 185);
|
|
171
|
+
}
|
|
172
|
+
[data-bpmnkit-hud-theme="neon"] .bpmnkit-edocs__item.active {
|
|
173
|
+
background: oklch(65% 0.28 280 / 0.1); border-left-color: oklch(72% 0.18 185);
|
|
174
|
+
}
|
|
175
|
+
[data-bpmnkit-hud-theme="neon"] .bpmnkit-edocs__item-title { color: oklch(80% 0.14 280); }
|
|
176
|
+
[data-bpmnkit-hud-theme="neon"] .bpmnkit-edocs__item-brief { color: oklch(45% 0.08 280); }
|
|
177
|
+
[data-bpmnkit-hud-theme="neon"] .bpmnkit-edocs__back { color: oklch(72% 0.18 185); }
|
|
178
|
+
[data-bpmnkit-hud-theme="neon"] .bpmnkit-edocs__back:hover { color: oklch(82% 0.14 185); }
|
|
179
|
+
[data-bpmnkit-hud-theme="neon"] .bpmnkit-edocs__detail-title { color: oklch(85% 0.1 280); }
|
|
180
|
+
[data-bpmnkit-hud-theme="neon"] .bpmnkit-edocs__detail-subtitle { color: oklch(45% 0.08 280); }
|
|
181
|
+
[data-bpmnkit-hud-theme="neon"] .bpmnkit-edocs__detail-header { border-bottom-color: oklch(65% 0.28 280 / 0.1); }
|
|
182
|
+
[data-bpmnkit-hud-theme="neon"] .bpmnkit-edocs__shape-icon { color: oklch(60% 0.14 280); }
|
|
183
|
+
[data-bpmnkit-hud-theme="neon"] .bpmnkit-edocs__md h2 { color: oklch(45% 0.08 280); }
|
|
184
|
+
[data-bpmnkit-hud-theme="neon"] .bpmnkit-edocs__md h3 { color: oklch(65% 0.12 280); }
|
|
185
|
+
[data-bpmnkit-hud-theme="neon"] .bpmnkit-edocs__md p,
|
|
186
|
+
[data-bpmnkit-hud-theme="neon"] .bpmnkit-edocs__md ul,
|
|
187
|
+
[data-bpmnkit-hud-theme="neon"] .bpmnkit-edocs__md ol,
|
|
188
|
+
[data-bpmnkit-hud-theme="neon"] .bpmnkit-edocs__md li { color: oklch(70% 0.12 280); }
|
|
189
|
+
[data-bpmnkit-hud-theme="neon"] .bpmnkit-edocs__md code {
|
|
190
|
+
background: oklch(65% 0.28 280 / 0.08); color: oklch(72% 0.18 185);
|
|
191
|
+
}
|
|
192
|
+
[data-bpmnkit-hud-theme="neon"] .bpmnkit-edocs__md pre {
|
|
193
|
+
background: oklch(3% 0.02 270 / 0.7); border-color: oklch(65% 0.28 280 / 0.1);
|
|
194
|
+
}
|
|
195
|
+
[data-bpmnkit-hud-theme="neon"] .bpmnkit-edocs__md pre code { color: oklch(73% 0.16 280); background: none; }
|
|
196
|
+
[data-bpmnkit-hud-theme="neon"] .bpmnkit-edocs__md blockquote {
|
|
197
|
+
border-left-color: oklch(72% 0.18 185); background: oklch(72% 0.18 185 / 0.06);
|
|
198
|
+
color: oklch(65% 0.12 280);
|
|
199
|
+
}
|
|
200
|
+
[data-bpmnkit-hud-theme="neon"] .bpmnkit-edocs__md th {
|
|
201
|
+
background: oklch(65% 0.28 280 / 0.07); color: oklch(55% 0.1 280);
|
|
202
|
+
border-bottom-color: oklch(65% 0.28 280 / 0.12);
|
|
203
|
+
}
|
|
204
|
+
[data-bpmnkit-hud-theme="neon"] .bpmnkit-edocs__md td {
|
|
205
|
+
color: oklch(70% 0.12 280); border-bottom-color: oklch(65% 0.28 280 / 0.07);
|
|
206
|
+
}
|
|
207
|
+
[data-bpmnkit-hud-theme="neon"] .bpmnkit-edocs__md strong { color: oklch(85% 0.1 280); }
|
|
208
|
+
[data-bpmnkit-hud-theme="neon"] .bpmnkit-edocs__md em { color: oklch(68% 0.12 280); }
|
|
209
|
+
[data-bpmnkit-hud-theme="neon"] .bpmnkit-edocs__md hr { border-top-color: oklch(65% 0.28 280 / 0.1); }
|
|
156
210
|
`;
|
|
157
211
|
function injectStyles() {
|
|
158
212
|
if (document.getElementById(STYLE_ID))
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bpmnkit/plugins",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.16",
|
|
4
4
|
"private": false,
|
|
5
5
|
"type": "module",
|
|
6
6
|
"exports": {
|
|
@@ -36,6 +36,10 @@
|
|
|
36
36
|
"import": "./dist/element-docs/index.js",
|
|
37
37
|
"types": "./dist/element-docs/index.d.ts"
|
|
38
38
|
},
|
|
39
|
+
"./deploy": {
|
|
40
|
+
"import": "./dist/deploy/index.js",
|
|
41
|
+
"types": "./dist/deploy/index.d.ts"
|
|
42
|
+
},
|
|
39
43
|
"./dmn-editor": {
|
|
40
44
|
"import": "./dist/dmn-editor/index.js",
|
|
41
45
|
"types": "./dist/dmn-editor/index.d.ts"
|
|
@@ -108,12 +112,12 @@
|
|
|
108
112
|
"dist/**/*.d.ts"
|
|
109
113
|
],
|
|
110
114
|
"dependencies": {
|
|
111
|
-
"@bpmnkit/
|
|
112
|
-
"@bpmnkit/
|
|
113
|
-
"@bpmnkit/connector-gen": "0.0.
|
|
114
|
-
"@bpmnkit/
|
|
115
|
-
"@bpmnkit/
|
|
116
|
-
"@bpmnkit/feel": "0.0.
|
|
115
|
+
"@bpmnkit/canvas": "0.0.14",
|
|
116
|
+
"@bpmnkit/ascii": "0.0.14",
|
|
117
|
+
"@bpmnkit/connector-gen": "0.0.8",
|
|
118
|
+
"@bpmnkit/editor": "0.0.16",
|
|
119
|
+
"@bpmnkit/core": "0.0.14",
|
|
120
|
+
"@bpmnkit/feel": "0.0.13"
|
|
117
121
|
},
|
|
118
122
|
"description": "23 composable canvas plugins for BPMN editors and viewers — minimap, AI chat, process simulation, storage, and more",
|
|
119
123
|
"keywords": [
|