@formicoidea/labre-framework-c4 0.33.0

package/dist/consts.js

@@ -0,0 +1,384 @@
+/**
+ * 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 const STENCIL_SCALE = 2;
+const WHITE = '#ffffff';
+const BLACK = '#000000';
+/**
+ * The grey every EXTERNAL element is drawn in — a person or a system somebody
+ * else owns. One grey for both, because "outside the scope of this diagram" is
+ * one statement and the level of the thing outside it is not the point.
+ */
+const EXTERNAL = {
+    fill: '#999999',
+    border: '#8b8b8b',
+    text: WHITE,
+};
+/**
+ * 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 const NODE_PALETTE = {
+    person: { fill: '#08427b', border: '#073b6f', text: WHITE },
+    'person-ext': EXTERNAL,
+    system: { fill: '#1168bd', border: '#1864ad', text: WHITE },
+    'system-ext': EXTERNAL,
+    container: { fill: '#438dd5', border: '#3d81c3', text: WHITE },
+    database: { fill: '#438dd5', border: '#3d81c3', text: WHITE },
+    mobile: { fill: '#438dd5', border: '#3d81c3', text: WHITE },
+    browser: { fill: '#438dd5', border: '#3d81c3', text: WHITE },
+    component: { fill: '#85bbf0', border: '#78a8d8', text: BLACK },
+};
+/** Border weight of every node — one line (stencil `stroke-width:1`), ×2. */
+export 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 const NODE_RADIUS = {
+    person: 0,
+    'person-ext': 0,
+    system: 0,
+    'system-ext': 0,
+    container: 0,
+    database: 0,
+    mobile: 4.252 * STENCIL_SCALE,
+    browser: 1.4173 * STENCIL_SCALE,
+    component: 0,
+};
+/**
+ * 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 const TITLE_FONT_SIZE = 10 * STENCIL_SCALE;
+export const TYPE_FONT_SIZE = 6 * STENCIL_SCALE;
+export const DESCRIPTION_FONT_SIZE = 8 * STENCIL_SCALE;
+/**
+ * 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 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 const TITLE_LINES = 2;
+export 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 const TIER_MARGIN = 24;
+export const TITLE_TYPE_GAP = 8;
+export const TYPE_DESCRIPTION_GAP = 16;
+/** Side inset the three text tiers sit within, as a fraction of the node width. */
+export 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 const TIER_STACK_HEIGHT = TITLE_FONT_SIZE * TIER_LINE_HEIGHT * TITLE_LINES +
+    TITLE_TYPE_GAP +
+    TYPE_FONT_SIZE * TIER_LINE_HEIGHT +
+    TYPE_DESCRIPTION_GAP +
+    DESCRIPTION_FONT_SIZE * TIER_LINE_HEIGHT * DESCRIPTION_LINES;
+/**
+ * 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 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 const PERSON_HEAD_CLEARANCE = 47.767 * STENCIL_SCALE;
+/**
+ * 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 const NODE_BOX = {
+    w: 106.3 * STENCIL_SCALE,
+    h: TIER_MARGIN * 2 + TIER_STACK_HEIGHT,
+};
+/** The person's full silhouette — the standard body, plus the head above it. */
+export const PERSON_BOX = {
+    w: NODE_BOX.w,
+    h: PERSON_HEAD_CLEARANCE + NODE_BOX.h,
+};
+/**
+ * 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 const PERSON_BODY_TOP = PERSON_HEAD_CLEARANCE / PERSON_BOX.h;
+export const NODE_SIZE = {
+    person: PERSON_BOX,
+    'person-ext': PERSON_BOX,
+    system: NODE_BOX,
+    'system-ext': NODE_BOX,
+    container: NODE_BOX,
+    database: NODE_BOX,
+    mobile: NODE_BOX,
+    browser: NODE_BOX,
+    component: NODE_BOX,
+};
+/**
+ * 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 const NODE_LABEL = {
+    person: 'Person',
+    'person-ext': 'External person',
+    system: 'Software system',
+    'system-ext': 'External system',
+    container: 'Container',
+    database: 'Database',
+    mobile: 'Mobile app',
+    browser: 'Web app',
+    component: 'Component',
+};
+/* ── The board ─────────────────────────────────────────────────────────── */
+export const FONT_FAMILY = 'Inter, sans-serif';
+/** The card — the same white every framework background paints. */
+export const BOARD_CARD_FILL = '#ffffff';
+export const BOARD_CARD_BORDER = '#d5d9e0';
+export const BOARD_BORDER_WIDTH = 1.5;
+export const BOARD_CORNER_RADIUS = 12;
+export const BOARD_TITLE_FONT_SIZE = 20;
+export 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 const BOARD_REF_WIDTH = 1400;
+export const BOARD_REF_HEIGHT = 900;
+export const BOARD_MARGIN = 24;
+export const BOARD_TITLE_MARGIN = 56;
+/* ── The boundary ──────────────────────────────────────────────────────── */
+/**
+ * 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 const BOUNDARY_STROKE = '#444444';
+export const BOUNDARY_WIDTH = 0.5 * STENCIL_SCALE;
+export const BOUNDARY_CORNER_RADIUS = 0;
+/** The dash, in model units: the stencil's `stroke-dasharray:7.5,4.5`, ×2. */
+export const BOUNDARY_DASH = [
+    7.5 * STENCIL_SCALE,
+    4.5 * STENCIL_SCALE,
+];
+export const BOUNDARY_NAME_FONT_SIZE = 10 * STENCIL_SCALE;
+export 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 const BOUNDARY_TYPE_FONT_SIZE = 6 * STENCIL_SCALE;
+export const BOUNDARY_TYPE_STEP = 1.917 * BOUNDARY_TYPE_FONT_SIZE;
+/** How far above the bottom edge of the plot the name's baseline sits. */
+export const BOUNDARY_NAME_INSET = 8;
+export const BOUNDARY_REF_WIDTH = 520;
+export 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 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 const BOUNDARY_LABEL = {
+    system: 'System boundary',
+    container: 'Container boundary',
+};
+/* ── The relationship ──────────────────────────────────────────────────── */
+/**
+ * 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 const RELATIONSHIP_STROKE = '#444444';
+export const RELATIONSHIP_WIDTH = 0.75 * STENCIL_SCALE;

package/dist/descriptor.d.ts

@@ -0,0 +1,12 @@
+import { C4RenderViewExtension, C4ViewExtension } from './view.js';
+/** Host wiring for the c4 framework. */
+export declare const c4Framework: {
+    readonly flag: "c4";
+    readonly telemetryKey: "c4";
+    readonly extensions: readonly [{
+        readonly viewExtension: typeof C4RenderViewExtension;
+    }, {
+        readonly flag: "c4";
+        readonly viewExtension: typeof C4ViewExtension;
+    }];
+};

package/dist/descriptor.js

@@ -0,0 +1,10 @@
+import { C4RenderViewExtension, C4ViewExtension } from './view.js';
+/** Host wiring for the c4 framework. */
+export const c4Framework = {
+    flag: 'c4',
+    telemetryKey: 'c4',
+    extensions: [
+        { viewExtension: C4RenderViewExtension },
+        { flag: 'c4', viewExtension: C4ViewExtension },
+    ],
+};

package/dist/effects.d.ts

@@ -0,0 +1,9 @@
+import { EdgelessC4Menu } from './toolbar/c4-menu.js';
+import { EdgelessC4SeniorButton } from './toolbar/c4-senior-button.js';
+export declare function effects(): void;
+declare global {
+    interface HTMLElementTagNameMap {
+        'edgeless-c4-menu': EdgelessC4Menu;
+        'edgeless-c4-senior-button': EdgelessC4SeniorButton;
+    }
+}

package/dist/effects.js

@@ -0,0 +1,6 @@
+import { EdgelessC4Menu } from './toolbar/c4-menu.js';
+import { EdgelessC4SeniorButton } from './toolbar/c4-senior-button.js';
+export function effects() {
+    customElements.define('edgeless-c4-menu', EdgelessC4Menu);
+    customElements.define('edgeless-c4-senior-button', EdgelessC4SeniorButton);
+}

package/dist/element-renderer.d.ts

@@ -0,0 +1,18 @@
+import { type ElementRenderer } from '@formicoidea/labre-core/blocks/surface';
+import type { C4BoardElementModel, C4BoundaryElementModel } from '@formicoidea/labre-core/model';
+/**
+ * Canvas renderers for the two C4 frames.
+ *
+ * There is no C4 drawing code here: both are INSTANTIATIONS of the
+ * framework-background primitive, configured by the declarations in
+ * `background.ts`. Exported as functions as well as extensions because the
+ * fidelity suite drives them directly with a canvas stub.
+ */
+export declare const c4Board: ElementRenderer<C4BoardElementModel>;
+export declare const C4BoardRendererExtension: import("@formicoidea/labre-core/store").ExtensionType & {
+    identifier: import("@formicoidea/labre-core/_pkgs/global/di").ServiceIdentifier<ElementRenderer<C4BoardElementModel>>;
+};
+export declare const c4Boundary: ElementRenderer<C4BoundaryElementModel>;
+export declare const C4BoundaryRendererExtension: import("@formicoidea/labre-core/store").ExtensionType & {
+    identifier: import("@formicoidea/labre-core/_pkgs/global/di").ServiceIdentifier<ElementRenderer<C4BoundaryElementModel>>;
+};

package/dist/element-renderer.js

@@ -0,0 +1,14 @@
+import { createFrameworkBackgroundRenderer, ElementRendererExtension, } from '@formicoidea/labre-core/blocks/surface';
+import { C4_BOARD_BACKGROUND, C4_BOUNDARY_BACKGROUND } from './background.js';
+/**
+ * Canvas renderers for the two C4 frames.
+ *
+ * There is no C4 drawing code here: both are INSTANTIATIONS of the
+ * framework-background primitive, configured by the declarations in
+ * `background.ts`. Exported as functions as well as extensions because the
+ * fidelity suite drives them directly with a canvas stub.
+ */
+export const c4Board = createFrameworkBackgroundRenderer(C4_BOARD_BACKGROUND);
+export const C4BoardRendererExtension = ElementRendererExtension(C4_BOARD_BACKGROUND.type, c4Board);
+export const c4Boundary = createFrameworkBackgroundRenderer(C4_BOUNDARY_BACKGROUND);
+export const C4BoundaryRendererExtension = ElementRendererExtension(C4_BOUNDARY_BACKGROUND.type, c4Boundary);

package/dist/element-view.d.ts

@@ -0,0 +1,51 @@
+import type { FrameworkBackgroundDef } from '@formicoidea/labre-core/blocks/surface';
+import type { C4BoardElementModel, C4BoundaryElementModel } from '@formicoidea/labre-core/model';
+import { GfxElementModelView } from '@formicoidea/labre-core/std/gfx';
+/**
+ * The one gesture the two C4 frames carry: a double-click on the name edits it
+ * in place.
+ *
+ * Both frames are a card with exactly one editable word on it — the board's
+ * title, the boundary's name — so the gesture is written once here and the two
+ * views differ only in which declaration they hit-test against. That is the
+ * simplified version of `BpmnPoolView`: no lanes, no separators, no armed drag,
+ * because neither frame has anything inside it to divide.
+ *
+ * Which labels exist, where they sit, what they SAY and which are editable all
+ * come from the declaration the renderer paints (`backgroundLabelHits`), so a
+ * label can never be drawn in one place and clicked in another — the same
+ * source `WardleyView` reads, and the reason this class has no coordinates of
+ * its own.
+ *
+ * ponytail: like every other framework view in the library, only `name` may be
+ * written. The declarations bind exactly one prop each; the guard is what keeps
+ * that true if a second label is ever declared with a prop nobody meant to
+ * expose to an in-place editor.
+ */
+declare abstract class C4FrameView<T extends C4BoardElementModel | C4BoundaryElementModel> extends GfxElementModelView<T> {
+    /** The declaration this view hit-tests against — the one the renderer paints. */
+    protected abstract get def(): FrameworkBackgroundDef;
+    /** The in-place `<input>` used to edit the name, or null when idle. */
+    private _editor;
+    onCreated(): void;
+    onDestroyed(): void;
+    private _onDblClick;
+    /**
+     * @param current the words currently DRAWN, which is what the user aimed at —
+     * never `model.name`, so a frame showing its declared wording opens on that
+     * wording rather than on an empty box.
+     */
+    private _openEditor;
+    private _closeEditor;
+}
+/** The sheet a C4 diagram is drawn on. Double-click its title to rename it. */
+export declare class C4BoardView extends C4FrameView<C4BoardElementModel> {
+    static type: string;
+    protected get def(): FrameworkBackgroundDef;
+}
+/** The dashed frame drawn round part of one. Double-click its name to rename. */
+export declare class C4BoundaryView extends C4FrameView<C4BoundaryElementModel> {
+    static type: string;
+    protected get def(): FrameworkBackgroundDef;
+}
+export {};

package/dist/element-view.js

@@ -0,0 +1,146 @@
+import { backgroundLabelHits, EdgelessCRUDIdentifier, hitTestBackgroundLabel, } from '@formicoidea/labre-core/blocks/surface';
+import { TranslationProvider } from '@formicoidea/labre-core/shared/services';
+import { rotatePoint } from '@formicoidea/labre-core/global/gfx';
+import { GfxElementModelView } from '@formicoidea/labre-core/std/gfx';
+import { C4_BOARD_BACKGROUND, C4_BOUNDARY_BACKGROUND } from './background.js';
+/**
+ * The one gesture the two C4 frames carry: a double-click on the name edits it
+ * in place.
+ *
+ * Both frames are a card with exactly one editable word on it — the board's
+ * title, the boundary's name — so the gesture is written once here and the two
+ * views differ only in which declaration they hit-test against. That is the
+ * simplified version of `BpmnPoolView`: no lanes, no separators, no armed drag,
+ * because neither frame has anything inside it to divide.
+ *
+ * Which labels exist, where they sit, what they SAY and which are editable all
+ * come from the declaration the renderer paints (`backgroundLabelHits`), so a
+ * label can never be drawn in one place and clicked in another — the same
+ * source `WardleyView` reads, and the reason this class has no coordinates of
+ * its own.
+ *
+ * ponytail: like every other framework view in the library, only `name` may be
+ * written. The declarations bind exactly one prop each; the guard is what keeps
+ * that true if a second label is ever declared with a prop nobody meant to
+ * expose to an in-place editor.
+ */
+class C4FrameView extends GfxElementModelView {
+    constructor() {
+        super(...arguments);
+        /** The in-place `<input>` used to edit the name, or null when idle. */
+        this._editor = null;
+    }
+    onCreated() {
+        super.onCreated();
+        this.on('dblclick', e => this._onDblClick(e));
+    }
+    onDestroyed() {
+        this._closeEditor();
+        super.onDestroyed();
+    }
+    _onDblClick(e) {
+        if (this.gfx.std.store.readonly || this.model.isLocked())
+            return;
+        const [mx, my] = this.gfx.viewport.toModelCoord(e.x, e.y);
+        const [bx, by, w, h] = this.model.deserializedXYWH;
+        // Element-local coordinates, undoing the element rotation about its centre.
+        let lx = mx - bx;
+        let ly = my - by;
+        const rot = this.model.rotate ?? 0;
+        if (rot) {
+            const center = [bx + w / 2, by + h / 2];
+            const [ux, uy] = rotatePoint([mx, my], center, -rot);
+            lx = ux - bx;
+            ly = uy - by;
+        }
+        const hit = hitTestBackgroundLabel(backgroundLabelHits(this.def, this.model, w, h, this.gfx.std.getOptional(TranslationProvider)), lx, ly);
+        if (!hit || hit.prop !== 'name')
+            return;
+        this._openEditor(hit.text, e);
+    }
+    /**
+     * @param current the words currently DRAWN, which is what the user aimed at —
+     * never `model.name`, so a frame showing its declared wording opens on that
+     * wording rather than on an empty box.
+     */
+    _openEditor(current, e) {
+        this._closeEditor();
+        const input = document.createElement('input');
+        input.value = current;
+        Object.assign(input.style, {
+            position: 'fixed',
+            left: `${e.raw.clientX}px`,
+            top: `${e.raw.clientY}px`,
+            transform: 'translate(-50%, -50%)',
+            zIndex: '10000',
+            minWidth: '140px',
+            padding: '3px 8px',
+            font: '14px Inter, sans-serif',
+            color: 'var(--affine-text-primary-color, #1f2328)',
+            background: 'var(--affine-background-overlay-panel-color, #ffffff)',
+            border: '1px solid var(--affine-primary-color, #1e96eb)',
+            borderRadius: '6px',
+            boxShadow: 'var(--affine-shadow-2, 0 2px 8px rgba(0,0,0,0.18))',
+            outline: 'none',
+        });
+        document.body.append(input);
+        this._editor = input;
+        // Mark "editing" so the global edgeless key handlers (delete, escape, …)
+        // don't act on the frame while the user types.
+        this.gfx.selection.set({ elements: [this.model.id], editing: true });
+        input.focus();
+        input.select();
+        const commit = () => {
+            // Guard against re-entrancy: removing the input fires `blur`, which would
+            // otherwise call `commit` a second time.
+            if (this._editor !== input)
+                return;
+            const value = input.value;
+            this._closeEditor();
+            // Opening an editor is not renaming: an untouched value would push an
+            // empty entry onto undo and freeze the drawn wording as the user's own.
+            if (value === current)
+                return;
+            this.gfx.std.store.captureSync();
+            this.gfx.std
+                .get(EdgelessCRUDIdentifier)
+                .updateElement(this.model.id, { name: value });
+        };
+        input.addEventListener('keydown', ev => {
+            ev.stopPropagation();
+            if (ev.key === 'Enter') {
+                ev.preventDefault();
+                commit();
+            }
+            else if (ev.key === 'Escape') {
+                ev.preventDefault();
+                this._closeEditor();
+            }
+        });
+        input.addEventListener('blur', commit);
+    }
+    _closeEditor() {
+        if (!this._editor)
+            return;
+        const input = this._editor;
+        this._editor = null;
+        input.remove();
+        if (this.isConnected) {
+            this.gfx.selection.set({ elements: [this.model.id], editing: false });
+        }
+    }
+}
+/** The sheet a C4 diagram is drawn on. Double-click its title to rename it. */
+export class C4BoardView extends C4FrameView {
+    static { this.type = 'c4Board'; }
+    get def() {
+        return C4_BOARD_BACKGROUND;
+    }
+}
+/** The dashed frame drawn round part of one. Double-click its name to rename. */
+export class C4BoundaryView extends C4FrameView {
+    static { this.type = 'c4Boundary'; }
+    get def() {
+        return C4_BOUNDARY_BACKGROUND;
+    }
+}