@formicoidea/labre-framework-edgy 0.23.0 → 0.23.1

package/dist/node/consts.d.ts

@@ -0,0 +1,34 @@
+import type { EdgyNodeKind } from '@formicoidea/labre-core/model';
+/**
+ * Visual constants for the four EDGY base-element nodes. Each node is a NATIVE
+ * shape (ShapeElementModel-derived) so its stroke / fill / inner text are
+ * editable via the shape toolbar; these are just the pre-formatted defaults at
+ * creation.
+ */
+export declare const NODE_FILL = "#ffffff";
+export declare const NODE_STROKE = "#262626";
+export declare const NODE_STROKE_WIDTH = 2;
+/** Outcome corner radius (absolute px — a lightly rounded rectangle). */
+export declare const OUTCOME_RADIUS = 6;
+/** Right-pointing chevron, as normalized polygon vertices (Activity). */
+export declare const ACTIVITY_VERTICES: number[][];
+/** Default node sizes (model units) per kind. */
+export declare const NODE_SIZE: Record<EdgyNodeKind, {
+    w: number;
+    h: number;
+}>;
+/** Inner-text + label font (matches the diagram labels). */
+export declare const INNER_FONT_SIZE = 20;
+export declare const LABEL_FONT_SIZE = 18;
+export declare const LABEL_GAP = 8;
+/** Default inner text / label per kind. */
+export declare const NODE_LABEL: Record<EdgyNodeKind, string>;
+/**
+ * Person glyph for `kind: 'people'`, taken from the official `Icon-People.svg`
+ * (viewBox 0 0 32 32). Two filled outline rings (head + shoulders) — filling
+ * them yields the line-art person. Drawn in the node stroke color, scaled to
+ * the node and centred.
+ */
+export declare const PERSON_GLYPH_VIEWBOX = 32;
+export declare const PERSON_GLYPH_PATHS: string[];
+//# sourceMappingURL=consts.d.ts.map

package/{src/node/consts.ts → dist/node/consts.js}

@@ -1,5 +1,3 @@
-import type { EdgyNodeKind } from '@formicoidea/labre-core/model';
-
 /**
  * Visual constants for the four EDGY base-element nodes. Each node is a NATIVE
  * shape (ShapeElementModel-derived) so its stroke / fill / inner text are
@@ -9,40 +7,34 @@ import type { EdgyNodeKind } from '@formicoidea/labre-core/model';
 export const NODE_FILL = '#ffffff';
 export const NODE_STROKE = '#262626';
 export const NODE_STROKE_WIDTH = 2;
-
 /** Outcome corner radius (absolute px — a lightly rounded rectangle). */
 export const OUTCOME_RADIUS = 6;
-
 /** Right-pointing chevron, as normalized polygon vertices (Activity). */
-export const ACTIVITY_VERTICES: number[][] = [
-  [0, 0],
-  [0.8, 0],
-  [1, 0.5],
-  [0.8, 1],
-  [0, 1],
+export const ACTIVITY_VERTICES = [
+    [0, 0],
+    [0.8, 0],
+    [1, 0.5],
+    [0.8, 1],
+    [0, 1],
 ];
-
 /** Default node sizes (model units) per kind. */
-export const NODE_SIZE: Record<EdgyNodeKind, { w: number; h: number }> = {
-  people: { w: 64, h: 64 },
-  outcome: { w: 130, h: 80 },
-  object: { w: 130, h: 80 },
-  activity: { w: 140, h: 80 },
+export const NODE_SIZE = {
+    people: { w: 64, h: 64 },
+    outcome: { w: 130, h: 80 },
+    object: { w: 130, h: 80 },
+    activity: { w: 140, h: 80 },
 };
-
 /** Inner-text + label font (matches the diagram labels). */
 export const INNER_FONT_SIZE = 20;
 export const LABEL_FONT_SIZE = 18;
 export const LABEL_GAP = 8;
-
 /** Default inner text / label per kind. */
-export const NODE_LABEL: Record<EdgyNodeKind, string> = {
-  people: 'People',
-  outcome: 'Outcome',
-  object: 'Object',
-  activity: 'Activity',
+export const NODE_LABEL = {
+    people: 'People',
+    outcome: 'Outcome',
+    object: 'Object',
+    activity: 'Activity',
 };
-
 /**
  * Person glyph for `kind: 'people'`, taken from the official `Icon-People.svg`
  * (viewBox 0 0 32 32). Two filled outline rings (head + shoulders) — filling
@@ -51,6 +43,7 @@ export const NODE_LABEL: Record<EdgyNodeKind, string> = {
  */
 export const PERSON_GLYPH_VIEWBOX = 32;
 export const PERSON_GLYPH_PATHS = [
-  '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',
-  'm29,30H3v-3.5c0-3.308,2.692-6,6-6h14c3.308,0,6,2.692,6,6v3.5Zm-24-2h22v-1.5c0-2.206-1.794-4-4-4h-14c-2.206,0-4,1.794-4,4v1.5Z',
+    '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',
+    'm29,30H3v-3.5c0-3.308,2.692-6,6-6h14c3.308,0,6,2.692,6,6v3.5Zm-24-2h22v-1.5c0-2.206-1.794-4-4-4h-14c-2.206,0-4,1.794-4,4v1.5Z',
 ];
+//# sourceMappingURL=consts.js.map

package/dist/node/node-renderer.d.ts

@@ -0,0 +1,14 @@
+import { type ElementRenderer } from '@formicoidea/labre-core/blocks/surface';
+import { type EdgyNodeElementModel } from '@formicoidea/labre-core/model';
+/**
+ * Renderer for an EDGY base-element node. The shape body (rounded rect / rect /
+ * chevron polygon / ellipse) is drawn by REUSING the native shape renderer — so
+ * stroke width, colors, inner text and theme behave exactly like a native shape.
+ * Only `people` is decorated: an inscribed person glyph (the official
+ * `Icon-People` paths) drawn on top in the node's (editable) stroke color.
+ */
+export declare const edgyNode: ElementRenderer<EdgyNodeElementModel>;
+export declare const EdgyNodeRendererExtension: import("@formicoidea/labre-core/store").ExtensionType & {
+    identifier: import("@formicoidea/labre-core/global/di").ServiceIdentifier<ElementRenderer<EdgyNodeElementModel>>;
+};
+//# sourceMappingURL=node-renderer.d.ts.map

package/dist/node/node-renderer.js

@@ -0,0 +1,40 @@
+import { ElementRendererExtension, } from '@formicoidea/labre-core/blocks/surface';
+import { shape as shapeRenderer } from '@formicoidea/labre-core/gfx/shape';
+import { DefaultTheme } from '@formicoidea/labre-core/model';
+import { PERSON_GLYPH_PATHS, PERSON_GLYPH_VIEWBOX } from './consts';
+/**
+ * Renderer for an EDGY base-element node. The shape body (rounded rect / rect /
+ * chevron polygon / ellipse) is drawn by REUSING the native shape renderer — so
+ * stroke width, colors, inner text and theme behave exactly like a native shape.
+ * Only `people` is decorated: an inscribed person glyph (the official
+ * `Icon-People` paths) drawn on top in the node's (editable) stroke color.
+ */
+export const edgyNode = (model, ctx, matrix, renderer, rc, bound) => {
+    const [, , w, h] = model.deserializedXYWH;
+    const cx = w / 2;
+    const cy = h / 2;
+    // Capture the element-local transform BEFORE the shape renderer mutates the
+    // matrix, so the glyph can be drawn in the same space afterwards.
+    const glyphMatrix = DOMMatrix.fromMatrix(matrix)
+        .translateSelf(cx, cy)
+        .rotateSelf(model.rotate)
+        .translateSelf(-cx, -cy);
+    // Native shape (fill / stroke / inner text / theme handled natively).
+    shapeRenderer(model, ctx, matrix, renderer, rc, bound);
+    if (model.kind !== 'people')
+        return;
+    const color = renderer.getColorValue(model.strokeColor, DefaultTheme.shapeStrokeColor, true);
+    // ── Person glyph (Icon-People), scaled to the node and centred ──────
+    const target = Math.min(w, h) * 0.8;
+    const s = target / PERSON_GLYPH_VIEWBOX;
+    ctx.setTransform(glyphMatrix);
+    ctx.translate(cx, cy);
+    ctx.scale(s, s);
+    ctx.translate(-PERSON_GLYPH_VIEWBOX / 2, -PERSON_GLYPH_VIEWBOX / 2);
+    ctx.fillStyle = color;
+    for (const d of PERSON_GLYPH_PATHS) {
+        ctx.fill(new Path2D(d));
+    }
+};
+export const EdgyNodeRendererExtension = ElementRendererExtension('edgyNode', edgyNode);
+//# sourceMappingURL=node-renderer.js.map

package/dist/node/node-view.d.ts

@@ -0,0 +1,16 @@
+import { type EdgyNodeElementModel } from '@formicoidea/labre-core/model';
+import { GfxElementModelView } from '@formicoidea/labre-core/std/gfx';
+/**
+ * View for an EDGY base-element node. Registering it ensures `gfx.view.get(model)`
+ * returns a view (required so move / select / connector interactions work).
+ *
+ * EDGY nodes are native shapes, so we reuse the shape inner-text editor: a
+ * double-click mounts the editable text overlay (`mountShapeTextEditor`), exactly
+ * like a native shape. We deliberately do NOT inherit the polygon vertex-editing
+ * overlay (the Activity chevron should keep its shape).
+ */
+export declare class EdgyNodeView extends GfxElementModelView<EdgyNodeElementModel> {
+    static type: string;
+    onCreated(): void;
+}
+//# sourceMappingURL=node-view.d.ts.map

package/{src/node/node-view.ts → dist/node/node-view.js}

@@ -1,10 +1,6 @@
 import { mountShapeTextEditor } from '@formicoidea/labre-core/gfx/shape';
-import {
-  type EdgyNodeElementModel,
-  ShapeElementModel,
-} from '@formicoidea/labre-core/model';
+import { ShapeElementModel, } from '@formicoidea/labre-core/model';
 import { GfxElementModelView } from '@formicoidea/labre-core/std/gfx';
-
 /**
  * View for an EDGY base-element node. Registering it ensures `gfx.view.get(model)`
  * returns a view (required so move / select / connector interactions work).
@@ -14,20 +10,18 @@ import { GfxElementModelView } from '@formicoidea/labre-core/std/gfx';
  * like a native shape. We deliberately do NOT inherit the polygon vertex-editing
  * overlay (the Activity chevron should keep its shape).
  */
-export class EdgyNodeView extends GfxElementModelView<EdgyNodeElementModel> {
-  static override type: string = 'edgyNode';
-
-  override onCreated(): void {
-    super.onCreated();
-    this.on('dblclick', () => {
-      const edgeless = this.std.view.getBlock(this.std.store.root!.id);
-      if (
-        edgeless &&
-        !this.model.isLocked() &&
-        this.model instanceof ShapeElementModel
-      ) {
-        mountShapeTextEditor(this.model, edgeless);
-      }
-    });
-  }
+export class EdgyNodeView extends GfxElementModelView {
+    static { this.type = 'edgyNode'; }
+    onCreated() {
+        super.onCreated();
+        this.on('dblclick', () => {
+            const edgeless = this.std.view.getBlock(this.std.store.root.id);
+            if (edgeless &&
+                !this.model.isLocked() &&
+                this.model instanceof ShapeElementModel) {
+                mountShapeTextEditor(this.model, edgeless);
+            }
+        });
+    }
 }
+//# sourceMappingURL=node-view.js.map

package/dist/templates/index.d.ts

@@ -0,0 +1,3 @@
+import { type TemplateCategory } from '@formicoidea/labre-core/gfx/template';
+export declare const edgyTemplateCategory: TemplateCategory;
+//# sourceMappingURL=index.d.ts.map

package/dist/templates/index.js

@@ -0,0 +1,210 @@
+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';
+// EDGY facet palette (header / pale sub-card).
+const C = {
+    identity: ['#1ec873', '#9fe6c2'],
+    organisation: ['#4fd0ea', '#c2eef8'],
+    architecture: ['#2f6ff0', '#b3c8f7'],
+    product: ['#cf8cff', '#e7ccff'],
+    experience: ['#f5246e', '#ffc0d4'],
+    brand: ['#eeba51', '#f7e1ad'],
+};
+const JOURNEY_PINK = '#f3a3c0';
+// ── element helpers ───────────────────────────────────────────────────
+function rect(x, y, w, h, opts = {}) {
+    const el = {
+        type: 'shape',
+        shapeType: 'rect',
+        filled: true,
+        fillColor: opts.fill ?? '#ffffff',
+        strokeColor: opts.stroke ?? NODE_STROKE,
+        strokeWidth: opts.sw ?? NODE_STROKE_WIDTH,
+        shapeStyle: ShapeStyle.General,
+        roughness: 0,
+        radius: opts.radius ?? 0,
+        xywh: `[${x},${y},${w},${h}]`,
+    };
+    if (opts.text != null) {
+        el.text = surfaceText(opts.text);
+        el.color = opts.textColor ?? NODE_STROKE;
+        el.fontFamily = FontFamily.Inter;
+        el.fontSize = opts.fontSize ?? 16;
+        el.textAlign = TextAlign.Center;
+    }
+    return el;
+}
+/** An EDGY node (kind drives the native shape): outcome/object box, people, activity chevron. */
+function enode(kind, x, y, w, h, opts = {}) {
+    const el = {
+        type: 'edgyNode',
+        kind,
+        filled: true,
+        fillColor: opts.fill ?? NODE_FILL,
+        strokeColor: NODE_STROKE,
+        strokeWidth: kind === 'people' ? 0 : NODE_STROKE_WIDTH,
+        shapeStyle: ShapeStyle.General,
+        roughness: 0,
+        shapeType: kind === 'people' ? 'ellipse' : kind === 'activity' ? 'polygon' : 'rect',
+        radius: kind === 'outcome' ? OUTCOME_RADIUS : 0,
+        xywh: `[${x},${y},${w},${h}]`,
+    };
+    if (kind === 'activity')
+        el.vertices = ACTIVITY_VERTICES;
+    if (opts.text != null) {
+        el.text = surfaceText(opts.text);
+        el.color = opts.textColor ?? NODE_STROKE;
+        el.fontFamily = FontFamily.Inter;
+        el.fontSize = opts.fontSize ?? INNER_FONT_SIZE;
+        el.textAlign = TextAlign.Center;
+    }
+    return el;
+}
+function label(x, y, w, h, str, opts = {}) {
+    return {
+        type: 'text',
+        text: surfaceText(str),
+        color: opts.color ?? NODE_STROKE,
+        fontFamily: FontFamily.Inter,
+        fontSize: opts.fontSize ?? 16,
+        textAlign: opts.align ?? TextAlign.Center,
+        xywh: `[${x},${y},${w},${h}]`,
+    };
+}
+function line(x1, y1, x2, y2, opts = {}) {
+    return {
+        type: 'connector',
+        mode: ConnectorMode.Orthogonal,
+        stroke: NODE_STROKE,
+        strokeWidth: opts.sw ?? 2,
+        strokeStyle: opts.dash ? StrokeStyle.Dash : StrokeStyle.Solid,
+        frontEndpointStyle: PointStyle.None,
+        rearEndpointStyle: opts.arrow ? PointStyle.Triangle : PointStyle.None,
+        source: { position: [x1, y1] },
+        target: { position: [x2, y2] },
+    };
+}
+// ── Facets overview (six facets, sub-cards, facets/intersections) ─────
+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 });
+    };
+    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 });
+    };
+    // lower facets first (drawn behind the tall ones at the overlaps)
+    low('organisation', 240, 'Organisation');
+    low('product', 664, 'Product');
+    low('brand', 1088, 'Brand');
+    tall('identity', 40, 'Identity', ['Purpose', 'Content', 'Story']);
+    tall('architecture', 464, 'Architecture', ['Capability', 'Asset', 'Process']);
+    tall('experience', 888, 'Experience', ['Task', 'Channel', 'Journey']);
+    out.fLabel = label(464, 80, 192, 28, 'Facets', { fontSize: 18 });
+    out.fBar = line(136, 120, 984, 120);
+    out.iLabel = label(664, 740, 192, 28, 'Intersections', { fontSize: 18 });
+    out.iBar = line(336, 728, 1184, 728);
+    return out;
+}
+// ── 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 });
+    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 }),
+        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' }),
+        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),
+    };
+}
+// ── 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 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 });
+    });
+    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 });
+    const P = C.experience[1], B = C.architecture[1];
+    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'),
+        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 }),
+    });
+    return out;
+}
+// ── Organisation chart ────────────────────────────────────────────────
+function orgChart() {
+    const cyan = C.organisation[0];
+    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'),
+        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),
+    };
+}
+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) };
+}
+export const edgyTemplateCategory = {
+    name: 'EDGY',
+    templates: [
+        tpl('Facets overview', `<svg ${ATTRS} fill="none"><rect x="6" y="20" width="18" height="46" rx="3" fill="#1ec873"/><rect x="46" y="20" width="18" height="46" rx="3" fill="#2f6ff0"/><rect x="86" y="20" width="18" height="46" rx="3" fill="#f5246e"/><rect x="26" y="30" width="18" height="40" rx="3" fill="#4fd0ea"/><rect x="66" y="30" width="18" height="40" rx="3" fill="#cf8cff"/><rect x="106" y="30" width="18" height="40" rx="3" fill="#eeba51"/></svg>`, facetsOverview()),
+        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('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' }))),
+    ],
+};
+//# sourceMappingURL=index.js.map

package/dist/toolbar/config.d.ts

@@ -0,0 +1,20 @@
+import { type ToolbarContext } from '@formicoidea/labre-core/shared/services';
+import { type TemplateResult } from 'lit';
+export declare const edgyToolbarConfig: {
+    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 edgyToolbarExtension: import("@formicoidea/labre-core/store").ExtensionType;
+//# sourceMappingURL=config.d.ts.map

package/dist/toolbar/config.js

@@ -0,0 +1,71 @@
+import { EdgelessCRUDIdentifier } from '@formicoidea/labre-core/blocks/surface';
+import { 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';
+const ResizeIcon = html `<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="1.6"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M9 5H5v4M15 19h4v-4" />
+  <path d="M5 5l6 6M19 19l-6-6" />
+</svg>`;
+/** Tag — show / hide the facet name labels. */
+const LabelsIcon = html `<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="1.6"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <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>`;
+/**
+ * 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).
+ */
+function booleanToggle(id, tooltip, icon, prop) {
+    return {
+        id,
+        tooltip,
+        icon,
+        active(ctx) {
+            const models = ctx.getSurfaceModelsByType(EdgyFacetsElementModel);
+            return models.length > 0 && models.every(model => model[prop]);
+        },
+        run(ctx) {
+            const models = ctx.getSurfaceModelsByType(EdgyFacetsElementModel);
+            if (!models.length)
+                return;
+            const enable = !models.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 });
+            }
+        },
+    };
+}
+export const edgyToolbarConfig = {
+    actions: [
+        booleanToggle('a.toggle-resize', 'Enable / lock resizing', ResizeIcon, 'resizeEnabled'),
+        booleanToggle('b.toggle-labels', 'Show / hide facet labels', LabelsIcon, 'showLabels'),
+    ],
+    when: ctx => ctx.getSurfaceModelsByType(EdgyFacetsElementModel).length > 0,
+};
+export const edgyToolbarExtension = ToolbarModuleExtension({
+    id: BlockFlavourIdentifier('affine:surface:edgy'),
+    config: edgyToolbarConfig,
+});
+//# sourceMappingURL=config.js.map

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

@@ -0,0 +1,31 @@
+import { EmptyTool } from '@formicoidea/labre-core/gfx/pointer';
+import { LitElement } from 'lit';
+declare const EdgelessEdgyMenu_base: typeof LitElement & import("@formicoidea/labre-core/global/utils").Constructor<import("@formicoidea/labre-core/widgets/edgeless-toolbar").EdgelessToolbarToolClass>;
+/**
+ * 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.
+ */
+export declare class EdgelessEdgyMenu extends EdgelessEdgyMenu_base {
+    static styles: import("lit").CSSResult;
+    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 {};
+//# sourceMappingURL=edgy-menu.d.ts.map