@formicoidea/labre-framework-wardley 0.42.0 → 0.45.0

package/dist/svg-recognise-renderer.js

@@ -0,0 +1,385 @@
+import { svgFrameOf } from '@formicoidea/labre-core/blocks/surface';
+import { finiteAttr, startDrawnMap, textOf, } from './svg-read.js';
+import { WARDLEY_SVG_IMPORT_REMARKS } from './svg-remarks.js';
+/**
+ * A wardley-map-renderer SVG (labre-mcp's renderer), recognised (ADR 0032
+ * §4.2).
+ *
+ * Read against `src/render/*` of that renderer and the corpus files it
+ * rendered. Every layer is a `<g data-layer="…">` — `title`, `axes`,
+ * `pipelines`, `edges`, `evolvesTo`, `nodes`, `steps`, `accelerators`,
+ * `labels`, `notes`, `legend` — in BOTH modes; the interactive mode adds
+ * `data-id` / `data-kind` on one group per artefact. So the producer is
+ * certain from the `axes` and `nodes` layers alone, and the mode only decides
+ * how much is read by id rather than by geometry:
+ *
+ * - a node is one or more concentric shapes in the `nodes` layer: a plain
+ *   circle (a component), with a `clipPath` `anchor-clip-<id>` and a
+ *   silhouette (an anchor), a triangle `<polygon>` and three rings inside a
+ *   16-unit circle (a market), or a 30-unit grey disc (an ecosystem); a
+ *   method's aura is one more concentric circle. Interactive: one
+ *   `g[data-kind=component][data-id]` per node, whose `data-id` is its id;
+ *   static: no id at all, so the node is named by its index;
+ * - a name is a `<text>` of the `labels` layer: by `data-id` in interactive
+ *   mode, and in static mode by GEOMETRY — every label is matched to the
+ *   nearest node or pipeline handle, closest pairs first, because the
+ *   renderer orders labels by input and handles after components;
+ * - a dependency is a `<line>` of the `edges` layer, consumer end first; it
+ *   names no node in either mode (its `data-id` is the RELATION's), so both
+ *   ends are bound by geometry: each end within its node's own reach;
+ * - an evolution is a dashed line of the `evolvesTo` layer leaving a node,
+ *   and an inertia bar the 6-wide line across it; the renderer draws no twin,
+ *   so the twin takes the node's name;
+ * - a pipeline is a `<rect>` of the `pipelines` layer with its own handle
+ *   square in `nodes` and its own label: it stands alone, it does not hang
+ *   under a component;
+ * - the plot is the two axis lines: the x axis from `(left, bottom)` to
+ *   `(right, bottom)`, the y axis from `(left, bottom)` to `(left, top)`.
+ *
+ * The axes layer, the background rect and the renderer's own legend are
+ * chrome the native board redraws; `steps`, `accelerators`, flow labels and
+ * anything else are left to the sketch.
+ */
+const LAYER = (root, name) => root.querySelector(`g[data-layer="${name}"]`) ?? undefined;
+/** How far a dependency's end may sit from the centre of its node. */
+const END_REACH = 6;
+/** A circle's centre and radius in file units, or `undefined` when unreadable. */
+function circleOf(element) {
+    const [cx, cy, r] = ['cx', 'cy', 'r'].map(name => finiteAttr(element, name));
+    if (cx === undefined || cy === undefined || r === undefined)
+        return undefined;
+    const frame = svgFrameOf(element);
+    return {
+        element,
+        x: frame.ox + cx * frame.s,
+        y: frame.oy + cy * frame.s,
+        r: r * frame.s,
+    };
+}
+/** A line's two ends in file units. */
+function lineOf(element) {
+    const values = ['x1', 'y1', 'x2', 'y2'].map(name => finiteAttr(element, name));
+    if (values.some(value => value === undefined))
+        return undefined;
+    const frame = svgFrameOf(element);
+    const [x1, y1, x2, y2] = values;
+    return [
+        frame.ox + x1 * frame.s,
+        frame.oy + y1 * frame.s,
+        frame.ox + x2 * frame.s,
+        frame.oy + y2 * frame.s,
+    ];
+}
+/** A rect's box in file units. */
+function rectOf(element) {
+    const values = ['x', 'y', 'width', 'height'].map(name => finiteAttr(element, name));
+    if (values.some(value => value === undefined))
+        return undefined;
+    const frame = svgFrameOf(element);
+    const [x, y, w, h] = values;
+    return [
+        frame.ox + x * frame.s,
+        frame.oy + y * frame.s,
+        w * frame.s,
+        h * frame.s,
+    ];
+}
+const visible = (element) => !element.classList.contains('hit-area') &&
+    element.getAttribute('stroke') !== 'transparent';
+/** The plot off the two axis lines, or `undefined`. */
+function plotOf(axes) {
+    const lines = Array.from(axes.querySelectorAll('line'))
+        .map(lineOf)
+        .filter((line) => !!line);
+    const xAxis = lines
+        .filter(([, y1, , y2]) => Math.abs(y1 - y2) < 0.5)
+        .sort((a, b) => Math.abs(b[2] - b[0]) - Math.abs(a[2] - a[0]))[0];
+    if (!xAxis)
+        return undefined;
+    const [left, bottom, right] = xAxis;
+    const yAxis = lines.find(([x1, y1, x2, y2]) => Math.abs(x1 - left) < 0.5 &&
+        Math.abs(x2 - left) < 0.5 &&
+        Math.abs(y1 - bottom) < 0.5 &&
+        y2 < y1);
+    if (!yAxis || right <= left)
+        return undefined;
+    const top = yAxis[3];
+    return { x0: left, y0: top, width: right - left, height: bottom - top };
+}
+/**
+ * The nodes of the `nodes` layer: concentric shapes clustered under the
+ * largest circle that holds them, then named by what the cluster contains.
+ */
+function nodesOf(layer, live) {
+    const found = [];
+    const clusters = [];
+    const units = live
+        ? Array.from(layer.children).filter(child => child.getAttribute('data-kind') === 'component' &&
+            child.hasAttribute('data-id'))
+        : [layer];
+    for (const unit of units) {
+        const circles = Array.from(unit.children)
+            .filter(child => child.localName === 'circle')
+            .map(circleOf)
+            .filter((shape) => !!shape);
+        for (const circle of circles) {
+            const home = live
+                ? clusters.find(cluster => cluster.container === unit)
+                : clusters.find(cluster => cluster.shapes.some(shape => Math.hypot(shape.x - circle.x, shape.y - circle.y) <
+                    Math.max(shape.r, circle.r)));
+            if (home)
+                home.shapes.push(circle);
+            else
+                clusters.push({ shapes: [circle], container: unit });
+        }
+    }
+    const anchors = new Set(Array.from(layer.querySelectorAll('clipPath'))
+        .filter(clip => (clip.getAttribute('id') ?? '').startsWith('anchor-clip-'))
+        .map(clip => clip.querySelector('circle'))
+        .map(circle => (circle ? circleOf(circle) : undefined))
+        .filter((shape) => !!shape)
+        .map(shape => `${shape.x},${shape.y}`));
+    const polygons = Array.from(layer.querySelectorAll('polygon'));
+    clusters.forEach((cluster, index) => {
+        const outer = cluster.shapes.reduce((a, b) => (b.r > a.r ? b : a));
+        // The node's own circle: concentric with the outermost one.
+        const centre = cluster.shapes.find(shape => Math.hypot(shape.x - outer.x, shape.y - outer.y) < 0.5);
+        const market = polygons.some(polygon => {
+            const box = polygon.getAttribute('points') ?? '';
+            const xs = box.match(/-?[\d.]+/g)?.map(Number) ?? [];
+            const px = (xs[0] + xs[2] + xs[4]) / 3;
+            const py = (xs[1] + xs[3] + xs[5]) / 3;
+            return Math.hypot(px - outer.x, py - outer.y) < outer.r;
+        });
+        const kind = anchors.has(`${centre.x},${centre.y}`)
+            ? 'anchor'
+            : market && outer.r >= 12
+                ? 'market'
+                : outer.r >= 25
+                    ? 'ecosystem'
+                    : 'component';
+        const id = live
+            ? (cluster.container.getAttribute('data-id') ?? `node ${index + 1}`)
+            : `node ${index + 1}`;
+        found.push({
+            node: { id, kind, name: '', x: centre.x, y: centre.y },
+            group: live ? cluster.container : undefined,
+            r: Math.max(centre.r, END_REACH),
+        });
+    });
+    return found;
+}
+export function recogniseWardleyMapRenderer(root) {
+    const axes = LAYER(root, 'axes');
+    const nodesLayer = LAYER(root, 'nodes');
+    if (!axes || !nodesLayer)
+        return undefined;
+    const live = root.querySelector('[data-id][data-kind]') !== null;
+    const { drawn, consume } = startDrawnMap({
+        producer: live
+            ? 'wardley-map-renderer SVG (interactive)'
+            : 'wardley-map-renderer SVG',
+        plot: plotOf(axes),
+    });
+    /* Chrome: redrawn by the native board. */
+    consume(axes);
+    consume(LAYER(root, 'legend'));
+    const backdrop = Array.from(root.children).find(child => child.localName === 'rect' &&
+        (child.getAttribute('data-kind') === 'background' ||
+            root.firstElementChild === child));
+    consume(backdrop);
+    const titleLayer = LAYER(root, 'title');
+    const title = textOf(titleLayer?.querySelector('text') ?? undefined);
+    if (title.length > 0) {
+        drawn.title = title;
+        consume(titleLayer);
+    }
+    /* Nodes. */
+    const nodes = nodesOf(nodesLayer, live);
+    for (const { node } of nodes)
+        drawn.nodes.push(node);
+    // Every node is read, so the layer's own shapes are all consumed; a
+    // pipeline handle is consumed with its pipeline below.
+    for (const child of Array.from(nodesLayer.children)) {
+        const handle = child.getAttribute('data-part') === 'handle' ||
+            (child.localName === 'rect' &&
+                child.getAttribute('width') === child.getAttribute('height'));
+        if (!handle)
+            consume(child);
+    }
+    /* Pipelines: a rect, its handle square and its label. */
+    const handles = Array.from(nodesLayer.children).filter(child => child.getAttribute('data-part') === 'handle' ||
+        (child.localName === 'rect' &&
+            child.getAttribute('width') === child.getAttribute('height')));
+    const pipelineLayer = LAYER(root, 'pipelines');
+    const pipelines = [];
+    for (const unit of Array.from(pipelineLayer?.children ?? [])) {
+        const rect = unit.localName === 'rect'
+            ? unit
+            : (unit.querySelector('rect') ?? undefined);
+        const box = rect ? rectOf(rect) : undefined;
+        if (!box)
+            continue;
+        const id = unit.getAttribute('data-id') ?? `pipeline ${pipelines.length + 1}`;
+        const handle = handles
+            .map(candidate => {
+            const square = (candidate.localName === 'rect'
+                ? [candidate]
+                : Array.from(candidate.querySelectorAll('rect')).filter(visible))[0];
+            const at = square ? rectOf(square) : undefined;
+            return at
+                ? {
+                    element: candidate,
+                    x: at[0] + at[2] / 2,
+                    y: at[1] + at[3] / 2,
+                    id: candidate.getAttribute('data-id'),
+                }
+                : undefined;
+        })
+            .find(candidate => candidate &&
+            (candidate.id === id ||
+                (candidate.id === null &&
+                    candidate.x >= box[0] &&
+                    candidate.x <= box[0] + box[2] &&
+                    Math.abs(candidate.y - box[1]) < box[3])));
+        pipelines.push({
+            id,
+            box,
+            handle: handle ? { x: handle.x, y: handle.y } : undefined,
+        });
+        consume(unit);
+        consume(handle?.element);
+    }
+    /* Names: by id in interactive mode, by geometry otherwise. */
+    const labelLayer = LAYER(root, 'labels');
+    const labels = Array.from(labelLayer?.querySelectorAll('text') ?? []);
+    const names = new Map();
+    const targets = [
+        ...nodes.map(({ node }) => ({ id: node.id, x: node.x, y: node.y })),
+        ...pipelines.flatMap(pipeline => pipeline.handle ? [{ id: pipeline.id, ...pipeline.handle }] : []),
+    ];
+    if (live) {
+        for (const label of labels) {
+            const id = label.getAttribute('data-id');
+            if (id === null || names.has(id))
+                continue;
+            if (!targets.some(target => target.id === id))
+                continue;
+            names.set(id, textOf(label));
+            consume(label);
+        }
+    }
+    else {
+        // Closest pairs first: a label is placed beside its own node, and the
+        // collision avoidance that moves it only ever moves it a little.
+        const pairs = labels
+            .flatMap(label => {
+            const x = finiteAttr(label, 'x');
+            const y = finiteAttr(label, 'y');
+            if (x === undefined || y === undefined)
+                return [];
+            const frame = svgFrameOf(label);
+            const lx = frame.ox + x * frame.s;
+            const ly = frame.oy + y * frame.s;
+            return targets.map(target => ({
+                label,
+                target,
+                distance: Math.hypot(lx - target.x, ly - target.y),
+            }));
+        })
+            .sort((a, b) => a.distance - b.distance);
+        const used = new Set();
+        for (const { label, target, distance } of pairs) {
+            if (used.has(label) || names.has(target.id) || distance > 200)
+                continue;
+            used.add(label);
+            names.set(target.id, textOf(label));
+            consume(label);
+        }
+    }
+    for (const node of drawn.nodes)
+        node.name = names.get(node.id) ?? '';
+    for (const pipeline of pipelines) {
+        drawn.pipelines.push({
+            id: pipeline.id,
+            name: names.get(pipeline.id) ?? '',
+            top: pipeline.box[1],
+            x1: pipeline.box[0],
+            x2: pipeline.box[0] + pipeline.box[2],
+        });
+    }
+    /* Dependencies: both ends bound by geometry, in either mode. */
+    const nodeAt = (x, y) => nodes
+        .map(entry => ({
+        entry,
+        distance: Math.hypot(entry.node.x - x, entry.node.y - y),
+    }))
+        .filter(({ entry, distance }) => distance <= entry.r)
+        .sort((a, b) => a.distance - b.distance)[0]?.entry.node;
+    for (const unit of Array.from(LAYER(root, 'edges')?.children ?? [])) {
+        const line = unit.localName === 'line'
+            ? unit
+            : Array.from(unit.querySelectorAll('line')).find(visible);
+        const ends = line ? lineOf(line) : undefined;
+        if (!ends)
+            continue;
+        const from = nodeAt(ends[0], ends[1]);
+        const to = nodeAt(ends[2], ends[3]);
+        if (!from || !to || from === to) {
+            drawn.remarks.push({
+                kind: 'warning',
+                sourceId: unit.getAttribute('data-id') ?? undefined,
+                element: 'link',
+                message: WARDLEY_SVG_IMPORT_REMARKS.danglingLink[1],
+                messageKey: WARDLEY_SVG_IMPORT_REMARKS.danglingLink[0],
+            });
+            continue;
+        }
+        drawn.links.push({ from: from.id, to: to.id });
+        // The lines and nothing else: a flow label the relation carries has no
+        // native home, so it stays for the sketch.
+        for (const drawnLine of unit.localName === 'line'
+            ? [unit]
+            : Array.from(unit.querySelectorAll('line'))) {
+            consume(drawnLine);
+        }
+    }
+    /* Evolutions and inertia. */
+    const evolveLayer = LAYER(root, 'evolvesTo');
+    const evolveUnits = live
+        ? Array.from(evolveLayer?.children ?? [])
+        : evolveLayer
+            ? [evolveLayer]
+            : [];
+    for (const unit of evolveUnits) {
+        // In interactive mode the inertia bar is a sibling of the arrow's group,
+        // not a child of it, so a unit may be the line itself.
+        const lines = unit.localName === 'line'
+            ? [unit]
+            : Array.from(unit.querySelectorAll('line'));
+        for (const line of lines.filter(visible)) {
+            const ends = lineOf(line);
+            if (!ends)
+                continue;
+            const width = finiteAttr(line, 'stroke-width') ?? 1;
+            if (width >= 4) {
+                drawn.inertias.push({
+                    x: (ends[0] + ends[2]) / 2,
+                    y: (ends[1] + ends[3]) / 2,
+                });
+                consume(line);
+                continue;
+            }
+            const owner = nodeAt(ends[0], ends[1]);
+            if (!owner)
+                continue;
+            drawn.evolutions.push({ of: owner.id, name: owner.name, x: ends[2] });
+            consume(line);
+        }
+        // The hit areas, and the arrowheads that finish the arrows read above.
+        for (const rest of Array.from(unit.querySelectorAll('line.hit-area, polygon'))) {
+            consume(rest);
+        }
+    }
+    return drawn;
+}

package/dist/svg-recognise-shapes.d.ts

@@ -0,0 +1,2 @@
+import { type DrawnWardleyMap } from './svg-read.js';
+export declare function recogniseByShape(root: Element): DrawnWardleyMap | undefined;

package/dist/svg-recognise-shapes.js

@@ -0,0 +1,240 @@
+import { svgFrameOf } from '@formicoidea/labre-core/blocks/surface';
+import { finiteAttr, startDrawnMap, textOf, } from './svg-read.js';
+/**
+ * An SVG no producer marked, read by shape (ADR 0032 §4.4, §5) — the last
+ * step of detection, and the most cautious.
+ *
+ * **The plot first, or nothing.** Two straight lines meeting at their
+ * bottom-left — a horizontal one and a vertical one, each longer than half the
+ * drawing's extent — are the map's axes, and the rectangle they span is the
+ * plot. Without them nothing is promoted and this answers `undefined`: a plot
+ * guessed for a picture whose producer is unknown is the invented axis ADR
+ * 0012 forbids.
+ *
+ * **Then two things, and only two.** Inside the plot, a circle (radius 20 or
+ * less) with a `<text>` beside it — within four radii or 40 units, closest
+ * pairs first — is a component named by that text; a straight segment whose
+ * two ends sit on two such components is a dependency, its consumer the
+ * higher of the two (needs descend the value chain). Nothing else is promoted:
+ * no anchor, pipeline, inertia bar, evolve arrow or note is guessed from bare
+ * geometry, so a dashed red arrow, a thick bar or a rect stays a sketch.
+ *
+ * **Known failure modes.** A curved link is not straight and stays a sketch.
+ * A `matrix`, `scale` or `rotate` transform is ignored, as the sketch walk
+ * ignores it, so a map drawn under one is read where it would be without it.
+ * A name drawn far from its circle, or a circle with no name, leaves that
+ * circle a sketch; and one link to it then stays a sketch too.
+ */
+const MAX_NODE_RADIUS = 20;
+const NAME_REACH = 40;
+const END_SLACK = 3;
+/**
+ * A path that is ONE straight segment — `M` then a single `L`, `H` or `V`,
+ * absolute or relative, or the implicit line-to of a second coordinate pair —
+ * as its two ends in the path's own units; anything else is `undefined`.
+ */
+function straightPath(d) {
+    const commands = [...d.matchAll(/([MmLlHhVv])([^MmLlHhVvCcSsQqTtAaZz]*)/g)];
+    const rest = d.replace(/([MmLlHhVv])([^MmLlHhVvCcSsQqTtAaZz]*)/g, '').trim();
+    if (commands.length === 0 || rest.length > 0)
+        return undefined;
+    const points = [];
+    let x = 0;
+    let y = 0;
+    for (const [index, [, letter, raw]] of commands.entries()) {
+        const args = (raw.match(/-?(?:\d+\.?\d*|\.\d+)(?:[eE][-+]?\d+)?/g) ?? []).map(Number);
+        const relative = letter === letter.toLowerCase();
+        const kind = letter.toLowerCase();
+        // A second move-to starts a second subpath: not one segment.
+        if (kind === 'm' && index > 0)
+            return undefined;
+        if (kind === 'h' || kind === 'v') {
+            for (const value of args) {
+                if (kind === 'h')
+                    x = relative ? x + value : value;
+                else
+                    y = relative ? y + value : value;
+                points.push([x, y]);
+            }
+            continue;
+        }
+        for (let at = 0; at + 1 < args.length; at += 2) {
+            // A leading `m` is absolute (SVG 1.1 §8.3.2); every other relative pair
+            // — an `l`, or the implicit line-to after an `m` — is an offset.
+            const offset = relative && !(kind === 'm' && points.length === 0);
+            x = offset ? x + args[at] : args[at];
+            y = offset ? y + args[at + 1] : args[at + 1];
+            points.push([x, y]);
+        }
+    }
+    if (points.length !== 2)
+        return undefined;
+    if (!points.flat().every(Number.isFinite))
+        return undefined;
+    return [points[0][0], points[0][1], points[1][0], points[1][1]];
+}
+function segmentsOf(root) {
+    const found = [];
+    for (const element of Array.from(root.querySelectorAll('line, polyline, path'))) {
+        let ends;
+        if (element.localName === 'line') {
+            const values = ['x1', 'y1', 'x2', 'y2'].map(name => finiteAttr(element, name));
+            if (values.every(value => value !== undefined)) {
+                ends = values;
+            }
+        }
+        else if (element.localName === 'polyline') {
+            const values = (element.getAttribute('points') ?? '')
+                .match(/-?(?:\d+\.?\d*|\.\d+)(?:[eE][-+]?\d+)?/g)
+                ?.map(Number);
+            if (values?.length === 4)
+                ends = values;
+        }
+        else {
+            ends = straightPath(element.getAttribute('d') ?? '');
+        }
+        if (!ends)
+            continue;
+        const frame = svgFrameOf(element);
+        found.push({
+            element,
+            x1: frame.ox + ends[0] * frame.s,
+            y1: frame.oy + ends[1] * frame.s,
+            x2: frame.ox + ends[2] * frame.s,
+            y2: frame.oy + ends[3] * frame.s,
+        });
+    }
+    return found;
+}
+/** The two axes meeting bottom-left, and the plot they span — or nothing. */
+function axesOf(segments, extent) {
+    const slack = Math.max(2, 0.02 * Math.max(extent.w, extent.h));
+    const horizontals = segments
+        .filter(s => Math.abs(s.y1 - s.y2) < 1)
+        .filter(s => Math.abs(s.x2 - s.x1) > extent.w / 2)
+        .sort((a, b) => Math.abs(b.x2 - b.x1) - Math.abs(a.x2 - a.x1));
+    const verticals = segments
+        .filter(s => Math.abs(s.x1 - s.x2) < 1)
+        .filter(s => Math.abs(s.y2 - s.y1) > extent.h / 2);
+    for (const h of horizontals) {
+        const left = Math.min(h.x1, h.x2);
+        const right = Math.max(h.x1, h.x2);
+        const bottom = h.y1;
+        const v = verticals.find(candidate => Math.abs(candidate.x1 - left) <= slack &&
+            Math.abs(Math.max(candidate.y1, candidate.y2) - bottom) <= slack);
+        if (!v)
+            continue;
+        const top = Math.min(v.y1, v.y2);
+        if (right - left <= 0 || bottom - top <= 0)
+            continue;
+        return {
+            plot: { x0: left, y0: top, width: right - left, height: bottom - top },
+            axes: [h, v],
+        };
+    }
+    return undefined;
+}
+export function recogniseByShape(root) {
+    const segments = segmentsOf(root);
+    const circles = Array.from(root.querySelectorAll('circle')).flatMap(element => {
+        const [cx, cy, r] = ['cx', 'cy', 'r'].map(name => finiteAttr(element, name));
+        if (cx === undefined || cy === undefined || r === undefined)
+            return [];
+        const frame = svgFrameOf(element);
+        return [
+            {
+                element,
+                x: frame.ox + cx * frame.s,
+                y: frame.oy + cy * frame.s,
+                r: r * frame.s,
+            },
+        ];
+    });
+    const texts = Array.from(root.querySelectorAll('text')).flatMap(element => {
+        const span = element.querySelector('tspan');
+        const x = finiteAttr(element, 'x') ?? (span ? finiteAttr(span, 'x') : undefined);
+        const y = finiteAttr(element, 'y') ?? (span ? finiteAttr(span, 'y') : undefined);
+        const name = textOf(element);
+        if (x === undefined || y === undefined || name.length === 0)
+            return [];
+        const frame = svgFrameOf(element);
+        return [
+            { element, x: frame.ox + x * frame.s, y: frame.oy + y * frame.s, name },
+        ];
+    });
+    const xs = [
+        ...segments.flatMap(s => [s.x1, s.x2]),
+        ...circles.map(c => c.x),
+        ...texts.map(t => t.x),
+    ];
+    const ys = [
+        ...segments.flatMap(s => [s.y1, s.y2]),
+        ...circles.map(c => c.y),
+        ...texts.map(t => t.y),
+    ];
+    if (xs.length === 0)
+        return undefined;
+    const extent = {
+        w: Math.max(...xs) - Math.min(...xs),
+        h: Math.max(...ys) - Math.min(...ys),
+    };
+    const found = axesOf(segments, extent);
+    if (!found)
+        return undefined;
+    const { plot, axes } = found;
+    const { drawn, consume } = startDrawnMap({
+        producer: 'SVG (recognised by shape)',
+        plot,
+    });
+    for (const axis of axes)
+        consume(axis.element);
+    /* Components: a small circle inside the plot, named by the text beside it. */
+    const inside = circles.filter(c => c.r <= MAX_NODE_RADIUS &&
+        c.x > plot.x0 &&
+        c.x < plot.x0 + plot.width &&
+        c.y > plot.y0 &&
+        c.y < plot.y0 + plot.height);
+    const pairs = inside
+        .flatMap(circle => texts.map(text => ({
+        circle,
+        text,
+        distance: Math.hypot(text.x - circle.x, text.y - circle.y),
+    })))
+        .filter(({ circle, distance }) => distance <= Math.max(4 * circle.r, NAME_REACH))
+        .sort((a, b) => a.distance - b.distance);
+    const named = new Map();
+    const reach = new Map();
+    const usedTexts = new Set();
+    for (const { circle, text } of pairs) {
+        if (named.has(circle.element) || usedTexts.has(text.element))
+            continue;
+        usedTexts.add(text.element);
+        const node = {
+            id: `shape ${named.size + 1}`,
+            kind: 'component',
+            name: text.name,
+            x: circle.x,
+            y: circle.y,
+        };
+        named.set(circle.element, node);
+        reach.set(node, circle.r + END_SLACK);
+        drawn.nodes.push(node);
+        drawn.consumed.add(circle.element);
+        drawn.consumed.add(text.element);
+    }
+    /* Dependencies: a straight segment from one component to another. */
+    const nodeAt = (x, y) => drawn.nodes.find(node => Math.hypot(node.x - x, node.y - y) <= (reach.get(node) ?? 0));
+    for (const segment of segments) {
+        if (axes.includes(segment))
+            continue;
+        const a = nodeAt(segment.x1, segment.y1);
+        const b = nodeAt(segment.x2, segment.y2);
+        if (!a || !b || a === b)
+            continue;
+        // The consumer is the higher one: needs descend the value chain.
+        const [from, to] = a.y <= b.y ? [a, b] : [b, a];
+        drawn.links.push({ from: from.id, to: to.id });
+        drawn.consumed.add(segment.element);
+    }
+    return drawn;
+}

package/dist/svg-remarks.d.ts

@@ -0,0 +1,16 @@
+/**
+ * The Wardley SVG import's own remarks, as `[key, English]` pairs (ADR 0032
+ * §3) — the same shape, and the same reason, as `WARDLEY_OWM_IMPORT_REMARKS`:
+ * a reader is a pure function with no `std`, so it hands the key over and
+ * `reportInterchangeImport` resolves it. `{{count}}` is filled from
+ * `messageParams`; plural wording stays neutral, the host pluralises.
+ *
+ * Contributed to the manifest by `./translations.ts`.
+ */
+export declare const WARDLEY_SVG_IMPORT_REMARKS: {
+    readonly sketchedRemainder: readonly ["com.labre.wardley.import.svg.remark.sketched-remainder", "{{count}} shape(s) were not recognised as Wardley and arrive as a sketch."];
+    readonly inventedPlot: readonly ["com.labre.wardley.import.svg.remark.invented-plot", "the file draws no plot this reader could find, so evolution and visibility were ESTIMATED from the extent of the drawing, not read."];
+    readonly danglingLink: readonly ["com.labre.wardley.import.svg.remark.dangling-link", "a link in this file names an artefact the drawing does not hold, so it arrives as a sketch rather than as a dependency."];
+    readonly noAxes: readonly ["com.labre.wardley.import.svg.remark.no-axes", "No map axes were found and no known producer marked this file, so nothing was recognised as a Wardley map: it arrives as a sketch."];
+    readonly unreadableCoordinates: readonly ["com.labre.wardley.import.svg.remark.unreadable-coordinates", "its position in the file is not a pair of numbers this reader can trust, so it arrives as a sketch."];
+};

package/dist/svg-remarks.js

@@ -0,0 +1,31 @@
+/**
+ * The Wardley SVG import's own remarks, as `[key, English]` pairs (ADR 0032
+ * §3) — the same shape, and the same reason, as `WARDLEY_OWM_IMPORT_REMARKS`:
+ * a reader is a pure function with no `std`, so it hands the key over and
+ * `reportInterchangeImport` resolves it. `{{count}}` is filled from
+ * `messageParams`; plural wording stays neutral, the host pluralises.
+ *
+ * Contributed to the manifest by `./translations.ts`.
+ */
+export const WARDLEY_SVG_IMPORT_REMARKS = {
+    sketchedRemainder: [
+        'com.labre.wardley.import.svg.remark.sketched-remainder',
+        '{{count}} shape(s) were not recognised as Wardley and arrive as a sketch.',
+    ],
+    inventedPlot: [
+        'com.labre.wardley.import.svg.remark.invented-plot',
+        'the file draws no plot this reader could find, so evolution and visibility were ESTIMATED from the extent of the drawing, not read.',
+    ],
+    danglingLink: [
+        'com.labre.wardley.import.svg.remark.dangling-link',
+        'a link in this file names an artefact the drawing does not hold, so it arrives as a sketch rather than as a dependency.',
+    ],
+    noAxes: [
+        'com.labre.wardley.import.svg.remark.no-axes',
+        'No map axes were found and no known producer marked this file, so nothing was recognised as a Wardley map: it arrives as a sketch.',
+    ],
+    unreadableCoordinates: [
+        'com.labre.wardley.import.svg.remark.unreadable-coordinates',
+        'its position in the file is not a pair of numbers this reader can trust, so it arrives as a sketch.',
+    ],
+};