@formicoidea/labre-framework-cynefin 0.40.0 → 0.42.0

package/dist/cynefin/consts.js

@@ -2,9 +2,28 @@
  * Visual constants for the Liminal Cynefin diagram, reproduced from the official
  * SVG (viewBox 0 0 1080 777). All geometry is authored in that fixed reference
  * space and scaled uniformly to the element bounds by the renderer.
+ *
+ * ## i18n
+ *
+ * Every word painted on the diagram — domain headings and subheadings, the
+ * Probe/Sense/Respond decision lines, the teal annotations, the small
+ * exaptation sub-labels and the two central markers — carries a `…Key`
+ * alongside its English text, resolved by `element-renderer.ts` through the
+ * `CanvasRenderer` it is handed at paint time (the 4th argument every
+ * `ElementRenderer` receives, `renderer.std`). The letters "A" and "C" on the
+ * two markers are notation, not words, and are deliberately NOT keyed (PO
+ * decision) — only their spelled-out NAMES ("Aporia", "Confusion") are.
  */
 export const REF_W = 1080;
 export const REF_H = 777;
+/**
+ * Type size of a domain heading, in reference units.
+ *
+ * Named because two things read it: the renderer, which draws the word, and the
+ * hit test that offers it to a double-click. A size that lived only in the
+ * renderer's font string would let the target drift away from the word.
+ */
+export const HEADING_SIZE = 30;
 export const COLORS = {
     boundary: '#333333',
     teal: '#2a9d99',
@@ -84,94 +103,322 @@ export const DASH_RECTS = [
     [998, 314, 11.9, 168.9],
     [1019, 310, 11.8, 167.3],
 ];
+/* ── i18n: headings, subheadings and decision lines ───────────────────── */
+const HEADING_COMPLEX = [
+    'com.labre.cynefin-estuarine.cynefin.heading.complex',
+    'Complex',
+];
+const HEADING_COMPLICATED = [
+    'com.labre.cynefin-estuarine.cynefin.heading.complicated',
+    'Complicated',
+];
+const HEADING_CHAOTIC = [
+    'com.labre.cynefin-estuarine.cynefin.heading.chaotic',
+    'Chaotic',
+];
+const HEADING_CLEAR = [
+    'com.labre.cynefin-estuarine.cynefin.heading.clear',
+    'Clear',
+];
+const SUBHEADING_ADAPTIVE = [
+    'com.labre.cynefin-estuarine.cynefin.subheading.adaptive-system',
+    'Adaptive system',
+];
+/** Shared by Complicated and Clear — the same word, one key. */
+const SUBHEADING_ORDERED = [
+    'com.labre.cynefin-estuarine.cynefin.subheading.ordered-system',
+    'Ordered system',
+];
+const SUBHEADING_UNORDERED = [
+    'com.labre.cynefin-estuarine.cynefin.subheading.un-ordered-system',
+    'Un-ordered system',
+];
+/**
+ * The ten distinct decision sentences (two are shared verbatim between two
+ * domains — "Sense how the context reacts", "Sense the context with
+ * analytical methods" — one key each, reused rather than duplicated).
+ *
+ * The fallback is the FULL sentence (`lead` + `rest` concatenated): the
+ * renderer draws `lead` bold and `rest` roman as two `fillText` calls only
+ * while NO host answered (byte-identical to before these keys existed); once
+ * a host resolves the key, the whole sentence is drawn as one run — a
+ * translation is not guaranteed to keep the same first word, so splitting it
+ * at the English boundary would be a guess.
+ */
+const LINE_PROBE = [
+    'com.labre.cynefin-estuarine.cynefin.line.probe',
+    'Probe the context with parallel experiments',
+];
+const LINE_SENSE_REACTS = [
+    'com.labre.cynefin-estuarine.cynefin.line.sense-reacts',
+    'Sense how the context reacts',
+];
+const LINE_RESPOND_AMPLIFY = [
+    'com.labre.cynefin-estuarine.cynefin.line.respond-amplify',
+    'Respond by amplifying positive experiments',
+];
+const LINE_SENSE_ANALYTICAL = [
+    'com.labre.cynefin-estuarine.cynefin.line.sense-analytical',
+    'Sense the context with analytical methods',
+];
+const LINE_ANALYSE = [
+    'com.labre.cynefin-estuarine.cynefin.line.analyse',
+    'Analyse observations',
+];
+const LINE_RESPOND_MANY_SOLUTIONS = [
+    'com.labre.cynefin-estuarine.cynefin.line.respond-many-solutions',
+    'Respond by applying one of many good solutions',
+];
+const LINE_ACT = [
+    'com.labre.cynefin-estuarine.cynefin.line.act',
+    'Act on the context to stabilize (it or yourself)',
+];
+const LINE_RESPOND_REACT = [
+    'com.labre.cynefin-estuarine.cynefin.line.respond-react',
+    'Respond by re-acting',
+];
+const LINE_CATEGORIZE = [
+    'com.labre.cynefin-estuarine.cynefin.line.categorize',
+    'Categorize observations',
+];
+const LINE_RESPOND_PRACTICES = [
+    'com.labre.cynefin-estuarine.cynefin.line.respond-practices',
+    'Respond by applying tried and true practices',
+];
 export const DOMAINS = [
     {
-        heading: 'Complex',
+        heading: HEADING_COMPLEX,
+        prop: 'complexTitle',
         x: 37,
         hy: 31,
-        subheading: 'Adaptive system',
+        subheading: SUBHEADING_ADAPTIVE,
         sy: 53,
         lines: [
-            { lead: 'Probe', rest: ' the context with parallel experiments', y: 71 },
-            { lead: 'Sense', rest: ' how the context reacts', y: 90 },
-            { lead: 'Respond', rest: ' by amplifying positive experiments', y: 109 },
+            {
+                lead: 'Probe',
+                rest: ' the context with parallel experiments',
+                wording: LINE_PROBE,
+                y: 71,
+            },
+            {
+                lead: 'Sense',
+                rest: ' how the context reacts',
+                wording: LINE_SENSE_REACTS,
+                y: 90,
+            },
+            {
+                lead: 'Respond',
+                rest: ' by amplifying positive experiments',
+                wording: LINE_RESPOND_AMPLIFY,
+                y: 109,
+            },
         ],
     },
     {
-        heading: 'Complicated',
+        heading: HEADING_COMPLICATED,
+        prop: 'complicatedTitle',
         x: 779,
         hy: 31,
-        subheading: 'Ordered system',
+        subheading: SUBHEADING_ORDERED,
         sy: 53,
         lines: [
-            { lead: 'Sense', rest: ' the context with analytical methods', y: 71 },
-            { lead: 'Analyse', rest: ' observations', y: 90 },
+            {
+                lead: 'Sense',
+                rest: ' the context with analytical methods',
+                wording: LINE_SENSE_ANALYTICAL,
+                y: 71,
+            },
+            { lead: 'Analyse', rest: ' observations', wording: LINE_ANALYSE, y: 90 },
             {
                 lead: 'Respond',
                 rest: ' by applying one of many good solutions',
+                wording: LINE_RESPOND_MANY_SOLUTIONS,
                 y: 109,
             },
         ],
     },
     {
-        heading: 'Chaotic',
+        heading: HEADING_CHAOTIC,
+        prop: 'chaoticTitle',
         x: 37,
         hy: 587,
-        subheading: 'Un-ordered system',
+        subheading: SUBHEADING_UNORDERED,
         sy: 609,
         lines: [
             {
                 lead: 'Act',
                 rest: ' on the context to stabilize (it or yourself)',
+                wording: LINE_ACT,
                 y: 627,
             },
-            { lead: 'Sense', rest: ' how the context reacts', y: 646 },
-            { lead: 'Respond', rest: ' by re-acting', y: 665 },
+            {
+                lead: 'Sense',
+                rest: ' how the context reacts',
+                wording: LINE_SENSE_REACTS,
+                y: 646,
+            },
+            {
+                lead: 'Respond',
+                rest: ' by re-acting',
+                wording: LINE_RESPOND_REACT,
+                y: 665,
+            },
         ],
     },
     {
-        heading: 'Clear',
+        heading: HEADING_CLEAR,
+        prop: 'clearTitle',
         x: 779,
         hy: 587,
-        subheading: 'Ordered system',
+        subheading: SUBHEADING_ORDERED,
         sy: 609,
         lines: [
-            { lead: 'Sense', rest: ' the context with analytical methods', y: 627 },
-            { lead: 'Categorize', rest: ' observations', y: 646 },
+            {
+                lead: 'Sense',
+                rest: ' the context with analytical methods',
+                wording: LINE_SENSE_ANALYTICAL,
+                y: 627,
+            },
+            {
+                lead: 'Categorize',
+                rest: ' observations',
+                wording: LINE_CATEGORIZE,
+                y: 646,
+            },
             {
                 lead: 'Respond',
                 rest: ' by applying tried and true practices',
+                wording: LINE_RESPOND_PRACTICES,
                 y: 665,
             },
         ],
     },
 ];
-/** Teal annotation labels (centered): [text, x, y]. */
+/* ── i18n: teal annotations and small exaptation sub-labels ────────────── */
+const TEAL_ITERATE = [
+    'com.labre.cynefin-estuarine.cynefin.teal.iterate',
+    'iterate',
+];
+const TEAL_STRATEGY_BY_DESIGN = [
+    'com.labre.cynefin-estuarine.cynefin.teal.strategy-by-design',
+    'strategy by design',
+];
+const TEAL_RADICAL_INNOVATION = [
+    'com.labre.cynefin-estuarine.cynefin.teal.radical-innovation',
+    'radical innovation',
+];
+const TEAL_BY_DESIGN = [
+    'com.labre.cynefin-estuarine.cynefin.teal.by-design',
+    'by design',
+];
+const TEAL_EXTREME_REPURPOSING = [
+    'com.labre.cynefin-estuarine.cynefin.teal.extreme-repurposing',
+    'extreme repurposing',
+];
+const TEAL_GOOD_PRACTICE = [
+    'com.labre.cynefin-estuarine.cynefin.teal.good-practice',
+    'good practice',
+];
+const TEAL_BEST_PRACTICE = [
+    'com.labre.cynefin-estuarine.cynefin.teal.best-practice',
+    'best practice',
+];
+/** Teal annotation labels (centered): [wording, x, y]. */
 export const TEAL_LABELS = [
-    ['iterate', 510, 16],
-    ['iterate', 533, 230],
-    ['strategy by design', 257, 225],
-    ['radical innovation', 268, 390],
-    ['by design', 268, 406],
-    ['extreme repurposing', 217, 496],
-    ['good practice', 814, 196],
-    ['best practice', 751, 459],
-];
-/** Small exaptation sub-labels (centered): [text, x, y]. */
+    [TEAL_ITERATE, 510, 16],
+    [TEAL_ITERATE, 533, 230],
+    [TEAL_STRATEGY_BY_DESIGN, 257, 225],
+    [TEAL_RADICAL_INNOVATION, 268, 390],
+    [TEAL_BY_DESIGN, 268, 406],
+    [TEAL_EXTREME_REPURPOSING, 217, 496],
+    [TEAL_GOOD_PRACTICE, 814, 196],
+    [TEAL_BEST_PRACTICE, 751, 459],
+];
+const SMALL_DISPOSITIONAL = [
+    'com.labre.cynefin-estuarine.cynefin.small.dispositional-exaptation',
+    'dispositional exaptation',
+];
+const SMALL_STIMULATED = [
+    'com.labre.cynefin-estuarine.cynefin.small.stimulated-exaptation',
+    'stimulated exaptation',
+];
+const SMALL_STRESS_BASED = [
+    'com.labre.cynefin-estuarine.cynefin.small.stress-based-exaptation',
+    'stress-based exaptation',
+];
+/** Small exaptation sub-labels (centered): [wording, x, y]. */
 export const SMALL_LABELS = [
-    ['dispositional exaptation', 257, 239],
-    ['stimulated exaptation', 268, 419],
-    ['stress-based exaptation', 217, 510],
+    [SMALL_DISPOSITIONAL, 257, 239],
+    [SMALL_STIMULATED, 268, 419],
+    [SMALL_STRESS_BASED, 217, 510],
+];
+/* ── i18n: the two central markers ──────────────────────────────────── */
+const MARKER_APORIA_NAME = [
+    'com.labre.cynefin-estuarine.cynefin.marker.aporia',
+    'Aporia',
+];
+const MARKER_CONFUSION_NAME = [
+    'com.labre.cynefin-estuarine.cynefin.marker.confusion',
+    'Confusion',
+];
+const MARKER_APORIA_NOTE = [
+    'com.labre.cynefin-estuarine.cynefin.marker.aporia-note',
+    'prepare to exit',
 ];
 export const MARKERS = [
     {
         letter: 'A',
         lx: 444,
         ly: 334,
-        name: 'Aporia',
+        name: MARKER_APORIA_NAME,
         nx: 447,
         ny: 349,
-        note: { text: 'prepare to exit', x: 449, y: 366 },
+        note: { wording: MARKER_APORIA_NOTE, x: 449, y: 366 },
+    },
+    {
+        letter: 'C',
+        lx: 531,
+        ly: 419,
+        name: MARKER_CONFUSION_NAME,
+        nx: 529,
+        ny: 436,
     },
-    { letter: 'C', lx: 531, ly: 419, name: 'Confusion', nx: 529, ny: 436 },
+];
+/**
+ * Every wording this file paints, for `translations.ts`'s manifest
+ * contribution. Deduplicated by key (`iterate` and the two shared lines are
+ * each listed once), which is what `mergeTranslationEntries` needs to see one
+ * entry per key rather than two identical ones.
+ */
+export const CYNEFIN_CANVAS_WORDINGS = [
+    HEADING_COMPLEX,
+    HEADING_COMPLICATED,
+    HEADING_CHAOTIC,
+    HEADING_CLEAR,
+    SUBHEADING_ADAPTIVE,
+    SUBHEADING_ORDERED,
+    SUBHEADING_UNORDERED,
+    LINE_PROBE,
+    LINE_SENSE_REACTS,
+    LINE_RESPOND_AMPLIFY,
+    LINE_SENSE_ANALYTICAL,
+    LINE_ANALYSE,
+    LINE_RESPOND_MANY_SOLUTIONS,
+    LINE_ACT,
+    LINE_RESPOND_REACT,
+    LINE_CATEGORIZE,
+    LINE_RESPOND_PRACTICES,
+    TEAL_ITERATE,
+    TEAL_STRATEGY_BY_DESIGN,
+    TEAL_RADICAL_INNOVATION,
+    TEAL_BY_DESIGN,
+    TEAL_EXTREME_REPURPOSING,
+    TEAL_GOOD_PRACTICE,
+    TEAL_BEST_PRACTICE,
+    SMALL_DISPOSITIONAL,
+    SMALL_STIMULATED,
+    SMALL_STRESS_BASED,
+    MARKER_APORIA_NAME,
+    MARKER_CONFUSION_NAME,
+    MARKER_APORIA_NOTE,
 ];

package/dist/cynefin/element-renderer.d.ts

@@ -7,6 +7,22 @@ import type { CynefinElementModel } from '@formicoidea/labre-core/model';
  * (heading + Probe/Sense/Respond decisions), the teal annotation labels and the
  * central Aporia (A) / Confusion (C) markers. Drawn in the fixed reference space
  * and scaled uniformly to the element bounds.
+ *
+ * ## i18n
+ *
+ * Every word above is a `ChromeWording` (`./consts.ts`), resolved through the
+ * `CanvasRenderer` this function is handed as its 4th argument — the same
+ * `renderer.std` `framework-background/renderer.ts` reads for a declared
+ * background. `renderer` is optional (absent in a bare unit test that calls
+ * this function with three arguments), in which case every wording reads its
+ * English fallback, byte-identical to before these keys existed.
+ *
+ * The three-line decisions are the one wrinkle: with no host they are drawn as
+ * they always were — a bold lead word plus the roman remainder, two
+ * `fillText` calls — because that split is known to be exactly the English
+ * text. Once a host answers, the WHOLE sentence is drawn as one run: a
+ * translation is not guaranteed to keep the same first word, so guessing where
+ * to split it would be inventing typography the translator never asked for.
  */
 export declare const cynefin: ElementRenderer<CynefinElementModel>;
 export declare const CynefinRendererExtension: import("@formicoidea/labre-core/store").ExtensionType & {

package/dist/cynefin/element-renderer.js

@@ -1,6 +1,8 @@
-import { ElementRendererExtension, } from '@formicoidea/labre-core/blocks/surface';
+import { ElementRendererExtension, taggedPath2D, } from '@formicoidea/labre-core/blocks/surface';
+import { TranslationProvider, translateKey, } from '@formicoidea/labre-core/shared/services';
 import { FONT_FAMILY, refScale } from '../utils.js';
-import { COLORS, DARK_BACK_PATHS, DARK_FRONT_PATHS, DASH_RECTS, DOMAINS, HATCHES, MARKERS, REF_H, REF_W, SMALL_LABELS, TEAL_LABELS, TEAL_PATH, TEAL_WIDTH, } from './consts.js';
+import { COLORS, DARK_BACK_PATHS, DARK_FRONT_PATHS, DASH_RECTS, DOMAINS, HATCHES, HEADING_SIZE, MARKERS, REF_H, REF_W, SMALL_LABELS, TEAL_LABELS, TEAL_PATH, TEAL_WIDTH, } from './consts.js';
+import { cynefinHeadingText } from './labels.js';
 /**
  * Canvas renderer for the Liminal Cynefin diagram — reproduces the official SVG:
  * the dark hand-drawn boundary, the teal "iterate" curve, the dashed
@@ -8,8 +10,29 @@ import { COLORS, DARK_BACK_PATHS, DARK_FRONT_PATHS, DASH_RECTS, DOMAINS, HATCHES
  * (heading + Probe/Sense/Respond decisions), the teal annotation labels and the
  * central Aporia (A) / Confusion (C) markers. Drawn in the fixed reference space
  * and scaled uniformly to the element bounds.
+ *
+ * ## i18n
+ *
+ * Every word above is a `ChromeWording` (`./consts.ts`), resolved through the
+ * `CanvasRenderer` this function is handed as its 4th argument — the same
+ * `renderer.std` `framework-background/renderer.ts` reads for a declared
+ * background. `renderer` is optional (absent in a bare unit test that calls
+ * this function with three arguments), in which case every wording reads its
+ * English fallback, byte-identical to before these keys existed.
+ *
+ * The three-line decisions are the one wrinkle: with no host they are drawn as
+ * they always were — a bold lead word plus the roman remainder, two
+ * `fillText` calls — because that split is known to be exactly the English
+ * text. Once a host answers, the WHOLE sentence is drawn as one run: a
+ * translation is not guaranteed to keep the same first word, so guessing where
+ * to split it would be inventing typography the translator never asked for.
  */
-export const cynefin = (model, ctx, matrix) => {
+export const cynefin = (model, ctx, matrix, renderer) => {
+    const tr = (wording) => renderer ? translateKey(renderer.std, ...wording) : wording[1];
+    // The host's catalogue, or `null` with no host — used to decide whether a
+    // decision line is drawn bold-lead/roman-rest (English, exactly as before)
+    // or as one translated run. See the docstring above.
+    const hasHost = Boolean(renderer?.std.getOptional(TranslationProvider));
     const [, , w, h] = model.deserializedXYWH;
     const cx = w / 2;
     const cy = h / 2;
@@ -26,7 +49,7 @@ export const cynefin = (model, ctx, matrix) => {
     for (const [d, lw, miter] of DARK_BACK_PATHS) {
         ctx.lineJoin = miter ? 'miter' : 'round';
         ctx.lineWidth = lw;
-        ctx.stroke(new Path2D(d));
+        ctx.stroke(taggedPath2D(d));
     }
     ctx.lineJoin = 'round';
     // ── Dashed boundary (oriented square pavings) ───────────────────────
@@ -42,14 +65,14 @@ export const cynefin = (model, ctx, matrix) => {
     if (model.showLiminalLine) {
         ctx.strokeStyle = COLORS.teal;
         ctx.lineWidth = TEAL_WIDTH;
-        ctx.stroke(new Path2D(TEAL_PATH));
+        ctx.stroke(taggedPath2D(TEAL_PATH));
     }
     // ── Dark boundary strokes (over the teal curve) ─────────────────────
     ctx.strokeStyle = COLORS.boundary;
     for (const [d, lw, miter] of DARK_FRONT_PATHS) {
         ctx.lineJoin = miter ? 'miter' : 'round';
         ctx.lineWidth = lw;
-        ctx.stroke(new Path2D(d));
+        ctx.stroke(taggedPath2D(d));
     }
     ctx.lineJoin = 'round';
     // ── Cliff hatching ──────────────────────────────────────────────────
@@ -65,52 +88,66 @@ export const cynefin = (model, ctx, matrix) => {
     if (model.showTitles) {
         ctx.textAlign = 'left';
         ctx.fillStyle = COLORS.heading;
-        ctx.font = `700 30px ${FONT_FAMILY}`;
-        for (const d of DOMAINS)
-            ctx.fillText(d.heading, d.x, d.hy);
+        ctx.font = `700 ${HEADING_SIZE}px ${FONT_FAMILY}`;
+        // The user's own word when they have renamed this domain, the catalogue's
+        // otherwise — the same precedence a declared background applies.
+        for (const d of DOMAINS) {
+            ctx.fillText(cynefinHeadingText(model, d, tr), d.x, d.hy);
+        }
         ctx.textAlign = 'center';
         for (const m of MARKERS) {
             ctx.fillStyle = COLORS.body;
             ctx.font = `700 38px ${FONT_FAMILY}`;
+            // The letter itself is notation, not a word — never translated.
             ctx.fillText(m.letter, m.lx, m.ly);
             ctx.font = `13.5px ${FONT_FAMILY}`;
-            ctx.fillText(m.name, m.nx, m.ny);
+            ctx.fillText(tr(m.name), m.nx, m.ny);
         }
     }
     // ── Explanatory text: subheadings, decisions, annotations, notes ────
     if (model.showDescriptions) {
-        // Subheadings (h2) + bold-lead decision lines
+        // Subheadings (h2) + decision lines
         ctx.textAlign = 'left';
         for (const d of DOMAINS) {
             ctx.fillStyle = COLORS.heading;
             ctx.font = `700 15px ${FONT_FAMILY}`;
-            ctx.fillText(d.subheading, d.x, d.sy);
+            ctx.fillText(tr(d.subheading), d.x, d.sy);
             ctx.fillStyle = COLORS.body;
-            for (const { lead, rest, y } of d.lines) {
-                ctx.font = `700 13.5px ${FONT_FAMILY}`;
-                ctx.fillText(lead, d.x, y);
-                const leadW = ctx.measureText(lead).width;
-                ctx.font = `13.5px ${FONT_FAMILY}`;
-                ctx.fillText(rest, d.x + leadW, y);
+            for (const { lead, rest, wording, y } of d.lines) {
+                if (hasHost) {
+                    // A translated sentence: one run, no assumed bold-lead boundary.
+                    ctx.font = `13.5px ${FONT_FAMILY}`;
+                    ctx.fillText(tr(wording), d.x, y);
+                }
+                else {
+                    // No host: exactly the bold-lead / roman-rest split that shipped
+                    // before these keys existed.
+                    ctx.font = `700 13.5px ${FONT_FAMILY}`;
+                    ctx.fillText(lead, d.x, y);
+                    const leadW = ctx.measureText(lead).width;
+                    ctx.font = `13.5px ${FONT_FAMILY}`;
+                    ctx.fillText(rest, d.x + leadW, y);
+                }
             }
         }
         ctx.textAlign = 'center';
         // Teal annotation labels
         ctx.fillStyle = COLORS.teal;
         ctx.font = `700 15px ${FONT_FAMILY}`;
-        for (const [t, x, y] of TEAL_LABELS)
-            ctx.fillText(t, x, y);
+        for (const [wording, x, y] of TEAL_LABELS)
+            ctx.fillText(tr(wording), x, y);
         // Small exaptation sub-labels
         ctx.fillStyle = COLORS.body;
         ctx.font = `10.5px ${FONT_FAMILY}`;
-        for (const [t, x, y] of SMALL_LABELS)
-            ctx.fillText(t, x, y);
+        for (const [wording, x, y] of SMALL_LABELS) {
+            ctx.fillText(tr(wording), x, y);
+        }
         // Marker notes ("prepare to exit")
         ctx.fillStyle = COLORS.teal;
         ctx.font = `700 15px ${FONT_FAMILY}`;
         for (const m of MARKERS) {
             if (m.note)
-                ctx.fillText(m.note.text, m.note.x, m.note.y);
+                ctx.fillText(tr(m.note.wording), m.note.x, m.note.y);
         }
     }
 };

package/dist/cynefin/element-view.d.ts

@@ -1,11 +1,20 @@
+import type { EditableBackgroundLabel } from '@formicoidea/labre-core/blocks/surface';
+import { FrameworkBackgroundView } from '@formicoidea/labre-core/blocks/surface';
 import type { CynefinElementModel } from '@formicoidea/labre-core/model';
-import { GfxElementModelView } from '@formicoidea/labre-core/std/gfx';
 /**
  * View for the Cynefin background. Registering it ensures `gfx.view.get(model)`
  * returns a view (required so move / select interactions work).
+ *
+ * Extends {@link FrameworkBackgroundView} rather than
+ * `DeclaredBackgroundView`: this diagram is a figurative reproduction of the
+ * official SVG and has no `FrameworkBackgroundDef` behind it, so it says where
+ * its labels are in its own reference space. The gesture itself — where a
+ * double-click is allowed to land, the in-place `<input>`, the commit that
+ * refuses to write an untouched value — is the shared one (issue #355).
  */
-export declare class CynefinView extends GfxElementModelView<CynefinElementModel> {
+export declare class CynefinView extends FrameworkBackgroundView<CynefinElementModel> {
     static type: string;
+    protected labelAt(lx: number, ly: number, w: number, h: number): EditableBackgroundLabel | null;
 }
 /**
  * Resize gating: the resize handles are hidden unless `model.resizeEnabled` is

package/dist/cynefin/element-view.js

@@ -1,10 +1,25 @@
-import { GfxElementModelView, GfxViewInteractionExtension, } from '@formicoidea/labre-core/std/gfx';
+import { FrameworkBackgroundView, hitTestBackgroundLabel, } from '@formicoidea/labre-core/blocks/surface';
+import { translateKey, } from '@formicoidea/labre-core/shared/services';
+import { GfxViewInteractionExtension } from '@formicoidea/labre-core/std/gfx';
+import { cynefinLabelHits } from './labels.js';
 /**
  * View for the Cynefin background. Registering it ensures `gfx.view.get(model)`
  * returns a view (required so move / select interactions work).
+ *
+ * Extends {@link FrameworkBackgroundView} rather than
+ * `DeclaredBackgroundView`: this diagram is a figurative reproduction of the
+ * official SVG and has no `FrameworkBackgroundDef` behind it, so it says where
+ * its labels are in its own reference space. The gesture itself — where a
+ * double-click is allowed to land, the in-place `<input>`, the commit that
+ * refuses to write an untouched value — is the shared one (issue #355).
  */
-export class CynefinView extends GfxElementModelView {
+export class CynefinView extends FrameworkBackgroundView {
     static { this.type = 'cynefin'; }
+    labelAt(lx, ly, w, h) {
+        const translate = (wording) => translateKey(this.gfx.std, ...wording);
+        const hit = hitTestBackgroundLabel(cynefinLabelHits(this.model, w, h, translate), lx, ly);
+        return hit ? { prop: hit.prop, text: hit.text } : null;
+    }
 }
 /**
  * Resize gating: the resize handles are hidden unless `model.resizeEnabled` is

package/dist/cynefin/labels.d.ts

@@ -0,0 +1,25 @@
+import type { BackgroundLabelHit } from '@formicoidea/labre-core/blocks/surface';
+import type { CynefinElementModel } from '@formicoidea/labre-core/model';
+import type { ChromeWording } from '@formicoidea/labre-core/shared/services';
+import type { DomainBlock } from './consts.js';
+/** Resolves a wording against the host's catalogue, or falls back to English. */
+export type CynefinWordingResolver = (wording: ChromeWording) => string;
+/**
+ * What a domain heading SAYS: the user's own word, else the vocabulary.
+ *
+ * The very precedence `backgroundLabelText` applies to a declared background —
+ * user text wins over the catalogue, the catalogue over the shipped English —
+ * spelled out here because this diagram has no declaration to apply it for it.
+ * An empty string is a real answer (the user erased the word), which is why the
+ * test is against `undefined` and not against falsiness.
+ */
+export declare function cynefinHeadingText(model: CynefinElementModel, block: DomainBlock, translate: CynefinWordingResolver): string;
+/**
+ * Clickable boxes of the four domain headings, in ELEMENT-LOCAL coordinates.
+ *
+ * Built from the same reference positions and the same uniform letterbox fit
+ * the renderer draws them with, so the target tracks the word at any size, and
+ * empty while the headings are hidden — a label that is not painted may not be
+ * aimed at either.
+ */
+export declare function cynefinLabelHits(model: CynefinElementModel, w: number, h: number, translate: CynefinWordingResolver): BackgroundLabelHit[];