@formicoidea/labre-framework-c4 0.33.0

package/dist/morph.js

@@ -0,0 +1,229 @@
+import { morphLabel, } from '@formicoidea/labre-core/blocks/surface';
+import { C4NodeElementModel, GroupElementModel, TextElementModel, } from '@formicoidea/labre-core/model';
+import { c4CommandIcons, c4Commands } from './commands.js';
+import { NODE_LABEL } from './consts.js';
+import { c4MorphClears, c4MorphProps } from './presets.js';
+import { C4_ROLE, C4_ROLE_OF_KIND } from './roles.js';
+import { c4MorphedTypeLine } from './type-line.js';
+/**
+ * What a C4 artefact may BECOME — the declaration behind the "Change type"
+ * dropdown on a selected component's contextual toolbar.
+ *
+ * ## Families, and the one thing that makes them safe here
+ *
+ * A person and an external person are the same actor, said with a different
+ * ownership; a container, a database, a mobile app and a browser app are the
+ * same level of the model, drawn with different silhouettes. Realising halfway
+ * through a container diagram that the box should have been the cylinder is
+ * modelling, not a mistake — and the only way through it today is delete,
+ * re-draw, re-connect, and retype three tiers of words.
+ *
+ * The three families below are DATA. Nothing derives them, and the role tree
+ * would have been the wrong source in the same way it is for BPMN: `roleIsA`
+ * makes `c4:database` a `c4:container`, so a derivation would reach in one
+ * direction and not the other, and it says nothing at all about
+ * `person`/`person-ext`, which are ONE role and still two artefacts.
+ *
+ * What makes these three families cheap is a property they happen to have and
+ * a later one may not: **every member of a family lays its words out
+ * identically**. `c4TierBoxes` differs on exactly one thing — the person's head
+ * clearance, which both people share — and `NODE_SIZE` on exactly one, the
+ * person's taller silhouette, which both people also share. So a morph inside
+ * a family needs no re-layout at all: the three tiers stay where they are, the
+ * group's derived box stays what it was, and the geometry a morph promises not
+ * to touch is genuinely untouched. `component` is deliberately in NO family
+ * partly for that reason and mostly for a better one: a component is a part of
+ * a container, not another drawing of one, and offering the swap would invite
+ * a diagram that mixes two levels of the model — the one thing C4 exists to
+ * stop. The two boundaries are frames rather than artefacts and are excluded
+ * for the reason `roles.ts` gives.
+ */
+export const C4_MORPH_FAMILIES = [
+    // Declaration order is menu order, and each family opens on the INTERNAL,
+    // undecorated member: the plain artefact is the honest first draft and the
+    // variant is the refinement — the same call `commands.ts` makes about the
+    // order of the senior sub-menu.
+    ['person', 'person-ext'],
+    ['system', 'system-ext'],
+    ['container', 'database', 'mobile', 'browser'],
+];
+/**
+ * The creation command that draws each kind, keyed BY that kind.
+ *
+ * Derived from `telemetry.element`, which is where the kind is already written
+ * down (`node:database`) and is documented as a historical value that must not
+ * be renamed. Deriving rather than restating is what stops a second table of
+ * labels and icons drifting from the one the sub-menu and the catalogue read.
+ */
+const NODE_COMMANDS = new Map(c4Commands.flatMap(command => {
+    const element = command.telemetry?.element;
+    return element?.startsWith('node:')
+        ? [[element.slice('node:'.length), command]]
+        : [];
+}));
+/** A kind's wording: the creation command's own key and English. */
+function labelOf(kind) {
+    const command = NODE_COMMANDS.get(kind);
+    return {
+        key: command?.labelKey,
+        fallback: command?.labelFallback ?? kind,
+    };
+}
+/** A kind's icon: the creation command's own, reused rather than redrawn. */
+function iconOf(kind) {
+    const iconKey = NODE_COMMANDS.get(kind)?.iconKey;
+    return (iconKey && c4CommandIcons[iconKey]) || c4CommandIcons['c4.container'];
+}
+/* ── Resolving the composite ───────────────────────────────────────────── */
+/**
+ * The `c4Node` shape a selected GROUP is the component of — `undefined` when
+ * the group is not one.
+ *
+ * A C4 component is a native `group` holding the shape and its three lines of
+ * words (PO recette, 28/08/2026), so what a click selects is the group and what
+ * carries `kind` is the shape. This is the whole of the indirection, and it is
+ * also the gate: a plain group somebody lassoed round three rectangles, a
+ * Wardley component (a group of a circle and its label) and a group of two C4
+ * components all answer `undefined`, so none of them is ever offered the menu.
+ *
+ * TWO shapes is a refusal rather than a first-wins pick. A group holding two
+ * components is a group somebody made of two components — morphing "it" would
+ * mean picking one of them by document order, and the honest answer to an
+ * ambiguous selection is the same one the generic module gives to a mixed
+ * family: nothing.
+ */
+export function c4NodeOfComponent(model) {
+    if (!(model instanceof GroupElementModel))
+        return undefined;
+    let found;
+    for (const child of model.childElements) {
+        if (!(child instanceof C4NodeElementModel))
+            continue;
+        if (found)
+            return undefined;
+        found = child;
+    }
+    return found;
+}
+/** One tier of a component, by the role it carries. */
+function tierOf(model, role) {
+    if (!(model instanceof GroupElementModel))
+        return undefined;
+    return model.childElements.find((child) => child instanceof TextElementModel && child.role === role);
+}
+/**
+ * Write one tier, in place, if the decision says to.
+ *
+ * `decide` reads the tier as it is STORED and answers with the whole line to
+ * write, or `null` for "this text is the author's, leave it". The comparison
+ * that decides whether anything happens is against the TRIMMED text — the same
+ * string `decide` was given — because a decision made on `'[Container]  '`
+ * returns `'[Person]'`, and comparing that against the untrimmed original
+ * would call a no-op a change and spend a transaction rewriting the padding
+ * away.
+ *
+ * In place, in one transaction, and inside the caller's `captureSync`: the
+ * `Y.Text` instance is what any bound editor holds, so it is mutated rather
+ * than replaced, and the rewrite is part of the same single ctrl+z as the kind
+ * that made it necessary.
+ */
+function rewriteTier(model, role, decide) {
+    const tier = tierOf(model, role);
+    if (!tier || tier.isLocked())
+        return;
+    const text = tier.text.toString().trim();
+    const next = decide(text);
+    if (next === null || next === text)
+        return;
+    tier.surface.store.transact(() => {
+        tier.text.delete(0, tier.text.length);
+        tier.text.insert(0, next);
+    });
+}
+/**
+ * Keep the component's own words saying what the shape now is — the
+ * `afterMorph` half of the C4 spec.
+ *
+ * ## The two tiers a morph may touch, and the one rule they share
+ *
+ * The rule is the same for both and it is deliberately timid: rewrite ONLY
+ * what the notation itself wrote, and never what an author typed. A morph is
+ * not allowed to take away words somebody put on the picture.
+ *
+ * - **The type line.** `[Container: Java]` is two statements in one: the
+ *   bracketed word is derived from `kind`, the technology is the author's.
+ *   The watcher that keeps the halves apart (`node/type-line-watcher.ts`) only
+ *   runs when somebody finishes TYPING into the tier, so a morph — which
+ *   changes the kind with nobody touching the words — has to make the same
+ *   statement for itself. {@link c4MorphedTypeLine} owns that decision.
+ * - **The title.** This is the one a user actually sees go wrong, and it is
+ *   the one the type line does NOT cover: `NODE_LABEL` differs inside the
+ *   container family (`Container` / `Database` / `Mobile app` / `Web app`), so
+ *   an untouched component morphed from a container to a database keeps a
+ *   cylinder captioned "Container" — a picture flatly contradicting its own
+ *   name. The rule is placeholder→placeholder and nothing else: the title is
+ *   rewritten only when it is EXACTLY the source kind's own prompt, which is
+ *   what a component nobody has named still carries. A component called
+ *   "Customer database" keeps that name whatever it becomes, which is the PO's
+ *   "the label is intact" for every title that is real content.
+ */
+function rewriteTiers(model, from, to) {
+    rewriteTier(model, C4_ROLE['type-line'], text => c4MorphedTypeLine(from, to, text));
+    rewriteTier(model, C4_ROLE.title, text => c4MorphedTitle(from, to, text));
+}
+/**
+ * The name a component should carry once its shape has morphed — or `null`
+ * when the name is the AUTHOR's and must not be touched.
+ *
+ * Exactly one case rewrites: the title is the source kind's own creation
+ * prompt, letter for letter, which is what a component nobody has named still
+ * says. Everything else — a name typed over it, a prompt with a word added, a
+ * cleared title, another kind's prompt — is content, and content survives a
+ * morph untouched.
+ *
+ * This is the tier the type line does NOT cover, and the only one where a user
+ * sees the contradiction: {@link NODE_LABEL} differs across the container
+ * family where `C4_TYPE_WORD` does not, so a fresh container morphed to a
+ * database would otherwise be a cylinder captioned "Container".
+ *
+ * Pure and total over every string, like its sibling in `type-line.ts`: the
+ * input is a canvas text element somebody may have typed anything into.
+ */
+export function c4MorphedTitle(from, to, rawText) {
+    return (rawText ?? '').trim() === NODE_LABEL[from] ? NODE_LABEL[to] : null;
+}
+/**
+ * C4's morph declaration, handed to the generic `morphToolbarConfig`.
+ *
+ * `modelType` is the native `GroupElementModel` and not `C4NodeElementModel`,
+ * because the group is what a click on a component selects. Everything that
+ * makes that safe is in {@link c4NodeOfComponent}: the toolbar's own
+ * homogeneity test only proves that every selected element is A group, and the
+ * resolution proves that every one of them is one of OURS.
+ *
+ * `propsOf` is the shipped creation builder minus `type` / `xywh` / `text`
+ * ({@link c4MorphProps}), so the palette and the morph cannot disagree about
+ * what a database looks like; `clearOf` is empty on today's table and derived
+ * rather than assumed so (`presets.ts`).
+ */
+export const C4_MORPH_SPEC = {
+    framework: 'c4',
+    families: C4_MORPH_FAMILIES,
+    modelType: GroupElementModel,
+    resolveTarget: c4NodeOfComponent,
+    kindOf: (model) => model instanceof C4NodeElementModel ? model.kind : undefined,
+    // The SHAPE's role, which is the only role a C4 artefact has: the group
+    // carries none by design, and the three tiers carry roles of their own
+    // (`c4:title`, `c4:type-line`, `c4:description`) that say which LINE they
+    // are and not what kind of box they belong to — so a morph never rewrites
+    // them. Note that this table collapses: `person` and `person-ext` are both
+    // `c4:person`, so a morph inside those two families reports the same role
+    // twice, which is the truth — what changed is the ownership, not the meaning.
+    roleOf: kind => C4_ROLE_OF_KIND[kind],
+    propsOf: c4MorphProps,
+    clearOf: c4MorphClears,
+    afterMorph: rewriteTiers,
+    labelOf,
+    iconOf,
+    label: morphLabel('com.labre.morph.toolbar.label', 'Change type'),
+};

package/dist/node/node-renderer.d.ts

@@ -0,0 +1,6 @@
+import { type ElementRenderer } from '@formicoidea/labre-core/blocks/surface';
+import { type C4NodeElementModel } from '@formicoidea/labre-core/model';
+export declare const c4Node: ElementRenderer<C4NodeElementModel>;
+export declare const C4NodeRendererExtension: import("@formicoidea/labre-core/store").ExtensionType & {
+    identifier: import("@formicoidea/labre-core/_pkgs/global/di").ServiceIdentifier<ElementRenderer<C4NodeElementModel>>;
+};

package/dist/node/node-renderer.js

@@ -0,0 +1,304 @@
+import { ElementRendererExtension, } from '@formicoidea/labre-core/blocks/surface';
+import { shape as shapeRenderer } from '@formicoidea/labre-core/gfx/shape';
+import { DefaultTheme, } from '@formicoidea/labre-core/model';
+import { NODE_RADIUS } from '../consts.js';
+/**
+ * Renderer for a C4 node — the glyph layer, and nothing else.
+ *
+ * Every path, radius and offset below is read off the PO's reference model
+ * (`C4Model_default.svg`, a Visio export of the official stencil) and expressed
+ * as a FRACTION of the node box, so a resized element keeps the stencil's own
+ * proportions instead of the stencil's own pixels.
+ *
+ * ## What the native shape does, and what this file does
+ *
+ * The native shape renderer runs FIRST and owns the fill, the stroke, the theme
+ * and the TITLE — the element's inner text, editable in place exactly like any
+ * other shape's. This file then paints, in the element-local frame, only the
+ * silhouettes a rectangle cannot be: `person` / `person-ext` (a circular head
+ * fused into a strongly rounded body), `database` (a cylinder), `mobile` (a
+ * phone: a dark bezel with a lighter screen inset in it, a speaker slot and a
+ * button) and `browser` (a window: a dark frame, a chrome band with three dots
+ * and an address bar, and a lighter screen under it). For all five the native
+ * rect is created unfilled and unstroked — the glyph IS the body.
+ *
+ * ## The two tiers this file no longer paints
+ *
+ * It used to paint the type line and the description under the title, off two
+ * fields on the model. It does not any more, and the difference is the PO's
+ * recette of 28/08/2026: a C4 component is the shape and its own words, GROUPED
+ * — the type line and the description are real canvas TEXT elements, created
+ * beside the shape and edited in place like any other text. Painted tiers could
+ * only ever be read, and a picture an architect cannot type on is a form waiting
+ * to be invented. `actions.ts` places them; the text renderer draws them.
+ *
+ * `system`, `system-ext`, `container` and `component` have no glyph at all: the
+ * stencil draws them as plain SQUARE-cornered rectangles, and what tells them
+ * apart is the COLOUR they are created in (`NODE_PALETTE`) plus the role stamped
+ * on them. That is C4's own answer, and it is why this pack has nine kinds and
+ * five element roles rather than nine glyphs.
+ *
+ * Both fill and stroke are read off the MODEL, never off the palette table: a
+ * node's colours are editable from the shape toolbar like any other shape's, and
+ * a glyph that painted the table's blue would silently ignore the user's own
+ * choice. The palette is what the creation site SEEDS them with.
+ */
+/**
+ * The kinds C4 draws BARE — a plain native shape with nothing on it.
+ *
+ * Written as the short list rather than the long one, so that the glyph kinds
+ * are DERIVED from the model's union instead of restated beside it: a kind added
+ * to `C4NodeKind` is a glyph kind by default, and the exhaustiveness check at the
+ * bottom of {@link paintGlyph} then refuses to compile until it is drawn.
+ */
+const BARE_KINDS = {
+    system: true,
+    'system-ext': true,
+    container: true,
+    component: true,
+};
+const isBare = (kind) => Object.hasOwn(BARE_KINDS, kind);
+const TAU = Math.PI * 2;
+/* ── The stencil's geometry, as fractions of the node box ──────────────── */
+/**
+ * The person (`mID 1`), measured off its single path.
+ *
+ * The head arc runs between `x=68.89` and `x=37.41` on the body's top edge with
+ * `rx=26.362`, `ry=26.504` and `large-arc-flag=1`; solving the SVG centre
+ * equation puts its centre 21.263 units ABOVE that edge, so the head stands
+ * `26.504 + 21.263 = 47.767` clear of a body 74.409 tall — a silhouette 122.18
+ * tall in total, which is what {@link PERSON_BOX} is twice.
+ */
+const PERSON = {
+    /** Head radius, as a fraction of the box width, and of its height. */
+    headOfWidth: 26.362 / 106.3,
+    headOfHeight: 26.504 / 122.18,
+    /** Where the body's top edge sits, as a multiple of the head radius. */
+    bodyTopPerHead: 47.767 / 26.433,
+    /** The body's corner radius (`19.842`), as a fraction of the box width. */
+    radiusOfWidth: 19.842 / 106.3,
+};
+/** The cylinder's lid and floor: `ry ≈ 9.97` of a 74.409-tall box. */
+const DATABASE_RY = 9.97 / 74.409;
+/** The phone (`mID 6`): a screen inset in a bezel, a speaker slot, a button. */
+const MOBILE = {
+    screen: {
+        x: 9.2126 / 106.3,
+        y: 2.766 / 74.409,
+        w: 87.874 / 106.3,
+        h: 68.882 / 74.409,
+    },
+    screenRadius: 1.4173 / 106.3,
+    /** The home button, centred in the LEFT bezel column. */
+    button: { x: 4.985 / 106.3, y: 38.039 / 74.409, r: 3.0301 / 106.3 },
+    /** The speaker slot, a vertical line down the RIGHT bezel column. */
+    speaker: { x: 101.411 / 106.3, y0: 29.851 / 74.409, y1: 44.561 / 74.409 },
+};
+/** The browser window (`mID 11`): a chrome band over a screen. */
+const BROWSER = {
+    screen: {
+        x: 2.126 / 106.3,
+        y: 9.214 / 74.409,
+        w: 102.05 / 106.3,
+        h: 63.071 / 74.409,
+    },
+    screenRadius: 1.4173 / 106.3,
+    dot: { y: 4.766 / 74.409, r: 3.0301 / 106.3 },
+    dotsX: [6.5001 / 106.3, 13.978 / 106.3, 21.455 / 106.3],
+    bar: {
+        x: 26.169 / 106.3,
+        y: 1.731 / 74.409,
+        w: 77.862 / 106.3,
+        h: 6.07 / 74.409,
+        r: 2.8346 / 106.3,
+    },
+};
+/* ── Paths ─────────────────────────────────────────────────────────────── */
+/**
+ * Trace a rounded rectangle, and say whether there was one to trace.
+ *
+ * An element can be dragged to nothing: the resize manager takes the absolute
+ * value of the dragged extents but sets no minimum size, and every dimension
+ * here has the stroke width subtracted from it first — so a 2-unit border on a
+ * 1-unit box gives -0.5. `arcTo` throws `IndexSizeError` on a negative radius
+ * rather than clamping, and the surface render loop wraps no renderer in a
+ * `try`, so one such throw aborts the rest of the frame with an unbalanced save
+ * stack. Returning `false` lets the caller skip the fill and the stroke too,
+ * rather than painting a degenerate path.
+ */
+function roundedRectPath(ctx, x, y, w, h, r) {
+    if (!(w > 0) || !(h > 0))
+        return false;
+    const rr = Math.max(0, Math.min(r, w / 2, h / 2));
+    ctx.beginPath();
+    ctx.moveTo(x + rr, y);
+    ctx.arcTo(x + w, y, x + w, y + h, rr);
+    ctx.arcTo(x + w, y + h, x, y + h, rr);
+    ctx.arcTo(x, y + h, x, y, rr);
+    ctx.arcTo(x, y, x + w, y, rr);
+    ctx.closePath();
+    return true;
+}
+/** Fill and outline a rounded rectangle, skipping a degenerate one entirely. */
+function fillStrokeRect(ctx, x, y, w, h, r) {
+    if (!roundedRectPath(ctx, x, y, w, h, r))
+        return;
+    ctx.fill();
+    ctx.stroke();
+}
+/* ── The glyphs ────────────────────────────────────────────────────────── */
+/**
+ * Paint one glyph kind, in the element-local frame, with `fillStyle` /
+ * `strokeStyle` / `lineWidth` already set from the model.
+ *
+ * @param inset half the stroke width — the body box is drawn inside it, so the
+ * outline lands within the element's bounds rather than straddling them.
+ */
+function paintGlyph(kind, ctx, fill, stroke, w, h, inset) {
+    const cx = w / 2;
+    const x0 = inset;
+    const y0 = inset;
+    const x1 = w - inset;
+    const y1 = h - inset;
+    const bw = x1 - x0;
+    const bh = y1 - y0;
+    // ── The person: a head fused into a strongly rounded body ────────────
+    if (kind === 'person' || kind === 'person-ext') {
+        // A single radius from whichever dimension is the tighter, so the head stays
+        // CIRCULAR at any aspect ratio the author drags the element to. At the
+        // stencil's own ratio the two agree to within half a unit, which is the
+        // whole reason the person keeps a box of its own.
+        const headR = Math.max(0, Math.min(w * PERSON.headOfWidth, h * PERSON.headOfHeight));
+        const headY = y0 + headR;
+        const bodyTop = y0 + headR * PERSON.bodyTopPerHead;
+        // The head goes FIRST so the body covers its lower arc: what is left is a
+        // head standing clear of a pair of shoulders, which is the stencil's own
+        // person — its path draws exactly this, the body's top edge running into the
+        // head arc and back out of it.
+        if (headR > 0) {
+            ctx.beginPath();
+            ctx.arc(cx, headY, headR, 0, TAU);
+            ctx.fill();
+            ctx.stroke();
+        }
+        fillStrokeRect(ctx, x0, bodyTop, bw, y1 - bodyTop, w * PERSON.radiusOfWidth);
+        return;
+    }
+    // ── The database: a cylinder ─────────────────────────────────────────
+    if (kind === 'database') {
+        // Both radii subtract the stroke first, so both go NEGATIVE on an element
+        // dragged narrower (or shorter) than its own border — and a negative radius
+        // is the one thing `ellipse` throws on. Clamped where they are computed,
+        // exactly as the BPMN data store's are.
+        const rx = Math.max(0, bw / 2);
+        const ry = Math.max(0, bh * DATABASE_RY);
+        const mx = (x0 + x1) / 2;
+        const top = y0 + ry;
+        const bottom = y1 - ry;
+        ctx.beginPath();
+        ctx.moveTo(x0, top);
+        ctx.lineTo(x0, bottom);
+        // Floor, left to right through the lowest point.
+        ctx.ellipse(mx, bottom, rx, ry, 0, Math.PI, 0, true);
+        ctx.lineTo(x1, top);
+        // Back up the front of the lid, right to left.
+        ctx.ellipse(mx, top, rx, ry, 0, 0, Math.PI, false);
+        ctx.closePath();
+        ctx.fill();
+        ctx.stroke();
+        // The lid's own far edge, which the body path does not include — the rim the
+        // stencil draws as two extra `.st10` arcs.
+        ctx.beginPath();
+        ctx.ellipse(mx, top, rx, ry, 0, 0, TAU);
+        ctx.stroke();
+        return;
+    }
+    // ── The two devices: a dark frame with a lighter screen inset in it ──
+    // The stencil paints the OUTER rectangle in the darker of the node's two
+    // colours and the screen in the lighter, which is the opposite of a band
+    // painted over a body — so both are drawn here in full, and the native rect
+    // under them paints nothing.
+    ctx.fillStyle = stroke;
+    ctx.strokeStyle = stroke;
+    // Every INNER feature below is placed against the element box (`0…w`, `0…h`)
+    // rather than against the stroke-inset one the outer rectangle uses. The
+    // stencil states them that way — its screen has equal bezel columns left and
+    // right — and shifting them by half a border would make those columns unequal
+    // by exactly that half, which is visible at the sizes these are drawn at.
+    if (kind === 'mobile') {
+        fillStrokeRect(ctx, x0, y0, bw, bh, NODE_RADIUS.mobile);
+        ctx.fillStyle = fill;
+        fillStrokeRect(ctx, w * MOBILE.screen.x, h * MOBILE.screen.y, w * MOBILE.screen.w, h * MOBILE.screen.h, w * MOBILE.screenRadius);
+        // The button, in the left bezel column…
+        const buttonR = Math.max(0, w * MOBILE.button.r);
+        if (buttonR > 0) {
+            ctx.beginPath();
+            ctx.arc(w * MOBILE.button.x, h * MOBILE.button.y, buttonR, 0, TAU);
+            ctx.fill();
+        }
+        // …and the speaker slot down the right one.
+        ctx.strokeStyle = fill;
+        ctx.beginPath();
+        ctx.moveTo(w * MOBILE.speaker.x, h * MOBILE.speaker.y0);
+        ctx.lineTo(w * MOBILE.speaker.x, h * MOBILE.speaker.y1);
+        ctx.stroke();
+        return;
+    }
+    if (kind === 'browser') {
+        fillStrokeRect(ctx, x0, y0, bw, bh, NODE_RADIUS.browser);
+        ctx.fillStyle = fill;
+        fillStrokeRect(ctx, w * BROWSER.screen.x, h * BROWSER.screen.y, w * BROWSER.screen.w, h * BROWSER.screen.h, w * BROWSER.screenRadius);
+        // The three window dots, and the address bar beside them.
+        const dotR = Math.max(0, w * BROWSER.dot.r);
+        const dotY = h * BROWSER.dot.y;
+        if (dotR > 0) {
+            for (const dotX of BROWSER.dotsX) {
+                ctx.beginPath();
+                ctx.arc(w * dotX, dotY, dotR, 0, TAU);
+                ctx.fill();
+            }
+        }
+        fillStrokeRect(ctx, w * BROWSER.bar.x, h * BROWSER.bar.y, w * BROWSER.bar.w, h * BROWSER.bar.h, w * BROWSER.bar.r);
+        return;
+    }
+    /**
+     * Every glyph kind is drawn above, and this is what keeps that true: `kind` is
+     * narrowed to `never` here only if the branches are exhaustive over
+     * {@link C4GlyphKind}, so a kind added to the model's union without a picture
+     * of its own stops the build.
+     *
+     * Which is the whole point of closing the last branch rather than letting it
+     * fall through. A renderer that silently paints a browser band on somebody's
+     * new artefact is worse than one that paints nothing: the first is a wrong
+     * picture nobody is told about, the second is a missing one everybody sees.
+     */
+    const unhandled = kind;
+    void unhandled;
+}
+export const c4Node = (model, ctx, matrix, renderer, rc, bound) => {
+    const [, , w, h] = model.deserializedXYWH;
+    const cx = w / 2;
+    const cy = h / 2;
+    // Capture the element-local transform BEFORE the shape renderer mutates the
+    // matrix, so the glyph can be drawn in the same space afterwards.
+    const glyphMatrix = DOMMatrix.fromMatrix(matrix)
+        .translateSelf(cx, cy)
+        .rotateSelf(model.rotate)
+        .translateSelf(-cx, -cy);
+    // Native shape: fill, stroke, theme and the TITLE, all handled natively.
+    shapeRenderer(model, ctx, matrix, renderer, rc, bound);
+    const stroke = renderer.getColorValue(model.strokeColor, DefaultTheme.shapeStrokeColor, true);
+    const fill = renderer.getColorValue(model.fillColor, DefaultTheme.shapeFillColor, true);
+    const strokeWidth = model.strokeWidth || 1;
+    ctx.setTransform(glyphMatrix);
+    ctx.strokeStyle = stroke;
+    ctx.fillStyle = fill;
+    ctx.lineWidth = strokeWidth;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+    const kind = model.kind;
+    if (!isBare(kind)) {
+        paintGlyph(kind, ctx, fill, stroke, w, h, strokeWidth / 2);
+    }
+};
+export const C4NodeRendererExtension = ElementRendererExtension('c4Node', c4Node);

package/dist/node/node-view.d.ts

@@ -0,0 +1,45 @@
+import { type C4NodeElementModel } from '@formicoidea/labre-core/model';
+import { GfxElementModelView } from '@formicoidea/labre-core/std/gfx';
+/**
+ * View for a C4 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
+ *
+ * Since the PO's follow-up to the recette of 28/08/2026 a C4 element's name is a
+ * canvas `text` child stamped `c4:title`, grouped with the shape, and 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 title 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, and the shape's
+ * text path is never entered.
+ *
+ * The seam is cheap because the platform already had both halves: the title is
+ * found through the group (`c4ComponentSiblings`, the same pure resolution the
+ * exporter uses) and opened through the text package's own public mount. No new
+ * editor, no new selection handling, no reimplementation of anything.
+ *
+ * ## …except on an element that has no title child
+ *
+ * One drawn before this change keeps its name in the shape's inner text, which
+ * is where that iteration put it, and `mountShapeTextEditor` is then exactly
+ * right — it is still that element's name. The same test the exporter makes
+ * (`c4StatedName`), so the words a double-click edits are the words the file
+ * comes out with. A node whose group was released and whose title was deleted
+ * lands here too, and gets the old behaviour rather than nothing at all.
+ *
+ * Hit testing is `C4NodeElementModel.includesPoint`'s doing: an empty unfilled
+ * shape would normally be a target only near its border, and the override forces
+ * the interior test, so the whole body answers this gesture on all nine kinds.
+ */
+export declare class C4NodeView extends GfxElementModelView<C4NodeElementModel> {
+    #private;
+    static type: string;
+    onCreated(): void;
+}

package/dist/node/node-view.js

@@ -0,0 +1,80 @@
+import { mountTextElementEditor } from '@formicoidea/labre-core/gfx/text';
+import { GroupElementModel, ShapeElementModel, TextElementModel, } from '@formicoidea/labre-core/model';
+import { mountShapeTextEditor } from '@formicoidea/labre-core/gfx/shape';
+import { GfxElementModelView } from '@formicoidea/labre-core/std/gfx';
+import { c4ComponentSiblings } from '../component.js';
+import { C4_ROLE } from '../roles.js';
+/**
+ * View for a C4 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
+ *
+ * Since the PO's follow-up to the recette of 28/08/2026 a C4 element's name is a
+ * canvas `text` child stamped `c4:title`, grouped with the shape, and 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 title 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, and the shape's
+ * text path is never entered.
+ *
+ * The seam is cheap because the platform already had both halves: the title is
+ * found through the group (`c4ComponentSiblings`, the same pure resolution the
+ * exporter uses) and opened through the text package's own public mount. No new
+ * editor, no new selection handling, no reimplementation of anything.
+ *
+ * ## …except on an element that has no title child
+ *
+ * One drawn before this change keeps its name in the shape's inner text, which
+ * is where that iteration put it, and `mountShapeTextEditor` is then exactly
+ * right — it is still that element's name. The same test the exporter makes
+ * (`c4StatedName`), so the words a double-click edits are the words the file
+ * comes out with. A node whose group was released and whose title was deleted
+ * lands here too, and gets the old behaviour rather than nothing at all.
+ *
+ * Hit testing is `C4NodeElementModel.includesPoint`'s doing: an empty unfilled
+ * shape would normally be a target only near its border, and the override forces
+ * the interior test, so the whole body answers this gesture on all nine kinds.
+ */
+export class C4NodeView extends GfxElementModelView {
+    static { this.type = 'c4Node'; }
+    onCreated() {
+        super.onCreated();
+        this.on('dblclick', () => {
+            const edgeless = this.std.view.getBlock(this.std.store.root.id);
+            if (!edgeless || this.model.isLocked())
+                return;
+            const title = this.#title();
+            if (title) {
+                if (!title.isLocked())
+                    mountTextElementEditor(title, edgeless);
+                return;
+            }
+            // No title child: the name really is the shape's own text.
+            if (this.model instanceof ShapeElementModel) {
+                mountShapeTextEditor(this.model, edgeless);
+            }
+        });
+    }
+    /** The `c4:title` text grouped with this shape, if there is one. */
+    #title() {
+        const surface = this.gfx.surface;
+        if (!surface)
+            return null;
+        const groups = surface.elementModels.filter((element) => element instanceof GroupElementModel);
+        for (const siblingId of c4ComponentSiblings(this.model.id, groups)) {
+            const sibling = surface.getElementById(siblingId);
+            if (sibling instanceof TextElementModel &&
+                sibling.role === C4_ROLE.title) {
+                return sibling;
+            }
+        }
+        return null;
+    }
+}