@formicoidea/labre-framework-wardley 0.60.0 → 1.0.0

package/dist/renderer-json-export.js

@@ -0,0 +1,669 @@
+import { Bound } from '@formicoidea/labre-core/global/gfx';
+import { WARDLEY_BACKGROUND } from './background.js';
+import { matchLabels, owmDefaultPlot, owmPlotOf } from './export.js';
+import { wardleyMethodParts } from './method.js';
+import { WARDLEY_METHOD_TAG_ID, WARDLEY_NATURE_TAG_ID } from './natures.js';
+import { HANDLE_SIZE, PIPELINE_HEIGHT } from './node/consts.js';
+import { wardleyLabelBoxFor, WARDLEY_NODE_SIZE, wardleyNodeProps, } from './presets.js';
+import { descriptionSlot, EVOLVE_TYPES, isDefaultLabelOffset, isRangeShape, jsonDecoratorCentre, jsonLabelOffset, jsonLabelUnshift, jsonStepCentre, LABRE_NATURES, relationOf, rendererColourName, rendererCoordsOf, round3, sameColour, } from './renderer-json.js';
+import { WARDLEY_ROLE } from './roles.js';
+/** How far a piece may sit from its slot and still belong to the node. */
+const SLOT_TOLERANCE = 24;
+/** How far an inertia bar may sit off an evolution arrow and still be on it. */
+const ARROW_TOLERANCE = 12;
+/** How far above or under the map a title or a context may sit. */
+const MARGIN_REACH = 120;
+const COMPONENT_KINDS = [
+    'anchor',
+    'component',
+    'method',
+    'market',
+    'ecosystem',
+];
+export function exportWardleyRendererJson(input, options = {}) {
+    const elements = input;
+    const warnings = [];
+    /* ── The map ──────────────────────────────────────────────────────── */
+    const maps = elements.filter(e => e.type === WARDLEY_BACKGROUND.type);
+    const map = maps[0];
+    if (maps.length > 1) {
+        warnings.push(`This board holds ${maps.length} Wardley maps and a renderer map is one. Everything was measured against the first map in the document.`);
+    }
+    if (!map) {
+        warnings.push('No Wardley map background was found, so coordinates were read against a default map at the origin.');
+    }
+    const plot = map ? owmPlotOf(boxOf(map)) : owmDefaultPlot();
+    /* ── What is on the board ─────────────────────────────────────────── */
+    const nodes = elements.filter(e => e.type === 'wardleyNode' && e.role !== undefined);
+    const nodeById = new Map(nodes.map(node => [node.id, node]));
+    const labels = elements.filter(e => e.type === 'text' && e.role === WARDLEY_ROLE.label);
+    const plainTexts = elements.filter(e => e.type === 'text' && e.role === undefined);
+    const plainShapes = elements.filter(e => e.type === 'shape' && e.role === undefined);
+    const connectors = elements.filter(e => e.type === 'connector');
+    const bars = elements.filter(e => e.role === WARDLEY_ROLE.inertia);
+    const groups = elements.filter(e => e.type === 'group');
+    const byId = new Map(elements.map(e => [e.id, e]));
+    const written = nodes.filter(n => COMPONENT_KINDS.includes(n.kind ?? '') || n.kind === 'pipeline');
+    const pipelines = written.filter(n => n.kind === 'pipeline');
+    const climate = nodes.filter(n => n.kind === 'accelerator' || n.kind === 'decelerator');
+    const handles = nodes.filter(n => n.kind === 'handle');
+    const claimed = new Set();
+    /* ── Title and context: the plain texts just above and under the map ─ */
+    let title;
+    let mapContext;
+    if (map) {
+        const box = boxOf(map);
+        const beside = (text) => {
+            const b = boxOf(text);
+            return b.x < box.x + box.w && b.x + b.w > box.x;
+        };
+        const above = nearest(plainTexts.filter(t => beside(t) && boxOf(t).y + boxOf(t).h <= box.y + 1), t => box.y - (boxOf(t).y + boxOf(t).h));
+        if (above && above.distance <= MARGIN_REACH) {
+            title = textOf(above.item);
+            claimed.add(above.item);
+        }
+        const under = nearest(plainTexts.filter(t => beside(t) && boxOf(t).y >= box.y + box.h - 1), t => boxOf(t).y - (box.y + box.h));
+        if (under && under.distance <= MARGIN_REACH) {
+            mapContext = textOf(under.item);
+            claimed.add(under.item);
+        }
+    }
+    /* ── The pipeline a handle sits on: astride its body's top edge ───── */
+    const ownerOfHandle = new Map();
+    const handleOf = new Map();
+    for (const handle of handles) {
+        const h = centreOf(boxOf(handle));
+        const body = pipelines.find(p => {
+            const b = boxOf(p);
+            return (h.x >= b.x - 1 &&
+                h.x <= b.x + b.w + 1 &&
+                Math.abs(h.y - b.y) <= HANDLE_SIZE / 2 + 1);
+        });
+        if (body && !handleOf.has(body.id)) {
+            ownerOfHandle.set(handle.id, body);
+            handleOf.set(body.id, handle);
+        }
+    }
+    /* ── A component's own pieces: its group first ────────────────────── */
+    const parentOf = new Map();
+    for (const group of groups) {
+        for (const child of childIdsOf(group)) {
+            if (!parentOf.has(child))
+                parentOf.set(child, group);
+        }
+    }
+    /** Everything in the node's group, when that group is the node's own. */
+    const ownGroup = (node) => {
+        const group = parentOf.get(node.id);
+        if (!group)
+            return [];
+        const members = [];
+        const walk = (g) => {
+            for (const id of childIdsOf(g)) {
+                const child = byId.get(id);
+                if (!child)
+                    continue;
+                if (child.type === 'group')
+                    walk(child);
+                else
+                    members.push(child);
+            }
+        };
+        walk(group);
+        // A group a user made around several components is not one component's.
+        const artefacts = members.filter(m => m.type === 'wardleyNode' && m.role !== undefined && m.kind !== 'handle');
+        return artefacts.length === 1 ? members : [];
+    };
+    const piecesOf = new Map();
+    for (const node of [...written, ...climate]) {
+        const pieces = {};
+        for (const member of ownGroup(node)) {
+            if (member === node || claimed.has(member))
+                continue;
+            if (member.type === 'text' && member.role === WARDLEY_ROLE.label) {
+                pieces.label ??= member;
+            }
+            else if (member.type === 'text' && member.role === undefined) {
+                pieces.description ??= member;
+            }
+            else if (isStep(member)) {
+                pieces.step ??= member;
+            }
+            else if (isRange(member)) {
+                pieces.range ??= member;
+            }
+            else
+                continue;
+            claimed.add(member);
+        }
+        piecesOf.set(node.id, pieces);
+    }
+    /* ── Names left ungrouped: by place ───────────────────────────────── */
+    for (const pipeline of pipelines) {
+        const pieces = piecesOf.get(pipeline.id);
+        if (pieces.label)
+            continue;
+        const slot = pipelineLabelSlot(pipeline, handleOf.get(pipeline.id));
+        const found = nearest(labels.filter(l => !claimed.has(l)), l => Math.hypot(boxOf(l).x - slot.x, boxOf(l).y - slot.y));
+        if (found && found.distance <= SLOT_TOLERANCE) {
+            pieces.label = found.item;
+            claimed.add(found.item);
+        }
+    }
+    const unnamedNodes = [...written, ...climate].filter(n => n.kind !== 'pipeline' && !piecesOf.get(n.id)?.label);
+    const freeLabels = labels.filter(l => !claimed.has(l));
+    const matched = matchLabels(unnamedNodes.map(node => ({
+        id: node.id,
+        kind: node.kind ?? '',
+        role: node.role,
+        elementBound: boxOf(node),
+    })), 
+    // The matcher answers with each label's text; handing it the label's id
+    // as its text gets the element back.
+    freeLabels.map(label => ({ text: label.id, elementBound: boxOf(label) })));
+    for (const [nodeId, labelId] of matched) {
+        const label = byId.get(labelId);
+        if (!label)
+            continue;
+        piecesOf.get(nodeId).label = label;
+        claimed.add(label);
+    }
+    /* ── The other pieces left ungrouped: by place ────────────────────── */
+    for (const node of written) {
+        if (node.kind === 'pipeline')
+            continue;
+        const pieces = piecesOf.get(node.id);
+        const c = centreOf(boxOf(node));
+        const kind = node.kind;
+        if (!pieces.description && pieces.label) {
+            const slot = descriptionSlot(boxOf(pieces.label));
+            const found = nearest(plainTexts.filter(t => !claimed.has(t)), t => Math.hypot(boxOf(t).x - slot.x, boxOf(t).y - slot.y));
+            if (found && found.distance <= SLOT_TOLERANCE / 2) {
+                pieces.description = found.item;
+                claimed.add(found.item);
+            }
+        }
+        if (!pieces.step) {
+            const slot = jsonStepCentre(kind, c.x, c.y);
+            const found = nearest(plainShapes.filter(s => !claimed.has(s) && isStep(s)), s => distanceTo(centreOf(boxOf(s)), slot));
+            if (found && found.distance <= SLOT_TOLERANCE / 2) {
+                pieces.step = found.item;
+                claimed.add(found.item);
+            }
+        }
+        if (!pieces.range) {
+            const found = plainShapes.find(s => {
+                if (claimed.has(s) || !isRange(s))
+                    return false;
+                const b = boxOf(s);
+                return (Math.abs(b.y + b.h / 2 - c.y) <= 2 && b.x <= c.x && c.x <= b.x + b.w);
+            });
+            if (found) {
+                pieces.range = found;
+                claimed.add(found);
+            }
+        }
+    }
+    /* ── Ids: Labre's, minted from the names ──────────────────────────── */
+    const nameOf = (node) => {
+        const label = piecesOf.get(node.id)?.label;
+        return label ? textOf(label) : '';
+    };
+    const used = new Set();
+    const idOf = new Map();
+    for (const node of written) {
+        const stem = slug(nameOf(node)) || node.id;
+        let id = stem;
+        for (let n = 2; used.has(id); n += 1)
+            id = `${stem}-${n}`;
+        used.add(id);
+        idOf.set(node.id, id);
+    }
+    /** The component an edge end names: a node, or the pipeline of a handle. */
+    const componentAt = (end) => {
+        const node = end?.id === undefined ? undefined : nodeById.get(end.id);
+        if (!node)
+            return undefined;
+        if (node.kind === 'handle')
+            return ownerOfHandle.get(node.id);
+        return idOf.has(node.id) ? node : undefined;
+    };
+    const arrows = [];
+    let looseArrows = 0;
+    for (const connector of connectors) {
+        if (connector.role !== WARDLEY_ROLE.changeArrow)
+            continue;
+        const from = componentAt(connector.source);
+        const sourceNode = connector.source?.id === undefined
+            ? undefined
+            : nodeById.get(connector.source.id);
+        const end = pointOf(connector.target, nodeById);
+        if (!from || !sourceNode || !end) {
+            looseArrows += 1;
+            continue;
+        }
+        const label = textOf(connector).trim().toLowerCase();
+        const evolveType = EVOLVE_TYPES.find(type => type === label);
+        arrows.push({
+            from,
+            start: centreOf(boxOf(sourceNode)),
+            end,
+            ...(evolveType === undefined ? {} : { evolveType }),
+            inertia: false,
+        });
+    }
+    /* ── Decorators: which slot each one is in ────────────────────────── */
+    const decorated = new Map();
+    let looseClimate = 0;
+    for (const arrow of climate) {
+        const which = arrow.kind;
+        const at = centreOf(boxOf(arrow));
+        const owner = nearest(written.filter(n => n.kind !== 'pipeline'), node => {
+            const c = centreOf(boxOf(node));
+            const slot = jsonDecoratorCentre(node.kind, which, c.x, c.y);
+            return distanceTo(at, slot);
+        });
+        if (owner && owner.distance <= SLOT_TOLERANCE) {
+            const set = decorated.get(owner.item.id) ?? new Set();
+            set.add(which === 'accelerator' ? 'accelerator' : 'deaccelerator');
+            decorated.set(owner.item.id, set);
+        }
+        else
+            looseClimate += 1;
+    }
+    let looseBars = 0;
+    for (const bar of bars) {
+        const at = centreOf(boxOf(bar));
+        const onArrow = nearest(arrows, arrow => segmentDistance(at, arrow.start, arrow.end));
+        if (onArrow && onArrow.distance <= ARROW_TOLERANCE) {
+            onArrow.item.inertia = true;
+        }
+        else
+            looseBars += 1;
+    }
+    /* ── Components ───────────────────────────────────────────────────── */
+    let clamped = 0;
+    const clamp = (value) => {
+        const bounded = Math.min(1, Math.max(0, value));
+        if (round3(bounded) !== round3(value))
+            clamped += 1;
+        return round3(bounded);
+    };
+    const coords = (x, y) => {
+        const { evolution, visibility } = rendererCoordsOf(plot, x, y);
+        return { evolution: clamp(evolution), visibility: clamp(visibility) };
+    };
+    const unnamed = [];
+    const unqualified = [];
+    const components = written.map(node => {
+        const id = idOf.get(node.id);
+        const pieces = piecesOf.get(node.id);
+        const name = nameOf(node);
+        if (name.length === 0)
+            unnamed.push(id);
+        const box = boxOf(node);
+        const centre = centreOf(box);
+        const at = coords(centre.x, centre.y);
+        const kind = node.kind ?? 'component';
+        const out = { id, label: { name } };
+        /*
+         * The name's offset, when it is not where the toolbar puts it. In the
+         * pixels of the renderer's DEFAULT canvas: the file written declares none,
+         * so that is the canvas it is drawn on, and the name lands where it is
+         * here, relative to the plot.
+         */
+        if (pieces.label) {
+            const offset = kind === 'pipeline'
+                ? pipelineLabelOffset(plot, node, handleOf.get(node.id), pieces.label)
+                : jsonLabelOffset(plot, WARDLEY_NODE_SIZE[kind].w, centre.x, centre.y, boxOf(pieces.label), pieces.label.textAlign);
+            if (!isDefaultLabelOffset(offset)) {
+                out.label.position = offset;
+            }
+        }
+        /* Type, subtype, nature. */
+        const nature = natureOf(node);
+        if (kind === 'anchor')
+            out.type = 'anchor';
+        else if (kind === 'pipeline')
+            out.type = 'pipeline';
+        else
+            out.type = 'component';
+        if (kind === 'market' || kind === 'ecosystem')
+            out.subtype = kind;
+        if (nature !== undefined) {
+            // The renderer accepts these four natures on a `functional` component
+            // only, so the subtype is written with them.
+            if (kind === 'component' || kind === 'method') {
+                out.subtype = 'functional';
+                out.nature = nature;
+            }
+            else
+                unqualified.push(id);
+        }
+        out.position = {
+            evolution: { scalar: at.evolution },
+            visibility: { scalar: at.visibility },
+        };
+        if (pieces.range) {
+            const r = boxOf(pieces.range);
+            out.position.evolution = {
+                scalar: at.evolution,
+                range: [coords(r.x, r.y).evolution, coords(r.x + r.w, r.y).evolution],
+            };
+        }
+        if (pieces.description) {
+            const text = textOf(pieces.description);
+            if (text.trim())
+                out.description = text;
+        }
+        const evolutions = arrows
+            .filter(arrow => arrow.from === node)
+            .map(arrow => {
+            const target = coords(arrow.end.x, arrow.end.y);
+            return {
+                position: {
+                    evolution: { scalar: target.evolution },
+                    visibility: { scalar: target.visibility },
+                },
+                ...(arrow.evolveType === undefined
+                    ? {}
+                    : { evolveType: arrow.evolveType }),
+                ...(arrow.inertia ? { inertia: true } : {}),
+            };
+        });
+        if (evolutions.length > 0)
+            out.evolvesTo = evolutions;
+        if (kind === 'pipeline') {
+            const topLeft = coords(box.x, box.y);
+            const bottomRight = coords(box.x + box.w, box.y + box.h);
+            const handle = handleOf.get(node.id);
+            const handleEvolution = handle
+                ? coords(centreOf(boxOf(handle)).x, box.y).evolution
+                : undefined;
+            const middle = round3((topLeft.evolution + bottomRight.evolution) / 2);
+            out.pipelineGeometry = {
+                evoStart: topLeft.evolution,
+                evoEnd: bottomRight.evolution,
+                visStart: topLeft.visibility,
+                visEnd: bottomRight.visibility,
+                ...(handleEvolution !== undefined && handleEvolution !== middle
+                    ? { handleEvolution }
+                    : {}),
+            };
+        }
+        if (kind === 'method') {
+            out.method = methodOf(node);
+        }
+        else {
+            const colour = colourOf(node);
+            if (colour !== undefined)
+                out.color = colour;
+        }
+        for (const flag of decorated.get(node.id) ?? [])
+            out[flag] = true;
+        if (pieces.step) {
+            const number = Number.parseInt(textOf(pieces.step), 10);
+            const fill = pieces.step.fillColor;
+            out.step = {
+                number,
+                ...(typeof fill === 'string' && !sameColour(fill, '#cc0000')
+                    ? { color: rendererColourName(fill) }
+                    : {}),
+            };
+        }
+        return out;
+    });
+    /* ── Relations ────────────────────────────────────────────────────── */
+    let looseLinks = 0;
+    const relations = [];
+    for (const connector of connectors) {
+        if (connector.role !== WARDLEY_ROLE.dependency)
+            continue;
+        const consumer = componentAt(connector.source);
+        const supplier = componentAt(connector.target);
+        if (!consumer || !supplier) {
+            looseLinks += 1;
+            continue;
+        }
+        const { type, style } = relationOf(connector);
+        const label = textOf(connector).trim();
+        relations.push({
+            id: `r${relations.length + 1}`,
+            consumer: idOf.get(consumer.id),
+            supplier: idOf.get(supplier.id),
+            type,
+            // The renderer's `flow` needs a label, so a style alone is not written.
+            ...(label.length > 0
+                ? { flow: { label, ...(style === undefined ? {} : { style }) } }
+                : {}),
+        });
+    }
+    /* ── The document ─────────────────────────────────────────────────── */
+    const renderConfig = map ? renderConfigOf(map) : undefined;
+    const document = {
+        title: title ?? options.name?.trim() ?? '',
+        ...(mapContext === undefined ? {} : { context: mapContext }),
+        components,
+        relations,
+        ...(renderConfig === undefined ? {} : { renderConfig }),
+    };
+    /* ── What the format could not say ───────────────────────────────── */
+    const count = (n, one, many) => `${n} ${n === 1 ? one : many}`;
+    if (unnamed.length > 0) {
+        warnings.push(`${count(unnamed.length, 'component has', 'components have')} no name on the map and ${unnamed.length === 1 ? 'was' : 'were'} written with an empty one: ${unnamed.slice(0, 5).join(', ')}.`);
+    }
+    if (unqualified.length > 0) {
+        warnings.push(`The renderer gives a nature to a plain component only, so the nature of ${unqualified.slice(0, 5).join(', ')} was not written.`);
+    }
+    if (clamped > 0) {
+        warnings.push(`${count(clamped, 'coordinate falls', 'coordinates fall')} outside the map's plot and ${clamped === 1 ? 'was' : 'were'} written at its edge: the renderer reads 0…1 only.`);
+    }
+    for (const [kind, what] of [
+        ['porter', "Porter's forces glyph"],
+        ['area', 'area'],
+    ]) {
+        const n = nodes.filter(node => node.kind === kind).length;
+        if (n > 0) {
+            warnings.push(`${count(n, what, `${what}s`)} could not be written: the renderer JSON has no word for ${n === 1 ? 'it' : 'them'}.`);
+        }
+    }
+    const strays = map
+        ? [...plainTexts, ...plainShapes].filter(e => !claimed.has(e) && inside(centreOf(boxOf(e)), boxOf(map))).length
+        : 0;
+    if (strays > 0) {
+        warnings.push(`${count(strays, 'free text or shape', 'free texts or shapes')} on the map belong to no component, so ${strays === 1 ? 'it was' : 'they were'} not written.`);
+    }
+    if (looseLinks > 0) {
+        warnings.push(`${count(looseLinks, 'link has an end', 'links have ends')} that is loose or not on a component, so ${looseLinks === 1 ? 'it was' : 'they were'} left out.`);
+    }
+    if (looseArrows > 0) {
+        warnings.push(`${count(looseArrows, 'evolution arrow does', 'evolution arrows do')} not leave a component, so ${looseArrows === 1 ? 'it was' : 'they were'} left out.`);
+    }
+    if (looseClimate > 0) {
+        warnings.push(`${count(looseClimate, 'accelerator or decelerator sits', 'accelerators or decelerators sit')} beside no component, and the renderer draws one only on a component, so ${looseClimate === 1 ? 'it was' : 'they were'} left out.`);
+    }
+    if (looseBars > 0) {
+        warnings.push(`${count(looseBars, 'inertia bar sits', 'inertia bars sit')} on no evolution arrow, so ${looseBars === 1 ? 'it was' : 'they were'} left out.`);
+    }
+    const text = JSON.stringify(document, null, 2) + '\n';
+    return { text, warnings };
+}
+/* ── What the map says of itself ──────────────────────────────────────── */
+/** The map's own labels and toggles, as the `renderConfig` that sets them. */
+function renderConfigOf(map) {
+    const display = {};
+    if (map.showXAxis === false)
+        display.axisEvolution = false;
+    if (map.showYAxis === false)
+        display.axisValueChain = false;
+    if (map.showColumnDividers === false && map.showColumnLabels === false) {
+        display.phases = false;
+    }
+    const background = {};
+    const axis = (text) => typeof text === 'string' ? { default: { label: { text } } } : undefined;
+    const x = axis(map.xAxisTitle);
+    const y = axis(map.yAxisTitle);
+    if (x)
+        background.axisEvolution = x;
+    if (y)
+        background.axisValueChain = y;
+    const phases = [0, 1, 2, 3].map(index => map[`phase${index}`]);
+    let last = -1;
+    phases.forEach((text, index) => {
+        if (typeof text === 'string')
+            last = index;
+    });
+    if (last >= 0) {
+        background.phases = {
+            default: {
+                labels: phases
+                    .slice(0, last + 1)
+                    .map(text => (typeof text === 'string' ? { text } : {})),
+            },
+        };
+    }
+    const config = {};
+    if (Object.keys(display).length > 0)
+        config.display = display;
+    if (Object.keys(background).length > 0)
+        config.style = { background };
+    return Object.keys(config).length > 0 ? config : undefined;
+}
+/* ── A node's parameters ──────────────────────────────────────────────── */
+/** The values a node carries for one tag, from a live `Y.Map` or stored props. */
+function tagValues(node, tagId) {
+    const tags = node.tags;
+    if (!tags)
+        return [];
+    const values = typeof tags.get === 'function' ? tags.get(tagId) : tags[tagId];
+    return Array.isArray(values) ? values : [];
+}
+/** The `wardley:nature` value a node carries, if it is one of the four. */
+function natureOf(node) {
+    const values = tagValues(node, WARDLEY_NATURE_TAG_ID);
+    const prefix = `${WARDLEY_NATURE_TAG_ID}/`;
+    return LABRE_NATURES.find(nature => values.includes(`${prefix}${nature}`));
+}
+/**
+ * A method node's `wardley:method` tag as the renderer's pair (ADR 0046), the
+ * recommendation spelled as the renderer's legend keys are (`Uncharted`). An
+ * untagged node, which paints as Make, says there IS a method but not which:
+ * it is written as `buying-policy` with no recommendation (PO, 2026-10-28).
+ */
+function methodOf(node) {
+    for (const value of tagValues(node, WARDLEY_METHOD_TAG_ID)) {
+        const parts = wardleyMethodParts(typeof value === 'string' ? value : null);
+        if (parts) {
+            return {
+                category: parts.family,
+                recommendation: parts.phase.charAt(0).toUpperCase() + parts.phase.slice(1),
+            };
+        }
+    }
+    return { category: 'buying-policy', recommendation: '' };
+}
+/** The renderer `color` of a node: its stroke, unless it is the toolbar's. */
+function colourOf(node) {
+    const stroke = node.strokeColor;
+    if (typeof stroke !== 'string' || !stroke.startsWith('#'))
+        return undefined;
+    const preset = wardleyNodeProps(node.kind, {
+        xywh: '[0,0,0,0]',
+    }).strokeColor;
+    return sameColour(stroke, preset) ? undefined : rendererColourName(stroke);
+}
+/** A pipeline's name slot: centred above its handle, as the toolbar writes it. */
+function pipelineLabelSlot(pipeline, handle) {
+    const body = boxOf(pipeline);
+    const cx = handle ? centreOf(boxOf(handle)).x : body.x + body.w / 2;
+    return wardleyLabelBoxFor('pipeline', cx, body.y + PIPELINE_HEIGHT / 2);
+}
+function pipelineLabelOffset(plot, pipeline, handle, label) {
+    const slot = pipelineLabelSlot(pipeline, handle);
+    const box = boxOf(label);
+    return jsonLabelUnshift(plot, { x: box.x - slot.x, y: box.y - slot.y });
+}
+const isStep = (element) => element.type === 'shape' &&
+    element.role === undefined &&
+    element.shapeType === 'ellipse' &&
+    /^\d+$/.test(textOf(element).trim());
+const isRange = (element) => element.type === 'shape' &&
+    element.role === undefined &&
+    isRangeShape(element.shapeType, boxOf(element));
+/** A name of the renderer's id alphabet: lower case, ascii, dashes. */
+function slug(name) {
+    return name
+        .normalize('NFD')
+        .replace(/[̀-ͯ]/g, '')
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, '-')
+        .replace(/^-+|-+$/g, '');
+}
+/* ── The pieces ───────────────────────────────────────────────────────── */
+/** A group's member ids, from a live model (`childIds`) or stored props. */
+function childIdsOf(group) {
+    if (Array.isArray(group.childIds))
+        return group.childIds;
+    const children = group.children;
+    if (!children)
+        return [];
+    if (typeof children.keys === 'function') {
+        return [...children.keys()];
+    }
+    return Object.keys(children);
+}
+function boxOf(element) {
+    if (element.elementBound) {
+        const { x, y, w, h } = element.elementBound;
+        return { x, y, w, h };
+    }
+    if (typeof element.xywh === 'string') {
+        const { x, y, w, h } = Bound.deserialize(element.xywh);
+        return { x, y, w, h };
+    }
+    return { x: 0, y: 0, w: 0, h: 0 };
+}
+const centreOf = (box) => ({ x: box.x + box.w / 2, y: box.y + box.h / 2 });
+const distanceTo = (a, b) => Math.hypot(a.x - b.cx, a.y - b.cy);
+const inside = (point, box) => point.x >= box.x &&
+    point.x <= box.x + box.w &&
+    point.y >= box.y &&
+    point.y <= box.y + box.h;
+/** A text's words, whether a `Y.Text` or a plain string. */
+function textOf(element) {
+    const text = element.text;
+    return text === undefined || text === null ? '' : String(text);
+}
+/** Where an edge end is: the centre of the node it names, or its free point. */
+function pointOf(end, nodeById) {
+    if (end?.id !== undefined) {
+        const node = nodeById.get(end.id);
+        return node ? centreOf(boxOf(node)) : undefined;
+    }
+    const position = end?.position;
+    if (Array.isArray(position) &&
+        typeof position[0] === 'number' &&
+        typeof position[1] === 'number') {
+        return { x: position[0], y: position[1] };
+    }
+    return undefined;
+}
+function nearest(items, distance) {
+    let best;
+    for (const item of items) {
+        const d = distance(item);
+        if (!best || d < best.distance)
+            best = { item, distance: d };
+    }
+    return best;
+}
+/** The distance from `p` to the segment `a`–`b`. */
+function segmentDistance(p, a, b) {
+    const dx = b.x - a.x;
+    const dy = b.y - a.y;
+    const length = dx * dx + dy * dy;
+    const t = length === 0
+        ? 0
+        : Math.max(0, Math.min(1, ((p.x - a.x) * dx + (p.y - a.y) * dy) / length));
+    return Math.hypot(p.x - (a.x + t * dx), p.y - (a.y + t * dy));
+}