@formicoidea/labre-framework-cynefin 0.41.0 → 0.43.1

package/dist/cynefin/element-view.js

@@ -1,23 +1,77 @@
-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 { cynefinCroppedXYWH } from './crop.js';
+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
- * true (toggled from the toolbar). Moving / selecting stays available.
+ * Resize gating and, when the handle is let go, the crop.
+ *
+ * ## Gating
+ *
+ * The resize handles are hidden unless `model.resizeEnabled` is true (toggled
+ * from the toolbar). Moving / selecting stays available.
+ *
+ * ## The crop
+ *
+ * The diagram is a fixed drawing fitted uniformly into the element, so dragged
+ * off its proportion the element letterboxes: 400 model units of nothing either
+ * side at 1600 × 600. `onResizeEnd` brings the frame back onto the picture (see
+ * `./crop.ts`) — the drawing is neither deformed nor truncated, the element
+ * simply stops claiming room it does not paint.
+ *
+ * ## Why here, and why one undo step
+ *
+ * A resize STASHES `xywh` on the way in, writes the model on every move, and
+ * commits the stash in `onResizeEnd`, inside the manager's own
+ * `store.transact` (`std/gfx/interactivity/manager.ts`). Writing the cropped
+ * box BEFORE calling `default` therefore changes what is committed rather than
+ * adding a second write: the whole gesture stays one Yjs write, and one undo
+ * step. `captureSync` would do the opposite here — it would close the step and
+ * make the crop a second one.
+ *
+ * This seam is also what keeps the crop a GESTURE. A cascade watching `xywh`
+ * would fire on a peer's resize too and re-crop, on every screen, a frame
+ * nobody on that screen touched; and it would fire on a document being loaded.
+ * The readonly guard is belt and braces — `handleElementResize` already refuses
+ * to start in a readonly store — but it is the invariant, so it is stated.
  */
 export const CynefinInteraction = GfxViewInteractionExtension(CynefinView.type, {
-    handleResize({ model }) {
+    handleResize({ std, model }) {
         return {
             beforeResize({ set }) {
                 if (!model.resizeEnabled) {
                     set({ allowedHandlers: [] });
                 }
             },
+            onResizeEnd(context) {
+                if (!std.store.readonly) {
+                    const cropped = cynefinCroppedXYWH(model.xywh);
+                    // No write at all when the frame is already on the drawing: an
+                    // undo entry for a gesture that changed nothing is a bug.
+                    if (cropped)
+                        model.xywh = cropped;
+                }
+                context.default(context);
+            },
         };
     },
 });

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[];

package/dist/cynefin/labels.js

@@ -0,0 +1,40 @@
+import { backgroundTextHitBox } from '@formicoidea/labre-core/blocks/surface';
+import { refScale } from '../utils.js';
+import { DOMAINS, HEADING_SIZE, REF_H, REF_W } from './consts.js';
+/**
+ * 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 function cynefinHeadingText(model, block, translate) {
+    const own = model[block.prop];
+    return own === undefined || own === null
+        ? translate(block.heading)
+        : String(own);
+}
+/**
+ * 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 function cynefinLabelHits(model, w, h, translate) {
+    if (!model.showTitles)
+        return [];
+    const { s, ox, oy } = refScale(w, h, REF_W, REF_H);
+    return DOMAINS.map(block => {
+        const text = cynefinHeadingText(model, block, translate);
+        return {
+            id: block.prop,
+            prop: block.prop,
+            text,
+            ...backgroundTextHitBox(text, HEADING_SIZE * s, ox + block.x * s, oy + block.hy * s),
+        };
+    });
+}

package/dist/estuarine/consts.d.ts

@@ -1,13 +1,14 @@
 import type { ChromeWording } from '@formicoidea/labre-core/shared/services';
 /**
  * Visual constants for the Estuarine framework map, reproduced from the official
- * SVG (viewBox 0 0 690 801). All geometry is authored in that fixed reference
- * space; the renderer reads every coordinate below as a RATIO of it and maps it
- * onto the element's real width and height independently, so a stretched map
- * gets a longer time axis and a taller energy axis rather than the same drawing
- * letterboxed (see `EstuarineFit` in `./element-renderer.ts`). The e axis is
- * vertical & double-headed (energy), the t axis horizontal & single-headed
- * (time only flows one way).
+ * SVG (viewBox 0 0 690 801). All geometry is authored in that fixed space; the
+ * renderer reads every coordinate below as a RATIO of the CROPPED window onto
+ * it ({@link REF_X} … {@link REF_H}) and maps it onto the element's real width
+ * and height independently, so a stretched map gets a longer time axis and a
+ * taller energy axis rather than the same drawing letterboxed (see
+ * `EstuarineFit` in `./element-renderer.ts`). The e axis is vertical &
+ * double-headed (energy), the t axis horizontal & single-headed (time only
+ * flows one way).
  *
  * The three curve legends below (`LABELS`) carry a `wording`, resolved by
  * `element-renderer.ts` through the `CanvasRenderer` it is handed at paint
@@ -15,8 +16,40 @@ import type { ChromeWording } from '@formicoidea/labre-core/shared/services';
  * italic `e` / `t` axis LETTERS (`AXIS_LABELS`) are notation, not words, and
  * are deliberately NOT keyed (PO decision).
  */
-export declare const REF_W = 690;
-export declare const REF_H = 801;
+/**
+ * The CROPPED window onto the authored 690 × 801 SVG space — the rectangle the
+ * element's bounds are mapped onto.
+ *
+ * The SVG's own viewBox is loose around the drawing: the t axis stops at
+ * `x = 616 / 690` and the e axis at `y = 763 / 801`, so a board born on the raw
+ * viewBox carried dead space on every side (measured on the painted pixels at
+ * birth size: 16.6 left, 12.6 top, 35.5 right, 20.4 bottom, in model units).
+ * The board's own border is therefore nowhere near its drawing, which is both
+ * ugly and awkward — a background is grabbed BY that border
+ * (`framework-background/hit-test.ts`).
+ *
+ * So the reference box is the ink's bounding box grown by {@link REF_MARGIN},
+ * not the viewBox. `REF_X` / `REF_Y` is where that window starts in authored
+ * coordinates; every authored number in this file keeps its ORIGINAL value and
+ * the renderer subtracts the origin (`ax` / `ay`), so nothing about the drawing
+ * moves relative to anything else — only the frame around it tightens.
+ *
+ * `MAP_SCALE` (see `../presets.ts`) multiplies these, so a new board is born
+ * smaller while its drawing keeps exactly the size it had.
+ */
+export declare const REF_X = 8;
+export declare const REF_Y = 4.5;
+export declare const REF_W = 659;
+export declare const REF_H = 786.5;
+/**
+ * Space left between the ink and the edge of the board, in reference units.
+ *
+ * Small but not zero: a stroke is centred on its path, a glyph is measured
+ * generously, and a board whose ink touched its own border would look clipped.
+ * ~6 units is a little under one axis width (8) — enough to read as a margin,
+ * little enough that the border is visibly AROUND the drawing.
+ */
+export declare const REF_MARGIN = 6;
 export declare const COLORS: {
     readonly axis: "#941253";
     /** Italic e / t axis letters. */
@@ -42,12 +75,38 @@ export declare const T_AXIS: {
     readonly x2: 616;
 };
 export declare const AXIS_WIDTH = 8;
-/** Filled arrowhead triangles: [[tipX,tipY],[baseAX,baseAY],[baseBX,baseBY]]. */
-export declare const ARROWHEADS: ReadonlyArray<readonly [
-    readonly [number, number],
-    readonly [number, number],
-    readonly [number, number]
-]>;
+/**
+ * A filled arrowhead, welded to the END OF ITS AXIS.
+ *
+ * Declared the way the shared primitive declares one (`drawAxis`,
+ * `blocks/surface/src/framework-background/renderer.ts`): the head has ONE
+ * proportional anchor — {@link at}, the point where its axis stops, which
+ * travels with the stretch — and every other number below is an offset from
+ * that anchor in FIXED units, painted at the isotropic `strokeScale`.
+ *
+ * That split is the whole point. The vertices used to be three absolute
+ * authored points, so a stretch moved the tip by `sx` while the renderer
+ * rebuilt the base from the tip at the isotropic factor: as soon as
+ * `sx ≠ strokeScale` the triangle tore away from the line it belongs to
+ * (a 29-unit gap at 1600 × 400, the head drowning in the stroke at 400 × 1600).
+ * Anchoring the head to the axis end instead keeps it soldered at every ratio,
+ * and reproduces the authored SVG exactly when `sx === sy` — which is what the
+ * numbers below were read off.
+ */
+export interface EstuarineArrowhead {
+    /** Authored end of the axis this head is welded to — the ratio anchor. */
+    at: readonly [number, number];
+    /** Unit vector pointing OUT of the axis, towards the tip. */
+    dir: readonly [number, number];
+    /** How far past the axis end the tip sits, in fixed units. */
+    tip: number;
+    /** How far SHORT of the axis end the base sits: the weld's overlap. */
+    overlap: number;
+    /** Half the base's width, in fixed units. */
+    halfWidth: number;
+}
+/** The three heads: both ends of the e axis, the right end of the t axis. */
+export declare const ARROWHEADS: readonly EstuarineArrowhead[];
 /** Liminal: green boundary rising gently then dipping at the right end. */
 export declare const LIMINAL_PATH = "M 63 193 C 67 192, 78 189, 85 188 C 92 187, 100 186, 107 185 C 114 184, 122 183, 129 183 C 136 183, 144 183, 151 183 C 158 183, 166 183, 173 183 C 180 183, 188 184, 195 185 C 202 186, 210 188, 217 189 C 224 190, 232 192, 239 194 C 246 196, 254 198, 261 201 C 268 204, 276 207, 283 210 C 290 213, 298 217, 305 220 C 312 223, 320 226, 327 230 C 334 234, 342 238, 349 242 C 356 246, 364 250, 371 255 C 378 260, 386 264, 393 269 C 400 274, 408 278, 415 283 C 422 288, 430 292, 437 297 C 444 302, 451 306, 458 310 C 465 314, 473 319, 480 323 C 487 327, 495 332, 502 335 C 509 338, 517 341, 524 343 C 531 345, 539 348, 546 349 C 553 350, 561 350, 568 350 C 575 350, 583 348, 590 346 C 597 344, 605 340, 612 336 C 619 332, 626 325, 633 319 C 640 313, 648 302, 651 298 C 654 294, 654 295, 654 294";
 export declare const LIMINAL_WIDTH = 4.5;
@@ -59,10 +118,22 @@ export declare const VOLATILE_PATH = "M 58 446 C 61 447, 70 451, 76 454 C 82 457
 export declare const VOLATILE_WIDTH = 5;
 /** Every {@link LABELS} wording, for `translations.ts`'s manifest. */
 export declare const ESTUARINE_CANVAS_WORDINGS: readonly ChromeWording[];
-/** Uppercase legends: anchored centre, alphabetic baseline, with letter-spacing. */
+/**
+ * Uppercase legends: anchored centre, alphabetic baseline, with letter-spacing.
+ *
+ * `prop` names the model key a double-click renames the legend into (issue
+ * #355), and `visibleProp` the toggle that shows it — the legend is painted
+ * with its curve and hidden with it, so it is aimable exactly when it is drawn.
+ *
+ * The three legends and nothing else: the italic `e` / `t` axis letters are
+ * notation, not words (PO decision, and the reason they carry no i18n key
+ * either), so they are not renamable.
+ */
 export declare const LABELS: {
     readonly counterfactual: {
         readonly wording: ChromeWording;
+        readonly prop: "counterfactualLabel";
+        readonly visibleProp: "showCounterfactual";
         readonly x: 422;
         readonly y: 25;
         readonly size: 20;
@@ -70,6 +141,8 @@ export declare const LABELS: {
     };
     readonly liminal: {
         readonly wording: ChromeWording;
+        readonly prop: "liminalLabel";
+        readonly visibleProp: "showLiminal";
         readonly x: 316;
         readonly y: 192;
         readonly size: 18;
@@ -77,23 +150,41 @@ export declare const LABELS: {
     };
     readonly volatile: {
         readonly wording: ChromeWording;
+        readonly prop: "volatileLabel";
+        readonly visibleProp: "showVolatile";
         readonly x: 219;
         readonly y: 783;
         readonly size: 20;
         readonly color: "#e63322";
     };
 };
-/** Italic Georgia axis letters (left-anchored, alphabetic baseline). */
+/**
+ * Italic Georgia axis letters (left-anchored, alphabetic baseline).
+ *
+ * Each letter NAMES an axis, so it is declared against that axis the way a
+ * declared background declares a word (`backgroundPoint`,
+ * `blocks/surface/src/framework-background/def.ts`): a proportional anchor
+ * (`at`, the end of the axis it names) plus a FIXED `dx`/`dy` gap, painted at
+ * the isotropic `strokeScale` like the glyph itself.
+ *
+ * They used to be absolute authored positions projected by `sx`/`sy` while the
+ * glyph was typed isotropically, so the gap between letter and axis grew or
+ * collapsed with the ratio — the `t` climbing onto its own axis at 1600 × 400,
+ * falling far below it at 400 × 1600. `at + d·strokeScale` is exactly the
+ * authored position when `sx === sy`, and a constant gap everywhere else.
+ */
 export declare const AXIS_LABELS: {
     readonly e: {
         readonly text: "e";
-        readonly x: 14;
-        readonly y: 138;
+        readonly at: readonly [43.5, 97];
+        readonly dx: -29.5;
+        readonly dy: 41;
     };
     readonly t: {
         readonly text: "t";
-        readonly x: 580;
-        readonly y: 685;
+        readonly at: readonly [616, 649];
+        readonly dx: -36;
+        readonly dy: 36;
     };
     readonly size: 34;
 };

package/dist/estuarine/consts.js

@@ -1,12 +1,13 @@
 /**
  * Visual constants for the Estuarine framework map, reproduced from the official
- * SVG (viewBox 0 0 690 801). All geometry is authored in that fixed reference
- * space; the renderer reads every coordinate below as a RATIO of it and maps it
- * onto the element's real width and height independently, so a stretched map
- * gets a longer time axis and a taller energy axis rather than the same drawing
- * letterboxed (see `EstuarineFit` in `./element-renderer.ts`). The e axis is
- * vertical & double-headed (energy), the t axis horizontal & single-headed
- * (time only flows one way).
+ * SVG (viewBox 0 0 690 801). All geometry is authored in that fixed space; the
+ * renderer reads every coordinate below as a RATIO of the CROPPED window onto
+ * it ({@link REF_X} … {@link REF_H}) and maps it onto the element's real width
+ * and height independently, so a stretched map gets a longer time axis and a
+ * taller energy axis rather than the same drawing letterboxed (see
+ * `EstuarineFit` in `./element-renderer.ts`). The e axis is vertical &
+ * double-headed (energy), the t axis horizontal & single-headed (time only
+ * flows one way).
  *
  * The three curve legends below (`LABELS`) carry a `wording`, resolved by
  * `element-renderer.ts` through the `CanvasRenderer` it is handed at paint
@@ -14,8 +15,40 @@
  * italic `e` / `t` axis LETTERS (`AXIS_LABELS`) are notation, not words, and
  * are deliberately NOT keyed (PO decision).
  */
-export const REF_W = 690;
-export const REF_H = 801;
+/**
+ * The CROPPED window onto the authored 690 × 801 SVG space — the rectangle the
+ * element's bounds are mapped onto.
+ *
+ * The SVG's own viewBox is loose around the drawing: the t axis stops at
+ * `x = 616 / 690` and the e axis at `y = 763 / 801`, so a board born on the raw
+ * viewBox carried dead space on every side (measured on the painted pixels at
+ * birth size: 16.6 left, 12.6 top, 35.5 right, 20.4 bottom, in model units).
+ * The board's own border is therefore nowhere near its drawing, which is both
+ * ugly and awkward — a background is grabbed BY that border
+ * (`framework-background/hit-test.ts`).
+ *
+ * So the reference box is the ink's bounding box grown by {@link REF_MARGIN},
+ * not the viewBox. `REF_X` / `REF_Y` is where that window starts in authored
+ * coordinates; every authored number in this file keeps its ORIGINAL value and
+ * the renderer subtracts the origin (`ax` / `ay`), so nothing about the drawing
+ * moves relative to anything else — only the frame around it tightens.
+ *
+ * `MAP_SCALE` (see `../presets.ts`) multiplies these, so a new board is born
+ * smaller while its drawing keeps exactly the size it had.
+ */
+export const REF_X = 8;
+export const REF_Y = 4.5;
+export const REF_W = 659;
+export const REF_H = 786.5;
+/**
+ * Space left between the ink and the edge of the board, in reference units.
+ *
+ * Small but not zero: a stroke is centred on its path, a glyph is measured
+ * generously, and a board whose ink touched its own border would look clipped.
+ * ~6 units is a little under one axis width (8) — enough to read as a margin,
+ * little enough that the border is visibly AROUND the drawing.
+ */
+export const REF_MARGIN = 6;
 export const COLORS = {
     axis: '#941253',
     /** Italic e / t axis letters. */
@@ -33,23 +66,32 @@ export const E_AXIS = { x: 43.5, y1: 97, y2: 763 };
 /** t axis (horizontal, single-headed → right): y, left x, right x. */
 export const T_AXIS = { y: 649, x1: 28, x2: 616 };
 export const AXIS_WIDTH = 8;
-/** Filled arrowhead triangles: [[tipX,tipY],[baseAX,baseAY],[baseBX,baseBY]]. */
+/** The three heads: both ends of the e axis, the right end of the t axis. */
 export const ARROWHEADS = [
-    [
-        [43.5, 72],
-        [30, 100],
-        [57, 100],
-    ], // e — top
-    [
-        [43.5, 785],
-        [30, 758],
-        [57, 758],
-    ], // e — bottom
-    [
-        [643, 649],
-        [613, 636],
-        [613, 662],
-    ], // t — right
+    // e — top
+    {
+        at: [E_AXIS.x, E_AXIS.y1],
+        dir: [0, -1],
+        tip: 25,
+        overlap: 3,
+        halfWidth: 13.5,
+    },
+    // e — bottom
+    {
+        at: [E_AXIS.x, E_AXIS.y2],
+        dir: [0, 1],
+        tip: 22,
+        overlap: 5,
+        halfWidth: 13.5,
+    },
+    // t — right
+    {
+        at: [T_AXIS.x2, T_AXIS.y],
+        dir: [1, 0],
+        tip: 27,
+        overlap: 3,
+        halfWidth: 13,
+    },
 ];
 /** Liminal: green boundary rising gently then dipping at the right end. */
 export const LIMINAL_PATH = 'M 63 193 C 67 192, 78 189, 85 188 C 92 187, 100 186, 107 185 C 114 184, 122 183, 129 183 C 136 183, 144 183, 151 183 C 158 183, 166 183, 173 183 C 180 183, 188 184, 195 185 C 202 186, 210 188, 217 189 C 224 190, 232 192, 239 194 C 246 196, 254 198, 261 201 C 268 204, 276 207, 283 210 C 290 213, 298 217, 305 220 C 312 223, 320 226, 327 230 C 334 234, 342 238, 349 242 C 356 246, 364 250, 371 255 C 378 260, 386 264, 393 269 C 400 274, 408 278, 415 283 C 422 288, 430 292, 437 297 C 444 302, 451 306, 458 310 C 465 314, 473 319, 480 323 C 487 327, 495 332, 502 335 C 509 338, 517 341, 524 343 C 531 345, 539 348, 546 349 C 553 350, 561 350, 568 350 C 575 350, 583 348, 590 346 C 597 344, 605 340, 612 336 C 619 332, 626 325, 633 319 C 640 313, 648 302, 651 298 C 654 294, 654 295, 654 294';
@@ -78,10 +120,22 @@ export const ESTUARINE_CANVAS_WORDINGS = [
     LABEL_LIMINAL,
     LABEL_VOLATILE,
 ];
-/** Uppercase legends: anchored centre, alphabetic baseline, with letter-spacing. */
+/**
+ * Uppercase legends: anchored centre, alphabetic baseline, with letter-spacing.
+ *
+ * `prop` names the model key a double-click renames the legend into (issue
+ * #355), and `visibleProp` the toggle that shows it — the legend is painted
+ * with its curve and hidden with it, so it is aimable exactly when it is drawn.
+ *
+ * The three legends and nothing else: the italic `e` / `t` axis letters are
+ * notation, not words (PO decision, and the reason they carry no i18n key
+ * either), so they are not renamable.
+ */
 export const LABELS = {
     counterfactual: {
         wording: LABEL_COUNTERFACTUAL,
+        prop: 'counterfactualLabel',
+        visibleProp: 'showCounterfactual',
         x: 422,
         y: 25,
         size: 20,
@@ -89,6 +143,8 @@ export const LABELS = {
     },
     liminal: {
         wording: LABEL_LIMINAL,
+        prop: 'liminalLabel',
+        visibleProp: 'showLiminal',
         x: 316,
         y: 192,
         size: 18,
@@ -96,16 +152,32 @@ export const LABELS = {
     },
     volatile: {
         wording: LABEL_VOLATILE,
+        prop: 'volatileLabel',
+        visibleProp: 'showVolatile',
         x: 219,
         y: 783,
         size: 20,
         color: COLORS.volatile,
     },
 };
-/** Italic Georgia axis letters (left-anchored, alphabetic baseline). */
+/**
+ * Italic Georgia axis letters (left-anchored, alphabetic baseline).
+ *
+ * Each letter NAMES an axis, so it is declared against that axis the way a
+ * declared background declares a word (`backgroundPoint`,
+ * `blocks/surface/src/framework-background/def.ts`): a proportional anchor
+ * (`at`, the end of the axis it names) plus a FIXED `dx`/`dy` gap, painted at
+ * the isotropic `strokeScale` like the glyph itself.
+ *
+ * They used to be absolute authored positions projected by `sx`/`sy` while the
+ * glyph was typed isotropically, so the gap between letter and axis grew or
+ * collapsed with the ratio — the `t` climbing onto its own axis at 1600 × 400,
+ * falling far below it at 400 × 1600. `at + d·strokeScale` is exactly the
+ * authored position when `sx === sy`, and a constant gap everywhere else.
+ */
 export const AXIS_LABELS = {
-    e: { text: 'e', x: 14, y: 138 },
-    t: { text: 't', x: 580, y: 685 },
+    e: { text: 'e', at: [E_AXIS.x, E_AXIS.y1], dx: -29.5, dy: 41 },
+    t: { text: 't', at: [T_AXIS.x2, T_AXIS.y], dx: -36, dy: 36 },
     size: 34,
 };
 export const LABEL_LETTER_SPACING = 4;

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

@@ -109,6 +109,13 @@ export declare function applyEstuarineTransform(ctx: CanvasRenderingContext2D, w
  *   arrowheads and every word. Their POSITION follows the stretch — an axis
  *   ends where the map now ends — while their SHAPE does not, because a
  *   stretched arrowhead or a squashed letter is a defect, never a feature.
+ *
+ *   One rule keeps that split honest, and it is the shared primitive's own
+ *   (`drawAxis` / `backgroundPoint`): **an anchor is a RATIO of the frame, and
+ *   every offset from an anchor is in FIXED units.** A shape must never take
+ *   its anchor from one and its offset from the other — that mix is exactly
+ *   what tore the arrowheads off their axes and slid the `e` / `t` letters
+ *   around on a stretched map.
  * - **Stretched reference space**, entered by {@link applyEstuarineTransform}:
  *   the three curves, which are boundaries across the plane and must cover
  *   whatever plane the user has made.