@formicoidea/labre-framework-wardley 0.23.0 → 0.23.1

package/dist/gradient.js

@@ -0,0 +1,112 @@
+/**
+ * Curve-driven gradient backgrounds (Slice C). Each analytic background is a
+ * smooth mathematical curve (piecewise asymmetric Gaussian bells); the gradient
+ * opacity at each evolution position X follows that curve, normalised between
+ * its own min and max — i.e. the gradient is strongest where the curve peaks and
+ * fades to nothing at its minimum. Validated against the reference images at
+ * `../wardley-mockups/gradient-backgrounds.html`.
+ */
+const bell = (x, mu, s) => Math.exp(-0.5 * ((x - mu) / s) ** 2);
+const asym = (x, mu, sL, sR) => Math.exp(-0.5 * ((x - mu) / (x < mu ? sL : sR)) ** 2);
+// Opportunity — differential value (green): early peak + long decay.
+const fDiff = (x) => asym(x, 0.175, 0.24, 0.36);
+const DIFF_DOM = [0, 0.86];
+// Opportunity — operational value (red): bump centred on commodity.
+const fOper = (x) => asym(x, 0.85, 0.1, 0.075);
+const OPER_DOM = [0.62, 1];
+// Benefit / investment (signed): big positive bell − small negative bell.
+const fBen = (x) => asym(x, 0.49, 0.17, 0.24) - 0.42 * bell(x, 0.1, 0.075);
+// Evolution-gradient — Simon Wardley's classic evolution presentation: a
+// symmetric grey "U", strong at both evolution extremes (uncharted /
+// industrialised), fading to white through the build middle.
+const fGrey = (x) => {
+    const left = Math.max(0, (0.26 - x) / 0.26);
+    const right = Math.max(0, (x - 0.64) / 0.36);
+    return Math.max(left, right);
+};
+function rangeOf(fn, x0, x1) {
+    let lo = Infinity;
+    let hi = -Infinity;
+    for (let i = 0; i <= 240; i++) {
+        const v = fn(x0 + ((x1 - x0) * i) / 240);
+        if (v < lo)
+            lo = v;
+        if (v > hi)
+            hi = v;
+    }
+    return { lo, hi };
+}
+const RG = rangeOf(fDiff, DIFF_DOM[0], DIFF_DOM[1]);
+const RR = rangeOf(fOper, OPER_DOM[0], OPER_DOM[1]);
+const RB = rangeOf(fBen, 0, 1);
+const clamp01 = (v) => Math.max(0, Math.min(1, v));
+const norm = (v, lo, hi) => (hi > lo ? (v - lo) / (hi - lo) : 0);
+export const GRADIENT_GREEN = '#1f9e4d';
+export const GRADIENT_RED = '#d6455d';
+const GRADIENT_GREY = '#7c8389';
+/** Validated peak opacity for the green/red variants. */
+const GRADIENT_MAX_OPACITY = 0.45;
+/** Peak opacity for the grey evolution-gradient variant. */
+const GREY_MAX_OPACITY = 0.38;
+/** Benefit/investment zero-line height (fraction of plot height from bottom). */
+export const BENEFIT_ZERO_FRAC = 0.3;
+function rgba(hex, alpha) {
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+    return `rgba(${r},${g},${b},${alpha})`;
+}
+/**
+ * Add stops to a horizontal gradient (offset 0..1 spanning the plot width) for
+ * a function-driven opacity profile within [x0, x1] (zero outside).
+ */
+function addStops(grad, hex, opacityFn, x0, x1, maxOp = GRADIENT_MAX_OPACITY) {
+    const eps = 0.001;
+    if (x0 > eps)
+        grad.addColorStop(Math.max(0, x0 - eps), rgba(hex, 0));
+    const N = 48;
+    for (let i = 0; i <= N; i++) {
+        const x = x0 + ((x1 - x0) * i) / N;
+        grad.addColorStop(clamp01(x), rgba(hex, clamp01(opacityFn(x)) * maxOp));
+    }
+    if (x1 < 1 - eps)
+        grad.addColorStop(Math.min(1, x1 + eps), rgba(hex, 0));
+}
+/**
+ * Paint the curve-driven gradient over the plot rectangle [px0,px1]×[py0,py1]
+ * in element-local coordinates. `classic` paints nothing.
+ */
+export function paintGradientBackground(ctx, variant, px0, px1, py0, py1) {
+    const w = px1 - px0;
+    const h = py1 - py0;
+    if (variant === 'evolution-gradient') {
+        const grey = ctx.createLinearGradient(px0, 0, px1, 0);
+        addStops(grey, GRADIENT_GREY, fGrey, 0, 1, GREY_MAX_OPACITY);
+        ctx.fillStyle = grey;
+        ctx.fillRect(px0, py0, w, h);
+        return;
+    }
+    if (variant === 'opportunity') {
+        const green = ctx.createLinearGradient(px0, 0, px1, 0);
+        addStops(green, GRADIENT_GREEN, x => norm(fDiff(x), RG.lo, RG.hi), DIFF_DOM[0], DIFF_DOM[1]);
+        ctx.fillStyle = green;
+        ctx.fillRect(px0, py0, w, h);
+        const red = ctx.createLinearGradient(px0, 0, px1, 0);
+        addStops(red, GRADIENT_RED, x => norm(fOper(x), RR.lo, RR.hi), OPER_DOM[0], OPER_DOM[1]);
+        ctx.fillStyle = red;
+        ctx.fillRect(px0, py0, w, h);
+        return;
+    }
+    // benefit: green where the curve is positive, red where negative.
+    const maxPos = RB.hi;
+    const maxNeg = -RB.lo;
+    const green = ctx.createLinearGradient(px0, 0, px1, 0);
+    addStops(green, GRADIENT_GREEN, x => Math.max(0, fBen(x)) / maxPos, 0, 1);
+    ctx.fillStyle = green;
+    ctx.fillRect(px0, py0, w, h);
+    const red = ctx.createLinearGradient(px0, 0, px1, 0);
+    addStops(red, GRADIENT_RED, x => Math.max(0, -fBen(x)) / maxNeg, 0, 1);
+    ctx.fillStyle = red;
+    ctx.fillRect(px0, py0, w, h);
+}
+//# sourceMappingURL=gradient.js.map

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.js.map

package/dist/label-layout.d.ts

@@ -0,0 +1,21 @@
+import type { WardleyBackgroundElementModel } from '@formicoidea/labre-core/model';
+/** The editable label fields of a Wardley background. */
+export type WardleyLabelField = 'xAxisTitle' | 'yAxisTitle' | 'evolutionStart' | 'evolutionEnd' | 'visibilityHigh' | 'visibilityLow' | 'phase0' | 'phase1' | 'phase2' | 'phase3';
+/** A label's hit box in element-local coordinates (axis-aligned, padded). */
+export interface WardleyLabelHit {
+    field: WardleyLabelField;
+    minX: number;
+    minY: number;
+    maxX: number;
+    maxY: number;
+}
+/**
+ * Compute the clickable boxes of every *visible* Wardley label, in the
+ * element's local space. Positions are derived from the SAME constants the
+ * renderer uses (`MARGIN` / `OFFSETS` / `FONTS`), so the hit boxes track the
+ * drawn text. Boxes are padded so double-clicking is forgiving.
+ */
+export declare function getWardleyLabelHits(model: WardleyBackgroundElementModel, w: number, h: number): WardleyLabelHit[];
+/** First label whose (padded) box contains the local point, or null. */
+export declare function hitTestWardleyLabel(hits: WardleyLabelHit[], lx: number, ly: number): WardleyLabelHit | null;
+//# sourceMappingURL=label-layout.d.ts.map

package/dist/label-layout.js

@@ -0,0 +1,73 @@
+import { FONTS, MARGIN, OFFSETS } from './consts';
+/** Rough per-character advance — only used to size generous hit boxes. */
+const approxTextWidth = (text, fontSize) => Math.max(fontSize, text.length * fontSize * 0.6);
+/**
+ * Compute the clickable boxes of every *visible* Wardley label, in the
+ * element's local space. Positions are derived from the SAME constants the
+ * renderer uses (`MARGIN` / `OFFSETS` / `FONTS`), so the hit boxes track the
+ * drawn text. Boxes are padded so double-clicking is forgiving.
+ */
+export function getWardleyLabelHits(model, w, h) {
+    const px0 = MARGIN.left;
+    const px1 = w - MARGIN.right;
+    const py0 = MARGIN.top;
+    const py1 = h - MARGIN.bottom;
+    const ex = (r) => px0 + r * (px1 - px0);
+    const pad = 6;
+    const hits = [];
+    // Horizontal label anchored on its text baseline.
+    const addH = (field, text, fontSize, ax, baseline, align) => {
+        const tw = approxTextWidth(text, fontSize);
+        const minX = align === 'right' ? ax - tw : ax;
+        const maxX = align === 'right' ? ax : ax + tw;
+        hits.push({
+            field,
+            minX: minX - pad,
+            maxX: maxX + pad,
+            minY: baseline - fontSize - pad,
+            maxY: baseline + fontSize * 0.3 + pad,
+        });
+    };
+    // Vertical label (drawn rotated -90°), centered on (ax, ay).
+    const addV = (field, text, fontSize, ax, ay) => {
+        const tw = approxTextWidth(text, fontSize);
+        hits.push({
+            field,
+            minX: ax - fontSize - pad,
+            maxX: ax + fontSize * 0.4 + pad,
+            minY: ay - tw / 2 - pad,
+            maxY: ay + tw / 2 + pad,
+        });
+    };
+    if (model.showColumnLabels) {
+        addH('phase0', model.phase0, FONTS.phase, ex(0) + OFFSETS.phasePad, py1 + OFFSETS.phaseBaseline, 'left');
+        addH('phase1', model.phase1, FONTS.phase, ex(0.175) + OFFSETS.phasePad, py1 + OFFSETS.phaseBaseline, 'left');
+        addH('phase2', model.phase2, FONTS.phase, ex(0.4) + OFFSETS.phasePad, py1 + OFFSETS.phaseBaseline, 'left');
+        addH('phase3', model.phase3, FONTS.phase, ex(0.7) + OFFSETS.phasePad, py1 + OFFSETS.phaseBaseline, 'left');
+    }
+    if (model.showXAxis) {
+        addH('xAxisTitle', model.xAxisTitle, FONTS.axis, px1 - OFFSETS.evolutionPadRight, py1 + OFFSETS.phaseBaseline, 'right');
+    }
+    if (model.showCornerLabels) {
+        addH('evolutionStart', model.evolutionStart, FONTS.direction, px0 + OFFSETS.directionPadLeft, py0 + OFFSETS.directionTop, 'left');
+        addH('evolutionEnd', model.evolutionEnd, FONTS.direction, px1 - OFFSETS.directionPadRight, py0 + OFFSETS.directionTop, 'right');
+    }
+    if (model.showYAxis) {
+        addV('yAxisTitle', model.yAxisTitle, FONTS.axis, px0 - OFFSETS.yHug, (py0 + py1) / 2);
+    }
+    if (model.showVisibilityLabels) {
+        addV('visibilityHigh', model.visibilityHigh, FONTS.visibility, px0 - OFFSETS.yHug, py0 + OFFSETS.visibleTop);
+        addV('visibilityLow', model.visibilityLow, FONTS.visibility, px0 - OFFSETS.yHug, py1 - OFFSETS.invisibleBottom);
+    }
+    return hits;
+}
+/** First label whose (padded) box contains the local point, or null. */
+export function hitTestWardleyLabel(hits, lx, ly) {
+    for (const hit of hits) {
+        if (lx >= hit.minX && lx <= hit.maxX && ly >= hit.minY && ly <= hit.maxY) {
+            return hit;
+        }
+    }
+    return null;
+}
+//# sourceMappingURL=label-layout.js.map

package/dist/legend.d.ts

@@ -0,0 +1,12 @@
+import { type WardleyBackgroundElementModel } from '@formicoidea/labre-core/model';
+import type { BlockStdScope } from '@formicoidea/labre-core/std';
+/**
+ * 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
+ * is created on each call; everything is grouped so it can be moved / resized /
+ * edited and is dropped bottom-left of the background.
+ */
+export declare function createWardleyLegend(std: BlockStdScope, bg: WardleyBackgroundElementModel): void;
+//# sourceMappingURL=legend.d.ts.map

package/dist/legend.js

@@ -0,0 +1,333 @@
+import { createGroupCommand } from '@formicoidea/labre-core/gfx/group';
+import { ConnectorElementModel, ConnectorMode, FontFamily, PointStyle, ShapeElementModel, ShapeStyle, StrokeStyle, WardleyNodeElementModel, } from '@formicoidea/labre-core/model';
+import { Bound } from '@formicoidea/labre-core/global/gfx';
+import { GfxControllerIdentifier } from '@formicoidea/labre-core/std/gfx';
+import { GRADIENT_GREEN, GRADIENT_RED } from './gradient';
+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';
+const LEGEND_ORDER = [
+    'component',
+    'anchor',
+    'market',
+    'ecosystem',
+    'method',
+    'pipeline',
+    'link',
+    'arrow',
+    'inertia',
+];
+/** Default (editable) descriptions for each legend row. */
+const LEGEND_DESC = {
+    component: 'Need / capability (activity, practice, data…)',
+    anchor: 'Stakeholder (customer, user…)',
+    market: 'Market (set of actors)',
+    ecosystem: 'Ecosystem',
+    method: 'Component + method (color = phase)',
+    pipeline: 'Pipeline (possible choices for a capability)',
+    link: 'Need relation (parent → child)',
+    arrow: 'Evolution / movement (red = future)',
+    inertia: 'Inertia to change',
+};
+/** Gradient-meaning block, keyed by variant (caption + 2-colour swatch). */
+const LEGEND_GRADIENT = {
+    opportunity: {
+        caption: 'Opportunity gradient: differential value (green) vs operational value (red).',
+        swatch: [GRADIENT_GREEN, GRADIENT_RED],
+    },
+    benefit: {
+        caption: 'Gradient: investment (red) then benefit (green).',
+        swatch: [GRADIENT_RED, GRADIENT_GREEN],
+    },
+    'evolution-gradient': {
+        caption: "Gradient representing the growth of Wardley's evolution function.",
+        swatch: ['#9aa0a6', '#cfd2d6'],
+    },
+};
+/**
+ * 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
+ * is created on each call; everything is grouped so it can be moved / resized /
+ * edited and is dropped bottom-left of the background.
+ */
+export function createWardleyLegend(std, bg) {
+    const gfx = std.get(GfxControllerIdentifier);
+    const surface = gfx.surface;
+    if (!surface)
+        return;
+    const [bx, by, , bh] = bg.deserializedXYWH;
+    // 1. Detect which component types are present inside the perimeter.
+    const present = new Set();
+    for (const el of gfx.getElementsByBound(Bound.deserialize(bg.xywh), {
+        type: 'canvas',
+    })) {
+        // Note: WardleyNodeElementModel extends ShapeElementModel, so the order of
+        // these instanceof checks matters.
+        if (el instanceof WardleyNodeElementModel) {
+            if (el.kind !== 'handle')
+                present.add(el.kind);
+        }
+        else if (el instanceof ConnectorElementModel) {
+            if (el.strokeStyle === StrokeStyle.Dash || el.stroke === WARDLEY_RED) {
+                present.add('arrow');
+            }
+            else if (el.stroke === LINK_GREY) {
+                present.add('link');
+            }
+            // market triangle connectors (NODE_STROKE) are ignored.
+        }
+        else if (el instanceof ShapeElementModel) {
+            if (el.fillColor === INERTIA_COLOR)
+                present.add('inertia');
+        }
+    }
+    const rows = LEGEND_ORDER.filter(t => present.has(t));
+    // 2. Layout (model units). The text column is wide enough for one-line
+    // descriptions; the gradient row is taller as its caption may wrap.
+    const PAD = 16;
+    const TITLE_H = 28;
+    const ROW_H = 30;
+    const GLYPH_W = 46;
+    const GAP = 12;
+    const TEXT_FS = 15;
+    const TITLE_FS = 18;
+    const TEXT_W = 360;
+    const GRAD_ROW_H = 40;
+    const W = PAD * 2 + GLYPH_W + GAP + TEXT_W;
+    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;
+    const x0 = bx + 50;
+    const y0 = by + bh - 56 - H;
+    const text = (t, x, y, w, h, fontSize, align = 'left') => surface.addElement({
+        type: 'text',
+        text: t,
+        fontFamily: FontFamily.Inter,
+        fontSize,
+        color: NODE_STROKE,
+        textAlign: align,
+        xywh: new Bound(x, y, w, h).serialize(),
+    });
+    // ── glyph builders (real, editable elements), centred on (cx, cy) ─────
+    const ellipse = (kind, d, fill, sw, cx, cy) => surface.addElement({
+        type: 'wardleyNode',
+        kind,
+        shapeType: 'ellipse',
+        filled: true,
+        fillColor: fill,
+        strokeColor: NODE_STROKE,
+        strokeWidth: sw,
+        shapeStyle: ShapeStyle.General,
+        roughness: 0,
+        xywh: new Bound(cx - d / 2, cy - d / 2, d, d).serialize(),
+    });
+    const glyph = (type, cx, cy) => {
+        switch (type) {
+            case 'component':
+                return [ellipse('component', 16, NODE_FILL, NODE_STROKE_WIDTH, cx, cy)];
+            case 'anchor':
+                return [ellipse('anchor', 16, NODE_FILL, NODE_STROKE_WIDTH, cx, cy)];
+            case 'ecosystem':
+                return [ellipse('ecosystem', 20, NODE_FILL, NODE_STROKE_WIDTH, cx, cy)];
+            case 'method':
+                return [ellipse('method', 18, METHOD_FILL, NODE_STROKE_WIDTH, cx, cy)];
+            case 'inertia':
+                return [
+                    surface.addElement({
+                        type: 'shape',
+                        shapeType: 'rect',
+                        filled: true,
+                        fillColor: INERTIA_COLOR,
+                        strokeColor: INERTIA_COLOR,
+                        strokeWidth: 0,
+                        shapeStyle: ShapeStyle.General,
+                        roughness: 0,
+                        radius: 0,
+                        xywh: new Bound(cx - 2.5, cy - 11, 5, 22).serialize(),
+                    }),
+                ];
+            case 'pipeline': {
+                const bw2 = 34;
+                const bh2 = 12;
+                const hd = 10;
+                const top = cy - bh2 / 2;
+                return [
+                    surface.addElement({
+                        type: 'wardleyNode',
+                        kind: 'pipeline',
+                        shapeType: 'rect',
+                        filled: true,
+                        fillColor: PIPELINE_FILL,
+                        strokeColor: NODE_STROKE,
+                        strokeWidth: NODE_STROKE_WIDTH,
+                        shapeStyle: ShapeStyle.General,
+                        roughness: 0,
+                        radius: 0,
+                        xywh: new Bound(cx - bw2 / 2, top, bw2, bh2).serialize(),
+                    }),
+                    surface.addElement({
+                        type: 'wardleyNode',
+                        kind: 'handle',
+                        shapeType: 'rect',
+                        filled: true,
+                        fillColor: NODE_FILL,
+                        strokeColor: NODE_STROKE,
+                        strokeWidth: NODE_STROKE_WIDTH,
+                        shapeStyle: ShapeStyle.General,
+                        roughness: 0,
+                        radius: 0,
+                        xywh: new Bound(cx - hd / 2, top - hd / 2, hd, hd).serialize(),
+                    }),
+                ];
+            }
+            case 'market': {
+                const R = 11;
+                const dr = 3;
+                const rho = 6;
+                const sin60 = Math.sqrt(3) / 2;
+                const circle = surface.addElement({
+                    type: 'wardleyNode',
+                    kind: 'market',
+                    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 verts = [
+                    [0, -rho],
+                    [rho * sin60, rho / 2],
+                    [-rho * sin60, rho / 2],
+                ];
+                const dots = verts.map(([vx, vy]) => surface.addElement({
+                    type: 'wardleyNode',
+                    kind: 'component',
+                    shapeType: 'ellipse',
+                    filled: true,
+                    fillColor: NODE_FILL,
+                    strokeColor: NODE_STROKE,
+                    strokeWidth: MARKET_DOT_STROKE_WIDTH,
+                    shapeStyle: ShapeStyle.General,
+                    roughness: 0,
+                    xywh: new Bound(cx + vx - dr, cy + vy - dr, dr * 2, dr * 2).serialize(),
+                }));
+                const conns = [
+                    [dots[0], dots[1]],
+                    [dots[1], dots[2]],
+                    [dots[2], dots[0]],
+                ].map(([a, b]) => surface.addElement({
+                    type: 'connector',
+                    mode: ConnectorMode.Straight,
+                    source: { id: a },
+                    target: { id: b },
+                    stroke: MARKET_LINK_COLOR,
+                    strokeStyle: StrokeStyle.Solid,
+                    strokeWidth: MARKET_LINK_WIDTH,
+                    frontEndpointStyle: PointStyle.None,
+                    rearEndpointStyle: PointStyle.None,
+                }));
+                return [circle, ...dots, ...conns];
+            }
+            case 'link':
+                return [
+                    surface.addElement({
+                        type: 'connector',
+                        mode: ConnectorMode.Straight,
+                        source: { position: [cx - 18, cy + 6] },
+                        target: { position: [cx + 18, cy - 6] },
+                        stroke: LINK_GREY,
+                        strokeStyle: StrokeStyle.Solid,
+                        strokeWidth: LINK_STROKE_WIDTH,
+                        frontEndpointStyle: PointStyle.None,
+                        rearEndpointStyle: PointStyle.None,
+                    }),
+                ];
+            case 'arrow':
+                return [
+                    surface.addElement({
+                        type: 'connector',
+                        mode: ConnectorMode.Straight,
+                        source: { position: [cx - 18, cy] },
+                        target: { position: [cx + 16, cy] },
+                        stroke: WARDLEY_RED,
+                        strokeStyle: StrokeStyle.Dash,
+                        strokeWidth: LINK_STROKE_WIDTH,
+                        frontEndpointStyle: PointStyle.None,
+                        rearEndpointStyle: PointStyle.Triangle,
+                    }),
+                ];
+        }
+    };
+    // 3. Create the elements.
+    std.store.captureSync();
+    const ids = [];
+    // White frame.
+    ids.push(surface.addElement({
+        type: 'shape',
+        shapeType: 'rect',
+        filled: true,
+        fillColor: '#ffffff',
+        strokeColor: '#cfd2d6',
+        strokeWidth: 1,
+        shapeStyle: ShapeStyle.General,
+        roughness: 0,
+        radius: 6,
+        xywh: new Bound(x0, y0, W, H).serialize(),
+    }));
+    // Title.
+    ids.push(text('Legend', x0 + PAD, y0 + PAD, W - PAD * 2, TITLE_FS + 6, TITLE_FS));
+    // Rows.
+    let ry = y0 + PAD + TITLE_H;
+    for (const t of rows) {
+        const cyRow = ry + ROW_H / 2;
+        ids.push(...glyph(t, x0 + PAD + GLYPH_W / 2, cyRow));
+        ids.push(text(LEGEND_DESC[t], x0 + PAD + GLYPH_W + GAP, cyRow - (TEXT_FS + 8) / 2, TEXT_W, TEXT_FS + 8, TEXT_FS));
+        ry += ROW_H;
+    }
+    // Gradient meaning block: a separator, then [2-colour swatch | caption].
+    if (grad) {
+        const sepY = ry + 4;
+        ids.push(surface.addElement({
+            type: 'shape',
+            shapeType: 'rect',
+            filled: true,
+            fillColor: '#cfd2d6',
+            strokeColor: '#cfd2d6',
+            strokeWidth: 0,
+            shapeStyle: ShapeStyle.General,
+            roughness: 0,
+            radius: 0,
+            xywh: new Bound(x0 + PAD, sepY, W - PAD * 2, 1).serialize(),
+        }));
+        const cyRow = sepY + 8 + GRAD_ROW_H / 2;
+        const sw = 14;
+        const sgap = 2;
+        const sx = x0 + PAD + GLYPH_W / 2 - (sw * 2 + sgap) / 2;
+        grad.swatch.forEach((col, i) => {
+            ids.push(surface.addElement({
+                type: 'shape',
+                shapeType: 'rect',
+                filled: true,
+                fillColor: col,
+                strokeColor: '#cfd2d6',
+                strokeWidth: 0.5,
+                shapeStyle: ShapeStyle.General,
+                roughness: 0,
+                radius: 1,
+                xywh: new Bound(sx + i * (sw + sgap), cyRow - sw / 2, sw, sw).serialize(),
+            }));
+        });
+        ids.push(text(grad.caption, x0 + PAD + GLYPH_W + GAP, cyRow - GRAD_ROW_H / 2, TEXT_W, GRAD_ROW_H, TEXT_FS));
+    }
+    // 4. Group everything and select it.
+    const [, result] = std.command.exec(createGroupCommand, { elements: ids });
+    gfx.selection.set({
+        elements: [result.groupId || ids[0]],
+        editing: false,
+    });
+}
+//# sourceMappingURL=legend.js.map

package/dist/node/consts.d.ts

@@ -0,0 +1,107 @@
+/**
+ * Visual constants for Wardley nodes (component + anchor) and the connector /
+ * inertia presets created from the Wardley menu.
+ *
+ * The node is a NATIVE ellipse (ShapeElementModel-derived) so its stroke
+ * width / colors are editable via the shape toolbar; these are just the
+ * pre-formatted defaults at creation. The person glyph (anchor) is expressed as
+ * ratios of the circle radius R so it stays proportional at any size.
+ */
+/** Default node diameter (= the map label font size, 18). White fill, thin border. */
+export declare const NODE_SIZE = 18;
+export declare const NODE_FILL = "#ffffff";
+export declare const NODE_STROKE = "#1f2328";
+/** Thin border, matching the link / silhouette line weight. */
+export declare const NODE_STROKE_WIDTH = 1;
+/**
+ * Person glyph (`kind: 'anchor'`) ratios of R, mirroring the validated icon
+ * ANCH-B (circle r6 → head r1.8 at cy-2.6 ; shoulders cubic touching the
+ * border at ±(4.6, 3.9) with controls at ±(3.8, 0.1)).
+ */
+export declare const ANCHOR: {
+    headR: number;
+    headCY: number;
+    shoulderEndX: number;
+    shoulderEndY: number;
+    shoulderCtrlX: number;
+    shoulderCtrlY: number;
+};
+/** Native text label, same family as the axis labels, size 18. */
+export declare const LABEL_FONT_SIZE = 18;
+export declare const LABEL_GAP = 8;
+export declare const LABEL_DEFAULT: {
+    component: string;
+    anchor: string;
+};
+/**
+ * Pipeline defaults. The body is a wide, thin native rect (≈ 1.4× the node
+ * diameter tall) with a white slightly-transparent fill and a node-weight
+ * border. The handle is a node-sized square straddling the top edge — the only
+ * connection point (center anchor). Both reuse the WardleyNode (rect) so they
+ * stay native and editable; the body is made non-connectable in the model.
+ */
+export declare const PIPELINE_HEIGHT: number;
+export declare const PIPELINE_WIDTH = 120;
+/** White ~60% opacity — fill only; the 1px border stays opaque. */
+export declare const PIPELINE_FILL = "#ffffff99";
+/** Handle square = node diameter. */
+export declare const HANDLE_SIZE = 18;
+export declare const PIPELINE_LABEL = "Pipeline";
+/**
+ * Connector line width. Connectors are constrained to the LineWidth enum
+ * {2,4,6,8,10,12}, so the thinnest available (2) is used — as close as possible
+ * to the 1px node border.
+ */
+export declare const LINK_STROKE_WIDTH = 2;
+/** Wardley red ("future"/evolution) — matches the validated arrow icon. */
+export declare const WARDLEY_RED = "#d6455d";
+/** Dependency link grey. */
+export declare const LINK_GREY = "#666666";
+/** Inertia bar color + size. */
+export declare const INERTIA_COLOR = "#1f2328";
+export declare const INERTIA_SIZE: {
+    w: number;
+    h: number;
+};
+/**
+ * Market node (composite): a large thin-bordered circle containing 3 small
+ * thick-bordered component nodes wired into a triangle by native connectors.
+ */
+export declare const MARKET_SIZE = 30;
+export declare const MARKET_DOT_SIZE = 8;
+/** Radius of the circle on which the 3 inner node centers sit. */
+export declare const MARKET_DOT_RING = 8;
+/** Inner nodes have a thicker border than the outer circle. */
+export declare const MARKET_DOT_STROKE_WIDTH = 2;
+/** Triangle connectors: thin + dark, no arrows. */
+export declare const MARKET_LINK_WIDTH = 1;
+export declare const MARKET_LINK_COLOR = "#1f2328";
+export declare const MARKET_LABEL = "Market";
+/**
+ * Ecosystem node: a single connectable circle drawn as a GLYPH — a double border
+ * at the rim (outer circle + a 2nd inscribed circle with a thin blank band
+ * between them) and diagonal hatching confined to the inner donut (from the 2nd
+ * border down to a hollow central circle; the hatch never reaches the outer
+ * border). Ratios are of R so the glyph scales with the circle.
+ */
+export declare const ECOSYSTEM_SIZE = 40;
+export declare const ECOSYSTEM: {
+    secondBorderRatio: number;
+    centerRatio: number;
+    hatchOuterRatio: number;
+    hatchSpacingRatio: number;
+};
+export declare const ECOSYSTEM_LABEL = "Ecosystem";
+/**
+ * Method node: a component inscribed in a slightly larger outer circle whose
+ * FILL color encodes the chosen method (editable via the toolbar). Glyph = the
+ * outer circle (colored fill + border, the base ellipse) + a white component
+ * circle drawn at its center. Default fill is a neutral grey.
+ */
+export declare const METHOD_SIZE = 35;
+export declare const METHOD_FILL = "#d9d9d9";
+export declare const METHOD: {
+    centerRatio: number;
+};
+export declare const METHOD_LABEL = "Component";
+//# sourceMappingURL=consts.d.ts.map