@formicoidea/labre-framework-cynefin 0.23.2 → 0.23.3

package/{src/toolbar/senior-button.ts → dist/toolbar/senior-button.js}

@@ -1,16 +1,17 @@
-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`
+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)) {
+    constructor() {
+        super(...arguments);
+        this.enableActiveBackground = true;
+        this.type = EmptyTool;
+    }
+    static { this.styles = css `
     :host,
     .ce-button {
       display: block;
@@ -49,38 +50,31 @@ export class EdgelessCynefinEstuarineSeniorButton extends EdgelessToolbarToolMix
       --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
+  `; }
+    _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;
+        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="ce-button"
       .tooltip=${this.popper ? '' : 'Cynefin / Estuarine'}
       .tooltipOffset=${4}
@@ -90,6 +84,6 @@ export class EdgelessCynefinEstuarineSeniorButton extends EdgelessToolbarToolMix
       <div class="ce-root">
         <div class="ce-card">${cynefinToolbarIcon}</div>
       </div>
-    </edgeless-toolbar-button>`;
-  }
-}
+    </edgeless-toolbar-button>`;
+    }
+}

package/dist/toolbar/senior-tool.d.ts

@@ -0,0 +1,2 @@
+/** A single senior tool hosting both the Cynefin and Estuarine frameworks. */
+export declare const cynefinEstuarineSeniorTool: import("@formicoidea/labre-core/store").ExtensionType;

package/{src/toolbar/senior-tool.ts → dist/toolbar/senior-tool.js}

@@ -1,15 +1,11 @@
-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
+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>`,
-    };
-  }
-);
+      ></edgeless-cynefin-estuarine-senior-button>`,
+    };
+});

package/dist/utils.d.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 declare function refScale(w: number, h: number, refW: number, refH: number): {
+    s: number;
+    ox: number;
+    oy: number;
+};
+export declare const FONT_FAMILY = "Inter, sans-serif";

package/{src/utils.ts → dist/utils.js}

@@ -1,11 +1,10 @@
-/**
- * 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';
+/**
+ * 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, h, refW, refH) {
+    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/dist/view.d.ts

@@ -0,0 +1,6 @@
+import { type ViewExtensionContext, ViewExtensionProvider } from '@formicoidea/labre-core/ext-loader';
+export declare class CynefinEstuarineViewExtension extends ViewExtensionProvider {
+    name: string;
+    effect(): void;
+    setup(context: ViewExtensionContext): void;
+}

package/dist/view.js

@@ -0,0 +1,37 @@
+import { 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 {
+    constructor() {
+        super(...arguments);
+        this.name = 'affine-cynefin-estuarine-gfx';
+    }
+    effect() {
+        super.effect();
+        effects();
+        extendTemplateCategory(cynefinTemplateCategory);
+        extendTemplateCategory(estuarineTemplateCategory);
+    }
+    setup(context) {
+        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);
+        }
+    }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@formicoidea/labre-framework-cynefin",
   "description": "Labre cynefin-estuarine framework for @formicoidea/labre-core.",
-  "version": "0.23.2",
+  "version": "0.23.3",
   "type": "module",
   "sideEffects": false,
   "author": "lajola",
@@ -10,15 +10,24 @@
   ],
   "license": "MPL-2.0",
   "exports": {
-    ".": "./src/index.ts",
-    "./view": "./src/view.ts",
-    "./descriptor": "./src/descriptor.ts"
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./view": {
+      "types": "./dist/view.d.ts",
+      "import": "./dist/view.js"
+    },
+    "./descriptor": {
+      "types": "./dist/descriptor.d.ts",
+      "import": "./dist/descriptor.js"
+    }
   },
   "files": [
-    "src"
+    "dist"
   ],
   "dependencies": {
-    "@formicoidea/labre-core": "0.23.2",
+    "@formicoidea/labre-core": "0.23.3",
     "lit": "^3.2.0"
   }
 }

package/src/cynefin/consts.ts

@@ -1,188 +0,0 @@
-/**
- * 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

@@ -1,156 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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: [] });
-          }
-        },
-      };
-    },
-  }
-);