@formicoidea/labre-framework-c4 0.34.1 → 0.35.0

package/dist/background.d.ts

@@ -19,14 +19,35 @@ import type { FrameworkBackgroundDef } from '@formicoidea/labre-core/blocks/surf
  * `c4:board` is what a rule frames its subjects against, and the title is what
  * says which of the four levels this particular sheet is drawing.
  *
- * ## Why the title is declared as a zone label
+ * ## Why the title is declared as a BAND label
  *
  * The primitive knows three places words can come from: a side band's label, a
- * zone's label and an axis' title (`backgroundTexts`). A board has no band and
- * no axis, so a single full-plot zone — no fill, no tint, nothing painted but
- * its name — is what carries the title. That keeps it on the ONE walk both the
- * renderer and the hit tester use, which is what makes the words the user
- * double-clicks the same words they see (`C4BoardView`).
+ * zone's label and an axis' title (`backgroundTexts`). The title used to be a
+ * zone's, on the reasoning that a board has no band — a single full-plot zone
+ * that painted nothing and existed only to carry a name.
+ *
+ * It has a band now, and the band is the honest carrier. The deep top margin
+ * was ALWAYS the header strip; painting it says so, and once it is painted the
+ * name written in it is the band's name in exactly the sense the BPMN pool's
+ * participant name is. Nothing else moved: `margin.top` is the same number
+ * under its own name (`C4_BOARD_TITLE_BAND_HEIGHT`, declared beside the model
+ * that hit-tests against it), the anchor is the same anchor, and the words land
+ * on the same pixels — they are simply reached through the ONE walk the
+ * renderer and the hit tester share, one entry earlier in it.
+ *
+ * The zone went with the label it carried. A zone that tints nothing and names
+ * nothing is a region the audit reports and no reader can see; the board's one
+ * region is the board, which is what the frame already says.
+ *
+ * ## Why the band is painted at all
+ *
+ * Because a background is picked by its border and by nothing else (issue
+ * #194), and the recette of 02/09/2026 found the consequence: the title had
+ * become unreachable. A single click on it selected nothing, and the only thing
+ * still answering a double-click was the tight box of the drawn glyphs. The
+ * carve-out that fixes it is in the model (`C4BoardElementModel.includesPoint`)
+ * — and a strip that is clickable has to be VISIBLE, or it is a target nobody
+ * can aim at. So the band is painted for the same reason it is picked.
  */
 export declare const C4_BOARD_BACKGROUND: FrameworkBackgroundDef;
 /**

package/dist/background.js

@@ -1,4 +1,4 @@
-import { BOARD_BORDER_WIDTH, BOARD_CARD_BORDER, BOARD_CARD_FILL, BOARD_CORNER_RADIUS, BOARD_MARGIN, BOARD_REF_HEIGHT, BOARD_REF_WIDTH, BOARD_TITLE_COLOR, BOARD_TITLE_FONT_SIZE, BOARD_TITLE_MARGIN, BOUNDARY_CORNER_RADIUS, BOUNDARY_DASH, BOUNDARY_MARGIN, BOUNDARY_NAME_COLOR, BOUNDARY_NAME_FONT_SIZE, BOUNDARY_NAME_INSET, BOUNDARY_REF_HEIGHT, BOUNDARY_REF_WIDTH, BOUNDARY_STROKE, BOUNDARY_TYPE_FONT_SIZE, BOUNDARY_TYPE_STEP, BOUNDARY_WIDTH, FONT_FAMILY, } from './consts.js';
+import { BOARD_BAND_FILL, BOARD_BORDER_WIDTH, BOARD_CARD_BORDER, BOARD_CARD_FILL, BOARD_CORNER_RADIUS, BOARD_MARGIN, BOARD_REF_HEIGHT, BOARD_REF_WIDTH, BOARD_TITLE_COLOR, BOARD_TITLE_FONT_SIZE, BOUNDARY_CORNER_RADIUS, BOUNDARY_DASH, BOUNDARY_MARGIN, BOUNDARY_NAME_COLOR, BOUNDARY_NAME_FONT_SIZE, BOUNDARY_NAME_INSET, BOUNDARY_REF_HEIGHT, BOUNDARY_REF_WIDTH, BOUNDARY_STROKE, BOUNDARY_TYPE_FONT_SIZE, BOUNDARY_TYPE_STEP, BOUNDARY_WIDTH, C4_BOARD_TITLE_BAND_HEIGHT, FONT_FAMILY, } from './consts.js';
 import { C4_ROLE } from './roles.js';
 /**
  * The two C4 frames, DECLARED (the `FrameworkBackgroundDef` primitive).
@@ -21,14 +21,35 @@ import { C4_ROLE } from './roles.js';
  * `c4:board` is what a rule frames its subjects against, and the title is what
  * says which of the four levels this particular sheet is drawing.
  *
- * ## Why the title is declared as a zone label
+ * ## Why the title is declared as a BAND label
  *
  * The primitive knows three places words can come from: a side band's label, a
- * zone's label and an axis' title (`backgroundTexts`). A board has no band and
- * no axis, so a single full-plot zone — no fill, no tint, nothing painted but
- * its name — is what carries the title. That keeps it on the ONE walk both the
- * renderer and the hit tester use, which is what makes the words the user
- * double-clicks the same words they see (`C4BoardView`).
+ * zone's label and an axis' title (`backgroundTexts`). The title used to be a
+ * zone's, on the reasoning that a board has no band — a single full-plot zone
+ * that painted nothing and existed only to carry a name.
+ *
+ * It has a band now, and the band is the honest carrier. The deep top margin
+ * was ALWAYS the header strip; painting it says so, and once it is painted the
+ * name written in it is the band's name in exactly the sense the BPMN pool's
+ * participant name is. Nothing else moved: `margin.top` is the same number
+ * under its own name (`C4_BOARD_TITLE_BAND_HEIGHT`, declared beside the model
+ * that hit-tests against it), the anchor is the same anchor, and the words land
+ * on the same pixels — they are simply reached through the ONE walk the
+ * renderer and the hit tester share, one entry earlier in it.
+ *
+ * The zone went with the label it carried. A zone that tints nothing and names
+ * nothing is a region the audit reports and no reader can see; the board's one
+ * region is the board, which is what the frame already says.
+ *
+ * ## Why the band is painted at all
+ *
+ * Because a background is picked by its border and by nothing else (issue
+ * #194), and the recette of 02/09/2026 found the consequence: the title had
+ * become unreachable. A single click on it selected nothing, and the only thing
+ * still answering a double-click was the tight box of the drawn glyphs. The
+ * carve-out that fixes it is in the model (`C4BoardElementModel.includesPoint`)
+ * — and a strip that is clickable has to be VISIBLE, or it is a target nobody
+ * can aim at. So the band is painted for the same reason it is picked.
  */
 export const C4_BOARD_BACKGROUND = {
     type: 'c4Board',
@@ -41,44 +62,21 @@ export const C4_BOARD_BACKGROUND = {
         height: BOARD_REF_HEIGHT,
         lockAspectRatio: false,
         resizable: true,
-        // Only the top margin is deep: that is where the title is written.
+        // Only the top margin is deep: it IS the title band, and the band's height
+        // is the margin it covers rather than a second number beside it.
         margin: {
-            top: BOARD_TITLE_MARGIN,
+            top: C4_BOARD_TITLE_BAND_HEIGHT,
             right: BOARD_MARGIN,
             bottom: BOARD_MARGIN,
             left: BOARD_MARGIN,
         },
     },
-    zones: [
-        {
-            id: 'title',
-            // The whole plot, and nothing painted over it: this zone exists to carry
-            // a label, not to tint a region. Reported by the audit as one zone
-            // covering the board, which is the honest answer — a C4 board has exactly
-            // one region and it is the board.
-            rect: { x: 0, y: 0, w: 1, h: 1 },
-            label: {
-                id: 'name',
-                // The user's own words, and only those: a diagram is titled by whoever
-                // draws it, so there is no vocabulary to fall back to and no `labelKey`
-                // to declare. Same call the BPMN pool's participant name makes.
-                prop: 'name',
-                // `y: 0` is the top of the plot; a negative `dy` walks back UP into the
-                // title margin, where the words are written.
-                anchor: { x: 0, y: 0, dy: -BOARD_TITLE_MARGIN / 3 },
-                style: {
-                    size: BOARD_TITLE_FONT_SIZE,
-                    weight: 600,
-                    color: '@title',
-                },
-            },
-        },
-    ],
     chrome: {
         fontFamily: FONT_FAMILY,
         palette: {
             card: BOARD_CARD_FILL,
             cardBorder: BOARD_CARD_BORDER,
+            band: BOARD_BAND_FILL,
             title: BOARD_TITLE_COLOR,
         },
         surface: {
@@ -89,6 +87,36 @@ export const C4_BOARD_BACKGROUND = {
                 radius: BOARD_CORNER_RADIUS,
             },
         },
+        sideBands: [
+            {
+                // The header strip, across the top: the C4 title is written top-left,
+                // so the band a reader sees is the sheet's masthead and not a gutter.
+                // The pool's is on the left because a participant name runs up its
+                // side; the direction is the notation's, the mechanism is the same one.
+                side: 'top',
+                fill: '@band',
+                // The card's own line, so the strip reads as the frame continued rather
+                // than as a different KIND of rule drawn across the sheet.
+                divider: { color: '@cardBorder', width: BOARD_BORDER_WIDTH },
+                label: {
+                    id: 'name',
+                    // The user's own words, and only those: a diagram is titled by whoever
+                    // draws it, so there is no vocabulary to fall back to and no `labelKey`
+                    // to declare. Same call the BPMN pool's participant name makes.
+                    prop: 'name',
+                    // `y: 0` is the top of the plot, i.e. the band's INNER edge; a
+                    // negative `dy` walks back UP into the band, where the words are
+                    // written. Unchanged from the day the title was a zone's label — the
+                    // anchor is in plot ratios either way, so the title has not moved.
+                    anchor: { x: 0, y: 0, dy: -C4_BOARD_TITLE_BAND_HEIGHT / 3 },
+                    style: {
+                        size: BOARD_TITLE_FONT_SIZE,
+                        weight: 600,
+                        color: '@title',
+                    },
+                },
+            },
+        ],
     },
 };
 /* ── The boundary ──────────────────────────────────────────────────────── */

package/dist/board-hit.d.ts

@@ -0,0 +1,42 @@
+import type { BackgroundRect } from '@formicoidea/labre-core/blocks/surface';
+/**
+ * Where the C4 board's title band is, in ELEMENT-LOCAL model units.
+ *
+ * Pure, and lifted out of `element-view.ts` so the answer can be asserted
+ * without an editor, a viewport or a canvas around it — the same split
+ * `pool-hit.ts` makes for the BPMN pool, and for the same reason.
+ *
+ * The rectangle is derived from `backgroundPlot`, the very function the renderer
+ * paints the band from: nothing here restates a coordinate, so the strip a user
+ * aims at cannot drift away from the strip they can see.
+ *
+ * ponytail: a ROTATED board is not accounted for — the caller converts by
+ * subtraction (and, in `C4FrameView`, by de-rotating about the centre first),
+ * so every box here assumes an upright board. Same reserve `pool-hit.ts`
+ * documents.
+ */
+/** What this file needs of a board: its box. */
+export interface C4BoardGeometry {
+    deserializedXYWH: readonly number[];
+}
+/**
+ * The board's title band, or `null` when there is no room for one.
+ *
+ * The band IS the top margin, full width, clamped to a board shorter than its
+ * own header — the degenerate case the renderer clamps and the model's own
+ * carve-out clamps too.
+ */
+export declare function c4BoardTitleBand(model: C4BoardGeometry): BackgroundRect | null;
+/**
+ * Whether an element-local point is in the board's title band.
+ *
+ * The WHOLE band, not the tight box of the drawn glyphs. A header strip you may
+ * only double-click the eleven characters of is a target that lies about where
+ * it is — the same call the pool's participant band makes (`bpmnInPoolTitleBand`).
+ *
+ * No zoom-grown target here, unlike the pool's 28-unit strip: growing this one
+ * would put the rename zone outside the band the MODEL lets a click select, and
+ * "what is painted is what is picked" is worth more than the pixels a 56-unit
+ * header would gain at 0.2 zoom.
+ */
+export declare function c4InBoardTitleBand(model: C4BoardGeometry, local: readonly [number, number]): boolean;

package/dist/board-hit.js

@@ -0,0 +1,41 @@
+import { backgroundPlot } from '@formicoidea/labre-core/blocks/surface';
+import { C4_BOARD_BACKGROUND } from './background.js';
+/**
+ * The board's title band, or `null` when there is no room for one.
+ *
+ * The band IS the top margin, full width, clamped to a board shorter than its
+ * own header — the degenerate case the renderer clamps and the model's own
+ * carve-out clamps too.
+ */
+export function c4BoardTitleBand(model) {
+    const [, , w, h] = model.deserializedXYWH;
+    if (!(w > 0) || !(h > 0))
+        return null;
+    const plot = backgroundPlot(C4_BOARD_BACKGROUND, w, h);
+    const height = Math.min(plot.y0, h);
+    if (!(height > 0))
+        return null;
+    return { x: 0, y: 0, w, h: height };
+}
+/**
+ * Whether an element-local point is in the board's title band.
+ *
+ * The WHOLE band, not the tight box of the drawn glyphs. A header strip you may
+ * only double-click the eleven characters of is a target that lies about where
+ * it is — the same call the pool's participant band makes (`bpmnInPoolTitleBand`).
+ *
+ * No zoom-grown target here, unlike the pool's 28-unit strip: growing this one
+ * would put the rename zone outside the band the MODEL lets a click select, and
+ * "what is painted is what is picked" is worth more than the pixels a 56-unit
+ * header would gain at 0.2 zoom.
+ */
+export function c4InBoardTitleBand(model, local) {
+    const band = c4BoardTitleBand(model);
+    if (!band)
+        return false;
+    const [lx, ly] = local;
+    return (lx >= band.x &&
+        lx <= band.x + band.w &&
+        ly >= band.y &&
+        ly <= band.y + band.h);
+}

package/dist/consts.d.ts

@@ -254,18 +254,38 @@ 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 header strip's own tint — a shade of the card, not a colour of its own.
+ *
+ * Sober on purpose, and the same intent as the pool's participant band
+ * (`POOL_BAND_FILL`, `#f4f4f5`): the band has to be SEEN, because a strip a user
+ * cannot see is a target they cannot aim at, and it must not read as a second
+ * object sitting on the sheet. A hair lighter than the pool's, which is what it
+ * takes to stay quiet under a 20-unit title rather than under a 13-unit one.
+ */
+export declare const BOARD_BAND_FILL = "#f7f8fa";
 /**
  * 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.
+ * the other three because that is where the title is written — and, since the
+ * title band, it IS the title band (`C4_BOARD_TITLE_BAND_HEIGHT`, re-exported
+ * below from the model that owns it).
  */
 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 board's top margin lives in `@labre/affine-model`, beside the board model
+ * that hit-tests against it (a board is clickable by its title band as well as
+ * by its border — the same carve-out the BPMN pool makes, issues #194 / #197).
+ * It is re-exported here so this file stays the one place a reader looks for a
+ * 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';
 /**
  * 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

@@ -299,18 +299,38 @@ 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 header strip's own tint — a shade of the card, not a colour of its own.
+ *
+ * Sober on purpose, and the same intent as the pool's participant band
+ * (`POOL_BAND_FILL`, `#f4f4f5`): the band has to be SEEN, because a strip a user
+ * cannot see is a target they cannot aim at, and it must not read as a second
+ * object sitting on the sheet. A hair lighter than the pool's, which is what it
+ * takes to stay quiet under a 20-unit title rather than under a 13-unit one.
+ */
+export const BOARD_BAND_FILL = '#f7f8fa';
 /**
  * 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.
+ * the other three because that is where the title is written — and, since the
+ * title band, it IS the title band (`C4_BOARD_TITLE_BAND_HEIGHT`, re-exported
+ * below from the model that owns it).
  */
 export const BOARD_REF_WIDTH = 1400;
 export const BOARD_REF_HEIGHT = 900;
 export const BOARD_MARGIN = 24;
-export const BOARD_TITLE_MARGIN = 56;
+/**
+ * The board's top margin lives in `@labre/affine-model`, beside the board model
+ * that hit-tests against it (a board is clickable by its title band as well as
+ * by its border — the same carve-out the BPMN pool makes, issues #194 / #197).
+ * It is re-exported here so this file stays the one place a reader looks for a
+ * 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';
 /* ── The boundary ──────────────────────────────────────────────────────── */
 /**
  * The boundary's frame and its name, at the stencil's own values ×2 (`.st20`

package/dist/element-view.d.ts

@@ -1,4 +1,4 @@
-import type { FrameworkBackgroundDef } from '@formicoidea/labre-core/blocks/surface';
+import type { BackgroundLabelHit, FrameworkBackgroundDef } from '@formicoidea/labre-core/blocks/surface';
 import type { C4BoardElementModel, C4BoundaryElementModel } from '@formicoidea/labre-core/model';
 import type { EditorHost } from '@formicoidea/labre-core/std';
 import type { PointTestOptions } from '@formicoidea/labre-core/std/gfx';
@@ -33,6 +33,20 @@ declare abstract class C4FrameView<T extends C4BoardElementModel | C4BoundaryEle
     onDestroyed(): void;
     /** The editable name label under a MODEL-space point, or null. */
     private _labelAt;
+    /**
+     * Which region of the frame aims at the name, given an ELEMENT-LOCAL point.
+     *
+     * The DRAWN WORDS by default — the box `backgroundLabelHits` derives from the
+     * very anchor the renderer paints at, so a label can never be drawn in one
+     * place and clicked in another. That is the right answer for a name written
+     * INSIDE the plot, over the diagram, where anything wider would swallow
+     * clicks meant for the elements around it: the C4 boundary's name sits in its
+     * bottom-left corner, and this is its whole story.
+     *
+     * A frame whose name has a strip of its own overrides this and returns the
+     * strip — see {@link C4BoardView}.
+     */
+    protected _nameAt(hits: readonly BackgroundLabelHit[], lx: number, ly: number): BackgroundLabelHit | null;
     /**
      * A frame is SELECTED by its border (`FrameworkBackgroundElementModel`, issue
      * #194) — but the name written on its card must still receive the
@@ -42,6 +56,11 @@ declare abstract class C4FrameView<T extends C4BoardElementModel | C4BoundaryEle
      * asks the MODEL, and a framework declares its own gesture zones beside the
      * code that draws them. Without this the name becomes unrenameable; without
      * the model change the card swallows every click meant for the nodes on it.
+     *
+     * The BOARD's band is in both answers — the model picks it and this widens
+     * nothing over it — so on that frame the fallback below only ever fires for a
+     * point the model already took. It is the BOUNDARY that still needs it: its
+     * name is written inside the plot, where nothing is selectable.
      */
     includesPoint(x: number, y: number, options: PointTestOptions, host: EditorHost): boolean;
     private _onDblClick;
@@ -53,10 +72,25 @@ declare abstract class C4FrameView<T extends C4BoardElementModel | C4BoundaryEle
     private _openEditor;
     private _closeEditor;
 }
-/** The sheet a C4 diagram is drawn on. Double-click its title to rename it. */
+/**
+ * The sheet a C4 diagram is drawn on. Double-click ANYWHERE in its title band
+ * to rename it.
+ *
+ * The band and not the words, which is the whole of what this subclass changes.
+ * A header strip you may only double-click the eleven characters of is a target
+ * that lies about where it is — the same call the BPMN pool's participant band
+ * makes, and now the same geometry: the strip that is painted is the strip a
+ * single click selects (`C4BoardElementModel.includesPoint`) and the strip a
+ * double-click renames.
+ *
+ * `hits` still supplies the WORDS the editor opens on, so a board showing its
+ * default title opens on that title rather than on an empty box — only the
+ * region grew.
+ */
 export declare class C4BoardView extends C4FrameView<C4BoardElementModel> {
     static type: string;
     protected get def(): FrameworkBackgroundDef;
+    protected _nameAt(hits: readonly BackgroundLabelHit[], lx: number, ly: number): BackgroundLabelHit | null;
 }
 /** The dashed frame drawn round part of one. Double-click its name to rename. */
 export declare class C4BoundaryView extends C4FrameView<C4BoundaryElementModel> {

package/dist/element-view.js

@@ -3,6 +3,7 @@ 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';
+import { c4InBoardTitleBand } from './board-hit.js';
 /**
  * The one gesture the two C4 frames carry: a double-click on the name edits it
  * in place.
@@ -51,7 +52,24 @@ class C4FrameView extends GfxElementModelView {
             lx = ux - bx;
             ly = uy - by;
         }
-        const hit = hitTestBackgroundLabel(backgroundLabelHits(this.def, this.model, w, h, this.gfx.std.getOptional(TranslationProvider)), lx, ly);
+        const hits = backgroundLabelHits(this.def, this.model, w, h, this.gfx.std.getOptional(TranslationProvider));
+        return this._nameAt(hits, lx, ly);
+    }
+    /**
+     * Which region of the frame aims at the name, given an ELEMENT-LOCAL point.
+     *
+     * The DRAWN WORDS by default — the box `backgroundLabelHits` derives from the
+     * very anchor the renderer paints at, so a label can never be drawn in one
+     * place and clicked in another. That is the right answer for a name written
+     * INSIDE the plot, over the diagram, where anything wider would swallow
+     * clicks meant for the elements around it: the C4 boundary's name sits in its
+     * bottom-left corner, and this is its whole story.
+     *
+     * A frame whose name has a strip of its own overrides this and returns the
+     * strip — see {@link C4BoardView}.
+     */
+    _nameAt(hits, lx, ly) {
+        const hit = hitTestBackgroundLabel(hits, lx, ly);
         return hit && hit.prop === 'name' ? hit : null;
     }
     /**
@@ -63,6 +81,11 @@ class C4FrameView extends GfxElementModelView {
      * asks the MODEL, and a framework declares its own gesture zones beside the
      * code that draws them. Without this the name becomes unrenameable; without
      * the model change the card swallows every click meant for the nodes on it.
+     *
+     * The BOARD's band is in both answers — the model picks it and this widens
+     * nothing over it — so on that frame the fallback below only ever fires for a
+     * point the model already took. It is the BOUNDARY that still needs it: its
+     * name is written inside the plot, where nothing is selectable.
      */
     includesPoint(x, y, options, host) {
         if (super.includesPoint(x, y, options, host))
@@ -150,12 +173,32 @@ class C4FrameView extends GfxElementModelView {
         }
     }
 }
-/** The sheet a C4 diagram is drawn on. Double-click its title to rename it. */
+/**
+ * The sheet a C4 diagram is drawn on. Double-click ANYWHERE in its title band
+ * to rename it.
+ *
+ * The band and not the words, which is the whole of what this subclass changes.
+ * A header strip you may only double-click the eleven characters of is a target
+ * that lies about where it is — the same call the BPMN pool's participant band
+ * makes, and now the same geometry: the strip that is painted is the strip a
+ * single click selects (`C4BoardElementModel.includesPoint`) and the strip a
+ * double-click renames.
+ *
+ * `hits` still supplies the WORDS the editor opens on, so a board showing its
+ * default title opens on that title rather than on an empty box — only the
+ * region grew.
+ */
 export class C4BoardView extends C4FrameView {
     static { this.type = 'c4Board'; }
     get def() {
         return C4_BOARD_BACKGROUND;
     }
+    _nameAt(hits, lx, ly) {
+        const name = hits.find(hit => hit.prop === 'name');
+        if (!name)
+            return null;
+        return c4InBoardTitleBand(this.model, [lx, ly]) ? name : null;
+    }
 }
 /** The dashed frame drawn round part of one. Double-click its name to rename. */
 export class C4BoundaryView extends C4FrameView {

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export { C4_BOARD_BACKGROUND, C4_BOUNDARY_BACKGROUND } from './background.js';
-export { BOUNDARY_LABEL, type C4NodePaint, DESCRIPTION_PLACEHOLDER, NODE_LABEL, NODE_PALETTE, NODE_RADIUS, NODE_SIZE, NODE_STROKE_WIDTH, RELATIONSHIP_STROKE, RELATIONSHIP_WIDTH, } from './consts.js';
+export { BOUNDARY_LABEL, C4_BOARD_TITLE_BAND_HEIGHT, type C4NodePaint, DESCRIPTION_PLACEHOLDER, NODE_LABEL, NODE_PALETTE, NODE_RADIUS, NODE_SIZE, NODE_STROKE_WIDTH, RELATIONSHIP_STROKE, RELATIONSHIP_WIDTH, } from './consts.js';
 export { C4_TYPE_PLACEHOLDER, C4_TYPE_TAKES_TECHNOLOGY, C4_TYPE_WORD, c4MorphedTypeLine, c4TypeLine, normalizeC4TypeLine, technologyOfTypeLine, TYPE_TECHNOLOGY_PLACEHOLDER, } from './type-line.js';
 export { c4MorphClears, c4MorphProps, c4NodeProps, GLYPH_BODY_KINDS, } from './presets.js';
 export { C4_MORPH_FAMILIES, C4_MORPH_SPEC, c4MorphedTitle, c4NodeOfComponent, } from './morph.js';

package/dist/index.js

@@ -3,7 +3,11 @@
 // on why a framework declares rather than draws). Exported so a host — and the
 // audit's own consumers — can answer those questions without a canvas.
 export { C4_BOARD_BACKGROUND, C4_BOUNDARY_BACKGROUND } from './background.js';
-export { BOUNDARY_LABEL, DESCRIPTION_PLACEHOLDER, NODE_LABEL, NODE_PALETTE, NODE_RADIUS, NODE_SIZE, NODE_STROKE_WIDTH, RELATIONSHIP_STROKE, RELATIONSHIP_WIDTH, } from './consts.js';
+export { BOUNDARY_LABEL, 
+// The header strip's height, owned by the model that hit-tests against it and
+// re-exported here with the rest of a board's metrics: a host laying a board
+// out needs to know how much of the top of the sheet is furniture.
+C4_BOARD_TITLE_BAND_HEIGHT, DESCRIPTION_PLACEHOLDER, NODE_LABEL, NODE_PALETTE, NODE_RADIUS, NODE_SIZE, NODE_STROKE_WIDTH, RELATIONSHIP_STROKE, RELATIONSHIP_WIDTH, } from './consts.js';
 // The middle tier of an element's label, SEMI-DERIVED: the word from the kind,
 // the technology from the author. Pure and total over the nine kinds and over
 // every string an author can type, so a host, a rule or a reading can name an

package/dist/toolbar/config.js

@@ -39,6 +39,11 @@ const ChevronDownIcon = html `<svg
 >
   <path d="M6 9l6 6 6-6" />
 </svg>`;
+/**
+ * The tick on the level in force — inline, this package carrying no icon
+ * dependency. Rendered at the END of the row and only when selected, the row
+ * itself wearing `data-option` for the native geometry and the primary colour.
+ */
 const CheckIcon = html `<svg
   width="20"
   height="20"
@@ -291,6 +296,7 @@ const levelPickerAction = {
         const options = C4_BOARD_LEVEL_MENU.options.map(option => {
             const selected = option.level === board.level;
             return html `<editor-menu-action
+        data-option
         data-testid="c4-level-option"
         data-level=${option.level ?? 'none'}
         data-selected=${selected ? 'true' : nothing}
@@ -298,8 +304,8 @@ const levelPickerAction = {
         aria-pressed=${selected}
         @click=${() => pickLevel(ctx, option)}
       >
-        ${selected ? CheckIcon : html `<span style="width: 20px;"></span>`}
         <span class="label">${wordsFor(option)}</span>
+        ${selected ? CheckIcon : nothing}
       </editor-menu-action>`;
         });
         return html `<editor-menu-button

package/package.json

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