@formicoidea/labre-framework-uml 0.42.0

package/dist/node/node-view.js

@@ -0,0 +1,89 @@
+import { mountShapeTextEditor } from '@formicoidea/labre-core/gfx/shape';
+import { mountTextElementEditor } from '@formicoidea/labre-core/gfx/text';
+import { GroupElementModel, ShapeElementModel, TextElementModel, } from '@formicoidea/labre-core/model';
+import { GfxElementModelView } from '@formicoidea/labre-core/std/gfx';
+import { umlComponentSiblings, umlGroupOf } from '../component.js';
+/**
+ * View for a UML node. Registering it ensures `gfx.view.get(model)` returns a
+ * view (required so move / select / connector interactions work).
+ *
+ * ## Double-clicking the body edits the NAME — which is not on this element
+ *
+ * A UML artefact is a GROUP: the shape, plus the canvas TEXT elements that carry
+ * its words, every one of them edited in place exactly like any other words on
+ * the canvas (R16, and the same arrangement C4's recette of 28/08/2026 settled).
+ * The shape itself carries no text at all. Which leaves a gesture with nowhere
+ * obvious to go: the body is the biggest target in the component, double-clicking
+ * a shape is how everybody in this editor starts typing, and the shape's own
+ * inline editor would write into the one field that must stay empty — a "shadow"
+ * name, invisible under the real one, disagreeing with it, exported by neither.
+ *
+ * So the gesture is ROUTED: a double-click on the body opens the NAME child's
+ * own editor, `mountTextElementEditor` — the very same call `TextElementView`
+ * makes when you double-click those words directly. The author gets one editor
+ * for one name whichever half of the component they aimed at.
+ *
+ * ## `uml:name`, `uml:label` or `uml:lifeline-ident`, and why all three
+ *
+ * A compartmented artefact's first tier is `uml:name` — it is the NAME
+ * COMPARTMENT of §11.4.4, a rectangle with a rule under it. An actor's and a use
+ * case's single word is `uml:label`: the same tier, named differently because
+ * there is no compartment for it to be a compartment OF. A lifeline's head is
+ * `uml:lifeline-ident`, a third time: §17.3.4 prints a grammar for what goes in
+ * it and the validation pack reads that grammar and no other (`roles.ts`). The
+ * gesture is one gesture, so it accepts any of the three and takes whichever the
+ * group holds — the kind is not consulted, which means an artefact regrouped by
+ * hand still opens on the words it actually has.
+ *
+ * ## …except on an element that has no text child
+ *
+ * A node whose group was released and whose texts were deleted lands on
+ * `mountShapeTextEditor` and gets the native behaviour rather than nothing at
+ * all. Same fallback C4's node view keeps, and for the same reason: a gesture
+ * that silently does nothing reads as a broken editor.
+ *
+ * Hit testing is `UmlNodeElementModel.includesPoint`'s doing: the glyph-bodied
+ * kinds are created unfilled, and an empty unfilled shape would normally be a
+ * target only near its border. The override forces the interior test, so the
+ * whole body answers this gesture on all eight kinds.
+ */
+export class UmlNodeView extends GfxElementModelView {
+    static { this.type = 'umlNode'; }
+    onCreated() {
+        super.onCreated();
+        this.on('dblclick', () => {
+            const edgeless = this.std.view.getBlock(this.std.store.root.id);
+            if (!edgeless || this.model.isLocked())
+                return;
+            const name = this.#name();
+            if (name) {
+                if (!name.isLocked())
+                    mountTextElementEditor(name, edgeless);
+                return;
+            }
+            // No text child: the words really are the shape's own inner text.
+            if (this.model instanceof ShapeElementModel) {
+                mountShapeTextEditor(this.model, edgeless);
+            }
+        });
+    }
+    /**
+     * The `uml:name` (or `uml:label`, or `uml:lifeline-ident`) text grouped with
+     * this shape, if any.
+     */
+    #name() {
+        const surface = this.gfx.surface;
+        if (!surface)
+            return null;
+        const groups = surface.elementModels.filter((element) => element instanceof GroupElementModel);
+        const group = umlGroupOf(this.model.id, groups);
+        if (!group)
+            return null;
+        // The same pure resolution the exporter uses — group membership, then roles
+        // — so the words this gesture opens are the words the file comes out with.
+        const component = umlComponentSiblings(group, surface.elementModels);
+        const tier = component.name ?? component.label ?? component.ident;
+        const element = tier && surface.getElementById(tier.id);
+        return element instanceof TextElementModel ? element : null;
+    }
+}

package/dist/node/paint.d.ts

@@ -0,0 +1,84 @@
+/**
+ * The painting primitives every UML glyph is built out of, and the box they are
+ * all measured against.
+ *
+ * Lifted out of `node-renderer.ts` when the behaviour artefacts of phase 2
+ * arrived: a disc, a ring, a bar and a cross are drawn by the activity glyphs
+ * and by the state machine glyphs alike, and three files each with their own
+ * `line()` is three places for one of them to grow a rounded cap.
+ *
+ * Nothing here knows what a UML artefact is. Each function takes an already-
+ * configured context — `fillStyle`, `strokeStyle` and `lineWidth` set from the
+ * MODEL, never from a table — and a rectangle in the element-local frame.
+ */
+export declare const TAU: number;
+/**
+ * The rectangle a glyph is drawn inside: the element box, inset by half the
+ * stroke width so an outline lands within the element's bounds rather than
+ * straddling them.
+ *
+ * Both the inset box (`x0…y1`, `bw`, `bh`) and the RAW element size (`w`, `h`)
+ * are carried, because glyphs need both: an outline is drawn inside the inset,
+ * while every proportion `component.ts` also reads — the package's tab, the
+ * cube's depth, the pentagon's point — is a fraction of the element, so that
+ * the renderer and the layout cannot disagree about where a label goes.
+ */
+export interface GlyphBox {
+    x0: number;
+    y0: number;
+    x1: number;
+    y1: number;
+    /** The inset box's own width and height. */
+    bw: number;
+    bh: number;
+    /** The element's width and height, before the stroke inset. */
+    w: number;
+    h: number;
+}
+/**
+ * Draw the four sides of a rectangle as an explicit path.
+ *
+ * `ctx.rect` would be one call — and would record nothing a test about WHERE a
+ * glyph was drawn can read, on this pack's canvas recorder or on a reviewer's
+ * screen. The four segments are the shape.
+ */
+export declare function rectPath(ctx: CanvasRenderingContext2D, x: number, y: number, w: number, h: number): void;
+/** …and paint it as a body: the element's fill, then the element's outline. */
+export declare function solidRect(ctx: CanvasRenderingContext2D, x: number, y: number, w: number, h: number): void;
+/** Draw one straight segment, skipping a degenerate one. */
+export declare function line(ctx: CanvasRenderingContext2D, x1: number, y1: number, x2: number, y2: number): void;
+/** A closed polygon, filled with the element's paper and outlined in its ink. */
+export declare function solidPolygon(ctx: CanvasRenderingContext2D, points: readonly (readonly [number, number])[]): void;
+/**
+ * A circle filled with the element's paper and outlined in its ink — the hollow
+ * mark: an activity final's outer ring, a flow final's rim, an entry point.
+ */
+export declare function hollowDisc(ctx: CanvasRenderingContext2D, cx: number, cy: number, r: number): void;
+/**
+ * A circle filled with the element's INK — the solid mark: an initial node, a
+ * junction, the bull of a bullseye.
+ *
+ * The fill is swapped to the stroke colour and put back, rather than the caller
+ * doing it: a glyph that forgot to restore it would paint every later mark in
+ * the wrong colour, and the bug would show up two shapes away from its cause.
+ * The colour is still the MODEL's — a node recoloured from the shape toolbar
+ * recolours its solid marks with it.
+ */
+export declare function inkDisc(ctx: CanvasRenderingContext2D, cx: number, cy: number, r: number): void;
+/** The same swap, for a solid mark that is not a circle (the fork's bar). */
+export declare function withInkFill(ctx: CanvasRenderingContext2D, draw: () => void): void;
+/**
+ * The two diagonals of a square centred on `(cx, cy)` with half-diagonal `r` —
+ * the X of a flow final, an exit point and a terminate.
+ */
+export declare function cross(ctx: CanvasRenderingContext2D, cx: number, cy: number, r: number): void;
+/**
+ * One centred word, in the element's ink — the `H` and `H*` of §14.2.4's history
+ * pseudostates, and the only text this pack's glyph layer writes.
+ *
+ * Text and not a drawn letterform, because it IS a letter: §14.2.4 writes `H`
+ * inside the circle, and a path traced by hand would be this pack drawing a
+ * typeface. Sized off the mark rather than off a constant, so a history dragged
+ * bigger carries a bigger letter.
+ */
+export declare function glyphText(ctx: CanvasRenderingContext2D, text: string, cx: number, cy: number, size: number, fontFamily: string): void;

package/dist/node/paint.js

@@ -0,0 +1,143 @@
+/**
+ * The painting primitives every UML glyph is built out of, and the box they are
+ * all measured against.
+ *
+ * Lifted out of `node-renderer.ts` when the behaviour artefacts of phase 2
+ * arrived: a disc, a ring, a bar and a cross are drawn by the activity glyphs
+ * and by the state machine glyphs alike, and three files each with their own
+ * `line()` is three places for one of them to grow a rounded cap.
+ *
+ * Nothing here knows what a UML artefact is. Each function takes an already-
+ * configured context — `fillStyle`, `strokeStyle` and `lineWidth` set from the
+ * MODEL, never from a table — and a rectangle in the element-local frame.
+ */
+export const TAU = Math.PI * 2;
+/**
+ * Draw the four sides of a rectangle as an explicit path.
+ *
+ * `ctx.rect` would be one call — and would record nothing a test about WHERE a
+ * glyph was drawn can read, on this pack's canvas recorder or on a reviewer's
+ * screen. The four segments are the shape.
+ */
+export function rectPath(ctx, x, y, w, h) {
+    ctx.beginPath();
+    ctx.moveTo(x, y);
+    ctx.lineTo(x + w, y);
+    ctx.lineTo(x + w, y + h);
+    ctx.lineTo(x, y + h);
+    ctx.closePath();
+}
+/** …and paint it as a body: the element's fill, then the element's outline. */
+export function solidRect(ctx, x, y, w, h) {
+    if (!(w > 0) || !(h > 0))
+        return;
+    rectPath(ctx, x, y, w, h);
+    ctx.fill();
+    ctx.stroke();
+}
+/** Draw one straight segment, skipping a degenerate one. */
+export function line(ctx, x1, y1, x2, y2) {
+    ctx.beginPath();
+    ctx.moveTo(x1, y1);
+    ctx.lineTo(x2, y2);
+    ctx.stroke();
+}
+/** A closed polygon, filled with the element's paper and outlined in its ink. */
+export function solidPolygon(ctx, points) {
+    if (points.length < 3)
+        return;
+    ctx.beginPath();
+    ctx.moveTo(points[0][0], points[0][1]);
+    for (let i = 1; i < points.length; i++) {
+        ctx.lineTo(points[i][0], points[i][1]);
+    }
+    ctx.closePath();
+    ctx.fill();
+    ctx.stroke();
+}
+/**
+ * A circle filled with the element's paper and outlined in its ink — the hollow
+ * mark: an activity final's outer ring, a flow final's rim, an entry point.
+ */
+export function hollowDisc(ctx, cx, cy, r) {
+    if (!(r > 0))
+        return;
+    ctx.beginPath();
+    ctx.arc(cx, cy, r, 0, TAU);
+    ctx.fill();
+    ctx.stroke();
+}
+/**
+ * A circle filled with the element's INK — the solid mark: an initial node, a
+ * junction, the bull of a bullseye.
+ *
+ * The fill is swapped to the stroke colour and put back, rather than the caller
+ * doing it: a glyph that forgot to restore it would paint every later mark in
+ * the wrong colour, and the bug would show up two shapes away from its cause.
+ * The colour is still the MODEL's — a node recoloured from the shape toolbar
+ * recolours its solid marks with it.
+ */
+export function inkDisc(ctx, cx, cy, r) {
+    if (!(r > 0))
+        return;
+    withInkFill(ctx, () => {
+        ctx.beginPath();
+        ctx.arc(cx, cy, r, 0, TAU);
+        ctx.fill();
+        ctx.stroke();
+    });
+}
+/** The same swap, for a solid mark that is not a circle (the fork's bar). */
+export function withInkFill(ctx, draw) {
+    const paper = ctx.fillStyle;
+    ctx.fillStyle = ctx.strokeStyle;
+    try {
+        draw();
+    }
+    finally {
+        ctx.fillStyle = paper;
+    }
+}
+/**
+ * The two diagonals of a square centred on `(cx, cy)` with half-diagonal `r` —
+ * the X of a flow final, an exit point and a terminate.
+ */
+export function cross(ctx, cx, cy, r) {
+    if (!(r > 0))
+        return;
+    // 45°, so the arms reach the rim of the circle they are drawn inside rather
+    // than a square inscribed in it: the cross of §15.3.4 touches its own rim.
+    const d = r * Math.SQRT1_2;
+    line(ctx, cx - d, cy - d, cx + d, cy + d);
+    line(ctx, cx + d, cy - d, cx - d, cy + d);
+}
+/**
+ * One centred word, in the element's ink — the `H` and `H*` of §14.2.4's history
+ * pseudostates, and the only text this pack's glyph layer writes.
+ *
+ * Text and not a drawn letterform, because it IS a letter: §14.2.4 writes `H`
+ * inside the circle, and a path traced by hand would be this pack drawing a
+ * typeface. Sized off the mark rather than off a constant, so a history dragged
+ * bigger carries a bigger letter.
+ */
+export function glyphText(ctx, text, cx, cy, size, fontFamily) {
+    if (!(size > 0))
+        return;
+    const paper = ctx.fillStyle;
+    const font = ctx.font;
+    const align = ctx.textAlign;
+    const baseline = ctx.textBaseline;
+    ctx.fillStyle = ctx.strokeStyle;
+    ctx.font = `600 ${size}px ${fontFamily}`;
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    try {
+        ctx.fillText(text, cx, cy);
+    }
+    finally {
+        ctx.fillStyle = paper;
+        ctx.font = font;
+        ctx.textAlign = align;
+        ctx.textBaseline = baseline;
+    }
+}

package/dist/node/sd-glyphs.d.ts

@@ -0,0 +1,36 @@
+import { type UmlNodeKind } from '@formicoidea/labre-core/model';
+import type { GlyphBox } from './paint.js';
+/**
+ * The INTERACTION glyphs (§17.2.4, §17.3.4) — the two marks a sequence diagram
+ * is drawn out of that the shape layer cannot draw.
+ *
+ * A third module beside `act-glyphs.ts` and `stm-glyphs.ts`, for the reason
+ * those two exist: the renderer owns the BRANCH — which kind gets which picture
+ * — and the drawing lives beside the other drawings of its own family.
+ *
+ * The `execution` of §17.2.4 is deliberately NOT here. It is a thin FILLED
+ * RECTANGLE on a lifeline's spine, which is exactly what a native rect is, so
+ * the shape layer fills it, strokes it, hit-tests it and re-themes it and this
+ * file paints nothing over it — the same call `object-node` and `action` make.
+ *
+ * ## The lifeline is the one glyph bigger than its own element
+ *
+ * Everywhere else in this pack a picture is drawn inside the box it belongs to.
+ * §17.3.4 makes that impossible: what a message attaches to is the dashed
+ * SPINE, so the element has to be the narrow column the spine runs down (16
+ * units — see `UML_NODE_BOX.lifeline`), and the named head over its top is 160.
+ * The head therefore overflows the element by 72 units on each side, which is
+ * why `UmlNodeElementModel` overrides `elementBound` and `includesPoint` and
+ * why both of them, the label layout in `component.ts` and the drawing below
+ * all read ONE function — {@link umlLifelineHeadRect}, in the model, where the
+ * overrides can reach it.
+ */
+/** The kinds this module draws. */
+export type UmlSdGlyphKind = 'lifeline' | 'destruction';
+/**
+ * Paint one interaction mark, in the element-local frame, with `fillStyle` /
+ * `strokeStyle` / `lineWidth` already set from the model.
+ */
+export declare function paintSdGlyph(kind: UmlSdGlyphKind, ctx: CanvasRenderingContext2D, box: GlyphBox): void;
+/** Whether the node renderer should hand this kind to {@link paintSdGlyph}. */
+export declare function isSdGlyphKind(kind: UmlNodeKind): kind is UmlSdGlyphKind;

package/dist/node/sd-glyphs.js

@@ -0,0 +1,79 @@
+import { umlLifelineHeadRect } from '@formicoidea/labre-core/model';
+import { UML_LIFELINE_DASH, UML_LIFELINE_SPINE_WIDTH } from '../consts.js';
+import { cross, line, solidRect } from './paint.js';
+/**
+ * The reach of a destruction's cross, as a fraction of the box's half-diagonal.
+ *
+ * The whole box, near enough: §17.2.4 draws the X as a bare cross with nothing
+ * round it, so — unlike a flow final, whose arms stop short of a rim they are
+ * drawn inside — there is nothing here for it to stay clear of.
+ */
+const DESTRUCTION_REACH = 0.98;
+/**
+ * Paint one interaction mark, in the element-local frame, with `fillStyle` /
+ * `strokeStyle` / `lineWidth` already set from the model.
+ */
+export function paintSdGlyph(kind, ctx, box) {
+    const { x0, y0, bw, bh, w, h } = box;
+    switch (kind) {
+        // ── The lifeline: a named head over a dashed spine (§17.3.4) ──────────
+        case 'lifeline': {
+            const head = umlLifelineHeadRect({ deserializedXYWH: [0, 0, w, h] });
+            if (!head)
+                return;
+            // The head is the BODY: a lifeline is created unfilled and unstroked
+            // (`presets.ts`), so the glyph fills with the element's own `fillColor`
+            // and outlines with its `strokeColor` — which is what keeps it
+            // recolourable from the ordinary shape toolbar. Drawn at the head's own
+            // rectangle and not at the inset one: the inset belongs to the COLUMN,
+            // which is 16 units wide and is not what is being outlined here.
+            solidRect(ctx, head.x, head.y, head.w, head.h);
+            // …and the spine, down the column's centre from the head's bottom edge.
+            // DASHED, and that is the whole notation: an unbroken line would read as
+            // a relationship rather than as the passage of time (§17.3.4). Lighter
+            // than the head, because it is a line and the head is a box.
+            const cx = w / 2;
+            const top = head.y + head.h;
+            //
+            // The dash and the width are scoped with `save`/`restore` rather than
+            // read back and re-set: both are part of the 2D drawing state, so the
+            // caller's pattern comes back whatever it was, and the glyph never calls
+            // `getLineDash` — which the SVG export's context (svgcanvas 2.6.0) does
+            // not implement. The pair is balanced inside this block, `finally`
+            // included, so the renderer's own save stack is left as it found it.
+            if (h > top) {
+                ctx.save();
+                try {
+                    ctx.setLineDash([...UML_LIFELINE_DASH]);
+                    ctx.lineWidth = UML_LIFELINE_SPINE_WIDTH;
+                    line(ctx, cx, top, cx, h);
+                }
+                finally {
+                    ctx.restore();
+                }
+            }
+            return;
+        }
+        // ── The destruction: a bare X (§17.2.4) ───────────────────────────────
+        // Two strokes and nothing else — the mark that says this participant's
+        // life ends here. The same drawing as `terminate` (§14.2.4) and kept a
+        // separate kind for the reason the roles are separate: a terminate kills a
+        // state MACHINE, a destruction ends one participant in one conversation.
+        case 'destruction':
+            if (bw > 0 && bh > 0) {
+                cross(ctx, x0 + bw / 2, y0 + bh / 2, (Math.min(bw, bh) / 2) * DESTRUCTION_REACH);
+            }
+            return;
+    }
+    /**
+     * Every kind this module claims is drawn above — narrowed to `never` only if
+     * the switch is exhaustive over {@link UmlSdGlyphKind}, so a kind added to
+     * the union without a picture stops the build rather than painting nothing.
+     */
+    const unhandled = kind;
+    void unhandled;
+}
+/** Whether the node renderer should hand this kind to {@link paintSdGlyph}. */
+export function isSdGlyphKind(kind) {
+    return kind === 'lifeline' || kind === 'destruction';
+}

package/dist/node/stm-glyphs.d.ts

@@ -0,0 +1,22 @@
+import type { UmlNodeKind } from '@formicoidea/labre-core/model';
+import type { GlyphBox } from './paint.js';
+/**
+ * The STATE MACHINE glyphs (§14.2.4) — the final state and the seven
+ * pseudostates a machine's transitions are routed through.
+ *
+ * The counterpart of `act-glyphs.ts`, and split out for the same reason. Two of
+ * the family are NOT here: a `state` is the native rounded rect with a
+ * compartment rule (drawn by the renderer's compartment branch, like a class),
+ * and a `choice` is the native diamond. And one more is elsewhere entirely —
+ * the INITIAL pseudostate is `act-glyphs.ts`'s filled disc, because §14.2.4 and
+ * §15.3.4 draw the same disc and mean the same thing by it.
+ */
+/** The kinds this module draws. */
+export type UmlStmGlyphKind = 'final-state' | 'junction' | 'shallow-history' | 'deep-history' | 'entry-point' | 'exit-point' | 'terminate';
+/**
+ * Paint one state machine mark, in the element-local frame, with `fillStyle` /
+ * `strokeStyle` / `lineWidth` already set from the model.
+ */
+export declare function paintStmGlyph(kind: UmlStmGlyphKind, ctx: CanvasRenderingContext2D, box: GlyphBox): void;
+/** Whether the node renderer should hand this kind to {@link paintStmGlyph}. */
+export declare function isStmGlyphKind(kind: UmlNodeKind): kind is UmlStmGlyphKind;

package/dist/node/stm-glyphs.js

@@ -0,0 +1,111 @@
+import { UML_FONT_FAMILY } from '../consts.js';
+import { cross, glyphText, hollowDisc, inkDisc } from './paint.js';
+/**
+ * The bull inside a final state's ring, as a fraction of the outer radius.
+ *
+ * The activity final's own number, and deliberately the same one: §14.2.4 and
+ * §15.3.4 draw the identical bullseye, and a reader who sees two different
+ * proportions on two diagrams will look for a meaning in the difference.
+ * The ROLES keep them apart for the audit; the picture must not.
+ */
+const BULLSEYE_BULL = 0.52;
+/** The reach of an exit point's and a terminate's cross, against the mark. */
+const CROSS_REACH = 0.66;
+/**
+ * How big the `H` of a history pseudostate is drawn, as a fraction of the
+ * circle's radius.
+ *
+ * Sized off the mark rather than off a font constant, so a history dragged
+ * bigger carries a bigger letter — and sized to sit INSIDE the rim: `H*` is two
+ * characters wide, so the number is the one that keeps the deeper of the two
+ * from touching the circle it is written in.
+ */
+const HISTORY_LETTER = 0.95;
+/**
+ * Paint one state machine mark, in the element-local frame, with `fillStyle` /
+ * `strokeStyle` / `lineWidth` already set from the model.
+ */
+export function paintStmGlyph(kind, ctx, box) {
+    const { x0, y0, x1, y1, bw, bh, w, h } = box;
+    const cx = w / 2;
+    const cy = h / 2;
+    const radius = Math.min(bw, bh) / 2;
+    switch (kind) {
+        // ── The final state: a bullseye (§14.2.4) ─────────────────────────────
+        // Drawn exactly as an activity final is, and a different metaclass all the
+        // same: this one is a vertex a transition lands on, that one stops every
+        // flow in an activity. The picture is shared; the role is not.
+        case 'final-state':
+            hollowDisc(ctx, cx, cy, radius);
+            inkDisc(ctx, cx, cy, radius * BULLSEYE_BULL);
+            return;
+        // ── The junction: a small filled dot (§14.2.4) ────────────────────────
+        // The smallest mark in the pack, and the plainest: it merely joins
+        // transitions, so it is a disc and nothing else. Told from an INITIAL — the
+        // same filled disc — by its size and by the edges running into it, which is
+        // exactly how §14.2.4 distinguishes them.
+        case 'junction':
+            inkDisc(ctx, cx, cy, radius);
+            return;
+        // ── The two histories: a circle with H, or with H* (§14.2.4) ──────────
+        // Shallow remembers which sub-state the machine was in; deep remembers the
+        // whole nesting, and the star is the entire difference on the page.
+        case 'shallow-history':
+        case 'deep-history':
+            hollowDisc(ctx, cx, cy, radius);
+            glyphText(ctx, kind === 'deep-history' ? 'H*' : 'H', cx, cy, radius * HISTORY_LETTER, UML_FONT_FAMILY);
+            return;
+        // ── The entry point: a small hollow circle (§14.2.4) ──────────────────
+        // Drawn ON the border of a composite state, saying "a transition may enter
+        // the sub-machine here". Hollow, and that is the whole of it: an entry
+        // point is a door, and a filled one would read as an initial node.
+        case 'entry-point':
+            hollowDisc(ctx, cx, cy, radius);
+            return;
+        // ── The exit point: the same circle with a cross in it (§14.2.4) ──────
+        case 'exit-point':
+            hollowDisc(ctx, cx, cy, radius);
+            cross(ctx, cx, cy, radius * CROSS_REACH);
+            return;
+        // ── The terminate: a bare X (§14.2.4) ─────────────────────────────────
+        // No circle, no box: §14.2.4 draws two crossed strokes and nothing else,
+        // and a rim round them would make it an exit point. The mark spans the
+        // whole element rather than a circle inscribed in it, so it reads at the
+        // small sizes a pseudostate is drawn at.
+        case 'terminate':
+            if (bw > 0 && bh > 0) {
+                // Corner to corner of the inset box, which is what "a bare X" is — and
+                // it stays an X at any aspect ratio, unlike a cross measured from one
+                // radius.
+                crossBox(ctx, x0, y0, x1, y1);
+            }
+            return;
+    }
+    /**
+     * Every kind this module claims is drawn above — `never` here only if the
+     * switch is exhaustive over {@link UmlStmGlyphKind}.
+     */
+    const unhandled = kind;
+    void unhandled;
+}
+/** The two diagonals of a rectangle, corner to corner. */
+function crossBox(ctx, x0, y0, x1, y1) {
+    ctx.beginPath();
+    ctx.moveTo(x0, y0);
+    ctx.lineTo(x1, y1);
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.moveTo(x1, y0);
+    ctx.lineTo(x0, y1);
+    ctx.stroke();
+}
+/** Whether the node renderer should hand this kind to {@link paintStmGlyph}. */
+export function isStmGlyphKind(kind) {
+    return (kind === 'final-state' ||
+        kind === 'junction' ||
+        kind === 'shallow-history' ||
+        kind === 'deep-history' ||
+        kind === 'entry-point' ||
+        kind === 'exit-point' ||
+        kind === 'terminate');
+}

package/dist/node/tier-metrics.d.ts

@@ -0,0 +1,38 @@
+import type { UmlTierWrap } from '../component.js';
+/** The type face a canvas text element is painted in. */
+export interface UmlTierFace {
+    fontFamily?: string;
+    fontSize?: number;
+    fontStyle?: string;
+    fontWeight?: string;
+}
+/**
+ * How the canvas renderer would break ONE line of this tier at `width`.
+ *
+ * The one DOM-aware measurement in the UML pack, and it is deliberately the
+ * renderer's own: `getFontString` builds the very string the text renderer sets
+ * on the canvas context and `wrapText` is the very function it wraps with
+ * (`gfx/text`'s `element-renderer`), so a compartment sized from this holds
+ * exactly the lines the reader ends up seeing. A re-implementation here — a
+ * word-break of our own, a line height of our own — would agree with the picture
+ * on the day it was written and drift on the first change to either.
+ *
+ * ## Why it is a function of the LINE and not of the tier
+ *
+ * Because that is the seam {@link umlTierLineCount} needs to stay pure: it owns
+ * "the author's newlines are lines too", this owns "and this one is painted as
+ * three". Splitting them is what lets the counting be tested against a fake
+ * wrapper in a `happy-dom` unit run, where `measureText` answers nothing useful.
+ *
+ * `width` is the COMPARTMENT's width — `w - 2 × inset` on the node — and not the
+ * tier element's current one: the text editor shrink-wraps the element it is
+ * mounted on while the author types, so the box on the model at commit time is
+ * the size of the words rather than of the compartment they are going back into.
+ *
+ * `undefined` for an element that states no face and for a width no text could
+ * be laid out in, and that is the honest answer rather than a guard: an element
+ * with no font is one nothing has painted, so there is no wrapping it HAS, and
+ * {@link umlTierLineCount} falls back to the author's own newlines — which is
+ * exactly what a pure fixture wants to be measured by.
+ */
+export declare function umlTierWrapper(face: UmlTierFace, width: number): UmlTierWrap | undefined;

package/dist/node/tier-metrics.js

@@ -0,0 +1,45 @@
+import { getFontString, wrapText } from '@formicoidea/labre-core/gfx/text';
+/**
+ * How the canvas renderer would break ONE line of this tier at `width`.
+ *
+ * The one DOM-aware measurement in the UML pack, and it is deliberately the
+ * renderer's own: `getFontString` builds the very string the text renderer sets
+ * on the canvas context and `wrapText` is the very function it wraps with
+ * (`gfx/text`'s `element-renderer`), so a compartment sized from this holds
+ * exactly the lines the reader ends up seeing. A re-implementation here — a
+ * word-break of our own, a line height of our own — would agree with the picture
+ * on the day it was written and drift on the first change to either.
+ *
+ * ## Why it is a function of the LINE and not of the tier
+ *
+ * Because that is the seam {@link umlTierLineCount} needs to stay pure: it owns
+ * "the author's newlines are lines too", this owns "and this one is painted as
+ * three". Splitting them is what lets the counting be tested against a fake
+ * wrapper in a `happy-dom` unit run, where `measureText` answers nothing useful.
+ *
+ * `width` is the COMPARTMENT's width — `w - 2 × inset` on the node — and not the
+ * tier element's current one: the text editor shrink-wraps the element it is
+ * mounted on while the author types, so the box on the model at commit time is
+ * the size of the words rather than of the compartment they are going back into.
+ *
+ * `undefined` for an element that states no face and for a width no text could
+ * be laid out in, and that is the honest answer rather than a guard: an element
+ * with no font is one nothing has painted, so there is no wrapping it HAS, and
+ * {@link umlTierLineCount} falls back to the author's own newlines — which is
+ * exactly what a pure fixture wants to be measured by.
+ */
+export function umlTierWrapper(face, width) {
+    const { fontFamily, fontSize, fontStyle, fontWeight } = face;
+    if (!fontFamily || typeof fontSize !== 'number' || !fontWeight) {
+        return undefined;
+    }
+    if (!(width > 0))
+        return undefined;
+    const font = getFontString({
+        fontFamily,
+        fontSize,
+        fontStyle: fontStyle ?? 'normal',
+        fontWeight,
+    });
+    return line => wrapText(line, font, width).split('\n').length;
+}