@formicoidea/labre-framework-wardley 0.23.0 → 0.23.1

package/src/gradient.ts

@@ -1,137 +0,0 @@
-/**
- * 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: number, mu: number, s: number) =>
-  Math.exp(-0.5 * ((x - mu) / s) ** 2);
-const asym = (x: number, mu: number, sL: number, sR: number) =>
-  Math.exp(-0.5 * ((x - mu) / (x < mu ? sL : sR)) ** 2);
-
-// Opportunity — differential value (green): early peak + long decay.
-const fDiff = (x: number) => asym(x, 0.175, 0.24, 0.36);
-const DIFF_DOM: readonly [number, number] = [0, 0.86];
-// Opportunity — operational value (red): bump centred on commodity.
-const fOper = (x: number) => asym(x, 0.85, 0.1, 0.075);
-const OPER_DOM: readonly [number, number] = [0.62, 1];
-// Benefit / investment (signed): big positive bell − small negative bell.
-const fBen = (x: number) => 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: number) => {
-  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: (x: number) => number, x0: number, x1: number) {
-  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: number) => Math.max(0, Math.min(1, v));
-const norm = (v: number, lo: number, hi: number) => (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: string, alpha: number) {
-  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: CanvasGradient,
-  hex: string,
-  opacityFn: (x: number) => number,
-  x0: number,
-  x1: number,
-  maxOp: number = 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: CanvasRenderingContext2D,
-  variant: 'opportunity' | 'benefit' | 'evolution-gradient',
-  px0: number,
-  px1: number,
-  py0: number,
-  py1: number
-) {
-  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);
-}

package/src/index.ts

@@ -1 +0,0 @@
-export {};

package/src/label-layout.ts

@@ -1,126 +0,0 @@
-import type { WardleyBackgroundElementModel } from '@formicoidea/labre-core/model';
-
-import { FONTS, MARGIN, OFFSETS } from './consts';
-
-/** 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;
-}
-
-/** Rough per-character advance — only used to size generous hit boxes. */
-const approxTextWidth = (text: string, fontSize: number) =>
-  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: WardleyBackgroundElementModel,
-  w: number,
-  h: number
-): WardleyLabelHit[] {
-  const px0 = MARGIN.left;
-  const px1 = w - MARGIN.right;
-  const py0 = MARGIN.top;
-  const py1 = h - MARGIN.bottom;
-  const ex = (r: number) => px0 + r * (px1 - px0);
-
-  const pad = 6;
-  const hits: WardleyLabelHit[] = [];
-
-  // Horizontal label anchored on its text baseline.
-  const addH = (
-    field: WardleyLabelField,
-    text: string,
-    fontSize: number,
-    ax: number,
-    baseline: number,
-    align: 'left' | 'right'
-  ) => {
-    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: WardleyLabelField,
-    text: string,
-    fontSize: number,
-    ax: number,
-    ay: number
-  ) => {
-    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: WardleyLabelHit[],
-  lx: number,
-  ly: number
-): WardleyLabelHit | null {
-  for (const hit of hits) {
-    if (lx >= hit.minX && lx <= hit.maxX && ly >= hit.minY && ly <= hit.maxY) {
-      return hit;
-    }
-  }
-  return null;
-}

package/src/legend.ts

@@ -1,438 +0,0 @@
-import { createGroupCommand } from '@formicoidea/labre-core/gfx/group';
-import {
-  ConnectorElementModel,
-  ConnectorMode,
-  FontFamily,
-  PointStyle,
-  ShapeElementModel,
-  ShapeStyle,
-  StrokeStyle,
-  type WardleyBackgroundElementModel,
-  WardleyNodeElementModel,
-} from '@formicoidea/labre-core/model';
-import { Bound } from '@formicoidea/labre-core/global/gfx';
-import type { BlockStdScope } from '@formicoidea/labre-core/std';
-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';
-
-/** Component kinds the legend can describe, in display order. */
-type LegendType =
-  | 'component'
-  | 'anchor'
-  | 'market'
-  | 'ecosystem'
-  | 'method'
-  | 'pipeline'
-  | 'link'
-  | 'arrow'
-  | 'inertia';
-
-const LEGEND_ORDER: LegendType[] = [
-  'component',
-  'anchor',
-  'market',
-  'ecosystem',
-  'method',
-  'pipeline',
-  'link',
-  'arrow',
-  'inertia',
-];
-
-/** Default (editable) descriptions for each legend row. */
-const LEGEND_DESC: Record<LegendType, string> = {
-  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',
-};
-
-type GradientVariant = Exclude<WardleyBackgroundElementModel['variant'], 'classic'>;
-
-/** Gradient-meaning block, keyed by variant (caption + 2-colour swatch). */
-const LEGEND_GRADIENT: Record<
-  GradientVariant,
-  { caption: string; swatch: [string, string] }
-> = {
-  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: BlockStdScope,
-  bg: WardleyBackgroundElementModel
-) {
-  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<LegendType>();
-  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: string,
-    x: number,
-    y: number,
-    w: number,
-    h: number,
-    fontSize: number,
-    align: 'left' | 'center' = '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: 'component' | 'anchor' | 'ecosystem' | 'method',
-    d: number,
-    fill: string,
-    sw: number,
-    cx: number,
-    cy: number
-  ) =>
-    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: LegendType, cx: number, cy: number): string[] => {
-    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: string[] = [];
-
-  // 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,
-  });
-}