@bpmnkit/user-tasks 0.0.24 → 0.1.0

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.
Files changed (4) hide show
  1. package/README.md +1 -0
  2. package/dist/types.d.ts +1 -1
  3. package/dist/widget.js +81 -13
  4. package/package.json +4 -4
package/README.md CHANGED
@@ -145,6 +145,7 @@ interface UserTask {
145
145
  | [`@bpmnkit/api`](https://www.npmjs.com/package/@bpmnkit/api) | Camunda 8 REST API TypeScript client |
146
146
  | [`@bpmnkit/ascii`](https://www.npmjs.com/package/@bpmnkit/ascii) | Render BPMN diagrams as Unicode ASCII art |
147
147
  | [`@bpmnkit/docspack`](https://www.npmjs.com/package/@bpmnkit/docspack) | BPMN Kit docs as an offline docspack package for AI agents |
148
+ | [`@bpmnkit/camunda-docspack`](https://www.npmjs.com/package/@bpmnkit/camunda-docspack) | Camunda 8 docs as an offline docspack package for AI agents |
148
149
  | [`@bpmnkit/ui`](https://www.npmjs.com/package/@bpmnkit/ui) | Shared design tokens and UI components |
149
150
  | [`@bpmnkit/profiles`](https://www.npmjs.com/package/@bpmnkit/profiles) | Shared auth, profile storage, and client factories for CLI & proxy |
150
151
  | [`@bpmnkit/operate`](https://www.npmjs.com/package/@bpmnkit/operate) | Monitoring & operations frontend for Camunda clusters |
package/dist/types.d.ts CHANGED
@@ -19,7 +19,7 @@ export interface UserTaskWidgetOptions {
19
19
  proxyUrl?: string;
20
20
  /** Active profile name for x-profile header. */
21
21
  profile?: string | null;
22
- /** Visual theme. Defaults to "neon". */
22
+ /** Visual theme. Defaults to "light", the design system's own. */
23
23
  theme?: Theme;
24
24
  /** Called when the user completes the task. */
25
25
  onComplete(variables: Record<string, unknown>): void;
package/dist/widget.js CHANGED
@@ -8,23 +8,91 @@ function el(tag, className, text) {
8
8
  e.textContent = text;
9
9
  return e;
10
10
  }
11
+ /**
12
+ * Widget styles, on the bpmnkit.com design system.
13
+ *
14
+ * Square, flat and hairline-ruled, with mono for the meta line and the two
15
+ * labels — the widget is mounted inside the studio's task page, whose chrome
16
+ * is on the same system, so a rounded filled button here read as a different
17
+ * product. Colour and type come from the `--bpmnkit-ds-*` set.
18
+ */
11
19
  const WIDGET_CSS = `
12
- .ut-root { font-family: var(--bpmnkit-font, system-ui, sans-serif); color: var(--bpmnkit-fg, #1a1a2e); }
13
- .ut-header { padding: 16px; border-bottom: 1px solid var(--bpmnkit-border, #d0d0e8); }
14
- .ut-name { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
15
- .ut-meta { display: flex; gap: 12px; font-size: 13px; color: var(--bpmnkit-fg-muted, #6666a0); }
20
+ .ut-root {
21
+ font-family: var(--bpmnkit-ds-font-sans, system-ui, sans-serif);
22
+ color: var(--bpmnkit-ds-ink, #14161a);
23
+ background: var(--bpmnkit-ds-surface, #ffffff);
24
+ }
25
+ .ut-header { padding: 16px; border-bottom: 1px solid var(--bpmnkit-ds-line, #d8dbe0); }
26
+ .ut-name { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 8px; }
27
+ .ut-meta {
28
+ display: flex;
29
+ gap: 14px;
30
+ font-family: var(--bpmnkit-ds-font-mono, ui-monospace, monospace);
31
+ font-size: 11.5px;
32
+ color: var(--bpmnkit-ds-ink-4, #8b929c);
33
+ }
16
34
  .ut-meta-item { display: flex; align-items: center; gap: 4px; }
17
35
  .ut-overdue { color: var(--bpmnkit-danger, #dc2626); }
18
36
  .ut-form { padding: 16px; flex: 1; overflow-y: auto; }
19
- .ut-form-placeholder { padding: 32px; text-align: center; color: var(--bpmnkit-fg-muted, #6666a0); font-size: 14px; }
20
- .ut-actions { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--bpmnkit-border, #d0d0e8); }
21
- .ut-btn { padding: 6px 14px; border-radius: 6px; font-size: 13px; cursor: pointer; border: 1px solid transparent; transition: opacity 0.15s; }
22
- .ut-btn:hover { opacity: 0.85; }
37
+ .ut-form-placeholder {
38
+ padding: 32px;
39
+ text-align: center;
40
+ color: var(--bpmnkit-ds-ink-3, #5c6470);
41
+ font-size: 14.5px;
42
+ }
43
+ .ut-actions {
44
+ display: flex;
45
+ gap: 8px;
46
+ padding: 12px 16px;
47
+ border-top: 1px solid var(--bpmnkit-ds-line, #d8dbe0);
48
+ }
49
+ /* Square, and the label sits in the sans role the system gives a control. */
50
+ .ut-btn {
51
+ padding: 7px 16px;
52
+ font-family: var(--bpmnkit-ds-font-sans, system-ui, sans-serif);
53
+ font-size: 14px;
54
+ line-height: 1.5;
55
+ cursor: pointer;
56
+ border: 1px solid transparent;
57
+ transition: background 0.15s, border-color 0.15s, color 0.15s;
58
+ }
23
59
  .ut-btn:disabled { opacity: 0.4; cursor: not-allowed; }
24
- .ut-btn-primary { background: var(--bpmnkit-accent, #1a56db); color: var(--bpmnkit-accent-fg, #fff); }
25
- .ut-btn-secondary { background: transparent; border-color: var(--bpmnkit-border, #d0d0e8); color: var(--bpmnkit-fg, #1a1a2e); }
26
- .ut-btn-danger { background: var(--bpmnkit-danger, #dc2626); color: #fff; }
27
- .ut-error { padding: 8px 12px; background: color-mix(in srgb, var(--bpmnkit-danger, #dc2626) 15%, transparent); color: var(--bpmnkit-danger, #dc2626); border-radius: 4px; font-size: 13px; margin: 0 16px 8px; }
60
+ .ut-btn-primary {
61
+ background: var(--bpmnkit-ds-accent, #a8503a);
62
+ border-color: var(--bpmnkit-ds-accent, #a8503a);
63
+ color: #ffffff;
64
+ }
65
+ .ut-btn-primary:hover:not(:disabled) {
66
+ background: var(--bpmnkit-ds-accent-hover, #8f412e);
67
+ border-color: var(--bpmnkit-ds-accent-hover, #8f412e);
68
+ }
69
+ .ut-btn-secondary {
70
+ background: none;
71
+ border-color: var(--bpmnkit-ds-line, #d8dbe0);
72
+ color: var(--bpmnkit-ds-ink-3, #5c6470);
73
+ }
74
+ .ut-btn-secondary:hover:not(:disabled) {
75
+ border-color: var(--bpmnkit-ds-line-strong, #14161a);
76
+ color: var(--bpmnkit-ds-ink, #14161a);
77
+ }
78
+ /* Destructive is semantic state, so it keeps its own colour — tinted and
79
+ ruled rather than filled, the way every state readout in the system is. */
80
+ .ut-btn-danger {
81
+ background: color-mix(in srgb, var(--bpmnkit-danger, #dc2626) 12%, transparent);
82
+ border-color: var(--bpmnkit-danger, #dc2626);
83
+ color: var(--bpmnkit-danger, #dc2626);
84
+ }
85
+ .ut-btn-danger:hover:not(:disabled) {
86
+ background: color-mix(in srgb, var(--bpmnkit-danger, #dc2626) 20%, transparent);
87
+ }
88
+ .ut-error {
89
+ padding: 8px 12px;
90
+ margin: 0 16px 8px;
91
+ border: 1px solid var(--bpmnkit-ds-line, #d8dbe0);
92
+ border-left: 2px solid var(--bpmnkit-danger, #dc2626);
93
+ color: var(--bpmnkit-danger, #dc2626);
94
+ font-size: 14px;
95
+ }
28
96
  `;
29
97
  function injectWidgetStyles() {
30
98
  const id = "bpmnkit-user-tasks-css";
@@ -38,7 +106,7 @@ function injectWidgetStyles() {
38
106
  export function createUserTaskWidget(options) {
39
107
  injectUiStyles();
40
108
  injectWidgetStyles();
41
- const { container, proxyUrl = "http://localhost:3033", profile = null, theme = "neon", onComplete, onClaim, onUnclaim, onReject, } = options;
109
+ const { container, proxyUrl = "http://localhost:3033", profile = null, theme = "light", onComplete, onClaim, onUnclaim, onReject, } = options;
42
110
  // Create root element
43
111
  const root = el("div", "ut-root");
44
112
  applyTheme(root, theme);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bpmnkit/user-tasks",
3
- "version": "0.0.24",
3
+ "version": "0.1.0",
4
4
  "description": "Embeddable user task widget for Camunda 8 — form rendering, claim/complete actions, zero dependencies",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
@@ -19,9 +19,9 @@
19
19
  ],
20
20
  "dependencies": {
21
21
  "@bpmnkit/api": "0.0.21",
22
- "@bpmnkit/core": "0.7.0",
23
- "@bpmnkit/plugins": "0.3.4",
24
- "@bpmnkit/ui": "0.2.0"
22
+ "@bpmnkit/core": "0.8.0",
23
+ "@bpmnkit/plugins": "0.4.0",
24
+ "@bpmnkit/ui": "0.3.0"
25
25
  },
26
26
  "keywords": [
27
27
  "bpmn",