@formicoidea/labre-framework-edgy 0.42.0 → 0.43.1

package/dist/consts.d.ts

@@ -38,17 +38,34 @@ export declare const FONT_FAMILY = "Inter, sans-serif";
  * Uniform fit of the reference design into an element of size `w × h`: the
  * scale factor plus the centering offsets (letterboxed). Shared by the renderer
  * (to draw) and the view (to map clicks back into reference coords).
+ *
+ * The fit itself is the library's ({@link fitReference}, R37): only the
+ * reference size is this framework's business.
  */
-export declare function refScale(w: number, h: number): {
-    s: number;
-    ox: number;
-    oy: number;
-};
+export declare function refScale(w: number, h: number): import("@formicoidea/labre-core/_pkgs/affine-block-surface").RefFit;
 /**
- * Bounding box of the three circles in reference coords (small padding). The
- * REF margins around it only exist for the facet name labels — when a diagram
- * hides them (`cropToCircles`), the renderer fits THIS box into the element
- * bounds instead, so the background hugs the Venn.
+ * Bounding box of the three circles in reference coords, with just enough
+ * padding to see their outline. When a diagram hides its facet names
+ * (`cropToCircles` without `showLabels`) the renderer fits THIS box into the
+ * element bounds, so the background hugs the Venn.
+ *
+ * ## Why the padding is 2.5 and not the 8 it was
+ *
+ * The padding is the ONLY empty band such a board has, and it is spent at the
+ * element's scale, not at the reference one. The EDGY dynamic template draws
+ * its board at `DYN_SCALE = 4.8`, so eight reference units of padding were
+ * **32.4 model units** of nothing on each of the four sides — the board a user
+ * has to catch by its border (R37) sat a good inch away from the circles, which
+ * is what the recette of 23/09/2026 reported. 2.5 leaves 1.25 past the circles'
+ * own 2.5-wide outline, i.e. 6 model units at the dynamic board's scale and
+ * under 2 at a facets board's.
+ *
+ * `templates/dynamic.ts` places every element of the dynamic board in
+ * coordinates relative to this box (`dynToModel`) and sizes the board from it,
+ * so the template follows in the same breath: both are derived here, and a
+ * freshly inserted template is aligned by construction. A board built from the
+ * OLD template keeps its `xywh` and sees the Venn grow 3.8 % inside it — see
+ * the changeset.
  */
 export declare const CROP: {
     x: number;
@@ -58,8 +75,8 @@ export declare const CROP: {
 };
 /**
  * Crop box KEEPING room for the three facet name labels (drawn outside the
- * circles): the circles box plus a fixed text allowance left/right and below.
- * Used when a cropped diagram still shows its labels.
+ * circles): the circles plus {@link LABEL_ALLOWANCE}, which is asymmetric
+ * because the words are. Used when a cropped diagram still shows its labels.
  */
 export declare const CROP_LABELED: {
     x: number;

package/dist/consts.js

@@ -6,6 +6,7 @@
  * uniformly to the element bounds — so the three circles always stay circular
  * and the pictos/labels keep their relative proportions at any size.
  */
+import { refScale as fitReference } from '@formicoidea/labre-core/blocks/surface';
 /** Reference design size (the validated mockup canvas). */
 export const REF_W = 680;
 export const REF_H = 400;
@@ -38,43 +39,116 @@ export const FONT_FAMILY = 'Inter, sans-serif';
  * Uniform fit of the reference design into an element of size `w × h`: the
  * scale factor plus the centering offsets (letterboxed). Shared by the renderer
  * (to draw) and the view (to map clicks back into reference coords).
+ *
+ * The fit itself is the library's ({@link fitReference}, R37): only the
+ * reference size is this framework's business.
  */
 export function refScale(w, h) {
-    const s = Math.min(w / REF_W, h / REF_H);
-    return { s, ox: (w - REF_W * s) / 2, oy: (h - REF_H * s) / 2 };
+    return fitReference(w, h, REF_W, REF_H);
 }
 /**
- * Bounding box of the three circles in reference coords (small padding). The
- * REF margins around it only exist for the facet name labels — when a diagram
- * hides them (`cropToCircles`), the renderer fits THIS box into the element
- * bounds instead, so the background hugs the Venn.
+ * The three circles, and nothing else: their exact bounding box in reference
+ * coords. Both crop boxes below are this box plus what each of them has to make
+ * room for, so the two can never disagree about where the Venn is.
  */
-export const CROP = (() => {
-    const pad = 8;
+const CIRCLES = (() => {
     const ax = VENN.cx - 0.866 * VENN.r0; // Identity / Architecture centres
     const abY = VENN.cy - 0.5 * VENN.r0;
     const cY = VENN.cy + VENN.r0; // Experience centre
-    const minX = ax - VENN.R - pad;
-    const maxX = VENN.cx + 0.866 * VENN.r0 + VENN.R + pad;
-    const minY = abY - VENN.R - pad;
-    const maxY = cY + VENN.R + pad;
-    return { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
+    return {
+        minX: ax - VENN.R,
+        maxX: VENN.cx + 0.866 * VENN.r0 + VENN.R,
+        minY: abY - VENN.R,
+        maxY: cY + VENN.R,
+    };
 })();
 /**
- * Crop box KEEPING room for the three facet name labels (drawn outside the
- * circles): the circles box plus a fixed text allowance left/right and below.
- * Used when a cropped diagram still shows its labels.
+ * Bounding box of the three circles in reference coords, with just enough
+ * padding to see their outline. When a diagram hides its facet names
+ * (`cropToCircles` without `showLabels`) the renderer fits THIS box into the
+ * element bounds, so the background hugs the Venn.
+ *
+ * ## Why the padding is 2.5 and not the 8 it was
+ *
+ * The padding is the ONLY empty band such a board has, and it is spent at the
+ * element's scale, not at the reference one. The EDGY dynamic template draws
+ * its board at `DYN_SCALE = 4.8`, so eight reference units of padding were
+ * **32.4 model units** of nothing on each of the four sides — the board a user
+ * has to catch by its border (R37) sat a good inch away from the circles, which
+ * is what the recette of 23/09/2026 reported. 2.5 leaves 1.25 past the circles'
+ * own 2.5-wide outline, i.e. 6 model units at the dynamic board's scale and
+ * under 2 at a facets board's.
+ *
+ * `templates/dynamic.ts` places every element of the dynamic board in
+ * coordinates relative to this box (`dynToModel`) and sizes the board from it,
+ * so the template follows in the same breath: both are derived here, and a
+ * freshly inserted template is aligned by construction. A board built from the
+ * OLD template keeps its `xywh` and sees the Venn grow 3.8 % inside it — see
+ * the changeset.
  */
-export const CROP_LABELED = (() => {
-    const sideAllowance = 140; // label offset (10) + text width headroom
-    const bottomAllowance = 35; // experience label below the bottom circle
+export const CROP = (() => {
+    const pad = 2.5;
     return {
-        x: CROP.x - sideAllowance,
-        y: CROP.y,
-        w: CROP.w + 2 * sideAllowance,
-        h: CROP.h + bottomAllowance,
+        x: CIRCLES.minX - pad,
+        y: CIRCLES.minY - pad,
+        w: CIRCLES.maxX - CIRCLES.minX + 2 * pad,
+        h: CIRCLES.maxY - CIRCLES.minY + 2 * pad,
     };
 })();
+/**
+ * How far past the circles each side of the labelled box has to reach, in REF
+ * units. MEASURED on the canvas, in the shipped wording, at
+ * {@link LABEL_FONT_SIZE}; each number is that reach plus 4 or 5 units of
+ * gutter.
+ *
+ * It used to be one symmetric number — `sideAllowance = 140` either side of the
+ * padded box, `bottomAllowance = 35` under it — and the three words are not
+ * symmetric at all. "Identity" is written right-aligned 10 left of the left
+ * circle and reaches 63.6 past the circles; "Architecture" is written
+ * left-aligned 10 right of the right circle and reaches 98.1; "Experience"
+ * hangs 29.2 below the bottom one (a `middle` baseline plus the descender of
+ * its "p"); and above them there is no word at all, only the 1.25 of circle
+ * stroke. So a facets diagram was born inside 126.6 model units of nothing on
+ * its left and 74.8 on its right — and a framework background is caught by its
+ * border and by nothing else
+ * (`model/src/elements/framework-background/hit-test.ts`), which put the
+ * catchable edge a seventh of the board away from anything drawn.
+ *
+ * ## Why constants rather than a measurement at paint time
+ *
+ * Because the three names are EDITABLE props of the element (`identityLabel` &
+ * co) and `cropLabeledScale` is not only what the renderer draws through —
+ * `element-view.ts` maps every click back through it too. Deriving the box from
+ * the current text would rescale and re-centre the whole Venn on each
+ * keystroke, and move the click mapping under the user's finger while they
+ * type; two boards of the same size would also draw their circles at two
+ * different sizes. The allowance is furniture: it is measured once, here.
+ *
+ * A name rewritten to something much longer than the vocabulary therefore
+ * reaches past the element's edge. It paints (the surface clips nothing); only
+ * the SVG export, which crops to the `xywh`, would cut it.
+ */
+const LABEL_ALLOWANCE = {
+    /** No word up there: the circle's own stroke, and room to see it. */
+    top: 5,
+    /** "Identity", right-aligned, reaching left of the circles. */
+    left: 68,
+    /** "Architecture", left-aligned, reaching right of them. */
+    right: 103,
+    /** "Experience", under the bottom circle, descender included. */
+    bottom: 32,
+};
+/**
+ * Crop box KEEPING room for the three facet name labels (drawn outside the
+ * circles): the circles plus {@link LABEL_ALLOWANCE}, which is asymmetric
+ * because the words are. Used when a cropped diagram still shows its labels.
+ */
+export const CROP_LABELED = {
+    x: CIRCLES.minX - LABEL_ALLOWANCE.left,
+    y: CIRCLES.minY - LABEL_ALLOWANCE.top,
+    w: CIRCLES.maxX - CIRCLES.minX + LABEL_ALLOWANCE.left + LABEL_ALLOWANCE.right,
+    h: CIRCLES.maxY - CIRCLES.minY + LABEL_ALLOWANCE.top + LABEL_ALLOWANCE.bottom,
+};
 function fitScale(box) {
     return (w, h) => {
         const s = Math.min(w / box.w, h / box.h);

package/dist/templates/dynamic.js

@@ -111,7 +111,11 @@ const NAME = 'EDGY dynamic';
 export const edgyDynamicTemplate = {
     name: NAME,
     type: 'template',
-    preview: `<svg width="100%" height="100%" viewBox="0 0 135 80" xmlns="http://www.w3.org/2000/svg"><circle cx="55" cy="34" r="18" fill="#00ea4e" opacity="0.9"/><circle cx="80" cy="34" r="18" fill="#034cee" opacity="0.9"/><circle cx="67" cy="54" r="18" fill="#ff0056" opacity="0.9"/><path d="M55 30 H80 M56 31 L66 52 M79 31 L69 52" stroke="#fff" stroke-width="2"/><rect x="51" y="26" width="8" height="8" fill="#fff"/><circle cx="80" cy="30" r="4" fill="#fff"/><path d="M62 49 h6 l3 3 -3 3 h-6 z" fill="#fff"/></svg>`,
+    // The thumbnail follows the board: the circles are drawn where the cropped
+    // {@link CROP} box puts them once it is fitted into the 135 × 80 tile
+    // (height-bound, `s = 80 / CROP.h`), so the tile shows the same framing the
+    // template actually inserts rather than a Venn floating in a tile of its own.
+    preview: `<svg width="100%" height="100%" viewBox="0 0 135 80" xmlns="http://www.w3.org/2000/svg"><circle cx="53.6" cy="28" r="27.2" fill="#00ea4e" opacity="0.9"/><circle cx="81.4" cy="28" r="27.2" fill="#034cee" opacity="0.9"/><circle cx="67.5" cy="52" r="27.2" fill="#ff0056" opacity="0.9"/><path d="M53.6 28 H81.4 M55.1 30.6 L66 49.4 M79.9 30.6 L69 49.4" stroke="#fff" stroke-width="3"/><rect x="48.6" y="23" width="10" height="10" fill="#fff"/><circle cx="81.4" cy="28" r="5" fill="#fff"/><path d="M63 48 h7 l4 4 -4 4 h-7 z" fill="#fff"/></svg>`,
     // Stamped by hand, and it is the one `commandId` in this pack that is a
     // literal rather than a derivation: importing the registry here would close
     // the very loop this module exists to avoid. The coverage test pairs the two

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@formicoidea/labre-framework-edgy",
   "description": "Labre edgy framework for @formicoidea/labre-core.",
-  "version": "0.42.0",
+  "version": "0.43.1",
   "type": "module",
   "sideEffects": false,
   "author": "lajola",
@@ -31,7 +31,7 @@
     "dist"
   ],
   "dependencies": {
-    "@formicoidea/labre-core": "0.42.0",
+    "@formicoidea/labre-core": "0.43.1",
     "@preact/signals-core": "^1.8.0",
     "lit": "^3.2.0",
     "yjs": "^13.6.21"