@formicoidea/labre-framework-wardley 0.23.0

package/src/label-layout.ts

@@ -0,0 +1,126 @@
+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

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

package/src/node/consts.ts

@@ -0,0 +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';