@formicoidea/labre-framework-c4 0.33.0

package/dist/component.js

@@ -0,0 +1,188 @@
+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 { 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),
+    };
+}
+/**
+ * The tiers of the component a node belongs to — `{}` when it belongs to none.
+ *
+ * ## Group membership, then roles
+ *
+ * The group answers "which words are THIS node's" — two containers side by side
+ * both have a `[Container: …]` under them, and only the grouping says which is
+ * which. The role then answers "which of these words is the type line", which
+ * position in `children` cannot: a group's child order is an implementation
+ * detail that a reorder, a copy or a regroup rewrites, while a role is written
+ * on the element and travels with it.
+ *
+ * ## What a bare node resolves to, and why that is the right answer
+ *
+ * `{}` — no name, no technology, no description. Which is exactly what happens
+ * to a node whose group was released (native "ungroup"), to one whose texts were
+ * deleted, and to one drawn before this change. None of those is an error and
+ * none of them is guessed at: an element with no words on it states nothing, and
+ * the export says so by writing nothing. The picture is still a C4 element — the
+ * role is on the shape and survives everything.
+ *
+ * The NAME is the one tier with somewhere else to look, and only for the last of
+ * those three: an element drawn before the title became a child keeps its name
+ * in the shape's own inner text. See {@link c4StatedName}.
+ *
+ * The FIRST group holding the node wins, and the first text of each role in it.
+ * Groups nest, so a component grouped again inside a bigger group has two
+ * ancestors; document order picks the one written first, which is the innermost
+ * the creation site made.
+ */
+export function c4ComponentTiers(nodeId, groups, texts) {
+    const siblings = new Set(c4ComponentSiblings(nodeId, groups));
+    if (siblings.size === 0)
+        return {};
+    const tiers = {};
+    for (const text of texts) {
+        if (!siblings.has(text.id))
+            continue;
+        if (text.role === C4_ROLE.title)
+            tiers.title ??= text;
+        else if (text.role === C4_ROLE['type-line'])
+            tiers.typeLine ??= text;
+        else if (text.role === C4_ROLE.description)
+            tiers.description ??= text;
+    }
+    return tiers;
+}
+/**
+ * Everything grouped with this element — `[]` when it is grouped with nothing.
+ *
+ * The other direction of the same question {@link c4ComponentTiers} asks, and
+ * the one the commit hook needs: given a type line somebody has just finished
+ * typing into, which shape does it belong to, so its kind can supply the word?
+ *
+ * The element itself is among the siblings, which is what the id list actually
+ * says and what saves the caller from reasoning about whether it was excluded.
+ */
+export function c4ComponentSiblings(elementId, groups) {
+    const group = groups.find(candidate => candidate.childIds.includes(elementId));
+    return group ? group.childIds : [];
+}
+/* ── What a tier actually states ───────────────────────────────────────── */
+/** Whatever a tier says, as a plain trimmed string. */
+export function c4TierText(tier) {
+    const value = tier?.text;
+    if (value === null || value === undefined)
+        return '';
+    return String(value).trim();
+}
+/**
+ * The NAME a component states — its `c4:title` tier if it has one, and the
+ * shape's own inner text if it has not.
+ *
+ * ## No placeholder suppression, unlike the other two
+ *
+ * A fresh element's title reads `Container`, and that goes into the export
+ * verbatim. It is not a prompt standing in for a value the way
+ * `[Container: technology]` is: an unnamed container IS a container, and
+ * `Container(x, "Container")` is a true statement about a box somebody drew and
+ * has not named yet. Blanking it would hand the reader `?` instead — less
+ * information, not more honesty. The other two tiers suppress their prompts
+ * because "built with a technology called technology" is not true of anything.
+ *
+ * ## The fallback, and who needs it
+ *
+ * An element drawn before 28/08/2026 keeps its name in the SHAPE's native inner
+ * text, which is where that iteration put it, and it has no title child at all.
+ * That is the whole of the compatibility story and it costs one `??`: nothing is
+ * migrated, nothing is rewritten, and such an element exports exactly as it
+ * always did. The test is EXISTENCE of the tier, not whether it is empty — a
+ * component whose title the author deliberately cleared has been cleared, and
+ * reaching past it to a shape text that is not there either would say nothing
+ * different anyway.
+ */
+export function c4StatedName(tiers, shapeText) {
+    if (tiers.title)
+        return c4TierText(tiers.title);
+    return shapeText === null || shapeText === undefined
+        ? ''
+        : String(shapeText).trim();
+}
+/**
+ * The technology a component STATES — `''` when it states none.
+ *
+ * The one place the creation placeholder is read as "nothing yet". Every tier
+ * exists from the moment a component is drawn, so an element nobody has typed on
+ * carries a literal `[Container: technology]`; exporting that as a technology
+ * would put the word "technology" in the technology slot of a file somebody is
+ * about to paste into a renderer.
+ *
+ * Deliberately NOT done in `technologyOfTypeLine`, which the commit hook also
+ * calls: normalising the placeholder to "nothing" would let a focus-and-blur
+ * silently rewrite `[Container: technology]` to `[Container]` and eat the
+ * stencil's own prompt. Reading and rewriting are different questions, and only
+ * the reader gets to be opinionated.
+ *
+ * The comparison is on the WORD rather than on the whole line, so it holds for
+ * every kind and for a placeholder an author moved brackets around.
+ */
+export function c4StatedTechnology(tier) {
+    const technology = technologyOfTypeLine(c4TierText(tier));
+    return technology.toLowerCase() === TYPE_TECHNOLOGY_PLACEHOLDER
+        ? ''
+        : technology;
+}
+/** The description a component STATES — `''` for the untouched placeholder. */
+export function c4StatedDescription(tier) {
+    const description = c4TierText(tier);
+    return description.toLowerCase() === DESCRIPTION_PLACEHOLDER
+        ? ''
+        : description;
+}

package/dist/consts.d.ts

@@ -0,0 +1,331 @@
+import type { C4BoundaryVariant, C4NodeKind } from '@formicoidea/labre-core/model';
+/**
+ * Visual constants for the C4 pack.
+ *
+ * Unlike BPMN — a black-and-white notation where the SHAPE carries the meaning
+ * and colour is decoration — C4's official stencil is a colour code: the four
+ * levels are four blues, from the near-navy of a person down to the pale wash of
+ * a component, and anything outside the scope of the diagram is grey. That is
+ * the one thing a reader uses to tell a container from a component when both are
+ * rounded rectangles with words in them, so the palette below IS the notation
+ * and is written down as data rather than left to whoever draws next.
+ *
+ * Every hex, every size and every radius below is read off the PO's own
+ * reference model — the Visio-exported `C4Model_default.svg` stencil — rather
+ * than approximated, and the file's units are carried through at ×2 so that a
+ * default node is a comfortable size on a canvas. Where a number is a fraction
+ * of the node box rather than an absolute, it lives in the renderer beside the
+ * path it shapes. Every value here is a creation-time DEFAULT; each one is an
+ * editable shape property afterwards, exactly as in BPMN.
+ */
+/** The stencil's own unit → model unit factor. Every absolute below is ×2. */
+export declare const STENCIL_SCALE = 2;
+/** One kind's three colours: the body, the line round it, and the words in it. */
+export interface C4NodePaint {
+    fill: string;
+    /** The border — the fill, taken a step darker. */
+    border: string;
+    /** The inner text, chosen for contrast against {@link fill}. */
+    text: string;
+}
+/**
+ * The palette, per kind. TOTAL over {@link C4NodeKind} by its type, so a kind
+ * added to the model cannot land without being given a colour.
+ *
+ * The four levels run light as they go IN: a person is the darkest thing on the
+ * page (#08427b), a software system one step lighter (#1168bd), every container
+ * lighter again (#438dd5) and a component palest of all (#85bbf0) — which is
+ * also the one that takes black text, because white on that wash is unreadable.
+ * `database`, `mobile` and `browser` are CONTAINERS and take the container's
+ * colour exactly: what makes them different is the silhouette the renderer
+ * draws, never the level, and a fourth blue would say otherwise.
+ *
+ * Every border is the stencil's own darker shade of its fill, lifted verbatim
+ * from the reference model's stylesheet (`.st1`, `.st5`, `.st6`, `.st7`,
+ * `.st22`) rather than darkened by eye — which is what makes the two decorated
+ * containers work at all: `mobile` and `browser` paint their BEZEL in the border
+ * colour and their SCREEN in the fill, so the pair has to be the stencil's pair.
+ */
+export declare const NODE_PALETTE: Record<C4NodeKind, C4NodePaint>;
+/** Border weight of every node — one line (stencil `stroke-width:1`), ×2. */
+export declare const NODE_STROKE_WIDTH = 2;
+/**
+ * Corner radius of each kind's OUTER body, in model units.
+ *
+ * A table rather than one number, because the stencil is not uniform and the
+ * difference is legible: `system`, `system-ext`, `container` and `component` are
+ * plain `<rect>`s with **no `rx` at all** — square corners — while the two
+ * decorated containers are rounded, the phone noticeably (`rx="4.252"`) and the
+ * browser window barely (`rx="1.4173"`). The three glyph-bodied kinds carry `0`
+ * because their native rect paints nothing: a person's shoulders and a
+ * cylinder's lid are curves the glyph draws itself, in proportion to the box.
+ *
+ * This corrects the pack's first pass, which rounded every kind at 10 — a
+ * plausible house style, and one the reference model does not draw.
+ */
+export declare const NODE_RADIUS: Record<C4NodeKind, number>;
+/**
+ * The three text tiers, at the stencil's own sizes (10 / 6 / 8) ×2.
+ *
+ * All three are creation-time DEFAULTS the author can change afterwards, and all
+ * three are now CANVAS TEXT ELEMENTS: since the PO's recette of 28/08/2026 a C4
+ * component is a group holding the shape and its three lines of words — the
+ * name included — so every tier is ordinary text with its own toolbar rather
+ * than something a renderer painted and nobody could type on.
+ *
+ * The name was the shape's native inner text for one iteration and is not any
+ * more, which is the second half of that recette: two kinds of text in one
+ * component meant two editors, two toolbars and two sets of rules for the same
+ * three lines. Now there is one of each.
+ *
+ * The ladder 20 / 16 / 12 is the notation and not typography — the type line is
+ * smaller than the name on every C4 diagram ever drawn — but it is a ladder an
+ * author can climb off, which is the price of letting them write on the picture.
+ */
+export declare const TITLE_FONT_SIZE: number;
+export declare const TYPE_FONT_SIZE: number;
+export declare const DESCRIPTION_FONT_SIZE: number;
+/**
+ * One line box, as a multiple of its own font size — what the creation site
+ * measures a tier's HEIGHT in.
+ *
+ * The stencil states its tiers as baselines, which is the right unit for a
+ * renderer painting into a box and the wrong one for a creation site placing an
+ * element: a text element is a rectangle, and where its first baseline lands
+ * inside that rectangle is the text renderer's business, not this file's. So the
+ * stencil's baseline steps are re-read here as line boxes, which is the same
+ * geometry counted from the other end.
+ */
+export declare const TIER_LINE_HEIGHT = 1.2;
+/**
+ * How many lines each of the two wrapping tiers opens with.
+ *
+ * The title gets TWO, and that is what grew the element (see {@link NODE_BOX}):
+ * "Internet Banking System" is 23 characters, and 23 characters at 20px do not
+ * fit across 187 units of usable width. A one-line title box would have meant
+ * every real system name spilling out of its own tier on the day it was typed —
+ * which is precisely the cramped stack the PO's recette was about.
+ *
+ * The description gets two as well, which is what the stencil's own sentences
+ * run to. Neither is a limit: a longer text wraps inside the tier's width and
+ * grows the box downward, and the group grows with it, so a component keeps
+ * containing its own words.
+ */
+export declare const TITLE_LINES = 2;
+export declare const DESCRIPTION_LINES = 2;
+/**
+ * The vertical rhythm of the stack, in model units.
+ *
+ * Absolutes rather than multiples of a font size, and deliberately so: what the
+ * eye reads here is the SPACE between three blocks of different sizes, and a gap
+ * expressed as 0.7em of whichever tier happens to be below it changes meaning
+ * every time somebody resizes one of them. These three numbers are the layout.
+ *
+ * The two gaps are different on purpose. The name and its type line are ONE
+ * heading — `Web Application` / `[Container: Java]` is a single statement over
+ * two lines — so they sit close. The description is a different statement, and
+ * the wider gap under the type line is the stencil's own blank line: it is what
+ * keeps a sentence from reading as a fourth tier of the heading.
+ *
+ * {@link TIER_MARGIN} is equal top and bottom, which is what makes the stack sit
+ * in its box rather than in the top of it.
+ */
+export declare const TIER_MARGIN = 24;
+export declare const TITLE_TYPE_GAP = 8;
+export declare const TYPE_DESCRIPTION_GAP = 16;
+/** Side inset the three text tiers sit within, as a fraction of the node width. */
+export declare const TIER_SIDE_INSET = 0.06;
+/**
+ * The height of the three tiers and the two gaps between them — the number the
+ * default element size is DERIVED from rather than fitted to.
+ *
+ * 48 + 8 + 14.4 + 16 + 38.4 = 124.8. Written as the sum it is so that changing
+ * a font size or a gap moves the box with it: a rhythm and a footprint that can
+ * disagree is a rhythm that will.
+ */
+export declare const TIER_STACK_HEIGHT: number;
+/**
+ * The sentence a fresh description prompts the author with.
+ *
+ * The stencil's own placeholder, and a PROMPT rather than a value: 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 somebody has to tell them about. The exporter compares
+ * against it to decide that nothing has been stated yet — see
+ * `C4_TYPE_PLACEHOLDER` in `type-line.ts` for the same call on the other tier.
+ */
+export declare const DESCRIPTION_PLACEHOLDER = "description";
+/**
+ * How far the person's head stands clear ABOVE its body, in model units.
+ *
+ * The stencil's own `47.767` at ×2, solved off the silhouette path (`mID 1`):
+ * its head arc is drawn with `large-arc-flag=1` about a centre 21.26 units above
+ * the body's top edge, with `ry=26.504`, so the head clears the body by the sum
+ * of the two. Independent of how tall the BODY is, which is what lets the body
+ * grow with the text rhythm below without moving the head.
+ */
+export declare const PERSON_HEAD_CLEARANCE: number;
+/**
+ * Default node sizes (model units) per kind.
+ *
+ * ## One footprint, and one exception the stencil itself draws
+ *
+ * The reference model gives every element the SAME box — `106.3 × 74.409`, a
+ * `v:textRect` repeated verbatim on the system, the container, the component,
+ * the database, the phone and the browser window. Seven of the nine kinds take
+ * one footprint, and a row of C4 elements lining up without anybody arranging
+ * them is not a convenience, it is what makes a level readable.
+ *
+ * ## Why the box is taller than the stencil's, and by exactly how much
+ *
+ * The WIDTH is the stencil's, untouched: `106.3 × 2 = 212.6`. Widening it would
+ * change every glyph with it — a person's head radius is derived from the width
+ * — and the reference proportions are the one thing the recette of 27/08 was
+ * about.
+ *
+ * The HEIGHT is derived from the words instead, which is the PO's call of
+ * 28/08/2026: grow the shapes if that is what it takes to have room to write.
+ * `74.409 × 2 = 148.8` was the stencil's textRect for a box holding a name it
+ * could paint in a single line at whatever size it liked. This one holds three
+ * REAL text elements, at fixed sizes, with margins and gaps a reader can see —
+ * and the title alone needs two lines, because a system name is routinely longer
+ * than 187 units of usable width at 20px. So the height is
+ * {@link TIER_STACK_HEIGHT} plus a margin at each end: **212.6 × 172.8**, up
+ * from 212.6 × 148.8.
+ *
+ * Derived rather than chosen, so the box can never disagree with what it holds:
+ * change a tier's size or a gap and the footprint follows.
+ *
+ * ## The person
+ *
+ * `person` and `person-ext` are the exception, and it is the FILE's exception,
+ * not a preference. Their silhouette is one path (`mID 1`) whose head arc is
+ * drawn about a centre above the body's top edge, so the head stands
+ * {@link PERSON_HEAD_CLEARANCE} clear of a body that is itself the standard box.
+ * The stencil's own sheet shows it: the person's group is translated further
+ * down the page than the system beside it, precisely to make room. The body
+ * grows with everything else, so the person is now **212.6 × 268.3**.
+ *
+ * Forcing a person into the boxed footprint was considered and rejected: the
+ * head is a CIRCLE (`rx 26.362`, `ry 26.504`) and stays one only at the
+ * silhouette's own aspect ratio — squeezed into a box far wider than it is tall
+ * it becomes a flat ellipse, which is the one thing about a C4 person everybody
+ * recognises and the one thing that would then be wrong.
+ */
+export declare const NODE_BOX: {
+    readonly w: number;
+    readonly h: number;
+};
+/** The person's full silhouette — the standard body, plus the head above it. */
+export declare const PERSON_BOX: {
+    readonly w: number;
+    readonly h: number;
+};
+/**
+ * Where the person's body top edge sits, as a fraction of the whole silhouette.
+ *
+ * Derived from the two boxes rather than restated as the stencil's own ratio, so
+ * that growing the body cannot leave this pointing at the middle of the head.
+ * The renderer derives the same edge from the head RADIUS instead
+ * (`PERSON.bodyTopPerHead`), which is the form that survives an element dragged
+ * to an aspect ratio the head has to be clamped at; the two agree at the default
+ * size. This one is what the creation site needs: it has a box and no glyph, and
+ * it has to know where the words can go.
+ */
+export declare const PERSON_BODY_TOP: number;
+export declare const NODE_SIZE: Record<C4NodeKind, {
+    w: number;
+    h: number;
+}>;
+/**
+ * Default inner text per kind.
+ *
+ * Every kind carries one, unlike BPMN — where an event's meaning IS its glyph
+ * and the spec puts its name outside the shape. Here the box is the same box at
+ * three of the four levels, so a C4 element with nothing written in it says
+ * nothing at all: the words are the artefact.
+ */
+export declare const NODE_LABEL: Record<C4NodeKind, string>;
+export declare const FONT_FAMILY = "Inter, sans-serif";
+/** The card — the same white every framework background paints. */
+export declare const BOARD_CARD_FILL = "#ffffff";
+export declare const BOARD_CARD_BORDER = "#d5d9e0";
+export declare const BOARD_BORDER_WIDTH = 1.5;
+export declare const BOARD_CORNER_RADIUS = 12;
+export declare const BOARD_TITLE_FONT_SIZE = 20;
+export declare const BOARD_TITLE_COLOR = "#262626";
+/**
+ * The size a fresh board is created at, and the room its furniture takes.
+ *
+ * The Context Map board's own numbers: a C4 diagram is the same kind of object —
+ * a sheet you spread out and add boxes to as the system is discovered — so it
+ * starts at the same size and grows the same way. The top margin is deeper than
+ * the other three because that is where the title is written.
+ */
+export declare const BOARD_REF_WIDTH = 1400;
+export declare const BOARD_REF_HEIGHT = 900;
+export declare const BOARD_MARGIN = 24;
+export declare const BOARD_TITLE_MARGIN = 56;
+/**
+ * The boundary's frame and its name, at the stencil's own values ×2 (`.st20`
+ * and `.st8` in the reference model).
+ *
+ * All four numbers changed with the PO's recette of 27/08/2026, and all four
+ * were house style before it: the frame was a mid grey at weight 2 with rounded
+ * corners, and the stencil draws `#444444` at weight 1 with SQUARE ones. The
+ * name is black rather than grey and a size larger, which is what it takes to
+ * read a boundary's name over the diagram it is drawn on top of.
+ */
+export declare const BOUNDARY_STROKE = "#444444";
+export declare const BOUNDARY_WIDTH: number;
+export declare const BOUNDARY_CORNER_RADIUS = 0;
+/** The dash, in model units: the stencil's `stroke-dasharray:7.5,4.5`, ×2. */
+export declare const BOUNDARY_DASH: readonly [number, number];
+export declare const BOUNDARY_NAME_FONT_SIZE: number;
+export declare const BOUNDARY_NAME_COLOR = "#000000";
+/**
+ * The bracket line under a boundary's name — `[Software System]`, `[Container]`
+ * — at the stencil's own 6px ×2, on the same 1.917em baseline step it uses.
+ *
+ * Vocabulary, not user text: the words come from the declaration's `labelKey`
+ * and are translatable through the host's catalogue, which is also what keeps
+ * them out of the in-place editor. A boundary's NAME is the author's; what kind
+ * of boundary it is, is the notation's.
+ */
+export declare const BOUNDARY_TYPE_FONT_SIZE: number;
+export declare const BOUNDARY_TYPE_STEP: number;
+/** How far above the bottom edge of the plot the name's baseline sits. */
+export declare const BOUNDARY_NAME_INSET = 8;
+export declare const BOUNDARY_REF_WIDTH = 520;
+export declare const BOUNDARY_REF_HEIGHT = 360;
+/**
+ * The boundary's inset. Small and equal on all four sides: unlike a board, a
+ * boundary has no furniture to make room for — the name is written INSIDE the
+ * bottom-left corner of the plot, over the diagram, exactly as C4 draws it.
+ */
+export declare const BOUNDARY_MARGIN = 12;
+/**
+ * The wording a fresh boundary is named with, per variant.
+ *
+ * The variant changes the DEFAULT NAME and nothing else: both are the same
+ * dashed rectangle, and C4 tells them apart by what is written under the corner.
+ * Read by the creation site (which writes `name`), never by the renderer — the
+ * declaration draws whatever the user's own `name` says, so a boundary renamed
+ * on the canvas keeps its words whatever its variant.
+ */
+export declare const BOUNDARY_LABEL: Record<C4BoundaryVariant, string>;
+/**
+ * Relationship connector preset — the dashed arrow C4 draws between elements.
+ *
+ * DASHED and not solid, which is the stencil's own choice and worth keeping:
+ * every line on a C4 diagram is a relationship, so the dash is not a
+ * distinction between two kinds of line but the house style of the one kind
+ * there is. Grey rather than black for the same reason the boundary is: the
+ * boxes are the statement, the arrows are the grammar between them.
+ *
+ * `#444444` at weight 1.5 is the stencil's `.st15` (`stroke:#444444`,
+ * `stroke-width:0.75`) at ×2, and it is the SAME grey the boundary frame is
+ * drawn in — one neutral for everything that is not an element.
+ */
+export declare const RELATIONSHIP_STROKE = "#444444";
+export declare const RELATIONSHIP_WIDTH: number;