@formicoidea/labre-framework-wardley 0.23.2 → 0.24.0

package/{src/node/consts.ts → dist/node/consts.js}

@@ -1,109 +1,100 @@
-/**
- * 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 const NODE_SIZE = 18;
-export const NODE_FILL = '#ffffff';
-export const NODE_STROKE = '#1f2328';
-/** Thin border, matching the link / silhouette line weight. */
-export 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 const ANCHOR = {
-  headR: 0.3,
-  headCY: -0.433,
-  shoulderEndX: 0.767,
-  shoulderEndY: 0.65,
-  shoulderCtrlX: 0.633,
-  shoulderCtrlY: 0.017,
-};
-
-/** Native text label, same family as the axis labels, size 18. */
-export const LABEL_FONT_SIZE = 18;
-export const LABEL_GAP = 8;
-export const LABEL_DEFAULT = { component: 'Component', anchor: 'Anchor' };
-
-/**
- * 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 const PIPELINE_HEIGHT = Math.round(NODE_SIZE * 1.4); // 25
-export const PIPELINE_WIDTH = 120;
-/** White ~60% opacity — fill only; the 1px border stays opaque. */
-export const PIPELINE_FILL = '#ffffff99';
-/** Handle square = node diameter. */
-export const HANDLE_SIZE = NODE_SIZE;
-export 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 const LINK_STROKE_WIDTH = 2;
-
-/** Wardley red ("future"/evolution) — matches the validated arrow icon. */
-export const WARDLEY_RED = '#d6455d';
-/** Dependency link grey. */
-export const LINK_GREY = '#666666';
-/** Inertia bar color + size. */
-export const INERTIA_COLOR = '#1f2328';
-export const INERTIA_SIZE = { w: 8, h: 44 };
-
-/**
- * Market node (composite): a large thin-bordered circle containing 3 small
- * thick-bordered component nodes wired into a triangle by native connectors.
- */
-export const MARKET_SIZE = 30;
-export const MARKET_DOT_SIZE = 8;
-/** Radius of the circle on which the 3 inner node centers sit. */
-export const MARKET_DOT_RING = 8;
-/** Inner nodes have a thicker border than the outer circle. */
-export const MARKET_DOT_STROKE_WIDTH = 2;
-/** Triangle connectors: thin + dark, no arrows. */
-export const MARKET_LINK_WIDTH = 1;
-export const MARKET_LINK_COLOR = NODE_STROKE;
-export 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 const ECOSYSTEM_SIZE = 40;
-export const ECOSYSTEM = {
-  secondBorderRatio: 0.88, // 2nd (inscribed) border
-  centerRatio: 0.43, // central hollow circle
-  hatchOuterRatio: 0.86, // hatch stays just inside the 2nd border
-  hatchSpacingRatio: 0.15, // gap between hatch lines
-};
-export 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 const METHOD_SIZE = 35;
-export const METHOD_FILL = '#d9d9d9';
-export const METHOD = {
-  centerRatio: 0.5, // inner white component radius / R
-};
-export const METHOD_LABEL = 'Component';
+/**
+ * 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 const NODE_SIZE = 18;
+export const NODE_FILL = '#ffffff';
+export const NODE_STROKE = '#1f2328';
+/** Thin border, matching the link / silhouette line weight. */
+export 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 const ANCHOR = {
+    headR: 0.3,
+    headCY: -0.433,
+    shoulderEndX: 0.767,
+    shoulderEndY: 0.65,
+    shoulderCtrlX: 0.633,
+    shoulderCtrlY: 0.017,
+};
+/** Native text label, same family as the axis labels, size 18. */
+export const LABEL_FONT_SIZE = 18;
+export const LABEL_GAP = 8;
+export const LABEL_DEFAULT = { component: 'Component', anchor: 'Anchor' };
+/**
+ * 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 const PIPELINE_HEIGHT = Math.round(NODE_SIZE * 1.4); // 25
+export const PIPELINE_WIDTH = 120;
+/** White ~60% opacity — fill only; the 1px border stays opaque. */
+export const PIPELINE_FILL = '#ffffff99';
+/** Handle square = node diameter. */
+export const HANDLE_SIZE = NODE_SIZE;
+export 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 const LINK_STROKE_WIDTH = 2;
+/** Wardley red ("future"/evolution) — matches the validated arrow icon. */
+export const WARDLEY_RED = '#d6455d';
+/** Dependency link grey. */
+export const LINK_GREY = '#666666';
+/** Inertia bar color + size. */
+export const INERTIA_COLOR = '#1f2328';
+export const INERTIA_SIZE = { w: 8, h: 44 };
+/**
+ * Market node (composite): a large thin-bordered circle containing 3 small
+ * thick-bordered component nodes wired into a triangle by native connectors.
+ */
+export const MARKET_SIZE = 30;
+export const MARKET_DOT_SIZE = 8;
+/** Radius of the circle on which the 3 inner node centers sit. */
+export const MARKET_DOT_RING = 8;
+/** Inner nodes have a thicker border than the outer circle. */
+export const MARKET_DOT_STROKE_WIDTH = 2;
+/** Triangle connectors: thin + dark, no arrows. */
+export const MARKET_LINK_WIDTH = 1;
+export const MARKET_LINK_COLOR = NODE_STROKE;
+export 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 const ECOSYSTEM_SIZE = 40;
+export const ECOSYSTEM = {
+    secondBorderRatio: 0.88, // 2nd (inscribed) border
+    centerRatio: 0.43, // central hollow circle
+    hatchOuterRatio: 0.86, // hatch stays just inside the 2nd border
+    hatchSpacingRatio: 0.15, // gap between hatch lines
+};
+export 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 const METHOD_SIZE = 35;
+export const METHOD_FILL = '#d9d9d9';
+export const METHOD = {
+    centerRatio: 0.5, // inner white component radius / R
+};
+export const METHOD_LABEL = 'Component';

package/dist/node/node-renderer.d.ts

@@ -0,0 +1,16 @@
+import { type ElementRenderer } from '@formicoidea/labre-core/blocks/surface';
+import { type WardleyNodeElementModel } from '@formicoidea/labre-core/model';
+/**
+ * Renderer for a Wardley node. The circle is drawn by REUSING the native shape
+ * renderer (so stroke width, colors and theme behave exactly like a native
+ * ellipse). On top of it, a glyph is drawn for two kinds:
+ *  - `anchor`    → an inscribed person (head + shoulders), clipped to the circle.
+ *  - `ecosystem` → a double border at the rim + diagonal hatching confined to the
+ *                  inner donut + a hollow central circle.
+ * All glyph strokes use the model's (editable) stroke color; the white band and
+ * the hollow center come from the base fill, so colors stay editable.
+ */
+export declare const wardleyNode: ElementRenderer<WardleyNodeElementModel>;
+export declare const WardleyNodeRendererExtension: import("@formicoidea/labre-core/store").ExtensionType & {
+    identifier: import("@formicoidea/labre-core/_pkgs/global/di").ServiceIdentifier<ElementRenderer<WardleyNodeElementModel>>;
+};

package/dist/node/node-renderer.js

@@ -0,0 +1,105 @@
+import { ElementRendererExtension, } from '@formicoidea/labre-core/blocks/surface';
+import { shape as shapeRenderer } from '@formicoidea/labre-core/gfx/shape';
+import { DefaultTheme } from '@formicoidea/labre-core/model';
+import { ANCHOR, ECOSYSTEM, METHOD, NODE_FILL } from './consts';
+/**
+ * Renderer for a Wardley node. The circle is drawn by REUSING the native shape
+ * renderer (so stroke width, colors and theme behave exactly like a native
+ * ellipse). On top of it, a glyph is drawn for two kinds:
+ *  - `anchor`    → an inscribed person (head + shoulders), clipped to the circle.
+ *  - `ecosystem` → a double border at the rim + diagonal hatching confined to the
+ *                  inner donut + a hollow central circle.
+ * All glyph strokes use the model's (editable) stroke color; the white band and
+ * the hollow center come from the base fill, so colors stay editable.
+ */
+export const wardleyNode = (model, ctx, matrix, renderer, rc, bound) => {
+    const [, , w, h] = model.deserializedXYWH;
+    const cx = w / 2;
+    const cy = h / 2;
+    // Capture the element-local transform BEFORE the shape renderer mutates the
+    // matrix, so the glyph can be drawn in the same space afterwards.
+    const glyphMatrix = DOMMatrix.fromMatrix(matrix)
+        .translateSelf(cx, cy)
+        .rotateSelf(model.rotate)
+        .translateSelf(-cx, -cy);
+    // Native ellipse (fill / stroke / theme handled natively).
+    shapeRenderer(model, ctx, matrix, renderer, rc, bound);
+    if (model.kind !== 'anchor' &&
+        model.kind !== 'ecosystem' &&
+        model.kind !== 'method')
+        return;
+    const strokeWidth = model.strokeWidth || 1;
+    const R = Math.min(w, h) / 2 - strokeWidth / 2;
+    const color = renderer.getColorValue(model.strokeColor, DefaultTheme.shapeStrokeColor, true);
+    ctx.setTransform(glyphMatrix);
+    // ── Anchor: person glyph (clipped to the circle) ────────────────────
+    if (model.kind === 'anchor') {
+        ctx.save();
+        ctx.beginPath();
+        ctx.arc(cx, cy, R - strokeWidth / 2, 0, Math.PI * 2);
+        ctx.clip();
+        ctx.lineWidth = strokeWidth;
+        ctx.strokeStyle = color;
+        ctx.lineCap = 'round';
+        ctx.lineJoin = 'round';
+        // head
+        ctx.beginPath();
+        ctx.arc(cx, cy + ANCHOR.headCY * R, ANCHOR.headR * R, 0, Math.PI * 2);
+        ctx.stroke();
+        // rounded shoulders (extremities sit on the circle border)
+        const sx = ANCHOR.shoulderEndX * R;
+        const sy = ANCHOR.shoulderEndY * R;
+        const kx = ANCHOR.shoulderCtrlX * R;
+        const ky = ANCHOR.shoulderCtrlY * R;
+        ctx.beginPath();
+        ctx.moveTo(cx - sx, cy + sy);
+        ctx.bezierCurveTo(cx - kx, cy + ky, cx + kx, cy + ky, cx + sx, cy + sy);
+        ctx.stroke();
+        ctx.restore();
+        return;
+    }
+    // ── Method: a white component inscribed in the colored outer circle ──
+    if (model.kind === 'method') {
+        const rInner = R * METHOD.centerRatio;
+        ctx.fillStyle = NODE_FILL;
+        ctx.lineWidth = strokeWidth;
+        ctx.strokeStyle = color;
+        ctx.beginPath();
+        ctx.arc(cx, cy, rInner, 0, Math.PI * 2);
+        ctx.fill();
+        ctx.stroke();
+        return;
+    }
+    // ── Ecosystem: double border + hatched inner donut + hollow center ──
+    const rBorder2 = R * ECOSYSTEM.secondBorderRatio;
+    const rCenter = R * ECOSYSTEM.centerRatio;
+    const rHatch = R * ECOSYSTEM.hatchOuterRatio;
+    // Hatch confined to the donut [rCenter, rHatch] (even-odd clip = annulus).
+    ctx.save();
+    ctx.beginPath();
+    ctx.arc(cx, cy, rHatch, 0, Math.PI * 2);
+    ctx.moveTo(cx + rCenter, cy);
+    ctx.arc(cx, cy, rCenter, 0, Math.PI * 2);
+    ctx.clip('evenodd');
+    ctx.lineWidth = Math.max(0.5, strokeWidth * 0.6);
+    ctx.strokeStyle = color;
+    const step = R * ECOSYSTEM.hatchSpacingRatio;
+    for (let d = -2 * R; d <= 2 * R; d += step) {
+        ctx.beginPath();
+        ctx.moveTo(cx - R, cy - R + d);
+        ctx.lineTo(cx + R, cy + R + d);
+        ctx.stroke();
+    }
+    ctx.restore();
+    // Double border (2nd inscribed circle) + central hole border. No fill: the
+    // white band and hollow center come from the base ellipse fill.
+    ctx.lineWidth = strokeWidth;
+    ctx.strokeStyle = color;
+    ctx.beginPath();
+    ctx.arc(cx, cy, rBorder2, 0, Math.PI * 2);
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.arc(cx, cy, rCenter, 0, Math.PI * 2);
+    ctx.stroke();
+};
+export const WardleyNodeRendererExtension = ElementRendererExtension('wardleyNode', wardleyNode);

package/{src/node/node-view.ts → dist/node/node-view.d.ts}

@@ -1,11 +1,10 @@
-import type { WardleyNodeElementModel } from '@formicoidea/labre-core/model';
-import { GfxElementModelView } from '@formicoidea/labre-core/std/gfx';
-
-/**
- * View for a Wardley node. Registering it ensures `gfx.view.get(model)` returns
- * a view (required so move / select / connector interactions work). The label
- * is a separate native text element, so no custom editing is needed here.
- */
-export class WardleyNodeView extends GfxElementModelView<WardleyNodeElementModel> {
-  static override type: string = 'wardleyNode';
-}
+import type { WardleyNodeElementModel } from '@formicoidea/labre-core/model';
+import { GfxElementModelView } from '@formicoidea/labre-core/std/gfx';
+/**
+ * View for a Wardley node. Registering it ensures `gfx.view.get(model)` returns
+ * a view (required so move / select / connector interactions work). The label
+ * is a separate native text element, so no custom editing is needed here.
+ */
+export declare class WardleyNodeView extends GfxElementModelView<WardleyNodeElementModel> {
+    static type: string;
+}

package/dist/node/node-view.js

@@ -0,0 +1,9 @@
+import { GfxElementModelView } from '@formicoidea/labre-core/std/gfx';
+/**
+ * View for a Wardley node. Registering it ensures `gfx.view.get(model)` returns
+ * a view (required so move / select / connector interactions work). The label
+ * is a separate native text element, so no custom editing is needed here.
+ */
+export class WardleyNodeView extends GfxElementModelView {
+    static { this.type = 'wardleyNode'; }
+}

package/dist/templates/index.d.ts

@@ -0,0 +1,2 @@
+import { type TemplateCategory } from '@formicoidea/labre-core/gfx/template';
+export declare const wardleyTemplateCategory: TemplateCategory;

package/dist/templates/index.js

@@ -0,0 +1,171 @@
+import { makeTemplateSnapshot, surfaceText, } from '@formicoidea/labre-core/gfx/template';
+import { ConnectorMode, FontFamily, PointStyle, ShapeStyle, StrokeStyle, TextAlign, } from '@formicoidea/labre-core/model';
+import { REF_WIDTH } from '../consts';
+import { wardleyMaps } from './maps';
+import { ECOSYSTEM_SIZE, HANDLE_SIZE, INERTIA_COLOR, INERTIA_SIZE, LABEL_FONT_SIZE, LINK_GREY, LINK_STROKE_WIDTH, MARKET_DOT_RING, MARKET_DOT_SIZE, MARKET_DOT_STROKE_WIDTH, MARKET_LINK_COLOR, MARKET_LINK_WIDTH, MARKET_SIZE, METHOD_FILL, METHOD_SIZE, NODE_FILL, NODE_SIZE, NODE_STROKE, NODE_STROKE_WIDTH, PIPELINE_FILL, PIPELINE_HEIGHT, PIPELINE_WIDTH, WARDLEY_RED, } from '../node/consts';
+const VARIANT_DEFAULTS = {
+    classic: {},
+    opportunity: {
+        yAxisTitle: 'Opportunity',
+        showVisibilityLabels: false,
+        showCornerLabels: false,
+    },
+    benefit: {
+        yAxisTitle: '',
+        visibilityHigh: 'Benefit',
+        visibilityLow: 'Investment',
+        showCornerLabels: false,
+    },
+    'evolution-gradient': {},
+};
+const bg = (variant, w = REF_WIDTH) => {
+    const h = Math.round((w * 9) / 16);
+    return { type: 'wardley', variant, ...VARIANT_DEFAULTS[variant], xywh: `[0,0,${w},${h}]` };
+};
+/** A wardley node ellipse positioned by top-left. */
+function node(kind, x, y, d = NODE_SIZE, fill = NODE_FILL, strokeWidth = NODE_STROKE_WIDTH) {
+    return {
+        type: 'wardleyNode',
+        kind,
+        shapeType: 'ellipse',
+        filled: true,
+        fillColor: fill,
+        strokeColor: NODE_STROKE,
+        strokeWidth,
+        shapeStyle: ShapeStyle.General,
+        roughness: 0,
+        xywh: `[${x},${y},${d},${d}]`,
+    };
+}
+function label(x, y, str, align = 'left') {
+    return {
+        type: 'text',
+        text: surfaceText(str),
+        color: NODE_STROKE,
+        fontFamily: FontFamily.Inter,
+        fontSize: LABEL_FONT_SIZE,
+        textAlign: align === 'center' ? TextAlign.Center : TextAlign.Left,
+        xywh: `[${x},${y},140,26]`,
+    };
+}
+function connect(source, target, opts = {}) {
+    return {
+        type: 'connector',
+        mode: ConnectorMode.Straight,
+        stroke: opts.red ? WARDLEY_RED : LINK_GREY,
+        strokeStyle: opts.red ? StrokeStyle.Dash : StrokeStyle.Solid,
+        strokeWidth: LINK_STROKE_WIDTH,
+        frontEndpointStyle: PointStyle.None,
+        rearEndpointStyle: opts.red ? PointStyle.Triangle : PointStyle.None,
+        source,
+        target,
+    };
+}
+const inertia = (x = 0, y = 0) => ({
+    type: 'shape',
+    shapeType: 'rect',
+    filled: true,
+    fillColor: INERTIA_COLOR,
+    strokeColor: INERTIA_COLOR,
+    strokeWidth: 0,
+    shapeStyle: ShapeStyle.General,
+    roughness: 0,
+    radius: 0,
+    xywh: `[${x},${y},${INERTIA_SIZE.w},${INERTIA_SIZE.h}]`,
+});
+/** Pipeline composite: body rect + handle square (straddling top) + label. */
+function pipeline() {
+    return {
+        label: label(0, 0, 'Pipeline', 'center'),
+        body: {
+            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: `[0,39,${PIPELINE_WIDTH},${PIPELINE_HEIGHT}]`,
+        },
+        handle: {
+            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: `[${PIPELINE_WIDTH / 2 - HANDLE_SIZE / 2},${39 - HANDLE_SIZE / 2},${HANDLE_SIZE},${HANDLE_SIZE}]`,
+        },
+    };
+}
+/** Market composite: outer circle + 3 inner dots wired in a triangle + label. */
+function market() {
+    const R = MARKET_SIZE / 2;
+    const c = R; // center within the [0,0,MARKET_SIZE,MARKET_SIZE] box
+    const rho = MARKET_DOT_RING;
+    const sin60 = Math.sqrt(3) / 2;
+    const verts = [
+        [0, -rho],
+        [rho * sin60, rho / 2],
+        [-rho * sin60, rho / 2],
+    ];
+    const dotAt = (vx, vy) => node('component', c + vx - MARKET_DOT_SIZE / 2, c + vy - MARKET_DOT_SIZE / 2, MARKET_DOT_SIZE, NODE_FILL, MARKET_DOT_STROKE_WIDTH);
+    const tri = (a, b) => ({
+        type: 'connector',
+        mode: ConnectorMode.Straight,
+        stroke: MARKET_LINK_COLOR,
+        strokeStyle: StrokeStyle.Solid,
+        strokeWidth: MARKET_LINK_WIDTH,
+        frontEndpointStyle: PointStyle.None,
+        rearEndpointStyle: PointStyle.None,
+        source: { id: a },
+        target: { id: b },
+    });
+    return {
+        circle: node('market', 0, 0, MARKET_SIZE, NODE_FILL),
+        d0: dotAt(verts[0][0], verts[0][1]),
+        d1: dotAt(verts[1][0], verts[1][1]),
+        d2: dotAt(verts[2][0], verts[2][1]),
+        t0: tri('d0', 'd1'),
+        t1: tri('d1', 'd2'),
+        t2: tri('d2', 'd0'),
+        label: label(MARKET_SIZE + 8, 2, 'Market'),
+    };
+}
+const single = (el) => ({ a: el });
+const nodeWithLabel = (kind, d, fill, name) => ({
+    n: node(kind, 0, 0, d, fill),
+    l: label(d + 8, d / 2 - 13, name),
+});
+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>`;
+function tpl(name, preview, elements) {
+    return { name, type: 'template', preview, content: makeTemplateSnapshot(elements, name) };
+}
+export const wardleyTemplateCategory = {
+    name: 'Wardley',
+    templates: [
+        ...wardleyMaps,
+        tpl('Map background', bgPreview(), { bg: bg('classic') }),
+        tpl('Opportunity gradient', bgPreview('<rect x="22" y="12" width="98" height="52" fill="#eef4fb" opacity="0.6"/>'), { bg: bg('opportunity') }),
+        tpl('Benefit gradient', bgPreview('<rect x="22" y="12" width="98" height="26" fill="#e6eef8" opacity="0.6"/>'), { bg: bg('benefit') }),
+        tpl('Evolution gradient', bgPreview('<rect x="22" y="12" width="98" height="52" fill="#e3e2e4" opacity="0.5"/>'), { bg: bg('evolution-gradient') }),
+        tpl('Component', dotPreview('#ffffff', 1.5), nodeWithLabel('component', NODE_SIZE, NODE_FILL, 'Component')),
+        tpl('Anchor', `<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>`, nodeWithLabel('anchor', NODE_SIZE, NODE_FILL, 'Anchor')),
+        tpl('Ecosystem', `<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>`, nodeWithLabel('ecosystem', ECOSYSTEM_SIZE, NODE_FILL, 'Ecosystem')),
+        tpl('Method', `<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>`, nodeWithLabel('method', METHOD_SIZE, METHOD_FILL, 'Component')),
+        tpl('Pipeline', `<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()),
+        tpl('Market', `<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()),
+        tpl('Inertia', `<svg ${ATTRS} fill="none"><rect x="63" y="22" width="8" height="36" fill="#1f2328"/></svg>`, single(inertia())),
+        tpl('Link', `<svg ${ATTRS} fill="none"><path d="M24 40 H110" stroke="#666" stroke-width="2.4"/></svg>`, single(connect({ position: [0, 0] }, { position: [160, 0] }))),
+        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>`, single(connect({ position: [0, 0] }, { position: [160, 0] }, { red: true }))),
+    ],
+};

package/dist/templates/maps.d.ts

@@ -0,0 +1,2 @@
+import { type Template } from '@formicoidea/labre-core/gfx/template';
+export declare const wardleyMaps: Template[];