@formicoidea/labre-core 0.31.0 → 0.33.0

package/dist/_pkgs/affine-model/elements/event-storming/event-storming.d.ts

@@ -0,0 +1,36 @@
+import type { SerializedXYWH } from '../../../global/gfx/index.js';
+import { FrameworkBackgroundElementModel } from '../framework-background/index.js';
+import type { FrameworkBackgroundProps } from '../framework-background/index.js';
+export type EventStormingBoardProps = FrameworkBackgroundProps;
+/**
+ * The Event Storming board: the paper roll a Big Picture is stormed on.
+ *
+ * One axis and nothing else — TIME, running left to right along the bottom.
+ * That is the whole frame of reference Event Storming has: an event drawn to
+ * the left of another happened before it, and how HIGH a sticky sits means
+ * nothing at all (the vertical is where a workshop parks its unknowns, not a
+ * scale). Declaring the one axis and no zones is therefore the honest
+ * declaration, and it is what lets `es.against-timeline` say "this flow runs
+ * backwards" without inventing a second dimension nobody drew against.
+ *
+ * **Swimlanes are cut from v1** (plan § Coupes v1). A lane is a horizontal
+ * BAND with a name, which on this element would be a variant declaration
+ * (`variantProp: 'lanes'`) and a rule family that measures membership per lane.
+ * Neither exists yet, and shipping half of it — bands that paint but that no
+ * rule can read — would put a semantic on the vertical the framework does not
+ * have. The v2 note lives here so the day lanes land, the reason they were not
+ * here is on the record.
+ *
+ * Adds no field of its own beyond the primitive's `resizeEnabled`, so a board
+ * is byte-identical to what {@link FrameworkBackgroundElementModel} already
+ * persists. It is created 3200 × 1400 — a Big Picture is WIDE, because the
+ * timeline is the point — and freely resizable in both directions: the roll
+ * grows sideways all morning as events are remembered, and locking its
+ * proportion would fight the hand.
+ */
+export declare class EventStormingBoardElementModel extends FrameworkBackgroundElementModel<EventStormingBoardProps> {
+    get type(): string;
+    accessor resizeEnabled: boolean;
+    accessor rotate: number;
+    accessor xywh: SerializedXYWH;
+}

package/dist/_pkgs/affine-model/elements/event-storming/event-storming.js

@@ -0,0 +1,103 @@
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+import { field } from '../../../std/gfx/index.js';
+import { FrameworkBackgroundElementModel } from '../framework-background/index.js';
+/**
+ * The Event Storming board: the paper roll a Big Picture is stormed on.
+ *
+ * One axis and nothing else — TIME, running left to right along the bottom.
+ * That is the whole frame of reference Event Storming has: an event drawn to
+ * the left of another happened before it, and how HIGH a sticky sits means
+ * nothing at all (the vertical is where a workshop parks its unknowns, not a
+ * scale). Declaring the one axis and no zones is therefore the honest
+ * declaration, and it is what lets `es.against-timeline` say "this flow runs
+ * backwards" without inventing a second dimension nobody drew against.
+ *
+ * **Swimlanes are cut from v1** (plan § Coupes v1). A lane is a horizontal
+ * BAND with a name, which on this element would be a variant declaration
+ * (`variantProp: 'lanes'`) and a rule family that measures membership per lane.
+ * Neither exists yet, and shipping half of it — bands that paint but that no
+ * rule can read — would put a semantic on the vertical the framework does not
+ * have. The v2 note lives here so the day lanes land, the reason they were not
+ * here is on the record.
+ *
+ * Adds no field of its own beyond the primitive's `resizeEnabled`, so a board
+ * is byte-identical to what {@link FrameworkBackgroundElementModel} already
+ * persists. It is created 3200 × 1400 — a Big Picture is WIDE, because the
+ * timeline is the point — and freely resizable in both directions: the roll
+ * grows sideways all morning as events are remembered, and locking its
+ * proportion would fight the hand.
+ */
+let EventStormingBoardElementModel = (() => {
+    let _classSuper = FrameworkBackgroundElementModel;
+    let _resizeEnabled_decorators;
+    let _resizeEnabled_initializers = [];
+    let _resizeEnabled_extraInitializers = [];
+    let _rotate_decorators;
+    let _rotate_initializers = [];
+    let _rotate_extraInitializers = [];
+    let _xywh_decorators;
+    let _xywh_initializers = [];
+    let _xywh_extraInitializers = [];
+    return class EventStormingBoardElementModel extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _resizeEnabled_decorators = [field(true)];
+            _rotate_decorators = [field(0)];
+            _xywh_decorators = [field()];
+            __esDecorate(this, null, _resizeEnabled_decorators, { kind: "accessor", name: "resizeEnabled", static: false, private: false, access: { has: obj => "resizeEnabled" in obj, get: obj => obj.resizeEnabled, set: (obj, value) => { obj.resizeEnabled = value; } }, metadata: _metadata }, _resizeEnabled_initializers, _resizeEnabled_extraInitializers);
+            __esDecorate(this, null, _rotate_decorators, { kind: "accessor", name: "rotate", static: false, private: false, access: { has: obj => "rotate" in obj, get: obj => obj.rotate, set: (obj, value) => { obj.rotate = value; } }, metadata: _metadata }, _rotate_initializers, _rotate_extraInitializers);
+            __esDecorate(this, null, _xywh_decorators, { kind: "accessor", name: "xywh", static: false, private: false, access: { has: obj => "xywh" in obj, get: obj => obj.xywh, set: (obj, value) => { obj.xywh = value; } }, metadata: _metadata }, _xywh_initializers, _xywh_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        get type() {
+            return 'eventStorming';
+        }
+        #resizeEnabled_accessor_storage = __runInitializers(this, _resizeEnabled_initializers, true);
+        get resizeEnabled() { return this.#resizeEnabled_accessor_storage; }
+        set resizeEnabled(value) { this.#resizeEnabled_accessor_storage = value; }
+        #rotate_accessor_storage = (__runInitializers(this, _resizeEnabled_extraInitializers), __runInitializers(this, _rotate_initializers, 0));
+        get rotate() { return this.#rotate_accessor_storage; }
+        set rotate(value) { this.#rotate_accessor_storage = value; }
+        #xywh_accessor_storage = (__runInitializers(this, _rotate_extraInitializers), __runInitializers(this, _xywh_initializers, '[0,0,3200,1400]'));
+        get xywh() { return this.#xywh_accessor_storage; }
+        set xywh(value) { this.#xywh_accessor_storage = value; }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _xywh_extraInitializers);
+        }
+    };
+})();
+export { EventStormingBoardElementModel };

package/dist/_pkgs/affine-model/elements/event-storming/index.d.ts

@@ -0,0 +1 @@
+export * from './event-storming.js';

package/dist/_pkgs/affine-model/elements/event-storming/index.js

@@ -0,0 +1 @@
+export * from './event-storming.js';

package/dist/_pkgs/affine-model/elements/framework-background/background.d.ts

@@ -0,0 +1,42 @@
+import type { IVec } from '../../../global/gfx/index.js';
+import { Bound } from '../../../global/gfx/index.js';
+import type { BaseElementProps } from '../../../std/gfx/index.js';
+import { GfxPrimitiveElementModel } from '../../../std/gfx/index.js';
+/**
+ * The props every framework background carries, whatever it draws.
+ *
+ * A concrete background adds its own on top — its labels, its per-part
+ * visibility toggles, its variant — and those stay the framework's business:
+ * they are what the document persists, and the primitive never renames them.
+ */
+export type FrameworkBackgroundProps = BaseElementProps & {
+    /** When false the resize handles are hidden — toggled from the toolbar. */
+    resizeEnabled?: boolean;
+};
+/**
+ * The MODEL half of the framework-background primitive (PF2.1).
+ *
+ * A framework background is, geometrically, a rotated rectangle the user drops
+ * other elements onto: it is selectable, movable, copy/pasteable and part of
+ * undo/redo like any surface element, but it is a passive canvas — connectors
+ * must not snap to it (an arrow connects nodes, never the map they sit on).
+ *
+ * That is the whole of it. Everything a framework's background LOOKS like is
+ * declared, not coded — see `FrameworkBackgroundDef` in
+ * `@labre/affine-block-surface`.
+ *
+ * Subclasses keep declaring their own `@field` props: this class adds no field
+ * and renames none, so a document written before it existed is byte-identical
+ * to one written after.
+ */
+export declare abstract class FrameworkBackgroundElementModel<Props extends BaseElementProps = FrameworkBackgroundProps> extends GfxPrimitiveElementModel<Props> {
+    /**
+     * The background is a passive canvas: connectors must not snap their
+     * endpoints to it.
+     */
+    get connectable(): boolean;
+    containsBound(bounds: Bound): boolean;
+    getLineIntersections(start: IVec, end: IVec): import("../../../global/gfx/index.js").PointLocation[] | null;
+    getNearestPoint(point: IVec): IVec;
+    includesPoint(x: number, y: number): boolean;
+}

package/dist/_pkgs/affine-model/elements/framework-background/background.js

@@ -0,0 +1,42 @@
+import { Bound, getPointsFromBoundWithRotation, linePolygonIntersects, pointInPolygon, polygonNearestPoint, } from '../../../global/gfx/index.js';
+import { GfxPrimitiveElementModel } from '../../../std/gfx/index.js';
+/**
+ * The MODEL half of the framework-background primitive (PF2.1).
+ *
+ * A framework background is, geometrically, a rotated rectangle the user drops
+ * other elements onto: it is selectable, movable, copy/pasteable and part of
+ * undo/redo like any surface element, but it is a passive canvas — connectors
+ * must not snap to it (an arrow connects nodes, never the map they sit on).
+ *
+ * That is the whole of it. Everything a framework's background LOOKS like is
+ * declared, not coded — see `FrameworkBackgroundDef` in
+ * `@labre/affine-block-surface`.
+ *
+ * Subclasses keep declaring their own `@field` props: this class adds no field
+ * and renames none, so a document written before it existed is byte-identical
+ * to one written after.
+ */
+export class FrameworkBackgroundElementModel extends GfxPrimitiveElementModel {
+    /**
+     * The background is a passive canvas: connectors must not snap their
+     * endpoints to it.
+     */
+    get connectable() {
+        return false;
+    }
+    containsBound(bounds) {
+        const points = getPointsFromBoundWithRotation(this);
+        return points.some(point => bounds.containsPoint(point));
+    }
+    getLineIntersections(start, end) {
+        const points = getPointsFromBoundWithRotation(this);
+        return linePolygonIntersects(start, end, points);
+    }
+    getNearestPoint(point) {
+        return polygonNearestPoint(Bound.deserialize(this.xywh).points, point);
+    }
+    includesPoint(x, y) {
+        const points = getPointsFromBoundWithRotation(this);
+        return pointInPolygon([x, y], points);
+    }
+}

package/dist/_pkgs/affine-model/elements/framework-background/index.d.ts

@@ -0,0 +1 @@
+export * from './background.js';

package/dist/_pkgs/affine-model/elements/framework-background/index.js

@@ -0,0 +1 @@
+export * from './background.js';

package/dist/_pkgs/affine-model/elements/index.d.ts

@@ -1,9 +1,12 @@
 import type { EdgelessTextBlockModel } from '../blocks/edgeless-text/edgeless-text-model.js';
 import type { BpmnNodeElementModel, BpmnPoolElementModel } from './bpmn/index.js';
 import type { BrushElementModel } from './brush/index.js';
+import type { C4BoardElementModel, C4BoundaryElementModel, C4NodeElementModel } from './c4/index.js';
 import type { ConnectorElementModel } from './connector/index.js';
+import type { ContextMapBoardElementModel } from './context-map/index.js';
 import type { CoreDomainChartElementModel } from './core-domain/index.js';
-import type { EdgyFacetsElementModel, EdgyNodeElementModel } from './edgy/index.js';
+import type { EventStormingBoardElementModel } from './event-storming/index.js';
+import type { EdgyBoardElementModel, EdgyFacetsElementModel, EdgyNodeElementModel } from './edgy/index.js';
 import type { CynefinElementModel } from './cynefin/index.js';
 import type { EstuarineElementModel } from './estuarine/index.js';
 import type { GroupElementModel } from './group/index.js';
@@ -14,11 +17,15 @@ import type { TextElementModel } from './text/index.js';
 import type { WardleyBackgroundElementModel, WardleyNodeElementModel } from './wardley/index.js';
 export * from './bpmn/index.js';
 export * from './brush/index.js';
+export * from './c4/index.js';
 export * from './connector/index.js';
+export * from './context-map/index.js';
 export * from './core-domain/index.js';
 export * from './cynefin/index.js';
 export * from './edgy/index.js';
 export * from './estuarine/index.js';
+export * from './event-storming/index.js';
+export * from './framework-background/index.js';
 export * from './group/index.js';
 export * from './highlighter/index.js';
 export * from './mindmap/index.js';
@@ -29,6 +36,9 @@ export type SurfaceElementModelMap = {
     bpmnNode: BpmnNodeElementModel;
     bpmnPool: BpmnPoolElementModel;
     brush: BrushElementModel;
+    c4Board: C4BoardElementModel;
+    c4Boundary: C4BoundaryElementModel;
+    c4Node: C4NodeElementModel;
     highlighter: HighlighterElementModel;
     connector: ConnectorElementModel;
     group: GroupElementModel;
@@ -38,10 +48,13 @@ export type SurfaceElementModelMap = {
     wardley: WardleyBackgroundElementModel;
     wardleyNode: WardleyNodeElementModel;
     edgy: EdgyFacetsElementModel;
+    edgyBoard: EdgyBoardElementModel;
     edgyNode: EdgyNodeElementModel;
     cynefin: CynefinElementModel;
     estuarine: EstuarineElementModel;
     coreDomain: CoreDomainChartElementModel;
+    contextMap: ContextMapBoardElementModel;
+    eventStorming: EventStormingBoardElementModel;
 };
 export type SurfaceTextModelMap = {
     text: TextElementModel;

package/dist/_pkgs/affine-model/elements/index.js

@@ -1,10 +1,14 @@
 export * from './bpmn/index.js';
 export * from './brush/index.js';
+export * from './c4/index.js';
 export * from './connector/index.js';
+export * from './context-map/index.js';
 export * from './core-domain/index.js';
 export * from './cynefin/index.js';
 export * from './edgy/index.js';
 export * from './estuarine/index.js';
+export * from './event-storming/index.js';
+export * from './framework-background/index.js';
 export * from './group/index.js';
 export * from './highlighter/index.js';
 export * from './mindmap/index.js';

package/dist/_pkgs/affine-model/elements/mindmap/mindmap.js

@@ -247,7 +247,6 @@ let MindmapElementModel = (() => {
                     id = this.surface.addElement({
                         type,
                         xywh: '[0,0,100,30]',
-                        maxWidth: false,
                         ...props,
                         ...style.node,
                     });
@@ -269,7 +268,6 @@ let MindmapElementModel = (() => {
                     id = this.surface.addElement({
                         type,
                         xywh: '[0,0,113,41]',
-                        maxWidth: false,
                         ...props,
                         ...rootStyle,
                     });
@@ -655,7 +653,12 @@ let MindmapElementModel = (() => {
                 return;
             }
             const stashed = new Set();
+            const stashedNodeIds = new Set();
             const traverse = (node) => {
+                if (this._stashedNode.has(node.id))
+                    return;
+                this._stashedNode.add(node.id);
+                stashedNodeIds.add(node.id);
                 node.element.stash('xywh');
                 stashed.add(node.element);
                 if (node.children.length) {
@@ -664,7 +667,9 @@ let MindmapElementModel = (() => {
             };
             traverse(mindNode);
             return () => {
-                this._stashedNode.delete(mindNode.id);
+                stashedNodeIds.forEach(id => {
+                    this._stashedNode.delete(id);
+                });
                 stashed.forEach(el => {
                     el.pop('xywh');
                 });

package/dist/_pkgs/affine-model/elements/mindmap/style.d.ts

@@ -24,6 +24,7 @@ export type NodeStyle = {
     strokeWidth: number;
     strokeColor: Color;
     textResizing: TextResizing;
+    maxWidth: false | number;
     fontSize: number;
     fontFamily: string;
     fontWeight: FontWeight;
@@ -44,6 +45,7 @@ export type ConnectorStyle = {
     strokeWidth: number;
     mode: ConnectorMode;
 };
+export declare const MINDMAP_NODE_MAX_WIDTH = 512;
 export declare abstract class MindmapStyleGetter {
     abstract readonly root: NodeStyle;
     abstract getNodeStyle(node: MindmapNode, path: number[]): {
@@ -58,6 +60,7 @@ export declare class StyleOne extends MindmapStyleGetter {
     readonly root: {
         radius: number;
         textResizing: TextResizing;
+        maxWidth: number;
         strokeWidth: number;
         strokeColor: string;
         fontFamily: FontFamily;
@@ -128,6 +131,7 @@ export declare class StyleOne extends MindmapStyleGetter {
         node: {
             radius: number;
             textResizing: TextResizing;
+            maxWidth: number;
             strokeWidth: number;
             strokeColor: string | {
                 normal: string;
@@ -157,6 +161,7 @@ export declare class StyleTwo extends MindmapStyleGetter {
     readonly root: {
         radius: number;
         textResizing: TextResizing;
+        maxWidth: number;
         strokeWidth: number;
         strokeColor: string | {
             normal: string;
@@ -252,6 +257,7 @@ export declare class StyleTwo extends MindmapStyleGetter {
         node: {
             radius: number;
             textResizing: TextResizing;
+            maxWidth: number;
             strokeWidth: number;
             strokeColor: string | {
                 normal: string;
@@ -291,6 +297,7 @@ export declare class StyleThree extends MindmapStyleGetter {
     readonly root: {
         radius: number;
         textResizing: TextResizing;
+        maxWidth: number;
         strokeWidth: number;
         strokeColor: string;
         fontFamily: FontFamily;
@@ -317,6 +324,7 @@ export declare class StyleThree extends MindmapStyleGetter {
         node: {
             radius: number;
             textResizing: TextResizing;
+            maxWidth: number;
             strokeWidth: number;
             strokeColor: string | {
                 normal: string;
@@ -395,6 +403,7 @@ export declare class StyleFour extends MindmapStyleGetter {
     readonly root: {
         radius: number;
         textResizing: TextResizing;
+        maxWidth: number;
         strokeWidth: number;
         strokeColor: string;
         fontFamily: FontFamily;
@@ -466,6 +475,7 @@ export declare class StyleFour extends MindmapStyleGetter {
             padding: [number, number];
             radius: number;
             textResizing: TextResizing;
+            maxWidth: number;
             strokeWidth: number;
             strokeColor: string;
             fontFamily: FontFamily;

package/dist/_pkgs/affine-model/elements/mindmap/style.js

@@ -5,6 +5,7 @@ import { MindmapStyle } from '../../consts/mindmap.js';
 import { StrokeStyle } from '../../consts/note.js';
 import { FontFamily, FontWeight, TextResizing } from '../../consts/text.js';
 import { DefaultTheme } from '../../themes/index.js';
+export const MINDMAP_NODE_MAX_WIDTH = 512;
 export class MindmapStyleGetter {
 }
 export class StyleOne extends MindmapStyleGetter {
@@ -21,6 +22,7 @@ export class StyleOne extends MindmapStyleGetter {
         this.root = {
             radius: 8,
             textResizing: TextResizing.AUTO_WIDTH_AND_HEIGHT,
+            maxWidth: MINDMAP_NODE_MAX_WIDTH,
             strokeWidth: 4,
             strokeColor: '#53b2ef',
             fontFamily: FontFamily.Poppins,
@@ -76,6 +78,7 @@ export class StyleOne extends MindmapStyleGetter {
             node: {
                 radius: 8,
                 textResizing: TextResizing.AUTO_WIDTH_AND_HEIGHT,
+                maxWidth: MINDMAP_NODE_MAX_WIDTH,
                 strokeWidth: 3,
                 strokeColor: color,
                 fontFamily: FontFamily.Poppins,
@@ -107,6 +110,7 @@ export class StyleTwo extends MindmapStyleGetter {
         this.root = {
             radius: 3,
             textResizing: TextResizing.AUTO_WIDTH_AND_HEIGHT,
+            maxWidth: MINDMAP_NODE_MAX_WIDTH,
             strokeWidth: 3,
             strokeColor: DefaultTheme.black,
             fontFamily: FontFamily.Poppins,
@@ -164,6 +168,7 @@ export class StyleTwo extends MindmapStyleGetter {
             node: {
                 radius: 3,
                 textResizing: TextResizing.AUTO_WIDTH_AND_HEIGHT,
+                maxWidth: MINDMAP_NODE_MAX_WIDTH,
                 strokeWidth: 3,
                 strokeColor: DefaultTheme.black,
                 fontFamily: FontFamily.Poppins,
@@ -195,6 +200,7 @@ export class StyleThree extends MindmapStyleGetter {
         this.root = {
             radius: 10,
             textResizing: TextResizing.AUTO_WIDTH_AND_HEIGHT,
+            maxWidth: MINDMAP_NODE_MAX_WIDTH,
             strokeWidth: 0,
             strokeColor: 'transparent',
             fontFamily: FontFamily.Poppins,
@@ -222,6 +228,7 @@ export class StyleThree extends MindmapStyleGetter {
             node: {
                 radius: 10,
                 textResizing: TextResizing.AUTO_WIDTH_AND_HEIGHT,
+                maxWidth: MINDMAP_NODE_MAX_WIDTH,
                 strokeWidth: 2,
                 strokeColor,
                 fontFamily: FontFamily.Poppins,
@@ -285,6 +292,7 @@ export class StyleFour extends MindmapStyleGetter {
         this.root = {
             radius: 0,
             textResizing: TextResizing.AUTO_WIDTH_AND_HEIGHT,
+            maxWidth: MINDMAP_NODE_MAX_WIDTH,
             strokeWidth: 0,
             strokeColor: 'transparent',
             fontFamily: FontFamily.Kalam,

package/dist/_pkgs/affine-model/elements/shape/api/polygon.js

@@ -213,14 +213,8 @@ function pointOnBezierGeometry(element, px, py, hitThreshold) {
             const mt2 = mt * mt;
             const t2 = t * t;
             // Cubic Bezier: B(t) = (1-t)^3*P0 + 3(1-t)^2*t*P1 + 3(1-t)*t^2*P2 + t^3*P3
-            const bx = mt2 * mt * cx +
-                3 * mt2 * t * cp1x +
-                3 * mt * t2 * cp2x +
-                t2 * t * nx;
-            const by = mt2 * mt * cy +
-                3 * mt2 * t * cp1y +
-                3 * mt * t2 * cp2y +
-                t2 * t * ny;
+            const bx = mt2 * mt * cx + 3 * mt2 * t * cp1x + 3 * mt * t2 * cp2x + t2 * t * nx;
+            const by = mt2 * mt * cy + 3 * mt2 * t * cp1y + 3 * mt * t2 * cp2y + t2 * t * ny;
             const dbx = px - bx;
             const dby = py - by;
             if (dbx * dbx + dby * dby <= hitDistSq)

package/dist/_pkgs/affine-model/elements/wardley/wardley.d.ts

@@ -1,15 +1,12 @@
-import type { IVec, SerializedXYWH } from '../../../global/gfx/index.js';
-import { Bound } from '../../../global/gfx/index.js';
-import type { BaseElementProps } from '../../../std/gfx/index.js';
-import { GfxPrimitiveElementModel } from '../../../std/gfx/index.js';
+import type { SerializedXYWH } from '../../../global/gfx/index.js';
+import { FrameworkBackgroundElementModel } from '../framework-background/index.js';
+import type { FrameworkBackgroundProps } from '../framework-background/index.js';
 /**
  * Background flavour. `classic` is the plain Wardley frame; the others overlay a
  * curve-driven colour gradient inscribed in the same frame (Slice C).
  */
 export type WardleyBgVariant = 'classic' | 'opportunity' | 'benefit' | 'evolution-gradient';
-export type WardleyBackgroundProps = BaseElementProps & {
-    /** When false (default) the resize handles are hidden — toggled from the toolbar. */
-    resizeEnabled?: boolean;
+export type WardleyBackgroundProps = FrameworkBackgroundProps & {
     /** When true the four evolution zones get a light tint (style B). */
     banded?: boolean;
     /** Gradient variant inscribed in the frame. */
@@ -38,34 +35,29 @@ export type WardleyBackgroundProps = BaseElementProps & {
  * Value Chain Y) with the four evolution phase dividers and labels, drawn on
  * the surface canvas. The user places regular edgeless elements on top of it.
  *
- * Extends {@link GfxPrimitiveElementModel} so it inherits selection, move,
- * copy/paste, duplicate, align and undo/redo for free.
+ * An INSTANCE of the framework-background primitive
+ * ({@link FrameworkBackgroundElementModel}): the geometry and the passive-canvas
+ * behaviour come from the primitive, what the map looks like comes from the
+ * `WARDLEY_BACKGROUND` declaration in `@labre/affine-gfx-wardley`, and the
+ * fields below are the persisted document — unchanged, and not the primitive's
+ * business.
  */
-export declare class WardleyBackgroundElementModel extends GfxPrimitiveElementModel<WardleyBackgroundProps> {
+export declare class WardleyBackgroundElementModel extends FrameworkBackgroundElementModel<WardleyBackgroundProps> {
     get type(): string;
-    /**
-     * The background is a passive canvas: connectors must not snap their
-     * endpoints to it (a Wardley arrow should connect nodes, never the map).
-     */
-    get connectable(): boolean;
-    containsBound(bounds: Bound): boolean;
-    getLineIntersections(start: IVec, end: IVec): import("../../../global/gfx/index.js").PointLocation[] | null;
-    getNearestPoint(point: IVec): IVec;
-    includesPoint(x: number, y: number): boolean;
     accessor banded: boolean;
     accessor variant: WardleyBgVariant;
     accessor showGradient: boolean;
     accessor resizeEnabled: boolean;
-    accessor xAxisTitle: string;
-    accessor yAxisTitle: string;
-    accessor evolutionStart: string;
-    accessor evolutionEnd: string;
-    accessor visibilityHigh: string;
-    accessor visibilityLow: string;
-    accessor phase0: string;
-    accessor phase1: string;
-    accessor phase2: string;
-    accessor phase3: string;
+    accessor xAxisTitle: string | undefined;
+    accessor yAxisTitle: string | undefined;
+    accessor evolutionStart: string | undefined;
+    accessor evolutionEnd: string | undefined;
+    accessor visibilityHigh: string | undefined;
+    accessor visibilityLow: string | undefined;
+    accessor phase0: string | undefined;
+    accessor phase1: string | undefined;
+    accessor phase2: string | undefined;
+    accessor phase3: string | undefined;
     accessor showXAxis: boolean;
     accessor showYAxis: boolean;
     accessor showColumnDividers: boolean;