@formicoidea/labre-framework-cynefin 0.32.0 → 0.33.0

package/dist/actions.js

@@ -4,6 +4,7 @@ import { Bound } from '@formicoidea/labre-core/global/gfx';
 import { GfxControllerIdentifier } from '@formicoidea/labre-core/std/gfx';
 import { REF_H as CYN_H, REF_W as CYN_W } from './cynefin/consts.js';
 import { HEX_FILL, HEX_SIZE, HEX_STROKE, HEX_VERTICES, REF_H as EST_H, REF_W as EST_W, } from './estuarine/consts.js';
+import { ESTUARINE_ROLE } from './estuarine/roles.js';
 /**
  * Creation actions for the Cynefin / Estuarine toolbox — lifted out of
  * `toolbar/menu.ts` by PF3. This is also the framework that emitted NO
@@ -38,6 +39,10 @@ export function createEstuarineMap(std) {
     const { centerX, centerY } = gfx.viewport;
     const id = gfx.surface.addElement({
         type: 'estuarine',
+        // The map is this framework's ROOT INSTANCE: the role is what makes the
+        // Map quality checklist reachable on it (WS4). Cynefin's background gets
+        // none, on purpose — see `estuarine/roles.ts`.
+        role: ESTUARINE_ROLE.map,
         xywh: new Bound(centerX - width / 2, centerY - height / 2, width, height).serialize(),
     });
     finish(gfx, id);
@@ -49,6 +54,9 @@ export function createConstraintHexagon(std) {
     const { centerX: cx, centerY: cy } = gfx.viewport;
     const id = gfx.surface.addElement({
         type: 'shape',
+        // A hexagon is a plain polygon on the canvas: nothing about its geometry
+        // says "constraint". The role is the only place that does.
+        role: ESTUARINE_ROLE.constraint,
         shapeType: 'polygon',
         vertices: HEX_VERTICES,
         filled: true,

package/dist/cynefin/consts.js

@@ -19,7 +19,11 @@ export const COLORS = {
  */
 export const DARK_BACK_PATHS = [
     // Main arc: top segment (Complex|Complicated) then left segment (Complex|Chaotic)
-    ['M 550.1 17 A 296 296 0 0 1 338 328.5 A 448.7 448.7 0 0 1 26 331', 15.5, false],
+    [
+        'M 550.1 17 A 296 296 0 0 1 338 328.5 A 448.7 448.7 0 0 1 26 331',
+        15.5,
+        false,
+    ],
     // Thin "Confusion" arc sweeping down towards the cliff
     ['M 649 294 C 644 382, 588 462, 440 506', 5, false],
 ];
@@ -34,7 +38,11 @@ export const DARK_FRONT_PATHS = [
     // Thick descending branch with the bottom elbow (right edge of the cliff)
     ['M 340 332 C 390 440, 437 525, 472 632 Q 479 658, 453 700', 15.5, true],
     // Thin left line (left edge of the cliff)
-    ['M 345 356 C 372 440, 408 540, 413 655 C 414 685, 412 710, 412 738', 4, false],
+    [
+        'M 345 356 C 372 440, 408 540, 413 655 C 414 685, 412 710, 412 738',
+        4,
+        false,
+    ],
 ];
 /** Cliff hatching: [x1,y1,x2,y2], lineWidth 3. */
 export const HATCHES = [
@@ -51,14 +59,30 @@ export const HATCHES = [
 ];
 /** Dashed Complicated↔Clear boundary, as oriented square pavings: [x,y,size,rotateDeg]. */
 export const DASH_RECTS = [
-    [511, 245, 13.8, 206.8], [530, 255.5, 13.7, 205.2], [549.5, 265.5, 13.6, 203.5],
-    [569.5, 274.5, 13.5, 201.9], [590, 282.5, 13.5, 200.2], [610.5, 289.5, 13.4, 198.6],
-    [631, 296, 13.3, 196.9], [673.5, 307, 13.2, 193.6], [695, 311.5, 13.1, 192.0],
-    [716, 315.5, 13.0, 190.3], [738, 319, 12.9, 188.7], [759.5, 322, 12.8, 187.0],
-    [781, 324.5, 12.8, 185.4], [803, 325.5, 12.7, 183.7], [824.5, 326.5, 12.6, 182.1],
-    [846, 327.5, 12.5, 180.5], [868, 327.5, 12.4, 178.8], [889.5, 326.5, 12.3, 177.2],
-    [912, 325.5, 12.2, 175.5], [933, 323.5, 12.1, 173.9], [954.5, 321.5, 12.1, 172.2],
-    [976, 318, 12.0, 170.6], [998, 314, 11.9, 168.9], [1019, 310, 11.8, 167.3],
+    [511, 245, 13.8, 206.8],
+    [530, 255.5, 13.7, 205.2],
+    [549.5, 265.5, 13.6, 203.5],
+    [569.5, 274.5, 13.5, 201.9],
+    [590, 282.5, 13.5, 200.2],
+    [610.5, 289.5, 13.4, 198.6],
+    [631, 296, 13.3, 196.9],
+    [673.5, 307, 13.2, 193.6],
+    [695, 311.5, 13.1, 192.0],
+    [716, 315.5, 13.0, 190.3],
+    [738, 319, 12.9, 188.7],
+    [759.5, 322, 12.8, 187.0],
+    [781, 324.5, 12.8, 185.4],
+    [803, 325.5, 12.7, 183.7],
+    [824.5, 326.5, 12.6, 182.1],
+    [846, 327.5, 12.5, 180.5],
+    [868, 327.5, 12.4, 178.8],
+    [889.5, 326.5, 12.3, 177.2],
+    [912, 325.5, 12.2, 175.5],
+    [933, 323.5, 12.1, 173.9],
+    [954.5, 321.5, 12.1, 172.2],
+    [976, 318, 12.0, 170.6],
+    [998, 314, 11.9, 168.9],
+    [1019, 310, 11.8, 167.3],
 ];
 export const DOMAINS = [
     {
@@ -82,7 +106,11 @@ export const DOMAINS = [
         lines: [
             { lead: 'Sense', rest: ' the context with analytical methods', y: 71 },
             { lead: 'Analyse', rest: ' observations', y: 90 },
-            { lead: 'Respond', rest: ' by applying one of many good solutions', y: 109 },
+            {
+                lead: 'Respond',
+                rest: ' by applying one of many good solutions',
+                y: 109,
+            },
         ],
     },
     {
@@ -92,7 +120,11 @@ export const DOMAINS = [
         subheading: 'Un-ordered system',
         sy: 609,
         lines: [
-            { lead: 'Act', rest: ' on the context to stabilize (it or yourself)', y: 627 },
+            {
+                lead: 'Act',
+                rest: ' on the context to stabilize (it or yourself)',
+                y: 627,
+            },
             { lead: 'Sense', rest: ' how the context reacts', y: 646 },
             { lead: 'Respond', rest: ' by re-acting', y: 665 },
         ],
@@ -106,7 +138,11 @@ export const DOMAINS = [
         lines: [
             { lead: 'Sense', rest: ' the context with analytical methods', y: 627 },
             { lead: 'Categorize', rest: ' observations', y: 646 },
-            { lead: 'Respond', rest: ' by applying tried and true practices', y: 665 },
+            {
+                lead: 'Respond',
+                rest: ' by applying tried and true practices',
+                y: 665,
+            },
         ],
     },
 ];

package/dist/cynefin/element-renderer.js

@@ -13,7 +13,10 @@ export const cynefin = (model, ctx, matrix) => {
     const [, , w, h] = model.deserializedXYWH;
     const cx = w / 2;
     const cy = h / 2;
-    ctx.setTransform(matrix.translateSelf(cx, cy).rotateSelf(model.rotate).translateSelf(-cx, -cy));
+    ctx.setTransform(matrix
+        .translateSelf(cx, cy)
+        .rotateSelf(model.rotate)
+        .translateSelf(-cx, -cy));
     const { s, ox, oy } = refScale(w, h, REF_W, REF_H);
     ctx.translate(ox, oy);
     ctx.scale(s, s);

package/dist/cynefin/toolbar/config.js

@@ -3,10 +3,55 @@ import { CynefinElementModel } from '@formicoidea/labre-core/model';
 import { ToolbarModuleExtension, } from '@formicoidea/labre-core/shared/services';
 import { BlockFlavourIdentifier } from '@formicoidea/labre-core/std';
 import { html } from 'lit';
-const ResizeIcon = html `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M9 5H5v4M15 19h4v-4" /><path d="M5 5l6 6M19 19l-6-6" /></svg>`;
-const TitlesIcon = html `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 7h14M9 7v11" /></svg>`;
-const DescIcon = html `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 8h14M5 12h14M5 16h9" /></svg>`;
-const LiminalIcon = html `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 17 C9 6 15 6 19 7" /></svg>`;
+const ResizeIcon = html `<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="1.6"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M9 5H5v4M15 19h4v-4" />
+  <path d="M5 5l6 6M19 19l-6-6" />
+</svg>`;
+const TitlesIcon = html `<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="1.6"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M5 7h14M9 7v11" />
+</svg>`;
+const DescIcon = html `<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="1.6"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M5 8h14M5 12h14M5 16h9" />
+</svg>`;
+const LiminalIcon = html `<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="1.6"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M5 17 C9 6 15 6 19 7" />
+</svg>`;
 function booleanToggle(id, tooltip, icon, prop) {
     return {
         id,

package/dist/estuarine/consts.d.ts

@@ -1,8 +1,11 @@
 /**
  * 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 and scaled uniformly to the element bounds by the renderer. The e axis
- * is vertical & double-headed (energy), the t axis horizontal & single-headed
+ * 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).
  */
 export declare const REF_W = 690;
@@ -33,7 +36,11 @@ export declare const T_AXIS: {
 };
 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]]>;
+export declare const ARROWHEADS: ReadonlyArray<readonly [
+    readonly [number, number],
+    readonly [number, number],
+    readonly [number, number]
+]>;
 /** 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;

package/dist/estuarine/consts.js

@@ -1,8 +1,11 @@
 /**
  * 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 and scaled uniformly to the element bounds by the renderer. The e axis
- * is vertical & double-headed (energy), the t axis horizontal & single-headed
+ * 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).
  */
 export const REF_W = 690;
@@ -26,9 +29,21 @@ export const T_AXIS = { y: 649, x1: 28, x2: 616 };
 export const AXIS_WIDTH = 8;
 /** Filled arrowhead triangles: [[tipX,tipY],[baseAX,baseAY],[baseBX,baseBY]]. */
 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
+    [
+        [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
 ];
 /** 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';
@@ -41,9 +56,27 @@ export const VOLATILE_PATH = 'M 58 446 C 61 447, 70 451, 76 454 C 82 457, 88 462
 export const VOLATILE_WIDTH = 5;
 /** Uppercase legends: anchored centre, alphabetic baseline, with letter-spacing. */
 export const LABELS = {
-    counterfactual: { text: 'COUNTER FACTUAL', x: 422, y: 25, size: 20, color: COLORS.label },
-    liminal: { text: 'LIMINAL', x: 316, y: 192, size: 18, color: COLORS.liminalLabel },
-    volatile: { text: 'VOLATILE', x: 219, y: 783, size: 20, color: COLORS.volatile },
+    counterfactual: {
+        text: 'COUNTER FACTUAL',
+        x: 422,
+        y: 25,
+        size: 20,
+        color: COLORS.label,
+    },
+    liminal: {
+        text: 'LIMINAL',
+        x: 316,
+        y: 192,
+        size: 18,
+        color: COLORS.liminalLabel,
+    },
+    volatile: {
+        text: 'VOLATILE',
+        x: 219,
+        y: 783,
+        size: 20,
+        color: COLORS.volatile,
+    },
 };
 /** Italic Georgia axis letters (left-anchored, alphabetic baseline). */
 export const AXIS_LABELS = {

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

@@ -1,11 +1,117 @@
 import { type ElementRenderer } from '@formicoidea/labre-core/blocks/surface';
 import type { EstuarineElementModel } from '@formicoidea/labre-core/model';
+/**
+ * The three reference curves are drawn as a permanent GHOST (PO arbitration,
+ * 26/08/2026): dashed, translucent, never solid again.
+ *
+ * The reasoning is what an Estuarine line IS. Liminal, Volatile and
+ * Counter-factual are not measurements — they are boundaries a group argues
+ * itself into, and the printed map is a support for that argument, not a
+ * verdict about where the boundary lies. A solid stroke made the tool's own
+ * curve look like the answer, and the group's negotiated line (drawn on top,
+ * with a brush or a connector) look like an annotation on it. Dashing the
+ * reference inverts that: the tool suggests, the group states.
+ *
+ * The toggles keep their meaning exactly — ON shows the ghost, OFF hides it.
+ * What changed is only how ON looks, plus the ~600 ms reveal animation the
+ * moment a toggle flips (see `./ghost-overlay.ts`), which exists so a line
+ * that comes back at 45 % opacity is still SEEN arriving.
+ *
+ * The legends stay solid. A label is a name, not a boundary.
+ */
+/** Dash pattern of the ghost, in reference-space units. */
+export declare const GHOST_DASH: readonly number[];
+/** Opacity of the permanent ghost. */
+export declare const GHOST_ALPHA = 0.45;
+/** Which `EstuarineElementModel` flag shows a given curve. */
+export type EstuarineCurveVisibility = 'showLiminal' | 'showVolatile' | 'showCounterfactual';
+export interface EstuarineCurve {
+    key: 'liminal' | 'volatile' | 'counterfactual';
+    path: Path2D;
+    color: string;
+    width: number;
+    visibleProp: EstuarineCurveVisibility;
+}
+export declare function estuarineCurves(): readonly EstuarineCurve[];
+/**
+ * How the fixed 690 × 801 reference design maps onto an element of `w × h`.
+ *
+ * ## Why an Estuarine map STRETCHES (PO recette, 26/08/2026)
+ *
+ * It used to be fitted uniformly and letterboxed (`refScale`), so widening the
+ * background left the drawing at its authored proportions, centred, with short
+ * axes floating in empty margins. That is wrong for THIS frame, and the reason
+ * is what an Estuarine map is: a coordinate system. The e axis measures energy
+ * to change, the t axis measures time, and the three curves are the boundaries
+ * a group negotiates ACROSS that plane. Give the user more room and they mean
+ * "more plane" — a longer time axis, a taller energy axis — not "the same
+ * picture, bigger". So both directions follow the element independently.
+ *
+ * **Cynefin, right next door, deliberately keeps the uniform letterbox**: its
+ * background is a figurative drawing — a cliff, hand-drawn arcs, a hatched
+ * fall — and a figurative drawing has proportions that stretching would simply
+ * damage. Two frames, two answers, and the difference is not an oversight.
+ *
+ * ## The two factors
+ *
+ * `sx` / `sy` stretch positions and paths. `strokeScale` is the ISOTROPIC
+ * factor for everything that must not be deformed — stroke widths, arrowhead
+ * triangles, font sizes, letter-spacing — taken as the geometric mean of the
+ * two, the usual area-preserving stand-in for "one scale" when there are two.
+ *
+ * At the authored ratio `sx === sy`, so all three collapse to the single old
+ * factor and `ox`/`oy` were zero: a map that has not been stretched paints
+ * exactly the pixels it painted before this change.
+ */
+export interface EstuarineFit {
+    /** Reference x → element x. */
+    sx: number;
+    /** Reference y → element y. */
+    sy: number;
+    /** The one undeformed factor: widths, arrowheads, type. */
+    strokeScale: number;
+    /**
+     * `lineWidth` correction for a path stroked INSIDE the stretched space.
+     *
+     * Canvas transforms the pen along with the path, so under `scale(sx, sy)` a
+     * nominal width `L` paints somewhere between `L·sx` and `L·sy` depending on
+     * the direction of the segment. There is no exact single number for a curve
+     * that runs in every direction; we approximate the pen's effective widening
+     * by the ARITHMETIC mean of the two factors and divide it out, which lands
+     * the ghost on {@link strokeScale} on average and keeps it within the
+     * sx/sy spread everywhere else. Exactly `1` at the authored ratio.
+     */
+    curveLineScale: number;
+}
+export declare function estuarineFit(w: number, h: number): EstuarineFit;
+/**
+ * Put `ctx` into the map's STRETCHED reference space, where the authored
+ * geometry (a `Path2D` built from `./consts.ts`) lands on the element's real
+ * bounds in both directions.
+ *
+ * The single source of truth for that transform, and it has to stay single:
+ * the ghost overlay paints the very same curves one layer above and must land
+ * on them to the pixel. Everything that must NOT be stretched — axes,
+ * arrowheads, legends — is drawn outside it, in element coordinates, from the
+ * same {@link EstuarineFit}.
+ */
+export declare function applyEstuarineTransform(ctx: CanvasRenderingContext2D, w: number, h: number): EstuarineFit;
 /**
  * Canvas renderer for the Estuarine framework map — reproduces the official SVG:
  * the e (vertical, double-headed) / t (horizontal, single-headed) axes and the
  * three reference curves (Liminal / Volatile / Counter-factual), each with its
- * legend and individually hideable. Drawn in the fixed reference space and
- * scaled uniformly to the element bounds.
+ * legend and individually hideable.
+ *
+ * Two spaces, and which one a mark belongs to is the whole design:
+ *
+ * - **Element coordinates**, entered by mapping each authored coordinate
+ *   through {@link EstuarineFit} by hand (`ax` / `ay` below): the axes, their
+ *   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.
+ * - **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.
  */
 export declare const estuarine: ElementRenderer<EstuarineElementModel>;
 export declare const EstuarineRendererExtension: import("@formicoidea/labre-core/store").ExtensionType & {

package/dist/estuarine/element-renderer.js

@@ -1,83 +1,186 @@
 import { ElementRendererExtension, } from '@formicoidea/labre-core/blocks/surface';
-import { FONT_FAMILY, refScale } from '../utils.js';
+import { FONT_FAMILY } from '../utils.js';
 import { ARROWHEADS, AXIS_LABELS, AXIS_WIDTH, COLORS, COUNTERFACTUAL_PATH, COUNTERFACTUAL_WIDTH, E_AXIS, LABEL_LETTER_SPACING, LABELS, LIMINAL_PATH, LIMINAL_WIDTH, REF_H, REF_W, T_AXIS, VOLATILE_PATH, VOLATILE_WIDTH, } from './consts.js';
+/**
+ * The three reference curves are drawn as a permanent GHOST (PO arbitration,
+ * 26/08/2026): dashed, translucent, never solid again.
+ *
+ * The reasoning is what an Estuarine line IS. Liminal, Volatile and
+ * Counter-factual are not measurements — they are boundaries a group argues
+ * itself into, and the printed map is a support for that argument, not a
+ * verdict about where the boundary lies. A solid stroke made the tool's own
+ * curve look like the answer, and the group's negotiated line (drawn on top,
+ * with a brush or a connector) look like an annotation on it. Dashing the
+ * reference inverts that: the tool suggests, the group states.
+ *
+ * The toggles keep their meaning exactly — ON shows the ghost, OFF hides it.
+ * What changed is only how ON looks, plus the ~600 ms reveal animation the
+ * moment a toggle flips (see `./ghost-overlay.ts`), which exists so a line
+ * that comes back at 45 % opacity is still SEEN arriving.
+ *
+ * The legends stay solid. A label is a name, not a boundary.
+ */
+/** Dash pattern of the ghost, in reference-space units. */
+export const GHOST_DASH = [12, 10];
+/** Opacity of the permanent ghost. */
+export const GHOST_ALPHA = 0.45;
+/**
+ * The three curves, with their `Path2D` built ONCE.
+ *
+ * A lazy memo (`??=`) rather than a module-level constant, and that is not a
+ * micro-optimisation: `Path2D` does not exist under Node, and `./consts.ts` —
+ * which this module imports — is pulled in by the unit specs. Building the
+ * paths at import time would make merely importing this framework's constants
+ * throw in every non-browser environment. Built on the first PAINT instead,
+ * which by definition happens on a canvas.
+ */
+let _curves;
+export function estuarineCurves() {
+    return (_curves ??= [
+        {
+            key: 'liminal',
+            path: new Path2D(LIMINAL_PATH),
+            color: COLORS.liminal,
+            width: LIMINAL_WIDTH,
+            visibleProp: 'showLiminal',
+        },
+        {
+            key: 'volatile',
+            path: new Path2D(VOLATILE_PATH),
+            color: COLORS.volatile,
+            width: VOLATILE_WIDTH,
+            visibleProp: 'showVolatile',
+        },
+        {
+            key: 'counterfactual',
+            path: new Path2D(COUNTERFACTUAL_PATH),
+            color: COLORS.counterfactual,
+            width: COUNTERFACTUAL_WIDTH,
+            visibleProp: 'showCounterfactual',
+        },
+    ]);
+}
+export function estuarineFit(w, h) {
+    const sx = w / REF_W;
+    const sy = h / REF_H;
+    const strokeScale = Math.sqrt(sx * sy);
+    return { sx, sy, strokeScale, curveLineScale: strokeScale / ((sx + sy) / 2) };
+}
+/**
+ * Put `ctx` into the map's STRETCHED reference space, where the authored
+ * geometry (a `Path2D` built from `./consts.ts`) lands on the element's real
+ * bounds in both directions.
+ *
+ * The single source of truth for that transform, and it has to stay single:
+ * the ghost overlay paints the very same curves one layer above and must land
+ * on them to the pixel. Everything that must NOT be stretched — axes,
+ * arrowheads, legends — is drawn outside it, in element coordinates, from the
+ * same {@link EstuarineFit}.
+ */
+export function applyEstuarineTransform(ctx, w, h) {
+    const fit = estuarineFit(w, h);
+    ctx.scale(fit.sx, fit.sy);
+    return fit;
+}
 /**
  * Canvas renderer for the Estuarine framework map — reproduces the official SVG:
  * the e (vertical, double-headed) / t (horizontal, single-headed) axes and the
  * three reference curves (Liminal / Volatile / Counter-factual), each with its
- * legend and individually hideable. Drawn in the fixed reference space and
- * scaled uniformly to the element bounds.
+ * legend and individually hideable.
+ *
+ * Two spaces, and which one a mark belongs to is the whole design:
+ *
+ * - **Element coordinates**, entered by mapping each authored coordinate
+ *   through {@link EstuarineFit} by hand (`ax` / `ay` below): the axes, their
+ *   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.
+ * - **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.
  */
 export const estuarine = (model, ctx, matrix) => {
     const [, , w, h] = model.deserializedXYWH;
     const cx = w / 2;
     const cy = h / 2;
-    ctx.setTransform(matrix.translateSelf(cx, cy).rotateSelf(model.rotate).translateSelf(-cx, -cy));
-    const { s, ox, oy } = refScale(w, h, REF_W, REF_H);
-    ctx.translate(ox, oy);
-    ctx.scale(s, s);
+    ctx.setTransform(matrix
+        .translateSelf(cx, cy)
+        .rotateSelf(model.rotate)
+        .translateSelf(-cx, -cy));
+    const fit = estuarineFit(w, h);
+    /** Authored x → element x. Proportional: `43.5 / 690` of the real width. */
+    const ax = (x) => x * fit.sx;
+    /** Authored y → element y. */
+    const ay = (y) => y * fit.sy;
     ctx.lineCap = 'round';
     ctx.lineJoin = 'round';
     // ── Axes ────────────────────────────────────────────────────────────
+    // Drawn in element coordinates so the e axis spans the real height and the
+    // t axis the real width, while `lineWidth` stays one honest thickness
+    // instead of being fattened in whichever direction the map was pulled.
     ctx.strokeStyle = COLORS.axis;
     ctx.fillStyle = COLORS.axis;
-    ctx.lineWidth = AXIS_WIDTH;
+    ctx.lineWidth = AXIS_WIDTH * fit.strokeScale;
     ctx.beginPath();
-    ctx.moveTo(E_AXIS.x, E_AXIS.y1);
-    ctx.lineTo(E_AXIS.x, E_AXIS.y2);
-    ctx.moveTo(T_AXIS.x1, T_AXIS.y);
-    ctx.lineTo(T_AXIS.x2, T_AXIS.y);
+    ctx.moveTo(ax(E_AXIS.x), ay(E_AXIS.y1));
+    ctx.lineTo(ax(E_AXIS.x), ay(E_AXIS.y2));
+    ctx.moveTo(ax(T_AXIS.x1), ay(T_AXIS.y));
+    ctx.lineTo(ax(T_AXIS.x2), ay(T_AXIS.y));
     ctx.stroke();
-    for (const [[tx, ty], [ax, ay], [bx, by]] of ARROWHEADS) {
+    // Each head is pinned by its TIP — which travels to the real end of its axis
+    // — and then built from the authored offsets at the isotropic scale, so the
+    // triangle keeps its shape at any aspect ratio.
+    for (const [[tx, ty], [px, py], [qx, qy]] of ARROWHEADS) {
+        const tipX = ax(tx);
+        const tipY = ay(ty);
+        const k = fit.strokeScale;
         ctx.beginPath();
-        ctx.moveTo(tx, ty);
-        ctx.lineTo(ax, ay);
-        ctx.lineTo(bx, by);
+        ctx.moveTo(tipX, tipY);
+        ctx.lineTo(tipX + (px - tx) * k, tipY + (py - ty) * k);
+        ctx.lineTo(tipX + (qx - tx) * k, tipY + (qy - ty) * k);
         ctx.closePath();
         ctx.fill();
     }
     // Uppercase legend (centre-anchored, alphabetic baseline, letter-spaced).
+    // Anchored proportionally, typed isotropically — never inside the stretch.
     const hasSpacing = 'letterSpacing' in ctx;
     const legend = (l) => {
         ctx.fillStyle = l.color;
-        ctx.font = `600 ${l.size}px ${FONT_FAMILY}`;
+        ctx.font = `600 ${l.size * fit.strokeScale}px ${FONT_FAMILY}`;
         ctx.textAlign = 'center';
         ctx.textBaseline = 'alphabetic';
-        if (hasSpacing)
-            ctx.letterSpacing = `${LABEL_LETTER_SPACING}px`;
-        ctx.fillText(l.text, l.x, l.y);
+        if (hasSpacing) {
+            ctx.letterSpacing = `${LABEL_LETTER_SPACING * fit.strokeScale}px`;
+        }
+        ctx.fillText(l.text, ax(l.x), ay(l.y));
         if (hasSpacing)
             ctx.letterSpacing = '0px';
     };
-    // ── Liminal (green) ─────────────────────────────────────────────────
-    if (model.showLiminal) {
-        ctx.strokeStyle = COLORS.liminal;
-        ctx.lineWidth = LIMINAL_WIDTH;
-        ctx.stroke(new Path2D(LIMINAL_PATH));
-        legend(LABELS.liminal);
-    }
-    // ── Volatile (red) ──────────────────────────────────────────────────
-    if (model.showVolatile) {
-        ctx.strokeStyle = COLORS.volatile;
-        ctx.lineWidth = VOLATILE_WIDTH;
-        ctx.stroke(new Path2D(VOLATILE_PATH));
-        legend(LABELS.volatile);
-    }
-    // ── Counter-factual (dark) ──────────────────────────────────────────
-    if (model.showCounterfactual) {
-        ctx.strokeStyle = COLORS.counterfactual;
-        ctx.lineWidth = COUNTERFACTUAL_WIDTH;
-        ctx.stroke(new Path2D(COUNTERFACTUAL_PATH));
-        legend(LABELS.counterfactual);
+    // ── The three curves, as ghosts ─────────────────────────────────────
+    // `save`/`restore` around each one so neither the stretch nor the dash nor
+    // the alpha leaks onto the legend that follows it — a legend is a name, and
+    // names stay solid, upright and undeformed.
+    for (const curve of estuarineCurves()) {
+        if (!model[curve.visibleProp])
+            continue;
+        ctx.save();
+        applyEstuarineTransform(ctx, w, h);
+        ctx.strokeStyle = curve.color;
+        ctx.lineWidth = curve.width * fit.curveLineScale;
+        ctx.globalAlpha = GHOST_ALPHA;
+        ctx.setLineDash([...GHOST_DASH]);
+        ctx.stroke(curve.path);
+        ctx.restore();
+        legend(LABELS[curve.key]);
     }
     // ── Italic e / t axis letters ───────────────────────────────────────
     if (model.showAxisLabels) {
         ctx.fillStyle = COLORS.axisLabel;
-        ctx.font = `italic 700 ${AXIS_LABELS.size}px Georgia, serif`;
+        ctx.font = `italic 700 ${AXIS_LABELS.size * fit.strokeScale}px Georgia, serif`;
         ctx.textAlign = 'left';
         ctx.textBaseline = 'alphabetic';
-        ctx.fillText(AXIS_LABELS.e.text, AXIS_LABELS.e.x, AXIS_LABELS.e.y);
-        ctx.fillText(AXIS_LABELS.t.text, AXIS_LABELS.t.x, AXIS_LABELS.t.y);
+        ctx.fillText(AXIS_LABELS.e.text, ax(AXIS_LABELS.e.x), ay(AXIS_LABELS.e.y));
+        ctx.fillText(AXIS_LABELS.t.text, ax(AXIS_LABELS.t.x), ay(AXIS_LABELS.t.y));
     }
 };
 export const EstuarineRendererExtension = ElementRendererExtension('estuarine', estuarine);