@formicoidea/labre-framework-edgy 0.31.0 → 0.33.0

package/dist/actions.d.ts

@@ -0,0 +1,39 @@
+import type { BlockStdScope } from '@formicoidea/labre-core/std';
+import { type GfxController } from '@formicoidea/labre-core/std/gfx';
+export type EdgyBoxKind = 'outcome' | 'object' | 'activity';
+/**
+ * Create the Enterprise Design Facets diagram centred on the viewport —
+ * cropped to the circles + facet labels (no dead margins around the Venn).
+ */
+export declare function createEdgyFacets(std: BlockStdScope): void;
+/**
+ * Insert the "EDGY dynamic" template (facets background + the 12 elements
+ * linked by the 24 verbalised relations), then bring it into view.
+ */
+export declare function createEdgyDynamic(std: BlockStdScope): Promise<void>;
+/** Create a blank EDGY board (hover spotlight host) centred on the viewport. */
+export declare function createEdgyBoard(std: BlockStdScope): void;
+/** Create a box base element (outcome / object / activity) with inner text. */
+export declare function createEdgyBox(std: BlockStdScope, kind: EdgyBoxKind): void;
+/**
+ * Create the People base element: an (invisible) ellipse decorated with the
+ * person glyph by the renderer, plus a native text label below, grouped.
+ */
+export declare function createEdgyPeople(std: BlockStdScope): void;
+/**
+ * Activate the native connector tool for an EDGY RELATION: pre-styled like the
+ * 24 links of the metamodel template, and stamped with the GENERIC role
+ * `edgy:relation`.
+ *
+ * Generic on purpose, and this is the whole design (`./relation.ts`): the verb
+ * of an EDGY relation is determined by the ordered pair of elements it runs
+ * between — 24 rows, 24 distinct pairs — so there is nothing to ask the user
+ * and nothing to pick from a list of twenty-two. The tool arms the parent role,
+ * the user drags from the subject to the object, and `EdgyRelationResolver`
+ * writes the verb the metamodel gives that pair, as a role and as the label.
+ *
+ * The style is the template's, to the pixel: straight, `NODE_STROKE`, two units
+ * wide, and NO arrowhead at either end — EDGY's reference diagram draws its
+ * relations as bare lines and lets the verb say which way the sentence runs.
+ */
+export declare function activateEdgyRelation(gfx: GfxController): void;

package/dist/actions.js

@@ -0,0 +1,193 @@
+import { DefaultTool } from '@formicoidea/labre-core/blocks/surface';
+import { ConnectorTool } from '@formicoidea/labre-core/gfx/connector';
+import { createGroupCommand } from '@formicoidea/labre-core/gfx/group';
+import { createTemplateJob } from '@formicoidea/labre-core/gfx/template';
+import { ConnectorMode, FontFamily, PointStyle, ShapeStyle, StrokeStyle, } from '@formicoidea/labre-core/model';
+import { Bound } from '@formicoidea/labre-core/global/gfx';
+import { GfxControllerIdentifier } from '@formicoidea/labre-core/std/gfx';
+import { CROP_LABELED } from './consts.js';
+import { ACTIVITY_VERTICES, INNER_FONT_SIZE, LABEL_FONT_SIZE, LABEL_GAP, NODE_FILL, NODE_LABEL, NODE_SIZE, NODE_STROKE, NODE_STROKE_WIDTH, OUTCOME_RADIUS, } from './node/consts.js';
+import { EDGY_ROLE } from './roles.js';
+import { edgyDynamicTemplate } from './templates/index.js';
+/** Stroke width the 24 template relations are drawn with. */
+const RELATION_STROKE_WIDTH = 2;
+/** Default facets-diagram size (REF aspect, scaled up so it reads on canvas). */
+const FACETS_SCALE = 1.5;
+/** Default blank-board size. */
+const BOARD_W = 1600;
+const BOARD_H = 1000;
+/** Height of the native People free-text label. */
+const LABEL_H = LABEL_FONT_SIZE + 8;
+const gfxOf = (std) => std.get(GfxControllerIdentifier);
+function finish(gfx, id) {
+    gfx.doc.captureSync();
+    gfx.tool.setTool(DefaultTool);
+    gfx.selection.set({ elements: [id], editing: false });
+    // Keep the palette open (native sub-menu behaviour).
+}
+/**
+ * Shared props for an EDGY node shape.
+ *
+ * The `role` is the PERSISTED KIND and nothing more: somebody picking "Object"
+ * in the palette has said "this is an object", not "this is a Channel". The
+ * twelve official elements are named by the metamodel template, which knows
+ * which of them it is drawing; a base element created here specialises
+ * `edgy:element` through its kind and is judged by every rule written on the
+ * root — the overlap rule — and by none written on a leaf.
+ */
+const baseShapeProps = (kind) => ({
+    type: 'edgyNode',
+    kind,
+    role: EDGY_ROLE[kind],
+    filled: true,
+    fillColor: NODE_FILL,
+    strokeColor: NODE_STROKE,
+    shapeStyle: ShapeStyle.General,
+    roughness: 0,
+});
+/** Add a native free-text label (Inter), used for the People node. */
+function addLabel(surface, text, x, y) {
+    return surface.addElement({
+        type: 'text',
+        text,
+        fontFamily: FontFamily.Inter,
+        fontSize: LABEL_FONT_SIZE,
+        color: NODE_STROKE,
+        textAlign: 'center',
+        xywh: new Bound(x, y, 120, LABEL_H).serialize(),
+    });
+}
+/**
+ * Create the Enterprise Design Facets diagram centred on the viewport —
+ * cropped to the circles + facet labels (no dead margins around the Venn).
+ */
+export function createEdgyFacets(std) {
+    const gfx = gfxOf(std);
+    if (!gfx.surface)
+        return;
+    const width = CROP_LABELED.w * FACETS_SCALE;
+    const height = CROP_LABELED.h * FACETS_SCALE;
+    const { centerX, centerY } = gfx.viewport;
+    const id = gfx.surface.addElement({
+        type: 'edgy',
+        cropToCircles: true,
+        // The frame: what makes this an EDGY board rather than three circles, and
+        // what a finding is attributed to.
+        role: EDGY_ROLE.facets,
+        xywh: new Bound(centerX - width / 2, centerY - height / 2, width, height).serialize(),
+    });
+    finish(gfx, id);
+}
+/**
+ * Insert the "EDGY dynamic" template (facets background + the 12 elements
+ * linked by the 24 verbalised relations), then bring it into view.
+ */
+export async function createEdgyDynamic(std) {
+    const gfx = gfxOf(std);
+    if (!gfx.surface)
+        return;
+    const job = createTemplateJob(std, 'template');
+    const bound = await job.insertTemplate(structuredClone(edgyDynamicTemplate.content));
+    if (bound) {
+        const padding = 20 / gfx.viewport.zoom;
+        gfx.viewport.setViewportByBound(bound, [padding, padding, padding, padding], true);
+    }
+    gfx.doc.captureSync();
+    gfx.tool.setTool(DefaultTool);
+}
+/** Create a blank EDGY board (hover spotlight host) centred on the viewport. */
+export function createEdgyBoard(std) {
+    const gfx = gfxOf(std);
+    if (!gfx.surface)
+        return;
+    const { centerX, centerY } = gfx.viewport;
+    const id = gfx.surface.addElement({
+        type: 'edgyBoard',
+        // The blank board is a frame too: the same rules apply to what is drawn on
+        // it, and the same map-wide arbitration has to have somewhere to live.
+        role: EDGY_ROLE.board,
+        xywh: new Bound(centerX - BOARD_W / 2, centerY - BOARD_H / 2, BOARD_W, BOARD_H).serialize(),
+    });
+    finish(gfx, id);
+}
+/** Create a box base element (outcome / object / activity) with inner text. */
+export function createEdgyBox(std, kind) {
+    const gfx = gfxOf(std);
+    const surface = gfx.surface;
+    if (!surface)
+        return;
+    const { w, h } = NODE_SIZE[kind];
+    const { centerX: cx, centerY: cy } = gfx.viewport;
+    const shapeType = kind === 'activity' ? 'polygon' : 'rect';
+    const id = surface.addElement({
+        ...baseShapeProps(kind),
+        shapeType,
+        strokeWidth: NODE_STROKE_WIDTH,
+        radius: kind === 'outcome' ? OUTCOME_RADIUS : 0,
+        vertices: kind === 'activity' ? ACTIVITY_VERTICES : null,
+        text: NODE_LABEL[kind],
+        color: NODE_STROKE,
+        fontFamily: FontFamily.Inter,
+        fontSize: INNER_FONT_SIZE,
+        textAlign: 'center',
+        xywh: new Bound(cx - w / 2, cy - h / 2, w, h).serialize(),
+    });
+    finish(gfx, id);
+}
+/**
+ * Create the People base element: an (invisible) ellipse decorated with the
+ * person glyph by the renderer, plus a native text label below, grouped.
+ */
+export function createEdgyPeople(std) {
+    const gfx = gfxOf(std);
+    const surface = gfx.surface;
+    if (!surface)
+        return;
+    const { w, h } = NODE_SIZE.people;
+    const { centerX: cx, centerY: cy } = gfx.viewport;
+    const nodeId = surface.addElement({
+        ...baseShapeProps('people'),
+        shapeType: 'ellipse',
+        // No visible outline — People is just the glyph; the ellipse is the bound.
+        strokeWidth: 0,
+        xywh: new Bound(cx - w / 2, cy - h / 2, w, h).serialize(),
+    });
+    const labelId = addLabel(surface, NODE_LABEL.people, cx - 60, cy + h / 2 + LABEL_GAP);
+    const [, result] = std.command.exec(createGroupCommand, {
+        elements: [nodeId, labelId],
+    });
+    finish(gfx, result.groupId || nodeId);
+}
+/**
+ * Activate the native connector tool for an EDGY RELATION: pre-styled like the
+ * 24 links of the metamodel template, and stamped with the GENERIC role
+ * `edgy:relation`.
+ *
+ * Generic on purpose, and this is the whole design (`./relation.ts`): the verb
+ * of an EDGY relation is determined by the ordered pair of elements it runs
+ * between — 24 rows, 24 distinct pairs — so there is nothing to ask the user
+ * and nothing to pick from a list of twenty-two. The tool arms the parent role,
+ * the user drags from the subject to the object, and `EdgyRelationResolver`
+ * writes the verb the metamodel gives that pair, as a role and as the label.
+ *
+ * The style is the template's, to the pixel: straight, `NODE_STROKE`, two units
+ * wide, and NO arrowhead at either end — EDGY's reference diagram draws its
+ * relations as bare lines and lets the verb say which way the sentence runs.
+ */
+export function activateEdgyRelation(gfx) {
+    gfx.tool.setTool(ConnectorTool, {
+        mode: ConnectorMode.Straight,
+        role: EDGY_ROLE.relation,
+        // The look rides on the activation, never through the last-props store:
+        // the plain connector tool must keep the user's own style (#144 M1).
+        style: {
+            stroke: NODE_STROKE,
+            strokeStyle: StrokeStyle.Solid,
+            strokeWidth: RELATION_STROKE_WIDTH,
+            frontEndpointStyle: PointStyle.None,
+            rearEndpointStyle: PointStyle.None,
+        },
+    });
+    // Keep the palette open (native sub-menu behaviour): it only closes on
+    // re-click of the senior button, another senior tool, or Escape.
+}

package/dist/board-renderer.d.ts

@@ -0,0 +1,12 @@
+import { type ElementRenderer } from '@formicoidea/labre-core/blocks/surface';
+import type { EdgyBoardElementModel } from '@formicoidea/labre-core/model';
+/**
+ * Canvas renderer for the blank EDGY board: a plain white rounded rectangle
+ * with a discreet border. The board only exists to host free-form EDGY
+ * modelling and grant the spotlight-on-hover behavior to the elements laid on
+ * top of it.
+ */
+export declare const edgyBoard: ElementRenderer<EdgyBoardElementModel>;
+export declare const EdgyBoardRendererExtension: import("@formicoidea/labre-core/store").ExtensionType & {
+    identifier: import("@formicoidea/labre-core/_pkgs/global/di").ServiceIdentifier<ElementRenderer<EdgyBoardElementModel>>;
+};

package/dist/board-renderer.js

@@ -0,0 +1,28 @@
+import { ElementRendererExtension, } from '@formicoidea/labre-core/blocks/surface';
+const BOARD_FILL = '#ffffff';
+const BOARD_BORDER = '#e0e0e0';
+const BOARD_RADIUS = 16;
+const BOARD_BORDER_WIDTH = 2;
+/**
+ * Canvas renderer for the blank EDGY board: a plain white rounded rectangle
+ * with a discreet border. The board only exists to host free-form EDGY
+ * modelling and grant the spotlight-on-hover behavior to the elements laid on
+ * top of it.
+ */
+export const edgyBoard = (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.beginPath();
+    ctx.roundRect(0, 0, w, h, BOARD_RADIUS);
+    ctx.fillStyle = BOARD_FILL;
+    ctx.fill();
+    ctx.strokeStyle = BOARD_BORDER;
+    ctx.lineWidth = BOARD_BORDER_WIDTH;
+    ctx.stroke();
+};
+export const EdgyBoardRendererExtension = ElementRendererExtension('edgyBoard', edgyBoard);

package/dist/board-view.d.ts

@@ -0,0 +1,11 @@
+import type { EdgyBoardElementModel } from '@formicoidea/labre-core/model';
+import { GfxElementModelView } from '@formicoidea/labre-core/std/gfx';
+export declare class EdgyBoardView extends GfxElementModelView<EdgyBoardElementModel> {
+    static type: string;
+}
+/**
+ * Resize gating: the resize handles are hidden unless `model.resizeEnabled` is
+ * true. Moving/selecting stays available throughout (same as the facets
+ * diagram).
+ */
+export declare const EdgyBoardInteraction: import("@formicoidea/labre-core/store").ExtensionType;

package/dist/board-view.js

@@ -0,0 +1,20 @@
+import { GfxElementModelView, GfxViewInteractionExtension, } from '@formicoidea/labre-core/std/gfx';
+export class EdgyBoardView extends GfxElementModelView {
+    static { this.type = 'edgyBoard'; }
+}
+/**
+ * Resize gating: the resize handles are hidden unless `model.resizeEnabled` is
+ * true. Moving/selecting stays available throughout (same as the facets
+ * diagram).
+ */
+export const EdgyBoardInteraction = GfxViewInteractionExtension(EdgyBoardView.type, {
+    handleResize({ model }) {
+        return {
+            beforeResize({ set }) {
+                if (!model.resizeEnabled) {
+                    set({ allowedHandlers: [] });
+                }
+            },
+        };
+    },
+});

package/dist/commands.d.ts

@@ -0,0 +1,4 @@
+import type { CommandDescriptor } from '@formicoidea/labre-core/std';
+import type { TemplateResult } from 'lit';
+export declare const edgyCommands: CommandDescriptor[];
+export declare const edgyCommandIcons: Record<string, TemplateResult>;

package/dist/commands.js

@@ -0,0 +1,103 @@
+import { GfxControllerIdentifier } from '@formicoidea/labre-core/std/gfx';
+import { activateEdgyRelation, createEdgyBoard, createEdgyBox, createEdgyDynamic, createEdgyFacets, createEdgyPeople, } from './actions.js';
+import { edgyActivityIcon, edgyBoardIcon, edgyDynamicIcon, edgyFacetsIcon, edgyObjectIcon, edgyOutcomeIcon, edgyPeopleIcon, edgyRelationIcon, } from './toolbar/icons.js';
+const SPECS = [
+    {
+        id: 'addFacets',
+        label: 'Enterprise Design facets',
+        iconKey: 'edgy.facets',
+        category: 'diagrams',
+        element: 'facets',
+        run: createEdgyFacets,
+    },
+    {
+        id: 'insertDynamic',
+        label: 'EDGY dynamic (elements & relations)',
+        iconKey: 'edgy.dynamic',
+        category: 'diagrams',
+        element: 'template:dynamic',
+        run: createEdgyDynamic,
+    },
+    {
+        id: 'addBoard',
+        label: 'EDGY board (hover spotlight)',
+        iconKey: 'edgy.board',
+        category: 'diagrams',
+        element: 'board',
+        run: createEdgyBoard,
+    },
+    {
+        id: 'addPeople',
+        label: 'People',
+        iconKey: 'edgy.people',
+        category: 'elements',
+        element: 'node:people',
+        run: createEdgyPeople,
+    },
+    {
+        id: 'addOutcome',
+        label: 'Outcome',
+        iconKey: 'edgy.outcome',
+        category: 'elements',
+        element: 'node:outcome',
+        run: std => createEdgyBox(std, 'outcome'),
+    },
+    {
+        id: 'addObject',
+        label: 'Object',
+        iconKey: 'edgy.object',
+        category: 'elements',
+        element: 'node:object',
+        run: std => createEdgyBox(std, 'object'),
+    },
+    {
+        id: 'addActivity',
+        label: 'Activity',
+        iconKey: 'edgy.activity',
+        category: 'elements',
+        element: 'node:activity',
+        run: std => createEdgyBox(std, 'activity'),
+    },
+    {
+        id: 'addRelation',
+        label: 'Relation',
+        description: 'Drag from the element that is the subject of the relation to the one it is about; EDGY names the link itself.',
+        iconKey: 'edgy.relation',
+        category: 'relations',
+        kind: 'tool',
+        element: 'connector:relation',
+        run: std => activateEdgyRelation(std.get(GfxControllerIdentifier)),
+    },
+];
+export const edgyCommands = SPECS.map((spec, order) => ({
+    id: `edgy.${spec.id}`,
+    owner: 'edgy',
+    kind: spec.kind ?? 'artefact',
+    labelKey: `com.labre.commands.edgy.${spec.id}`,
+    labelFallback: spec.label,
+    ...(spec.description === undefined
+        ? {}
+        : {
+            descriptionKey: `com.labre.commands.edgy.${spec.id}.description`,
+            descriptionFallback: spec.description,
+        }),
+    category: spec.category,
+    iconKey: spec.iconKey,
+    surfaces: ['senior-menu', 'catalogue', 'palette', 'agent'],
+    order,
+    scope: 'edgeless',
+    defaultKeys: { mac: [], other: [] },
+    availability: 'always',
+    run: spec.run,
+    telemetry: { framework: 'edgy', element: spec.element },
+}));
+export const edgyCommandIcons = {
+    'edgy.facets': edgyFacetsIcon,
+    'edgy.dynamic': edgyDynamicIcon,
+    'edgy.board': edgyBoardIcon,
+    'edgy.people': edgyPeopleIcon,
+    'edgy.outcome': edgyOutcomeIcon,
+    'edgy.object': edgyObjectIcon,
+    'edgy.activity': edgyActivityIcon,
+    'edgy.relation': edgyRelationIcon,
+};

package/dist/consts.d.ts

@@ -44,3 +44,38 @@ export declare function refScale(w: number, h: number): {
     ox: number;
     oy: number;
 };
+/**
+ * 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.
+ */
+export declare const CROP: {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+};
+/**
+ * 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.
+ */
+export declare const CROP_LABELED: {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+};
+/** `refScale` variant fitting the cropped circles box (see {@link CROP}). */
+export declare const cropScale: (w: number, h: number) => {
+    s: number;
+    ox: number;
+    oy: number;
+};
+/** `refScale` variant fitting the circles + facet labels box. */
+export declare const cropLabeledScale: (w: number, h: number) => {
+    s: number;
+    ox: number;
+    oy: number;
+};

package/dist/consts.js

@@ -43,3 +43,49 @@ 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 };
 }
+/**
+ * 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.
+ */
+export const CROP = (() => {
+    const pad = 8;
+    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 };
+})();
+/**
+ * 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.
+ */
+export const CROP_LABELED = (() => {
+    const sideAllowance = 140; // label offset (10) + text width headroom
+    const bottomAllowance = 35; // experience label below the bottom circle
+    return {
+        x: CROP.x - sideAllowance,
+        y: CROP.y,
+        w: CROP.w + 2 * sideAllowance,
+        h: CROP.h + bottomAllowance,
+    };
+})();
+function fitScale(box) {
+    return (w, h) => {
+        const s = Math.min(w / box.w, h / box.h);
+        return {
+            s,
+            ox: (w - box.w * s) / 2 - box.x * s,
+            oy: (h - box.h * s) / 2 - box.y * s,
+        };
+    };
+}
+/** `refScale` variant fitting the cropped circles box (see {@link CROP}). */
+export const cropScale = fitScale(CROP);
+/** `refScale` variant fitting the circles + facet labels box. */
+export const cropLabeledScale = fitScale(CROP_LABELED);

package/dist/descriptor.d.ts

@@ -1,7 +1,12 @@
-import { EdgyViewExtension } from './view.js';
+import { EdgyRenderViewExtension, EdgyViewExtension } from './view.js';
 /** Host wiring for the edgy framework. */
 export declare const edgyFramework: {
     readonly flag: "edgy";
-    readonly telemetry: "edgy";
-    readonly viewExtension: typeof EdgyViewExtension;
+    readonly telemetryKey: "edgy";
+    readonly extensions: readonly [{
+        readonly viewExtension: typeof EdgyRenderViewExtension;
+    }, {
+        readonly flag: "edgy";
+        readonly viewExtension: typeof EdgyViewExtension;
+    }];
 };

package/dist/descriptor.js

@@ -1,7 +1,10 @@
-import { EdgyViewExtension } from './view.js';
+import { EdgyRenderViewExtension, EdgyViewExtension } from './view.js';
 /** Host wiring for the edgy framework. */
 export const edgyFramework = {
     flag: 'edgy',
-    telemetry: 'edgy',
-    viewExtension: EdgyViewExtension,
+    telemetryKey: 'edgy',
+    extensions: [
+        { viewExtension: EdgyRenderViewExtension },
+        { flag: 'edgy', viewExtension: EdgyViewExtension },
+    ],
 };

package/dist/element-renderer.js

@@ -1,6 +1,6 @@
 import { ElementRendererExtension, } from '@formicoidea/labre-core/blocks/surface';
-import { COLORS, FONT_FAMILY, LABEL_FONT_SIZE, PICTO_STROKE, REF_H, REF_W, refScale, VENN, } from './consts.js';
-import { CIRCLE_A, CIRCLE_B, CIRCLE_C, facetLabelAnchors } from './label-layout.js';
+import { COLORS, cropLabeledScale, cropScale, FONT_FAMILY, LABEL_FONT_SIZE, PICTO_STROKE, REF_H, REF_W, refScale, VENN, } from './consts.js';
+import { CIRCLE_A, CIRCLE_B, CIRCLE_C, facetLabelAnchors, } from './label-layout.js';
 /**
  * Canvas renderer for the EDGY Enterprise Design Facets diagram — reproduces the
  * validated mockup: three overlapping circles (Identity / Architecture /
@@ -15,9 +15,18 @@ export const edgy = (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));
-    // Uniform fit of the reference design, centered (letterboxed).
-    const { s, ox, oy } = refScale(w, h);
+    ctx.setTransform(matrix
+        .translateSelf(cx, cy)
+        .rotateSelf(model.rotate)
+        .translateSelf(-cx, -cy));
+    // Uniform fit of the reference design, centered (letterboxed) — or, when
+    // the diagram is cropped, of the circles' bounding box (plus the facet
+    // label allowance if the labels are shown).
+    const { s, ox, oy } = model.cropToCircles
+        ? model.showLabels
+            ? cropLabeledScale(w, h)
+            : cropScale(w, h)
+        : refScale(w, h);
     ctx.translate(ox, oy);
     ctx.scale(s, s);
     const A = CIRCLE_A;
@@ -149,14 +158,16 @@ export const edgy = (model, ctx, matrix) => {
         ctx.lineTo(x, y + 12);
         ctx.stroke();
     };
-    // Single-facet zone pictos.
-    lens(A.x - 30, A.y - 22);
-    house(B.x + 30, B.y - 22);
-    heart(C.x, C.y + 36);
-    // Intersection pictos at the validated sweet spots.
-    network(VENN.cx, 114);
-    sun(VENN.cx - 58, 206);
-    cube(VENN.cx + 58, 206);
+    if (model.showPictos) {
+        // Single-facet zone pictos.
+        lens(A.x - 30, A.y - 22);
+        house(B.x + 30, B.y - 22);
+        heart(C.x, C.y + 36);
+        // Intersection pictos at the validated sweet spots.
+        network(VENN.cx, 114);
+        sun(VENN.cx - 58, 206);
+        cube(VENN.cx + 58, 206);
+    }
     // ── Labels (outside the circles) ────────────────────────────────────
     if (model.showLabels) {
         ctx.font = `500 ${LABEL_FONT_SIZE}px ${FONT_FAMILY}`;

package/dist/element-view.js

@@ -1,7 +1,7 @@
 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 { refScale } from './consts.js';
+import { cropLabeledScale, refScale } from './consts.js';
 import { getEdgyLabelHits, hitTestEdgyLabel, } from './label-layout.js';
 export class EdgyView extends GfxElementModelView {
     constructor() {
@@ -22,6 +22,9 @@ export class EdgyView extends GfxElementModelView {
     _onDblClick(e) {
         if (this.model.isLocked())
             return;
+        // No labels shown → nothing to edit (and the cropped mapping differs).
+        if (!this.model.showLabels)
+            return;
         const [mx, my] = this.gfx.viewport.toModelCoord(e.x, e.y);
         const [bx, by, w, h] = this.model.deserializedXYWH;
         // Convert the model-space point into element-local coordinates, undoing the
@@ -35,8 +38,11 @@ export class EdgyView extends GfxElementModelView {
             lx = ux - bx;
             ly = uy - by;
         }
-        // Map element-local coords into the fixed reference space the labels live in.
-        const { s, ox, oy } = refScale(w, h);
+        // 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
+            ? cropLabeledScale(w, h)
+            : refScale(w, h);
         const rx = (lx - ox) / s;
         const ry = (ly - oy) / s;
         const hit = hitTestEdgyLabel(getEdgyLabelHits(this.model), rx, ry);

package/dist/index.d.ts

@@ -1 +1,2 @@
-export {};
+export { edgyCommandIcons, edgyCommands } from './commands.js';
+export { edgyTranslationEntries } from './translations.js';

package/dist/index.js

@@ -1 +1,2 @@
-export {};
+export { edgyCommandIcons, edgyCommands } from './commands.js';
+export { edgyTranslationEntries } from './translations.js';

package/dist/label-layout.js

@@ -1,7 +1,13 @@
 import { LABEL_FONT_SIZE, VENN } from './consts.js';
 /** The three circle centres in reference coords. */
-export const CIRCLE_A = { x: VENN.cx - 0.866 * VENN.r0, y: VENN.cy - 0.5 * VENN.r0 }; // Identity
-export const CIRCLE_B = { x: VENN.cx + 0.866 * VENN.r0, y: VENN.cy - 0.5 * VENN.r0 }; // Architecture
+export const CIRCLE_A = {
+    x: VENN.cx - 0.866 * VENN.r0,
+    y: VENN.cy - 0.5 * VENN.r0,
+}; // Identity
+export const CIRCLE_B = {
+    x: VENN.cx + 0.866 * VENN.r0,
+    y: VENN.cy - 0.5 * VENN.r0,
+}; // Architecture
 export const CIRCLE_C = { x: VENN.cx, y: VENN.cy + VENN.r0 }; // Experience
 /**
  * The three facet name anchors in reference coords, positioned fully outside

package/dist/legend.d.ts

@@ -0,0 +1,2 @@
+import { type AutoLegendSpec } from '@formicoidea/labre-ddd-shared';
+export declare const EDGY_AUTO_LEGEND: AutoLegendSpec;