@formicoidea/labre-framework-edgy 0.30.1 → 0.32.0

package/dist/templates/index.js

@@ -1,7 +1,7 @@
 import { makeTemplateSnapshot, surfaceText, } from '@formicoidea/labre-core/gfx/template';
 import { ConnectorMode, FontFamily, PointStyle, ShapeStyle, StrokeStyle, TextAlign, } from '@formicoidea/labre-core/model';
-import { REF_H, REF_W } from '../consts';
-import { ACTIVITY_VERTICES, INNER_FONT_SIZE, NODE_FILL, NODE_STROKE, NODE_STROKE_WIDTH, OUTCOME_RADIUS, } from '../node/consts';
+import { CROP, CROP_LABELED } from '../consts.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 = {
     identity: ['#1ec873', '#9fe6c2'],
@@ -85,6 +85,24 @@ function line(x1, y1, x2, y2, opts = {}) {
         target: { position: [x2, y2] },
     };
 }
+/**
+ * Connector ATTACHED to two template elements (by key): endpoints clip to the
+ * element edges and follow moves — unlike `line()`, whose free positions are
+ * only right until the user drags something.
+ */
+function attach(src, dst, opts = {}) {
+    return {
+        type: 'connector',
+        mode: opts.mode ?? ConnectorMode.Straight,
+        stroke: NODE_STROKE,
+        strokeWidth: 2,
+        strokeStyle: StrokeStyle.Solid,
+        frontEndpointStyle: PointStyle.None,
+        rearEndpointStyle: opts.arrow ? PointStyle.Triangle : PointStyle.None,
+        source: { id: src },
+        target: { id: dst },
+    };
+}
 // ── Facets overview (six facets, sub-cards, facets/intersections) ─────
 function facetsOverview() {
     const out = {};
@@ -137,8 +155,8 @@ function journey() {
         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: line(350, 248, 350, 392), l2: line(610, 248, 610, 392), l3: line(870, 248, 870, 392),
-        l4: line(350, 488, 350, 540), l5: line(610, 488, 610, 540), l6: line(870, 488, 870, 540),
+        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) ─────────────────────────────────
@@ -162,14 +180,14 @@ function blueprint() {
         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: line(380, 134, 380, 214, { arrow: true }),
-        a2: line(480, 244, 600, 244, { arrow: true }),
-        a3: line(800, 244, 1010, 244, { arrow: true }),
-        a4: line(320, 274, 320, 364, { arrow: true }),
-        a5: line(320, 424, 320, 514, { arrow: true }),
-        a6: line(700, 724, 900, 694, { arrow: true }),
-        a7: line(380, 874, 600, 844, { arrow: true }),
-        a8: line(800, 844, 900, 844, { arrow: true }),
+        a1: attach('af', 'sf', { arrow: true }),
+        a2: attach('sf', 'fs', { arrow: true }),
+        a3: attach('fs', 'rd', { arrow: true }),
+        a4: attach('sf', 'fh', { arrow: true }),
+        a5: attach('fh', 'csv', { arrow: true }),
+        a6: attach('pf', 'dec', { arrow: true }),
+        a7: attach('crm', 'cms', { arrow: true }),
+        a8: attach('cms', 'pay', { arrow: true }),
     });
     return out;
 }
@@ -181,18 +199,147 @@ function orgChart() {
         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'),
-        e1: line(510, 104, 510, 150), e2: line(220, 150, 800, 150),
-        e3: line(220, 150, 220, 200), e4: line(510, 150, 510, 200), e5: line(800, 150, 800, 200),
-        e6: line(220, 264, 220, 320), e7: line(145, 320, 345, 320),
-        e8: line(145, 320, 145, 360), e9: line(345, 320, 345, 360),
-        e10: line(800, 264, 800, 360),
+        // 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 }),
+        e2: attach('org', 'b', { mode: ConnectorMode.Orthogonal }),
+        e3: attach('org', 'c', { mode: ConnectorMode.Orthogonal }),
+        e4: attach('a', 'a1', { mode: ConnectorMode.Orthogonal }),
+        e5: attach('a', 'a2', { mode: ConnectorMode.Orthogonal }),
+        e6: attach('c', 'c1', { mode: ConnectorMode.Orthogonal }),
     };
 }
+// ── EDGY dynamic (the relational metamodel, on the facets background) ──
+/**
+ * Background scale (from REF coords to model coords): large enough that the
+ * default-size nodes breathe inside each zone. The background is cropped to
+ * the circles (`cropToCircles`), so its xywh covers CROP × DYN_SCALE.
+ */
+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.
+ */
+/** 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 },
+};
+/**
+ * Reference coords → template model coords: the background element sits at
+ * (0,0) and renders the cropped circles box, so a reference point maps to
+ * `(p - CROP.origin) × DYN_SCALE`.
+ */
+export function dynToModel(refX, refY) {
+    return [(refX - CROP.x) * DYN_SCALE, (refY - CROP.y) * DYN_SCALE];
+}
+function dynamic() {
+    const out = {
+        bg: {
+            type: 'edgy',
+            showLabels: false,
+            showPictos: false,
+            cropToCircles: true,
+            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)) {
+        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);
+        out[key] = enode(kind, mx - nw / 2, my - nh / 2, nw, nh, {
+            text: name,
+            fill,
+        });
+    }
+    EDGY_DYNAMIC_RELATIONS.forEach(([src, dst, verb, t], i) => {
+        out[`rel${i}`] = {
+            type: 'connector',
+            mode: ConnectorMode.Straight,
+            stroke: NODE_STROKE,
+            strokeWidth: 2,
+            strokeStyle: StrokeStyle.Solid,
+            frontEndpointStyle: PointStyle.None,
+            rearEndpointStyle: PointStyle.None,
+            source: { id: src },
+            target: { id: dst },
+            // 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 },
+        };
+    });
+    return out;
+}
 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) };
 }
+/** 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());
 export const edgyTemplateCategory = {
     name: 'EDGY',
     templates: [
@@ -200,7 +347,8 @@ 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', xywh: `[0,0,${REF_W * 1.5},${REF_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, 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('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' }))),

package/dist/toolbar/config.d.ts

@@ -13,7 +13,30 @@ export declare const edgyToolbarConfig: {
         icon: TemplateResult;
         active(ctx: ToolbarContext): boolean;
         run(ctx: ToolbarContext): void;
+    }, {
+        id: string;
+        tooltip: string;
+        icon: TemplateResult;
+        active(ctx: ToolbarContext): boolean;
+        run(ctx: ToolbarContext): void;
     }];
     readonly when: (ctx: ToolbarContext) => boolean;
 };
 export declare const edgyToolbarExtension: import("@formicoidea/labre-core/store").ExtensionType;
+export declare const edgyBoardToolbarConfig: {
+    readonly actions: [{
+        id: string;
+        tooltip: string;
+        icon: TemplateResult;
+        active(ctx: ToolbarContext): boolean;
+        run(ctx: ToolbarContext): void;
+    }, {
+        id: string;
+        tooltip: string;
+        icon: TemplateResult;
+        active(ctx: ToolbarContext): boolean;
+        run(ctx: ToolbarContext): void;
+    }];
+    readonly when: (ctx: ToolbarContext) => boolean;
+};
+export declare const edgyBoardToolbarExtension: import("@formicoidea/labre-core/store").ExtensionType;

package/dist/toolbar/config.js

@@ -1,5 +1,5 @@
 import { EdgelessCRUDIdentifier } from '@formicoidea/labre-core/blocks/surface';
-import { EdgyFacetsElementModel } from '@formicoidea/labre-core/model';
+import { EdgyBoardElementModel, EdgyFacetsElementModel, } from '@formicoidea/labre-core/model';
 import { ToolbarModuleExtension, } from '@formicoidea/labre-core/shared/services';
 import { BlockFlavourIdentifier } from '@formicoidea/labre-core/std';
 import { html } from 'lit';
@@ -30,37 +30,56 @@ const LabelsIcon = html `<svg
   <path d="M3 8.5l6-4.5 12 0 0 16-12 0-6-4.5z" />
   <circle cx="8" cy="12" r="1.4" />
 </svg>`;
+/** Spot with rays — enable / disable the hover spotlight. */
+const SpotlightIcon = html `<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="1.6"
+  stroke-linecap="round"
+>
+  <circle cx="12" cy="12" r="3.4" />
+  <path
+    d="M12 4v2.5M12 17.5V20M4 12h2.5M17.5 12H20M6.3 6.3l1.8 1.8M15.9 15.9l1.7 1.7M17.7 6.3l-1.8 1.8M8.1 15.9l-1.7 1.7"
+  />
+</svg>`;
 /**
- * Build a toolbar toggle that flips a boolean flag on every selected facets
- * diagram: `active` reflects the current state, `run` flips it (with an undo
- * checkpoint).
+ * Build a toolbar toggle that flips a boolean flag on every selected element
+ * of the given class: `active` reflects the current state, `run` flips it
+ * (with an undo checkpoint).
  */
-function booleanToggle(id, tooltip, icon, prop) {
+function booleanToggle(Model, id, tooltip, icon, prop) {
+    const models = (ctx) => ctx.getSurfaceModelsByType(Model);
     return {
         id,
         tooltip,
         icon,
         active(ctx) {
-            const models = ctx.getSurfaceModelsByType(EdgyFacetsElementModel);
-            return models.length > 0 && models.every(model => model[prop]);
+            const all = models(ctx);
+            return all.length > 0 && all.every(model => model[prop]);
         },
         run(ctx) {
-            const models = ctx.getSurfaceModelsByType(EdgyFacetsElementModel);
-            if (!models.length)
+            const all = models(ctx);
+            if (!all.length)
                 return;
-            const enable = !models.every(model => model[prop]);
+            const enable = !all.every(model => model[prop]);
             ctx.std.store.captureSync();
             const crud = ctx.std.get(EdgelessCRUDIdentifier);
-            for (const model of models) {
-                crud.updateElement(model.id, { [prop]: enable });
+            for (const model of all) {
+                crud.updateElement(model.id, {
+                    [prop]: enable,
+                });
             }
         },
     };
 }
 export const edgyToolbarConfig = {
     actions: [
-        booleanToggle('a.toggle-resize', 'Enable / lock resizing', ResizeIcon, 'resizeEnabled'),
-        booleanToggle('b.toggle-labels', 'Show / hide facet labels', LabelsIcon, 'showLabels'),
+        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'),
     ],
     when: ctx => ctx.getSurfaceModelsByType(EdgyFacetsElementModel).length > 0,
 };
@@ -68,3 +87,14 @@ export const edgyToolbarExtension = ToolbarModuleExtension({
     id: BlockFlavourIdentifier('affine:surface:edgy'),
     config: edgyToolbarConfig,
 });
+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'),
+    ],
+    when: ctx => ctx.getSurfaceModelsByType(EdgyBoardElementModel).length > 0,
+};
+export const edgyBoardToolbarExtension = ToolbarModuleExtension({
+    id: BlockFlavourIdentifier('affine:surface:edgyBoard'),
+    config: edgyBoardToolbarConfig,
+});

package/dist/toolbar/edgy-menu.d.ts

@@ -1,30 +1,12 @@
 import { EmptyTool } from '@formicoidea/labre-core/gfx/pointer';
-import { LitElement } from 'lit';
-declare const EdgelessEdgyMenu_base: typeof LitElement & import("@formicoidea/labre-core/_pkgs/global/utils").Constructor<import("@formicoidea/labre-core/_pkgs/affine-widget-edgeless-toolbar").EdgelessToolbarToolClass>;
+import { EdgelessCommandMenu } from '@formicoidea/labre-core/widgets/edgeless-toolbar';
 /**
- * The popover above the toolbar for the EDGY toolbox. Items create the facets
- * diagram (the on-click Venn) and the four base-element prefab shapes — all
- * native shapes so they stay editable.
+ * The popover above the toolbar for the EDGY toolbox. Since PF3 it declares
+ * nothing: {@link EdgelessCommandMenu} renders `edgyCommands` for the
+ * `senior-menu` surface, and the same seven artefacts are now reachable from
+ * Settings › Shortcuts, which never saw them before (`docs/adr/0008`).
  */
-export declare class EdgelessEdgyMenu extends EdgelessEdgyMenu_base {
-    static styles: import("lit").CSSResult;
+export declare class EdgelessEdgyMenu extends EdgelessCommandMenu {
+    protected owner: "edgy";
     type: typeof EmptyTool;
-    /** Create the Enterprise Design Facets diagram centred on the viewport. */
-    private _createFacets;
-    /** Add a native free-text label (Inter), used for the People node. */
-    private _addLabel;
-    private _group;
-    /** Shared props for an EDGY node shape. */
-    private _baseShapeProps;
-    /** Create a box base element (outcome / object / activity) with inner text. */
-    private _createBox;
-    /**
-     * Create the People base element: an (invisible) ellipse decorated with the
-     * person glyph by the renderer, plus a native text label below, grouped.
-     */
-    private _createPeople;
-    private _finish;
-    private _track;
-    render(): import("lit-html").TemplateResult<1>;
 }
-export {};

package/dist/toolbar/edgy-menu.js

@@ -1,194 +1,15 @@
-import { DefaultTool } from '@formicoidea/labre-core/blocks/surface';
-import { createGroupCommand } from '@formicoidea/labre-core/gfx/group';
 import { EmptyTool } from '@formicoidea/labre-core/gfx/pointer';
-import { FontFamily, ShapeStyle } from '@formicoidea/labre-core/model';
-import { TelemetryProvider } from '@formicoidea/labre-core/shared/services';
-import { EdgelessToolbarToolMixin } from '@formicoidea/labre-core/widgets/edgeless-toolbar';
-import { Bound } from '@formicoidea/labre-core/global/gfx';
-import { css, html, LitElement } from 'lit';
-import { REF_H, REF_W } from '../consts';
-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';
-import { edgyActivityIcon, edgyFacetsIcon, edgyObjectIcon, edgyOutcomeIcon, edgyPeopleIcon, } from './icons';
-/** Default facets-diagram size (REF aspect, scaled up so it reads on canvas). */
-const FACETS_SCALE = 1.5;
-/** Height of the native People free-text label. */
-const LABEL_H = LABEL_FONT_SIZE + 8;
+import { EdgelessCommandMenu } from '@formicoidea/labre-core/widgets/edgeless-toolbar';
 /**
- * The popover above the toolbar for the EDGY toolbox. Items create the facets
- * diagram (the on-click Venn) and the four base-element prefab shapes — all
- * native shapes so they stay editable.
+ * The popover above the toolbar for the EDGY toolbox. Since PF3 it declares
+ * nothing: {@link EdgelessCommandMenu} renders `edgyCommands` for the
+ * `senior-menu` surface, and the same seven artefacts are now reachable from
+ * Settings › Shortcuts, which never saw them before (`docs/adr/0008`).
  */
-export class EdgelessEdgyMenu extends EdgelessToolbarToolMixin(LitElement) {
+export class EdgelessEdgyMenu extends EdgelessCommandMenu {
     constructor() {
         super(...arguments);
+        this.owner = 'edgy';
         this.type = EmptyTool;
     }
-    static { this.styles = css `
-    :host {
-      display: flex;
-      z-index: -1;
-      justify-content: center;
-    }
-    .menu-content {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-    .button-group-container {
-      display: flex;
-      align-items: center;
-      gap: 14px;
-      fill: var(--affine-icon-color);
-    }
-    .button-group-container svg {
-      width: 24px;
-      height: 24px;
-    }
-  `; }
-    /** Create the Enterprise Design Facets diagram centred on the viewport. */
-    _createFacets() {
-        const { gfx } = this;
-        if (!gfx.surface)
-            return;
-        const width = REF_W * FACETS_SCALE;
-        const height = REF_H * FACETS_SCALE;
-        const { centerX, centerY } = gfx.viewport;
-        const id = gfx.surface.addElement({
-            type: 'edgy',
-            xywh: new Bound(centerX - width / 2, centerY - height / 2, width, height).serialize(),
-        });
-        this._track('facets');
-        this._finish(id);
-    }
-    /** Add a native free-text label (Inter), used for the People node. */
-    _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(),
-        });
-    }
-    _group(ids) {
-        const [, result] = this.edgeless.std.command.exec(createGroupCommand, {
-            elements: ids,
-        });
-        return result.groupId || ids[0];
-    }
-    /** Shared props for an EDGY node shape. */
-    _baseShapeProps(kind) {
-        return {
-            type: 'edgyNode',
-            kind,
-            filled: true,
-            fillColor: NODE_FILL,
-            strokeColor: NODE_STROKE,
-            shapeStyle: ShapeStyle.General,
-            roughness: 0,
-        };
-    }
-    /** Create a box base element (outcome / object / activity) with inner text. */
-    _createBox(kind) {
-        const surface = this.gfx.surface;
-        if (!surface)
-            return;
-        const { w, h } = NODE_SIZE[kind];
-        const { centerX: cx, centerY: cy } = this.gfx.viewport;
-        const shapeType = kind === 'activity' ? 'polygon' : 'rect';
-        const id = surface.addElement({
-            ...this._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(),
-        });
-        this._track(`node:${kind}`);
-        this._finish(id);
-    }
-    /**
-     * Create the People base element: an (invisible) ellipse decorated with the
-     * person glyph by the renderer, plus a native text label below, grouped.
-     */
-    _createPeople() {
-        const surface = this.gfx.surface;
-        if (!surface)
-            return;
-        const { w, h } = NODE_SIZE.people;
-        const { centerX: cx, centerY: cy } = this.gfx.viewport;
-        const nodeId = surface.addElement({
-            ...this._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 = this._addLabel(surface, NODE_LABEL.people, cx - 60, cy + h / 2 + LABEL_GAP);
-        this._track('node:people');
-        this._finish(this._group([nodeId, labelId]));
-    }
-    _finish(id) {
-        const { gfx } = this;
-        gfx.doc.captureSync();
-        gfx.tool.setTool(DefaultTool);
-        gfx.selection.set({ elements: [id], editing: false });
-        // Keep the palette open (native sub-menu behaviour).
-    }
-    _track(element) {
-        this.edgeless.std.getOptional(TelemetryProvider)?.track('FrameworkElementAdded', {
-            framework: 'edgy',
-            element,
-            page: 'whiteboard editor',
-            segment: 'edgy toolbox',
-            module: 'edgy menu',
-        });
-    }
-    render() {
-        return html `
-      <edgeless-slide-menu>
-        <div class="menu-content">
-          <div class="button-group-container">
-            <edgeless-tool-icon-button
-              .tooltip=${'Enterprise Design facets'}
-              @click=${this._createFacets}
-            >
-              ${edgyFacetsIcon}
-            </edgeless-tool-icon-button>
-            <edgeless-tool-icon-button
-              .tooltip=${'People'}
-              @click=${this._createPeople}
-            >
-              ${edgyPeopleIcon}
-            </edgeless-tool-icon-button>
-            <edgeless-tool-icon-button
-              .tooltip=${'Outcome'}
-              @click=${() => this._createBox('outcome')}
-            >
-              ${edgyOutcomeIcon}
-            </edgeless-tool-icon-button>
-            <edgeless-tool-icon-button
-              .tooltip=${'Object'}
-              @click=${() => this._createBox('object')}
-            >
-              ${edgyObjectIcon}
-            </edgeless-tool-icon-button>
-            <edgeless-tool-icon-button
-              .tooltip=${'Activity'}
-              @click=${() => this._createBox('activity')}
-            >
-              ${edgyActivityIcon}
-            </edgeless-tool-icon-button>
-          </div>
-        </div>
-      </edgeless-slide-menu>
-    `;
-    }
 }

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

@@ -3,7 +3,7 @@ import { EmptyTool } from '@formicoidea/labre-core/gfx/pointer';
 import { 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';
+import { edgyToolbarIcon } from './icons.js';
 /**
  * Main toolbar button (colored facets glyph) that opens the EDGY toolbox
  * sub-menu above the toolbar. Mirrors the Wardley senior button.

package/dist/toolbar/icons.d.ts

@@ -2,6 +2,10 @@
 export declare const edgyToolbarIcon: import("lit-html").TemplateResult<2>;
 /** Menu icon — the facets diagram (colored mini Venn). */
 export declare const edgyFacetsIcon: import("lit-html").TemplateResult<2>;
+/** Menu icon — the dynamic diagram: mini Venn + three connected white shapes. */
+export declare const edgyDynamicIcon: import("lit-html").TemplateResult<2>;
+/** Menu icon — the blank board: rounded rect + connected facet-colored shapes. */
+export declare const edgyBoardIcon: import("lit-html").TemplateResult<2>;
 /** People — person glyph (official Icon-People), uses currentColor. */
 export declare const edgyPeopleIcon: import("lit-html").TemplateResult<2>;
 /** Outcome — lightly rounded rectangle. */

package/dist/toolbar/icons.js

@@ -13,6 +13,24 @@ export const edgyFacetsIcon = svg `<svg width="24" height="24" viewBox="0 0 24 2
   <circle cx="14.5" cy="10" r="6" fill="#034cee" opacity="0.92"/>
   <circle cx="12" cy="14.5" r="6" fill="#ff0056" opacity="0.92"/>
 </svg>`;
+/** Menu icon — the dynamic diagram: mini Venn + three connected white shapes. */
+export const edgyDynamicIcon = svg `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="9.5" cy="10" r="6" fill="#00ea4e" opacity="0.92"/>
+  <circle cx="14.5" cy="10" r="6" fill="#034cee" opacity="0.92"/>
+  <circle cx="12" cy="14.5" r="6" fill="#ff0056" opacity="0.92"/>
+  <path d="M8.5 8.5 L15.5 8.5 M8.5 8.5 L12 16 M15.5 8.5 L12 16" stroke="#fff" stroke-width="1.3"/>
+  <rect x="6.9" y="6.9" width="3.2" height="3.2" fill="#fff"/>
+  <circle cx="15.5" cy="8.5" r="1.7" fill="#fff"/>
+  <path d="M10.4 14.9 H12.9 L14 16 L12.9 17.1 H10.4 Z" fill="#fff"/>
+</svg>`;
+/** Menu icon — the blank board: rounded rect + connected facet-colored shapes. */
+export const edgyBoardIcon = svg `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="3" y="4.5" width="18" height="15" rx="2.5" stroke="currentColor" stroke-width="1.4"/>
+  <path d="M8.3 9 L15.7 9 M8.3 9 L12 15.2 M15.7 9 L12 15.2" stroke="currentColor" stroke-width="1.1"/>
+  <rect x="6.8" y="7.5" width="3" height="3" fill="#00ea4e"/>
+  <circle cx="15.7" cy="9" r="1.7" fill="#034cee"/>
+  <path d="M10.5 14.1 H12.8 L13.9 15.2 L12.8 16.3 H10.5 Z" fill="#ff0056"/>
+</svg>`;
 /** People — person glyph (official Icon-People), uses currentColor. */
 export const edgyPeopleIcon = svg `<svg width="24" height="24" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
   <path d="m16,19c-3.308,0-6-2.692-6-6v-4c0-3.308,2.692-6,6-6s6,2.692,6,6v4c0,3.308-2.692,6-6,6Zm0-14c-2.206,0-4,1.794-4,4v4c0,2.206,1.794,4,4,4s4-1.794,4-4v-4c0-2.206-1.794-4-4-4Z"/>