@formicoidea/labre-framework-wardley 0.29.1 → 0.30.1

package/dist/actions.d.ts

@@ -0,0 +1,74 @@
+import { type WardleyBgVariant } from '@formicoidea/labre-core/model';
+import type { GfxController } from '@formicoidea/labre-core/std/gfx';
+/**
+ * Standalone creation/activation actions for the Wardley toolbox. They are
+ * invoked from both the toolbar menu ({@link EdgelessWardleyMenu}) and the
+ * wardley keyboard shortcuts, so they only depend on the {@link GfxController}.
+ */
+/** Where the action was triggered from — feeds the telemetry payload. */
+export interface WardleyActionSource {
+    segment: string;
+    module: string;
+}
+export declare const WARDLEY_SHORTCUT_SOURCE: WardleyActionSource;
+/**
+ * The single-circle node flavours: one connectable ellipse + a label to its
+ * right, grouped. The glyph itself (anchor silhouette, ecosystem hatching,
+ * method inner circle) is drawn by the node renderer from `kind`.
+ */
+declare const NODE_PRESETS: {
+    readonly component: {
+        readonly d: 18;
+        readonly fill: "#ffffff";
+        readonly label: string;
+    };
+    readonly anchor: {
+        readonly d: 18;
+        readonly fill: "#ffffff";
+        readonly label: string;
+    };
+    readonly ecosystem: {
+        readonly d: 40;
+        readonly fill: "#ffffff";
+        readonly label: "Ecosystem";
+    };
+    readonly method: {
+        readonly d: 35;
+        readonly fill: "#d9d9d9";
+        readonly label: "Component";
+    };
+};
+export type WardleyNodeKind = keyof typeof NODE_PRESETS;
+/** Create a wardley map background of the given variant, viewport-centered. */
+export declare function createWardleyBackground(gfx: GfxController, variant?: WardleyBgVariant, source?: WardleyActionSource): void;
+/**
+ * Create a single-circle node (component / anchor / ecosystem / method):
+ * one connectable native ellipse + a label to its right, grouped so they
+ * move together (enter the group to reposition / edit the label).
+ */
+export declare function createWardleyNode(gfx: GfxController, kind: WardleyNodeKind, source?: WardleyActionSource): void;
+/** Create an inertia bar (filled black rect). */
+export declare function createWardleyInertia(gfx: GfxController, source?: WardleyActionSource): void;
+/**
+ * Create a pipeline: a wide thin native rect body (white semi-transparent,
+ * NON-connectable) + a node-sized square handle straddling its top edge (the
+ * only connection point, center anchor) + a native text label. The handle and
+ * label are grouped, then grouped again with the body so the whole pipeline
+ * moves as one. Pure composition of native elements — no custom type / view.
+ */
+export declare function createWardleyPipeline(gfx: GfxController, source?: WardleyActionSource): void;
+/**
+ * Create a market: a large thin-bordered circle (the connectable market node)
+ * containing 3 small thick-bordered component nodes wired into a triangle by
+ * native attached connectors (thin, dark, no arrows — they auto-route between
+ * the node centers and follow on move/resize). A label sits to the right and
+ * everything is grouped into one object.
+ */
+export declare function createWardleyMarket(gfx: GfxController, source?: WardleyActionSource): void;
+/**
+ * Activate the native connector tool, pre-styled for a Wardley link (grey,
+ * solid, no arrow) or evolution arrow (red, dashed, FILLED triangle). The
+ * user then draws from one node to another (endpoints attach to centers).
+ */
+export declare function activateWardleyConnector(gfx: GfxController, kind: 'link' | 'arrow', source?: WardleyActionSource): void;
+export {};

package/dist/actions.js

@@ -0,0 +1,289 @@
+import { DefaultTool } from '@formicoidea/labre-core/blocks/surface';
+import { ConnectorTool } from '@formicoidea/labre-core/gfx/connector';
+import { createGroupCommand } from '@formicoidea/labre-core/gfx/group';
+import { ConnectorMode, FontFamily, PointStyle, ShapeStyle, StrokeStyle, TextFitMode, } from '@formicoidea/labre-core/model';
+import { EditPropsStore, TelemetryProvider, } from '@formicoidea/labre-core/shared/services';
+import { Bound } from '@formicoidea/labre-core/global/gfx';
+import { REF_WIDTH } from './consts';
+import { ECOSYSTEM_LABEL, ECOSYSTEM_SIZE, HANDLE_SIZE, INERTIA_COLOR, INERTIA_SIZE, LABEL_DEFAULT, LABEL_FONT_SIZE, LABEL_GAP, LINK_GREY, LINK_STROKE_WIDTH, MARKET_DOT_RING, MARKET_DOT_SIZE, MARKET_DOT_STROKE_WIDTH, MARKET_LABEL, MARKET_LINK_COLOR, MARKET_LINK_WIDTH, MARKET_SIZE, METHOD_FILL, METHOD_LABEL, METHOD_SIZE, NODE_FILL, NODE_SIZE, NODE_STROKE, NODE_STROKE_WIDTH, PIPELINE_FILL, PIPELINE_HEIGHT, PIPELINE_LABEL, PIPELINE_WIDTH, WARDLEY_RED, } from './node/consts';
+const TOOLBOX_SOURCE = {
+    segment: 'wardley toolbox',
+    module: 'wardley menu',
+};
+export const WARDLEY_SHORTCUT_SOURCE = {
+    segment: 'wardley toolbox',
+    module: 'keyboard shortcut',
+};
+/**
+ * Per-variant default label overrides applied at creation (all remain editable
+ * afterwards via the inline editor / toggles). The gradient itself is driven by
+ * `variant` in the renderer.
+ */
+const BACKGROUND_VARIANT_DEFAULTS = {
+    classic: {},
+    // The Y axis becomes "Opportunity"; phase labels keep the classic defaults.
+    opportunity: {
+        yAxisTitle: 'Opportunity',
+        showVisibilityLabels: false,
+        showCornerLabels: false,
+    },
+    // The Y axis splits into Benefit (top) / Investment (bottom) around a zero
+    // line drawn by the renderer.
+    benefit: {
+        yAxisTitle: '',
+        visibilityHigh: 'Benefit',
+        visibilityLow: 'Investment',
+        showCornerLabels: false,
+    },
+    // Keeps the classic labels (Value Chain / Uncharted / Industrialized…); only
+    // the grey gradient differs.
+    'evolution-gradient': {},
+};
+/** Height of the native free-text labels (Inter, size 18). */
+const LABEL_H = LABEL_FONT_SIZE + 8;
+/**
+ * The single-circle node flavours: one connectable ellipse + a label to its
+ * right, grouped. The glyph itself (anchor silhouette, ecosystem hatching,
+ * method inner circle) is drawn by the node renderer from `kind`.
+ */
+const NODE_PRESETS = {
+    component: { d: NODE_SIZE, fill: NODE_FILL, label: LABEL_DEFAULT.component },
+    anchor: { d: NODE_SIZE, fill: NODE_FILL, label: LABEL_DEFAULT.anchor },
+    // Ecosystem: glyph = double border + hatched donut; connectors attach to
+    // this outer circle's center.
+    ecosystem: { d: ECOSYSTEM_SIZE, fill: NODE_FILL, label: ECOSYSTEM_LABEL },
+    // Method: the FILL color encodes the chosen method (editable).
+    method: { d: METHOD_SIZE, fill: METHOD_FILL, label: METHOD_LABEL },
+};
+function track(gfx, source, event, element) {
+    gfx.std.getOptional(TelemetryProvider)?.track(event, {
+        framework: 'wardley',
+        element,
+        page: 'whiteboard editor',
+        ...source,
+    });
+}
+function finish(gfx, id) {
+    gfx.doc.captureSync();
+    gfx.tool.setTool(DefaultTool);
+    gfx.selection.set({ elements: [id], editing: false });
+    // The wardley palette stays open (native sub-menu behaviour) so several
+    // Wardley objects can be added in a row; the canvas stays selectable.
+}
+/** Group elements; returns the group id (or the first id if grouping failed). */
+function group(gfx, ids) {
+    const [, result] = gfx.std.command.exec(createGroupCommand, {
+        elements: ids,
+    });
+    return result.groupId || ids[0];
+}
+/** Add a native ellipse wardley node centred on (cx, cy). */
+function addEllipseNode(surface, kind, cx, cy, d, fillColor, strokeWidth = NODE_STROKE_WIDTH) {
+    return surface.addElement({
+        type: 'wardleyNode',
+        kind,
+        shapeType: 'ellipse',
+        filled: true,
+        fillColor,
+        strokeColor: NODE_STROKE,
+        strokeWidth,
+        shapeStyle: ShapeStyle.General,
+        roughness: 0,
+        xywh: new Bound(cx - d / 2, cy - d / 2, d, d).serialize(),
+    });
+}
+/** Add a native free-text label (same Inter family as the axis labels). */
+function addLabel(surface, text, x, y, textAlign = 'left') {
+    return surface.addElement({
+        type: 'text',
+        text,
+        fontFamily: FontFamily.Inter,
+        fontSize: LABEL_FONT_SIZE,
+        color: NODE_STROKE,
+        textAlign,
+        xywh: new Bound(x, y, 120, LABEL_H).serialize(),
+    });
+}
+/** Create a wardley map background of the given variant, viewport-centered. */
+export function createWardleyBackground(gfx, variant = 'classic', source = TOOLBOX_SOURCE) {
+    if (!gfx.surface)
+        return;
+    let width = REF_WIDTH;
+    for (const el of gfx.surface.getElementsByType('wardley')) {
+        const [, , ew, eh] = el.deserializedXYWH;
+        width = Math.max(width, ew, (eh * 16) / 9);
+    }
+    const height = (width * 9) / 16;
+    const { centerX, centerY } = gfx.viewport;
+    const id = gfx.surface.addElement({
+        type: 'wardley',
+        variant,
+        ...BACKGROUND_VARIANT_DEFAULTS[variant],
+        xywh: new Bound(centerX - width / 2, centerY - height / 2, width, height).serialize(),
+    });
+    track(gfx, source, 'FrameworkElementAdded', `background:${variant}`);
+    finish(gfx, id);
+}
+/**
+ * Create a single-circle node (component / anchor / ecosystem / method):
+ * one connectable native ellipse + a label to its right, grouped so they
+ * move together (enter the group to reposition / edit the label).
+ */
+export function createWardleyNode(gfx, kind, source = TOOLBOX_SOURCE) {
+    const surface = gfx.surface;
+    if (!surface)
+        return;
+    const { d, fill, label } = NODE_PRESETS[kind];
+    const { centerX: cx, centerY: cy } = gfx.viewport;
+    const nodeId = addEllipseNode(surface, kind, cx, cy, d, fill);
+    const labelId = addLabel(surface, label, cx + d / 2 + LABEL_GAP, cy - LABEL_H / 2);
+    track(gfx, source, 'FrameworkElementAdded', `node:${kind}`);
+    finish(gfx, group(gfx, [nodeId, labelId]));
+}
+/** Create an inertia bar (filled black rect). */
+export function createWardleyInertia(gfx, source = TOOLBOX_SOURCE) {
+    if (!gfx.surface)
+        return;
+    const { w, h } = INERTIA_SIZE;
+    const { centerX, centerY } = gfx.viewport;
+    const id = gfx.surface.addElement({
+        type: 'shape',
+        shapeType: 'rect',
+        filled: true,
+        fillColor: INERTIA_COLOR,
+        strokeColor: INERTIA_COLOR,
+        strokeWidth: 0,
+        shapeStyle: ShapeStyle.General,
+        roughness: 0,
+        radius: 0,
+        // the inertia bar has a canonical size: text overflows, never deforms
+        textFitMode: TextFitMode.Overflow,
+        xywh: new Bound(centerX - w / 2, centerY - h / 2, w, h).serialize(),
+    });
+    track(gfx, source, 'FrameworkElementAdded', 'node:inertia');
+    finish(gfx, id);
+}
+/**
+ * Create a pipeline: a wide thin native rect body (white semi-transparent,
+ * NON-connectable) + a node-sized square handle straddling its top edge (the
+ * only connection point, center anchor) + a native text label. The handle and
+ * label are grouped, then grouped again with the body so the whole pipeline
+ * moves as one. Pure composition of native elements — no custom type / view.
+ */
+export function createWardleyPipeline(gfx, source = TOOLBOX_SOURCE) {
+    if (!gfx.surface)
+        return;
+    const { centerX: cx, centerY: cy } = gfx.viewport;
+    const W = PIPELINE_WIDTH;
+    const H = PIPELINE_HEIGHT;
+    const d = HANDLE_SIZE;
+    const top = cy - H / 2;
+    // Body: a WardleyNode rect, made non-connectable by `kind: 'pipeline'`.
+    const bodyId = gfx.surface.addElement({
+        type: 'wardleyNode',
+        kind: 'pipeline',
+        shapeType: 'rect',
+        filled: true,
+        fillColor: PIPELINE_FILL,
+        strokeColor: NODE_STROKE,
+        strokeWidth: NODE_STROKE_WIDTH,
+        shapeStyle: ShapeStyle.General,
+        roughness: 0,
+        radius: 0,
+        xywh: new Bound(cx - W / 2, top, W, H).serialize(),
+    });
+    // Handle: a node-sized WardleyNode square straddling the top edge. Inherits
+    // `centerAnchorOnly` so connectors attach to its center only.
+    const handleId = gfx.surface.addElement({
+        type: 'wardleyNode',
+        kind: 'handle',
+        shapeType: 'rect',
+        filled: true,
+        fillColor: NODE_FILL,
+        strokeColor: NODE_STROKE,
+        strokeWidth: NODE_STROKE_WIDTH,
+        shapeStyle: ShapeStyle.General,
+        roughness: 0,
+        radius: 0,
+        xywh: new Bound(cx - d / 2, top - d / 2, d, d).serialize(),
+    });
+    // Label centered horizontally on the pipeline, sitting ABOVE the handle.
+    const labelId = addLabel(gfx.surface, PIPELINE_LABEL, cx - 60, top - d / 2 - LABEL_H - LABEL_GAP, 'center');
+    // Nested groups: (handle + label), then (body + that group).
+    const innerId = group(gfx, [handleId, labelId]);
+    track(gfx, source, 'FrameworkElementAdded', 'node:pipeline');
+    finish(gfx, group(gfx, [bodyId, innerId]));
+}
+/**
+ * Create a market: a large thin-bordered circle (the connectable market node)
+ * containing 3 small thick-bordered component nodes wired into a triangle by
+ * native attached connectors (thin, dark, no arrows — they auto-route between
+ * the node centers and follow on move/resize). A label sits to the right and
+ * everything is grouped into one object.
+ */
+export function createWardleyMarket(gfx, source = TOOLBOX_SOURCE) {
+    const surface = gfx.surface;
+    if (!surface)
+        return;
+    const { centerX: cx, centerY: cy } = gfx.viewport;
+    const R = MARKET_SIZE / 2;
+    const rho = MARKET_DOT_RING;
+    const sin60 = Math.sqrt(3) / 2;
+    // Outer circle = the market node (connectable, center-only).
+    const circleId = addEllipseNode(surface, 'market', cx, cy, MARKET_SIZE, NODE_FILL);
+    // 3 inner component nodes (thick border, no label) at the triangle vertices.
+    const verts = [
+        [0, -rho],
+        [rho * sin60, rho / 2],
+        [-rho * sin60, rho / 2],
+    ];
+    const dotIds = verts.map(([vx, vy]) => addEllipseNode(surface, 'component', cx + vx, cy + vy, MARKET_DOT_SIZE, NODE_FILL, MARKET_DOT_STROKE_WIDTH));
+    // Triangle: 3 attached connectors (auto-route center-to-center, clipped).
+    const connIds = [
+        [dotIds[0], dotIds[1]],
+        [dotIds[1], dotIds[2]],
+        [dotIds[2], dotIds[0]],
+    ].map(([a, b]) => surface.addElement({
+        type: 'connector',
+        mode: ConnectorMode.Straight,
+        source: { id: a },
+        target: { id: b },
+        stroke: MARKET_LINK_COLOR,
+        strokeStyle: StrokeStyle.Solid,
+        strokeWidth: MARKET_LINK_WIDTH,
+        frontEndpointStyle: PointStyle.None,
+        rearEndpointStyle: PointStyle.None,
+    }));
+    const labelId = addLabel(surface, MARKET_LABEL, cx + R + LABEL_GAP, cy - LABEL_H / 2);
+    track(gfx, source, 'FrameworkElementAdded', 'node:market');
+    finish(gfx, group(gfx, [circleId, ...dotIds, ...connIds, labelId]));
+}
+/**
+ * Activate the native connector tool, pre-styled for a Wardley link (grey,
+ * solid, no arrow) or evolution arrow (red, dashed, FILLED triangle). The
+ * user then draws from one node to another (endpoints attach to centers).
+ */
+export function activateWardleyConnector(gfx, kind, source = TOOLBOX_SOURCE) {
+    const props = kind === 'arrow'
+        ? {
+            mode: ConnectorMode.Straight,
+            stroke: WARDLEY_RED,
+            strokeStyle: StrokeStyle.Dash,
+            strokeWidth: LINK_STROKE_WIDTH,
+            frontEndpointStyle: PointStyle.None,
+            rearEndpointStyle: PointStyle.Triangle,
+        }
+        : {
+            mode: ConnectorMode.Straight,
+            stroke: LINK_GREY,
+            strokeStyle: StrokeStyle.Solid,
+            strokeWidth: LINK_STROKE_WIDTH,
+            frontEndpointStyle: PointStyle.None,
+            rearEndpointStyle: PointStyle.None,
+        };
+    gfx.std.get(EditPropsStore).recordLastProps('connector', props);
+    track(gfx, source, 'FrameworkToolPicked', `connector:${kind}`);
+    gfx.tool.setTool(ConnectorTool, { mode: ConnectorMode.Straight });
+    // The wardley palette stays open (native sub-menu behaviour): it only
+    // closes on re-click of the senior button, another senior tool, or Escape.
+}

package/dist/element-renderer.js

@@ -1,6 +1,6 @@
 import { ElementRendererExtension, } from '@formicoidea/labre-core/blocks/surface';
 import { ARROW, CARD_RADIUS, COLORS, EVOLUTION_BOUNDARIES, FONT_FAMILY, FONTS, LINE, MARGIN, OFFSETS, } from './consts';
-import { BENEFIT_ZERO_FRAC, paintGradientBackground } from './gradient';
+import { paintGradientBackground } from './gradient';
 function roundRectPath(ctx, x, y, w, h, r) {
     const rr = Math.min(r, w / 2, h / 2);
     ctx.beginPath();
@@ -60,15 +60,6 @@ export const wardley = (model, ctx, matrix) => {
     // Hidden when `showGradient` is false → plain white background.
     if (model.variant !== 'classic' && model.showGradient) {
         paintGradientBackground(ctx, model.variant, px0, px1, py0, py1);
-        if (model.variant === 'benefit') {
-            const zy = py1 - BENEFIT_ZERO_FRAC * ph;
-            ctx.strokeStyle = COLORS.axis;
-            ctx.lineWidth = 1.2;
-            ctx.beginPath();
-            ctx.moveTo(px0, zy);
-            ctx.lineTo(px1, zy);
-            ctx.stroke();
-        }
     }
     // ── Optional evolution band tints ───────────────────────────────────
     if (model.banded) {

package/dist/gradient.d.ts

@@ -8,8 +8,6 @@
  */
 export declare const GRADIENT_GREEN = "#1f9e4d";
 export declare const GRADIENT_RED = "#d6455d";
-/** Benefit/investment zero-line height (fraction of plot height from bottom). */
-export declare const BENEFIT_ZERO_FRAC = 0.3;
 /**
  * Paint the curve-driven gradient over the plot rectangle [px0,px1]×[py0,py1]
  * in element-local coordinates. `classic` paints nothing.

package/dist/gradient.js

@@ -48,8 +48,6 @@ const GRADIENT_GREY = '#7c8389';
 const GRADIENT_MAX_OPACITY = 0.45;
 /** Peak opacity for the grey evolution-gradient variant. */
 const GREY_MAX_OPACITY = 0.38;
-/** Benefit/investment zero-line height (fraction of plot height from bottom). */
-export const BENEFIT_ZERO_FRAC = 0.3;
 function rgba(hex, alpha) {
     const r = parseInt(hex.slice(1, 3), 16);
     const g = parseInt(hex.slice(3, 5), 16);

package/dist/index.d.ts

@@ -1 +1 @@
-export {};
+export { wardleyShortcuts } from './shortcuts';

package/dist/index.js

@@ -1 +1 @@
-export {};
+export { wardleyShortcuts } from './shortcuts';

package/dist/shortcuts.d.ts

@@ -0,0 +1,2 @@
+import type { ShortcutDescriptor } from '@formicoidea/labre-core/std';
+export declare const wardleyShortcuts: ShortcutDescriptor[];

package/dist/shortcuts.js

@@ -0,0 +1,37 @@
+import { GfxControllerIdentifier } from '@formicoidea/labre-core/std/gfx';
+import { activateWardleyConnector, createWardleyBackground, createWardleyInertia, createWardleyNode, createWardleyPipeline, WARDLEY_SHORTCUT_SOURCE, } from './actions';
+/**
+ * Wardley canvas chords: press `w`, then the action key. Edgeless-scoped and
+ * registered by {@link WardleyViewExtension}, so they only exist when the
+ * edgeless editor is mounted AND the `wardley` block flag is enabled. The
+ * host can rebind or disable each id via `ShortcutOverrides`.
+ *
+ * This is the reference pattern for other frameworks: same shape with their
+ * own prefix letter, listed in `FRAMEWORK_SHORTCUT_GROUPS` (manifest) and
+ * registered via `ShortcutExtension` in their view extension (binding).
+ */
+const wardleyShortcut = (id, key, run) => ({
+    id: `wardley.${id}`,
+    labelKey: `com.labre.keyboardShortcuts.wardley.${id}`,
+    defaultKeys: { mac: ['w', key], other: ['w', key] },
+    scope: 'edgeless',
+    owner: 'wardley',
+    handler: std => ctx => {
+        const gfx = std.get(GfxControllerIdentifier);
+        // Never fire while editing text on the canvas.
+        if (gfx.selection.editing)
+            return false;
+        ctx.get('defaultState').event.preventDefault();
+        run(gfx);
+        return true;
+    },
+});
+export const wardleyShortcuts = [
+    wardleyShortcut('addComponent', 'c', gfx => createWardleyNode(gfx, 'component', WARDLEY_SHORTCUT_SOURCE)),
+    wardleyShortcut('linkTool', 'l', gfx => activateWardleyConnector(gfx, 'link', WARDLEY_SHORTCUT_SOURCE)),
+    wardleyShortcut('evolutionArrow', 'a', gfx => activateWardleyConnector(gfx, 'arrow', WARDLEY_SHORTCUT_SOURCE)),
+    wardleyShortcut('addInertia', 'i', gfx => createWardleyInertia(gfx, WARDLEY_SHORTCUT_SOURCE)),
+    wardleyShortcut('addPipeline', 'p', gfx => createWardleyPipeline(gfx, WARDLEY_SHORTCUT_SOURCE)),
+    wardleyShortcut('addMethod', 'm', gfx => createWardleyNode(gfx, 'method', WARDLEY_SHORTCUT_SOURCE)),
+    wardleyShortcut('addBackground', 'b', gfx => createWardleyBackground(gfx, 'classic', WARDLEY_SHORTCUT_SOURCE)),
+];

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

@@ -3,50 +3,18 @@ import { LitElement } from 'lit';
 declare const EdgelessWardleyMenu_base: typeof LitElement & import("@formicoidea/labre-core/_pkgs/global/utils").Constructor<import("@formicoidea/labre-core/_pkgs/affine-widget-edgeless-toolbar").EdgelessToolbarToolClass>;
 /**
  * The popover that opens above the toolbar for the Wardley toolbox. Each item
- * creates a pre-formatted Wardley object. Nodes (component / anchor) are a
- * native ellipse + a native text label, grouped together.
+ * creates a pre-formatted Wardley object (see `../actions.ts` — the same
+ * actions back the wardley keyboard shortcuts).
  */
 export declare class EdgelessWardleyMenu extends EdgelessWardleyMenu_base {
     static styles: import("lit").CSSResult;
     type: typeof EmptyTool;
     private _createBackground;
-    /** Add a native ellipse wardley node centred on (cx, cy). */
-    private _addEllipseNode;
-    /** Add a native free-text label (same Inter family as the axis labels). */
-    private _addLabel;
-    /** Group elements; returns the group id (or the first id if grouping failed). */
-    private _group;
-    /**
-     * Create a single-circle node (component / anchor / ecosystem / method):
-     * one connectable native ellipse + a label to its right, grouped so they
-     * move together (enter the group to reposition / edit the label).
-     */
     private _createNode;
-    private _createInertia;
-    /**
-     * Create a pipeline: a wide thin native rect body (white semi-transparent,
-     * NON-connectable) + a node-sized square handle straddling its top edge (the
-     * only connection point, center anchor) + a native text label. The handle and
-     * label are grouped, then grouped again with the body so the whole pipeline
-     * moves as one. Pure composition of native elements — no custom type / view.
-     */
-    private _createPipeline;
-    /**
-     * Create a market: a large thin-bordered circle (the connectable market node)
-     * containing 3 small thick-bordered component nodes wired into a triangle by
-     * native attached connectors (thin, dark, no arrows — they auto-route between
-     * the node centers and follow on move/resize). A label sits to the right and
-     * everything is grouped into one object.
-     */
-    private _createMarket;
-    /**
-     * Activate the native connector tool, pre-styled for a Wardley link (grey,
-     * solid, no arrow) or evolution arrow (red, dashed, FILLED triangle). The
-     * user then draws from one node to another (endpoints attach to centers).
-     */
+    private readonly _createInertia;
+    private readonly _createPipeline;
+    private readonly _createMarket;
     private _activateConnector;
-    private _finish;
-    private _track;
     render(): import("lit-html").TemplateResult<1>;
 }
 export {};

package/dist/toolbar/wardley-menu.js

@@ -1,65 +1,26 @@
-import { DefaultTool } from '@formicoidea/labre-core/blocks/surface';
-import { ConnectorTool } from '@formicoidea/labre-core/gfx/connector';
-import { createGroupCommand } from '@formicoidea/labre-core/gfx/group';
 import { EmptyTool } from '@formicoidea/labre-core/gfx/pointer';
-import { ConnectorMode, FontFamily, PointStyle, ShapeStyle, StrokeStyle, } from '@formicoidea/labre-core/model';
-import { EditPropsStore, 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_WIDTH } from '../consts';
-import { ECOSYSTEM_LABEL, ECOSYSTEM_SIZE, HANDLE_SIZE, INERTIA_COLOR, INERTIA_SIZE, LABEL_DEFAULT, LABEL_FONT_SIZE, LABEL_GAP, LINK_GREY, LINK_STROKE_WIDTH, MARKET_DOT_RING, MARKET_DOT_SIZE, MARKET_DOT_STROKE_WIDTH, MARKET_LABEL, MARKET_LINK_COLOR, MARKET_LINK_WIDTH, MARKET_SIZE, METHOD_FILL, METHOD_LABEL, METHOD_SIZE, NODE_FILL, NODE_SIZE, NODE_STROKE, NODE_STROKE_WIDTH, PIPELINE_FILL, PIPELINE_HEIGHT, PIPELINE_LABEL, PIPELINE_WIDTH, WARDLEY_RED, } from '../node/consts';
+import { activateWardleyConnector, createWardleyBackground, createWardleyInertia, createWardleyMarket, createWardleyNode, createWardleyPipeline, } from '../actions';
 import { wardleyAnchorIcon, wardleyArrowIcon, wardleyBackgroundIcon, wardleyBenefitIcon, wardleyComponentIcon, wardleyEcosystemIcon, wardleyInertiaIcon, wardleyLinkIcon, wardleyMarketIcon, wardleyMethodIcon, wardleyEvolutionGradientIcon, wardleyOpportunityIcon, wardleyPipelineIcon, } from './icons';
-/**
- * Per-variant default label overrides applied at creation (all remain editable
- * afterwards via the inline editor / toggles). The gradient itself is driven by
- * `variant` in the renderer.
- */
-const BACKGROUND_VARIANT_DEFAULTS = {
-    classic: {},
-    // The Y axis becomes "Opportunity"; phase labels keep the classic defaults.
-    opportunity: {
-        yAxisTitle: 'Opportunity',
-        showVisibilityLabels: false,
-        showCornerLabels: false,
-    },
-    // The Y axis splits into Benefit (top) / Investment (bottom) around a zero
-    // line drawn by the renderer.
-    benefit: {
-        yAxisTitle: '',
-        visibilityHigh: 'Benefit',
-        visibilityLow: 'Investment',
-        showCornerLabels: false,
-    },
-    // Keeps the classic labels (Value Chain / Uncharted / Industrialized…); only
-    // the grey gradient differs.
-    'evolution-gradient': {},
-};
-/** Height of the native free-text labels (Inter, size 18). */
-const LABEL_H = LABEL_FONT_SIZE + 8;
-/**
- * The single-circle node flavours: one connectable ellipse + a label to its
- * right, grouped. The glyph itself (anchor silhouette, ecosystem hatching,
- * method inner circle) is drawn by the node renderer from `kind`.
- */
-const NODE_PRESETS = {
-    component: { d: NODE_SIZE, fill: NODE_FILL, label: LABEL_DEFAULT.component },
-    anchor: { d: NODE_SIZE, fill: NODE_FILL, label: LABEL_DEFAULT.anchor },
-    // Ecosystem: glyph = double border + hatched donut; connectors attach to
-    // this outer circle's center.
-    ecosystem: { d: ECOSYSTEM_SIZE, fill: NODE_FILL, label: ECOSYSTEM_LABEL },
-    // Method: the FILL color encodes the chosen method (editable).
-    method: { d: METHOD_SIZE, fill: METHOD_FILL, label: METHOD_LABEL },
-};
 /**
  * The popover that opens above the toolbar for the Wardley toolbox. Each item
- * creates a pre-formatted Wardley object. Nodes (component / anchor) are a
- * native ellipse + a native text label, grouped together.
+ * creates a pre-formatted Wardley object (see `../actions.ts` — the same
+ * actions back the wardley keyboard shortcuts).
  */
 export class EdgelessWardleyMenu extends EdgelessToolbarToolMixin(LitElement) {
     constructor() {
         super(...arguments);
         this.type = EmptyTool;
+        this._createInertia = () => {
+            createWardleyInertia(this.gfx);
+        };
+        this._createPipeline = () => {
+            createWardleyPipeline(this.gfx);
+        };
+        this._createMarket = () => {
+            createWardleyMarket(this.gfx);
+        };
     }
     static { this.styles = css `
     :host {
@@ -84,237 +45,13 @@ export class EdgelessWardleyMenu extends EdgelessToolbarToolMixin(LitElement) {
     }
   `; }
     _createBackground(variant = 'classic') {
-        const { gfx } = this;
-        if (!gfx.surface)
-            return;
-        let width = REF_WIDTH;
-        for (const el of gfx.surface.getElementsByType('wardley')) {
-            const [, , ew, eh] = el.deserializedXYWH;
-            width = Math.max(width, ew, (eh * 16) / 9);
-        }
-        const height = (width * 9) / 16;
-        const { centerX, centerY } = gfx.viewport;
-        const id = gfx.surface.addElement({
-            type: 'wardley',
-            variant,
-            ...BACKGROUND_VARIANT_DEFAULTS[variant],
-            xywh: new Bound(centerX - width / 2, centerY - height / 2, width, height).serialize(),
-        });
-        this._track('FrameworkElementAdded', `background:${variant}`);
-        this._finish(id);
-    }
-    /** Add a native ellipse wardley node centred on (cx, cy). */
-    _addEllipseNode(surface, kind, cx, cy, d, fillColor, strokeWidth = NODE_STROKE_WIDTH) {
-        return surface.addElement({
-            type: 'wardleyNode',
-            kind,
-            shapeType: 'ellipse',
-            filled: true,
-            fillColor,
-            strokeColor: NODE_STROKE,
-            strokeWidth,
-            shapeStyle: ShapeStyle.General,
-            roughness: 0,
-            xywh: new Bound(cx - d / 2, cy - d / 2, d, d).serialize(),
-        });
-    }
-    /** Add a native free-text label (same Inter family as the axis labels). */
-    _addLabel(surface, text, x, y, textAlign = 'left') {
-        return surface.addElement({
-            type: 'text',
-            text,
-            fontFamily: FontFamily.Inter,
-            fontSize: LABEL_FONT_SIZE,
-            color: NODE_STROKE,
-            textAlign,
-            xywh: new Bound(x, y, 120, LABEL_H).serialize(),
-        });
+        createWardleyBackground(this.gfx, variant);
     }
-    /** Group elements; returns the group id (or the first id if grouping failed). */
-    _group(ids) {
-        const [, result] = this.edgeless.std.command.exec(createGroupCommand, {
-            elements: ids,
-        });
-        return result.groupId || ids[0];
-    }
-    /**
-     * Create a single-circle node (component / anchor / ecosystem / method):
-     * one connectable native ellipse + a label to its right, grouped so they
-     * move together (enter the group to reposition / edit the label).
-     */
     _createNode(kind) {
-        const surface = this.gfx.surface;
-        if (!surface)
-            return;
-        const { d, fill, label } = NODE_PRESETS[kind];
-        const { centerX: cx, centerY: cy } = this.gfx.viewport;
-        const nodeId = this._addEllipseNode(surface, kind, cx, cy, d, fill);
-        const labelId = this._addLabel(surface, label, cx + d / 2 + LABEL_GAP, cy - LABEL_H / 2);
-        this._track('FrameworkElementAdded', `node:${kind}`);
-        this._finish(this._group([nodeId, labelId]));
-    }
-    _createInertia() {
-        const { gfx } = this;
-        if (!gfx.surface)
-            return;
-        const { w, h } = INERTIA_SIZE;
-        const { centerX, centerY } = gfx.viewport;
-        const id = gfx.surface.addElement({
-            type: 'shape',
-            shapeType: 'rect',
-            filled: true,
-            fillColor: INERTIA_COLOR,
-            strokeColor: INERTIA_COLOR,
-            strokeWidth: 0,
-            shapeStyle: ShapeStyle.General,
-            roughness: 0,
-            radius: 0,
-            xywh: new Bound(centerX - w / 2, centerY - h / 2, w, h).serialize(),
-        });
-        this._track('FrameworkElementAdded', 'node:inertia');
-        this._finish(id);
-    }
-    /**
-     * Create a pipeline: a wide thin native rect body (white semi-transparent,
-     * NON-connectable) + a node-sized square handle straddling its top edge (the
-     * only connection point, center anchor) + a native text label. The handle and
-     * label are grouped, then grouped again with the body so the whole pipeline
-     * moves as one. Pure composition of native elements — no custom type / view.
-     */
-    _createPipeline() {
-        const { gfx } = this;
-        if (!gfx.surface)
-            return;
-        const { centerX: cx, centerY: cy } = gfx.viewport;
-        const W = PIPELINE_WIDTH;
-        const H = PIPELINE_HEIGHT;
-        const d = HANDLE_SIZE;
-        const top = cy - H / 2;
-        // Body: a WardleyNode rect, made non-connectable by `kind: 'pipeline'`.
-        const bodyId = gfx.surface.addElement({
-            type: 'wardleyNode',
-            kind: 'pipeline',
-            shapeType: 'rect',
-            filled: true,
-            fillColor: PIPELINE_FILL,
-            strokeColor: NODE_STROKE,
-            strokeWidth: NODE_STROKE_WIDTH,
-            shapeStyle: ShapeStyle.General,
-            roughness: 0,
-            radius: 0,
-            xywh: new Bound(cx - W / 2, top, W, H).serialize(),
-        });
-        // Handle: a node-sized WardleyNode square straddling the top edge. Inherits
-        // `centerAnchorOnly` so connectors attach to its center only.
-        const handleId = gfx.surface.addElement({
-            type: 'wardleyNode',
-            kind: 'handle',
-            shapeType: 'rect',
-            filled: true,
-            fillColor: NODE_FILL,
-            strokeColor: NODE_STROKE,
-            strokeWidth: NODE_STROKE_WIDTH,
-            shapeStyle: ShapeStyle.General,
-            roughness: 0,
-            radius: 0,
-            xywh: new Bound(cx - d / 2, top - d / 2, d, d).serialize(),
-        });
-        // Label centered horizontally on the pipeline, sitting ABOVE the handle.
-        const labelId = this._addLabel(gfx.surface, PIPELINE_LABEL, cx - 60, top - d / 2 - LABEL_H - LABEL_GAP, 'center');
-        // Nested groups: (handle + label), then (body + that group).
-        const innerId = this._group([handleId, labelId]);
-        this._track('FrameworkElementAdded', 'node:pipeline');
-        this._finish(this._group([bodyId, innerId]));
+        createWardleyNode(this.gfx, kind);
     }
-    /**
-     * Create a market: a large thin-bordered circle (the connectable market node)
-     * containing 3 small thick-bordered component nodes wired into a triangle by
-     * native attached connectors (thin, dark, no arrows — they auto-route between
-     * the node centers and follow on move/resize). A label sits to the right and
-     * everything is grouped into one object.
-     */
-    _createMarket() {
-        const surface = this.gfx.surface;
-        if (!surface)
-            return;
-        const { centerX: cx, centerY: cy } = this.gfx.viewport;
-        const R = MARKET_SIZE / 2;
-        const rho = MARKET_DOT_RING;
-        const sin60 = Math.sqrt(3) / 2;
-        // Outer circle = the market node (connectable, center-only).
-        const circleId = this._addEllipseNode(surface, 'market', cx, cy, MARKET_SIZE, NODE_FILL);
-        // 3 inner component nodes (thick border, no label) at the triangle vertices.
-        const verts = [
-            [0, -rho],
-            [rho * sin60, rho / 2],
-            [-rho * sin60, rho / 2],
-        ];
-        const dotIds = verts.map(([vx, vy]) => this._addEllipseNode(surface, 'component', cx + vx, cy + vy, MARKET_DOT_SIZE, NODE_FILL, MARKET_DOT_STROKE_WIDTH));
-        // Triangle: 3 attached connectors (auto-route center-to-center, clipped).
-        const connIds = [
-            [dotIds[0], dotIds[1]],
-            [dotIds[1], dotIds[2]],
-            [dotIds[2], dotIds[0]],
-        ].map(([a, b]) => surface.addElement({
-            type: 'connector',
-            mode: ConnectorMode.Straight,
-            source: { id: a },
-            target: { id: b },
-            stroke: MARKET_LINK_COLOR,
-            strokeStyle: StrokeStyle.Solid,
-            strokeWidth: MARKET_LINK_WIDTH,
-            frontEndpointStyle: PointStyle.None,
-            rearEndpointStyle: PointStyle.None,
-        }));
-        const labelId = this._addLabel(surface, MARKET_LABEL, cx + R + LABEL_GAP, cy - LABEL_H / 2);
-        this._track('FrameworkElementAdded', 'node:market');
-        this._finish(this._group([circleId, ...dotIds, ...connIds, labelId]));
-    }
-    /**
-     * Activate the native connector tool, pre-styled for a Wardley link (grey,
-     * solid, no arrow) or evolution arrow (red, dashed, FILLED triangle). The
-     * user then draws from one node to another (endpoints attach to centers).
-     */
     _activateConnector(kind) {
-        const props = kind === 'arrow'
-            ? {
-                mode: ConnectorMode.Straight,
-                stroke: WARDLEY_RED,
-                strokeStyle: StrokeStyle.Dash,
-                strokeWidth: LINK_STROKE_WIDTH,
-                frontEndpointStyle: PointStyle.None,
-                rearEndpointStyle: PointStyle.Triangle,
-            }
-            : {
-                mode: ConnectorMode.Straight,
-                stroke: LINK_GREY,
-                strokeStyle: StrokeStyle.Solid,
-                strokeWidth: LINK_STROKE_WIDTH,
-                frontEndpointStyle: PointStyle.None,
-                rearEndpointStyle: PointStyle.None,
-            };
-        this.edgeless.std.get(EditPropsStore).recordLastProps('connector', props);
-        this._track('FrameworkToolPicked', `connector:${kind}`);
-        this.gfx.tool.setTool(ConnectorTool, { mode: ConnectorMode.Straight });
-        // Keep the palette open (native sub-menu behaviour): it only closes on
-        // re-click of the senior button, another senior tool, or Escape.
-    }
-    _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) so several Wardley
-        // objects can be added in a row; the canvas stays selectable meanwhile.
-    }
-    _track(event, element) {
-        this.edgeless.std.getOptional(TelemetryProvider)?.track(event, {
-            framework: 'wardley',
-            element,
-            page: 'whiteboard editor',
-            segment: 'wardley toolbox',
-            module: 'wardley menu',
-        });
+        activateWardleyConnector(this.gfx, kind);
     }
     render() {
         return html `

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

@@ -33,6 +33,8 @@ export class EdgelessWardleySeniorButton extends EdgelessToolbarToolMixin(Signal
       position: relative;
       overflow: hidden;
       cursor: pointer;
+      /* no double-tap-zoom / 300ms tap delay on touch screens */
+      touch-action: manipulation;
       display: flex;
       align-items: flex-end;
       justify-content: center;
@@ -56,7 +58,8 @@ export class EdgelessWardleySeniorButton extends EdgelessToolbarToolMixin(Signal
       width: 100%;
       height: 100%;
     }
-    .wardley-root:hover .wardley-card {
+    .wardley-root:hover .wardley-card,
+    .wardley-root:active .wardley-card {
       --y: -10px;
       --s: 1.07;
     }

package/dist/view.js

@@ -1,6 +1,8 @@
 import { ViewExtensionProvider, } from '@formicoidea/labre-core/ext-loader';
 import { extendTemplateCategory } from '@formicoidea/labre-core/gfx/template';
+import { ShortcutExtension } from '@formicoidea/labre-core/std';
 import { effects } from './effects';
+import { wardleyShortcuts } from './shortcuts';
 import { wardleyTemplateCategory } from './templates';
 import { WardleyElementRendererExtension } from './element-renderer';
 import { WardleyInteraction, WardleyView } from './element-view';
@@ -30,6 +32,10 @@ export class WardleyViewExtension extends ViewExtensionProvider {
             context.register(wardleySeniorTool);
             context.register(wardleyToolbarExtension);
             context.register(wardleyNodeToolbarExtension);
+            // Edgeless-scoped chords (w+c, w+l, ...). Registering here inherits
+            // both the wardley flag gating and the edgeless-only availability;
+            // the installer is ShortcutKeymapExtension('edgeless') in root.
+            context.register(ShortcutExtension(wardleyShortcuts));
         }
     }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@formicoidea/labre-framework-wardley",
   "description": "Labre wardley framework for @formicoidea/labre-core.",
-  "version": "0.29.1",
+  "version": "0.30.1",
   "type": "module",
   "sideEffects": false,
   "author": "lajola",
@@ -27,7 +27,7 @@
     "dist"
   ],
   "dependencies": {
-    "@formicoidea/labre-core": "0.29.1",
+    "@formicoidea/labre-core": "0.30.1",
     "lit": "^3.2.0"
   }
 }