@formicoidea/labre-framework-wardley 0.39.3 → 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 (9) hide show
  1. package/dist/consts.d.ts +8 -1
  2. package/dist/consts.js +14 -6
  3. package/dist/legend.js +9 -8
  4. package/dist/node/consts.d.ts +29 -6
  5. package/dist/node/consts.js +29 -5
  6. package/dist/templates/index.js +15 -14
  7. package/dist/templates/maps.js +7 -6
  8. package/dist/toolbar/icons.js +16 -15
  9. package/package.json +2 -2
package/dist/consts.d.ts CHANGED
@@ -65,7 +65,14 @@ export declare const AXIS_LABELS: {
65
65
  visibilityHigh: string;
66
66
  visibilityLow: string;
67
67
  };
68
- /** Colors (light theme, faithful to the reference renderer / mockup C). */
68
+ /**
69
+ * Colors (light theme, faithful to the reference renderer / mockup C).
70
+ *
71
+ * The neutrals are the shared notation scale, of which Wardley is the
72
+ * reference: the values are unchanged, they are simply read from the one place
73
+ * every framework reads them from. The first phase band is the scale's band
74
+ * tint; the three after it are Wardley's own graded wash.
75
+ */
69
76
  export declare const COLORS: {
70
77
  card: string;
71
78
  cardBorder: string;
package/dist/consts.js CHANGED
@@ -1,3 +1,4 @@
1
+ import { NOTATION_NEUTRALS } from '@formicoidea/labre-core/shared/consts';
1
2
  /**
2
3
  * Visual constants for the Wardley map background.
3
4
  *
@@ -51,13 +52,20 @@ export const AXIS_LABELS = {
51
52
  visibilityHigh: 'Visible',
52
53
  visibilityLow: 'Invisible',
53
54
  };
54
- /** Colors (light theme, faithful to the reference renderer / mockup C). */
55
+ /**
56
+ * Colors (light theme, faithful to the reference renderer / mockup C).
57
+ *
58
+ * The neutrals are the shared notation scale, of which Wardley is the
59
+ * reference: the values are unchanged, they are simply read from the one place
60
+ * every framework reads them from. The first phase band is the scale's band
61
+ * tint; the three after it are Wardley's own graded wash.
62
+ */
55
63
  export const COLORS = {
56
- card: '#ffffff',
57
- cardBorder: '#e3e2e4',
58
- axis: '#3b3d42',
59
- divider: '#9aa0a6',
60
- label: '#6b7280',
64
+ card: NOTATION_NEUTRALS.cardFill,
65
+ cardBorder: NOTATION_NEUTRALS.cardBorder,
66
+ axis: NOTATION_NEUTRALS.frameInk,
67
+ divider: NOTATION_NEUTRALS.divider,
68
+ label: NOTATION_NEUTRALS.label,
61
69
  band: ['#f7faff', '#eef4fb', '#e6eef8', '#dde8f4'],
62
70
  };
63
71
  export const FONT_FAMILY = 'Inter, sans-serif';
package/dist/legend.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import { createGroupCommand } from '@formicoidea/labre-core/gfx/group';
2
2
  import { ConnectorElementModel, ConnectorMode, FontFamily, PointStyle, ShapeElementModel, ShapeStyle, StrokeStyle, WardleyNodeElementModel, } from '@formicoidea/labre-core/model';
3
+ import { NOTATION_NEUTRALS } from '@formicoidea/labre-core/shared/consts';
3
4
  import { Bound } from '@formicoidea/labre-core/global/gfx';
4
5
  import { GfxControllerIdentifier } from '@formicoidea/labre-core/std/gfx';
5
6
  import { GRADIENT_GREEN, GRADIENT_RED } from './gradient.js';
@@ -48,7 +49,7 @@ const LEGEND_GRADIENT = {
48
49
  },
49
50
  'evolution-gradient': {
50
51
  caption: "Gradient representing the growth of Wardley's evolution function.",
51
- swatch: ['#9aa0a6', '#cfd2d6'],
52
+ swatch: [NOTATION_NEUTRALS.divider, NOTATION_NEUTRALS.legendBorder],
52
53
  },
53
54
  };
54
55
  /* ── Porter's five forces: the panel under the rows ───────────────────── */
@@ -74,7 +75,7 @@ const PORTER_PANEL = {
74
75
  captionFs: 13,
75
76
  captionH: 21,
76
77
  backing: '#e5e7eb',
77
- backingStroke: '#9aa0a6',
78
+ backingStroke: NOTATION_NEUTRALS.divider,
78
79
  };
79
80
  /** The four forces the boxes name, north first and then clockwise. */
80
81
  const PORTER_FORCES = [
@@ -482,8 +483,8 @@ export function createWardleyLegend(std, bg) {
482
483
  type: 'shape',
483
484
  shapeType: 'rect',
484
485
  filled: true,
485
- fillColor: '#ffffff',
486
- strokeColor: '#cfd2d6',
486
+ fillColor: NOTATION_NEUTRALS.cardFill,
487
+ strokeColor: NOTATION_NEUTRALS.legendBorder,
487
488
  strokeWidth: 1,
488
489
  shapeStyle: ShapeStyle.General,
489
490
  roughness: 0,
@@ -507,8 +508,8 @@ export function createWardleyLegend(std, bg) {
507
508
  type: 'shape',
508
509
  shapeType: 'rect',
509
510
  filled: true,
510
- fillColor: '#cfd2d6',
511
- strokeColor: '#cfd2d6',
511
+ fillColor: NOTATION_NEUTRALS.legendBorder,
512
+ strokeColor: NOTATION_NEUTRALS.legendBorder,
512
513
  strokeWidth: 0,
513
514
  shapeStyle: ShapeStyle.General,
514
515
  roughness: 0,
@@ -525,7 +526,7 @@ export function createWardleyLegend(std, bg) {
525
526
  shapeType: 'rect',
526
527
  filled: true,
527
528
  fillColor: col,
528
- strokeColor: '#cfd2d6',
529
+ strokeColor: NOTATION_NEUTRALS.legendBorder,
529
530
  strokeWidth: 0.5,
530
531
  shapeStyle: ShapeStyle.General,
531
532
  roughness: 0,
@@ -592,7 +593,7 @@ export function createWardleyLegend(std, bg) {
592
593
  type: 'shape',
593
594
  shapeType: 'rect',
594
595
  filled: true,
595
- fillColor: '#ffffff',
596
+ fillColor: NODE_FILL,
596
597
  strokeColor: NODE_STROKE,
597
598
  strokeWidth: 1,
598
599
  shapeStyle: ShapeStyle.General,
package/dist/node/consts.d.ts CHANGED
@@ -9,8 +9,9 @@
9
9
  */
10
10
  /** Default node diameter (= the map label font size, 18). White fill, thin border. */
11
11
  export declare const NODE_SIZE = 18;
12
- export declare const NODE_FILL = "#ffffff";
13
- export declare const NODE_STROKE = "#1f2328";
12
+ /** The shared notation scale's card fill and ink — Wardley is its reference. */
13
+ export declare const NODE_FILL: string;
14
+ export declare const NODE_STROKE: string;
14
15
  /** Thin border, matching the link / silhouette line weight. */
15
16
  export declare const NODE_STROKE_WIDTH = 1;
16
17
  /**
@@ -53,11 +54,33 @@ export declare const PIPELINE_LABEL = "Pipeline";
53
54
  * to the 1px node border.
54
55
  */
55
56
  export declare const LINK_STROKE_WIDTH = 2;
56
- /** Wardley red ("future"/evolution) — matches the validated arrow icon. */
57
+ /**
58
+ * Wardley red ("future"/evolution) — matches the validated arrow icon.
59
+ *
60
+ * An IDENTITY colour: the legend recognises a stored evolution link by it
61
+ * (`legend.ts`, `el.stroke === WARDLEY_RED`). It stays a literal and must never
62
+ * be derived from `NOTATION_NEUTRALS` or any other scale — a change of value
63
+ * would orphan every link already drawn with it.
64
+ */
57
65
  export declare const WARDLEY_RED = "#d6455d";
58
- /** Dependency link grey. */
66
+ /**
67
+ * Dependency link grey.
68
+ *
69
+ * An IDENTITY colour: the legend recognises a stored dependency link by it
70
+ * (`legend.ts`, `el.stroke === LINK_GREY`). It stays a literal and must never
71
+ * be derived from `NOTATION_NEUTRALS` — a change of value would orphan every
72
+ * link already drawn with it.
73
+ */
59
74
  export declare const LINK_GREY = "#666666";
60
- /** Inertia bar color + size. */
75
+ /**
76
+ * Inertia bar color + size.
77
+ *
78
+ * An IDENTITY colour: the legend recognises a stored inertia bar by it
79
+ * (`legend.ts`, `el.fillColor === INERTIA_COLOR`). It happens to equal the
80
+ * scale's ink today, but it stays a literal and must never be derived from
81
+ * `NOTATION_NEUTRALS`: a change of the shared ink would orphan every inertia bar
82
+ * already on a map.
83
+ */
61
84
  export declare const INERTIA_COLOR = "#1f2328";
62
85
  export declare const INERTIA_SIZE: {
63
86
  w: number;
@@ -75,7 +98,7 @@ export declare const MARKET_DOT_RING = 8;
75
98
  export declare const MARKET_DOT_STROKE_WIDTH = 2;
76
99
  /** Triangle connectors: thin + dark, no arrows. */
77
100
  export declare const MARKET_LINK_WIDTH = 1;
78
- export declare const MARKET_LINK_COLOR = "#1f2328";
101
+ export declare const MARKET_LINK_COLOR: string;
79
102
  export declare const MARKET_LABEL = "Market";
80
103
  /**
81
104
  * Ecosystem node: a single connectable circle drawn as a GLYPH — a double border
package/dist/node/consts.js CHANGED
@@ -1,3 +1,4 @@
1
+ import { NOTATION_NEUTRALS } from '@formicoidea/labre-core/shared/consts';
1
2
  /**
2
3
  * Visual constants for Wardley nodes (component + anchor) and the connector /
3
4
  * inertia presets created from the Wardley menu.
@@ -9,8 +10,9 @@
9
10
  */
10
11
  /** Default node diameter (= the map label font size, 18). White fill, thin border. */
11
12
  export const NODE_SIZE = 18;
12
- export const NODE_FILL = '#ffffff';
13
- export const NODE_STROKE = '#1f2328';
13
+ /** The shared notation scale's card fill and ink — Wardley is its reference. */
14
+ export const NODE_FILL = NOTATION_NEUTRALS.cardFill;
15
+ export const NODE_STROKE = NOTATION_NEUTRALS.ink;
14
16
  /** Thin border, matching the link / silhouette line weight. */
15
17
  export const NODE_STROKE_WIDTH = 1;
16
18
  /**
@@ -50,11 +52,33 @@ export const PIPELINE_LABEL = 'Pipeline';
50
52
  * to the 1px node border.
51
53
  */
52
54
  export const LINK_STROKE_WIDTH = 2;
53
- /** Wardley red ("future"/evolution) — matches the validated arrow icon. */
55
+ /**
56
+ * Wardley red ("future"/evolution) — matches the validated arrow icon.
57
+ *
58
+ * An IDENTITY colour: the legend recognises a stored evolution link by it
59
+ * (`legend.ts`, `el.stroke === WARDLEY_RED`). It stays a literal and must never
60
+ * be derived from `NOTATION_NEUTRALS` or any other scale — a change of value
61
+ * would orphan every link already drawn with it.
62
+ */
54
63
  export const WARDLEY_RED = '#d6455d';
55
- /** Dependency link grey. */
64
+ /**
65
+ * Dependency link grey.
66
+ *
67
+ * An IDENTITY colour: the legend recognises a stored dependency link by it
68
+ * (`legend.ts`, `el.stroke === LINK_GREY`). It stays a literal and must never
69
+ * be derived from `NOTATION_NEUTRALS` — a change of value would orphan every
70
+ * link already drawn with it.
71
+ */
56
72
  export const LINK_GREY = '#666666';
57
- /** Inertia bar color + size. */
73
+ /**
74
+ * Inertia bar color + size.
75
+ *
76
+ * An IDENTITY colour: the legend recognises a stored inertia bar by it
77
+ * (`legend.ts`, `el.fillColor === INERTIA_COLOR`). It happens to equal the
78
+ * scale's ink today, but it stays a literal and must never be derived from
79
+ * `NOTATION_NEUTRALS`: a change of the shared ink would orphan every inertia bar
80
+ * already on a map.
81
+ */
58
82
  export const INERTIA_COLOR = '#1f2328';
59
83
  export const INERTIA_SIZE = { w: 8, h: 44 };
60
84
  /**
package/dist/templates/index.js CHANGED
@@ -3,7 +3,8 @@ import { ConnectorMode, PointStyle, StrokeStyle } from '@formicoidea/labre-core/
3
3
  import { GfxControllerIdentifier } from '@formicoidea/labre-core/std/gfx';
4
4
  import { lowerWardleyArea } from '../actions.js';
5
5
  import { wardleyCommands } from '../commands.js';
6
- import { LINK_GREY, LINK_STROKE_WIDTH, WARDLEY_RED } from '../node/consts.js';
6
+ import { COLORS } from '../consts.js';
7
+ import { INERTIA_COLOR, LINK_GREY, LINK_STROKE_WIDTH, NODE_FILL, NODE_STROKE, WARDLEY_RED, } from '../node/consts.js';
7
8
  import { WARDLEY_ROLE } from '../roles.js';
8
9
  import { wardleyMaps } from './maps.js';
9
10
  /**
@@ -64,12 +65,12 @@ function connect(source, target, opts = {}) {
64
65
  };
65
66
  }
66
67
  const ATTRS = 'width="100%" height="100%" viewBox="0 0 135 80" xmlns="http://www.w3.org/2000/svg"';
67
- const bgPreview = (extra = '') => `<svg ${ATTRS} fill="none"><path d="M22 12 V64 H120" stroke="#3b3d42" stroke-width="2"/><path d="M44 12 V64 M68 12 V64 M94 12 V64" stroke="#9aa0a6" stroke-width="0.8"/>${extra}</svg>`;
68
- const dotPreview = (fill, sw = 2) => `<svg ${ATTRS} fill="none"><circle cx="67" cy="40" r="13" fill="${fill}" stroke="#1f2328" stroke-width="${sw}"/></svg>`;
68
+ const bgPreview = (extra = '') => `<svg ${ATTRS} fill="none"><path d="M22 12 V64 H120" stroke="${COLORS.axis}" stroke-width="2"/><path d="M44 12 V64 M68 12 V64 M94 12 V64" stroke="${COLORS.divider}" stroke-width="0.8"/>${extra}</svg>`;
69
+ const dotPreview = (fill, sw = 2) => `<svg ${ATTRS} fill="none"><circle cx="67" cy="40" r="13" fill="${fill}" stroke="${NODE_STROKE}" stroke-width="${sw}"/></svg>`;
69
70
  /** The two fat arrows: the same outline, mirrored — the direction IS the kind. */
70
71
  const arrowPreview = (rightwards) => `<svg ${ATTRS} fill="none"><path d="${rightwards
71
72
  ? 'M32 32 H80 V23 L103 40 L80 57 V48 H32 Z'
72
- : 'M103 32 H55 V23 L32 40 L55 57 V48 H103 Z'}" fill="#bfbfbf" stroke="#1f2328" stroke-width="1.8" stroke-linejoin="round"/></svg>`;
73
+ : 'M103 32 H55 V23 L32 40 L55 57 V48 H103 Z'}" fill="#bfbfbf" stroke="${NODE_STROKE}" stroke-width="1.8" stroke-linejoin="round"/></svg>`;
73
74
  /** The zone, in its Peace wash — the pair differs on the outline and on nothing else. */
74
75
  const areaPreview = (outline) => `<svg ${ATTRS} fill="none">${outline}</svg>`;
75
76
  /** A hand-composed template — what is left once the artefacts are derived. */
@@ -104,14 +105,14 @@ export const wardleyTemplateCategory = {
104
105
  templateFromCommand(byId('wardley.addOpportunityBackground'), bgPreview('<rect x="22" y="12" width="98" height="52" fill="#eef4fb" opacity="0.6"/>'), 'Opportunity gradient'),
105
106
  templateFromCommand(byId('wardley.addBenefitBackground'), bgPreview('<rect x="22" y="12" width="98" height="26" fill="#e6eef8" opacity="0.6"/>'), 'Benefit gradient'),
106
107
  templateFromCommand(byId('wardley.addEvolutionBackground'), bgPreview('<rect x="22" y="12" width="98" height="52" fill="#e3e2e4" opacity="0.5"/>'), 'Evolution gradient'),
107
- templateFromCommand(byId('wardley.addComponent'), dotPreview('#ffffff', 1.5), 'Component'),
108
- templateFromCommand(byId('wardley.addMethod'), `<svg ${ATTRS} fill="none"><circle cx="67" cy="40" r="15" fill="#d9d9d9" stroke="#1f2328" stroke-width="1.5"/><circle cx="67" cy="40" r="7" fill="#fff" stroke="#1f2328"/></svg>`, 'Method'),
109
- templateFromCommand(byId('wardley.addMarket'), `<svg ${ATTRS} fill="none"><circle cx="67" cy="40" r="16" fill="#fff" stroke="#1f2328"/><circle cx="67" cy="30" r="3.5" fill="#fff" stroke="#1f2328" stroke-width="1.5"/><circle cx="75" cy="46" r="3.5" fill="#fff" stroke="#1f2328" stroke-width="1.5"/><circle cx="59" cy="46" r="3.5" fill="#fff" stroke="#1f2328" stroke-width="1.5"/><path d="M67 30 L75 46 L59 46 Z" stroke="#1f2328" stroke-width="0.8" fill="none"/></svg>`, 'Market'),
110
- templateFromCommand(byId('wardley.addEcosystem'), `<svg ${ATTRS} fill="none"><circle cx="67" cy="40" r="15" fill="#fff" stroke="#1f2328" stroke-width="1.5"/><circle cx="67" cy="40" r="11" fill="none" stroke="#1f2328"/><circle cx="67" cy="40" r="5" fill="#fff" stroke="#1f2328"/></svg>`, 'Ecosystem'),
111
- templateFromCommand(byId('wardley.addAnchor'), `<svg ${ATTRS} fill="none"><circle cx="67" cy="40" r="13" fill="#fff" stroke="#1f2328" stroke-width="1.5"/><circle cx="67" cy="36" r="3.5" fill="#1f2328"/><path d="M59 48 q8 -9 16 0" stroke="#1f2328" stroke-width="1.5" fill="none"/></svg>`, 'Anchor'),
112
- templateFromCommand(byId('wardley.addPipeline'), `<svg ${ATTRS} fill="none"><rect x="34" y="40" width="66" height="14" fill="#fff" stroke="#1f2328"/><rect x="60" y="33" width="14" height="14" fill="#fff" stroke="#1f2328"/></svg>`, 'Pipeline'),
113
- templateFromCommand(byId('wardley.addInertia'), `<svg ${ATTRS} fill="none"><rect x="63" y="22" width="8" height="36" fill="#1f2328"/></svg>`, 'Inertia'),
114
- templateFromCommand(byId('wardley.addPorter'), `<svg ${ATTRS} fill="none"><circle cx="67" cy="40" r="13" fill="#fff" stroke="#1f2328" stroke-width="1.5"/><g stroke="${WARDLEY_RED}" stroke-width="2" stroke-linecap="round"><line x1="67" y1="26" x2="67" y2="19"/><line x1="81" y1="40" x2="88" y2="40"/><line x1="67" y1="54" x2="67" y2="61"/><line x1="53" y1="40" x2="46" y2="40"/></g><g fill="${WARDLEY_RED}"><path d="M67 13 L71 21 H63 Z"/><path d="M94 40 L86 44 V36 Z"/><path d="M67 67 L63 59 H71 Z"/><path d="M40 40 L48 36 V44 Z"/></g></svg>`),
108
+ templateFromCommand(byId('wardley.addComponent'), dotPreview(NODE_FILL, 1.5), 'Component'),
109
+ templateFromCommand(byId('wardley.addMethod'), `<svg ${ATTRS} fill="none"><circle cx="67" cy="40" r="15" fill="#d9d9d9" stroke="${NODE_STROKE}" stroke-width="1.5"/><circle cx="67" cy="40" r="7" fill="${NODE_FILL}" stroke="${NODE_STROKE}"/></svg>`, 'Method'),
110
+ templateFromCommand(byId('wardley.addMarket'), `<svg ${ATTRS} fill="none"><circle cx="67" cy="40" r="16" fill="${NODE_FILL}" stroke="${NODE_STROKE}"/><circle cx="67" cy="30" r="3.5" fill="${NODE_FILL}" stroke="${NODE_STROKE}" stroke-width="1.5"/><circle cx="75" cy="46" r="3.5" fill="${NODE_FILL}" stroke="${NODE_STROKE}" stroke-width="1.5"/><circle cx="59" cy="46" r="3.5" fill="${NODE_FILL}" stroke="${NODE_STROKE}" stroke-width="1.5"/><path d="M67 30 L75 46 L59 46 Z" stroke="${NODE_STROKE}" stroke-width="0.8" fill="none"/></svg>`, 'Market'),
111
+ templateFromCommand(byId('wardley.addEcosystem'), `<svg ${ATTRS} fill="none"><circle cx="67" cy="40" r="15" fill="${NODE_FILL}" stroke="${NODE_STROKE}" stroke-width="1.5"/><circle cx="67" cy="40" r="11" fill="none" stroke="${NODE_STROKE}"/><circle cx="67" cy="40" r="5" fill="${NODE_FILL}" stroke="${NODE_STROKE}"/></svg>`, 'Ecosystem'),
112
+ templateFromCommand(byId('wardley.addAnchor'), `<svg ${ATTRS} fill="none"><circle cx="67" cy="40" r="13" fill="${NODE_FILL}" stroke="${NODE_STROKE}" stroke-width="1.5"/><circle cx="67" cy="36" r="3.5" fill="${NODE_STROKE}"/><path d="M59 48 q8 -9 16 0" stroke="${NODE_STROKE}" stroke-width="1.5" fill="none"/></svg>`, 'Anchor'),
113
+ templateFromCommand(byId('wardley.addPipeline'), `<svg ${ATTRS} fill="none"><rect x="34" y="40" width="66" height="14" fill="${NODE_FILL}" stroke="${NODE_STROKE}"/><rect x="60" y="33" width="14" height="14" fill="${NODE_FILL}" stroke="${NODE_STROKE}"/></svg>`, 'Pipeline'),
114
+ templateFromCommand(byId('wardley.addInertia'), `<svg ${ATTRS} fill="none"><rect x="63" y="22" width="8" height="36" fill="${INERTIA_COLOR}"/></svg>`, 'Inertia'),
115
+ templateFromCommand(byId('wardley.addPorter'), `<svg ${ATTRS} fill="none"><circle cx="67" cy="40" r="13" fill="${NODE_FILL}" stroke="${NODE_STROKE}" stroke-width="1.5"/><g stroke="${WARDLEY_RED}" stroke-width="2" stroke-linecap="round"><line x1="67" y1="26" x2="67" y2="19"/><line x1="81" y1="40" x2="88" y2="40"/><line x1="67" y1="54" x2="67" y2="61"/><line x1="53" y1="40" x2="46" y2="40"/></g><g fill="${WARDLEY_RED}"><path d="M67 13 L71 21 H63 Z"/><path d="M94 40 L86 44 V36 Z"/><path d="M67 67 L63 59 H71 Z"/><path d="M40 40 L48 36 V44 Z"/></g></svg>`),
115
116
  templateFromCommand(byId('wardley.addAccelerator'), arrowPreview(true)),
116
117
  templateFromCommand(byId('wardley.addDecelerator'), arrowPreview(false)),
117
118
  // NEUTRAL on purpose (`docs/adr/0010` § Compatibility). This is a horizontal
@@ -123,10 +124,10 @@ export const wardleyTemplateCategory = {
123
124
  // Hand-written, and the one pair that cannot derive: `linkTool` and
124
125
  // `evolutionArrow` ACTIVATE a tool rather than draw anything, so there is no
125
126
  // artefact to record — the user draws it.
126
- tpl('Link', `<svg ${ATTRS} fill="none"><path d="M24 40 H110" stroke="#666" stroke-width="2.4"/></svg>`, {
127
+ tpl('Link', `<svg ${ATTRS} fill="none"><path d="M24 40 H110" stroke="${LINK_GREY}" stroke-width="2.4"/></svg>`, {
127
128
  a: connect({ position: [0, 0] }, { position: [160, 0] }, { typed: false }),
128
129
  }),
129
- tpl('Evolution arrow', `<svg ${ATTRS} fill="none"><path d="M24 40 H100" stroke="#d6455d" stroke-width="2.4" stroke-dasharray="6 4"/><path d="M98 33 L112 40 L98 47 Z" fill="#d6455d"/></svg>`, {
130
+ tpl('Evolution arrow', `<svg ${ATTRS} fill="none"><path d="M24 40 H100" stroke="${WARDLEY_RED}" stroke-width="2.4" stroke-dasharray="6 4"/><path d="M98 33 L112 40 L98 47 Z" fill="${WARDLEY_RED}"/></svg>`, {
130
131
  a: connect({ position: [0, 0] }, { position: [160, 0] }, { evolution: true, typed: false }),
131
132
  }),
132
133
  areaTemplate('wardley.addAreaRect', areaPreview('<rect x="24" y="16" width="87" height="48" rx="2" fill="#c6dbfc" fill-opacity="0.25" stroke="#5b9cf6" stroke-width="1.5"/>')),
package/dist/templates/maps.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import { makeTemplateSnapshot, surfaceText, surfaceYMap, } from '@formicoidea/labre-core/gfx/template';
2
2
  import { ConnectorMode, FontFamily, PointStyle, ShapeStyle, StrokeStyle, TextAlign, } from '@formicoidea/labre-core/model';
3
- import { LINK_GREY, LINK_STROKE_WIDTH, NODE_FILL, NODE_SIZE, NODE_STROKE, WARDLEY_RED, } from '../node/consts.js';
3
+ import { COLORS } from '../consts.js';
4
+ import { INERTIA_COLOR, LINK_GREY, LINK_STROKE_WIDTH, NODE_FILL, NODE_SIZE, NODE_STROKE, WARDLEY_RED, } from '../node/consts.js';
4
5
  import { backgroundPlot, backgroundZoneBoundaries, } from '@formicoidea/labre-core/blocks/surface';
5
6
  import { WARDLEY_BACKGROUND } from '../background.js';
6
7
  import { WARDLEY_LABEL_H, wardleyInertiaProps, wardleyLabelProps, wardleyNodeProps, } from '../presets.js';
@@ -182,7 +183,7 @@ function panel(x, y, w, h) {
182
183
  type: 'shape',
183
184
  shapeType: 'rect',
184
185
  filled: true,
185
- fillColor: '#ffffff',
186
+ fillColor: NODE_FILL,
186
187
  strokeColor: NODE_STROKE,
187
188
  strokeWidth: 1.2,
188
189
  shapeStyle: ShapeStyle.General,
@@ -215,7 +216,7 @@ function title(str) {
215
216
  };
216
217
  }
217
218
  const ATTRS = 'width="100%" height="100%" viewBox="0 0 135 80" xmlns="http://www.w3.org/2000/svg"';
218
- const mapPreview = (extra) => `<svg ${ATTRS} fill="none"><path d="M22 12 V64 H120" stroke="#3b3d42" stroke-width="2"/>${extra}</svg>`;
219
+ const mapPreview = (extra) => `<svg ${ATTRS} fill="none"><path d="M22 12 V64 H120" stroke="${COLORS.axis}" stroke-width="2"/>${extra}</svg>`;
219
220
  function tpl(name, preview, elements) {
220
221
  return {
221
222
  name,
@@ -231,7 +232,7 @@ function ann(e, v) {
231
232
  type: 'shape',
232
233
  shapeType: 'ellipse',
233
234
  filled: true,
234
- fillColor: '#ffffff',
235
+ fillColor: NODE_FILL,
235
236
  strokeColor: NODE_STROKE,
236
237
  strokeWidth: 1.5,
237
238
  shapeStyle: ShapeStyle.General,
@@ -377,6 +378,6 @@ function kodak() {
377
378
  };
378
379
  }
379
380
  export const wardleyMaps = [
380
- tpl('Tea Shop', mapPreview('<circle cx="78" cy="24" r="3" fill="#fff" stroke="#1f2328"/><circle cx="50" cy="44" r="3" fill="#fff" stroke="#1f2328"/><circle cx="86" cy="40" r="3" fill="#fff" stroke="#1f2328"/><circle cx="92" cy="58" r="3" fill="#fff" stroke="#1f2328"/><path d="M78 24 L50 44 M78 24 L86 40 L92 58" stroke="#666"/><path d="M50 44 h22" stroke="#d6455d" stroke-dasharray="3 2"/>'), teaShop()),
381
- tpl('Kodak inertia', mapPreview('<circle cx="56" cy="22" r="3" fill="#fff" stroke="#1f2328"/><circle cx="54" cy="40" r="3" fill="#fff" stroke="#1f2328"/><circle cx="86" cy="40" r="3" fill="#fff" stroke="#d6455d"/><rect x="76" y="35" width="2.5" height="11" fill="#1f2328"/><path d="M57 40 h17" stroke="#d6455d" stroke-dasharray="3 2"/>'), kodak()),
381
+ tpl('Tea Shop', mapPreview(`<circle cx="78" cy="24" r="3" fill="${NODE_FILL}" stroke="${NODE_STROKE}"/><circle cx="50" cy="44" r="3" fill="${NODE_FILL}" stroke="${NODE_STROKE}"/><circle cx="86" cy="40" r="3" fill="${NODE_FILL}" stroke="${NODE_STROKE}"/><circle cx="92" cy="58" r="3" fill="${NODE_FILL}" stroke="${NODE_STROKE}"/><path d="M78 24 L50 44 M78 24 L86 40 L92 58" stroke="${LINK_GREY}"/><path d="M50 44 h22" stroke="${WARDLEY_RED}" stroke-dasharray="3 2"/>`), teaShop()),
382
+ tpl('Kodak inertia', mapPreview(`<circle cx="56" cy="22" r="3" fill="${NODE_FILL}" stroke="${NODE_STROKE}"/><circle cx="54" cy="40" r="3" fill="${NODE_FILL}" stroke="${NODE_STROKE}"/><circle cx="86" cy="40" r="3" fill="${NODE_FILL}" stroke="${WARDLEY_RED}"/><rect x="76" y="35" width="2.5" height="11" fill="${INERTIA_COLOR}"/><path d="M57 40 h17" stroke="${WARDLEY_RED}" stroke-dasharray="3 2"/>`), kodak()),
382
383
  ];
package/dist/toolbar/icons.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import { svg } from 'lit';
2
+ import { NODE_FILL, NODE_STROKE } from '../node/consts.js';
2
3
  /** Colored Wardley glyph (mockup proposal B) for the main toolbar button. */
3
4
  export const wardleyToolbarIcon = svg `<svg width="100%" height="100%" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
4
5
  <defs>
@@ -36,19 +37,19 @@ const RED = '#d6455d';
36
37
  const GREEN = '#1f9e4d';
37
38
  /** Component node (validated COMP-C2): single circle. */
38
39
  export const wardleyComponentIcon = svg `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
39
- <circle cx="12" cy="12" r="6.3" fill="#fff" stroke="currentColor" stroke-width="1.5"/>
40
+ <circle cx="12" cy="12" r="6.3" fill="${NODE_FILL}" stroke="currentColor" stroke-width="1.5"/>
40
41
  </svg>`;
41
42
  /** Anchor (validated ANCH-B): person glyph inscribed in a circle. */
42
43
  export const wardleyAnchorIcon = svg `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
43
- <circle cx="12" cy="12" r="6" fill="#fff" stroke="currentColor" stroke-width="1.6"/>
44
+ <circle cx="12" cy="12" r="6" fill="${NODE_FILL}" stroke="currentColor" stroke-width="1.6"/>
44
45
  <circle cx="12" cy="9.4" r="1.8" fill="none" stroke="currentColor" stroke-width="1.3"/>
45
46
  <path d="M7.4 15.9 C 8.2 12.1, 15.8 12.1, 16.6 15.9" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
46
47
  </svg>`;
47
48
  /** Dependency link (validated LINK-A3): two outline nodes joined by a line. */
48
49
  export const wardleyLinkIcon = svg `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
49
50
  <line x1="5.5" y1="16" x2="18.5" y2="8" stroke="currentColor" stroke-width="1.8"/>
50
- <circle cx="5.5" cy="16" r="2.2" fill="#fff" stroke="currentColor" stroke-width="1.5"/>
51
- <circle cx="18.5" cy="8" r="2.2" fill="#fff" stroke="currentColor" stroke-width="1.5"/>
51
+ <circle cx="5.5" cy="16" r="2.2" fill="${NODE_FILL}" stroke="currentColor" stroke-width="1.5"/>
52
+ <circle cx="18.5" cy="8" r="2.2" fill="${NODE_FILL}" stroke="currentColor" stroke-width="1.5"/>
52
53
  </svg>`;
53
54
  /** Evolution arrow (validated ARR-B): red dashed arrow. */
54
55
  export const wardleyArrowIcon = svg `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -63,21 +64,21 @@ export const wardleyInertiaIcon = svg `<svg width="24" height="24" viewBox="0 0
63
64
  </svg>`;
64
65
  /** Pipeline (validated PIPE-D): wide thin rect + square handle astride the top edge, thin borders. */
65
66
  export const wardleyPipelineIcon = svg `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
66
- <rect x="3.5" y="11" width="17" height="7" rx="1" fill="#fff" stroke="currentColor" stroke-width="1.2"/>
67
- <rect x="10" y="9" width="4" height="4" rx="0.6" fill="#fff" stroke="currentColor" stroke-width="1.2"/>
67
+ <rect x="3.5" y="11" width="17" height="7" rx="1" fill="${NODE_FILL}" stroke="currentColor" stroke-width="1.2"/>
68
+ <rect x="10" y="9" width="4" height="4" rx="0.6" fill="${NODE_FILL}" stroke="currentColor" stroke-width="1.2"/>
68
69
  </svg>`;
69
70
  /** Market (validated MKT-B): thin outer circle + 3 thick-bordered nodes wired in a triangle. */
70
71
  export const wardleyMarketIcon = svg `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
71
- <circle cx="12" cy="12" r="9.6" fill="#fff" stroke="currentColor" stroke-width="1.2"/>
72
+ <circle cx="12" cy="12" r="9.6" fill="${NODE_FILL}" stroke="currentColor" stroke-width="1.2"/>
72
73
  <path d="M12 6.6 L7.3 14.7 H16.7 Z" fill="none" stroke="currentColor" stroke-width="1.1"/>
73
- <circle cx="12" cy="6.6" r="2.3" fill="#fff" stroke="currentColor" stroke-width="2.1"/>
74
- <circle cx="7.3" cy="14.7" r="2.3" fill="#fff" stroke="currentColor" stroke-width="2.1"/>
75
- <circle cx="16.7" cy="14.7" r="2.3" fill="#fff" stroke="currentColor" stroke-width="2.1"/>
74
+ <circle cx="12" cy="6.6" r="2.3" fill="${NODE_FILL}" stroke="currentColor" stroke-width="2.1"/>
75
+ <circle cx="7.3" cy="14.7" r="2.3" fill="${NODE_FILL}" stroke="currentColor" stroke-width="2.1"/>
76
+ <circle cx="16.7" cy="14.7" r="2.3" fill="${NODE_FILL}" stroke="currentColor" stroke-width="2.1"/>
76
77
  </svg>`;
77
78
  /** Ecosystem (validated ECO-A): double border at the rim + hatching confined to the inner donut + hollow center. */
78
79
  export const wardleyEcosystemIcon = svg `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
79
80
  <defs><clipPath id="ecoHatch"><path d="M12 3.8 a8.2 8.2 0 1 0 0.001 0 Z M12 7.8 a4.2 4.2 0 1 1 -0.001 0 Z" clip-rule="evenodd"/></clipPath></defs>
80
- <circle cx="12" cy="12" r="9.8" fill="#fff" stroke="currentColor" stroke-width="1.2"/>
81
+ <circle cx="12" cy="12" r="9.8" fill="${NODE_FILL}" stroke="currentColor" stroke-width="1.2"/>
81
82
  <g clip-path="url(#ecoHatch)" stroke="currentColor" stroke-width="0.6">
82
83
  <line x1="2" y1="-8" x2="22" y2="12"/>
83
84
  <line x1="2" y1="-6" x2="22" y2="14"/>
@@ -91,12 +92,12 @@ export const wardleyEcosystemIcon = svg `<svg width="24" height="24" viewBox="0
91
92
  <line x1="2" y1="10" x2="22" y2="30"/>
92
93
  </g>
93
94
  <circle cx="12" cy="12" r="8.5" fill="none" stroke="currentColor" stroke-width="0.8"/>
94
- <circle cx="12" cy="12" r="4.2" fill="#fff" stroke="currentColor" stroke-width="1"/>
95
+ <circle cx="12" cy="12" r="4.2" fill="${NODE_FILL}" stroke="currentColor" stroke-width="1"/>
95
96
  </svg>`;
96
97
  /** Component + method (validated METH-A): component inscribed in a colored outer circle (default grey). */
97
98
  export const wardleyMethodIcon = svg `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
98
- <circle cx="12" cy="12" r="9.6" fill="#d9d9d9" stroke="#1f2328" stroke-width="1.2"/>
99
- <circle cx="12" cy="12" r="4.6" fill="#fff" stroke="#1f2328" stroke-width="1.2"/>
99
+ <circle cx="12" cy="12" r="9.6" fill="#d9d9d9" stroke="${NODE_STROKE}" stroke-width="1.2"/>
100
+ <circle cx="12" cy="12" r="4.6" fill="${NODE_FILL}" stroke="${NODE_STROKE}" stroke-width="1.2"/>
100
101
  </svg>`;
101
102
  /**
102
103
  * Porter's forces: a lettered circle pressed on from the four cardinal
@@ -108,7 +109,7 @@ export const wardleyMethodIcon = svg `<svg width="24" height="24" viewBox="0 0 2
108
109
  * 24 pixels. The circle keeps `currentColor` like every other artefact glyph.
109
110
  */
110
111
  export const wardleyPorterIcon = svg `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
111
- <circle cx="12" cy="12" r="5.4" fill="#fff" stroke="currentColor" stroke-width="1.3"/>
112
+ <circle cx="12" cy="12" r="5.4" fill="${NODE_FILL}" stroke="currentColor" stroke-width="1.3"/>
112
113
  <g stroke="${RED}" stroke-width="1.4" stroke-linecap="round">
113
114
  <line x1="12" y1="6" x2="12" y2="3.4"/>
114
115
  <line x1="18" y1="12" x2="20.6" y2="12"/>
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@formicoidea/labre-framework-wardley",
3
3
  "description": "Labre wardley framework for @formicoidea/labre-core.",
4
- "version": "0.39.3",
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.3",
34
+ "@formicoidea/labre-core": "0.40.0",
35
35
  "lit": "^3.2.0"
36
36
  }
37
37
  }