@formicoidea/labre-framework-wardley 0.39.3 → 0.41.0

package/dist/templates/index.js

@@ -3,7 +3,8 @@ import { ConnectorMode, PointStyle, StrokeStyle } from '@formicoidea/labre-core/
 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 { COLORS } from '../consts.js';
+import { INERTIA_COLOR, LINK_GREY, LINK_STROKE_WIDTH, NODE_FILL, NODE_STROKE, WARDLEY_RED, } from '../node/consts.js';
 import { WARDLEY_ROLE } from '../roles.js';
 import { wardleyMaps } from './maps.js';
 /**
@@ -64,20 +65,35 @@ function connect(source, target, opts = {}) {
     };
 }
 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>`;
+const bgPreview = (extra = '') => `<svg ${ATTRS} fill="none"><path d="M22 12 V64 H120" stroke="${COLORS.axis}" stroke-width="2"/><path d="M44 12 V64 M68 12 V64 M94 12 V64" stroke="${COLORS.divider}" stroke-width="0.8"/>${extra}</svg>`;
+const dotPreview = (fill, sw = 2) => `<svg ${ATTRS} fill="none"><circle cx="67" cy="40" r="13" fill="${fill}" stroke="${NODE_STROKE}" stroke-width="${sw}"/></svg>`;
 /** 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>`;
+    : 'M103 32 H55 V23 L32 40 L55 57 V48 H103 Z'}" fill="#bfbfbf" stroke="${NODE_STROKE}" 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>`;
+/**
+ * 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).
+ */
+export const WARDLEY_TEMPLATE_NAME_LINK = [
+    'com.labre.wardley.template.link',
+    'Link',
+];
+export const WARDLEY_TEMPLATE_NAME_EVOLUTION_ARROW = [
+    'com.labre.wardley.template.evolution-arrow',
+    'Evolution arrow',
+];
 /** A hand-composed template — what is left once the artefacts are derived. */
-function tpl(name, preview, elements) {
+function tpl(name, preview, elements, nameKey) {
     return {
         name,
         type: 'template',
         preview,
+        nameKey,
         content: makeTemplateSnapshot(elements, name),
     };
 }
@@ -98,20 +114,22 @@ function areaTemplate(id, preview) {
 }
 export const wardleyTemplateCategory = {
     name: 'Wardley',
+    // Reuses the senior button's own key — see `TemplateCategory.nameKey`.
+    nameKey: 'com.labre.framework.wardley',
     templates: [
         ...wardleyMaps,
         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.addComponent'), dotPreview(NODE_FILL, 1.5), 'Component'),
+        templateFromCommand(byId('wardley.addMethod'), `<svg ${ATTRS} fill="none"><circle cx="67" cy="40" r="15" fill="#d9d9d9" stroke="${NODE_STROKE}" stroke-width="1.5"/><circle cx="67" cy="40" r="7" fill="${NODE_FILL}" stroke="${NODE_STROKE}"/></svg>`, 'Method'),
+        templateFromCommand(byId('wardley.addMarket'), `<svg ${ATTRS} fill="none"><circle cx="67" cy="40" r="16" fill="${NODE_FILL}" stroke="${NODE_STROKE}"/><circle cx="67" cy="30" r="3.5" fill="${NODE_FILL}" stroke="${NODE_STROKE}" stroke-width="1.5"/><circle cx="75" cy="46" r="3.5" fill="${NODE_FILL}" stroke="${NODE_STROKE}" stroke-width="1.5"/><circle cx="59" cy="46" r="3.5" fill="${NODE_FILL}" stroke="${NODE_STROKE}" stroke-width="1.5"/><path d="M67 30 L75 46 L59 46 Z" stroke="${NODE_STROKE}" stroke-width="0.8" fill="none"/></svg>`, 'Market'),
+        templateFromCommand(byId('wardley.addEcosystem'), `<svg ${ATTRS} fill="none"><circle cx="67" cy="40" r="15" fill="${NODE_FILL}" stroke="${NODE_STROKE}" stroke-width="1.5"/><circle cx="67" cy="40" r="11" fill="none" stroke="${NODE_STROKE}"/><circle cx="67" cy="40" r="5" fill="${NODE_FILL}" stroke="${NODE_STROKE}"/></svg>`, 'Ecosystem'),
+        templateFromCommand(byId('wardley.addAnchor'), `<svg ${ATTRS} fill="none"><circle cx="67" cy="40" r="13" fill="${NODE_FILL}" stroke="${NODE_STROKE}" stroke-width="1.5"/><circle cx="67" cy="36" r="3.5" fill="${NODE_STROKE}"/><path d="M59 48 q8 -9 16 0" stroke="${NODE_STROKE}" stroke-width="1.5" fill="none"/></svg>`, 'Anchor'),
+        templateFromCommand(byId('wardley.addPipeline'), `<svg ${ATTRS} fill="none"><rect x="34" y="40" width="66" height="14" fill="${NODE_FILL}" stroke="${NODE_STROKE}"/><rect x="60" y="33" width="14" height="14" fill="${NODE_FILL}" stroke="${NODE_STROKE}"/></svg>`, 'Pipeline'),
+        templateFromCommand(byId('wardley.addInertia'), `<svg ${ATTRS} fill="none"><rect x="63" y="22" width="8" height="36" fill="${INERTIA_COLOR}"/></svg>`, 'Inertia'),
+        templateFromCommand(byId('wardley.addPorter'), `<svg ${ATTRS} fill="none"><circle cx="67" cy="40" r="13" fill="${NODE_FILL}" stroke="${NODE_STROKE}" stroke-width="1.5"/><g stroke="${WARDLEY_RED}" stroke-width="2" stroke-linecap="round"><line x1="67" y1="26" x2="67" y2="19"/><line x1="81" y1="40" x2="88" y2="40"/><line x1="67" y1="54" x2="67" y2="61"/><line x1="53" y1="40" x2="46" y2="40"/></g><g fill="${WARDLEY_RED}"><path d="M67 13 L71 21 H63 Z"/><path d="M94 40 L86 44 V36 Z"/><path d="M67 67 L63 59 H71 Z"/><path d="M40 40 L48 36 V44 Z"/></g></svg>`),
         templateFromCommand(byId('wardley.addAccelerator'), arrowPreview(true)),
         templateFromCommand(byId('wardley.addDecelerator'), arrowPreview(false)),
         // NEUTRAL on purpose (`docs/adr/0010` § Compatibility). This is a horizontal
@@ -123,12 +141,12 @@ export const wardleyTemplateCategory = {
         // 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>`, {
+        tpl('Link', `<svg ${ATTRS} fill="none"><path d="M24 40 H110" stroke="${LINK_GREY}" 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>`, {
+        }, WARDLEY_TEMPLATE_NAME_LINK[0]),
+        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"/>')),
     ],

package/dist/templates/maps.d.ts

@@ -1,2 +1,96 @@
 import { type Template } from '@formicoidea/labre-core/gfx/template';
+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`.
+ */
+export declare const TEA_SHOP_SEED: {
+    readonly title: {
+        readonly key: "com.labre.wardley.example.tea-shop.title";
+        readonly fallback: "Tea Shop";
+    };
+    readonly annotations: {
+        readonly key: "com.labre.wardley.example.tea-shop.annotations";
+        readonly fallback: "Annotations:\n1. Standardising power lets kettles evolve faster\n2. Hot water is obvious and well known";
+    };
+    readonly business: {
+        readonly key: "com.labre.wardley.example.tea-shop.business";
+        readonly fallback: "Business";
+    };
+    readonly public: {
+        readonly key: "com.labre.wardley.example.tea-shop.public";
+        readonly fallback: "Public";
+    };
+    readonly cupOfTea: {
+        readonly key: "com.labre.wardley.example.tea-shop.cup-of-tea";
+        readonly fallback: "Cup of Tea";
+    };
+    readonly cup: {
+        readonly key: "com.labre.wardley.example.tea-shop.cup";
+        readonly fallback: "Cup";
+    };
+    readonly tea: {
+        readonly key: "com.labre.wardley.example.tea-shop.tea";
+        readonly fallback: "Tea";
+    };
+    readonly hotWater: {
+        readonly key: "com.labre.wardley.example.tea-shop.hot-water";
+        readonly fallback: "Hot Water";
+    };
+    readonly water: {
+        readonly key: "com.labre.wardley.example.tea-shop.water";
+        readonly fallback: "Water";
+    };
+    readonly kettle: {
+        readonly key: "com.labre.wardley.example.tea-shop.kettle";
+        readonly fallback: "Kettle";
+    };
+    readonly electricKettle: {
+        readonly key: "com.labre.wardley.example.tea-shop.electric-kettle";
+        readonly fallback: "Electric Kettle";
+    };
+    readonly power: {
+        readonly key: "com.labre.wardley.example.tea-shop.power";
+        readonly fallback: "Power";
+    };
+    readonly limitedBy: {
+        readonly key: "com.labre.wardley.example.tea-shop.limited-by";
+        readonly fallback: "limited by";
+    };
+};
+export declare const KODAK_INERTIA_SEED: {
+    readonly title: {
+        readonly key: "com.labre.wardley.example.kodak-inertia.title";
+        readonly fallback: "Wardley map of Kodak's 2005 inertia to digital";
+    };
+    readonly user: {
+        readonly key: "com.labre.wardley.example.kodak-inertia.user";
+        readonly fallback: "User";
+    };
+    readonly captureAMoment: {
+        readonly key: "com.labre.wardley.example.kodak-inertia.capture-a-moment";
+        readonly fallback: "Capture a moment";
+    };
+    readonly filmCamera: {
+        readonly key: "com.labre.wardley.example.kodak-inertia.film-camera";
+        readonly fallback: "Film camera";
+    };
+    readonly digitalCamera: {
+        readonly key: "com.labre.wardley.example.kodak-inertia.digital-camera";
+        readonly fallback: "Digital camera";
+    };
+    readonly photographicFilm: {
+        readonly key: "com.labre.wardley.example.kodak-inertia.photographic-film";
+        readonly fallback: "Photographic film";
+    };
+    readonly digitalStorage: {
+        readonly key: "com.labre.wardley.example.kodak-inertia.digital-storage";
+        readonly fallback: "Digital storage";
+    };
+};
+/** The two worked maps' own tile names (`Template.nameKey`). */
+export declare const WARDLEY_TEMPLATE_NAME_TEA_SHOP: ChromeWording;
+export declare const WARDLEY_TEMPLATE_NAME_KODAK_INERTIA: ChromeWording;
 export declare const wardleyMaps: Template[];

package/dist/templates/maps.js

@@ -1,6 +1,8 @@
 import { makeTemplateSnapshot, surfaceText, surfaceYMap, } from '@formicoidea/labre-core/gfx/template';
 import { ConnectorMode, FontFamily, PointStyle, ShapeStyle, StrokeStyle, TextAlign, } from '@formicoidea/labre-core/model';
-import { LINK_GREY, LINK_STROKE_WIDTH, NODE_FILL, NODE_SIZE, NODE_STROKE, WARDLEY_RED, } from '../node/consts.js';
+import { translateKey, } from '@formicoidea/labre-core/shared/services';
+import { COLORS } from '../consts.js';
+import { INERTIA_COLOR, 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';
@@ -182,7 +184,7 @@ function panel(x, y, w, h) {
         type: 'shape',
         shapeType: 'rect',
         filled: true,
-        fillColor: '#ffffff',
+        fillColor: NODE_FILL,
         strokeColor: NODE_STROKE,
         strokeWidth: 1.2,
         shapeStyle: ShapeStyle.General,
@@ -215,15 +217,120 @@ function title(str) {
     };
 }
 const ATTRS = 'width="100%" height="100%" viewBox="0 0 135 80" xmlns="http://www.w3.org/2000/svg"';
-const mapPreview = (extra) => `<svg ${ATTRS} fill="none"><path d="M22 12 V64 H120" stroke="#3b3d42" stroke-width="2"/>${extra}</svg>`;
-function tpl(name, preview, elements) {
+const mapPreview = (extra) => `<svg ${ATTRS} fill="none"><path d="M22 12 V64 H120" stroke="${COLORS.axis}" stroke-width="2"/>${extra}</svg>`;
+/**
+ * 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`.
+ */
+export const TEA_SHOP_SEED = {
+    title: {
+        key: 'com.labre.wardley.example.tea-shop.title',
+        fallback: 'Tea Shop',
+    },
+    annotations: {
+        key: 'com.labre.wardley.example.tea-shop.annotations',
+        fallback: 'Annotations:\n1. Standardising power lets kettles evolve faster\n2. Hot water is obvious and well known',
+    },
+    business: {
+        key: 'com.labre.wardley.example.tea-shop.business',
+        fallback: 'Business',
+    },
+    public: {
+        key: 'com.labre.wardley.example.tea-shop.public',
+        fallback: 'Public',
+    },
+    cupOfTea: {
+        key: 'com.labre.wardley.example.tea-shop.cup-of-tea',
+        fallback: 'Cup of Tea',
+    },
+    cup: { key: 'com.labre.wardley.example.tea-shop.cup', fallback: 'Cup' },
+    tea: { key: 'com.labre.wardley.example.tea-shop.tea', fallback: 'Tea' },
+    hotWater: {
+        key: 'com.labre.wardley.example.tea-shop.hot-water',
+        fallback: 'Hot Water',
+    },
+    water: { key: 'com.labre.wardley.example.tea-shop.water', fallback: 'Water' },
+    kettle: {
+        key: 'com.labre.wardley.example.tea-shop.kettle',
+        fallback: 'Kettle',
+    },
+    electricKettle: {
+        key: 'com.labre.wardley.example.tea-shop.electric-kettle',
+        fallback: 'Electric Kettle',
+    },
+    power: { key: 'com.labre.wardley.example.tea-shop.power', fallback: 'Power' },
+    limitedBy: {
+        key: 'com.labre.wardley.example.tea-shop.limited-by',
+        fallback: 'limited by',
+    },
+};
+export const KODAK_INERTIA_SEED = {
+    title: {
+        key: 'com.labre.wardley.example.kodak-inertia.title',
+        fallback: "Wardley map of Kodak's 2005 inertia to digital",
+    },
+    user: {
+        key: 'com.labre.wardley.example.kodak-inertia.user',
+        fallback: 'User',
+    },
+    captureAMoment: {
+        key: 'com.labre.wardley.example.kodak-inertia.capture-a-moment',
+        fallback: 'Capture a moment',
+    },
+    filmCamera: {
+        key: 'com.labre.wardley.example.kodak-inertia.film-camera',
+        fallback: 'Film camera',
+    },
+    digitalCamera: {
+        key: 'com.labre.wardley.example.kodak-inertia.digital-camera',
+        fallback: 'Digital camera',
+    },
+    photographicFilm: {
+        key: 'com.labre.wardley.example.kodak-inertia.photographic-film',
+        fallback: 'Photographic film',
+    },
+    digitalStorage: {
+        key: 'com.labre.wardley.example.kodak-inertia.digital-storage',
+        fallback: 'Digital storage',
+    },
+};
+/**
+ * One seed's resolved text — the host's catalogue when `std` is a real
+ * inserting editor, the English fallback when building the module's own
+ * `content` (no editor exists yet at that point).
+ */
+function seedText(std, def) {
+    return std ? translateKey(std, def.key, def.fallback) : def.fallback;
+}
+/**
+ * A shipped map — what is left once the artefacts are derived.
+ *
+ * `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`).
+ */
+function tpl(name, preview, build, nameKey) {
     return {
         name,
         type: 'template',
         preview,
-        content: makeTemplateSnapshot(elements, name),
+        nameKey,
+        content: makeTemplateSnapshot(build(), name),
+        localize: std => makeTemplateSnapshot(build(std), name),
     };
 }
+/** The two worked maps' own tile names (`Template.nameKey`). */
+export const WARDLEY_TEMPLATE_NAME_TEA_SHOP = [
+    'com.labre.wardley.template.tea-shop',
+    'Tea Shop',
+];
+export const WARDLEY_TEMPLATE_NAME_KODAK_INERTIA = [
+    'com.labre.wardley.template.kodak-inertia',
+    'Kodak inertia',
+];
 function ann(e, v) {
     const cx = ex(e);
     const cy = vy(v);
@@ -231,7 +338,7 @@ function ann(e, v) {
         type: 'shape',
         shapeType: 'ellipse',
         filled: true,
-        fillColor: '#ffffff',
+        fillColor: NODE_FILL,
         strokeColor: NODE_STROKE,
         strokeWidth: 1.5,
         shapeStyle: ShapeStyle.General,
@@ -253,48 +360,56 @@ function annTxt(e, v, n) {
     };
 }
 // ── Tea Shop (the canonical map) ──────────────────────────────────────
-function teaShop() {
+function teaShop(std) {
+    const s = (def) => seedText(std, def);
     return {
         bg: bg(),
-        title: title('Tea Shop'),
+        title: title(s(TEA_SHOP_SEED.title)),
         annBox: panel(120, 200, 420, 64),
-        annText: freeText(132, 208, 400, 'Annotations:\n1. Standardising power lets kettles evolve faster\n2. Hot water is obvious and well known', 13),
+        annText: freeText(132, 208, 400, s(TEA_SHOP_SEED.annotations), 13),
         business: stake(0.62, 0.93),
-        businessL: lbl(0.62, 0.93, 'Business', {
+        businessL: lbl(0.62, 0.93, s(TEA_SHOP_SEED.business), {
             align: 'center',
             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 }),
+        publicL: lbl(0.78, 0.93, s(TEA_SHOP_SEED.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' }),
+        cupOfTeaL: lbl(0.62, 0.74, s(TEA_SHOP_SEED.cupOfTea), { align: 'right' }),
         cupOfTeaG: pair('cupOfTea', 'cupOfTeaL'),
         cup: comp(0.8, 0.7),
-        cupL: lbl(0.8, 0.7, 'Cup'),
+        cupL: lbl(0.8, 0.7, s(TEA_SHOP_SEED.cup)),
         cupG: pair('cup', 'cupL'),
         tea: comp(0.83, 0.6),
-        teaL: lbl(0.83, 0.6, 'Tea'),
+        teaL: lbl(0.83, 0.6, s(TEA_SHOP_SEED.tea)),
         teaG: pair('tea', 'teaL'),
         hotWater: comp(0.8, 0.47),
-        hotWaterL: lbl(0.8, 0.47, 'Hot Water'),
+        hotWaterL: lbl(0.8, 0.47, s(TEA_SHOP_SEED.hotWater)),
         hotWaterG: pair('hotWater', 'hotWaterL'),
         water: comp(0.81, 0.34),
-        waterL: lbl(0.81, 0.34, 'Water'),
+        waterL: lbl(0.81, 0.34, s(TEA_SHOP_SEED.water)),
         waterG: pair('water', 'waterL'),
         kettle: comp(0.36, 0.38),
-        kettleL: lbl(0.36, 0.38, 'Kettle', { align: 'right', dy: 6 }),
+        kettleL: lbl(0.36, 0.38, s(TEA_SHOP_SEED.kettle), {
+            align: 'right',
+            dy: 6,
+        }),
         kettleG: pair('kettle', 'kettleL'),
         electric: future(0.56, 0.38),
-        electricL: lbl(0.56, 0.38, 'Electric Kettle'),
+        electricL: lbl(0.56, 0.38, s(TEA_SHOP_SEED.electricKettle)),
         electricG: pair('electric', 'electricL'),
         power: comp(0.7, 0.1),
-        powerL: lbl(0.7, 0.1, 'Power', { align: 'right', dy: 6 }),
+        powerL: lbl(0.7, 0.1, s(TEA_SHOP_SEED.power), { align: 'right', dy: 6 }),
         powerG: pair('power', 'powerL'),
         powerFut: future(0.88, 0.1),
-        powerFutL: lbl(0.88, 0.1, 'Power'),
+        powerFutL: lbl(0.88, 0.1, s(TEA_SHOP_SEED.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
@@ -302,7 +417,7 @@ function teaShop() {
         //
         // 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', {
+        limitedBy: lbl(0.56, 0.43, s(TEA_SHOP_SEED.limitedBy), {
             align: 'center',
             w: 120,
             size: 13,
@@ -326,7 +441,8 @@ function teaShop() {
     };
 }
 // ── Kodak inertia (2005) ──────────────────────────────────────────────
-function kodak() {
+function kodak(std) {
+    const s = (def) => seedText(std, def);
     // The future dependency `capture → storage` is the movement Kodak resisted,
     // and the inertia bar belongs where that dependency crosses into commodity —
     // the boundary the capability refused to cross. It used to sit 105 units away
@@ -340,30 +456,36 @@ function kodak() {
     const [barE, barV] = crossing(CAPTURE, STORAGE, 2);
     return {
         bg: bg(),
-        title: title("Wardley map of Kodak's 2005 inertia to digital"),
+        title: title(s(KODAK_INERTIA_SEED.title)),
         user: stake(0.54, 0.92),
-        userL: lbl(0.54, 0.92, 'User'),
+        userL: lbl(0.54, 0.92, s(KODAK_INERTIA_SEED.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
         // written across the line that carries the whole argument is exactly the
         // case W3 exists for.
-        captureL: lbl(CAPTURE[0], CAPTURE[1], 'Capture a moment', {
+        captureL: lbl(CAPTURE[0], CAPTURE[1], s(KODAK_INERTIA_SEED.captureAMoment), {
             align: 'right',
         }),
         captureG: pair('capture', 'captureL'),
         film: comp(0.52, 0.62),
-        filmL: lbl(0.52, 0.62, 'Film camera', { align: 'right' }),
+        filmL: lbl(0.52, 0.62, s(KODAK_INERTIA_SEED.filmCamera), {
+            align: 'right',
+        }),
         filmG: pair('film', 'filmL'),
         digital: future(0.74, 0.62),
-        digitalL: lbl(0.74, 0.62, 'Digital camera', { color: WARDLEY_RED }),
+        digitalL: lbl(0.74, 0.62, s(KODAK_INERTIA_SEED.digitalCamera), {
+            color: WARDLEY_RED,
+        }),
         digitalG: pair('digital', 'digitalL'),
         roll: comp(0.52, 0.4),
-        rollL: lbl(0.52, 0.4, 'Photographic film', { align: 'right' }),
+        rollL: lbl(0.52, 0.4, s(KODAK_INERTIA_SEED.photographicFilm), {
+            align: 'right',
+        }),
         rollG: pair('roll', 'rollL'),
         storage: future(STORAGE[0], STORAGE[1]),
-        storageL: lbl(STORAGE[0], STORAGE[1], 'Digital storage', {
+        storageL: lbl(STORAGE[0], STORAGE[1], s(KODAK_INERTIA_SEED.digitalStorage), {
             color: WARDLEY_RED,
         }),
         storageG: pair('storage', 'storageL'),
@@ -377,6 +499,6 @@ function kodak() {
     };
 }
 export const wardleyMaps = [
-    tpl('Tea Shop', mapPreview('<circle cx="78" cy="24" r="3" fill="#fff" stroke="#1f2328"/><circle cx="50" cy="44" r="3" fill="#fff" stroke="#1f2328"/><circle cx="86" cy="40" r="3" fill="#fff" stroke="#1f2328"/><circle cx="92" cy="58" r="3" fill="#fff" stroke="#1f2328"/><path d="M78 24 L50 44 M78 24 L86 40 L92 58" stroke="#666"/><path d="M50 44 h22" stroke="#d6455d" stroke-dasharray="3 2"/>'), teaShop()),
-    tpl('Kodak inertia', mapPreview('<circle cx="56" cy="22" r="3" fill="#fff" stroke="#1f2328"/><circle cx="54" cy="40" r="3" fill="#fff" stroke="#1f2328"/><circle cx="86" cy="40" r="3" fill="#fff" stroke="#d6455d"/><rect x="76" y="35" width="2.5" height="11" fill="#1f2328"/><path d="M57 40 h17" stroke="#d6455d" stroke-dasharray="3 2"/>'), kodak()),
+    tpl('Tea Shop', mapPreview(`<circle cx="78" cy="24" r="3" fill="${NODE_FILL}" stroke="${NODE_STROKE}"/><circle cx="50" cy="44" r="3" fill="${NODE_FILL}" stroke="${NODE_STROKE}"/><circle cx="86" cy="40" r="3" fill="${NODE_FILL}" stroke="${NODE_STROKE}"/><circle cx="92" cy="58" r="3" fill="${NODE_FILL}" stroke="${NODE_STROKE}"/><path d="M78 24 L50 44 M78 24 L86 40 L92 58" stroke="${LINK_GREY}"/><path d="M50 44 h22" stroke="${WARDLEY_RED}" stroke-dasharray="3 2"/>`), teaShop, WARDLEY_TEMPLATE_NAME_TEA_SHOP[0]),
+    tpl('Kodak inertia', mapPreview(`<circle cx="56" cy="22" r="3" fill="${NODE_FILL}" stroke="${NODE_STROKE}"/><circle cx="54" cy="40" r="3" fill="${NODE_FILL}" stroke="${NODE_STROKE}"/><circle cx="86" cy="40" r="3" fill="${NODE_FILL}" stroke="${WARDLEY_RED}"/><rect x="76" y="35" width="2.5" height="11" fill="${INERTIA_COLOR}"/><path d="M57 40 h17" stroke="${WARDLEY_RED}" stroke-dasharray="3 2"/>`), kodak, WARDLEY_TEMPLATE_NAME_KODAK_INERTIA[0]),
 ];

package/dist/toolbar/config.d.ts

@@ -1,5 +1,7 @@
 import { type ChromeWording, type ToolbarContext } 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[];
 export declare const wardleyToolbarConfig: {
     readonly actions: [{
         id: string;

package/dist/toolbar/config.js

@@ -5,6 +5,45 @@ import { BlockFlavourIdentifier } from '@formicoidea/labre-core/std';
 import { html } from 'lit';
 import { createWardleyLegend } from '../legend.js';
 import { wardleyLegendIcon } from './icons.js';
+/** The seven toolbar tooltips this file used to hard-code as English literals. */
+const EVOLUTION_AXIS_TOGGLE = [
+    'com.labre.wardley.toolbar.evolution-axis',
+    'Evolution axis (X)',
+];
+const EVOLUTION_PHASE_LABELS_TOGGLE = [
+    'com.labre.wardley.toolbar.evolution-phase-labels',
+    'Evolution phase labels',
+];
+const COLUMNS_TOGGLE = [
+    'com.labre.wardley.toolbar.columns',
+    'Columns (dividers)',
+];
+const CORNER_LABELS_TOGGLE = [
+    'com.labre.wardley.toolbar.corner-labels',
+    'Labels Uncharted / Industrialized',
+];
+const GRADIENT_TOGGLE = [
+    'com.labre.wardley.toolbar.gradient',
+    'Show / hide the gradient',
+];
+const VALUE_CHAIN_AXIS_TOGGLE = [
+    'com.labre.wardley.toolbar.value-chain-axis',
+    'Value Chain axis (Y)',
+];
+const VISIBILITY_LABELS_TOGGLE = [
+    'com.labre.wardley.toolbar.visibility-labels',
+    'Labels Visible / Invisible',
+];
+/** Every wording above, for `translations.ts`'s manifest contribution. */
+export const WARDLEY_TOOLBAR_WORDINGS = [
+    EVOLUTION_AXIS_TOGGLE,
+    EVOLUTION_PHASE_LABELS_TOGGLE,
+    COLUMNS_TOGGLE,
+    CORNER_LABELS_TOGGLE,
+    GRADIENT_TOGGLE,
+    VALUE_CHAIN_AXIS_TOGGLE,
+    VISIBILITY_LABELS_TOGGLE,
+];
 const ResizeIcon = html `<svg
   width="24"
   height="24"
@@ -162,12 +201,12 @@ export const wardleyToolbarConfig = {
         {
             id: 'b.evolution',
             actions: [
-                booleanToggle('b.1-axis-x', 'Evolution axis (X)', XAxisIcon, 'showXAxis'),
-                booleanToggle('b.2-column-labels', 'Evolution phase labels', ColumnLabelsIcon, 'showColumnLabels'),
-                booleanToggle('b.3-columns', 'Columns (dividers)', ColumnsIcon, 'showColumnDividers'),
-                booleanToggle('b.4-corner-labels', 'Labels Uncharted / Industrialized', CornerLabelsIcon, 'showCornerLabels'),
+                booleanToggle('b.1-axis-x', EVOLUTION_AXIS_TOGGLE, XAxisIcon, 'showXAxis'),
+                booleanToggle('b.2-column-labels', EVOLUTION_PHASE_LABELS_TOGGLE, ColumnLabelsIcon, 'showColumnLabels'),
+                booleanToggle('b.3-columns', COLUMNS_TOGGLE, ColumnsIcon, 'showColumnDividers'),
+                booleanToggle('b.4-corner-labels', CORNER_LABELS_TOGGLE, CornerLabelsIcon, 'showCornerLabels'),
                 // Only relevant when the selection has a gradient variant.
-                booleanToggle('b.5-gradient', 'Show / hide the gradient', GradientIcon, 'showGradient', ctx => ctx
+                booleanToggle('b.5-gradient', GRADIENT_TOGGLE, GradientIcon, 'showGradient', ctx => ctx
                     .getSurfaceModelsByType(WardleyBackgroundElementModel)
                     .some(model => model.variant !== 'classic')),
             ],
@@ -176,8 +215,8 @@ export const wardleyToolbarConfig = {
         {
             id: 'c.value-chain',
             actions: [
-                booleanToggle('c.1-axis-y', 'Value Chain axis (Y)', YAxisIcon, 'showYAxis'),
-                booleanToggle('c.2-visibility-labels', 'Labels Visible / Invisible', VisibilityIcon, 'showVisibilityLabels'),
+                booleanToggle('c.1-axis-y', VALUE_CHAIN_AXIS_TOGGLE, YAxisIcon, 'showYAxis'),
+                booleanToggle('c.2-visibility-labels', VISIBILITY_LABELS_TOGGLE, VisibilityIcon, 'showVisibilityLabels'),
             ],
         },
         // Generate the auto-legend from the components present inside this