umlimator 0.20.0 → 0.21.0

package/lib/umlimator-all.js

@@ -121,7 +121,11 @@ function registerDiagramType(name, def = {}) {
      "none", which emits reparent (the element itself and what it holds are left out; its owner is added when not offered).
      None, or not a list: no Owner field.
    - layout.pins false: pos is {}, no ranking; layout.rank false: pos is the view's pins alone, no ranking (risks.md P1).
-     reroute is no registry field: reroute: false goes in the dg the type's own layout passes to layoutTyped (src/typed/layout.js). */
+     reroute is no registry field: reroute: false goes in the dg the type's own layout passes to layoutTyped (src/typed/layout.js).
+   Stage 4's (notes/stage-4.md §12.1, §15): edits.rename(model, view, id, text); a hook's { pick, then }; name: false and
+   opens on a palette entry; a line's cut, its label's width (150); rows(model, view, id) and word(model, id), the PDF's.
+   Stage 5's: a line's fromPort, toPort, inner, portRank, a box's pad, round, a view's labelGaps (src/typed/layout.js);
+   edits.member, edits.key (src/typed/edit.js). */
 
 /* A view's type: the map for a view with no diagram, the registered type, or null for one this release does not draw */
 const diagramOf = view => TYPES.get(view && view.diagram != null ? view.diagram : 'map') || null;
@@ -524,14 +528,13 @@ const SHAPE = {
 // src/typed/draw.js: from its text), and ports(n, side, k), k line ends spread evenly along a side ('L', 'R', 'T', 'B'), each on the outline
 for (const S of Object.values(SHAPE)) { S.size ||= n => ({ w: mapNodeW(n), h: 64 }); S.ports = (n, side, k = 1) => portsOn(S, n, side, k); }
 const SHAPE_NAMES = ['box', 'person', 'browser', 'mobile', 'cylinder', 'pipe', 'document', 'hexagon', 'robot', 'terminal', 'window', 'folder', 'node']; // all 13
-// a card's shape in a notation: its own `shape` first; box draws every card as before (a hook stays a hexagon there too)
-const shapeOf = (n, notation) => { const sh = String(n.shape ?? '').toLowerCase(); if (SHAPE_NAMES.includes(sh)) return sh;
-  const T = hasKey(NOTED, notation) && NOTED[notation], k = String(n.kind ?? '').toLowerCase(); return T ? (hasKey(T, k) && T[k]) || (hasKey(T, n.k) && T[n.k]) || 'box' : 'box'; };
-const noteOf = x => NOTATIONS.includes(x) ? x : null;
-// a card as its notation draws it (null for a box): its shape, and where its head, folder tab and title bar go, clear of its
+// a card's shape: its own `shape` first, then (a map's card: byKind) the one its kind draws, else a box
+const shapeOf = (n, byKind = true) => { const sh = String(n.shape ?? '').toLowerCase(); if (SHAPE_NAMES.includes(sh)) return sh;
+  const k = String(n.kind ?? '').toLowerCase(); return byKind && ((hasKey(NOTED, k) && NOTED[k]) || (hasKey(NOTED, n.k) && NOTED[n.k])) || 'box'; };
+// a card as it is drawn (null for a box): its shape, and where its head, folder tab and title bar go, clear of its
 // tabs, ⤢ and change badge. Drawing only: layout never sees it. ports: the card's highest line ends on its sides (sidePorts)
-function cardLook(n, notation, hint, ports) {
-  const sh = shapeOf(n, notation); if (sh === 'box') return null;
+function cardLook(n, byKind, hint, ports) {
+  const sh = shapeOf(n, byKind); if (sh === 'box') return null;
   const S = SHAPE[sh], L = { ...n, sh, S, portTop: ports ? Math.min(ports.L, ports.R) : Infinity, portL: ports ? ports.L : Infinity }, tabs = mapTabs(n), spans = []; let tx = n.x + 12;
   // a step keeps 16 px above the highest line into the left side (svgOf): where that is above a person's or robot's shoulder,
   // the shoulder comes up under it, 5 px below its middle (it floated 4 px above the shoulder)
@@ -624,23 +627,23 @@ function svgOf(geo, opts = {}) {
   const marker = (n, c, k = 1) => `<marker id="${id}-${n}" markerWidth="${10 * k}" markerHeight="${8 * k}" refX="${9 * k}" refY="${4 * k}" orient="auto-start-reverse" markerUnits="userSpaceOnUse"><path d="M0 0 L${10 * k} ${4 * k} L0 ${8 * k} Z" fill="${c}"/></marker>`;
   const MC = { d: LINE, g: 'var(--um-green)', r: 'var(--um-rose)', v: 'var(--um-violet)', h: 'var(--um-cyan)', ...Object.fromEntries(WIRES.map(w => [w[0], `var(--um-w-${w[0]})`])) };
   const heavy = [...new Set(edges.filter(e => e.weight > 1).map(e => lstyle(e).m + '-w' + e.weight))]; // a heavier line's arrowhead grows with it
-  // the notation (0.15.0): each card's look, and each line as drawn, its ends on the cards' outlines (a map's cards only)
-  const notation = map ? noteOf(opts.shapes) || 'box' : 'box', kidsOf = n => n.kids != null ? n.kids : opts.childCount ? opts.childCount(n.id) : 0;
+  // each card's look (0.15.0), and each line as drawn, its ends on the cards' outlines (a map's cards only)
+  const kidsOf = n => n.kids != null ? n.kids : opts.childCount ? opts.childCount(n.id) : 0;
   // another view's node is drawn in its own shape, when it names one (1.5): its lines end where its ports() put them, on
   // its outline already, so they are drawn as given
-  const ports = map ? sidePorts(geo) : null, looks = new Map(map ? nodes.map(n => [n, cardLook(n, notation, !!(kidsOf(n) || n.opens) && opts.openHint !== false, ports.get(n))])
-    : nodes.map(n => [n, n.shape != null && cardLook(n, 'box', false, null)]).filter(x => x[1]));
+  const ports = map ? sidePorts(geo) : null, looks = new Map(map ? nodes.map(n => [n, cardLook(n, true, !!(kidsOf(n) || n.opens) && opts.openHint !== false, ports.get(n))])
+    : nodes.map(n => [n, n.shape != null && cardLook(n, false, false, null)]).filter(x => x[1]));
   const drawn = edges.map(e => map && looks.size ? drawnPts(e, n => looks.get(n) || null) : e.pts);
   const T = !map && TYPED.lines ? TYPED.lines({ id, edges, drawn, lstyle, MC }) : null; // a typed view's line ends and end labels (src/typed/draw.js)
   let s = `<svg viewBox="${B.x} ${B.y} ${B.w} ${B.h}" data-w="${B.w}" data-h="${B.h}" role="group" aria-label="${esc(opts.title || 'Diagram')}" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet">
     <defs>${marker('d', LINE)}${marker('g', 'var(--um-green)')}${marker('r', 'var(--um-rose)')}${marker('v', 'var(--um-violet)')}${marker('h', 'var(--um-cyan)')}${map ? WIRES.map(w => marker(w[0], `var(--um-w-${w[0]})`)).join('') : ''}${heavy.map(m => { const [c, k] = m.split('-w'); return marker(m, MC[c], 1 + (k - 1) * .35); }).join('')}${T ? T.defs : ''}</defs>`;
   const families = geo.families || [], familyDepth = f => f.parent ? 1 + familyDepth(families.find(p => p.id === f.parent) || {}) : 0;
-  families.slice().sort((a,b) => familyDepth(a)-familyDepth(b)).forEach(f => { // in c4 every box is a boundary, dashed as Structurizr draws one (a toned box is dashed in any notation)
+  families.slice().sort((a,b) => familyDepth(a)-familyDepth(b)).forEach(f => {
     // a typed view's box whose shape draws a frame (notes/stage-2.md §5): the shape's markup, in the group the canvas selects. It keeps
     // .family-title (the audit, the canvas's "Box …, selected") and draws its border with class family-box: the canvas outlines a
     // selected box and the box under a drag by .family-box alone (src/canvas/styles.js)
     if (!map && hasKey(SHAPE, f.shape) && SHAPE[f.shape].frame) { s += `<g class="family" data-family="${esc(f.id)}"${f.parent ? ` data-parent="${esc(f.parent)}"` : ''}${f.aria ? ` role="img" aria-label="${esc(f.aria)}"` : ''}>${SHAPE[f.shape].frame(f)}</g>`; return; }
-    s += `<g class="family${f.tone ? ' toned' : ''}" data-family="${esc(f.id)}"${f.parent ? ` data-parent="${esc(f.parent)}"` : ''}${f.tone ? ` style="--um-tone:${toneOf(f)}"` : ''}><rect class="family-box" x="${f.x}" y="${f.y}" width="${f.w}" height="${f.h}" rx="14" stroke="var(--um-${familyDepth(f) ? 'cyan' : 'border-2'})"${notation === 'c4' ? ' stroke-dasharray="7 5"' : ''}/>
+    s += `<g class="family${f.tone ? ' toned' : ''}" data-family="${esc(f.id)}"${f.parent ? ` data-parent="${esc(f.parent)}"` : ''}${f.tone ? ` style="--um-tone:${toneOf(f)}"` : ''}><rect class="family-box" x="${f.x}" y="${f.y}" width="${f.w}" height="${f.h}" rx="14" stroke="var(--um-${familyDepth(f) ? 'cyan' : 'border-2'})"/>
       <text class="family-title" x="${f.x+12}" y="${f.y+18}" fill="var(--um-muted)" data-t="ft" data-o="${esc(f.id)}">${esc(!map && f.title || f.label || f.id)}</text>${(f.tabs || []).map(t => t.fold ? `
       <g class="fold-hint"><title>Fold back into one card (E, or Alt + click a card in it)</title><rect x="${t.x}" y="${f.y - 8}" width="${t.w}" height="16" rx="8" class="n-mask" stroke="var(--um-accent)"/><text x="${t.x + t.w / 2}" y="${f.y + 4}" text-anchor="middle" class="badge-tx" fill="var(--um-accent)">⤡</text></g>` : `
       <g class="pub-tab" data-badge="${t.badge}"><rect x="${t.x}" y="${f.y - 8}" width="${t.w}" height="15" rx="4" fill="${t.fill}"/><text x="${t.x + t.w / 2}" y="${f.y + 3}" text-anchor="middle" class="tab-tx">${esc(t.text)}</text></g>`).join('')}</g>`;
@@ -701,8 +704,8 @@ function svgOf(geo, opts = {}) {
     if (!map && hasKey(SHAPE, n.shape) && SHAPE[n.shape].draw) { s += SHAPE[n.shape].draw(n, col(n.k), fill(n.k)); return; } // a typed view's own shape: a class box (1.5), a note (1.9)
     const c = col(n.k), f = fill(n.k), removed = n.change === 'removed', planned = n.change === 'planned';
     const L = looks.get(n) || null, S = L && L.S; // a shaped card (0.15.0); null: a box, drawn as before
-    const pub = map && n.k === 'm-public', priv = map && n.k === 'm-script', ext = map && n.k === 'm-ext', verb = map && n.k === 'm-verb', hook = map && n.k === 'm-hook' && String(n.shape ?? '').toLowerCase() !== 'box';
-    const dash = removed || ext || planned || (map && notation !== 'box' && n.k === 'external'); // an external card is dashed where a notation draws types (the legend says so in every notation)
+    const pub = map && n.k === 'm-public', priv = map && n.k === 'm-script', ext = map && n.k === 'm-ext', verb = map && n.k === 'm-verb';
+    const dash = removed || ext || planned || (map && n.k === 'external'); // an external card is dashed (the legend says so)
     const rx = verb ? n.h / 2 : map ? 10 : 9;
     const kids = kidsOf(n), stacked = !!(kids || n.opens); // opens a view, loaded or not (#47)
     const subject = opts.subject === n.id;
@@ -739,13 +742,11 @@ function svgOf(geo, opts = {}) {
     else {
       if (stacked) parts.push(`<rect x="${n.x + 8}" y="${n.y + 8}" width="${n.w}" height="${n.h}" rx="${rx}" class="n-stack" stroke="${c}"/><rect x="${n.x + 4}" y="${n.y + 4}" width="${n.w}" height="${n.h}" rx="${rx}" class="n-stack" stroke="${c}"/>`);
       if (pub) parts.push(`<rect x="${n.x - 4}" y="${n.y - 4}" width="${n.w + 8}" height="${n.h + 8}" rx="14" class="n-ring" stroke="${c}"/>`);
-      if (hook) { const hx = Math.min(16, n.h / 3), pts = `${n.x + hx},${n.y} ${n.x + n.w - hx},${n.y} ${n.x + n.w},${n.y + n.h / 2} ${n.x + n.w - hx},${n.y + n.h} ${n.x + hx},${n.y + n.h} ${n.x},${n.y + n.h / 2}`;
-        parts.push(`<polygon points="${pts}" class="n-mask"/><polygon points="${pts}" class="n-body" fill="${f}" stroke="${c}" stroke-linejoin="round"/>`); }
-      else parts.push(`<rect x="${n.x}" y="${n.y}" width="${n.w}" height="${n.h}" rx="${rx}" class="n-mask"/>
+      parts.push(`<rect x="${n.x}" y="${n.y}" width="${n.w}" height="${n.h}" rx="${rx}" class="n-mask"/>
       <rect x="${n.x}" y="${n.y}" width="${n.w}" height="${n.h}" rx="${rx}" class="n-body" fill="${f}" stroke="${c}" ${dash ? 'stroke-dasharray="6 4"' : ''} ${removed ? 'opacity=".6"' : ''}/>`); }
-    // the mark, centred on the face; in the uml notation a box's own sigil gives way to UML's component icon
-    const glyph = L && SIGIL[L.sh] ? L.sh : notation === 'uml' && !L && !String(n.k).startsWith('m-') ? 'component' : n.k; // a person's, robot's, phone's, terminal's, folder's or node's own mark
-    parts.push((() => { const I = (opts.icons || {})[n.icon], x = map ? n.x + 14 : n.x + (verb ? 14 : hook ? 17 : 9), y = map ? fy - 14 : n.y + (priv ? 8 : 11), M = map ? 28 : 16;  // map: one 28 px mark, left, centred
+    // the mark, centred on the face
+    const glyph = L && SIGIL[L.sh] ? L.sh : n.k; // a person's, robot's, phone's, terminal's, folder's or node's own mark
+    parts.push((() => { const I = (opts.icons || {})[n.icon], x = map ? n.x + 14 : n.x + (verb ? 14 : 9), y = map ? fy - 14 : n.y + (priv ? 8 : 11), M = map ? 28 : 16;  // map: one 28 px mark, left, centred
 return I && I.src ? `<rect x="${x - M * 3 / 28}" y="${y - M * 3 / 28}" width="${M * 34 / 28}" height="${M * 34 / 28}" rx="${M / 4}" class="n-logo${I.dark ? ' dark' : ''}"/><image href="${I.src}" x="${x}" y="${y}" width="${M}" height="${M}"/>`
   : I && I.g ? `<g transform="translate(${x} ${y}) scale(${M / 24})" class="n-sigil" fill="none" stroke="${c}" stroke-width="${1.75 * 24 / M}" stroke-linecap="round" stroke-linejoin="round">${I.g}</g>`
   : `<g transform="translate(${x} ${y}) scale(${M / 16})" class="n-sigil" fill="none" stroke="${c}" stroke-width="${1.75 * 16 / M}" stroke-linecap="round" stroke-linejoin="round">${SIGIL[glyph]}</g>`; })());
@@ -840,7 +841,7 @@ const hit = (a, b, pad = 0) => a.x < b.x + b.w + pad && b.x < a.x + a.w + pad &&
 // a line whose route layoutPass draws itself in a typed view: 'loop' (a node to itself) or 'fan'. A symbol, so no field of a
 // model's line can set it
 const OWN_ROUTE = Symbol('own route');
-const labelW = e => textW(fit((e.step != null ? e.step + ' · ' : '') + (e.label || ''), 10, 150), 10) + 12;
+const labelW = e => textW(fit((e.step != null ? e.step + ' · ' : '') + (e.label || ''), 10, e.cut || 150), 10) + 12;
 
 /* Layered auto-layout for views that carry no col/row: longest-path layers (cycles broken by DFS),
    barycentre ordering sweeps, integer rows so row gaps stay free as routing channels. */
@@ -1048,7 +1049,7 @@ function layoutPass(dg, map, room, last) { // room: { x: { col: px }, y: { row:
       const p = 12, x = Math.min(...rects.map(r => r.x)) - p - (TB ? 24 : 0), y = Math.min(...rects.map(r => r.y)) - p - (TB ? 0 : 24);
       const b = {...f, x, y, w:Math.max(...rects.map(r => r.x+r.w)) + p - x, h:Math.max(...rects.map(r => r.y+r.h)) + p - y};
       if (!map) b[TB ? 'h' : 'w'] = Math.max(b[TB ? 'h' : 'w'], headW(f) + 16);
-      return cache[f.id] = b;
+      return cache[f.id] = dg.typed ? TYPED.frame(b) : b;
     };
     const out = familyDefs.map(f => frameOf(f)).filter(Boolean);
     if (map) out.forEach(f => { // the box fits its title and its badges, which are tabs on its top border, at the right
@@ -1115,13 +1116,13 @@ function layoutPass(dg, map, room, last) { // room: { x: { col: px }, y: { row:
      bend penalty. Earlier routes may never be overlapped and are crossed only when no clean
      route exists; earlier labels are obstacles, so later routes keep clear of them. */
   // an end may be a container: the line ends on its box's border, whose title the ports keep clear of (not a box and
-  // something inside it: that has no line)
+  // something inside it: that has no line, but a typed view's inner line)
   const headOf = f => Math.min((TB ? f.h : f.w) - 16, headW(f)); // the length of a box's title along its header
   const boxEnd = Object.fromEntries(families.map(f => [f.id, { id: f.id, label: f.label || f.id, box: true, x: f.x, y: f.y, w: f.w, h: f.h, hd: TB ? headOf(f) : 0,
     decoT: TB ? [] : [[f.x + 8, headOf(f)], ...(f.tabs || []).map(t => [t.x - 6, t.w + 12])], decoB: [] }]));
   const endOf = Object.assign(Object.create(null), boxEnd, byId), end = id => endOf[id], holds = (b, n) => b.box && n !== b && n.x >= b.x && n.y >= b.y && n.x + n.w <= b.x + b.w && n.y + n.h <= b.y + b.h;
   const edges = (dg.edges || []).filter(e => { const s = end(e.from), t = end(e.to); if (!s || !t || (e.from === e.to && !loops[e.from])) return false;
-    if (holds(s, t) || holds(t, s)) { warn(`no line for edge ${e.id ?? e.from + '->' + e.to}: it joins the box "${(holds(s, t) ? s : t).id}" and something inside it`); return false; }
+    if (!(LP && e[e.inner + 'Port'] != null) && (holds(s, t) || holds(t, s))) { warn(`no line for edge ${e.id ?? e.from + '->' + e.to}: it joins the box "${(holds(s, t) ? s : t).id}" and something inside it`); return false; }
     return true; }).map(e => ({ ...e, s: end(e.from), t: end(e.to) }));
   const segsOf = pts => pts.slice(0, -1).map((a, i) => [a, pts[i + 1]]);
   const segHitsRect = (a, b, r) => { const x1 = Math.min(a[0], b[0]), x2 = Math.max(a[0], b[0]), y1 = Math.min(a[1], b[1]), y2 = Math.max(a[1], b[1]); return x2 > r.x && x1 < r.x + r.w && y2 > r.y && y1 < r.y + r.h; };
@@ -1179,7 +1180,7 @@ function layoutPass(dg, map, room, last) { // room: { x: { col: px }, y: { row:
   });
   free.forEach(e => { pushSide(e.s, e.fs, e, e.t); pushSide(e.t, e.ts, e, e.s); });
   edges.filter(e => e.under > 0).forEach(e => pushSide(e.t, 'R', e, e.s)); // a loop under the boxes takes its port with the side's other lines
-  if (LP) LP.ports(pushSide);
+  if (LP) LP.ports(pushSide, sides);
   const portAt = (it, side, p) => { if (it.n === it.e.s && it.e.fs === side) it.e.p1 = p; else it.e.p2 = p; };
   Object.entries(sides).sort(([, a], [, b]) => !!a[0].n.box - !!b[0].n.box).forEach(([key, list]) => { // cards first: a box's port lines up with them
     const side = key.split('|').pop(), vertical = side === 'L' || side === 'R';
@@ -1425,7 +1426,7 @@ function layoutPass(dg, map, room, last) { // room: { x: { col: px }, y: { row:
   const put = (e, s, full) => { placed.push(s.box); reserved.push(s.grow); e.lbl = { ...s.lbl, short: s.lbl.text !== full }; };
   const unput = e => { const L = e.lbl, same = m => r => r.x === L.x - m && r.y === L.y - m && r.w === L.w + 2 * m && r.h === L.h + 2 * m;
     const p = placed.findIndex(same(0)), q = reserved.findIndex(same(3)); if (p >= 0) placed.splice(p, 1); if (q >= 0) reserved.splice(q, 1); e.lbl = null; };
-  const fullOf = e => map ? fit(e.label || '', 10.5, e.under ? 320 : 440) : fit((e.step != null ? e.step + ' · ' : '') + (e.label || ''), 10, 150);
+  const fullOf = e => map ? fit(e.label || '', 10.5, e.under ? 320 : 440) : fit((e.step != null ? e.step + ' · ' : '') + (e.label || ''), 10, e.cut || 150);
   function placeLabel(e) {
     if (!e.label && e.step == null) return;
     const full = fullOf(e);
@@ -1564,7 +1565,7 @@ function layoutPass(dg, map, room, last) { // room: { x: { col: px }, y: { row:
   if ((map || dg.typed) && dg.repair !== false) free.forEach(e => {
     const P = e.pts, ax = e.fs === 'L' || e.fs === 'R' ? 1 : 0, d = P[P.length - 1][ax] - P[0][ax];
     if (P.length !== 4 || !d || Math.abs(d) > 16 || OUT[e.fs][1 - ax] !== -OUT[e.ts][1 - ax]) return;
-    const lone = (n, side) => !n.box && sides[n.id + '|' + side].length === 1, [k, n, side, v] = lone(e.t, e.ts) ? ['p2', e.t, e.ts, P[0][ax]] : lone(e.s, e.fs) ? ['p1', e.s, e.fs, P[3][ax]] : [];
+    const lone = (n, side) => !n.box && sides[n.id + '|' + side]?.length === 1, [k, n, side, v] = lone(e.t, e.ts) ? ['p2', e.t, e.ts, P[0][ax]] : lone(e.s, e.fs) ? ['p1', e.s, e.fs, P[3][ax]] : [];
     const sp = n && (ax ? [n.y + n.h * .08, n.y + n.h * .92] : sideSpan(n, side) || [n.x + n.w * .08, n.x + n.w * .92]);
     if (!k || v < sp[0] || v > sp[1]) return;
     const was = e[k], before = issueCount(new Set([e])), snap = [e.pts, e.lbl, e.how], snapR = [routed.slice(), reserved.slice(), placed.slice()];
@@ -1582,11 +1583,11 @@ function layoutPass(dg, map, room, last) { // room: { x: { col: px }, y: { row:
   // the label's width, else the row gap by its height and 14 px; a label in neither, or with no spot, the gap its line's longest
   // run crosses, a column's first. layoutGraph lays the view out again with it, and keeps that layout if it is better
   let labelRoom = null;
-  const tight = !last && !dg.quick && map && !dg.abs ? free.filter(e => (e.label || e.step != null) && (!e.lbl || e.lbl.short || families.some(f => onBorder(e.lbl, f)))) : [];
+  const tight = !last && !dg.quick && (map || dg.labelGaps) && !dg.abs ? free.filter(e => (e.label || e.step != null) && (!e.lbl || e.lbl.short || families.some(f => onBorder(e.lbl, f)))) : [];
   if (tight.length) {
     const cs = Object.keys(colX).map(Number), rs = nodes.map(n => n.row), r0 = Math.floor(Math.min(...rs)), r1 = Math.ceil(Math.max(...rs)), need = { x: {}, y: {} };
     const gaps = [...cs.filter(c => colX[c + 1] != null).map(c => ['x', c, colX[c] + (colW[c] || NW), colX[c + 1]]),
-      ...Array.from({ length: Math.max(0, r1 - r0) }, (_, k) => ['y', r0 + k, rowY(r0 + k) + NH, rowY(r0 + k + 1)])];
+      ...Array.from({ length: map && r1 - r0 }, (_, k) => ['y', r0 + k, rowY(r0 + k) + NH, rowY(r0 + k + 1)])];
     tight.forEach(e => { const { w, hgt: h } = sizeOf(e, fullOf(e)), L = e.lbl, c = L && { x: L.x + L.w / 2, y: L.y + L.h / 2 };
       let best = c && ['x', 'y'].map(k => gaps.find(([gk, g, p, q]) => gk === k && c[k] >= p && c[k] <= q)).find(Boolean);
       if (!best) segsOf(e.pts).forEach(([a, b]) => { const k = a[1] === b[1] ? 'x' : 'y', i = k === 'x' ? 0 : 1, lo = Math.min(a[i], b[i]), hi = Math.max(a[i], b[i]);
@@ -1773,7 +1774,7 @@ const ALIAS = { client: 'frontend', ui: 'frontend', web: 'frontend', page: 'fron
   user: 'external', human: 'external', thirdparty: 'external', vendor: 'external',
   doc: 'file', config: 'file', skill: 'file', md: 'file', template: 'file', output: 'file',
   agent: 'ai', llm: 'ai', model: 'ai' };
-const hasKey = (o, k) => Object.hasOwn(o, k); // a table's own key: "constructor" or "__proto__" is no kind, shape or notation
+const hasKey = (o, k) => Object.hasOwn(o, k); // a table's own key: "constructor" or "__proto__" is no kind or shape
 const kindOf = (k, map) => { k = String(k || '').toLowerCase(); if (map && hasKey(MAPK, k)) return MAPK[k]; return hasKey(KIND, k) ? k : hasKey(ALIAS, k) ? ALIAS[k] : map ? 'm-script' : 'backend'; };
 const SIGIL = {
   frontend: '<rect x="2" y="3" width="12" height="8.5" rx="1.2"/><path d="M5.5 14h5M8 11.5V14"/>',
@@ -1800,25 +1801,17 @@ const SIGIL = {
   terminal: '<rect x="1.8" y="2.6" width="12.4" height="10.8" rx="1.6"/><path d="m4.6 6.2 2 1.8-2 1.8M8.4 10.2h3"/>',
   folder: '<path d="M2 4.3c0-.7.5-1.2 1.2-1.2h3l1.4 1.6h5.2c.7 0 1.2.5 1.2 1.2v6.2c0 .7-.5 1.2-1.2 1.2H3.2C2.5 13.3 2 12.8 2 12.1Z"/>',
   node: '<path d="M2.4 5.6 5 3h8.6v7.4L11 13H2.4Z"/><path d="M2.4 5.6H11V13M11 5.6 13.6 3"/>',
-  // UML's component icon (§11.6.4): a box's mark in the uml notation
-  component: '<path d="M4.5 4.5V2.3a.8.8 0 0 1 .8-.8h7.9a.8.8 0 0 1 .8.8v11.4a.8.8 0 0 1-.8.8H5.3a.8.8 0 0 1-.8-.8v-2.2M4.5 7v2"/><rect x="2" y="4.5" width="5" height="2.5" rx=".6"/><rect x="2" y="9" width="5" height="2.5" rx=".6"/>',
-};
-/* ================= card shapes (0.15.0) =================
-   A notation draws each card as a shape: box (the default: every card a rounded box, as before), c4 (people, browser apps,
-   phones, databases, queues and files as the C4 model's tools draw them) or uml (UML 2.5's actor, node, artifact, package
-   and data store, and the component icon as a box's mark). A card's own `shape` wins in any notation. Each shape is drawn
-   inside its card's own box, so layout, routing, widths and the layout check never see it: an outline (for the mask, the
-   body, the stack, rings, the minimap and the glow), a face (the rows its mark and text use), details drawn over the body
-   (one of them its accent, which lights as something arrives) and inset(side, t), how far inside the box's side the
-   outline runs at t, which slides a line's end from the box onto the outline. */
-const NOTATIONS = ['box', 'c4', 'uml'];
-// what a notation draws: by the kind word the model wrote, then by the kind it means (docs/module-api.md, 0.15.0)
-const NOTED = {
-  c4: { person: 'person', user: 'person', human: 'person', mobile: 'mobile', agent: 'robot', cli: 'terminal',
-    frontend: 'browser', database: 'cylinder', queue: 'pipe', file: 'document', 'm-hook': 'hexagon' },
-  uml: { person: 'person', user: 'person', human: 'person', agent: 'robot', module: 'folder', package: 'folder',
-    cloud: 'node', database: 'cylinder', file: 'document', 'm-hook': 'hexagon' },
 };
+/* ================= card shapes (0.15.0; one style since 0.21.0) =================
+   Maps draw each card as a shape (the union of what the C4 model's tools and UML 2.5 draw): people, browser apps, phones,
+   terminals, queues, packages, hosts, robots, data stores, files and hooks, and a rounded box where no shape says more. A
+   card's own `shape` wins. Each shape is drawn inside its card's own box, so layout, routing, widths and the layout check
+   never see it: an outline (for the mask, the body, the stack, rings, the minimap and the glow), a face (the rows its mark
+   and text use), details drawn over the body (one of them its accent, which lights as something arrives) and
+   inset(side, t), how far inside the box's side the outline runs at t, which slides a line's end from the box onto the outline. */
+// the shape a card is drawn as: by the kind word the model wrote, then by the kind it means (docs/module-api.md)
+const NOTED = { person: 'person', user: 'person', human: 'person', agent: 'robot', mobile: 'mobile', cli: 'terminal', frontend: 'browser',
+  queue: 'pipe', module: 'folder', package: 'folder', cloud: 'node', database: 'cylinder', file: 'document', 'm-hook': 'hexagon' };
 /* The map: today's notation, and the default diagram type. A view of a version-1 model, or a version-2 view with no
    `diagram`, is a map and takes exactly today's code path. */
 const MAP = registerDiagramType('map', { title: 'architecture map' });
@@ -2175,16 +2168,9 @@ function mapContext(model, opts = {}) {
     return pos;
   }
 
-  function buildView(vid, opts = {}) {
-    const g = buildGeo(vid);
-    return { g, ...drawView(vid, g, opts) };
-  }
-  // a view's notation (0.15.0): its own `shapes`, else the model's, else box; drawView: the picture of a geometry in one,
-  // with no layout (a change of notation draws the cards again and nothing else)
-  const notationOf = vid => noteOf((V[vid] || {}).shapes) || noteOf(D.shapes) || 'box';
-  function drawView(vid, g, opts = {}) {
-    const v = V[vid], shapes = noteOf(opts.shapes) || notationOf(vid), T = ownLayout(vid), L = T && T.draw && T.draw(g, { esc, r2, textW }); // its two layers only
-    return { markup: svgOf(g, { title: v.title, subject: subjectOf(v), icons: D.icons, broken: brokenIn(vid), ...opts, shapes, ...(L && { under: L.under, over: L.over }) }), shapes };
+  function buildView(vid, opts = {}) { // a view's geometry and its picture
+    const g = buildGeo(vid), v = V[vid], T = ownLayout(vid), L = T && T.draw && T.draw(g, { esc, r2, textW }); // its two layers only
+    return { g, markup: svgOf(g, { title: v.title, subject: subjectOf(v), icons: D.icons, broken: brokenIn(vid), ...opts, ...(L && { under: L.under, over: L.over }) }) };
   }
   // the rules a view's lines break (#70), by model edge id: svgOf draws such a line rose, with a mark that names them
   let ruled = null;
@@ -2351,7 +2337,7 @@ function mapContext(model, opts = {}) {
   const viewKey = vid => {
     const v = V[vid], ids = (v.nodeIds || []).filter(i => N[i]), ns = ids.map(i => nodeIn(i, vid));
     const icons = [...new Set(ns.map(n => n.icon).filter(Boolean))].map(k => (D.icons || {})[k]), who = [...new Set(ns.map(n => n.author).filter(Boolean))].map(k => (D.authors || {})[k]);
-    return JSON.stringify([{ ...v, shapes: undefined }, ns, viewEdges(v), ids.map(i => [kidCount(i, vid), opensOf(i, vid)]), icons, who, boxesOf(vid)]); // a view's notation lays nothing out; a type's boxes do
+    return JSON.stringify([v, ns, viewEdges(v), ids.map(i => [kidCount(i, vid), opensOf(i, vid)]), icons, who, boxesOf(vid)]); // a type's boxes lay it out
   };
   /* ---------- unfolding in place (#71): a stacked card opens into a box on the view it is on ----------
      The card becomes a box with its id and name, holding its inner view's own cards: those not on this view already (the
@@ -2362,11 +2348,11 @@ function mapContext(model, opts = {}) {
      the cards under it in its column move down by its height, so the rest of the picture keeps its places (a hub view, which
      has no columns, is laid out again). The inner view's boxes that hold its own cards come along inside, and a numbered
      (sequence) view's run order: its numbers, its loops back and its lanes (#82). Not in a numbered view: its own steps
-     would be numbered again; that card opens. */
+     would be numbered again; that card opens. Nor into another kind of diagram: that card opens too. */
   // the inner view's own cards: those this view shows neither as cards nor as boxes (a card unfolded here already is one, #98)
   const ownOf = (v, C, nid) => (C.nodeIds || []).filter(i => N[i] && i !== nid && !(v.nodeIds || []).includes(i) && !(v.containers || []).some(b => b && b.id === i));
   const unfoldable = (nid, vid) => { const v = V[vid], ids = (v && v.nodeIds) || [], c = ids.includes(nid) && N[nid] && v.render !== 'sequence' ? childOf(nid, vid) : null;
-    if (!c || c === vid || chain(vid).includes(c) || (v.containers || []).some(b => b && b.id === nid)) return null;
+    if (!c || c === vid || chain(vid).includes(c) || (v.containers || []).some(b => b && b.id === nid) || V[c].diagram != v.diagram) return null;
     return ownOf(v, V[c], nid).length ? c : null; };
   function unfold(vid, nid) {
     const v = V[vid], c = unfoldable(nid, vid); if (!c) return false;
@@ -2473,7 +2459,7 @@ function mapContext(model, opts = {}) {
     for (let more = true; more && todo.length;) { more = false; todo = todo.filter(nid => { if (!unfold(vid, nid)) return true; (unfolded[vid] ||= []).push(nid); return !(more = true); }); } }))();
   const geoCache = {};
   return { D, views, nodes, N, V, rootId, nodeIn, childOf, opensOf, subjectOf, viewsWith, kidsOf, chain, viewEdges, isState, planOf: withM(planOf), planCache,
-    layoutCache, geoCache, memos, buildGeo: withM(buildGeo), buildView: withM(buildView), drawView: withM(drawView), notationOf, optimize: withM(optimize), flowPos, kidCount, viewKey, brokenIn, unfoldable, unfolded };
+    layoutCache, geoCache, memos, buildGeo: withM(buildGeo), buildView: withM(buildView), optimize: withM(optimize), flowPos, kidCount, viewKey, brokenIn, unfoldable, unfolded };
 }
 const edgeRefIds = e => [...new Set((e.all || [e]).map(x => x._id).filter(Boolean))];
 
@@ -2519,20 +2505,21 @@ export function validate(model) {
     if (n.owner != null && typeof n.owner !== 'string') warn(at + '.owner', 'an owner is a name: ignored');
     shapeIs(n, at);
   };
-  const shapeIs = (n, at) => { if (n && n.shape != null && !SHAPE_NAMES.includes(String(n.shape).toLowerCase())) warn(at + '.shape', `unknown shape "${n.shape}": the notation draws it by its kind (the shapes: ${SHAPE_NAMES.join(', ')})`); };
-  const notation = (x, at) => { if (x != null && !noteOf(x)) warn(at, `"${x}" is not a notation (${NOTATIONS.join(', ')}): drawn as box`); }; // card shapes (0.15.0)
-  notation(m.shapes, 'shapes');
+  const shapeIs = (n, at) => { if (n && n.shape != null && !SHAPE_NAMES.includes(String(n.shape).toLowerCase())) warn(at + '.shape', `unknown shape "${n.shape}": drawn by its kind (the shapes: ${SHAPE_NAMES.join(', ')})`); };
+  const gone = (x, at) => { if (x && x.shapes !== undefined) warn(at + 'shapes', 'shapes is no longer read: maps draw in one style'); }; // the box/c4/uml choice, removed in 0.21.0
+  gone(m, '');
   arr(m.nodes).forEach((n, i) => card(n, `nodes[${i}]`));
   views.forEach((v, i) => arr(v.nodes).forEach((n, j) => card(n, `views[${i}].nodes[${j}]`)));
   views.forEach((v, i) => { if (typeof v.id !== 'string' || !v.id) err(`views[${i}].id`, 'a view needs an id'); else if (vids.has(v.id)) err(`views[${i}].id`, `view id "${v.id}" is used twice`); else vids.add(v.id); });
   if (m.root != null && !vids.has(m.root)) err('root', `root "${m.root}" is not a view`);
   const later = (x, at) => { if (x && x.opensView && !vids.has(x.opensView)) warn(at + '.opensView', `opens "${x.opensView}", a view the model does not have: fine if the host loads it when it is opened`); };
   arr(m.nodes).forEach((n, i) => later(n, `nodes[${i}]`));
-  views.forEach((v, i) => notation(v.shapes, `views[${i}].shapes`));
-  // c4 draws a frontend card as a browser: a person's icon on one says the model means a person (0.15.0)
-  const inC4 = new Set(views.filter(v => (noteOf(v.shapes) || noteOf(m.shapes)) === 'c4').flatMap(v => arr(v.nodeIds)));
-  arr(m.nodes).forEach((n, i) => { if (!n || !inC4.has(n.id) || n.shape != null || !['user', 'users', 'usercheck'].includes(n.icon)) return;
-    if (shapeOf({ ...n, k: kindOf(n.kind, true) }, 'c4') === 'browser') warn(`nodes[${i}].kind`, `"${n.label || n.id}" has a person's icon, but c4 draws a ${n.kind} card as a browser: kind "person" (or shape "person") draws a person`); });
+  views.forEach((v, i) => gone(v, `views[${i}].`));
+  // a frontend card is drawn as a browser: a person's icon on one says the model means a person (0.15.0); not said of a card
+  // only typed views hold, which keep their own notation (0.21.0)
+  const typedOnly = id => { const vs = views.filter(v => arr(v.nodeIds).includes(id)); return vs.length && vs.every(v => typedView(v) && diagramOf(v)); };
+  arr(m.nodes).forEach((n, i) => { if (!n || n.shape != null || !['user', 'users', 'usercheck'].includes(n.icon) || typedOnly(n.id)) return;
+    if (shapeOf({ ...n, k: kindOf(n.kind, true) }) === 'browser') warn(`nodes[${i}].kind`, `"${n.label || n.id}" has a person's icon, but a ${n.kind} card is drawn as a browser: kind "person" (or shape "person") draws a person`); });
   const line = (e, at, ends) => {
     if (!e || typeof e !== 'object') return err(at, 'a line is an object with from and to');
     ['from', 'to'].forEach(k => { if (!ends.has(e[k])) err(`${at}.${k}`, `"${e[k]}" is neither a card nor a box`); });
@@ -3823,7 +3810,7 @@ export function render(container, model, options = {}) {
      event says which of its keys changed, once a frame at most (on a 16 ms timer, so a page in a hidden tab still says it).
      The camera is the exception: a pan, zoom, glide or drag is one state event, once it comes to rest; until then the
      event's camera is where it last rested (handle.state reads it live) */
-  const KEYS = ['view', 'navigating', 'selection', 'expanded', 'lens', 'overlays', 'story', 'tour', 'replay', 'paused', 'camera', 'flow', 'shapes', 'motion', 'gesture', 'destroyed'];
+  const KEYS = ['view', 'navigating', 'selection', 'expanded', 'lens', 'overlays', 'story', 'tour', 'replay', 'paused', 'camera', 'flow', 'motion', 'gesture', 'destroyed'];
   let lastState = null, stateT = 0, camRest = null, restT = 0; // the last state event's snapshot and the flush to come; the camera at rest, and its check to come
   const listensState = () => !!((options.on || {}).state || (subs.state || []).length);
   function touch() { if (!stateT && !dead && listensState()) stateT = setTimeout(flushState, 16); }
@@ -3834,18 +3821,10 @@ export function render(container, model, options = {}) {
   function camMoved() { clearTimeout(restT); restT = !dead && listensState() ? setTimeout(rested, 150) : 0; }
   function rested() { restT = 0; if (dead) return; if (cam && (cam.anim || cam.ptrs.size) || nav) return camMoved(); camRest = camNow(); touch(); }
   let cam = null, geo = null, svg = null, cur = null, sel = null, more = [], busy = false, paused = false, dead = false;
-  // the notation (0.15.0): the host's (render()'s shapes, then handle.shapes) for every view, else each view's own
-  if (options.shapes != null && !noteOf(options.shapes)) warn(`render(…, { shapes: ${JSON.stringify(options.shapes)} }): the notations are ${NOTATIONS.join(', ')}; each view draws its own`);
-  let shapesSet = noteOf(options.shapes);
-  const noteFor = vid => shapesSet || ctx.notationOf(vid);
-  const pic = vid => { // a view's picture in its notation: laid out once, drawn again only when the notation changes
-    const want = noteFor(vid), o = { tour: P.tour !== false, openHint: P.openHint !== false, shapes: want };
-    let c = ctx.geoCache[vid]; if (!c) c = ctx.geoCache[vid] = ctx.buildView(vid, o); else if (c.shapes !== want) Object.assign(c, ctx.drawView(vid, c.g, o));
-    return c; };
-  // each card's look in the notation shown, for what is drawn over the picture: rings, the minimap, a tour's or replay's dot
-  // (in box too: a card's own shape is drawn there)
-  const lookIn = (nt, g) => { const m = new Map(), ports = sidePorts(g); return n => { if (!m.has(n)) m.set(n, cardLook(n, nt, !!(n.kids || n.opens) && P.openHint !== false, ports.get(n))); return m.get(n); }; };
-  const looker = () => lookIn(noteFor(cur), geo);
+  const pic = vid => ctx.geoCache[vid] ||= ctx.buildView(vid, { tour: P.tour !== false, openHint: P.openHint !== false }); // a view's picture: laid out once
+  // each card's look, for what is drawn over the picture: rings, the minimap, a tour's or replay's dot
+  const lookIn = g => { const m = new Map(), ports = sidePorts(g); return n => { if (!m.has(n)) m.set(n, g.map ? cardLook(n, true, !!(n.kids || n.opens) && P.openHint !== false, ports.get(n)) : cardLook(n, false, false, null)); return m.get(n); }; };
+  const looker = () => lookIn(geo);
   const timers = new Set(), later = (f, ms) => { const t = setTimeout(() => { timers.delete(t); if (!dead) f(); }, ms); timers.add(t); return t; };
   const sleeping = new Set(); // a sleep resolves on its own, or when the map is destroyed: nothing that awaits one is left pending
   const sleep = ms => new Promise(r => { if (dead) return r(); const wake = () => { sleeping.delete(wake); r(); }; sleeping.add(wake); later(wake, still() ? 0 : ms); });
@@ -3949,9 +3928,9 @@ export function render(container, model, options = {}) {
   /* minimap */
   const mini = {};
   function buildMini() {
-    const b = geo.bounds, el = q('.minimap'), bw = Math.max(2, b.w / 300), c4 = noteFor(cur) === 'c4';
-    // a box's tone, as its region; and a box dashed in the picture (any box in c4, a toned box in any notation) dashed here
-    const rg = (geo.families || []).filter(f => f.tone || c4).map(f => `<rect x="${f.x}" y="${f.y}" width="${f.w}" height="${f.h}" rx="14" ${f.tone ? `style="--um-tone:${toneOf(f)}" ` : ''}fill="${f.tone ? 'var(--um-tone, var(--um-slate))' : 'none'}" fill-opacity=".14" stroke="${f.tone ? 'var(--um-tone, var(--um-slate))' : 'var(--um-border-2)'}" stroke-width="${bw}" stroke-dasharray="${bw * 4} ${bw * 3}"/>`).join('');
+    const b = geo.bounds, el = q('.minimap'), bw = Math.max(2, b.w / 300);
+    // a box's tone, as its region, dashed as in the picture
+    const rg = (geo.families || []).filter(f => f.tone).map(f => `<rect x="${f.x}" y="${f.y}" width="${f.w}" height="${f.h}" rx="14" style="--um-tone:${toneOf(f)}" fill="var(--um-tone, var(--um-slate))" fill-opacity=".14" stroke="var(--um-tone, var(--um-slate))" stroke-width="${bw}" stroke-dasharray="${bw * 4} ${bw * 3}"/>`).join('');
     const ln = (geo.lanes || []).map(l => `<rect x="${l.x}" y="${l.y}" width="${l.w}" height="${l.h}" rx="14" fill="none" stroke="var(--um-border-2)" stroke-width="${Math.max(2, b.w / 300)}"/>`).join('');
     const look = looker(), r = geo.nodes.map(n => { const L = look(n), paint = `fill="var(--um-${KIND[n.k][0]})" opacity="${n.k === 'm-public' ? .95 : .55}"`;
       return L ? `<path d="${L.S.out(L)}" ${paint}/>` : `<rect x="${n.x}" y="${n.y}" width="${n.w}" height="${n.h}" rx="8" ${paint}/>`; }).join('');
@@ -4169,21 +4148,6 @@ export function render(container, model, options = {}) {
     return true;
   }
   function flash(nid) { const g = svg.querySelector(`.node[data-id="${CSS.escape(nid)}"]`); if (!g) return; g.classList.add('flash'); later(() => g.classList.remove('flash'), 1400); }
-  /* the notation every view is drawn in (0.15.0): the host's, a reader's (the page's toggle and link), or null for each
-     view's own. The view shown is drawn again from the geometry it has, with its camera, selection, lens and marks, and
-     nothing is laid out. False for a notation that isn't one (with a warning). */
-  function setShapes(x) {
-    if (dead) return false;
-    const want = x == null ? null : noteOf(x);
-    if (x != null && !want) { warn(`shapes = ${JSON.stringify(x)}: the notations are ${NOTATIONS.join(', ')}`); return false; }
-    shapesSet = want;
-    if (cur && ctx.geoCache[cur] && ctx.geoCache[cur].shapes !== noteFor(cur)) {
-      const keep = sel, keepMore = more, touched = cam.touched;
-      mount(cur); cam.set({}); cam.touched = touched;
-      if (keep && exists(keep)) { sel = keep; more = keepMore.filter(exists); paint(); }
-      emitSel(); }
-    touch(); return true;
-  }
   function setFlow(on, save = true) { // save: the page keeps it as the reader's choice
     stage.classList.toggle('flowing', on);
     const b = q('[data-z="flow"]'); if (b) { b.classList.toggle('on', on); b.setAttribute('aria-pressed', on); }
@@ -4592,7 +4556,7 @@ export function render(container, model, options = {}) {
       return; }
     if (!ctx.V[cur]) { // the view shown is gone: the root, or the empty card of a model with no views
       const from = cur; mount(ctx.rootId ?? null); cam.set(startView()); cam.touched = false; emitSel(); if (cur) emit('viewchange', { view: cur, from }); return; }
-    if (ctx.geoCache[cur] && keys[cur] === ctx.viewKey(cur) && ctx.geoCache[cur].shapes === noteFor(cur)) { if (lensId != null) { relens(); drawMarks(); } if (pc) pc.chrome(); if (P.onMount) P.onMount(inner); return; } // this view's picture did not change (its lens or the views may have; the page reads the new model, issue 133)
+    if (ctx.geoCache[cur] && keys[cur] === ctx.viewKey(cur)) { if (lensId != null) { relens(); drawMarks(); } if (pc) pc.chrome(); if (P.onMount) P.onMount(inner); return; } // this view's picture did not change (its lens or the views may have; the page reads the new model, issue 133)
     const keep = sel, keepMore = more, touched = cam.touched, prev = [geo, svg];
     mount(cur);
     if (touched) cam.set({}); else cam.set(startView());
@@ -4658,7 +4622,7 @@ export function render(container, model, options = {}) {
     const tone = t => 'var(--um-' + String(t || 'accent').replace(/[^\w-]/g, '') + ')', op = m => m.level < 1 ? ` opacity="${m.level}"` : '';
     const cards = Object.fromEntries([...s.querySelectorAll('.node')].map(x => [x.dataset.id, x]));
     let under = '', over = '';
-    const look = lookIn(noteFor(vid), g);
+    const look = lookIn(g);
     g.nodes.forEach(n => { const m = markOf2(L => (L.nodes || {})[n.id]), el = cards[n.id]; if (!m || !el) return;
       if (m.level < 1) el.setAttribute('opacity', m.level);
       const sh = (m.tone || m.pulse) && look(n); // a shape's ring: its outline, 5 px out (0.15.0)
@@ -4969,7 +4933,7 @@ export function render(container, model, options = {}) {
 
   const inner = { ctx: () => ctx, geo: () => geo, cam: () => cam, svg: () => svg, stage, host, go, open, up, flash, setFlow, pause, key, startView, standalone, play,
     select, busy: () => busy, flowing: () => stage.classList.contains('flowing'), view: () => cur, unfold: gesture, lens: setLens,
-    highlight, overlay, focus: focusMap, editable: !!E, shapes: () => shapesNow(), setShapes, override: () => shapesSet }; // a story's pointer is the pieces' own, from the story event (0.14.0)
+    highlight, overlay, focus: focusMap, editable: !!E }; // a story's pointer is the pieces' own, from the story event (0.14.0)
 
   // the pieces a host asked for (#99): they follow the map's selection and views, and take their keys wherever the focus is
   // in the map (Enter and Space press their buttons; the map's other keys reach the canvas, as in the page)
@@ -4981,13 +4945,12 @@ export function render(container, model, options = {}) {
     if (options.nav) { q('.um-navbtn').addEventListener('click', () => pc.setTree(!frame.classList.contains('tree-open'))); pc.setTree(ctx.views.length > 1); }
   }
   const motionOf = () => instant ? 'instant' : reducedMotion() ? 'reduced' : 'full';
-  const shapesNow = () => cur ? noteFor(cur) : shapesSet || noteOf(ctx.D.shapes) || 'box';
   const camNow = () => { const r = (x, d) => Math.round(x * d) / d; return cam ? { x: r(cam.s.cx, 10), y: r(cam.s.cy, 10), zoom: r(cam.s.k, 1000) } : { x: 0, y: 0, zoom: 1 }; };
   function snapshot(event = false) { // MapState: built fresh on every read, frozen all the way down, plain JSON; event: the camera at rest
     const deep = o => { Object.values(o).forEach(v => v && typeof v === 'object' && deep(v)); return Object.freeze(o); }, st = story, t = trip;
     return deep({ view: cur, navigating: nav ? nav.to : null, selection: picked(), expanded: [...(expanded[cur] || [])], lens: lensId, overlays: [...layers.keys()],
       story: st ? { id: st.s.id, step: st.at, steps: st.steps.length, playing: !!st.auto } : null, tour: !!(t && t.kind === 'tour'), replay: t && t.kind === 'replay' ? { playing: !t.paused } : null, paused: !!paused,
-      camera: event && camRest ? { ...camRest } : camNow(), flow: stage.classList.contains('flowing'), shapes: shapesNow(), motion: motionOf(), gesture: gestureNow(), destroyed: dead });
+      camera: event && camRest ? { ...camRest } : camNow(), flow: stage.classList.contains('flowing'), motion: motionOf(), gesture: gestureNow(), destroyed: dead });
   }
   const first = () => {
     if (dead) return;
@@ -5026,8 +4989,6 @@ export function render(container, model, options = {}) {
     get destroyed() { return dead; },
     get flow() { return stage.classList.contains('flowing'); }, // the animated flow along lines (≋, F)
     set flow(on) { if (!dead) setFlow(!!on, false); }, // a host's choice, not the reader's: the page saves only ≋ and F
-    get shapes() { return shapesNow(); }, // the notation the view shown is drawn in: 'box', 'c4' or 'uml' (0.15.0)
-    set shapes(x) { setShapes(x); }, // every view in this one (null: each view's own); the cards are drawn again, nothing is laid out
     get motion() { return motionOf(); }, // 'instant' (the page's #check, #still, #shot), 'reduced' (the reader's setting), else 'full'
     get story() { return story ? story.ctl : null; }, // the player of the story shown (play()'s, the page menu's or a link's), else null
     overlay: (name, layer) => overlay(name, layer),
@@ -5077,26 +5038,22 @@ function detailBullets(body) {
 const SHAPE_SAYS = { person: ['Person', 'someone who uses it'], browser: ['Browser app', 'runs in a web browser'], mobile: ['Mobile app', 'runs on a phone'],
   cylinder: ['Data store', 'a database or a store'], pipe: ['Queue', 'hands work on, in order'], document: ['File', 'a document or a config'],
   hexagon: ['Hexagon', 'a guard or a service'], robot: ['Agent', 'an AI agent'], terminal: ['Command line', 'a CLI or a script'],
-  window: ['Desktop app', 'runs in a window'], folder: ['Package', 'a module or a folder of code'], node: ['Host', 'a machine or runtime it runs on'],
-  component: ['Component', 'a part that runs (UML)'] };
+  window: ['Desktop app', 'runs in a window'], folder: ['Package', 'a module or a folder of code'], node: ['Host', 'a machine or runtime it runs on'] };
 const swatchOf = (sh, k, c, f, dashed) => { const n = { x: 0, y: 0, w: 100, h: 64 }, S = SHAPE[sh]; // a legend's key: the card's outline, small
   return `<svg class="lgs" viewBox="-4 -4 108 72" aria-hidden="true"><path d="${S.out(n)}" fill="${f}" stroke="${c}"${dashed ? ' stroke-dasharray="3 2"' : ''}/>${S.det ? S.det(n, c, k) : ''}</svg>`; };
-function legendItems(gs, opens = 'double-click to open', notes = [], icons = {}) { // what these pictures draw, each with what it means: the view's legend, and the PDF's (#93). notes: each picture's notation (0.15.0)
+function legendItems(gs, opens = 'double-click to open') { // what these pictures draw, each with what it means: the view's legend, and the PDF's (#93)
   const typedKeys = [...new Set(gs.flatMap(g => g.legend || []))]; // a typed view's type writes its own keys (1.9); its cards and lines are not a map's
   const ns = gs.flatMap(g => g.legend ? [] : g.nodes), es = gs.flatMap(g => g.legend ? [] : g.edges), used = [...new Set(ns.map(n => n.k))];
-  // each card as its picture's notation draws it: its shape, its dash and its mark (the legend draws what the map draws)
-  const cards = gs.flatMap((g, i) => { if (g.legend) return []; const nt = g.map ? noteOf(notes[i]) || 'box' : 'box';
-    return g.nodes.map(n => { const sh = shapeOf(n, nt), I = (icons || {})[n.icon]; // an icon the table lacks leaves the card the component mark, as svgOf draws it
-      return { k: n.k, sh, dash: nt !== 'box' && n.k === 'external', comp: nt === 'uml' && sh === 'box' && !(I && (I.src || I.g)) && !String(n.k).startsWith('m-') }; }); });
+  // each card as its picture draws it: its shape and its dash (the legend draws what the map draws)
+  const cards = gs.flatMap(g => g.legend ? [] : g.nodes.map(n => ({ k: n.k, sh: shapeOf(n, !!g.map), dash: !!g.map && n.k === 'external' })));
   const kindShape = k => { const s = [...new Set(cards.filter(d => d.k === k).map(d => d.sh))]; return s.length === 1 && s[0] !== 'box' && !(k === 'm-hook' && s[0] === 'hexagon') ? s[0] : null; };
   const dashOf = k => k === 'm-ext' || cards.some(d => d.k === k && d.dash); // an external card is dashed only where it is drawn so
   const order = ['m-public', 'm-step', 'm-lane', 'm-ext', 'm-verb', 'm-board', 'm-hook', 'm-script', 'frontend', 'backend', 'ai', 'queue', 'database', 'security', 'cloud', 'external', 'file'];
   const shape = k => k === 'm-verb' ? 'p' : dashOf(k) ? 'd' : k === 'm-hook' ? 'h' : '';
   const kinds = order.filter(k => used.includes(k)), own = new Set(kinds.map(kindShape).filter(Boolean)), tone = k => `var(--um-${KIND[k][0]})`;
-  // a shape the kinds' keys don't show already: in a neutral outline, as colour is the kinds' (and UML's component mark)
+  // a shape the kinds' keys don't show already: in a neutral outline, as colour is the kinds'
   const shapes = SHAPE_NAMES.filter(sh => sh !== 'box' && !own.has(sh) && cards.some(d => d.sh === sh && !(sh === 'hexagon' && d.k === 'm-hook')))
-    .map(sh => `<span class="lgi" title="${esc(SHAPE_SAYS[sh].join(' — '))}">${swatchOf(sh, 'file', 'var(--um-muted)', 'var(--um-panel)')}<b>${SHAPE_SAYS[sh][0]}</b><span>${SHAPE_SAYS[sh][1]}</span></span>`)
-    .concat(cards.some(d => d.comp) ? [`<span class="lgi" title="${esc(SHAPE_SAYS.component.join(' — '))}"><svg class="lgs" viewBox="0 0 16 16" aria-hidden="true"><g fill="none" stroke="var(--um-muted)" stroke-linecap="round" stroke-linejoin="round">${SIGIL.component}</g></svg><b>${SHAPE_SAYS.component[0]}</b><span>${SHAPE_SAYS.component[1]}</span></span>`] : []);
+    .map(sh => `<span class="lgi" title="${esc(SHAPE_SAYS[sh].join(' — '))}">${swatchOf(sh, 'file', 'var(--um-muted)', 'var(--um-panel)')}<b>${SHAPE_SAYS[sh][0]}</b><span>${SHAPE_SAYS[sh][1]}</span></span>`);
   return kinds.map(k => `<span class="lgi" title="${esc(KIND[k][1] + ' — ' + KIND[k][2])}">${kindShape(k) ? swatchOf(kindShape(k), k, tone(k), `var(--um-${KIND[k][0]}-f)`, dashOf(k)) : `<i class="${shape(k)}" style="border-color:${tone(k)};background:var(--um-${KIND[k][0]}-f)${k === 'm-hook' ? `;background:${tone(k)}` : ''}"></i>`}<b>${KIND[k][1]}</b><span>${KIND[k][2]}</span></span>`)
     .concat(shapes)
     .concat(ns.some(n => n.kids || n.opens) ? [`<span class="lgi"><i class="s"></i><b>⤢ Stacked</b><span>${opens}</span></span>`] : [])
@@ -5115,7 +5072,7 @@ function pieces(X, el, o) {
 
   /* the legend: the kinds of cards and lines the view draws, in a box that folds away */
   function legend() {
-    const items = legendItems([X().geo()], undefined, [X().shapes ? X().shapes() : 'box'], X().ctx().D.icons), back = el.legend.contains(el.legend.getRootNode().activeElement);
+    const items = legendItems([X().geo()]), back = el.legend.contains(el.legend.getRootNode().activeElement);
     el.legend.hidden = !items.length;
     el.legend.classList.toggle('folded', folded);
     el.legend.innerHTML = `<div class="t"><span>LEGEND</span><button type="button" id="m-lfold" aria-label="${folded ? 'Show' : 'Hide'} legend" aria-expanded="${!folded}">${folded ? '+' : '–'}</button></div>${items.join('')}`;
@@ -5379,7 +5336,7 @@ export function mountPage(container, model, options = {}) {
       <span class="mbrand"><i></i><span>${esc(D.title || 'Map')}</span></span>
       <nav class="crumbs" id="m-crumbs" aria-label="Breadcrumb"></nav>
       <button class="findbtn" id="m-find" type="button" aria-label="Search nodes and views (${modK})"><span aria-hidden="true">⌕</span><span class="ft">Find a node or view…</span><span class="kbd">${modK}</span></button>
-      <button class="ibtn" id="m-theme" title="Light / dark" aria-label="Dark theme" aria-pressed="false">◐</button><button class="ibtn txt" id="m-shapes" type="button" title="Card shapes: box, c4 or uml">⬡<span class="lbl"></span></button>${(D.stories || []).length ? `
+      <button class="ibtn" id="m-theme" title="Light / dark" aria-label="Dark theme" aria-pressed="false">◐</button>${(D.stories || []).length ? `
       <div class="menu"><button class="ibtn txt" id="m-stories" aria-haspopup="true" aria-expanded="false" title="Stories: walk-throughs of this map">▶<span class="lbl"> Stories</span></button>
         <div class="menu-pop" id="m-stories-pop" hidden>${D.stories.map(s => `<button data-story="${esc(s && s.id)}">${esc((s && (s.title || s.id)) || '')}</button>`).join('')}</div></div>` : ''}${arrOf(D.lenses).some(l => l && l.id) ? `
       <div class="menu"><button class="ibtn txt" id="m-lenses" aria-haspopup="true" aria-expanded="false" title="Lenses: ways to look at this map">◎<span class="lbl"> Lenses</span></button>
@@ -5444,7 +5401,6 @@ export function mountPage(container, model, options = {}) {
     const p = new URLSearchParams(); p.set('view', cur); if (sel) p.set('node', sel);
     if (told) { p.set('story', told.id); p.set('step', told.step + 1); } // the story shown, at its step (#69)
     if (lensOn) p.set('lens', lensOn); // the lens on the map (#94)
-    if (X.override()) p.set('shapes', X.override()); // the notation a reader or the link picked (0.15.0)
     if (Q.get('theme')) p.set('theme', document.documentElement.dataset.theme || Q.get('theme'));
     if (Q.get('reader')) p.set('reader', Q.get('reader')); // check, shot and still describe one run: never in the link a reader shares (issue 136)
     const h = '#' + p.toString();
@@ -5457,8 +5413,6 @@ export function mountPage(container, model, options = {}) {
   const idle = () => new Promise(r => { const t = () => X.busy() ? setTimeout(t, 30) : r(); t(); }); // once no move is under way
   async function follow(load = false) {
     const p = new URLSearchParams(location.hash.slice(1)), my = ++follows, lacks = [], stories = arrOf(D.stories);
-    if (noteOf(p.get('shapes')) && noteOf(p.get('shapes')) !== handle.shapes) handle.shapes = p.get('shapes'); // the link's card shapes (0.15.0)
-    else if (p.get('shapes') && !noteOf(p.get('shapes'))) lacks.push(`no card shapes “${p.get('shapes')}”`);
     const lens = p.get('lens') || null, sid = p.get('story'), at = Math.max(1, Math.floor(+p.get('step')) || 1) - 1;
     const def = sid ? stories.find(s => s && s.id === sid) : null, steps = def ? arrOf(def.steps).filter(s => s && typeof s === 'object') : [], step = steps[Math.min(at, steps.length - 1)];
     linking = { view: null };
@@ -5689,10 +5643,8 @@ export function mountPage(container, model, options = {}) {
   let flowPref = null; try { flowPref = reducedMotion() ? null : localStorage.getItem('visual-flow'); } catch (_) {} // the reader's ≋ and F; under reduced motion no flow is drawn
   const p0 = new URLSearchParams(location.hash.slice(1));
   const v0 = V[p0.get('view')] ? p0.get('view') : rootId;
-  const shapesKey = 'visual-shapes:' + location.pathname; // the reader's notation, kept for this page (0.15.0)
-  const shapes0 = noteOf(p0.get('shapes')) || (() => { try { return noteOf(localStorage.getItem(shapesKey)); } catch (_) { return null; } })() || noteOf(options.shapes);
   const handle = render($('m-canvas'), model, {
-    view: v0, minimap: true, flow: flowPref ? flowPref === '1' : undefined, shapes: shapes0 || undefined,
+    view: v0, minimap: true, flow: flowPref ? flowPref === '1' : undefined,
     on: { story: e => { told = e.step == null ? null : { id: e.story, step: e.step }; app.classList.toggle('story', !!told); pc.story(e);
       const sv = told && stepView(told); if (X && !X.busy() && (!sv || sv === cur || !V[sv])) write(); } }, // a step on another view: in that view's entry, once it shows (#69)
     _page: {
@@ -5719,13 +5671,6 @@ export function mountPage(container, model, options = {}) {
     if (linking && linking.view === e.view) return; // a link's own move: its entry, written once the link has settled
     linking = null; write(true); }); // a new view, a new entry (a move the reader started while a link was followed, too)
   handle.on('lens', e => { lensOn = e.lens; showLens(); write(); });
-  // the header's card shapes (0.15.0): box, c4 and uml in turn, for every view; the page keeps the reader's choice
-  const showShapes = () => { const b = $('m-shapes'), n = handle.shapes, next = NOTATIONS[(NOTATIONS.indexOf(n) + 1) % NOTATIONS.length];
-    b.querySelector('.lbl').textContent = ' ' + n; b.setAttribute('aria-label', `Card shapes: ${n}. Show them as ${next}`); };
-  $('m-shapes').addEventListener('click', () => { const next = NOTATIONS[(NOTATIONS.indexOf(handle.shapes) + 1) % NOTATIONS.length];
-    handle.shapes = next; try { localStorage.setItem(shapesKey, next); } catch (_) {} showShapes(); write(); status(`Card shapes: ${next}`); });
-  handle.on('state', e => { if (e.changed.includes('shapes')) showShapes(); });
-  showShapes();
   // #pdf=1 (umlimator.py pdf, #93): the page becomes a document for Chrome to print (printDoc), once the fonts are in,
   // after the map's own redraw for them
   if (Q.get('pdf')) (document.fonts ? document.fonts.ready : Promise.resolve()).then(() => printDoc(X, model, Q));
@@ -5737,13 +5682,14 @@ export function mountPage(container, model, options = {}) {
    - The cover: the title, the date, the model's file, a summary line and the contents, each view with its page.
    - Each view, from a page of its own: a header (the view's path and its caption), its picture (toSVG()'s, in vectors)
      as large as the page allows and never larger than drawn, the legend of what it draws, then tables of its cards,
-     lines and boxes (on a typed view: each element's type and members, as its type prints them, and each line's kind).
+     lines and boxes (on a typed view, "Elements": each element's type and members, or its type's word and rows, and each
+     line's kind).
      They fill two columns below the picture, or one column beside a picture too tall to leave room below. A table that
      runs out of room goes on in the next column, under its heading and header row again; a row is never cut, and a
      heading never ends a column.
    - The rules, when the model has any: each holding or broken in the views printed, and what breaks it. */
 function printDoc(X, model, Q) {
-  const { D, views, V, N, chain, nodeIn, viewEdges, geoCache } = X.ctx();
+  const { D, views, V, N, chain, viewEdges, geoCache } = X.ctx();
   const only = (Q.get('views') || '').split(',').filter(Boolean), want = v => !only.length || only.some(p => p.endsWith('*') ? v.id.startsWith(p.slice(0, -1)) : v.id === p);
   const shown = views.filter(want).map(v => [v, X.standalone(1, v.id)]).filter(([, s]) => s), on = new Set(shown.map(([v]) => v.id));
   const rs = shown.length ? arrOf(model.rules).filter(r => r && typeof r === 'object' && (r.from || r.to || r.noCycles)) : []; // as rules() reads them; none without a view
@@ -5751,7 +5697,6 @@ function printDoc(X, model, Q) {
   const [pw, ph] = Q.get('paper') === 'letter' ? [279.4, 215.9] : [297, 210], title = esc(D.title || 'Map'); // the paper across, in mm
   const count = (k, w, ws = w + 's') => `${k} ${k === 1 ? w : ws}`, T = v => esc(v.title || v.id), full = c => Object.assign(c, { full: true });
   const cards = v => arrOf(v.nodeIds).filter(i => N[i]), lines = v => viewEdges(v).filter(e => e.from !== e.to), boxes = v => arrOf(v.containers).filter(c => c && c.id); // as describe() reads a view
-  const name = (v, id) => esc(N[id] ? nodeIn(id, v.id).label || id : (boxes(v).find(c => c.id === id) || {}).label || id);
   document.title = D.title || 'Map'; document.body.removeAttribute('class');
   document.body.innerHTML = `<style>@page { size: ${pw}mm ${ph}mm; margin: 11mm 13mm 9mm; background: var(--um-bg); }
     html, body { -webkit-print-color-adjust: exact; print-color-adjust: exact; background: var(--um-bg); } body { margin: 0; background-image: none; }
@@ -5828,14 +5773,11 @@ function printDoc(X, model, Q) {
     ...(rs.length ? ['<tr><td>Rules</td><td class="pg" data-pg="rules"></td></tr>'] : [])] }]);
 
   shown.forEach(([v, svg], vi) => {
-    const g = geoCache[v.id].g, ids = cards(v), es = lines(v), seq = v.render === 'sequence', stepped = es.some(e => e.step != null), at = Object.fromEntries(g.nodes.map(n => [n.id, n]));
-    const wk = new Map(g.edges.flatMap(d => edgeRefIds(d).map(id => [id, d.wk]))), held = boxes(v).map(c => [c, arrOf(c.nodeIds).filter(i => ids.includes(i))]).filter(([, ins]) => ins.length);
-    const typed = (v.diagram ?? 'map') !== 'map', word = t => String(t || '').split('.').pop().replace(/([a-z])([A-Z])/g, (_, a, b) => a + ' ' + b.toLowerCase()); // 'uml.DataType': "Data type"
-    const asText = (diagramOf(v)?.member || {}).print || (m => m.label ?? m.id); // a member as its type writes it, else its name
+    const g = geoCache[v.id].g, made = tablesOf(X.ctx(), v, g), [ids, es, held] = made.map(t => t.rows), tables = made.filter(x => x.rows.length);
     const up = chain(v.id).slice(0, -1).map(id => `<span class="up">${T(V[id])} › </span>`).join('');
     const head = more => `<header>${more ? `<div class="h2">${up}${T(v)} <span class="up">(continued)</span></div>` : `<h2>${up}${T(v)}</h2>`}<span class="meta">${[count(ids.length, 'card'), count(es.length, 'line'), ...(held.length ? [count(held.length, 'box', 'boxes')] : [])].join(' · ')}</span></header>${!more && v.caption ? `<p class="cap">${esc(v.caption)}</p>` : ''}`;
     const body = sheet(head(false), vi);
-    body.insertAdjacentHTML('beforeend', `<figure>${svg}</figure><div class="lg"><b>Legend</b>${legendItems([g], 'opens a view of its own', [geoCache[v.id].shapes], D.icons).join('')}</div>`);
+    body.insertAdjacentHTML('beforeend', `<figure>${svg}</figure><div class="lg"><b>Legend</b>${legendItems([g], 'opens a view of its own').join('')}</div>`);
     // the picture as large as the page allows, never larger than drawn: below it the legend, then two columns of tables;
     // one too tall for that keeps the page's height, with the legend and one column beside it. Smaller (down to 70%, and
     // to a scale of 0.6 at least) when that keeps the tables on its page; else they go on over the next pages.
@@ -5845,15 +5787,6 @@ function printDoc(X, model, Q) {
     body.classList.toggle('side', side);
     const lay = (f, more) => { s.setAttribute('width', b.width * k * f); s.setAttribute('height', b.height * k * f); body.querySelector('.cols')?.remove();
       const first = cols(body, side ? 1 : 2); if (side) first[0].append(lg); return pour(paging(more && head, 2, first), tables); };
-    const tables = [
-      { title: `Cards <span>${ids.length}</span>`, cls: 'cards', head: `<th>Card</th><th>Kind</th><th>${typed ? 'Members' : 'What it is'}</th>`, rows: ids.map(id => { const c = nodeIn(id, v.id), t = KIND[kindOf(c.kind, true)], d = at[id] || {}, sub = c.sublabel ?? c.sub;
-        return `<tr><td>${d.step ? `<i class="num">${esc(d.step)}</i>` : ''}<b>${esc(c.label || id)}</b>${d.kids || d.opens ? ' ⤢' : ''}${sub ? `<small>${esc(sub)}</small>` : ''}</td>`
-          + (typed ? `<td>${esc(word(c.type || 'uml.Class'))}</td><td>${arrOf(c.members).filter(m => m && typeof m === 'object').map(m => `<p>${esc(asText(m))}</p>`).join('')}</td></tr>`
-            : `<td><i class="sw" style="border-color:var(--um-${t[0]});background:var(--um-${t[0]}-f)"></i>${t[1]}</td><td>${c.what ? md(c.what) : ''}</td></tr>`); }) },
-      { title: `Lines <span>${es.length}</span>`, cls: 'lines', head: `${seq || stepped ? '<th class="n">#</th>' : ''}<th>From → to</th><th>Label</th><th>${typed ? 'Kind' : 'Technology'}</th>`, rows: (stepped && !seq ? [...es].sort((a, b) => stepOrder(a.step, b.step)) : es).map((e, i) => { const w = wk.get(e._id) || 'calls';
-        return `<tr>${seq ? `<td>${i + 1}</td>` : stepped ? `<td>${esc(e.step ?? '')}</td>` : ''}<td><i class="w" style="border-color:var(--um-w-${w})"></i>${name(v, e.from)} → ${name(v, e.to)}</td><td>${e.label ? esc(e.label) : typed ? '' : `<span class="up">${w}</span>`}</td><td>${esc(typed ? word(e.type) : e.sublabel || '')}</td></tr>`; }) },
-      { title: `Boxes <span>${held.length}</span>`, cls: 'boxes', head: '<th>Box</th><th>Holds</th>', rows: held.map(([c, ins]) => `<tr><td><b>${esc(c.label || c.id)}</b></td><td>${andList(ins.map(i => name(v, i)))}</td></tr>`) },
-    ].filter(x => x.rows.length);
     [1, .9, .8, .7].some(f => k * f >= Math.min(k, .6) && lay(f)) || lay(1, true);
   });
 
@@ -5872,6 +5805,25 @@ function printDoc(X, model, Q) {
   all.forEach((p, i) => { p.querySelector('.pn').textContent = `page ${i + 1} of ${all.length}`; });
   doc.querySelectorAll('[data-pg]').forEach(td => { td.textContent = all.findIndex(p => p.dataset.key === td.dataset.pg) + 1; });
 }
+
+// a view's tables, out of printDoc for Node's tests
+function tablesOf({ D, N, nodeIn, viewEdges }, v, g) {
+  const cards = v => arrOf(v.nodeIds).filter(i => N[i]), boxes = v => arrOf(v.containers).filter(c => c && c.id);
+  const name = (v, id) => esc(N[id] ? nodeIn(id, v.id).label || id : (boxes(v).find(c => c.id === id) || {}).label || id);
+  const ids = cards(v), es = viewEdges(v).filter(e => e.from !== e.to), seq = v.render === 'sequence', stepped = es.some(e => e.step != null), at = Object.fromEntries(g.nodes.map(n => [n.id, n]));
+  const wk = new Map(g.edges.flatMap(d => edgeRefIds(d).map(id => [id, d.wk]))), held = boxes(v).map(c => [c, arrOf(c.nodeIds).filter(i => ids.includes(i))]).filter(([, ins]) => ins.length);
+  const typed = (v.diagram ?? 'map') !== 'map', word = t => String(t || '').split('.').pop().replace(/([a-z])([A-Z])/g, (_, a, b) => a + ' ' + b.toLowerCase()); // 'uml.DataType': "Data type"
+  const T = diagramOf(v) || {}, asText = (T.member || {}).print || (m => m.label ?? m.id); // a member as its type writes it, else its name
+  return [
+    { title: `${typed ? 'Elements' : 'Cards'} <span>${ids.length}</span>`, cls: 'cards', head: `<th>Card</th><th>Kind</th><th>${typed ? 'Members' : 'What it is'}</th>`, rows: ids.map(id => { const c = nodeIn(id, v.id), t = KIND[kindOf(c.kind, true)], d = at[id] || {}, sub = c.sublabel ?? c.sub, rs = typed && T.rows?.(D, v, id);
+      return `<tr><td>${d.step ? `<i class="num">${esc(d.step)}</i>` : ''}<b>${esc(c.label || id)}</b>${d.kids || d.opens ? ' ⤢' : ''}${sub ? `<small>${esc(sub)}</small>` : ''}</td>`
+        + (typed ? `<td>${esc(T.word?.(D, id) ?? word(c.type || 'uml.Class'))}</td><td>${(Array.isArray(rs) ? rs : arrOf(c.members).filter(m => m && typeof m === 'object').map(m => asText(m))).map(r => `<p>${esc(r)}</p>`).join('')}</td></tr>`
+          : `<td><i class="sw" style="border-color:var(--um-${t[0]});background:var(--um-${t[0]}-f)"></i>${t[1]}</td><td>${c.what ? md(c.what) : ''}</td></tr>`); }) },
+    { title: `Lines <span>${es.length}</span>`, cls: 'lines', head: `${seq || stepped ? '<th class="n">#</th>' : ''}<th>From → to</th><th>Label</th><th>${typed ? 'Kind' : 'Technology'}</th>`, rows: (stepped && !seq ? [...es].sort((a, b) => stepOrder(a.step, b.step)) : es).map((e, i) => { const w = wk.get(e._id) || 'calls';
+      return `<tr>${seq ? `<td>${i + 1}</td>` : stepped ? `<td>${esc(e.step ?? '')}</td>` : ''}<td><i class="w" style="border-color:var(--um-w-${w})"></i>${name(v, e.from)} → ${name(v, e.to)}</td><td>${e.label ? esc(e.label) : typed ? '' : `<span class="up">${w}</span>`}</td><td>${esc(typed ? word(e.type) : e.sublabel || '')}</td></tr>`; }) },
+    { title: `Boxes <span>${held.length}</span>`, cls: 'boxes', head: '<th>Box</th><th>Holds</th>', rows: held.map(([c, ins]) => `<tr><td><b>${esc(c.label || c.id)}</b></td><td>${andList(ins.map(i => name(v, i)))}</td></tr>`) },
+  ];
+}
 /* A typed view's layout (work package 1.4): layoutGraph's plain layout with what a typed view needs, none of it on a map.
    The parts of layoutPass only a typed view takes are here too (TYPED, registry.js); only lib/umlimator-all.js holds this
    file, as a map never reaches it (risks.md C5).
@@ -5881,8 +5833,8 @@ function printDoc(X, model, Q) {
 
 // what moves a typed view's geometry: every field of the view layoutGraph reads but VIEW_PAINT (a test holds the two lists to
 // layered.js), and these of a node and a line. Anything else (a colour, a `props` field) only repaints
-const VIEW_GEO = ['abs', 'authors', 'blocks', 'containers', 'direction', 'fan', 'flipped', 'gap', 'groups', 'hub', 'intake', 'laneGap', 'lanes', 'mainSteps', 'nodeH', 'quick', 'repair', 'reroute', 'rgap', 'turned', 'typed'];
-const VIEW_PAINT = ['tour', 'subAndChips'], NODE_GEO = ['id', 'col', 'row', 'w', 'h', 'ax', 'ay'], EDGE_GEO = ['id', 'from', 'to', 'label', 'step', 'fromSide', 'toSide', 'back', 'fixed', 'sublabel'];
+const VIEW_GEO = ['abs', 'authors', 'blocks', 'containers', 'direction', 'fan', 'flipped', 'gap', 'groups', 'hub', 'intake', 'labelGaps', 'laneGap', 'lanes', 'mainSteps', 'nodeH', 'quick', 'repair', 'reroute', 'rgap', 'turned', 'typed'];
+const VIEW_PAINT = ['tour', 'subAndChips'], NODE_GEO = ['id', 'col', 'row', 'w', 'h', 'ax', 'ay'], EDGE_GEO = ['id', 'from', 'to', 'label', 'step', 'fromSide', 'toSide', 'back', 'fixed', 'sublabel', 'cut', 'fromPort', 'toPort', 'inner', 'portRank'];
 const geometryKey = dg => JSON.stringify([VIEW_GEO.map(k => dg[k]), (dg.nodes || []).map(n => NODE_GEO.map(k => n[k])), (dg.edges || []).map(e => EDGE_GEO.map(k => e[k]))]);
 
 // direction "down": laid out left to right with every box turned, then turned back, x for y and the sides L for T, R for B
@@ -5892,7 +5844,7 @@ function transpose(g) {
   [...g.nodes, ...(g.families || []), ...new Set(g.edges.flatMap(e => [e.s, e.t]).filter(n => n && n.box)), g.bounds].forEach(flipBox); // a line's end on a box too
   (g.groups || []).forEach(r => { [r.x, r.y, r.x2, r.y2] = [r.y, r.x, r.y2, r.x2]; });
   g.edges.forEach(e => { e.pts = e.pts.map(swapXY); if (e.fixed) e.fixed = e.pts; e.p1 = swapXY(e.p1); e.p2 = swapXY(e.p2);
-    e.fs = SIDE_T[e.fs]; e.ts = SIDE_T[e.ts]; e.stubs = (e.stubs || []).map(s => s.map(swapXY)); flipBox(e.lbl); });
+    e.fs = SIDE_T[e.fs]; e.ts = SIDE_T[e.ts]; e.stubs = (e.stubs || []).map(s => s.map(swapXY)); flipBox(e.lbl); flipBox(e.fpb); flipBox(e.tpb); });
   return g;
 }
 
@@ -5919,6 +5871,67 @@ function layoutTyped(dg, memo) {
   return g;
 }
 
+/* Ports on borders and lines from a box's port inward (work package 5.1, notes/stage-5.md §4, §5, §7, §9.3). The fields a
+   typed view's layout input may carry for them, optional and provisional, none of them read on a map (registry.js points here):
+   - a line's fromPort and toPort: the port (any name, the type's id for it) its from or to end leaves by, on the border of the
+     node or box it names. The type gives every line of a port the port's side as its fromSide or toSide (§4.2); the router
+     never moves it (the side cap's move is undone here), and the ends of one port sit side by side on one square
+   - a line's inner: 'from' or 'to', the end on a box that leaves the box's port inward, to something the box holds (a
+     delegation, §5): the line is not refused for joining a box and what it holds; that end's fromSide or toSide is the way it
+     leaves (a port on the left border leaves right) and its point is on the port's own border
+   - a line's portRank: the port's place in its owner's members, breaking ties in the order of ports along a side; a number,
+     or [from, to] for a line with a port at each end
+   - a box's pad: its padding in px where it is more than stage 2's 12 (48 where it or a box it holds has ports with lines, §7);
+     a box's round: true grows its frame by √2 about its centre, so the ellipse drawn in it holds its contents (§9.3)
+   - a view's labelGaps: true lays the view out once more where a line's label found no spot, was cut short or sits on a box's
+     border, with the column gap it needs widened by the label's width (a map's labelRoom, layered.js; column gaps only, as a
+     typed view's rows are of mixed height; laid out down, the picture's row gaps, by the label's height, so fewer labels
+     gain room); kept if it has fewer issues and labels cut short (§8). The component and
+     deployment types set it (5.4, 5.5); a view without it lays out as before
+   Out of the layout, each line with a port has e.fpb and e.tpb, its port's box at each end: 12 px across the border, centred
+   on it, and 12 + 10 (k - 1) px along it for k lines on one face. A view with ports passes repair: false (risks.md P1): port
+   repair would swap a port's end with another line's.
+   placePorts(sides, turned), from LP.ports: every end that names a port leaves its side's list for the border its port is on,
+   with the other ends on that border, each a group of one; the groups are ordered by the mean of their far ends along the
+   border, ties by portRank, and spread over the border's free span (a box's: below its title, off its corners, as layoutPass
+   spreads a box's ends), 8 px apart (down to 4 where they do not fit, and a warning where they still leave the side),
+   centred; a port's ends 10 px apart on each face */
+const PORT_SIDE = { left: 'L', right: 'R', top: 'T', bottom: 'B' }, PORT_OPP = { L: 'R', R: 'L', T: 'B', B: 'T' };
+function placePorts(sides, turned) {
+  const hot = new Map(), at = (n, side) => { const k = n.id + '|' + side; if (!hot.has(k)) hot.set(k, { n, side, ends: [] }); return hot.get(k).ends; };
+  Object.entries(sides).forEach(([key, list]) => { sides[key] = list.filter(it => { const { e, n } = it, from = n === e.s && (e.s !== e.t || key.endsWith('|R')), port = from ? e.fromPort : e.toPort;
+    if (port == null) return true;
+    const leave = PORT_SIDE[from ? e.fromSide : e.toSide] || key.slice(-1), inner = e.inner === (from ? 'from' : 'to');
+    e[from ? 'fs' : 'ts'] = leave; at(n, inner ? PORT_OPP[leave] : leave).push({ ...it, from, port, inner }); return false; }); });
+  hot.forEach((H, k) => { (sides[k] || []).forEach(it => H.ends.push({ ...it, from: it.n === it.e.s && (it.e.s !== it.e.t || k.endsWith('|R')) })); delete sides[k]; });
+  Object.keys(sides).forEach(k => { if (!sides[k].length) delete sides[k]; });
+  hot.forEach(H => spreadPorts(H, turned));
+}
+function spreadPorts({ n, side, ends }, turned) {
+  const v = side === 'L' || side === 'R', a0 = v ? n.y : n.x, len = v ? n.h : n.w, far = x => v ? x.other.y + x.other.h / 2 : x.other.x + x.other.w / 2;
+  const rank = x => { const r = x.e.portRank; return (Array.isArray(r) ? r[x.from ? 0 : 1] : r) ?? 1e9; }, byFar = (a, b) => far(a) - far(b), groups = [];
+  ends.forEach(x => { const g = x.port != null && groups.find(o => o.port === x.port); if (g) g.ends.push(x); else groups.push({ port: x.port, ends: [x] }); });
+  groups.forEach(g => { g.faces = [g.ends.filter(x => !x.inner).sort(byFar), g.ends.filter(x => x.inner).sort(byFar)];
+    g.at = g.ends.reduce((a, x) => a + far(x), 0) / g.ends.length; g.L = g.port == null ? 2 : 2 + 10 * Math.max(...g.faces.map(f => f.length)); });
+  groups.sort((a, b) => a.at - b.at || rank(a.ends[0]) - rank(b.ends[0]));
+  let lo = a0 + 8, hi = a0 + len - 8;
+  if (n.box) { const across = turned ? !v : v; // as layoutPass spreads a box's ends: below the title on a side, off the title and corners elsewhere
+    lo = across ? a0 + 40 : Math.max(a0 + 20, turned && side === 'L' ? n.y + n.hd + 16 : -Infinity, ...(side === 'T' ? n.decoT : []).map(([x, w]) => x + w + 8));
+    hi = a0 + len - (across ? 16 : 20); }
+  const sum = groups.reduce((a, g) => a + g.L, 0), k = groups.length - 1, gap = k ? Math.max(4, Math.min(8, (hi - lo - sum) / k)) : 0;
+  if (sum + gap * k > (n.box ? hi - lo : len)) warn(`the ports on the ${Object.keys(PORT_SIDE).find(w => PORT_SIDE[w] === (turned ? SIDE_T[side] : side))} side of "${n.id}" do not fit it: they need ${Math.ceil(sum + gap * k)} px, it has ${Math.floor(n.box ? hi - lo : len)}`);
+  const B = side === 'L' ? n.x : side === 'R' ? n.x + n.w : side === 'T' ? n.y : n.y + n.h;
+  let s = (lo + hi - sum - gap * k) / 2;
+  groups.forEach(g => { const box = v ? { x: B - 6, y: s, w: 12, h: g.L } : { x: s, y: B - 6, w: g.L, h: 12 };
+    g.faces.forEach(face => face.forEach((x, j) => { const c = g.port == null ? s + 1 : s + 6 + 10 * j;
+      x.e[x.from ? 'p1' : 'p2'] = v ? [B, c] : [c, B]; if (g.port != null) x.e[x.from ? 'fpb' : 'tpb'] = { ...box }; }));
+    s += g.L + gap; });
+}
+// A typed view's box as frameOf measured it with stage 2's 12 px of padding: its pad widens that on every side, and round
+// grows it by √2 about its centre (above). Neither: the box as it was
+TYPED.frame = b => { const d = b.pad > 12 ? b.pad - 12 : 0, k = b.round ? Math.SQRT2 : 1; if (!d && k === 1) return b;
+  const w = (b.w + 2 * d) * k, h = (b.h + 2 * d) * k; return Object.assign(b, { x: b.x + (b.w - w) / 2, y: b.y + (b.h - h) / 2, w, h }); };
+
 // A typed view's lines from a node to itself (risks.md F1) are loops round its top right corner, nested, the first innermost:
 // each one's top run D px above the node, its label on that run clear of the node's stub room and of the loop inside; its
 // right run R px right of the node, far enough for the top run to hold the label. out: how far each loop's port on the
@@ -5928,20 +5941,32 @@ const loopDims = (dg, STUB, SEP) => (list, out) => { let D = 0, R = 0, half = 0;
     D = k ? D + half + bh / 2 + 10 : STUB + 6 + bh / 2; half = bh / 2;
     R = Math.max(k ? R + 2 * SEP : STUB + 4, bw + 12 - out[k]); return { D, R, top: D + half }; }); };
 // layoutPass's loops (LP): fills loops (by node id, the lines from it to itself) and makes room for them; then mark(edges),
-// each such line routed here, not by the router; ports(pushSide): the top port of the node's right side and the right port
-// of its top, the inner loop the nearer the corner; route(): each loop out of the right side, up, left and down into the
-// top, and its corners, which the other routes keep SEP px off, so none touches it or turns where it does
+// each such line routed here, not by the router; ports(pushSide, sides): the top port of the node's right side and the right port
+// of its top, the inner loop the nearer the corner, then the ends of lines that name a port (placePorts, above); route(): each
+// loop out of the right side, up, left and down into the top, and its corners, which the other routes keep SEP px off, so none
+// touches it or turns where it does
 TYPED.loops = (loops, dg, { byId, extraX, extraY, STUB, RG, CG, SEP, gapAfter }) => {
   const dims = loopDims(dg, STUB, SEP); let edges = [];
   (dg.edges || []).forEach(e => { if (e.from === e.to && byId[e.from]) (loops[e.from] ||= []).push(e); });
   Object.entries(loops).forEach(([id, list]) => { const n = byId[id], d = dims(list, list.map(() => 0)).at(-1);
     extraY[n.row - .5] = Math.max(extraY[n.row - .5] || 0, d.top + STUB + 7 - RG);
     extraX[n.col] = Math.max(extraX[n.col] || 0, d.R + STUB + 6 - Math.max(CG, gapAfter[n.col] || 0)); });
+  // a port with k lines on one face (5.1) needs k tracks between its stubs and the next column's (row's): room beside it. A
+  // box's port: beside the column (row) of its cards its border faces, and its pad more
+  const boxes = dg.containers || [], inBox = (id, seen = new Set()) => seen.has(id) ? [] : (seen.add(id), boxes.filter(f => f.id === id)
+    .flatMap(f => [...(f.nodeIds || []).map(i => byId[i]).filter(Boolean), ...boxes.filter(c => c.parent === id).flatMap(c => inBox(c.id, seen))]));
+  const busy = {}; (dg.edges || []).forEach(e => [[e.from, e.fromPort, e.fromSide, 'from'], [e.to, e.toPort, e.toSide, 'to']].forEach(([id, p, side, end]) => {
+    if (p != null && e.inner !== end && PORT_SIDE[side]) { const k = id + '|' + PORT_SIDE[side] + '|' + p; busy[k] = (busy[k] || 0) + 1; } }));
+  Object.entries(busy).forEach(([k, m]) => { const [id, side] = k.split('|'), ns = byId[id] ? [byId[id]] : inBox(id); if (m < 2 || !ns.length) return;
+    const need = m * SEP + 2 * STUB + 8 + (byId[id] ? 0 : Math.max(12, ...boxes.filter(f => f.id === id).map(f => f.pad || 0))), at = x => ns.map(n => n[x]);
+    if (side === 'R' || side === 'L') { const c = side === 'R' ? Math.floor(Math.max(...at('col'))) : Math.ceil(Math.min(...at('col'))) - 1; extraX[c] = Math.max(extraX[c] || 0, need - Math.max(CG, gapAfter[c] || 0)); }
+    else { const r = side === 'B' ? Math.max(...at('row')) + .5 : Math.min(...at('row')) - .5; extraY[r] = Math.max(extraY[r] || 0, need - RG); } });
   const loopsOf = n => edges.filter(e => e[OWN_ROUTE] === 'loop' && e.s === n);
   return {
     mark(all) { edges = all; edges.forEach(e => { if (e.s === e.t) Object.assign(e, { [OWN_ROUTE]: 'loop', fixed: true, fs: 'R', ts: 'T', stubs: [], how: 'self' }); }); }, // its loop is drawn once its ports are known
-    ports: pushSide => edges.filter(e => e[OWN_ROUTE] === 'loop').forEach(e => { const n = e.s, k = loopsOf(n).indexOf(e);
-      pushSide(n, 'R', e, { x: n.x + n.w, y: -1e6 + k, w: 0, h: 0 }); pushSide(n, 'T', e, { x: 1e6 - k, y: n.y, w: 0, h: 0 }); }),
+    ports(pushSide, sides) { edges.filter(e => e[OWN_ROUTE] === 'loop').forEach(e => { const n = e.s, k = loopsOf(n).indexOf(e);
+      pushSide(n, 'R', e, { x: n.x + n.w, y: -1e6 + k, w: 0, h: 0 }); pushSide(n, 'T', e, { x: 1e6 - k, y: n.y, w: 0, h: 0 }); });
+      if (sides) placePorts(sides, dg.turned); },
     route() { const corners = []; [...new Set(edges.filter(e => e[OWN_ROUTE] === 'loop').map(e => e.s))].forEach(n => { const list = loopsOf(n);
       dims(list, list.map(e => n.x + n.w - e.p2[0])).forEach(({ D, R }, k) => { const e = list[k], x = n.x + n.w + R, y = n.y - D;
         e.pts = e.fixed = [e.p1, [x, e.p1[1]], [x, y], [e.p2[0], y], e.p2];
@@ -6040,9 +6065,11 @@ SHAPE.classifier = CLASSIFIER;
 // and to name an end in this table, the line's ends as UML draws them (none, or a name it does not hold, draws no marker);
 // dashed: a dependency's or realization's line; labels: each end's role and multiplicity (endLabels). Each end: [its
 // length, half its height, its path pointing right with the tip at its length, its fill]. Its tip is where the line ends,
-// on the node's outline. Hollow is the stage's background, filled the line's own colour (T2), in either theme
+// on the node's outline. Hollow is the stage's background, filled the line's own colour (T2), in either theme. The socket
+// (notes/stage-5.md §9.2) is a usage's end on an interface drawn as a 16 px ball: a half circle of radius 11 open towards the
+// ball, its middle on the line 3 px before the end (the ball's outline), its centre 8 px past it (the ball's)
 const ENDS = { none: null, arrow: [10, 4, 'M0 0L10 4L0 8Z', 'line'], open: [10, 5, 'M0 0L10 5L0 10', 'none'], triangle: [13, 7, 'M0 0L13 7L0 14Z', 'hollow'],
-  diamond: [16, 6, 'M0 6L8 0L16 6L8 12Z', 'hollow'], 'filled-diamond': [16, 6, 'M0 6L8 0L16 6L8 12Z', 'line'] };
+  diamond: [16, 6, 'M0 6L8 0L16 6L8 12Z', 'hollow'], 'filled-diamond': [16, 6, 'M0 6L8 0L16 6L8 12Z', 'line'], socket: [3, 11, 'M11 0A11 11 0 0 0 11 22', 'none'] };
 const endOf = (E, w) => hasKey(ENDS, E[w]) && ENDS[E[w]] ? E[w] : null;
 
 // a typed line's end labels (1.5): each end's role and multiplicity (e.end.labels: { from: { role, mult }, to: { role, mult } }),
@@ -6069,8 +6096,14 @@ function endLabels(e, pts = e.pts, also = []) { // also: boxes to keep clear of
 }
 
 // svgOf's typed lines (TYPED.lines): { id, edges, drawn, lstyle, MC } -> defs, the markers of the ends drawn; edge(e, i), a
-// line with ends: its style, its points trimmed for its flow, its markers; labels(i): its end labels' text
+// line with ends: its style, its points trimmed for its flow, its markers; labels(i): its end labels' text.
+// First each end on a node drawn by a typed shape with an inset (a circle, a diamond: notes/stage-4.md §4.2) is slid from
+// the node's box onto its outline, as a map's on its cards: drawn[i] becomes a copy (drawnPts), so the layout's points,
+// which a memo hands back (Q13), are never changed. Every typed shape with an inset gets the
+// copy, its ends rounded; where the inset is 0 (the classifier, a package, an object) the ends stay on the box
+const insetLook = n => { const S = n && hasKey(SHAPE, n.shape) ? SHAPE[n.shape] : null; return S && S.draw && S.inset ? { ...n, S } : null; };
 TYPED.lines = ({ id, edges, drawn, lstyle, MC }) => {
+  edges.forEach((e, i) => { if (e.pts) drawn[i] = drawnPts(e, insetLook); });
   const ends = [...new Set(edges.flatMap(e => e.end ? ['from', 'to'].map(w => endOf(e.end, w)).filter(Boolean).map(k => k + '-' + lstyle(e).m) : []))];
   const endMark = km => { const k = km.slice(0, km.lastIndexOf('-')), m = km.slice(k.length + 1), [L, H, p, fl] = ENDS[k];
     return `<marker id="${id}-${km}" markerWidth="${L}" markerHeight="${2 * H}" refX="${L}" refY="${H}" orient="auto-start-reverse" markerUnits="userSpaceOnUse" overflow="visible"><path d="${p}" fill="${fl === 'line' ? MC[m] : fl === 'hollow' ? 'var(--um-stage-bg)' : 'none'}" stroke="${MC[m]}" stroke-width="1.5" stroke-linejoin="round" stroke-linecap="round"/></marker>`; };
@@ -6103,6 +6136,23 @@ TYPED.lines = ({ id, edges, drawn, lstyle, MC }) => {
    - wrap(model, view, ids, kind): W, then a picker of the type's `wraps` (strings, or entries with a label).
    - add(model, view, entry, label, at): the palette and N, once the name is typed; at as for L, with sel, the ids selected.
    - remove(model, view, ids, fromModel): Delete (fromModel false), Shift + Delete, the panel's buttons and the outline's ✕.
+   - rename(model, view, id, text): F2 or a double-click on a selected element, Enter with the text typed (I.label). Null:
+     set label, as before (notes/stage-4.md §12.1). An id may be a geometry id no element has (a port on a part,
+     `<part>-><port>`, notes/stage-5.md §6): rename, remove and key hear it as drawn, and map it back themselves.
+   - member(model, view, owner, id, text): Enter or a change on a row of the panel's Members (id: the member's; null for the
+     New member field), owner the element selected, text trimmed, before the panel commits it (notes/stage-5.md §12.1, S13).
+     Null: the type's member.add or member.edit, as before. An { error } also marks the row invalid; a row read by the hook
+     is cleared (New member) or kept as typed, after a pick's choice. Not asked for an empty row (the panel's own).
+   - key(model, view, ids, key): a key (e.key) with no Alt, Ctrl or Meta on a selection (ids, as remove's), before the
+     canvas's own (S11). Null: the canvas's. Asked only when the host lets the view be renamed (B on an interface sets present).
+     It hears every such key first, Escape, Tab, Enter (a focused ring's, before the ring selects) and the arrows too, and
+     only e.key (Shift + Delete reads as Delete): return null for the keys the type does not own.
+   Any hook may also return { pick: [label, …], then: i => result }: a picker of the labels opens under the element selected
+   (else the view's first node), and the index chosen goes to then, whose result is read as the hook's; an empty pick is
+   said and does nothing. A palette entry with name: false is added with no name field (add gets an empty label; with no
+   add hook, the element has no label). moveTo's at, for a card dropped or Alt + arrows, holds geo, the canvas's geometry.
+   V on a selected node whose palette entry has opens (a diagram kind, 'uml.sequence'), under rename: a picker of the
+   model's views of that kind, then set opensView.
    A slot is an entry of the geometry's `slots` ({ index, y, parent, after }, src/layout/timeaxis.js; x too where a type has
    one); with none, at is null. A view's fragments (view.fragments) are elements too: selected, they show their properties and
    their members (operands) in the panel, as a card does; a double-click on a selected member drawn as a card (an operand's
@@ -6119,20 +6169,37 @@ TYPED.edit = (I, c) => {
   const keyAt = () => { const S = slots(), s = api.sel(), id = s && (s.id ?? arrOf(s.ids)[0]); return S.find(x => x.after != null && x.after === id) || S.at(-1) || null; };
   const world = ev => { const r = api.stage.getBoundingClientRect(); return api.cam().toWorld(ev.clientX - r.left, ev.clientY - r.top); };
   // what a hook returned: null, the default; { error }, said; else its commands
-  const ran = (r, dflt) => { if (r == null) return dflt();
+  const ran = (r, dflt = () => true) => { if (r == null) return dflt();
+    if (isRec(r) && Array.isArray(r.pick) && typeof r.then === 'function') return choose(r.pick, i => ran(r.then(i), dflt));
     if (isRec(r) && r.error != null) { api.status(String(r.error)); api.say(String(r.error)); return false; }
     if (isRec(r) && Array.isArray(r.commands)) { if (r.say != null) { api.status(String(r.say)); api.say(String(r.say)); } return emit(r.commands); }
     return emit(arrOf(r)); };
   I.ran = ran; // connect's result, read by the core's addLine
+  // a picker of labels under the node at, else the element selected, else the view's first node, opened once the gesture is over (a name
+  // field closing takes the focus back, which would close it). ponytail: a view with no node has nothing to hold it, so
+  // nothing opens; c.picker taking a point would lift that
+  function choose(labels, done, name = 'Choose', at) { const g = api.geo(), s = api.sel(), by = g.byId || {}; at ??= s && Object.hasOwn(by, s.id) ? s.id : (g.nodes[0] || {}).id;
+    if (!labels.length || at == null || !Object.hasOwn(by, at) || !api.cam()) { api.status('Nothing to choose from'); api.say('Nothing to choose from'); return false; }
+    const opts = labels.map(l => ({ label: String(l) }));
+    queueMicrotask(() => { c.picker(at, opts, t => done(opts.indexOf(t))); const m = api.stage.querySelector('.um-pick'); if (m) m.setAttribute('aria-label', name); });
+    return true; }
 
   I.connect = (from, to, ev, at) => base.connect(from, to, ev, at !== undefined ? at : ev ? near(...world(ev)) : keyAt());
   I.drop = (n, hint, into, from) => { const h = hook('moveTo'), dflt = () => base.drop(n, hint, into, from), dy = hint.y - (n.y + n.h / 2);
     const g = api.geo(), col = arrOf((view() || {}).nodeIds).filter(id => id !== n.id && isRec(g.byId[id]) && g.byId[id].x + g.byId[id].w / 2 < hint.x).length;
-    return h && can('move') ? ran(h(model(), view(), n.id, { ...near(hint.x, hint.y + Math.sign(dy) * n.h / 2), pt: [hint.x, hint.y], col }), dflt) : dflt(); };
-  I.addNode = i => { const h = hook('add'), t = c.nodeTypes()[i], cam = api.cam(); if (!h || !t || !can('add') || !cam) return base.addNode(i);
+    return h && can('move') ? ran(h(model(), view(), n.id, { ...near(hint.x, hint.y + Math.sign(dy) * n.h / 2), pt: [hint.x, hint.y], col, geo: g }), dflt) : dflt(); };
+  I.addNode = i => { const h = hook('add'), t = c.nodeTypes()[i], cam = api.cam(); if (!t || !can('add') || !cam || (!h && t.name !== false)) return base.addNode(i);
     const s = keyAt(), at = s && { ...s, sel: c.picks() }; // where the selection is now, before the name field takes the focus
-    api.editor({ x: cam.s.cx - 80, y: cam.s.cy - 13, w: 160, h: 26 }, '', label => ran(h(model(), view(), t, label, at),
-      () => emit([{ op: 'add', element: { ...c.typed(t, 'node'), label }, view: api.view() }]))); };
+    const go = label => ran(h && h(model(), view(), t, label, at), () => emit([{ op: 'add', element: { ...c.typed(t, 'node'), ...(label ? { label } : {}) }, view: api.view() }]));
+    if (t.name === false) return go('');
+    api.editor({ x: cam.s.cx - 80, y: cam.s.cy - 13, w: 160, h: 26 }, '', go); };
+  I.label = (ref, text) => { const h = hook('rename'), id = ref && (ref.type === 'edge' ? arrOf(ref.ids).find(x => !String(x).includes('->')) : ref.id), dflt = () => base.label(ref, text);
+    return h && can('rename') && id != null ? ran(h(model(), view(), id, text), dflt) : dflt(); };
+  // V: the views a selected node may open, by its palette entry's opens; the one chosen is its opensView (notes/stage-4.md S18)
+  function opens(id) { const x = arrOf(model().nodes).find(n => isRec(n) && n.id === id), t = x && c.nodeTypes().find(e => e.type === x.type && typeof e.opens === 'string');
+    if (!t) return false;
+    const vs = arrOf(model().views).filter(v => isRec(v) && v.diagram === t.opens);
+    choose(vs.map(v => v.title ?? v.id), i => emit([{ op: 'set', id, path: 'opensView', value: vs[i].id }]), 'Opens view', id); return true; }
   I.remove = (fromModel, ids = c.picks()) => { const h = hook('remove'), dflt = () => base.remove(fromModel, ids);
     return h && can('delete') && ids.length ? ran(h(model(), view(), ids, !!fromModel), dflt) : dflt(); };
   function wrap(ids) { // W: the picker of the type's wraps, under the first card selected, else under the far end of the first line
@@ -6144,9 +6211,11 @@ TYPED.edit = (I, c) => {
   }
   I.key = e => {
     if (I.linking()) return base.key(e);
-    const K = e.key, ids = c.picks(), mv = hook('moveTo');
-    if (e.altKey && DIR[K] && mv && ids.length && can('move')) { const r = mv(model(), view(), ids.at(-1), { by: DIR[K] }); if (r == null) return base.key(e); ran(r); return true; }
+    const K = e.key, ids = c.picks(), mv = hook('moveTo'), kh = hook('key');
+    if (kh && ids.length && !e.altKey && !e.ctrlKey && !e.metaKey && can('rename')) { const r = kh(model(), view(), ids, K); if (r != null) { ran(r); return true; } }
+    if (e.altKey && DIR[K] && mv && ids.length && can('move')) { const r = mv(model(), view(), ids.at(-1), { by: DIR[K], geo: api.geo() }); if (r == null) return base.key(e); ran(r, () => base.key(e)); return true; }
     if ((K === 'w' || K === 'W') && !e.altKey && hook('wrap') && can('add') && ids.length) { wrap(ids); return true; }
+    if ((K === 'v' || K === 'V') && !e.altKey && !e.ctrlKey && !e.metaKey && can('rename') && ids.length && opens(ids.at(-1))) return true;
     return base.key(e);
   };
 
@@ -6209,6 +6278,22 @@ TYPED.edit = (I, c) => {
     if (b) memberMove(b.dataset.up ?? b.dataset.down, b.dataset.up != null ? -1 : 1, e); }, true);
   api.root.addEventListener('keydown', e => { const t = e.target;
     if (e.altKey && t && t.closest && t.closest('.um-editor') && t.dataset.m != null && (e.key === 'ArrowUp' || e.key === 'ArrowDown')) memberMove(t.dataset.m, e.key === 'ArrowUp' ? -1 : 1, e); }, true);
+  /* a member row, Enter or a change on it: edits.member first, before the panel's commit (which listens on the panel, under root) */
+  const row = e => { const t = e.target, d = t && t.dataset, h = hook('member'), s = api.sel();
+    if (!h || !d || (d.new == null && d.m == null) || !t.closest || !t.closest('.um-editor') || !I.on() || !s || s.id == null || !can(d.new != null ? 'add' : 'rename')) return;
+    if (d.m != null && t.value === d.was) return;
+    const text = t.value.trim(); if (!text) return; // empty: the panel's own (nothing added; a row put back)
+    const r = h(model(), view(), s.id, d.m ?? null, text); if (r == null) return;
+    e.preventDefault(); e.stopPropagation();
+    // the row is settled by the result read, after a pick's choice (a cancelled pick keeps the row as typed)
+    const settle = x => { if (x == null) return x;
+      if (isRec(x) && Array.isArray(x.pick) && typeof x.then === 'function') return { ...x, then: i => settle(x.then(i)) };
+      if (isRec(x) && x.error != null) t.setAttribute('aria-invalid', 'true');
+      else { t.removeAttribute('aria-invalid'); if (d.new != null) t.value = ''; else d.was = t.value; }
+      return x; };
+    ran(settle(r)); };
+  api.root.addEventListener('keydown', e => { if (e.key === 'Enter') row(e); }, true);
+  api.root.addEventListener('change', row, true);
 };
 /* ---------- owners on the picture (work package 2.2, notes/stage-2.md §4 to §7) ----------
    What the class, package and object views share: which shown package is a box and what it holds (§4.1), the names drawn
@@ -6223,13 +6308,16 @@ const ownName = x => String(x.label ?? x.id);
 const stereoOf = x => OWN_ARR(OWN_OBJ(x.props) ? x.props.stereotypes : null).filter(t => t != null && t !== '').map(String);
 
 // every node of a model by id (the first of an id), and the chain of its owners, nearest first. An ownership cycle (the
-// core's error) is broken: an element on one has no owner, and one under one stops at the first element of it it meets
-function ownIndex(model) {
-  const at = new Map(); OWN_ARR(OWN_OBJ(model) ? model.nodes : null).forEach(n => { if (OWN_OBJ(n) && typeof n.id === 'string' && !at.has(n.id)) at.set(n.id, n); });
+// core's error) is broken: an element on one has no owner, and one under one stops at the first element of it it meets.
+// members: the member types indexed too (a state's regions, notes/stage-4.md §6.1), each owned by its node
+function ownIndex(model, members = []) {
+  const at = new Map(), up = new Map(), mems = new Set(), put = (x, p) => { if (OWN_OBJ(x) && typeof x.id === 'string' && !at.has(x.id)) { at.set(x.id, x); up.set(x.id, p); return true; } };
+  OWN_ARR(OWN_OBJ(model) ? model.nodes : null).forEach(n => put(n, n.parent));
+  if (members.length) [...at.values()].forEach(n => OWN_ARR(n.members).forEach(m => { if (OWN_OBJ(m) && members.includes(m.type) && put(m, n.id)) mems.add(m.id); }));
   const chain = id => { const out = [], seen = new Set([id]);
-    for (let p = (at.get(id) || {}).parent; p != null && at.has(p); p = at.get(p).parent) { if (seen.has(p)) return p === id ? [] : out.slice(0, out.indexOf(p) + 1); seen.add(p); out.push(p); }
+    for (let p = up.get(id); p != null && at.has(p); p = up.get(p)) { if (seen.has(p)) return p === id ? [] : out.slice(0, out.indexOf(p) + 1); seen.add(p); out.push(p); }
     return out; };
-  return { at, chain };
+  return { at, chain, up, mems };
 }
 
 /* A view's picture of its owners: { ids, owner(id), holds(o), boxes, name(id), full(id) }. ids: the nodes it shows; owner(id): an
@@ -6237,18 +6325,26 @@ function ownIndex(model) {
    whose owner on the picture o is (null: the top), in the view's order; boxes: the open packages, in
    the registry's format (registry.js boxes), each holding exactly the shown elements whose owner on the picture it is, and
    the boxes nested in it by `parent`; name(id): the drawn name, with the owners between it and its owner on the picture,
-   or with none from the view's subject when that is one of its owners, else from the top (§6); full(id): from the top */
-function ownersOn(model, view) {
-  const { at, chain } = ownIndex(model), ids = OWN_ARR(OWN_OBJ(view) ? view.nodeIds : null).filter(id => at.has(id)), shown = new Set(ids);
-  const ow = new Map(ids.map(id => [id, chain(id).find(p => shown.has(p) && OWN_BOXES.includes(at.get(p).type)) ?? null])), owner = id => ow.get(id) ?? null;
+   or with none from the view's subject when that is one of its owners, else from the top (§6); full(id): from the top.
+   look (notes/stage-4.md §8.2, §6.1), each field optional: boxTypes, the node types that may be a box (OWN_BOXES); qualify
+   false, names drawn without their owners; members, member types that are boxes too (a state's regions): one is shown when
+   its node is and it holds something shown, and is a box when its node has two or more in the model (with one, what it
+   holds sits in the node's box); shape(x) and word(x), a box's shape and the word its accessible name starts with ('package', 'Package') */
+function ownersOn(model, view, look = {}) {
+  const { boxTypes = OWN_BOXES, qualify = true, members = [], shape = () => 'package', word = () => 'Package' } = look;
+  const { at, chain, up, mems } = ownIndex(model, members), ids = OWN_ARR(OWN_OBJ(view) ? view.nodeIds : null).filter(id => at.has(id) && !mems.has(id)), seen = new Set(ids);
+  const live = new Set(ids.flatMap(id => chain(id).filter(p => mems.has(p) && seen.has(up.get(p))))), place = m => OWN_ARR(at.get(up.get(m)).members).indexOf(at.get(m)); // members holding something shown
+  const many = m => OWN_ARR(at.get(up.get(m)).members).filter(x => OWN_OBJ(x) && members.includes(x.type)).length > 1; // §6.1, 2: two or more in the model
+  const kept = [...live].filter(many).sort((a, b) => place(a) - place(b)), all = [...ids, ...kept], shown = new Set(all);
+  const ow = new Map(all.map(id => [id, chain(id).find(p => shown.has(p) && (mems.has(p) || boxTypes.includes(at.get(p).type))) ?? null])), owner = id => ow.get(id) ?? null;
   const upTo = (id, stop) => { const c = chain(id), k = c.indexOf(stop); return [...(k < 0 ? c : c.slice(0, k)).reverse(), id].map(x => ownName(at.get(x))).join('::'); };
   const full = id => upTo(id, null), subject = OWN_OBJ(view) ? view.subject : null;
-  const name = id => { const o = owner(id); return upTo(id, o != null ? o : chain(id).includes(subject) ? subject : null); };
-  const by = new Map(); ids.forEach(id => { const o = owner(id); if (!by.has(o)) by.set(o, []); by.get(o).push(id); }); // grouped once: a view of 10,000 elements
+  const name = id => { const o = owner(id); return !qualify ? ownName(at.get(id)) : upTo(id, o != null ? o : chain(id).includes(subject) ? subject : null); };
+  const by = new Map(); all.forEach(id => { const o = owner(id); if (!by.has(o)) by.set(o, []); by.get(o).push(id); }); // grouped once: a view of 10,000 elements
   const holds = o => by.get(o) || [], open = new Set([...by.keys()].filter(x => x != null));
-  const boxes = ids.filter(id => open.has(id)).map(id => { const p = at.get(id), st = stereoOf(p), held = holds(id), o = owner(id), nm = name(id);
-    return { id, label: ownName(p), title: [...st.map(t => `«${t}»`), nm].join(' '), nodeIds: held.filter(x => !open.has(x)), ...(o != null ? { parent: o } : {}), shape: 'package',
-      aria: `Package ${nm}${st.length ? ` (${st.join(', ')})` : ''}, holding ${held.length} element${held.length === 1 ? '' : 's'}` }; });
+  const boxes = all.filter(id => open.has(id)).map(id => { const p = at.get(id), st = stereoOf(p), held = holds(id), o = owner(id), nm = name(id);
+    return { id, label: ownName(p), title: [...st.map(t => `«${t}»`), nm].join(' '), nodeIds: held.filter(x => !open.has(x)), ...(o != null ? { parent: o } : {}), shape: shape(p),
+      aria: `${word(p)} ${nm}${st.length ? ` (${st.join(', ')})` : ''}, holding ${held.length} element${held.length === 1 ? '' : 's'}` }; });
   return { ids, owner, holds, boxes, name, full, open, chain, at };
 }
 
@@ -9200,3 +9296,3243 @@ function writeMermaidSequence(model, viewId) {
   for (const x of notWritten) out.push(`  %% not written: ${x}`);
   return out.join('\n') + '\n';
 }
+/* ---------- the transition micro-syntax (work package 4.2, notes/stage-4.md §7) ----------
+   UML's `trigger-list ['[' guard ']'] ['/' effect]`, shared by the state machine's transitions and internal transitions,
+   the activity's and the overview's flow labels (src/uml/flow.js) and the Mermaid state reader:
+   - the trigger runs to the first [ or / outside brackets and parentheses: evt(a/b), pay(amount[0]), after 30 days, a, b;
+   - the guard runs from that [ to its matching ], brackets and parentheses nested in it (max(a, b[1]) > 2, x / y > 1);
+   - the effect is everything after the first / outside the guard: any text.
+   Each part is trimmed text, or undefined when absent or empty. Refused, as { error }: an unbalanced or crossed [, ], ( or
+   ) in the trigger or the guard; a second guard, or any text between the guard and the /; a text over 4,096 characters.
+   Hand-written and linear, no regular expression (risks.md R2, E3). Ships in lib/umlimator-all.js only. */
+
+const TR_MAX = 4096, TR_OPEN = { '[': ']', '(': ')' }, TR_CLOSE = { ']': '[', ')': '(' };
+const trPart = x => { const s = x == null ? '' : String(x).trim(); return s === '' ? undefined : s; };
+
+// the parts and where the effect's / is (-1 for none), so a caller can tell "a /" from "a / x"; form: what the error says the text should be
+function trScan(text, form = 'a transition is trigger [guard] / effect') {
+  const s = String(text ?? ''), fail = why => ({ error: `${form}: ${why}` });
+  if (s.length > TR_MAX) return fail(`the text is over ${TR_MAX} characters`);
+  const stack = []; let i = 0, guardAt = -1, guardEnd = -1, slash = -1;
+  for (; i < s.length && slash < 0; i++) { const c = s[i];
+    if (guardEnd >= 0) { // after the guard: spaces, then the effect's /
+      if (c === '/') slash = i; else if (c === '[') return fail('it has a second guard'); else if (c.trim()) return fail(`"${c}" after the guard, where only / effect may follow`);
+    } else if (TR_OPEN[c]) { if (!stack.length && c === '[' && guardAt < 0) guardAt = i; stack.push(c); }
+    else if (TR_CLOSE[c]) { const o = stack.pop(); if (o !== TR_CLOSE[c]) return fail(`the ${c} at ${i + 1} ${o ? `meets an open ${o}` : 'closes nothing'}`); if (!stack.length && guardAt >= 0) guardEnd = i; }
+    else if (c === '/' && !stack.length) slash = i;
+  }
+  if (stack.length) return fail(`the ${stack[stack.length - 1]} it opens is not closed`);
+  const tEnd = guardAt >= 0 ? guardAt : slash >= 0 ? slash : s.length;
+  return { trigger: trPart(s.slice(0, tEnd)), guard: guardAt >= 0 ? trPart(s.slice(guardAt + 1, guardEnd)) : undefined, effect: slash >= 0 ? trPart(s.slice(slash + 1)) : undefined, slash };
+}
+function parseTransition(text, form) { const r = trScan(text, form); return r.error ? r : { trigger: r.trigger, guard: r.guard, effect: r.effect }; }
+
+// the parts as drawn: "trigger [guard] / effect", each part left out when absent. A text the parser may read otherwise
+// (a host wrote "[" or "/" into a trigger) is drawn so too: printTransition says whether it reads back
+const transitionText = p => [trPart(p && p.trigger), trPart(p && p.guard) && `[${trPart(p.guard)}]`, trPart(p && p.effect) && `/ ${trPart(p.effect)}`].filter(Boolean).join(' ');
+
+// the text that reads back as the same parts (trimmed, an empty part absent), or null when none does (§7.1): the line is
+// then drawn by transitionText, warned of by label-syntax, and edited part by part in the properties panel
+function printTransition(p) {
+  const t = transitionText(p), r = parseTransition(t);
+  return !r.error && ['trigger', 'guard', 'effect'].every(k => r[k] === trPart(p && p[k])) ? t : null;
+}
+/* ---------- control nodes, actions and flows: what the activity, state machine and interaction overview share (work
+   package 4.2, notes/stage-4.md §4.1, §7.2, §9.3) ----------
+   Six shapes, each with size(n), out(n, d), inset(n, side, t), face(n), ports(n, side, k) and draw(n, c, f), as SHAPE.note
+   is (src/uml/class.js). The router reads none of them (Q14): a line ends on the node's box, and the typed line drawer
+   slides each end onto the outline by inset (§4.2). Strokes are --um-muted, fills the stage's background or --um-text (T2),
+   whatever the kind's colours c and f; every text is cut with fit, so none overflows. A node's accessible name is n.aria,
+   which its type writes, else the shape's own word. Hit areas are 24 px at least (E8).
+   - initial: a filled 20 px circle (initial node, initial pseudostate);
+   - final: a ring round a filled circle, 22 px (activity final, final state);
+   - flow-final: a circle with an X, 22 px;
+   - diamond: 28 px with no text; with n.label, grown to hold it on at most two lines of 11 px, each cut at 160 px (S8);
+   - bar: 6 px thick across the flow and max(48, 16 × (n.busy + 1)) long (n.busy: the lines on its busiest side), lying
+     across (L × 6) when n.down, the view being laid out down, else 6 × L; its type sets every line's fromSide or toSide;
+   - rounded: a rectangle with 10 px corners, n.stereotypes «…» over n.label, which wraps to three lines of 180 px and
+     is then cut, 96 to 320 px wide (action, state; their types draw their glyphs and compartments over it).
+   Then the flow rules both the activity and the overview check (§9.3, at S21's levels) and a flow's label (§7.3).
+   Ships in lib/umlimator-all.js only. */
+
+const FL_OBJ = x => x !== null && typeof x === 'object' && !Array.isArray(x), FL_ARR = x => (Array.isArray(x) ? x : []);
+const FL = { line: 'var(--um-muted)', ink: 'var(--um-text)', bg: 'var(--um-stage-bg)', hit: 12, px: 11, lh: 14, dmax: 160, name: 12, nlh: 16, nmax: 180, st: 11, sth: 14, padX: 10, padY: 8, minW: 96, maxW: 320, minH: 36 };
+
+const flowNode = (n, shape, said, inner) => `<g class="node ${shape}" data-id="${esc(n.id)}" data-shape="${shape}" tabindex="-1" role="img" aria-label="${esc(n.aria || said)}">${inner}</g>`;
+const flowSvgText = (x, y, t, px, wt, fill, cls) => `<text x="${r2(x)}" y="${r2(y)}" text-anchor="middle" class="${cls}" fill="${fill}" style="font:${wt} ${px}px var(--um-sans)">${esc(t)}</text>`;
+const flowBody = (d, fill) => `<path d="${d}" class="n-mask"/><path d="${d}" class="n-body" fill="${fill}" stroke="${FL.line}"/>`;
+
+// t wrapped at max px into at most k lines, the last holding the rest, each cut to max (a word longer than a line too)
+function flowWrap(t, px, max, k) {
+  const out = []; let line = '';
+  String(t ?? '').split(/\s+/).filter(Boolean).forEach(w => { const next = line ? line + ' ' + w : w;
+    if (line && textW(next, px) > max) { out.push(line); line = w; } else line = next; });
+  if (line) out.push(line);
+  if (out.length > k) out.splice(k - 1, out.length, out.slice(k - 1).join(' '));
+  return out.map(l => fit(l, px, max, true));
+}
+
+/* ---- the circles: a filled one, a ring round a dot, one with an X ---- */
+const circleOut = (n, d = 0) => { const r = n.w / 2 + d, cx = n.x + n.w / 2, cy = n.y + n.h / 2;
+  return `M${r2(cx - r)} ${r2(cy)}A${r2(r)} ${r2(r)} 0 1 0 ${r2(cx + r)} ${r2(cy)}A${r2(r)} ${r2(r)} 0 1 0 ${r2(cx - r)} ${r2(cy)}Z`; };
+// how far inside the box's side the circle is at t (beyond its span, at its centre line)
+const circleIn = (n, s, t) => { const r = n.w / 2, u = t - (s === 'L' || s === 'R' ? n.y + n.h / 2 : n.x + n.w / 2); return r * (1 - Math.sqrt(Math.max(0, 1 - (u / r) ** 2))); };
+const circleHit = n => `<circle cx="${r2(n.x + n.w / 2)}" cy="${r2(n.y + n.h / 2)}" r="${FL.hit}" class="fl-hit" fill="transparent"/>`;
+const circle = (shape, D, word, body) => ({ size: () => ({ w: D, h: D }), out: circleOut, inset: circleIn, draw: n => flowNode(n, shape, word, circleHit(n) + body(n)) });
+const dot = (n, r) => `<circle cx="${r2(n.x + n.w / 2)}" cy="${r2(n.y + n.h / 2)}" r="${r2(r)}" class="fl-dot" fill="${FL.ink}"/>`;
+SHAPE.initial = circle('initial', 20, 'Initial node', n => `<path d="${circleOut(n)}" class="n-mask"/><path d="${circleOut(n)}" class="n-body" fill="${FL.ink}" stroke="${FL.ink}"/>`);
+SHAPE.final = circle('final', 22, 'Final node', n => flowBody(circleOut(n), FL.bg) + dot(n, n.w / 2 - 5));
+SHAPE['flow-final'] = circle('flow-final', 22, 'Flow final', n => { const cx = n.x + n.w / 2, cy = n.y + n.h / 2, k = n.w / 2 * Math.SQRT1_2;
+  return flowBody(circleOut(n), FL.bg) + `<path d="M${r2(cx - k)} ${r2(cy - k)}L${r2(cx + k)} ${r2(cy + k)}M${r2(cx + k)} ${r2(cy - k)}L${r2(cx - k)} ${r2(cy + k)}" class="n-det" stroke="${FL.line}"/>`; });
+
+/* ---- the diamond: its text on at most two lines, the diamond twice the text's box, so the box fits inside it ---- */
+const diamondLines = n => { const t = String(n.label ?? '').trim(); return !t ? [] : textW(t, FL.px) <= 80 ? [fit(t, FL.px, FL.dmax)] : wrap2(t, FL.px, FL.dmax) || [fit(t, FL.px, FL.dmax)]; };
+SHAPE.diamond = {
+  size(n) { const ls = diamondLines(n), tw = Math.max(0, ...ls.map(l => textW(l, FL.px)));
+    return ls.length ? { w: Math.max(28, Math.ceil(2 * tw + 12)), h: Math.max(28, Math.ceil(2 * ls.length * FL.lh + 4)) } : { w: 28, h: 28 }; },
+  out(n, d = 0) { const cx = n.x + n.w / 2, cy = n.y + n.h / 2, a = n.w / 2 + d, b = n.h / 2 + d;
+    return `M${r2(cx)} ${r2(cy - b)}L${r2(cx + a)} ${r2(cy)}L${r2(cx)} ${r2(cy + b)}L${r2(cx - a)} ${r2(cy)}Z`; },
+  inset(n, s, t) { const a = n.w / 2, b = n.h / 2;
+    return s === 'L' || s === 'R' ? a * Math.min(1, Math.abs(t - n.y - b) / b) : b * Math.min(1, Math.abs(t - n.x - a) / a); },
+  draw(n) { const ls = diamondLines(n), cx = n.x + n.w / 2, y0 = n.y + n.h / 2 - ls.length * FL.lh / 2;
+    return flowNode(n, 'diamond', String(n.label ?? '').trim() ? `Decision ${String(n.label).trim()}` : 'Decision', flowBody(SHAPE.diamond.out(n), FL.bg)
+      + ls.map((l, i) => flowSvgText(cx, y0 + i * FL.lh + 10.5, l, FL.px, 500, FL.ink, 'c-name')).join('')); },
+};
+
+/* ---- the bar: a fork or a join, with a band 24 px thick to hit ---- */
+SHAPE.bar = {
+  size(n) { const L = Math.max(48, 16 * ((Number.isFinite(n.busy) ? n.busy : 0) + 1)); return n.down ? { w: L, h: 6 } : { w: 6, h: L }; },
+  out: (n, d = 0) => `M${r2(n.x - d)} ${r2(n.y - d)}H${r2(n.x + n.w + d)}V${r2(n.y + n.h + d)}H${r2(n.x - d)}Z`,
+  inset: () => 0,
+  draw(n) { const flat = n.w >= n.h, hit = flat ? [n.x, n.y + n.h / 2 - FL.hit, n.w, 2 * FL.hit] : [n.x + n.w / 2 - FL.hit, n.y, 2 * FL.hit, n.h];
+    return flowNode(n, 'bar', 'Fork or join', `<rect x="${r2(hit[0])}" y="${r2(hit[1])}" width="${r2(hit[2])}" height="${r2(hit[3])}" class="fl-hit" fill="transparent"/>`
+      + `<path d="${SHAPE.bar.out(n)}" class="n-mask"/><path d="${SHAPE.bar.out(n)}" class="n-body" fill="${FL.ink}" stroke="${FL.ink}"/>`); },
+};
+
+/* ---- the rounded rectangle: stereotypes, then the name on up to three lines, centred ---- */
+const roundedParts = n => { const st = FL_ARR(n.stereotypes).filter(t => String(t ?? '').trim() !== '').map(t => fit(`«${t}»`, FL.st, FL.maxW - 2 * FL.padX)), ls = flowWrap(n.label, FL.name, FL.nmax, 3);
+  return { st, ls, w: Math.ceil(Math.min(FL.maxW, Math.max(FL.minW, ...st.map(t => textW(t, FL.st) + 2 * FL.padX), ...ls.map(l => textW(l, FL.name) + 2 * FL.padX)))),
+    h: Math.max(FL.minH, 2 * FL.padY + st.length * FL.sth + Math.max(1, ls.length) * FL.nlh) }; };
+SHAPE.rounded = {
+  size: n => { const p = roundedParts(n); return { w: p.w, h: p.h }; },
+  out: SHAPE.box.out, inset: SHAPE.box.inset,
+  draw(n) { const { st, ls } = roundedParts(n), cx = n.x + n.w / 2, max = n.w - 2 * FL.padX;
+    let y = n.y + (n.h - st.length * FL.sth - Math.max(1, ls.length) * FL.nlh) / 2;
+    const tx = st.map(t => { const s = flowSvgText(cx, y + 11, fit(t, FL.st, max), FL.st, 400, FL.line, 'c-st'); y += FL.sth; return s; });
+    ls.forEach(l => { tx.push(flowSvgText(cx, y + 12, fit(l, FL.name, max), FL.name, 600, FL.ink, 'c-name')); y += FL.nlh; });
+    return flowNode(n, 'rounded', String(n.label ?? '').trim() ? `Action ${String(n.label).trim()}` : 'Action', flowBody(SHAPE.rounded.out(n), FL.bg) + tx.join('')); },
+};
+for (const k of ['initial', 'final', 'flow-final', 'diamond', 'bar', 'rounded']) { const S = SHAPE[k]; S.face = n => [n.y, n.y + n.h]; S.ports = (n, side, j = 1) => portsOn(S, n, side, j); }
+
+/* ---- the flow rules (§9.3), at S21's levels: what UML forbids is an error, what is only unfinished a warning. Each
+   problem is { level, rule, path, message, ids }, as in src/uml/class.js. flowProblems(model, view, ends) checks the
+   model's flows that touch a node the view shows (all of them with no view), and the control nodes the view shows;
+   ends: the node types a flow of the calling type may end on ---- */
+const FLOW_LINES = ['uml.ControlFlow', 'uml.ObjectFlow'];
+const FLOW_CONTROL = ['uml.InitialNode', 'uml.ActivityFinalNode', 'uml.FlowFinalNode', 'uml.DecisionNode', 'uml.MergeNode', 'uml.ForkNode', 'uml.JoinNode'];
+const FLOW_RULES = {
+  'flow-ends': 'a flow joins two of the diagram\'s control, action or object nodes, never a partition or a comment',
+  'initial-flows': 'an initial node has no incoming flow and one outgoing',
+  'final-flows': 'an activity final or a flow final has no outgoing flow',
+  'fork-join': 'a fork has one incoming flow and two or more outgoing; a join two or more incoming and one outgoing',
+  'decision-merge': 'a decision has one incoming flow and two or more outgoing; a merge two or more incoming and one outgoing',
+  'decision-guards': 'each flow out of a decision has a guard, and at most one is else',
+};
+const flowWord = t => String(t ?? '').split('.').pop().replace(/([a-z])([A-Z])/g, '$1 $2').toLowerCase(); // 'uml.ForkNode': "fork node"
+function flowProblems(model, view, ends) {
+  const at = new Map(), out = [], shown = new Set(FL_ARR(view && view.nodeIds)), seen = id => !view || shown.has(id);
+  FL_ARR(model && model.nodes).forEach((x, k) => { if (FL_OBJ(x) && !at.has(x.id)) at.set(x.id, [x, `nodes[${k}]`]); });
+  const el = id => (at.get(id) || [])[0], nm = id => { const x = el(id); return x && x.label != null && x.label !== '' ? `${flowWord(x.type)} ${id} ("${x.label}")` : `${x ? flowWord(x.type) + ' ' : ''}${id}`; };
+  const say = (rule, path, ids, msg, level = 'error') => out.push({ level, rule, path, ids: ids.filter(x => x != null), message: `${rule}: ${msg}` });
+  const flows = FL_ARR(model && model.edges).map((e, k) => [e, `edges[${k}]`]).filter(([e]) => FL_OBJ(e) && FLOW_LINES.includes(e.type) && (seen(e.from) || seen(e.to)));
+  const ins = new Map(), outs = new Map(), add = (m, id, e) => m.set(id, [...(m.get(id) || []), e]);
+  flows.forEach(([e, path]) => { add(outs, e.from, e); add(ins, e.to, e);
+    [e.from, e.to].forEach(id => { const x = el(id); if (x && !FL_ARR(ends).includes(x.type)) say('flow-ends', path, [e.id, id], `${e.id} ends on ${nm(id)}, which a flow may not end on`); }); });
+  const list = es => es.map(e => e.id).join(', '), flowsN = (k, how) => `${k} ${how} flow${k === 1 ? '' : 's'}`;
+  at.forEach(([x, path], id) => { if (!seen(id) || !FLOW_CONTROL.includes(x.type)) return;
+    const i = ins.get(id) || [], o = outs.get(id) || [], ids = es => [id, ...es.map(e => e.id)];
+    const many = (rule, es, how, most) => { if (es.length > most) say(rule, path, ids(es), `${nm(id)} has ${flowsN(es.length, how)} (${list(es)}); it may have ${most ? 'one' : 'none'}`); };
+    const few = (rule, es, how) => { if (es.length < 2) say(rule, path, ids(es), `${nm(id)} has ${flowsN(es.length, how)}; it wants two or more`, 'warning'); };
+    switch (x.type) {
+      case 'uml.InitialNode': many('initial-flows', i, 'incoming', 0); many('initial-flows', o, 'outgoing', 1);
+        if (!o.length) say('initial-flows', path, [id], `${nm(id)} has no outgoing flow yet`, 'warning'); break;
+      case 'uml.ActivityFinalNode': case 'uml.FlowFinalNode': many('final-flows', o, 'outgoing', 0); break;
+      case 'uml.ForkNode': many('fork-join', i, 'incoming', 1); few('fork-join', o, 'outgoing'); break;
+      case 'uml.JoinNode': many('fork-join', o, 'outgoing', 1); few('fork-join', i, 'incoming'); break;
+      case 'uml.MergeNode': many('decision-merge', o, 'outgoing', 1); few('decision-merge', i, 'incoming'); break;
+      case 'uml.DecisionNode': { many('decision-merge', i, 'incoming', 1); few('decision-merge', o, 'outgoing');
+        const g = e => (FL_OBJ(e.props) && e.props.guard != null ? String(e.props.guard).trim() : ''), bare = o.filter(e => !g(e)), elses = o.filter(e => g(e) === 'else');
+        if (bare.length) say('decision-guards', path, ids(bare), `${flowsN(bare.length, 'outgoing')} of ${nm(id)} ${bare.length === 1 ? 'has' : 'have'} no guard (${list(bare)})`, 'warning');
+        if (elses.length > 1) say('decision-guards', path, ids(elses), `${nm(id)} has ${elses.length} exits guarded else (${list(elses)}); at most one may be`, 'warning'); }
+    }
+  });
+  return out;
+}
+
+/* ---- a flow's label (§7.2, §7.3): "name [guard]", the name in the trigger's place; a guard alone "[guard]". F2's text is
+   read by parseFlow, which refuses an effect, so a name holding / or a [ outside brackets is written in the properties
+   panel; printFlow is null for such a name (it would not read back), and the line is drawn by flowText ---- */
+const flowText = (name, guard) => transitionText({ trigger: name, guard });
+const printFlow = (name, guard) => printTransition({ trigger: name, guard });
+function parseFlow(text) {
+  const r = trScan(text, 'a flow is name [guard]');
+  return r.error ? r : r.slash >= 0 ? { error: 'a flow is name [guard]: it has an effect; a name holding / is written in the properties panel' } : { name: r.trigger, guard: r.guard };
+}
+/* ---------- lanes (work package 4.3, notes/stage-4.md §5.2) ----------
+   Bands across a layered flow, for the activity type's partitions (and later BPMN's lanes). No DOM, no model: a type
+   gives the ranked positions and which lane each node is in, and gets rows back; after layoutTyped it gets the bands.
+   Only lib/umlimator-all.js holds this file.
+
+   laneRows(pos, laneOf, lanes) -> pos'   pos: { id: [col, row] } as ranked (pins included); laneOf: id -> its innermost
+                                          lane's id, or null; lanes: [{ id, parent, order }] outermost first, siblings
+                                          by `order`, those with none after them in list order. pos' is new: each lane a run of rows
+   laneBands(g, lanes, laneOf, turned, rgap) -> { bands: [{ id, parent, depth, x, y, w, h, head: { x, y, w, h } }], shift, bounds }
+                                          g: layoutTyped's geometry, read, never written (§2.4); turned: laid out down;
+                                          rgap: the row gap it was laid out with (else the narrowest gap between two rows).
+                                          bands are where they lie once the type has moved its copy of g by shift ({ x, y });
+                                          bounds: g's bounds so moved and grown to hold the bands
+   Rows: lanes in depth-first order, a lane's own nodes in the rows before its nested lanes'; in each column a lane's nodes
+   keep their ranked order and take its rows from the first; a lane takes as many rows as it has nodes in its busiest
+   column, an empty lane one. A pin's row is so an order inside its lane, and nodes in no lane come after every lane.
+   Bands: along the flow, the whole diagram and a 22 px header strip per level of nesting at its start; across it, from the
+   divider before a lane's first row to the one after its last, each 12 px past the router's line rgap / 2 before the later
+   row (gapLinesY), toward it; the outer edges 12 px inside the router's line. An empty lane at an end takes a row that
+   leaves its band 120 px across at least. */
+
+const LN = { head: 22, off: 12, pad: 16, gap: 44, row: 64, min: 120 }; // a header level; a divider off the router's line; the bands' margin; the row gap when g has none to measure; an empty end row's least size; an empty end lane's least width
+
+// the lanes in depth-first order, each { id, parent, depth }: a lane whose parent is no lane, or that lies on a cycle of
+// parents, is at the top
+function laneOrder(lanes) {
+  const list = (Array.isArray(lanes) ? lanes : []).filter(l => l && l.id != null), ids = new Set(list.map(l => l.id)), kids = new Map(), out = [], seen = new Set();
+  const has = l => Number.isFinite(l.order); // by order, those with none after them; a stable sort keeps list order in ties
+  [...list].sort((a, b) => has(b) - has(a) || (has(a) && has(b) ? a.order - b.order : 0)).forEach(l => { const p = ids.has(l.parent) && l.parent !== l.id ? l.parent : null; if (!kids.has(p)) kids.set(p, []); kids.get(p).push(l); });
+  const walk = (top) => { const stack = [[top, 0]]; // an explicit stack: nesting from an import can be deep
+    while (stack.length) { const [l, depth] = stack.pop(); if (seen.has(l.id)) continue; seen.add(l.id); out.push({ id: l.id, parent: depth ? l.parent : null, depth });
+      (kids.get(l.id) || []).slice().reverse().forEach(k => stack.push([k, depth + 1])); } };
+  (kids.get(null) || []).forEach(walk);
+  list.forEach(walk); // on a cycle: never reached from the top
+  return out;
+}
+
+// each node's segment (a lane's index in order, or order.length for no lane) and each segment's first row and row count
+function laneRuns(items, laneOf, order) { // items: [[id, col]]
+  const at = new Map(order.map((l, k) => [l.id, k])), seg = new Map(), most = order.map(() => 0).concat(0), per = new Map();
+  items.forEach(([id, col]) => { const s = at.get(laneOf(id)) ?? order.length, k = s + '|' + col, n = (per.get(k) || 0) + 1; seg.set(id, s); per.set(k, n); most[s] = Math.max(most[s], n); });
+  const full = new Set(); // the lanes that hold a node or a nested lane; the others are empty
+  order.forEach((l, s) => { if (most[s]) full.add(l.id); if (l.parent != null) full.add(l.parent); });
+  const count = most.map((n, s) => (s < order.length && !full.has(order[s].id) ? 1 : n)), start = []; let r = 0; // an empty lane keeps one row
+  count.forEach((n, s) => { start[s] = r; r += n; });
+  return { seg, start, count, rows: r };
+}
+
+function laneRows(pos, laneOf, lanes) {
+  const order = laneOrder(lanes), ids = Object.keys(pos || {}).filter(id => Array.isArray(pos[id]));
+  const { seg, start } = laneRuns(ids.map(id => [id, pos[id][0]]), laneOf, order), out = Object.create(null), cols = new Map(); // by id: no prototype (M3)
+  ids.forEach((id, i) => { const c = pos[id][0]; if (!cols.has(c)) cols.set(c, []); cols.get(c).push([id, i]); });
+  cols.forEach(list => { const next = new Map();
+    list.sort((a, b) => seg.get(a[0]) - seg.get(b[0]) || pos[a[0]][1] - pos[b[0]][1] || a[1] - b[1]).forEach(([id]) => { const s = seg.get(id), k = next.get(s) || 0;
+      out[id] = [pos[id][0], start[s] + k]; next.set(s, k + 1); }); });
+  return out;
+}
+
+function laneBands(g, lanes, laneOf, turned, rgap) {
+  const order = laneOrder(lanes), nodes = (g && g.nodes) || [], b = (g && g.bounds) || { x: 0, y: 0, w: 0, h: 0 };
+  const [A, S, L, T] = turned ? ['x', 'w', 'y', 'h'] : ['y', 'h', 'x', 'w']; // across the flow, its size; along it, its size
+  const { start, count, rows } = laneRuns(nodes.map(n => [n.id, n.col]), laneOf, order);
+  // each row's extent across the flow: from its nodes, else between its neighbours; a gap is the narrowest between two rows
+  const lo = [], hi = [];
+  nodes.forEach(n => { const r = n.row; if (!Number.isInteger(r)) return; lo[r] = Math.min(lo[r] ?? Infinity, n[A]); hi[r] = Math.max(hi[r] ?? -Infinity, n[A] + n[S]); });
+  let gap = Infinity; for (let r = 0; r + 1 < rows; r++) if (lo[r] != null && lo[r + 1] != null) gap = Math.min(gap, lo[r + 1] - hi[r]);
+  if (gap === Infinity) gap = LN.gap;
+  if (Number.isFinite(rgap) && rgap > 0) gap = rgap;
+  const end = Math.max(LN.row, LN.min + 2 * LN.off - gap); // an empty end row: its band, the row and a gap less two offsets, 120 px at least
+  for (let r = 0; r < rows;) { if (lo[r] != null) { r++; continue; }
+    let e = r; while (e < rows && lo[e] == null) e++; // rows r to e - 1 hold nothing
+    if (r && e < rows) { const unit = (lo[e] - hi[r - 1] - gap) / (e - r); for (let k = r; k < e; k++) { lo[k] = hi[r - 1] + gap + (k - r) * unit; hi[k] = lo[k] + unit - gap; } }
+    else if (e < rows) for (let k = e - 1; k >= r; k--) { hi[k] = lo[k + 1] - gap; lo[k] = hi[k] - end; }
+    else for (let k = r; k < e; k++) { lo[k] = k ? hi[k - 1] + gap : 0; hi[k] = lo[k] + end; }
+    r = e; }
+  const before = r => lo[r] - gap / 2 + LN.off, after = r => (r + 1 < rows ? before(r + 1) : hi[r] + gap / 2 - LN.off); // off the router's lines, which lie rgap / 2 from each row
+  // each lane's rows: its own and its nested lanes'
+  const first = start.slice(0, order.length), last = order.map((l, s) => start[s] + count[s] - 1), at = new Map(order.map((l, s) => [l.id, s]));
+  order.forEach((l, s) => { for (let p = order[at.get(l.parent)]; p; p = order[at.get(p.parent)]) { const q = at.get(p.id); first[q] = Math.min(first[q], first[s]); last[q] = Math.max(last[q], last[s]); } });
+  const levels = order.length ? 1 + Math.max(...order.map(l => l.depth)) : 0, shift = { x: 0, y: 0, [L]: levels * LN.head };
+  const a0 = b[L] + LN.pad, a1 = b[L] + b[T] + shift[L] - LN.pad;
+  const bands = order.map((l, s) => { const c0 = before(first[s]), c1 = after(last[s]), s0 = a0 + l.depth * LN.head;
+    const box = len => ({ [L]: r2(s0), [T]: r2(len), [A]: r2(c0), [S]: r2(c1 - c0) });
+    return { id: l.id, parent: l.parent, depth: l.depth, ...box(a1 - s0), head: box(LN.head) }; });
+  const x0 = Math.min(b.x + shift.x, ...bands.map(d => d.x - LN.pad)), y0 = Math.min(b.y + shift.y, ...bands.map(d => d.y - LN.pad));
+  const x1 = Math.max(b.x + b.w + shift.x, ...bands.map(d => d.x + d.w + LN.pad)), y1 = Math.max(b.y + b.h + shift.y, ...bands.map(d => d.y + d.h + LN.pad));
+  return { bands, shift, bounds: { x: r2(x0), y: r2(y0), w: r2(x1 - x0), h: r2(y1 - y0) } };
+}
+/* ---------- the use case diagram, uml.use-case (work package 4.4, notes/stage-4.md §8) ----------
+   Actors (a stick figure), use cases (an ellipse, its extension points in a compartment under the name) and subjects: a
+   subject with a shown use case is a box (src/uml/owners.js's look), else a rectangle with its name; associations, includes,
+   extends (their points by name, then their condition) and generalizations; comments. Laid out by layoutTyped from the
+   host's ranking, a generalization and an extend turned so the parent and the base come first; repair and reroute off
+   (§17). Line ends are slid onto the ellipse and the figure's column when drawn (src/typed/draw.js). Ships in
+   lib/umlimator-all.js only. */
+
+const UC_OBJ = x => x !== null && typeof x === 'object' && !Array.isArray(x), UC_ARR = x => (Array.isArray(x) ? x : []);
+const UC_HAS = x => x != null && x !== '';
+const UC_PROPS = x => (UC_OBJ(x && x.props) ? x.props : {});
+const ucName = x => String(x.label ?? x.id);
+const ucStereo = x => UC_ARR(UC_PROPS(x).stereotypes).filter(UC_HAS).map(String);
+const ucPlural = (k, w) => `${k} ${k === 1 ? w : w + 's'}`;
+const UC_LINES = ['uml.Association', 'uml.Include', 'uml.Extend', 'uml.Generalization', 'uml.CommentLink'];
+const ucPointsOf = n => UC_ARR(n.members).filter(m => UC_OBJ(m) && m.type === 'uml.ExtensionPoint');
+
+/* ---- the shapes (§4.1): ellipse and actor; a subject's frame ---- */
+const UC = { px: 12, lh: 16, max: 160, st: 10, sth: 13, ep: 11, eph: 15, head: 14, gap: 6, k: 1.42, minW: 96, minH: 44 };
+// a text in lines of at most max px, at most k lines: the last holds the rest, cut when drawn
+function ucWrap(t, px, max, k) {
+  const out = []; String(t ?? '').split(/\s+/).filter(Boolean).forEach(w => { const l = out.length ? out[out.length - 1] : null;
+    if (l != null && (out.length === k || textW(l + ' ' + w, px) <= max)) out[out.length - 1] = l + ' ' + w; else out.push(w); });
+  return out.length ? out : [''];
+}
+// a use case's texts: its stereotypes, its name on at most three lines, then its extension points' heading and names
+function ucEllParts(n) {
+  const st = UC_ARR(n.stereotypes).map(t => `«${t}»`), name = ucWrap(n.label, UC.px, UC.max, 3), eps = UC_ARR(n.points);
+  const w = Math.min(UC.max, Math.max(...st.map(t => textW(t, UC.st)), ...name.map(l => textW(l, UC.px)), ...(eps.length ? [textW('extension points', UC.st), ...eps.map(p => textW(p, UC.ep))] : [])));
+  const h = st.length * UC.sth + name.length * UC.lh + (eps.length ? UC.gap + UC.head + eps.length * UC.eph : 0);
+  return { st, name, eps, w, h };
+}
+// an ellipse's depth inside its box's side at t (src/typed/draw.js slides a line's end by it)
+const ucEllDip = (n, s, t) => { const v = s === 'L' || s === 'R', a = v ? n.w / 2 : n.h / 2, r = v ? n.h / 2 : n.w / 2, u = t - (v ? n.y + n.h / 2 : n.x + n.w / 2);
+  return a * (1 - Math.sqrt(Math.max(0, 1 - (u / r) ** 2))); };
+const ucEllPath = (n, d = 0) => { const rx = n.w / 2 + d, ry = n.h / 2 + d, cy = r2(n.y + n.h / 2);
+  return `M${r2(n.x - d)} ${cy}A${r2(rx)} ${r2(ry)} 0 1 0 ${r2(n.x + n.w + d)} ${cy}A${r2(rx)} ${r2(ry)} 0 1 0 ${r2(n.x - d)} ${cy}Z`; };
+const ucText = (x, y, px, wt, fill, t, max, more = '') => `<text x="${r2(x)}" y="${r2(y)}" text-anchor="middle"${more} fill="${fill}" style="font:${wt} ${px}px var(--um-sans)">${esc(fit(t, px, max))}</text>`;
+const ucNodeG = (n, cls, inner) => `<g class="node ${cls}" data-id="${esc(n.id)}" data-shape="${n.shape}" tabindex="-1" role="img" aria-label="${esc(n.aria || n.label || '')}">${inner}</g>`;
+SHAPE.ellipse = {
+  // the text block, 1.42 (about √2) times as wide and as tall: a box that size fits inside the ellipse at its corners
+  size: n => { const p = ucEllParts(n); return { w: Math.ceil(Math.max(UC.minW, p.w * UC.k + 16)), h: Math.ceil(Math.max(UC.minH, p.h * UC.k + 12)) }; },
+  out: (n, d = 0) => ucEllPath(n, d), face: n => [n.y, n.y + n.h], inset: ucEllDip,
+  draw(n, c, f) {
+    const p = ucEllParts(n), cx = n.x + n.w / 2, cy = n.y + n.h / 2, max = p.w + 1; let y = cy - p.h / 2;
+    const out = [`<path d="${ucEllPath(n)}" class="n-mask"/><path d="${ucEllPath(n)}" class="n-body" fill="${f}" stroke="${c}"/>`], hd = [];
+    p.st.forEach(t => { hd.push(ucText(cx, y + 10, UC.st, 400, 'var(--um-muted)', t, max, ' class="c-st"')); y += UC.sth; });
+    p.name.forEach(l => { hd.push(ucText(cx, y + 12, UC.px, 500, 'var(--um-text)', l, max, ` class="c-name" data-o="${esc(n.id)}"`)); y += UC.lh; });
+    out.push(`<g class="c-head" data-band="${r2(n.y)} ${r2(y)}">${hd.join('')}</g>`);
+    if (p.eps.length) { const dy = y + UC.gap / 2, half = n.w / 2 * Math.sqrt(Math.max(0, 1 - ((dy - cy) / (n.h / 2)) ** 2)), rows = [];
+      rows.push(ucText(cx, dy + UC.head - 2, UC.st, 400, 'var(--um-muted)', 'extension points', max, ' class="c-st"'));
+      p.eps.forEach((t, i) => rows.push(ucText(cx, dy + UC.head + i * UC.eph + 12, UC.ep, 400, 'var(--um-text)', t, max, ' class="c-row"')));
+      out.push(`<g class="c-comp" data-comp="extension points" data-band="${r2(dy)} ${r2(n.y + n.h)}"><path d="M${r2(cx - half)} ${r2(dy)}H${r2(cx + half)}" class="n-det" stroke="${c}"/>${rows.join('')}</g>`); }
+    return ucNodeG(n, 'usecase', out.join(''));
+  },
+};
+// an actor: a stick figure 24 × 44, its stereotypes and name (two lines of 160 px at most) under it; the node as wide as the wider
+const UC_AC = { fw: 24, fh: 44, gap: 4 };
+const ucActorParts = n => { const st = UC_ARR(n.stereotypes).map(t => `«${t}»`), name = ucWrap(n.label, UC.px, UC.max, 2);
+  return { st, name, w: Math.min(UC.max, Math.max(UC_AC.fw, ...st.map(t => textW(t, UC.st)), ...name.map(l => textW(l, UC.px)))) }; };
+SHAPE.actor = {
+  size: n => { const p = ucActorParts(n); return { w: Math.ceil(p.w + 4), h: UC_AC.fh + UC_AC.gap + p.st.length * UC.sth + p.name.length * UC.lh }; },
+  out: (n, d = 0) => `M${r2(n.x - d)} ${r2(n.y - d)}H${r2(n.x + n.w + d)}V${r2(n.y + n.h + d)}H${r2(n.x - d)}Z`, face: n => [n.y, n.y + UC_AC.fh],
+  inset: (n, s) => (s === 'L' || s === 'R' ? Math.max(0, (n.w - UC_AC.fw) / 2) : 0), // its box, narrowed to the figure's column on the left and right
+  draw(n, c) {
+    const p = ucActorParts(n), cx = r2(n.x + n.w / 2), y = n.y, max = n.w - 2; let ty = y + UC_AC.fh + UC_AC.gap; const hd = [];
+    const fig = `<circle cx="${cx}" cy="${r2(y + 7)}" r="6.5"/><path d="M${cx} ${r2(y + 13.5)}V${r2(y + 29)}M${r2(cx - 11)} ${r2(y + 19)}H${r2(cx + 11)}M${r2(cx - 10)} ${r2(y + 43)}L${cx} ${r2(y + 29)}L${r2(cx + 10)} ${r2(y + 43)}"/>`;
+    p.st.forEach(t => { hd.push(ucText(cx, ty + 10, UC.st, 400, 'var(--um-muted)', t, max, ' class="c-st"')); ty += UC.sth; });
+    p.name.forEach(l => { hd.push(ucText(cx, ty + 12, UC.px, 500, 'var(--um-text)', l, max, ` class="c-name" data-o="${esc(n.id)}"`)); ty += UC.lh; });
+    return ucNodeG(n, 'actor', `<rect x="${n.x}" y="${n.y}" width="${n.w}" height="${n.h}" class="n-mask" style="fill:transparent"/><g class="n-body" fill="none" stroke="${c}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">${fig}</g>`
+      + `<g class="c-head" data-band="${r2(y + UC_AC.fh)} ${r2(ty)}">${hd.join('')}</g>`);
+  },
+};
+// a subject with something shown is a box: a rectangle on its border, its stereotypes and name in bold at the top left of its
+// header room (24 px). Closed, it is a classifier with its name only (src/typed/draw.js)
+SHAPE.subject = {
+  frame: f => `<rect class="family-box" x="${f.x}" y="${f.y}" width="${f.w}" height="${f.h}" stroke="var(--um-muted)"/>`
+    + `<text class="family-title" x="${r2(f.x + 12)}" y="${r2(f.y + 17)}" fill="var(--um-text)" style="font:600 12px var(--um-sans)" data-t="ft" data-o="${esc(f.id)}">${esc(fit(f.title ?? f.label ?? f.id, 12, f.w - 24))}</text>`,
+};
+
+/* ---- the view read: its owners (§8.2), its lines, and every element's words ---- */
+const UC_LOOK = { boxTypes: ['uml.Subject', 'uml.Package'], qualify: false, shape: x => (x.type === 'uml.Subject' ? 'subject' : 'package'), word: x => (x.type === 'uml.Subject' ? 'Subject' : 'Package') };
+// the view's boxes, a subject's accessible name counting its use cases: "Subject Online bookshop, holding 8 use cases"
+function ucPic(model, view) {
+  const pic = ownersOn(model, view, UC_LOOK);
+  const boxes = pic.boxes.map(b => { const held = pic.holds(b.id), x = pic.at.get(b.id), st = ucStereo(x);
+    return held.every(id => pic.at.get(id).type === 'uml.UseCase') ? { ...b, aria: `${UC_LOOK.word(x)} ${ucName(x)}${st.length ? ` (${st.join(', ')})` : ''}, holding ${ucPlural(held.length, 'use case')}` } : b; });
+  return { ...pic, boxes };
+}
+// the lines drawn: those the view lists, or with no list the model's of this type's kinds, between two elements it shows; a
+// line from a box to what it holds is left out
+function ucLines(model, view, pic) {
+  const E = new Map(); UC_ARR(model.edges).forEach(e => { if (UC_OBJ(e) && typeof e.id === 'string' && !E.has(e.id)) E.set(e.id, e); });
+  const shown = new Set(pic.ids), list = Array.isArray(view.edges) ? view.edges.map(x => (typeof x === 'string' ? E.get(x) : x)) : [...E.values()].filter(e => UC_LINES.includes(e.type));
+  return list.filter(e => UC_OBJ(e) && typeof e.id === 'string' && shown.has(e.from) && shown.has(e.to)
+    && ![[e.from, e.to], [e.to, e.from]].some(([b, x]) => pic.open.has(b) && (b === x || pic.chain(x).includes(b))));
+}
+const UC_KEYWORD = { 'uml.Include': '«include»', 'uml.Extend': '«extend»' };
+// an extend's points by name and its condition: "(payment) [the shopper has a voucher code]"
+function ucExtendParts(model, e) {
+  const to = UC_ARR(model.nodes).find(n => UC_OBJ(n) && n.id === e.to), by = new Map(ucPointsOf(to || {}).map(m => [m.id, ucName(m)]));
+  return { points: UC_ARR(UC_PROPS(e).extensionPoints).map(id => by.get(id) ?? String(id)), cond: UC_HAS(UC_PROPS(e).condition) ? String(UC_PROPS(e).condition) : null };
+}
+function ucLineLabel(model, e) {
+  const x = e.type === 'uml.Extend' ? ucExtendParts(model, e) : null;
+  return [UC_KEYWORD[e.type], ...ucStereo(e).map(t => `«${t}»`), e.label, x && x.points.length ? `(${x.points.join(', ')})` : '', x && x.cond ? `[${x.cond}]` : ''].filter(UC_HAS).join(' ');
+}
+const UC_LINE_WORD = { 'uml.Association': 'Association', 'uml.Include': 'Include', 'uml.Extend': 'Extend', 'uml.Generalization': 'Generalization', 'uml.CommentLink': 'Comment link' };
+const UC_LINE_LOOK = { 'uml.Association': { from: 'none', to: 'none' }, 'uml.Include': { from: 'none', to: 'open', dashed: true }, 'uml.Extend': { from: 'none', to: 'open', dashed: true },
+  'uml.Generalization': { from: 'none', to: 'triangle' }, 'uml.CommentLink': { from: 'none', to: 'none', dashed: true } };
+const ucLookOf = e => (Object.hasOwn(UC_LINE_LOOK, e.type) ? UC_LINE_LOOK[e.type] : { from: 'none', to: 'arrow' });
+// accessible names (§14): "Actor Shopper"; "Use case Check out, in Online bookshop, 2 extension points"
+function ucNodeName(model, n, pic) {
+  if (n.type === 'uml.Comment') return 'Comment: ' + ucName(n);
+  const b = pic.boxes.find(x => x.id === n.id); if (b) return b.aria;
+  const st = ucStereo(n), why = st.length ? ` (${st.join(', ')})` : '', up = n.parent != null && pic.at.get(n.parent), k = ucPointsOf(n).length;
+  if (n.type === 'uml.UseCase') return `Use case ${ucName(n)}${why}${up ? `, in ${ucName(up)}` : ''}${k ? `, ${ucPlural(k, 'extension point')}` : ''}`;
+  if (n.type === 'uml.Package') return `Package ${ucName(n)} (${[...st, 'closed'].join(', ')})`;
+  return `${n.type === 'uml.Actor' ? 'Actor' : n.type === 'uml.Subject' ? 'Subject' : String(n.type).split('.').pop()} ${ucName(n)}${why}`;
+}
+// "Extend from Redeem a voucher to Check out, at payment, when the shopper has a voucher code"
+function ucLineName(model, e, pic) {
+  const nm = id => ucName(pic.at.get(id)), word = Object.hasOwn(UC_LINE_WORD, e.type) ? UC_LINE_WORD[e.type] : 'Line';
+  if (e.type !== 'uml.Extend') { const said = [...ucStereo(e).map(t => `«${t}»`), e.label].filter(UC_HAS).join(' '); return `${word} from ${nm(e.from)} to ${nm(e.to)}${said ? ': ' + said : ''}`; }
+  const { points, cond } = ucExtendParts(model, e);
+  return `Extend from ${nm(e.from)} to ${nm(e.to)}${points.length ? `, at ${points.join(', ')}` : ''}${cond ? `, when ${cond}` : ''}`;
+}
+// reading order (§14): actors, then each subject (or package) and what it holds, then the rest, then the lines
+function ucOrder(pic, lines) {
+  const top = pic.holds(null), at = id => pic.at.get(id).type, out = [], put = id => { out.push(id); if (pic.open.has(id)) pic.holds(id).forEach(put); };
+  [...top.filter(id => at(id) === 'uml.Actor'), ...top.filter(id => at(id) === 'uml.Subject' || at(id) === 'uml.Package'), ...top.filter(id => !['uml.Actor', 'uml.Subject', 'uml.Package'].includes(at(id)))].forEach(put);
+  return [...out, ...lines.map(e => e.id)];
+}
+
+/* ---- the legend: each line kind drawn. ponytail: copies class.js's legendItem and ends, which it does not export ---- */
+const UC_ENDS = { none: '', open: '<path d="M17 4L26 8L17 12" fill="none"/>', triangle: '<path d="M16 3L26 8L16 13Z" fill="var(--um-panel)"/>' };
+const UC_SAYS = { 'uml.Association': 'an actor takes part in the use case', 'uml.Include': 'the base always does the included use case',
+  'uml.Extend': 'adds to the base at its extension points, when the condition holds', 'uml.Generalization': 'is a kind of the one it points to', 'uml.CommentLink': 'what a comment is about' };
+const ucLegend = edges => Object.keys(UC_SAYS).filter(t => edges.some(e => e.type === t)).map(t => { const L = UC_LINE_LOOK[t], name = UC_LINE_WORD[t], says = UC_SAYS[t];
+  return `<span class="lgi" title="${esc(name + ' — ' + says)}"><svg class="lgs" viewBox="0 0 28 16" aria-hidden="true"><g stroke="var(--um-muted)" stroke-width="1.4" stroke-linejoin="round"><path d="M2 8H${L.to === 'none' ? 26 : 17}"${L.dashed ? ' stroke-dasharray="3 2"' : ''}/>${UC_ENDS[L.to]}</g></svg><b>${esc(name)}</b><span>${esc(says)}</span></span>`; });
+
+/* ---- the view laid out (§8.1) ---- */
+// actors first: each actor the view shows outside a box goes to a column before the rest, in the order of the rows of the
+// use cases it is associated with, a specialization after its general; a pinned actor keeps its row. The rest keep the host's
+// places, so a pin, read in the host's ranking, is where it was drawn and moves no other node. pos is the host's ranking, kept
+// (a cache holds it): a new object is returned
+function ucActorsFirst(pos, view, pic, lines) {
+  const A = pic.holds(null).filter(id => pic.at.get(id).type === 'uml.Actor' && Object.hasOwn(pos, id)), rest = Object.keys(pos).filter(id => !A.includes(id) && pic.ids.includes(id) && !pic.open.has(id));
+  if (!A.length || !rest.length) return pos;
+  const L = UC_OBJ(view.layout) ? view.layout : {}, pinned = A.filter(id => Array.isArray(L[id])), c = Math.min(...rest.map(id => pos[id][0])) - 1;
+  const at = id => { const r = lines.filter(e => e.type === 'uml.Association' && (e.from === id || e.to === id)).map(e => (e.from === id ? e.to : e.from)).filter(x => Object.hasOwn(pos, x)).map(x => pos[x][1]); // a box takes no slot
+    return r.length ? r.reduce((a, b) => a + b) / r.length : pos[id][1]; };
+  const up = new Map(lines.filter(e => e.type === 'uml.Generalization' && A.includes(e.from) && A.includes(e.to) && e.from !== e.to).map(e => [e.from, e.to]));
+  const order = [], put = (id, seen = new Set()) => { if (order.includes(id) || seen.has(id)) return; seen.add(id); if (up.has(id)) put(up.get(id), seen); order.push(id); };
+  A.filter(id => !pinned.includes(id)).sort((a, b) => at(a) - at(b)).forEach(id => put(id));
+  const out = Object.fromEntries([...rest.map(id => [id, pos[id]]), ...pinned.map(id => [id, [c, pos[id][1]]])]);
+  order.filter(id => !pinned.includes(id)).reduce((r, id) => { let y = Math.max(r, at(id)); while (pinned.some(p => Math.abs(out[p][1] - y) < 1)) y++; out[id] = [c, y]; return y + 1; }, -Infinity);
+  return out;
+}
+function ucGeo({ model, view, pos: ranked, memo }) {
+  const pic = ucPic(model, view), lines = ucLines(model, view, pic), pos = ucActorsFirst(ranked || {}, view, pic, lines), P = id => (Object.hasOwn(pos, id) ? pos[id] : [0, 0]);
+  const nodes = pic.ids.filter(id => !pic.open.has(id)).map(id => { const n = pic.at.get(id), st = ucStereo(n);
+    const shape = n.type === 'uml.Comment' ? { shape: 'note' } : n.type === 'uml.Package' ? { shape: 'package', stereotypes: st } : n.type === 'uml.Actor' ? { shape: 'actor', stereotypes: st }
+      : n.type === 'uml.UseCase' ? { shape: 'ellipse', stereotypes: st, points: ucPointsOf(n).map(ucName) } : { shape: 'classifier', stereotypes: st, compartments: [] }; // a closed subject, or another node
+    const d = { id, label: ucName(n), type: n.type || 'uml.UseCase', kind: 'file', ...shape, aria: ucNodeName(model, n, pic), col: P(id)[0], row: P(id)[1] };
+    return { ...d, ...SHAPE[d.shape].size(d) }; });
+  const edges = lines.map(e => { const label = ucLineLabel(model, e);
+    return { id: e.id, _id: e.id, type: e.type, from: e.from, to: e.to, label: label || undefined, end: ucLookOf(e), aria: ucLineName(model, e, pic),
+      ...(e.type === 'uml.Extend' ? { cut: 280 } : {}), ...(UC_OBJ(e.style) || typeof e.style === 'string' ? { style: e.style } : {}) }; });
+  // as the class view (class.js typeGeo): laid out right with boxes, the columns spread by the widest label
+  const down = view.direction === 'down', wide = !down && pic.boxes.length ? Math.max(0, ...edges.filter(e => e.label).map(labelW)) : 0;
+  const g = placeTabs(layoutTyped({ nodes, edges, ...(pic.boxes.length ? { containers: pic.boxes } : {}), direction: down ? 'down' : 'right',
+    gap: 96 + (wide ? Math.ceil(wide) + 40 : 0), rgap: 56, repair: false, reroute: false }, memo));
+  // the actors' column is -1 when the host put a node in column 0; the canvas pins no column under 0, and an actor's pinned column
+  // is not read, so it says 0. ponytail: a drop then reads the actors' and that column's places as one column (render.js), and
+  // an actor's pin can push a node of that column down a row (the host's fillLayout); a rank hook in the host would end both
+  const ns = g.nodes.some(n => n.col < 0) ? g.nodes.map(n => (n.col < 0 ? { ...n, col: 0 } : n)) : null;
+  return { ...g, ...(ns ? { nodes: ns, byId: Object.fromEntries(ns.map(n => [n.id, n])) } : {}), legend: ucLegend(g.edges), order: ucOrder(pic, lines) }; // a new object: what layoutTyped returned is never edited (§2.4)
+}
+
+/* ---- validators (§8.3). Each problem: { level, rule, path, message, ids } ---- */
+const UC_RULES = {
+  'association-ends': 'an association joins an actor and a use case',
+  'include-ends': 'an include runs from a use case to another use case',
+  'extend-ends': 'an extend runs from a use case to another use case',
+  'extend-points': 'an extend names at least one extension point, each of the use case it extends',
+  'generalization-kinds': 'a generalization joins two actors or two use cases',
+  'use-case-owner': 'a use case is owned by a subject or a package, an actor by a package or nothing',
+  'include-cycle': 'no use case includes itself, through other includes or directly',
+  named: 'every actor and use case has a name',
+  'point-names': 'a use case\'s extension points have different names',
+};
+const UC_KINDS = ['uml.Actor', 'uml.UseCase'];
+function ucProblems(model) {
+  const out = [], at = new Map(), say = (level, rule, path, ids, msg) => out.push({ level, rule, path, ids: ids.filter(x => x != null), message: `${rule}: ${msg}` });
+  UC_ARR(model && model.nodes).forEach(n => { if (UC_OBJ(n) && typeof n.id === 'string' && !at.has(n.id)) at.set(n.id, n); });
+  const ty = id => (at.get(id) || {}).type, q = id => JSON.stringify(at.has(id) ? ucName(at.get(id)) : String(id)), uc = id => ty(id) === 'uml.UseCase';
+  UC_ARR(model && model.nodes).forEach((n, i) => { if (!UC_OBJ(n) || !UC_KINDS.includes(n.type)) return;
+    if (!UC_HAS(n.label) || !String(n.label).trim()) say('error', 'named', `nodes[${i}]`, [n.id], `${n.type === 'uml.Actor' ? 'actor' : 'use case'} ${n.id} has no name`);
+    const p = n.parent != null && at.get(n.parent), ok = n.type === 'uml.UseCase' ? ['uml.Subject', 'uml.Package'] : ['uml.Package'];
+    if (p && !ok.includes(p.type)) say('warning', 'use-case-owner', `nodes[${i}].parent`, [n.id, p.id], `${q(n.id)} is owned by ${q(p.id)}, a ${String(p.type).split('.').pop()}: ${n.type === 'uml.UseCase' ? 'a use case\'s owner is a subject or a package' : 'an actor\'s owner is a package, or none'}`);
+    if (n.type !== 'uml.UseCase') return;
+    const seen = new Map(); ucPointsOf(n).forEach(m => { const k = ucName(m), was = seen.get(k);
+      if (was) say('warning', 'point-names', `nodes[${i}].members[${UC_ARR(n.members).indexOf(m)}]`, [n.id, was, m.id], `${q(n.id)} has two extension points named "${k}" (${was}, ${m.id})`); else seen.set(k, m.id); }); });
+  const inc = new Map();
+  UC_ARR(model && model.edges).forEach((e, i) => { if (!UC_OBJ(e)) return; const path = `edges[${i}]`, ends = [e.id, e.from, e.to];
+    if (e.type === 'uml.Association' && (UC_KINDS.includes(ty(e.from)) || UC_KINDS.includes(ty(e.to))) && ![ty(e.from), ty(e.to)].sort().every((t, k) => t === UC_KINDS[k]))
+      say('error', 'association-ends', path, ends, `${e.id} joins ${q(e.from)} and ${q(e.to)}: an association joins an actor and a use case`);
+    if ((e.type === 'uml.Include' || e.type === 'uml.Extend') && (!uc(e.from) || !uc(e.to) || e.from === e.to))
+      say('error', e.type === 'uml.Include' ? 'include-ends' : 'extend-ends', path, ends, `${e.id} runs from ${q(e.from)} to ${q(e.to)}: from a use case to another use case`);
+    if (e.type === 'uml.Include' && uc(e.from) && uc(e.to)) inc.set(e.from, [...(inc.get(e.from) || []), [e.to, path, e.id]]);
+    if (e.type === 'uml.Extend' && uc(e.to)) { const pts = UC_ARR(UC_PROPS(e).extensionPoints), mine = new Set(ucPointsOf(at.get(e.to)).map(m => m.id)), bad = pts.filter(p => !mine.has(p));
+      if (!pts.length) say('error', 'extend-points', path, [e.id, e.to], `${e.id} names no extension point of ${q(e.to)}`);
+      else if (bad.length) say('error', 'extend-points', `${path}.props.extensionPoints`, [e.id, e.to, ...bad.map(String)], `${e.id} names ${bad.map(p => JSON.stringify(String(p))).join(', ')}, not ${bad.length === 1 ? 'an extension point' : 'extension points'} of ${q(e.to)}`); }
+    if (e.type === 'uml.Generalization' && (UC_KINDS.includes(ty(e.from)) || UC_KINDS.includes(ty(e.to))) && (ty(e.from) !== ty(e.to) || e.from === e.to))
+      say('error', 'generalization-kinds', path, ends, `${e.id} runs from ${q(e.from)} to ${q(e.to)}: a generalization joins two actors or two use cases`); });
+  // an include cycle: said once, at the include that closes it, naming every use case on it
+  const state = new Map(), stack = [];
+  const walk = id => { state.set(id, 1); stack.push(id);
+    for (const [p, path, eid] of inc.get(id) || []) {
+      if (state.get(p) === 1) { const loop = stack.slice(stack.indexOf(p)); say('error', 'include-cycle', path, [...loop, eid], `${[...loop, p].map(q).join(' → ')} includes itself (${eid})`); }
+      else if (!state.has(p)) walk(p); }
+    stack.pop(); state.set(id, 2); };
+  [...inc.keys()].forEach(id => { if (!state.has(id)) walk(id); });
+  return out;
+}
+
+/* ---- describe(): the view in sentences, each element by its accessible name in reading order, then each line ---- */
+function ucDescribe(model, viewId) {
+  const v = UC_ARR(model && model.views).find(x => UC_OBJ(x) && x.id === viewId); if (!v) throw new Error(`umlimator: no view ${JSON.stringify(viewId)}`);
+  const pic = ucPic(model, v), lines = ucLines(model, v, pic), by = new Map(lines.map(e => [e.id, e]));
+  return [`${v.title || v.id}: a use case diagram of ${ucPlural(pic.ids.length, 'element')} and ${ucPlural(lines.length, 'line')}.`,
+    ...ucOrder(pic, lines).map(id => (by.has(id) ? ucLineName(model, by.get(id), pic) : ucNodeName(model, pic.at.get(id), pic)) + '.')].join('\n');
+}
+
+/* ---- editing (§8.4) ---- */
+// the Owner field: a use case's subjects and packages, an actor's, a subject's or a comment's packages, each by its name
+function ucOwners(model, x) {
+  if (!UC_OBJ(x) || x.from != null || !['uml.UseCase', 'uml.Actor', 'uml.Subject', 'uml.Comment'].includes(x.type)) return null;
+  const kinds = x.type === 'uml.UseCase' ? ['uml.Subject', 'uml.Package'] : ['uml.Package'];
+  return UC_ARR(model.nodes).filter(n => UC_OBJ(n) && kinds.includes(n.type)).map(n => ({ id: n.id, label: ucName(n) }));
+}
+// an extension point is a member row, by its name
+const ucPointText = t => { const s = String(t ?? '').trim(); return s ? { type: 'uml.ExtensionPoint', label: s, props: {} } : { error: 'An extension point has a name' }; };
+// connect: an association drawn from a use case to an actor is added from the actor, so that actors are ranked first (§8.1)
+function ucConnect(model, view, from, to, at, line) {
+  const ty = id => (UC_ARR(model.nodes).find(n => UC_OBJ(n) && n.id === id) || {}).type;
+  if (!UC_OBJ(line) || line.type !== 'uml.Association' || ty(from) !== 'uml.UseCase' || ty(to) !== 'uml.Actor') return null;
+  const used = new Set(); JSON.stringify(model, (k, v) => { if (k === 'id' && typeof v === 'string') used.add(v); return v; });
+  let k = 1; while (used.has('association' + k)) k++;
+  return [{ op: 'add', element: { id: 'association' + k, type: 'uml.Association', from: to, to: from }, view: view.id }];
+}
+
+const UC_STEREO = { key: 'stereotypes', label: 'Stereotypes', kind: 'list' };
+const UC_TYPE = registerDiagramType('uml.use-case', {
+  title: 'use case diagram',
+  elements: [['Actor', 'Actor'], ['UseCase', 'Use case'], ['Subject', 'Subject'], ['Comment', 'Comment']].map(([t, label]) => ({ type: 'uml.' + t, label })),
+  lines: [['Association', 'Association'], ['Include', 'Include'], ['Extend', 'Extend'], ['Generalization', 'Generalization'], ['CommentLink', 'Comment link']].map(([t, label]) => ({ type: 'uml.' + t, label })),
+  props: {
+    'uml.Actor': [UC_STEREO], 'uml.UseCase': [UC_STEREO], 'uml.Subject': [UC_STEREO], 'uml.Association': [UC_STEREO],
+    'uml.Extend': [{ key: 'condition', label: 'Condition', kind: 'text' }, { key: 'extensionPoints', label: 'Extension points (ids)', kind: 'list' }],
+    'uml.Include': [], 'uml.Generalization': [], 'uml.CommentLink': [],
+  },
+  refs: { 'uml.Extend': { 'props.extensionPoints': 'drop' } }, // a deleted extension point leaves every extend that names it
+  rankFlip: e => e.type === 'uml.Generalization' || e.type === 'uml.Extend', // the parent and the base first
+  layout: ucGeo,
+  boxes: (model, view) => ucPic(model, view).boxes,
+  owners: ucOwners,
+  member: { print: m => String(m.label ?? ''), edit: (m, t) => { const r = ucPointText(t); return r.error ? r : { commands: [{ op: 'set', id: m.id, path: 'label', value: r.label }] }; }, add: ucPointText, holds: n => n.type === 'uml.UseCase' },
+  validate: ucProblems,
+  rules: UC_RULES,
+  describe: ucDescribe,
+  edits: { connect: ucConnect },
+});
+/* ---------- the activity diagram, uml.activity (work package 4.5, notes/stage-4.md §9) ----------
+   Control nodes, actions and flows from src/uml/flow.js; the send and accept signals, the object node, the data store and
+   the call behaviour action's rake here, each a look over flow.js's rounded box. Partitions are lanes (§5): each node's row
+   is moved into its lane's run of rows (laneRows) before layoutTyped, and the bands are found after it (laneBands). A
+   partition is left out of the layout and added back to a new geometry as a node on its band's header strip, so it is
+   selected, renamed and deleted as a node; the bands are kept in geo.bands and drawn in the type's `under` layer. The
+   header room laneBands asks for is made by moving the bands and the bounds back by its shift, not the nodes forward, so
+   nothing layoutTyped returned is copied or changed (§2.4). Flows are "name [guard]" (§7.3), cut at 280 px, with an
+   open arrowhead; laid out with repair: false and reroute: false (§17, §20 #13) and a row gap of 64 px (§5.2). Ships in
+   lib/umlimator-all.js only. */
+
+const AC_OBJ = x => x !== null && typeof x === 'object' && !Array.isArray(x), AC_ARR = x => (Array.isArray(x) ? x : []);
+const AC_HAS = x => x != null && String(x).trim() !== '', AC_PART = x => (AC_HAS(x) ? String(x).trim() : undefined);
+const AC = { rgap: 64, gap: 64, cut: 280, sig: 14, rake: 10, line: 'var(--um-muted)' };
+const AC_FLOWS = ['uml.ControlFlow', 'uml.ObjectFlow'], AC_LINES = [...AC_FLOWS, 'uml.CommentLink'];
+const AC_OBJECTS = ['uml.ObjectNode', 'uml.DataStoreNode'];
+// each node type: its shape and its word (accessible names, the PDF)
+const AC_LOOK = {
+  'uml.InitialNode': ['initial', 'Initial node'], 'uml.ActivityFinalNode': ['final', 'Activity final'], 'uml.FlowFinalNode': ['flow-final', 'Flow final'],
+  'uml.Action': ['rounded', 'Action'], 'uml.CallBehaviorAction': ['call', 'Call behaviour action'], 'uml.SendSignalAction': ['send', 'Send signal action'],
+  'uml.AcceptEventAction': ['accept', 'Accept event action'], 'uml.DecisionNode': ['diamond', 'Decision'], 'uml.MergeNode': ['diamond', 'Merge'],
+  'uml.ForkNode': ['bar', 'Fork'], 'uml.JoinNode': ['bar', 'Join'], 'uml.ObjectNode': ['object', 'Object node'], 'uml.DataStoreNode': ['object', 'Data store'],
+  'uml.ActivityPartition': ['partition', 'Partition'], 'uml.Comment': ['note', 'Comment'],
+};
+const AC_NODES = Object.keys(AC_LOOK).filter(t => t !== 'uml.ActivityPartition' && t !== 'uml.Comment'); // what a flow may end on
+const acLook = x => (Object.hasOwn(AC_LOOK, x.type) ? AC_LOOK[x.type] : ['rounded', String(x.type || 'Node').split('.').pop()]);
+
+/* ---- the activity's own shapes, each a look over SHAPE.rounded (flow.js): its text drawn in `body` (part of the node's
+   box), its outline replaced by `path`, and `extra` drawn over it ---- */
+const acOver = (shape, n, body, path, extra = '') => { const m = { ...n, ...body }, s = SHAPE.rounded.draw(m);
+  return s.split(SHAPE.rounded.out(m)).join(path).replace('class="node rounded"', `class="node ${shape}"`).replace('data-shape="rounded"', `data-shape="${shape}"`).replace(/<\/g>$/, extra + '</g>'); };
+const acGrow = (n, d) => ({ x: n.x - d, y: n.y - d, w: n.w + 2 * d, h: n.h + 2 * d });
+// send: a convex pentagon, its point on the right; accept: a concave one, its notch on the left (UML 2.5.1 §16.3.4)
+const sigOut = concave => (n, d = 0) => { const { x, y, w, h } = acGrow(n, d), cy = y + h / 2, k = AC.sig;
+  return concave ? `M${r2(x)} ${r2(y)}H${r2(x + w)}V${r2(y + h)}H${r2(x)}L${r2(x + k)} ${r2(cy)}Z` : `M${r2(x)} ${r2(y)}H${r2(x + w - k)}L${r2(x + w)} ${r2(cy)}L${r2(x + w - k)} ${r2(y + h)}H${r2(x)}Z`; };
+const sigIn = concave => (n, s, t) => { const k = AC.sig, b = n.h / 2, u = Math.min(1, Math.abs(t - n.y - b) / b);
+  if (concave) return s === 'L' ? k * (1 - u) : 0;
+  return s === 'R' ? k * u : (s === 'T' || s === 'B') && t > n.x + n.w - k ? b * Math.min(1, (t - n.x - n.w + k) / k) : 0; };
+const signal = concave => ({ size: n => { const s = SHAPE.rounded.size(n); return { w: s.w + AC.sig, h: s.h }; }, out: sigOut(concave), inset: sigIn(concave),
+  draw: n => acOver(concave ? 'accept' : 'send', n, concave ? { x: n.x + AC.sig, w: n.w - AC.sig } : { w: n.w - AC.sig }, sigOut(concave)(n)) });
+SHAPE.send = signal(false); SHAPE.accept = signal(true);
+// an object node: a rectangle, its name (a data store's «datastore» over it)
+SHAPE.object = { size: n => SHAPE.rounded.size(n), out: boxOut(0), inset: () => 0, draw: n => acOver('object', n, {}, boxOut(0)(n)) };
+// a call behaviour action: the rounded box, its name above UML's rake at its bottom right
+SHAPE.call = { size: n => { const s = SHAPE.rounded.size(n); return { w: s.w, h: s.h + AC.rake }; }, out: SHAPE.rounded.out, inset: SHAPE.rounded.inset,
+  draw(n) { const x = n.x + n.w - 14, y = n.y + n.h - 5;
+    return acOver('call', n, { h: n.h - AC.rake }, SHAPE.rounded.out(n), `<path d="M${r2(x)} ${r2(y - 10)}V${r2(y)}M${r2(x - 5)} ${r2(y)}V${r2(y - 5)}H${r2(x + 5)}V${r2(y)}" class="n-det ac-rake" fill="none" stroke="${AC.line}" stroke-width="1.3"/>`); } };
+for (const k of ['send', 'accept', 'object', 'call']) { const S = SHAPE[k]; S.face = n => [n.y, n.y + n.h]; S.ports = (n, side, j = 1) => portsOn(S, n, side, j); }
+// a partition: its name on its band's header strip (n: the strip), over a transparent area 24 px across to hit
+SHAPE.partition = {
+  draw(n) { const flat = n.w >= n.h, t = fit(String(n.label ?? ''), 11, (flat ? n.w : n.h) - 12), cx = n.x + n.w / 2, cy = n.y + n.h / 2;
+    const hit = flat ? [n.x, n.y - 1, n.w, n.h + 2] : [n.x - 1, n.y, n.w + 2, n.h];
+    return `<g class="node partition" data-id="${esc(n.id)}" data-shape="partition" tabindex="-1" role="img" aria-label="${esc(n.aria || 'Partition ' + (n.label ?? ''))}">`
+      + `<rect x="${r2(hit[0])}" y="${r2(hit[1])}" width="${r2(hit[2])}" height="${r2(hit[3])}" class="fl-hit" fill="transparent"/>`
+      + `<text x="${r2(cx)}" y="${r2(cy + 4)}" text-anchor="middle" class="c-name" fill="var(--um-text)" style="font:600 11px var(--um-sans)"${flat ? '' : ` transform="rotate(-90 ${r2(cx)} ${r2(cy)})"`}>${esc(t)}</text></g>`; },
+};
+
+/* ---- the view read: its nodes, its partitions and the lane each node is drawn in, its lines ---- */
+function actIndex(model, view) {
+  const N = new Map(), E = new Map(), path = new Map();
+  AC_ARR(model && model.nodes).forEach((n, k) => { if (AC_OBJ(n) && typeof n.id === 'string' && !N.has(n.id)) { N.set(n.id, n); path.set(n.id, `nodes[${k}]`); } });
+  AC_ARR(model && model.edges).forEach((e, k) => { if (AC_OBJ(e) && typeof e.id === 'string' && !E.has(e.id)) { E.set(e.id, e); path.set(e.id, `edges[${k}]`); } });
+  const ids = [...new Set(AC_ARR(view && view.nodeIds).filter(id => N.has(id)))], shown = new Set(ids);
+  const isPart = id => N.has(id) && N.get(id).type === 'uml.ActivityPartition', parts = ids.filter(isPart), lanes = new Set(parts);
+  // the nearest shown partition above an element (§9.2), or null; a cycle of owners stops where it closes
+  const up = id => { const seen = new Set([id]); for (let p = (N.get(id) || {}).parent; p != null && N.has(p) && !seen.has(p); p = N.get(p).parent) { if (lanes.has(p)) return p; seen.add(p); } return null; };
+  // a lane's own owner lane, or null at the top: a lane whose chain of shown owners comes back to it is at the top (laneRows')
+  const outer = id => { const seen = new Set(); for (let l = up(id); l != null && !seen.has(l); l = up(l)) { if (l === id) return null; seen.add(l); } return up(id); };
+  const laneOf = id => (lanes.has(id) ? null : up(id)), drawn = ids.filter(id => !lanes.has(id)), on = new Set(drawn);
+  const list = Array.isArray(view && view.edges) ? view.edges.map(x => (typeof x === 'string' ? E.get(x) : x)) : [...E.values()].filter(e => AC_LINES.includes(e.type));
+  const lines = list.filter(e => AC_OBJ(e) && typeof e.id === 'string' && on.has(e.from) && on.has(e.to));
+  const under = p => drawn.filter(id => { for (let l = laneOf(id); l != null; l = outer(l)) if (l === p) return true; return false; });
+  return { N, E, path, ids, shown, parts, drawn, lines, up, laneOf, isPart, under,
+    lanes: parts.map((id, order) => ({ id, parent: outer(id), order })) };
+}
+const acName = x => String(x.label ?? x.id);
+const acProps = x => (AC_OBJ(x && x.props) ? x.props : {});
+const acStereo = x => AC_ARR(acProps(x).stereotypes).filter(AC_HAS).map(String);
+const acPlural = (k, w, ws = w + 's') => `${k} ${k === 1 ? w : ws}`;
+// a node as a line's end names it: its label, else its word ("merge")
+const acCalled = x => (x ? (AC_HAS(x.label) ? String(x.label) : acLook(x)[1].toLowerCase()) : '?');
+const acViewName = (model, id) => { const v = AC_ARR(model && model.views).find(w => AC_OBJ(w) && w.id === id); return v ? String(v.title ?? v.id) : null; };
+
+// accessible names (§14): "Action Take the next order from the queue, in Order worker"; "Decision All books in stock?, 2 exits"
+function acNodeName(model, I, x, lines) {
+  const [, word] = acLook(x), st = acStereo(x), lane = I.laneOf(x.id), outs = lines.filter(e => e.from === x.id && AC_FLOWS.includes(e.type)).length, ins = lines.filter(e => e.to === x.id && AC_FLOWS.includes(e.type)).length;
+  if (x.type === 'uml.Comment') return 'Comment: ' + acName(x);
+  if (x.type === 'uml.ActivityPartition') return `Partition ${acName(x)}${st.length ? ` (${st.join(', ')})` : ''}, ${acPlural(I.under(x.id).length, 'node')}`;
+  const named = !['initial', 'final', 'flow-final', 'bar'].includes(acLook(x)[0]) && AC_HAS(x.label) ? ' ' + String(x.label).trim() : '';
+  const count = { 'uml.DecisionNode': acPlural(outs, 'exit'), 'uml.MergeNode': acPlural(ins, 'entry', 'entries'), 'uml.ForkNode': acPlural(outs, 'branch', 'branches'), 'uml.JoinNode': acPlural(ins, 'branch', 'branches') }[x.type];
+  const opens = x.type === 'uml.CallBehaviorAction' ? `opens ${acViewName(model, x.opensView) ?? 'no view'}` : null;
+  return [`${word}${named}${st.length ? ` (${st.join(', ')})` : ''}`, count, opens, lane != null ? `in ${acName(I.N.get(lane))}` : null].filter(Boolean).join(', ');
+}
+const AC_LINE_WORDS = { 'uml.ControlFlow': ['Control flow', 'the next step, once the one before ends'], 'uml.ObjectFlow': ['Object flow', 'an object or data passed on'], 'uml.CommentLink': ['Comment link', 'what a comment is about'] };
+function acLineName(I, e) {
+  const [word] = Object.hasOwn(AC_LINE_WORDS, e.type) ? AC_LINE_WORDS[e.type] : ['Line'], g = AC_PART(acProps(e).guard), nm = AC_PART(e.label);
+  return `${word} from ${acCalled(I.N.get(e.from))} to ${acCalled(I.N.get(e.to))}${nm ? `, named ${nm}` : ''}${g ? `, guard ${g}` : ''}`;
+}
+
+/* ---- the legend: each line kind and each control glyph the view draws (1.9's legendItem form) ---- */
+const acKey = (svg, name, says) => `<span class="lgi" title="${esc(name + ' — ' + says)}"><svg class="lgs" viewBox="0 0 28 16" aria-hidden="true"><g stroke="var(--um-muted)" stroke-width="1.4" stroke-linejoin="round" fill="none">${svg}</g></svg><b>${esc(name)}</b><span>${esc(says)}</span></span>`;
+const AC_ARROW = '<path d="M2 8H25"/><path d="M17 3L26 8L17 13"/>';
+const AC_KEYS = [
+  ['uml.ControlFlow', AC_ARROW], ['uml.ObjectFlow', AC_ARROW], ['uml.CommentLink', '<path d="M2 8H26" stroke-dasharray="3 2"/>'],
+  ['uml.InitialNode', '<circle cx="14" cy="8" r="5" fill="var(--um-text)" stroke="var(--um-text)"/>', 'Initial node', 'where the activity starts'],
+  ['uml.ActivityFinalNode', '<circle cx="14" cy="8" r="6"/><circle cx="14" cy="8" r="3" fill="var(--um-text)" stroke="none"/>', 'Activity final', 'ends the whole activity'],
+  ['uml.FlowFinalNode', '<circle cx="14" cy="8" r="6"/><path d="M10 4L18 12M18 4L10 12"/>', 'Flow final', 'ends its own branch only'],
+  ['uml.ForkNode', '<path d="M14 2V14" stroke="var(--um-text)" stroke-width="4"/>', 'Fork', 'splits the flow into branches that run at once'],
+  ['uml.JoinNode', '<path d="M14 2V14" stroke="var(--um-text)" stroke-width="4"/>', 'Join', 'waits for every branch, then goes on'],
+  ['uml.DecisionNode', '<path d="M14 2L21 8L14 14L7 8Z"/>', 'Decision', 'takes the one exit whose guard holds'],
+  ['uml.MergeNode', '<path d="M14 2L21 8L14 14L7 8Z"/>', 'Merge', 'goes on with whichever flow arrives'],
+];
+const acLegend = types => AC_KEYS.filter(([t]) => types.has(t)).map(([t, svg, name, says]) => (AC_LINE_WORDS[t] ? acKey(svg, ...AC_LINE_WORDS[t]) : acKey(svg, name, says)));
+
+/* ---- the view laid out: { model, view, pos, memo } (§9.1, §5) ---- */
+function actGeo({ model, view, pos, memo }) {
+  const I = actIndex(model, view), down = view.direction === 'down';
+  const at = id => (Object.hasOwn(pos || {}, id) && Array.isArray(pos[id]) ? pos[id] : [0, 0]);
+  const P = I.lanes.length ? laneRows(Object.fromEntries(I.drawn.map(id => [id, at(id)])), I.laneOf, I.lanes) : null; // each lane a run of rows
+  const bar = id => acLook(I.N.get(id))[0] === 'bar', side = (id, w) => I.lines.filter(e => e[w] === id).length;
+  const nodes = I.drawn.map(id => { const x = I.N.get(id), [shape] = acLook(x), [col, row] = P ? P[id] : at(id), st = acStereo(x);
+    const d = { id, label: ['initial', 'final', 'flow-final', 'bar'].includes(shape) ? '' : acName(x), type: x.type, kind: 'file', shape, aria: acNodeName(model, I, x, I.lines), col, row,
+      stereotypes: x.type === 'uml.DataStoreNode' ? ['datastore', ...st] : st, ...(shape === 'bar' ? { busy: Math.max(side(id, 'from'), side(id, 'to')), down } : {}) };
+    return { ...d, ...SHAPE[shape].size(d) }; });
+  // a bar's lines enter on the side facing the flow's start and leave on the other (§4.1): left and right in the layout's
+  // own axes, which a view laid out down turns to top and bottom
+  const edges = I.lines.map(e => { const note = e.type === 'uml.CommentLink', label = note ? '' : flowText(e.label, acProps(e).guard);
+    return { id: e.id, _id: e.id, type: e.type, from: e.from, to: e.to, ...(label ? { label, cut: AC.cut } : {}), end: note ? { from: 'none', to: 'none', dashed: true } : { from: 'none', to: 'open' },
+      aria: acLineName(I, e), ...(bar(e.from) ? { fromSide: 'right' } : {}), ...(bar(e.to) ? { toSide: 'left' } : {}), ...(AC_OBJ(e.style) || typeof e.style === 'string' ? { style: e.style } : {}) }; });
+  // a typed view's router makes no room for a label (labelRoom is a map's): with guards to draw, the columns are spread by the
+  // widest label and 40 px for its stubs laid out right, as the class type does, and by 48 px laid out down, where a label
+  // lies across its line. ponytail: one gap for every column; a gap per column needs labelRoom for typed views (the core's)
+  const wide = edges.some(e => e.label) ? (down ? 48 : Math.ceil(Math.max(...edges.filter(e => e.label).map(labelW))) + 40) : 0;
+  const g = layoutTyped({ nodes, edges, direction: down ? 'down' : 'right', gap: AC.gap + wide, rgap: AC.rgap, repair: false, reroute: false }, memo);
+  return acFinish(model, g, I, down);
+}
+
+/* The laid-out graph as it is drawn, a new object (layoutTyped's memo keeps the one it returned, §2.4): the bands, the
+   partitions on their headers, geo.order, the slots and the legend */
+function acFinish(model, g, I, down) {
+  let bands = [], bounds = g.bounds;
+  if (I.lanes.length) { const L = laneBands(g, I.lanes, I.laneOf, down, AC.rgap), back = b => ({ ...b, x: r2(b.x - L.shift.x), y: r2(b.y - L.shift.y) });
+    bands = L.bands.map(b => ({ ...back(b), head: back(b.head) })); bounds = back(L.bounds); }
+  // a header is aside, off the columns, at the first node's column and row: the canvas reads a drop's column and row from the
+  // nodes when every one has them (render.js gridView, hintAt)
+  const byId = { ...g.byId }, { col = 0, row = 0 } = g.nodes[0] || {};
+  const heads = bands.map(b => { const x = I.N.get(b.id); // k: the 'file' kind's, as layoutTyped gives the nodes, so a view of partitions only draws
+    return (byId[b.id] = { id: b.id, label: acName(x), type: x.type, kind: 'file', k: 'file', shape: 'partition', aside: true, col, row, aria: acNodeName(model, I, x, I.lines), ...b.head }); });
+  // reading order (§14): a partition, then its nested partitions, then its own nodes by rank; then the nodes in no lane by
+  // rank; then the lines. The nodes are drawn in it, then the headers, so the canvas's first node is a laid-out one
+  const rank = (a, b) => byId[a].col - byId[b].col || byId[a].row - byId[b].row, order = [];
+  const put = p => { order.push(p); I.lanes.filter(l => l.parent === p).forEach(l => put(l.id)); order.push(...I.drawn.filter(id => I.laneOf(id) === p).sort(rank)); };
+  I.lanes.filter(l => l.parent == null).forEach(l => put(l.id));
+  order.push(...I.drawn.filter(id => I.laneOf(id) == null).sort(rank));
+  const mid = n => ({ x: n.x + n.w / 2, y: n.y + n.h / 2 });
+  const types = new Set([...g.edges.map(e => e.type), ...I.drawn.map(id => I.N.get(id).type)]);
+  return { ...g, nodes: [...order.filter(id => !I.isPart(id)), ...I.parts].map(id => byId[id]), byId, bounds, bands, partitions: heads.map(h => h.id), order: [...order, ...g.edges.map(e => e.id)],
+    // the slots (src/typed/edit.js): one per node and one per partition's header, so the palette's add hears what is selected
+    slots: [...I.drawn.map(id => ({ after: id, parent: I.laneOf(id), ...mid(byId[id]) })), ...heads.map(h => ({ after: h.id, parent: h.id, ...mid(h) }))], legend: acLegend(types) };
+}
+
+/* the bands (§5.3), under the lines: each band's outline and the line closing its header strip */
+function actDraw(g) {
+  const bs = AC_ARR(g.bands);
+  if (!bs.length) return { under: '', over: '' };
+  return { under: '<g class="ac-lanes">' + bs.map(b => { const h = b.head, flat = h.w >= h.h;
+    return frame(b.x, b.y, b.w, b.h) + `<path class="ac-head" d="${flat ? `M${r2(h.x)} ${r2(h.y + h.h)}H${r2(h.x + h.w)}` : `M${r2(h.x + h.w)} ${r2(h.y)}V${r2(h.y + h.h)}`}" stroke="${AC.line}" stroke-width="1.2"/>`; }).join('') + '</g>', over: '' };
+}
+
+/* ---- validators (§9.3): the shared flow rules (flow.js), then the activity's own. Each problem: { level, rule, path,
+   message, ids } ---- */
+const ACT_RULES = {
+  ...FLOW_RULES,
+  'object-flow': 'an object flow has an object node or a data store at one end; a control flow has none at either',
+  'partition-owner': 'a partition\'s owner is a partition or none; a node\'s owner is a partition or none',
+  'in-lane': 'on a view that shows a partition, every node is in one',
+  'calls-view': 'a call behaviour action opens an activity view of the model',
+};
+function actProblems(model, view) {
+  const I = actIndex(model, view), out = [...flowProblems(model, view, AC_NODES)], seen = id => !view || I.shown.has(id);
+  const say = (rule, path, ids, msg, level = 'warning') => out.push({ level, rule, path, ids, message: `${rule}: ${msg}` });
+  const q = id => { const x = I.N.get(id); return x && AC_HAS(x.label) ? `${id} ("${x.label}")` : id; };
+  I.E.forEach((e, id) => { if (!AC_FLOWS.includes(e.type) || !(seen(e.from) || seen(e.to))) return;
+    const objs = [e.from, e.to].filter(x => I.N.has(x) && AC_OBJECTS.includes(I.N.get(x).type));
+    if (e.type === 'uml.ObjectFlow' && !objs.length) say('object-flow', I.path.get(id), [id, e.from, e.to], `object flow ${id} joins ${q(e.from)} and ${q(e.to)}, neither an object node nor a data store`);
+    if (e.type === 'uml.ControlFlow' && objs.length) say('object-flow', I.path.get(id), [id, ...objs], `control flow ${id} ends on ${objs.map(q).join(' and ')}: a flow to or from an object node is an object flow`); });
+  I.N.forEach((x, id) => { if (!seen(id) || !(AC_NODES.includes(x.type) || x.type === 'uml.ActivityPartition') || x.parent == null || !I.N.has(x.parent)) return;
+    const p = I.N.get(x.parent); if (p.type !== 'uml.ActivityPartition') say('partition-owner', `${I.path.get(id)}.parent`, [id, p.id], `${q(id)} is owned by ${q(p.id)}, a ${String(p.type).split('.').pop()}, not a partition`, 'error'); });
+  I.N.forEach((x, id) => { if (x.type !== 'uml.CallBehaviorAction' || !seen(id)) return;
+    const v = AC_ARR(model.views).find(w => AC_OBJ(w) && w.id === x.opensView);
+    if (!v || v.diagram !== 'uml.activity') say('calls-view', I.path.get(id), [id], `${q(id)} ${x.opensView == null ? 'opens no view' : `opens ${JSON.stringify(x.opensView)}, which is ${v ? 'not an activity view' : 'no view of the model'}`}`); });
+  if (view && I.parts.length) { const vi = AC_ARR(model.views).indexOf(view);
+    I.drawn.forEach(id => { if (I.N.get(id).type !== 'uml.Comment' && I.laneOf(id) == null) say('in-lane', `views[${vi}].nodeIds`, [id, view.id], `${q(id)} is in no partition view ${JSON.stringify(view.id)} shows: it is drawn after the lanes`); }); }
+  return out;
+}
+
+/* ---- describe(): the view in words: its partitions, then from each initial node each node once with the flows out of it,
+   then the nodes no flow reaches ---- */
+function actDescribe(model, viewId) {
+  const v = AC_ARR(model && model.views).find(x => AC_OBJ(x) && x.id === viewId); if (!v) throw new Error(`umlimator: no view ${JSON.stringify(viewId)}`);
+  const I = actIndex(model, v), flows = I.lines.filter(e => AC_FLOWS.includes(e.type)), seen = new Set(), walk = [];
+  const visit = s => { const q = [s]; while (q.length) { const id = q.shift(); if (seen.has(id)) continue; seen.add(id); walk.push(id); flows.filter(e => e.from === id).forEach(e => q.push(e.to)); } };
+  I.drawn.filter(id => I.N.get(id).type === 'uml.InitialNode').forEach(visit); I.drawn.forEach(visit);
+  const out = [`${v.title || v.id}: an activity diagram of ${acPlural(I.drawn.length, 'node')}, ${acPlural(flows.length, 'flow')} and ${acPlural(I.parts.length, 'partition')}.`];
+  I.parts.forEach(p => out.push(acNodeName(model, I, I.N.get(p), I.lines) + '.'));
+  walk.forEach(id => { const x = I.N.get(id), said = I.lines.filter(e => e.from === id).map(e => { const g = AC_PART(acProps(e).guard), nm = AC_PART(e.label);
+    return e.type === 'uml.CommentLink' ? `about ${acCalled(I.N.get(e.to))}` : `then ${acCalled(I.N.get(e.to))}${nm ? ` (${nm})` : ''}${g ? ` [${g}]` : ''}${e.type === 'uml.ObjectFlow' ? ', an object flow' : ''}`; });
+    out.push(acNodeName(model, I, x, I.lines) + (said.length ? '; ' + said.join('; ') : '') + '.'); });
+  return out.join('\n');
+}
+
+/* ---- editing (§9.4, §12.1): each hook returns commands, null to leave the gesture to the default, or { error } for the
+   hint line, and never a transaction that breaks a rule (S5) ---- */
+function acFreshId(model, base) {
+  const used = new Set(); JSON.stringify(model, (k, v) => { if (k === 'id' && typeof v === 'string') used.add(v); return v; });
+  const b = String(base).toLowerCase().replace(/->/g, '-').replace(/[^\p{L}\p{N}_$-]+/gu, '-').replace(/^-+|-+$/g, '') || 'node'; // ids never hold "->" (M2)
+  let k = 1; while (used.has(k === 1 ? b : `${b}-${k}`)) k++;
+  return k === 1 ? b : `${b}-${k}`;
+}
+// the commands, or { error } naming the first error they bring that the view does not have already
+function acGuard(model, view, commands) {
+  const key = p => p.rule + ' ' + p.ids.join(' '), errs = m => actProblems(m, AC_ARR(m.views).find(v => AC_OBJ(v) && v.id === view.id)).filter(p => p.level === 'error');
+  let now; try { now = apply(model, commands); } catch (e) { return { error: String(e.message) }; }
+  const was = new Set(errs(model).map(key)), bad = errs(now).find(p => !was.has(key(p)));
+  return bad ? { error: bad.message } : commands;
+}
+// connect: a flow of the kind picked; a decision's second exit gets the guard else when neither has one
+function actConnect(model, view, from, to, at, line) {
+  if (!AC_OBJ(view) || !AC_OBJ(line) || !AC_FLOWS.includes(line.type)) return null;
+  const I = actIndex(model, view), x = I.N.get(from), outs = [...I.E.values()].filter(e => AC_FLOWS.includes(e.type) && e.from === from);
+  const props = { ...(AC_OBJ(line.props) ? structuredClone(line.props) : {}) };
+  if (x && x.type === 'uml.DecisionNode' && outs.length === 1 && !AC_HAS(props.guard) && AC_PART(acProps(outs[0]).guard) !== 'else') props.guard = 'else';
+  return acGuard(model, view, [{ op: 'add', element: { id: acFreshId(model, `${from}-${to}`), type: line.type, from, to, ...(Object.keys(props).length ? { props } : {}) }, view: view.id }]);
+}
+// moveTo: a partition's header moves nothing (§5.3); a node dropped in another band changes lane, its pin removed; within
+// its own band, or by Alt + arrows, null: a pin, which is an order inside the lane (§5.2)
+function actMoveTo(model, view, id, at) {
+  if (!AC_OBJ(view)) return null;
+  const I = actIndex(model, view); if (I.isPart(id)) return [];
+  if ((I.N.get(id) || {}).type === 'uml.Comment') return null; // a comment is in no lane (add, in-lane): a pin
+  const bands = AC_ARR(AC_OBJ(at) && AC_OBJ(at.geo) ? at.geo.bands : null);
+  if (!I.shown.has(id) || !Array.isArray(at && at.pt) || !bands.length) return null;
+  const [x, y] = at.pt, hit = bands.filter(b => x >= b.x && x <= b.x + b.w && y >= b.y && y <= b.y + b.h).sort((a, b) => b.depth - a.depth)[0], to = hit ? hit.id : null;
+  if (to === I.laneOf(id)) return null;
+  const L = view.layout;
+  return [{ op: 'reparent', id, parent: to }, ...(AC_OBJ(L) && Object.hasOwn(L, id) ? [{ op: 'set', view: view.id, path: ['layout', id], value: undefined }] : [])];
+}
+// add: a node in the partition selected, else in the lane of the node selected (its slot's parent); a call behaviour action asks which activity view it opens (S18)
+function actAdd(model, view, entry, label, at) {
+  if (!AC_OBJ(view) || !AC_OBJ(entry) || !Object.hasOwn(AC_LOOK, entry.type)) return null;
+  const N = new Map(AC_ARR(model.nodes).filter(AC_OBJ).map(n => [n.id, n])), part = AC_ARR(AC_OBJ(at) ? at.sel : null).find(id => (N.get(id) || {}).type === 'uml.ActivityPartition');
+  const lane = part ?? (AC_OBJ(at) && at.parent != null && AC_ARR(at.sel).includes(at.after) ? at.parent : null);
+  const t = AC_PART(label), el = { id: acFreshId(model, t || AC_LOOK[entry.type][1]), type: entry.type, ...(t ? { label: t } : {}), ...(lane != null && entry.type !== 'uml.Comment' ? { parent: lane } : {}) };
+  const make = opens => [{ op: 'add', element: { ...el, ...(opens != null ? { opensView: opens } : {}) }, view: view.id }];
+  if (entry.type !== 'uml.CallBehaviorAction') return make();
+  const vs = AC_ARR(model.views).filter(v => AC_OBJ(v) && v.diagram === 'uml.activity');
+  return { pick: vs.map(v => String(v.title ?? v.id)), then: i => make(vs[i].id) };
+}
+// remove: Shift + Delete on a partition keeps what it holds, which goes to the partition's own owner (S10)
+function actRemove(model, view, ids, fromModel) {
+  if (!fromModel) return null;
+  const N = new Map(AC_ARR(model.nodes).filter(AC_OBJ).map(n => [n.id, n])), gone = new Set(AC_ARR(ids)), parts = [...gone].filter(id => (N.get(id) || {}).type === 'uml.ActivityPartition');
+  if (!parts.length) return null;
+  const keep = p => { const seen = new Set(); while (p != null && gone.has(p) && !seen.has(p)) { seen.add(p); p = (N.get(p) || {}).parent; } return p != null && N.has(p) && !gone.has(p) ? p : null; };
+  return [...[...N.values()].filter(n => !gone.has(n.id) && parts.includes(n.parent)).map(n => ({ op: 'reparent', id: n.id, parent: keep(n.parent) })), ...[...gone].map(id => ({ op: 'delete', id }))];
+}
+// rename: F2 on a flow reads "name [guard]" (§7.2) and sets each part that changed; on anything else, null (set label)
+function actRename(model, view, id, text) {
+  const e = AC_ARR(model && model.edges).find(x => AC_OBJ(x) && x.id === id);
+  if (!e || !AC_FLOWS.includes(e.type)) return null;
+  const r = parseFlow(text); if (r.error) return r;
+  return [...(r.name !== AC_PART(e.label) ? [{ op: 'set', id, path: 'label', value: r.name }] : []), ...(r.guard !== AC_PART(acProps(e).guard) ? [{ op: 'set', id, path: 'props.guard', value: r.guard }] : [])];
+}
+// the Owner field: every partition of the model, by its name from the top
+function actOwners(model, x) {
+  if (!AC_OBJ(x) || x.from != null || !(AC_NODES.includes(x.type) || x.type === 'uml.ActivityPartition')) return null;
+  const N = new Map(AC_ARR(model.nodes).filter(AC_OBJ).map(n => [n.id, n])), full = id => { const out = [], seen = new Set(); for (let p = id; p != null && N.has(p) && !seen.has(p); p = N.get(p).parent) { seen.add(p); out.unshift(acName(N.get(p))); } return out.join('::'); };
+  return [...N.values()].filter(n => n.type === 'uml.ActivityPartition').map(n => ({ id: n.id, label: full(n.id) }));
+}
+
+/* ---- the type ---- */
+const AC_ST = { key: 'stereotypes', label: 'Stereotypes', kind: 'list' }, AC_GUARD = { key: 'guard', label: 'Guard', kind: 'text' };
+const ACT_TYPE = registerDiagramType('uml.activity', {
+  title: 'activity diagram',
+  elements: [['Action', 'Action'], ['InitialNode', 'Initial', false], ['ActivityFinalNode', 'Activity final', false], ['FlowFinalNode', 'Flow final', false],
+    ['DecisionNode', 'Decision'], ['MergeNode', 'Merge'], ['ForkNode', 'Fork', false], ['JoinNode', 'Join', false], ['CallBehaviorAction', 'Call behaviour', true, 'uml.activity'],
+    ['SendSignalAction', 'Send signal'], ['AcceptEventAction', 'Accept event'], ['ObjectNode', 'Object node'], ['DataStoreNode', 'Data store'], ['ActivityPartition', 'Partition'], ['Comment', 'Comment']]
+    .map(([t, label, name, opens]) => ({ type: 'uml.' + t, label, ...(name === false ? { name: false } : {}), ...(opens ? { opens } : {}) })),
+  lines: [{ type: 'uml.ControlFlow', label: 'Control flow' }, { type: 'uml.ObjectFlow', label: 'Object flow' }, { type: 'uml.CommentLink', label: 'Comment link' }],
+  props: { ...Object.fromEntries(Object.keys(AC_LOOK).map(t => [t, [AC_ST]])), 'uml.Comment': [], 'uml.ControlFlow': [AC_GUARD, AC_ST], 'uml.ObjectFlow': [AC_GUARD, AC_ST], 'uml.CommentLink': [] },
+  layout: actGeo,
+  draw: actDraw,
+  owners: actOwners,
+  validate: actProblems,
+  rules: ACT_RULES,
+  describe: actDescribe,
+  edits: { connect: actConnect, moveTo: actMoveTo, add: actAdd, remove: actRemove, rename: actRename },
+  // the PDF's tables (§15): a node's kind, and its partition
+  word: (model, id) => { const x = AC_ARR(model && model.nodes).find(n => AC_OBJ(n) && n.id === id); return x && Object.hasOwn(AC_LOOK, x.type) ? AC_LOOK[x.type][1] : null; },
+  rows: (model, view, id) => { const I = actIndex(model, view), l = I.N.has(id) ? I.laneOf(id) : null; return l != null ? [`in ${acName(I.N.get(l))}`] : null; },
+});
+/* ---------- the state machine diagram, uml.state-machine (work package 4.6, notes/stage-4.md §6, §10) ----------
+   States (a rounded box, its name, then one compartment of rows: entry, do and exit, then each internal transition), a
+   composite state with a shown substate as a box (src/uml/owners.js's look) and closed with UML's decomposition
+   indicator, its regions nested boxes with no border when it has two or more (a dashed divider in the gap before each but
+   the first, the regions stretched across their state after the layout, on a copy); pseudostates by kind (initial, choice,
+   junction, fork, join, shallow and deep history, terminate) and the final state; transitions as lines with an open arrow,
+   their label the printed `trigger [guard] / effect` (src/uml/transition.js) cut at 280 px; comments. Laid out by
+   layoutTyped from the host's ranking, repair and reroute off (§17). Ships in lib/umlimator-all.js only. */
+
+const ST_OBJ = x => x !== null && typeof x === 'object' && !Array.isArray(x), ST_ARR = x => (Array.isArray(x) ? x : []);
+const ST_HAS = x => x != null && String(x).trim() !== '';
+const ST_PROPS = x => (ST_OBJ(x && x.props) ? x.props : {});
+const ST_OWN = (o, k) => (o != null && Object.hasOwn(o, k) ? o[k] : undefined);
+const stName = x => String(x.label ?? x.id);
+const stStereo = x => ST_ARR(ST_PROPS(x).stereotypes).filter(ST_HAS).map(String);
+const stPlural = (k, w) => `${k} ${k === 1 ? w : w + 's'}`;
+const ST_VERTEX = ['uml.State', 'uml.Pseudostate', 'uml.FinalState'];
+const ST_LINES = ['uml.Transition', 'uml.CommentLink'];
+const ST_ACTS = ['entry', 'do', 'exit'];
+const ST_KINDS = ['initial', 'choice', 'junction', 'fork', 'join', 'shallowHistory', 'deepHistory', 'terminate'];
+const ST_KIND_WORD = { initial: 'Initial pseudostate', choice: 'Choice', junction: 'Junction', fork: 'Fork', join: 'Join', shallowHistory: 'Shallow history', deepHistory: 'Deep history', terminate: 'Terminate' };
+const ST_KIND_SHAPE = { initial: 'initial', choice: 'diamond', junction: 'junction', fork: 'bar', join: 'bar', shallowHistory: 'history', deepHistory: 'history', terminate: 'terminate' };
+const stKind = x => { const k = ST_PROPS(x).kind; return ST_KINDS.includes(k) ? k : null; };
+const stMembers = (x, t) => ST_ARR(x && x.members).filter(m => ST_OBJ(m) && m.type === t);
+// a transition's parts as text (§7): the printed form, or the parts joined when they would not read back
+const stPartsText = x => { const p = ST_PROPS(x); return printTransition(p) ?? transitionText(p); };
+
+/* ---- the shapes (§4.1): junction, history, terminate, and the state's look and frames ---- */
+const ST = { line: 'var(--um-muted)', ink: 'var(--um-text)', bg: 'var(--um-stage-bg)', hit: 12, name: 12, nlh: 16, nmax: 180, st: 11, sth: 14, row: 11, rl: 15, padX: 10, padY: 8, minW: 96, maxW: 320, minH: 36, dec: 12 };
+const stNode = (n, shape, said, inner) => `<g class="node ${shape}" data-id="${esc(n.id)}" data-shape="${shape}" tabindex="-1" role="img" aria-label="${esc(n.aria || said)}">${inner}</g>`;
+// ponytail: flow.js's circle helpers, which it does not export
+const stCircle = (n, d = 0) => { const r = n.w / 2 + d, cx = n.x + n.w / 2, cy = n.y + n.h / 2;
+  return `M${r2(cx - r)} ${r2(cy)}A${r2(r)} ${r2(r)} 0 1 0 ${r2(cx + r)} ${r2(cy)}A${r2(r)} ${r2(r)} 0 1 0 ${r2(cx - r)} ${r2(cy)}Z`; };
+const stCircleIn = (n, s, t) => { const r = n.w / 2, u = t - (s === 'L' || s === 'R' ? n.y + n.h / 2 : n.x + n.w / 2); return r * (1 - Math.sqrt(Math.max(0, 1 - (u / r) ** 2))); };
+const stHit = n => `<circle cx="${r2(n.x + n.w / 2)}" cy="${r2(n.y + n.h / 2)}" r="${ST.hit}" class="fl-hit" fill="transparent"/>`;
+const stBody = (d, fill, stroke = ST.line) => `<path d="${d}" class="n-mask"/><path d="${d}" class="n-body" fill="${fill}" stroke="${stroke}"/>`;
+SHAPE.junction = { size: () => ({ w: 12, h: 12 }), out: stCircle, inset: stCircleIn, draw: n => stNode(n, 'junction', 'Junction', stHit(n) + stBody(stCircle(n), ST.ink, ST.ink)) };
+SHAPE.history = { size: () => ({ w: 24, h: 24 }), out: stCircle, inset: stCircleIn,
+  draw: n => stNode(n, 'history', n.deep ? 'Deep history' : 'Shallow history', stBody(stCircle(n), ST.bg)
+    + `<text x="${r2(n.x + n.w / 2)}" y="${r2(n.y + n.h / 2 + 4)}" text-anchor="middle" class="c-name" fill="${ST.ink}" style="font:600 11px var(--um-sans)">${n.deep ? 'H*' : 'H'}</text>`) };
+SHAPE.terminate = { size: () => ({ w: 20, h: 20 }), out: (n, d = 0) => `M${r2(n.x - d)} ${r2(n.y - d)}H${r2(n.x + n.w + d)}V${r2(n.y + n.h + d)}H${r2(n.x - d)}Z`, inset: () => 0,
+  draw: n => stNode(n, 'terminate', 'Terminate', stHit(n) + `<rect x="${n.x}" y="${n.y}" width="${n.w}" height="${n.h}" class="n-mask" style="fill:transparent"/>`
+    + `<path d="M${n.x} ${n.y}L${n.x + n.w} ${n.y + n.h}M${n.x + n.w} ${n.y}L${n.x} ${n.y + n.h}" class="n-body" fill="none" stroke="${ST.ink}" stroke-width="2"/>`) };
+
+// a state's texts: stereotypes, its name on up to three lines, then its compartment's rows (n.rows: [text]; n.collapsed holds
+// 'activities' to hide it; n.cap: at most that many, then "+k more"), and the decomposition indicator's strip (n.composite)
+function stParts(n) {
+  const st = ST_ARR(n.stereotypes).filter(ST_HAS).map(t => `«${t}»`), ls = flowWrap(n.label, ST.name, ST.nmax, 3);
+  const all = ST_ARR(n.acts), shown = ST_ARR(n.collapsed).includes('activities') ? null : all, cap = Number.isFinite(n.cap) ? Math.max(0, Math.floor(n.cap)) : Infinity;
+  const rows = shown ? [...shown.slice(0, cap), ...(shown.length > cap ? [`+${shown.length - cap} more`] : [])] : [];
+  const head = 2 * ST.padY + st.length * ST.sth + Math.max(1, ls.length) * ST.nlh, comp = rows.length ? 8 + rows.length * ST.rl : 0, dec = n.composite ? ST.dec : 0;
+  const w = Math.ceil(Math.min(ST.maxW, Math.max(ST.minW, ...st.map(t => textW(t, ST.st) + 2 * ST.padX), ...ls.map(l => textW(l, ST.name) + 2 * ST.padX), ...rows.map(r => textW(r, ST.row) + 2 * ST.padX))));
+  return { st, ls, rows, head, comp, dec, w, h: Math.max(ST.minH, head + comp + dec) };
+}
+SHAPE.state = {
+  size: n => { const p = stParts(n); return { w: p.w, h: p.h }; },
+  out: SHAPE.box.out, inset: SHAPE.box.inset,
+  draw(n) {
+    const p = stParts(n), { x, y, w, h } = n, cx = x + w / 2, max = w - 2 * ST.padX, text = (tx, ty, t, px, wt, fill, cls, more = '') => `<text x="${r2(tx)}" y="${r2(ty)}"${more} class="${cls}" fill="${fill}" style="font:${wt} ${px}px var(--um-sans)">${esc(fit(t, px, max))}</text>`;
+    const hh = p.comp || p.dec ? p.head : h; let ty = y + (hh - p.st.length * ST.sth - Math.max(1, p.ls.length) * ST.nlh) / 2; const hd = [];
+    p.st.forEach(t => { hd.push(text(cx, ty + 11, t, ST.st, 400, ST.line, 'c-st', ' text-anchor="middle"')); ty += ST.sth; });
+    p.ls.forEach(l => { hd.push(text(cx, ty + 12, l, ST.name, 600, ST.ink, 'c-name', ` text-anchor="middle" data-o="${esc(n.id)}"`)); ty += ST.nlh; });
+    const out = [stBody(SHAPE.box.out(n), ST.bg), `<g class="c-head" data-band="${r2(y)} ${r2(y + hh)}">${hd.join('')}</g>`];
+    if (p.comp) { const top = y + p.head;
+      out.push(`<g class="c-comp" data-comp="activities" data-band="${r2(top)} ${r2(top + p.comp)}"><path d="M${x} ${r2(top)}H${x + w}" class="n-det" stroke="${ST.line}"/>`
+        + p.rows.map((r, j) => text(x + ST.padX, top + 4 + j * ST.rl + 11, r, ST.row, 400, j >= (n.cap ?? Infinity) ? ST.line : ST.ink, j >= (n.cap ?? Infinity) ? 'c-more' : 'c-row')).join('') + '</g>'); }
+    // UML's decomposition indicator: two small rounded rectangles joined, at the bottom right
+    if (p.dec) { const by = y + h - 9, bx = x + w - 27;
+      out.push(`<g class="st-dec" fill="none" stroke="${ST.line}" stroke-width="1.2"><rect x="${r2(bx)}" y="${r2(by - 2.5)}" width="7" height="5" rx="2"/><rect x="${r2(bx + 12)}" y="${r2(by - 2.5)}" width="7" height="5" rx="2"/><path d="M${r2(bx + 7)} ${r2(by)}H${r2(bx + 12)}"/></g>`); }
+    return stNode(n, 'state', `State ${n.label ?? ''}`, out.join(''));
+  },
+  // open: a rectangle with 10 px corners on the box's border, the name centred in the 24 px header room, a line under it
+  frame: f => `<rect class="family-box" x="${f.x}" y="${f.y}" width="${f.w}" height="${f.h}" rx="10" stroke="var(--um-muted)"/>`
+    + `<text class="family-title" x="${r2(f.x + f.w / 2)}" y="${r2(f.y + 16)}" text-anchor="middle" fill="var(--um-text)" style="font:600 12px var(--um-sans)" data-t="ft" data-o="${esc(f.id)}">${esc(fit(f.title ?? f.label ?? f.id, 12, f.w - 24))}</text>`
+    + `<path d="M${f.x} ${r2(f.y + 24)}H${f.x + f.w}" class="st-head" stroke="var(--um-muted)"/>`,
+};
+// a region: no border (its box is there to select, drop into and outline), its name at its top left in 10 px, and the
+// dashed divider before it (f.div: [x1, y1, x2, y2]) when it is not its state's first
+SHAPE.region = {
+  frame: f => `<rect class="family-box" x="${f.x}" y="${f.y}" width="${f.w}" height="${f.h}" stroke="transparent" style="fill-opacity:0"/>`
+    + (f.div ? `<path d="M${r2(f.div[0])} ${r2(f.div[1])}L${r2(f.div[2])} ${r2(f.div[3])}" class="st-div" fill="none" stroke="var(--um-muted)" stroke-dasharray="6 4"/>` : '')
+    + (ST_HAS(f.label) ? `<text class="family-title" x="${r2(f.x + 8)}" y="${r2(f.y + 14)}" fill="var(--um-muted)" style="font:400 10px var(--um-sans)" data-t="ft" data-o="${esc(f.id)}">${esc(fit(f.label, 10, f.w - 16))}</text>` : ''),
+};
+for (const k of ['junction', 'history', 'terminate', 'state']) { const S = SHAPE[k]; S.face = n => [n.y, n.y + n.h]; S.ports = (n, side, j = 1) => portsOn(S, n, side, j); }
+
+/* ---- the view read: its owners (§6.1, §8.2), its lines, and every element's words ---- */
+const ST_LOOK = { boxTypes: ['uml.State'], qualify: false, members: ['uml.Region'], shape: x => (x.type === 'uml.Region' ? 'region' : 'state'), word: x => (x.type === 'uml.Region' ? 'Region' : 'Composite state') };
+// every node by id, every member with its owner
+function stIndex(model) {
+  const N = new Map(), M = new Map();
+  ST_ARR(model && model.nodes).forEach((n, i) => { if (!ST_OBJ(n) || typeof n.id !== 'string' || N.has(n.id)) return; N.set(n.id, { x: n, path: `nodes[${i}]` });
+    ST_ARR(n.members).forEach((m, j) => { if (ST_OBJ(m) && typeof m.id === 'string' && !M.has(m.id)) M.set(m.id, { x: m, owner: n, path: `nodes[${i}].members[${j}]` }); }); });
+  const kids = new Map(); N.forEach(({ x }) => { if (x.parent != null) kids.set(x.parent, [...(kids.get(x.parent) || []), x]); });
+  // a state's substates in the model: those it owns, directly or through its regions
+  const subs = id => [...(kids.get(id) || []), ...stMembers((N.get(id) || {}).x, 'uml.Region').flatMap(r => kids.get(r.id) || [])];
+  return { N, M, kids, subs };
+}
+// an element's owner (a region's is its state), and whether id is anc or lies under it
+const stUp = (I, id) => { const r = I.M.get(id); return r ? r.owner.id : (I.N.get(id) || { x: {} }).x.parent; };
+const stWithin = (I, id, anc) => { for (let p = id, seen = new Set(); p != null && !seen.has(p); p = stUp(I, p)) { if (p === anc) return true; seen.add(p); } return false; };
+// the words of an element as its accessible name says them: "Initial pseudostate", "Final state", "Placed"
+const stWord = x => (x.type === 'uml.Pseudostate' ? (ST_OWN(ST_KIND_WORD, stKind(x)) || 'Pseudostate') + (ST_HAS(x.label) ? ' ' + x.label : '') : x.type === 'uml.FinalState' ? 'Final state' + (ST_HAS(x.label) ? ' ' + x.label : '') : stName(x));
+// a state's activities as its compartment and its name say them
+const stActs = x => ST_ACTS.filter(k => ST_HAS(ST_PROPS(x)[k])).map(k => [k, String(ST_PROPS(x)[k])]);
+const stRows = x => [...stActs(x).map(([k, t]) => `${k} / ${t}`), ...stMembers(x, 'uml.InternalTransition').map(stPartsText)];
+function stPic(model, view) {
+  const pic = ownersOn(model, view, ST_LOOK), I = stIndex(model);
+  const boxes = pic.boxes.map(b => { const x = pic.at.get(b.id);
+    if (x.type === 'uml.Region') { const s = pic.at.get(b.parent), rs = stMembers(s, 'uml.Region'), k = rs.indexOf(x) + 1; // s: none when ownersOn broke a cycle
+      return { ...b, aria: `Region ${ST_HAS(x.label) ? x.label : k} of ${s ? stName(s) : String(b.parent ?? '')}, ${stPlural(pic.holds(b.id).length, 'state')}` }; }
+    return { ...b, aria: stNodeName(x, pic, I, true) }; });
+  return { ...pic, I, boxes };
+}
+// accessible names (§14): "State Placed, entry reserve the books, …, 1 internal transition"; "Composite state Fulfilling,
+// 2 regions"; "Initial pseudostate in Parcel"; "Final state"
+function stNodeName(x, pic, I, open) {
+  if (x.type === 'uml.Comment') return 'Comment: ' + stName(x);
+  const st = stStereo(x), why = st.length ? ` (${st.join(', ')})` : '', up = x.parent != null && pic.at.get(x.parent), within = up && !open && x.type !== 'uml.State' ? ` in ${stName(up)}` : '';
+  if (x.type !== 'uml.State') return stWord(x) + why + within;
+  const it = stMembers(x, 'uml.InternalTransition').length, rs = stMembers(x, 'uml.Region').length, subs = I.subs(x.id).length;
+  const parts = [...stActs(x).map(([k, t]) => `${k} ${t}`), ...(it ? [stPlural(it, 'internal transition')] : [])];
+  if (!subs && !rs) return [`State ${stName(x)}${why}`, ...parts].join(', ');
+  return [`Composite state ${stName(x)}${why}`, ...parts, rs ? stPlural(rs, 'region') : stPlural(subs, 'state'), ...(open ? [] : ['closed'])].join(', ');
+}
+// the lines drawn: those the view lists, or with no list the model's of this type's kinds, between two elements it shows
+function stLines(model, view, pic) {
+  const E = new Map(); ST_ARR(model && model.edges).forEach(e => { if (ST_OBJ(e) && typeof e.id === 'string' && !E.has(e.id)) E.set(e.id, e); });
+  const shown = new Set(pic.ids), list = Array.isArray(view.edges) ? view.edges.map(x => (typeof x === 'string' ? E.get(x) : x)) : [...E.values()];
+  return list.filter(e => ST_OBJ(e) && typeof e.id === 'string' && ST_LINES.includes(e.type) && shown.has(e.from) && shown.has(e.to));
+}
+const stLineLabel = e => (e.type === 'uml.Transition' ? [...stStereo(e).map(t => `«${t}»`), stPartsText(e)].filter(ST_HAS).join(' ') : stStereo(e).map(t => `«${t}»`).join(' '));
+// "Transition from Capturing payment to itself: capture failed [attempts < 3] / count the attempt"
+function stLineName(e, pic) {
+  const nm = id => stWord(pic.at.get(id)), said = stLineLabel(e), word = e.type === 'uml.CommentLink' ? 'Comment link' : 'Transition';
+  return `${word} from ${nm(e.from)} to ${e.from === e.to ? 'itself' : nm(e.to)}${said ? ': ' + said : ''}`;
+}
+// reading order (§14): readingOrder (a box, then what it holds, depth first), the top initial pseudostates first; then the lines
+function stOrder(pic, lines) {
+  const ids = readingOrder(pic), first = ids.filter(id => pic.owner(id) == null && stKind(pic.at.get(id)) === 'initial');
+  return [...first, ...ids.filter(id => !first.includes(id)), ...lines.map(e => e.id)];
+}
+
+/* ---- the legend: each line kind drawn, then each glyph ---- */
+const stLegendItem = (svg, name, says) => `<span class="lgi" title="${esc(name + ' — ' + says)}"><svg class="lgs" viewBox="0 0 28 16" aria-hidden="true">${svg}</svg><b>${esc(name)}</b><span>${esc(says)}</span></span>`;
+const ST_LEGEND = [
+  ['uml.Transition', 'Transition', 'trigger [guard] / effect: from one state to the next', '<g stroke="var(--um-muted)" stroke-width="1.4" stroke-linejoin="round" fill="none"><path d="M2 8H26"/><path d="M17 4L26 8L17 12"/></g>'],
+  ['uml.CommentLink', 'Comment link', 'what a comment is about', '<path d="M2 8H26" stroke="var(--um-muted)" stroke-width="1.4" stroke-dasharray="3 2"/>'],
+  ['initial', 'Initial', 'where a region starts', '<circle cx="14" cy="8" r="5" fill="var(--um-text)"/>'],
+  ['final', 'Final state', 'where a region ends', '<circle cx="14" cy="8" r="6" fill="none" stroke="var(--um-muted)" stroke-width="1.2"/><circle cx="14" cy="8" r="3.5" fill="var(--um-text)"/>'],
+  ['diamond', 'Choice', 'one exit, by the guards', '<path d="M14 2L20 8L14 14L8 8Z" fill="none" stroke="var(--um-muted)" stroke-width="1.2"/>'],
+  ['junction', 'Junction', 'transitions joined or split', '<circle cx="14" cy="8" r="3.5" fill="var(--um-text)"/>'],
+  ['bar', 'Fork or join', 'into or out of regions at once', '<rect x="12.5" y="1" width="3" height="14" fill="var(--um-text)"/>'],
+  ['history', 'History', 'H back to the last substate, H* at any depth', '<circle cx="14" cy="8" r="6.5" fill="none" stroke="var(--um-muted)" stroke-width="1.2"/><text x="14" y="11" text-anchor="middle" fill="var(--um-text)" style="font:600 8px var(--um-sans)">H</text>'],
+  ['terminate', 'Terminate', 'the machine stops', '<path d="M9 3L19 13M19 3L9 13" stroke="var(--um-text)" stroke-width="1.6"/>'],
+];
+const stLegend = (nodes, edges) => { const has = new Set([...edges.map(e => e.type), ...nodes.map(n => n.shape)]); return ST_LEGEND.filter(([k]) => has.has(k)).map(([, name, says, svg]) => stLegendItem(svg, name, says)); };
+
+/* ---- the view laid out (§10.1) ---- */
+// after the layout, on a copy (§2.4): each state's regions stretched across it when they are stacked on one axis, and a
+// dashed divider in the gap before each but the first; regions that part on both axes (a line between them ranked one
+// before the other, region-cross) get a divider across the two only where they part on one
+function stRegions(g, pic) {
+  const by = new Map((g.families || []).map(f => [f.id, f])), out = new Map();
+  pic.boxes.filter(b => pic.at.get(b.id).type === 'uml.State').forEach(b => {
+    const S = by.get(b.id), rs = pic.boxes.filter(r => r.parent === b.id && pic.at.get(r.id).type === 'uml.Region').map(r => by.get(r.id)).filter(Boolean);
+    if (!S || rs.length < 2) return;
+    const parts = (a, c, v) => (v ? c.y >= a.y + a.h : c.x >= a.x + a.w), meets = (a, c, v) => (v ? a.x < c.x + c.w && c.x < a.x + a.w : a.y < c.y + c.h && c.y < a.y + a.h);
+    const along = v => { const s = rs.slice().sort((a, c) => (v ? a.y - c.y || a.x - c.x : a.x - c.x || a.y - c.y)); return s.slice(1).every((c, i) => parts(s[i], c, v) && meets(s[i], c, v)) ? s : null; };
+    const V = along(true), H = !V && along(false), s = V || H;
+    if (s) s.forEach((r, i) => { const p = s[i - 1], mid = p && (V ? (p.y + p.h + r.y) / 2 : (p.x + p.w + r.x) / 2);
+      out.set(r.id, { ...r, ...(V ? { x: S.x + 6, w: S.w - 12 } : { y: S.y + 30, h: S.h - 36 }), ...(p ? { div: V ? [S.x, mid, S.x + S.w, mid] : [mid, S.y + 24, mid, S.y + S.h] } : {}) }); });
+    else rs.slice().sort((a, c) => a.y - c.y || a.x - c.x).forEach((r, i, l) => { const p = l[i - 1]; if (!p) return;
+      const v = parts(p, r, true) && meets(p, r, true), h = parts(p, r, false) && meets(p, r, false); if (!v && !h) return;
+      const m = v ? (p.y + p.h + r.y) / 2 : (p.x + p.w + r.x) / 2;
+      out.set(r.id, { ...r, div: v ? [Math.min(p.x, r.x), m, Math.max(p.x + p.w, r.x + r.w), m] : [m, Math.min(p.y, r.y), m, Math.max(p.y + p.h, r.y + r.h)] }); });
+  });
+  return out.size ? (g.families || []).map(f => out.get(f.id) || f) : g.families;
+}
+function stGeo({ model, view, pos, memo }) {
+  const pic = stPic(model, view), I = pic.I, lines = stLines(model, view, pic), down = view.direction === 'down', present = ST_OBJ(view.present) ? view.present : {};
+  const P = id => (ST_OWN(pos, id) || [0, 0]), bars = new Set(), busy = new Map();
+  lines.forEach(e => { if (e.type !== 'uml.Transition') return; [['out', e.from], ['in', e.to]].forEach(([w, id]) => { const b = busy.get(id) || { in: 0, out: 0 }; b[w]++; busy.set(id, b); }); });
+  const nodes = pic.ids.filter(id => !pic.open.has(id)).map(id => { const x = pic.at.get(id), st = stStereo(x), pr = ST_OBJ(ST_OWN(present, id)) ? present[id] : {};
+    let look;
+    if (x.type === 'uml.State') look = { shape: 'state', label: stName(x), stereotypes: st, acts: stRows(x), collapsed: ST_ARR(pr.collapsed), ...(Number.isFinite(pr.rows) ? { cap: pr.rows } : {}), composite: I.subs(id).length > 0 || stMembers(x, 'uml.Region').length > 0 };
+    else if (x.type === 'uml.Pseudostate') { const k = stKind(x); look = { shape: k ? ST_KIND_SHAPE[k] : 'junction', label: '' };
+      if (look.shape === 'bar') { const b = busy.get(id) || { in: 0, out: 0 }; bars.add(id); Object.assign(look, { busy: Math.max(b.in, b.out), down }); }
+      if (k === 'deepHistory') look.deep = true; }
+    else if (x.type === 'uml.FinalState') look = { shape: 'final', label: '' };
+    else if (x.type === 'uml.Comment') look = { shape: 'note', label: stName(x) };
+    else look = { shape: 'classifier', label: stName(x), stereotypes: st, compartments: [] };
+    const d = { id, type: x.type || 'uml.State', kind: 'file', ...look, aria: stNodeName(x, pic, I, false), col: P(id)[0], row: P(id)[1] };
+    return { ...d, ...SHAPE[d.shape].size(d) }; });
+  const edges = lines.map(e => { const label = stLineLabel(e), T = e.type === 'uml.Transition';
+    return { id: e.id, _id: e.id, type: e.type, from: e.from, to: e.to, label: label || undefined, end: T ? { from: 'none', to: 'open' } : { from: 'none', to: 'none', dashed: true }, aria: stLineName(e, pic),
+      ...(T ? { cut: 280 } : {}), ...(bars.has(e.from) ? { fromSide: 'right' } : {}), ...(bars.has(e.to) ? { toSide: 'left' } : {}), // a bar's long sides, in the layout's own axes
+      ...(ST_OBJ(e.style) || typeof e.style === 'string' ? { style: e.style } : {}) }; });
+  // the columns are not spread by the widest label as a class view's are (class.js typeGeo): with transitions cut at 280 px
+  // that made 10-state-machine.json 6,700 px wide; a label with no room between two boxes is left to its tooltip and name.
+  // Gaps of 48 and 40 px: the router's grid is the picture's area, and on 50 states three composites deep they route a fifth
+  // faster than 64 and 56 (P1), with fewer crossings and every label drawn in 10-state-machine.json laid out right
+  const g = layoutTyped({ nodes, edges, ...(pic.boxes.length ? { containers: pic.boxes } : {}), direction: down ? 'down' : 'right',
+    gap: 48, rgap: 40, repair: false, reroute: false }, memo);
+  const families = stRegions(g, pic);
+  // a slot on each node and box: src/typed/edit.js hands the add hook its `at`, with the ids selected (sel), only where the
+  // geometry has slots; the Region entry reads the state selected there. No default gesture of this type reads a slot
+  const slots = [...g.nodes, ...(families || [])].map(n => ({ after: n.id, parent: null, x: n.x + n.w / 2, y: n.y + n.h / 2 }));
+  return { ...g, families, slots, legend: stLegend(g.nodes, g.edges), order: stOrder(pic, lines) }; // a new object: what layoutTyped returned is never edited (§2.4)
+}
+
+/* ---- validators (§10.2). Each problem: { level, rule, path, message, ids } ---- */
+const ST_RULES = {
+  'transition-ends': 'a transition joins states, pseudostates or final states, never a region, a comment or a line',
+  'owner-kinds': 'a substate\'s or pseudostate\'s owner is a state or a region of one; a region is a member of a state',
+  'initial-one': 'a region, a state with no regions, or the top has at most one initial pseudostate',
+  'initial-out': 'an initial pseudostate has no incoming transition and one outgoing, with no trigger or guard',
+  'final-out': 'a final state and a terminate pseudostate have no outgoing transition',
+  'final-kind': 'a final state has no regions, no entry, do or exit, and no internal transitions',
+  'choice-guards': 'each transition out of a choice has a guard, and at most one is else',
+  'fork-join': 'a fork has one incoming transition and two or more outgoing into different regions of one state; a join the reverse; none with a trigger or a guard',
+  'history-owner': 'a history pseudostate\'s owner is a state or a region',
+  'history-one': 'a region or a state has at most one shallow and one deep history, and a history at most one outgoing transition',
+  'composite-entry': 'a transition onto a composite state\'s border finds an initial pseudostate in each of its regions',
+  'reserved-trigger': 'no internal transition\'s trigger is entry, do or exit',
+  'region-mixed': 'a state does not hold both regions and direct substates',
+  'region-cross': 'no transition joins the contents of two regions of one state',
+  'internal-trigger': 'an internal transition has a trigger',
+  'pseudo-kind': 'a pseudostate\'s kind is one of initial, choice, junction, fork, join, shallowHistory, deepHistory, terminate',
+  'label-syntax': 'a transition\'s trigger, guard and effect print as text that reads back as them',
+};
+function stProblems(model) {
+  const out = [], I = stIndex(ST_OBJ(model) ? model : {}), { N, M } = I, say = (level, rule, path, ids, msg) => out.push({ level, rule, path, ids: ids.filter(x => x != null), message: `${rule}: ${msg}` });
+  const el = id => (N.get(id) || M.get(id) || {}).x, q = id => { const x = el(id); return x ? JSON.stringify(x.type === 'uml.State' ? stName(x) : `${stWord(x)} ${id}`.trim()) : JSON.stringify(String(id)); };
+  const ty = id => (el(id) || {}).type, vertex = id => N.has(id) && ST_VERTEX.includes(ty(id)), kind = id => (N.has(id) && ty(id) === 'uml.Pseudostate' ? stKind(el(id)) : null);
+  // where an element sits, up through regions and states: [[state, region or null], …], nearest first
+  const ups = id => { const out2 = [], seen = new Set(); let p = (el(id) || {}).parent;
+    while (p != null && !seen.has(p)) { seen.add(p); const r = M.get(p);
+      if (r && r.x.type === 'uml.Region') { out2.push([r.owner.id, p]); p = r.owner.parent; } else if (N.has(p)) { out2.push([p, null]); p = N.get(p).x.parent; } else break; }
+    return out2; };
+  const ts = ST_ARR(model && model.edges).map((e, i) => [e, `edges[${i}]`]).filter(([e]) => ST_OBJ(e) && e.type === 'uml.Transition');
+  const ins = new Map(), outs = new Map(), add = (m, id, x) => m.set(id, [...(m.get(id) || []), x]);
+  ts.forEach(([e, path]) => { add(outs, e.from, [e, path]); add(ins, e.to, [e, path]);
+    const bad = [e.from, e.to].filter(id => !vertex(id));
+    if (bad.length) say('error', 'transition-ends', path, [e.id, ...bad], `${e.id} ends on ${bad.map(id => `${q(id)}${el(id) ? `, a ${String(ty(id)).split('.').pop()}` : ', which is no element'}`).join(' and ')}: a transition joins states, pseudostates or final states`);
+    if (printTransition(ST_PROPS(e)) == null) say('warning', 'label-syntax', `${path}.props`, [e.id], `${e.id}'s parts do not read back as "${transitionText(ST_PROPS(e))}": edit them in the properties panel`); });
+  const has = (e, k) => ST_HAS(ST_PROPS(e)[k]), list = es => es.map(([e]) => e.id).join(', ');
+  // nodes: owners, kinds, and the pseudostates' and final states' lines
+  const inits = new Map(), hist = new Map();
+  N.forEach(({ x, path }, id) => {
+    if (ST_VERTEX.includes(x.type) && x.parent != null) { const r = M.get(x.parent), p = N.get(x.parent);
+      if (!(r && r.x.type === 'uml.Region' && r.owner.type === 'uml.State') && !(p && p.x.type === 'uml.State')) say('error', 'owner-kinds', `${path}.parent`, [id, x.parent], `${q(id)} is owned by ${q(x.parent)}, which is not a state or a region of one`); }
+    stMembers(x, 'uml.Region').forEach(m => { if (x.type !== 'uml.State') say('error', 'owner-kinds', M.get(m.id).path, [id, m.id], `region ${m.id} is a member of ${q(id)}, which is not a state`); });
+    const i = ins.get(id) || [], o = outs.get(id) || [], ids = es => [id, ...es.map(([e]) => e.id)];
+    if (x.type === 'uml.FinalState') {
+      if (o.length) say('error', 'final-out', path, ids(o), `${q(id)} has ${stPlural(o.length, 'outgoing transition')} (${list(o)}); a final state has none`);
+      const bad = [...stMembers(x, 'uml.Region'), ...stMembers(x, 'uml.InternalTransition')], acts = stActs(x).map(([k]) => k);
+      if (bad.length || acts.length) say('error', 'final-kind', path, [id, ...bad.map(m => m.id)], `${q(id)} has ${[...(bad.length ? [stPlural(bad.length, 'region or internal transition')] : []), ...acts].join(', ')}; a final state has none`); }
+    if (x.type === 'uml.State') { const rs = stMembers(x, 'uml.Region'), direct = I.kids.get(id) || [];
+      if (rs.length && direct.length) say('warning', 'region-mixed', path, [id, ...direct.map(d => d.id)], `${q(id)} holds regions and also ${direct.map(d => q(d.id)).join(', ')} directly`);
+      stMembers(x, 'uml.InternalTransition').forEach(m => { const t = ST_PROPS(m).trigger, mp = M.get(m.id).path;
+        if (ST_ACTS.includes(String(t ?? '').trim())) say('error', 'reserved-trigger', `${mp}.props.trigger`, [id, m.id], `internal transition ${m.id} of ${q(id)} has the trigger "${String(t).trim()}", which names the state's ${String(t).trim()} activity`);
+        else if (!ST_HAS(t)) say('warning', 'internal-trigger', mp, [id, m.id], `internal transition ${m.id} of ${q(id)} has no trigger`);
+        if (printTransition(ST_PROPS(m)) == null) say('warning', 'label-syntax', `${mp}.props`, [m.id], `internal transition ${m.id}'s parts do not read back as "${transitionText(ST_PROPS(m))}"`); }); }
+    if (x.type !== 'uml.Pseudostate') return;
+    const k = stKind(x), where = x.parent ?? null;
+    if (!k) say('warning', 'pseudo-kind', `${path}.props.kind`, [id], `${q(id)}'s kind is ${JSON.stringify(ST_PROPS(x).kind ?? null)}, not one of ${ST_KINDS.join(', ')}; drawn as a junction`);
+    const guarded = es => es.filter(([e]) => has(e, 'trigger') || has(e, 'guard'));
+    if (k === 'initial') { add(inits, where, id);
+      if (i.length) say('error', 'initial-out', path, ids(i), `${q(id)} has ${stPlural(i.length, 'incoming transition')} (${list(i)}); it may have none`);
+      if (o.length > 1) say('error', 'initial-out', path, ids(o), `${q(id)} has ${o.length} outgoing transitions (${list(o)}); it may have one`);
+      if (guarded(o).length) say('error', 'initial-out', path, ids(guarded(o)), `the transition out of ${q(id)} (${list(guarded(o))}) has a trigger or a guard`);
+      if (!o.length) say('warning', 'initial-out', path, [id], `${q(id)} has no outgoing transition yet`); }
+    if (k === 'terminate' && o.length) say('error', 'final-out', path, ids(o), `${q(id)} has ${stPlural(o.length, 'outgoing transition')} (${list(o)}); a terminate pseudostate has none`);
+    if (k === 'choice') { const g = ([e]) => String(ST_PROPS(e).guard ?? '').trim(), bare = o.filter(t => !g(t)), elses = o.filter(t => g(t) === 'else');
+      if (bare.length) say('warning', 'choice-guards', path, ids(bare), `${stPlural(bare.length, 'transition')} out of ${q(id)} ${bare.length === 1 ? 'has' : 'have'} no guard (${list(bare)})`);
+      if (elses.length > 1) say('warning', 'choice-guards', path, ids(elses), `${q(id)} has ${elses.length} exits guarded else (${list(elses)}); at most one may be`); }
+    if (k === 'fork' || k === 'join') { const [one, many, w1, w2] = k === 'fork' ? [i, o, 'incoming', 'outgoing'] : [o, i, 'outgoing', 'incoming'];
+      if (one.length > 1) say('error', 'fork-join', path, ids(one), `${q(id)} has ${one.length} ${w1} transitions (${list(one)}); it may have one`);
+      if (guarded(many).length) say('error', 'fork-join', path, ids(guarded(many)), `the transitions ${k === 'fork' ? 'out of' : 'into'} ${q(id)} (${list(guarded(many))}) have a trigger or a guard`);
+      if (many.length < 2) say('warning', 'fork-join', path, ids(many), `${q(id)} has ${stPlural(many.length, w2 + ' transition')}; it wants two or more`);
+      else { // each end in a different region of one orthogonal state, at any depth inside those regions
+        const far = many.map(([e]) => (k === 'fork' ? e.to : e.from)), maps = far.map(f => new Map(ups(f).filter(([, r]) => r).map(([s, r]) => [s, r])));
+        const ok = [...maps[0].keys()].some(s => maps.every(m => m.has(s)) && new Set(maps.map(m => m.get(s))).size === far.length);
+        if (!ok) say('error', 'fork-join', path, [id, ...far], `the ${k === 'fork' ? 'targets' : 'sources'} of ${q(id)} (${far.map(q).join(', ')}) do not lie in different regions of one state`); } }
+    if (k === 'shallowHistory' || k === 'deepHistory') { add(hist, JSON.stringify([where, k]), id);
+      if (where == null) say('error', 'history-owner', path, [id], `${q(id)} is at the top; a history is owned by a state or a region`);
+      if (o.length > 1) say('error', 'history-one', path, ids(o), `${q(id)} has ${o.length} outgoing transitions (${list(o)}); a history has one default at most`); }
+  });
+  inits.forEach((ids, where) => { if (ids.length > 1) say('error', 'initial-one', N.has(ids[1]) ? N.get(ids[1]).path : 'nodes', [...ids, where], `${where == null ? 'the top' : q(where)} has ${ids.length} initial pseudostates (${ids.join(', ')})`); });
+  hist.forEach((ids, k) => { if (ids.length > 1) { const [where, kind] = JSON.parse(k);
+    say('error', 'history-one', N.get(ids[1]).path, [...ids, where], `${where == null ? 'the top' : q(where)} has ${ids.length} ${ST_KIND_WORD[kind].toLowerCase()} pseudostates (${ids.join(', ')})`); } });
+  ts.forEach(([e, path]) => {
+    // onto a composite's border: an initial pseudostate in each region (or in the state, with none)
+    const to = N.get(e.to); if (to && to.x.type === 'uml.State' && I.subs(e.to).length) {
+      const rs = stMembers(to.x, 'uml.Region'), places = rs.length ? rs.map(r => r.id) : [e.to], none = places.filter(p => !(I.kids.get(p) || []).some(c => kind(c.id) === 'initial'));
+      if (none.length) say('warning', 'composite-entry', path, [e.id, e.to, ...(rs.length ? none : [])], `${e.id} ends on ${q(e.to)}'s border, and ${rs.length ? `${none.map(q).join(', ')} ${none.length === 1 ? 'has' : 'have'}` : 'it has'} no initial pseudostate`); }
+    // between two regions of one state
+    const a = new Map(ups(e.from).filter(([, r]) => r)), b = new Map(ups(e.to).filter(([, r]) => r)), s = [...a.keys()].find(k => b.has(k) && a.get(k) !== b.get(k));
+    if (s != null) say('warning', 'region-cross', path, [e.id, a.get(s), b.get(s)], `${e.id} joins ${q(e.from)} in ${q(a.get(s))} and ${q(e.to)} in ${q(b.get(s))}, two regions of ${q(s)}`);
+  });
+  return out;
+}
+
+/* ---- describe(): the view in sentences, starting at the top initial pseudostate, each element in reading order by its
+   accessible name, then each transition ---- */
+function stDescribe(model, viewId) {
+  const v = ST_ARR(model && model.views).find(x => ST_OBJ(x) && x.id === viewId); if (!v) throw new Error(`umlimator: no view ${JSON.stringify(viewId)}`);
+  const pic = stPic(model, v), lines = stLines(model, v, pic), by = new Map(lines.map(e => [e.id, e])), box = new Map(pic.boxes.map(b => [b.id, b]));
+  return [`${v.title || v.id}: a state machine diagram of ${stPlural(pic.ids.length, 'element')} and ${stPlural(lines.length, 'transition')}.`,
+    ...stOrder(pic, lines).map(id => (by.has(id) ? stLineName(by.get(id), pic) : box.has(id) ? box.get(id).aria : stNodeName(pic.at.get(id), pic, pic.I, false)) + '.')].join('\n');
+}
+
+/* ---- editing (§10.3): each hook returns commands, { commands, say }, null for the default, or { error } ---- */
+const stFresh = (model, base) => { const used = new Set(); JSON.stringify(model, (k, v) => { if (k === 'id' && typeof v === 'string') used.add(v); return v; });
+  let k = 1; while (used.has(base + k)) k++; return base + k; };
+// add: a pseudostate with its entry's kind; a region into the state selected
+function stAdd(model, view, entry, label, at) {
+  if (!ST_OBJ(entry)) return null;
+  if (entry.type === 'uml.Pseudostate') { const k = ST_KINDS.includes(ST_PROPS(entry).kind) ? entry.props.kind : 'junction';
+    return [{ op: 'add', element: { id: stFresh(model, k.replace(/[A-Z]/g, c => '-' + c.toLowerCase())), type: 'uml.Pseudostate', ...(ST_HAS(label) ? { label: String(label) } : {}), props: { kind: k } }, view: view.id }]; }
+  if (entry.type !== 'uml.Region') return null;
+  const s = ST_ARR(at && at.sel).map(id => ST_ARR(model.nodes).find(n => ST_OBJ(n) && n.id === id)).find(n => n && n.type === 'uml.State');
+  if (!s) return { error: 'Select a state to add a region to' };
+  return [{ op: 'add', element: { id: stFresh(model, `${s.id}.region`), type: 'uml.Region', ...(ST_HAS(label) ? { label: String(label) } : {}) }, owner: s.id }];
+}
+// the commands that give an element of `e`'s the parts `text` reads as, one set per part that changed (undefined clears one)
+const stSetParts = (x, r) => ['trigger', 'guard', 'effect'].filter(k => (ST_PROPS(x)[k] ?? undefined) !== r[k]).map(k => ({ op: 'set', id: x.id, path: 'props.' + k, value: r[k] }));
+// rename: F2 on a transition parses its text (§7.2)
+function stRename(model, view, id, text) {
+  const e = ST_ARR(model && model.edges).find(x => ST_OBJ(x) && x.id === id); if (!e || e.type !== 'uml.Transition') return null;
+  if (printTransition(ST_PROPS(e)) == null) return { error: `${id}'s text does not read back: edit its trigger, guard and effect in the properties panel` };
+  // the text F2 opens is the drawn label, its «stereotypes» first: they are not parts
+  const pre = stStereo(e).map(t => `«${t}»`).join(' '), t = String(text ?? '').trimStart(), r = parseTransition(pre && t.startsWith(pre) ? t.slice(pre.length) : t);
+  return r.error ? r : stSetParts(e, r);
+}
+// a compartment row typed on a state: `entry / …`, `do / …` and `exit / …` set that activity (a second one replaces the
+// first, said); null for any other row, which is an internal transition or a region (member below). member: the row's id
+// when it edits one, which then goes; a region's row is never one (null: member.edit names the region)
+function stActivityRow(model, stateId, text, member) {
+  const s = ST_ARR(model && model.nodes).find(n => ST_OBJ(n) && n.id === stateId), r = parseTransition(text);
+  if (!s || s.type !== 'uml.State' || r.error || !ST_ACTS.includes(r.trigger)) return null;
+  if (member != null && !stMembers(s, 'uml.InternalTransition').some(m => m.id === member)) return null;
+  const k = r.trigger, was = ST_PROPS(s)[k];
+  if (r.guard != null) return { error: `${k} / … is the state's ${k} activity: it takes no guard` };
+  if (r.effect == null) return { error: `${k} / … is the state's ${k} activity: write it after the /` };
+  const commands = [{ op: 'set', id: stateId, path: 'props.' + k, value: r.effect }, ...(member != null ? [{ op: 'delete', id: member }] : [])];
+  return ST_HAS(was) && was !== r.effect ? { commands, say: `${k} / ${r.effect} replaces ${k} / ${was}` } : commands;
+}
+// the member rows (§10.3): an internal transition by its printed text; a region as `region <name>`
+const stRegionRow = t => { const m = /^\s*region\b\s*(.*)$/s.exec(String(t ?? '')); return m ? m[1].trim() : null; };
+const ST_MEMBER = {
+  print: m => (m.type === 'uml.Region' ? `region ${m.label ?? ''}`.trim() : stPartsText(m)),
+  // `region x / y` and `region x [y]` are internal transitions
+  add(text) { const nm = stRegionRow(text); if (nm != null && !/[/[]/.test(nm)) return { type: 'uml.Region', label: nm || undefined, props: {} };
+    const r = parseTransition(text, 'an internal transition is trigger [guard] / effect'); if (r.error) return r;
+    if (ST_ACTS.includes(r.trigger)) return { error: `${r.trigger} / … is the state's ${r.trigger} activity: select the state and type it again` };
+    return { type: 'uml.InternalTransition', props: Object.fromEntries(['trigger', 'guard', 'effect'].filter(k => r[k] != null).map(k => [k, r[k]])) }; },
+  edit(m, text) {
+    if (m.type === 'uml.Region') { const nm = stRegionRow(text) ?? String(text ?? '').trim(); return { commands: [{ op: 'set', id: m.id, path: 'label', value: nm || undefined }] }; }
+    const r = parseTransition(text, 'an internal transition is trigger [guard] / effect'); if (r.error) return r;
+    if (ST_ACTS.includes(r.trigger)) return { error: `${r.trigger} / … is the state's ${r.trigger} activity` };
+    return { commands: stSetParts(m, r) }; },
+  holds: n => n.type === 'uml.State',
+};
+/* moveTo: a node dropped into the box of a state with exactly one region goes to that region (§6.1, 3): the box is the
+   state's, since a lone region is not drawn. Anything else: null, the default (a pin, or a drop into a box) */
+function stMoveTo(model, view, id, at) {
+  if (!ST_OBJ(at) || !Array.isArray(at.pt) || !ST_OBJ(at.geo)) return null;
+  const [x, y] = at.pt, f = ST_ARR(at.geo.families).filter(b => x >= b.x && x <= b.x + b.w && y >= b.y && y <= b.y + b.h).sort((a, b) => a.w * a.h - b.w * b.h)[0];
+  const s = f && ST_ARR(model.nodes).find(n => ST_OBJ(n) && n.id === f.id), rs = s && s.type === 'uml.State' ? stMembers(s, 'uml.Region') : [], n = ST_ARR(model.nodes).find(m => ST_OBJ(m) && m.id === id);
+  if (rs.length !== 1 || !n || n.parent === rs[0].id || stWithin(stIndex(model), s.id, id)) return null; // into itself: the default refuses it
+  const L = view.layout; return [{ op: 'reparent', id, parent: rs[0].id }, ...(ST_OBJ(L) && Object.hasOwn(L, id) ? [{ op: 'set', view: view.id, path: ['layout', id], value: undefined }] : [])];
+}
+// the Owner field: every state and region of the model by its name from the top ("Fulfilling", "Fulfilling / Parcel"),
+// but the element itself and what lies under it
+function stOwners(model, x) {
+  if (!ST_OBJ(x) || x.from != null || !ST_VERTEX.includes(x.type) && x.type !== 'uml.Comment') return null;
+  const I = stIndex(model);
+  const full = id => { const out = [], seen = new Set(); for (let p = id; p != null && !seen.has(p); p = stUp(I, p)) { seen.add(p); const e = (I.N.get(p) || I.M.get(p)).x; out.unshift(ST_HAS(e.label) ? e.label : p); } return out.join(' / '); };
+  return [...I.N.values()].filter(({ x: n }) => n.type === 'uml.State').flatMap(({ x: n }) => [{ id: n.id, label: full(n.id) }, ...stMembers(n, 'uml.Region').map(r => ({ id: r.id, label: full(r.id) }))])
+    .filter(o => !stWithin(I, o.id, x.id));
+}
+// remove: a region deleted from the model (Shift + Delete on its box, the member list's ✕) says how many elements it held (§10.3)
+function stRemove(model, view, ids, fromModel) {
+  const I = stIndex(model), rs = fromModel ? ids.filter(id => I.M.has(id) && I.M.get(id).x.type === 'uml.Region') : [];
+  if (!rs.length) return null;
+  const held = [...I.N.keys()].filter(n => rs.some(r => stWithin(I, n, r))).length, x = I.M.get(rs[0]).x;
+  return { commands: ids.map(id => ({ op: 'delete', id })), say: `Deleted ${rs.length === 1 ? 'region ' + (ST_HAS(x.label) ? x.label : x.id) : stPlural(rs.length, 'region')} and the ${stPlural(held, 'element')} ${rs.length === 1 ? 'it' : 'they'} held` };
+}
+
+/* the panel's member rows (edits.member, src/typed/edit.js; notes/stage-5.md §12.1): a row `entry / …` typed on a selected
+   state is read here first, before the panel commits it (§7.2, §10.3); any other row is the panel's (ST_MEMBER) */
+const stMemberRow = (model, view, owner, id, text) => stActivityRow(model, owner, text, id);
+
+/* ---- the type ---- */
+const ST_STEREO = { key: 'stereotypes', label: 'Stereotypes', kind: 'list' };
+const ST_PARTS = [['trigger', 'Trigger'], ['guard', 'Guard'], ['effect', 'Effect']].map(([key, label]) => ({ key, label, kind: 'text' }));
+const ST_TYPE = registerDiagramType('uml.state-machine', {
+  title: 'state machine diagram',
+  elements: [{ type: 'uml.State', label: 'State' },
+    ...[['initial', 'Initial'], ['finalState', 'Final state'], ['choice', 'Choice'], ['junction', 'Junction'], ['fork', 'Fork'], ['join', 'Join'], ['shallowHistory', 'Shallow history'], ['deepHistory', 'Deep history'], ['terminate', 'Terminate']]
+      .map(([kind, label]) => (kind === 'finalState' ? { type: 'uml.FinalState', label, name: false } : { type: 'uml.Pseudostate', label, props: { kind }, name: false })),
+    { type: 'uml.Region', label: 'Region', name: false }, { type: 'uml.Comment', label: 'Comment' }],
+  lines: [{ type: 'uml.Transition', label: 'Transition' }, { type: 'uml.CommentLink', label: 'Comment link' }],
+  props: {
+    'uml.State': [...ST_ACTS.map(k => ({ key: k, label: k[0].toUpperCase() + k.slice(1), kind: 'text' })), ST_STEREO],
+    'uml.Pseudostate': [{ key: 'kind', label: 'Kind', kind: 'enum', options: ST_KINDS }, ST_STEREO],
+    'uml.FinalState': [ST_STEREO], 'uml.Region': [ST_STEREO],
+    'uml.Transition': [...ST_PARTS, ST_STEREO], 'uml.InternalTransition': ST_PARTS, 'uml.CommentLink': [],
+  },
+  layout: stGeo,
+  boxes: (model, view) => stPic(model, view).boxes,
+  owners: stOwners,
+  member: ST_MEMBER,
+  validate: stProblems,
+  rules: ST_RULES,
+  describe: stDescribe,
+  // the PDF's tables (§15, decision 18): an element's kind, and a state's rows: entry, do and exit, then its members as the
+  // panel prints them (each internal transition's `trigger [guard] / effect`, each region); null: its members as before
+  word: (model, id) => { const I = stIndex(model), x = (I.N.get(id) || {}).x; if (!x) return null;
+    return x.type === 'uml.Pseudostate' ? ST_OWN(ST_KIND_WORD, stKind(x)) || 'Pseudostate' : x.type === 'uml.FinalState' ? 'Final state'
+      : x.type === 'uml.State' ? (I.subs(id).length || stMembers(x, 'uml.Region').length ? 'Composite state' : 'State') : null; },
+  rows: (model, view, id) => { const x = (stIndex(model).N.get(id) || {}).x;
+    return x && x.type === 'uml.State' ? [...stActs(x).map(([k, t]) => `${k} / ${t}`), ...ST_ARR(x.members).filter(ST_OBJ).map(ST_MEMBER.print)] : null; },
+  // member is not enumerable: Object.keys(edits) stays 4.6's four (tests/state.test.mjs), as notes/stage-5.md §12.1 (as built) says
+  edits: Object.defineProperty({ add: stAdd, rename: stRename, moveTo: stMoveTo, remove: stRemove }, 'member', { value: stMemberRow }),
+});
+/* ---------- the interaction overview diagram, uml.interaction-overview (work package 4.7, notes/stage-4.md §11) ----------
+   Activity notation whose nodes are interactions: the control nodes of src/uml/flow.js (flow final included), interaction
+   uses (stage 3's SHAPE.use, "ref", with a look that gives it a size and a border) and inline interactions (a frame "sd
+   name" holding its sequence view drawn at full size, read only, from sqRun and sqDraw, S11), joined by control flows drawn
+   "name [guard]" and cut at 280 px; comments. Each use and inline interaction names its uml.sequence view in opensView,
+   which Enter on it selected, or a double-click, opens (Q11; notes §11.3 as built), and V changes (S18). Laid out by layoutTyped from the host's ranking, with
+   repair and reroute off (§17); a view with no `edges` list draws control flows and comment links. Ships in
+   lib/umlimator-all.js only. */
+
+const OV_OBJ = x => x !== null && typeof x === 'object' && !Array.isArray(x), OV_ARR = x => (Array.isArray(x) ? x : []);
+const OV_HAS = x => x != null && x !== '';
+const OV_PROPS = x => (OV_OBJ(x && x.props) ? x.props : {});
+const OV_ENDS = [...FLOW_CONTROL, 'uml.InteractionUse', 'uml.Interaction'], OV_NODES = [...OV_ENDS, 'uml.Comment']; // model.md row 13
+const OV_LINES = ['uml.ControlFlow', 'uml.CommentLink'];
+const OV_WORD = { 'uml.InitialNode': 'Initial node', 'uml.ActivityFinalNode': 'Activity final', 'uml.FlowFinalNode': 'Flow final', 'uml.DecisionNode': 'Decision', 'uml.MergeNode': 'Merge',
+  'uml.ForkNode': 'Fork', 'uml.JoinNode': 'Join', 'uml.InteractionUse': 'Interaction use', 'uml.Interaction': 'Inline interaction', 'uml.Comment': 'Comment' };
+const OV_SHAPE = { 'uml.InitialNode': 'initial', 'uml.ActivityFinalNode': 'final', 'uml.FlowFinalNode': 'flow-final', 'uml.DecisionNode': 'diamond', 'uml.MergeNode': 'diamond',
+  'uml.ForkNode': 'bar', 'uml.JoinNode': 'bar', 'uml.InteractionUse': 'ov-use', 'uml.Interaction': 'ov-inline', 'uml.Comment': 'note' }; // any other type: rounded, warned of
+const OV_MAX = { heads: 8, messages: 20 }; // an inline interaction past either is drawn as its frame and name (S11)
+const OV_GAP = 26; // a label's room past its own size on half a gap: a stub's 22 px and a little air
+const OV_SD = { pad: 10, line: 'var(--um-muted)', bg: 'var(--um-stage-bg)' };
+const ovOwn = (o, k) => (Object.hasOwn(o, k) ? o[k] : undefined); // a lookup by a model's type: 'constructor' is not Object's (risks.md M3)
+const ovWordOf = t => ovOwn(OV_WORD, t) || String(t ?? '').split('.').pop().replace(/([a-z])([A-Z])/g, (_, a, b) => a + ' ' + b.toLowerCase());
+const ovPlural = (k, w, ws = w + 's') => `${k} ${k === 1 ? w : ws}`;
+const ovStereo = x => OV_ARR(OV_PROPS(x).stereotypes).filter(OV_HAS).map(String);
+
+/* ---- the view read: its nodes, its lines (each with both ends shown), the model's views by id ---- */
+function ovIndex(model, view) {
+  const N = new Map(), E = new Map(), V = new Map();
+  OV_ARR(model && model.nodes).forEach((n, i) => { if (OV_OBJ(n) && typeof n.id === 'string' && !N.has(n.id)) N.set(n.id, [n, `nodes[${i}]`]); });
+  OV_ARR(model && model.edges).forEach(e => { if (OV_OBJ(e) && typeof e.id === 'string' && !E.has(e.id)) E.set(e.id, e); });
+  OV_ARR(model && model.views).forEach(v => { if (OV_OBJ(v) && typeof v.id === 'string' && !V.has(v.id)) V.set(v.id, v); });
+  const ids = [...new Set(OV_ARR(view && view.nodeIds).filter(id => N.has(id)))], shown = new Set(ids);
+  const list = Array.isArray(view && view.edges) ? view.edges.map(x => (typeof x === 'string' ? E.get(x) : x)) : [...E.values()].filter(e => OV_LINES.includes(e.type));
+  const both = list.filter(e => OV_OBJ(e) && typeof e.id === 'string' && shown.has(e.from) && shown.has(e.to));
+  const lines = both.filter(e => OV_LINES.includes(e.type)), stray = both.filter(e => !OV_LINES.includes(e.type)); // stray: not drawn, warned of
+  const el = id => (N.get(id) || [])[0];
+  return { N, V, ids, shown, lines, stray, el, flows: lines.filter(e => e.type === 'uml.ControlFlow') };
+}
+// a node in a sentence: its name, else its kind ("merge", "initial node")
+const ovNm = (I, id) => { const x = I.el(id); return x && OV_HAS(x.label) ? String(x.label) : x ? ovWordOf(x.type).toLowerCase() : String(id); };
+
+/* ---- the inline interaction (S11): its sequence view, counted, and laid out by the sequence type's own sqRun when it is
+   small enough; { view, heads, messages, small, run } (run null when it is drawn as its frame only, or when lay is false: a
+   rule or a sentence needs the counts only), or null with no sequence view */
+function ovInline(model, I, n, lay = true) {
+  const sv = I.V.get(n.opensView);
+  if (!sv || sv.diagram !== 'uml.sequence') return null;
+  const own = new Set(OV_ARR(sv.nodes).filter(OV_OBJ).map(x => x.id)), heads = OV_ARR(sv.nodeIds).filter(id => I.N.has(id) || own.has(id)).length;
+  const messages = interactionWalk(model, sv).occ.filter(o => o.message).length;
+  const small = heads <= OV_MAX.heads && messages <= OV_MAX.messages;
+  return { view: sv, heads, messages, small, run: small && lay ? sqRun(model, sv) : null };
+}
+
+/* ---- shapes: an interaction use's look over stage 3's SHAPE.use (its border and a size, useSize), and the inline frame ---- */
+const ovBody = n => `<rect x="${r2(n.x)}" y="${r2(n.y)}" width="${r2(n.w)}" height="${r2(n.h)}" class="n-mask"/><rect x="${r2(n.x)}" y="${r2(n.y)}" width="${r2(n.w)}" height="${r2(n.h)}" class="n-body" fill="${OV_SD.bg}" stroke="${OV_SD.line}"/>`;
+const ovBox = { out: boxOut(0), inset: () => 0, face: n => [n.y, n.y + n.h] };
+SHAPE['ov-use'] = { ...ovBox, size: n => useSize(String(n.label ?? '')), draw: n => SHAPE.use.draw(n).replace(/^<g [^>]*>/, m => m + ovBody(n)) };
+// the inline view's markup with nothing the canvas reads as its own (§11.2): no .node, data-id, tabindex or role, no hit
+// strip (.ll-hit, from which src/typed/edit.js starts a connect) or frame hit (.f-hit); a body is drawn as one, but not
+// styled as the node's when the inline node is hovered or selected
+const ovQuiet = s => s.replace(/<(?:rect|path) [^>]*class="(?:ll-hit|f-hit)"[^>]*\/>/g, '').replace(/ class="node /g, ' class="')
+  .replace(/ (?:data-id|data-o|tabindex|role|aria-label)="[^"]*"/g, '').replace(/class="n-mask"/g, 'fill="var(--um-mask)" class="ov-mask"').replace(/class="n-body/g, 'stroke-width="1.5" class="ov-body');
+// a message as the sequence view draws it, by hand: its path (dashed for a reply or a create), its arrowhead, its label
+const OV_TIP = { arrow: [10, 4, true], open: [10, 5, false] };
+function ovMessage(e) {
+  const T = OV_TIP[e.end && e.end.to] || OV_TIP.open, P = e.pts, [p, q] = P.slice(-2), L = Math.hypot(q[0] - p[0], q[1] - p[1]) || 1, u = [(q[0] - p[0]) / L, (q[1] - p[1]) / L];
+  const b = [q[0] - u[0] * T[0], q[1] - u[1] * T[0]], s = [-u[1] * T[1], u[0] * T[1]], pts = T[2] ? trimLine(P, 0, T[0]) : P, dash = e.end && e.end.dashed ? ' stroke-dasharray="6 4"' : '';
+  const tip = `M${r2(b[0] + s[0])} ${r2(b[1] + s[1])}L${r2(q[0])} ${r2(q[1])}L${r2(b[0] - s[0])} ${r2(b[1] - s[1])}${T[2] ? 'Z' : ''}`, l = e.lbl;
+  return `<g class="ov-msg" data-sort="${esc(e.sort)}"><path d="M${pts.map(c => `${r2(c[0])} ${r2(c[1])}`).join('L')}" fill="none" stroke="${OV_SD.line}" stroke-width="1.4"${dash}/>`
+    + `<path d="${tip}" fill="${T[2] ? OV_SD.line : 'none'}" stroke="${OV_SD.line}" stroke-width="1.4" stroke-linejoin="round"/>`
+    + (l && OV_HAS(l.text) ? `<g class="ov-lab"><rect x="${r2(l.x)}" y="${r2(l.y)}" width="${r2(l.w)}" height="${r2(l.h)}" fill="${OV_SD.bg}"/><text x="${r2(l.x + l.w / 2)}" y="${r2(l.y + 12)}" text-anchor="middle" fill="var(--um-text)" style="font:500 10.5px var(--um-sans)">${esc(fit(l.text, 10.5, l.w))}</text></g>` : '') + '</g>';
+}
+// the sequence's picture inside the frame: sqDraw's layer (frames, stems, uses' boxes, bars, crosses), then each head, each
+// fragment's tag, each operand's guard and each use's name by frame.js's shapes, then the messages
+function ovInner(run) {
+  const by = s => run.nodes.filter(n => n.shape === s), C = 'var(--um-slate)', F = 'var(--um-slate-f)';
+  return ovQuiet(sqDraw(run, { esc, r2, textW }).under + by('lifeline').map(n => SHAPE.lifeline.draw(n, C, F)).join('')
+    + ['frame', 'operand', 'use'].map(s => by(s).map(n => SHAPE[s].draw(n, C, F)).join('')).join('') + run.edges.map(ovMessage).join(''));
+}
+const ovTagH = tagSize('sd').h;
+SHAPE['ov-inline'] = { ...ovBox,
+  draw(n) {
+    const S = n.sd, t = String(n.label ?? ''), b = S && S.bounds;
+    const inner = b ? frameTag(n.x, n.y, `sd ${t}`, n.w) + `<g class="ov-sd" aria-hidden="true" transform="translate(${r2(n.x + (n.w - b.w) / 2 - b.x)} ${r2(n.y + ovTagH)})">${S.markup}</g>`
+      : frameTag(n.x, n.y, 'sd', n.w) + `<text x="${r2(n.x + n.w / 2)}" y="${r2(n.y + n.h / 2 + 4)}" text-anchor="middle" fill="var(--um-text)" style="font:600 11px var(--um-sans)">${esc(fit(t, 11, n.w - 2 * (tagSize('sd').w + 8)))}</text>`;
+    return `<g class="node ov-inline" data-id="${esc(n.id)}" data-shape="ov-inline" tabindex="-1" role="img" aria-label="${esc(n.aria || 'Inline interaction ' + t)}">${ovBody(n)}${inner}</g>`;
+  },
+};
+for (const k of ['ov-use', 'ov-inline']) { const S = SHAPE[k]; S.ports = (n, side, j = 1) => portsOn(S, n, side, j); }
+
+/* ---- names (A1, L13): "Decision Payment accepted?, 2 exits", "Interaction use Find a book, opens Find a book" ---- */
+function ovNodeName(model, I, x, ins, outs, sd) {
+  const t = OV_HAS(x.label) ? String(x.label) : '', st = ovStereo(x), nm = `${ovWordOf(x.type)}${t ? ' ' + t : ''}${st.length ? ` (${st.join(', ')})` : ''}`;
+  const opens = () => { const v = I.V.get(x.opensView); return v && v.diagram === 'uml.sequence' ? `, opens ${v.title ?? v.id}` : ', opens no sequence view'; };
+  switch (x.type) {
+    case 'uml.Comment': return 'Comment: ' + String(x.label ?? x.id);
+    case 'uml.DecisionNode': return `${nm}, ${ovPlural(outs, 'exit')}`;
+    case 'uml.MergeNode': return `${nm}, ${ovPlural(ins, 'entry', 'entries')}`;
+    case 'uml.ForkNode': return `${nm}, ${ovPlural(outs, 'branch', 'branches')}`;
+    case 'uml.JoinNode': return `${nm}, ${ovPlural(ins, 'branch', 'branches')}`;
+    case 'uml.InteractionUse': return nm + opens();
+    case 'uml.Interaction': return !sd ? nm + opens() : `${nm}, ${ovPlural(sd.heads, 'lifeline')}, ${ovPlural(sd.messages, 'message')}${sd.small ? '' : ', drawn as its frame only'}`;
+    default: return nm;
+  }
+}
+const ovFlowName = (I, e) => { const g = OV_PROPS(e).guard;
+  return e.type === 'uml.CommentLink' ? `Comment link from ${ovNm(I, e.from)} to ${ovNm(I, e.to)}`
+    : `Control flow from ${ovNm(I, e.from)} to ${ovNm(I, e.to)}${OV_HAS(e.label) ? ', ' + e.label : ''}${OV_HAS(g) ? ', guard ' + g : ''}`; };
+
+/* ---- the legend: each line kind drawn, then each control glyph, by its node type (§14) ---- */
+const ovLegendItem = (svg, name, says) => `<span class="lgi" title="${esc(name + ' — ' + says)}"><svg class="lgs" viewBox="0 0 28 16" aria-hidden="true">${svg}</svg><b>${esc(name)}</b><span>${esc(says)}</span></span>`;
+const OV_DIAMOND = '<path d="M14 1L21 8L14 15L7 8Z" fill="var(--um-stage-bg)" stroke="var(--um-muted)" stroke-width="1.4"/>', OV_BAR = '<rect x="11.5" y="1" width="5" height="14" fill="var(--um-text)"/>';
+const OV_LEGEND = [
+  ['uml.ControlFlow', '<g stroke="var(--um-muted)" stroke-width="1.4" stroke-linejoin="round" fill="none"><path d="M2 8H26"/><path d="M17 3L26 8L17 13"/></g>', 'Control flow', 'what runs next'],
+  ['uml.CommentLink', '<path d="M2 8H26" stroke="var(--um-muted)" stroke-width="1.4" stroke-dasharray="3 2"/>', 'Comment link', 'what a comment is about'],
+  ['uml.InitialNode', '<circle cx="14" cy="8" r="6" fill="var(--um-text)"/>', 'Initial node', 'where the flow starts'],
+  ['uml.ActivityFinalNode', '<circle cx="14" cy="8" r="6.5" fill="var(--um-stage-bg)" stroke="var(--um-muted)" stroke-width="1.4"/><circle cx="14" cy="8" r="3.5" fill="var(--um-text)"/>', 'Activity final', 'ends the whole flow'],
+  ['uml.FlowFinalNode', '<circle cx="14" cy="8" r="6.5" fill="var(--um-stage-bg)" stroke="var(--um-muted)" stroke-width="1.4"/><path d="M9.4 3.4L18.6 12.6M18.6 3.4L9.4 12.6" stroke="var(--um-muted)" stroke-width="1.4"/>', 'Flow final', 'ends one branch'],
+  ...[['uml.DecisionNode', 'Decision', 'one way out, by its guards'], ['uml.MergeNode', 'Merge', 'where ways meet']].map(([k, name, says]) => [k, OV_DIAMOND, name, says]),
+  ...[['uml.ForkNode', 'Fork', 'splits into branches that run together'], ['uml.JoinNode', 'Join', 'waits for all its branches']].map(([k, name, says]) => [k, OV_BAR, name, says]),
+];
+const ovLegendOf = (edges, nodes) => { const has = new Set([...edges.map(e => e.type), ...nodes.map(n => n.type)]);
+  return OV_LEGEND.filter(([k]) => has.has(k)).map(([, svg, name, says]) => ovLegendItem(svg, name, says)); };
+
+/* ---- the view laid out: { model, view, pos, memo } ----
+   Each node by its shape, sized before the layout: a bar by the lines on its busier side, every line of a bar on its long
+   side (the router reads no shape, §4.1); an inline interaction by its sequence's bounds under the "sd" tag. The inline
+   view is laid out (sqRun) and drawn here on every call, memo hit or not, so it is never stale; its markup rides on the node
+   (n.sd), and a memo hit repaints it onto the kept geometry, saving only layoutTyped's layout and routing. Nothing after
+   layoutTyped edits what it returned (§2.4): the result is a new object, its nodes a new array in reading order */
+function ovGeo({ model, view, pos, memo }) {
+  const I = ovIndex(model, view), down = view.direction === 'down', at = id => ovOwn(pos || {}, id) || [0, 0];
+  const ins = new Map(), outs = new Map(), bump = (m, id) => m.set(id, (m.get(id) || 0) + 1);
+  I.flows.forEach(e => { bump(outs, e.from); bump(ins, e.to); });
+  const bar = id => I.el(id).type === 'uml.ForkNode' || I.el(id).type === 'uml.JoinNode';
+  const nodes = I.ids.map(id => { const x = I.el(id), shape = ovOwn(OV_SHAPE, x.type) || 'rounded', d = { id, label: OV_HAS(x.label) ? String(x.label) : '', type: x.type, kind: 'file', shape, col: at(id)[0], row: at(id)[1] };
+    const sd = x.type === 'uml.Interaction' ? ovInline(model, I, x) : null;
+    d.aria = ovNodeName(model, I, x, ins.get(id) || 0, outs.get(id) || 0, sd);
+    if (shape === 'rounded') d.stereotypes = ovStereo(x);
+    if (shape === 'bar') Object.assign(d, { busy: Math.max(ins.get(id) || 0, outs.get(id) || 0), down });
+    if (shape === 'ov-inline') { const b = sd && sd.run && sd.run.bounds, tw = tagSize(`sd ${d.label}`).w + 2 * OV_SD.pad;
+      return { ...d, ...(b ? { w: Math.ceil(Math.max(b.w + 2 * OV_SD.pad, tw)), h: Math.ceil(ovTagH + b.h), sd: { bounds: b, markup: ovInner(sd.run) } } : useSize(d.label)) }; }
+    return { ...d, ...SHAPE[shape].size(d) }; });
+  const edges = I.lines.map(e => ({ id: e.id, _id: e.id, type: e.type, from: e.from, to: e.to, aria: ovFlowName(I, e), ...(OV_OBJ(e.style) || typeof e.style === 'string' ? { style: e.style } : {}),
+    ...(e.type === 'uml.CommentLink' ? { end: { from: 'none', to: 'none', dashed: true } }
+      : { end: { from: 'none', to: 'open' }, label: flowText(e.label, OV_PROPS(e).guard) || undefined, cut: 280, ...(bar(e.from) ? { fromSide: 'right' } : {}), ...(bar(e.to) ? { toSide: 'left' } : {}) }) }));
+  // a typed view makes no room for a label (layoutGraph's labelRoom is a map's). A row's nodes share its top, not their middle,
+  // so a flow between two of different heights jogs halfway across the gap, and its label sits on one half, clear of the
+  // nodes' stubs (22 px): the gap is twice that and the widest label laid out right, its 18 px height laid out down.
+  // ponytail: one gap for every column, so one long guard widens them all (to ~612 px at the 280 px cut); room only where a
+  // labelled flow runs needs a per-column gap from layoutGraph (it has gapAfter inside, no option for it). Less than twice drops guards
+  const wide = Math.max(0, ...edges.filter(e => e.label).map(labelW)), gap = wide ? Math.ceil(Math.max(64, 2 * ((down ? 18 : wide) + OV_GAP))) : 64;
+  const g = layoutTyped({ nodes, edges, direction: down ? 'down' : 'right', gap, rgap: 56, repair: false, reroute: false }, memo); // P1 on a shared CI runner (§17)
+  // reading order (§14): by rank (the layout's column, then its row), then the lines
+  const order = I.ids.filter(id => g.byId[id]).sort((a, b) => g.byId[a].col - g.byId[b].col || g.byId[a].row - g.byId[b].row);
+  return { ...g, nodes: order.map(id => g.byId[id]), order: [...order, ...g.edges.map(e => e.id)], legend: ovLegendOf(g.edges, g.nodes) };
+}
+
+/* ---- validators (§11.3): the shared flow rules (src/uml/flow.js), then the overview's own. Each problem:
+   { level, rule, path, message, ids } ---- */
+const OV_RULES = {
+  ...FLOW_RULES,
+  'opens-sequence': 'an interaction use or an inline interaction opens a sequence view of the model',
+  'overview-kinds': 'an interaction overview shows control nodes, interaction uses, inline interactions and comments only',
+  'comment-link': 'a comment link has a comment at one end',
+  'inline-size': `an inline interaction's view has at most ${OV_MAX.heads} lifelines and ${OV_MAX.messages} messages, else it is drawn as its frame only`,
+};
+function ovProblems(model, view) {
+  if (!OV_OBJ(view)) return [];
+  const I = ovIndex(model, view), out = [...flowProblems(model, view, OV_ENDS)], vi = OV_ARR(model.views).indexOf(view);
+  const say = (level, rule, path, ids, msg) => out.push({ level, rule, path, ids, message: `${rule}: ${msg}` });
+  I.ids.forEach(id => { const [x, path] = I.N.get(id), nm = `${ovWordOf(x.type).toLowerCase()} ${id}${OV_HAS(x.label) ? ` ("${x.label}")` : ''}`;
+    if (!OV_NODES.includes(x.type)) say('warning', 'overview-kinds', `views[${vi}].nodeIds[${OV_ARR(view.nodeIds).indexOf(id)}]`, [id], `view ${view.id} shows ${nm}, which an interaction overview does not draw: drawn as an action`);
+    if (x.type !== 'uml.InteractionUse' && x.type !== 'uml.Interaction') return;
+    const v = I.V.get(x.opensView);
+    if (!v || v.diagram !== 'uml.sequence') return say('error', 'opens-sequence', `${path}.opensView`, [id], `${nm} opens ${x.opensView == null ? 'no view' : !v ? `${JSON.stringify(x.opensView)}, which is not a view of the model` : `view ${v.id}, a ${v.diagram || 'map'}, not a sequence`}`);
+    const sd = x.type === 'uml.Interaction' && ovInline(model, I, x, false);
+    if (sd && !sd.small) say('warning', 'inline-size', `${path}.opensView`, [id, v.id], `${nm} shows view ${v.id}, of ${ovPlural(sd.heads, 'lifeline')} and ${ovPlural(sd.messages, 'message')}: over ${OV_MAX.heads} lifelines or ${OV_MAX.messages} messages it is drawn as its frame only`); });
+  const eIdx = e => OV_ARR(view.edges).findIndex(x => x === e || x === e.id), ePath = e => (Array.isArray(view.edges) ? `views[${vi}].edges[${eIdx(e)}]` : `edges[${OV_ARR(model.edges).indexOf(e)}]`);
+  I.stray.forEach(e => say('warning', 'overview-kinds', ePath(e), [e.id], `view ${view.id} shows ${ovWordOf(e.type).toLowerCase()} ${e.id}, a line an interaction overview does not draw: not drawn`));
+  I.lines.filter(e => e.type === 'uml.CommentLink' && ![e.from, e.to].some(id => I.el(id).type === 'uml.Comment'))
+    .forEach(e => say('warning', 'comment-link', ePath(e), [e.id, e.from, e.to], `${e.id} joins ${ovNm(I, e.from)} and ${ovNm(I, e.to)}, neither a comment`));
+  return out;
+}
+
+/* ---- describe(): the view in words: from the initial nodes along the flows, breadth first (a fork's branches side by side),
+   each node once by its accessible name and where its flows go, each by "name [guard]"; then what no flow reaches; then the
+   comments' links ---- */
+function ovDescribe(model, viewId) {
+  const v = OV_ARR(model && model.views).find(x => OV_OBJ(x) && x.id === viewId); if (!v) throw new Error(`umlimator: no view ${JSON.stringify(viewId)}`);
+  const I = ovIndex(model, v), seen = new Set(), walk = [], out = I.flows.reduce((m, e) => m.set(e.from, [...(m.get(e.from) || []), e]), new Map());
+  const visit = (...q) => { for (const id of q) if (!seen.has(id)) { seen.add(id); walk.push(id); q.push(...(out.get(id) || []).map(e => e.to)); } };
+  visit(...I.ids.filter(id => I.el(id).type === 'uml.InitialNode')); I.ids.forEach(id => visit(id));
+  const count = id => I.flows.filter(e => e.to === id).length;
+  const lines = [`${v.title || v.id}: an interaction overview diagram of ${ovPlural(I.ids.length, 'node')} and ${ovPlural(I.flows.length, 'flow')}.`];
+  walk.forEach(id => { const x = I.el(id), next = (out.get(id) || []).map(e => { const t = flowText(e.label, OV_PROPS(e).guard); return `${ovNm(I, e.to)}${!t ? '' : OV_HAS(e.label) ? ' by ' + t : ' ' + t}`; });
+    lines.push(`${ovNodeName(model, I, x, count(id), (out.get(id) || []).length, x.type === 'uml.Interaction' ? ovInline(model, I, x, false) : null)}${next.length ? '; then ' + next.join(', ') : ''}.`); });
+  I.lines.filter(e => e.type === 'uml.CommentLink').forEach(e => lines.push(ovFlowName(I, e) + '.'));
+  return lines.join('\n');
+}
+
+/* ---- editing (§11.3, §12): each hook returns commands, { pick, then }, null for the default, or { error } ---- */
+function ovFreshId(model, base) {
+  const used = new Set(); JSON.stringify(model, (k, v) => { if (k === 'id' && typeof v === 'string') used.add(v); return v; });
+  const b = String(base).trim().toLowerCase().replace(/[^\p{L}\p{N}_$]+/gu, '-').replace(/^-+|-+$/g, '') || 'node';
+  let k = 1; while (used.has(k === 1 ? b : `${b}-${k}`)) k++;
+  return k === 1 ? b : `${b}-${k}`;
+}
+/* add(model, view, entry, label, at): the palette and N. An interaction use or an inline interaction (an entry that opens a
+   sequence) asks for its view first, from the model's sequence views (S18), and is added with opensView set and, with no
+   name typed, the view's title; with no sequence view, nothing is added. Anything else is added under its name, if any */
+function ovAdd(model, view, entry, label, at) {
+  if (!OV_OBJ(view) || !OV_OBJ(entry) || typeof entry.type !== 'string') return null;
+  const t = String(label ?? '').trim();
+  const make = (name, more = {}) => [{ op: 'add', element: { id: ovFreshId(model, name || ovWordOf(entry.type)), type: entry.type, ...(name ? { label: name } : {}), ...more }, view: view.id }];
+  if (entry.opens !== 'uml.sequence') return make(t);
+  const vs = OV_ARR(model.views).filter(v => OV_OBJ(v) && v.diagram === 'uml.sequence');
+  if (!vs.length) return { error: 'The model has no sequence view for it to open: add one first' };
+  return { pick: vs.map(v => String(v.title ?? v.id)), then: i => (vs[i] ? make(t || String(vs[i].title ?? vs[i].id), { opensView: vs[i].id }) : []) };
+}
+/* rename(model, view, id, text): F2 on a control flow reads "name [guard]" (§7.2) and sets the parts that changed, an
+   absent part cleared; a text the parser refuses is { error } (E3). Anything else: null, the default set label */
+function ovRename(model, view, id, text) {
+  const e = OV_ARR(model && model.edges).find(x => OV_OBJ(x) && x.id === id);
+  if (!e || e.type !== 'uml.ControlFlow') return null;
+  const p = parseFlow(text); if (p.error) return p;
+  const now = { label: OV_HAS(e.label) ? String(e.label) : undefined, 'props.guard': OV_HAS(OV_PROPS(e).guard) ? String(OV_PROPS(e).guard) : undefined };
+  return [['label', p.name], ['props.guard', p.guard]].filter(([k, v]) => now[k] !== v).map(([path, value]) => ({ op: 'set', id, path, value }));
+}
+
+/* ---- the type ---- */
+const OV_STEREO = { key: 'stereotypes', label: 'Stereotypes', kind: 'list' };
+const OVERVIEW_TYPE = registerDiagramType('uml.interaction-overview', {
+  title: 'interaction overview diagram',
+  // control nodes but the decision (its question, S8) are added with no name prompt (§12.1); a use and an inline
+  // interaction ask for the view they open, V changes it
+  elements: [['InitialNode', 'Initial', { name: false }], ['ActivityFinalNode', 'Final', { name: false }], ['FlowFinalNode', 'Flow final', { name: false }], ['DecisionNode', 'Decision'],
+    ['MergeNode', 'Merge', { name: false }], ['ForkNode', 'Fork', { name: false }], ['JoinNode', 'Join', { name: false }], ['InteractionUse', 'Interaction use', { opens: 'uml.sequence' }],
+    ['Interaction', 'Inline interaction', { opens: 'uml.sequence' }], ['Comment', 'Comment']].map(([t, label, more]) => ({ type: 'uml.' + t, label, ...more })),
+  lines: [{ type: 'uml.ControlFlow', label: 'Control flow' }, { type: 'uml.CommentLink', label: 'Comment link' }],
+  props: { ...Object.fromEntries(OV_NODES.map(t => [t, [OV_STEREO]])), 'uml.ControlFlow': [{ key: 'guard', label: 'Guard', kind: 'text' }, OV_STEREO], 'uml.CommentLink': [] },
+  layout: ovGeo,
+  member: { holds: () => false }, // nothing here has members
+  validate: ovProblems,
+  rules: OV_RULES,
+  describe: ovDescribe,
+  edits: { add: ovAdd, rename: ovRename },
+});
+/* ---------- Mermaid stateDiagram: a reader and a writer (notes/stage-4.md §13, S12, S22; risks.md R1 to R4, R7) ----------
+   Written against Mermaid 12.3.0's state diagram page (docs/syntax/stateDiagram.md, read 13 Nov 2026) and its lexer, as
+   the class and sequence readers are against theirs. Internal: the CLI (`umlimator.py import`) imports this file through
+   Node; a host gets it once the registry is public. Its helpers are its own (mt...), since the readers share one scope in
+   lib/umlimator-all.js.
+
+   readMermaidState(text) -> { model, report }: a version-2 model with one `uml.state-machine` view, in model.md row 10's
+   vocabulary, and a report of what was not read as written, each item { line, status, message }, status `skipped` or
+   `approximated` (R1). The reader is hand-written and linear, and refuses text over MT_LIMIT characters (R2). Ids come
+   from the source's names (R3): states take their names first; then, in the order they come, a scope's initial
+   pseudostate is <scope>.start (the top's `start`), its final state <scope>.end, a region <state>.r<k>, a transition
+   <from>-<to>, an internal transition <state>.t<k>, a note note-<n> and its line <note>-link, each the next free of
+   base, base-2, base-3 ... `%% id: <id>` above a statement gives that element its id instead (`%% link-id:` a note's
+   line, `%% start-id:` and `%% end-id:` the scope's [*] first named below, `%% region: <id> [name]` the region it opens),
+   and `%% kind: <kind>` above a state makes it a junction, a history, a terminate, an initial pseudostate or a final
+   state. It never throws.
+
+   writeMermaidState(model, viewId?) -> text: one state machine view as Mermaid. What Mermaid cannot carry is kept in its
+   comments, as the other writers do: an id the reader would not derive, as the hints above; a pseudostate Mermaid has
+   no notation for under `%% kind:`, labelled ●, H, H*, ×, as is an initial pseudostate or a final state that is not the
+   first of its scope, or whose lines would make [*] name another; `%% warning: Mermaid may not draw this` above a
+   transition whose ends lie in different scopes (S22); an element the subset leaves out as `%% not written: <id> (<type>)`,
+   and a property Mermaid has no place for as `%% not written: <id>: <what>`.
+
+   How UML maps onto Mermaid's text, both ways:
+   - `s1`, `state "Long name" as s1` a state; `state s1 { ... }` a composite state, whose body's `--` divides it into
+     regions. Mermaid's names are global: a state's parent is the first body that names it, even when the top named it
+     first; a body that names it again, other than one around its own, is reported;
+   - `[*] --> s1` the scope's initial pseudostate, `s1 --> [*]` its final state, one of each per scope (a region is a
+     scope); `<<fork>>`, `<<join>>`, `<<choice>>` those pseudostates;
+   - `s1 --> s2 : text` a transition, its text read as trigger [guard] / effect (§7); `s1 : entry / x` (do, exit) that
+     activity; `s1 : evt [g] / act` an internal transition; any other `s1 : text` a comment linked to s1, marked
+     ext.mermaid.description, written back as it came; `note right of s1` a comment and its line;
+   - `direction LR` right, `TB` down (Mermaid's default); text is decoded from Mermaid's entities (#59; #quot;) and
+     <br>, which the writer uses for ; : # " < > \ and line breaks, and for a space at either end. */
+const MT_LIMIT = 1 << 20; // characters; a state diagram a person writes is a few kilobytes
+const MT_VIEW = 'state-diagram'; // the view's id when the source does not name it
+const MT_DEEP = 64; // composites nested deeper are read flat from there (R2)
+const MT_WALK = 256; // the most scopes a check walks up; past it, nothing is moved (R2)
+const MT_KINDS = { junction: '●', shallowHistory: 'H', deepHistory: 'H*', terminate: '×', initial: '●', final: '◉' }; // %% kind:, and the label Mermaid shows
+const MT_FORKS = ['fork', 'join', 'choice'];
+const MT_ACTS = ['entry', 'do', 'exit'];
+// words a line starts with that Mermaid's lexer (stateDiagram.jison) or this reader take as a statement: no state name the writer gives is one
+const MT_KEYWORDS = new Set(['state', 'note', 'direction', 'title', 'classdef', 'class', 'style', 'scale', 'click', 'href', 'default', 'hide', 'acctitle', 'accdescr', 'statediagram']);
+const mtId = name => String(name).replace(/->+/g, '-'); // an id never holds "->" (model.md rule 5)
+const mtWord = s => { let e = 0; while (e < s.length && /[A-Za-z_]/.test(s[e])) e++; return e && !/\w/.test(s[e] ?? ' ') ? s.slice(0, e).toLowerCase() : ''; };
+
+// the first of base, base-2, base-3 ... not in used, resuming where the last ask for base stopped (R2)
+function mtFree(used, next, base) {
+  let k = next.get(base) || 1, id = k > 1 ? `${base}-${k}` : base;
+  while (used.has(id)) id = `${base}-${++k}`;
+  next.set(base, k);
+  return id;
+}
+
+// text: Mermaid's line breaks and entity codes (#quot; #lt; #59; ...); a named one Mermaid knows and this does not stays
+function mtDecode(s) {
+  return s.replace(/<br\s?\/?>|\\n/gi, '\n').replace(/#(quot|lt|gt|amp|\d{1,6});/g, (_, e) =>
+    ({ quot: '"', lt: '<', gt: '>', amp: '&' })[e] ?? String.fromCodePoint(Math.min(Number(e), 0x10ffff)));
+}
+
+// trigger [guard] / effect is src/uml/transition.js's (notes/stage-4.md §7.1); its parts here, the absent ones left out
+const mtParts = p => { const o = {}; for (const k of ['trigger', 'guard', 'effect']) if (p[k] !== undefined) o[k] = p[k]; return o; };
+const mtSame = (a, b) => a.trigger === b.trigger && a.guard === b.guard && a.effect === b.effect;
+// the text of a transition's parts, or null when it would not read back as them exactly (printTransition trims them)
+function mtPrint(p) {
+  const text = printTransition(p);
+  return text !== null && mtSame(parseTransition(text), p) ? text : null;
+}
+// what `s1 : text` is (§7.2): an activity, an internal transition (a trigger and a /, maybe with nothing after it), or a description
+function mtLine(text) {
+  const p = trScan(text);
+  if (p.error || p.trigger === undefined || p.slash < 0) return { description: true };
+  if (MT_ACTS.includes(p.trigger) && p.guard === undefined) return { activity: p.trigger, value: p.effect ?? '' };
+  return { internal: mtParts(p) };
+}
+
+function readMermaidState(text) {
+  const report = [], say = (line, status, message) => report.push({ line, status, message });
+  const empty = () => ({ model: { schemaVersion: 2, root: MT_VIEW, nodes: [], edges: [], views: [{ id: MT_VIEW, diagram: 'uml.state-machine', direction: 'down', nodeIds: [] }] }, report });
+  if (typeof text !== 'string') { say(1, 'skipped', 'the input is not text: nothing read'); return empty(); }
+  if (text.length > MT_LIMIT) { say(1, 'skipped', `the input is ${text.length} characters, over the limit of ${MT_LIMIT}: nothing read`); return empty(); }
+  const lines = text.replace(/^\uFEFF/, '').split('\n').map(l => l.replace(/\r$/, ''));
+  let i = 0, title;
+
+  // front matter: its title; Mermaid's configuration is not read
+  while (i < lines.length && !lines[i].trim()) i++;
+  if (lines[i] && lines[i].trim() === '---') {
+    let j = i + 1;
+    for (; j < lines.length && lines[j].trim() !== '---'; j++) {
+      const l = lines[j];
+      if (!l.trim() || l.trim().startsWith('#') || /^\s/.test(l)) continue;
+      const c = l.indexOf(':'), key = (c < 0 ? l : l.slice(0, c)).trim(), val = c < 0 ? '' : l.slice(c + 1).trim();
+      if (key === 'title') {
+        if (val.startsWith('"')) { try { title = JSON.parse(val); } catch { title = val.slice(1, -1); } }
+        else title = val.startsWith("'") ? val.slice(1, -1).replaceAll("''", "'") : val;
+      } else say(j + 1, 'skipped', `front matter ${key}: Mermaid's configuration is not read`);
+    }
+    if (j >= lines.length) { say(i + 1, 'skipped', 'the front matter is never closed with ---: nothing read'); return empty(); }
+    i = j + 1;
+  }
+
+  // a scope is the top or one part of a composite's body: { owner, k, hint, start, end }; a state's body is the scope
+  // that first named it (null: the top)
+  const top = { owner: null }, states = new Map(), order = [], items = [], stack = [];
+  let viewId, direction = 'down', started = false, hint = {}, block = false, note = null, flat = 0;
+  const cur = () => (stack.length ? stack[stack.length - 1].cur : top);
+  const up = s => s.owner.body || top;
+  const inside = (s, a) => { for (let n = 0; n < MT_WALK; n++) { if (s === a) return true; if (s === top) return false; s = up(s); } return false; }; // a holds s
+  const under = (s, rec) => { for (let n = 0; n < MT_WALK; n++) { if (s === top) return false; if (s.owner === rec) return true; s = up(s); } return true; }; // s is in rec's body
+  const mention = (name, no) => {
+    let rec = states.get(name);
+    if (!rec) { rec = { name, no, node: { type: 'uml.State', label: name }, body: null, parts: null, internal: 0, acts: [] }; states.set(name, rec); order.push(rec); }
+    const s = cur();
+    if (s !== top && rec.body !== s) {
+      if (!rec.body) { if (!under(s, rec)) rec.body = s; }
+      else if (!inside(rec.body, s) && !under(s, rec)) say(no, 'approximated', `${name} is named in ${rec.body.owner.name}'s body and in ${s.owner.name}'s: it is kept in the first`);
+    }
+    return rec;
+  };
+  // a name as written: a style class after ::: is not read; null when it is not one word
+  const nameOf = (raw, no, star) => { // star: [*] may stand for itself
+    let s = raw.trim();
+    const c = s.indexOf(':::');
+    if (c >= 0) { say(no, 'skipped', `${s}: a style class is not read`); s = s.slice(0, c).trim(); }
+    if (s === '[*]') return star ? s : null;
+    return s && !/[\s"{}]/.test(s) ? s : null;
+  };
+  const open = (rec, no) => {
+    if (stack.length >= MT_DEEP) {
+      if (!flat++) say(no, 'approximated', `state ${rec.name} is nested over ${MT_DEEP} deep: what it holds is read flat from there`);
+      stack.push({ flat: true, cur: cur(), no, rec });
+      return;
+    }
+    if (rec.parts) say(no, 'approximated', `state ${rec.name} { is opened again: what it holds is read into its last region`);
+    else { rec.parts = [{ owner: rec, k: 1 }]; rec.opened = no; items.push({ kind: 'region', part: rec.parts[0] }); }
+    stack.push({ rec, cur: rec.parts.at(-1), no });
+  };
+  const kindOf = (rec, no) => {
+    const k = hint.kind;
+    if (k == null) return;
+    if (!Object.hasOwn(MT_KINDS, k)) return say(no, 'skipped', `%% kind: ${k}: not a kind of pseudostate`);
+    rec.node = k === 'final' ? { type: 'uml.FinalState' } : { type: 'uml.Pseudostate', props: { kind: k } };
+    rec.symbol = MT_KINDS[k];
+  };
+  const declare = (rec) => { if (hint.id != null && rec.hint === undefined) rec.hint = hint.id; };
+  // [*] in the current scope: its initial pseudostate as a source, its final state as a target
+  const star = (from, no) => {
+    const s = cur(), key = from ? 'start' : 'end';
+    if (!s[key]) { s[key] = { kind: key, scope: s, no, hint: from ? hint.start : hint.end, node: from ? { type: 'uml.Pseudostate', props: { kind: 'initial' } } : { type: 'uml.FinalState' } }; items.push(s[key]); }
+    return s[key];
+  };
+
+  for (; i < lines.length; i++) {
+    const no = i + 1;
+    let s = lines[i].trim();
+    if (note) { // a note's lines, to its end note
+      if (/^end note\b/i.test(s)) { items.push(note); note = null; } else note.text.push(s);
+      continue;
+    }
+    if (!s) continue;
+    if (block) { if (s.includes('}')) block = false; continue; } // inside accDescr { ... }
+    if (s.startsWith('%%')) {
+      const c = s.slice(2).trim(), after = w => c.slice(w.length).trim();
+      if (c.startsWith('row:') && started && /^[^:\s]+\s*:/.test(after('row:'))) s = after('row:'); // a composite state's text: Mermaid refuses it on the state
+      else if (c.startsWith('{')) {
+        say(no, 'skipped', 'a %%{init}%% directive: Mermaid\'s configuration is not read');
+        if (!s.includes('}%%')) while (i + 1 < lines.length && !lines[++i].includes('}%%')); // over several lines: to its }%%
+      } else if (c.startsWith('id:')) hint.id = after('id:');
+      else if (c.startsWith('link-id:')) hint.link = after('link-id:');
+      else if (c.startsWith('start-id:')) hint.start = after('start-id:');
+      else if (c.startsWith('end-id:')) hint.end = after('end-id:');
+      else if (c.startsWith('kind:')) hint.kind = after('kind:');
+      else if (c.startsWith('region:')) {
+        const r = after('region:'), sp = r.search(/\s/), part = cur();
+        if (part === top || stack.at(-1).flat) say(no, 'skipped', '%% region: outside a composite state: not read');
+        else part.hint = { id: sp < 0 ? r : r.slice(0, sp), name: sp < 0 ? undefined : mtDecode(r.slice(sp).trim()) };
+      }
+      if (s.startsWith('%%')) continue;
+    }
+    if (!started) {
+      if (!/^stateDiagram(-v2)?$/i.test(s)) { say(no, 'skipped', 'not a Mermaid stateDiagram: nothing read'); return empty(); }
+      started = true; viewId = hint.id; hint = {};
+      if (viewId != null && mtId(viewId) !== viewId) { say(no, 'approximated', `%% id: ${viewId}: an id holds no "->", so the view is ${mtId(viewId)}`); viewId = mtId(viewId); }
+      continue;
+    }
+    const word = mtWord(s), rest = s.slice(word.length).trim(), arrow = s.indexOf('-->'), colon = s.indexOf(':');
+    if (s.startsWith('}')) {
+      const o = stack.pop();
+      if (!o) say(no, 'skipped', 'a } that closes nothing');
+      else if (o.flat) flat--;
+    } else if (s === '--') {
+      const o = stack.at(-1);
+      if (!o || o.flat) say(no, 'skipped', '-- outside a composite state: not read');
+      else { const part = { owner: o.rec, k: o.rec.parts.length + 1 }; o.rec.parts.push(part); items.push({ kind: 'region', part }); o.cur = part; }
+    } else if (word === 'state') {
+      let label, k = 0, name;
+      if (rest.startsWith('"')) {
+        const q = rest.indexOf('"', 1), as = q < 0 ? null : /^\s*as\s+/i.exec(rest.slice(q + 1));
+        if (!as) { say(no, 'skipped', `state ${rest}: a "description" with no as <name>`); hint = {}; continue; }
+        label = mtDecode(rest.slice(1, q)); k = q + 1 + as[0].length;
+      }
+      let e = k;
+      while (e < rest.length && !/[\s{]/.test(rest[e])) e++;
+      name = nameOf(rest.slice(k, e), no);
+      const tail = rest.slice(e).trim(), fork = /^(?:<<(fork|join|choice)>>|\[\[(fork|join|choice)\]\])$/i.exec(tail);
+      if (!name || (tail && tail !== '{' && !fork)) { say(no, 'skipped', `state ${rest} is not understood`); hint = {}; continue; }
+      const rec = mention(name, no);
+      declare(rec);
+      if (fork) rec.node = { type: 'uml.Pseudostate', props: { kind: (fork[1] || fork[2]).toLowerCase() } };
+      else kindOf(rec, no);
+      if (label !== undefined && rec.node.type === 'uml.State') rec.node.label = label;
+      else if (label !== undefined && label !== rec.symbol) rec.node.label = label;
+      if (tail === '{') open(rec, no);
+    } else if (word === 'note') {
+      const side = /^(left|right) of\s+/i.exec(rest);
+      if (!side) { say(no, 'skipped', `note ${rest}: a note not beside a state is not read`); hint = {}; continue; }
+      const after = rest.slice(side[0].length), c = after.indexOf(':'), name = nameOf(c < 0 ? after : after.slice(0, c), no);
+      if (!name) { say(no, 'skipped', `note ${rest}: names no state`); hint = {}; continue; }
+      if (side[1].toLowerCase() === 'left') say(no, 'approximated', `note left of ${name}: the side is not kept`);
+      const rec = { kind: 'note', target: mention(name, no), no, hint: hint.id, link: hint.link, text: [] };
+      if (c >= 0) { rec.text.push(after.slice(c + 1).trim()); items.push(rec); } else note = rec;
+    } else if (word === 'direction') {
+      const d = rest.toUpperCase();
+      if (stack.length) say(no, 'approximated', `direction ${rest} inside a composite state is not kept: the view has one direction`);
+      else if (d === 'TB' || d === 'TD') direction = 'down';
+      else if (d === 'LR') direction = 'right';
+      else if (d === 'BT' || d === 'RL') { direction = d === 'BT' ? 'down' : 'right'; say(no, 'approximated', `direction ${d} is drawn ${direction === 'down' ? 'top to bottom' : 'left to right'}`); }
+      else say(no, 'skipped', `direction ${rest}: not a direction`);
+    } else if (word === 'title') title = mtDecode(rest.replace(/^:/, '').trim());
+    else if (['classdef', 'class', 'style'].includes(word)) say(no, 'skipped', `${word === 'classdef' ? 'classDef' : word} ${rest}: styles are not read`);
+    else if (word === 'hide' || word === 'scale' || word === 'click') say(no, 'skipped', `${s}: not read`);
+    else if (word === 'acctitle' || word === 'accdescr') {
+      say(no, 'skipped', `${word === 'acctitle' ? 'accTitle' : 'accDescr'}: accessibility text is not read`);
+      if (word === 'accdescr' && s.includes('{') && !s.includes('}')) block = true;
+    } else if (arrow >= 0 && !(colon >= 0 && colon < arrow && s.slice(colon, colon + 3) !== ':::')) { // a transition: its label starts at the first : after the target
+      const left = s.slice(0, arrow), after = s.slice(arrow + 3);
+      let c = -1;
+      for (let k = 0; k < after.length && c < 0; k++) if (after[k] === ':') { // past a :::class
+        if (!after.startsWith(':::', k)) c = k;
+        else for (k += 2; k + 1 < after.length && !/[\s:]/.test(after[k + 1]); k++);
+      }
+      let target = c < 0 ? after : after.slice(0, c);
+      const pct = target.indexOf('%%');
+      if (pct >= 0) target = target.slice(0, pct);
+      const a = nameOf(left, no, true), b = nameOf(target, no, true);
+      if (!a || !b) { say(no, 'skipped', `"${s.length > 60 ? s.slice(0, 57) + '...' : s}" is not understood`); hint = {}; continue; }
+      const from = a === '[*]' ? star(true, no) : mention(a, no), to = b === '[*]' ? star(false, no) : mention(b, no);
+      items.push({ kind: 'trans', no, from, to, what: `${a} --> ${b}`, text: c < 0 ? '' : mtDecode(after.slice(c + 1).trim()), hint: hint.id });
+    } else if (colon > 0) { // s1 : text
+      const name = nameOf(s.slice(0, colon), no), rawText = s.slice(colon + 1).trim(), t = mtDecode(rawText);
+      if (!name) { say(no, 'skipped', `"${s.length > 60 ? s.slice(0, 57) + '...' : s}" is not understood`); hint = {}; continue; }
+      const rec = mention(name, no), line = mtLine(t);
+      if (line.activity) {
+        if (rec.acts.some(a => a.activity === line.activity)) say(no, 'approximated', `${name} : ${line.activity}: a second ${line.activity} replaces the first`);
+        rec.acts.push({ ...line, no });
+      } else if (line.internal) items.push({ kind: 'internal', rec, no, props: line.internal, hint: hint.id });
+      else items.push({ kind: 'note', target: rec, no, hint: hint.id, link: hint.link, text: [rawText], desc: true });
+    } else {
+      const pct = s.indexOf('%%'), name = nameOf(pct < 0 ? s : s.slice(0, pct), no);
+      if (!name) say(no, 'skipped', `"${s.length > 60 ? s.slice(0, 57) + '...' : s}" is not understood`);
+      else { const rec = mention(name, no); declare(rec); kindOf(rec, no); }
+    }
+    hint = {};
+  }
+  if (!started) { say(1, 'skipped', 'not a Mermaid stateDiagram: nothing read'); return empty(); }
+  if (note) { say(note.no, 'approximated', 'a note with no end note: read to the end'); items.push(note); }
+  for (const o of stack) if (!o.flat) say(o.no, 'approximated', `state ${o.rec.name} { is never closed: read to the end`);
+  // only a state holds activities, internal transitions and a body: on a pseudostate or a final state they are reported,
+  // and what its body holds is read into the scope around it
+  const isState = rec => rec.node.type === 'uml.State', what = rec => (rec.node.type === 'uml.FinalState' ? 'a final state' : `${/^[aeiou]/.test(rec.node.props.kind) ? 'an' : 'a'} ${rec.node.props.kind} pseudostate`);
+  for (const rec of order) {
+    if (isState(rec)) { for (const a of rec.acts) rec.node.props = { ...rec.node.props, [a.activity]: a.value }; continue; }
+    for (const a of rec.acts) say(a.no, 'approximated', `${rec.name} : ${a.activity}: ${rec.name} is ${what(rec)}, which has no activity: not read`);
+    if (rec.opened) say(rec.opened, 'approximated', `state ${rec.name} {: ${rec.name} is ${what(rec)}, which holds nothing: what its body holds is read into the scope around it`);
+  }
+  const real = s => { for (let n = 0; n < MT_WALK && s !== top && !isState(s.owner); n++) s = up(s); return s === top || isState(s.owner) ? s : top; }; // the scope a body of a non-state stands for
+
+  // ids: states by their names first; then, in the order they come, regions, [*], transitions, internal transitions, notes
+  const used = new Set(), next = new Map();
+  const take = (h, base, no, what) => {
+    if (h != null && h !== '') {
+      const t = mtId(h);
+      if (t !== h) say(no, 'approximated', `%% id: ${h}: an id holds no "->", so it is ${t}`);
+      if (!used.has(t)) { used.add(t); return t; }
+      const id = mtFree(used, next, base); used.add(id);
+      say(no, 'approximated', `%% id: ${t} is taken, so ${what} is ${id}`);
+      return id;
+    }
+    const id = mtFree(used, next, base); used.add(id);
+    return id;
+  };
+  for (const rec of order) {
+    rec.node.id = take(rec.hint, mtId(rec.name), rec.no, `state ${rec.name}`);
+    if (rec.hint == null && rec.node.id !== rec.name) say(rec.no, 'approximated', `state ${rec.name}: ${mtId(rec.name) !== rec.name ? 'an id holds no "->"' : 'its name is another\'s id'}, so it is ${rec.node.id}`);
+  }
+  const regioned = rec => isState(rec) && rec.parts && (rec.parts.length > 1 || !!rec.parts[0].hint);
+  const scopeId = s => (s = real(s), s === top ? '' : regioned(s.owner) ? s.id : s.owner.node.id);
+  const nodes = order.map(r => r.node), edges = [];
+  let notes = 0;
+  for (const x of items) {
+    if (x.kind === 'region') {
+      if (!regioned(x.part.owner)) continue;
+      const p = x.part, o = p.owner.node;
+      p.id = take(p.hint?.id, `${o.id}.r${p.k}`, p.owner.no, `a region of ${o.id}`);
+      (o.members ||= []).push({ id: p.id, type: 'uml.Region', ...(p.hint?.name ? { label: p.hint.name } : {}) });
+    } else if (x.kind === 'start' || x.kind === 'end') {
+      const sid = scopeId(x.scope);
+      x.node.id = take(x.hint, sid ? `${sid}.${x.kind}` : x.kind, x.no, `the ${x.kind === 'start' ? 'initial' : 'final'} state of ${sid || 'the top'}`);
+      if (sid) x.node.parent = sid;
+      nodes.push(x.node);
+    } else if (x.kind === 'trans') {
+      const e = { id: take(x.hint, `${x.from.node.id}-${x.to.node.id}`, x.no, x.what), type: 'uml.Transition', from: x.from.node.id, to: x.to.node.id };
+      if (x.text) {
+        const p = parseTransition(x.text, 'its text is not trigger [guard] / effect');
+        if (p.error) { e.props = { trigger: x.text }; e.ext = { mermaid: { label: x.text } }; say(x.no, 'approximated', `${x.what}: ${p.error}: it is kept as its trigger`); }
+        else if (Object.keys(mtParts(p)).length) e.props = mtParts(p);
+      }
+      edges.push(e);
+    } else if (x.kind === 'internal') {
+      const o = x.rec.node;
+      if (!isState(x.rec)) { say(x.no, 'approximated', `${x.rec.name} : ${mtPrint(x.props) ?? 'an internal transition'}: ${x.rec.name} is ${what(x.rec)}, which has no internal transition: not read`); continue; }
+      (o.members ||= []).push({ id: take(x.hint, `${o.id}.t${++x.rec.internal}`, x.rec.no, `an internal transition of ${o.id}`), type: 'uml.InternalTransition', props: x.props });
+    } else {
+      const label = mtDecode(x.text.join('\n')), c = { id: take(x.hint, `note-${++notes}`, x.no, 'a note'), type: 'uml.Comment', ...(label ? { label } : {}), ...(x.desc ? { ext: { mermaid: { description: true } } } : {}) };
+      nodes.push(c);
+      edges.push({ id: take(x.link, `${c.id}-link`, x.no, "a note's line"), type: 'uml.CommentLink', from: c.id, to: x.target.node.id });
+    }
+  }
+  for (const rec of order) if (rec.body && scopeId(rec.body)) rec.node.parent = scopeId(rec.body);
+  for (const n of nodes) if (n.members) n.members.sort((a, b) => (a.type === b.type ? 0 : a.type === 'uml.Region' ? -1 : 1)); // regions, then internal transitions
+
+  const view = { id: viewId || MT_VIEW, diagram: 'uml.state-machine', ...(title ? { title } : {}), ...(direction === 'down' ? { direction } : {}), nodeIds: nodes.map(n => n.id) };
+  report.sort((a, b) => a.line - b.line); // stable: one line's items keep their order
+  return { model: { schemaVersion: 2, ...(title ? { title } : {}), root: view.id, nodes, edges, views: [view] }, report };
+}
+
+function writeMermaidState(model, viewId) {
+  const m = model && typeof model === 'object' ? model : {}, arr = x => (Array.isArray(x) ? x : []), isObj = x => !!x && typeof x === 'object';
+  const flat = s => String(s).replace(/\r\n|\r|\n/g, '\\n'), has = x => x != null && x !== '', str = x => typeof x === 'string';
+  const views = arr(m.views).filter(isObj);
+  const view = viewId != null ? views.find(v => v.id === viewId) : views.find(v => v.diagram === 'uml.state-machine');
+  if (viewId != null && !view) return `%% not written: view ${flat(viewId)}, which the model does not have\n`;
+  if (!view) return '%% not written: the model, which has no uml.state-machine view\n';
+  if (view.diagram !== 'uml.state-machine') return `%% not written: view ${flat(view.id)}, a ${flat(view.diagram)} view, not a uml.state-machine one\n`;
+  // text: Mermaid's own characters as entities, a line break as <br>, a space at either end as an entity, which the
+  // reader's trim keeps, and the space after "direction", which Mermaid's lexer takes anywhere in a line
+  const ent = c => `#${c.codePointAt(0)};`;
+  const enc = s => String(s).replace(/[#;:"<>\\]/g, ent).replace(/\r\n|\r|\n/g, '<br>').replace(/^\s|\s$/g, ent).replace(/(direction)(\s)/gi, (_, w, c) => w + ent(c));
+  const okId = id => str(id) && id !== '' && id.trim() === id && !/[\r\n]/.test(id); // a hint keeps it
+  const out = [], notWritten = [], skip = x => notWritten.push(`${flat(x.id)} (${flat(x.type)})`), lose = (id, what) => notWritten.push(`${flat(id)}: ${flat(what)}`);
+  const title = String(has(view.title) ? view.title : m.title ?? '');
+  if (has(title)) out.push('---', `title: ${/^[\p{L}\p{N}][\p{L}\p{N} _.,()-]*$/u.test(title) && !title.endsWith(' ') ? title : JSON.stringify(String(title))}`, '---');
+  if (view.id !== MT_VIEW) { if (/[\r\n]/.test(view.id)) lose(view.id, "the view's id, which has a line break"); else out.push(`%% id: ${view.id}`); }
+  out.push('stateDiagram-v2', view.direction === 'down' ? '  direction TB' : '  direction LR');
+
+  // what is written: the view's states, pseudostates, final states and comments
+  const byId = new Map();
+  for (const n of arr(m.nodes)) if (isObj(n) && !byId.has(n.id)) byId.set(n.id, n);
+  const nodes = [], comments = [], shown = new Set();
+  for (const id of arr(view.nodeIds)) {
+    const n = byId.get(id);
+    if (!n || shown.has(id)) continue;
+    const kind = n.props?.kind, ok = okId(n.id) && (n.type === 'uml.State' || n.type === 'uml.FinalState' || n.type === 'uml.Comment'
+      || (n.type === 'uml.Pseudostate' && (MT_FORKS.includes(kind) || (kind !== 'final' && Object.hasOwn(MT_KINDS, kind)))));
+    if (!ok) { skip(n); continue; }
+    shown.add(id); (n.type === 'uml.Comment' ? comments : nodes).push(n);
+  }
+  const isNode = new Set(nodes.map(n => n.id)), stateOf = new Map(nodes.filter(n => n.type === 'uml.State').map(n => [n.id, n]));
+  const regionsOf = new Map(), regionAt = new Map(); // a state's regions; a region's id -> its state
+  for (const st of stateOf.values()) {
+    const rs = arr(st.members).filter(x => isObj(x) && x.type === 'uml.Region');
+    for (const r of rs) if (!okId(r.id) || /\s/.test(r.id) || regionAt.has(r.id) || isNode.has(r.id)) { lose(st.id, `region ${r.id}, whose id the reader cannot carry`); } else regionAt.set(r.id, st);
+    regionsOf.set(st.id, rs.filter(r => regionAt.get(r.id) === st));
+  }
+  // each node's scope: '' the top, a state's id (no regions), or a region's id; a parent the view does not show is the top
+  const keyOf = new Map();
+  for (const n of nodes) {
+    let k = n.parent ?? '';
+    if (regionAt.has(k)) { /* a region */ } else if (stateOf.has(k) && k !== n.id) { const rs = regionsOf.get(k); if (rs.length) { lose(n.id, `its parent ${k} has regions: written in the first`); k = rs[0].id; } }
+    else { if (k !== '') lose(n.id, `parent ${k}, not a state in the view: written at the top`); k = ''; }
+    keyOf.set(n.id, k);
+  }
+  const ownerOf = k => (regionAt.has(k) ? regionAt.get(k) : stateOf.get(k)); // the state a scope is in
+  const outer = k => keyOf.get(ownerOf(k).id); // the scope around the state that holds k
+  const depth = new Map([['', 0]]); // a scope's depth in composites, each worked out once; Infinity in a cycle of parents
+  const depthOf = k0 => {
+    const path = [], on = new Set();
+    for (let k = k0; !depth.has(k); k = outer(k)) { if (on.has(k)) { depth.set(k, Infinity); break; } on.add(k); path.push(k); }
+    for (let j = path.length - 1; j >= 0; j--) if (!depth.has(path[j])) depth.set(path[j], depth.get(outer(path[j])) + 1);
+    return depth.get(k0);
+  };
+  for (const n of nodes) if (depthOf(keyOf.get(n.id)) > MT_DEEP) { // a cycle of parents, or a nest too deep for the reader, is written at the top
+    lose(n.id, `parent ${n.parent}: it is nested over ${MT_DEEP} deep or in itself, so it is written at the top`); keyOf.set(n.id, '');
+  }
+  const chain = k => { const c = [k]; while (k !== '' && c.length <= MT_DEEP + 1) c.push(k = outer(k)); return c; };
+  const kids = new Map();
+  for (const n of nodes) { const k = keyOf.get(n.id); if (!kids.has(k)) kids.set(k, []); kids.get(k).push(n); }
+
+  // the transitions; each initial pseudostate and final state that can be its scope's [*]
+  const edgeById = new Map(), trans = [], links = new Map();
+  for (const x of arr(m.edges)) if (isObj(x) && !edgeById.has(x.id)) edgeById.set(x.id, x);
+  for (const x of edgeById.values()) {
+    if (x.type === 'uml.CommentLink' && shown.has(x.from) && shown.has(x.to)) { if (!links.has(x.from)) links.set(x.from, []); links.get(x.from).push(x); continue; }
+    if (!(shown.has(x.from) || shown.has(x.to))) continue;
+    if (x.type === 'uml.Transition' && isNode.has(x.from) && isNode.has(x.to) && okId(x.id)) trans.push(x); else skip(x);
+  }
+  const ins = new Map(), outs = new Map(), push = (map, k, x) => { if (!map.has(k)) map.set(k, []); map.get(k).push(x); };
+  for (const t of trans) { push(outs, t.from, t); push(ins, t.to, t); }
+  const stars = new Map(), scopeStar = new Set(); // node -> 'start' | 'end'; the scopes whose [*] is taken
+  for (const pass of ['start', 'end']) for (const n of nodes) {
+    const k = keyOf.get(n.id), initial = pass === 'start';
+    if (!(initial ? n.type === 'uml.Pseudostate' && n.props.kind === 'initial' : n.type === 'uml.FinalState') || has(n.label) || n.members || Object.keys(n.props || {}).some(p => p !== 'kind')) continue;
+    const mine = initial ? outs.get(n.id) : ins.get(n.id), others = initial ? ins.get(n.id) : outs.get(n.id), key = `${k}\0${pass}`;
+    const near = t => { const o = initial ? t.to : t.from; return chain(keyOf.get(o)).includes(k) && (initial || stars.get(o) !== 'start' || keyOf.get(o) === k); };
+    if (!mine || others || scopeStar.has(key) || !mine.every(near)) continue;
+    stars.set(n.id, pass); scopeStar.add(key);
+  }
+  // each transition where the reader finds its ends: [*] in its own scope; any other in the scope around both ends (and
+  // around a state whose regions it crosses), so it names no state in a body that is not around it
+  const transAt = new Map();
+  for (const t of trans) {
+    let k;
+    if (stars.get(t.from) === 'start') k = keyOf.get(t.from);
+    else if (stars.get(t.to) === 'end') k = keyOf.get(t.to);
+    else { const a = new Set(chain(keyOf.get(t.from))); k = chain(keyOf.get(t.to)).find(x => a.has(x)) ?? ''; }
+    push(transAt, k, t);
+  }
+
+  // names: an id Mermaid reads as one word, else one made of it (and its id as a hint)
+  const safe = id => /^[\p{L}\p{N}_.]+$/u.test(id) && !MT_KEYWORDS.has(mtWord(id));
+  const names = new Map(), taken = new Set(nodes.map(n => n.id).filter(safe));
+  for (const n of nodes) {
+    if (stars.has(n.id)) continue;
+    if (safe(n.id)) { names.set(n.id, n.id); continue; }
+    let base = n.id.replace(/[^\p{L}\p{N}_.]+/gu, '_').replace(/^[_.]+|[_.]+$/g, ''), name, k = 1;
+    if (!safe(base)) base = 'S_' + base;
+    for (name = base; taken.has(name); name = `${base}_${++k}`);
+    taken.add(name); names.set(n.id, name);
+  }
+
+  // the ids as the reader derives them, in the order it meets them: the hint, when one is needed
+  const used = new Set(nodes.filter(n => !stars.has(n.id)).map(n => n.id)), next = new Map();
+  const idOf = (id, base) => { const d = mtFree(used, next, base); used.add(id); return d === id ? null : id; };
+  const put = (depth, ...xs) => out.push(...xs.map(x => '  '.repeat(depth + 1) + x));
+  const internals = new Map(), seenStar = new Set();
+  let notes = 0;
+  const inners = new Set(); // composites, whose text Mermaid 12.3.0 refuses beside a label ("Group nodes can only have label"): written as %% row:
+  const textLine = (n, text) => `${inners.has(n.id) ? '%% row: ' : ''}${names.get(n.id)} : ${enc(text)}`;
+  const notesOn = new Map(); // a written node -> the comments on it: each with one line, from it
+  for (const c of comments) {
+    const ls = links.get(c.id) || [], to = ls[0]?.to;
+    if (ls.length !== 1 || !okId(ls[0].id) || !isNode.has(to) || stars.has(to)) { skip(c); ls.forEach(skip); continue; }
+    push(notesOn, to, c);
+  }
+  const writeComments = (n, d) => {
+    for (const c of notesOn.get(n.id) || []) {
+      const link = links.get(c.id)[0], ch = idOf(c.id, `note-${++notes}`), lh = idOf(link.id, `${c.id}-link`), desc = c.ext?.mermaid?.description === true;
+      const heads = [...(ch ? [`%% id: ${ch}`] : []), ...(lh ? [`%% link-id: ${lh}`] : [])];
+      if (desc && has(c.label) && mtLine(String(c.label)).description) put(d, ...heads, textLine(n, c.label));
+      else {
+        if (desc) lose(c.id, 'its text reads as an activity or a transition, so it is written as a note');
+        if (!has(c.label)) lose(c.id, 'no text');
+        put(d, ...heads, `note right of ${names.get(n.id)} : ${has(c.label) ? enc(c.label) : ''}`);
+      }
+      Object.keys(c).filter(p => !['id', 'type', 'label', 'ext'].includes(p)).forEach(p => lose(c.id, p));
+    }
+  };
+  const writeNode = (n, d) => {
+    const name = names.get(n.id), heads = n.id !== name ? [`%% id: ${n.id}`] : [], kind = n.props?.kind;
+    if (n.type === 'uml.Pseudostate' && MT_FORKS.includes(kind)) {
+      if (has(n.label)) lose(n.id, `label ${n.label}`);
+      put(d, ...heads, `state ${name} <<${kind}>>`);
+    } else if (n.type !== 'uml.State') {
+      const k = n.type === 'uml.FinalState' ? 'final' : kind;
+      if (has(n.label) && n.label === MT_KINDS[k]) lose(n.id, `label ${n.label}, read as none`);
+      put(d, ...heads, `%% kind: ${k}`, `state "${enc(has(n.label) ? n.label : MT_KINDS[k])}" as ${name}`);
+    } else {
+      const rs = regionsOf.get(n.id), inner = rs.length > 0 || kids.has(n.id);
+      if (inner) inners.add(n.id);
+      if (!has(n.label)) lose(n.id, 'no label, read as its name');
+      const head = has(n.label) && n.label !== name ? `state "${enc(n.label)}" as ${name}` : inner ? `state ${name}` : name;
+      if (!inner) put(d, ...heads, head);
+      else {
+        put(d, ...heads, head + ' {');
+        if (!rs.length) writeScope(n.id, d + 1);
+        rs.forEach((r, k) => {
+          if (k) put(d + 1, '--');
+          const h = idOf(r.id, `${n.id}.r${k + 1}`);
+          if (r.label === '') lose(r.id, 'an empty label');
+          if (rs.length === 1 || h || has(r.label)) put(d + 1, `%% region: ${r.id}${has(r.label) ? ' ' + enc(r.label) : ''}`);
+          writeScope(r.id, d + 1);
+        });
+        put(d, '}');
+      }
+      const p = isObj(n.props) ? n.props : {};
+      for (const a of MT_ACTS) if (p[a] !== undefined) {
+        const v = p[a], line = str(v) && mtLine(`${a} / ${v}`);
+        if (line && line.activity === a && line.value === v) put(d, textLine(n, `${a} / ${v}`)); else lose(n.id, `${a} ${flat(v)}`);
+      }
+      Object.keys(p).filter(a => !MT_ACTS.includes(a)).forEach(a => lose(n.id, `property ${a}`));
+      for (const x of arr(n.members)) {
+        if (!isObj(x) || x.type === 'uml.Region') continue;
+        const q = isObj(x.props) ? x.props : {}, parts = { trigger: q.trigger, guard: q.guard, effect: q.effect };
+        const printed = x.type === 'uml.InternalTransition' && okId(x.id) && [q.trigger, q.guard, q.effect].every(v => v === undefined || str(v)) && mtPrint(parts);
+        const text = printed && (q.effect === undefined ? printed + ' /' : printed), line = text && mtLine(text);
+        if (!line?.internal || !mtSame(line.internal, parts)) { skip(x); continue; }
+        const k = (internals.get(n.id) || 0) + 1, h = idOf(x.id, `${n.id}.t${k}`);
+        internals.set(n.id, k);
+        put(d, ...(h ? [`%% id: ${h}`] : []), textLine(n, text));
+      }
+    }
+    if (n.type !== 'uml.State' && (n.members || Object.keys(n.props || {}).some(p => p !== 'kind'))) lose(n.id, 'its properties and members');
+    writeComments(n, d);
+  };
+  const writeTrans = (t, d) => {
+    const lines = [], end = x => {
+      const s = stars.get(x);
+      if (!s) return names.get(x);
+      if (!seenStar.has(x)) { seenStar.add(x); const k = keyOf.get(x), h = idOf(x, k ? `${k}.${s}` : s); if (h) lines.push(`%% ${s}-id: ${h}`); }
+      return '[*]';
+    };
+    const a = end(t.from), b = end(t.to), h = idOf(t.id, `${t.from}-${t.to}`), p = isObj(t.props) ? t.props : {};
+    let label = '';
+    const raw = t.ext?.mermaid?.label;
+    if (str(raw) && raw === p.trigger && p.guard === undefined && p.effect === undefined && parseTransition(raw).error) label = raw;
+    else if (Object.keys(p).length) {
+      const parts = { trigger: p.trigger, guard: p.guard, effect: p.effect }, printed = [p.trigger, p.guard, p.effect].every(v => v === undefined || str(v)) && mtPrint(parts);
+      if (printed) label = printed; else lose(t.id, `its label, which does not read back as trigger [guard] / effect`);
+      Object.keys(p).filter(x => !['trigger', 'guard', 'effect'].includes(x)).forEach(x => lose(t.id, `property ${x}`));
+    }
+    if (keyOf.get(t.from) !== keyOf.get(t.to)) lines.unshift('%% warning: Mermaid may not draw this');
+    put(d, ...lines, ...(h ? [`%% id: ${h}`] : []), `${a} --> ${b}${label ? ' : ' + enc(label) : ''}`);
+  };
+  function writeScope(k, d) {
+    for (const n of kids.get(k) || []) if (!stars.has(n.id)) writeNode(n, d);
+    for (const t of transAt.get(k) || []) writeTrans(t, d);
+  }
+  writeScope('', 0);
+  for (const x of notWritten) out.push(`  %% not written: ${x}`);
+  return out.join('\n') + '\n';
+}
+/* ---------- structure notation: what the component, deployment and composite structure types share (work package 5.3,
+   notes/stage-5.md §4, §9.1) ----------
+   Four shapes, each with size(n), out(n, d), inset(n, side, t), face(n), ports(n, side, k) and draw(n), as src/uml/flow.js's;
+   strokes --um-muted, fills the stage's background (T2), every text cut with fit; hit areas 24 px at least (E8):
+   - port: a 12 px square centred on its owner's border, longer along it where the router gave it several lines (§4.1);
+     its name, n.nameBox, beside it (portsDrawn);
+   - component: a rectangle, UML's component icon (16 × 12) at the top right, «component» (n.keyword) and n.stereotypes
+     over the name; as a box's frame (frame(f)), its name and icon in the header room;
+   - ball: a 16 px circle, its name under it cut at 160 px; a line's end slides onto the circle (src/typed/draw.js);
+   - artifact: a rectangle, UML's document icon (12 × 14) at the top right, «artifact» («deployment spec» for
+     n.type uml.DeploymentSpecification) over the name.
+   Then: each port's side, chosen before the layout from the host's ranking (portSides, §4.2), and the room its owner needs
+   (portFit); after the layout, on a copy of the geometry (§2.4), the ports with no line, every port as a node and its name
+   (portsDrawn, §4.3, §4.5); the shared rules (port-owner, manifest-ends) and the accessible names. Ships in
+   lib/umlimator-all.js only. */
+
+const SN_OBJ = x => x !== null && typeof x === 'object' && !Array.isArray(x), SN_ARR = x => (Array.isArray(x) ? x : []);
+const SN = { line: 'var(--um-muted)', ink: 'var(--um-text)', bg: 'var(--um-stage-bg)', port: 12, ball: 16, pad: 10, name: 12, nlh: 16, st: 11, sth: 14, minW: 96, maxW: 320, minH: 48, bmax: 160, bpx: 11 };
+const snPlural = (k, w) => `${k} ${k === 1 ? w : w + 's'}`;
+const snNode = (n, shape, said, inner) => `<g class="node ${shape}" data-id="${esc(n.id)}" data-shape="${shape}" tabindex="-1" role="img" aria-label="${esc(n.aria || said)}">${inner}</g>`;
+const snText = (x, y, t, px, wt, fill, cls) => `<text x="${r2(x)}" y="${r2(y)}" text-anchor="middle" class="${cls}" fill="${fill}" style="font:${wt} ${px}px var(--um-sans)">${esc(t)}</text>`;
+const snBody = d => `<path d="${d}" class="n-mask"/><path d="${d}" class="n-body" fill="${SN.bg}" stroke="${SN.line}"/>`;
+const snHit = (x, y, w, h) => `<rect x="${r2(x)}" y="${r2(y)}" width="${r2(w)}" height="${r2(h)}" class="fl-hit" fill="transparent"/>`;
+const snRect = boxOut(0);
+
+/* ---- the accessible names (§10.1, §10.3): each look's, which the types write into n.aria ---- */
+const SN_SAY = {
+  // "Component Shop API (service), 2 ports, holding 1 component, 2 artifacts"; holds: a word for each element held
+  component(label, { stereotypes = [], ports = 0, holds = [] } = {}) { const k = new Map(); holds.forEach(w => k.set(w, (k.get(w) || 0) + 1));
+    return [`Component ${label ?? ''}${stereotypes.length ? ` (${stereotypes.join(', ')})` : ''}`, ...(ports ? [snPlural(ports, 'port')] : []),
+      ...(k.size ? ['holding ' + [...k].map(([w, c]) => snPlural(c, w)).join(', ')] : [])].join(', '); },
+  // "Port orders : OrderApi of Shop API, provides Orders, requires Payments"
+  port: (label, owner, { valueType, provides = [], requires = [] } = {}) => `Port ${label ?? ''}${valueType ? ' : ' + valueType : ''}${owner ? ' of ' + owner : ''}`
+    + (provides.length ? ', provides ' + provides.join(', ') : '') + (requires.length ? ', requires ' + requires.join(', ') : ''),
+  // "Interface Orders, as a ball, provided by Shop API, required by Storefront"
+  iface: (label, { ball, providers = [], requirers = [] } = {}) => `Interface ${label ?? ''}${ball ? ', as a ball' : ''}`
+    + (providers.length ? ', provided by ' + providers.join(', ') : '') + (requirers.length ? ', required by ' + requirers.join(', ') : ''),
+  // "Artifact shop-api.jar, on Java 21 runtime, manifests Shop API"
+  artifact: (label, { spec, on, manifests = [] } = {}) => `${spec ? 'Deployment specification' : 'Artifact'} ${label ?? ''}${on ? ', on ' + on : ''}${manifests.length ? ', manifests ' + manifests.join(', ') : ''}`,
+};
+
+/* ---- the port: its square, a 24 px area to hit, and its name (n.nameBox, placed by portsDrawn) ---- */
+SHAPE.port = {
+  size: () => ({ w: SN.port, h: SN.port }), out: snRect, inset: () => 0,
+  draw(n) { const w = Math.max(24, n.w), h = Math.max(24, n.h), b = n.nameBox;
+    return snNode(n, 'port', SN_SAY.port(n.label), snHit(n.x + n.w / 2 - w / 2, n.y + n.h / 2 - h / 2, w, h) + snBody(snRect(n))
+      + (b ? `<text x="${r2(b.x + b.w / 2)}" y="${r2(b.y + 10.5)}" text-anchor="middle" class="port-name" data-box="${r2(b.x)} ${r2(b.y)} ${r2(b.w)} ${r2(b.h)}" fill="${SN.line}" style="font:500 10px var(--um-sans)">${esc(b.text)}</text>` : '')); },
+};
+
+/* ---- the component and the artifact: an icon's band at the top, then the keywords and stereotypes, then the name ---- */
+const snIconBand = 24;
+const snParts = (n, kw) => { const st = [...(kw ? [kw] : []), ...SN_ARR(n.stereotypes).filter(t => String(t ?? '').trim() !== '')].map(t => `«${t}»`), name = String(n.label ?? '');
+  return { st, name, w: Math.ceil(Math.min(SN.maxW, Math.max(SN.minW, ...st.map(t => textW(t, SN.st) + 2 * SN.pad), textW(name, SN.name) + 2 * SN.pad))),
+    h: Math.max(SN.minH, snIconBand + st.length * SN.sth + SN.nlh + 8) }; };
+const snKeyword = n => (n.shape === 'artifact' ? (n.type === 'uml.DeploymentSpecification' ? 'deployment spec' : 'artifact') : n.keyword ? 'component' : null);
+// UML's component icon: a rectangle with two small tabs on its left; the document icon: a page with its corner folded
+const snCompIcon = (x, y) => `<path d="M${r2(x + 3)} ${r2(y)}H${r2(x + 16)}V${r2(y + 12)}H${r2(x + 3)}Z M${r2(x)} ${r2(y + 2)}H${r2(x + 6)}V${r2(y + 5)}H${r2(x)}Z M${r2(x)} ${r2(y + 7)}H${r2(x + 6)}V${r2(y + 10)}H${r2(x)}Z" class="n-det sn-icon" fill="${SN.bg}" stroke="${SN.line}"/>`;
+const snDocIcon = (x, y) => `<path d="M${r2(x)} ${r2(y)}H${r2(x + 8)}L${r2(x + 12)} ${r2(y + 4)}V${r2(y + 14)}H${r2(x)}Z M${r2(x + 8)} ${r2(y)}V${r2(y + 4)}H${r2(x + 12)}" class="n-det sn-icon" fill="${SN.bg}" stroke="${SN.line}"/>`;
+function snClassifier(shape, said, icon) {
+  const S = {
+    size: n => { const p = snParts(n, snKeyword({ ...n, shape })); return { w: p.w, h: p.h }; },
+    out: snRect, inset: () => 0,
+    draw(n) { const p = snParts(n, snKeyword({ ...n, shape })), cx = n.x + n.w / 2, max = n.w - 2 * SN.pad;
+      let y = n.y + snIconBand + (n.h - snIconBand - p.st.length * SN.sth - SN.nlh - 8) / 2;
+      const tx = p.st.map(t => { const s = snText(cx, y + 11, fit(t, SN.st, max), SN.st, 400, SN.line, 'c-st'); y += SN.sth; return s; });
+      tx.push(snText(cx, y + 12, fit(p.name, SN.name, max), SN.name, 600, SN.ink, 'c-name').replace('<text ', `<text data-o="${esc(n.id)}" `));
+      return snNode(n, shape, said(n), snBody(snRect(n)) + icon(n.x + n.w - 22, n.y + 6) + tx.join('')); },
+  };
+  return S;
+}
+SHAPE.component = snClassifier('component', n => SN_SAY.component(n.label), snCompIcon);
+SHAPE.artifact = snClassifier('artifact', n => SN_SAY.artifact(n.label, { spec: n.type === 'uml.DeploymentSpecification' }), (x, y) => snDocIcon(x + 4, y - 1));
+// a component that holds something shown is a box: its border, its name at the top left of the 24 px header room, its icon at the top right
+SHAPE.component.frame = f => `<rect class="family-box" x="${f.x}" y="${f.y}" width="${f.w}" height="${f.h}" stroke="${SN.line}"/>`
+  + `<text class="family-title" x="${r2(f.x + 12)}" y="${r2(f.y + 17)}" fill="${SN.ink}" style="font:600 12px var(--um-sans)" data-t="ft" data-o="${esc(f.id)}">${esc(fit(f.title ?? f.label ?? f.id, 12, f.w - 44))}</text>`
+  + snCompIcon(f.x + f.w - 26, f.y + 6);
+
+/* ---- the ball: the circle at the top, centred, its name under it; a line's end slides onto the circle ---- */
+const snBallName = n => fit(String(n.label ?? ''), SN.bpx, SN.bmax);
+const snBallBox = n => ({ x: n.x + n.w / 2 - SN.ball / 2, y: n.y, w: SN.ball, h: SN.ball });
+const snCircleIn = (b, s, t) => { const r = b.w / 2, u = t - (s === 'L' || s === 'R' ? b.y + r : b.x + r); return r - Math.sqrt(Math.max(0, r * r - u * u)); };
+const snCircle = (b, d = 0) => { const r = b.w / 2 + d, cx = b.x + b.w / 2, cy = b.y + b.h / 2;
+  return `M${r2(cx - r)} ${r2(cy)}A${r2(r)} ${r2(r)} 0 1 0 ${r2(cx + r)} ${r2(cy)}A${r2(r)} ${r2(r)} 0 1 0 ${r2(cx - r)} ${r2(cy)}Z`; };
+const SN_CIRCLE = { face: b => [b.y, b.y + b.h], inset: snCircleIn };
+SHAPE.ball = {
+  size: n => { const t = snBallName(n); return t ? { w: Math.ceil(Math.max(SN.ball, textW(t, SN.bpx) + 4)), h: SN.ball + 4 + SN.sth } : { w: SN.ball, h: SN.ball }; },
+  out: (n, d = 0) => snCircle(snBallBox(n), d), face: n => [n.y, n.y + SN.ball],
+  // the box's side to the circle: its own offset in the box, then the circle's depth. ponytail: a line the router ends on the
+  // left or right below the circle (beside the name) slides to the circle's centre line; the component type gives every line to
+  // a ball its side (notes/stage-5.md §9.2), so none does
+  inset(n, s, t) { const b = snBallBox(n); return (s === 'L' ? b.x - n.x : s === 'R' ? n.x + n.w - b.x - b.w : s === 'B' ? n.y + n.h - b.y - b.h : 0) + snCircleIn(b, s, t); },
+  ports: (n, side, k = 1) => portsOn(SN_CIRCLE, snBallBox(n), side, k),
+  draw(n) { const b = snBallBox(n), t = snBallName(n), cx = n.x + n.w / 2;
+    return snNode(n, 'ball', SN_SAY.iface(n.label, { ball: true }), `<circle cx="${r2(cx)}" cy="${r2(b.y + 8)}" r="12" class="fl-hit" fill="transparent"/>` + snBody(snCircle(b))
+      + (t ? snText(cx, b.y + SN.ball + 4 + 11, t, SN.bpx, 500, SN.ink, 'c-name') : '')); },
+};
+for (const k of ['port', 'component', 'artifact']) { const S = SHAPE[k]; S.face = n => [n.y, n.y + n.h]; S.ports = (n, side, j = 1) => portsOn(S, n, side, j); }
+
+/* ---- a port's side, chosen before the layout (§4.2) ---- */
+const SN_SIDES = ['L', 'R', 'T', 'B'], SN_PIN = { left: 'L', right: 'R', top: 'T', bottom: 'B' }, SN_TURN = { L: 'T', R: 'B', T: 'L', B: 'R' };
+const SN_OUT = { L: [-1, 0], R: [1, 0], T: [0, -1], B: [0, 1] };
+const portLen = k => SN.port + 10 * (Math.max(1, k || 1) - 1); // a port with k lines on its face (§4.1)
+/* ports: [{ id, owner, pin, far }] in members order: pin, the view's present.<port>.side ('left', 'right', 'top', 'bottom');
+   far: the ids of the far ends of its lines. pos: the ranking, id -> [col, row], a box's the mean of what it holds (the type's).
+   A pinned port takes its pin; else the side facing most far ends, by column, then by row (down: a later column is below);
+   a port with none takes its owner's side with fewest ports, left first. Returns { id: 'L' | 'R' | 'T' | 'B' } */
+function portSides(ports, pos, down = false) {
+  const out = Object.create(null), count = Object.create(null), P = id => (SN_OBJ(pos) && Object.hasOwn(pos, id) && Array.isArray(pos[id]) ? pos[id] : null), later = [];
+  const put = (p, s) => { out[p.id] = s; (count[p.owner] ||= { L: 0, R: 0, T: 0, B: 0 })[s]++; };
+  SN_ARR(ports).forEach(p => { if (Object.hasOwn(SN_PIN, p.pin)) return put(p, SN_PIN[p.pin]);
+    const o = P(p.owner), votes = { L: 0, R: 0, T: 0, B: 0 };
+    SN_ARR(p.far).forEach(id => { const f = P(id); if (!o || !f) return; const dc = f[0] - o[0], dr = f[1] - o[1], s = dc ? (dc > 0 ? 'R' : 'L') : dr ? (dr > 0 ? 'B' : 'T') : null;
+      if (s) votes[down ? SN_TURN[s] : s]++; });
+    const best = SN_SIDES.reduce((a, s) => (votes[s] > votes[a] ? s : a), 'L');
+    if (votes[best]) put(p, best); else later.push(p); });
+  later.forEach(p => { const c = count[p.owner] || { L: 0, R: 0, T: 0, B: 0 }; put(p, SN_SIDES.reduce((a, s) => (c[s] < c[a] ? s : a), 'L')); });
+  return { ...out };
+}
+// the least size of each port's owner (a node, not a box): on each side 16 + Σ (port length + 8) px; ports: [{ id, owner, lines }]
+function portFit(ports, sides) {
+  const sum = Object.create(null); SN_ARR(ports).forEach(p => { const s = SN_OBJ(sides) && Object.hasOwn(sides, p.id) && sides[p.id]; if (Object.hasOwn(SN_OUT, s)) (sum[p.owner] ||= { L: 16, R: 16, T: 16, B: 16 })[s] += portLen(p.lines) + 8; });
+  return Object.fromEntries(Object.entries(sum).map(([o, k]) => [o, { w: Math.max(k.T, k.B), h: Math.max(k.L, k.R) }]));
+}
+
+/* ---- after the layout, on a copy (§4.3, §4.5) ----
+   g: what layoutTyped returned, never edited. ports: [{ id, owner, side, label, valueType, aria }] in members order, side as
+   portSides gave it; id is the port's geometry id (`<part>-><port>` on a part, §6), the one its lines name as fromPort or
+   toPort. A port with lines is where the router's port hook put it (e.fpb, e.tpb: its box on that end; with neither, a 12 px
+   square round the line's end); those with none go on their side in members order, 8 px clear of each other and of the
+   ports with lines, within the side's free span (a node's less 8 px at each corner; a box's 40 px below its top and 16 px
+   above its bottom, 20 px off its corners: stage 2's), or past its end where it cannot hold them. Each port's line ends move 6 px
+   along the side they leave by, onto the square's outer face (its inner face, for a line inward). Each port becomes a node
+   of the copy (shape 'port'), with its name `name : Type` placed by the end labels' search (endLabels) beside its first
+   line out, or where a line straight out would be: clear of lines, nodes, ports, line labels and the names before it */
+function portsDrawn(g, ports) {
+  const fams = SN_ARR(g.families), has = id => SN_OBJ(g.byId) && Object.hasOwn(g.byId, id), owner = id => (has(id) ? g.byId[id] : fams.find(f => f.id === id)), isBox = id => !has(id);
+  const slide = (p, s) => [r2(p[0] + 6 * SN_OUT[s][0]), r2(p[1] + 6 * SN_OUT[s][1])];
+  const edges = SN_ARR(g.edges).map(e => { if (!e.pts || !(e.fromPort || e.toPort)) return e; const pts = e.pts.map(p => p.slice());
+    if (e.fromPort && SN_OUT[e.fs]) pts[0] = slide(pts[0], e.fs); if (e.toPort && SN_OUT[e.ts]) pts[pts.length - 1] = slide(pts[pts.length - 1], e.ts); return { ...e, pts }; });
+  const union = (a, b) => { const x = Math.min(a.x, b.x), y = Math.min(a.y, b.y); return { x, y, w: Math.max(a.x + a.w, b.x + b.w) - x, h: Math.max(a.y + a.h, b.y + b.h) - y }; };
+  const lined = p => { let r = null; // the union of the boxes its lines record: one port, longer for more lines on its face
+    SN_ARR(g.edges).forEach(e => [[e.fromPort, e.fpb, e.pts && e.pts[0]], [e.toPort, e.tpb, e.pts && e.pts[e.pts.length - 1]]].forEach(([id, b, end]) => {
+      const q = id !== p.id ? null : SN_OBJ(b) ? b : end ? { x: end[0] - 6, y: end[1] - 6, w: 12, h: 12 } : null; if (q) r = r ? union(r, q) : { ...q }; }));
+    return r; };
+  const at = new Map(), onSide = new Map(), boxesOn = (o, s) => onSide.get(o + '|' + s) || onSide.set(o + '|' + s, []).get(o + '|' + s); // a port's box; each owner's side's
+  const seen = new Set(SN_OBJ(g.byId) ? Object.keys(g.byId) : []), list = SN_ARR(ports).filter(p => SN_OBJ(p) && owner(p.owner) && Object.hasOwn(SN_OUT, p.side) && !seen.has(p.id) && seen.add(p.id));
+  list.forEach(p => { const r = lined(p); if (r) { at.set(p.id, r); boxesOn(p.owner, p.side).push(r); } });
+  // the ports with no line, side by side: evenly over the span in members order, then pushed forwards and, at the span's end,
+  // back, 20 px centre to centre (12 + 8), each past a port with lines it would come within 8 px of; a side too short for them
+  // narrows the gaps down to 4 px (§4.4, step 3), and what still does not fit is held at the span's start, marked over
+  [...new Set(list.filter(p => !at.has(p.id)).map(p => p.owner + '|' + p.side))].forEach(key => {
+    const mine = list.filter(p => !at.has(p.id) && p.owner + '|' + p.side === key), o = owner(mine[0].owner), s = mine[0].side, v = s === 'L' || s === 'R', held = boxesOn(mine[0].owner, s);
+    const [a, b] = isBox(mine[0].owner) ? (v ? [o.y + 40, o.y + o.h - 16] : [o.x + 20, o.x + o.w - 20]) : (v ? [o.y + 8, o.y + o.h - 8] : [o.x + 8, o.x + o.w - 8]);
+    const end = r => (v ? r.y + r.h : r.x + r.w);
+    let ts = [];
+    for (let gap = 8; gap >= 4; gap--) { const d = 12 + gap, m = 6 + gap, hit = t => held.find(r => { const lo = v ? r.y : r.x, hi = lo + (v ? r.h : r.w); return t + m > lo + .01 && t - m < hi - .01; });
+      ts = []; mine.forEach((p, i) => { let t = Math.max(a + (b - a) * (i + 1) / (mine.length + 1), a + 6, i ? ts[i - 1] + d : -Infinity), r; while ((r = hit(t))) t = end(r) + m; ts.push(t); });
+      for (let i = mine.length - 1; i >= 0; i--) { let t = Math.min(ts[i], b - 6, i < mine.length - 1 ? ts[i + 1] - d : Infinity), r; while ((r = hit(t))) t = (v ? r.y : r.x) - m; ts[i] = t; }
+      if (ts[0] >= a + 6 - .01) break; }
+    const edge = s === 'L' ? o.x : s === 'R' ? o.x + o.w : s === 'T' ? o.y : o.y + o.h;
+    mine.forEach((p, i) => { const t = Math.max(ts[i], a + 6), r = v ? { x: r2(edge - 6), y: r2(t - 6), w: 12, h: 12 } : { x: r2(t - 6), y: r2(edge - 6), w: 12, h: 12 };
+      if (t > ts[i]) r.over = true; at.set(p.id, r); held.push(r); });
+  });
+  // the names: obstacles are the nodes, the ports, every box's border and 24 px header room, every line's segments and labels,
+  // and the names placed before
+  const segs = edges.filter(e => e.pts).flatMap(e => e.pts.slice(1).map((q, k) => { const p = e.pts[k]; return { x: Math.min(p[0], q[0]) - 3, y: Math.min(p[1], q[1]) - 3, w: Math.abs(q[0] - p[0]) + 6, h: Math.abs(q[1] - p[1]) + 6 }; }));
+  const keep = [...SN_ARR(g.nodes).map(n => ({ x: n.x - 2, y: n.y - 2, w: n.w + 4, h: n.h + 4 })), ...[...at.values()].map(r => ({ x: r.x - 2, y: r.y - 2, w: r.w + 4, h: r.h + 4 })), ...segs, ...edges.filter(e => e.lbl).map(e => e.lbl),
+    ...fams.flatMap(f => [{ x: f.x - 2, y: f.y - 2, w: f.w + 4, h: 26 }, { x: f.x - 2, y: f.y, w: 4, h: f.h }, { x: f.x + f.w - 2, y: f.y, w: 4, h: f.h }, { x: f.x - 2, y: f.y + f.h - 2, w: f.w + 4, h: 4 }])];
+  const nodes = list.map(p => { const r = at.get(p.id), o = owner(p.owner), s = p.side, text = `${p.label ?? ''}${p.valueType ? ' : ' + p.valueType : ''}`;
+    const out = edges.find(e => e.pts && ((e.fromPort === p.id && e.fs === s) || (e.toPort === p.id && e.ts === s)));
+    const v = s === 'L' || s === 'R', face = [r.x + r.w / 2 + (v ? r.w / 2 * SN_OUT[s][0] : 0), r.y + r.h / 2 + (v ? 0 : r.h / 2 * SN_OUT[s][1])];
+    const pts = out ? (out.fromPort === p.id && out.fs === s ? out.pts : out.pts.slice().reverse()) : [face, [face[0] + 30 * SN_OUT[s][0], face[1] + 30 * SN_OUT[s][1]]];
+    const [nameBox] = text.trim() ? endLabels({ end: { labels: { from: { role: text } } }, s: o, t: null }, pts, keep) : [];
+    if (nameBox) keep.push(nameBox);
+    return { id: p.id, label: p.label, type: 'uml.Port', shape: 'port', kind: 'file', k: 'file', owner: p.owner, side: s, col: o.col ?? 0, row: o.row ?? 0, ...r, aria: p.aria || SN_SAY.port(p.label, o.label, { valueType: p.valueType }), ...(nameBox ? { nameBox } : {}) }; });
+  const all = [g.bounds, ...nodes, ...nodes.map(n => n.nameBox)].filter(Boolean);
+  return { ...g, nodes: [...SN_ARR(g.nodes), ...nodes], byId: { ...g.byId, ...Object.fromEntries(nodes.map(n => [n.id, n])) }, edges, ...(all.length ? { bounds: all.reduce(union) } : {}) };
+}
+
+/* ---- the shared rules (§10.1, §10.3): each problem { level, rule, path, message, ids }, as src/uml/flow.js's; with a view,
+   only a port whose owner it shows and a manifestation that touches what it shows ---- */
+const STRUCT_RULES = {
+  'port-owner': 'a port is a member of a component or a class',
+  'manifest-ends': 'a manifestation runs from an artifact (an error), to a component (a warning)',
+};
+const SN_ARTIFACTS = ['uml.Artifact', 'uml.DeploymentSpecification'];
+const snWord = t => String(t ?? '').split('.').pop().replace(/([a-z])([A-Z])/g, '$1 $2').toLowerCase(); // 'uml.ExecutionEnvironment': "execution environment"
+function structProblems(model, view) {
+  const out = [], at = new Map(), shown = new Set(SN_ARR(view && view.nodeIds)), seen = id => !view || shown.has(id);
+  SN_ARR(model && model.nodes).forEach(n => { if (SN_OBJ(n) && typeof n.id === 'string' && !at.has(n.id)) at.set(n.id, n); });
+  const nm = x => (x ? `${snWord(x.type)} ${x.id}${x.label != null && x.label !== '' ? ` ("${x.label}")` : ''}` : 'nothing');
+  const say = (level, rule, path, ids, msg) => out.push({ level, rule, path, ids: ids.filter(x => x != null), message: `${rule}: ${msg}` });
+  SN_ARR(model && model.nodes).forEach((n, i) => { if (!SN_OBJ(n) || !seen(n.id)) return;
+    if (n.type === 'uml.Port') say('error', 'port-owner', `nodes[${i}]`, [n.id], `${nm(n)} is a node; a port is a member of a component or a class`);
+    SN_ARR(n.members).forEach((m, j) => { if (SN_OBJ(m) && m.type === 'uml.Port' && n.type !== 'uml.Component' && n.type !== 'uml.Class')
+      say('error', 'port-owner', `nodes[${i}].members[${j}]`, [m.id, n.id], `${nm(m)} is a member of ${nm(n)}; a port is a member of a component or a class`); }); });
+  SN_ARR(model && model.edges).forEach((e, i) => { if (!SN_OBJ(e) || e.type !== 'uml.Manifestation' || !(seen(e.from) || seen(e.to))) return;
+    const f = at.get(e.from), t = at.get(e.to);
+    if (!f || !SN_ARTIFACTS.includes(f.type)) say('error', 'manifest-ends', `edges[${i}]`, [e.id, e.from], `${e.id} runs from ${nm(f)}: a manifestation runs from an artifact`);
+    if (!t || t.type !== 'uml.Component') say('warning', 'manifest-ends', `edges[${i}]`, [e.id, e.to], `${e.id} runs to ${nm(t)}: «manifest» is drawn to a component only`); });
+  return out;
+}
+/* ---------- the component diagram, uml.component (work package 5.4, notes/stage-5.md §10.1) ----------
+   Components (src/uml/structure.js's look), a component or package that holds something shown a box (src/uml/owners.js),
+   its ports on its border (§4), interfaces as a ball or as the class type's rectangle (§9.2), artifacts, closed packages and
+   comments; realizations, component realizations, usages (a socket at a ball, else «use»), assembly and delegation
+   connectors (a delegation from a box's port inward is an inner line, §5), dependencies, manifestations and comment links.
+   Laid out by layoutTyped from the type's own ranking (cpPlace), a usage of a ball turned so the ball comes before its requirers: gap 48, labelGaps
+   and cut 280 (§8), a box with ports 48 px of padding (§7), repair and reroute off (§14). Ports on a box are nodes of the
+   picture; ports on a node are drawn in the node's group (a node 'ported'), so the layout check, which measures every
+   node against every other, does not take a port for an overlap of its own owner (§4.5, as built). Ships in
+   lib/umlimator-all.js only. */
+
+const CP_OBJ = x => x !== null && typeof x === 'object' && !Array.isArray(x), CP_ARR = x => (Array.isArray(x) ? x : []);
+const CP_HAS = x => x != null && x !== '';
+const CP_OWN = (o, k) => (CP_OBJ(o) && Object.hasOwn(o, k) ? o[k] : undefined); // a model's id as a key: 'constructor' is not Object's
+const cpProps = x => (CP_OBJ(x && x.props) ? x.props : {});
+const cpName = x => String(x.label ?? x.id);
+const cpStereo = x => CP_ARR(cpProps(x).stereotypes).filter(CP_HAS).map(String);
+const cpPlural = (k, w) => `${k} ${k === 1 ? w : w + 's'}`;
+const CP_LINES = ['uml.InterfaceRealization', 'uml.ComponentRealization', 'uml.Usage', 'uml.Connector', 'uml.Dependency', 'uml.Manifestation', 'uml.CommentLink'];
+const CP_SIDE = { L: 'left', R: 'right', T: 'top', B: 'bottom' }, CP_OPP = { L: 'R', R: 'L', T: 'B', B: 'T' }, CP_TURN = { L: 'T', T: 'L', R: 'B', B: 'R' };
+const cpPortsOf = n => CP_ARR(n && n.members).filter(m => CP_OBJ(m) && m.type === 'uml.Port' && typeof m.id === 'string');
+
+/* ---- the model read: every node, every port and its owner, each node's owners up the chain ---- */
+function cpIndex(model) {
+  const N = new Map(), P = new Map(); // P: port id -> { x, owner }
+  CP_ARR(model && model.nodes).forEach(n => { if (CP_OBJ(n) && typeof n.id === 'string' && !N.has(n.id)) N.set(n.id, n); });
+  N.forEach(n => cpPortsOf(n).forEach(p => { if (!P.has(p.id) && !N.has(p.id)) P.set(p.id, { x: p, owner: n.id }); }));
+  const chain = id => { const out = []; for (let p = (N.get(id) || {}).parent; p != null && N.has(p) && !out.includes(p) && p !== id; p = N.get(p).parent) out.push(p); return out; };
+  const comp = id => (P.has(id) ? P.get(id).owner : id); // a port's end: its owner
+  const ty = id => (N.get(comp(id)) || {}).type;
+  return { N, P, chain, comp, ty, name: id => (P.has(id) ? `${cpName(P.get(id).x)} of ${cpName(N.get(P.get(id).owner))}` : N.has(id) ? cpName(N.get(id)) : String(id)) };
+}
+const cpBall = (I, view, id) => (I.N.get(id) || {}).type === 'uml.Interface' && (CP_OWN(CP_OWN(view && view.present, id), 'as') === 'ball');
+// what a line is drawn as: its key in the look, the legend and the words
+function cpKind(I, view, e) {
+  if (e.type === 'uml.InterfaceRealization') return cpBall(I, view, e.to) ? 'stem' : 'realization';
+  if (e.type === 'uml.Usage') return cpBall(I, view, e.to) ? 'socket' : 'usage';
+  if (e.type === 'uml.Connector') return cpProps(e).kind === 'delegation' ? 'delegation' : 'assembly';
+  return { 'uml.ComponentRealization': 'component-realization', 'uml.Dependency': 'dependency', 'uml.Manifestation': 'manifestation', 'uml.CommentLink': 'comment-link' }[e.type] || 'dependency';
+}
+// each kind: its ends and stroke (src/typed/draw.js's ENDS), its keyword, its word, and what the legend says of it
+const CP_LOOK = {
+  stem: [{ from: 'none', to: 'none' }, '', 'Realization', 'provides the interface drawn as a ball (its stem)'],
+  socket: [{ from: 'none', to: 'socket' }, '', 'Usage', 'requires the interface: a socket round its ball'],
+  realization: [{ from: 'none', to: 'triangle', dashed: true }, '', 'Realization', 'provides the interface it points to'],
+  usage: [{ from: 'none', to: 'open', dashed: true }, '«use»', 'Usage', 'requires the one it points to'],
+  'component-realization': [{ from: 'none', to: 'triangle', dashed: true }, '', 'Component realization', 'realizes the component it points to'],
+  assembly: [{ from: 'none', to: 'none' }, '', 'Assembly', 'joins what one part requires to what another provides'],
+  delegation: [{ from: 'none', to: 'open' }, '', 'Delegation', 'passes on, inward or out, what a port takes or needs'],
+  dependency: [{ from: 'none', to: 'open', dashed: true }, '', 'Dependency', 'uses the one it points to'],
+  manifestation: [{ from: 'none', to: 'open', dashed: true }, '«manifest»', 'Manifestation', 'the artifact is the component\'s file'],
+  'comment-link': [{ from: 'none', to: 'none', dashed: true }, '', 'Comment link', 'what a comment is about'],
+};
+
+/* ---- the view read: its boxes, its lines, every element's words ---- */
+const CP_BOX = { boxTypes: ['uml.Component', 'uml.Package'], shape: x => (x.type === 'uml.Component' ? 'component' : 'package'), word: x => (x.type === 'uml.Component' ? 'Component' : 'Package') };
+const CP_WORD = { 'uml.Component': 'component', 'uml.Interface': 'interface', 'uml.Artifact': 'artifact', 'uml.Package': 'package', 'uml.Comment': 'comment', 'uml.Port': 'port' };
+function cpPic(model, view) {
+  const I = cpIndex(model), pic = ownersOn(model, view, CP_BOX), shown = new Set(pic.ids);
+  // each line the view lists (or with no list each of this type's kinds) whose ends, a port taken to its owner, it shows
+  const E = new Map(); CP_ARR(model && model.edges).forEach(e => { if (CP_OBJ(e) && typeof e.id === 'string' && !E.has(e.id)) E.set(e.id, e); });
+  const list = Array.isArray(view.edges) ? view.edges.map(x => (typeof x === 'string' ? E.get(x) : x)) : [...E.values()].filter(e => CP_LINES.includes(e.type));
+  const at = id => (shown.has(id) ? { at: id, port: null } : I.P.has(id) && shown.has(I.P.get(id).owner) ? { at: I.P.get(id).owner, port: id } : null);
+  const holds = (b, x) => pic.open.has(b) && pic.chain(x).includes(b);
+  const lines = []; list.forEach(e => { if (!CP_OBJ(e) || typeof e.id !== 'string') return; const f = at(e.from), t = at(e.to); if (!f || !t) return;
+    // a line between a box and what it holds leaves the box's port inward (§5); without a port at the box's end it is not drawn
+    const inner = holds(f.at, t.at) ? 'from' : holds(t.at, f.at) ? 'to' : null;
+    if ((inner && !(inner === 'from' ? f : t).port) || (f.at === t.at && (f.port || t.port))) return;
+    lines.push({ e, f, t, inner, kind: cpKind(I, view, e) }); });
+  const boxes = pic.boxes.map(b => { const x = I.N.get(b.id); if (x.type !== 'uml.Component') return b;
+    return { ...b, aria: SN_SAY.component(pic.name(b.id), { stereotypes: cpStereo(x), ports: cpPortsOf(x).length, holds: pic.holds(b.id).map(id => CP_WORD[(I.N.get(id) || {}).type] || 'element') }) }; });
+  return { ...pic, boxes, I, lines };
+}
+// "Port orders of Shop API, provides Orders"; "Interface Orders, as a ball, provided by Shop API, required by Storefront"
+function cpNodeName(model, view, pic, id) {
+  const { I, lines } = pic, x = I.N.get(id) || (I.P.get(id) || {}).x, of = k => lines.filter(l => l.e.type === k);
+  if (!x) return String(id);
+  if (I.P.has(id)) { const by = k => of(k).filter(l => l.e.from === id && I.ty(l.e.to) === 'uml.Interface').map(l => cpName(I.N.get(l.e.to)));
+    return SN_SAY.port(cpName(x), pic.name(I.P.get(id).owner), { valueType: cpProps(x).valueType, provides: by('uml.InterfaceRealization'), requires: by('uml.Usage') }); }
+  const b = pic.boxes.find(y => y.id === id); if (b) return b.aria;
+  const st = cpStereo(x), owners = k => of(k).filter(l => l.e.to === id).map(l => pic.name(I.comp(l.e.from)));
+  if (x.type === 'uml.Component') return SN_SAY.component(pic.name(id), { stereotypes: st, ports: cpPortsOf(x).length });
+  if (x.type === 'uml.Interface') return SN_SAY.iface(pic.name(id), { ball: cpBall(I, view, id), providers: owners('uml.InterfaceRealization'), requirers: owners('uml.Usage') });
+  if (x.type === 'uml.Artifact') return SN_SAY.artifact(pic.name(id), { manifests: of('uml.Manifestation').filter(l => l.e.from === id).map(l => pic.name(l.e.to)) });
+  if (x.type === 'uml.Comment') return 'Comment: ' + cpName(x);
+  return `${x.type === 'uml.Package' ? 'Package' : String(x.type).split('.').pop()} ${pic.name(id)}${st.length ? ` (${st.join(', ')})` : ''}`;
+}
+const cpLabel = (l, said) => [CP_LOOK[l.kind][1], ...cpStereo(l.e).map(t => `«${t}»`), said ? null : l.e.label].filter(CP_HAS).join(' ');
+// "Delegation from orders of Shop API to orders of Checkout"
+const cpLineName = (pic, l) => { const t = [...cpStereo(l.e).map(s => `«${s}»`), l.e.label].filter(CP_HAS).join(' ');
+  return `${CP_LOOK[l.kind][2]} from ${pic.I.name(l.e.from)} to ${pic.I.name(l.e.to)}${t ? ': ' + t : ''}`; };
+// reading order (§10.1): each box and what it holds, each element's ports after it in members order, then the lines
+const cpOrder = pic => [...readingOrder(pic).flatMap(id => [id, ...cpPortsOf(pic.I.N.get(id)).map(p => p.id)]), ...pic.lines.map(l => l.e.id)];
+
+/* ---- the legend: each line kind drawn. ponytail: copies class.js's legend ends, which it does not export ---- */
+const CP_ENDS = { none: '', open: '<path d="M17 4L26 8L17 12" fill="none"/>', triangle: '<path d="M16 3L26 8L16 13Z" fill="var(--um-panel)"/>',
+  socket: '<path d="M26 2A6 6 0 0 0 26 14" fill="none"/>', ball: '<circle cx="21" cy="8" r="5" fill="var(--um-panel)"/>' };
+const cpLegend = kinds => Object.keys(CP_LOOK).filter(k => kinds.has(k)).map(k => { const [L, , name, says] = CP_LOOK[k], end = k === 'stem' ? 'ball' : L.to;
+  return `<span class="lgi" title="${esc(name + ' — ' + says)}"><svg class="lgs" viewBox="0 0 28 16" aria-hidden="true"><g stroke="var(--um-muted)" stroke-width="1.4" stroke-linejoin="round"><path d="M2 8H${end === 'none' ? 26 : end === 'ball' ? 16 : end === 'socket' ? 23 : 17}"${L.dashed ? ' stroke-dasharray="3 2"' : ''}/>${CP_ENDS[end]}</g></svg><b>${esc(name)}</b><span>${esc(says)}</span></span>`; });
+
+/* ---- a node with ports drawn in its own group: its shape's, with each port's node after it ---- */
+SHAPE.ported = { size: n => SHAPE[n.base].size(n), out: (n, d) => SHAPE[n.base].out(n, d), inset: (n, s, t) => SHAPE[n.base].inset(n, s, t), face: n => SHAPE[n.base].face(n),
+  ports: (n, s, k) => SHAPE[n.base].ports(n, s, k), draw: (n, c, f) => SHAPE[n.base].draw({ ...n, shape: n.base }, c, f).replace(/<\/g>$/, CP_ARR(n.held).map(p => SHAPE.port.draw(p)).join('') + '</g>') };
+
+/* ---- the view laid out (§10.1) ----
+   Ranked here, not by the host, whose ranking reads only lines between the view's nodes and so none from a port (Q11): as
+   the host ranks a view with boxes (blockPos, src/map/context.js), in one pass. Each box's contents, then the top, are
+   ranked by the lines between them (a line to what a box holds is the box's), longest paths with cycles broken depth first,
+   a usage of a ball turned so the ball comes before its requirers (provider, ball, socket from left to right); a box is a block of its
+   contents' columns and rows; columns ordered by untangle and rows by rowsFor (src/layout/layered.js); what no line reaches
+   in rows under its block. A pin (the view's layout, by element) wins, and a node it would cover moves down */
+function cpRank(items, links) {
+  const outs = new Map(items.map(id => [id, []])), st = new Map(), fwd = [];
+  links.forEach(l => outs.get(l[0]).push(l));
+  const dfs = u => { st.set(u, 1); outs.get(u).forEach(l => { if (st.get(l[1]) === 1) return; fwd.push(l); if (!st.has(l[1])) dfs(l[1]); }); st.set(u, 2); };
+  [...items.filter(id => !links.some(l => l[1] === id)), ...items].forEach(id => { if (!st.has(id)) dfs(id); });
+  const rank = Object.fromEntries(items.map(id => [id, 0]));
+  for (let it = 0, more = true; more && it <= items.length; it++) { more = false; fwd.forEach(([a, b]) => { if (rank[b] < rank[a] + 1) { rank[b] = rank[a] + 1; more = true; } }); }
+  return { rank, fwd };
+}
+function cpPlace(pic, lines, pins) {
+  const links = lines.filter(l => !l.inner).map(l => (l.kind === 'socket' ? [l.t.at, l.f.at] : [l.f.at, l.t.at]));
+  const itemIn = (x, g) => { for (let k = 0; x != null && k < 64; k++, x = pic.owner(x)) if (pic.owner(x) === g) return x; };
+  const block = g => { const items = pic.holds(g), size = Object.create(null), pos = Object.create(null);
+    items.forEach(x => { size[x] = pic.open.has(x) ? block(x) : { w: 1, h: 1, pos: { [x]: [0, 0] } }; });
+    const L = links.map(([a, b]) => [itemIn(a, g), itemIn(b, g)]).filter(([a, b]) => a !== undefined && b !== undefined && a !== b), lined = new Set(L.flat());
+    const { rank, fwd } = cpRank(items.filter(x => lined.has(x)), L), cols = [], hh = x => size[x].h;
+    items.filter(x => lined.has(x)).forEach(x => (cols[rank[x]] ||= []).push(x));
+    untangle(cols, fwd, hh); const row = rowsFor(cols, fwd, hh);
+    let c0 = 0, h = 0; cols.forEach(list => { let r0 = 0, w = 0;
+      list.forEach(x => { r0 = Math.max(r0, row[x] ?? 0); Object.entries(size[x].pos).forEach(([id, [c, r]]) => { pos[id] = [c0 + c, r0 + r]; }); r0 += size[x].h; w = Math.max(w, size[x].w); });
+      c0 += w; h = Math.max(h, r0); });
+    const loose = items.filter(x => !lined.has(x)), per = Math.max(2, c0);
+    let c = 0, r = h, rh = 0; // packed by size in rows under the lined columns, a row as tall as its tallest
+    loose.forEach(x => { if (c && c + size[x].w > per) { r += rh; c = 0; rh = 0; }
+      Object.entries(size[x].pos).forEach(([id, [a, b]]) => { pos[id] = [c + a, r + b]; }); c += size[x].w; rh = Math.max(rh, size[x].h); c0 = Math.max(c0, c); });
+    return { w: c0, h: r + rh, pos }; };
+  const at = block(null).pos, P = Object.entries(CP_OBJ(pins) ? pins : {}).filter(([id, p]) => Object.hasOwn(at, id) && Array.isArray(p) && p.length === 2 && p.every(Number.isFinite));
+  if (!P.length) return at;
+  const taken = P.map(([, p]) => p), free = (c, r) => !taken.some(([c2, r2]) => c2 === c && Math.abs(r2 - r) < 1), pinned = new Set(P.map(([id]) => id));
+  P.forEach(([id, p]) => { at[id] = p; });
+  Object.keys(at).forEach(id => { if (pinned.has(id)) return; let [c, r] = at[id]; while (!free(c, r)) r++; at[id] = [c, r]; taken.push([c, r]); });
+  return at;
+}
+function cpGeo({ model, view, pos: pins, memo }) {
+  const pic = cpPic(model, view), { I, lines } = pic, down = view.direction === 'down', present = CP_OBJ(view.present) ? view.present : {}, pos = cpPlace(pic, lines, pins);
+  const P = id => { const p = CP_OWN(pos, id); if (Array.isArray(p)) return p; const k = pic.open.has(id) ? pic.holds(id).map(P).filter(Boolean) : []; // a box: the mean of what it holds
+    return k.length ? [k.reduce((a, q) => a + q[0], 0) / k.length, k.reduce((a, q) => a + q[1], 0) / k.length] : null; };
+  const pos2 = Object.fromEntries(pic.ids.map(id => [id, P(id)]).filter(([, p]) => p));
+  // each port's side (§4.2): pinned, else facing its lines' far ends outside it; a port whose only lines run to its owner's
+  // owner's ports takes their side, so a delegation runs straight in, and their order: the mean place of their far ends
+  const shownPorts = pic.ids.flatMap(id => cpPortsOf(I.N.get(id)).filter(p => I.P.has(p.id) && I.P.get(p.id).owner === id).map((p, k) => ({ p, owner: id, rank: k })));
+  const ends = id => lines.flatMap(l => [[l, 'from', l.f, l.t], [l, 'to', l.t, l.f]].filter(([, , me]) => me.port === id));
+  const far = id => ends(id).filter(([l, w, me, o]) => l.inner !== w && !pic.chain(me.at).includes(o.at)).map(([, , , o]) => o.at);
+  const side = portSides(shownPorts.map(({ p, owner }) => ({ id: p.id, owner, pin: CP_OWN(CP_OWN(present, p.id), 'side'), far: far(p.id) })), pos2, down);
+  const follow = Object.create(null); shownPorts.forEach(({ p }) => { if (CP_OWN(CP_OWN(present, p.id), 'side') != null || far(p.id).length) return;
+    const up = ends(p.id).find(([l, w, me, o]) => o.port && pic.chain(me.at).includes(o.at)); if (up) { side[p.id] = side[up[3].port]; follow[p.id] = up[3].port; } });
+  const lay = s => CP_SIDE[down ? CP_TURN[s] : s]; // a picture's side as layoutTyped takes it: laid out down, turned
+  const k = id => Math.max(1, ...['out', 'in'].map(w => ends(id).filter(([l, wh]) => (l.inner === wh) === (w === 'in')).length)); // its busiest face
+  const fit = portFit(shownPorts.map(({ p, owner }) => ({ id: p.id, owner, lines: k(p.id) })), side);
+  const nodes = pic.ids.filter(id => !pic.open.has(id)).map(id => { const n = I.N.get(id), st = cpStereo(n), pr = CP_OWN(present, id) || {};
+    const ops = CP_ARR(n.members).filter(m => CP_OBJ(m) && (m.type === 'uml.Operation' || m.type === 'uml.Property'));
+    const look = n.type === 'uml.Comment' ? { shape: 'note' } : n.type === 'uml.Package' ? { shape: 'package', stereotypes: st } : n.type === 'uml.Artifact' ? { shape: 'artifact', stereotypes: st }
+      : n.type === 'uml.Interface' ? (cpBall(I, view, id) ? { shape: 'ball' } : { shape: 'classifier', stereotypes: ['interface', ...st], compartments: ops.length ? [{ name: 'operations', members: ops }] : [] })
+        : n.type === 'uml.Class' ? { shape: 'classifier', stereotypes: st } : { shape: 'component', stereotypes: st, keyword: !!CP_OWN(pr, 'keyword') };
+    const d = { id, label: n.type === 'uml.Comment' ? cpName(n) : pic.name(id), type: n.type || 'uml.Component', kind: 'file', ...look, aria: cpNodeName(model, view, pic, id), col: (P(id) || [0, 0])[0], row: (P(id) || [0, 0])[1] };
+    // a ball is laid out as its circle, so the router ends its lines level with the circle's centre; its name hangs under it in
+    // the row gap. ponytail: the layout keeps no room for the name, which a line passing under the ball may cross (§17)
+    const s = SHAPE[d.shape].size(d), f = CP_OWN(fit, id); return { ...d, w: Math.max(s.w, f ? f.w : 0), h: d.shape === 'ball' ? 16 : Math.max(s.h, f ? f.h : 0) }; });
+  // a box whose ports have lines, or that holds one that does, takes 48 px of padding (§7)
+  const lined = new Set(shownPorts.filter(({ p }) => ends(p.id).length).map(x => x.owner));
+  const boxes = pic.boxes.map(b => ({ ...b, ...([b.id, ...pic.ids.filter(x => pic.chain(x).includes(b.id))].some(x => pic.open.has(x) && lined.has(x)) ? { pad: 48 } : {}) }));
+  const ball = (l, w) => { const me = w === 'from' ? l.f : l.t, o = w === 'from' ? l.t : l.f; if (me.port || !cpBall(I, view, me.at)) return {};
+    const a = P(me.at) || [0, 0], b = P(o.at) || [0, 0]; // a ball's line on its left or right by the rank ([col, row] holds it first either way) (§9.2); laid out down, a line from
+    // before it comes in above and one from after it on the side it comes from, so none crosses the name under the circle
+    return { [w + 'Side']: !down ? CP_SIDE[b[0] > a[0] ? 'R' : 'L'] : b[0] < a[0] ? 'left' : lay(b[1] > a[1] ? 'R' : 'L') }; };
+  const end = (l, w) => { const me = w === 'from' ? l.f : l.t; if (!me.port) return ball(l, w); const s = side[me.port];
+    return { [w + 'Port']: me.port, [w + 'Side']: lay(l.inner === w ? CP_OPP[s] : s) }; };
+  const along = id => { const a = (side[id] === 'L' || side[id] === 'R') !== down ? 1 : 0, f = far(id).map(P).filter(Boolean); return f.length ? f.reduce((t, q) => t + q[a], 0) / f.length : 0; };
+  const rank = id => (follow[id] ? along(follow[id]) : (shownPorts.find(x => x.p.id === id) || {}).rank);
+  const edges = lines.map(l => { const label = cpLabel(l), r = [l.f.port, l.t.port].map(x => (x ? rank(x) : null));
+    return { id: l.e.id, _id: l.e.id, type: l.e.type, from: l.f.at, to: l.t.at, ...end(l, 'from'), ...end(l, 'to'), ...(l.inner ? { inner: l.inner } : {}),
+      ...(l.f.port || l.t.port ? { portRank: l.f.port && l.t.port ? r : r[l.f.port ? 0 : 1] } : {}), label: label || undefined, ...(label ? { cut: 280 } : {}),
+      end: CP_LOOK[l.kind][0], aria: cpLineName(pic, l), ...(CP_OBJ(l.e.style) || typeof l.e.style === 'string' ? { style: l.e.style } : {}) }; });
+  const g = placeTabs(layoutTyped({ nodes, edges, ...(boxes.length ? { containers: boxes } : {}), direction: down ? 'down' : 'right', gap: 48, rgap: 56, labelGaps: true, repair: false, reroute: false }, memo));
+  // on a copy (stage 4 §2.4): every port, its name, and each port on a node put in that node's group
+  const d = portsDrawn(g, shownPorts.map(({ p, owner }) => ({ id: p.id, owner, side: side[p.id], label: cpName(p), valueType: cpProps(p).valueType, aria: cpNodeName(model, view, pic, p.id) })));
+  const held = new Map(); d.nodes.forEach(n => { if (n.shape === 'port' && Object.hasOwn(g.byId, n.owner)) held.set(n.owner, [...(held.get(n.owner) || []), n]); });
+  const out = d.nodes.filter(n => !(n.shape === 'port' && held.has(n.owner))).map(n => (held.has(n.id) && n.shape !== 'port' ? { ...n, shape: 'ported', base: n.shape, held: held.get(n.id) } : n));
+  // a slot after each element (src/typed/edit.js): the palette's add hears the selection through it (cpAdd, at.sel)
+  const byId = { ...d.byId, ...Object.fromEntries(out.map(n => [n.id, n])) }, slots = Object.values(byId).map((n, index) => ({ index, x: n.x, y: n.y, after: n.id }));
+  return { ...d, nodes: out, byId, slots, legend: cpLegend(new Set(lines.map(l => l.kind))), order: cpOrder(pic) };
+}
+
+/* ---- validators (§10.1). Each problem: { level, rule, path, message, ids }. With a view, the lines and elements it shows ---- */
+const CP_RULES = {
+  ...STRUCT_RULES,
+  'provided-ends': 'a realization runs from a component, a class or a port to an interface',
+  'required-ends': 'a usage from a component or a port runs to an interface (another is drawn as «use»)',
+  'ball-interface': 'a view draws only an interface as a ball',
+  'delegation-ends': 'a delegation joins a component\'s port with a component or port inside it, at any depth',
+  'assembly-ends': 'an assembly joins two components or their ports, neither inside the other',
+  'component-realization-ends': 'a component realization runs from a class or a component to a component',
+  'component-owner': 'a component\'s owner is a component or a package',
+};
+function cpProblems(model, view) {
+  const out = [...structProblems(model, view)], I = cpIndex(model), say = (level, rule, path, ids, msg) => out.push({ level, rule, path, ids: ids.filter(x => x != null), message: `${rule}: ${msg}` });
+  const shown = new Set(CP_ARR(view && view.nodeIds)), seen = id => !view || shown.has(I.comp(id)), listed = view && Array.isArray(view.edges) ? new Set(view.edges.map(x => (CP_OBJ(x) ? x.id : x))) : null;
+  const q = id => JSON.stringify(I.name(id)), comp = id => I.ty(id) === 'uml.Component', within = (a, b) => I.chain(I.comp(a)).includes(I.comp(b));
+  CP_ARR(model && model.nodes).forEach((n, i) => { if (!CP_OBJ(n) || n.type !== 'uml.Component' || !seen(n.id) || n.parent == null || !I.N.has(n.parent)) return;
+    const p = I.N.get(n.parent); if (!['uml.Component', 'uml.Package'].includes(p.type)) say('warning', 'component-owner', `nodes[${i}].parent`, [n.id, p.id], `${q(n.id)} is owned by ${q(p.id)}, a ${String(p.type).split('.').pop()}: a component's owner is a component or a package`); });
+  CP_ARR(model && model.edges).forEach((e, i) => { if (!CP_OBJ(e) || !(seen(e.from) || seen(e.to)) || (listed && !listed.has(e.id))) return;
+    const path = `edges[${i}]`, ends = [e.id, e.from, e.to], from = I.P.has(e.from) ? 'port' : I.ty(e.from), kind = cpProps(e).kind === 'delegation' ? 'delegation' : 'assembly'; // drawn as an assembly without one (cpKind)
+    if (e.type === 'uml.InterfaceRealization' && (!['uml.Component', 'uml.Class', 'port'].includes(from) || I.P.has(e.to) || I.ty(e.to) !== 'uml.Interface'))
+      say('error', 'provided-ends', path, ends, `${e.id} runs from ${q(e.from)} to ${q(e.to)}: a realization runs from a component, a class or a port to an interface`);
+    if (e.type === 'uml.Usage' && e.to != null && (from === 'port' || from === 'uml.Component') && (I.P.has(e.to) || I.ty(e.to) !== 'uml.Interface'))
+      say('warning', 'required-ends', path, ends, `${e.id} runs from ${q(e.from)} to ${q(e.to)}, not an interface: it is drawn as «use»`);
+    if (e.type === 'uml.Connector' && kind === 'delegation' && !(comp(e.from) && comp(e.to) && I.comp(e.from) !== I.comp(e.to) && (within(e.to, e.from) ? I.P.has(e.from) : within(e.from, e.to) && I.P.has(e.to))))
+      say('error', 'delegation-ends', path, ends, `${e.id} joins ${q(e.from)} and ${q(e.to)}: a delegation joins a component's port with a component or port inside it`);
+    if (e.type === 'uml.Connector' && kind === 'assembly' && !(comp(e.from) && comp(e.to) && I.comp(e.from) !== I.comp(e.to) && !within(e.from, e.to) && !within(e.to, e.from)))
+      say('error', 'assembly-ends', path, ends, `${e.id} joins ${q(e.from)} and ${q(e.to)}: an assembly joins two components or their ports, neither inside the other`);
+    if (e.type === 'uml.ComponentRealization' && (I.P.has(e.from) || I.P.has(e.to) || !['uml.Class', 'uml.Component'].includes(I.ty(e.from)) || I.ty(e.to) !== 'uml.Component'))
+      say('error', 'component-realization-ends', path, ends, `${e.id} runs from ${q(e.from)} to ${q(e.to)}: a component realization runs from a class or a component to a component`); });
+  if (view) { const vi = CP_ARR(model.views).indexOf(view);
+    Object.entries(CP_OBJ(view.present) ? view.present : {}).forEach(([id, p]) => { if (CP_OWN(p, 'as') === 'ball' && (I.N.get(id) || {}).type !== 'uml.Interface')
+      say('warning', 'ball-interface', `views[${vi}].present`, [id], `${q(id)} is not an interface: view ${JSON.stringify(view.id)} does not draw it as a ball`); }); }
+  return out;
+}
+
+/* ---- describe(): the view in sentences, each element by its accessible name in reading order, then each line ---- */
+function cpDescribe(model, viewId) {
+  const v = CP_ARR(model && model.views).find(x => CP_OBJ(x) && x.id === viewId); if (!v) throw new Error(`umlimator: no view ${JSON.stringify(viewId)}`);
+  const pic = cpPic(model, v), by = new Map(pic.lines.map(l => [l.e.id, l]));
+  return [`${v.title || v.id}: a component diagram of ${cpPlural(pic.ids.length, 'element')} and ${cpPlural(pic.lines.length, 'line')}.`,
+    ...cpOrder(pic).map(id => (by.has(id) ? cpLineName(pic, by.get(id)) : cpNodeName(model, v, pic, id)) + '.')].join('\n');
+}
+
+/* ---- editing (§12) ---- */
+const cpNewId = (model, base) => { const used = new Set(); JSON.stringify(model, (k, v) => { if (k === 'id' && typeof v === 'string') used.add(v); return v; });
+  let k = 1; while (used.has(base + k)) k++; return base + k; };
+// a port's row: `name` or `name : Type`
+const cpPortText = t => { const s = String(t ?? ''), k = s.indexOf(':'), [name, type] = (k < 0 ? [s] : [s.slice(0, k), s.slice(k + 1)]).map(x => x.trim()); return name ? { label: name, valueType: type || undefined } : { error: 'A port has a name: name or name : Type' }; };
+const cpPortPrint = m => `${m.label ?? ''}${CP_HAS(cpProps(m).valueType) ? ' : ' + cpProps(m).valueType : ''}`;
+// connect: a connector between a port (or component) and one inside its owner is a delegation, else an assembly
+function cpConnect(model, view, from, to, at, line) {
+  if (!CP_OBJ(line) || line.type !== 'uml.Connector') return null;
+  const I = cpIndex(model), within = (a, b) => I.chain(I.comp(a)).includes(I.comp(b));
+  if (I.comp(from) === I.comp(to)) return { error: 'A connector joins two elements' };
+  const kind = within(from, to) || within(to, from) ? 'delegation' : 'assembly';
+  if (kind === 'delegation' && !I.P.has(within(to, from) ? from : to)) return { error: 'Delegate from a port of the box' }; // drawn only from its port (cpPic)
+  return [{ op: 'add', element: { id: cpNewId(model, 'connector'), type: 'uml.Connector', from, to, props: { kind } }, view: view.id }];
+}
+// a port dropped, or Alt + arrows on it: its side, as present.<port>.side (§4.5); along its own side, nothing, as said
+function cpMoveTo(model, view, id, at) {
+  const I = cpIndex(model); if (!I.P.has(id) || !CP_OBJ(at)) return null;
+  const g = CP_OBJ(at.geo) ? at.geo : {}, me = CP_OWN(g.byId, id), o = CP_OWN(g.byId, I.P.get(id).owner) || CP_ARR(g.families).find(f => f.id === I.P.get(id).owner);
+  let s = null;
+  if (Array.isArray(at.by)) { const [dx, dy] = at.by, v = me && (me.side === 'L' || me.side === 'R');
+    if (me && (v ? dy && !dx : dx && !dy)) return { commands: [], say: 'A port\'s order along its side follows its lines: Alt + arrows across it moves it to another side' };
+    s = dx < 0 ? 'L' : dx > 0 ? 'R' : dy < 0 ? 'T' : dy > 0 ? 'B' : null; }
+  else if (Array.isArray(at.pt) && o) { const [x, y] = at.pt, d = { L: Math.abs(x - o.x), R: Math.abs(x - o.x - o.w), T: Math.abs(y - o.y), B: Math.abs(y - o.y - o.h) };
+    s = Object.keys(d).reduce((a, b) => (d[b] < d[a] ? b : a)); }
+  return s ? [{ op: 'set', view: view.id, path: ['present', id, 'side'], value: CP_SIDE[s] }] : null;
+}
+// the palette: a port into the selected component; an interface as a ball or a rectangle, picked
+function cpAdd(model, view, entry, label, at) {
+  const I = cpIndex(model), sel = CP_ARR(at && at.sel).map(id => (I.P.has(id) ? I.P.get(id).owner : id)).find(id => ['uml.Component', 'uml.Class'].includes((I.N.get(id) || {}).type));
+  if (entry.type === 'uml.Port') return sel ? [{ op: 'add', element: { id: cpNewId(model, 'port'), type: 'uml.Port', ...(label ? { label } : {}) }, owner: sel }] : { error: 'Select a component to add a port to' };
+  if (entry.type !== 'uml.Interface') return null;
+  const id = cpNewId(model, 'interface'), add = { op: 'add', element: { id, type: 'uml.Interface', ...(label ? { label } : {}) }, view: view.id };
+  return { pick: ['Ball', 'Rectangle'], then: i => (i === 0 ? [add, { op: 'set', view: view.id, path: ['present', id, 'as'], value: 'ball' }] : [add]) };
+}
+// the panel's member rows on a component: a port, `name` or `name : Type` (§12.1). A class has no rows here (member.holds): its ports come from the palette
+function cpMember(model, view, owner, id, text) {
+  const I = cpIndex(model); if ((I.N.get(owner) || {}).type !== 'uml.Component') return null;
+  const r = cpPortText(text); if (r.error) return r;
+  if (id == null) return [{ op: 'add', element: { id: cpNewId(model, 'port'), type: 'uml.Port', label: r.label, ...(r.valueType ? { props: { valueType: r.valueType } } : {}) }, owner }];
+  return [{ op: 'set', id, path: 'label', value: r.label }, { op: 'set', id, path: 'props.valueType', value: r.valueType }];
+}
+// B on an interface: a ball, or back to a rectangle (S11)
+function cpKey(model, view, ids, key) {
+  if (key !== 'b' && key !== 'B') return null;
+  const I = cpIndex(model), its = ids.filter(id => (I.N.get(id) || {}).type === 'uml.Interface'); if (!its.length) return null;
+  return its.map(id => ({ op: 'set', view: view.id, path: ['present', id, 'as'], value: cpBall(I, view, id) ? undefined : 'ball' }));
+}
+// Delete on a port: a member is not hidden, it is deleted from the model, as said (§12.2, S20)
+// the rest of a mixed selection as the canvas's default (src/canvas/edit.js): hidden, or deleted when it lives in this view only
+function cpRemove(model, view, ids, fromModel) {
+  const I = cpIndex(model), ps = ids.filter(id => I.P.has(id)); if (!ps.length) return null;
+  const own = new Set([...CP_ARR(view.nodes), ...CP_ARR(view.edges)].filter(CP_OBJ).map(x => x.id)), lines = new Set(CP_ARR(model.edges).filter(CP_OBJ).map(e => e.id));
+  const rest = ids.filter(id => !I.P.has(id) && (fromModel || own.has(id) || !lines.has(id) || Array.isArray(view.edges))); // a line of a view listing none: not hidden, as the default
+  const hid = fromModel ? 0 : rest.filter(id => !own.has(id)).length;
+  return { commands: [...ps, ...rest].map(id => (fromModel || own.has(id) || I.P.has(id) ? { op: 'delete', id } : { op: 'hide', id, view: view.id })),
+    say: `Deleted ${ps.length === 1 ? 'port ' + cpName(I.P.get(ps[0]).x) : cpPlural(ps.length, 'port')} from the model${fromModel ? '' : ': a port is not hidden from a view'}${hid ? `; hid ${cpPlural(hid, 'element')}` : ''}` };
+}
+// the Owner field: a component's components and packages; an interface's, an artifact's or a comment's packages
+function cpOwners(model, x) {
+  if (!CP_OBJ(x) || x.from != null || !['uml.Component', 'uml.Interface', 'uml.Artifact', 'uml.Package', 'uml.Comment'].includes(x.type)) return null;
+  const kinds = x.type === 'uml.Component' ? ['uml.Component', 'uml.Package'] : ['uml.Package'];
+  const I = cpIndex(model); // not itself nor what it holds: apply() refuses a move inside itself
+  return CP_ARR(model.nodes).filter(n => CP_OBJ(n) && kinds.includes(n.type) && n.id !== x.id && !I.chain(n.id).includes(x.id)).map(n => ({ id: n.id, label: cpName(n) }));
+}
+
+const CP_STEREO = { key: 'stereotypes', label: 'Stereotypes', kind: 'list' };
+const CP_TYPE = registerDiagramType('uml.component', {
+  title: 'component diagram',
+  elements: [['Component', 'Component'], ['Interface', 'Interface'], ['Artifact', 'Artifact'], ['Package', 'Package'], ['Port', 'Port'], ['Comment', 'Comment']].map(([t, label]) => ({ type: 'uml.' + t, label })),
+  lines: [['InterfaceRealization', 'Realization'], ['ComponentRealization', 'Component realization'], ['Usage', 'Usage'], ['Connector', 'Assembly', 'assembly'], ['Connector', 'Delegation', 'delegation'],
+    ['Dependency', 'Dependency'], ['Manifestation', 'Manifestation'], ['CommentLink', 'Comment link']].map(([t, label, kind]) => ({ type: 'uml.' + t, label, ...(kind ? { props: { kind } } : {}) })),
+  props: {
+    'uml.Component': [CP_STEREO], 'uml.Interface': [CP_STEREO], 'uml.Artifact': [CP_STEREO], 'uml.Package': [CP_STEREO], 'uml.Port': [{ key: 'valueType', label: 'Type', kind: 'text' }, CP_STEREO],
+    'uml.Connector': [{ key: 'kind', label: 'Kind', kind: 'enum', options: ['assembly', 'delegation'] }, CP_STEREO],
+    'uml.InterfaceRealization': [CP_STEREO], 'uml.ComponentRealization': [CP_STEREO], 'uml.Usage': [CP_STEREO], 'uml.Dependency': [CP_STEREO], 'uml.Manifestation': [CP_STEREO], 'uml.CommentLink': [],
+  },
+  layout: Object.assign(cpGeo, { rank: false }), // cpGeo ranks the view itself (cpPlace): the host passes only the pins
+  boxes: (model, view) => cpPic(model, view).boxes,
+  owners: cpOwners,
+  // a component's rows are its ports (edits.member reads them first); an interface's its operations, as the class type's
+  member: { print: m => (m.type === 'uml.Port' ? cpPortPrint(m) : printMember(m)), edit: (m, t) => (m.type === 'uml.Port' ? { error: 'A port is edited on its component' } : memberEdit(m, t)), add: t => parseMember(String(t ?? '').trim()),
+    holds: n => n.type === 'uml.Component' || n.type === 'uml.Interface' },
+  validate: cpProblems,
+  rules: CP_RULES,
+  describe: cpDescribe,
+  edits: { connect: cpConnect, moveTo: cpMoveTo, add: cpAdd, member: cpMember, key: cpKey, remove: cpRemove },
+  // the PDF's tables (§11): a component's ports, each with what it provides and requires; an interface's operations; what an artifact manifests
+  word: (model, id) => { const x = cpIndex(model).N.get(id); return x ? ({ 'uml.Component': 'Component', 'uml.Interface': 'Interface', 'uml.Artifact': 'Artifact', 'uml.Package': 'Package', 'uml.Comment': 'Comment' }[x.type] || null) : null; },
+  rows: (model, view, id) => { const pic = cpPic(model, view), x = pic.I.N.get(id); if (!x) return null;
+    if (x.type === 'uml.Component') return cpPortsOf(x).map(p => cpNodeName(model, view, pic, p.id).replace(/^Port /, '').replace(` of ${pic.name(id)}`, ''));
+    if (x.type === 'uml.Interface') return CP_ARR(x.members).filter(CP_OBJ).map(printMember);
+    if (x.type === 'uml.Artifact') return pic.lines.filter(l => l.e.type === 'uml.Manifestation' && l.e.from === id).map(l => `manifests ${pic.name(l.e.to)}`);
+    return null; },
+});
+/* ---------- the deployment diagram, uml.deployment (work package 5.5, notes/stage-5.md §10.3) ----------
+   Nodes, devices and execution environments (UML's cube: a front face with a top and a right face 10 px deep), each a box
+   when it holds something shown, nested to any depth; artifacts and deployment specifications (src/uml/structure.js's
+   artifact), deployed by nesting or by a «deploy» line; components, what an artifact manifests (the component look);
+   communication paths with their labels, dependencies and comments. Laid out by layoutTyped from the host's ranking with a
+   small gap, gapAfter's per-column widening, labelGaps and paths cut at 280 px (§8); repair and reroute off (§14). A cube
+   box's frame holds its faces (10 px more padding), so the layout and check() see them; a line ending on its outline's
+   slanted corner is drawn on to it, on a copy (§2.4). Ships in lib/umlimator-all.js only. */
+
+const DP_OBJ = x => x !== null && typeof x === 'object' && !Array.isArray(x), DP_ARR = x => (Array.isArray(x) ? x : []);
+const DP_HAS = x => x != null && x !== '';
+const dpName = x => String(x.label ?? x.id);
+const dpStereo = x => DP_ARR(DP_OBJ(x.props) ? x.props.stereotypes : null).filter(DP_HAS).map(String);
+const dpPlural = (k, w) => `${k} ${k === 1 ? w : w + 's'}`;
+const DP_TARGETS = ['uml.Node', 'uml.Device', 'uml.ExecutionEnvironment'], DP_ARTIFACTS = ['uml.Artifact', 'uml.DeploymentSpecification'];
+const DP_LINES = ['uml.Deployment', 'uml.Manifestation', 'uml.CommunicationPath', 'uml.Dependency', 'uml.CommentLink'];
+const DP_WORD = { 'uml.Node': 'Node', 'uml.Device': 'Device', 'uml.ExecutionEnvironment': 'Execution environment', 'uml.Artifact': 'Artifact',
+  'uml.DeploymentSpecification': 'Deployment specification', 'uml.Component': 'Component', 'uml.Comment': 'Comment' };
+const dpWord = x => (Object.hasOwn(DP_WORD, x.type) ? DP_WORD[x.type] : String(x.type ?? '').split('.').pop());
+const DP_KW = { 'uml.Device': 'device', 'uml.ExecutionEnvironment': 'executionEnvironment' };
+
+/* ---- the cube (§9.1): SHAPE.node's outline and inset, 10 px deep, in the typed look's paint; closed a node, open a frame ---- */
+const DP = { d: 10, pad: 10, name: 12, nlh: 16, st: 11, sth: 14, minW: 120, maxW: 320, minH: 60 };
+const dpParts = n => { const st = [...(DP_KW[n.type] ? [DP_KW[n.type]] : []), ...DP_ARR(n.stereotypes)].map(t => `«${t}»`), name = String(n.label ?? '');
+  return { st, name, w: Math.ceil(Math.min(DP.maxW, Math.max(DP.minW, ...st.map(t => textW(t, DP.st) + 2 * DP.pad), textW(name, DP.name) + 2 * DP.pad)) + DP.d),
+    h: Math.max(DP.minH, DP.d + 16 + st.length * DP.sth + DP.nlh) }; };
+const dpOut = (n, g = 0) => { const p = DP.d, x = n.x - g, y = n.y - g, w = n.w + 2 * g, h = n.h + 2 * g;
+  return `M${r2(x)} ${r2(y + p)}L${r2(x + p)} ${r2(y)}H${r2(x + w)}V${r2(y + h - p)}L${r2(x + w - p)} ${r2(y + h)}H${r2(x)}Z`; };
+const dpText = (x, y, t, px, wt, fill, cls, more = '') => `<text x="${r2(x)}" y="${r2(y)}" text-anchor="middle" class="${cls}"${more} fill="${fill}" style="font:${wt} ${px}px var(--um-sans)">${esc(t)}</text>`;
+SHAPE.cube = {
+  size: n => { const p = dpParts(n); return { w: p.w, h: p.h }; },
+  out: dpOut, face: n => [n.y + DP.d, n.y + n.h],
+  inset(n, s, t) { const p = DP.d; return s === 'L' ? Math.max(0, n.y + p - t) : s === 'R' ? Math.max(0, t - n.y - n.h + p) : s === 'T' ? Math.max(0, n.x + p - t) : Math.max(0, t - n.x - n.w + p); },
+  draw(n) {
+    const { x, y, w, h } = n, p = DP.d, P = dpParts(n), cx = x + (w - p) / 2, max = w - p - 2 * DP.pad;
+    let ty = y + p + (h - p - P.st.length * DP.sth - DP.nlh) / 2;
+    const tx = P.st.map(t => { const s = dpText(cx, ty + 11, fit(t, DP.st, max), DP.st, 400, 'var(--um-muted)', 'c-st'); ty += DP.sth; return s; });
+    tx.push(dpText(cx, ty + 12, fit(P.name, DP.name, max), DP.name, 600, 'var(--um-text)', 'c-name', ` data-o="${esc(n.id)}"`));
+    return `<g class="node cube" data-id="${esc(n.id)}" data-shape="cube" tabindex="-1" role="img" aria-label="${esc(n.aria || `${dpWord(n)} ${n.label ?? ''}`)}">`
+      + `<path d="${dpOut(n)}" class="n-mask"/><path d="${dpOut(n)}" class="n-body" fill="var(--um-stage-bg)" stroke="var(--um-muted)"/>`
+      + `<path d="M${r2(x)} ${r2(y + p)}H${r2(x + w - p)}V${r2(y + h)}M${r2(x + w - p)} ${r2(y + p)}L${r2(x + w)} ${r2(y)}" class="n-det" fill="none" stroke="var(--um-muted)"/>`
+      + `<g class="c-head" data-band="${r2(y + p)} ${r2(y + h)}">${tx.join('')}</g></g>`;
+  },
+  // open: the frame holds the cube as a closed one does (its pad is 10 px more, dpPic), the front face its rect, the top and
+  // right faces inside the frame; the keyword, stereotypes and name (the box's title) at the top left of its 24 px header room
+  frame: f => { const p = DP.d, { x, y, w, h } = f;
+    return `<rect class="family-box" x="${x}" y="${r2(y + p)}" width="${r2(w - p)}" height="${r2(h - p)}" stroke="var(--um-muted)"/>`
+      + `<path d="M${r2(x)} ${r2(y + p)}L${r2(x + p)} ${r2(y)}H${r2(x + w)}V${r2(y + h - p)}L${r2(x + w - p)} ${r2(y + h)}M${r2(x + w - p)} ${r2(y + p)}L${r2(x + w)} ${r2(y)}" class="dp-face" fill="none" stroke="var(--um-muted)"/>`
+      + `<text class="family-title" x="${r2(x + 12)}" y="${r2(y + p + 17)}" fill="var(--um-text)" style="font:600 12px var(--um-sans)" data-t="ft" data-o="${esc(f.id)}">${esc(fit(f.title ?? f.label ?? f.id, 12, w - p - 24))}</text>`; },
+};
+
+/* ---- the view read: its boxes (§7), its lines, and every element's words ---- */
+const DP_LOOK = { boxTypes: DP_TARGETS, qualify: false, shape: () => 'cube', word: dpWord };
+function dpIndex(model) {
+  const at = new Map(); DP_ARR(model && model.nodes).forEach(n => { if (DP_OBJ(n) && typeof n.id === 'string' && !at.has(n.id)) at.set(n.id, n); });
+  const E = DP_ARR(model && model.edges).filter(e => DP_OBJ(e) && typeof e.id === 'string');
+  const into = (t, id) => E.filter(e => e.type === t && e.to === id), outOf = (t, id) => E.filter(e => e.type === t && e.from === id);
+  // what is deployed on a target: the artifacts it owns, then those a «deploy» line brings, each once
+  const deployed = id => [...new Set([...[...at.values()].filter(n => n.parent === id && DP_ARTIFACTS.includes(n.type)).map(n => n.id), ...into('uml.Deployment', id).map(e => e.from).filter(x => at.has(x) && DP_ARTIFACTS.includes(at.get(x).type))])];
+  // does a hold b, at any depth
+  const holds = (a, b) => { for (let p = (at.get(b) || {}).parent, seen = new Set(); p != null && !seen.has(p); p = (at.get(p) || {}).parent) { if (p === a) return true; seen.add(p); } return false; };
+  return { at, E, into, outOf, deployed, holds };
+}
+// the view's boxes, each titled with its keyword and stereotypes and named as §10.3 says
+function dpPic(model, view) {
+  const pic = ownersOn(model, view, DP_LOOK), I = dpIndex(model);
+  const boxes = pic.boxes.map(b => { const x = pic.at.get(b.id); return { ...b, title: [...[...(DP_KW[x.type] ? [DP_KW[x.type]] : []), ...dpStereo(x)].map(t => `«${t}»`), dpName(x)].join(' '), aria: dpNodeName(x, pic, I), pad: 12 + DP.d }; });
+  return { ...pic, I, boxes };
+}
+// the lines drawn: those the view lists, or with no list the model's of this type's kinds, between two elements it shows; a
+// line from a box to what it holds is left out (the router refuses it)
+function dpLines(model, view, pic) {
+  const E = new Map(pic.I.E.map(e => [e.id, e])), shown = new Set(pic.ids), list = Array.isArray(view.edges) ? view.edges.map(x => (typeof x === 'string' ? E.get(x) : x)) : pic.I.E.filter(e => DP_LINES.includes(e.type));
+  return list.filter(e => DP_OBJ(e) && typeof e.id === 'string' && shown.has(e.from) && shown.has(e.to)
+    && ![[e.from, e.to], [e.to, e.from]].some(([b, x]) => pic.open.has(b) && (b === x || pic.chain(x).includes(b))));
+}
+const DP_KEYWORD = { 'uml.Deployment': '«deploy»', 'uml.Manifestation': '«manifest»' };
+const dpLineLabel = e => [DP_KEYWORD[e.type], ...dpStereo(e).map(t => `«${t}»`), e.label].filter(DP_HAS).join(' ');
+const DP_LINE_LOOK = { 'uml.Deployment': { from: 'none', to: 'open', dashed: true }, 'uml.Manifestation': { from: 'none', to: 'open', dashed: true },
+  'uml.CommunicationPath': { from: 'none', to: 'none' }, 'uml.Dependency': { from: 'none', to: 'open', dashed: true }, 'uml.CommentLink': { from: 'none', to: 'none', dashed: true } };
+const DP_LINE_WORD = { 'uml.Deployment': 'Deployment', 'uml.Manifestation': 'Manifestation', 'uml.CommunicationPath': 'Communication path', 'uml.Dependency': 'Dependency', 'uml.CommentLink': 'Comment link' };
+// accessible names (§10.3): "Device Application server, holding 1 execution environment"; "Execution environment Java 21 runtime,
+// in Application server, 3 artifacts deployed"; "Artifact shop-api.jar, on Java 21 runtime, manifests Shop API"
+function dpNodeName(n, pic, I) {
+  if (n.type === 'uml.Comment') return 'Comment: ' + dpName(n);
+  const nm = id => dpName(I.at.get(id)), st = dpStereo(n), up = n.parent != null && I.at.get(n.parent);
+  if (DP_ARTIFACTS.includes(n.type)) return SN_SAY.artifact(dpName(n), { spec: n.type === 'uml.DeploymentSpecification',
+    on: [...new Set([...(up && DP_TARGETS.includes(up.type) ? [up.id] : []), ...I.outOf('uml.Deployment', n.id).map(e => e.to).filter(x => I.at.has(x))])].map(nm).join(', ') || null,
+    manifests: I.outOf('uml.Manifestation', n.id).map(e => e.to).filter(x => I.at.has(x)).map(nm) });
+  if (n.type === 'uml.Component') return SN_SAY.component(dpName(n), { stereotypes: st });
+  const out = [`${dpWord(n)} ${dpName(n)}${st.length ? ` (${st.join(', ')})` : ''}`];
+  if (!DP_TARGETS.includes(n.type)) return out[0];
+  if (up && pic.ids.includes(up.id)) out.push(`in ${dpName(up)}`);
+  const k = new Map(); pic.holds(n.id).map(id => I.at.get(id)).filter(x => !DP_ARTIFACTS.includes(x.type)).forEach(x => { const w = dpWord(x).toLowerCase(); k.set(w, (k.get(w) || 0) + 1); });
+  if (k.size) out.push('holding ' + [...k].map(([w, c]) => dpPlural(c, w)).join(', '));
+  const d = I.deployed(n.id).length; if (d) out.push(`${dpPlural(d, 'artifact')} deployed`);
+  return out.join(', ');
+}
+// "Communication path HTTPS from Shopper's device to Edge proxy"; "Deployment from routes.conf to Edge proxy"
+function dpLineName(e, pic) {
+  const nm = id => dpName(pic.at.get(id)), word = Object.hasOwn(DP_LINE_WORD, e.type) ? DP_LINE_WORD[e.type] : 'Line', said = [...dpStereo(e).map(t => `«${t}»`), e.label].filter(DP_HAS).join(' ');
+  return e.type === 'uml.CommunicationPath' ? `${word} ${said ? said + ' ' : ''}from ${nm(e.from)} to ${nm(e.to)}` : `${word} from ${nm(e.from)} to ${nm(e.to)}${said ? ': ' + said : ''}`;
+}
+
+/* ---- the legend: each line kind drawn. ponytail: copies class.js's legendItem and ends, which it does not export ---- */
+const DP_ENDS = { none: '', open: '<path d="M17 4L26 8L17 12" fill="none"/>' };
+const DP_SAYS = { 'uml.Deployment': '«deploy»: the artifact runs on the target', 'uml.Manifestation': '«manifest»: the artifact is built from the component',
+  'uml.CommunicationPath': 'the two exchange messages', 'uml.Dependency': 'uses the one it points to', 'uml.CommentLink': 'what a comment is about' };
+const dpLegend = edges => DP_LINES.filter(t => edges.some(e => e.type === t)).map(t => { const L = DP_LINE_LOOK[t], name = DP_LINE_WORD[t], says = DP_SAYS[t];
+  return `<span class="lgi" title="${esc(name + ' — ' + says)}"><svg class="lgs" viewBox="0 0 28 16" aria-hidden="true"><g stroke="var(--um-muted)" stroke-width="1.4" stroke-linejoin="round"><path d="M2 8H${L.to === 'none' ? 26 : 17}"${L.dashed ? ' stroke-dasharray="3 2"' : ''}/>${DP_ENDS[L.to]}</g></svg><b>${esc(name)}</b><span>${esc(says)}</span></span>`; });
+
+/* ---- the view laid out (§10.3) ---- */
+// on a copy: a label left over a cube box's front face's top or right line (in the box's padding, where check() does not
+// look) slides along its line inward, clear of it, if its line runs on that far; families come outermost first
+function dpOffFace(e, fams) {
+  if (!e.lbl || !e.pts) return e;
+  let L = e.lbl;
+  for (const f of fams) for (const k of [1, 0]) { // 1: the top line, y = f.y + 10; 0: the right line, x = f.x + f.w - 10
+    const at = k ? f.y + DP.d : f.x + f.w - DP.d, o = 1 - k, lo = [L.x, L.y][k], len = [L.w, L.h][k], c = [L.x + L.w / 2, L.y + L.h / 2];
+    if (!(lo < at && at < lo + len) || c[o] < (o ? f.y + DP.d : f.x) || c[o] > (o ? f.y + f.h : f.x + f.w - DP.d)) continue;
+    const to = k ? at + 2 : at - 2 - len, nc = to + len / 2; // the label's new start along its line, and its centre
+    const run = e.pts.slice(1).some((q, i) => { const p = e.pts[i]; return Math.abs(p[o] - c[o]) < .5 && Math.abs(q[o] - c[o]) < .5 && Math.min(p[k], q[k]) <= Math.min(c[k], nc) && Math.max(p[k], q[k]) >= Math.max(c[k], nc); });
+    if (run) L = { ...L, [k ? 'y' : 'x']: to };
+  }
+  return L === e.lbl ? e : { ...e, lbl: L };
+}
+function dpGeo({ model, view, pos, memo }) {
+  const pic = dpPic(model, view), lines = dpLines(model, view, pic), P = id => (DP_OBJ(pos) && Object.hasOwn(pos, id) ? pos[id] : [0, 0]);
+  const nodes = pic.ids.filter(id => !pic.open.has(id)).map(id => { const n = pic.at.get(id), st = dpStereo(n);
+    const shape = n.type === 'uml.Comment' ? 'note' : DP_TARGETS.includes(n.type) ? 'cube' : DP_ARTIFACTS.includes(n.type) ? 'artifact' : n.type === 'uml.Component' ? 'component' : 'classifier';
+    const d = { id, label: dpName(n), type: n.type || 'uml.Node', kind: 'file', shape, stereotypes: st, ...(shape === 'classifier' ? { compartments: [] } : {}), aria: dpNodeName(n, pic, pic.I), col: P(id)[0], row: P(id)[1] };
+    return { ...d, ...SHAPE[shape].size(d) }; });
+  const edges = lines.map(e => { const label = dpLineLabel(e);
+    return { id: e.id, _id: e.id, type: e.type, from: e.from, to: e.to, label: label || undefined, end: Object.hasOwn(DP_LINE_LOOK, e.type) ? DP_LINE_LOOK[e.type] : { from: 'none', to: 'arrow' }, aria: dpLineName(e, pic),
+      ...(e.type === 'uml.CommunicationPath' ? { cut: 280 } : {}), ...(DP_OBJ(e.style) || typeof e.style === 'string' ? { style: e.style } : {}) }; });
+  // a small gap with gapAfter's widening, and labelGaps for a label left with no spot (§8, decision 9); stage 2's 12 px padding:
+  // a deployment view has no ports (§7)
+  const g = layoutTyped({ nodes, edges, ...(pic.boxes.length ? { containers: pic.boxes } : {}), direction: view.direction === 'down' ? 'down' : 'right',
+    gap: 48, rgap: 56, labelGaps: true, repair: false, reroute: false }, memo);
+  // on a copy: a line's end on a cube box's slanted corner goes in on to it, as SHAPE.cube.inset does for a closed cube
+  const fams = new Map((g.families || []).map(f => [f.id, f])), at = (f, s, p) => (f && s ? SHAPE.cube.inset(f, s, s === 'T' || s === 'B' ? p[0] : p[1]) : 0);
+  const out = g.edges.map(e => { const da = e.pts && at(fams.get(e.from), e.fs, e.pts[0]), db = e.pts && at(fams.get(e.to), e.ts, e.pts.at(-1));
+    if (!da && !db) return e;
+    const pts = e.pts.map(p => p.slice()), mv = (p, s, k) => { p[s === 'T' || s === 'B' ? 1 : 0] += s === 'T' || s === 'L' ? k : -k; };
+    if (da) mv(pts[0], e.fs, da); if (db) mv(pts[pts.length - 1], e.ts, db); return { ...e, pts }; }).map(e => dpOffFace(e, g.families || []));
+  return { ...g, edges: out, legend: dpLegend(g.edges), order: [...readingOrder(pic), ...lines.map(e => e.id)] }; // a new object: what layoutTyped returned is never edited (§2.4)
+}
+
+/* ---- validators (§10.3). Each problem: { level, rule, path, message, ids } ---- */
+const DP_RULES = {
+  'deploy-ends': 'a deployment runs from an artifact or deployment specification to a node, device or execution environment',
+  'deployed-twice': 'an artifact nested in one target is not also deployed by a line to another',
+  'nest-kinds': 'a node, device or execution environment is owned by one of the three (an error), in a usual pair (a warning): an execution environment in any, a device in a node or a device, a node in a node',
+  'path-ends': 'a communication path joins two nodes, devices or execution environments, neither holding the other',
+  'manifest-ends': 'a manifestation runs from an artifact (an error), to a component (a warning)',
+};
+const DP_USUAL = { 'uml.ExecutionEnvironment': DP_TARGETS, 'uml.Device': ['uml.Node', 'uml.Device'], 'uml.Node': ['uml.Node'] };
+function dpProblems(model, view) {
+  const out = [], I = dpIndex(model), say = (level, rule, path, ids, msg) => out.push({ level, rule, path, ids: ids.filter(x => x != null), message: `${rule}: ${msg}` });
+  const ty = id => (I.at.get(id) || {}).type, q = id => JSON.stringify(I.at.has(id) ? dpName(I.at.get(id)) : String(id)), kind = id => (I.at.has(id) ? dpWord(I.at.get(id)).toLowerCase() : 'nothing');
+  const a = id => (/^[aeiou]/.test(kind(id)) ? 'an ' : 'a ') + kind(id);
+  DP_ARR(model && model.nodes).forEach((n, i) => { if (!DP_OBJ(n) || !DP_TARGETS.includes(n.type) || n.parent == null || !I.at.has(n.parent)) return;
+    const p = I.at.get(n.parent);
+    if (!DP_TARGETS.includes(p.type)) say('error', 'nest-kinds', `nodes[${i}].parent`, [n.id, p.id], `${q(n.id)}, ${a(n.id)}, is owned by ${q(p.id)}, ${a(p.id)}: its owner is a node, a device or an execution environment`);
+    else if (!DP_USUAL[n.type].includes(p.type)) say('warning', 'nest-kinds', `nodes[${i}].parent`, [n.id, p.id], `${q(n.id)}, ${a(n.id)}, is in ${q(p.id)}, ${a(p.id)}: an unusual pair`); });
+  DP_ARR(model && model.edges).forEach((e, i) => { if (!DP_OBJ(e)) return; const path = `edges[${i}]`, ends = [e.id, e.from, e.to];
+    if (e.type === 'uml.Deployment') {
+      if (!DP_ARTIFACTS.includes(ty(e.from)) || !DP_TARGETS.includes(ty(e.to))) say('error', 'deploy-ends', path, ends, `${e.id} runs from ${q(e.from)} (${kind(e.from)}) to ${q(e.to)} (${kind(e.to)}): from an artifact or deployment specification to a node, device or execution environment`);
+      else { const a = I.at.get(e.from); if (a.parent != null && DP_TARGETS.includes(ty(a.parent)) && a.parent !== e.to)
+        say('warning', 'deployed-twice', path, [e.id, e.from, a.parent, e.to], `${q(e.from)} is nested in ${q(a.parent)} and deployed by ${e.id} to ${q(e.to)} as well`); } }
+    if (e.type === 'uml.CommunicationPath' && (!DP_TARGETS.includes(ty(e.from)) || !DP_TARGETS.includes(ty(e.to)) || e.from === e.to || I.holds(e.from, e.to) || I.holds(e.to, e.from)))
+      say('error', 'path-ends', path, ends, `${e.id} joins ${q(e.from)} (${kind(e.from)}) and ${q(e.to)} (${kind(e.to)}): a communication path joins two nodes, devices or execution environments`); });
+  return [...out, ...structProblems(model, view).filter(p => p.rule === 'manifest-ends')];
+}
+
+/* ---- describe(): the view in sentences, each element by its accessible name in reading order, then each line ---- */
+function dpDescribe(model, viewId) {
+  const v = DP_ARR(model && model.views).find(x => DP_OBJ(x) && x.id === viewId); if (!v) throw new Error(`umlimator: no view ${JSON.stringify(viewId)}`);
+  const pic = dpPic(model, v), lines = dpLines(model, v, pic), by = new Map(lines.map(e => [e.id, e]));
+  return [`${v.title || v.id}: a deployment diagram of ${dpPlural(pic.ids.length, 'element')} and ${dpPlural(lines.length, 'line')}.`,
+    ...[...readingOrder(pic), ...lines.map(e => e.id)].map(id => (by.has(id) ? dpLineName(by.get(id), pic) : dpNodeName(pic.at.get(id), pic, pic.I)) + '.')].join('\n');
+}
+
+/* ---- editing (§12) ---- */
+// the Owner field: an artifact's, a deployment specification's or a target's: every node, device and execution environment by
+// its name (the core leaves out the element and what it holds)
+function dpOwners(model, x) {
+  if (!DP_OBJ(x) || x.from != null || ![...DP_TARGETS, ...DP_ARTIFACTS].includes(x.type)) return null;
+  return DP_ARR(model.nodes).filter(n => DP_OBJ(n) && DP_TARGETS.includes(n.type)).map(n => ({ id: n.id, label: dpName(n) }));
+}
+// connect: a deployment drawn from a target to an artifact, or a manifestation from a component to an artifact, is added from
+// the artifact; a deployment or a communication path between ends it cannot join, or any line between a box and what it holds
+// (never drawn, dpLines), is refused, said on the hint line
+function dpConnect(model, view, from, to, at, line) {
+  const I = dpIndex(model), ty = id => (I.at.get(id) || {}).type, t = DP_OBJ(line) ? line.type : null;
+  if (I.holds(from, to) || I.holds(to, from)) { const [o, x] = I.holds(from, to) ? [from, to] : [to, from], nm = id => dpName(I.at.get(id));
+    return { error: t === 'uml.Deployment' && DP_ARTIFACTS.includes(ty(x)) ? `${nm(x)} is already deployed on ${nm(o)} by nesting` : `A ${(DP_LINE_WORD[t] || 'line').toLowerCase()} cannot join a node and what it holds` }; }
+  const flip = (t === 'uml.Deployment' && DP_TARGETS.includes(ty(from)) && DP_ARTIFACTS.includes(ty(to))) || (t === 'uml.Manifestation' && ty(from) === 'uml.Component' && DP_ARTIFACTS.includes(ty(to)));
+  if (t === 'uml.Deployment' && !flip && !(DP_ARTIFACTS.includes(ty(from)) && DP_TARGETS.includes(ty(to)))) return { error: 'A deployment runs from an artifact to a node, a device or an execution environment' };
+  if (t === 'uml.CommunicationPath' && (!DP_TARGETS.includes(ty(from)) || !DP_TARGETS.includes(ty(to)) || from === to)) return { error: 'A communication path joins two nodes, devices or execution environments' };
+  if (!flip) return null;
+  const used = new Set(); JSON.stringify(model, (k, v) => { if (k === 'id' && typeof v === 'string') used.add(v); return v; });
+  const base = t === 'uml.Deployment' ? 'deployment' : 'manifestation'; let k = 1; while (used.has(base + k)) k++;
+  return [{ op: 'add', element: { id: base + k, type: t, from: to, to: from }, view: view.id }];
+}
+// remove: a target deleted from the model takes what it owns with it (apply()); the hint line counts what goes (§10.4)
+function dpRemove(model, view, ids, fromModel) {
+  const I = dpIndex(model), ts = fromModel ? ids.filter(id => DP_TARGETS.includes((I.at.get(id) || {}).type)) : [];
+  const under = id => { for (let p = (I.at.get(id) || {}).parent, seen = new Set(); p != null && !seen.has(p); p = (I.at.get(p) || {}).parent) { if (ts.includes(p)) return true; seen.add(p); } return false; };
+  const held = [...I.at.keys()].filter(id => !ids.includes(id) && under(id)).length;
+  if (!held) return null;
+  return { commands: ids.map(id => ({ op: 'delete', id })), say: `Deleted ${ts.length === 1 ? `${dpWord(I.at.get(ts[0])).toLowerCase()} ${dpName(I.at.get(ts[0]))}` : dpPlural(ts.length, 'target')} and the ${dpPlural(held, 'element')} ${ts.length === 1 ? 'it' : 'they'} held` };
+}
+
+/* ---- the type ---- */
+const DP_STEREO = { key: 'stereotypes', label: 'Stereotypes', kind: 'list' };
+const DP_TYPE = registerDiagramType('uml.deployment', {
+  title: 'deployment diagram',
+  elements: [['Node', 'Node'], ['Device', 'Device'], ['ExecutionEnvironment', 'Execution environment'], ['Artifact', 'Artifact'], ['DeploymentSpecification', 'Deployment specification'], ['Component', 'Component'], ['Comment', 'Comment']]
+    .map(([t, label]) => ({ type: 'uml.' + t, label })),
+  lines: [['Deployment', 'Deployment'], ['Manifestation', 'Manifestation'], ['CommunicationPath', 'Communication path'], ['Dependency', 'Dependency'], ['CommentLink', 'Comment link']].map(([t, label]) => ({ type: 'uml.' + t, label })),
+  props: Object.fromEntries([...DP_TARGETS, ...DP_ARTIFACTS, 'uml.Component', ...DP_LINES.filter(t => t !== 'uml.CommentLink')].map(t => [t, [DP_STEREO]]).concat([['uml.CommentLink', []]])),
+  layout: dpGeo,
+  boxes: (model, view) => dpPic(model, view).boxes,
+  owners: dpOwners,
+  validate: dpProblems,
+  rules: DP_RULES,
+  describe: dpDescribe,
+  // the PDF's tables (§11): an element's kind; a target's rows, what is deployed on it, by nesting or by a line; an artifact's, what it manifests
+  word: (model, id) => { const x = dpIndex(model).at.get(id); return x && Object.hasOwn(DP_WORD, x.type) ? DP_WORD[x.type] : null; },
+  rows: (model, view, id) => { const I = dpIndex(model), x = I.at.get(id), nm = k => dpName(I.at.get(k));
+    if (x && DP_TARGETS.includes(x.type)) return I.deployed(id).map(a => (I.at.get(a).parent === id ? nm(a) : `${nm(a)}, by «deploy»`));
+    if (x && DP_ARTIFACTS.includes(x.type)) return I.outOf('uml.Manifestation', id).filter(e => I.at.has(e.to)).map(e => `manifests ${nm(e.to)}`);
+    return null; },
+  edits: { connect: dpConnect, remove: dpRemove },
+});
+/* ---------- the composite structure diagram, uml.composite-structure (work package 5.6, notes/stage-5.md §6, §10.2) ----------
+   The view's subject (a class, a component or a collaboration, listed in nodeIds) is a box holding its parts (its uml.Property
+   members, drawn as nodes under their own ids) and its collaboration uses (shown nodes whose parent it is); its ports sit on the
+   box's border. A part shows the ports of the class or component its valueType names by label, and every port a connector
+   reaches through it (ends.<end>.part), each under the geometry id `<part>-><port>` (§6), its side under
+   present.<part>.ports.<port>.side. A connector from the subject's port to something inside is an inner line (§5). An open
+   collaboration is a dashed ellipse (a round box, §9.3) round its roles; role bindings run from a part to a collaboration use,
+   the role's name as the line's label (labelGaps, §10.2 as built). Ranked by the type itself (layout.rank false: the host passes the pins alone), then
+   laid out by layoutTyped with repair and reroute off (§14); the ports with no line, the port nodes and their names are put
+   on a copy (portsDrawn, src/uml/structure.js). Ships in lib/umlimator-all.js only. */
+
+const CS_OBJ = x => x !== null && typeof x === 'object' && !Array.isArray(x), CS_ARR = x => (Array.isArray(x) ? x : []);
+const CS_HAS = x => x != null && x !== '';
+const CS_PROPS = x => (CS_OBJ(x && x.props) ? x.props : {});
+const csName = x => String(x.label ?? x.id);
+const csPlural = (k, w) => `${k} ${k === 1 ? w : w + 's'}`;
+const csStereo = x => CS_ARR(CS_PROPS(x).stereotypes).filter(CS_HAS).map(String);
+const CS_SUBJECTS = ['uml.Class', 'uml.Component', 'uml.Collaboration'], CS_TYPED = ['uml.Class', 'uml.Component']; // a subject; what owns ports and types parts
+const CS_LINES = ['uml.Connector', 'uml.RoleBinding', 'uml.CommentLink'];
+const CS_WORD = { L: 'left', R: 'right', T: 'top', B: 'bottom' }, CS_SIDE = { left: 'L', right: 'R', top: 'T', bottom: 'B' }, CS_OPP = { L: 'R', R: 'L', T: 'B', B: 'T' }, CS_TURN = { L: 'T', T: 'L', R: 'B', B: 'R' };
+// a port on a part, by its geometry id (§6): no element id holds '->' (model.md rule 5)
+const csPortId = (part, port) => `${part}->${port}`;
+const csSplit = id => { const s = String(id), k = s.indexOf('->'); return k < 0 ? null : [s.slice(0, k), s.slice(k + 2)]; };
+
+/* ---- a part's text, `name : Type [multiplicity]`, both ways; a member row ---- */
+const csPartText = m => { const p = CS_PROPS(m); return `${m.label ?? ''}${CS_HAS(p.valueType) ? ' : ' + p.valueType : ''}${CS_HAS(p.multiplicity) ? ` [${p.multiplicity}]` : ''}`.trim(); };
+const csPortText = m => `${m.label ?? ''}${CS_HAS(CS_PROPS(m).valueType) ? ' : ' + CS_PROPS(m).valueType : ''}`;
+function csParse(t) {
+  const m = /^\s*([^:[\]]*?)\s*(?::\s*([^:[\]]*?)\s*)?(?:\[\s*([^\]]*?)\s*\])?\s*$/.exec(String(t ?? ''));
+  return m && m[1] ? { label: m[1], valueType: m[2] || undefined, multiplicity: m[3] || undefined } : { error: 'A part is name : Type [multiplicity]' };
+}
+// a member row on owner (§12.1): `port name : Type` on a class or component is a port, any other row a part (on a collaboration,
+// a role); was: the member the row edits, whose kind it keeps. A member as the model writes it, or { error }
+function csRow(owner, text, was) {
+  const t = String(text ?? '').trim(), port = was ? was.type === 'uml.Port' : /^port\s/i.test(t) && CS_TYPED.includes(owner && owner.type);
+  const r = csParse(port ? t.replace(/^port\s+/i, '') : t);
+  if (r.error || (port && r.multiplicity)) return { error: port ? 'A port is port name : Type' : r.error };
+  return { type: port ? 'uml.Port' : 'uml.Property', label: r.label, props: { ...(r.valueType ? { valueType: r.valueType } : {}), ...(r.multiplicity ? { multiplicity: r.multiplicity } : {}) } };
+}
+// the sets that give x what r reads as: its name, its type and its multiplicity, one set each that changed (undefined clears one)
+const csSets = (x, r, keepType) => [['label', x.label, r.label], ['props.valueType', CS_PROPS(x).valueType, keepType ? CS_PROPS(x).valueType : r.props.valueType],
+  ['props.multiplicity', CS_PROPS(x).multiplicity, x.type === 'uml.Port' ? CS_PROPS(x).multiplicity : r.props.multiplicity]]
+  .filter(([, a, b]) => (a ?? undefined) !== b).map(([path, , value]) => ({ op: 'set', id: x.id, path, value }));
+// an id not yet in the model: base, else base-2, base-3, …
+function csFresh(model, base) {
+  const used = new Set(); JSON.stringify(model, (k, v) => { if (k === 'id' && typeof v === 'string') used.add(v); return v; });
+  const b = String(base).replace(/[^\w.-]+/g, '-').replace(/^-+|-+$/g, '') || 'element'; let id = b, k = 1; while (used.has(id)) id = `${b}-${++k}`;
+  return id;
+}
+
+/* ---- the shapes (§9.1): a part (and a role), a collaboration use, an open collaboration's frame ---- */
+const CS = { pad: 10, px: 12, minW: 96, maxW: 320, h: 48 };
+SHAPE.part = {
+  size: n => ({ w: Math.ceil(Math.min(CS.maxW, Math.max(CS.minW, textW(n.label ?? '', CS.px) + 2 * CS.pad))), h: CS.h }),
+  out: boxOut(0), face: n => [n.y, n.y + n.h], inset: () => 0,
+  draw(n, c, f) { const { x, y, w, h } = n;
+    return `<g class="node part" data-id="${esc(n.id)}" data-shape="part" tabindex="-1" role="img" aria-label="${esc(n.aria || 'Part ' + (n.label ?? ''))}">`
+      + `<rect x="${x}" y="${y}" width="${w}" height="${h}" class="n-mask"/><rect x="${x}" y="${y}" width="${w}" height="${h}" class="n-body" fill="${f}" stroke="${c}"${n.shared ? ' stroke-dasharray="6 4"' : ''}/>`
+      + `<text x="${r2(x + w / 2)}" y="${r2(y + h / 2 + 4)}" text-anchor="middle" class="c-name" fill="var(--um-text)" style="font:500 ${CS.px}px var(--um-sans)" data-o="${esc(n.id)}">${esc(fit(n.label ?? '', CS.px, w - 2 * CS.pad))}</text></g>`; },
+};
+SHAPE.part.ports = (n, side, k = 1) => portsOn(SHAPE.part, n, side, k);
+// a collaboration use: the use case's ellipse (src/uml/usecase.js), dashed
+SHAPE['collab-use'] = { ...SHAPE.ellipse, draw: (n, c, f) => SHAPE.ellipse.draw(n, c, f).replace('class="node usecase"', 'class="node collab-use"').replace('class="n-body"', 'class="n-body" stroke-dasharray="6 4"') };
+// an open collaboration: a dashed ellipse in its frame, which TYPED.frame grew by √2 round the rectangle of its contents (round,
+// §9.3); its name in that rectangle's header room, over a dashed line across the ellipse
+SHAPE.collaboration = {
+  frame(f) { const cx = f.x + f.w / 2, cy = f.y + f.h / 2, w0 = f.w / Math.SQRT2, top = cy - f.h / Math.SQRT2 / 2, y = top + 24, hw = f.w / 2 * Math.sqrt(Math.max(0, 1 - ((y - cy) / (f.h / 2)) ** 2));
+    return `<ellipse class="family-box" cx="${r2(cx)}" cy="${r2(cy)}" rx="${r2(f.w / 2)}" ry="${r2(f.h / 2)}" stroke="var(--um-muted)" stroke-dasharray="6 4"/>`
+      + `<text class="family-title" x="${r2(cx)}" y="${r2(top + 17)}" text-anchor="middle" fill="var(--um-text)" style="font:600 12px var(--um-sans)" data-t="ft" data-o="${esc(f.id)}">${esc(fit(f.title ?? f.label ?? f.id, 12, w0 - 24))}</text>`
+      + `<path d="M${r2(cx - hw)} ${r2(y)}H${r2(cx + hw)}" class="cs-rule" stroke="var(--um-muted)" stroke-dasharray="4 3"/>`; },
+};
+
+/* ---- the view read: its subject, parts, ports, collaboration uses, open collaborations, the rest, and its lines ---- */
+function csPic(model, view) {
+  const at = new Map(), mem = new Map(); // nodes by id; members by id, with their owner (the first of an id)
+  CS_ARR(model && model.nodes).forEach(n => { if (CS_OBJ(n) && typeof n.id === 'string' && !at.has(n.id)) at.set(n.id, n); });
+  at.forEach(n => CS_ARR(n.members).forEach(m => { if (CS_OBJ(m) && typeof m.id === 'string' && !at.has(m.id) && !mem.has(m.id)) mem.set(m.id, { m, owner: n }); }));
+  const kids = (x, t) => CS_ARR(x.members).filter(m => CS_OBJ(m) && m.type === t && mem.has(m.id) && mem.get(m.id).m === m);
+  const ids = [...new Set(CS_ARR(view && view.nodeIds))].filter(id => at.has(id)), sid = view && view.subject;
+  const S = ids.includes(sid) && CS_SUBJECTS.includes(at.get(sid).type) ? at.get(sid) : null;
+  const parts = S ? kids(S, 'uml.Property') : [], sPorts = S && CS_TYPED.includes(S.type) ? kids(S, 'uml.Port') : [];
+  const uses = S ? ids.filter(id => id !== sid && at.get(id).type === 'uml.CollaborationUse' && at.get(id).parent === sid) : [];
+  const collabs = ids.filter(id => id !== sid && at.get(id).type === 'uml.Collaboration').map(id => ({ x: at.get(id), roles: kids(at.get(id), 'uml.Property') })).filter(c => c.roles.length);
+  const boxed = new Set([...(S && (parts.length || uses.length) ? [sid] : []), ...collabs.map(c => c.x.id)]);
+  const rest = ids.filter(id => !boxed.has(id) && !uses.includes(id));
+  const partOf = new Map([...parts.map(m => [m.id, S]), ...collabs.flatMap(c => c.roles.map(m => [m.id, c.x]))]); // a part or role: its structure
+  const classes = [...at.values()].filter(n => CS_TYPED.includes(n.type));
+  const typeOf = p => { const vt = CS_PROPS(p).valueType, c = CS_HAS(vt) ? classes.filter(n => n.label === vt) : []; return c.length === 1 ? c[0] : null; };
+  const el = id => at.get(id) || (mem.get(id) || {}).m || null;
+  // a line's end as drawn: { node, port?, id (the model's) }; null where nothing drawn is it
+  const end = (e, k) => { const x = e[k], p = (CS_PROPS(e).ends || {})[k], part = CS_OBJ(p) ? p.part : null;
+    if (part != null) return partOf.has(part) && (mem.get(x) || {}).m && mem.get(x).m.type === 'uml.Port' ? { node: part, port: csPortId(part, x), id: x, part } : null;
+    if (S && sPorts.some(q => q.id === x)) return { node: sid, port: x, id: x };
+    return ids.includes(x) || partOf.has(x) ? { node: x, id: x } : null; };
+  const within = (b, n) => b === sid ? n !== sid && (partOf.get(n) === S || uses.includes(n)) : collabs.some(c => c.x.id === b && partOf.get(n) === c.x);
+  const E = new Map(); CS_ARR(model && model.edges).forEach(e => { if (CS_OBJ(e) && typeof e.id === 'string' && !E.has(e.id)) E.set(e.id, e); });
+  const list = Array.isArray(view && view.edges) ? view.edges.map(x => (typeof x === 'string' ? E.get(x) : x)) : [...E.values()].filter(e => CS_LINES.includes(e.type));
+  const loops = []; // connectors between two ports of one box: not drawn (the router has no line from a box to itself), warned
+  const lines = list.filter(CS_OBJ).map(e => { const f = end(e, 'from'), t = end(e, 'to'); if (!f || !t) return null;
+    if (boxed.has(f.node) && f.node === t.node) { loops.push(e.id); return null; }
+    // a line from a box to what it holds is drawn only from the box's port, inward (§5)
+    const inner = boxed.has(f.node) && within(f.node, t.node) ? 'from' : boxed.has(t.node) && within(t.node, f.node) ? 'to' : null;
+    if (inner && !(inner === 'from' ? f : t).port) return null;
+    return { e, f, t, inner }; }).filter(Boolean);
+  // the ports drawn on each part: its type's, then those its connectors reach through it (§6)
+  const partPorts = new Map([...partOf.keys()].map(p => { const T = typeOf(el(p)), own = T ? kids(T, 'uml.Port') : [], seen = new Set(own.map(m => m.id));
+    lines.forEach(({ f, t }) => [f, t].forEach(x => { if (x.part === p && !seen.has(x.id)) { seen.add(x.id); own.push(mem.get(x.id).m); } }));
+    return [p, own]; }));
+  return { at, mem, el, ids, S, sid, parts, sPorts, uses, collabs, boxed, rest, partOf, typeOf, lines, loops, partPorts, kids };
+}
+
+/* ---- names (§10.2, A1), reading order and the legend ---- */
+const csWord = t => String(t ?? '').split('.').pop().replace(/([a-z])([A-Z])/g, '$1 $2').replace(/ ./g, s => s.toLowerCase()); // 'uml.CollaborationUse': "Collaboration use"
+const csUseText = u => `${u.label ?? ''}${CS_HAS(CS_PROPS(u).collaboration) ? ' : ' + CS_PROPS(u).collaboration : ''}`;
+// role bindings to a collaboration use: "publisher to checkout"
+const csBindings = (P, u) => P.lines.filter(l => l.e.type === 'uml.RoleBinding' && l.e.to === u).map(l => `${CS_HAS(l.e.label) ? l.e.label : 'a role'} to ${csName(P.el(l.e.from))}`);
+function csNodeName(P, id) {
+  const x = P.el(id), st = csStereo(x), why = st.length ? ` (${st.join(', ')})` : '';
+  if (x.type === 'uml.Comment') return 'Comment: ' + csName(x);
+  if (P.boxed.has(id)) { const held = id === P.sid ? [...P.parts.map(() => x.type === 'uml.Collaboration' ? 'role' : 'part'), ...P.uses.map(() => 'collaboration use')] : P.collabs.find(c => c.x.id === id).roles.map(() => 'role');
+    return SN_SAY.component(csName(x), { stereotypes: st, ports: id === P.sid ? P.sPorts.length : 0, holds: held }).replace(/^Component/, csWord(x.type)); }
+  if (P.partOf.has(id)) { const o = P.partOf.get(id), role = o.type === 'uml.Collaboration' && o !== P.S || P.S && P.S.type === 'uml.Collaboration', k = P.partPorts.get(id).length;
+    return `${role ? 'Role' : 'Part'} ${csPartText(x)}${why}${!role && CS_PROPS(x).aggregation === 'shared' ? ', shared' : ''}, in ${csName(o)}${k ? ', ' + csPlural(k, 'port') : ''}`; }
+  if (x.type === 'uml.CollaborationUse') { const b = csBindings(P, id); return `Collaboration use ${csUseText(x)}${why}${b.length ? ', binding ' + b.join(', ') : ''}`; }
+  return `${csWord(x.type)} ${csName(x)}${why}${id === P.sid && P.sPorts.length ? ', ' + csPlural(P.sPorts.length, 'port') : ''}`;
+}
+const csEndName = (P, x) => (x.part != null ? `${csName(P.mem.get(x.id).m)} of ${csName(P.el(x.part))}` : x.port != null ? `${csName(P.mem.get(x.id).m)} of ${csName(P.S)}` : csName(P.el(x.id)));
+const CS_LINE_WORD = { 'uml.Connector': 'Connector', 'uml.RoleBinding': 'Role binding', 'uml.CommentLink': 'Comment link' };
+const csLineName = (P, { e, f, t }) => e.type === 'uml.RoleBinding' ? `Role binding from ${csEndName(P, f)} to ${csEndName(P, t)}${CS_HAS(e.label) ? ', as ' + e.label : ''}`
+  : `${CS_LINE_WORD[e.type] || 'Line'} from ${csEndName(P, f)} to ${csEndName(P, t)}${CS_HAS(e.label) ? ': ' + e.label : ''}`;
+// the subject and its ports, each part and its ports, the collaboration uses, each open collaboration and its roles, the rest; then the lines
+function csOrder(P) {
+  const out = [], part = m => { out.push(m.id); P.partPorts.get(m.id).forEach(q => out.push(csPortId(m.id, q.id))); };
+  if (P.S && !P.rest.includes(P.sid)) { out.push(P.sid, ...P.sPorts.map(q => q.id)); P.parts.forEach(part); out.push(...P.uses); }
+  P.collabs.forEach(c => { out.push(c.x.id); c.roles.forEach(part); });
+  P.rest.forEach(id => { out.push(id); if (id === P.sid) out.push(...P.sPorts.map(q => q.id)); });
+  return [...out, ...P.lines.map(l => l.e.id)];
+}
+const CS_LOOK = { 'uml.Connector': { from: 'none', to: 'none' }, 'uml.RoleBinding': { from: 'none', to: 'none', dashed: true }, 'uml.CommentLink': { from: 'none', to: 'none', dashed: true } };
+const CS_SAYS = { 'uml.Connector': 'a link between parts and ports at run time', 'uml.RoleBinding': 'the part plays the named role of the collaboration', 'uml.CommentLink': 'what a comment is about' };
+const csLegend = lines => Object.keys(CS_SAYS).filter(t => lines.some(l => l.e.type === t)).map(t => `<span class="lgi" title="${esc(CS_LINE_WORD[t] + ' — ' + CS_SAYS[t])}"><svg class="lgs" viewBox="0 0 28 16" aria-hidden="true">`
+  + `<path d="M2 8H26" stroke="var(--um-muted)" stroke-width="1.4"${CS_LOOK[t].dashed ? ' stroke-dasharray="3 2"' : ''}/></svg><b>${esc(CS_LINE_WORD[t])}</b><span>${esc(CS_SAYS[t])}</span></span>`);
+
+/* ---- the view laid out (§10.2) ---- */
+/* each id's [col, row]: the longest path over the links, cycles broken depth first, columns ordered by untangle and rows by
+   rowsFor (src/layout/layered.js); an id no link reaches goes in rows under the rest. ponytail: the communication type's
+   cmRank and cmPlace in short, which it does not export */
+function csRank(ids, links) {
+  const outs = new Map(ids.map(id => [id, []])), st = new Map(), back = new Set(), at = Object.create(null);
+  links.forEach((l, k) => outs.get(l[0]).push(k));
+  const dfs = u => { st.set(u, 1); outs.get(u).forEach(k => { const v = links[k][1]; if (st.get(v) === 1) back.add(k); else if (!st.has(v)) dfs(v); }); st.set(u, 2); };
+  ids.forEach(id => { if (!st.has(id)) dfs(id); });
+  const fwd = links.filter((l, k) => !back.has(k)), rank = Object.create(null); ids.forEach(id => { rank[id] = 0; });
+  for (let i = 0, more = true; more && i <= ids.length; i++) { more = false; fwd.forEach(([a, b]) => { if (rank[b] < rank[a] + 1) { rank[b] = rank[a] + 1; more = true; } }); }
+  const lined = new Set(links.flatMap(l => l)), cols = []; ids.filter(id => lined.has(id)).forEach(id => (cols[rank[id]] ||= []).push(id));
+  const mains = cols.filter(Boolean); untangle(mains, fwd); const row = rowsFor(mains, fwd);
+  mains.forEach((c, k) => c.forEach(id => { at[id] = [k, row[id]]; }));
+  const loose = ids.filter(id => !lined.has(id)), per = Math.max(2, mains.length), under = Math.max(-1, ...Object.values(at).map(p => p[1])) + 1;
+  loose.forEach((id, k) => { at[id] = [k % per, under + Math.floor(k / per)]; });
+  return at;
+}
+function csGeo({ model, view, pos: pins, memo }) {
+  const P = csPic(model, view), down = view.direction === 'down', present = CS_OBJ(view.present) ? view.present : {};
+  // the ranking: the subject's parts and uses, then each open collaboration's roles, then the rest, block after block to the right
+  const pos = Object.create(null), sBox = P.boxed.has(P.sid), blocks = [], lineNode = l => [l.f.node, l.t.node];
+  const links = ids => P.lines.filter(l => l.e.type !== 'uml.CommentLink').map(lineNode).filter(([a, b]) => a !== b && ids.includes(a) && ids.includes(b));
+  if (sBox) { const ids = [...P.parts.map(m => m.id), ...P.uses]; blocks.push([ids, links(ids)]); }
+  P.collabs.forEach(c => { const ids = c.roles.map(m => m.id); blocks.push([ids, links(ids)]); });
+  if (P.rest.length) blocks.push([P.rest, []]);
+  // a pin (a column and row of the whole picture) wins, kept to its block's first column at least, and the next block starts past
+  // the furthest column this one holds, pins counted: no box reaches over another's. Each id on a cell taken goes down a row, pins first
+  const pinOf = id => (CS_OBJ(pins) && Object.hasOwn(pins, id) && Array.isArray(pins[id]) && pins[id].length === 2 && pins[id].every(Number.isFinite) ? pins[id] : null);
+  blocks.reduce((off, [ids, ls]) => { const at = csRank(ids, ls), taken = [], free = (c, r) => !taken.some(([c2, r2]) => c2 === c && Math.abs(r2 - r) < 1);
+    [...ids.filter(pinOf), ...ids.filter(id => !pinOf(id))].forEach(id => { const p = pinOf(id); let [c, r] = p ? [Math.max(off, p[0]), p[1]] : [at[id][0] + off, at[id][1]];
+      while (!free(c, r)) r++; pos[id] = [c, r]; taken.push([c, r]); });
+    return Math.max(...ids.map(id => pos[id][0])) + 1; }, 0);
+  // the ports' sides (§4.2): the subject's first, each box at the mean of what it holds; then the parts', a line to the subject's
+  // port counting toward a place past the subject's border on that port's side
+  const mean = ids => (ids.length ? [0, 1].map(k => ids.reduce((a, id) => a + pos[id][k], 0) / ids.length) : [0, 0]);
+  if (sBox) pos[P.sid] = mean(blocks[0][0]);
+  const farOf = gid => P.lines.flatMap(l => [[l.f, l.t], [l.t, l.f]].filter(([a]) => a.port === gid).map(([, b]) => b));
+  const sides = portSides(P.sPorts.map(q => ({ id: q.id, owner: P.sid, pin: (present[q.id] || {}).side, far: farOf(q.id).map(b => b.node) })), pos, down);
+  const inS = sBox ? blocks[0][0] : [], cs = inS.map(id => pos[id][0]), rs = inS.map(id => pos[id][1]), [mc, mr] = pos[P.sid] || [0, 0];
+  const past = s => ({ L: [Math.min(...cs) - 1, mr], R: [Math.max(...cs) + 1, mr], T: [mc, Math.min(...rs) - 1], B: [mc, Math.max(...rs) + 1] })[down ? CS_TURN[s] : s];
+  const pos2 = Object.assign(Object.create(null), pos), partPorts = [...P.partPorts].flatMap(([p, qs]) => qs.map(q => ({ id: csPortId(p, q.id), owner: p, q,
+    pin: ((CS_OBJ(present[p]) && CS_OBJ(present[p].ports) ? present[p].ports : {})[q.id] || {}).side,
+    far: farOf(csPortId(p, q.id)).map(b => { if (b.port == null || b.part != null || !sides[b.port]) return b.node; pos2['#' + b.port] = past(sides[b.port]); return '#' + b.port; }) })));
+  Object.assign(sides, portSides(partPorts, pos2, down));
+  // the nodes, each as big as its ports need (portFit)
+  const count = {}; P.lines.forEach(({ f, t }) => [f, t].forEach(x => { if (x.port) count[x.port] = (count[x.port] || 0) + 1; }));
+  const fit = portFit([...partPorts, ...(sBox ? [] : P.sPorts.map(q => ({ id: q.id, owner: P.sid })))].map(p => ({ ...p, lines: count[p.id] })), sides);
+  const nodes = Object.keys(pos).filter(id => !P.boxed.has(id)).map(id => { const x = P.el(id), st = csStereo(x), part = P.partOf.has(id);
+    const shape = part ? { shape: 'part', label: csPartText(x), shared: CS_PROPS(x).aggregation === 'shared' } : x.type === 'uml.Comment' ? { shape: 'note' }
+      : x.type === 'uml.CollaborationUse' ? { shape: 'collab-use', label: csUseText(x), stereotypes: st } : x.type === 'uml.Collaboration' ? { shape: 'collab-use', stereotypes: st }
+        : x.type === 'uml.Component' ? { shape: 'component', stereotypes: st } : { shape: 'classifier', stereotypes: st, compartments: [] };
+    const d = { id, label: csName(x), type: x.type, kind: 'file', ...shape, aria: csNodeName(P, id), col: pos[id][0], row: pos[id][1] }, s = SHAPE[d.shape].size(d), m = fit[id] || { w: 0, h: 0 };
+    return { ...d, w: Math.max(s.w, m.w), h: Math.max(s.h, m.h) }; });
+  // each line: its ports, the side each leaves by (in the layout's own axes: a view laid out down is laid out turned), inner
+  // ends leaving the other way (§5), and the port's place among its owner's ports (portRank)
+  const rankOf = x => (x.part != null ? P.partPorts.get(x.part) : P.sPorts).findIndex(q => q.id === x.id);
+  const sideOf = (x, inner) => { const s = sides[x.port], r = down ? CS_TURN[s] : s; return CS_WORD[inner ? CS_OPP[r] : r]; };
+  const edges = P.lines.map(l => { const { e, f, t, inner } = l, rk = [f, t].map(x => (x.port ? rankOf(x) : null));
+    return { id: e.id, _id: e.id, type: e.type, from: f.node, to: t.node, aria: csLineName(P, l),
+      ...(f.port ? { fromPort: f.port, fromSide: sideOf(f, inner === 'from') } : {}), ...(t.port ? { toPort: t.port, toSide: sideOf(t, inner === 'to') } : {}), ...(inner ? { inner } : {}),
+      ...(f.port || t.port ? { portRank: f.port && t.port ? rk : rk[f.port ? 0 : 1] } : {}),
+      // a role binding's role is its line's label, which the router gives room and the port names keep clear of (portsDrawn); an
+      // end label, placed when drawn (src/typed/draw.js), would not see them
+      end: CS_LOOK[e.type] || { from: 'none', to: 'none' }, ...(e.type !== 'uml.CommentLink' && CS_HAS(e.label) ? { label: String(e.label), cut: 280 } : {}), ...(CS_OBJ(e.style) || typeof e.style === 'string' ? { style: e.style } : {}) }; });
+  const portsWithLines = P.lines.some(l => l.f.node === P.sid && l.f.port || l.t.node === P.sid && l.t.port);
+  const shape = { 'uml.Component': 'component', 'uml.Collaboration': 'collaboration' };
+  const containers = [...(sBox ? [P.S] : []), ...P.collabs.map(c => c.x)].map(x => ({ id: x.id, label: csName(x), title: [...csStereo(x).map(t => `«${t}»`), csName(x)].join(' '),
+    nodeIds: x === P.S ? blocks[0][0] : P.collabs.find(c => c.x === x).roles.map(m => m.id), shape: shape[x.type] || 'subject', aria: csNodeName(P, x.id),
+    ...(x === P.S && portsWithLines ? { pad: 48 } : {}), ...(x.type === 'uml.Collaboration' ? { round: true } : {}) }));
+  // labelGaps (§8, decision 9): the role names on role bindings, which span the subject's columns, else find no spot
+  const g = layoutTyped({ nodes, edges, ...(containers.length ? { containers } : {}), direction: down ? 'down' : 'right', gap: 64, rgap: 56, labelGaps: true, repair: false, reroute: false }, memo);
+  const ports = [...P.sPorts.map(q => ({ q, id: q.id, owner: P.sid })), ...partPorts].map(p => ({ id: p.id, owner: p.owner, side: sides[p.id], label: csName(p.q), valueType: CS_PROPS(p.q).valueType,
+    aria: SN_SAY.port(csName(p.q), csName(P.el(p.owner)), { valueType: CS_PROPS(p.q).valueType }) }));
+  const out = portsDrawn(g, ports), byId = out.byId; // a copy: what layoutTyped returned is never edited (§2.4)
+  // the slots (src/typed/edit.js): one at each node and box, so the palette's add hears what is selected (state.js's)
+  const slots = [...out.nodes, ...CS_ARR(out.families)].map(n => ({ after: n.id, parent: null, x: n.x + n.w / 2, y: n.y + n.h / 2 }));
+  return { ...out, slots, legend: csLegend(P.lines), order: csOrder(P).filter(id => Object.hasOwn(byId, id) || CS_ARR(out.families).some(f => f.id === id) || out.edges.some(e => e.id === id)) };
+}
+
+/* ---- validators (§10.2). Each problem: { level, rule, path, message, ids }; the shared port-owner and manifest-ends too ---- */
+const CS_RULES = {
+  'subject-shown': 'the view\'s subject is a class, a component or a collaboration listed in nodeIds',
+  'part-type': 'a part\'s valueType names exactly one class or component of the model by label',
+  'connector-part': 'an end\'s part is a part of the subject, and the end is a port of that part\'s type',
+  'connector-scope': 'a connector\'s ends lie in one structure: the subject\'s ports and parts; or one collaboration\'s roles',
+  'connector-drawn': 'a connector between two ports of the subject is not drawn: the box has no line to itself',
+  'binding-ends': 'a role binding runs from a part of the subject to a collaboration use of it',
+  'binding-role': 'a role binding\'s label names a role of the collaboration its use names',
+  'collaboration-named': 'a collaboration use\'s collaboration names a collaboration of the model',
+  ...STRUCT_RULES,
+};
+const csCollab = (P, u) => [...P.at.values()].find(n => n.type === 'uml.Collaboration' && CS_HAS(CS_PROPS(u).collaboration) && n.label === CS_PROPS(u).collaboration) || null;
+function csProblems(model, view) {
+  const out = [], P = csPic(model, view || {}), vi = CS_ARR(model && model.views).indexOf(view), S = P.S, say = (level, rule, path, ids, msg) => out.push({ level, rule, path, ids: ids.filter(x => x != null), message: `${rule}: ${msg}` });
+  const q = id => JSON.stringify(P.el(id) ? csName(P.el(id)) : String(id));
+  if (!view) return structProblems(model);
+  if (!S) say('error', 'subject-shown', `views[${vi}].subject`, [view.id, view.subject], `view ${JSON.stringify(view.id)}'s subject ${JSON.stringify(view.subject ?? null)} is not a class, a component or a collaboration it lists in nodeIds`);
+  const nodeAt = id => CS_ARR(model.nodes).indexOf(P.at.get(id)), memPath = id => { const o = P.mem.get(id).owner; return `nodes[${nodeAt(o.id)}].members[${o.members.indexOf(P.mem.get(id).m)}]`; };
+  if (S && S.type !== 'uml.Collaboration') P.parts.forEach(m => { if (!P.typeOf(m)) say('warning', 'part-type', memPath(m.id) + '.props.valueType', [m.id, S.id],
+    `part ${q(m.id)} of ${q(S.id)} is typed ${JSON.stringify(CS_PROPS(m).valueType ?? null)}, which names ${[...P.at.values()].some(n => CS_TYPED.includes(n.type) && CS_HAS(n.label) && n.label === CS_PROPS(m).valueType) ? 'more than one' : 'no'} class or component, so it shows only the ports its connectors reach through it`); });
+  // where an end lies: the subject's structure ('S'), a collaboration's (its id), or nowhere (null)
+  const owner = id => (P.mem.get(id) || {}).owner, inS = id => S && (id === S.id || owner(id) === S);
+  const structOf = (x, part) => { if (part != null) return owner(part) === S && S ? 'S' : null; if (inS(x)) return 'S'; if (S && P.uses.includes(x)) return 'S';
+    const o = owner(x); return o && o.type === 'uml.Collaboration' && (P.mem.get(x).m.type === 'uml.Property') ? o.id : null; };
+  CS_ARR(model.edges).forEach((e, i) => { if (!CS_OBJ(e)) return; const ends = CS_OBJ(CS_PROPS(e).ends) ? CS_PROPS(e).ends : {}, path = `edges[${i}]`;
+    if (e.type === 'uml.Connector') {
+      const parts = ['from', 'to'].map(k => (CS_OBJ(ends[k]) ? ends[k].part : null)), touches = ['from', 'to'].some((k, j) => structOf(e[k], parts[j]) || P.collabs.some(c => owner(e[k]) === c.x) || (parts[j] != null && owner(parts[j]) === S));
+      if (!touches) return;
+      ['from', 'to'].forEach((k, j) => { const p = parts[j]; if (p == null) return;
+        if (!S || owner(p) !== S || P.mem.get(p).m.type !== 'uml.Property') return say('error', 'connector-part', `${path}.props.ends.${k}.part`, [e.id, p], `${e.id}'s ${k} end goes through ${q(p)}, not a part of the subject`);
+        const T = P.typeOf(P.mem.get(p).m); if (T && !P.kids(T, 'uml.Port').some(m => m.id === e[k])) say('error', 'connector-part', `${path}.${k}`, [e.id, e[k], p], `${e.id}'s ${k} end ${q(e[k])} is not a port of ${q(T.id)}, the type of ${q(p)}`); });
+      const a = structOf(e.from, parts[0]), b = structOf(e.to, parts[1]), bare = ['from', 'to'].find((k, j) => S && e[k] === S.id && parts[j] == null);
+      // UML 2.5.1 §11.2: a connector's end is a part or a port, never the structured classifier itself
+      if (bare) say('error', 'connector-scope', `${path}.${bare}`, [e.id, S.id], `${e.id}'s ${bare} end is ${q(S.id)} itself: a connector joins the subject's ports and parts`);
+      else if (!a || a !== b) say('error', 'connector-scope', path, [e.id, e.from, e.to], `${e.id} joins ${q(e.from)} and ${q(e.to)}, which lie in ${a && b ? 'two structures' : 'no structure of this view'}: its ends are the subject's ports and parts, or one collaboration's roles`);
+      else if (P.loops.includes(e.id)) say('warning', 'connector-drawn', path, [e.id, S.id], `${e.id} joins two ports of ${q(S.id)}, which this view does not draw: the box has no line to itself`);
+    }
+    if (e.type === 'uml.RoleBinding' && (P.at.get(e.to) || {}).type === 'uml.CollaborationUse' && P.ids.includes(e.to) || e.type === 'uml.RoleBinding' && S && owner(e.from) === S) {
+      const u = P.at.get(e.to);
+      if (!(S && owner(e.from) === S && P.mem.get(e.from).m.type === 'uml.Property' && u && u.type === 'uml.CollaborationUse' && u.parent === S.id))
+        return say('error', 'binding-ends', path, [e.id, e.from, e.to], `${e.id} runs from ${q(e.from)} to ${q(e.to)}: a role binding runs from a part of the subject to a collaboration use of it`);
+      const C = csCollab(P, u);
+      if (C && !P.kids(C, 'uml.Property').some(m => m.label === e.label)) say('warning', 'binding-role', `${path}.label`, [e.id, C.id], `${e.id} binds ${JSON.stringify(e.label ?? null)}, not a role of ${q(C.id)}`);
+    } });
+  P.uses.forEach(id => { const u = P.at.get(id); if (!csCollab(P, u)) say('warning', 'collaboration-named', `nodes[${nodeAt(id)}].props.collaboration`, [id],
+    `collaboration use ${q(id)} names ${JSON.stringify(CS_PROPS(u).collaboration ?? null)}, not a collaboration of the model`); });
+  return [...out, ...structProblems(model, view)];
+}
+
+/* ---- describe(): the view in sentences, each element by its accessible name in reading order, then each line ---- */
+function csDescribe(model, viewId) {
+  const v = CS_ARR(model && model.views).find(x => CS_OBJ(x) && x.id === viewId); if (!v) throw new Error(`umlimator: no view ${JSON.stringify(viewId)}`);
+  const P = csPic(model, v), by = new Map(P.lines.map(l => [l.e.id, l])), els = csOrder(P).filter(id => !by.has(id));
+  const name = id => { const s = csSplit(id), q = P.mem.get(s ? s[1] : id); if (q && q.m.type === 'uml.Port') return SN_SAY.port(csName(q.m), csName(P.el(s ? s[0] : P.sid)), { valueType: CS_PROPS(q.m).valueType }); return csNodeName(P, id); };
+  return [`${v.title || v.id}: a composite structure diagram of ${csPlural(els.length, 'element')} and ${csPlural(P.lines.length, 'line')}.`,
+    ...csOrder(P).map(id => (by.has(id) ? csLineName(P, by.get(id)) : name(id)) + '.')].join('\n');
+}
+
+/* ---- editing (§6, §12) ---- */
+const csOwnerOf = (P, id) => { const s = csSplit(id); return s ? s[0] : id; };
+// connect: a connector from a port on a part keeps the part in ends.<end>.part; a role binding from a part to a collaboration
+// use, its role picked from the collaboration the use names. Anything else: the default
+function csConnect(model, view, from, to, at, line) {
+  if (!CS_OBJ(line)) return null;
+  const P = csPic(model, view), end = id => { const s = csSplit(id); return s ? { id: s[1], part: s[0] } : { id }; }, a = end(from), b = end(to);
+  if (line.type === 'uml.RoleBinding') {
+    const isPart = id => P.parts.some(m => m.id === id), isUse = id => P.uses.includes(id);
+    let [p, u] = [a.part ?? a.id, b.part ?? b.id]; if (isUse(p) && isPart(u)) [p, u] = [u, p];
+    if (!isPart(p) || !isUse(u)) return { error: 'A role binding runs from a part of the subject to a collaboration use' };
+    const C = csCollab(P, P.at.get(u)), roles = C ? P.kids(C, 'uml.Property').map(csName) : [];
+    const add = role => [{ op: 'add', element: { id: csFresh(model, 'binding'), type: 'uml.RoleBinding', from: p, to: u, ...(role != null ? { label: role } : {}) }, view: view.id }];
+    return roles.length ? { pick: roles, then: i => add(roles[i]) } : add(null);
+  }
+  if (!a.part && !b.part) return null;
+  if (line.type !== 'uml.Connector') return { error: `A ${String(line.label || 'line').toLowerCase()} joins the part, not a port on it` };
+  const ends = Object.fromEntries([['from', a], ['to', b]].filter(([, x]) => x.part).map(([k, x]) => [k, { part: x.part }]));
+  return [{ op: 'add', element: { id: csFresh(model, 'connector'), type: 'uml.Connector', from: a.id, to: b.id, props: { ends } }, view: view.id }];
+}
+// moveTo: a port dropped, or Alt + an arrow on it, goes to the side nearest the drop, or in the arrow's direction (§4.5); its place
+// along its side is not stored (S3). Anything else, and a member's ↑ and ↓ in the panel (no geometry): the default
+function csMoveTo(model, view, id, at) {
+  const P = csPic(model, view), s = csSplit(id), mine = s ? P.partOf.has(s[0]) && CS_ARR(P.partPorts.get(s[0])).some(q => q.id === s[1]) : P.sPorts.some(q => q.id === id);
+  if (!mine || !CS_OBJ(at) || !CS_OBJ(at.geo)) return null;
+  const g = at.geo, n = CS_OBJ(g.byId) && Object.hasOwn(g.byId, id) ? g.byId[id] : null, o = n && (Object.hasOwn(g.byId, n.owner) ? g.byId[n.owner] : CS_ARR(g.families).find(f => f.id === n.owner));
+  let side = null;
+  if (Array.isArray(at.by)) { const [dx, dy] = at.by; side = dx ? (dx < 0 ? 'L' : 'R') : dy < 0 ? 'T' : 'B';
+    if (n && (side === n.side || (side === 'L' || side === 'R') !== (n.side === 'L' || n.side === 'R')))
+      return { error: side === n.side ? `The port is on its owner's ${CS_WORD[side]} side already` : 'A port\'s place along its side follows its lines and is not stored: Alt + an arrow across the side moves it to another side' }; }
+  else if (Array.isArray(at.pt) && o) { const [x, y] = at.pt, d = { L: Math.abs(x - o.x), R: Math.abs(x - o.x - o.w), T: Math.abs(y - o.y), B: Math.abs(y - o.y - o.h) };
+    side = Object.keys(d).reduce((a, k) => (d[k] < d[a] ? k : a), 'L'); }
+  if (!side) return null;
+  return [{ op: 'set', view: view.id, path: s ? ['present', s[0], 'ports', s[1], 'side'] : ['present', id, 'side'], value: CS_WORD[side] }];
+}
+// add: a part into the subject; a port into the selected subject, class or component, or a selected part's type (said); a role
+// into the selected collaboration; a collaboration use into the subject. Anything else: the default
+function csAdd(model, view, entry, label, at) {
+  if (!CS_OBJ(entry)) return null;
+  const P = csPic(model, view), sel = CS_ARR(at && at.sel).map(id => csOwnerOf(P, id)).map(id => P.el(id)).filter(Boolean)[0] || null, t = String(label ?? '').trim();
+  const member = (o, row, say) => { const r = csRow(o, row); if (r.error) return r; const c = [{ op: 'add', element: { id: csFresh(model, `${o.id}.${r.label.toLowerCase()}`), ...r }, owner: o.id }]; return say ? { commands: c, say } : c; };
+  if (entry.type === 'uml.Port') {
+    if (sel && P.partOf.has(sel.id)) { const T = P.typeOf(sel); if (!T) return { error: `${csName(sel)}'s type, ${JSON.stringify(CS_PROPS(sel).valueType ?? null)}, names no one class or component to add a port to` };
+      return member(T, 'port ' + t, `Added the port to ${csName(T)}, the type of ${csName(sel)}: every part of that type shows it`); }
+    return sel && CS_TYPED.includes(sel.type) ? member(sel, 'port ' + t) : { error: 'Select the subject, a part, a class or a component to add a port to' };
+  }
+  if (entry.type === 'uml.Property' && entry.label === 'Role') return sel && sel.type === 'uml.Collaboration' ? member(sel, t) : { error: 'Select a collaboration to add a role to' };
+  if (entry.type === 'uml.Property') return P.S ? member(P.S, t) : { error: 'This view has no subject to add a part to' };
+  if (entry.type === 'uml.CollaborationUse') { if (!P.S || !CS_TYPED.includes(P.S.type)) return { error: 'A collaboration use goes in a class or component subject' };
+    const r = csParse(t); if (r.error || r.multiplicity) return { error: 'A collaboration use is name : Collaboration' };
+    return [{ op: 'add', element: { id: csFresh(model, r.label.toLowerCase()), type: 'uml.CollaborationUse', label: r.label, parent: P.sid, props: r.valueType ? { collaboration: r.valueType } : {} }, view: view.id }]; }
+  return null;
+}
+/* remove: a part, a port or a role is a member, which a view cannot hide (S20): Delete deletes it from the model, as Shift +
+   Delete does, said. Delete on a port on a part deletes the connectors through that part to it; Shift + Delete, the port from
+   its class (§6). Other ids as the default */
+function csRemove(model, view, ids, fromModel) {
+  const P = csPic(model, view); if (!CS_ARR(ids).some(id => csSplit(id) || P.mem.has(id))) return null;
+  const out = [], hide = [], said = [], del = id => { if (!out.some(c => c.op === 'delete' && c.id === id)) out.push({ op: 'delete', id }); };
+  ids.forEach(id => { const s = csSplit(id), x = P.mem.get(s ? s[1] : id);
+    if (s && x && !fromModel) { const through = CS_ARR(model.edges).filter(e => CS_OBJ(e) && ['from', 'to'].some(k => e[k] === s[1] && CS_OBJ((CS_PROPS(e).ends || {})[k]) && CS_PROPS(e).ends[k].part === s[0]));
+      through.forEach(e => del(e.id)); said.push(`the ${csPlural(through.length, 'connector')} through ${csName(P.el(s[0]))} to its port ${csName(x.m)}; Shift + Delete deletes the port from ${csName(x.owner)}`); }
+    else if (x) { const lines = CS_ARR(model.edges).filter(e => CS_OBJ(e) && (e.from === x.m.id || e.to === x.m.id || ['from', 'to'].some(k => CS_OBJ((CS_PROPS(e).ends || {})[k]) && CS_PROPS(e).ends[k].part === x.m.id))).length;
+      del(x.m.id); said.push(`${x.m.type === 'uml.Port' ? 'port' : x.owner.type === 'uml.Collaboration' ? 'role' : 'part'} ${csName(x.m)} of ${csName(x.owner)}${lines ? ` and its ${csPlural(lines, 'line')}` : ''}${fromModel ? '' : ' (a member is not hidden: it goes from the model)'}`); }
+    else if (s) return;
+    else if (fromModel) del(id);
+    else { const e = CS_ARR(model.edges).find(x => CS_OBJ(x) && x.id === id); // a node or a line selected with them: as the canvas does
+      if (e && !Array.isArray(view.edges)) said.push(`not the line ${csName(e)}: this view shows every line between its cards, and Shift + Delete deletes it`);
+      else if (e || P.at.has(id)) hide.push({ op: 'hide', id, view: view.id }); } });
+  // hidden first: a line hidden after the part it ends at is deleted would be gone with it
+  if (!out.length && !hide.length) return { error: `Nothing to delete: ${said[0] || 'no connector'}` };
+  return { commands: [...hide, ...out], say: 'Deleted ' + said.join('; ') };
+}
+// rename: F2 on a port on a part renames its class's port, for every part of that type (said); on a part or a role, its row
+// `name : Type [multiplicity]` sets its name, type and multiplicity. Anything else: the default
+function csRename(model, view, id, text) {
+  const P = csPic(model, view), s = csSplit(id), x = P.mem.get(s ? s[1] : id);
+  if (!x || (!s && x.m.type !== 'uml.Property')) return null;
+  const r = csRow(x.owner, text, x.m); if (r.error) return r;
+  const c = csSets(x.m, r, x.m.type === 'uml.Port' && !String(text).includes(':')); // a name alone keeps a port's type: F2 opens on its name
+  return s ? { commands: c, say: `Renamed ${csName(x.owner)}'s port: every part of that type shows it` } : c;
+}
+// the panel's member rows (edits.member, §12.1): on the subject (or any class or component) a row `port name : Type` is a port
+// and `name : Type [multiplicity]` a part; on a collaboration, a role; added, or the member edited. Other members: the panel's
+function csMember(model, view, owner, id, text) {
+  const P = csPic(model, view), o = P.el(owner); if (!o || !CS_SUBJECTS.includes(o.type)) return null;
+  const was = id != null ? CS_ARR(o.members).find(m => CS_OBJ(m) && m.id === id) : null;
+  if (id != null && (!was || !['uml.Port', 'uml.Property'].includes(was.type))) return null;
+  const r = csRow(o, text, was); if (r.error) return r;
+  return was ? csSets(was, r) : [{ op: 'add', element: { id: csFresh(model, `${o.id}.${r.label.toLowerCase()}`), ...r }, owner: o.id }];
+}
+const CS_MEMBER = {
+  print: m => (m.type === 'uml.Port' ? `port ${csPortText(m)}` : m.type === 'uml.Property' ? csPartText(m) : String(m.label ?? '')),
+  add: (text, owner) => csRow(owner, text),
+  edit: (m, text) => { const r = csRow(null, text, m); return r.error ? r : { commands: csSets(m, r) }; },
+  holds: n => CS_SUBJECTS.includes(n.type),
+};
+
+const CS_STEREO = { key: 'stereotypes', label: 'Stereotypes', kind: 'list' };
+const CS_TYPE = registerDiagramType('uml.composite-structure', {
+  title: 'composite structure diagram',
+  elements: [['Property', 'Part'], ['Port', 'Port'], ['Property', 'Role'], ['CollaborationUse', 'Collaboration use'], ['Collaboration', 'Collaboration'], ['Comment', 'Comment']].map(([t, label]) => ({ type: 'uml.' + t, label })),
+  lines: [['Connector', 'Connector'], ['RoleBinding', 'Role binding'], ['CommentLink', 'Comment link']].map(([t, label]) => ({ type: 'uml.' + t, label })),
+  props: {
+    'uml.Property': [{ key: 'valueType', label: 'Type', kind: 'text' }, { key: 'multiplicity', label: 'Multiplicity', kind: 'text' }, { key: 'aggregation', label: 'Aggregation', kind: 'enum', options: ['composite', 'shared'] }, CS_STEREO],
+    'uml.Port': [{ key: 'valueType', label: 'Type', kind: 'text' }, CS_STEREO],
+    'uml.CollaborationUse': [{ key: 'collaboration', label: 'Collaboration', kind: 'text' }, CS_STEREO],
+    'uml.Class': [CS_STEREO], 'uml.Component': [CS_STEREO], 'uml.Collaboration': [CS_STEREO], 'uml.Connector': [CS_STEREO], 'uml.RoleBinding': [], 'uml.CommentLink': [],
+  },
+  refs: { 'uml.Connector': { 'props.ends.from.part': 'cascade', 'props.ends.to.part': 'cascade' } }, // a deleted part takes its connectors (S14)
+  layout: Object.assign(csGeo, { rank: false }), // csGeo ranks the parts itself: the host passes only the pins
+  member: CS_MEMBER,
+  validate: csProblems,
+  rules: CS_RULES,
+  describe: csDescribe,
+  // the PDF's tables (§11): a part's and a collaboration use's kind and rows; null: as before
+  word: (model, id) => { const P = csPic(model, {}), q = P.mem.get(id), x = q ? q.m : P.at.get(id); if (!x) return null;
+    return x.type === 'uml.Property' ? (q.owner.type === 'uml.Collaboration' ? 'Role' : 'Part') : x.type === 'uml.Port' ? 'Port' : x.type === 'uml.CollaborationUse' ? 'Collaboration use' : null; },
+  rows: (model, view, id) => { const P = csPic(model, view), q = P.mem.get(id);
+    if (q && q.m.type === 'uml.Property') return [csPartText(q.m), CS_PROPS(q.m).aggregation === 'shared' ? 'shared' : 'composite'];
+    const u = P.at.get(id); if (!u || u.type !== 'uml.CollaborationUse') return null;
+    return [...(CS_HAS(CS_PROPS(u).collaboration) ? [String(CS_PROPS(u).collaboration)] : []),
+      ...CS_ARR(model.edges).filter(e => CS_OBJ(e) && e.type === 'uml.RoleBinding' && e.to === id).map(e => `${e.label ?? '?'} ← ${csName(P.el(e.from) || { id: e.from })}`)]; },
+  edits: { connect: csConnect, moveTo: csMoveTo, add: csAdd, remove: csRemove, rename: csRename, member: csMember },
+});