@formicoidea/labre-framework-cynefin 0.23.0

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@formicoidea/labre-framework-cynefin",
+  "description": "Labre cynefin-estuarine framework for @formicoidea/labre-core.",
+  "version": "0.23.0",
+  "type": "module",
+  "sideEffects": false,
+  "author": "lajola",
+  "contributors": [
+    "toeverything"
+  ],
+  "license": "MPL-2.0",
+  "exports": {
+    ".": "./src/index.ts",
+    "./view": "./src/view.ts",
+    "./descriptor": "./src/descriptor.ts"
+  },
+  "files": [
+    "src"
+  ],
+  "dependencies": {
+    "@formicoidea/labre-core": "0.23.0",
+    "lit": "^3.2.0"
+  }
+}

package/src/cynefin/consts.ts

@@ -0,0 +1,188 @@
+/**
+ * Visual constants for the Liminal Cynefin diagram, reproduced from the official
+ * SVG (viewBox 0 0 1080 777). All geometry is authored in that fixed reference
+ * space and scaled uniformly to the element bounds by the renderer.
+ */
+
+export const REF_W = 1080;
+export const REF_H = 777;
+
+export const COLORS = {
+  boundary: '#333333',
+  teal: '#2a9d99',
+  /** Domain headings + subheadings (h1 / h2). */
+  heading: '#6d6e71',
+  /** Body, small annotations and the big A / C glyphs. */
+  body: '#231f20',
+} as const;
+
+/**
+ * Dark boundary strokes drawn *behind* the teal "iterate" curve:
+ * [svg path, lineWidth, miterJoin].
+ */
+export const DARK_BACK_PATHS: ReadonlyArray<readonly [string, number, boolean]> = [
+  // Main arc: top segment (Complex|Complicated) then left segment (Complex|Chaotic)
+  ['M 550.1 17 A 296 296 0 0 1 338 328.5 A 448.7 448.7 0 0 1 26 331', 15.5, false],
+  // Thin "Confusion" arc sweeping down towards the cliff
+  ['M 649 294 C 644 382, 588 462, 440 506', 5, false],
+];
+
+/** Teal "iterate" curve, drawn *over* the back arcs and the dashed paving. */
+export const TEAL_PATH =
+  'M 475.1 9.1 C 477.5 13.3, 484.4 26.1, 489.3 34.6 C 494.2 43.1, 499.7 51.7, 504.4 60.2 C 509.1 68.7, 513.4 77.2, 517.6 85.7 C 521.8 94.2, 525.7 102.7, 529.7 111.2 C 533.7 119.7, 538.1 128.3, 541.8 136.8 C 545.5 145.3, 549.0 153.8, 551.9 162.3 C 554.8 170.8, 557.1 179.3, 559.0 187.8 C 560.9 196.3, 562.0 204.8, 563.0 213.3 C 564.0 221.8, 564.8 230.4, 565.0 238.9 C 565.2 247.4, 565.0 255.9, 564.0 264.4 C 563.0 272.9, 561.2 281.4, 559.0 289.9 C 556.8 298.4, 554.6 307.0, 550.9 315.5 C 547.2 324.0, 542.3 332.5, 536.8 341.0 C 531.2 349.5, 524.9 358.3, 517.6 366.5 C 510.4 374.7, 501.6 383.0, 493.3 390.0 C 485.0 397.0, 476.4 403.1, 468.0 408.4 C 459.6 413.7, 451.2 418.0, 442.8 421.7 C 434.4 425.4, 425.9 427.4, 417.5 430.8 C 409.1 434.2, 400.3 437.5, 392.2 442.1 C 384.1 446.7, 377.1 455.5, 369.0 458.4 C 360.9 461.3, 352.1 459.4, 343.7 459.4 C 335.3 459.4, 326.9 459.1, 318.5 458.4 C 310.1 457.7, 301.6 456.8, 293.2 455.4 C 284.8 454.0, 276.4 452.2, 268.0 450.3 C 259.6 448.4, 251.1 446.2, 242.7 444.1 C 234.3 442.1, 225.8 440.0, 217.4 438.0 C 209.0 436.0, 200.6 434.4, 192.2 431.9 C 183.8 429.3, 175.3 426.1, 166.9 422.7 C 158.5 419.3, 150.0 415.5, 141.6 411.4 C 133.2 407.3, 124.8 403.3, 116.4 398.2 C 108.0 393.1, 99.5 386.9, 91.1 380.8 C 82.7 374.7, 74.3 368.7, 65.9 361.4 C 57.5 354.1, 45.7 342.8, 40.6 336.9 C 35.5 330.9, 36.4 327.6, 35.5 325.7';
+export const TEAL_WIDTH = 10.5;
+
+/**
+ * Dark boundary strokes drawn *over* the teal curve:
+ * [svg path, lineWidth, miterJoin].
+ */
+export const DARK_FRONT_PATHS: ReadonlyArray<readonly [string, number, boolean]> = [
+  // Thick descending branch with the bottom elbow (right edge of the cliff)
+  ['M 340 332 C 390 440, 437 525, 472 632 Q 479 658, 453 700', 15.5, true],
+  // Thin left line (left edge of the cliff)
+  ['M 345 356 C 372 440, 408 540, 413 655 C 414 685, 412 710, 412 738', 4, false],
+];
+
+/** Cliff hatching: [x1,y1,x2,y2], lineWidth 3. */
+export const HATCHES: ReadonlyArray<readonly [number, number, number, number]> = [
+  [375, 420, 371, 431],
+  [386, 443, 380, 461],
+  [395, 462, 386, 483],
+  [402, 477, 392, 506],
+  [412, 497, 400, 539],
+  [417, 511, 403, 558],
+  [427, 533, 409, 591],
+  [435, 551, 411, 612],
+  [444, 573, 415, 659],
+  [455, 603, 415, 700],
+];
+
+/** Dashed Complicated↔Clear boundary, as oriented square pavings: [x,y,size,rotateDeg]. */
+export const DASH_RECTS: ReadonlyArray<readonly [number, number, number, number]> = [
+  [511, 245, 13.8, 206.8], [530, 255.5, 13.7, 205.2], [549.5, 265.5, 13.6, 203.5],
+  [569.5, 274.5, 13.5, 201.9], [590, 282.5, 13.5, 200.2], [610.5, 289.5, 13.4, 198.6],
+  [631, 296, 13.3, 196.9], [673.5, 307, 13.2, 193.6], [695, 311.5, 13.1, 192.0],
+  [716, 315.5, 13.0, 190.3], [738, 319, 12.9, 188.7], [759.5, 322, 12.8, 187.0],
+  [781, 324.5, 12.8, 185.4], [803, 325.5, 12.7, 183.7], [824.5, 326.5, 12.6, 182.1],
+  [846, 327.5, 12.5, 180.5], [868, 327.5, 12.4, 178.8], [889.5, 326.5, 12.3, 177.2],
+  [912, 325.5, 12.2, 175.5], [933, 323.5, 12.1, 173.9], [954.5, 321.5, 12.1, 172.2],
+  [976, 318, 12.0, 170.6], [998, 314, 11.9, 168.9], [1019, 310, 11.8, 167.3],
+];
+
+/**
+ * The four domain blocks. Each has a heading (h1) and, when descriptions are
+ * shown, a subheading (h2) and three decision lines whose lead word is bold.
+ * All three text levels share the block's left `x`.
+ */
+export interface DomainBlock {
+  heading: string;
+  /** Left edge shared by heading, subheading and body lines. */
+  x: number;
+  /** Heading (h1) baseline. */
+  hy: number;
+  subheading: string;
+  /** Subheading (h2) baseline. */
+  sy: number;
+  /** Decision lines: bold lead word + remainder, with their baseline. */
+  lines: ReadonlyArray<{ lead: string; rest: string; y: number }>;
+}
+
+export const DOMAINS: ReadonlyArray<DomainBlock> = [
+  {
+    heading: 'Complex',
+    x: 37,
+    hy: 31,
+    subheading: 'Adaptive system',
+    sy: 53,
+    lines: [
+      { lead: 'Probe', rest: ' the context with parallel experiments', y: 71 },
+      { lead: 'Sense', rest: ' how the context reacts', y: 90 },
+      { lead: 'Respond', rest: ' by amplifying positive experiments', y: 109 },
+    ],
+  },
+  {
+    heading: 'Complicated',
+    x: 779,
+    hy: 31,
+    subheading: 'Ordered system',
+    sy: 53,
+    lines: [
+      { lead: 'Sense', rest: ' the context with analytical methods', y: 71 },
+      { lead: 'Analyse', rest: ' observations', y: 90 },
+      { lead: 'Respond', rest: ' by applying one of many good solutions', y: 109 },
+    ],
+  },
+  {
+    heading: 'Chaotic',
+    x: 37,
+    hy: 587,
+    subheading: 'Un-ordered system',
+    sy: 609,
+    lines: [
+      { lead: 'Act', rest: ' on the context to stabilize (it or yourself)', y: 627 },
+      { lead: 'Sense', rest: ' how the context reacts', y: 646 },
+      { lead: 'Respond', rest: ' by re-acting', y: 665 },
+    ],
+  },
+  {
+    heading: 'Clear',
+    x: 779,
+    hy: 587,
+    subheading: 'Ordered system',
+    sy: 609,
+    lines: [
+      { lead: 'Sense', rest: ' the context with analytical methods', y: 627 },
+      { lead: 'Categorize', rest: ' observations', y: 646 },
+      { lead: 'Respond', rest: ' by applying tried and true practices', y: 665 },
+    ],
+  },
+];
+
+/** Teal annotation labels (centered): [text, x, y]. */
+export const TEAL_LABELS: ReadonlyArray<readonly [string, number, number]> = [
+  ['iterate', 510, 16],
+  ['iterate', 533, 230],
+  ['strategy by design', 257, 225],
+  ['radical innovation', 268, 390],
+  ['by design', 268, 406],
+  ['extreme repurposing', 217, 496],
+  ['good practice', 814, 196],
+  ['best practice', 751, 459],
+];
+
+/** Small exaptation sub-labels (centered): [text, x, y]. */
+export const SMALL_LABELS: ReadonlyArray<readonly [string, number, number]> = [
+  ['dispositional exaptation', 257, 239],
+  ['stimulated exaptation', 268, 419],
+  ['stress-based exaptation', 217, 510],
+];
+
+/**
+ * The two central markers — Aporia (A) and Confusion (C) — each a big glyph and
+ * a name, with an optional teal note ("prepare to exit"). All centered.
+ */
+export interface Marker {
+  letter: string;
+  /** Big glyph position. */
+  lx: number;
+  ly: number;
+  name: string;
+  /** Name (body) position. */
+  nx: number;
+  ny: number;
+  /** Optional teal note position + text. */
+  note?: { text: string; x: number; y: number };
+}
+
+export const MARKERS: ReadonlyArray<Marker> = [
+  {
+    letter: 'A',
+    lx: 444,
+    ly: 334,
+    name: 'Aporia',
+    nx: 447,
+    ny: 349,
+    note: { text: 'prepare to exit', x: 449, y: 366 },
+  },
+  { letter: 'C', lx: 531, ly: 419, name: 'Confusion', nx: 529, ny: 436 },
+];

package/src/cynefin/element-renderer.ts

@@ -0,0 +1,156 @@
+import {
+  type ElementRenderer,
+  ElementRendererExtension,
+} from '@formicoidea/labre-core/blocks/surface';
+import type { CynefinElementModel } from '@formicoidea/labre-core/model';
+
+import { FONT_FAMILY, refScale } from '../utils';
+import {
+  COLORS,
+  DARK_BACK_PATHS,
+  DARK_FRONT_PATHS,
+  DASH_RECTS,
+  DOMAINS,
+  HATCHES,
+  MARKERS,
+  REF_H,
+  REF_W,
+  SMALL_LABELS,
+  TEAL_LABELS,
+  TEAL_PATH,
+  TEAL_WIDTH,
+} from './consts';
+
+/**
+ * Canvas renderer for the Liminal Cynefin diagram — reproduces the official SVG:
+ * the dark hand-drawn boundary, the teal "iterate" curve, the dashed
+ * Complicated↔Clear paving and the hatched cliff, plus the four domain blocks
+ * (heading + Probe/Sense/Respond decisions), the teal annotation labels and the
+ * central Aporia (A) / Confusion (C) markers. Drawn in the fixed reference space
+ * and scaled uniformly to the element bounds.
+ */
+export const cynefin: ElementRenderer<CynefinElementModel> = (
+  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 = 'butt';
+
+  // ── Dark boundary strokes (behind the teal curve) ───────────────────
+  ctx.strokeStyle = COLORS.boundary;
+  for (const [d, lw, miter] of DARK_BACK_PATHS) {
+    ctx.lineJoin = miter ? 'miter' : 'round';
+    ctx.lineWidth = lw;
+    ctx.stroke(new Path2D(d));
+  }
+  ctx.lineJoin = 'round';
+
+  // ── Dashed boundary (oriented square pavings) ───────────────────────
+  ctx.fillStyle = COLORS.boundary;
+  for (const [x, y, sz, rot] of DASH_RECTS) {
+    ctx.save();
+    ctx.translate(x, y);
+    ctx.rotate((rot * Math.PI) / 180);
+    ctx.fillRect(-sz / 2, -sz / 2, sz, sz);
+    ctx.restore();
+  }
+
+  // ── Teal "iterate" liminal curve ────────────────────────────────────
+  if (model.showLiminalLine) {
+    ctx.strokeStyle = COLORS.teal;
+    ctx.lineWidth = TEAL_WIDTH;
+    ctx.stroke(new Path2D(TEAL_PATH));
+  }
+
+  // ── Dark boundary strokes (over the teal curve) ─────────────────────
+  ctx.strokeStyle = COLORS.boundary;
+  for (const [d, lw, miter] of DARK_FRONT_PATHS) {
+    ctx.lineJoin = miter ? 'miter' : 'round';
+    ctx.lineWidth = lw;
+    ctx.stroke(new Path2D(d));
+  }
+  ctx.lineJoin = 'round';
+
+  // ── Cliff hatching ──────────────────────────────────────────────────
+  ctx.lineWidth = 3;
+  for (const [x1, y1, x2, y2] of HATCHES) {
+    ctx.beginPath();
+    ctx.moveTo(x1, y1);
+    ctx.lineTo(x2, y2);
+    ctx.stroke();
+  }
+
+  ctx.textBaseline = 'alphabetic';
+
+  // ── Titles: domain headings + A / C marker glyphs and names ─────────
+  if (model.showTitles) {
+    ctx.textAlign = 'left';
+    ctx.fillStyle = COLORS.heading;
+    ctx.font = `700 30px ${FONT_FAMILY}`;
+    for (const d of DOMAINS) ctx.fillText(d.heading, d.x, d.hy);
+
+    ctx.textAlign = 'center';
+    for (const m of MARKERS) {
+      ctx.fillStyle = COLORS.body;
+      ctx.font = `700 38px ${FONT_FAMILY}`;
+      ctx.fillText(m.letter, m.lx, m.ly);
+      ctx.font = `13.5px ${FONT_FAMILY}`;
+      ctx.fillText(m.name, m.nx, m.ny);
+    }
+  }
+
+  // ── Explanatory text: subheadings, decisions, annotations, notes ────
+  if (model.showDescriptions) {
+    // Subheadings (h2) + bold-lead decision lines
+    ctx.textAlign = 'left';
+    for (const d of DOMAINS) {
+      ctx.fillStyle = COLORS.heading;
+      ctx.font = `700 15px ${FONT_FAMILY}`;
+      ctx.fillText(d.subheading, d.x, d.sy);
+
+      ctx.fillStyle = COLORS.body;
+      for (const { lead, rest, y } of d.lines) {
+        ctx.font = `700 13.5px ${FONT_FAMILY}`;
+        ctx.fillText(lead, d.x, y);
+        const leadW = ctx.measureText(lead).width;
+        ctx.font = `13.5px ${FONT_FAMILY}`;
+        ctx.fillText(rest, d.x + leadW, y);
+      }
+    }
+
+    ctx.textAlign = 'center';
+
+    // Teal annotation labels
+    ctx.fillStyle = COLORS.teal;
+    ctx.font = `700 15px ${FONT_FAMILY}`;
+    for (const [t, x, y] of TEAL_LABELS) ctx.fillText(t, x, y);
+
+    // Small exaptation sub-labels
+    ctx.fillStyle = COLORS.body;
+    ctx.font = `10.5px ${FONT_FAMILY}`;
+    for (const [t, x, y] of SMALL_LABELS) ctx.fillText(t, x, y);
+
+    // Marker notes ("prepare to exit")
+    ctx.fillStyle = COLORS.teal;
+    ctx.font = `700 15px ${FONT_FAMILY}`;
+    for (const m of MARKERS) {
+      if (m.note) ctx.fillText(m.note.text, m.note.x, m.note.y);
+    }
+  }
+};
+
+export const CynefinRendererExtension = ElementRendererExtension(
+  'cynefin',
+  cynefin
+);

package/src/cynefin/element-view.ts

@@ -0,0 +1,32 @@
+import type { CynefinElementModel } from '@formicoidea/labre-core/model';
+import {
+  GfxElementModelView,
+  GfxViewInteractionExtension,
+} from '@formicoidea/labre-core/std/gfx';
+
+/**
+ * View for the Cynefin background. Registering it ensures `gfx.view.get(model)`
+ * returns a view (required so move / select interactions work).
+ */
+export class CynefinView extends GfxElementModelView<CynefinElementModel> {
+  static override type: string = 'cynefin';
+}
+
+/**
+ * Resize gating: the resize handles are hidden unless `model.resizeEnabled` is
+ * true (toggled from the toolbar). Moving / selecting stays available.
+ */
+export const CynefinInteraction = GfxViewInteractionExtension<CynefinView>(
+  CynefinView.type,
+  {
+    handleResize({ model }) {
+      return {
+        beforeResize({ set }) {
+          if (!model.resizeEnabled) {
+            set({ allowedHandlers: [] });
+          }
+        },
+      };
+    },
+  }
+);

package/src/cynefin/toolbar/config.ts

@@ -0,0 +1,60 @@
+import { EdgelessCRUDIdentifier } from '@formicoidea/labre-core/blocks/surface';
+import { CynefinElementModel } from '@formicoidea/labre-core/model';
+import {
+  type ToolbarContext,
+  type ToolbarModuleConfig,
+  ToolbarModuleExtension,
+} from '@formicoidea/labre-core/shared/services';
+import { BlockFlavourIdentifier } from '@formicoidea/labre-core/std';
+import { html, type TemplateResult } 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>`;
+const TitlesIcon = 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="M5 7h14M9 7v11" /></svg>`;
+const DescIcon = 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="M5 8h14M5 12h14M5 16h9" /></svg>`;
+const LiminalIcon = 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="M5 17 C9 6 15 6 19 7" /></svg>`;
+
+type CynefinToggleProp =
+  | 'resizeEnabled'
+  | 'showTitles'
+  | 'showDescriptions'
+  | 'showLiminalLine';
+
+function booleanToggle(
+  id: string,
+  tooltip: string,
+  icon: TemplateResult,
+  prop: CynefinToggleProp
+) {
+  return {
+    id,
+    tooltip,
+    icon,
+    active(ctx: ToolbarContext) {
+      const models = ctx.getSurfaceModelsByType(CynefinElementModel);
+      return models.length > 0 && models.every(model => model[prop]);
+    },
+    run(ctx: ToolbarContext) {
+      const models = ctx.getSurfaceModelsByType(CynefinElementModel);
+      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 cynefinToolbarConfig = {
+  actions: [
+    booleanToggle('a.toggle-resize', 'Enable / lock resizing', ResizeIcon, 'resizeEnabled'),
+    booleanToggle('b.toggle-titles', 'Show / hide titles', TitlesIcon, 'showTitles'),
+    booleanToggle('c.toggle-descriptions', 'Show / hide explanatory text', DescIcon, 'showDescriptions'),
+    booleanToggle('d.toggle-liminal', 'Show / hide liminal line', LiminalIcon, 'showLiminalLine'),
+  ],
+  when: ctx => ctx.getSurfaceModelsByType(CynefinElementModel).length > 0,
+} as const satisfies ToolbarModuleConfig;
+
+export const cynefinToolbarExtension = ToolbarModuleExtension({
+  id: BlockFlavourIdentifier('affine:surface:cynefin'),
+  config: cynefinToolbarConfig,
+});

package/src/descriptor.ts

@@ -0,0 +1,8 @@
+import { CynefinEstuarineViewExtension } from './view.js';
+
+/** Host wiring for the cynefin-estuarine framework. */
+export const cynefinFramework = {
+  flag: 'cynefin-estuarine',
+  telemetry: 'cynefin',
+  viewExtension: CynefinEstuarineViewExtension,
+} as const;

package/src/effects.ts

@@ -0,0 +1,20 @@
+import { EdgelessCynefinEstuarineMenu } from './toolbar/menu';
+import { EdgelessCynefinEstuarineSeniorButton } from './toolbar/senior-button';
+
+export function effects() {
+  customElements.define(
+    'edgeless-cynefin-estuarine-menu',
+    EdgelessCynefinEstuarineMenu
+  );
+  customElements.define(
+    'edgeless-cynefin-estuarine-senior-button',
+    EdgelessCynefinEstuarineSeniorButton
+  );
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'edgeless-cynefin-estuarine-menu': EdgelessCynefinEstuarineMenu;
+    'edgeless-cynefin-estuarine-senior-button': EdgelessCynefinEstuarineSeniorButton;
+  }
+}

package/src/estuarine/consts.ts

@@ -0,0 +1,69 @@
+/**
+ * Visual constants for the Estuarine framework map, reproduced from the official
+ * SVG (viewBox 0 0 690 801). All geometry is authored in that fixed reference
+ * space and scaled uniformly to the element bounds by the renderer. The e axis
+ * is vertical & double-headed (energy), the t axis horizontal & single-headed
+ * (time only flows one way).
+ */
+
+export const REF_W = 690;
+export const REF_H = 801;
+
+export const COLORS = {
+  axis: '#941253',
+  /** Italic e / t axis letters. */
+  axisLabel: '#c0392b',
+  liminal: '#5ecc44',
+  /** LIMINAL legend (darker than the curve). */
+  liminalLabel: '#2e7d32',
+  volatile: '#e63322',
+  counterfactual: '#1a1a1a',
+  /** VOLATILE + COUNTER FACTUAL legends. */
+  label: '#1a1a1a',
+} as const;
+
+/** e axis (vertical, double-headed): x, top y, bottom y. */
+export const E_AXIS = { x: 43.5, y1: 97, y2: 763 } as const;
+/** t axis (horizontal, single-headed → right): y, left x, right x. */
+export const T_AXIS = { y: 649, x1: 28, x2: 616 } as const;
+export const AXIS_WIDTH = 8;
+
+/** Filled arrowhead triangles: [[tipX,tipY],[baseAX,baseAY],[baseBX,baseBY]]. */
+export const ARROWHEADS: ReadonlyArray<
+  readonly [readonly [number, number], readonly [number, number], readonly [number, number]]
+> = [
+  [[43.5, 72], [30, 100], [57, 100]], // e — top
+  [[43.5, 785], [30, 758], [57, 758]], // e — bottom
+  [[643, 649], [613, 636], [613, 662]], // t — right
+];
+
+/** Liminal: green boundary rising gently then dipping at the right end. */
+export const LIMINAL_PATH =
+  'M 63 193 C 67 192, 78 189, 85 188 C 92 187, 100 186, 107 185 C 114 184, 122 183, 129 183 C 136 183, 144 183, 151 183 C 158 183, 166 183, 173 183 C 180 183, 188 184, 195 185 C 202 186, 210 188, 217 189 C 224 190, 232 192, 239 194 C 246 196, 254 198, 261 201 C 268 204, 276 207, 283 210 C 290 213, 298 217, 305 220 C 312 223, 320 226, 327 230 C 334 234, 342 238, 349 242 C 356 246, 364 250, 371 255 C 378 260, 386 264, 393 269 C 400 274, 408 278, 415 283 C 422 288, 430 292, 437 297 C 444 302, 451 306, 458 310 C 465 314, 473 319, 480 323 C 487 327, 495 332, 502 335 C 509 338, 517 341, 524 343 C 531 345, 539 348, 546 349 C 553 350, 561 350, 568 350 C 575 350, 583 348, 590 346 C 597 344, 605 340, 612 336 C 619 332, 626 325, 633 319 C 640 313, 648 302, 651 298 C 654 294, 654 295, 654 294';
+export const LIMINAL_WIDTH = 4.5;
+
+/** Counter-factual: dark boundary sweeping from the top down to the right. */
+export const COUNTERFACTUAL_PATH =
+  'M 422 30 C 420 33, 414 41, 411 47 C 408 53, 405 59, 402 65 C 399 71, 397 77, 395 83 C 393 89, 392 95, 391 101 C 390 107, 389 113, 389 119 C 389 125, 389 131, 390 137 C 391 143, 392 149, 394 155 C 396 161, 399 167, 402 173 C 405 179, 408 185, 412 191 C 416 197, 421 203, 426 209 C 431 215, 436 221, 442 226 C 448 231, 454 237, 460 241 C 466 245, 472 249, 478 252 C 484 255, 490 258, 496 260 C 502 262, 508 264, 514 266 C 520 268, 526 270, 532 271 C 538 272, 544 274, 550 275 C 556 276, 562 277, 568 278 C 574 279, 580 279, 586 279 C 592 279, 598 280, 604 280 C 610 280, 616 281, 622 281 C 628 281, 634 280, 640 280 C 646 280, 655 279, 658 279';
+export const COUNTERFACTUAL_WIDTH = 5.5;
+
+/** Volatile: red boundary descending along the left, bulging right. */
+export const VOLATILE_PATH =
+  'M 58 446 C 61 447, 70 451, 76 454 C 82 457, 88 462, 94 466 C 100 470, 107 476, 112 481 C 117 486, 122 492, 126 498 C 130 504, 135 509, 139 515 C 143 521, 145 526, 148 532 C 151 538, 153 544, 155 550 C 157 556, 159 562, 160 568 C 161 574, 162 580, 163 586 C 164 592, 164 598, 164 604 C 164 610, 166 616, 166 622 C 166 628, 166 634, 165 640 C 164 646, 164 652, 163 658 C 162 664, 162 670, 161 676 C 160 682, 160 688, 159 694 C 158 700, 155 706, 154 712 C 153 718, 152 724, 151 730 C 150 736, 148 746, 147 749';
+export const VOLATILE_WIDTH = 5;
+
+/** Uppercase legends: anchored centre, alphabetic baseline, with letter-spacing. */
+export const LABELS = {
+  counterfactual: { text: 'COUNTER FACTUAL', x: 422, y: 25, size: 20, color: COLORS.label },
+  liminal: { text: 'LIMINAL', x: 316, y: 192, size: 18, color: COLORS.liminalLabel },
+  volatile: { text: 'VOLATILE', x: 219, y: 783, size: 20, color: COLORS.volatile },
+} as const;
+
+/** Italic Georgia axis letters (left-anchored, alphabetic baseline). */
+export const AXIS_LABELS = {
+  e: { text: 'e', x: 14, y: 138 },
+  t: { text: 't', x: 580, y: 685 },
+  size: 34,
+} as const;
+
+export const LABEL_LETTER_SPACING = 4;

package/src/estuarine/element-renderer.ts

@@ -0,0 +1,122 @@
+import {
+  type ElementRenderer,
+  ElementRendererExtension,
+} from '@formicoidea/labre-core/blocks/surface';
+import type { EstuarineElementModel } from '@formicoidea/labre-core/model';
+
+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: ElementRenderer<EstuarineElementModel> = (
+  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: { text: string; x: number; y: number; size: number; color: string }) => {
+    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
+);

package/src/estuarine/element-view.ts

@@ -0,0 +1,32 @@
+import type { EstuarineElementModel } from '@formicoidea/labre-core/model';
+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<EstuarineElementModel> {
+  static override type: string = '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>(
+  EstuarineView.type,
+  {
+    handleResize({ model }) {
+      return {
+        beforeResize({ set }) {
+          if (!model.resizeEnabled) {
+            set({ allowedHandlers: [] });
+          }
+        },
+      };
+    },
+  }
+);

package/src/estuarine/toolbar/config.ts

@@ -0,0 +1,65 @@
+import { EdgelessCRUDIdentifier } from '@formicoidea/labre-core/blocks/surface';
+import { EstuarineElementModel } from '@formicoidea/labre-core/model';
+import {
+  type ToolbarContext,
+  type ToolbarModuleConfig,
+  ToolbarModuleExtension,
+} from '@formicoidea/labre-core/shared/services';
+import { BlockFlavourIdentifier } from '@formicoidea/labre-core/std';
+import { html, type TemplateResult } 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>`;
+
+type EstuarineToggleProp =
+  | 'resizeEnabled'
+  | 'showLiminal'
+  | 'showVolatile'
+  | 'showCounterfactual'
+  | 'showAxisLabels';
+
+function booleanToggle(
+  id: string,
+  tooltip: string,
+  icon: TemplateResult,
+  prop: EstuarineToggleProp
+) {
+  return {
+    id,
+    tooltip,
+    icon,
+    active(ctx: ToolbarContext) {
+      const models = ctx.getSurfaceModelsByType(EstuarineElementModel);
+      return models.length > 0 && models.every(model => model[prop]);
+    },
+    run(ctx: ToolbarContext) {
+      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,
+} as const satisfies ToolbarModuleConfig;
+
+export const estuarineToolbarExtension = ToolbarModuleExtension({
+  id: BlockFlavourIdentifier('affine:surface:estuarine'),
+  config: estuarineToolbarConfig,
+});

package/src/index.ts

@@ -0,0 +1 @@
+export {};

package/src/templates/index.ts

@@ -0,0 +1,130 @@
+import {
+  makeTemplateSnapshot,
+  type SurfaceElementsJSON,
+  surfaceText,
+  type Template,
+  type TemplateCategory,
+} 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: number, y: number, text: string) {
+  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: number, y: number) {
+  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: number, y: number, str: string) {
+  return {
+    type: 'text',
+    text: surfaceText(str),
+    color: '#1a1a1a',
+    fontFamily: FontFamily.Inter,
+    fontSize: 16,
+    textAlign: TextAlign.Center,
+    xywh: `[${x},${y},120,24]`,
+  };
+}
+
+function tpl(name: string, preview: string, elements: SurfaceElementsJSON): Template {
+  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: string) => ({ type: 'cynefin', xywh });
+const estuarineBg = (xywh: string) => ({ type: 'estuarine', xywh });
+
+export const cynefinTemplateCategory: TemplateCategory = {
+  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: TemplateCategory = {
+  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) }
+    ),
+  ],
+};

package/src/toolbar/icons.ts

@@ -0,0 +1,30 @@
+import { svg } from 'lit';
+
+/** Colored Cynefin glyph for the main toolbar button. */
+export const cynefinToolbarIcon = svg`<svg width="100%" height="100%" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g stroke="#3f444a" stroke-width="3" stroke-linecap="round">
+    <path d="M30 8 C28 18 33 24 26 30 C20 35 14 33 9 33"/>
+    <path d="M26 30 C28 40 28 46 28 50"/>
+    <path d="M34 22 C40 23 46 24 50 25" stroke-dasharray="3 3"/>
+  </g>
+  <g stroke="#3f444a" stroke-width="1.4"><path d="M22 33 l-2 4M24 38 l-2 5M26 43 l-2 5"/></g>
+</svg>`;
+
+/** Menu icon — create the Cynefin diagram. */
+export const cynefinMenuIcon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M13 3 C12 8 14 11 11 13 C8 15 5 14 3 14" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
+  <path d="M11 13 C12 18 12 20 12 22" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
+  <path d="M15 10 C18 10.5 20 11 22 11.5" stroke="currentColor" stroke-width="1.6" stroke-dasharray="2.5 2.5" stroke-linecap="round"/>
+</svg>`;
+
+/** Menu icon — create the Estuarine map. */
+export const estuarineMenuIcon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M5 3 V20 M5 17 H21" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
+  <path d="M3 6 l2-2 2 2 M3 17 l2 2 2 -2 M18 15 l3 2 -3 2" stroke="currentColor" stroke-width="1.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M6 10 C11 6 14 13 21 9" stroke="currentColor" stroke-width="1.4" fill="none" stroke-linecap="round"/>
+</svg>`;
+
+/** Menu icon — hexagon constraint node. */
+export const hexagonMenuIcon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <polygon points="21,12 16.5,19.8 7.5,19.8 3,12 7.5,4.2 16.5,4.2" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
+</svg>`;

package/src/toolbar/menu.ts

@@ -0,0 +1,156 @@
+import { DefaultTool } from '@formicoidea/labre-core/blocks/surface';
+import { EmptyTool } from '@formicoidea/labre-core/gfx/pointer';
+import { ShapeStyle } from '@formicoidea/labre-core/model';
+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_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';
+import {
+  cynefinMenuIcon,
+  estuarineMenuIcon,
+  hexagonMenuIcon,
+} from './icons';
+
+/** Estuarine map default size (REF aspect, scaled up so it reads on canvas). */
+const MAP_SCALE = 1.2;
+const HEX_SIZE = 60;
+const HEX_FILL = '#34c724';
+const HEX_STROKE = '#1f1f1f';
+/** Flat-top regular hexagon, normalized vertices. */
+const HEX_VERTICES: number[][] = [
+  [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 hosting both frameworks: create the Cynefin
+ * diagram, the Estuarine map, or a hexagon constraint node.
+ */
+export class EdgelessCynefinEstuarineMenu 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 _finish(id: string) {
+    const { gfx } = this;
+    gfx.doc.captureSync();
+    gfx.tool.setTool(DefaultTool);
+    gfx.selection.set({ elements: [id], editing: false });
+  }
+
+  private _createCynefin() {
+    const { gfx } = this;
+    if (!gfx.surface) return;
+    const { centerX, centerY } = gfx.viewport;
+    const id = gfx.surface.addElement({
+      type: 'cynefin',
+      xywh: new Bound(
+        centerX - CYN_W / 2,
+        centerY - CYN_H / 2,
+        CYN_W,
+        CYN_H
+      ).serialize(),
+    });
+    this._finish(id);
+  }
+
+  private _createMap() {
+    const { gfx } = this;
+    if (!gfx.surface) return;
+    const width = EST_W * MAP_SCALE;
+    const height = EST_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);
+  }
+
+  private _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);
+  }
+
+  override 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>
+            <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>
+    `;
+  }
+}

package/src/toolbar/senior-button.ts

@@ -0,0 +1,95 @@
+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 { cynefinToolbarIcon } from './icons';
+
+/** Main toolbar button that opens the combined Cynefin / Estuarine sub-menu. */
+export class EdgelessCynefinEstuarineSeniorButton extends EdgelessToolbarToolMixin(
+  SignalWatcher(LitElement)
+) {
+  static override styles = css`
+    :host,
+    .ce-button {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+    :host {
+      position: relative;
+    }
+    .ce-root {
+      width: 100%;
+      height: 64px;
+      position: relative;
+      overflow: hidden;
+      cursor: pointer;
+      display: flex;
+      align-items: flex-end;
+      justify-content: center;
+    }
+    .ce-card {
+      --y: -4px;
+      --s: 1;
+      position: absolute;
+      bottom: 0;
+      width: 54px;
+      height: 54px;
+      transform: translateY(var(--y)) scale(var(--s));
+      transition: transform 0.3s ease;
+    }
+    .ce-card svg {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+    .ce-root:hover .ce-card {
+      --y: -10px;
+      --s: 1.07;
+    }
+  `;
+
+  override enableActiveBackground = true;
+
+  override type = EmptyTool;
+
+  private _toggleMenu() {
+    if (this.popper) {
+      this.popper.dispose();
+      this.popper = null;
+      return;
+    }
+    this.setEdgelessTool(DefaultTool);
+    const menu = this.createPopper('edgeless-cynefin-estuarine-menu', this);
+    menu.element.edgeless = this.edgeless;
+
+    const el = menu.element as HTMLElement;
+    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',
+    });
+  }
+
+  override render() {
+    return html`<edgeless-toolbar-button
+      class="ce-button"
+      .tooltip=${this.popper ? '' : 'Cynefin / Estuarine'}
+      .tooltipOffset=${4}
+      .active=${!!this.popper}
+      @click=${this._toggleMenu}
+    >
+      <div class="ce-root">
+        <div class="ce-card">${cynefinToolbarIcon}</div>
+      </div>
+    </edgeless-toolbar-button>`;
+  }
+}

package/src/toolbar/senior-tool.ts

@@ -0,0 +1,15 @@
+import { SeniorToolExtension } from '@formicoidea/labre-core/widgets/edgeless-toolbar';
+import { html } from 'lit';
+
+/** A single senior tool hosting both the Cynefin and Estuarine frameworks. */
+export const cynefinEstuarineSeniorTool = SeniorToolExtension(
+  'cynefin-estuarine',
+  ({ block }) => {
+    return {
+      name: 'Cynefin / Estuarine',
+      content: html`<edgeless-cynefin-estuarine-senior-button
+        .edgeless=${block}
+      ></edgeless-cynefin-estuarine-senior-button>`,
+    };
+  }
+);

package/src/utils.ts

@@ -0,0 +1,11 @@
+/**
+ * Uniform fit of a fixed reference design (`refW × refH`) into an element of
+ * size `w × h`: the scale factor plus the centering offsets (letterboxed).
+ * Keeps the artwork undistorted at any element size.
+ */
+export function refScale(w: number, h: number, refW: number, refH: number) {
+  const s = Math.min(w / refW, h / refH);
+  return { s, ox: (w - refW * s) / 2, oy: (h - refH * s) / 2 };
+}
+
+export const FONT_FAMILY = 'Inter, sans-serif';

package/src/view.ts

@@ -0,0 +1,44 @@
+import {
+  type ViewExtensionContext,
+  ViewExtensionProvider,
+} from '@formicoidea/labre-core/ext-loader';
+import { extendTemplateCategory } from '@formicoidea/labre-core/gfx/template';
+
+import { CynefinRendererExtension } from './cynefin/element-renderer';
+import { CynefinInteraction, CynefinView } from './cynefin/element-view';
+import { cynefinToolbarExtension } from './cynefin/toolbar/config';
+import { effects } from './effects';
+import { EstuarineRendererExtension } from './estuarine/element-renderer';
+import { EstuarineInteraction, EstuarineView } from './estuarine/element-view';
+import { estuarineToolbarExtension } from './estuarine/toolbar/config';
+import {
+  cynefinTemplateCategory,
+  estuarineTemplateCategory,
+} from './templates';
+import { cynefinEstuarineSeniorTool } from './toolbar/senior-tool';
+
+export class CynefinEstuarineViewExtension extends ViewExtensionProvider {
+  override name = 'affine-cynefin-estuarine-gfx';
+
+  override effect(): void {
+    super.effect();
+    effects();
+    extendTemplateCategory(cynefinTemplateCategory);
+    extendTemplateCategory(estuarineTemplateCategory);
+  }
+
+  override setup(context: ViewExtensionContext) {
+    super.setup(context);
+    context.register(CynefinView);
+    context.register(CynefinRendererExtension);
+    context.register(EstuarineView);
+    context.register(EstuarineRendererExtension);
+    if (this.isEdgeless(context.scope)) {
+      context.register(CynefinInteraction);
+      context.register(EstuarineInteraction);
+      context.register(cynefinEstuarineSeniorTool);
+      context.register(cynefinToolbarExtension);
+      context.register(estuarineToolbarExtension);
+    }
+  }
+}