@bpmnkit/plugins 0.0.15 → 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/dist/ai-bridge/css.js +77 -0
- 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 +8 -4
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
|
}
|
|
@@ -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/ascii": "0.0.14",
|
|
112
115
|
"@bpmnkit/canvas": "0.0.14",
|
|
116
|
+
"@bpmnkit/ascii": "0.0.14",
|
|
113
117
|
"@bpmnkit/connector-gen": "0.0.8",
|
|
118
|
+
"@bpmnkit/editor": "0.0.16",
|
|
114
119
|
"@bpmnkit/core": "0.0.14",
|
|
115
|
-
"@bpmnkit/feel": "0.0.13"
|
|
116
|
-
"@bpmnkit/editor": "0.0.15"
|
|
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": [
|