@formicoidea/labre-framework-wardley 0.41.0 → 0.42.0

package/dist/morph.d.ts

@@ -108,7 +108,9 @@ export declare function wardleyMorphedLabel(from: WardleyMorphKind, to: WardleyM
  * dots crammed into it. So the target's canonical size is applied, CENTRED on
  * where the artefact already stands: the thing does not move, it becomes the
  * size its notation says it is. The label keeps its own place, which is the
- * user's.
+ * user's — with the one exception {@link relocateLabel} states: a name still
+ * standing where creation put it follows the target kind when that kind carries
+ * its name somewhere else, or the new drawing lands on top of the old words.
  *
  * ## And why the rest is here rather than in the patch
  *

package/dist/morph.js

@@ -1,8 +1,9 @@
 import { morphLabel, } from '@formicoidea/labre-core/blocks/surface';
 import { ConnectorElementModel, GroupElementModel, TextElementModel, WardleyNodeElementModel, } from '@formicoidea/labre-core/model';
 import { translateKey } from '@formicoidea/labre-core/shared/services';
+import { Bound } from '@formicoidea/labre-core/global/gfx';
 import { wardleyCommandIcons, wardleyCommands } from './commands.js';
-import { wardleyCanonicalBox, wardleyHandleBox, wardleyHandleProps, wardleyMarketDotBoxes, wardleyMarketDotProps, wardleyMarketLinkPairs, wardleyMarketLinkProps, WARDLEY_NODE_LABEL, wardleyMorphClears, wardleyMorphProps, wardleyNodeLabelKey, } from './presets.js';
+import { wardleyCanonicalBox, wardleyHandleBox, wardleyHandleProps, WARDLEY_LABEL_H, WARDLEY_LABEL_W, wardleyLabelBoxFor, wardleyMarketDotBoxes, wardleyMarketDotProps, wardleyMarketLinkPairs, wardleyMarketLinkProps, WARDLEY_NODE_LABEL, wardleyMorphClears, wardleyMorphProps, wardleyNodeLabelKey, } from './presets.js';
 import { WARDLEY_ROLE } from './roles.js';
 /**
  * What a Wardley artefact may BECOME — the declaration behind the "Change type"
@@ -338,6 +339,66 @@ function rewriteLabel(group, from, to, std) {
         label.text.insert(0, next);
     });
 }
+/**
+ * The offset from a label box's left edge to the point its alignment holds
+ * fixed — the edge the words grow from.
+ */
+function anchorOffset(w, textAlign) {
+    return textAlign === 'center' ? w / 2 : textAlign === 'right' ? w : 0;
+}
+/**
+ * Carry the name to where the TARGET kind holds it — and only when it is still
+ * where the SOURCE kind's creation put it.
+ *
+ * ## The bug this repairs
+ *
+ * A component wears its name to the right of an 18-pixel circle. A pipeline is
+ * a 120-wide bar: written onto the same artefact, it is drawn straight OVER
+ * those words, and a filled shape answers the pointer on its whole interior
+ * while a text answers only on its box — so which of the two got the click
+ * depended on where in the label you aimed. The name could not be edited, and
+ * dragging it moved the pipeline. Rule W3 forbids precisely that overlap.
+ *
+ * ## Why only across a change of PLACE
+ *
+ * The timid rule {@link rewriteLabel} states about the words, applied to the
+ * placement: what the author put somewhere is theirs. The three circles all
+ * carry their name beside them, so a component growing into a market leaves the
+ * words exactly where they were — the circle grows underneath them and that is
+ * the documented behaviour. Only the crossing to or from the pipeline changes
+ * the PLACE, and only that moves anything.
+ *
+ * The test is on the point the label's own alignment keeps fixed rather than on
+ * its top-left, because typing into a label resizes its box around exactly that
+ * point (`edgeless-text-editor`): a renamed label is still where creation put
+ * it, and a MOVED one is not.
+ */
+function relocateLabel(group, from, to, cx, cy) {
+    const source = wardleyLabelBoxFor(from, cx, cy);
+    const target = wardleyLabelBoxFor(to, cx, cy);
+    if (source.place === target.place)
+        return;
+    const label = labelOfComposite(group);
+    if (!label || label.isLocked())
+        return;
+    const [x, y, w, h] = label.deserializedXYWH;
+    const sourceAnchorX = source.x + anchorOffset(WARDLEY_LABEL_W, source.textAlign);
+    // A pixel of tolerance on each axis: a renamed label's line is measured from
+    // the font and lands within a hair of the canonical height this compares to.
+    if (Math.abs(x + anchorOffset(w, source.textAlign) - sourceAnchorX) > 1) {
+        return;
+    }
+    if (Math.abs(y + h / 2 - (source.y + WARDLEY_LABEL_H / 2)) > 1)
+        return;
+    label.surface.updateElement(label.id, {
+        // The BOX keeps its own size — the words in it may be the author's, and one
+        // shrunk back to the canonical width would clip them.
+        xywh: new Bound(target.x +
+            anchorOffset(WARDLEY_LABEL_W, target.textAlign) -
+            anchorOffset(w, target.textAlign), target.y + WARDLEY_LABEL_H / 2 - h / 2, w, h).serialize(),
+        textAlign: target.textAlign,
+    });
+}
 /**
  * Everything the morph owes a Wardley composite beyond the props patch — the
  * `afterMorph` half of the spec, run inside the generic module's one
@@ -353,7 +414,9 @@ function rewriteLabel(group, from, to, std) {
  * dots crammed into it. So the target's canonical size is applied, CENTRED on
  * where the artefact already stands: the thing does not move, it becomes the
  * size its notation says it is. The label keeps its own place, which is the
- * user's.
+ * user's — with the one exception {@link relocateLabel} states: a name still
+ * standing where creation put it follows the target kind when that kind carries
+ * its name somewhere else, or the new drawing lands on top of the old words.
  *
  * ## And why the rest is here rather than in the patch
  *
@@ -383,6 +446,7 @@ export function wardleyMorphComposite(selected, from, to, std) {
         addMarketGlyph(selected, cx, cy);
     if (to === 'pipeline')
         addHandle(selected, carrier, cx, cy);
+    relocateLabel(selected, from, to, cx, cy);
     rewriteLabel(selected, from, to, std);
 }
 /**

package/dist/node/consts.d.ts

@@ -57,29 +57,31 @@ export declare const LINK_STROKE_WIDTH = 2;
 /**
  * Wardley red ("future"/evolution) — matches the validated arrow icon.
  *
- * An IDENTITY colour: the legend recognises a stored evolution link by it
- * (`legend.ts`, `el.stroke === WARDLEY_RED`). It stays a literal and must never
- * be derived from `NOTATION_NEUTRALS` or any other scale — a change of value
- * would orphan every link already drawn with it.
+ * A STORED colour: every evolution arrow ever drawn carries this exact value,
+ * so it stays a literal and must never be derived from `NOTATION_NEUTRALS` or
+ * any other scale — a change of value would leave the maps already drawn with
+ * it a different red from the ones drawn after. (It is no longer how an arrow
+ * is RECOGNISED: the legend and the rules read `wardley:change-arrow`, so a
+ * connector somebody restyled red is not one.)
  */
 export declare const WARDLEY_RED = "#d6455d";
 /**
  * Dependency link grey.
  *
- * An IDENTITY colour: the legend recognises a stored dependency link by it
- * (`legend.ts`, `el.stroke === LINK_GREY`). It stays a literal and must never
- * be derived from `NOTATION_NEUTRALS` — a change of value would orphan every
- * link already drawn with it.
+ * A STORED colour, like {@link WARDLEY_RED} above and for its reason: every
+ * dependency link ever drawn carries this exact value, so it stays a literal
+ * and must never be derived from `NOTATION_NEUTRALS`. What MAKES a connector a
+ * dependency is its role, not its grey.
  */
 export declare const LINK_GREY = "#666666";
 /**
  * Inertia bar color + size.
  *
- * An IDENTITY colour: the legend recognises a stored inertia bar by it
- * (`legend.ts`, `el.fillColor === INERTIA_COLOR`). It happens to equal the
- * scale's ink today, but it stays a literal and must never be derived from
- * `NOTATION_NEUTRALS`: a change of the shared ink would orphan every inertia bar
- * already on a map.
+ * A STORED colour, like the two above: every inertia bar ever drawn carries
+ * this exact value. It happens to equal the scale's ink today, but it stays a
+ * literal and must never be derived from `NOTATION_NEUTRALS` — a change of the
+ * shared ink would repaint the bars already on a map. A rect somebody tinted
+ * `#1f2328` is NOT an inertia: `wardley:inertia` is.
  */
 export declare const INERTIA_COLOR = "#1f2328";
 export declare const INERTIA_SIZE: {

package/dist/node/consts.js

@@ -55,29 +55,31 @@ export const LINK_STROKE_WIDTH = 2;
 /**
  * Wardley red ("future"/evolution) — matches the validated arrow icon.
  *
- * An IDENTITY colour: the legend recognises a stored evolution link by it
- * (`legend.ts`, `el.stroke === WARDLEY_RED`). It stays a literal and must never
- * be derived from `NOTATION_NEUTRALS` or any other scale — a change of value
- * would orphan every link already drawn with it.
+ * A STORED colour: every evolution arrow ever drawn carries this exact value,
+ * so it stays a literal and must never be derived from `NOTATION_NEUTRALS` or
+ * any other scale — a change of value would leave the maps already drawn with
+ * it a different red from the ones drawn after. (It is no longer how an arrow
+ * is RECOGNISED: the legend and the rules read `wardley:change-arrow`, so a
+ * connector somebody restyled red is not one.)
  */
 export const WARDLEY_RED = '#d6455d';
 /**
  * Dependency link grey.
  *
- * An IDENTITY colour: the legend recognises a stored dependency link by it
- * (`legend.ts`, `el.stroke === LINK_GREY`). It stays a literal and must never
- * be derived from `NOTATION_NEUTRALS` — a change of value would orphan every
- * link already drawn with it.
+ * A STORED colour, like {@link WARDLEY_RED} above and for its reason: every
+ * dependency link ever drawn carries this exact value, so it stays a literal
+ * and must never be derived from `NOTATION_NEUTRALS`. What MAKES a connector a
+ * dependency is its role, not its grey.
  */
 export const LINK_GREY = '#666666';
 /**
  * Inertia bar color + size.
  *
- * An IDENTITY colour: the legend recognises a stored inertia bar by it
- * (`legend.ts`, `el.fillColor === INERTIA_COLOR`). It happens to equal the
- * scale's ink today, but it stays a literal and must never be derived from
- * `NOTATION_NEUTRALS`: a change of the shared ink would orphan every inertia bar
- * already on a map.
+ * A STORED colour, like the two above: every inertia bar ever drawn carries
+ * this exact value. It happens to equal the scale's ink today, but it stays a
+ * literal and must never be derived from `NOTATION_NEUTRALS` — a change of the
+ * shared ink would repaint the bars already on a map. A rect somebody tinted
+ * `#1f2328` is NOT an inertia: `wardley:inertia` is.
  */
 export const INERTIA_COLOR = '#1f2328';
 export const INERTIA_SIZE = { w: 8, h: 44 };

package/dist/node/node-renderer.js

@@ -30,13 +30,24 @@ export const wardleyNode = (model, ctx, matrix, renderer, rc, bound) => {
         return;
     const strokeWidth = model.strokeWidth || 1;
     const R = Math.min(w, h) / 2 - strokeWidth / 2;
+    // A node dragged smaller than its own stroke leaves the glyph no room: every
+    // radius below is a fraction of `R`, and `arc` throws `IndexSizeError` on a
+    // negative one rather than clamping — which, since the surface render loop
+    // wraps no renderer in a `try`, aborts the rest of the frame. The hatch step
+    // is a fraction of `R` too, so `R === 0` would also spin its loop forever.
+    // The native circle underneath is already painted; the glyph simply stops.
+    if (!(R > 0))
+        return;
     const color = renderer.getColorValue(model.strokeColor, DefaultTheme.shapeStrokeColor, true);
     ctx.setTransform(glyphMatrix);
     // ── Anchor: person glyph (clipped to the circle) ────────────────────
     if (model.kind === 'anchor') {
         ctx.save();
         ctx.beginPath();
-        ctx.arc(cx, cy, R - strokeWidth / 2, 0, Math.PI * 2);
+        // The clip is inset by half a stroke again, which can land under zero on a
+        // node barely wider than its border: clipped to nothing, the glyph paints
+        // nothing, which is the honest picture at that size.
+        ctx.arc(cx, cy, Math.max(0, R - strokeWidth / 2), 0, Math.PI * 2);
         ctx.clip();
         ctx.lineWidth = strokeWidth;
         ctx.strokeStyle = color;

package/dist/presets.d.ts

@@ -1,4 +1,4 @@
-import { FontWeight, type WardleyNodeKind } from '@formicoidea/labre-core/model';
+import { FontWeight, PointStyle, StrokeStyle, 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.
@@ -129,6 +129,29 @@ export declare const WARDLEY_LABEL_H: number;
  * the words end on a given edge is to start the box a full width before it.
  */
 export declare const WARDLEY_LABEL_W = 120;
+/**
+ * Where a kind carries its NAME, and how the words sit in the box.
+ *
+ * The one description of a placement the four creation sites and the morph all
+ * read. Restated at each site it had already started to drift — and a morph
+ * that rewrites the BOX of an artefact without knowing where that kind holds
+ * its name leaves the words under the new drawing, which is W3's overlap and a
+ * label the pointer can no longer reach.
+ *
+ * `place` is the coarse half of the answer, and the only one a morph acts on:
+ * the three circles and the two arrows all wear their name BESIDE them, so an
+ * artefact that grows from one to the next leaves the words exactly where they
+ * are; the pipeline is the one kind that holds it ABOVE, and crossing between
+ * the two is what has to move something.
+ */
+export type WardleyLabelPlacement = {
+    x: number;
+    y: number;
+    textAlign: 'left' | 'center' | 'right';
+    place: 'beside' | 'above';
+};
+/** Where a node of one kind, centred on (cx, cy), carries its label. */
+export declare function wardleyLabelBoxFor(kind: WardleyLabelledKind, cx: number, cy: number): WardleyLabelPlacement;
 /**
  * The NAME beside an artefact, as props — a native free-text element.
  *
@@ -228,6 +251,32 @@ export declare function wardleyMarketLinkProps(sourceId: string, targetId: strin
 };
 /** The pairs the triangle wires, given the three dots in creation order. */
 export declare function wardleyMarketLinkPairs<T>(dots: readonly T[]): [T, T][];
+/**
+ * How a Wardley connector LOOKS, per tool: the value-chain link is grey, solid
+ * and headless, the evolution arrow red, dashed and tipped with a filled
+ * triangle.
+ *
+ * Here beside the node presets, and for their reason: the style rides on the
+ * tool activation (`activateWardleyConnector`) and is pictured by the legend
+ * row that tool subscribes, so restating it in either place would be two
+ * descriptions of one notation that agreed the day they were written.
+ */
+export declare const WARDLEY_EDGE_STYLE: {
+    readonly link: {
+        readonly stroke: "#666666";
+        readonly strokeStyle: StrokeStyle.Solid;
+        readonly strokeWidth: 2;
+        readonly frontEndpointStyle: PointStyle.None;
+        readonly rearEndpointStyle: PointStyle.None;
+    };
+    readonly arrow: {
+        readonly stroke: "#d6455d";
+        readonly strokeStyle: StrokeStyle.Dash;
+        readonly strokeWidth: 2;
+        readonly frontEndpointStyle: PointStyle.None;
+        readonly rearEndpointStyle: PointStyle.Triangle;
+    };
+};
 /** One of the four arrows: its own axis-aligned box, and the outline in it. */
 export interface WardleyPorterArrow {
     /** Serialized `xywh` of the box the polygon is drawn inside. */

package/dist/presets.js

@@ -1,6 +1,6 @@
 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, 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 { 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, LABEL_GAP, LINK_GREY, LINK_STROKE_WIDTH, 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
@@ -198,6 +198,40 @@ export const WARDLEY_LABEL_H = LABEL_FONT_SIZE + 8;
  * the words end on a given edge is to start the box a full width before it.
  */
 export const WARDLEY_LABEL_W = 120;
+/** Where a node of one kind, centred on (cx, cy), carries its label. */
+export function wardleyLabelBoxFor(kind, cx, cy) {
+    const { w } = WARDLEY_NODE_SIZE[kind];
+    // A pipeline is a 120-wide bar, and a name written to the right of it would
+    // stand a bar's length away from the thing it names. So the words go above
+    // the handle, centred on the body.
+    if (kind === 'pipeline') {
+        const top = cy - WARDLEY_NODE_SIZE.pipeline.h / 2;
+        return {
+            x: cx - WARDLEY_LABEL_W / 2,
+            y: top - HANDLE_SIZE / 2 - WARDLEY_LABEL_H - LABEL_GAP,
+            textAlign: 'center',
+            place: 'above',
+        };
+    }
+    // A decelerator points LEFT, and the reference puts the words on the side the
+    // arrow's shaft is on so the reading runs into the arrow rather than across
+    // it. A label box is a fixed width whatever it reads, so a right-aligned one
+    // has to start a box-width before the edge its words must end on.
+    if (kind === 'decelerator') {
+        return {
+            x: cx - w / 2 - LABEL_GAP - WARDLEY_LABEL_W,
+            y: cy - WARDLEY_LABEL_H / 2,
+            textAlign: 'right',
+            place: 'beside',
+        };
+    }
+    return {
+        x: cx + w / 2 + LABEL_GAP,
+        y: cy - WARDLEY_LABEL_H / 2,
+        textAlign: 'left',
+        place: 'beside',
+    };
+}
 /**
  * The NAME beside an artefact, as props — a native free-text element.
  *
@@ -402,6 +436,33 @@ export function wardleyMarketLinkPairs(dots) {
         [dots[2], dots[0]],
     ];
 }
+/* ── The two typed edges ──────────────────────────────────────────────── */
+/**
+ * How a Wardley connector LOOKS, per tool: the value-chain link is grey, solid
+ * and headless, the evolution arrow red, dashed and tipped with a filled
+ * triangle.
+ *
+ * Here beside the node presets, and for their reason: the style rides on the
+ * tool activation (`activateWardleyConnector`) and is pictured by the legend
+ * row that tool subscribes, so restating it in either place would be two
+ * descriptions of one notation that agreed the day they were written.
+ */
+export const WARDLEY_EDGE_STYLE = {
+    link: {
+        stroke: LINK_GREY,
+        strokeStyle: StrokeStyle.Solid,
+        strokeWidth: LINK_STROKE_WIDTH,
+        frontEndpointStyle: PointStyle.None,
+        rearEndpointStyle: PointStyle.None,
+    },
+    arrow: {
+        stroke: WARDLEY_RED,
+        strokeStyle: StrokeStyle.Dash,
+        strokeWidth: LINK_STROKE_WIDTH,
+        frontEndpointStyle: PointStyle.None,
+        rearEndpointStyle: PointStyle.Triangle,
+    },
+};
 /**
  * The four arrow outlines, north first and then clockwise.
  *

package/dist/templates/index.d.ts

@@ -1,11 +1,12 @@
 import { type TemplateCategory } from '@formicoidea/labre-core/gfx/template';
 import type { ChromeWording } from '@formicoidea/labre-core/shared/services';
 /**
- * The two hand-drawn palette swatches' own tile names (`Template.nameKey`):
- * neither derives from a command, since `linkTool` / `evolutionArrow`
- * activate a tool rather than draw anything (see `tpl` below and its
- * docstring).
+ * The three hand-drawn palette swatches' own tile names (`Template.nameKey`):
+ * none derives from a command, since `linkTool` / `evolutionArrow` /
+ * `addAreaPolygon` activate a tool rather than draw anything (see `tpl` below
+ * and its docstring).
  */
 export declare const WARDLEY_TEMPLATE_NAME_LINK: ChromeWording;
 export declare const WARDLEY_TEMPLATE_NAME_EVOLUTION_ARROW: ChromeWording;
+export declare const WARDLEY_TEMPLATE_NAME_AREA_POLYGON: ChromeWording;
 export declare const wardleyTemplateCategory: TemplateCategory;

package/dist/templates/index.js

@@ -5,6 +5,7 @@ import { lowerWardleyArea } from '../actions.js';
 import { wardleyCommands } from '../commands.js';
 import { COLORS } from '../consts.js';
 import { INERTIA_COLOR, LINK_GREY, LINK_STROKE_WIDTH, NODE_FILL, NODE_STROKE, WARDLEY_RED, } from '../node/consts.js';
+import { WARDLEY_AREA_SIZE, wardleyAreaProps } from '../presets.js';
 import { WARDLEY_ROLE } from '../roles.js';
 import { wardleyMaps } from './maps.js';
 /**
@@ -74,10 +75,10 @@ const arrowPreview = (rightwards) => `<svg ${ATTRS} fill="none"><path d="${right
 /** 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>`;
 /**
- * The two hand-drawn palette swatches' own tile names (`Template.nameKey`):
- * neither derives from a command, since `linkTool` / `evolutionArrow`
- * activate a tool rather than draw anything (see `tpl` below and its
- * docstring).
+ * The three hand-drawn palette swatches' own tile names (`Template.nameKey`):
+ * none derives from a command, since `linkTool` / `evolutionArrow` /
+ * `addAreaPolygon` activate a tool rather than draw anything (see `tpl` below
+ * and its docstring).
  */
 export const WARDLEY_TEMPLATE_NAME_LINK = [
     'com.labre.wardley.template.link',
@@ -87,6 +88,10 @@ export const WARDLEY_TEMPLATE_NAME_EVOLUTION_ARROW = [
     'com.labre.wardley.template.evolution-arrow',
     'Evolution arrow',
 ];
+export const WARDLEY_TEMPLATE_NAME_AREA_POLYGON = [
+    'com.labre.wardley.template.area-polygon',
+    'Area (polygon)',
+];
 /** A hand-composed template — what is left once the artefacts are derived. */
 function tpl(name, preview, elements, nameKey) {
     return {
@@ -98,7 +103,7 @@ function tpl(name, preview, elements, nameKey) {
     };
 }
 /**
- * A zone, plus the one thing a snapshot cannot say.
+ * A zone card, 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
@@ -106,9 +111,9 @@ function tpl(name, preview, elements, nameKey) {
  * 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) {
+function areaTemplate(template) {
     return {
-        ...templateFromCommand(byId(id), preview),
+        ...template,
         afterInsert: (std, insertedIds) => lowerWardleyArea(std.get(GfxControllerIdentifier), insertedIds[0]),
     };
 }
@@ -147,7 +152,17 @@ export const wardleyTemplateCategory = {
         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>`, {
             a: connect({ position: [0, 0] }, { position: [160, 0] }, { evolution: true, typed: false }),
         }, WARDLEY_TEMPLATE_NAME_EVOLUTION_ARROW[0]),
-        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"/>')),
+        areaTemplate(templateFromCommand(byId('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"/>'))),
+        // Hand-composed, like the two connector swatches and for the same reason:
+        // `wardley.addAreaPolygon` arms the polygon tool (#343) and draws nothing,
+        // so there is no action to record. A panel card cannot arm a tool — it
+        // inserts a snapshot — so the card keeps offering the zone ready-made, and
+        // the author who wants to place the corners uses the sub-menu. The props
+        // still come from the pack, so the two zones cannot disagree.
+        areaTemplate(tpl(WARDLEY_TEMPLATE_NAME_AREA_POLYGON[1], 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"/>'), {
+            area: wardleyAreaProps('polygon', {
+                xywh: `[0,0,${WARDLEY_AREA_SIZE.polygon.w},${WARDLEY_AREA_SIZE.polygon.h}]`,
+            }),
+        }, WARDLEY_TEMPLATE_NAME_AREA_POLYGON[0])),
     ],
 };

package/dist/templates/maps.d.ts

@@ -4,7 +4,7 @@ import { type ChromeWording } from '@formicoidea/labre-core/shared/services';
  * The seeds the two worked maps write — declared once so the builders below
  * and the manifest (`../translations.ts`) read the very same fallback, never
  * a restated literal. `com.labre.wardley.example.<map>.<slug>`, per
- * `docs/adr/0016`.
+ * `docs/adr/0023`.
  */
 export declare const TEA_SHOP_SEED: {
     readonly title: {

package/dist/templates/maps.js

@@ -222,7 +222,7 @@ const mapPreview = (extra) => `<svg ${ATTRS} fill="none"><path d="M22 12 V64 H12
  * The seeds the two worked maps write — declared once so the builders below
  * and the manifest (`../translations.ts`) read the very same fallback, never
  * a restated literal. `com.labre.wardley.example.<map>.<slug>`, per
- * `docs/adr/0016`.
+ * `docs/adr/0023`.
  */
 export const TEA_SHOP_SEED = {
     title: {
@@ -310,7 +310,7 @@ function seedText(std, def) {
  * `build` takes the OPTIONAL inserting editor: called with none, at module
  * load, for the English `content`; called again with the real `std` as
  * {@link Template.localize}, so the two builds read the very same layout and
- * differ only in the words a seed resolves to (`docs/adr/0016`).
+ * differ only in the words a seed resolves to (`docs/adr/0023`).
  */
 function tpl(name, preview, build, nameKey) {
     return {

package/dist/toolbar/config.d.ts

@@ -1,4 +1,4 @@
-import { type ChromeWording, type ToolbarContext } from '@formicoidea/labre-core/shared/services';
+import { type ChromeWording, type ToolbarContext, type ToolbarModuleConfig } from '@formicoidea/labre-core/shared/services';
 import { type TemplateResult } from 'lit';
 /** Every wording above, for `translations.ts`'s manifest contribution. */
 export declare const WARDLEY_TOOLBAR_WORDINGS: readonly ChromeWording[];
@@ -73,12 +73,37 @@ export declare const wardleyToolbarConfig: {
             active(ctx: ToolbarContext): boolean;
             run(ctx: ToolbarContext): void;
         }];
-    }, {
-        readonly id: "d.legend";
-        readonly tooltipWording: ChromeWording;
-        readonly icon: TemplateResult<2>;
-        readonly run: (ctx: ToolbarContext) => void;
-    }];
+    }, import("@formicoidea/labre-core/shared/services").ToolbarActionGenerator];
     readonly when: (ctx: ToolbarContext) => boolean;
 };
 export declare const wardleyToolbarExtension: import("@formicoidea/labre-core/store").ExtensionType;
+/**
+ * The map's flag-gated row, WHOLE: the Legend button and the Validation
+ * dropdown, in one module.
+ *
+ * ## Why they cannot be two modules
+ *
+ * `renderToolbar` merges exactly four slots per element — `<flavour>`,
+ * `custom:<flavour>` and the two `affine:surface:*` wildcards — and
+ * `ToolbarModuleExtension` binds by DI variant, so a second module claiming
+ * `custom:affine:surface:wardley` would throw
+ * `DuplicateServiceDefinitionError` before the editor finished setting up. Two
+ * slots, and Wardley has three things to put on a selected map: the axis and
+ * label toggles (always-on, `<flavour>`, above), the legend and the level of
+ * requirement. The precedent is C4's `c4BoardToolingToolbarConfig`.
+ *
+ * ## Why the legend moved OUT of the always-on half
+ *
+ * Because GENERATING one is tooling, and `docs/adr/0009` gates tooling: the
+ * flag off takes away the gesture that writes legend elements, exactly as it
+ * takes away the sub-menu that draws components. What the gesture already
+ * wrote is document CONTENT and keeps being painted — the box is plain shapes,
+ * text and `wardleyNode`s with no role, all drawn by the always-on renderers.
+ * The axis and label toggles stay always-on for the opposite reason: a stored
+ * map must keep its axes whatever the flag says.
+ *
+ * Sorting keeps the row readable across the merge — `a.` … `d.legend` from the
+ * two modules, then `z.validation` — whatever order they were registered in.
+ */
+export declare const wardleyBoardToolingToolbarConfig: ToolbarModuleConfig;
+export declare const wardleyBoardToolingToolbarExtension: import("@formicoidea/labre-core/store").ExtensionType;