@formicoidea/labre-framework-bpmn 0.39.1 → 0.40.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 (5) hide show
  1. package/dist/consts.d.ts +22 -12
  2. package/dist/consts.js +23 -12
  3. package/dist/templates/index.js +22 -22
  4. package/dist/toolbar/icons.js +4 -3
  5. package/package.json +2 -2
package/dist/consts.d.ts CHANGED
@@ -4,15 +4,20 @@ import type { BpmnNodeKind } from '@formicoidea/labre-core/model';
4
4
  * shapes and line weights, with accent colour only on the event rings — the
5
5
  * task and gateway stay neutral. All of these are just the creation-time
6
6
  * defaults; every value is an editable shape property afterwards.
7
+ *
8
+ * The neutrals come from the shared notation scale (`NOTATION_NEUTRALS`);
9
+ * only the event hues are BPMN's own. A node, flow or group created before the
10
+ * scale was adopted keeps the `#262626` / `#8e8d91` it was written with — a
11
+ * creation default is copied into the element, never re-read from here.
7
12
  */
8
13
  /** Accent stroke for the start event (thin green ring). */
9
14
  export declare const EVENT_START = "#43a06b";
10
15
  /** Accent stroke for the end event (thick red ring). */
11
16
  export declare const EVENT_END = "#cf5648";
12
- /** Neutral stroke for task / gateway (matches the EDGY base shapes). */
13
- export declare const NEUTRAL_STROKE = "#262626";
17
+ /** Neutral stroke for task / gateway — the shared artefact ink. */
18
+ export declare const NEUTRAL_STROKE: string;
14
19
  /** Default fill for events / task / gateway. */
15
- export declare const NODE_FILL = "#ffffff";
20
+ export declare const NODE_FILL: string;
16
21
  /** BPMN line weights: thin start ring, thick end ring, regular elsewhere. */
17
22
  export declare const START_WIDTH = 2;
18
23
  export declare const END_WIDTH = 4;
@@ -40,9 +45,9 @@ export declare const GROUP_RADIUS = 20;
40
45
  * several others. At the neutral stroke it out-shouts everything it encloses,
41
46
  * which is the exact opposite of what a lasso is for. Every tool that draws
42
47
  * BPMN makes the same call; the spec prescribes the dash and says nothing about
43
- * the colour.
48
+ * the colour. The shared scale's divider grey is exactly that role.
44
49
  */
45
- export declare const GROUP_STROKE = "#8e8d91";
50
+ export declare const GROUP_STROKE: string;
46
51
  /** Inner-text font for the task label. */
47
52
  export declare const INNER_FONT_SIZE = 18;
48
53
  /**
@@ -134,18 +139,23 @@ export declare const nodeLabelKey: (kind: BpmnNodeKind) => string;
134
139
  * Pool (background container) defaults — read by the `BPMN_POOL_BACKGROUND`
135
140
  * declaration (`background.ts`), which is the only thing that draws a pool.
136
141
  */
137
- export declare const POOL_FRAME_COLOR = "#262626";
142
+ export declare const POOL_FRAME_COLOR: string;
138
143
  /**
139
144
  * The card. The same white every framework background paints — it is what
140
145
  * `DEFAULT_BACKGROUND_SURFACE` gives a declaration that names no fill, and what
141
146
  * the Wardley map, the Core Domain Chart and the Context Map board all declare.
142
147
  */
143
- export declare const POOL_CARD_FILL = "#ffffff";
144
- export declare const POOL_BAND_FILL = "#f4f4f5";
148
+ export declare const POOL_CARD_FILL: string;
149
+ /**
150
+ * The participant and lane title bands: plain card white, painted at render
151
+ * time (a pool stores no colour of its own). The strip reads through the frame
152
+ * divider beside it, not through a tint (PO, 11/09/2026: no tinted bands).
153
+ */
154
+ export declare const POOL_BAND_FILL: string;
145
155
  export declare const POOL_FRAME_WIDTH = 1.5;
146
156
  export declare const POOL_CORNER_RADIUS = 6;
147
157
  export declare const POOL_NAME_FONT_SIZE = 15;
148
- export declare const POOL_NAME_COLOR = "#262626";
158
+ export declare const POOL_NAME_COLOR: string;
149
159
  export declare const POOL_FONT_FAMILY = "Inter, sans-serif";
150
160
  /**
151
161
  * Lane (couloir) name size — two units under the participant's own.
@@ -197,7 +207,7 @@ export declare const POOL_LANE_MIN_HEIGHT = 24;
197
207
  export declare const POOL_REF_WIDTH = 560;
198
208
  export declare const POOL_REF_HEIGHT = 200;
199
209
  /** Sequence-flow connector preset. */
200
- export declare const SEQUENCE_STROKE = "#262626";
210
+ export declare const SEQUENCE_STROKE: string;
201
211
  export declare const SEQUENCE_WIDTH = 2;
202
212
  /**
203
213
  * Message-flow connector preset — the dashed line that crosses between pools.
@@ -206,7 +216,7 @@ export declare const SEQUENCE_WIDTH = 2;
206
216
  * the DASH and the endpoints (an open circle where the message leaves, an open
207
217
  * arrowhead where it lands), which is exactly the distinction BPMN draws.
208
218
  */
209
- export declare const MESSAGE_STROKE = "#262626";
219
+ export declare const MESSAGE_STROKE: string;
210
220
  export declare const MESSAGE_WIDTH = 2;
211
221
  /**
212
222
  * Association connector preset — the line that ties a note or a data object to
@@ -228,5 +238,5 @@ export declare const MESSAGE_WIDTH = 2;
228
238
  * dot pattern, it is one the notation itself means — an association has no
229
239
  * direction to point in. A rule reads the `role`, which is exact either way.
230
240
  */
231
- export declare const ASSOCIATION_STROKE = "#262626";
241
+ export declare const ASSOCIATION_STROKE: string;
232
242
  export declare const ASSOCIATION_WIDTH = 2;
package/dist/consts.js CHANGED
@@ -1,17 +1,23 @@
1
+ import { NOTATION_NEUTRALS } from '@formicoidea/labre-core/shared/consts';
1
2
  /**
2
3
  * Visual constants for the BPMN basics. Style "C" (hybrid): spec-accurate
3
4
  * shapes and line weights, with accent colour only on the event rings — the
4
5
  * task and gateway stay neutral. All of these are just the creation-time
5
6
  * defaults; every value is an editable shape property afterwards.
7
+ *
8
+ * The neutrals come from the shared notation scale (`NOTATION_NEUTRALS`);
9
+ * only the event hues are BPMN's own. A node, flow or group created before the
10
+ * scale was adopted keeps the `#262626` / `#8e8d91` it was written with — a
11
+ * creation default is copied into the element, never re-read from here.
6
12
  */
7
13
  /** Accent stroke for the start event (thin green ring). */
8
14
  export const EVENT_START = '#43a06b';
9
15
  /** Accent stroke for the end event (thick red ring). */
10
16
  export const EVENT_END = '#cf5648';
11
- /** Neutral stroke for task / gateway (matches the EDGY base shapes). */
12
- export const NEUTRAL_STROKE = '#262626';
17
+ /** Neutral stroke for task / gateway — the shared artefact ink. */
18
+ export const NEUTRAL_STROKE = NOTATION_NEUTRALS.ink;
13
19
  /** Default fill for events / task / gateway. */
14
- export const NODE_FILL = '#ffffff';
20
+ export const NODE_FILL = NOTATION_NEUTRALS.cardFill;
15
21
  /** BPMN line weights: thin start ring, thick end ring, regular elsewhere. */
16
22
  export const START_WIDTH = 2;
17
23
  export const END_WIDTH = 4;
@@ -39,9 +45,9 @@ export const GROUP_RADIUS = 20;
39
45
  * several others. At the neutral stroke it out-shouts everything it encloses,
40
46
  * which is the exact opposite of what a lasso is for. Every tool that draws
41
47
  * BPMN makes the same call; the spec prescribes the dash and says nothing about
42
- * the colour.
48
+ * the colour. The shared scale's divider grey is exactly that role.
43
49
  */
44
- export const GROUP_STROKE = '#8e8d91';
50
+ export const GROUP_STROKE = NOTATION_NEUTRALS.divider;
45
51
  /** Inner-text font for the task label. */
46
52
  export const INNER_FONT_SIZE = 18;
47
53
  /**
@@ -170,18 +176,23 @@ export const nodeLabelKey = (kind) => `com.labre.bpmn.seed.${kind}`;
170
176
  * Pool (background container) defaults — read by the `BPMN_POOL_BACKGROUND`
171
177
  * declaration (`background.ts`), which is the only thing that draws a pool.
172
178
  */
173
- export const POOL_FRAME_COLOR = '#262626';
179
+ export const POOL_FRAME_COLOR = NOTATION_NEUTRALS.frameInk;
174
180
  /**
175
181
  * The card. The same white every framework background paints — it is what
176
182
  * `DEFAULT_BACKGROUND_SURFACE` gives a declaration that names no fill, and what
177
183
  * the Wardley map, the Core Domain Chart and the Context Map board all declare.
178
184
  */
179
- export const POOL_CARD_FILL = '#ffffff';
180
- export const POOL_BAND_FILL = '#f4f4f5';
185
+ export const POOL_CARD_FILL = NOTATION_NEUTRALS.cardFill;
186
+ /**
187
+ * The participant and lane title bands: plain card white, painted at render
188
+ * time (a pool stores no colour of its own). The strip reads through the frame
189
+ * divider beside it, not through a tint (PO, 11/09/2026: no tinted bands).
190
+ */
191
+ export const POOL_BAND_FILL = NOTATION_NEUTRALS.cardFill;
181
192
  export const POOL_FRAME_WIDTH = 1.5;
182
193
  export const POOL_CORNER_RADIUS = 6;
183
194
  export const POOL_NAME_FONT_SIZE = 15;
184
- export const POOL_NAME_COLOR = '#262626';
195
+ export const POOL_NAME_COLOR = NOTATION_NEUTRALS.frameInk;
185
196
  export const POOL_FONT_FAMILY = 'Inter, sans-serif';
186
197
  /**
187
198
  * Lane (couloir) name size — two units under the participant's own.
@@ -238,7 +249,7 @@ export const POOL_LANE_MIN_HEIGHT = 24;
238
249
  export const POOL_REF_WIDTH = 560;
239
250
  export const POOL_REF_HEIGHT = 200;
240
251
  /** Sequence-flow connector preset. */
241
- export const SEQUENCE_STROKE = '#262626';
252
+ export const SEQUENCE_STROKE = NOTATION_NEUTRALS.ink;
242
253
  export const SEQUENCE_WIDTH = 2;
243
254
  /**
244
255
  * Message-flow connector preset — the dashed line that crosses between pools.
@@ -247,7 +258,7 @@ export const SEQUENCE_WIDTH = 2;
247
258
  * the DASH and the endpoints (an open circle where the message leaves, an open
248
259
  * arrowhead where it lands), which is exactly the distinction BPMN draws.
249
260
  */
250
- export const MESSAGE_STROKE = '#262626';
261
+ export const MESSAGE_STROKE = NOTATION_NEUTRALS.ink;
251
262
  export const MESSAGE_WIDTH = 2;
252
263
  /**
253
264
  * Association connector preset — the line that ties a note or a data object to
@@ -269,5 +280,5 @@ export const MESSAGE_WIDTH = 2;
269
280
  * dot pattern, it is one the notation itself means — an association has no
270
281
  * direction to point in. A rule reads the `role`, which is exact either way.
271
282
  */
272
- export const ASSOCIATION_STROKE = '#262626';
283
+ export const ASSOCIATION_STROKE = NOTATION_NEUTRALS.ink;
273
284
  export const ASSOCIATION_WIDTH = 2;
package/dist/templates/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { makeTemplateSnapshot, surfaceText, templateFromCommand, } from '@formicoidea/labre-core/gfx/template';
2
2
  import { ConnectorMode, PointStyle, StrokeStyle, } from '@formicoidea/labre-core/model';
3
3
  import { bpmnCommands } from '../commands.js';
4
- import { MESSAGE_STROKE, MESSAGE_WIDTH, NODE_SIZE, SEQUENCE_STROKE, SEQUENCE_WIDTH, } from '../consts.js';
4
+ import { EVENT_END, EVENT_START, GROUP_STROKE, MESSAGE_STROKE, MESSAGE_WIDTH, NEUTRAL_STROKE, NODE_SIZE, POOL_BAND_FILL, POOL_FRAME_COLOR, SEQUENCE_STROKE, SEQUENCE_WIDTH, } from '../consts.js';
5
5
  import { bpmnNodeProps, bpmnPoolProps } from '../presets.js';
6
6
  import { BPMN_ROLE } from '../roles.js';
7
7
  /**
@@ -134,42 +134,42 @@ const A = 'width="100%" height="100%" viewBox="0 0 135 80" xmlns="http://www.w3.
134
134
  /** An event: the ring weight says start or end, the glyph says what triggers it. */
135
135
  const eventPreview = (stroke, width, glyph = '') => `<svg ${A} fill="none"><circle cx="67" cy="40" r="20" stroke="${stroke}" stroke-width="${width}"/>${glyph}</svg>`;
136
136
  /** An activity: one rounded rectangle, and a marker tells the kinds apart. */
137
- const taskPreview = (glyph = '', width = 2.4) => `<svg ${A} fill="none"><rect x="34" y="24" width="66" height="32" rx="6" stroke="#262626" stroke-width="${width}"/>${glyph}</svg>`;
137
+ const taskPreview = (glyph = '', width = 2.4) => `<svg ${A} fill="none"><rect x="34" y="24" width="66" height="32" rx="6" stroke="${NEUTRAL_STROKE}" stroke-width="${width}"/>${glyph}</svg>`;
138
138
  /** A gateway: one diamond, one marker each. */
139
- const gatewayPreview = (marker) => `<svg ${A} fill="none"><path d="M67 16 L92 40 L67 64 L42 40 Z" stroke="#262626" stroke-width="2.4" stroke-linejoin="round"/><path d="${marker}" stroke="#262626" stroke-width="2.2" stroke-linecap="round"/></svg>`;
140
- const ENVELOPE = '<rect x="59" y="35" width="16" height="11" stroke="#262626" stroke-width="1.4"/><path d="M59 35 L67 42 L75 35" stroke="#262626" stroke-width="1.4" stroke-linejoin="round"/>';
141
- const CLOCK = '<circle cx="67" cy="40" r="9" stroke="#262626" stroke-width="1.4"/><path d="M67 40 V33 M67 40 L72 43" stroke="#262626" stroke-width="1.4" stroke-linecap="round"/>';
139
+ const gatewayPreview = (marker) => `<svg ${A} fill="none"><path d="M67 16 L92 40 L67 64 L42 40 Z" stroke="${NEUTRAL_STROKE}" stroke-width="2.4" stroke-linejoin="round"/><path d="${marker}" stroke="${NEUTRAL_STROKE}" stroke-width="2.2" stroke-linecap="round"/></svg>`;
140
+ const ENVELOPE = `<rect x="59" y="35" width="16" height="11" stroke="${NEUTRAL_STROKE}" stroke-width="1.4"/><path d="M59 35 L67 42 L75 35" stroke="${NEUTRAL_STROKE}" stroke-width="1.4" stroke-linejoin="round"/>`;
141
+ const CLOCK = `<circle cx="67" cy="40" r="9" stroke="${NEUTRAL_STROKE}" stroke-width="1.4"/><path d="M67 40 V33 M67 40 L72 43" stroke="${NEUTRAL_STROKE}" stroke-width="1.4" stroke-linecap="round"/>`;
142
142
  /** The collapsed `[+]`, on the activity's bottom edge — sub-process and call alike. */
143
- const COLLAPSED = '<rect x="61" y="44" width="12" height="12" stroke="#262626" stroke-width="1.4"/><path d="M67 47 V53 M64 50 H70" stroke="#262626" stroke-width="1.4" stroke-linecap="round"/>';
143
+ const COLLAPSED = `<rect x="61" y="44" width="12" height="12" stroke="${NEUTRAL_STROKE}" stroke-width="1.4"/><path d="M67 47 V53 M64 50 H70" stroke="${NEUTRAL_STROKE}" stroke-width="1.4" stroke-linecap="round"/>`;
144
144
  const previews = {
145
- process: `<svg ${A} fill="none"><circle cx="16" cy="40" r="8" stroke="#43a06b" stroke-width="2"/><rect x="34" y="31" width="26" height="18" rx="3" stroke="#262626" stroke-width="1.6"/><path d="M78 31 L88 40 L78 49 L68 40 Z" stroke="#262626" stroke-width="1.4"/><path d="M73 37 L83 43 M83 37 L73 43" stroke="#262626" stroke-width="1.2"/><circle cx="118" cy="40" r="8" stroke="#cf5648" stroke-width="3"/><path d="M24 40 H34 M60 40 H68 M88 40 H110" stroke="#262626" stroke-width="1.2"/></svg>`,
146
- startEvent: eventPreview('#43a06b', 3),
147
- startEventMessage: eventPreview('#43a06b', 3, ENVELOPE),
148
- startEventTimer: eventPreview('#43a06b', 3, CLOCK),
149
- endEvent: eventPreview('#cf5648', 5),
150
- endEventMessage: eventPreview('#cf5648', 5, ENVELOPE),
151
- endEventTerminate: eventPreview('#cf5648', 5, '<circle cx="67" cy="40" r="8" fill="#262626"/>'),
145
+ process: `<svg ${A} fill="none"><circle cx="16" cy="40" r="8" stroke="${EVENT_START}" stroke-width="2"/><rect x="34" y="31" width="26" height="18" rx="3" stroke="${NEUTRAL_STROKE}" stroke-width="1.6"/><path d="M78 31 L88 40 L78 49 L68 40 Z" stroke="${NEUTRAL_STROKE}" stroke-width="1.4"/><path d="M73 37 L83 43 M83 37 L73 43" stroke="${NEUTRAL_STROKE}" stroke-width="1.2"/><circle cx="118" cy="40" r="8" stroke="${EVENT_END}" stroke-width="3"/><path d="M24 40 H34 M60 40 H68 M88 40 H110" stroke="${SEQUENCE_STROKE}" stroke-width="1.2"/></svg>`,
146
+ startEvent: eventPreview(EVENT_START, 3),
147
+ startEventMessage: eventPreview(EVENT_START, 3, ENVELOPE),
148
+ startEventTimer: eventPreview(EVENT_START, 3, CLOCK),
149
+ endEvent: eventPreview(EVENT_END, 5),
150
+ endEventMessage: eventPreview(EVENT_END, 5, ENVELOPE),
151
+ endEventTerminate: eventPreview(EVENT_END, 5, `<circle cx="67" cy="40" r="8" fill="${NEUTRAL_STROKE}"/>`),
152
152
  task: taskPreview(),
153
- taskUser: taskPreview('<circle cx="41" cy="31" r="2.6" stroke="#262626" stroke-width="1.2"/><path d="M37.4 38 a3.6 3.6 0 0 1 7.2 0" stroke="#262626" stroke-width="1.2"/>'),
154
- taskService: taskPreview('<circle cx="41" cy="32" r="3.4" stroke="#262626" stroke-width="1.2"/><circle cx="41" cy="32" r="1" fill="#262626"/><path d="M41 27.4 V29 M41 35 V36.6 M36.4 32 H38 M44 32 H45.6" stroke="#262626" stroke-width="1.2" stroke-linecap="round"/>'),
153
+ taskUser: taskPreview(`<circle cx="41" cy="31" r="2.6" stroke="${NEUTRAL_STROKE}" stroke-width="1.2"/><path d="M37.4 38 a3.6 3.6 0 0 1 7.2 0" stroke="${NEUTRAL_STROKE}" stroke-width="1.2"/>`),
154
+ taskService: taskPreview(`<circle cx="41" cy="32" r="3.4" stroke="${NEUTRAL_STROKE}" stroke-width="1.2"/><circle cx="41" cy="32" r="1" fill="${NEUTRAL_STROKE}"/><path d="M41 27.4 V29 M41 35 V36.6 M36.4 32 H38 M44 32 H45.6" stroke="${NEUTRAL_STROKE}" stroke-width="1.2" stroke-linecap="round"/>`),
155
155
  subProcess: taskPreview(COLLAPSED),
156
156
  // The thick border IS the distinction: this box stands for a process defined
157
157
  // elsewhere (`presets.ts`, `CALL_ACTIVITY_WIDTH`).
158
158
  callActivity: taskPreview(COLLAPSED, 4.5),
159
159
  gateway: gatewayPreview('M58 31 L76 49 M76 31 L58 49'),
160
160
  gatewayParallel: gatewayPreview('M67 30 V50 M57 40 H77'),
161
- dataObject: `<svg ${A} fill="none"><path d="M52 14 H76 L88 26 V66 H52 Z" stroke="#262626" stroke-width="2.2" stroke-linejoin="round"/><path d="M76 14 V26 H88" stroke="#262626" stroke-width="1.8" stroke-linejoin="round"/></svg>`,
162
- dataStore: `<svg ${A} fill="none"><path d="M48 22 V58 C48 62 56 65 67 65 C78 65 86 62 86 58 V22" stroke="#262626" stroke-width="2.2" stroke-linejoin="round"/><ellipse cx="67" cy="22" rx="19" ry="6" stroke="#262626" stroke-width="2.2"/></svg>`,
163
- textAnnotation: `<svg ${A} fill="none"><path d="M46 16 H36 V64 H46" stroke="#262626" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/><path d="M54 28 H100 M54 40 H100 M54 52 H86" stroke="#262626" stroke-width="1.8" stroke-linecap="round"/></svg>`,
164
- group: `<svg ${A} fill="none"><rect x="18" y="12" width="99" height="56" rx="10" stroke="#8e8d91" stroke-width="2.2" stroke-dasharray="7 5"/></svg>`,
165
- sequence: `<svg ${A} fill="none"><path d="M24 40 H96" stroke="#262626" stroke-width="2.4" stroke-linecap="round"/><path d="M94 33 L108 40 L94 47 Z" fill="#262626"/></svg>`,
166
- pool: `<svg ${A} fill="none"><rect x="14" y="20" width="107" height="40" rx="3" stroke="#262626" stroke-width="2"/><path d="M30 20 V60" stroke="#262626" stroke-width="1.8"/><rect x="14" y="20" width="16" height="40" fill="#f4f4f5"/><path d="M30 20 V60" stroke="#262626" stroke-width="1.8"/></svg>`,
161
+ dataObject: `<svg ${A} fill="none"><path d="M52 14 H76 L88 26 V66 H52 Z" stroke="${NEUTRAL_STROKE}" stroke-width="2.2" stroke-linejoin="round"/><path d="M76 14 V26 H88" stroke="${NEUTRAL_STROKE}" stroke-width="1.8" stroke-linejoin="round"/></svg>`,
162
+ dataStore: `<svg ${A} fill="none"><path d="M48 22 V58 C48 62 56 65 67 65 C78 65 86 62 86 58 V22" stroke="${NEUTRAL_STROKE}" stroke-width="2.2" stroke-linejoin="round"/><ellipse cx="67" cy="22" rx="19" ry="6" stroke="${NEUTRAL_STROKE}" stroke-width="2.2"/></svg>`,
163
+ textAnnotation: `<svg ${A} fill="none"><path d="M46 16 H36 V64 H46" stroke="${NEUTRAL_STROKE}" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/><path d="M54 28 H100 M54 40 H100 M54 52 H86" stroke="${NEUTRAL_STROKE}" stroke-width="1.8" stroke-linecap="round"/></svg>`,
164
+ group: `<svg ${A} fill="none"><rect x="18" y="12" width="99" height="56" rx="10" stroke="${GROUP_STROKE}" stroke-width="2.2" stroke-dasharray="7 5"/></svg>`,
165
+ sequence: `<svg ${A} fill="none"><path d="M24 40 H96" stroke="${SEQUENCE_STROKE}" stroke-width="2.4" stroke-linecap="round"/><path d="M94 33 L108 40 L94 47 Z" fill="${SEQUENCE_STROKE}"/></svg>`,
166
+ pool: `<svg ${A} fill="none"><rect x="14" y="20" width="107" height="40" rx="3" stroke="${POOL_FRAME_COLOR}" stroke-width="2"/><path d="M30 20 V60" stroke="${POOL_FRAME_COLOR}" stroke-width="1.8"/><rect x="14" y="20" width="16" height="40" fill="${POOL_BAND_FILL}"/><path d="M30 20 V60" stroke="${POOL_FRAME_COLOR}" stroke-width="1.8"/></svg>`,
167
167
  // Two participants stacked, and the dashed line between them is the whole
168
168
  // point of the card: a message flow is the one arrow that crosses a pool.
169
169
  // Its source terminator is a FILLED disc, matching what `renderCircle`
170
170
  // actually paints rather than the hollow ring the norm asks for — a preview
171
171
  // has one job, which is to look like what lands on the board.
172
- messageExchange: `<svg ${A} fill="none"><rect x="14" y="8" width="107" height="27" rx="3" stroke="#262626" stroke-width="1.6"/><rect x="14" y="8" width="11" height="27" fill="#f4f4f5"/><path d="M25 8 V35" stroke="#262626" stroke-width="1.4"/><rect x="14" y="45" width="107" height="27" rx="3" stroke="#262626" stroke-width="1.6"/><rect x="14" y="45" width="11" height="27" fill="#f4f4f5"/><path d="M25 45 V72" stroke="#262626" stroke-width="1.4"/><circle cx="33" cy="21.5" r="4.5" stroke="#43a06b" stroke-width="1.6"/><rect x="46" y="14" width="26" height="15" rx="3" stroke="#262626" stroke-width="1.6"/><circle cx="88" cy="21.5" r="4.5" stroke="#cf5648" stroke-width="2.6"/><rect x="46" y="51" width="26" height="15" rx="3" stroke="#262626" stroke-width="1.6"/><path d="M41 21.5 H46 M72 21.5 H83" stroke="#262626" stroke-width="1.4"/><circle cx="59" cy="31.5" r="2.2" fill="#262626"/><path d="M59 34 V48" stroke="#262626" stroke-width="1.4" stroke-dasharray="3 2.4"/><path d="M56 46 L59 50 L62 46" stroke="#262626" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
172
+ messageExchange: `<svg ${A} fill="none"><rect x="14" y="8" width="107" height="27" rx="3" stroke="${POOL_FRAME_COLOR}" stroke-width="1.6"/><rect x="14" y="8" width="11" height="27" fill="${POOL_BAND_FILL}"/><path d="M25 8 V35" stroke="${POOL_FRAME_COLOR}" stroke-width="1.4"/><rect x="14" y="45" width="107" height="27" rx="3" stroke="${POOL_FRAME_COLOR}" stroke-width="1.6"/><rect x="14" y="45" width="11" height="27" fill="${POOL_BAND_FILL}"/><path d="M25 45 V72" stroke="${POOL_FRAME_COLOR}" stroke-width="1.4"/><circle cx="33" cy="21.5" r="4.5" stroke="${EVENT_START}" stroke-width="1.6"/><rect x="46" y="14" width="26" height="15" rx="3" stroke="${NEUTRAL_STROKE}" stroke-width="1.6"/><circle cx="88" cy="21.5" r="4.5" stroke="${EVENT_END}" stroke-width="2.6"/><rect x="46" y="51" width="26" height="15" rx="3" stroke="${NEUTRAL_STROKE}" stroke-width="1.6"/><path d="M41 21.5 H46 M72 21.5 H83" stroke="${SEQUENCE_STROKE}" stroke-width="1.4"/><circle cx="59" cy="31.5" r="2.2" fill="${MESSAGE_STROKE}"/><path d="M59 34 V48" stroke="${MESSAGE_STROKE}" stroke-width="1.4" stroke-dasharray="3 2.4"/><path d="M56 46 L59 50 L62 46" stroke="${MESSAGE_STROKE}" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
173
173
  };
174
174
  /* ── The two worked scenes ────────────────────────────────────────────────── */
175
175
  /** A hand-composed card — what is left once the artefacts are derived. */
package/dist/toolbar/icons.js CHANGED
@@ -1,11 +1,12 @@
1
1
  import { svg } from 'lit';
2
+ import { NEUTRAL_STROKE, NODE_FILL, POOL_CARD_FILL, POOL_FRAME_COLOR, } from '../consts.js';
2
3
  /** Colored BPMN glyph for the main toolbar button: a pool (green name band) with
3
4
  * a single activity inside. */
4
5
  export const bpmnToolbarIcon = svg `<svg width="100%" height="100%" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
5
- <rect x="4" y="13" width="48" height="30" rx="3" fill="#ffffff" stroke="#262626" stroke-width="2.2"/>
6
+ <rect x="4" y="13" width="48" height="30" rx="3" fill="${POOL_CARD_FILL}" stroke="${POOL_FRAME_COLOR}" stroke-width="2.2"/>
6
7
  <path d="M6 14 h5 v28 h-5 z" fill="#43a06b"/>
7
- <line x1="11" y1="13" x2="11" y2="43" stroke="#262626" stroke-width="1.8"/>
8
- <rect x="20" y="20" width="24" height="16" rx="3.5" fill="#ffffff" stroke="#262626" stroke-width="2.2"/>
8
+ <line x1="11" y1="13" x2="11" y2="43" stroke="${POOL_FRAME_COLOR}" stroke-width="1.8"/>
9
+ <rect x="20" y="20" width="24" height="16" rx="3.5" fill="${NODE_FILL}" stroke="${NEUTRAL_STROKE}" stroke-width="2.2"/>
9
10
  </svg>`;
10
11
  /** Export BPMN XML — a document with an arrow leaving it. */
11
12
  export const bpmnExportXmlIcon = svg `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@formicoidea/labre-framework-bpmn",
3
3
  "description": "Labre bpmn framework for @formicoidea/labre-core.",
4
- "version": "0.39.1",
4
+ "version": "0.40.0",
5
5
  "type": "module",
6
6
  "sideEffects": false,
7
7
  "author": "lajola",
@@ -31,7 +31,7 @@
31
31
  "dist"
32
32
  ],
33
33
  "dependencies": {
34
- "@formicoidea/labre-core": "0.39.1",
34
+ "@formicoidea/labre-core": "0.40.0",
35
35
  "lit": "^3.2.0"
36
36
  }
37
37
  }