@formicoidea/labre-framework-wardley 0.36.0 → 0.38.1

package/dist/actions.d.ts

@@ -1,5 +1,5 @@
+import { indexOverBackgrounds, type StackedElement } from '@formicoidea/labre-core/blocks/surface';
 import { WardleyBackgroundElementModel, type WardleyBgVariant } from '@formicoidea/labre-core/model';
-import { Bound } from '@formicoidea/labre-core/global/gfx';
 import type { BlockStdScope } from '@formicoidea/labre-core/std';
 import { type GfxController } from '@formicoidea/labre-core/std/gfx';
 import { type WardleyExportBoard } from './export.js';
@@ -109,41 +109,32 @@ export declare function createWardleyAccelerator(gfx: GfxController, kind: 'acce
  * to the depth {@link wardleyAreaIndexOver} works out.
  */
 export declare function createWardleyArea(gfx: GfxController, shape: WardleyAreaShape): void;
+/**
+ * Send one already-placed area to the depth it belongs at — see
+ * {@link createWardleyArea} for why a zone is lowered at all.
+ *
+ * Extracted so the TEMPLATE can call it: a snapshot cannot express this, because
+ * the depth is relative to whatever map is already on the board rather than to
+ * anything inside the template.
+ */
+export declare function lowerWardleyArea(gfx: GfxController, id: string): void;
 /**
  * One already-placed element, as {@link wardleyAreaIndexOver} needs to read it.
  *
- * Three fields and no model, so the placement can be reasoned about — and
- * tested — without a document: what it is, where it is, and how deep.
+ * The Wardley name for the shared {@link StackedElement}, kept so this
+ * framework's callers and tests keep reading in its own vocabulary.
  */
-export interface WardleyStackedElement {
-    /** Fractional index. Sorts lexicographically, which IS the paint order. */
-    index: string;
-    /** Serialized box. */
-    xywh: string;
-    /** Whether this is a framework BACKGROUND — a map, a pool, a C4 board… */
-    isBackground: boolean;
-}
+export type WardleyStackedElement = StackedElement;
 /**
  * How deep a freshly drawn zone goes: just ABOVE the framework backgrounds it
  * covers, and below everything else. `null` means the back of the surface.
  *
- * "The back" alone was the first answer and it was wrong, as the recette of
- * #213 found: a Wardley map is a framework BACKGROUND — an opaque one — so a
- * zone sent behind the whole surface went behind the map and vanished. What a
- * zone must be under is the artefacts it groups; what it must be over is the
- * canvas they are drawn on. Those are two different depths, and only the first
- * one is "the back".
- *
- * So: find the topmost background the zone actually OVERLAPS — the map it was
- * drawn on, and not some other framework's board parked elsewhere on the same
- * canvas — and mint a key between it and whatever sits directly above it. With
- * no background under the zone at all there is nothing to clear, and the back
- * of the surface is right again.
- *
- * `siblings` need not be sorted: fractional indexes sort lexicographically, so
- * this sorts them itself and reads the paint order straight off the strings.
+ * The reasoning — and the recette of #213 that produced it — now lives with
+ * {@link indexOverBackgrounds}, because a frame drawn on a map needs the very
+ * same depth for the very same reason. This alias keeps the Wardley name for
+ * the callers and tests written against it.
  */
-export declare function wardleyAreaIndexOver(siblings: readonly WardleyStackedElement[], box: Bound): string | null;
+export declare const wardleyAreaIndexOver: typeof indexOverBackgrounds;
 /**
  * Read an SVG the user picks as a SKETCH, and say what it cost.
  *

package/dist/actions.js

@@ -1,17 +1,17 @@
-import { backgroundSize, DefaultTool, runInterchangeImportFile, } from '@formicoidea/labre-core/blocks/surface';
+import { backgroundSize, DefaultTool, indexOverBackgrounds, runInterchangeImportFile, } from '@formicoidea/labre-core/blocks/surface';
 import { ConnectorTool } from '@formicoidea/labre-core/gfx/connector';
 import { createGroupCommand } from '@formicoidea/labre-core/gfx/group';
-import { ConnectorMode, FontFamily, FontWeight, FrameworkBackgroundElementModel, PointStyle, ShapeStyle, StrokeStyle, TextFitMode, WardleyBackgroundElementModel, } from '@formicoidea/labre-core/model';
+import { ConnectorMode, FontWeight, FrameworkBackgroundElementModel, PointStyle, StrokeStyle, WardleyBackgroundElementModel, } from '@formicoidea/labre-core/model';
 import { NotificationProvider, translateKey, } from '@formicoidea/labre-core/shared/services';
 import { downloadBlob } from '@formicoidea/labre-core/shared/utils';
 import { Bound } from '@formicoidea/labre-core/global/gfx';
-import { generateKeyBetween, GfxControllerIdentifier, } from '@formicoidea/labre-core/std/gfx';
+import { GfxControllerIdentifier } from '@formicoidea/labre-core/std/gfx';
 import { WARDLEY_BACKGROUND } from './background.js';
 import { WARDLEY_SVG_IMPORT } from './interchange.js';
 import { wardleyBoardFrom, wardleySafeFilename, } from './export.js';
 import { WARDLEY_OWM_EXPORT, WARDLEY_OWM_IMPORT } from './interchange.js';
-import { HANDLE_SIZE, INERTIA_COLOR, INERTIA_SIZE, LABEL_FONT_SIZE, LABEL_GAP, LINK_GREY, LINK_STROKE_WIDTH, NODE_STROKE, PORTER_DEFAULT_LETTER, WARDLEY_RED, } from './node/consts.js';
-import { wardleyAreaBox, wardleyAreaProps, wardleyCanonicalBox, wardleyHandleBox, wardleyHandleProps, wardleyMarketDotBoxes, wardleyMarketDotProps, wardleyMarketLinkPairs, wardleyMarketLinkProps, WARDLEY_NODE_LABEL, WARDLEY_NODE_SIZE, wardleyNodeProps, wardleyPorterArrowProps, wardleyPorterArrows, wardleyPorterLetterProps, } from './presets.js';
+import { HANDLE_SIZE, INERTIA_SIZE, LABEL_GAP, LINK_GREY, LINK_STROKE_WIDTH, PORTER_DEFAULT_LETTER, WARDLEY_RED, } from './node/consts.js';
+import { wardleyAreaBox, wardleyAreaProps, wardleyCanonicalBox, wardleyHandleBox, wardleyHandleProps, wardleyInertiaProps, WARDLEY_LABEL_H, WARDLEY_LABEL_W, wardleyLabelProps, wardleyMarketDotBoxes, wardleyMarketDotProps, wardleyMarketLinkPairs, wardleyMarketLinkProps, WARDLEY_NODE_LABEL, WARDLEY_NODE_SIZE, wardleyNodeProps, wardleyPorterArrowProps, wardleyPorterArrows, wardleyPorterLetterProps, } from './presets.js';
 import { WARDLEY_ROLE } from './roles.js';
 /**
  * Standalone creation/activation actions for the Wardley toolbox — the
@@ -39,8 +39,8 @@ import { WARDLEY_ROLE } from './roles.js';
  * The fix is to make the variant part of the declaration — one axis/end-label
  * set per variant, each naming its own `labelKey` — rather than a bag of prop
  * overrides applied at creation. Out of scope here (it changes what a variant
- * IS); duplicated verbatim in `templates/index.ts`, and both copies go away
- * together.
+ * IS). This is now the ONLY copy: the four background templates are derived
+ * from these four commands, so the table goes away in one place.
  */
 const BACKGROUND_VARIANT_DEFAULTS = {
     classic: {},
@@ -62,16 +62,10 @@ const BACKGROUND_VARIANT_DEFAULTS = {
     // the grey gradient differs.
     'evolution-gradient': {},
 };
-/** Height of the native free-text labels (Inter, size 18). */
-const LABEL_H = LABEL_FONT_SIZE + 8;
-/**
- * Width of a label box, whatever it reads.
- *
- * A number rather than a measurement, which is why a RIGHT-aligned label has to
- * subtract it: the box does not shrink to the words, so the only way to make
- * the words end on a given edge is to start the box a full width before it.
- */
-const LABEL_W = 120;
+// The label box, now owned by `presets.ts` — the local names stay so the four
+// placements below keep reading as they did.
+const LABEL_H = WARDLEY_LABEL_H;
+const LABEL_W = WARDLEY_LABEL_W;
 function finish(gfx, id) {
     gfx.doc.captureSync();
     gfx.tool.setTool(DefaultTool);
@@ -106,21 +100,7 @@ function addNode(surface, kind, cx, cy, extra = {}) {
 }
 /** Add a native free-text label (same Inter family as the axis labels). */
 function addLabel(surface, text, x, y, textAlign = 'left', fontWeight = FontWeight.Regular) {
-    return surface.addElement({
-        type: 'text',
-        text,
-        fontWeight,
-        // Semantic identity (PF1, revised in PF13.4): a Wardley label is a free
-        // text element like any other, so its ROLE is the only thing that tells W3
-        // it must not land on top of a node. A free text the user typed elsewhere
-        // stays neutral and is never evaluated.
-        role: WARDLEY_ROLE.label,
-        fontFamily: FontFamily.Inter,
-        fontSize: LABEL_FONT_SIZE,
-        color: NODE_STROKE,
-        textAlign,
-        xywh: new Bound(x, y, LABEL_W, LABEL_H).serialize(),
-    });
+    return surface.addElement(wardleyLabelProps(text, x, y, textAlign, fontWeight));
 }
 /** Create a wardley map background of the given variant, viewport-centered. */
 export function createWardleyBackground(gfx, variant = 'classic') {
@@ -174,23 +154,9 @@ export function createWardleyInertia(gfx) {
         return;
     const { w, h } = INERTIA_SIZE;
     const { centerX, centerY } = gfx.viewport;
-    const id = gfx.surface.addElement({
-        type: 'shape',
-        shapeType: 'rect',
-        // The inertia bar has no element type of its own — it IS a plain filled
-        // rect — so the role is the whole of its semantics (PF13.5).
-        role: WARDLEY_ROLE.inertia,
-        filled: true,
-        fillColor: INERTIA_COLOR,
-        strokeColor: INERTIA_COLOR,
-        strokeWidth: 0,
-        shapeStyle: ShapeStyle.General,
-        roughness: 0,
-        radius: 0,
-        // the inertia bar has a canonical size: text overflows, never deforms
-        textFitMode: TextFitMode.Overflow,
+    const id = gfx.surface.addElement(wardleyInertiaProps({
         xywh: new Bound(centerX - w / 2, centerY - h / 2, w, h).serialize(),
-    });
+    }));
     finish(gfx, id);
 }
 /**
@@ -329,16 +295,28 @@ export function createWardleyArea(gfx, shape) {
     const { centerX: cx, centerY: cy } = gfx.viewport;
     const xywh = wardleyAreaBox(shape, cx, cy);
     const id = surface.addElement(wardleyAreaProps(shape, { xywh }));
-    const model = surface.getElementById(id);
-    if (model) {
-        const over = wardleyAreaIndexOver(stackedElementsOf(surface, id), Bound.deserialize(xywh));
-        // `null` is "nothing under it": the back of the surface, minted by the
-        // layer itself so an empty board gets the layer's own initial index rather
-        // than a key invented here.
-        model.index = over ?? gfx.layer.getReorderedIndex(model, 'back');
-    }
+    lowerWardleyArea(gfx, id);
     finish(gfx, id);
 }
+/**
+ * Send one already-placed area to the depth it belongs at — see
+ * {@link createWardleyArea} for why a zone is lowered at all.
+ *
+ * Extracted so the TEMPLATE can call it: a snapshot cannot express this, because
+ * the depth is relative to whatever map is already on the board rather than to
+ * anything inside the template.
+ */
+export function lowerWardleyArea(gfx, id) {
+    const surface = gfx.surface;
+    const model = surface?.getElementById(id);
+    if (!surface || !model)
+        return;
+    const over = wardleyAreaIndexOver(stackedElementsOf(surface, id), Bound.deserialize(model.xywh));
+    // `null` is "nothing under it": the back of the surface, minted by the
+    // layer itself so an empty board gets the layer's own initial index rather
+    // than a key invented here.
+    model.index = over ?? gfx.layer.getReorderedIndex(model, 'back');
+}
 /** The top-level canvas elements of a surface, minus the one being placed. */
 function stackedElementsOf(surface, exclude) {
     return surface.elementModels
@@ -353,36 +331,12 @@ function stackedElementsOf(surface, exclude) {
  * How deep a freshly drawn zone goes: just ABOVE the framework backgrounds it
  * covers, and below everything else. `null` means the back of the surface.
  *
- * "The back" alone was the first answer and it was wrong, as the recette of
- * #213 found: a Wardley map is a framework BACKGROUND — an opaque one — so a
- * zone sent behind the whole surface went behind the map and vanished. What a
- * zone must be under is the artefacts it groups; what it must be over is the
- * canvas they are drawn on. Those are two different depths, and only the first
- * one is "the back".
- *
- * So: find the topmost background the zone actually OVERLAPS — the map it was
- * drawn on, and not some other framework's board parked elsewhere on the same
- * canvas — and mint a key between it and whatever sits directly above it. With
- * no background under the zone at all there is nothing to clear, and the back
- * of the surface is right again.
- *
- * `siblings` need not be sorted: fractional indexes sort lexicographically, so
- * this sorts them itself and reads the paint order straight off the strings.
+ * The reasoning — and the recette of #213 that produced it — now lives with
+ * {@link indexOverBackgrounds}, because a frame drawn on a map needs the very
+ * same depth for the very same reason. This alias keeps the Wardley name for
+ * the callers and tests written against it.
  */
-export function wardleyAreaIndexOver(siblings, box) {
-    const stack = [...siblings].sort((a, b) => a.index < b.index ? -1 : a.index > b.index ? 1 : 0);
-    // The LAST match, which is the topmost: a board with two maps on it gets the
-    // zone above the one it is actually drawn over, whichever was drawn first.
-    const under = stack.reduce((found, element, at) => element.isBackground &&
-        Bound.deserialize(element.xywh).isOverlapWithBound(box)
-        ? at
-        : found, -1);
-    if (under < 0)
-        return null;
-    // `null` for the upper bound when the background is the topmost element
-    // there is — `generateKeyBetween` reads that as "append after".
-    return generateKeyBetween(stack[under].index, stack[under + 1]?.index ?? null);
-}
+export const wardleyAreaIndexOver = indexOverBackgrounds;
 /**
  * Read an SVG the user picks as a SKETCH, and say what it cost.
  *

package/dist/presets.d.ts

@@ -1,4 +1,4 @@
-import { type WardleyNodeKind } from '@formicoidea/labre-core/model';
+import { FontWeight, type WardleyNodeKind } from '@formicoidea/labre-core/model';
 /**
  * What a Wardley artefact IS, as props — the ONE description the creation sites
  * and the morph both read.
@@ -98,6 +98,44 @@ export declare function wardleyNodeProps(kind: WardleyArtefactKind, box: {
 }): Record<string, unknown> & {
     type: string;
 };
+/** Height of the native free-text labels (Inter, size 18). */
+export declare const WARDLEY_LABEL_H: number;
+/**
+ * Width of a label box, whatever it reads.
+ *
+ * A number rather than a measurement, which is why a RIGHT-aligned label has to
+ * subtract it: the box does not shrink to the words, so the only way to make
+ * the words end on a given edge is to start the box a full width before it.
+ */
+export declare const WARDLEY_LABEL_W = 120;
+/**
+ * The NAME beside an artefact, as props — a native free-text element.
+ *
+ * Here rather than at the creation site for the reason the rest of this pack
+ * gives: the templates re-stated it by hand and drifted (a 140-wide box against
+ * this 120), so what a Wardley label IS has to have exactly one description.
+ *
+ * `text` is a plain STRING, as `Surface.addElement` takes it; a snapshot writes
+ * the same field as a serialized `Y.Text`, which is the one key an authoring
+ * kit overrides on the way into a template.
+ */
+export declare function wardleyLabelProps(text: string, x: number, y: number, textAlign?: 'left' | 'center' | 'right', fontWeight?: FontWeight): Record<string, unknown> & {
+    type: string;
+};
+/**
+ * An INERTIA bar, as props — a plain filled rect, and the whole of its
+ * semantics is the role.
+ *
+ * A preset for the same reason every other one here exists: the creation site
+ * and the shipped maps both draw one, and the hand-written copy in the
+ * templates had already lost `textFitMode` — the one line that keeps the bar's
+ * canonical size when somebody types into it.
+ */
+export declare function wardleyInertiaProps(box: {
+    xywh: string;
+}): Record<string, unknown> & {
+    type: string;
+};
 /**
  * An AREA, as props — one kind, two shapes.
  *

package/dist/presets.js

@@ -1,6 +1,6 @@
-import { ConnectorMode, DEFAULT_POLYGON_VERTICES, FontFamily, PointStyle, ShapeStyle, StrokeStyle, TextFitMode, } from '@formicoidea/labre-core/model';
+import { ConnectorMode, DEFAULT_POLYGON_VERTICES, FontFamily, FontWeight, PointStyle, ShapeStyle, StrokeStyle, TextFitMode, } from '@formicoidea/labre-core/model';
 import { Bound } from '@formicoidea/labre-core/global/gfx';
-import { ACCELERATOR_FILL, ACCELERATOR_LABEL, ACCELERATOR_SIZE, ACCELERATOR_STROKE_WIDTH, ACCELERATOR_VERTICES, AREA_FILL, AREA_POLYGON_SIZE, AREA_RECT_SIZE, AREA_STROKE, AREA_STROKE_WIDTH, DECELERATOR_LABEL, DECELERATOR_VERTICES, ECOSYSTEM_LABEL, ECOSYSTEM_SIZE, HANDLE_SIZE, LABEL_DEFAULT, LABEL_FONT_SIZE, MARKET_DOT_RING, MARKET_DOT_SIZE, MARKET_DOT_STROKE_WIDTH, MARKET_LABEL, MARKET_LINK_COLOR, MARKET_LINK_WIDTH, MARKET_SIZE, METHOD_FILL, METHOD_LABEL, METHOD_SIZE, NODE_FILL, NODE_SIZE, NODE_STROKE, NODE_STROKE_WIDTH, PIPELINE_FILL, PIPELINE_HEIGHT, PIPELINE_LABEL, PIPELINE_WIDTH, PORTER_ARROW, PORTER_LETTER_FONT_SIZE, PORTER_SIZE, WARDLEY_RED, } from './node/consts.js';
+import { ACCELERATOR_FILL, ACCELERATOR_LABEL, ACCELERATOR_SIZE, ACCELERATOR_STROKE_WIDTH, ACCELERATOR_VERTICES, AREA_FILL, AREA_POLYGON_SIZE, AREA_RECT_SIZE, AREA_STROKE, AREA_STROKE_WIDTH, DECELERATOR_LABEL, DECELERATOR_VERTICES, ECOSYSTEM_LABEL, ECOSYSTEM_SIZE, HANDLE_SIZE, INERTIA_COLOR, LABEL_DEFAULT, LABEL_FONT_SIZE, MARKET_DOT_RING, MARKET_DOT_SIZE, MARKET_DOT_STROKE_WIDTH, MARKET_LABEL, MARKET_LINK_COLOR, MARKET_LINK_WIDTH, MARKET_SIZE, METHOD_FILL, METHOD_LABEL, METHOD_SIZE, NODE_FILL, NODE_SIZE, NODE_STROKE, NODE_STROKE_WIDTH, PIPELINE_FILL, PIPELINE_HEIGHT, PIPELINE_LABEL, PIPELINE_WIDTH, PORTER_ARROW, PORTER_LETTER_FONT_SIZE, PORTER_SIZE, WARDLEY_RED, } from './node/consts.js';
 import { WARDLEY_ROLE } from './roles.js';
 /**
  * The size a kind is BORN at, which for Wardley is the notation rather than a
@@ -167,6 +167,72 @@ export function wardleyNodeProps(kind, box) {
         xywh: box.xywh,
     };
 }
+/** Height of the native free-text labels (Inter, size 18). */
+export const WARDLEY_LABEL_H = LABEL_FONT_SIZE + 8;
+/**
+ * Width of a label box, whatever it reads.
+ *
+ * A number rather than a measurement, which is why a RIGHT-aligned label has to
+ * subtract it: the box does not shrink to the words, so the only way to make
+ * the words end on a given edge is to start the box a full width before it.
+ */
+export const WARDLEY_LABEL_W = 120;
+/**
+ * The NAME beside an artefact, as props — a native free-text element.
+ *
+ * Here rather than at the creation site for the reason the rest of this pack
+ * gives: the templates re-stated it by hand and drifted (a 140-wide box against
+ * this 120), so what a Wardley label IS has to have exactly one description.
+ *
+ * `text` is a plain STRING, as `Surface.addElement` takes it; a snapshot writes
+ * the same field as a serialized `Y.Text`, which is the one key an authoring
+ * kit overrides on the way into a template.
+ */
+export function wardleyLabelProps(text, x, y, textAlign = 'left', fontWeight = FontWeight.Regular) {
+    return {
+        type: 'text',
+        text,
+        fontWeight,
+        // Semantic identity (PF1, revised in PF13.4): a Wardley label is a free
+        // text element like any other, so its ROLE is the only thing that tells W3
+        // it must not land on top of a node. A free text the user typed elsewhere
+        // stays neutral and is never evaluated.
+        role: WARDLEY_ROLE.label,
+        fontFamily: FontFamily.Inter,
+        fontSize: LABEL_FONT_SIZE,
+        color: NODE_STROKE,
+        textAlign,
+        xywh: new Bound(x, y, WARDLEY_LABEL_W, WARDLEY_LABEL_H).serialize(),
+    };
+}
+/**
+ * An INERTIA bar, as props — a plain filled rect, and the whole of its
+ * semantics is the role.
+ *
+ * A preset for the same reason every other one here exists: the creation site
+ * and the shipped maps both draw one, and the hand-written copy in the
+ * templates had already lost `textFitMode` — the one line that keeps the bar's
+ * canonical size when somebody types into it.
+ */
+export function wardleyInertiaProps(box) {
+    return {
+        type: 'shape',
+        shapeType: 'rect',
+        // The inertia bar has no element type of its own — it IS a plain filled
+        // rect — so the role is the whole of its semantics (PF13.5).
+        role: WARDLEY_ROLE.inertia,
+        filled: true,
+        fillColor: INERTIA_COLOR,
+        strokeColor: INERTIA_COLOR,
+        strokeWidth: 0,
+        shapeStyle: ShapeStyle.General,
+        roughness: 0,
+        radius: 0,
+        // the inertia bar has a canonical size: text overflows, never deforms
+        textFitMode: TextFitMode.Overflow,
+        xywh: box.xywh,
+    };
+}
 /**
  * An AREA, as props — one kind, two shapes.
  *

package/dist/reading.js

@@ -106,10 +106,36 @@ export const WARDLEY_READING = {
         tagId: WARDLEY_NATURE_TAG_ID,
         conventions: WARDLEY_NAMING_CONVENTIONS,
     },
-    // The value-chain link. ADR 0010 § 2: `source` is the subject of the role's
-    // verb, and this role's verb is "depends on" — so the source is the consumer
-    // and the target is what it needs.
-    relation: { edgeRole: WARDLEY_ROLE.dependency },
+    /**
+     * The value-chain link. ADR 0010 § 2: `source` is the subject of the role's
+     * verb, and this role's verb is "needs" — so the source is the consumer and
+     * the target is what it needs.
+     *
+     * The two wordings are Wardley's own and say so: a consumer is drawn ABOVE
+     * what it needs, which is a fact about a value chain and about nothing else.
+     * They lived in the panel until every framework gained a reading, and they
+     * keep their keys and their English to the letter — a host that already
+     * translated them translates nothing twice.
+     *
+     * `geometry: 'vertical'` is the claim those two parentheses make, stated
+     * where the engine can read it: this board's vertical axis IS the order, so
+     * a link drawn against it contradicts the drawing (W4) and the value flow can
+     * be read from the bottom up. Wardley is the only framework that says it.
+     */
+    relation: {
+        edgeRole: WARDLEY_ROLE.dependency,
+        sides: {
+            consumer: {
+                labelKey: 'com.labre.reading.relations.consumers',
+                labelFallback: 'Consumers (above)',
+            },
+            supplier: {
+                labelKey: 'com.labre.reading.relations.suppliers',
+                labelFallback: 'Suppliers (below)',
+            },
+        },
+        geometry: 'vertical',
+    },
     frame: {
         backgroundRole: WARDLEY_ROLE.map,
         background: WARDLEY_BACKGROUND,

package/dist/templates/index.js

@@ -1,71 +1,34 @@
-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 { makeTemplateSnapshot, templateFromCommand, } from '@formicoidea/labre-core/gfx/template';
+import { ConnectorMode, PointStyle, StrokeStyle } from '@formicoidea/labre-core/model';
+import { GfxControllerIdentifier } from '@formicoidea/labre-core/std/gfx';
+import { lowerWardleyArea } from '../actions.js';
+import { wardleyCommands } from '../commands.js';
+import { LINK_GREY, LINK_STROKE_WIDTH, WARDLEY_RED } from '../node/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.
+ * The Wardley palette — DERIVED from the toolbox, one template per command.
+ *
+ * Every single-artefact entry below is what its command actually draws, run
+ * once against a recording surface. It used to be a hand-written restatement of
+ * the same artefacts, and it had drifted exactly as far as a copy drifts: the
+ * four backgrounds had lost `role: wardley:map` and `resizeEnabled` (#77), no
+ * composite carried the `group` the toolbox has written since #51, the inertia
+ * bar had lost its `textFitMode`, label boxes were 140 against a `LABEL_W` of
+ * 120, and five commands had no template at all. Derived, none of that can
+ * happen again — and `templates-parity.unit.spec.ts` re-runs each command and
+ * compares, so the day a creation site changes the palette changes with it.
+ *
+ * The two shipped MAPS stay hand-composed (`maps.ts`): a canonical map is an
+ * arrangement of a dozen artefacts, which no single command draws. They are
+ * built on the same presets, and the same test checks their composition.
  */
-const VARIANT_DEFAULTS = {
-    classic: {},
-    opportunity: {
-        yAxisTitle: 'Opportunity',
-        showVisibilityLabels: false,
-        showCornerLabels: false,
-    },
-    benefit: {
-        yAxisTitle: '',
-        visibilityHigh: 'Benefit',
-        visibilityLow: 'Investment',
-        showCornerLabels: false,
-    },
-    'evolution-gradient': {},
-};
-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}]`,
-    };
-};
-/** A wardley node ellipse positioned by top-left. */
-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,
-        strokeColor: NODE_STROKE,
-        strokeWidth,
-        shapeStyle: ShapeStyle.General,
-        roughness: 0,
-        xywh: `[${x},${y},${d},${d}]`,
-    };
-}
-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,
-        textAlign: align === 'center' ? TextAlign.Center : TextAlign.Left,
-        xywh: `[${x},${y},140,26]`,
-    };
+/** The command a derived template is the picture of. Throws rather than skips. */
+function byId(id) {
+    const command = wardleyCommands.find(entry => entry.id === id);
+    if (!command)
+        throw new Error(`[wardley] templates: no command "${id}"`);
+    return command;
 }
 /**
  * A Wardley connector for the palette samples.
@@ -100,99 +63,16 @@ function connect(source, target, opts = {}) {
         target,
     };
 }
-const inertia = (x = 0, y = 0) => ({
-    type: 'shape',
-    shapeType: 'rect',
-    role: WARDLEY_ROLE.inertia,
-    filled: true,
-    fillColor: INERTIA_COLOR,
-    strokeColor: INERTIA_COLOR,
-    strokeWidth: 0,
-    shapeStyle: ShapeStyle.General,
-    roughness: 0,
-    radius: 0,
-    xywh: `[${x},${y},${INERTIA_SIZE.w},${INERTIA_SIZE.h}]`,
-});
-/** Pipeline composite: body rect + handle square (straddling top) + label. */
-function pipeline() {
-    return {
-        label: label(0, 0, 'Pipeline', 'center'),
-        body: {
-            type: 'wardleyNode',
-            kind: 'pipeline',
-            role: WARDLEY_ROLE.pipeline,
-            shapeType: 'rect',
-            filled: true,
-            fillColor: PIPELINE_FILL,
-            strokeColor: NODE_STROKE,
-            strokeWidth: NODE_STROKE_WIDTH,
-            shapeStyle: ShapeStyle.General,
-            roughness: 0,
-            radius: 0,
-            xywh: `[0,39,${PIPELINE_WIDTH},${PIPELINE_HEIGHT}]`,
-        },
-        handle: {
-            type: 'wardleyNode',
-            kind: 'handle',
-            role: WARDLEY_ROLE.handle,
-            shapeType: 'rect',
-            filled: true,
-            fillColor: NODE_FILL,
-            strokeColor: NODE_STROKE,
-            strokeWidth: NODE_STROKE_WIDTH,
-            shapeStyle: ShapeStyle.General,
-            roughness: 0,
-            radius: 0,
-            xywh: `[${PIPELINE_WIDTH / 2 - HANDLE_SIZE / 2},${39 - HANDLE_SIZE / 2},${HANDLE_SIZE},${HANDLE_SIZE}]`,
-        },
-    };
-}
-/** Market composite: outer circle + 3 inner dots wired in a triangle + label. */
-function market() {
-    const R = MARKET_SIZE / 2;
-    const c = R; // center within the [0,0,MARKET_SIZE,MARKET_SIZE] box
-    const rho = MARKET_DOT_RING;
-    const sin60 = Math.sqrt(3) / 2;
-    const verts = [
-        [0, -rho],
-        [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, 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,
-        stroke: MARKET_LINK_COLOR,
-        strokeStyle: StrokeStyle.Solid,
-        strokeWidth: MARKET_LINK_WIDTH,
-        frontEndpointStyle: PointStyle.None,
-        rearEndpointStyle: PointStyle.None,
-        source: { id: a },
-        target: { id: b },
-    });
-    return {
-        circle: node('market', 0, 0, MARKET_SIZE, NODE_FILL),
-        d0: dotAt(verts[0][0], verts[0][1]),
-        d1: dotAt(verts[1][0], verts[1][1]),
-        d2: dotAt(verts[2][0], verts[2][1]),
-        t0: tri('d0', 'd1'),
-        t1: tri('d1', 'd2'),
-        t2: tri('d2', 'd0'),
-        label: label(MARKET_SIZE + 8, 2, 'Market'),
-    };
-}
-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),
-});
 const ATTRS = 'width="100%" height="100%" viewBox="0 0 135 80" xmlns="http://www.w3.org/2000/svg"';
 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>`;
+/** The two fat arrows: the same outline, mirrored — the direction IS the kind. */
+const arrowPreview = (rightwards) => `<svg ${ATTRS} fill="none"><path d="${rightwards
+    ? 'M32 32 H80 V23 L103 40 L80 57 V48 H32 Z'
+    : 'M103 32 H55 V23 L32 40 L55 57 V48 H103 Z'}" fill="#bfbfbf" stroke="#1f2328" stroke-width="1.8" stroke-linejoin="round"/></svg>`;
+/** The zone, in its Peace wash — the pair differs on the outline and on nothing else. */
+const areaPreview = (outline) => `<svg ${ATTRS} fill="none">${outline}</svg>`;
+/** A hand-composed template — what is left once the artefacts are derived. */
 function tpl(name, preview, elements) {
     return {
         name,
@@ -201,27 +81,55 @@ function tpl(name, preview, elements) {
         content: makeTemplateSnapshot(elements, name),
     };
 }
+/**
+ * A zone, plus the one thing a snapshot cannot say.
+ *
+ * `createWardleyArea` lowers the zone the moment it exists, to just above the
+ * framework backgrounds it covers — otherwise the wash sits on top of every
+ * component it groups and eats their clicks. That depth is relative to the map
+ * ALREADY ON THE BOARD, which a snapshot knows nothing about, so the panel
+ * replays it on the freshly inserted element instead.
+ */
+function areaTemplate(id, preview) {
+    return {
+        ...templateFromCommand(byId(id), preview),
+        afterInsert: (std, insertedIds) => lowerWardleyArea(std.get(GfxControllerIdentifier), insertedIds[0]),
+    };
+}
 export const wardleyTemplateCategory = {
     name: 'Wardley',
     templates: [
         ...wardleyMaps,
-        tpl('Map background', bgPreview(), { bg: bg('classic') }),
-        tpl('Opportunity gradient', bgPreview('<rect x="22" y="12" width="98" height="52" fill="#eef4fb" opacity="0.6"/>'), { bg: bg('opportunity') }),
-        tpl('Benefit gradient', bgPreview('<rect x="22" y="12" width="98" height="26" fill="#e6eef8" opacity="0.6"/>'), { bg: bg('benefit') }),
-        tpl('Evolution gradient', bgPreview('<rect x="22" y="12" width="98" height="52" fill="#e3e2e4" opacity="0.5"/>'), { bg: bg('evolution-gradient') }),
-        tpl('Component', dotPreview('#ffffff', 1.5), nodeWithLabel('component', NODE_SIZE, NODE_FILL, 'Component')),
-        tpl('Anchor', `<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>`, nodeWithLabel('anchor', NODE_SIZE, NODE_FILL, 'Anchor')),
-        tpl('Ecosystem', `<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>`, nodeWithLabel('ecosystem', ECOSYSTEM_SIZE, NODE_FILL, 'Ecosystem')),
-        tpl('Method', `<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>`, nodeWithLabel('method', METHOD_SIZE, METHOD_FILL, 'Component')),
-        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())),
+        templateFromCommand(byId('wardley.addBackground'), bgPreview(), 'Map background'),
+        templateFromCommand(byId('wardley.addOpportunityBackground'), bgPreview('<rect x="22" y="12" width="98" height="52" fill="#eef4fb" opacity="0.6"/>'), 'Opportunity gradient'),
+        templateFromCommand(byId('wardley.addBenefitBackground'), bgPreview('<rect x="22" y="12" width="98" height="26" fill="#e6eef8" opacity="0.6"/>'), 'Benefit gradient'),
+        templateFromCommand(byId('wardley.addEvolutionBackground'), bgPreview('<rect x="22" y="12" width="98" height="52" fill="#e3e2e4" opacity="0.5"/>'), 'Evolution gradient'),
+        templateFromCommand(byId('wardley.addComponent'), dotPreview('#ffffff', 1.5), 'Component'),
+        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'),
+        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'),
+        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'),
+        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'),
+        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'),
+        templateFromCommand(byId('wardley.addInertia'), `<svg ${ATTRS} fill="none"><rect x="63" y="22" width="8" height="36" fill="#1f2328"/></svg>`, 'Inertia'),
+        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>`),
+        templateFromCommand(byId('wardley.addAccelerator'), arrowPreview(true)),
+        templateFromCommand(byId('wardley.addDecelerator'), arrowPreview(false)),
         // 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 }))),
+        //
+        // Hand-written, and the one pair that cannot derive: `linkTool` and
+        // `evolutionArrow` ACTIVATE a tool rather than draw anything, so there is no
+        // artefact to record — the user draws it.
+        tpl('Link', `<svg ${ATTRS} fill="none"><path d="M24 40 H110" stroke="#666" stroke-width="2.4"/></svg>`, {
+            a: 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>`, {
+            a: connect({ position: [0, 0] }, { position: [160, 0] }, { evolution: true, typed: false }),
+        }),
+        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"/>')),
+        areaTemplate('wardley.addAreaPolygon', areaPreview('<path d="M67 12 L110 43 L94 68 H40 L24 43 Z" fill="#c6dbfc" fill-opacity="0.25" stroke="#5b9cf6" stroke-width="1.5" stroke-linejoin="round"/>')),
     ],
 };

package/dist/templates/maps.js

@@ -1,8 +1,9 @@
-import { makeTemplateSnapshot, surfaceText, } from '@formicoidea/labre-core/gfx/template';
+import { makeTemplateSnapshot, surfaceText, surfaceYMap, } 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 { 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_LABEL_H, wardleyInertiaProps, wardleyLabelProps, wardleyNodeProps, } from '../presets.js';
 import { WARDLEY_ROLE } from '../roles.js';
 /**
  * Authoring kit for canonical Wardley maps. Positions are given as
@@ -68,71 +69,73 @@ const bg = (variant = 'classic') => ({
     variant,
     xywh: `[0,0,${W},${H}]`,
 });
+/**
+ * A component of a shipped map, at (evolution, value).
+ *
+ * {@link wardleyNodeProps} says what a component IS; the two overrides are
+ * NOTATION and stay: a thick rim marks a user "need", and a red one marks the
+ * future position of a capability that has not moved yet.
+ */
 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,
+        ...wardleyNodeProps('component', {
+            xywh: `[${cx - D / 2},${cy - D / 2},${D},${D}]`,
+        }),
         fillColor: fill,
         strokeColor: stroke,
         strokeWidth: sw,
-        shapeStyle: ShapeStyle.General,
-        roughness: 0,
-        xywh: `[${cx - D / 2},${cy - D / 2},${D},${D}]`,
     };
 }
 const comp = (e, v) => dot(e, v, 1);
 const future = (e, v) => dot(e, v, 2, WARDLEY_RED);
+/** A stakeholder: an anchor, drawn a third bigger than a component. */
 function stake(e, v) {
     const cx = ex(e);
     const cy = vy(v);
     const d = 24;
-    return {
-        type: 'wardleyNode',
-        kind: 'anchor',
-        role: WARDLEY_ROLE.anchor,
-        shapeType: 'ellipse',
-        filled: true,
-        fillColor: NODE_FILL,
-        strokeColor: NODE_STROKE,
-        strokeWidth: 1,
-        shapeStyle: ShapeStyle.General,
-        roughness: 0,
+    return wardleyNodeProps('anchor', {
         xywh: `[${cx - d / 2},${cy - d / 2},${d},${d}]`,
-    };
+    });
 }
 function lbl(e, v, text, o = {}) {
     const cx = ex(e);
     const cy = vy(v);
+    // 200 rather than the toolbox's `WARDLEY_LABEL_W`: a shipped map names
+    // things like "Capture a moment", and a box narrower than its words wraps
+    // them onto two lines. The width is layout, not notation — what the preset
+    // owns is everything else about the label.
     const w = o.w ?? 200;
     const dx = o.dx ?? 12;
     const dy = o.dy ?? -10;
     const align = o.align ?? 'left';
     const x = align === 'right' ? cx - w - dx : align === 'center' ? cx - w / 2 : cx + dx;
     return {
-        type: 'text',
-        text: surfaceText(text),
-        // The NAME of an artefact, so it carries the label role W3 is written on.
+        // The NAME of an artefact — {@link wardleyLabelProps} says what that is.
         // 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,
-        xywh: `[${x},${cy + dy},${w},26]`,
+        ...wardleyLabelProps(text, x, cy + dy, align),
+        // A snapshot stores the words as a serialized `Y.Text`, where
+        // `addElement` takes a plain string.
+        text: surfaceText(text),
+        // A wider box for a long name; the deliberate departures a shipped map
+        // makes on top of the preset.
+        xywh: `[${x},${cy + dy},${w},${WARDLEY_LABEL_H}]`,
+        ...(o.size === undefined ? {} : { fontSize: o.size }),
+        ...(o.color === undefined ? {} : { color: o.color }),
+        ...(o.neutral ? { role: undefined } : {}),
     };
 }
+/**
+ * The group a node and its name travel as — what the toolbox has written since
+ * #51 and what these maps had never carried, so dragging a component out of a
+ * shipped map left its name behind.
+ */
+const pair = (node, label) => ({
+    type: 'group',
+    children: surfaceYMap({ [node]: true, [label]: true }),
+});
 /**
  * A link between two nodes of a shipped map.
  *
@@ -172,19 +175,7 @@ function link(a, b, o = {}) {
 function inertia(e, v) {
     const cx = ex(e);
     const cy = vy(v);
-    return {
-        type: 'shape',
-        shapeType: 'rect',
-        role: WARDLEY_ROLE.inertia,
-        filled: true,
-        fillColor: INERTIA_COLOR,
-        strokeColor: INERTIA_COLOR,
-        strokeWidth: 0,
-        shapeStyle: ShapeStyle.General,
-        roughness: 0,
-        radius: 0,
-        xywh: `[${cx - 4},${cy - 22},8,44]`,
-    };
+    return wardleyInertiaProps({ xywh: `[${cx - 4},${cy - 22},8,44]` });
 }
 function panel(x, y, w, h) {
     return {
@@ -274,34 +265,49 @@ function teaShop() {
             dy: -28,
             w: 120,
         }),
+        businessG: pair('business', 'businessL'),
         public: stake(0.78, 0.93),
         publicL: lbl(0.78, 0.93, 'Public', { align: 'center', dy: -28, w: 120 }),
+        publicG: pair('public', 'publicL'),
         cupOfTea: comp(0.62, 0.74),
         cupOfTeaL: lbl(0.62, 0.74, 'Cup of Tea', { align: 'right' }),
+        cupOfTeaG: pair('cupOfTea', 'cupOfTeaL'),
         cup: comp(0.8, 0.7),
         cupL: lbl(0.8, 0.7, 'Cup'),
+        cupG: pair('cup', 'cupL'),
         tea: comp(0.83, 0.6),
         teaL: lbl(0.83, 0.6, 'Tea'),
+        teaG: pair('tea', 'teaL'),
         hotWater: comp(0.8, 0.47),
         hotWaterL: lbl(0.8, 0.47, 'Hot Water'),
+        hotWaterG: pair('hotWater', 'hotWaterL'),
         water: comp(0.81, 0.34),
         waterL: lbl(0.81, 0.34, 'Water'),
+        waterG: pair('water', 'waterL'),
         kettle: comp(0.36, 0.38),
         kettleL: lbl(0.36, 0.38, 'Kettle', { align: 'right', dy: 6 }),
+        kettleG: pair('kettle', 'kettleL'),
         electric: future(0.56, 0.38),
         electricL: lbl(0.56, 0.38, 'Electric Kettle'),
+        electricG: pair('electric', 'electricL'),
         power: comp(0.7, 0.1),
         powerL: lbl(0.7, 0.1, 'Power', { align: 'right', dy: 6 }),
+        powerG: pair('power', 'powerL'),
         powerFut: future(0.88, 0.1),
         powerFutL: lbl(0.88, 0.1, 'Power'),
+        powerFutG: pair('powerFut', 'powerFutL'),
         // 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.
+        //
+        // NEUTRAL: it is a remark about a LINK, not the name of an artefact, so it
+        // travels with nothing and nothing measures it (see `LblOpts.neutral`).
         limitedBy: lbl(0.56, 0.43, 'limited by', {
             align: 'center',
             w: 120,
             size: 13,
             dy: -34,
+            neutral: true,
         }),
         ann1a: ann(0.5, 0.385),
         ann1t: annTxt(0.5, 0.385, '1'),
@@ -337,6 +343,7 @@ function kodak() {
         title: title("Wardley map of Kodak's 2005 inertia to digital"),
         user: stake(0.54, 0.92),
         userL: lbl(0.54, 0.92, 'User'),
+        userG: pair('user', 'userL'),
         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
@@ -345,16 +352,21 @@ function kodak() {
         captureL: lbl(CAPTURE[0], CAPTURE[1], 'Capture a moment', {
             align: 'right',
         }),
+        captureG: pair('capture', 'captureL'),
         film: comp(0.52, 0.62),
         filmL: lbl(0.52, 0.62, 'Film camera', { align: 'right' }),
+        filmG: pair('film', 'filmL'),
         digital: future(0.74, 0.62),
         digitalL: lbl(0.74, 0.62, 'Digital camera', { color: WARDLEY_RED }),
+        digitalG: pair('digital', 'digitalL'),
         roll: comp(0.52, 0.4),
         rollL: lbl(0.52, 0.4, 'Photographic film', { align: 'right' }),
+        rollG: pair('roll', 'rollL'),
         storage: future(STORAGE[0], STORAGE[1]),
         storageL: lbl(STORAGE[0], STORAGE[1], 'Digital storage', {
             color: WARDLEY_RED,
         }),
+        storageG: pair('storage', 'storageL'),
         inertiaBar: inertia(barE, barV),
         l1: link('user', 'capture'),
         l2: link('capture', 'film'),

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@formicoidea/labre-framework-wardley",
   "description": "Labre wardley framework for @formicoidea/labre-core.",
-  "version": "0.36.0",
+  "version": "0.38.1",
   "type": "module",
   "sideEffects": false,
   "author": "lajola",
@@ -31,7 +31,7 @@
     "dist"
   ],
   "dependencies": {
-    "@formicoidea/labre-core": "0.36.0",
+    "@formicoidea/labre-core": "0.38.1",
     "lit": "^3.2.0"
   }
 }