@formicoidea/labre-framework-wardley 0.35.0 → 0.37.0

package/dist/legend.js

@@ -3,7 +3,8 @@ import { ConnectorElementModel, ConnectorMode, FontFamily, PointStyle, ShapeElem
 import { Bound } from '@formicoidea/labre-core/global/gfx';
 import { GfxControllerIdentifier } from '@formicoidea/labre-core/std/gfx';
 import { GRADIENT_GREEN, GRADIENT_RED } from './gradient.js';
-import { INERTIA_COLOR, LINK_GREY, LINK_STROKE_WIDTH, MARKET_DOT_STROKE_WIDTH, MARKET_LINK_COLOR, MARKET_LINK_WIDTH, METHOD_FILL, NODE_FILL, NODE_STROKE, NODE_STROKE_WIDTH, PIPELINE_FILL, WARDLEY_RED, } from './node/consts.js';
+import { ACCELERATOR_FILL, ACCELERATOR_STROKE_WIDTH, ACCELERATOR_VERTICES, AREA_FILL, AREA_STROKE, AREA_STROKE_WIDTH, DECELERATOR_VERTICES, INERTIA_COLOR, LINK_GREY, LINK_STROKE_WIDTH, MARKET_DOT_STROKE_WIDTH, MARKET_LINK_COLOR, MARKET_LINK_WIDTH, METHOD_FILL, NODE_FILL, NODE_STROKE, NODE_STROKE_WIDTH, PIPELINE_FILL, PORTER_DEFAULT_LETTER, WARDLEY_RED, } from './node/consts.js';
+import { wardleyPorterArrowProps, wardleyPorterArrows } from './presets.js';
 const LEGEND_ORDER = [
     'component',
     'anchor',
@@ -14,6 +15,10 @@ const LEGEND_ORDER = [
     'link',
     'arrow',
     'inertia',
+    'porter',
+    'accelerator',
+    'decelerator',
+    'area',
 ];
 /** Default (editable) descriptions for each legend row. */
 const LEGEND_DESC = {
@@ -26,6 +31,10 @@ const LEGEND_DESC = {
     link: 'Need relation (parent → child)',
     arrow: 'Evolution / movement (red = future)',
     inertia: 'Inertia to change',
+    porter: "Porter's forces (external competition: R relative, L survival, E establish)",
+    accelerator: 'Accelerator (speeds evolution up)',
+    decelerator: 'Decelerator (slows evolution down)',
+    area: 'Area (zone of the map)',
 };
 /** Gradient-meaning block, keyed by variant (caption + 2-colour swatch). */
 const LEGEND_GRADIENT = {
@@ -42,11 +51,105 @@ const LEGEND_GRADIENT = {
         swatch: ['#9aa0a6', '#cfd2d6'],
     },
 };
+/* ── Porter's five forces: the panel under the rows ───────────────────── */
+/** The panel's own numbers. Model units, like every other measure here. */
+const PORTER_PANEL = {
+    pad: 12,
+    titleFs: 16,
+    titleH: 22,
+    /** Between the title and the diagram, and between the diagram and caption. */
+    gapAfterTitle: 8,
+    gapBeforeCaption: 10,
+    /** The glyph's radius — half the map's, so the panel reads as a diagram. */
+    radius: 15,
+    /** Clearance between the arrow tips and the boxes they point at. */
+    clearance: 4,
+    /** The three letters, drawn on the glyph's centre as a free text. */
+    letterFs: 9,
+    boxFs: 12,
+    sideW: 150,
+    sideH: 34,
+    endW: 170,
+    endH: 24,
+    captionFs: 13,
+    captionH: 21,
+    backing: '#e5e7eb',
+    backingStroke: '#9aa0a6',
+};
+/** The four forces the boxes name, north first and then clockwise. */
+const PORTER_FORCES = [
+    'Threat of new entrants',
+    'Bargaining power of customers',
+    'Threat of substitutes',
+    'Bargaining power of suppliers',
+];
+/** What the panel's own glyph reads: the notation, not one force. */
+const PORTER_PANEL_LETTERS = 'R/L/E';
+/** What the letters mean, spelled out under the diagram. */
+const PORTER_CAPTION = 'R/L/E = Relative competition, or struggLe for survival, or struggle to Establish';
+/**
+ * How far a porter glyph of the given radius reaches, arrow tips included.
+ *
+ * DERIVED from the shared geometry rather than written down: the boxes must
+ * stand clear of the arrows, and the day somebody lengthens `PORTER_ARROW` a
+ * hard-coded 38 here would silently let a tip enter a box.
+ */
+function porterReach(radius) {
+    return Math.max(...wardleyPorterArrows(0, 0, radius).flatMap(arrow => {
+        const [x, y, w, h] = Bound.deserialize(arrow.xywh).toXYWH();
+        return [Math.abs(x), Math.abs(y), Math.abs(x + w), Math.abs(y + h)];
+    }));
+}
+/**
+ * The panel's geometry for a given width — the PO's reference drawing, as
+ * numbers.
+ *
+ * A pure function so the layout can be asserted without a surface, and so the
+ * one thing that must hold — that none of the four boxes overlaps the glyph
+ * they surround — is checkable rather than eyeballed.
+ */
+export function porterPanelLayout(w) {
+    const p = PORTER_PANEL;
+    const inner = w - p.pad * 2;
+    // Where a box's near edge sits: past the arrow tips, never on them.
+    const clear = porterReach(p.radius) + p.clearance;
+    const diagramH = (clear + p.endH) * 2;
+    const cx = w / 2;
+    const cy = p.pad + p.titleH + p.gapAfterTitle + diagramH / 2;
+    const captionY = cy + diagramH / 2 + p.gapBeforeCaption;
+    return {
+        w,
+        h: captionY + p.captionH + p.pad,
+        title: [p.pad, p.pad, inner, p.titleH],
+        center: [cx, cy],
+        radius: p.radius,
+        boxes: [
+            {
+                xywh: [cx - p.endW / 2, cy - clear - p.endH, p.endW, p.endH],
+                label: PORTER_FORCES[0],
+            },
+            {
+                xywh: [cx + clear, cy - p.sideH / 2, p.sideW, p.sideH],
+                label: PORTER_FORCES[1],
+            },
+            {
+                xywh: [cx - p.endW / 2, cy + clear, p.endW, p.endH],
+                label: PORTER_FORCES[2],
+            },
+            {
+                xywh: [cx - clear - p.sideW, cy - p.sideH / 2, p.sideW, p.sideH],
+                label: PORTER_FORCES[3],
+            },
+        ],
+        caption: [p.pad, captionY, inner, p.captionH],
+    };
+}
 /**
  * Build a "Legend" group from real, editable elements (white rect frame +
  * "Legend" text + one row of [real component glyph + description text] per
  * Wardley component TYPE present inside the background's perimeter + a
- * gradient-meaning block when the background is a gradient variant). A snapshot
+ * gradient-meaning block when the background is a gradient variant + the
+ * five-forces panel when a Porter's-forces glyph is on the map). A snapshot
  * is created on each call; everything is grouped so it can be moved / resized /
  * edited and is dropped bottom-left of the background.
  */
@@ -77,6 +180,13 @@ export function createWardleyLegend(std, bg) {
             // market triangle connectors (NODE_STROKE) are ignored.
         }
         else if (el instanceof ShapeElementModel) {
+            // The inertia bar is the only plain shape this legend describes, and it
+            // is recognised by its FILL. A Porter's-forces arrow is a plain shape too
+            // — a filled red polygon, the glyph's own wiring — and it is `WARDLEY_RED`
+            // rather than `INERTIA_COLOR`, so it falls through here and is described
+            // by the porter circle it belongs to. Asserted in `porter.unit.spec.ts`:
+            // an arrow that started answering this test would put an "Inertia to
+            // change" row in the legend of a map with no inertia bar on it.
             if (el.fillColor === INERTIA_COLOR)
                 present.add('inertia');
         }
@@ -97,7 +207,13 @@ export function createWardleyLegend(std, bg) {
     const variant = bg.variant;
     const grad = variant !== 'classic' ? LEGEND_GRADIENT[variant] : null;
     const gradH = grad ? 12 + GRAD_ROW_H : 0;
-    const H = PAD * 2 + TITLE_H + rows.length * ROW_H + gradH;
+    // The five-forces panel, and ONLY when a force is actually on the map: a
+    // legend of a map with no porter on it has to come out byte-identical to the
+    // one it came out as before this panel existed. Pinned in
+    // `porter.unit.spec.ts`.
+    const panel = present.has('porter') ? porterPanelLayout(W - PAD * 2) : null;
+    const panelH = panel ? 12 + panel.h : 0;
+    const H = PAD * 2 + TITLE_H + rows.length * ROW_H + gradH + panelH;
     const x0 = bx + 50;
     const y0 = by + bh - 56 - H;
     const text = (t, x, y, w, h, fontSize, align = 'left') => surface.addElement({
@@ -240,6 +356,94 @@ export function createWardleyLegend(std, bg) {
                 }));
                 return [circle, ...dots, ...conns];
             }
+            case 'porter': {
+                // The same drawing as the map's, at the row's scale: the helper scales
+                // the gap, the shaft and the head with the radius, so what a reader
+                // sees here is a small Porter and not a circle with four map-sized
+                // spikes through it.
+                //
+                // 6 and not the 8 the other circles get, because this glyph is the only
+                // one wider than its own circle: arrows included it spans
+                // `2 * (R + (gap + length) * R / 30)`, which at 8 would overrun a row
+                // 30 units tall. At 6 it comes to just over `ROW_H` and sits inside its
+                // line — and it is a RATIO, so the PO's doubling of the map glyph left
+                // this row exactly where it was.
+                const R = 6;
+                const FS = 8;
+                const circle = surface.addElement({
+                    type: 'wardleyNode',
+                    kind: 'porter',
+                    shapeType: 'ellipse',
+                    filled: true,
+                    fillColor: NODE_FILL,
+                    strokeColor: NODE_STROKE,
+                    strokeWidth: NODE_STROKE_WIDTH,
+                    shapeStyle: ShapeStyle.General,
+                    roughness: 0,
+                    xywh: new Bound(cx - R, cy - R, R * 2, R * 2).serialize(),
+                });
+                const arrows = wardleyPorterArrows(cx, cy, R).map(arrow => surface.addElement(wardleyPorterArrowProps(arrow)));
+                // The letter is the notation, so a legend that dropped it would be
+                // describing a circle rather than the glyph it stands for — but here it
+                // is a SEPARATE text element rather than the circle's inner text, which
+                // is what the map glyph uses. A shape lays its text out inside padding
+                // (`SHAPE_TEXT_VERTICAL_PADDING`) larger than this 12-unit box, so at
+                // font size 8 the character was pushed out under the circle (recette
+                // v2). A free text has no padding to overflow, and its box is placed on
+                // the circle's own centre. Role-less like every other legend glyph.
+                const letter = text(PORTER_DEFAULT_LETTER, cx - R, cy - FS / 2 - 1, R * 2, FS + 2, FS, 'center');
+                return [circle, ...arrows, letter];
+            }
+            case 'accelerator':
+            case 'decelerator': {
+                // The map's own outline, at the row's scale: `vertices` are normalized
+                // to the box, so the SAME seven points draw a 30 × 18 legend arrow and
+                // a 48 × 40 canvas one. Role-less like every glyph in this box — a
+                // legend documents the map, it is not part of it.
+                const gw = 30;
+                const gh = 18;
+                return [
+                    surface.addElement({
+                        type: 'wardleyNode',
+                        kind: type,
+                        shapeType: 'polygon',
+                        vertices: (type === 'accelerator'
+                            ? ACCELERATOR_VERTICES
+                            : DECELERATOR_VERTICES).map(([vx, vy]) => [vx, vy]),
+                        isClosed: true,
+                        filled: true,
+                        fillColor: ACCELERATOR_FILL,
+                        strokeColor: NODE_STROKE,
+                        strokeWidth: ACCELERATOR_STROKE_WIDTH,
+                        shapeStyle: ShapeStyle.General,
+                        roughness: 0,
+                        xywh: new Bound(cx - gw / 2, cy - gh / 2, gw, gh).serialize(),
+                    }),
+                ];
+            }
+            case 'area': {
+                // A small translucent rect, and the rect even when the map's zones are
+                // polygons: the row says what a ZONE is, and the number of corners is
+                // the author's choice rather than part of the notation. Same wash and
+                // same rim as the canvas draws, so the swatch is recognisable.
+                const gw = 34;
+                const gh = 20;
+                return [
+                    surface.addElement({
+                        type: 'wardleyNode',
+                        kind: 'area',
+                        shapeType: 'rect',
+                        filled: true,
+                        fillColor: AREA_FILL,
+                        strokeColor: AREA_STROKE,
+                        strokeWidth: AREA_STROKE_WIDTH,
+                        shapeStyle: ShapeStyle.General,
+                        roughness: 0,
+                        radius: 0,
+                        xywh: new Bound(cx - gw / 2, cy - gh / 2, gw, gh).serialize(),
+                    }),
+                ];
+            }
             case 'link':
                 return [
                     surface.addElement({
@@ -331,6 +535,76 @@ export function createWardleyLegend(std, bg) {
         });
         ids.push(text(grad.caption, x0 + PAD + GLYPH_W + GAP, cyRow - GRAD_ROW_H / 2, TEXT_W, GRAD_ROW_H, TEXT_FS));
     }
+    // Porter's five forces: the panel the PO's reference draws, under everything
+    // else. It is not a row — a row says what a glyph IS, and this says what the
+    // notation MEANS: four named pressures around one circle, and the three
+    // letters spelled out. Only drawn when a force is on the map, so a legend
+    // without one is the legend it always was.
+    if (panel) {
+        const px = x0 + PAD;
+        const py = ry + gradH + 12;
+        const p = PORTER_PANEL;
+        // The backing: square-cornered and grey, so the panel reads as a figure
+        // set into the legend rather than as one more entry in it.
+        ids.push(surface.addElement({
+            type: 'shape',
+            shapeType: 'rect',
+            filled: true,
+            fillColor: p.backing,
+            strokeColor: p.backingStroke,
+            strokeWidth: 1,
+            shapeStyle: ShapeStyle.General,
+            roughness: 0,
+            radius: 0,
+            xywh: new Bound(px, py, panel.w, panel.h).serialize(),
+        }));
+        const [tx, ty, tw, th] = panel.title;
+        ids.push(text("Porter's five forces", px + tx, py + ty, tw, th, p.titleFs));
+        const [cx, cy] = panel.center;
+        ids.push(surface.addElement({
+            type: 'wardleyNode',
+            kind: 'porter',
+            shapeType: 'ellipse',
+            filled: true,
+            fillColor: NODE_FILL,
+            strokeColor: NODE_STROKE,
+            strokeWidth: NODE_STROKE_WIDTH,
+            shapeStyle: ShapeStyle.General,
+            roughness: 0,
+            xywh: new Bound(px + cx - panel.radius, py + cy - panel.radius, panel.radius * 2, panel.radius * 2).serialize(),
+        }));
+        for (const arrow of wardleyPorterArrows(px + cx, py + cy, panel.radius)) {
+            ids.push(surface.addElement(wardleyPorterArrowProps(arrow)));
+        }
+        // All three letters at once: this circle stands for the NOTATION rather
+        // than for one force, so picking one of them would make the panel say that
+        // a Porter is an R.
+        //
+        // A SEPARATE text element, like the porter row above and for the same
+        // reason (recette v2): a shape lays its text out inside a padding
+        // (`SHAPE_TEXT_PADDING`) wider than this 30-unit circle, so the characters
+        // would be pushed outside it. A free text has no padding to overflow, and
+        // its box is placed on the circle's own centre.
+        ids.push(text(PORTER_PANEL_LETTERS, px + cx - panel.radius, py + cy - p.letterFs / 2 - 1, panel.radius * 2, p.letterFs + 2, p.letterFs, 'center'));
+        for (const box of panel.boxes) {
+            const [bx, by, bw, bh] = box.xywh;
+            ids.push(surface.addElement({
+                type: 'shape',
+                shapeType: 'rect',
+                filled: true,
+                fillColor: '#ffffff',
+                strokeColor: NODE_STROKE,
+                strokeWidth: 1,
+                shapeStyle: ShapeStyle.General,
+                roughness: 0,
+                radius: 0,
+                xywh: new Bound(px + bx, py + by, bw, bh).serialize(),
+            }));
+            ids.push(text(box.label, px + bx + 4, py + by + 3, bw - 8, bh - 6, p.boxFs, 'center'));
+        }
+        const [capX, capY, capW, capH] = panel.caption;
+        ids.push(text(PORTER_CAPTION, px + capX, py + capY, capW, capH, p.captionFs, 'center'));
+    }
     // 4. Group everything and select it.
     const [, result] = std.command.exec(createGroupCommand, { elements: ids });
     gfx.selection.set({

package/dist/natures.d.ts

@@ -47,4 +47,35 @@ export declare const WARDLEY_NATURE: {
     readonly practice: "wardley:nature/practice";
     readonly knowledge: "wardley:nature/knowledge";
 };
+/**
+ * The Porter's-forces **competition** tag — which of the forces a glyph marks.
+ *
+ * The second tag of this pack, and the one that shows the mechanism was worth
+ * building: it is declared beside the nature, on the SAME pack, and it applies
+ * to a role the nature deliberately never reaches. A force is not a link in the
+ * value chain (`roles.ts` says why `wardley:porter` has no parent), so nothing
+ * written on `wardley:component` touches it — and this tag, written on
+ * `wardley:porter` alone, touches nothing else.
+ *
+ * ## Why it duplicates the letter, and why that is not a duplication
+ *
+ * The letter in the circle IS the notation: an architect reads `L` off the map
+ * and knows what it says. But a letter is not a FACT anything can query — no
+ * rule, no reading, no host report can ask "which forces does this map name?"
+ * of a `Y.Text` holding one character. The tag is the queryable half, and
+ * `WardleyPorterWatcher` keeps the two saying the same thing in both
+ * directions, so neither is the master and the author can work in whichever
+ * one is in front of them.
+ *
+ * `cardinality: 'single'` for the reason the nature gives, and one the drawing
+ * gives too: there is exactly one letter in the circle, so a second value would
+ * be a qualification the map could not show.
+ */
+export declare const WARDLEY_COMPETITION_TAG_ID = "wardley:competition";
+/** The three forces, as value ids. Ids are forever; a def is only deprecated. */
+export declare const WARDLEY_COMPETITION: {
+    readonly relative: "wardley:competition/relative";
+    readonly struggle: "wardley:competition/struggle";
+    readonly establish: "wardley:competition/establish";
+};
 export declare const WARDLEY_TAG_DEFS: UniverseTagDefs;

package/dist/natures.js

@@ -47,6 +47,37 @@ export const WARDLEY_NATURE = {
     practice: `${WARDLEY_NATURE_TAG_ID}/practice`,
     knowledge: `${WARDLEY_NATURE_TAG_ID}/knowledge`,
 };
+/**
+ * The Porter's-forces **competition** tag — which of the forces a glyph marks.
+ *
+ * The second tag of this pack, and the one that shows the mechanism was worth
+ * building: it is declared beside the nature, on the SAME pack, and it applies
+ * to a role the nature deliberately never reaches. A force is not a link in the
+ * value chain (`roles.ts` says why `wardley:porter` has no parent), so nothing
+ * written on `wardley:component` touches it — and this tag, written on
+ * `wardley:porter` alone, touches nothing else.
+ *
+ * ## Why it duplicates the letter, and why that is not a duplication
+ *
+ * The letter in the circle IS the notation: an architect reads `L` off the map
+ * and knows what it says. But a letter is not a FACT anything can query — no
+ * rule, no reading, no host report can ask "which forces does this map name?"
+ * of a `Y.Text` holding one character. The tag is the queryable half, and
+ * `WardleyPorterWatcher` keeps the two saying the same thing in both
+ * directions, so neither is the master and the author can work in whichever
+ * one is in front of them.
+ *
+ * `cardinality: 'single'` for the reason the nature gives, and one the drawing
+ * gives too: there is exactly one letter in the circle, so a second value would
+ * be a qualification the map could not show.
+ */
+export const WARDLEY_COMPETITION_TAG_ID = 'wardley:competition';
+/** The three forces, as value ids. Ids are forever; a def is only deprecated. */
+export const WARDLEY_COMPETITION = {
+    relative: `${WARDLEY_COMPETITION_TAG_ID}/relative`,
+    struggle: `${WARDLEY_COMPETITION_TAG_ID}/struggle`,
+    establish: `${WARDLEY_COMPETITION_TAG_ID}/establish`,
+};
 export const WARDLEY_TAG_DEFS = {
     formatVersion: 1,
     // The id of this PACK, not of the framework: several packs may extend
@@ -62,10 +93,12 @@ export const WARDLEY_TAG_DEFS = {
             description: 'What kind of thing this component is: an activity, data, a practice or knowledge.',
             cardinality: 'single',
             appliesTo: [WARDLEY_ROLE.component],
-            // No `order`: it is the only tag this pack declares, and an absent order
-            // sorts by SEED order, which is what puts the library's pack ahead of a
-            // client's extension without either having to know about the other. A
-            // number here would be a claim about packs that do not exist yet.
+            // No `order`, on either tag of this pack: an absent order sorts by SEED
+            // order, which is what puts the library's pack ahead of a client's
+            // extension without either having to know about the other. A number here
+            // would be a claim about packs that do not exist yet — and it would say
+            // nothing anyway, since the two tags below apply to disjoint roles and
+            // are therefore never offered in the same dropdown.
             values: [
                 {
                     id: WARDLEY_NATURE.activity,
@@ -89,5 +122,32 @@ export const WARDLEY_TAG_DEFS = {
                 },
             ],
         },
+        {
+            id: WARDLEY_COMPETITION_TAG_ID,
+            label: 'Competition',
+            description: "Which of Porter's forces this glyph marks: relative competition, a struggle for survival, or a struggle to establish.",
+            cardinality: 'single',
+            appliesTo: [WARDLEY_ROLE.porter],
+            values: [
+                {
+                    id: WARDLEY_COMPETITION.relative,
+                    // The label carries the letter, because the letter is what the map
+                    // shows: a reader picking a value here is choosing what the circle
+                    // will say, not filling in a form about it.
+                    label: 'Relative competition (R)',
+                    description: 'Established players competing against one another on a market that exists.',
+                },
+                {
+                    id: WARDLEY_COMPETITION.struggle,
+                    label: 'Struggle for survival (L)',
+                    description: 'Pressure on a player to stay in a market it is already in.',
+                },
+                {
+                    id: WARDLEY_COMPETITION.establish,
+                    label: 'Struggle to establish (E)',
+                    description: 'Pressure on a newcomer trying to get into a market.',
+                },
+            ],
+        },
     ],
 };

package/dist/node/consts.d.ts

@@ -104,3 +104,126 @@ export declare const METHOD: {
     centerRatio: number;
 };
 export declare const METHOD_LABEL = "Component";
+/**
+ * Porter's forces (composite): a large white circle carrying ONE letter, pushed
+ * on from the four cardinal directions by solid red arrows.
+ *
+ * Twice the market's diameter, at the PO's recette of #210: this is not a link
+ * in the value chain drawn a little differently, it is a pressure bearing on the
+ * whole map, and it has to read as one at the zoom an architect actually works
+ * at. Every other number here is proportional to it.
+ *
+ * The letter IS the notation — **R** relative competition, **L** struggle for
+ * survival, **E** struggle to establish — which is why it is written as the
+ * shape's own inner text rather than as a label beside it: a double-click opens
+ * the native shape editor on the circle, and typing another letter is the whole
+ * of the edit. It is also why this glyph carries no label at all: the three
+ * words behind the three letters are the map's vocabulary, not a name the
+ * author gives one force.
+ */
+export declare const PORTER_SIZE = 60;
+/**
+ * The four arrows, read by `wardleyPorterArrows`: each starts `gap` outside the
+ * circle's rim and runs `length` further out, a `width`-wide shaft carrying a
+ * head `headLength` long and `headWidth` across.
+ *
+ * They are drawn as filled POLYGONS rather than as connectors with a triangle
+ * endpoint, and the recette of #210 is why: a connector sizes its head off its
+ * STROKE WIDTH (`DEFAULT_ARROW_SIZE` × strokeWidth / 2), which is a number about
+ * a line rather than about this notation — the head came out longer than the
+ * arrow, swallowed the circle, the letter and the double-click, and the glyph
+ * rendered as a solid red star. A polygon's head is the number written here and
+ * nothing else, at any size.
+ */
+export declare const PORTER_ARROW: {
+    gap: number;
+    length: number;
+    /** Shaft width. */
+    width: number;
+    headLength: number;
+    headWidth: number;
+};
+/** The letter, sized to sit inside the circle without touching the rim. */
+export declare const PORTER_LETTER_FONT_SIZE = 28;
+/** The letter a fresh glyph opens on: relative competition, the commonest read. */
+export declare const PORTER_DEFAULT_LETTER = "R";
+/**
+ * Accelerators and decelerators — the climate annotations.
+ *
+ * A fat solid arrow with a flat grey fill and a thick dark border: as close as
+ * a native polygon gets to the reference's solid arrow, because this canvas has
+ * no gradient fill. The two are the same drawing mirrored — an accelerator
+ * points RIGHT, towards the commodity end of the evolution axis, a decelerator
+ * points LEFT, back towards genesis — and that direction IS the notation, which
+ * is why the outlines are written out below rather than expressed as one shape
+ * plus a `rotate`: a rotated element is one the selection, the resize handles
+ * and every bounding-box reader then have to de-rotate.
+ *
+ * Neither is a link in the value chain, so neither carries a component role
+ * (see `roles.ts`): they say something about the CLIMATE the map is drawn in.
+ */
+export declare const ACCELERATOR_SIZE: {
+    w: number;
+    h: number;
+};
+/** Flat grey: the arrow is a annotation, and must not out-shout the chain. */
+export declare const ACCELERATOR_FILL = "#bfbfbf";
+/** A thick dark border — `NODE_STROKE`, like every other artefact's rim. */
+export declare const ACCELERATOR_STROKE_WIDTH = 2;
+/**
+ * The accelerator's outline, normalized to its box, pointing RIGHT.
+ *
+ * Seven points: the shaft's two left corners, the head's upper barb, the tip,
+ * the head's lower barb, and back along the shaft. `0.55` is where the head
+ * starts, `0.28 / 0.72` the shaft's own edges.
+ */
+export declare const ACCELERATOR_VERTICES: readonly (readonly [number, number])[];
+/** The decelerator: the same outline mirrored `x → 1 − x`, pointing LEFT. */
+export declare const DECELERATOR_VERTICES: readonly (readonly [number, number])[];
+export declare const ACCELERATOR_LABEL = "Accelerator";
+export declare const DECELERATOR_LABEL = "Decelerator";
+/**
+ * Areas — the zones of the map.
+ *
+ * A ring you draw AROUND components to say "all of this is one thing": a
+ * business unit, a team's territory, a scope under discussion. It is not a link
+ * in the value chain and not an annotation of the climate either, which is why
+ * it carries a role with no parent and sits in a category of its own in the
+ * toolbox.
+ *
+ * Two shapes, one kind: a RECT for the common case and a POLYGON for a zone
+ * whose outline has to follow the components it groups (its corners are then
+ * moved from the shape toolbar's vertex editor). The `shapeType` is what says
+ * which, so nothing about an area is a second kind to keep in step.
+ *
+ * A zone is drawn OVER the map it groups, so the fill is the load-bearing
+ * number here: Peace light at ~25 % opacity, which is a wash the components
+ * underneath still read through. The border is the saturated Peace of the same
+ * swatch, thin like every other artefact's rim — the zone must frame the map,
+ * never compete with it.
+ */
+export declare const AREA_RECT_SIZE: {
+    w: number;
+    h: number;
+};
+/** The polygon is born square: its default outline is a regular pentagon. */
+export declare const AREA_POLYGON_SIZE: {
+    w: number;
+    h: number;
+};
+/** Peace light at ~25 % opacity — an 8-digit hex, exactly as `PIPELINE_FILL`. */
+export declare const AREA_FILL = "#c6dbfc40";
+/** Peace, the saturated shade of the same swatch. */
+export declare const AREA_STROKE = "#5b9cf6";
+export declare const AREA_STROKE_WIDTH = 1;
+/**
+ * The word the legend describes an area by.
+ *
+ * NOT written into the document: an area is created NAMELESS, so the editor
+ * that a double-click opens starts on an empty line and the first thing typed
+ * is the zone's own name. The other artefacts carry a placeholder because their
+ * name is a text element beside them and an empty one would be invisible; an
+ * area's name is its own inner text, and a placeholder there would be a word
+ * the author has to delete before writing theirs.
+ */
+export declare const AREA_LABEL = "Area";