@formicoidea/labre-framework-wardley 0.31.0 → 0.33.0

package/dist/commands.js

@@ -0,0 +1,352 @@
+import { GfxControllerIdentifier } from '@formicoidea/labre-core/std/gfx';
+import { activateWardleyConnector, createWardleyBackground, createWardleyInertia, createWardleyMarket, createWardleyNode, createWardleyPipeline, exportOwmFile, importOwmFile, importWardleySvgFile, wardleyMapsOnBoard, } from './actions.js';
+import { WARDLEY_ROLE, WARDLEY_ROLES } from './roles.js';
+import { wardleyAnchorIcon, wardleyArrowIcon, wardleyBackgroundIcon, wardleyBenefitIcon, wardleyComponentIcon, wardleyEcosystemIcon, wardleyEvolutionGradientIcon, wardleyExportOwmIcon, wardleyImportOwmIcon, wardleyImportSvgIcon, wardleyInertiaIcon, wardleyLinkIcon, wardleyMarketIcon, wardleyMethodIcon, wardleyOpportunityIcon, wardleyPipelineIcon, } from './toolbar/icons.js';
+const SPECS = [
+    {
+        id: 'addBackground',
+        label: 'Wardley map background',
+        labelKey: 'com.labre.keyboardShortcuts.wardley.addBackground',
+        key: 'b',
+        iconKey: 'wardley.background',
+        category: 'backgrounds',
+        kind: 'artefact',
+        element: 'background:classic',
+        run: gfx => createWardleyBackground(gfx, 'classic'),
+    },
+    {
+        id: 'addOpportunityBackground',
+        label: 'Opportunity background (gradient)',
+        iconKey: 'wardley.background.opportunity',
+        category: 'backgrounds',
+        kind: 'artefact',
+        element: 'background:opportunity',
+        run: gfx => createWardleyBackground(gfx, 'opportunity'),
+    },
+    {
+        id: 'addBenefitBackground',
+        label: 'Benefit / Investment background (gradient)',
+        iconKey: 'wardley.background.benefit',
+        category: 'backgrounds',
+        kind: 'artefact',
+        element: 'background:benefit',
+        run: gfx => createWardleyBackground(gfx, 'benefit'),
+    },
+    {
+        id: 'addEvolutionBackground',
+        label: 'Evolution background (Wardley presentation)',
+        iconKey: 'wardley.background.evolution',
+        category: 'backgrounds',
+        kind: 'artefact',
+        element: 'background:evolution-gradient',
+        run: gfx => createWardleyBackground(gfx, 'evolution-gradient'),
+    },
+    {
+        id: 'addComponent',
+        label: 'Component',
+        labelKey: 'com.labre.keyboardShortcuts.wardley.addComponent',
+        key: 'c',
+        iconKey: 'wardley.component',
+        category: 'nodes',
+        kind: 'artefact',
+        element: 'node:component',
+        run: gfx => createWardleyNode(gfx, 'component'),
+    },
+    {
+        id: 'addMethod',
+        label: 'Component + method',
+        labelKey: 'com.labre.keyboardShortcuts.wardley.addMethod',
+        key: 'm',
+        iconKey: 'wardley.method',
+        category: 'nodes',
+        kind: 'artefact',
+        element: 'node:method',
+        run: gfx => createWardleyNode(gfx, 'method'),
+    },
+    {
+        id: 'addMarket',
+        label: 'Market',
+        iconKey: 'wardley.market',
+        category: 'nodes',
+        kind: 'artefact',
+        element: 'node:market',
+        run: createWardleyMarket,
+    },
+    {
+        id: 'addEcosystem',
+        label: 'Ecosystem',
+        iconKey: 'wardley.ecosystem',
+        category: 'nodes',
+        kind: 'artefact',
+        element: 'node:ecosystem',
+        run: gfx => createWardleyNode(gfx, 'ecosystem'),
+    },
+    {
+        id: 'addAnchor',
+        label: 'Anchor',
+        iconKey: 'wardley.anchor',
+        category: 'nodes',
+        kind: 'artefact',
+        element: 'node:anchor',
+        run: gfx => createWardleyNode(gfx, 'anchor'),
+    },
+    {
+        id: 'addPipeline',
+        label: 'Pipeline',
+        labelKey: 'com.labre.keyboardShortcuts.wardley.addPipeline',
+        key: 'p',
+        iconKey: 'wardley.pipeline',
+        category: 'nodes',
+        kind: 'artefact',
+        element: 'node:pipeline',
+        run: createWardleyPipeline,
+    },
+    {
+        id: 'linkTool',
+        label: 'Link',
+        labelKey: 'com.labre.keyboardShortcuts.wardley.linkTool',
+        key: 'l',
+        iconKey: 'wardley.link',
+        category: 'connectors',
+        kind: 'tool',
+        element: 'connector:link',
+        edgeRole: WARDLEY_ROLE.dependency,
+        run: gfx => activateWardleyConnector(gfx, 'link'),
+    },
+    {
+        id: 'evolutionArrow',
+        label: 'Arrow (evolution)',
+        labelKey: 'com.labre.keyboardShortcuts.wardley.evolutionArrow',
+        key: 'a',
+        iconKey: 'wardley.arrow',
+        category: 'connectors',
+        kind: 'tool',
+        element: 'connector:arrow',
+        edgeRole: WARDLEY_ROLE.changeArrow,
+        run: gfx => activateWardleyConnector(gfx, 'arrow'),
+    },
+    {
+        id: 'addInertia',
+        label: 'Inertia',
+        labelKey: 'com.labre.keyboardShortcuts.wardley.addInertia',
+        key: 'i',
+        iconKey: 'wardley.inertia',
+        category: 'nodes',
+        kind: 'artefact',
+        element: 'node:inertia',
+        run: createWardleyInertia,
+    },
+];
+/**
+ * The sentence a tool shows under its label — the role's own gesture hint
+ * (M1 of `docs/adr/0010`), or nothing at all for a tool that draws no typed
+ * edge. Read off the vocabulary rather than written here twice.
+ */
+function gestureOf(spec) {
+    const direction = spec.edgeRole === undefined
+        ? undefined
+        : WARDLEY_ROLES[spec.edgeRole]?.direction;
+    if (!direction?.gestureHintKey)
+        return {};
+    return {
+        descriptionKey: direction.gestureHintKey,
+        descriptionFallback: direction.gestureHintFallback,
+    };
+}
+const toolboxCommands = SPECS.map((spec, order) => ({
+    id: `wardley.${spec.id}`,
+    owner: 'wardley',
+    kind: spec.kind,
+    labelKey: spec.labelKey ?? `com.labre.commands.wardley.${spec.id}`,
+    labelFallback: spec.label,
+    ...gestureOf(spec),
+    category: spec.category,
+    iconKey: spec.iconKey,
+    surfaces: ['senior-menu', 'catalogue', 'palette', 'agent'],
+    order,
+    scope: 'edgeless',
+    defaultKeys: spec.key
+        ? { mac: ['w', spec.key], other: ['w', spec.key] }
+        : { mac: [], other: [] },
+    availability: 'always',
+    run: std => spec.run(std.get(GfxControllerIdentifier)),
+    telemetry: { framework: 'wardley', element: spec.element },
+}));
+/**
+ * The IMPORT — the first Wardley command whose subject is a whole map rather
+ * than something you draw, and the first that needs nothing on the board.
+ *
+ * ## `'senior-menu'`, per the PO decision of 2026-08-28
+ *
+ * An interpreted import lives in its framework's sub-menu. On an empty canvas
+ * the sub-menu is the first thing a user opens, and "start from the map
+ * somebody sent me" belongs in that row beside "start from a component" —
+ * asking them to find the catalogue sidepanel first is the friction the
+ * decision names. It is Wardley's fourteenth nomination, which is exactly the
+ * cap, so nothing about the sub-menu's arbitration changes and no button is
+ * pushed out of the row.
+ *
+ * No `'contextual-toolbar'`: a contextual toolbar is a statement about a
+ * SELECTION, and the moment this command is most wanted is on a board with
+ * nothing on it at all.
+ *
+ * ## `'editable'`
+ *
+ * An import needs no selection, but it WRITES, so a read-only document is one
+ * it cannot run on — and that is a precondition a catalogue has to be able to
+ * show. `'always'` would light the entry on a read-only board, do nothing when
+ * clicked, and put the same untruth into the manifest a host reads.
+ */
+const importCommand = {
+    id: 'wardley.importOwm',
+    owner: 'wardley',
+    kind: 'action',
+    labelKey: 'com.labre.commands.wardley.importOwm',
+    labelFallback: 'Import Wardley map (OWM)',
+    descriptionKey: 'com.labre.commands.wardley.importOwm.description',
+    descriptionFallback: 'Open an OnlineWardleyMaps .owm file as a map. What Labre cannot draw is kept in the document, and the import says what it was.',
+    category: 'interchange',
+    iconKey: 'wardley.import-owm',
+    surfaces: ['senior-menu', 'catalogue', 'palette', 'agent'],
+    order: SPECS.length,
+    scope: 'edgeless',
+    // Keyless by intent. The `w` chord already seats seven artefacts, and a
+    // framework binds past that by host override rather than by shipping a
+    // default — still bindable from Settings › Shortcuts.
+    defaultKeys: { mac: [], other: [] },
+    availability: 'editable',
+    run: std => void importOwmFile(std),
+    // `board:` and not `node:` — this one is launched with no map anywhere.
+    telemetry: { framework: 'wardley', element: 'board:import-owm' },
+};
+/**
+ * The EXPORT — the other direction of the same format.
+ *
+ * It declines `'senior-menu'`, and the asymmetry with the import above is the
+ * ruling BPMN already carries: the sub-menu is where a board COMES FROM, and an
+ * export is what you do to a board you already have. It keeps `'catalogue'`,
+ * which is the registry's own invariant rather than a category claim — a
+ * command missing from the catalogue is unreachable the moment its framework
+ * overflows the fourteen slots — plus the palette and the agent. No
+ * `'contextual-toolbar'` either, and that is a declaration rather than an
+ * oversight: a contextual-toolbar surface is rendered by an element's own
+ * `ToolbarModuleConfig`, and declaring one nothing invokes would put an entry
+ * in the manifest that no toolbar draws.
+ *
+ * `'always'` with a `when` on the BOARD, and the pair is deliberate. An export
+ * READS: it needs no selection, and it is offered on a locked map and on a
+ * read-only document — which is precisely the board somebody wants to take
+ * away. What it DOES need is a plot to measure coordinates against, and that is
+ * a fact about the surface rather than about the selection: a Wardley node has
+ * no `visibility` prop, so its position on the plot IS its coordinate, and with
+ * no map there is nothing to invert. `'selection'` would be BPMN's shape copied
+ * for the look of it — that command's precondition genuinely is a selected
+ * pool, and this one's is not.
+ *
+ * **v1 writes one map.** An OWM document is one map; a board holding several is
+ * written against the first in document order and the export says so out loud
+ * in its warnings.
+ */
+const exportCommand = {
+    id: 'wardley.exportOwm',
+    owner: 'wardley',
+    kind: 'action',
+    labelKey: 'com.labre.commands.wardley.exportOwm',
+    labelFallback: 'Export Wardley map (OWM)',
+    descriptionKey: 'com.labre.commands.wardley.exportOwm.description',
+    descriptionFallback: 'Download the map as an OnlineWardleyMaps .owm file, ready to open in any Wardley mapping tool.',
+    category: 'interchange',
+    iconKey: 'wardley.export-owm',
+    surfaces: ['catalogue', 'palette', 'agent'],
+    order: SPECS.length + 1,
+    scope: 'edgeless',
+    defaultKeys: { mac: [], other: [] },
+    availability: 'always',
+    run: exportOwmFile,
+    telemetry: { framework: 'wardley', element: 'board:export-owm' },
+    when: std => wardleyMapsOnBoard(std).length > 0,
+};
+/**
+ * The SVG FALLBACK import — the visual tier, named as such before the picker
+ * opens (`docs/adr/0012`, P2).
+ *
+ * ## Why the catalogue and not the senior row
+ *
+ * Because {@link importCommand} is already there. The sub-menu carries the
+ * framework's NATIVE format — the OWM DSL, which the ADR's roadmap calls the
+ * reference Wardley import — and that is the route a user should be pointed at:
+ * an `.owm` file carries `[visibility, evolution]` pairs, which ARE the map's
+ * meaning, so it round-trips. This one reads a picture. A fallback that
+ * outranked the real thing would be the platform offering the lossy door first,
+ * and Wardley's fourteen nominations are already exactly the cap — a fifteenth
+ * would push a button out of the row for the rarest thing anybody does to a map.
+ *
+ * So it lands one click away, in the artefact catalogue behind "More
+ * artefacts…", and keeps `'palette'` and `'agent'` so it stays findable by name
+ * and invocable by an agent.
+ *
+ * **Flagged for the PO** as a curation call rather than a technical one: it is
+ * a one-line change either way.
+ *
+ * ## The label names the tier before the file is read
+ *
+ * A map is coordinates, and this reader recovers none: it recognises circles
+ * and words. Saying so in the description is not modesty, it is the contract —
+ * "the import surface must name the tier before the file is read".
+ */
+const importSvgCommand = {
+    id: 'wardley.importSvg',
+    owner: 'wardley',
+    kind: 'action',
+    labelKey: 'com.labre.commands.wardley.importSvg',
+    labelFallback: 'Import SVG sketch',
+    descriptionKey: 'com.labre.commands.wardley.importSvg.description',
+    descriptionFallback: 'Best effort: recognises shapes and text, no round-trip. The axes and the evolution are not read — what arrives is a sketch you then promote.',
+    // The same section the two OWM directions are filed under, and the same one
+    // BPMN files its `.bpmn` pair under: a host that translated the header once
+    // has translated it for every framework.
+    category: 'interchange',
+    iconKey: 'wardley.import-svg',
+    surfaces: ['catalogue', 'palette', 'agent'],
+    // Last of the three interchange entries, which is also how the section reads
+    // for somebody scanning "what can I do with a file": the native format both
+    // ways, then the best-effort reader.
+    order: SPECS.length + 2,
+    scope: 'edgeless',
+    defaultKeys: { mac: [], other: [] },
+    // It WRITES, so a read-only document is one it cannot run on.
+    availability: 'editable',
+    run: importWardleySvgFile,
+    // `board:` and not `node:`: it is launched with nothing selected, and often
+    // with nothing on the canvas at all.
+    telemetry: { framework: 'wardley', element: 'board:import-svg' },
+};
+/**
+ * The Wardley registry: the thirteen toolbox entries, then the two directions
+ * of the OWM DSL and the SVG fallback (`docs/adr/0012`).
+ */
+export const wardleyCommands = [
+    ...toolboxCommands,
+    importCommand,
+    exportCommand,
+    importSvgCommand,
+];
+/** `iconKey` → template. Never travels through either manifest (ADR 0008). */
+export const wardleyCommandIcons = {
+    'wardley.background': wardleyBackgroundIcon,
+    'wardley.background.opportunity': wardleyOpportunityIcon,
+    'wardley.background.benefit': wardleyBenefitIcon,
+    'wardley.background.evolution': wardleyEvolutionGradientIcon,
+    'wardley.component': wardleyComponentIcon,
+    'wardley.method': wardleyMethodIcon,
+    'wardley.market': wardleyMarketIcon,
+    'wardley.ecosystem': wardleyEcosystemIcon,
+    'wardley.anchor': wardleyAnchorIcon,
+    'wardley.pipeline': wardleyPipelineIcon,
+    'wardley.link': wardleyLinkIcon,
+    'wardley.arrow': wardleyArrowIcon,
+    'wardley.inertia': wardleyInertiaIcon,
+    'wardley.import-owm': wardleyImportOwmIcon,
+    'wardley.export-owm': wardleyExportOwmIcon,
+    'wardley.import-svg': wardleyImportSvgIcon,
+};

package/dist/consts.d.ts

@@ -47,10 +47,16 @@ export declare const LINE: {
 };
 export declare const ARROW = 11;
 export declare const CARD_RADIUS = 10;
-/** Evolution phase boundary ratios (interior dividers). */
-export declare const EVOLUTION_BOUNDARIES: readonly [0.175, 0.4, 0.7];
-/** Ordered phases: [label, startRatio]. */
-export declare const EVOLUTION_PHASES: ReadonlyArray<readonly [string, number]>;
+/**
+ * Default phase wording. The zone RATIOS live in `./background.ts`, with the
+ * zones they delimit — the declaration is the single source of the map's shape.
+ */
+export declare const PHASE_LABELS: {
+    genesis: string;
+    customBuilt: string;
+    product: string;
+    commodity: string;
+};
 export declare const AXIS_LABELS: {
     xAxis: string;
     yAxis: string;

package/dist/consts.js

@@ -33,15 +33,16 @@ export const OFFSETS = {
 export const LINE = { axis: 2, divider: 1.2, card: 1.5 };
 export const ARROW = 11;
 export const CARD_RADIUS = 10;
-/** Evolution phase boundary ratios (interior dividers). */
-export const EVOLUTION_BOUNDARIES = [0.175, 0.4, 0.7];
-/** Ordered phases: [label, startRatio]. */
-export const EVOLUTION_PHASES = [
-    ['Genesis', 0],
-    ['Custom-Built', 0.175],
-    ['Product (+Rental)', 0.4],
-    ['Commodity (+Utility)', 0.7],
-];
+/**
+ * Default phase wording. The zone RATIOS live in `./background.ts`, with the
+ * zones they delimit — the declaration is the single source of the map's shape.
+ */
+export const PHASE_LABELS = {
+    genesis: 'Genesis',
+    customBuilt: 'Custom-Built',
+    product: 'Product (+Rental)',
+    commodity: 'Commodity (+Utility)',
+};
 export const AXIS_LABELS = {
     xAxis: 'Evolution',
     yAxis: 'Value Chain',

package/dist/descriptor.d.ts

@@ -1,7 +1,12 @@
-import { WardleyViewExtension } from './view.js';
+import { WardleyRenderViewExtension, WardleyViewExtension } from './view.js';
 /** Host wiring for the wardley framework. */
 export declare const wardleyFramework: {
     readonly flag: "wardley";
-    readonly telemetry: "wardley";
-    readonly viewExtension: typeof WardleyViewExtension;
+    readonly telemetryKey: "wardley";
+    readonly extensions: readonly [{
+        readonly viewExtension: typeof WardleyRenderViewExtension;
+    }, {
+        readonly flag: "wardley";
+        readonly viewExtension: typeof WardleyViewExtension;
+    }];
 };

package/dist/descriptor.js

@@ -1,7 +1,10 @@
-import { WardleyViewExtension } from './view.js';
+import { WardleyRenderViewExtension, WardleyViewExtension } from './view.js';
 /** Host wiring for the wardley framework. */
 export const wardleyFramework = {
     flag: 'wardley',
-    telemetry: 'wardley',
-    viewExtension: WardleyViewExtension,
+    telemetryKey: 'wardley',
+    extensions: [
+        { viewExtension: WardleyRenderViewExtension },
+        { flag: 'wardley', viewExtension: WardleyViewExtension },
+    ],
 };

package/dist/element-renderer.d.ts

@@ -1,12 +1,15 @@
 import { type ElementRenderer } from '@formicoidea/labre-core/blocks/surface';
 import type { WardleyBackgroundElementModel } from '@formicoidea/labre-core/model';
 /**
- * Canvas renderer for the Wardley map background — reproduces mockup C:
- * an L-shaped axes frame (no top/right border), dashed evolution dividers and
- * the symmetric axis labels.
+ * Canvas renderer for the Wardley map background.
  *
- * All sizes (fonts, margins, offsets, strokes) are FIXED model units — they do
- * not scale with the element size. Only the plot interior scales.
+ * There is no Wardley drawing code any more (PF2.12): the map is an
+ * INSTANTIATION of the framework-background primitive, configured by the
+ * `WARDLEY_BACKGROUND` declaration. What used to be two hundred lines of
+ * `ctx.fillText` is now a declaration any other framework can write for itself.
+ *
+ * Exported as a function as well as an extension because the non-regression
+ * suite drives it directly with a canvas stub.
  */
 export declare const wardley: ElementRenderer<WardleyBackgroundElementModel>;
 export declare const WardleyElementRendererExtension: import("@formicoidea/labre-core/store").ExtensionType & {

package/dist/element-renderer.js

@@ -1,150 +1,15 @@
-import { ElementRendererExtension, } from '@formicoidea/labre-core/blocks/surface';
-import { ARROW, CARD_RADIUS, COLORS, EVOLUTION_BOUNDARIES, FONT_FAMILY, FONTS, LINE, MARGIN, OFFSETS, } from './consts.js';
-import { paintGradientBackground } from './gradient.js';
-function roundRectPath(ctx, x, y, w, h, r) {
-    const rr = Math.min(r, w / 2, h / 2);
-    ctx.beginPath();
-    ctx.moveTo(x + rr, y);
-    ctx.arcTo(x + w, y, x + w, y + h, rr);
-    ctx.arcTo(x + w, y + h, x, y + h, rr);
-    ctx.arcTo(x, y + h, x, y, rr);
-    ctx.arcTo(x, y, x + w, y, rr);
-    ctx.closePath();
-}
+import { createFrameworkBackgroundRenderer, ElementRendererExtension, } from '@formicoidea/labre-core/blocks/surface';
+import { WARDLEY_BACKGROUND } from './background.js';
 /**
- * Canvas renderer for the Wardley map background — reproduces mockup C:
- * an L-shaped axes frame (no top/right border), dashed evolution dividers and
- * the symmetric axis labels.
+ * Canvas renderer for the Wardley map background.
  *
- * All sizes (fonts, margins, offsets, strokes) are FIXED model units — they do
- * not scale with the element size. Only the plot interior scales.
+ * There is no Wardley drawing code any more (PF2.12): the map is an
+ * INSTANTIATION of the framework-background primitive, configured by the
+ * `WARDLEY_BACKGROUND` declaration. What used to be two hundred lines of
+ * `ctx.fillText` is now a declaration any other framework can write for itself.
+ *
+ * Exported as a function as well as an extension because the non-regression
+ * suite drives it directly with a canvas stub.
  */
-export const wardley = (model, ctx, matrix) => {
-    const [, , w, h] = model.deserializedXYWH;
-    const cx = w / 2;
-    const cy = h / 2;
-    ctx.setTransform(matrix.translateSelf(cx, cy).rotateSelf(model.rotate).translateSelf(-cx, -cy));
-    const px0 = MARGIN.left;
-    const px1 = w - MARGIN.right;
-    const py0 = MARGIN.top;
-    const py1 = h - MARGIN.bottom;
-    const pw = px1 - px0;
-    const ph = py1 - py0;
-    const ex = (r) => px0 + r * pw;
-    const line = (x1, y1, x2, y2) => {
-        ctx.beginPath();
-        ctx.moveTo(x1, y1);
-        ctx.lineTo(x2, y2);
-        ctx.stroke();
-    };
-    const vtext = (text, x, y, fontSize, color) => {
-        ctx.save();
-        ctx.translate(x, y);
-        ctx.rotate(-Math.PI / 2);
-        ctx.font = `${fontSize}px ${FONT_FAMILY}`;
-        ctx.fillStyle = color;
-        ctx.textAlign = 'center';
-        ctx.textBaseline = 'alphabetic';
-        ctx.fillText(text, 0, 0);
-        ctx.restore();
-    };
-    // ── Card (element bounds) ───────────────────────────────────────────
-    const inset = LINE.card / 2;
-    roundRectPath(ctx, inset, inset, w - inset * 2, h - inset * 2, CARD_RADIUS);
-    ctx.fillStyle = COLORS.card;
-    ctx.fill();
-    ctx.strokeStyle = COLORS.cardBorder;
-    ctx.lineWidth = LINE.card;
-    ctx.stroke();
-    // ── Curve-driven gradient variants (inscribed in the frame) ─────────
-    // Hidden when `showGradient` is false → plain white background.
-    if (model.variant !== 'classic' && model.showGradient) {
-        paintGradientBackground(ctx, model.variant, px0, px1, py0, py1);
-    }
-    // ── Optional evolution band tints ───────────────────────────────────
-    if (model.banded) {
-        const starts = [0, 0.175, 0.4, 0.7];
-        const ends = [0.175, 0.4, 0.7, 1];
-        for (let i = 0; i < 4; i++) {
-            ctx.fillStyle = COLORS.band[i];
-            ctx.fillRect(ex(starts[i]), py0, ex(ends[i]) - ex(starts[i]), ph);
-        }
-    }
-    // ── Evolution phase dividers (dashed) ───────────────────────────────
-    if (model.showColumnDividers) {
-        ctx.strokeStyle = COLORS.divider;
-        ctx.lineWidth = LINE.divider;
-        ctx.setLineDash([5, 5]);
-        for (const r of EVOLUTION_BOUNDARIES) {
-            line(ex(r), py0, ex(r), py1);
-        }
-        ctx.setLineDash([]);
-    }
-    // ── Axes (L shape) + arrowheads ─────────────────────────────────────
-    // X and Y axes are independently toggleable. Each line stops at the base of
-    // its arrowhead (1px overlap, hidden under the triangle) so the line never
-    // pokes past the tip on zoom.
-    ctx.strokeStyle = COLORS.axis;
-    ctx.lineWidth = LINE.axis;
-    ctx.fillStyle = COLORS.axis;
-    if (model.showXAxis) {
-        line(px0, py1, px1 - ARROW + 1, py1); // X axis (arrow tip at px1)
-        ctx.beginPath(); // X arrow (points right)
-        ctx.moveTo(px1, py1);
-        ctx.lineTo(px1 - ARROW, py1 - ARROW / 2);
-        ctx.lineTo(px1 - ARROW, py1 + ARROW / 2);
-        ctx.closePath();
-        ctx.fill();
-    }
-    if (model.showYAxis) {
-        line(px0, py1, px0, py0 + ARROW - 1); // Y axis (arrow tip at py0)
-        ctx.beginPath(); // Y arrow (points up)
-        ctx.moveTo(px0, py0);
-        ctx.lineTo(px0 - ARROW / 2, py0 + ARROW);
-        ctx.lineTo(px0 + ARROW / 2, py0 + ARROW);
-        ctx.closePath();
-        ctx.fill();
-    }
-    // ── Horizontal labels ───────────────────────────────────────────────
-    ctx.textBaseline = 'alphabetic';
-    // Phase (column) labels (left-aligned at each zone start)
-    if (model.showColumnLabels) {
-        ctx.font = `${FONTS.phase}px ${FONT_FAMILY}`;
-        ctx.fillStyle = COLORS.label;
-        ctx.textAlign = 'left';
-        const phases = [
-            [model.phase0, 0],
-            [model.phase1, 0.175],
-            [model.phase2, 0.4],
-            [model.phase3, 0.7],
-        ];
-        for (const [label, start] of phases) {
-            ctx.fillText(label, ex(start) + OFFSETS.phasePad, py1 + OFFSETS.phaseBaseline);
-        }
-    }
-    // "Evolution" title near the X arrow (tied to the X axis)
-    if (model.showXAxis) {
-        ctx.font = `${FONTS.axis}px ${FONT_FAMILY}`;
-        ctx.fillStyle = COLORS.axis;
-        ctx.textAlign = 'right';
-        ctx.fillText(model.xAxisTitle, px1 - OFFSETS.evolutionPadRight, py1 + OFFSETS.phaseBaseline);
-    }
-    // Direction indicators (Uncharted / Industrialized, top corners)
-    if (model.showCornerLabels) {
-        ctx.font = `${FONTS.direction}px ${FONT_FAMILY}`;
-        ctx.fillStyle = COLORS.label;
-        ctx.textAlign = 'left';
-        ctx.fillText(model.evolutionStart, px0 + OFFSETS.directionPadLeft, py0 + OFFSETS.directionTop);
-        ctx.textAlign = 'right';
-        ctx.fillText(model.evolutionEnd, px1 - OFFSETS.directionPadRight, py0 + OFFSETS.directionTop);
-    }
-    // ── Rotated Y labels (hugging the axis, symmetric with the X labels) ─
-    if (model.showYAxis) {
-        vtext(model.yAxisTitle, px0 - OFFSETS.yHug, (py0 + py1) / 2, FONTS.axis, COLORS.axis);
-    }
-    if (model.showVisibilityLabels) {
-        vtext(model.visibilityHigh, px0 - OFFSETS.yHug, py0 + OFFSETS.visibleTop, FONTS.visibility, COLORS.label);
-        vtext(model.visibilityLow, px0 - OFFSETS.yHug, py1 - OFFSETS.invisibleBottom, FONTS.visibility, COLORS.label);
-    }
-};
-export const WardleyElementRendererExtension = ElementRendererExtension('wardley', wardley);
+export const wardley = createFrameworkBackgroundRenderer(WARDLEY_BACKGROUND);
+export const WardleyElementRendererExtension = ElementRendererExtension(WARDLEY_BACKGROUND.type, wardley);

package/dist/element-view.d.ts

@@ -8,13 +8,17 @@ export declare class WardleyView extends GfxElementModelView<WardleyBackgroundEl
     onDestroyed(): void;
     /** Double-click on a label → edit its text in place. */
     private _onDblClick;
+    /**
+     * @param current the words currently DRAWN — which is the vocabulary, not
+     * `model[field]`, for a label the user has never renamed. Opening on the raw
+     * prop would show an empty box for a label that plainly reads "Evolution".
+     */
     private _openLabelEditor;
     private _closeLabelEditor;
 }
 /**
- * Resize gating: the resize handles are hidden unless `model.resizeEnabled` is
- * true. `beforeResize` is re-evaluated every time the allowed handles are
- * computed (manager.ts), so toggling the field from the toolbar updates the
- * handles reactively. Moving/selecting stays available throughout.
+ * Resize gating, from the primitive: the handles stay hidden until
+ * `resizeEnabled` is true — the runtime half of the declaration's
+ * `geometry.resizable`.
  */
 export declare const WardleyInteraction: import("@formicoidea/labre-core/store").ExtensionType;