@formicoidea/labre-framework-wardley 0.23.0 → 0.23.1

package/src/node/node-renderer.ts

@@ -1,142 +0,0 @@
-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/src/templates/index.ts

@@ -1,236 +0,0 @@
-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 }))),
-  ],
-};

package/src/templates/maps.ts

@@ -1,283 +0,0 @@
-import {
-  makeTemplateSnapshot,
-  type SurfaceElementsJSON,
-  surfaceText,
-  type Template,
-} from '@formicoidea/labre-core/gfx/template';
-import {
-  ConnectorMode,
-  FontFamily,
-  PointStyle,
-  ShapeStyle,
-  StrokeStyle,
-  TextAlign,
-} from '@formicoidea/labre-core/model';
-
-import {
-  INERTIA_COLOR,
-  LABEL_FONT_SIZE,
-  LINK_GREY,
-  LINK_STROKE_WIDTH,
-  NODE_FILL,
-  NODE_SIZE,
-  NODE_STROKE,
-  WARDLEY_RED,
-} from '../node/consts';
-
-/**
- * Authoring kit for canonical Wardley maps. Positions are given as
- * (evolution 0..1, value 0..1) and mapped into the plot interior of a fixed
- * 1600x900 background. Per the composition principle, every glyph reuses an
- * existing shape: stakeholders/users are anchor (person) nodes, "needs" are
- * thick-stroked component nodes, capabilities are component nodes, notes are
- * native rects + text, inertia is the inertia bar, and the future / evolution
- * arrow is the red dashed connector. Legends are produced by the editor's
- * auto-legend action rather than baked into the template.
- */
-const W = 1600;
-const H = 900;
-const PL = { x: 70, y: 56, w: 1470, h: 786 };
-const ex = (e: number) => PL.x + e * PL.w;
-const vy = (v: number) => PL.y + (1 - v) * PL.h;
-const D = NODE_SIZE; // 18
-
-const bg = (variant = 'classic') => ({ type: 'wardley', variant, xywh: `[0,0,${W},${H}]` });
-
-function dot(e: number, v: number, sw: number, stroke = NODE_STROKE, fill = NODE_FILL) {
-  const cx = ex(e);
-  const cy = vy(v);
-  return {
-    type: 'wardleyNode',
-    kind: 'component',
-    shapeType: 'ellipse',
-    filled: true,
-    fillColor: fill,
-    strokeColor: stroke,
-    strokeWidth: sw,
-    shapeStyle: ShapeStyle.General,
-    roughness: 0,
-    xywh: `[${cx - D / 2},${cy - D / 2},${D},${D}]`,
-  };
-}
-const comp = (e: number, v: number) => dot(e, v, 1);
-const future = (e: number, v: number) => dot(e, v, 2, WARDLEY_RED);
-function stake(e: number, v: number) {
-  const cx = ex(e);
-  const cy = vy(v);
-  const d = 24;
-  return {
-    type: 'wardleyNode',
-    kind: 'anchor',
-    shapeType: 'ellipse',
-    filled: true,
-    fillColor: NODE_FILL,
-    strokeColor: NODE_STROKE,
-    strokeWidth: 1,
-    shapeStyle: ShapeStyle.General,
-    roughness: 0,
-    xywh: `[${cx - d / 2},${cy - d / 2},${d},${d}]`,
-  };
-}
-
-type LblOpts = { dx?: number; dy?: number; align?: 'left' | 'right' | 'center'; color?: string; size?: number; w?: number };
-function lbl(e: number, v: number, text: string, o: LblOpts = {}) {
-  const cx = ex(e);
-  const cy = vy(v);
-  const w = o.w ?? 200;
-  const dx = o.dx ?? 12;
-  const dy = o.dy ?? -10;
-  const align = o.align ?? 'left';
-  const x = align === 'right' ? cx - w - dx : align === 'center' ? cx - w / 2 : cx + dx;
-  return {
-    type: 'text',
-    text: surfaceText(text),
-    color: o.color ?? NODE_STROKE,
-    fontFamily: FontFamily.Inter,
-    fontSize: o.size ?? LABEL_FONT_SIZE,
-    textAlign: align === 'right' ? TextAlign.Right : align === 'center' ? TextAlign.Center : TextAlign.Left,
-    xywh: `[${x},${cy + dy},${w},26]`,
-  };
-}
-
-function link(a: string, b: string, o: { red?: boolean; arrow?: boolean } = {}) {
-  return {
-    type: 'connector',
-    mode: ConnectorMode.Straight,
-    stroke: o.red ? WARDLEY_RED : LINK_GREY,
-    strokeStyle: o.arrow ? StrokeStyle.Dash : StrokeStyle.Solid,
-    strokeWidth: LINK_STROKE_WIDTH,
-    frontEndpointStyle: PointStyle.None,
-    rearEndpointStyle: o.arrow ? PointStyle.Triangle : PointStyle.None,
-    source: { id: a },
-    target: { id: b },
-  };
-}
-
-function inertia(e: number, v: number) {
-  const cx = ex(e);
-  const cy = vy(v);
-  return {
-    type: 'shape',
-    shapeType: 'rect',
-    filled: true,
-    fillColor: INERTIA_COLOR,
-    strokeColor: INERTIA_COLOR,
-    strokeWidth: 0,
-    shapeStyle: ShapeStyle.General,
-    roughness: 0,
-    radius: 0,
-    xywh: `[${cx - 4},${cy - 22},8,44]`,
-  };
-}
-
-function panel(x: number, y: number, w: number, h: number) {
-  return {
-    type: 'shape',
-    shapeType: 'rect',
-    filled: true,
-    fillColor: '#ffffff',
-    strokeColor: NODE_STROKE,
-    strokeWidth: 1.2,
-    shapeStyle: ShapeStyle.General,
-    roughness: 0,
-    radius: 0,
-    xywh: `[${x},${y},${w},${h}]`,
-  };
-}
-function freeText(x: number, y: number, w: number, str: string, size = 16, color = NODE_STROKE) {
-  return {
-    type: 'text',
-    text: surfaceText(str),
-    color,
-    fontFamily: FontFamily.Inter,
-    fontSize: size,
-    textAlign: TextAlign.Left,
-    xywh: `[${x},${y},${w},26]`,
-  };
-}
-/** Centred, enlarged map title spanning the plot width. */
-function title(str: string) {
-  return {
-    type: 'text',
-    text: surfaceText(str),
-    color: NODE_STROKE,
-    fontFamily: FontFamily.Inter,
-    fontSize: 28,
-    textAlign: TextAlign.Center,
-    xywh: `[${W / 2 - 500},12,1000,40]`,
-  };
-}
-
-const ATTRS = 'width="100%" height="100%" viewBox="0 0 135 80" xmlns="http://www.w3.org/2000/svg"';
-const mapPreview = (extra: string) =>
-  `<svg ${ATTRS} fill="none"><path d="M22 12 V64 H120" stroke="#3b3d42" stroke-width="2"/>${extra}</svg>`;
-
-function tpl(name: string, preview: string, elements: SurfaceElementsJSON): Template {
-  return { name, type: 'template', preview, content: makeTemplateSnapshot(elements, name) };
-}
-
-function ann(e: number, v: number) {
-  const cx = ex(e);
-  const cy = vy(v);
-  return {
-    type: 'shape',
-    shapeType: 'ellipse',
-    filled: true,
-    fillColor: '#ffffff',
-    strokeColor: NODE_STROKE,
-    strokeWidth: 1.5,
-    shapeStyle: ShapeStyle.General,
-    roughness: 0,
-    xywh: `[${cx - 14},${cy - 14},28,28]`,
-  };
-}
-function annTxt(e: number, v: number, n: string) {
-  const cx = ex(e);
-  const cy = vy(v);
-  return {
-    type: 'text',
-    text: surfaceText(n),
-    color: NODE_STROKE,
-    fontFamily: FontFamily.Inter,
-    fontSize: 14,
-    textAlign: TextAlign.Center,
-    xywh: `[${cx - 14},${cy - 9},28,20]`,
-  };
-}
-
-// ── Tea Shop (the canonical map) ──────────────────────────────────────
-function teaShop(): SurfaceElementsJSON {
-  return {
-    bg: bg(),
-    title: title('Tea Shop'),
-    annBox: panel(120, 200, 420, 64),
-    annText: freeText(132, 208, 400, 'Annotations:\n1. Standardising power lets kettles evolve faster\n2. Hot water is obvious and well known', 13),
-    business: stake(0.62, 0.93),
-    businessL: lbl(0.62, 0.93, 'Business', { align: 'center', dy: -28, w: 120 }),
-    public: stake(0.78, 0.93),
-    publicL: lbl(0.78, 0.93, 'Public', { align: 'center', dy: -28, w: 120 }),
-    cupOfTea: comp(0.62, 0.74),
-    cupOfTeaL: lbl(0.62, 0.74, 'Cup of Tea', { align: 'right' }),
-    cup: comp(0.8, 0.7),
-    cupL: lbl(0.8, 0.7, 'Cup'),
-    tea: comp(0.83, 0.6),
-    teaL: lbl(0.83, 0.6, 'Tea'),
-    hotWater: comp(0.8, 0.47),
-    hotWaterL: lbl(0.8, 0.47, 'Hot Water'),
-    water: comp(0.81, 0.34),
-    waterL: lbl(0.81, 0.34, 'Water'),
-    kettle: comp(0.36, 0.38),
-    kettleL: lbl(0.36, 0.38, 'Kettle', { align: 'right', dy: 6 }),
-    electric: future(0.56, 0.38),
-    electricL: lbl(0.56, 0.38, 'Electric Kettle'),
-    power: comp(0.7, 0.1),
-    powerL: lbl(0.7, 0.1, 'Power', { align: 'right', dy: 6 }),
-    powerFut: future(0.88, 0.1),
-    powerFutL: lbl(0.88, 0.1, 'Power'),
-    limitedBy: lbl(0.56, 0.43, 'limited by', { align: 'center', w: 120, size: 13 }),
-    ann1a: ann(0.5, 0.385), ann1t: annTxt(0.5, 0.385, '1'),
-    ann2a: ann(0.84, 0.45), ann2t: annTxt(0.84, 0.45, '2'),
-    l1: link('business', 'cupOfTea'),
-    l2: link('public', 'cupOfTea'),
-    l3: link('cupOfTea', 'cup'),
-    l4: link('cupOfTea', 'tea'),
-    l5: link('cupOfTea', 'hotWater'),
-    l6: link('hotWater', 'water'),
-    l7: link('hotWater', 'kettle'),
-    l8: link('kettle', 'power'),
-    a1: link('kettle', 'electric', { red: true, arrow: true }),
-    a2: link('power', 'powerFut', { red: true, arrow: true }),
-  };
-}
-
-// ── Kodak inertia (2005) ──────────────────────────────────────────────
-function kodak(): SurfaceElementsJSON {
-  return {
-    bg: bg(),
-    title: title("Wardley map of Kodak's 2005 inertia to digital"),
-    user: stake(0.54, 0.92),
-    userL: lbl(0.54, 0.92, 'User'),
-    capture: dot(0.53, 0.8, 3),
-    captureL: lbl(0.53, 0.8, 'Capture a moment'),
-    film: comp(0.52, 0.62),
-    filmL: lbl(0.52, 0.62, 'Film camera', { align: 'right' }),
-    digital: future(0.74, 0.62),
-    digitalL: lbl(0.74, 0.62, 'Digital camera', { color: WARDLEY_RED }),
-    roll: comp(0.52, 0.4),
-    rollL: lbl(0.52, 0.4, 'Photographic film', { align: 'right' }),
-    storage: future(0.84, 0.4),
-    storageL: lbl(0.84, 0.4, 'Digital storage', { color: WARDLEY_RED }),
-    inertiaBar: inertia(0.78, 0.4),
-    l1: link('user', 'capture'),
-    l2: link('capture', 'film'),
-    l3: link('film', 'roll'),
-    r1: link('capture', 'storage', { red: true }),
-    a1: link('film', 'digital', { red: true, arrow: true }),
-    a2: link('roll', 'storage', { red: true, arrow: true }),
-  };
-}
-
-export const wardleyMaps: Template[] = [
-  tpl('Tea Shop', mapPreview('<circle cx="78" cy="24" r="3" fill="#fff" stroke="#1f2328"/><circle cx="50" cy="44" r="3" fill="#fff" stroke="#1f2328"/><circle cx="86" cy="40" r="3" fill="#fff" stroke="#1f2328"/><circle cx="92" cy="58" r="3" fill="#fff" stroke="#1f2328"/><path d="M78 24 L50 44 M78 24 L86 40 L92 58" stroke="#666"/><path d="M50 44 h22" stroke="#d6455d" stroke-dasharray="3 2"/>'), teaShop()),
-  tpl('Kodak inertia', mapPreview('<circle cx="56" cy="22" r="3" fill="#fff" stroke="#1f2328"/><circle cx="54" cy="40" r="3" fill="#fff" stroke="#1f2328"/><circle cx="86" cy="40" r="3" fill="#fff" stroke="#d6455d"/><rect x="76" y="35" width="2.5" height="11" fill="#1f2328"/><path d="M57 40 h17" stroke="#d6455d" stroke-dasharray="3 2"/>'), kodak()),
-];