@formicoidea/labre-framework-edgy 0.41.0 → 0.43.1

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/element-view.d.ts

@@ -1,29 +1,27 @@
+import type { EditableBackgroundLabel } from '@formicoidea/labre-core/blocks/surface';
+import { FrameworkBackgroundView } from '@formicoidea/labre-core/blocks/surface';
 import type { EdgyFacetsElementModel } from '@formicoidea/labre-core/model';
-import type { EditorHost } from '@formicoidea/labre-core/std';
-import type { PointTestOptions } from '@formicoidea/labre-core/std/gfx';
-import { GfxElementModelView } from '@formicoidea/labre-core/std/gfx';
-export declare class EdgyView extends GfxElementModelView<EdgyFacetsElementModel> {
+/**
+ * The EDGY facets diagram's view: the shared background gesture, aimed by this
+ * framework's own label layout.
+ *
+ * The three facet names are NOT declared in a `FrameworkBackgroundDef` — the
+ * diagram is a Venn figure fitted into a reference space, and its labels hang
+ * off the circles rather than off a plot — so the hit test stays here, mapped
+ * with the SAME fit the renderer used. Everything above it (where a
+ * double-click is allowed to land, the in-place `<input>`, the commit that
+ * refuses to write an untouched value) comes from
+ * {@link FrameworkBackgroundView}, which is where this diagram's own copy of it
+ * went — see issue #355.
+ */
+export declare class EdgyView extends FrameworkBackgroundView<EdgyFacetsElementModel> {
     static type: string;
-    /** The in-place `<input>` used to edit a label, or null when idle. */
-    private _labelEditor;
-    onCreated(): void;
-    onDestroyed(): void;
-    /** The editable facet label under a MODEL-space point, or null. */
-    private _labelAt;
     /**
-     * The diagram is SELECTED by its border (`EdgyFacetsElementModel`), but its
-     * three facet labels must still receive the double-click that renames them.
-     *
-     * Same seam Wardley uses, for the same reason: the pointer router asks the
-     * VIEW, so a framework declares its own gesture zones next to the code that
-     * draws them, and the model layer keeps a hit test that only says what a
-     * click SELECTS.
+     * A diagram is SELECTED by its border (`EdgyFacetsElementModel`), and the
+     * three facet labels widen that for the pointer — the base class' doing; this
+     * method only says where they are.
      */
-    includesPoint(x: number, y: number, options: PointTestOptions, host: EditorHost): boolean;
-    /** Double-click on a label → edit its text in place. */
-    private _onDblClick;
-    private _openLabelEditor;
-    private _closeLabelEditor;
+    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/element-view.js

@@ -1,40 +1,31 @@
-import { EdgelessCRUDIdentifier } from '@formicoidea/labre-core/blocks/surface';
-import { rotatePoint } from '@formicoidea/labre-core/global/gfx';
-import { GfxElementModelView, GfxViewInteractionExtension, } from '@formicoidea/labre-core/std/gfx';
+import { FrameworkBackgroundView } from '@formicoidea/labre-core/blocks/surface';
+import { GfxViewInteractionExtension } from '@formicoidea/labre-core/std/gfx';
 import { cropLabeledScale, refScale } from './consts.js';
-import { getEdgyLabelHits, hitTestEdgyLabel, } from './label-layout.js';
-export class EdgyView extends GfxElementModelView {
-    constructor() {
-        super(...arguments);
-        /** The in-place `<input>` used to edit a label, or null when idle. */
-        this._labelEditor = null;
-    }
+import { getEdgyLabelHits, hitTestEdgyLabel } from './label-layout.js';
+/**
+ * The EDGY facets diagram's view: the shared background gesture, aimed by this
+ * framework's own label layout.
+ *
+ * The three facet names are NOT declared in a `FrameworkBackgroundDef` — the
+ * diagram is a Venn figure fitted into a reference space, and its labels hang
+ * off the circles rather than off a plot — so the hit test stays here, mapped
+ * with the SAME fit the renderer used. Everything above it (where a
+ * double-click is allowed to land, the in-place `<input>`, the commit that
+ * refuses to write an untouched value) comes from
+ * {@link FrameworkBackgroundView}, which is where this diagram's own copy of it
+ * went — see issue #355.
+ */
+export class EdgyView extends FrameworkBackgroundView {
     static { this.type = 'edgy'; }
-    onCreated() {
-        super.onCreated();
-        this.on('dblclick', e => this._onDblClick(e));
-    }
-    onDestroyed() {
-        this._closeLabelEditor();
-        super.onDestroyed();
-    }
-    /** The editable facet label under a MODEL-space point, or null. */
-    _labelAt(mx, my) {
+    /**
+     * A diagram is SELECTED by its border (`EdgyFacetsElementModel`), and the
+     * three facet labels widen that for the pointer — the base class' doing; this
+     * method only says where they are.
+     */
+    labelAt(lx, ly, w, h) {
         // No labels shown → nothing to edit (and the cropped mapping differs).
         if (!this.model.showLabels)
             return null;
-        const [bx, by, w, h] = this.model.deserializedXYWH;
-        // Convert the model-space point into element-local coordinates, undoing the
-        // element rotation around its center.
-        let lx = mx - bx;
-        let ly = my - by;
-        const rot = this.model.rotate ?? 0;
-        if (rot) {
-            const center = [bx + w / 2, by + h / 2];
-            const [ux, uy] = rotatePoint([mx, my], center, -rot);
-            lx = ux - bx;
-            ly = uy - by;
-        }
         // Map element-local coords into the fixed reference space the labels live
         // in — with the SAME fit the renderer used (cropped or letterboxed).
         const { s, ox, oy } = this.model.cropToCircles
@@ -42,91 +33,11 @@ export class EdgyView extends GfxElementModelView {
             : refScale(w, h);
         const rx = (lx - ox) / s;
         const ry = (ly - oy) / s;
-        return hitTestEdgyLabel(getEdgyLabelHits(this.model), rx, ry);
-    }
-    /**
-     * The diagram is SELECTED by its border (`EdgyFacetsElementModel`), but its
-     * three facet labels must still receive the double-click that renames them.
-     *
-     * Same seam Wardley uses, for the same reason: the pointer router asks the
-     * VIEW, so a framework declares its own gesture zones next to the code that
-     * draws them, and the model layer keeps a hit test that only says what a
-     * click SELECTS.
-     */
-    includesPoint(x, y, options, host) {
-        if (super.includesPoint(x, y, options, host))
-            return true;
-        return this._labelAt(x, y) !== null;
-    }
-    /** Double-click on a label → edit its text in place. */
-    _onDblClick(e) {
-        if (this.model.isLocked())
-            return;
-        const [mx, my] = this.gfx.viewport.toModelCoord(e.x, e.y);
-        const hit = this._labelAt(mx, my);
+        const hit = hitTestEdgyLabel(getEdgyLabelHits(this.model), rx, ry);
         if (!hit)
-            return;
-        this._openLabelEditor(hit.field, e);
-    }
-    _openLabelEditor(field, e) {
-        this._closeLabelEditor();
-        const input = document.createElement('input');
-        input.value = String(this.model[field] ?? '');
-        Object.assign(input.style, {
-            position: 'fixed',
-            left: `${e.raw.clientX}px`,
-            top: `${e.raw.clientY}px`,
-            transform: 'translate(-50%, -50%)',
-            zIndex: '10000',
-            minWidth: '140px',
-            padding: '3px 8px',
-            font: '14px Inter, sans-serif',
-            color: 'var(--affine-text-primary-color, #1f2328)',
-            background: 'var(--affine-background-overlay-panel-color, #ffffff)',
-            border: '1px solid var(--affine-primary-color, #1e96eb)',
-            borderRadius: '6px',
-            boxShadow: 'var(--affine-shadow-2, 0 2px 8px rgba(0,0,0,0.18))',
-            outline: 'none',
-        });
-        document.body.append(input);
-        this._labelEditor = input;
-        // Mark the element as "editing" so the global edgeless key handlers
-        // (delete, escape, etc.) don't act on it while the user types.
-        this.gfx.selection.set({ elements: [this.model.id], editing: true });
-        input.focus();
-        input.select();
-        const commit = () => {
-            if (this._labelEditor !== input)
-                return;
-            const value = input.value;
-            this._closeLabelEditor();
-            this.gfx.std.store.captureSync();
-            this.gfx.std
-                .get(EdgelessCRUDIdentifier)
-                .updateElement(this.model.id, { [field]: value });
-        };
-        input.addEventListener('keydown', ev => {
-            ev.stopPropagation();
-            if (ev.key === 'Enter') {
-                ev.preventDefault();
-                commit();
-            }
-            else if (ev.key === 'Escape') {
-                ev.preventDefault();
-                this._closeLabelEditor();
-            }
-        });
-        input.addEventListener('blur', commit);
-    }
-    _closeLabelEditor() {
-        if (!this._labelEditor)
-            return;
-        const input = this._labelEditor;
-        this._labelEditor = null;
-        input.remove();
-        if (this.isConnected) {
-            this.gfx.selection.set({ elements: [this.model.id], editing: false });
-        }
+            return null;
+        // The facet names carry a hard default, so the drawn words ARE the prop.
+        return { prop: hit.field, text: String(this.model[hit.field] ?? '') };
     }
 }
 /**

package/dist/node/node-renderer.js

@@ -1,4 +1,4 @@
-import { ElementRendererExtension, } from '@formicoidea/labre-core/blocks/surface';
+import { ElementRendererExtension, taggedPath2D, } from '@formicoidea/labre-core/blocks/surface';
 import { shape as shapeRenderer } from '@formicoidea/labre-core/gfx/shape';
 import { DefaultTheme } from '@formicoidea/labre-core/model';
 import { PERSON_GLYPH_PATHS, PERSON_GLYPH_VIEWBOX } from './consts.js';
@@ -33,7 +33,7 @@ export const edgyNode = (model, ctx, matrix, renderer, rc, bound) => {
     ctx.translate(-PERSON_GLYPH_VIEWBOX / 2, -PERSON_GLYPH_VIEWBOX / 2);
     ctx.fillStyle = color;
     for (const d of PERSON_GLYPH_PATHS) {
-        ctx.fill(new Path2D(d));
+        ctx.fill(taggedPath2D(d));
     }
 };
 export const EdgyNodeRendererExtension = ElementRendererExtension('edgyNode', edgyNode);

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/dist/templates/index.js

@@ -518,7 +518,7 @@ const ATTRS = 'width="100%" height="100%" viewBox="0 0 135 80" xmlns="http://www
  * `build` takes the OPTIONAL inserting editor: called with none, at module
  * load, for the English `content`; called again with the real `std` as
  * {@link Template.localize}, so the two builds read the very same layout and
- * differ only in the words a seed resolves to (`docs/adr/0016`).
+ * differ only in the words a seed resolves to (`docs/adr/0023`).
  */
 function tpl(name, preview, build, nameKey) {
     return {

package/dist/toolbar/config.d.ts

@@ -1,4 +1,4 @@
-import { type ChromeWording, type ToolbarContext } from '@formicoidea/labre-core/shared/services';
+import { type ChromeWording, type ToolbarContext, type ToolbarModuleConfig } from '@formicoidea/labre-core/shared/services';
 import { type TemplateResult } from 'lit';
 /** Every wording above, for `translations.ts`'s manifest contribution. */
 export declare const EDGY_TOOLBAR_WORDINGS: readonly ChromeWording[];
@@ -17,11 +17,6 @@ export declare const edgyToolbarConfig: {
         icon: TemplateResult;
         active(ctx: ToolbarContext): boolean;
         run(ctx: ToolbarContext): void;
-    }, {
-        id: string;
-        tooltipWording: ChromeWording;
-        icon: TemplateResult<1>;
-        run(ctx: ToolbarContext): void;
     }];
     readonly when: (ctx: ToolbarContext) => boolean;
 };
@@ -41,12 +36,11 @@ export declare const edgyBoardToolbarConfig: {
         icon: TemplateResult;
         active(ctx: ToolbarContext): boolean;
         run(ctx: ToolbarContext): void;
-    }, {
-        id: string;
-        tooltipWording: ChromeWording;
-        icon: TemplateResult<1>;
-        run(ctx: ToolbarContext): void;
     }];
     readonly when: (ctx: ToolbarContext) => boolean;
 };
 export declare const edgyBoardToolbarExtension: import("@formicoidea/labre-core/store").ExtensionType;
+export declare const edgyToolingToolbarConfig: ToolbarModuleConfig;
+export declare const edgyBoardToolingToolbarConfig: ToolbarModuleConfig;
+export declare const edgyToolingToolbarExtension: import("@formicoidea/labre-core/store").ExtensionType;
+export declare const edgyBoardToolingToolbarExtension: import("@formicoidea/labre-core/store").ExtensionType;

package/dist/toolbar/config.js

@@ -1,10 +1,8 @@
-import { EdgelessCRUDIdentifier } from '@formicoidea/labre-core/blocks/surface';
-import { createAutoLegend, dddLegendIcon } from '@formicoidea/labre-ddd-shared';
+import { EdgelessCRUDIdentifier, legendToolbarAction, validationToolbarConfig, } from '@formicoidea/labre-core/blocks/surface';
 import { EdgyBoardElementModel, EdgyFacetsElementModel, } from '@formicoidea/labre-core/model';
-import { BOARD_LEGEND_NOTATION, BOARD_RESIZE_TOGGLE, TelemetryProvider, ToolbarModuleExtension, } from '@formicoidea/labre-core/shared/services';
+import { BOARD_RESIZE_TOGGLE, ToolbarModuleExtension, } from '@formicoidea/labre-core/shared/services';
 import { BlockFlavourIdentifier } from '@formicoidea/labre-core/std';
 import { html } from 'lit';
-import { EDGY_AUTO_LEGEND } from '../legend.js';
 /** The two toolbar tooltips this file used to hard-code as English literals. */
 const FACET_LABELS_TOGGLE = [
     'com.labre.edgy.toolbar.facet-labels',
@@ -96,46 +94,12 @@ function booleanToggle(Model, id, tooltip, icon, prop) {
         },
     };
 }
-/**
- * The legend action, shared by the two EDGY backgrounds: both frame the same
- * notation, so both answer the same question — "what is actually drawn here" —
- * with the same table ({@link EDGY_AUTO_LEGEND}) and the same box.
- *
- * Registered ALWAYS-ON (`EdgyRenderViewExtension`) with the toggles it sits
- * next to: a legend is real, editable elements written into the document, so
- * generating one is authoring, not tooling a flag may take away
- * (`docs/adr/0009`).
- */
-function legendAction(Model, id) {
-    return {
-        id,
-        tooltipWording: BOARD_LEGEND_NOTATION,
-        icon: dddLegendIcon,
-        run(ctx) {
-            const background = ctx.getSurfaceModelsByType(Model)[0];
-            if (!background)
-                return;
-            createAutoLegend(ctx.std, background, EDGY_AUTO_LEGEND);
-            ctx.std.getOptional(TelemetryProvider)?.track('FrameworkLegendCreated', {
-                // The WIRE value from `frameworks.ts` (`telemetryKey`), which for EDGY
-                // happens to be the module id itself. Same field set as Wardley's and
-                // the three DDD legend buttons, so the four are comparable.
-                framework: 'edgy',
-                element: 'legend',
-                page: 'whiteboard editor',
-                segment: 'element toolbar',
-                module: 'edgy toolbar',
-            });
-        },
-    };
-}
 export const edgyToolbarConfig = {
     actions: [
         booleanToggle(EdgyFacetsElementModel, 'a.toggle-resize', BOARD_RESIZE_TOGGLE, ResizeIcon, 'resizeEnabled'),
         booleanToggle(EdgyFacetsElementModel, 'b.toggle-labels', FACET_LABELS_TOGGLE, LabelsIcon, 'showLabels'),
         // No spotlight toggle here: the hover spotlight is BOARD logic and lives on
         // the EDGY board toolbar below. The Venn only carries APPEARANCE (#195).
-        legendAction(EdgyFacetsElementModel, 'c.legend'),
     ],
     when: ctx => ctx.getSurfaceModelsByType(EdgyFacetsElementModel).length > 0,
 };
@@ -147,7 +111,6 @@ export const edgyBoardToolbarConfig = {
     actions: [
         booleanToggle(EdgyBoardElementModel, 'a.toggle-resize', BOARD_RESIZE_TOGGLE, ResizeIcon, 'resizeEnabled'),
         booleanToggle(EdgyBoardElementModel, 'b.toggle-spotlight', HOVER_SPOTLIGHT_TOGGLE, SpotlightIcon, 'spotlightEnabled'),
-        legendAction(EdgyBoardElementModel, 'c.legend'),
     ],
     when: ctx => ctx.getSurfaceModelsByType(EdgyBoardElementModel).length > 0,
 };
@@ -155,3 +118,55 @@ export const edgyBoardToolbarExtension = ToolbarModuleExtension({
     id: BlockFlavourIdentifier('affine:surface:edgyBoard'),
     config: edgyBoardToolbarConfig,
 });
+/**
+ * A background's flag-gated row, WHOLE: the legend button and the Validation
+ * dropdown, in ONE module — registered by `EdgyViewExtension` on the `custom:`
+ * flavour slot of each of the two frames.
+ *
+ * ## Why one module and not two
+ *
+ * `renderToolbar` merges exactly four slots per element and
+ * `ToolbarModuleExtension` binds by DI variant, so a second module claiming
+ * `custom:affine:surface:edgy` throws `DuplicateServiceDefinitionError` before
+ * the editor finishes setting up. The always-on module above holds the
+ * APPEARANCE toggles a stored board must keep; these two entries are gated by
+ * the same flag and appear together or not at all.
+ *
+ * ## Why the legend moved out of the always-on half
+ *
+ * It used to sit with the toggles, argued as authoring. `docs/adr/0026` (which
+ * amends `docs/adr/0009`) reverses that reading: GENERATING a legend is
+ * tooling — it is the framework telling you what its notation means — while the
+ * legend it wrote is content, made of plain shapes, text and this pack's own
+ * always-on renderers, and keeps being painted with the flag off.
+ *
+ * `c.legend` and not the factory's default `b.`: the sort is lexicographic and
+ * both frames already spend `a.` and `b.` on their toggles.
+ */
+function toolingConfig(Model) {
+    return {
+        actions: [
+            legendToolbarAction({
+                id: 'c.legend',
+                Model,
+                owner: 'edgy',
+                framework: 'edgy',
+            }),
+            // The generic dropdown, not an EDGY variant of it: the config names no
+            // framework — it reads the registered rules and profiles — so this is the
+            // very same object wardley, bpmn, the context map and C4 register.
+            ...validationToolbarConfig.actions,
+        ],
+        when: (ctx) => ctx.getSurfaceModelsByType(Model).length > 0,
+    };
+}
+export const edgyToolingToolbarConfig = toolingConfig(EdgyFacetsElementModel);
+export const edgyBoardToolingToolbarConfig = toolingConfig(EdgyBoardElementModel);
+export const edgyToolingToolbarExtension = ToolbarModuleExtension({
+    id: BlockFlavourIdentifier('custom:affine:surface:edgy'),
+    config: edgyToolingToolbarConfig,
+});
+export const edgyBoardToolingToolbarExtension = ToolbarModuleExtension({
+    id: BlockFlavourIdentifier('custom:affine:surface:edgyBoard'),
+    config: edgyBoardToolingToolbarConfig,
+});

package/dist/toolbar/edgy-senior-button.d.ts

@@ -10,6 +10,8 @@ export declare class EdgelessEdgySeniorButton extends EdgelessEdgySeniorButton_b
     enableActiveBackground: boolean;
     type: typeof EmptyTool;
     private _toggleMenu;
+    /** Lit while one of THIS framework's artefacts is armed. See the Wardley one. */
+    private get _armed();
     render(): import("lit-html").TemplateResult<1>;
 }
 export {};

package/dist/toolbar/edgy-senior-button.js

@@ -1,7 +1,7 @@
 import { DefaultTool } from '@formicoidea/labre-core/blocks/surface';
 import { EmptyTool } from '@formicoidea/labre-core/gfx/pointer';
 import { translateKey } from '@formicoidea/labre-core/shared/services';
-import { EdgelessToolbarToolMixin } from '@formicoidea/labre-core/widgets/edgeless-toolbar';
+import { armedArtefact, EdgelessToolbarToolMixin, } from '@formicoidea/labre-core/widgets/edgeless-toolbar';
 import { SignalWatcher } from '@formicoidea/labre-core/global/lit';
 import { css, html, LitElement } from 'lit';
 import { edgyToolbarIcon } from './icons.js';
@@ -72,6 +72,10 @@ export class EdgelessEdgySeniorButton extends EdgelessToolbarToolMixin(SignalWat
         const menu = this.createPopper('edgeless-edgy-menu', this);
         menu.element.edgeless = this.edgeless;
     }
+    /** Lit while one of THIS framework's artefacts is armed. See the Wardley one. */
+    get _armed() {
+        return armedArtefact(this.gfx)?.owner === 'edgy';
+    }
     render() {
         return html `<edgeless-toolbar-button
       class="edgy-button"
@@ -79,7 +83,7 @@ export class EdgelessEdgySeniorButton extends EdgelessToolbarToolMixin(SignalWat
             ? ''
             : translateKey(this.edgeless.std, 'com.labre.framework.edgy', 'EDGY')}
       .tooltipOffset=${4}
-      .active=${!!this.popper}
+      .active=${!!this.popper || this._armed}
       @click=${this._toggleMenu}
     >
       <div class="edgy-root">

package/dist/toolbar/node-config.d.ts

@@ -1,3 +1,4 @@
+import type { FrameworkPalette, NamedPalette } from '@formicoidea/labre-core/components/color-picker';
 import { type ChromeWording } from '@formicoidea/labre-core/shared/services';
 /**
  * The twelve EDGY swatches' own names, resolved by `resolvePaletteLabel`
@@ -23,4 +24,17 @@ export declare const EDGY_PALETTE_WORDING_ORGANISATION_LIGHT: ChromeWording;
 export declare const EDGY_PALETTE_WORDING_BRAND_LIGHT: ChromeWording;
 export declare const EDGY_PALETTE_WORDING_PRODUCT_LIGHT: ChromeWording;
 export declare const EDGY_PALETTE_WORDINGS: readonly ChromeWording[];
+/**
+ * From the default editor palette we keep ONLY the neutrals (greys, white,
+ * black, transparent) — the historical colours are dropped in favour of the
+ * EDGY swatches above.
+ */
+export declare const EDGY_PALETTE_LIST: NamedPalette[];
+/**
+ * EDGY's page of the colour pickers' carousel (`docs/adr/0027`) — the same
+ * list its node picker is seeded with, offered on every other picker too.
+ * Registered from the FLAG-GATED view extension: offering hues is tooling
+ * (`docs/adr/0009`).
+ */
+export declare const EDGY_FRAMEWORK_PALETTE: FrameworkPalette;
 export declare const edgyNodeToolbarExtension: import("@formicoidea/labre-core/store").ExtensionType;

package/dist/toolbar/node-config.js

@@ -142,10 +142,21 @@ const EDGY_PALETTES = [
  * black, transparent) — the historical colours are dropped in favour of the
  * EDGY swatches above.
  */
-const EDGY_PALETTE_LIST = [
+export const EDGY_PALETTE_LIST = [
     ...EDGY_PALETTES,
     ...neutralPalettes(),
 ];
+/**
+ * EDGY's page of the colour pickers' carousel (`docs/adr/0027`) — the same
+ * list its node picker is seeded with, offered on every other picker too.
+ * Registered from the FLAG-GATED view extension: offering hues is tooling
+ * (`docs/adr/0009`).
+ */
+export const EDGY_FRAMEWORK_PALETTE = {
+    framework: 'edgy',
+    labelWording: ['com.labre.framework.edgy', 'EDGY'],
+    palettes: EDGY_PALETTE_LIST,
+};
 /**
  * EDGY fill / stroke colour picker — identical to the shape one but seeded with
  * the EDGY palette swatches (`.palettes`).