@formicoidea/labre-framework-c4 0.59.0 → 0.60.0

package/dist/actions.d.ts

@@ -59,9 +59,10 @@ export declare function createC4Board(std: BlockStdScope): void;
  * `variantProp` in `background.ts`). The name is document data from that moment
  * on — renaming a boundary never contradicts its variant.
  *
- * ## The role and the variant are written HERE, together, or not at all
+ * ## The role and the variant are written together, or not at all
  *
- * This is the ONE place either field is written, and it writes both from the same
+ * `c4BoundaryElement` (`toolbox.ts`) is the ONE place either field is written,
+ * for this action and for a host with no editor, and it writes both from the same
  * argument: the `variant` the renderer and the exporter read, and the child ROLE
  * the zoom rules read ({@link C4_BOUNDARY_ROLE}). They are two spellings of one
  * fact — which level this frame is drawn at — and nothing downstream can tell

package/dist/actions.js

@@ -1,15 +1,13 @@
 import { DefaultTool } from '@formicoidea/labre-core/blocks/surface';
 import { ConnectorTool } from '@formicoidea/labre-core/gfx/connector';
-import { C4BoardElementModel, ConnectorMode, FontFamily, FontStyle, FontWeight, PointStyle, StrokeStyle, TextAlign, } from '@formicoidea/labre-core/model';
+import { C4BoardElementModel, ConnectorMode, PointStyle, StrokeStyle, } from '@formicoidea/labre-core/model';
 import { translateKey } from '@formicoidea/labre-core/shared/services';
 import { downloadBlob } from '@formicoidea/labre-core/shared/utils';
-import { Bound } from '@formicoidea/labre-core/global/gfx';
 import { GfxControllerIdentifier, } from '@formicoidea/labre-core/std/gfx';
-import { c4TierBoxes } from './component.js';
-import { BOARD_REF_HEIGHT, BOARD_REF_WIDTH, BOUNDARY_LABEL, boundaryLabelKey, BOUNDARY_REF_HEIGHT, BOUNDARY_REF_WIDTH, DESCRIPTION_FONT_SIZE, DESCRIPTION_PLACEHOLDER, DESCRIPTION_PLACEHOLDER_KEY, NODE_LABEL, nodeLabelKey, NODE_PALETTE, NODE_SIZE, RELATIONSHIP_STROKE, RELATIONSHIP_WIDTH, TITLE_FONT_SIZE, TYPE_FONT_SIZE, } from './consts.js';
+import { BOARD_REF_HEIGHT, BOARD_REF_WIDTH, BOUNDARY_LABEL, boundaryLabelKey, BOUNDARY_REF_HEIGHT, BOUNDARY_REF_WIDTH, DESCRIPTION_PLACEHOLDER, DESCRIPTION_PLACEHOLDER_KEY, NODE_LABEL, nodeLabelKey, NODE_SIZE, RELATIONSHIP_STROKE, RELATIONSHIP_WIDTH, } from './consts.js';
 import { C4_MERMAID_EXPORT, c4BoardFrom, c4SafeFilename } from './interchange.js';
-import { c4NodeProps } from './presets.js';
 import { C4_BOUNDARY_ROLE, C4_ROLE, c4BoardRoleKey } from './roles.js';
+import { c4BoardElement, c4BoundaryElement, c4NodeElements } from './toolbox.js';
 import { c4TypePlaceholder } from './type-line.js';
 /**
  * Standalone creation/activation actions for the C4 toolbox — the same shape
@@ -24,38 +22,6 @@ function finish(gfx, id) {
     gfx.selection.set({ elements: [id], editing: false });
     // Keep the palette open (native sub-menu behaviour).
 }
-/**
- * One of a component's two written tiers, as a canvas TEXT element.
- *
- * Every style prop is passed EXPLICITLY, and that is not belt and braces: both
- * creation APIs run the new props through `EditPropsStore.applyLastProps('text',
- * …)`, which merges whatever the user last set on a free text element
- * underneath — a 24px face, a colour from another diagram, a left alignment.
- * Explicit props win the merge, so the only ones that survive it are the ones
- * written here. A type line inheriting the colour of the last sticky note
- * somebody typed would be a notation set by accident.
- *
- * `hasMaxWidth` is what keeps a long sentence inside the element instead of
- * running out over the canvas: the box wraps at its own width and grows
- * downward, and the group grows with it, so a component always contains its own
- * words.
- */
-function addTier(surface, index, role, text, fontSize, fontWeight, color, box) {
-    return surface.addElement({
-        type: 'text',
-        role,
-        text,
-        index,
-        color,
-        fontFamily: FontFamily.Inter,
-        fontSize,
-        fontWeight,
-        fontStyle: FontStyle.Normal,
-        textAlign: TextAlign.Center,
-        hasMaxWidth: true,
-        xywh: new Bound(box.x, box.y, box.w, box.h).serialize(),
-    });
-}
 /**
  * Create a C4 component centred on the viewport: the shape, its THREE written
  * tiers, and the GROUP that makes the four one thing.
@@ -109,64 +75,34 @@ export function createC4Node(std, kind) {
         return;
     const { w, h } = NODE_SIZE[kind];
     const { centerX: cx, centerY: cy } = gfx.viewport;
-    const x = cx - w / 2;
-    const y = cy - h / 2;
-    const paint = NODE_PALETTE[kind];
-    const shapeId = surface.addElement({
-        // Every prop the kind is worth, from the ONE table the morph also reads
-        // (`presets.ts`) — so a component drawn here and one morphed into this kind
-        // from the toolbar are the same element, whatever either is restyled to.
-        // NO `text`: the name is the `c4:title` child below, and the shape is a
-        // body and nothing else.
-        ...c4NodeProps(kind, { xywh: new Bound(x, y, w, h).serialize() }),
-        index: gfx.layer.generateIndex(),
-    });
-    const boxes = c4TierBoxes(kind, x, y, w, h);
-    const titleId = addTier(surface, gfx.layer.generateIndex(), C4_ROLE.title, 
-    // The kind's own label — `Person`, `Web app`. A name and a prompt at once,
-    // which is why the exporter writes it through unchanged. Resolved HERE,
-    // once, exactly like a BPMN node's caption (`nodeLabelKey`): content from
-    // the moment it lands, so a component drawn in a translated host starts in
-    // that language.
-    translateKey(std, nodeLabelKey(kind), NODE_LABEL[kind]), TITLE_FONT_SIZE, 
-    // The one tier with weight on it: it is the heading of the box, and at 20px
-    // against a 16px sentence the size alone does not carry that.
-    FontWeight.SemiBold, paint.text, boxes.title);
-    const typeLineId = addTier(surface, gfx.layer.generateIndex(), C4_ROLE['type-line'], 
-    // Resolved at placement, like the title above: `c4TypePlaceholder` reads
-    // through the host's catalogue for both halves of the prompt (the
-    // bracketed word AND the technology slot), and `C4TypeLineWatcher`
-    // (`node/type-line-watcher.ts`) now recomputes the canonical line the same
-    // way on every edit commit, so a translated seed here is no longer
-    // reverted to English the first time an author opens and closes the
-    // tier's editor without typing anything. `technologyOfTypeLine` and
-    // `c4StatedTechnology` (`component.ts`) recognise EITHER the English
-    // literal or the host's own resolved word (`type-line.ts`).
-    c4TypePlaceholder(kind, std), TYPE_FONT_SIZE, FontWeight.Regular, paint.text, boxes.typeLine);
-    const descriptionId = addTier(surface, gfx.layer.generateIndex(), C4_ROLE.description, 
-    // Resolved at placement like the title above. `c4StatedDescription`
-    // (`component.ts`) still compares the stored text against the ENGLISH
-    // `DESCRIPTION_PLACEHOLDER` to read "nothing stated yet" — this lot's own
-    // French proposal for this key is the identical word ('description'), so
-    // the shipped catalogue keeps that comparison true; a host catalogue that
-    // chose a different wording would regain the same residual risk the type
-    // line carries permanently (see `notes`).
-    translateKey(std, DESCRIPTION_PLACEHOLDER_KEY, DESCRIPTION_PLACEHOLDER), DESCRIPTION_FONT_SIZE, FontWeight.Regular, paint.text, boxes.description);
-    const groupId = surface.addElement({
-        type: 'group',
-        index: gfx.layer.generateIndex(),
-        // A plain record is a legal `children`: the group's own `propsToY` takes the
-        // KEYS and forces every value to `true`.
-        children: {
-            [shapeId]: true,
-            [titleId]: true,
-            [typeLineId]: true,
-            [descriptionId]: true,
-        },
-        // No title, deliberately. The group renderer paints one only while the
-        // component is selected, and a component announcing itself as "Group 3"
-        // above its own name is a label nobody wrote.
+    // The five elements come from the ONE assembly a host with no editor also
+    // calls (`toolbox.ts`, `docs/adr/0045`), so a component placed here and one
+    // placed by a host are the same element. What only an editor has stays
+    // here: the viewport centre, the seeds resolved in the host's language
+    // (`docs/adr/0023`: a creation site writes the resolved value) and the layer
+    // indexes. The indexes are stability statements, not layering ones: the
+    // five are written in painting order, the shape first and the words above
+    // it, because two elements sharing an index sort by nanoid.
+    const elements = c4NodeElements(kind, { x: cx - w / 2, y: cy - h / 2 }, {
+        title: translateKey(std, nodeLabelKey(kind), NODE_LABEL[kind]),
+        typeLine: c4TypePlaceholder(kind, std),
+        description: translateKey(std, DESCRIPTION_PLACEHOLDER_KEY, DESCRIPTION_PLACEHOLDER),
     });
+    const minted = new Map();
+    for (const { id: local, ...props } of elements) {
+        if (props.type === 'group') {
+            // A plain record is a legal `children`: the group's own `propsToY` takes
+            // the KEYS and forces every value to `true`.
+            props.children = Object.fromEntries(Object.keys(props.children).map(child => [
+                minted.get(child) ?? child,
+                true,
+            ]));
+        }
+        minted.set(local, surface.addElement({ ...props, index: gfx.layer.generateIndex() }));
+    }
+    const groupId = minted.get(`${kind}:group`);
+    if (!groupId)
+        return;
     // The GROUP is what the gesture produced, so the group is what is selected: a
     // click selects the component, a double-click descends into the tier under
     // the pointer. That is the whole recette in one selection.
@@ -179,21 +115,15 @@ export function createC4Board(std) {
     if (!surface)
         return;
     const { centerX: cx, centerY: cy } = gfx.viewport;
-    const id = surface.addElement({
-        type: 'c4Board',
-        // The FRAME the elements are drawn on, and a role of its own: a rule written
-        // on the artefacts must never fall on the sheet holding them.
-        role: C4_ROLE.board,
-        // The sheet's own name, written HERE rather than left to the model's
-        // default so that a board drawn in a translated host starts in that
-        // language (#183). It is content from that moment on — the title is
-        // editable on a double-click — so it is asked for once and never
-        // re-resolved. The key is the BOARD ROLE's: the two are the same noun, and
-        // a second key would ask a host to word "C4 diagram" twice.
-        name: translateKey(std, c4BoardRoleKey, 'C4 diagram'),
-        xywh: new Bound(cx - BOARD_REF_WIDTH / 2, cy - BOARD_REF_HEIGHT / 2, BOARD_REF_WIDTH, BOARD_REF_HEIGHT).serialize(),
-    });
-    finish(gfx, id);
+    const { id: _local, ...props } = c4BoardElement({ x: cx - BOARD_REF_WIDTH / 2, y: cy - BOARD_REF_HEIGHT / 2 }, 
+    // The sheet's own name, written HERE rather than left to the model's
+    // default so that a board drawn in a translated host starts in that
+    // language (#183). It is content from that moment on — the title is
+    // editable on a double-click — so it is asked for once and never
+    // re-resolved. The key is the BOARD ROLE's: the two are the same noun, and
+    // a second key would ask a host to word "C4 diagram" twice.
+    translateKey(std, c4BoardRoleKey, 'C4 diagram'));
+    finish(gfx, surface.addElement(props));
 }
 /**
  * Create a C4 boundary centred on the viewport.
@@ -204,9 +134,10 @@ export function createC4Board(std) {
  * `variantProp` in `background.ts`). The name is document data from that moment
  * on — renaming a boundary never contradicts its variant.
  *
- * ## The role and the variant are written HERE, together, or not at all
+ * ## The role and the variant are written together, or not at all
  *
- * This is the ONE place either field is written, and it writes both from the same
+ * `c4BoundaryElement` (`toolbox.ts`) is the ONE place either field is written,
+ * for this action and for a host with no editor, and it writes both from the same
  * argument: the `variant` the renderer and the exporter read, and the child ROLE
  * the zoom rules read ({@link C4_BOUNDARY_ROLE}). They are two spellings of one
  * fact — which level this frame is drawn at — and nothing downstream can tell
@@ -222,20 +153,12 @@ export function createC4Boundary(std, variant) {
     if (!surface)
         return;
     const { centerX: cx, centerY: cy } = gfx.viewport;
-    const id = surface.addElement({
-        type: 'c4Boundary',
-        // The CHILD role matching the variant — never the parent, which is now the
-        // role of a boundary drawn before the split and of nothing this editor
-        // creates. See the note above.
-        role: C4_BOUNDARY_ROLE[variant],
-        // Resolved HERE, once — the boundary's name is exported verbatim
-        // (`export.ts`) with no placeholder comparison, so it is as safe to
-        // translate as a component's title.
-        name: translateKey(std, boundaryLabelKey(variant), BOUNDARY_LABEL[variant]),
-        variant,
-        xywh: new Bound(cx - BOUNDARY_REF_WIDTH / 2, cy - BOUNDARY_REF_HEIGHT / 2, BOUNDARY_REF_WIDTH, BOUNDARY_REF_HEIGHT).serialize(),
-    });
-    finish(gfx, id);
+    const { id: _local, ...props } = c4BoundaryElement(variant, { x: cx - BOUNDARY_REF_WIDTH / 2, y: cy - BOUNDARY_REF_HEIGHT / 2 }, 
+    // Resolved HERE, once — the boundary's name is exported verbatim
+    // (`export.ts`) with no placeholder comparison, so it is as safe to
+    // translate as a component's title.
+    translateKey(std, boundaryLabelKey(variant), BOUNDARY_LABEL[variant]));
+    finish(gfx, surface.addElement(props));
 }
 /**
  * Arm the native connector tool, pre-styled for a C4 relationship: STRAIGHT,

package/dist/component.d.ts

@@ -1,79 +1,4 @@
-import type { C4NodeKind } from '@formicoidea/labre-core/model';
-/**
- * A C4 component — the SHAPE and its own words, grouped.
- *
- * ## What the PO's recette of 28/08/2026 changed
- *
- * A C4 element used to be one shape carrying a title, plus two fields edited in
- * a "Details" popover and painted underneath by the renderer. The verdict was
- * that the popover is the wrong mechanism: an architect writes ON the picture.
- * So a component is now a native `group` holding three elements —
- *
- *  1. the `c4Node` shape, whose native inner text is the TITLE;
- *  2. a canvas `text` element carrying the type line, `[Container: Java]`;
- *  3. a canvas `text` element carrying the description —
- *
- * and every one of the three is edited in place, on a double-click, exactly like
- * any other words on the canvas. There is no form left.
- *
- * ## This module
- *
- * The two questions that arise from that arrangement, both PURE and both free of
- * `std`, so the creation site, the exporter, the commit hook and a test all
- * answer them the same way:
- *
- *  - **where do the tiers go**, given a node's box ({@link c4TierBoxes});
- *  - **which text belongs to which node**, given a flat list of elements
- *    ({@link c4ComponentTiers}) — resolved by GROUP MEMBERSHIP plus the role
- *    stamped on each text, never by position in `children`.
- *
- * The role stays on the SHAPE alone; the group carries none (`roles.ts`).
- */
-/** A box in the same units and origin as the node's own. */
-export interface C4TierBox {
-    x: number;
-    y: number;
-    w: number;
-    h: number;
-}
-export interface C4TierBoxes {
-    title: C4TierBox;
-    typeLine: C4TierBox;
-    description: C4TierBox;
-}
-/**
- * The three text boxes of a component, laid out against the node's own box.
- *
- * ## The rhythm
- *
- * A margin, the name over two lines, a small gap, the type line, a wider gap,
- * the description over two, and the same margin again — which is exactly what
- * {@link NODE_BOX} is tall enough for, because the box is derived from this
- * stack rather than the stack fitted into the box. So the default element is
- * neither cramped nor half empty, and the two gaps say what they mean: the name
- * and its type line are one heading, the sentence under them is a second
- * statement.
- *
- * The tiers are stacked by walking DOWN — each one placed under the last plus
- * its gap — rather than by six independent offsets. Six offsets is six chances
- * for two tiers to overlap; a walk cannot produce one.
- *
- * ## The person
- *
- * `bodyTop` is the one asymmetry and it is the stencil's: a person's head stands
- * clear ABOVE a body of the standard height, and its words are laid out in the
- * BODY (`v:textRect` is the body box exactly), so the whole stack starts below
- * the head rather than across it.
- *
- * ## What this is not
- *
- * A creation-time answer and nothing more. The tiers are real elements from the
- * moment they are drawn: an author who moves one has moved it, and nothing here
- * runs again to put it back. It is also proportional in the one direction that
- * matters — a node dragged taller keeps its margins where they were, because
- * they are absolutes; only the person's head, which is a picture, scales.
- */
-export declare function c4TierBoxes(kind: C4NodeKind, x: number, y: number, w: number, h: number): C4TierBoxes;
+export { type C4TierBox, type C4TierBoxes, c4TierBoxes } from './tier-boxes.js';
 /**
  * The little a resolution needs to know about a text element — an id, a role,
  * and whatever it says.

package/dist/component.js

@@ -1,59 +1,7 @@
-import { DESCRIPTION_FONT_SIZE, DESCRIPTION_LINES, DESCRIPTION_PLACEHOLDER, PERSON_BODY_TOP, TIER_LINE_HEIGHT, TIER_MARGIN, TIER_SIDE_INSET, TITLE_FONT_SIZE, TITLE_LINES, TITLE_TYPE_GAP, TYPE_DESCRIPTION_GAP, TYPE_FONT_SIZE, } from './consts.js';
+import { DESCRIPTION_PLACEHOLDER } from './consts.js';
 import { C4_ROLE } from './roles.js';
 import { technologyOfTypeLine, TYPE_TECHNOLOGY_PLACEHOLDER } from './type-line.js';
-/**
- * The three text boxes of a component, laid out against the node's own box.
- *
- * ## The rhythm
- *
- * A margin, the name over two lines, a small gap, the type line, a wider gap,
- * the description over two, and the same margin again — which is exactly what
- * {@link NODE_BOX} is tall enough for, because the box is derived from this
- * stack rather than the stack fitted into the box. So the default element is
- * neither cramped nor half empty, and the two gaps say what they mean: the name
- * and its type line are one heading, the sentence under them is a second
- * statement.
- *
- * The tiers are stacked by walking DOWN — each one placed under the last plus
- * its gap — rather than by six independent offsets. Six offsets is six chances
- * for two tiers to overlap; a walk cannot produce one.
- *
- * ## The person
- *
- * `bodyTop` is the one asymmetry and it is the stencil's: a person's head stands
- * clear ABOVE a body of the standard height, and its words are laid out in the
- * BODY (`v:textRect` is the body box exactly), so the whole stack starts below
- * the head rather than across it.
- *
- * ## What this is not
- *
- * A creation-time answer and nothing more. The tiers are real elements from the
- * moment they are drawn: an author who moves one has moved it, and nothing here
- * runs again to put it back. It is also proportional in the one direction that
- * matters — a node dragged taller keeps its margins where they were, because
- * they are absolutes; only the person's head, which is a picture, scales.
- */
-export function c4TierBoxes(kind, x, y, w, h) {
-    const bodyTop = kind === 'person' || kind === 'person-ext' ? h * PERSON_BODY_TOP : 0;
-    const inset = w * TIER_SIDE_INSET;
-    const width = w - inset * 2;
-    let top = bodyTop + TIER_MARGIN;
-    const tier = (fontSize, lines, gapAfter) => {
-        const box = {
-            x: x + inset,
-            y: y + top,
-            w: width,
-            h: fontSize * TIER_LINE_HEIGHT * lines,
-        };
-        top += box.h + gapAfter;
-        return box;
-    };
-    return {
-        title: tier(TITLE_FONT_SIZE, TITLE_LINES, TITLE_TYPE_GAP),
-        typeLine: tier(TYPE_FONT_SIZE, 1, TYPE_DESCRIPTION_GAP),
-        description: tier(DESCRIPTION_FONT_SIZE, DESCRIPTION_LINES, 0),
-    };
-}
+export { c4TierBoxes } from './tier-boxes.js';
 /**
  * The tiers of the component a node belongs to — `{}` when it belongs to none.
  *

package/dist/consts.d.ts

@@ -303,7 +303,7 @@ export declare const BOARD_MARGIN = 24;
  * board's metrics, and so the declaration keeps reading it from where it always
  * did — under its own name, since a margin that is a painted band is a band.
  */
-export { C4_BOARD_TITLE_BAND_HEIGHT } from '@formicoidea/labre-core/model';
+export { C4_BOARD_TITLE_BAND_HEIGHT } from '@formicoidea/labre-core/model/headless';
 /**
  * The boundary's frame and its name, at the stencil's own values ×2 (`.st20`
  * and `.st8` in the reference model).

package/dist/consts.js

@@ -1,4 +1,4 @@
-import { NOTATION_NEUTRALS } from '@formicoidea/labre-core/shared/consts';
+import { NOTATION_NEUTRALS } from '@formicoidea/labre-core/shared/headless';
 /**
  * Visual constants for the C4 pack.
  *
@@ -349,7 +349,7 @@ export const BOARD_MARGIN = 24;
  * board's metrics, and so the declaration keeps reading it from where it always
  * did — under its own name, since a margin that is a painted band is a band.
  */
-export { C4_BOARD_TITLE_BAND_HEIGHT } from '@formicoidea/labre-core/model';
+export { C4_BOARD_TITLE_BAND_HEIGHT } from '@formicoidea/labre-core/model/headless';
 /* ── The boundary ──────────────────────────────────────────────────────── */
 /**
  * The boundary's frame and its name, at the stencil's own values ×2 (`.st20`

package/dist/index.d.ts

@@ -10,6 +10,7 @@ export { C4_ROLE, C4_ROLE_OF_KIND, C4_ROLES, type C4Role, type C4RoleId, } from
 export { c4BoardsForExport, c4ExportBoardOf } from './actions.js';
 export { type C4ExportBoard, C4_MERMAID_OF_KIND, type C4MermaidMapping, exportC4Mermaid, toMermaidAlias, toMermaidText, } from './export.js';
 export { C4_INTERCHANGE, C4_MERMAID_EXPORT, C4_MERMAID_EXTENSION, C4_MERMAID_FORMAT, C4_MERMAID_MIME, c4BoardFrom, c4SafeFilename, } from './interchange.js';
+export { C4_TOOLBOX, c4BoardElement, c4BoundaryElement, c4NodeElements, type C4NodeTexts, c4RelationshipElement, } from './toolbox.js';
 export { C4_ELEMENT_MATRIX, C4_RELATIONSHIP_MATRIX, C4_RULES, } from './rules.js';
 export { c4CommandIcons, c4Commands } from './commands.js';
 export { c4TranslationEntries } from './translations.js';

package/dist/index.js

@@ -44,6 +44,8 @@ export { C4_MERMAID_OF_KIND, exportC4Mermaid, toMermaidAlias, toMermaidText, } f
 // mermaid OUT. Exported whole so a host can ask what C4 can read and write
 // without mounting an editor, and call it without one either.
 export { C4_INTERCHANGE, C4_MERMAID_EXPORT, C4_MERMAID_EXTENSION, C4_MERMAID_FORMAT, C4_MERMAID_MIME, c4BoardFrom, c4SafeFilename, } from './interchange.js';
+// The toolbar as pure builders (`docs/adr/0045`), also on `./interchange`.
+export { C4_TOOLBOX, c4BoardElement, c4BoundaryElement, c4NodeElements, c4RelationshipElement, } from './toolbox.js';
 export { C4_ELEMENT_MATRIX, C4_RELATIONSHIP_MATRIX, C4_RULES, } from './rules.js';
 // The toolbox, for the host that composes the command registry and the
 // translation-key manifest out of the frameworks it installed (see

package/dist/interchange-headless.d.ts

@@ -35,3 +35,4 @@ export declare const C4_MERMAID_FORMAT: InterchangeFormat;
  * `safe-filename-parity.unit.spec.ts`.
  */
 export declare function c4SafeFilename(raw: string | undefined): string;
+export { C4_TOOLBOX, c4BoardElement, c4BoundaryElement, c4NodeElements, type C4NodeTexts, c4RelationshipElement, } from './toolbox.js';

package/dist/interchange-headless.js

@@ -41,3 +41,6 @@ export const C4_MERMAID_FORMAT = {
 export function c4SafeFilename(raw) {
     return safeFilename(raw, 'diagram');
 }
+// The toolbar as pure builders (`docs/adr/0045`): what a host with no editor
+// places to draw the very elements a user places from the toolbar.
+export { C4_TOOLBOX, c4BoardElement, c4BoundaryElement, c4NodeElements, c4RelationshipElement, } from './toolbox.js';

package/dist/presets.d.ts

@@ -1,4 +1,4 @@
-import { type C4NodeKind } from '@formicoidea/labre-core/model';
+import type { C4NodeKind } from '@formicoidea/labre-core/model';
 /**
  * What a C4 shape IS, as props — the ONE description the creation site and the
  * morph both read.

package/dist/presets.js

@@ -1,4 +1,4 @@
-import { FontFamily, ShapeStyle, StrokeStyle, TextAlign, } from '@formicoidea/labre-core/model';
+import { FontFamily, ShapeStyle, StrokeStyle, TextAlign, } from '@formicoidea/labre-core/model/headless';
 import { NODE_PALETTE, NODE_RADIUS, NODE_STROKE_WIDTH, TITLE_FONT_SIZE, } from './consts.js';
 import { C4_ROLE_OF_KIND } from './roles.js';
 /**

package/dist/tier-boxes.d.ts

@@ -0,0 +1,76 @@
+import type { C4NodeKind } from '@formicoidea/labre-core/model';
+/**
+ * A C4 component — the SHAPE and its own words, grouped.
+ *
+ * ## What the PO's recette of 28/08/2026 changed
+ *
+ * A C4 element used to be one shape carrying a title, plus two fields edited in
+ * a "Details" popover and painted underneath by the renderer. The verdict was
+ * that the popover is the wrong mechanism: an architect writes ON the picture.
+ * So a component is now a native `group` holding three elements —
+ *
+ *  1. the `c4Node` shape, whose native inner text is the TITLE;
+ *  2. a canvas `text` element carrying the type line, `[Container: Java]`;
+ *  3. a canvas `text` element carrying the description —
+ *
+ * and every one of the three is edited in place, on a double-click, exactly like
+ * any other words on the canvas. There is no form left.
+ *
+ * ## This module
+ *
+ * The two questions that arise from that arrangement, both PURE and both free of
+ * `std`, so the creation site, the exporter, the commit hook and a test all
+ * answer them the same way:
+ *
+ *  - **where do the tiers go**, given a node's box ({@link c4TierBoxes});
+ *  - **which text belongs to which node**, given a flat list of elements
+ *    ({@link c4ComponentTiers}) — resolved by GROUP MEMBERSHIP plus the role
+ *    stamped on each text, never by position in `children`.
+ *
+ * The role stays on the SHAPE alone; the group carries none (`roles.ts`).
+ */
+/** A box in the same units and origin as the node's own. */
+export interface C4TierBox {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+export interface C4TierBoxes {
+    title: C4TierBox;
+    typeLine: C4TierBox;
+    description: C4TierBox;
+}
+/**
+ * The three text boxes of a component, laid out against the node's own box.
+ *
+ * ## The rhythm
+ *
+ * A margin, the name over two lines, a small gap, the type line, a wider gap,
+ * the description over two, and the same margin again — which is exactly what
+ * {@link NODE_BOX} is tall enough for, because the box is derived from this
+ * stack rather than the stack fitted into the box. So the default element is
+ * neither cramped nor half empty, and the two gaps say what they mean: the name
+ * and its type line are one heading, the sentence under them is a second
+ * statement.
+ *
+ * The tiers are stacked by walking DOWN — each one placed under the last plus
+ * its gap — rather than by six independent offsets. Six offsets is six chances
+ * for two tiers to overlap; a walk cannot produce one.
+ *
+ * ## The person
+ *
+ * `bodyTop` is the one asymmetry and it is the stencil's: a person's head stands
+ * clear ABOVE a body of the standard height, and its words are laid out in the
+ * BODY (`v:textRect` is the body box exactly), so the whole stack starts below
+ * the head rather than across it.
+ *
+ * ## What this is not
+ *
+ * A creation-time answer and nothing more. The tiers are real elements from the
+ * moment they are drawn: an author who moves one has moved it, and nothing here
+ * runs again to put it back. It is also proportional in the one direction that
+ * matters — a node dragged taller keeps its margins where they were, because
+ * they are absolutes; only the person's head, which is a picture, scales.
+ */
+export declare function c4TierBoxes(kind: C4NodeKind, x: number, y: number, w: number, h: number): C4TierBoxes;

package/dist/tier-boxes.js

@@ -0,0 +1,54 @@
+import { DESCRIPTION_FONT_SIZE, DESCRIPTION_LINES, PERSON_BODY_TOP, TIER_LINE_HEIGHT, TIER_MARGIN, TIER_SIDE_INSET, TITLE_FONT_SIZE, TITLE_LINES, TITLE_TYPE_GAP, TYPE_DESCRIPTION_GAP, TYPE_FONT_SIZE, } from './consts.js';
+/**
+ * The three text boxes of a component, laid out against the node's own box.
+ *
+ * ## The rhythm
+ *
+ * A margin, the name over two lines, a small gap, the type line, a wider gap,
+ * the description over two, and the same margin again — which is exactly what
+ * {@link NODE_BOX} is tall enough for, because the box is derived from this
+ * stack rather than the stack fitted into the box. So the default element is
+ * neither cramped nor half empty, and the two gaps say what they mean: the name
+ * and its type line are one heading, the sentence under them is a second
+ * statement.
+ *
+ * The tiers are stacked by walking DOWN — each one placed under the last plus
+ * its gap — rather than by six independent offsets. Six offsets is six chances
+ * for two tiers to overlap; a walk cannot produce one.
+ *
+ * ## The person
+ *
+ * `bodyTop` is the one asymmetry and it is the stencil's: a person's head stands
+ * clear ABOVE a body of the standard height, and its words are laid out in the
+ * BODY (`v:textRect` is the body box exactly), so the whole stack starts below
+ * the head rather than across it.
+ *
+ * ## What this is not
+ *
+ * A creation-time answer and nothing more. The tiers are real elements from the
+ * moment they are drawn: an author who moves one has moved it, and nothing here
+ * runs again to put it back. It is also proportional in the one direction that
+ * matters — a node dragged taller keeps its margins where they were, because
+ * they are absolutes; only the person's head, which is a picture, scales.
+ */
+export function c4TierBoxes(kind, x, y, w, h) {
+    const bodyTop = kind === 'person' || kind === 'person-ext' ? h * PERSON_BODY_TOP : 0;
+    const inset = w * TIER_SIDE_INSET;
+    const width = w - inset * 2;
+    let top = bodyTop + TIER_MARGIN;
+    const tier = (fontSize, lines, gapAfter) => {
+        const box = {
+            x: x + inset,
+            y: y + top,
+            w: width,
+            h: fontSize * TIER_LINE_HEIGHT * lines,
+        };
+        top += box.h + gapAfter;
+        return box;
+    };
+    return {
+        title: tier(TITLE_FONT_SIZE, TITLE_LINES, TITLE_TYPE_GAP),
+        typeLine: tier(TYPE_FONT_SIZE, 1, TYPE_DESCRIPTION_GAP),
+        description: tier(DESCRIPTION_FONT_SIZE, DESCRIPTION_LINES, 0),
+    };
+}

package/dist/toolbox.d.ts

@@ -0,0 +1,33 @@
+import type { FrameworkToolbox, SerializedElementProps, ToolboxPoint } from '@formicoidea/labre-core/interchange';
+import type { C4BoundaryVariant, C4NodeKind } from '@formicoidea/labre-core/model';
+/** The text slots of a component, in reading order. */
+export interface C4NodeTexts {
+    /** The name; the kind's English label when absent. */
+    title?: string;
+    /** The technology of a container or component (`Java`, `PostgreSQL`). */
+    technology?: string;
+    /**
+     * The whole middle tier, verbatim: the editor's creation site passes the
+     * prompt resolved in the host's language (`c4TypePlaceholder`). Wins over
+     * `technology`.
+     */
+    typeLine?: string;
+    description?: string;
+}
+/**
+ * A C4 component at `at` (its top-left): the shape, its three tiers and the
+ * group that makes them one thing — the five elements `createC4Node`
+ * documents. Ids are local (`<local>:shape`…), the group last.
+ */
+export declare function c4NodeElements(kind: C4NodeKind, at: ToolboxPoint, texts?: C4NodeTexts, local?: string): SerializedElementProps[];
+/** The sheet one C4 diagram is drawn on, at `at`. */
+export declare function c4BoardElement(at: ToolboxPoint, name?: string, local?: string): SerializedElementProps;
+/**
+ * A boundary at `at`. The variant and the child role are written together,
+ * from the same argument, as `createC4Boundary` requires.
+ */
+export declare function c4BoundaryElement(variant: C4BoundaryVariant, at: ToolboxPoint, name?: string, local?: string): SerializedElementProps;
+/** The connector the relationship tool is armed with, between two ends. */
+export declare function c4RelationshipElement(from: string, to: string, label?: string): SerializedElementProps;
+/** Every item of the C4 toolbar, in the toolbar's order. */
+export declare const C4_TOOLBOX: FrameworkToolbox;

package/dist/toolbox.js

@@ -0,0 +1,181 @@
+import { ConnectorMode, FontFamily, FontStyle, FontWeight, PointStyle, StrokeStyle, TextAlign, } from '@formicoidea/labre-core/model/headless';
+import { Bound } from '@formicoidea/labre-core/global/gfx';
+import { c4CommandsManifest } from './commands-manifest.js';
+import { c4TierBoxes } from './tier-boxes.js';
+import { BOARD_REF_HEIGHT, BOARD_REF_WIDTH, BOUNDARY_LABEL, BOUNDARY_REF_HEIGHT, BOUNDARY_REF_WIDTH, DESCRIPTION_FONT_SIZE, DESCRIPTION_PLACEHOLDER, NODE_LABEL, NODE_PALETTE, NODE_SIZE, RELATIONSHIP_STROKE, RELATIONSHIP_WIDTH, TITLE_FONT_SIZE, TYPE_FONT_SIZE, } from './consts.js';
+import { c4NodeProps } from './presets.js';
+import { C4_BOUNDARY_ROLE, C4_ROLE } from './roles.js';
+import { C4_TYPE_PLACEHOLDER, C4_TYPE_WORD, typeLineOf } from './type-word.js';
+/**
+ * C4's toolbar as pure builders (`docs/adr/0045`): what `createC4Node`,
+ * `createC4Board`, `createC4Boundary` and the relationship tool place, with no
+ * editor behind them. The actions call these, so a component built here and
+ * one placed from the toolbar are the same five elements.
+ */
+/**
+ * One of a component's three written tiers, as a canvas TEXT element.
+ *
+ * Every style prop is passed EXPLICITLY, and that is not belt and braces: both
+ * creation APIs run the new props through `EditPropsStore.applyLastProps('text',
+ * …)`, which merges whatever the user last set on a free text element
+ * underneath — a 24px face, a colour from another diagram, a left alignment.
+ * Explicit props win the merge, so the only ones that survive it are the ones
+ * written here. A type line inheriting the colour of the last sticky note
+ * somebody typed would be a notation set by accident.
+ *
+ * `hasMaxWidth` is what keeps a long sentence inside the element instead of
+ * running out over the canvas: the box wraps at its own width and grows
+ * downward, and the group grows with it, so a component always contains its own
+ * words.
+ */
+function tier(id, role, text, fontSize, fontWeight, color, box) {
+    return {
+        type: 'text',
+        id,
+        role,
+        text,
+        color,
+        fontFamily: FontFamily.Inter,
+        fontSize,
+        fontWeight,
+        fontStyle: FontStyle.Normal,
+        textAlign: TextAlign.Center,
+        hasMaxWidth: true,
+        xywh: new Bound(box.x, box.y, box.w, box.h).serialize(),
+    };
+}
+/**
+ * A C4 component at `at` (its top-left): the shape, its three tiers and the
+ * group that makes them one thing — the five elements `createC4Node`
+ * documents. Ids are local (`<local>:shape`…), the group last.
+ */
+export function c4NodeElements(kind, at, texts = {}, local = kind) {
+    const { w, h } = NODE_SIZE[kind];
+    const paint = NODE_PALETTE[kind];
+    const boxes = c4TierBoxes(kind, at.x, at.y, w, h);
+    const id = (part) => `${local}:${part}`;
+    const technology = texts.technology?.trim();
+    const members = [
+        {
+            ...c4NodeProps(kind, { xywh: new Bound(at.x, at.y, w, h).serialize() }),
+            id: id('shape'),
+        },
+        tier(id('title'), C4_ROLE.title, texts.title?.trim() || NODE_LABEL[kind], TITLE_FONT_SIZE, FontWeight.SemiBold, paint.text, boxes.title),
+        tier(id('type-line'), C4_ROLE['type-line'], texts.typeLine ??
+            (technology
+                ? typeLineOf(C4_TYPE_WORD[kind], technology)
+                : C4_TYPE_PLACEHOLDER[kind]), TYPE_FONT_SIZE, FontWeight.Regular, paint.text, boxes.typeLine),
+        tier(id('description'), C4_ROLE.description, texts.description?.trim() || DESCRIPTION_PLACEHOLDER, DESCRIPTION_FONT_SIZE, FontWeight.Regular, paint.text, boxes.description),
+    ];
+    return [
+        ...members,
+        {
+            type: 'group',
+            id: id('group'),
+            children: Object.fromEntries(members.map(m => [m.id, true])),
+        },
+    ];
+}
+/** The sheet one C4 diagram is drawn on, at `at`. */
+export function c4BoardElement(at, name = 'C4 diagram', local = 'board') {
+    return {
+        type: 'c4Board',
+        id: local,
+        // The FRAME the elements are drawn on, and a role of its own: a rule
+        // written on the artefacts must never fall on the sheet holding them.
+        role: C4_ROLE.board,
+        name,
+        xywh: new Bound(at.x, at.y, BOARD_REF_WIDTH, BOARD_REF_HEIGHT).serialize(),
+    };
+}
+/**
+ * A boundary at `at`. The variant and the child role are written together,
+ * from the same argument, as `createC4Boundary` requires.
+ */
+export function c4BoundaryElement(variant, at, name = BOUNDARY_LABEL[variant], local = `${variant}-boundary`) {
+    return {
+        type: 'c4Boundary',
+        id: local,
+        // The CHILD role matching the variant — never the parent, which is the
+        // role of a boundary drawn before the split and of nothing created now.
+        role: C4_BOUNDARY_ROLE[variant],
+        name,
+        variant,
+        xywh: new Bound(at.x, at.y, BOUNDARY_REF_WIDTH, BOUNDARY_REF_HEIGHT).serialize(),
+    };
+}
+/** The connector the relationship tool is armed with, between two ends. */
+export function c4RelationshipElement(from, to, label) {
+    return {
+        type: 'connector',
+        mode: ConnectorMode.Straight,
+        role: C4_ROLE.relationship,
+        stroke: RELATIONSHIP_STROKE,
+        strokeStyle: StrokeStyle.Dash,
+        strokeWidth: RELATIONSHIP_WIDTH,
+        frontEndpointStyle: PointStyle.None,
+        rearEndpointStyle: PointStyle.Triangle,
+        source: { id: from },
+        target: { id: to },
+        ...(label?.trim() ? { text: label.trim() } : {}),
+    };
+}
+/** The toolbar command's label, so a host names an item as the toolbar does. */
+function label(commandId) {
+    const row = c4CommandsManifest.find(r => r.id === commandId);
+    return {
+        labelKey: row?.labelKey ?? commandId,
+        labelFallback: row?.labelFallback ?? commandId,
+    };
+}
+const NODE_COMMANDS = {
+    person: 'c4.addPerson',
+    'person-ext': 'c4.addPersonExt',
+    system: 'c4.addSystem',
+    'system-ext': 'c4.addSystemExt',
+    container: 'c4.addContainer',
+    component: 'c4.addComponent',
+    database: 'c4.addDatabase',
+    mobile: 'c4.addMobile',
+    browser: 'c4.addBrowser',
+};
+const nodeItem = (kind) => ({
+    id: kind,
+    ...label(NODE_COMMANDS[kind]),
+    texts: ['title', 'technology', 'description'],
+    size: NODE_SIZE[kind],
+    build: (at, texts, local) => c4NodeElements(kind, at, texts, local),
+});
+const boundaryItem = (variant) => ({
+    id: `${variant}-boundary`,
+    ...label(variant === 'system' ? 'c4.addSystemBoundary' : 'c4.addContainerBoundary'),
+    texts: ['name'],
+    size: { w: BOUNDARY_REF_WIDTH, h: BOUNDARY_REF_HEIGHT },
+    build: (at, texts, local) => [
+        c4BoundaryElement(variant, at, texts?.name?.trim() || undefined, local),
+    ],
+});
+const relationship = {
+    id: 'relationship',
+    ...label('c4.relationshipTool'),
+    build: c4RelationshipElement,
+};
+/** Every item of the C4 toolbar, in the toolbar's order. */
+export const C4_TOOLBOX = {
+    framework: 'c4',
+    items: [
+        {
+            id: 'board',
+            ...label('c4.addBoard'),
+            texts: ['name'],
+            size: { w: BOARD_REF_WIDTH, h: BOARD_REF_HEIGHT },
+            build: (at, texts, local) => [
+                c4BoardElement(at, texts?.name?.trim() || undefined, local),
+            ],
+        },
+        ...Object.keys(NODE_COMMANDS).map(nodeItem),
+        boundaryItem('system'),
+        boundaryItem('container'),
+    ],
+    links: [relationship],
+};

package/dist/type-line.d.ts

@@ -1,48 +1,7 @@
 import type { C4NodeKind } from '@formicoidea/labre-core/model';
 import { type ChromeWording } from '@formicoidea/labre-core/shared/services';
 import type { BlockStdScope } from '@formicoidea/labre-core/std';
-/**
- * The middle tier of a C4 element's label — `[Person]`, `[Software System]`,
- * `[Container: Java]` — SEMI-DERIVED: the word comes from the kind, the
- * technology from the author.
- *
- * ## Semi-derived, and where the line actually lives
- *
- * The line is a real canvas TEXT element now (PO recette, 28/08/2026): a C4
- * component is the shape and its own words, grouped, and every tier is edited in
- * place like any other text on the canvas rather than typed into a form. So the
- * string IS stored — but only half of it is the author's. The bracketed word is
- * the notation's and comes from `kind`, which is what the renderer paints and
- * what the exporter maps; letting an author retype it would be letting the words
- * disagree with the picture.
- *
- * {@link normalizeC4TypeLine} is what keeps the halves apart. It runs when an
- * edit COMMITS, reads whatever was typed for the one thing the notation leaves
- * to the author — the technology — and writes the canonical line back. Type
- * `Java` and the line becomes `[Container: Java]`; type `[Database: Java]` on a
- * cylinder and it becomes `[Container: Java]`, because a database IS a container
- * and the stencil says so.
- */
-/**
- * The base word each kind is announced by, verbatim from the stencil's own
- * `<desc>` strings (`C4Model_default.svg`, the PO's reference model).
- *
- * Two readings are worth spelling out, because both look like mistakes:
- *
- * - `database` says **Container**, not "Database". The stencil labels the
- *   cylinder `[Container: technology]` exactly as it labels the plain box: a
- *   database is a CONTAINER, and the cylinder is a picture of one, not a fourth
- *   level. (The mermaid export still emits `ContainerDb` — that is the one
- *   specialisation mermaid's own grammar draws, and it is a different question
- *   from what the box says on the canvas.)
- * - an `-ext` variant says the same word as the kind it is external to. What
- *   "external" changes is the COLOUR — grey — and the stencil's gray sheet
- *   carries the identical `[Person]` / `[Software System]` wording.
- *
- * `Record<C4NodeKind, …>` and therefore compile-total: a kind added to the model
- * without a word to announce it fails the build here.
- */
-export declare const C4_TYPE_WORD: Record<C4NodeKind, string>;
+export { C4_TYPE_PLACEHOLDER, C4_TYPE_TAKES_TECHNOLOGY, C4_TYPE_WORD, TYPE_TECHNOLOGY_PLACEHOLDER, } from './type-word.js';
 export declare const C4_TYPE_WORD_KEY: Record<C4NodeKind, string>;
 /**
  * The type line as it is drawn, brackets included.
@@ -108,14 +67,6 @@ export declare function technologyOfTypeLine(text: string | null | undefined, st
  * has an `std` to give it.
  */
 export declare function normalizeC4TypeLine(kind: C4NodeKind, rawText: string | null | undefined, std?: BlockStdScope): string;
-/**
- * The word a fresh type line prompts the author with, in the technology's slot.
- *
- * The stencil's own: its container reads `[Container: technology]` before
- * anybody fills it in. A prompt rather than a value — see
- * {@link C4_TYPE_PLACEHOLDER}.
- */
-export declare const TYPE_TECHNOLOGY_PLACEHOLDER = "technology";
 /**
  * {@link TYPE_TECHNOLOGY_PLACEHOLDER}'s own key — see the long comment on
  * {@link C4_TYPE_WORD_KEY} for why this lot's shipped French proposal keeps
@@ -129,36 +80,6 @@ export declare const C4_TECHNOLOGY_PLACEHOLDER_KEY = "com.labre.c4.type.technolo
  * commit the watcher normalizes).
  */
 export declare const C4_TYPE_LINE_WORDINGS: readonly ChromeWording[];
-/**
- * Which kinds announce a technology in their type line AT ALL.
- *
- * The notation's own division and not mermaid's, though the two agree: a person
- * is not built with a technology and a software system's is a level down, so
- * both are written `[Person]` / `[Software System]` full stop. Every container
- * — the cylinder, the phone and the browser window included — and every
- * component carries `[Word: technology]`, because at those two levels "what is
- * it built with" is the question the diagram exists to answer.
- *
- * This decides the PLACEHOLDER only. An author who types a technology onto a
- * person gets it drawn, exactly as `c4TypeLine` has always drawn it: the
- * notation is a prompt here, not a validator.
- */
-export declare const C4_TYPE_TAKES_TECHNOLOGY: Record<C4NodeKind, boolean>;
-/**
- * The type line a freshly created element is born carrying, per kind.
- *
- * Every tier of a C4 component exists from the moment it is drawn (PO
- * arbitration, 28/08/2026), so the author meets three lines of stencil rather
- * than a box and two invisible slots they have to be told about. What they meet
- * is what the official stencil shows: `[Person]`, `[Software System]`,
- * `[Container: technology]`, `[Component: technology]`.
- *
- * A PROMPT, not a value: {@link C4_TYPE_PLACEHOLDER} is what the exporter
- * compares against to decide the author has stated nothing yet, so an untouched
- * element exports as `Container(alias, "Container")` rather than as one built
- * with a technology literally called "technology".
- */
-export declare const C4_TYPE_PLACEHOLDER: Record<C4NodeKind, string>;
 /**
  * {@link C4_TYPE_PLACEHOLDER}, resolved through `std` when given — the
  * placement site (`createC4Node`, `actions.ts`) seeds a fresh element with

package/dist/type-line.js

@@ -1,4 +1,6 @@
 import { translateKey, } from '@formicoidea/labre-core/shared/services';
+import { C4_TYPE_PLACEHOLDER, C4_TYPE_TAKES_TECHNOLOGY, C4_TYPE_WORD, TYPE_TECHNOLOGY_PLACEHOLDER, typeLineOf, } from './type-word.js';
+export { C4_TYPE_PLACEHOLDER, C4_TYPE_TAKES_TECHNOLOGY, C4_TYPE_WORD, TYPE_TECHNOLOGY_PLACEHOLDER, } from './type-word.js';
 /**
  * The middle tier of a C4 element's label — `[Person]`, `[Software System]`,
  * `[Container: Java]` — SEMI-DERIVED: the word comes from the kind, the
@@ -21,36 +23,6 @@ import { translateKey, } from '@formicoidea/labre-core/shared/services';
  * cylinder and it becomes `[Container: Java]`, because a database IS a container
  * and the stencil says so.
  */
-/**
- * The base word each kind is announced by, verbatim from the stencil's own
- * `<desc>` strings (`C4Model_default.svg`, the PO's reference model).
- *
- * Two readings are worth spelling out, because both look like mistakes:
- *
- * - `database` says **Container**, not "Database". The stencil labels the
- *   cylinder `[Container: technology]` exactly as it labels the plain box: a
- *   database is a CONTAINER, and the cylinder is a picture of one, not a fourth
- *   level. (The mermaid export still emits `ContainerDb` — that is the one
- *   specialisation mermaid's own grammar draws, and it is a different question
- *   from what the box says on the canvas.)
- * - an `-ext` variant says the same word as the kind it is external to. What
- *   "external" changes is the COLOUR — grey — and the stencil's gray sheet
- *   carries the identical `[Person]` / `[Software System]` wording.
- *
- * `Record<C4NodeKind, …>` and therefore compile-total: a kind added to the model
- * without a word to announce it fails the build here.
- */
-export const C4_TYPE_WORD = {
-    person: 'Person',
-    'person-ext': 'Person',
-    system: 'Software System',
-    'system-ext': 'Software System',
-    container: 'Container',
-    database: 'Container',
-    mobile: 'Container',
-    browser: 'Container',
-    component: 'Component',
-};
 /**
  * {@link C4_TYPE_WORD}'s own i18n key, one per DISTINCT word (four kinds
  * share `Container`, two share `Person`, two share `Software System`, one
@@ -110,9 +82,7 @@ function typeWord(kind, std) {
  * all and get the same English answer they always have.
  */
 export function c4TypeLine(kind, technology, std) {
-    const word = typeWord(kind, std);
-    const techn = (technology ?? '').replaceAll(/\s+/g, ' ').trim();
-    return techn ? `[${word}: ${techn}]` : `[${word}]`;
+    return typeLineOf(typeWord(kind, std), technology);
 }
 /* ── Reading the line back ─────────────────────────────────────────────── */
 /**
@@ -214,14 +184,6 @@ export function normalizeC4TypeLine(kind, rawText, std) {
     return c4TypeLine(kind, technologyOfTypeLine(rawText, std), std);
 }
 /* ── What a fresh element says before anybody writes on it ─────────────── */
-/**
- * The word a fresh type line prompts the author with, in the technology's slot.
- *
- * The stencil's own: its container reads `[Container: technology]` before
- * anybody fills it in. A prompt rather than a value — see
- * {@link C4_TYPE_PLACEHOLDER}.
- */
-export const TYPE_TECHNOLOGY_PLACEHOLDER = 'technology';
 /**
  * {@link TYPE_TECHNOLOGY_PLACEHOLDER}'s own key — see the long comment on
  * {@link C4_TYPE_WORD_KEY} for why this lot's shipped French proposal keeps
@@ -247,49 +209,6 @@ export const C4_TYPE_LINE_WORDINGS = [
     [C4_TYPE_WORD_KEY.component, C4_TYPE_WORD.component],
     [C4_TECHNOLOGY_PLACEHOLDER_KEY, TYPE_TECHNOLOGY_PLACEHOLDER],
 ];
-/**
- * Which kinds announce a technology in their type line AT ALL.
- *
- * The notation's own division and not mermaid's, though the two agree: a person
- * is not built with a technology and a software system's is a level down, so
- * both are written `[Person]` / `[Software System]` full stop. Every container
- * — the cylinder, the phone and the browser window included — and every
- * component carries `[Word: technology]`, because at those two levels "what is
- * it built with" is the question the diagram exists to answer.
- *
- * This decides the PLACEHOLDER only. An author who types a technology onto a
- * person gets it drawn, exactly as `c4TypeLine` has always drawn it: the
- * notation is a prompt here, not a validator.
- */
-export const C4_TYPE_TAKES_TECHNOLOGY = {
-    person: false,
-    'person-ext': false,
-    system: false,
-    'system-ext': false,
-    container: true,
-    database: true,
-    mobile: true,
-    browser: true,
-    component: true,
-};
-/**
- * The type line a freshly created element is born carrying, per kind.
- *
- * Every tier of a C4 component exists from the moment it is drawn (PO
- * arbitration, 28/08/2026), so the author meets three lines of stencil rather
- * than a box and two invisible slots they have to be told about. What they meet
- * is what the official stencil shows: `[Person]`, `[Software System]`,
- * `[Container: technology]`, `[Component: technology]`.
- *
- * A PROMPT, not a value: {@link C4_TYPE_PLACEHOLDER} is what the exporter
- * compares against to decide the author has stated nothing yet, so an untouched
- * element exports as `Container(alias, "Container")` rather than as one built
- * with a technology literally called "technology".
- */
-export const C4_TYPE_PLACEHOLDER = Object.fromEntries(Object.keys(C4_TYPE_WORD).map(kind => [
-    kind,
-    c4TypeLine(kind, C4_TYPE_TAKES_TECHNOLOGY[kind] ? TYPE_TECHNOLOGY_PLACEHOLDER : undefined),
-]));
 /**
  * {@link C4_TYPE_PLACEHOLDER}, resolved through `std` when given — the
  * placement site (`createC4Node`, `actions.ts`) seeds a fresh element with

package/dist/type-word.d.ts

@@ -0,0 +1,61 @@
+import type { C4NodeKind } from '@formicoidea/labre-core/model';
+/**
+ * The base word each kind is announced by, verbatim from the stencil's own
+ * `<desc>` strings (`C4Model_default.svg`, the PO's reference model).
+ *
+ * Two readings are worth spelling out, because both look like mistakes:
+ *
+ * - `database` says **Container**, not "Database". The stencil labels the
+ *   cylinder `[Container: technology]` exactly as it labels the plain box: a
+ *   database is a CONTAINER, and the cylinder is a picture of one, not a fourth
+ *   level. (The mermaid export still emits `ContainerDb` — that is the one
+ *   specialisation mermaid's own grammar draws, and it is a different question
+ *   from what the box says on the canvas.)
+ * - an `-ext` variant says the same word as the kind it is external to. What
+ *   "external" changes is the COLOUR — grey — and the stencil's gray sheet
+ *   carries the identical `[Person]` / `[Software System]` wording.
+ *
+ * `Record<C4NodeKind, …>` and therefore compile-total: a kind added to the model
+ * without a word to announce it fails the build here.
+ */
+export declare const C4_TYPE_WORD: Record<C4NodeKind, string>;
+/**
+ * Which kinds announce a technology in their type line AT ALL.
+ *
+ * The notation's own division and not mermaid's, though the two agree: a person
+ * is not built with a technology and a software system's is a level down, so
+ * both are written `[Person]` / `[Software System]` full stop. Every container
+ * — the cylinder, the phone and the browser window included — and every
+ * component carries `[Word: technology]`, because at those two levels "what is
+ * it built with" is the question the diagram exists to answer.
+ *
+ * This decides the PLACEHOLDER only. An author who types a technology onto a
+ * person gets it drawn, exactly as `c4TypeLine` has always drawn it: the
+ * notation is a prompt here, not a validator.
+ */
+export declare const C4_TYPE_TAKES_TECHNOLOGY: Record<C4NodeKind, boolean>;
+/**
+ * The word a fresh type line prompts the author with, in the technology's slot.
+ *
+ * The stencil's own: its container reads `[Container: technology]` before
+ * anybody fills it in. A prompt rather than a value — see
+ * {@link C4_TYPE_PLACEHOLDER}.
+ */
+export declare const TYPE_TECHNOLOGY_PLACEHOLDER = "technology";
+/** `[Word]`, or `[Word: technology]` when one is set (see `c4TypeLine`). */
+export declare function typeLineOf(word: string, technology?: string): string;
+/**
+ * The type line a freshly created element is born carrying, per kind.
+ *
+ * Every tier of a C4 component exists from the moment it is drawn (PO
+ * arbitration, 28/08/2026), so the author meets three lines of stencil rather
+ * than a box and two invisible slots they have to be told about. What they meet
+ * is what the official stencil shows: `[Person]`, `[Software System]`,
+ * `[Container: technology]`, `[Component: technology]`.
+ *
+ * A PROMPT, not a value: {@link C4_TYPE_PLACEHOLDER} is what the exporter
+ * compares against to decide the author has stated nothing yet, so an untouched
+ * element exports as `Container(alias, "Container")` rather than as one built
+ * with a technology literally called "technology".
+ */
+export declare const C4_TYPE_PLACEHOLDER: Record<C4NodeKind, string>;

package/dist/type-word.js

@@ -0,0 +1,90 @@
+// The English words of the type line, editor-free: the toolbox
+// (`toolbox.ts`, `docs/adr/0045`) seeds a component with them from the
+// `./interchange` graph, which must not load the services that resolve a
+// word in the host's language (`type-line.ts` does that).
+/**
+ * The base word each kind is announced by, verbatim from the stencil's own
+ * `<desc>` strings (`C4Model_default.svg`, the PO's reference model).
+ *
+ * Two readings are worth spelling out, because both look like mistakes:
+ *
+ * - `database` says **Container**, not "Database". The stencil labels the
+ *   cylinder `[Container: technology]` exactly as it labels the plain box: a
+ *   database is a CONTAINER, and the cylinder is a picture of one, not a fourth
+ *   level. (The mermaid export still emits `ContainerDb` — that is the one
+ *   specialisation mermaid's own grammar draws, and it is a different question
+ *   from what the box says on the canvas.)
+ * - an `-ext` variant says the same word as the kind it is external to. What
+ *   "external" changes is the COLOUR — grey — and the stencil's gray sheet
+ *   carries the identical `[Person]` / `[Software System]` wording.
+ *
+ * `Record<C4NodeKind, …>` and therefore compile-total: a kind added to the model
+ * without a word to announce it fails the build here.
+ */
+export const C4_TYPE_WORD = {
+    person: 'Person',
+    'person-ext': 'Person',
+    system: 'Software System',
+    'system-ext': 'Software System',
+    container: 'Container',
+    database: 'Container',
+    mobile: 'Container',
+    browser: 'Container',
+    component: 'Component',
+};
+/**
+ * Which kinds announce a technology in their type line AT ALL.
+ *
+ * The notation's own division and not mermaid's, though the two agree: a person
+ * is not built with a technology and a software system's is a level down, so
+ * both are written `[Person]` / `[Software System]` full stop. Every container
+ * — the cylinder, the phone and the browser window included — and every
+ * component carries `[Word: technology]`, because at those two levels "what is
+ * it built with" is the question the diagram exists to answer.
+ *
+ * This decides the PLACEHOLDER only. An author who types a technology onto a
+ * person gets it drawn, exactly as `c4TypeLine` has always drawn it: the
+ * notation is a prompt here, not a validator.
+ */
+export const C4_TYPE_TAKES_TECHNOLOGY = {
+    person: false,
+    'person-ext': false,
+    system: false,
+    'system-ext': false,
+    container: true,
+    database: true,
+    mobile: true,
+    browser: true,
+    component: true,
+};
+/**
+ * The word a fresh type line prompts the author with, in the technology's slot.
+ *
+ * The stencil's own: its container reads `[Container: technology]` before
+ * anybody fills it in. A prompt rather than a value — see
+ * {@link C4_TYPE_PLACEHOLDER}.
+ */
+export const TYPE_TECHNOLOGY_PLACEHOLDER = 'technology';
+/** `[Word]`, or `[Word: technology]` when one is set (see `c4TypeLine`). */
+export function typeLineOf(word, technology) {
+    const techn = (technology ?? '').replaceAll(/\s+/g, ' ').trim();
+    return techn ? `[${word}: ${techn}]` : `[${word}]`;
+}
+/**
+ * The type line a freshly created element is born carrying, per kind.
+ *
+ * Every tier of a C4 component exists from the moment it is drawn (PO
+ * arbitration, 28/08/2026), so the author meets three lines of stencil rather
+ * than a box and two invisible slots they have to be told about. What they meet
+ * is what the official stencil shows: `[Person]`, `[Software System]`,
+ * `[Container: technology]`, `[Component: technology]`.
+ *
+ * A PROMPT, not a value: {@link C4_TYPE_PLACEHOLDER} is what the exporter
+ * compares against to decide the author has stated nothing yet, so an untouched
+ * element exports as `Container(alias, "Container")` rather than as one built
+ * with a technology literally called "technology".
+ */
+export const C4_TYPE_PLACEHOLDER = Object.fromEntries(Object.keys(C4_TYPE_WORD).map(kind => [
+    kind,
+    typeLineOf(C4_TYPE_WORD[kind], C4_TYPE_TAKES_TECHNOLOGY[kind] ? TYPE_TECHNOLOGY_PLACEHOLDER : undefined),
+]));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@formicoidea/labre-framework-c4",
   "description": "Labre c4 framework for @formicoidea/labre-core.",
-  "version": "0.59.0",
+  "version": "0.60.0",
   "type": "module",
   "sideEffects": false,
   "author": "lajola",
@@ -35,8 +35,8 @@
     "dist"
   ],
   "dependencies": {
-    "@formicoidea/labre-core": "0.59.0",
-    "@formicoidea/labre-ddd-shared": "0.59.0",
+    "@formicoidea/labre-core": "0.60.0",
+    "@formicoidea/labre-ddd-shared": "0.60.0",
     "lit": "^3.2.0"
   }
 }