@formicoidea/labre-framework-wardley 0.23.0

package/src/toolbar/wardley-menu.ts

@@ -0,0 +1,552 @@
+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,
+  type WardleyBgVariant,
+} 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 type { GfxController } from '@formicoidea/labre-core/std/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: Record<
+  WardleyBgVariant,
+  Record<string, unknown>
+> = {
+  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': {},
+};
+
+type Surface = NonNullable<GfxController['surface']>;
+
+/** 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 },
+} as const;
+
+/**
+ * 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) {
+  static override 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;
+    }
+  `;
+
+  override type = EmptyTool;
+
+  private _createBackground(variant: WardleyBgVariant = '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). */
+  private _addEllipseNode(
+    surface: Surface,
+    kind: keyof typeof NODE_PRESETS | 'market',
+    cx: number,
+    cy: number,
+    d: number,
+    fillColor: string,
+    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). */
+  private _addLabel(
+    surface: Surface,
+    text: string,
+    x: number,
+    y: number,
+    textAlign: 'left' | 'center' = '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). */
+  private _group(ids: string[]) {
+    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).
+   */
+  private _createNode(kind: keyof typeof NODE_PRESETS) {
+    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]));
+  }
+
+  private _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.
+   */
+  private _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.
+   */
+  private _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).
+   */
+  private _activateConnector(kind: 'link' | 'arrow') {
+    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.
+  }
+
+  private _finish(id: string) {
+    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.
+  }
+
+  private _track(
+    event: 'FrameworkElementAdded' | 'FrameworkToolPicked',
+    element: string
+  ) {
+    this.edgeless.std.getOptional(TelemetryProvider)?.track(event, {
+      framework: 'wardley',
+      element,
+      page: 'whiteboard editor',
+      segment: 'wardley toolbox',
+      module: 'wardley menu',
+    });
+  }
+
+  override 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>
+    `;
+  }
+}

package/src/toolbar/wardley-senior-button.ts

@@ -0,0 +1,154 @@
+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)
+) {
+  static override 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;
+    }
+  `;
+
+  override 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.
+  override type = EmptyTool;
+
+  private _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 as HTMLElement;
+    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<ShadowRoot>();
+      const scan = (root: ParentNode) => {
+        root.querySelectorAll('*').forEach(node => {
+          const cls = (node as HTMLElement).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 as HTMLElement).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)`;
+      }
+    });
+  }
+
+  override 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>`;
+  }
+}