@formicoidea/labre-framework-wardley 0.23.0 → 0.23.1

package/dist/toolbar/wardley-menu.js

@@ -0,0 +1,408 @@
+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 { 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.
+ */
+export class EdgelessWardleyMenu extends EdgelessToolbarToolMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.type = EmptyTool;
+    }
+    static { this.styles = css `
+    :host {
+      position: absolute;
+      display: flex;
+      z-index: -1;
+    }
+    .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;
+    }
+  `; }
+    _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(),
+        });
+    }
+    /** 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]));
+    }
+    /**
+     * 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',
+        });
+    }
+    render() {
+        return html `
+      <edgeless-slide-menu>
+        <div class="menu-content">
+          <div class="button-group-container">
+            <edgeless-tool-icon-button
+              .tooltip=${'Wardley map background'}
+              @click=${() => this._createBackground('classic')}
+            >
+              ${wardleyBackgroundIcon}
+            </edgeless-tool-icon-button>
+            <edgeless-tool-icon-button
+              .tooltip=${'Opportunity background (gradient)'}
+              @click=${() => this._createBackground('opportunity')}
+            >
+              ${wardleyOpportunityIcon}
+            </edgeless-tool-icon-button>
+            <edgeless-tool-icon-button
+              .tooltip=${'Benefit / Investment background (gradient)'}
+              @click=${() => this._createBackground('benefit')}
+            >
+              ${wardleyBenefitIcon}
+            </edgeless-tool-icon-button>
+            <edgeless-tool-icon-button
+              .tooltip=${'Evolution background (Wardley presentation)'}
+              @click=${() => this._createBackground('evolution-gradient')}
+            >
+              ${wardleyEvolutionGradientIcon}
+            </edgeless-tool-icon-button>
+            <edgeless-tool-icon-button
+              .tooltip=${'Component'}
+              @click=${() => this._createNode('component')}
+            >
+              ${wardleyComponentIcon}
+            </edgeless-tool-icon-button>
+            <edgeless-tool-icon-button
+              .tooltip=${'Component + method'}
+              @click=${() => this._createNode('method')}
+            >
+              ${wardleyMethodIcon}
+            </edgeless-tool-icon-button>
+            <edgeless-tool-icon-button
+              .tooltip=${'Market'}
+              @click=${this._createMarket}
+            >
+              ${wardleyMarketIcon}
+            </edgeless-tool-icon-button>
+            <edgeless-tool-icon-button
+              .tooltip=${'Ecosystem'}
+              @click=${() => this._createNode('ecosystem')}
+            >
+              ${wardleyEcosystemIcon}
+            </edgeless-tool-icon-button>
+            <edgeless-tool-icon-button
+              .tooltip=${'Anchor'}
+              @click=${() => this._createNode('anchor')}
+            >
+              ${wardleyAnchorIcon}
+            </edgeless-tool-icon-button>
+            <edgeless-tool-icon-button
+              .tooltip=${'Pipeline'}
+              @click=${this._createPipeline}
+            >
+              ${wardleyPipelineIcon}
+            </edgeless-tool-icon-button>
+            <edgeless-tool-icon-button
+              .tooltip=${'Link'}
+              @click=${() => this._activateConnector('link')}
+            >
+              ${wardleyLinkIcon}
+            </edgeless-tool-icon-button>
+            <edgeless-tool-icon-button
+              .tooltip=${'Arrow (evolution)'}
+              @click=${() => this._activateConnector('arrow')}
+            >
+              ${wardleyArrowIcon}
+            </edgeless-tool-icon-button>
+            <edgeless-tool-icon-button
+              .tooltip=${'Inertia'}
+              @click=${this._createInertia}
+            >
+              ${wardleyInertiaIcon}
+            </edgeless-tool-icon-button>
+          </div>
+        </div>
+      </edgeless-slide-menu>
+    `;
+    }
+}
+//# sourceMappingURL=wardley-menu.js.map

package/dist/toolbar/wardley-senior-button.d.ts

@@ -0,0 +1,18 @@
+import { EmptyTool } from '@formicoidea/labre-core/gfx/pointer';
+import { LitElement } from 'lit';
+declare const EdgelessWardleySeniorButton_base: typeof LitElement & import("@formicoidea/labre-core/global/utils").Constructor<import("@formicoidea/labre-core/widgets/edgeless-toolbar").EdgelessToolbarToolClass>;
+/**
+ * Main toolbar button (colored proposal-B icon) that opens the Wardley toolbox
+ * sub-menu above the toolbar. Styled like the other senior tools: the tile fills
+ * the 96×64 slot, is anchored to the bottom so it "rises from below", and grows
+ * slightly on hover.
+ */
+export declare class EdgelessWardleySeniorButton extends EdgelessWardleySeniorButton_base {
+    static styles: import("lit").CSSResult;
+    enableActiveBackground: boolean;
+    type: typeof EmptyTool;
+    private _toggleMenu;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};
+//# sourceMappingURL=wardley-senior-button.d.ts.map

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

@@ -0,0 +1,146 @@
+import { DefaultTool } from '@formicoidea/labre-core/blocks/surface';
+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 { wardleyToolbarIcon } from './icons';
+/**
+ * Main toolbar button (colored proposal-B icon) that opens the Wardley toolbox
+ * sub-menu above the toolbar. Styled like the other senior tools: the tile fills
+ * the 96×64 slot, is anchored to the bottom so it "rises from below", and grows
+ * slightly on hover.
+ */
+export class EdgelessWardleySeniorButton extends EdgelessToolbarToolMixin(SignalWatcher(LitElement)) {
+    constructor() {
+        super(...arguments);
+        this.enableActiveBackground = true;
+        // `EmptyTool` is only a sentinel for the mixin's abstract `type`; we never
+        // activate it. The menu opens as a palette over the default (selection) tool
+        // so the canvas stays fully interactive while it is open — mirroring the
+        // native Note/Shape sub-menus.
+        this.type = EmptyTool;
+    }
+    static { this.styles = css `
+    :host,
+    .wardley-button {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+    /* Make this 96px button the containing block of the popup's clip wrapper
+       (it is appended to our shadow root) so the sub-menu anchors to THIS
+       button — not the whole toolbar — and can be centered over it. */
+    :host {
+      position: relative;
+    }
+    .wardley-root {
+      width: 100%;
+      height: 64px;
+      position: relative;
+      overflow: hidden;
+      cursor: pointer;
+      display: flex;
+      align-items: flex-end;
+      justify-content: center;
+    }
+    .wardley-card {
+      --y: -4px;
+      --s: 1;
+      position: absolute;
+      bottom: 0;
+      width: 54px;
+      height: 54px;
+      transform: translateY(var(--y)) scale(var(--s));   /* base */
+      translate: var(--active-x, 0) var(--active-y, 0);   /* actif */
+      rotate: var(--active-r, -2deg);
+        scale: var(--active-s, 1);
+      transition: transform 0.3s ease, translate 0.3s ease,
+        rotate 0.3s ease, scale 0.3s ease;
+    }
+    .wardley-card svg {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+    .wardley-root:hover .wardley-card {
+      --y: -10px;
+      --s: 1.07;
+    }
+  `; }
+    _toggleMenu() {
+        // Toggle on popper presence (not tool-active state): the menu stays open on
+        // click-outside and only closes on re-click, another senior tool, or Escape.
+        if (this.popper) {
+            this.popper.dispose();
+            this.popper = null;
+            return;
+        }
+        this.setEdgelessTool(DefaultTool);
+        const menu = this.createPopper('edgeless-wardley-menu', this);
+        menu.element.edgeless = this.edgeless;
+        // Anchor the sub-menu to THIS button (the clip wrapper is now button-
+        // relative thanks to `:host{position:relative}`): make the menu an in-flow
+        // flex item sized to its content, centered over the button. Now that other
+        // senior tools (EDGY, Cynefin/Estuarine) sit to the right of Wardley, there
+        // is room on both sides, so the menu no longer needs to be pinned to the
+        // right edge. Native sub-menus are untouched.
+        const el = menu.element;
+        const wrap = el.parentElement;
+        if (wrap) {
+            wrap.style.overflow = 'visible';
+            wrap.style.justifyContent = 'center';
+        }
+        Object.assign(el.style, {
+            position: 'static',
+            width: 'max-content',
+            maxWidth: 'calc(100vw - 16px)',
+            marginLeft: '0',
+        });
+        // The Wardley menu is wide (~13 items). After layout, right-align its right
+        // edge to the right edge of the rightmost senior tool (the right end of the
+        // senior toolbar), so it fills the space to the right instead of sitting
+        // centered with a gap. The menu then extends leftwards.
+        requestAnimationFrame(() => {
+            const rect = el.getBoundingClientRect();
+            // Right edge of the rightmost senior tool slot (scan across shadow roots).
+            let target = 0;
+            const seen = new Set();
+            const scan = (root) => {
+                root.querySelectorAll('*').forEach(node => {
+                    const cls = node.className;
+                    if (typeof cls === 'string' &&
+                        cls.split(' ').includes('senior-tool-item')) {
+                        const b = node.getBoundingClientRect();
+                        if (b.width > 0)
+                            target = Math.max(target, b.right);
+                    }
+                    const sr = node.shadowRoot;
+                    if (sr && !seen.has(sr)) {
+                        seen.add(sr);
+                        scan(sr);
+                    }
+                });
+            };
+            scan(document);
+            if (target > 0) {
+                const dx = Math.round(target - rect.right);
+                if (dx)
+                    el.style.transform = `translateX(${dx}px)`;
+            }
+        });
+    }
+    render() {
+        return html `<edgeless-toolbar-button
+      class="wardley-button"
+      .tooltip=${this.popper ? '' : 'Wardley map'}
+      .tooltipOffset=${4}
+      .active=${!!this.popper}
+      @click=${this._toggleMenu}
+    >
+      <div class="wardley-root">
+        <div class="wardley-card">${wardleyToolbarIcon}</div>
+      </div>
+    </edgeless-toolbar-button>`;
+    }
+}
+//# sourceMappingURL=wardley-senior-button.js.map

package/dist/toolbar/wardley-tool-button.d.ts

@@ -0,0 +1,10 @@
+import type { GfxController } from '@blocksuite/std/gfx';
+import { LitElement } from 'lit';
+/** Toolbar button that drops a Wardley map background at the viewport center. */
+export declare class EdgelessWardleyToolButton extends LitElement {
+    static styles: import("lit").CSSResult;
+    private _addWardley;
+    render(): import("lit-html").TemplateResult<1>;
+    accessor gfx: GfxController;
+}
+//# sourceMappingURL=wardley-tool-button.d.ts.map