@formicoidea/labre-framework-wardley 0.23.1 → 0.23.2

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

@@ -1,101 +1,109 @@
-/**
- * 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';
-//# sourceMappingURL=consts.js.map
+/**
+ * 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/src/node/node-renderer.ts

@@ -0,0 +1,142 @@
+import {
+  type ElementRenderer,
+  ElementRendererExtension,
+} from '@formicoidea/labre-core/blocks/surface';
+import { shape as shapeRenderer } from '@formicoidea/labre-core/gfx/shape';
+import { type WardleyNodeElementModel, 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: ElementRenderer<WardleyNodeElementModel> = (
+  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/{dist/node/node-view.d.ts → src/node/node-view.ts}

@@ -1,11 +1,11 @@
-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;
-}
-//# sourceMappingURL=node-view.d.ts.map
+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';
+}

package/src/templates/index.ts

@@ -0,0 +1,236 @@
+import {
+  makeTemplateSnapshot,
+  type SurfaceElementsJSON,
+  surfaceText,
+  type Template,
+  type TemplateCategory,
+} from '@formicoidea/labre-core/gfx/template';
+import {
+  ConnectorMode,
+  FontFamily,
+  PointStyle,
+  ShapeStyle,
+  StrokeStyle,
+  TextAlign,
+  type WardleyBgVariant,
+} 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: Record<WardleyBgVariant, Record<string, unknown>> = {
+  classic: {},
+  opportunity: {
+    yAxisTitle: 'Opportunity',
+    showVisibilityLabels: false,
+    showCornerLabels: false,
+  },
+  benefit: {
+    yAxisTitle: '',
+    visibilityHigh: 'Benefit',
+    visibilityLow: 'Investment',
+    showCornerLabels: false,
+  },
+  'evolution-gradient': {},
+};
+
+const bg = (variant: WardleyBgVariant, 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: string,
+  x: number,
+  y: number,
+  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: number, y: number, str: string, align: 'left' | 'center' = '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: Record<string, unknown>,
+  target: Record<string, unknown>,
+  opts: { red?: boolean } = {}
+) {
+  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(): SurfaceElementsJSON {
+  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(): SurfaceElementsJSON {
+  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: number, vy: number) =>
+    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: string, b: string) => ({
+    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: Record<string, unknown>): SurfaceElementsJSON => ({ a: el });
+const nodeWithLabel = (kind: string, d: number, fill: string, name: string): SurfaceElementsJSON => ({
+  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: string, sw = 2) =>
+  `<svg ${ATTRS} fill="none"><circle cx="67" cy="40" r="13" fill="${fill}" stroke="#1f2328" stroke-width="${sw}"/></svg>`;
+
+function tpl(name: string, preview: string, elements: SurfaceElementsJSON): Template {
+  return { name, type: 'template', preview, content: makeTemplateSnapshot(elements, name) };
+}
+
+export const wardleyTemplateCategory: TemplateCategory = {
+  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 }))),
+  ],
+};