@formicoidea/labre-framework-edgy 0.32.0 → 0.33.0

package/dist/templates/index.js

@@ -1,6 +1,9 @@
 import { makeTemplateSnapshot, surfaceText, } from '@formicoidea/labre-core/gfx/template';
 import { ConnectorMode, FontFamily, PointStyle, ShapeStyle, StrokeStyle, TextAlign, } from '@formicoidea/labre-core/model';
 import { CROP, CROP_LABELED } from '../consts.js';
+import { EDGY_DYNAMIC_NODES, EDGY_DYNAMIC_RELATIONS, EDGY_ZONE_FILL, edgyElementLabel, } from '../metamodel.js';
+import { EDGY_RELATION_LABEL_DISTANCE, edgyVerbLabelXYWH } from '../relation.js';
+import { EDGY_ROLE, EDGY_VERB_ROLE } from '../roles.js';
 import { ACTIVITY_VERTICES, INNER_FONT_SIZE, NODE_FILL, NODE_SIZE, NODE_STROKE, NODE_STROKE_WIDTH, OUTCOME_RADIUS, } from '../node/consts.js';
 // EDGY facet palette (header / pale sub-card).
 const C = {
@@ -35,7 +38,15 @@ function rect(x, y, w, h, opts = {}) {
     }
     return el;
 }
-/** An EDGY node (kind drives the native shape): outcome/object box, people, activity chevron. */
+/**
+ * An EDGY node (kind drives the native shape): outcome/object box, people,
+ * activity chevron.
+ *
+ * `role` is optional and writes NOTHING when absent: the illustrative templates
+ * (journey, blueprint, org chart) stay neutral drawings the engine never looks
+ * at, exactly as they were before roles existed. Only the EDGY dynamic template
+ * — the one that IS the metamodel — stamps its elements.
+ */
 function enode(kind, x, y, w, h, opts = {}) {
     const el = {
         type: 'edgyNode',
@@ -52,6 +63,9 @@ function enode(kind, x, y, w, h, opts = {}) {
     };
     if (kind === 'activity')
         el.vertices = ACTIVITY_VERTICES;
+    // `undefined` writes nothing: a neutral node keeps no `role` key.
+    if (opts.role !== undefined)
+        el.role = opts.role;
     if (opts.text != null) {
         el.text = surfaceText(opts.text);
         el.color = opts.textColor ?? NODE_STROKE;
@@ -108,17 +122,53 @@ function facetsOverview() {
     const out = {};
     const tall = (key, x, name, cards) => {
         const [hdr, sub] = C[key];
-        out[`${key}F`] = rect(x, 140, 192, 460, { fill: hdr, stroke: hdr, radius: 16 });
-        out[`${key}N`] = label(x, 168, 192, 28, name, { color: '#ffffff', fontSize: 18 });
-        out[`${key}1`] = rect(x + 16, 208, 160, 80, { fill: sub, stroke: sub, radius: 6, text: cards[0], fontSize: 16 });
-        out[`${key}2`] = rect(x + 16, 300, 160, 80, { fill: sub, stroke: sub, radius: 6, text: cards[1], fontSize: 16 });
-        out[`${key}3`] = enode('activity', x + 16, 392, 160, 84, { fill: sub, text: cards[2], fontSize: 16 });
+        out[`${key}F`] = rect(x, 140, 192, 460, {
+            fill: hdr,
+            stroke: hdr,
+            radius: 16,
+        });
+        out[`${key}N`] = label(x, 168, 192, 28, name, {
+            color: '#ffffff',
+            fontSize: 18,
+        });
+        out[`${key}1`] = rect(x + 16, 208, 160, 80, {
+            fill: sub,
+            stroke: sub,
+            radius: 6,
+            text: cards[0],
+            fontSize: 16,
+        });
+        out[`${key}2`] = rect(x + 16, 300, 160, 80, {
+            fill: sub,
+            stroke: sub,
+            radius: 6,
+            text: cards[1],
+            fontSize: 16,
+        });
+        out[`${key}3`] = enode('activity', x + 16, 392, 160, 84, {
+            fill: sub,
+            text: cards[2],
+            fontSize: 16,
+        });
     };
     const low = (key, x, name) => {
         const [hdr, sub] = C[key];
-        out[`${key}F`] = rect(x, 300, 192, 424, { fill: hdr, stroke: hdr, radius: 16 });
-        out[`${key}1`] = rect(x + 16, 360, 160, 92, { fill: sub, stroke: sub, radius: 6, text: name, fontSize: 16 });
-        out[`${key}N`] = label(x, 686, 192, 28, name, { color: '#ffffff', fontSize: 18 });
+        out[`${key}F`] = rect(x, 300, 192, 424, {
+            fill: hdr,
+            stroke: hdr,
+            radius: 16,
+        });
+        out[`${key}1`] = rect(x + 16, 360, 160, 92, {
+            fill: sub,
+            stroke: sub,
+            radius: 6,
+            text: name,
+            fontSize: 16,
+        });
+        out[`${key}N`] = label(x, 686, 192, 28, name, {
+            color: '#ffffff',
+            fontSize: 18,
+        });
     };
     // lower facets first (drawn behind the tall ones at the overlaps)
     low('organisation', 240, 'Organisation');
@@ -135,39 +185,114 @@ function facetsOverview() {
 }
 // ── Customer journey ──────────────────────────────────────────────────
 function journey() {
-    const step = (i, x) => enode('activity', x, 132, 224, 116, { fill: JOURNEY_PINK, text: `Journey step ${i}`, textColor: '#ffffff', fontSize: 18 });
-    const ch = (x, n) => enode('object', x, 392, 184, 96, { fill: JOURNEY_PINK, text: `Channel ${n}`, fontSize: 16 });
-    const tk = (x, n) => enode('object', x, 540, 168, 92, { fill: JOURNEY_PINK, text: `Task ${n}`, fontSize: 16 });
+    const step = (i, x) => enode('activity', x, 132, 224, 116, {
+        fill: JOURNEY_PINK,
+        text: `Journey step ${i}`,
+        textColor: '#ffffff',
+        fontSize: 18,
+    });
+    const ch = (x, n) => enode('object', x, 392, 184, 96, {
+        fill: JOURNEY_PINK,
+        text: `Channel ${n}`,
+        fontSize: 16,
+    });
+    const tk = (x, n) => enode('object', x, 540, 168, 92, {
+        fill: JOURNEY_PINK,
+        text: `Task ${n}`,
+        fontSize: 16,
+    });
     return {
         cust: enode('people', 40, 120, 64, 64, { fill: '#ffffff' }),
         custL: label(20, 192, 104, 24, 'Customer', { fontSize: 14 }),
-        band: { type: 'shape', shapeType: 'polygon', vertices: [[0, 0], [0.86, 0], [1, 0.5], [0.86, 1], [0, 1]], filled: true, fillColor: JOURNEY_PINK, strokeColor: JOURNEY_PINK, strokeWidth: 1, shapeStyle: ShapeStyle.General, roughness: 0, xywh: '[150,108,860,164]' },
-        bandL: label(170, 116, 120, 24, 'Journey', { color: '#ffffff', fontSize: 16, align: TextAlign.Left }),
+        band: {
+            type: 'shape',
+            shapeType: 'polygon',
+            vertices: [
+                [0, 0],
+                [0.86, 0],
+                [1, 0.5],
+                [0.86, 1],
+                [0, 1],
+            ],
+            filled: true,
+            fillColor: JOURNEY_PINK,
+            strokeColor: JOURNEY_PINK,
+            strokeWidth: 1,
+            shapeStyle: ShapeStyle.General,
+            roughness: 0,
+            xywh: '[150,108,860,164]',
+        },
+        bandL: label(170, 116, 120, 24, 'Journey', {
+            color: '#ffffff',
+            fontSize: 16,
+            align: TextAlign.Left,
+        }),
         s1: step(1, 240),
         s2: step(2, 500),
         s3: step(3, 760),
-        rightTask: enode('object', 1060, 132, 168, 92, { text: 'Task', fontSize: 16 }),
-        c1: ch(258, 'X'), c2: ch(518, 'Y'), c3: ch(778, 'Z'),
-        t1: tk(266, 'A'), t2: tk(526, 'B'), t3: tk(786, 'C'),
-        trav1: label(258, 350, 184, 20, 'traverses', { fontSize: 13, color: '#5f6368' }),
-        trav2: label(518, 350, 184, 20, 'traverses', { fontSize: 13, color: '#5f6368' }),
-        trav3: label(778, 350, 184, 20, 'traverses', { fontSize: 13, color: '#5f6368' }),
+        rightTask: enode('object', 1060, 132, 168, 92, {
+            text: 'Task',
+            fontSize: 16,
+        }),
+        c1: ch(258, 'X'),
+        c2: ch(518, 'Y'),
+        c3: ch(778, 'Z'),
+        t1: tk(266, 'A'),
+        t2: tk(526, 'B'),
+        t3: tk(786, 'C'),
+        trav1: label(258, 350, 184, 20, 'traverses', {
+            fontSize: 13,
+            color: '#5f6368',
+        }),
+        trav2: label(518, 350, 184, 20, 'traverses', {
+            fontSize: 13,
+            color: '#5f6368',
+        }),
+        trav3: label(778, 350, 184, 20, 'traverses', {
+            fontSize: 13,
+            color: '#5f6368',
+        }),
         use1: label(258, 504, 184, 20, 'uses', { fontSize: 13, color: '#5f6368' }),
         use2: label(518, 504, 184, 20, 'uses', { fontSize: 13, color: '#5f6368' }),
         use3: label(778, 504, 184, 20, 'uses', { fontSize: 13, color: '#5f6368' }),
-        l1: attach('s1', 'c1'), l2: attach('s2', 'c2'), l3: attach('s3', 'c3'),
-        l4: attach('c1', 't1'), l5: attach('c2', 't2'), l6: attach('c3', 't3'),
+        l1: attach('s1', 'c1'),
+        l2: attach('s2', 'c2'),
+        l3: attach('s3', 'c3'),
+        l4: attach('c1', 't1'),
+        l5: attach('c2', 't2'),
+        l6: attach('c3', 't3'),
     };
 }
 // ── Service blueprint (six swimlanes) ─────────────────────────────────
 function blueprint() {
-    const lanes = ['Physical Evidence', 'Customer Actions', 'On-stage Actions', 'Back-stage Actions', 'Support Processes', 'Support Systems'];
-    const laneFill = ['#fdeef2', '#fbd5e0', '#dff0fb', '#d4e9f8', '#d4e9f8', '#d4e9f8'];
+    const lanes = [
+        'Physical Evidence',
+        'Customer Actions',
+        'On-stage Actions',
+        'Back-stage Actions',
+        'Support Processes',
+        'Support Systems',
+    ];
+    const laneFill = [
+        '#fdeef2',
+        '#fbd5e0',
+        '#dff0fb',
+        '#d4e9f8',
+        '#d4e9f8',
+        '#d4e9f8',
+    ];
     const out = {};
     lanes.forEach((name, i) => {
         const y = 40 + i * 150;
-        out[`lane${i}`] = rect(36, y, 1280, 150, { fill: laneFill[i], stroke: laneFill[i], sw: 0 });
-        out[`laneL${i}`] = label(52, y + 12, 260, 22, name, { fontSize: 15, align: TextAlign.Left });
+        out[`lane${i}`] = rect(36, y, 1280, 150, {
+            fill: laneFill[i],
+            stroke: laneFill[i],
+            sw: 0,
+        });
+        out[`laneL${i}`] = label(52, y + 12, 260, 22, name, {
+            fontSize: 15,
+            align: TextAlign.Left,
+        });
     });
     const chev = (x, y, fill, t) => enode('activity', x, y, 200, 60, { fill, text: t, fontSize: 14 });
     const box = (x, y, fill, t) => enode('object', x, y, 200, 60, { fill, text: t, fontSize: 14 });
@@ -175,11 +300,19 @@ function blueprint() {
     Object.assign(out, {
         af: rect(280, 64, 220, 70, { text: 'Admission Form' }),
         cf: rect(1010, 64, 220, 70, { text: 'Confirmation' }),
-        sf: chev(280, 214, P, 'Send Form'), fs: chev(600, 214, P, 'Follow status'), rd: chev(1010, 214, P, 'Receive decision'),
-        fh: chev(280, 364, B, 'Form handling'), cs: chev(600, 364, B, 'Customer support'), ct: chev(1010, 364, B, 'Contact'),
-        csv: chev(280, 514, B, 'Customer service'), cfu: box(1010, 514, B, 'Customer follow-up'),
-        pf: chev(600, 664, B, 'Process Form'), dec: chev(900, 664, B, 'Decision [Accept|Reject]'),
-        crm: box(280, 814, B, 'CRM Application'), cms: box(600, 814, B, 'Case Management'), pay: box(900, 814, B, 'Payments System'),
+        sf: chev(280, 214, P, 'Send Form'),
+        fs: chev(600, 214, P, 'Follow status'),
+        rd: chev(1010, 214, P, 'Receive decision'),
+        fh: chev(280, 364, B, 'Form handling'),
+        cs: chev(600, 364, B, 'Customer support'),
+        ct: chev(1010, 364, B, 'Contact'),
+        csv: chev(280, 514, B, 'Customer service'),
+        cfu: box(1010, 514, B, 'Customer follow-up'),
+        pf: chev(600, 664, B, 'Process Form'),
+        dec: chev(900, 664, B, 'Decision [Accept|Reject]'),
+        crm: box(280, 814, B, 'CRM Application'),
+        cms: box(600, 814, B, 'Case Management'),
+        pay: box(900, 814, B, 'Payments System'),
         a1: attach('af', 'sf', { arrow: true }),
         a2: attach('sf', 'fs', { arrow: true }),
         a3: attach('fs', 'rd', { arrow: true }),
@@ -197,8 +330,12 @@ function orgChart() {
     const u = (x, y, w, t) => enode('object', x, y, w, 64, { fill: cyan, text: t, fontSize: 16 });
     return {
         org: u(420, 40, 180, 'Organisation'),
-        a: u(120, 200, 200, 'Business Unit A'), b: u(410, 200, 200, 'Business Unit B'), c: u(700, 200, 200, 'Business Unit C'),
-        a1: u(60, 360, 170, 'Group A-1'), a2: u(260, 360, 170, 'Group A-2'), c1: u(715, 360, 170, 'Group C-1'),
+        a: u(120, 200, 200, 'Business Unit A'),
+        b: u(410, 200, 200, 'Business Unit B'),
+        c: u(700, 200, 200, 'Business Unit C'),
+        a1: u(60, 360, 170, 'Group A-1'),
+        a2: u(260, 360, 170, 'Group A-2'),
+        c1: u(715, 360, 170, 'Group C-1'),
         // Attached orthogonal connectors: the router draws the org-chart elbows
         // and the links follow when units are moved around.
         e1: attach('org', 'a', { mode: ConnectorMode.Orthogonal }),
@@ -217,72 +354,12 @@ function orgChart() {
  */
 export const DYN_SCALE = 4.8;
 /**
- * The 24 canonical EDGY relations (source, target, verb, label position along
- * the link) — exported for the unit tests. 7 per facet + 3 between the
- * intersections. The optional 4th member mirrors the reference diagram's
- * placements: verbs of intersection-outgoing links sit near the far element
- * (`labelOffset.distance` ≈ .75), short peer links keep the middle.
- */
-export const EDGY_DYNAMIC_RELATIONS = [
-    // Identity
-    ['content', 'purpose', 'expresses'],
-    ['content', 'story', 'conveys', 0.75],
-    ['story', 'purpose', 'contextualises', 0.8],
-    ['organisation', 'purpose', 'pursues', 0.8],
-    ['organisation', 'story', 'authors', 0.6],
-    ['brand', 'purpose', 'represents', 0.8],
-    ['brand', 'story', 'evokes', 0.65],
-    // Architecture
-    ['organisation', 'process', 'performs', 0.8],
-    ['process', 'capability', 'realises', 0.75],
-    ['process', 'asset', 'requires'],
-    ['capability', 'asset', 'requires', 0.75],
-    ['organisation', 'capability', 'has', 0.6],
-    ['product', 'capability', 'requires', 0.75],
-    ['process', 'product', 'creates', 0.65],
-    // Experience
-    ['task', 'journey', 'is part of', 0.6],
-    ['task', 'channel', 'uses', 0.6],
-    ['journey', 'channel', 'traverses', 0.6],
-    ['product', 'task', 'serves', 0.9],
-    ['product', 'journey', 'features in', 0.8],
-    ['brand', 'task', 'supports', 0.8],
-    ['brand', 'journey', 'appears in', 0.9],
-    // Intersections
-    ['organisation', 'brand', 'builds', 0.85],
-    ['organisation', 'product', 'makes', 0.65],
-    ['product', 'brand', 'embodies', 0.8],
-];
-/**
- * The 12 elements, centred coordinates in REFERENCE coords (the fixed space
- * of consts.ts — the same space as `VENN`), laid out like the reference
- * "elements & relations" diagram: aligned top row, Story/Capability flanks,
- * Brand/Product astride the white centre, Task/Journey/Channel triangle.
- * Exported (with {@link dynToModel}) for the containment test.
+ * The metamodel itself — the 12 elements and the 24 relations — now lives in
+ * `../metamodel.ts`, so the role vocabulary can DERIVE from it without this
+ * module and that one importing each other. Re-exported here under the names
+ * they have always had: nothing that reads them had to change.
  */
-/** Official pastel fills per facet (the `pictograms/Shape-*.svg` colors). */
-const PASTEL = {
-    identity: '#80ffb7',
-    architecture: '#a6c0ff',
-    experience: '#ff99bd',
-    organisation: '#80eaff',
-    brand: '#ffd580',
-    product: '#e599ff',
-};
-export const EDGY_DYNAMIC_NODES = {
-    content: { kind: 'object', cx: 237.5, cy: 100, fill: PASTEL.identity },
-    purpose: { kind: 'outcome', cx: 282.5, cy: 100, fill: PASTEL.identity },
-    organisation: { kind: 'object', cx: 340, cy: 100, w: 175, fill: PASTEL.organisation },
-    process: { kind: 'activity', cx: 397.5, cy: 100, fill: PASTEL.architecture },
-    asset: { kind: 'object', cx: 442.5, cy: 100, fill: PASTEL.architecture },
-    story: { kind: 'activity', cx: 255, cy: 152.5, fill: PASTEL.identity },
-    capability: { kind: 'outcome', cx: 425, cy: 152.5, w: 150, fill: PASTEL.architecture },
-    brand: { kind: 'object', cx: 280, cy: 195, fill: PASTEL.brand },
-    product: { kind: 'object', cx: 400, cy: 195, fill: PASTEL.product },
-    task: { kind: 'outcome', cx: 310, cy: 257.5, fill: PASTEL.experience },
-    journey: { kind: 'activity', cx: 370, cy: 257.5, fill: PASTEL.experience },
-    channel: { kind: 'object', cx: 340, cy: 297.5, fill: PASTEL.experience },
-};
+export { EDGY_DYNAMIC_NODES, EDGY_DYNAMIC_RELATIONS, } from '../metamodel.js';
 /**
  * Reference coords → template model coords: the background element sits at
  * (0,0) and renders the cropped circles box, so a reference point maps to
@@ -298,17 +375,23 @@ function dynamic() {
             showLabels: false,
             showPictos: false,
             cropToCircles: true,
+            // The frame a finding is attributed to. Stamped here and nowhere else in
+            // this template: the background is what makes the board an EDGY board.
+            role: EDGY_ROLE.facets,
             xywh: `[0,0,${CROP.w * DYN_SCALE},${CROP.h * DYN_SCALE}]`,
         },
     };
-    for (const [key, { kind, cx, cy, w, fill }] of Object.entries(EDGY_DYNAMIC_NODES)) {
+    for (const [key, { kind, cx, cy, w, zone }] of Object.entries(EDGY_DYNAMIC_NODES)) {
         const nw = w ?? NODE_SIZE[kind].w;
         const nh = NODE_SIZE[kind].h;
         const [mx, my] = dynToModel(cx, cy);
-        const name = key.charAt(0).toUpperCase() + key.slice(1);
+        const name = edgyElementLabel(key);
         out[key] = enode(kind, mx - nw / 2, my - nh / 2, nw, nh, {
             text: name,
-            fill,
+            fill: EDGY_ZONE_FILL[zone],
+            // The OFFICIAL element, not just its kind: this template IS the
+            // metamodel, so its Purpose is a Purpose and not merely an outcome.
+            role: EDGY_ROLE[key],
         });
     }
     EDGY_DYNAMIC_RELATIONS.forEach(([src, dst, verb, t], i) => {
@@ -322,21 +405,33 @@ function dynamic() {
             rearEndpointStyle: PointStyle.None,
             source: { id: src },
             target: { id: dst },
+            // The verb, as a ROLE — one per canonical verb, derived from this very
+            // table (`../roles.ts`). Source is the subject and target the object
+            // (`docs/adr/0010` tier 1), which is exactly how the row above reads, so
+            // `edgy.non-canonical-link` finds all 24 of these sentences legal.
+            role: EDGY_VERB_ROLE[verb],
             // Native connector label: the verb travels with the link. The x/y are
             // re-centred on the path at the first layout, but the w/h ARE the label
             // box — size it to the verb so the text lays out on one line. The
             // distance slides the verb along the link like the reference diagram.
             text: surfaceText(verb),
-            labelXYWH: [0, 0, verb.length * 9 + 24, 26],
-            labelOffset: { distance: t ?? 0.5 },
+            labelXYWH: edgyVerbLabelXYWH(verb),
+            labelOffset: { distance: t ?? EDGY_RELATION_LABEL_DISTANCE },
         };
     });
     return out;
 }
-const single = (el) => ({ a: el });
+const single = (el) => ({
+    a: el,
+});
 const ATTRS = 'width="100%" height="100%" viewBox="0 0 135 80" xmlns="http://www.w3.org/2000/svg"';
 function tpl(name, preview, elements) {
-    return { name, type: 'template', preview, content: makeTemplateSnapshot(elements, name) };
+    return {
+        name,
+        type: 'template',
+        preview,
+        content: makeTemplateSnapshot(elements, name),
+    };
 }
 /** Exported for direct insertion from the EDGY senior toolbar menu. */
 export const edgyDynamicTemplate = tpl('EDGY dynamic', `<svg ${ATTRS}><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>`, dynamic());
@@ -347,9 +442,17 @@ export const edgyTemplateCategory = {
         tpl('Customer journey', `<svg ${ATTRS} fill="none"><path d="M20 24 H110 L122 40 L110 56 H20 Z" fill="#f3a3c0"/><rect x="26" y="30" width="22" height="20" fill="none" stroke="#fff"/><rect x="54" y="30" width="22" height="20" fill="none" stroke="#fff"/><rect x="82" y="30" width="22" height="20" fill="none" stroke="#fff"/></svg>`, journey()),
         tpl('Service blueprint', `<svg ${ATTRS} fill="none"><rect x="8" y="14" width="119" height="16" fill="#fbd5e0"/><rect x="8" y="32" width="119" height="34" fill="#d4e9f8"/><rect x="20" y="18" width="22" height="9" fill="#f5246e" opacity="0.5"/><rect x="20" y="40" width="22" height="9" fill="#2f6ff0" opacity="0.4"/><rect x="60" y="40" width="22" height="9" fill="#2f6ff0" opacity="0.4"/></svg>`, blueprint()),
         tpl('Organisation chart', `<svg ${ATTRS} fill="none"><rect x="52" y="12" width="32" height="14" rx="2" fill="#4fd0ea"/><rect x="14" y="38" width="32" height="14" rx="2" fill="#4fd0ea"/><rect x="52" y="38" width="32" height="14" rx="2" fill="#4fd0ea"/><rect x="90" y="38" width="32" height="14" rx="2" fill="#4fd0ea"/><path d="M68 26 V32 M30 32 H106 M30 32 V38 M68 32 V38 M106 32 V38" stroke="#262626"/></svg>`, orgChart()),
-        tpl('Facets diagram', `<svg ${ATTRS}><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"/></svg>`, single({ type: 'edgy', cropToCircles: true, xywh: `[0,0,${CROP_LABELED.w * 1.5},${CROP_LABELED.h * 1.5}]` })),
+        tpl('Facets diagram', `<svg ${ATTRS}><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"/></svg>`, single({
+            type: 'edgy',
+            cropToCircles: true,
+            role: EDGY_ROLE.facets,
+            xywh: `[0,0,${CROP_LABELED.w * 1.5},${CROP_LABELED.h * 1.5}]`,
+        })),
         edgyDynamicTemplate,
-        tpl('People', `<svg ${ATTRS} fill="#262626"><circle cx="67" cy="32" r="9" fill="none" stroke="#262626" stroke-width="2.4"/><path d="M50 60 a17 17 0 0 1 34 0" fill="none" stroke="#262626" stroke-width="2.4"/></svg>`, { n: enode('people', 0, 0, 64, 64), l: label(-28, 70, 120, 24, 'People', { fontSize: 16 }) }),
+        tpl('People', `<svg ${ATTRS} fill="#262626"><circle cx="67" cy="32" r="9" fill="none" stroke="#262626" stroke-width="2.4"/><path d="M50 60 a17 17 0 0 1 34 0" fill="none" stroke="#262626" stroke-width="2.4"/></svg>`, {
+            n: enode('people', 0, 0, 64, 64),
+            l: label(-28, 70, 120, 24, 'People', { fontSize: 16 }),
+        }),
         tpl('Outcome', `<svg ${ATTRS} fill="none"><rect x="20" y="24" width="95" height="34" rx="6" stroke="#262626" stroke-width="2"/></svg>`, single(enode('outcome', 0, 0, 130, 80, { text: 'Outcome' }))),
         tpl('Object', `<svg ${ATTRS} fill="none"><rect x="20" y="24" width="95" height="34" stroke="#262626" stroke-width="2"/></svg>`, single(enode('object', 0, 0, 130, 80, { text: 'Object' }))),
         tpl('Activity', `<svg ${ATTRS} fill="none"><path d="M20 24 H98 L116 41 H116 L98 58 H20 Z" stroke="#262626" stroke-width="2" stroke-linejoin="round"/></svg>`, single(enode('activity', 0, 0, 140, 80, { text: 'Activity' }))),

package/dist/toolbar/config.d.ts

@@ -19,6 +19,11 @@ export declare const edgyToolbarConfig: {
         icon: TemplateResult;
         active(ctx: ToolbarContext): boolean;
         run(ctx: ToolbarContext): void;
+    }, {
+        id: string;
+        tooltip: string;
+        icon: TemplateResult<1>;
+        run(ctx: ToolbarContext): void;
     }];
     readonly when: (ctx: ToolbarContext) => boolean;
 };
@@ -36,6 +41,11 @@ export declare const edgyBoardToolbarConfig: {
         icon: TemplateResult;
         active(ctx: ToolbarContext): boolean;
         run(ctx: ToolbarContext): void;
+    }, {
+        id: string;
+        tooltip: string;
+        icon: TemplateResult<1>;
+        run(ctx: ToolbarContext): void;
     }];
     readonly when: (ctx: ToolbarContext) => boolean;
 };

package/dist/toolbar/config.js

@@ -1,8 +1,10 @@
 import { EdgelessCRUDIdentifier } from '@formicoidea/labre-core/blocks/surface';
+import { createAutoLegend, dddLegendIcon } from '@formicoidea/labre-ddd-shared';
 import { EdgyBoardElementModel, EdgyFacetsElementModel, } from '@formicoidea/labre-core/model';
-import { ToolbarModuleExtension, } from '@formicoidea/labre-core/shared/services';
+import { TelemetryProvider, 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';
 const ResizeIcon = html `<svg
   width="24"
   height="24"
@@ -75,11 +77,45 @@ 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,
+        tooltip: 'Generate the legend (notation present)',
+        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', 'Enable / lock resizing', ResizeIcon, 'resizeEnabled'),
         booleanToggle(EdgyFacetsElementModel, 'b.toggle-labels', 'Show / hide facet labels', LabelsIcon, 'showLabels'),
         booleanToggle(EdgyFacetsElementModel, 'c.toggle-spotlight', 'Enable / disable hover spotlight', SpotlightIcon, 'spotlightEnabled'),
+        legendAction(EdgyFacetsElementModel, 'd.legend'),
     ],
     when: ctx => ctx.getSurfaceModelsByType(EdgyFacetsElementModel).length > 0,
 };
@@ -91,6 +127,7 @@ export const edgyBoardToolbarConfig = {
     actions: [
         booleanToggle(EdgyBoardElementModel, 'a.toggle-resize', 'Enable / lock resizing', ResizeIcon, 'resizeEnabled'),
         booleanToggle(EdgyBoardElementModel, 'b.toggle-spotlight', 'Enable / disable hover spotlight', SpotlightIcon, 'spotlightEnabled'),
+        legendAction(EdgyBoardElementModel, 'c.legend'),
     ],
     when: ctx => ctx.getSurfaceModelsByType(EdgyBoardElementModel).length > 0,
 };

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

@@ -1,5 +1,6 @@
 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 { SignalWatcher } from '@formicoidea/labre-core/global/lit';
 import { css, html, LitElement } from 'lit';
@@ -44,7 +45,10 @@ export class EdgelessEdgySeniorButton extends EdgelessToolbarToolMixin(SignalWat
       translate: var(--active-x, 0) var(--active-y, 0);
       rotate: var(--active-r, -2deg);
       scale: var(--active-s, 1);
-      transition: transform 0.3s ease, translate 0.3s ease, rotate 0.3s ease,
+      transition:
+        transform 0.3s ease,
+        translate 0.3s ease,
+        rotate 0.3s ease,
         scale 0.3s ease;
     }
     .edgy-card svg {
@@ -71,7 +75,9 @@ export class EdgelessEdgySeniorButton extends EdgelessToolbarToolMixin(SignalWat
     render() {
         return html `<edgeless-toolbar-button
       class="edgy-button"
-      .tooltip=${this.popper ? '' : 'EDGY'}
+      .tooltip=${this.popper
+            ? ''
+            : translateKey(this.edgeless.std, 'com.labre.framework.edgy', 'EDGY')}
       .tooltipOffset=${4}
       .active=${!!this.popper}
       @click=${this._toggleMenu}

package/dist/toolbar/icons.d.ts

@@ -12,5 +12,13 @@ export declare const edgyPeopleIcon: import("lit-html").TemplateResult<2>;
 export declare const edgyOutcomeIcon: import("lit-html").TemplateResult<2>;
 /** Object — plain rectangle. */
 export declare const edgyObjectIcon: import("lit-html").TemplateResult<2>;
+/**
+ * Relation — a bare line between two ends, with the label riding on it.
+ *
+ * No arrowhead, exactly like the 24 relations of the metamodel template: EDGY
+ * draws its links as plain lines and lets the verb say which way the sentence
+ * runs. The little box in the middle IS the verb the tool writes there.
+ */
+export declare const edgyRelationIcon: import("lit-html").TemplateResult<2>;
 /** Activity — right-pointing chevron. */
 export declare const edgyActivityIcon: import("lit-html").TemplateResult<2>;

package/dist/toolbar/icons.js

@@ -44,6 +44,19 @@ export const edgyOutcomeIcon = svg `<svg width="24" height="24" viewBox="0 0 24
 export const edgyObjectIcon = svg `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
   <rect x="3.5" y="6.5" width="17" height="11" stroke="currentColor" stroke-width="1.6"/>
 </svg>`;
+/**
+ * Relation — a bare line between two ends, with the label riding on it.
+ *
+ * No arrowhead, exactly like the 24 relations of the metamodel template: EDGY
+ * draws its links as plain lines and lets the verb say which way the sentence
+ * runs. The little box in the middle IS the verb the tool writes there.
+ */
+export const edgyRelationIcon = svg `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M3.5 12 H20.5" stroke="currentColor" stroke-width="1.6"/>
+  <circle cx="3.8" cy="12" r="1.6" fill="currentColor"/>
+  <circle cx="20.2" cy="12" r="1.6" fill="currentColor"/>
+  <rect x="8" y="8.6" width="8" height="6.8" rx="1.4" fill="var(--affine-background-primary-color, #fff)" stroke="currentColor" stroke-width="1.4"/>
+</svg>`;
 /** Activity — right-pointing chevron. */
 export const edgyActivityIcon = svg `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path d="M3.5 6.5 H15 L20.5 12 L15 17.5 H3.5 Z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>

package/dist/toolbar/senior-tool.js

@@ -3,6 +3,7 @@ import { html } from 'lit';
 export const edgySeniorTool = SeniorToolExtension('edgy', ({ block }) => {
     return {
         name: 'EDGY',
+        labelKey: 'com.labre.framework.edgy',
         content: html `<edgeless-edgy-senior-button
       .edgeless=${block}
     ></edgeless-edgy-senior-button>`,

package/dist/translations.d.ts

@@ -1,14 +1,24 @@
 import { type TranslationKeyManifestEntry } from '@formicoidea/labre-core/std';
 /**
- * THIS framework's contribution to the translation-key manifest.
+ * THIS framework's contribution to the translation-key manifest — every
+ * `com.labre.*` key EDGY can hand to `TranslationProvider.t`, derived from the
+ * very declarations the editor registers.
  *
  * Its command labels and descriptions are built from a TEMPLATE, so the
- * concrete keys exist nowhere but in the declarations themselves and the
- * core manifest could not restate them even if it wanted to. The
- * contribution therefore ships WITH the framework: in the bundled
+ * concrete keys exist nowhere but in the declarations themselves and the core
+ * manifest could not restate them even if it wanted to. The same now holds for
+ * the roles: one key per canonical verb, derived from the metamodel, so a
+ * relation added there contributes its keys without anybody editing this file.
+ *
+ * That derivation is why the hand-drawn relation tool needed no line here: its
+ * `com.labre.commands.edgy.addRelation` and the `.description` key that carries
+ * its gesture sentence — the first DESCRIPTION any EDGY command has declared —
+ * are collected off `edgyCommands` with their English fallbacks, like every
+ * label before them.
+ *
+ * The contribution therefore ships WITH the framework: in the bundled
  * distribution `@formicoidea/labre-framework-edgy` carries it, and a host
- * composes it into its catalogue exactly as it already composes
- * `edgyCommands` into the command registry. See
- * `packages/affine/all/src/translations.ts`.
+ * composes it into its catalogue exactly as it already composes `edgyCommands`
+ * into the command registry. See `packages/affine/all/src/translations.ts`.
  */
 export declare const edgyTranslationEntries: TranslationKeyManifestEntry[];