@formicoidea/labre-framework-wardley 0.31.0 → 0.33.0

package/dist/templates/index.js

@@ -1,8 +1,15 @@
 import { makeTemplateSnapshot, surfaceText, } from '@formicoidea/labre-core/gfx/template';
 import { ConnectorMode, FontFamily, PointStyle, ShapeStyle, StrokeStyle, TextAlign, } from '@formicoidea/labre-core/model';
 import { REF_WIDTH } from '../consts.js';
+import { WARDLEY_ROLE } from '../roles.js';
 import { wardleyMaps } from './maps.js';
 import { ECOSYSTEM_SIZE, HANDLE_SIZE, INERTIA_COLOR, INERTIA_SIZE, LABEL_FONT_SIZE, LINK_GREY, LINK_STROKE_WIDTH, MARKET_DOT_RING, MARKET_DOT_SIZE, MARKET_DOT_STROKE_WIDTH, MARKET_LINK_COLOR, MARKET_LINK_WIDTH, MARKET_SIZE, METHOD_FILL, METHOD_SIZE, NODE_FILL, NODE_SIZE, NODE_STROKE, NODE_STROKE_WIDTH, PIPELINE_FILL, PIPELINE_HEIGHT, PIPELINE_WIDTH, WARDLEY_RED, } from '../node/consts.js';
+/**
+ * Verbatim copy of `BACKGROUND_VARIANT_DEFAULTS` in `../actions.ts` — see the
+ * TODO there: both copies write English prose into the document for the two
+ * value-chain variants, and both go away together when the variant becomes
+ * part of the declaration.
+ */
 const VARIANT_DEFAULTS = {
     classic: {},
     opportunity: {
@@ -20,13 +27,24 @@ const VARIANT_DEFAULTS = {
 };
 const bg = (variant, w = REF_WIDTH) => {
     const h = Math.round((w * 9) / 16);
-    return { type: 'wardley', variant, ...VARIANT_DEFAULTS[variant], xywh: `[0,0,${w},${h}]` };
+    return {
+        type: 'wardley',
+        variant,
+        ...VARIANT_DEFAULTS[variant],
+        xywh: `[0,0,${w},${h}]`,
+    };
 };
 /** A wardley node ellipse positioned by top-left. */
-function node(kind, x, y, d = NODE_SIZE, fill = NODE_FILL, strokeWidth = NODE_STROKE_WIDTH) {
+function node(kind, x, y, d = NODE_SIZE, fill = NODE_FILL, strokeWidth = NODE_STROKE_WIDTH, 
+// Neutral for the market's inner dots, exactly as `createWardleyMarket` does:
+// glyph wiring, not artefacts.
+neutral = false) {
     return {
         type: 'wardleyNode',
         kind,
+        // A template must produce the same typed artefacts as the toolbox, so a
+        // map started from a preset validates like a hand-drawn one.
+        role: neutral ? undefined : WARDLEY_ROLE[kind],
         shapeType: 'ellipse',
         filled: true,
         fillColor: fill,
@@ -41,6 +59,7 @@ function label(x, y, str, align = 'left') {
     return {
         type: 'text',
         text: surfaceText(str),
+        role: WARDLEY_ROLE.label,
         color: NODE_STROKE,
         fontFamily: FontFamily.Inter,
         fontSize: LABEL_FONT_SIZE,
@@ -48,15 +67,35 @@ function label(x, y, str, align = 'left') {
         xywh: `[${x},${y},140,26]`,
     };
 }
+/**
+ * A Wardley connector for the palette samples.
+ *
+ * `evolution` is the ONE predicate that decides what the stroke means, here and
+ * in `maps.ts` alike — `docs/adr/0010` § Compatibility. The two kits used to
+ * test different things (`opts.red` here, `o.arrow` there), which was a style
+ * inconsistency until W4 started reading these edges and became a SEMANTIC one:
+ * what a rule governs must not depend on which authoring helper a template
+ * borrowed. Colour is a consequence of the meaning, never its source.
+ *
+ * `typed: false` drops the role altogether — for a sample that makes no claim
+ * about anything (see the "Link" swatch below).
+ */
 function connect(source, target, opts = {}) {
+    const role = opts.evolution
+        ? WARDLEY_ROLE.changeArrow
+        : WARDLEY_ROLE.dependency;
     return {
         type: 'connector',
         mode: ConnectorMode.Straight,
-        stroke: opts.red ? WARDLEY_RED : LINK_GREY,
-        strokeStyle: opts.red ? StrokeStyle.Dash : StrokeStyle.Solid,
+        // A template must produce the same typed artefacts as the toolbox, or a map
+        // started from a preset would validate differently from a hand-drawn one.
+        // `undefined` writes nothing: a neutral stroke keeps no `role` key.
+        role: opts.typed === false ? undefined : role,
+        stroke: opts.evolution ? WARDLEY_RED : LINK_GREY,
+        strokeStyle: opts.evolution ? StrokeStyle.Dash : StrokeStyle.Solid,
         strokeWidth: LINK_STROKE_WIDTH,
         frontEndpointStyle: PointStyle.None,
-        rearEndpointStyle: opts.red ? PointStyle.Triangle : PointStyle.None,
+        rearEndpointStyle: opts.evolution ? PointStyle.Triangle : PointStyle.None,
         source,
         target,
     };
@@ -64,6 +103,7 @@ function connect(source, target, opts = {}) {
 const inertia = (x = 0, y = 0) => ({
     type: 'shape',
     shapeType: 'rect',
+    role: WARDLEY_ROLE.inertia,
     filled: true,
     fillColor: INERTIA_COLOR,
     strokeColor: INERTIA_COLOR,
@@ -80,6 +120,7 @@ function pipeline() {
         body: {
             type: 'wardleyNode',
             kind: 'pipeline',
+            role: WARDLEY_ROLE.pipeline,
             shapeType: 'rect',
             filled: true,
             fillColor: PIPELINE_FILL,
@@ -93,6 +134,7 @@ function pipeline() {
         handle: {
             type: 'wardleyNode',
             kind: 'handle',
+            role: WARDLEY_ROLE.handle,
             shapeType: 'rect',
             filled: true,
             fillColor: NODE_FILL,
@@ -116,7 +158,9 @@ function market() {
         [rho * sin60, rho / 2],
         [-rho * sin60, rho / 2],
     ];
-    const dotAt = (vx, vy) => node('component', c + vx - MARKET_DOT_SIZE / 2, c + vy - MARKET_DOT_SIZE / 2, MARKET_DOT_SIZE, NODE_FILL, MARKET_DOT_STROKE_WIDTH);
+    const dotAt = (vx, vy) => node('component', c + vx - MARKET_DOT_SIZE / 2, c + vy - MARKET_DOT_SIZE / 2, MARKET_DOT_SIZE, NODE_FILL, MARKET_DOT_STROKE_WIDTH, true);
+    // Neutral on purpose: the triangle is the market glyph's own wiring, not a
+    // dependency the user drew (same rule as `createWardleyMarket`).
     const tri = (a, b) => ({
         type: 'connector',
         mode: ConnectorMode.Straight,
@@ -139,7 +183,9 @@ function market() {
         label: label(MARKET_SIZE + 8, 2, 'Market'),
     };
 }
-const single = (el) => ({ a: el });
+const single = (el) => ({
+    a: el,
+});
 const nodeWithLabel = (kind, d, fill, name) => ({
     n: node(kind, 0, 0, d, fill),
     l: label(d + 8, d / 2 - 13, name),
@@ -148,7 +194,12 @@ const ATTRS = 'width="100%" height="100%" viewBox="0 0 135 80" xmlns="http://www
 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>`;
 const dotPreview = (fill, sw = 2) => `<svg ${ATTRS} fill="none"><circle cx="67" cy="40" r="13" fill="${fill}" stroke="#1f2328" stroke-width="${sw}"/></svg>`;
 function tpl(name, preview, elements) {
-    return { name, type: 'template', preview, content: makeTemplateSnapshot(elements, name) };
+    return {
+        name,
+        type: 'template',
+        preview,
+        content: makeTemplateSnapshot(elements, name),
+    };
 }
 export const wardleyTemplateCategory = {
     name: 'Wardley',
@@ -165,7 +216,12 @@ export const wardleyTemplateCategory = {
         tpl('Pipeline', `<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()),
         tpl('Market', `<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()),
         tpl('Inertia', `<svg ${ATTRS} fill="none"><rect x="63" y="22" width="8" height="36" fill="#1f2328"/></svg>`, single(inertia())),
-        tpl('Link', `<svg ${ATTRS} fill="none"><path d="M24 40 H110" stroke="#666" stroke-width="2.4"/></svg>`, single(connect({ position: [0, 0] }, { position: [160, 0] }))),
-        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>`, single(connect({ position: [0, 0] }, { position: [160, 0] }, { red: true }))),
+        // NEUTRAL on purpose (`docs/adr/0010` § Compatibility). This is a horizontal
+        // stroke bound to nothing — a sample of a STYLE, in a palette. It was typed
+        // `wardley:dependency` only because the helper defaults to that role, and a
+        // sample of a stroke makes no claim about who depends on whom. Same call the
+        // market glyph's own wiring already makes.
+        tpl('Link', `<svg ${ATTRS} fill="none"><path d="M24 40 H110" stroke="#666" stroke-width="2.4"/></svg>`, single(connect({ position: [0, 0] }, { position: [160, 0] }, { typed: false }))),
+        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>`, single(connect({ position: [0, 0] }, { position: [160, 0] }, { evolution: true, typed: false }))),
     ],
 };

package/dist/templates/maps.js

@@ -1,6 +1,9 @@
 import { makeTemplateSnapshot, surfaceText, } from '@formicoidea/labre-core/gfx/template';
 import { ConnectorMode, FontFamily, PointStyle, ShapeStyle, StrokeStyle, TextAlign, } from '@formicoidea/labre-core/model';
 import { INERTIA_COLOR, LABEL_FONT_SIZE, LINK_GREY, LINK_STROKE_WIDTH, NODE_FILL, NODE_SIZE, NODE_STROKE, WARDLEY_RED, } from '../node/consts.js';
+import { backgroundPlot, backgroundZoneBoundaries, } from '@formicoidea/labre-core/blocks/surface';
+import { WARDLEY_BACKGROUND } from '../background.js';
+import { WARDLEY_ROLE } from '../roles.js';
 /**
  * Authoring kit for canonical Wardley maps. Positions are given as
  * (evolution 0..1, value 0..1) and mapped into the plot interior of a fixed
@@ -11,19 +14,69 @@ import { INERTIA_COLOR, LABEL_FONT_SIZE, LINK_GREY, LINK_STROKE_WIDTH, NODE_FILL
  * arrow is the red dashed connector. Legends are produced by the editor's
  * auto-legend action rather than baked into the template.
  */
-const W = 1600;
-const H = 900;
-const PL = { x: 70, y: 56, w: 1470, h: 786 };
+const W = WARDLEY_BACKGROUND.geometry.width;
+const H = WARDLEY_BACKGROUND.geometry.height;
+/**
+ * The plot these templates lay their nodes out in — THE DECLARATION'S, read off
+ * `geometry.margin` rather than copied.
+ *
+ * It used to be a hand-written `{x:70, y:56, w:1470, h:786}`, inset further than
+ * the drawn plot (`x 40 → 1570, y 30 → 862`), with a comment calling the drift
+ * "harmless (everything lands inside the map) but not the same number".
+ *
+ * It stopped being harmless the moment a RULE measured against the plot. W2
+ * asks whether an inertia bar sits on a declared phase transition, and a
+ * transition is a ratio OF THE PLOT: two plots means an evolution of `0.7` in a
+ * template lands 25 units away from the `0.7` the background draws. The
+ * templates were laid out in one frame of reference and judged in another.
+ *
+ * Deriving it removes the possibility. The nodes of every preset move by a few
+ * units, which is a visual change to FACTORY CONTENT — acceptable, and the
+ * reason this could be fixed at the source rather than worked around: no user
+ * document is touched, because a template is data we ship, not data they wrote.
+ */
+const PLOT = backgroundPlot(WARDLEY_BACKGROUND, W, H);
+const PL = { x: PLOT.x0, y: PLOT.y0, w: PLOT.width, h: PLOT.height };
 const ex = (e) => PL.x + e * PL.w;
 const vy = (v) => PL.y + (1 - v) * PL.h;
 const D = NODE_SIZE; // 18
-const bg = (variant = 'classic') => ({ type: 'wardley', variant, xywh: `[0,0,${W},${H}]` });
+/** The evolution transitions, as plot ratios, straight from the declaration. */
+const PHASES = backgroundZoneBoundaries(WARDLEY_BACKGROUND).x;
+/**
+ * Where the segment `from → to` crosses the evolution transition at `PHASES[i]`,
+ * in (evolution, value) coordinates.
+ *
+ * This is where an inertia bar belongs: astride the boundary the thing refuses
+ * to cross — which is all W2 asks since the PO spelled it out (02/08/2026) — and
+ * on the dependency that would have to move, which the rule no longer demands
+ * and a well-drawn map still shows. Computed rather than eyeballed, so the
+ * symbol stays on both whatever the declaration says either of them is.
+ */
+function crossing(from, to, i) {
+    const at = PHASES[i];
+    const t = (at - from[0]) / (to[0] - from[0]);
+    return [at, from[1] + t * (to[1] - from[1])];
+}
+// The map carries `wardley:map`: rules position artefacts against the ROLE, so
+// a templated map is a first-class frame like a hand-drawn one — and since
+// PF13.4 every artefact these presets lay on it (nodes, labels, links, change
+// arrows, inertia bars) carries the same role the toolbox writes.
+const bg = (variant = 'classic') => ({
+    type: WARDLEY_BACKGROUND.type,
+    role: WARDLEY_BACKGROUND.role,
+    resizeEnabled: WARDLEY_BACKGROUND.geometry.resizable,
+    variant,
+    xywh: `[0,0,${W},${H}]`,
+});
 function dot(e, v, sw, stroke = NODE_STROKE, fill = NODE_FILL) {
     const cx = ex(e);
     const cy = vy(v);
     return {
         type: 'wardleyNode',
         kind: 'component',
+        // Templates carry the same semantic roles as the toolbox, so a map started
+        // from a preset validates exactly like a hand-drawn one.
+        role: WARDLEY_ROLE.component,
         shapeType: 'ellipse',
         filled: true,
         fillColor: fill,
@@ -43,6 +96,7 @@ function stake(e, v) {
     return {
         type: 'wardleyNode',
         kind: 'anchor',
+        role: WARDLEY_ROLE.anchor,
         shapeType: 'ellipse',
         filled: true,
         fillColor: NODE_FILL,
@@ -64,22 +118,53 @@ function lbl(e, v, text, o = {}) {
     return {
         type: 'text',
         text: surfaceText(text),
+        // The NAME of an artefact, so it carries the label role W3 is written on.
+        // The free texts these presets also use for notes and legends stay neutral:
+        // they name nothing and nothing measures them.
+        role: WARDLEY_ROLE.label,
         color: o.color ?? NODE_STROKE,
         fontFamily: FontFamily.Inter,
         fontSize: o.size ?? LABEL_FONT_SIZE,
-        textAlign: align === 'right' ? TextAlign.Right : align === 'center' ? TextAlign.Center : TextAlign.Left,
+        textAlign: align === 'right'
+            ? TextAlign.Right
+            : align === 'center'
+                ? TextAlign.Center
+                : TextAlign.Left,
         xywh: `[${x},${cy + dy},${w},26]`,
     };
 }
+/**
+ * A link between two nodes of a shipped map.
+ *
+ * `evolution` is the ONE predicate that decides what the stroke MEANS — the
+ * same flag `templates/index.ts` reads, aligned by `docs/adr/0010`
+ * § Compatibility. It used to be `arrow` here and `red` there, so a red SOLID
+ * Kodak link was a typed dependency while a red sample in the palette was not:
+ * two answers to "is this a dependency?" in one framework, in neighbouring
+ * files. Harmless as a style inconsistency, semantic the moment W4 reads these
+ * edges.
+ *
+ * `red` stays, and stays orthogonal: it colours a DEPENDENCY red (Kodak's
+ * future chain) without changing what it is. Colour is never what decides a
+ * relation's type.
+ *
+ * The direction is meaning, not decoration: `a` is the consumer, `b` is what it
+ * needs, and every one of the twelve links these presets ship respects it
+ * (a corpus test walks them and fails loudly the day one does not).
+ */
 function link(a, b, o = {}) {
     return {
         type: 'connector',
         mode: ConnectorMode.Straight,
-        stroke: o.red ? WARDLEY_RED : LINK_GREY,
-        strokeStyle: o.arrow ? StrokeStyle.Dash : StrokeStyle.Solid,
+        // An evolution arrow is a movement annotation, not a dependency — same
+        // split as the two Wardley connector tools, and since PF13.4 both sides of
+        // that split carry a role.
+        role: o.evolution ? WARDLEY_ROLE.changeArrow : WARDLEY_ROLE.dependency,
+        stroke: o.red || o.evolution ? WARDLEY_RED : LINK_GREY,
+        strokeStyle: o.evolution ? StrokeStyle.Dash : StrokeStyle.Solid,
         strokeWidth: LINK_STROKE_WIDTH,
         frontEndpointStyle: PointStyle.None,
-        rearEndpointStyle: o.arrow ? PointStyle.Triangle : PointStyle.None,
+        rearEndpointStyle: o.evolution ? PointStyle.Triangle : PointStyle.None,
         source: { id: a },
         target: { id: b },
     };
@@ -90,6 +175,7 @@ function inertia(e, v) {
     return {
         type: 'shape',
         shapeType: 'rect',
+        role: WARDLEY_ROLE.inertia,
         filled: true,
         fillColor: INERTIA_COLOR,
         strokeColor: INERTIA_COLOR,
@@ -140,7 +226,12 @@ function title(str) {
 const ATTRS = 'width="100%" height="100%" viewBox="0 0 135 80" xmlns="http://www.w3.org/2000/svg"';
 const mapPreview = (extra) => `<svg ${ATTRS} fill="none"><path d="M22 12 V64 H120" stroke="#3b3d42" stroke-width="2"/>${extra}</svg>`;
 function tpl(name, preview, elements) {
-    return { name, type: 'template', preview, content: makeTemplateSnapshot(elements, name) };
+    return {
+        name,
+        type: 'template',
+        preview,
+        content: makeTemplateSnapshot(elements, name),
+    };
 }
 function ann(e, v) {
     const cx = ex(e);
@@ -178,7 +269,11 @@ function teaShop() {
         annBox: panel(120, 200, 420, 64),
         annText: freeText(132, 208, 400, 'Annotations:\n1. Standardising power lets kettles evolve faster\n2. Hot water is obvious and well known', 13),
         business: stake(0.62, 0.93),
-        businessL: lbl(0.62, 0.93, 'Business', { align: 'center', dy: -28, w: 120 }),
+        businessL: lbl(0.62, 0.93, 'Business', {
+            align: 'center',
+            dy: -28,
+            w: 120,
+        }),
         public: stake(0.78, 0.93),
         publicL: lbl(0.78, 0.93, 'Public', { align: 'center', dy: -28, w: 120 }),
         cupOfTea: comp(0.62, 0.74),
@@ -199,9 +294,19 @@ function teaShop() {
         powerL: lbl(0.7, 0.1, 'Power', { align: 'right', dy: 6 }),
         powerFut: future(0.88, 0.1),
         powerFutL: lbl(0.88, 0.1, 'Power'),
-        limitedBy: lbl(0.56, 0.43, 'limited by', { align: 'center', w: 120, size: 13 }),
-        ann1a: ann(0.5, 0.385), ann1t: annTxt(0.5, 0.385, '1'),
-        ann2a: ann(0.84, 0.45), ann2t: annTxt(0.84, 0.45, '2'),
+        // ABOVE the link it annotates, not across it. Written on the line it reads
+        // as a label nobody can read — which is the finding W3 raises, and it was
+        // raising it on the map that ships as the canonical example.
+        limitedBy: lbl(0.56, 0.43, 'limited by', {
+            align: 'center',
+            w: 120,
+            size: 13,
+            dy: -34,
+        }),
+        ann1a: ann(0.5, 0.385),
+        ann1t: annTxt(0.5, 0.385, '1'),
+        ann2a: ann(0.84, 0.45),
+        ann2t: annTxt(0.84, 0.45, '2'),
         l1: link('business', 'cupOfTea'),
         l2: link('public', 'cupOfTea'),
         l3: link('cupOfTea', 'cup'),
@@ -210,34 +315,53 @@ function teaShop() {
         l6: link('hotWater', 'water'),
         l7: link('hotWater', 'kettle'),
         l8: link('kettle', 'power'),
-        a1: link('kettle', 'electric', { red: true, arrow: true }),
-        a2: link('power', 'powerFut', { red: true, arrow: true }),
+        a1: link('kettle', 'electric', { evolution: true }),
+        a2: link('power', 'powerFut', { evolution: true }),
     };
 }
 // ── Kodak inertia (2005) ──────────────────────────────────────────────
 function kodak() {
+    // The future dependency `capture → storage` is the movement Kodak resisted,
+    // and the inertia bar belongs where that dependency crosses into commodity —
+    // the boundary the capability refused to cross. It used to sit 105 units away
+    // from any transition: the template named after inertia was the
+    // counter-example to the inertia rule. Computed from the two node positions
+    // and the declared transitions, so it cannot drift again — and the bar comes
+    // out centred on the divider, which is exactly what W2 asks of it now that
+    // "astride the transition" is the whole of the rule.
+    const CAPTURE = [0.53, 0.8];
+    const STORAGE = [0.84, 0.4];
+    const [barE, barV] = crossing(CAPTURE, STORAGE, 2);
     return {
         bg: bg(),
         title: title("Wardley map of Kodak's 2005 inertia to digital"),
         user: stake(0.54, 0.92),
         userL: lbl(0.54, 0.92, 'User'),
-        capture: dot(0.53, 0.8, 3),
-        captureL: lbl(0.53, 0.8, 'Capture a moment'),
+        capture: dot(CAPTURE[0], CAPTURE[1], 3),
+        // To the LEFT, like the other two capability names: to the right of this
+        // node runs the future dependency towards digital storage, and a name
+        // written across the line that carries the whole argument is exactly the
+        // case W3 exists for.
+        captureL: lbl(CAPTURE[0], CAPTURE[1], 'Capture a moment', {
+            align: 'right',
+        }),
         film: comp(0.52, 0.62),
         filmL: lbl(0.52, 0.62, 'Film camera', { align: 'right' }),
         digital: future(0.74, 0.62),
         digitalL: lbl(0.74, 0.62, 'Digital camera', { color: WARDLEY_RED }),
         roll: comp(0.52, 0.4),
         rollL: lbl(0.52, 0.4, 'Photographic film', { align: 'right' }),
-        storage: future(0.84, 0.4),
-        storageL: lbl(0.84, 0.4, 'Digital storage', { color: WARDLEY_RED }),
-        inertiaBar: inertia(0.78, 0.4),
+        storage: future(STORAGE[0], STORAGE[1]),
+        storageL: lbl(STORAGE[0], STORAGE[1], 'Digital storage', {
+            color: WARDLEY_RED,
+        }),
+        inertiaBar: inertia(barE, barV),
         l1: link('user', 'capture'),
         l2: link('capture', 'film'),
         l3: link('film', 'roll'),
         r1: link('capture', 'storage', { red: true }),
-        a1: link('film', 'digital', { red: true, arrow: true }),
-        a2: link('roll', 'storage', { red: true, arrow: true }),
+        a1: link('film', 'digital', { evolution: true }),
+        a2: link('roll', 'storage', { evolution: true }),
     };
 }
 export const wardleyMaps = [

package/dist/toolbar/config.js

@@ -187,7 +187,9 @@ export const wardleyToolbarConfig = {
                 if (!bg)
                     return;
                 createWardleyLegend(ctx.std, bg);
-                ctx.std.getOptional(TelemetryProvider)?.track('FrameworkLegendCreated', {
+                ctx.std
+                    .getOptional(TelemetryProvider)
+                    ?.track('FrameworkLegendCreated', {
                     framework: 'wardley',
                     element: 'legend',
                     page: 'whiteboard editor',

package/dist/toolbar/icons.d.ts

@@ -24,7 +24,27 @@ export declare const wardleyMethodIcon: import("lit-html").TemplateResult<2>;
 export declare const wardleyLegendIcon: import("lit-html").TemplateResult<2>;
 /** Opportunity gradient background: axes + green differential hump + red operational bump. */
 export declare const wardleyOpportunityIcon: import("lit-html").TemplateResult<2>;
+/**
+ * Import an SVG sketch — a framed picture with an arrow coming IN.
+ *
+ * Deliberately the same glyph BPMN gives the same command: the two wrap ONE
+ * parser and make one promise, and a reader who has met one should recognise
+ * the other without reading its label.
+ */
+export declare const wardleyImportSvgIcon: import("lit-html").TemplateResult<2>;
 /** Benefit/Investment gradient background: axes + zero line + green J-curve. */
 export declare const wardleyBenefitIcon: import("lit-html").TemplateResult<2>;
 /** Evolution-gradient background (Wardley's S-curve presentation): grey at both edges fading to white center. */
 export declare const wardleyEvolutionGradientIcon: import("lit-html").TemplateResult<2>;
+/**
+ * Export the map as an OWM document — a page with the map's own axes drawn on
+ * it, and an arrow going OUT.
+ *
+ * The page and the arrow are BPMN's, deliberately: interchange is a platform
+ * capability, and a reader who has met one framework's pair should recognise
+ * the next without reading its label. What differs is what is drawn ON the page
+ * — the value-chain corner, which is what makes it a map rather than a process.
+ */
+export declare const wardleyExportOwmIcon: import("lit-html").TemplateResult<2>;
+/** Import an OWM document — the same page and the same arrow, mirrored back IN. */
+export declare const wardleyImportOwmIcon: import("lit-html").TemplateResult<2>;

package/dist/toolbar/icons.js

@@ -114,6 +114,18 @@ export const wardleyOpportunityIcon = svg `<svg width="24" height="24" viewBox="
   <path d="M5 12 C6 7, 8.5 7, 9.5 11 C11 17, 14 19, 18 20" stroke="${GREEN}" stroke-width="1.7" fill="none" stroke-linecap="round"/>
   <path d="M14.5 19.5 C15.5 16.5, 17 16.5, 18 19" stroke="${RED}" stroke-width="1.7" fill="none" stroke-linecap="round"/>
 </svg>`;
+/**
+ * Import an SVG sketch — a framed picture with an arrow coming IN.
+ *
+ * Deliberately the same glyph BPMN gives the same command: the two wrap ONE
+ * parser and make one promise, and a reader who has met one should recognise
+ * the other without reading its label.
+ */
+export const wardleyImportSvgIcon = svg `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="3" y="5" width="14" height="11" rx="1.5" stroke="currentColor" stroke-width="1.5"/>
+  <path d="M3.5 13 7 9.5l3 3 2-2 3.5 3.5" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M19 14.5v6M16.5 17l2.5-2.5 2.5 2.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>`;
 /** Benefit/Investment gradient background: axes + zero line + green J-curve. */
 export const wardleyBenefitIcon = svg `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path d="M4 20V4M4 20h16" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
@@ -132,3 +144,25 @@ export const wardleyEvolutionGradientIcon = svg `<svg width="24" height="24" vie
   </defs>
   <rect x="4" y="4.5" width="16" height="15" rx="2" fill="url(#wardleyGreyU)" stroke="currentColor" stroke-width="1.2"/>
 </svg>`;
+/**
+ * Export the map as an OWM document — a page with the map's own axes drawn on
+ * it, and an arrow going OUT.
+ *
+ * The page and the arrow are BPMN's, deliberately: interchange is a platform
+ * capability, and a reader who has met one framework's pair should recognise
+ * the next without reading its label. What differs is what is drawn ON the page
+ * — the value-chain corner, which is what makes it a map rather than a process.
+ */
+export const wardleyExportOwmIcon = svg `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M13.5 3.5H7a1.5 1.5 0 0 0-1.5 1.5v14A1.5 1.5 0 0 0 7 20.5h3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+  <path d="M13.5 3.5 18.5 8.5V12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M8.5 7v6.5H13" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" opacity="0.6"/>
+  <path d="M16 20.5v-6M13.5 18l2.5 2.5 2.5-2.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>`;
+/** Import an OWM document — the same page and the same arrow, mirrored back IN. */
+export const wardleyImportOwmIcon = svg `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M13.5 3.5H7a1.5 1.5 0 0 0-1.5 1.5v14A1.5 1.5 0 0 0 7 20.5h3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+  <path d="M13.5 3.5 18.5 8.5V12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M8.5 7v6.5H13" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" opacity="0.6"/>
+  <path d="M16 14.5v6M13.5 17l2.5-2.5 2.5 2.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>`;

package/dist/toolbar/senior-tool.js

@@ -3,6 +3,7 @@ import { html } from 'lit';
 export const wardleySeniorTool = SeniorToolExtension('wardley', ({ block }) => {
     return {
         name: 'Wardley map',
+        labelKey: 'com.labre.framework.wardley',
         content: html `<edgeless-wardley-senior-button
       .edgeless=${block}
     ></edgeless-wardley-senior-button>`,

package/dist/toolbar/wardley-menu.d.ts

@@ -1,20 +1,13 @@
 import { EmptyTool } from '@formicoidea/labre-core/gfx/pointer';
-import { LitElement } from 'lit';
-declare const EdgelessWardleyMenu_base: typeof LitElement & import("@formicoidea/labre-core/_pkgs/global/utils").Constructor<import("@formicoidea/labre-core/_pkgs/affine-widget-edgeless-toolbar").EdgelessToolbarToolClass>;
+import { EdgelessCommandMenu } from '@formicoidea/labre-core/widgets/edgeless-toolbar';
 /**
- * The popover that opens above the toolbar for the Wardley toolbox. Each item
- * creates a pre-formatted Wardley object (see `../actions.ts` — the same
- * actions back the wardley keyboard shortcuts).
+ * The popover that opens above the toolbar for the Wardley toolbox.
+ *
+ * Since PF3 it holds no artefact list of its own: {@link EdgelessCommandMenu}
+ * renders whatever `wardleyCommands` declares for the `senior-menu` surface, so
+ * the menu and the shortcut manifest can no longer drift (they did: 13 vs 7).
  */
-export declare class EdgelessWardleyMenu extends EdgelessWardleyMenu_base {
-    static styles: import("lit").CSSResult;
+export declare class EdgelessWardleyMenu extends EdgelessCommandMenu {
+    protected owner: "wardley";
     type: typeof EmptyTool;
-    private _createBackground;
-    private _createNode;
-    private readonly _createInertia;
-    private readonly _createPipeline;
-    private readonly _createMarket;
-    private _activateConnector;
-    render(): import("lit-html").TemplateResult<1>;
 }
-export {};