@formicoidea/labre-framework-cynefin 0.23.0 → 0.23.1

package/dist/estuarine/element-renderer.d.ts

@@ -0,0 +1,14 @@
+import { type ElementRenderer } from '@formicoidea/labre-core/blocks/surface';
+import type { EstuarineElementModel } from '@formicoidea/labre-core/model';
+/**
+ * Canvas renderer for the Estuarine framework map — reproduces the official SVG:
+ * the e (vertical, double-headed) / t (horizontal, single-headed) axes and the
+ * three reference curves (Liminal / Volatile / Counter-factual), each with its
+ * legend and individually hideable. Drawn in the fixed reference space and
+ * scaled uniformly to the element bounds.
+ */
+export declare const estuarine: ElementRenderer<EstuarineElementModel>;
+export declare const EstuarineRendererExtension: import("@formicoidea/labre-core/store").ExtensionType & {
+    identifier: import("@formicoidea/labre-core/global/di").ServiceIdentifier<ElementRenderer<EstuarineElementModel>>;
+};
+//# sourceMappingURL=element-renderer.d.ts.map

package/dist/estuarine/element-renderer.js

@@ -0,0 +1,84 @@
+import { ElementRendererExtension, } from '@formicoidea/labre-core/blocks/surface';
+import { FONT_FAMILY, refScale } from '../utils';
+import { ARROWHEADS, AXIS_LABELS, AXIS_WIDTH, COLORS, COUNTERFACTUAL_PATH, COUNTERFACTUAL_WIDTH, E_AXIS, LABEL_LETTER_SPACING, LABELS, LIMINAL_PATH, LIMINAL_WIDTH, REF_H, REF_W, T_AXIS, VOLATILE_PATH, VOLATILE_WIDTH, } from './consts';
+/**
+ * Canvas renderer for the Estuarine framework map — reproduces the official SVG:
+ * the e (vertical, double-headed) / t (horizontal, single-headed) axes and the
+ * three reference curves (Liminal / Volatile / Counter-factual), each with its
+ * legend and individually hideable. Drawn in the fixed reference space and
+ * scaled uniformly to the element bounds.
+ */
+export const estuarine = (model, ctx, matrix) => {
+    const [, , w, h] = model.deserializedXYWH;
+    const cx = w / 2;
+    const cy = h / 2;
+    ctx.setTransform(matrix.translateSelf(cx, cy).rotateSelf(model.rotate).translateSelf(-cx, -cy));
+    const { s, ox, oy } = refScale(w, h, REF_W, REF_H);
+    ctx.translate(ox, oy);
+    ctx.scale(s, s);
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+    // ── Axes ────────────────────────────────────────────────────────────
+    ctx.strokeStyle = COLORS.axis;
+    ctx.fillStyle = COLORS.axis;
+    ctx.lineWidth = AXIS_WIDTH;
+    ctx.beginPath();
+    ctx.moveTo(E_AXIS.x, E_AXIS.y1);
+    ctx.lineTo(E_AXIS.x, E_AXIS.y2);
+    ctx.moveTo(T_AXIS.x1, T_AXIS.y);
+    ctx.lineTo(T_AXIS.x2, T_AXIS.y);
+    ctx.stroke();
+    for (const [[tx, ty], [ax, ay], [bx, by]] of ARROWHEADS) {
+        ctx.beginPath();
+        ctx.moveTo(tx, ty);
+        ctx.lineTo(ax, ay);
+        ctx.lineTo(bx, by);
+        ctx.closePath();
+        ctx.fill();
+    }
+    // Uppercase legend (centre-anchored, alphabetic baseline, letter-spaced).
+    const hasSpacing = 'letterSpacing' in ctx;
+    const legend = (l) => {
+        ctx.fillStyle = l.color;
+        ctx.font = `600 ${l.size}px ${FONT_FAMILY}`;
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'alphabetic';
+        if (hasSpacing)
+            ctx.letterSpacing = `${LABEL_LETTER_SPACING}px`;
+        ctx.fillText(l.text, l.x, l.y);
+        if (hasSpacing)
+            ctx.letterSpacing = '0px';
+    };
+    // ── Liminal (green) ─────────────────────────────────────────────────
+    if (model.showLiminal) {
+        ctx.strokeStyle = COLORS.liminal;
+        ctx.lineWidth = LIMINAL_WIDTH;
+        ctx.stroke(new Path2D(LIMINAL_PATH));
+        legend(LABELS.liminal);
+    }
+    // ── Volatile (red) ──────────────────────────────────────────────────
+    if (model.showVolatile) {
+        ctx.strokeStyle = COLORS.volatile;
+        ctx.lineWidth = VOLATILE_WIDTH;
+        ctx.stroke(new Path2D(VOLATILE_PATH));
+        legend(LABELS.volatile);
+    }
+    // ── Counter-factual (dark) ──────────────────────────────────────────
+    if (model.showCounterfactual) {
+        ctx.strokeStyle = COLORS.counterfactual;
+        ctx.lineWidth = COUNTERFACTUAL_WIDTH;
+        ctx.stroke(new Path2D(COUNTERFACTUAL_PATH));
+        legend(LABELS.counterfactual);
+    }
+    // ── Italic e / t axis letters ───────────────────────────────────────
+    if (model.showAxisLabels) {
+        ctx.fillStyle = COLORS.axisLabel;
+        ctx.font = `italic 700 ${AXIS_LABELS.size}px Georgia, serif`;
+        ctx.textAlign = 'left';
+        ctx.textBaseline = 'alphabetic';
+        ctx.fillText(AXIS_LABELS.e.text, AXIS_LABELS.e.x, AXIS_LABELS.e.y);
+        ctx.fillText(AXIS_LABELS.t.text, AXIS_LABELS.t.x, AXIS_LABELS.t.y);
+    }
+};
+export const EstuarineRendererExtension = ElementRendererExtension('estuarine', estuarine);
+//# sourceMappingURL=element-renderer.js.map

package/dist/estuarine/element-view.d.ts

@@ -0,0 +1,15 @@
+import type { EstuarineElementModel } from '@formicoidea/labre-core/model';
+import { GfxElementModelView } from '@formicoidea/labre-core/std/gfx';
+/**
+ * View for the Estuarine background. Registering it ensures `gfx.view.get(model)`
+ * returns a view (required so move / select interactions work).
+ */
+export declare class EstuarineView extends GfxElementModelView<EstuarineElementModel> {
+    static type: string;
+}
+/**
+ * Resize gating: the resize handles are hidden unless `model.resizeEnabled` is
+ * true (toggled from the toolbar). Moving / selecting stays available.
+ */
+export declare const EstuarineInteraction: import("@formicoidea/labre-core/store").ExtensionType;
+//# sourceMappingURL=element-view.d.ts.map

package/dist/estuarine/element-view.js

@@ -0,0 +1,24 @@
+import { GfxElementModelView, GfxViewInteractionExtension, } from '@formicoidea/labre-core/std/gfx';
+/**
+ * View for the Estuarine background. Registering it ensures `gfx.view.get(model)`
+ * returns a view (required so move / select interactions work).
+ */
+export class EstuarineView extends GfxElementModelView {
+    static { this.type = 'estuarine'; }
+}
+/**
+ * Resize gating: the resize handles are hidden unless `model.resizeEnabled` is
+ * true (toggled from the toolbar). Moving / selecting stays available.
+ */
+export const EstuarineInteraction = GfxViewInteractionExtension(EstuarineView.type, {
+    handleResize({ model }) {
+        return {
+            beforeResize({ set }) {
+                if (!model.resizeEnabled) {
+                    set({ allowedHandlers: [] });
+                }
+            },
+        };
+    },
+});
+//# sourceMappingURL=element-view.js.map

package/dist/estuarine/toolbar/config.d.ts

@@ -0,0 +1,38 @@
+import { type ToolbarContext } from '@formicoidea/labre-core/shared/services';
+import { type TemplateResult } from 'lit';
+export declare const estuarineToolbarConfig: {
+    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;
+    }, {
+        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;
+    }, {
+        id: string;
+        tooltip: string;
+        icon: TemplateResult;
+        active(ctx: ToolbarContext): boolean;
+        run(ctx: ToolbarContext): void;
+    }];
+    readonly when: (ctx: ToolbarContext) => boolean;
+};
+export declare const estuarineToolbarExtension: import("@formicoidea/labre-core/store").ExtensionType;
+//# sourceMappingURL=config.d.ts.map

package/dist/estuarine/toolbar/config.js

@@ -0,0 +1,48 @@
+import { EdgelessCRUDIdentifier } from '@formicoidea/labre-core/blocks/surface';
+import { EstuarineElementModel } 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>`;
+// All curve icons use currentColor so the toolbar can grey them when inactive;
+// they are distinguished by shape (wave / arc / hooked curve).
+const LiminalIcon = html `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M3 13c3-6 6 4 9 0s6-6 9 0" /></svg>`;
+const VolatileIcon = html `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M7 4a9 9 0 0 1 0 18" /></svg>`;
+const CounterfactualIcon = html `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 7c7 0 11 4 12 14" /></svg>`;
+const AxisIcon = 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="M6 3v18M6 12h15" /><path d="M3 6l3-3 3 3M18 9l3 3-3 3" /></svg>`;
+function booleanToggle(id, tooltip, icon, prop) {
+    return {
+        id,
+        tooltip,
+        icon,
+        active(ctx) {
+            const models = ctx.getSurfaceModelsByType(EstuarineElementModel);
+            return models.length > 0 && models.every(model => model[prop]);
+        },
+        run(ctx) {
+            const models = ctx.getSurfaceModelsByType(EstuarineElementModel);
+            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 estuarineToolbarConfig = {
+    actions: [
+        booleanToggle('a.toggle-resize', 'Enable / lock resizing', ResizeIcon, 'resizeEnabled'),
+        booleanToggle('b.toggle-liminal', 'Show / hide the Liminal line', LiminalIcon, 'showLiminal'),
+        booleanToggle('c.toggle-volatile', 'Show / hide the Volatile line', VolatileIcon, 'showVolatile'),
+        booleanToggle('d.toggle-counterfactual', 'Show / hide the Counter-factual line', CounterfactualIcon, 'showCounterfactual'),
+        booleanToggle('e.toggle-axis-labels', 'Show / hide axis labels (e / t)', AxisIcon, 'showAxisLabels'),
+    ],
+    when: ctx => ctx.getSurfaceModelsByType(EstuarineElementModel).length > 0,
+};
+export const estuarineToolbarExtension = ToolbarModuleExtension({
+    id: BlockFlavourIdentifier('affine:surface:estuarine'),
+    config: estuarineToolbarConfig,
+});
+//# sourceMappingURL=config.js.map

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.js.map

package/dist/templates/index.d.ts

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

package/dist/templates/index.js

@@ -0,0 +1,95 @@
+import { makeTemplateSnapshot, surfaceText, } from '@formicoidea/labre-core/gfx/template';
+import { FontFamily, ShapeStyle, TextAlign } from '@formicoidea/labre-core/model';
+import { REF_H as CYN_H, REF_W as CYN_W } from '../cynefin/consts';
+import { REF_H as EST_H, REF_W as EST_W } from '../estuarine/consts';
+const HEX_SIZE = 60;
+const HEX_FILL = '#34c724';
+const HEX_STROKE = '#1f1f1f';
+const HEX_VERTICES = [
+    [1, 0.5],
+    [0.75, 0.933],
+    [0.25, 0.933],
+    [0, 0.5],
+    [0.25, 0.067],
+    [0.75, 0.067],
+];
+function sticky(x, y, text) {
+    return {
+        type: 'shape',
+        shapeType: 'rect',
+        filled: true,
+        fillColor: '#fff3b0',
+        strokeColor: '#d9b740',
+        strokeWidth: 1.5,
+        shapeStyle: ShapeStyle.General,
+        roughness: 0,
+        radius: 8,
+        text: surfaceText(text),
+        color: '#1a1a1a',
+        fontFamily: FontFamily.Inter,
+        fontSize: 18,
+        textAlign: TextAlign.Center,
+        xywh: `[${x},${y},200,70]`,
+    };
+}
+function hexagon(x, y) {
+    return {
+        type: 'shape',
+        shapeType: 'polygon',
+        vertices: HEX_VERTICES,
+        filled: true,
+        fillColor: HEX_FILL,
+        strokeColor: HEX_STROKE,
+        strokeWidth: 2,
+        shapeStyle: ShapeStyle.General,
+        roughness: 0,
+        xywh: `[${x},${y},${HEX_SIZE},${HEX_SIZE}]`,
+    };
+}
+function caption(x, y, str) {
+    return {
+        type: 'text',
+        text: surfaceText(str),
+        color: '#1a1a1a',
+        fontFamily: FontFamily.Inter,
+        fontSize: 16,
+        textAlign: TextAlign.Center,
+        xywh: `[${x},${y},120,24]`,
+    };
+}
+function tpl(name, preview, elements) {
+    return { name, type: 'template', preview, content: makeTemplateSnapshot(elements, name) };
+}
+const ATTRS = 'width="100%" height="100%" viewBox="0 0 135 80" xmlns="http://www.w3.org/2000/svg"';
+const cynefinBg = (xywh) => ({ type: 'cynefin', xywh });
+const estuarineBg = (xywh) => ({ type: 'estuarine', xywh });
+export const cynefinTemplateCategory = {
+    name: 'Cynefin',
+    templates: [
+        tpl('Decision sorting', `<svg ${ATTRS} fill="none"><rect x="8" y="10" width="119" height="60" rx="4" stroke="#2a9d99" stroke-width="1.5"/><path d="M67 10 V70 M8 40 H127" stroke="#9aa0a6"/><rect x="18" y="18" width="34" height="14" rx="2" fill="#fff3b0"/><rect x="83" y="18" width="34" height="14" rx="2" fill="#fff3b0"/><rect x="18" y="48" width="34" height="14" rx="2" fill="#fff3b0"/><rect x="83" y="48" width="34" height="14" rx="2" fill="#fff3b0"/></svg>`, {
+            bg: cynefinBg(`[0,0,${CYN_W},${CYN_H}]`),
+            s1: sticky(190, 175, 'Probe & learn'),
+            s2: sticky(690, 175, 'Expert analysis'),
+            s3: sticky(190, 505, 'Act now'),
+            s4: sticky(690, 505, 'Known issue'),
+        }),
+        tpl('Cynefin framework', `<svg ${ATTRS} fill="none"><rect x="14" y="12" width="107" height="56" rx="4" stroke="#2a9d99" stroke-width="1.6"/><path d="M67 12 V68 M14 40 H121" stroke="#9aa0a6"/></svg>`, { bg: cynefinBg(`[0,0,${CYN_W},${CYN_H}]`) }),
+    ],
+};
+export const estuarineTemplateCategory = {
+    name: 'Estuarine',
+    templates: [
+        tpl('Constraint map', `<svg ${ATTRS} fill="none"><path d="M20 12 V70 M20 70 H120" stroke="#941253" stroke-width="2"/><g fill="#34c724" stroke="#1f1f1f"><path d="M44 28 l6 4 l0 8 l-6 4 l-6 -4 l0 -8 z"/><path d="M74 40 l6 4 l0 8 l-6 4 l-6 -4 l0 -8 z"/><path d="M56 52 l6 4 l0 8 l-6 4 l-6 -4 l0 -8 z"/></g></svg>`, {
+            bg: estuarineBg(`[0,0,${EST_W},${EST_H}]`),
+            h1: hexagon(150, 220),
+            c1: caption(120, 284, 'Policy'),
+            h2: hexagon(330, 360),
+            c2: caption(300, 424, 'Habit'),
+            h3: hexagon(230, 520),
+            c3: caption(200, 584, 'Budget'),
+        }),
+        tpl('Estuarine map', `<svg ${ATTRS} fill="none"><path d="M24 10 V70 M24 70 H120" stroke="#941253" stroke-width="2.4"/><path d="M30 52 q40 -30 84 -34" stroke="#5ecc44" stroke-width="2" fill="none"/></svg>`, { bg: estuarineBg(`[0,0,${EST_W},${EST_H}]`) }),
+        tpl('Hexagon constraint', `<svg ${ATTRS} fill="none"><path d="M67 24 l18 11 l0 22 l-18 11 l-18 -11 l0 -22 z" fill="#34c724" stroke="#1f1f1f" stroke-width="2"/></svg>`, { hex: hexagon(0, 0) }),
+    ],
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,12 @@
+import { EmptyTool } from '@blocksuite/affine-gfx-pointer';
+import { LitElement } from 'lit';
+declare const EdgelessCynefinMenu_base: typeof LitElement & import("@blocksuite/global/utils").Constructor<import("@blocksuite/affine-widget-edgeless-toolbar").EdgelessToolbarToolClass>;
+/** The popover above the toolbar that creates the Cynefin diagram. */
+export declare class EdgelessCynefinMenu extends EdgelessCynefinMenu_base {
+    static styles: import("lit").CSSResult;
+    type: typeof EmptyTool;
+    private _createCynefin;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};
+//# sourceMappingURL=cynefin-menu.d.ts.map

package/dist/toolbar/cynefin-menu.js

@@ -0,0 +1,66 @@
+import { DefaultTool } from '@blocksuite/affine-block-surface';
+import { EmptyTool } from '@blocksuite/affine-gfx-pointer';
+import { EdgelessToolbarToolMixin } from '@blocksuite/affine-widget-edgeless-toolbar';
+import { Bound } from '@blocksuite/global/gfx';
+import { css, html, LitElement } from 'lit';
+import { REF_H, REF_W } from '../cynefin/consts';
+import { cynefinMenuIcon } from './icons';
+/** The popover above the toolbar that creates the Cynefin diagram. */
+export class EdgelessCynefinMenu 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;
+    }
+  `; }
+    _createCynefin() {
+        const { gfx } = this;
+        if (!gfx.surface)
+            return;
+        const { centerX, centerY } = gfx.viewport;
+        const id = gfx.surface.addElement({
+            type: 'cynefin',
+            xywh: new Bound(centerX - REF_W / 2, centerY - REF_H / 2, REF_W, REF_H).serialize(),
+        });
+        gfx.doc.captureSync();
+        gfx.tool.setTool(DefaultTool);
+        gfx.selection.set({ elements: [id], editing: false });
+    }
+    render() {
+        return html `
+      <edgeless-slide-menu>
+        <div class="menu-content">
+          <div class="button-group-container">
+            <edgeless-tool-icon-button
+              .tooltip=${'Cynefin framework'}
+              @click=${this._createCynefin}
+            >
+              ${cynefinMenuIcon}
+            </edgeless-tool-icon-button>
+          </div>
+        </div>
+      </edgeless-slide-menu>
+    `;
+    }
+}
+//# sourceMappingURL=cynefin-menu.js.map

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

@@ -0,0 +1,13 @@
+import { EmptyTool } from '@blocksuite/affine-gfx-pointer';
+import { LitElement } from 'lit';
+declare const EdgelessCynefinSeniorButton_base: typeof LitElement & import("@blocksuite/global/utils").Constructor<import("@blocksuite/affine-widget-edgeless-toolbar").EdgelessToolbarToolClass>;
+/** Main toolbar button that opens the Cynefin toolbox sub-menu. */
+export declare class EdgelessCynefinSeniorButton extends EdgelessCynefinSeniorButton_base {
+    static styles: import("lit").CSSResult;
+    enableActiveBackground: boolean;
+    type: typeof EmptyTool;
+    private _toggleMenu;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};
+//# sourceMappingURL=cynefin-senior-button.d.ts.map

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

@@ -0,0 +1,90 @@
+import { DefaultTool } from '@blocksuite/affine-block-surface';
+import { EmptyTool } from '@blocksuite/affine-gfx-pointer';
+import { EdgelessToolbarToolMixin } from '@blocksuite/affine-widget-edgeless-toolbar';
+import { SignalWatcher } from '@blocksuite/global/lit';
+import { css, html, LitElement } from 'lit';
+import { cynefinToolbarIcon } from './icons';
+/** Main toolbar button that opens the Cynefin toolbox sub-menu. */
+export class EdgelessCynefinSeniorButton extends EdgelessToolbarToolMixin(SignalWatcher(LitElement)) {
+    constructor() {
+        super(...arguments);
+        this.enableActiveBackground = true;
+        this.type = EmptyTool;
+    }
+    static { this.styles = css `
+    :host,
+    .cynefin-button {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+    :host {
+      position: relative;
+    }
+    .cynefin-root {
+      width: 100%;
+      height: 64px;
+      position: relative;
+      overflow: hidden;
+      cursor: pointer;
+      display: flex;
+      align-items: flex-end;
+      justify-content: center;
+    }
+    .cynefin-card {
+      --y: 6px;
+      --s: 1;
+      position: absolute;
+      bottom: 0;
+      width: 54px;
+      height: 54px;
+      transform: translateY(var(--y)) scale(var(--s));
+      transition: transform 0.3s ease;
+    }
+    .cynefin-card svg {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+    .cynefin-root:hover .cynefin-card {
+      --y: -2px;
+      --s: 1.07;
+    }
+  `; }
+    _toggleMenu() {
+        if (this.popper) {
+            this.popper.dispose();
+            this.popper = null;
+            return;
+        }
+        this.setEdgelessTool(DefaultTool);
+        const menu = this.createPopper('edgeless-cynefin-menu', this);
+        menu.element.edgeless = this.edgeless;
+        const el = menu.element;
+        const wrap = el.parentElement;
+        if (wrap) {
+            wrap.style.overflow = 'visible';
+            wrap.style.justifyContent = 'flex-end';
+        }
+        Object.assign(el.style, {
+            position: 'static',
+            width: 'max-content',
+            maxWidth: 'calc(100vw - 16px)',
+            marginLeft: '0',
+        });
+    }
+    render() {
+        return html `<edgeless-toolbar-button
+      class="cynefin-button"
+      .tooltip=${this.popper ? '' : 'Cynefin'}
+      .tooltipOffset=${4}
+      .active=${!!this.popper}
+      @click=${this._toggleMenu}
+    >
+      <div class="cynefin-root">
+        <div class="cynefin-card">${cynefinToolbarIcon}</div>
+      </div>
+    </edgeless-toolbar-button>`;
+    }
+}
+//# sourceMappingURL=cynefin-senior-button.js.map

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

@@ -0,0 +1,14 @@
+import { EmptyTool } from '@blocksuite/affine-gfx-pointer';
+import { LitElement } from 'lit';
+declare const EdgelessEstuarineMenu_base: typeof LitElement & import("@blocksuite/global/utils").Constructor<import("@blocksuite/affine-widget-edgeless-toolbar").EdgelessToolbarToolClass>;
+/** The popover above the toolbar: create the Estuarine map or a hexagon node. */
+export declare class EdgelessEstuarineMenu extends EdgelessEstuarineMenu_base {
+    static styles: import("lit").CSSResult;
+    type: typeof EmptyTool;
+    private _finish;
+    private _createMap;
+    private _createHexagon;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};
+//# sourceMappingURL=estuarine-menu.d.ts.map

package/dist/toolbar/estuarine-menu.js

@@ -0,0 +1,113 @@
+import { DefaultTool } from '@blocksuite/affine-block-surface';
+import { EmptyTool } from '@blocksuite/affine-gfx-pointer';
+import { ShapeStyle } from '@blocksuite/affine-model';
+import { EdgelessToolbarToolMixin } from '@blocksuite/affine-widget-edgeless-toolbar';
+import { Bound } from '@blocksuite/global/gfx';
+import { css, html, LitElement } from 'lit';
+import { REF_H, REF_W } from '../estuarine/consts';
+import { estuarineMenuIcon, hexagonMenuIcon } from './icons';
+/** Estuarine map default size (REF aspect, scaled up so it reads on canvas). */
+const MAP_SCALE = 1.2;
+/** Default hexagon node size + fill (a constraint token). */
+const HEX_SIZE = 60;
+const HEX_FILL = '#34c724';
+const HEX_STROKE = '#1f1f1f';
+/** Flat-top regular hexagon, normalized vertices. */
+const HEX_VERTICES = [
+    [1, 0.5],
+    [0.75, 0.933],
+    [0.25, 0.933],
+    [0, 0.5],
+    [0.25, 0.067],
+    [0.75, 0.067],
+];
+/** The popover above the toolbar: create the Estuarine map or a hexagon node. */
+export class EdgelessEstuarineMenu 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;
+    }
+  `; }
+    _finish(id) {
+        const { gfx } = this;
+        gfx.doc.captureSync();
+        gfx.tool.setTool(DefaultTool);
+        gfx.selection.set({ elements: [id], editing: false });
+    }
+    _createMap() {
+        const { gfx } = this;
+        if (!gfx.surface)
+            return;
+        const width = REF_W * MAP_SCALE;
+        const height = REF_H * MAP_SCALE;
+        const { centerX, centerY } = gfx.viewport;
+        const id = gfx.surface.addElement({
+            type: 'estuarine',
+            xywh: new Bound(centerX - width / 2, centerY - height / 2, width, height).serialize(),
+        });
+        this._finish(id);
+    }
+    _createHexagon() {
+        const { gfx } = this;
+        if (!gfx.surface)
+            return;
+        const { centerX: cx, centerY: cy } = gfx.viewport;
+        const id = gfx.surface.addElement({
+            type: 'shape',
+            shapeType: 'polygon',
+            vertices: HEX_VERTICES,
+            filled: true,
+            fillColor: HEX_FILL,
+            strokeColor: HEX_STROKE,
+            strokeWidth: 2,
+            shapeStyle: ShapeStyle.General,
+            roughness: 0,
+            xywh: new Bound(cx - HEX_SIZE / 2, cy - HEX_SIZE / 2, HEX_SIZE, HEX_SIZE).serialize(),
+        });
+        this._finish(id);
+    }
+    render() {
+        return html `
+      <edgeless-slide-menu>
+        <div class="menu-content">
+          <div class="button-group-container">
+            <edgeless-tool-icon-button
+              .tooltip=${'Estuarine map'}
+              @click=${this._createMap}
+            >
+              ${estuarineMenuIcon}
+            </edgeless-tool-icon-button>
+            <edgeless-tool-icon-button
+              .tooltip=${'Hexagon node'}
+              @click=${this._createHexagon}
+            >
+              ${hexagonMenuIcon}
+            </edgeless-tool-icon-button>
+          </div>
+        </div>
+      </edgeless-slide-menu>
+    `;
+    }
+}
+//# sourceMappingURL=estuarine-menu.js.map

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

@@ -0,0 +1,13 @@
+import { EmptyTool } from '@blocksuite/affine-gfx-pointer';
+import { LitElement } from 'lit';
+declare const EdgelessEstuarineSeniorButton_base: typeof LitElement & import("@blocksuite/global/utils").Constructor<import("@blocksuite/affine-widget-edgeless-toolbar").EdgelessToolbarToolClass>;
+/** Main toolbar button that opens the Estuarine toolbox sub-menu. */
+export declare class EdgelessEstuarineSeniorButton extends EdgelessEstuarineSeniorButton_base {
+    static styles: import("lit").CSSResult;
+    enableActiveBackground: boolean;
+    type: typeof EmptyTool;
+    private _toggleMenu;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};
+//# sourceMappingURL=estuarine-senior-button.d.ts.map