@grafloria/element 0.3.18 → 0.3.20

package/src/libs/renderer/src/svg/link-hit-test.js

@@ -0,0 +1,182 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_LINK_HIT_AREA_WIDTH = exports.DEFAULT_LINK_HIT_TOLERANCE = exports.DEFAULT_LABEL_HEIGHT = exports.DEFAULT_LABEL_WIDTH = exports.DEFAULT_ARROW_RADIUS = exports.DEFAULT_ENDPOINT_RADIUS = void 0;
+exports.linkHitAreaWidth = linkHitAreaWidth;
+exports.linkBodyHitTolerance = linkBodyHitTolerance;
+exports.pointAtPositionOnPolyline = pointAtPositionOnPolyline;
+exports.hitTestLink = hitTestLink;
+exports.DEFAULT_ENDPOINT_RADIUS = 8;
+exports.DEFAULT_ARROW_RADIUS = 10;
+exports.DEFAULT_LABEL_WIDTH = 40;
+exports.DEFAULT_LABEL_HEIGHT = 18;
+/**
+ * Grab distance (WORLD units) for a link body — "how close to the line counts
+ * as clicking it".
+ *
+ * Exported because it is now a CROSS-BACKEND contract, not an implementation
+ * detail of one hit path: `InteractionController` applies it to resolve a link
+ * in SVG mode, and the Canvas backend strokes each link's pick region with
+ * exactly `2 x` this width on the colour-keyed hit canvas. If the two ever
+ * disagreed, switching backend would change which link is under the cursor.
+ * (It was previously a bare `5` inlined in the controller.)
+ *
+ * This is the FLOOR, not the whole contract — see {@link linkBodyHitTolerance}.
+ */
+exports.DEFAULT_LINK_HIT_TOLERANCE = 5;
+/** Default width of the SVG renderer's transparent interaction stroke. */
+exports.DEFAULT_LINK_HIT_AREA_WIDTH = 12;
+/**
+ * Width of the invisible "interaction stroke" painted along a link.
+ *
+ * Sized from the LITERAL stroke width, never a `var(--…)` expression — the
+ * renderer resolves its literals before calling this. The `+ 8` keeps a grab
+ * margin around fat strokes (a 10px casing would otherwise be pixel-hunting).
+ */
+function linkHitAreaWidth(literalStrokeWidth, configWidth = exports.DEFAULT_LINK_HIT_AREA_WIDTH) {
+    return Math.max(configWidth, literalStrokeWidth + 8);
+}
+/**
+ * The grab distance for a link BODY — the one number the painted invitation
+ * and the accepted press must both derive from.
+ *
+ * The SVG renderer paints a transparent hit-area stroke `linkHitAreaWidth`
+ * wide, but the interaction layer used to accept only the flat 5px floor: the
+ * ring between them was DEAD — the DOM caught the pointer (cursor, native
+ * focus — the "rectangle around the line" report) while the press selected
+ * nothing. Every consumer of "how close is close enough to a link" now calls
+ * this: the interaction controller (SVG mode), the canvas pick-buffer stroke,
+ * and the hit-area painter (at exactly `2 x` this, minus slop).
+ *
+ * `literalStrokeWidth` must be the resolved numeric width (fall back to 2 for
+ * theme-bound `var(--…)` widths, matching the renderer's own literal
+ * fallback).
+ */
+function linkBodyHitTolerance(literalStrokeWidth, configWidth = exports.DEFAULT_LINK_HIT_AREA_WIDTH) {
+    return Math.max(exports.DEFAULT_LINK_HIT_TOLERANCE, linkHitAreaWidth(literalStrokeWidth, configWidth) / 2);
+}
+/**
+ * Arc-length interpolation of a point at position `t` (0-1) along a polyline.
+ * Mirrors {@link LinkModel.getPointAtPosition}'s polyline fallback so label
+ * anchors line up with what the renderer draws. Returns `null` for < 2 points.
+ */
+function pointAtPositionOnPolyline(points, t) {
+    if (points.length === 0)
+        return null;
+    if (points.length === 1)
+        return Object.assign({}, points[0]);
+    const clamped = Math.max(0, Math.min(1, t));
+    let total = 0;
+    for (let i = 0; i < points.length - 1; i++) {
+        total += Math.hypot(points[i + 1].x - points[i].x, points[i + 1].y - points[i].y);
+    }
+    if (total <= 0)
+        return Object.assign({}, points[0]);
+    let remaining = total * clamped;
+    for (let i = 0; i < points.length - 1; i++) {
+        const a = points[i];
+        const b = points[i + 1];
+        const segLen = Math.hypot(b.x - a.x, b.y - a.y);
+        if (remaining <= segLen) {
+            const st = segLen > 0 ? remaining / segLen : 0;
+            return { x: a.x + (b.x - a.x) * st, y: a.y + (b.y - a.y) * st };
+        }
+        remaining -= segLen;
+    }
+    return Object.assign({}, points[points.length - 1]);
+}
+/** Closest-point projection of `q` onto segment `a`->`b`. */
+function projectOntoSegment(q, a, b) {
+    const dx = b.x - a.x;
+    const dy = b.y - a.y;
+    const lenSq = dx * dx + dy * dy;
+    let s = lenSq === 0 ? 0 : ((q.x - a.x) * dx + (q.y - a.y) * dy) / lenSq;
+    s = Math.max(0, Math.min(1, s));
+    const cx = a.x + s * dx;
+    const cy = a.y + s * dy;
+    return { distance: Math.hypot(q.x - cx, q.y - cy), s };
+}
+/**
+ * Part-aware link hit-test.
+ *
+ * Precedence (highest first): endpoint / arrow handles (small grab radius) >
+ * labels (bounding box) > body (near the path). Within the handle tier the
+ * nearest handle wins, tie-broken by declaration order
+ * (source-endpoint, target-endpoint, source-arrow, target-arrow).
+ *
+ * @param options  the link geometry to test against
+ * @param query    the world-space point to test
+ * @param tolerance grab distance for the body (and label box padding)
+ * @returns the hit part with local info, or `null` when nothing is within reach
+ */
+function hitTestLink(options, query, tolerance) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const { points } = options;
+    // Body distance first — it annotates EVERY hit (see LinkHitResult.bodyDistance).
+    let bodyDistance;
+    let bodyArcLength = 0;
+    let bodyTotalLength = 0;
+    if (points.length >= 2) {
+        let best = Infinity;
+        let cumulative = 0;
+        for (let i = 0; i < points.length - 1; i++) {
+            const segLen = Math.hypot(points[i + 1].x - points[i].x, points[i + 1].y - points[i].y);
+            const { distance, s } = projectOntoSegment(query, points[i], points[i + 1]);
+            if (distance < best) {
+                best = distance;
+                bodyArcLength = cumulative + s * segLen;
+            }
+            cumulative += segLen;
+        }
+        bodyTotalLength = cumulative;
+        bodyDistance = best;
+    }
+    const endpointRadius = (_a = options.endpointRadius) !== null && _a !== void 0 ? _a : exports.DEFAULT_ENDPOINT_RADIUS;
+    const arrowRadius = (_b = options.arrowRadius) !== null && _b !== void 0 ? _b : exports.DEFAULT_ARROW_RADIUS;
+    const labelW = (_c = options.defaultLabelWidth) !== null && _c !== void 0 ? _c : exports.DEFAULT_LABEL_WIDTH;
+    const labelH = (_d = options.defaultLabelHeight) !== null && _d !== void 0 ? _d : exports.DEFAULT_LABEL_HEIGHT;
+    // --- Tier 1: endpoint / arrow handles (nearest within its radius wins) ---
+    const sourceEndpoint = options.sourceEndpoint === undefined ? points[0] : options.sourceEndpoint;
+    const targetEndpoint = options.targetEndpoint === undefined
+        ? points[points.length - 1]
+        : options.targetEndpoint;
+    const handles = [
+        { part: 'source-endpoint', point: sourceEndpoint, radius: endpointRadius },
+        { part: 'target-endpoint', point: targetEndpoint, radius: endpointRadius },
+        { part: 'source-arrow', point: options.sourceArrow, radius: arrowRadius },
+        { part: 'target-arrow', point: options.targetArrow, radius: arrowRadius },
+    ];
+    let bestHandle = null;
+    for (const handle of handles) {
+        if (!handle.point)
+            continue;
+        const distance = Math.hypot(query.x - handle.point.x, query.y - handle.point.y);
+        if (distance <= handle.radius && (bestHandle === null || distance < bestHandle.distance)) {
+            bestHandle = { part: handle.part, distance };
+        }
+    }
+    if (bestHandle)
+        return { part: bestHandle.part, distance: bestHandle.distance, bodyDistance };
+    // --- Tier 2: labels (bounding box, topmost-drawn first) ---
+    if (options.labels && options.labels.length > 0) {
+        for (let i = options.labels.length - 1; i >= 0; i--) {
+            const label = options.labels[i];
+            const anchor = pointAtPositionOnPolyline(points, label.position);
+            if (!anchor)
+                continue;
+            const cx = anchor.x + ((_f = (_e = label.offset) === null || _e === void 0 ? void 0 : _e.x) !== null && _f !== void 0 ? _f : 0);
+            const cy = anchor.y + ((_h = (_g = label.offset) === null || _g === void 0 ? void 0 : _g.y) !== null && _h !== void 0 ? _h : 0);
+            const halfW = ((_j = label.width) !== null && _j !== void 0 ? _j : labelW) / 2 + tolerance;
+            const halfH = ((_k = label.height) !== null && _k !== void 0 ? _k : labelH) / 2 + tolerance;
+            if (Math.abs(query.x - cx) <= halfW && Math.abs(query.y - cy) <= halfH) {
+                return { part: 'label', labelIndex: i, distance: 0, bodyDistance };
+            }
+        }
+    }
+    // --- Tier 3: body (nearest point on the polyline; computed above) ---
+    if (bodyDistance !== undefined && bodyDistance <= tolerance) {
+        const t = bodyTotalLength > 0 ? bodyArcLength / bodyTotalLength : 0;
+        return { part: 'body', t, distance: bodyDistance, bodyDistance };
+    }
+    return null;
+}
+//# sourceMappingURL=link-hit-test.js.map

package/src/libs/renderer/src/svg/motion-tracker.d.ts

@@ -0,0 +1,18 @@
+import type { Rect } from './route-memo';
+export declare class MotionTracker {
+    /** Rects as of the previous observed frame. */
+    private prev;
+    /** Nodes whose rect changed in the previous frame's diff. */
+    private prevMoved;
+    /** Nodes whose rect changed this frame AND last — continuous motion. */
+    private inMotion;
+    /**
+     * Observe a frame. `rects` is only read, never mutated — sharing the map the
+     * route memo takes ownership of is safe.
+     */
+    beginFrame(rects: Map<string, Rect>): void;
+    isInMotion(id: string): boolean;
+    /** True while anything at all is mid-animation. */
+    get hasMotion(): boolean;
+    clear(): void;
+}

package/src/libs/renderer/src/svg/motion-tracker.js

@@ -0,0 +1,71 @@
+"use strict";
+// Motion-stable routing — WHO is currently animating?
+//
+// The route pipeline re-decides obstacle detours from scratch every frame, which
+// is correct at rest and visibly WRONG during continuous motion: while a tween or
+// drag sweeps node bodies through link chords, the straight-router links snap
+// between shape classes (direct cubic ↔ detour spline ↔ rounded-orthogonal) —
+// measured at 17 flips / 22 discontinuity events in one 900ms 8-node tween on
+// demos/nodes/node-position-animation.html, worst flip 327px in a 21px frame.
+//
+// This tracker supplies the one fact the suppression needs: which nodes are IN
+// MOTION — meaning their rect changed in TWO consecutive observed frames. Two,
+// not one: a single `setPosition` + render is a programmatic jump whose very
+// frame must keep today's detour behaviour (unit tests and hosts rely on it); a
+// tween or drag writes every frame, so it earns the streak on its second frame
+// and loses it on the first still frame — which is exactly the settle frame
+// where the proper route returns.
+//
+// Fed from `invalidateStaleRoutes()` with the same per-frame rect map the route
+// memo diffs, so it costs one extra Map scan per painted frame and nothing at all
+// on gated (skipped) frames — a frame nobody painted moved nobody.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MotionTracker = void 0;
+class MotionTracker {
+    constructor() {
+        /** Rects as of the previous observed frame. */
+        this.prev = new Map();
+        /** Nodes whose rect changed in the previous frame's diff. */
+        this.prevMoved = new Set();
+        /** Nodes whose rect changed this frame AND last — continuous motion. */
+        this.inMotion = new Set();
+    }
+    /**
+     * Observe a frame. `rects` is only read, never mutated — sharing the map the
+     * route memo takes ownership of is safe.
+     */
+    beginFrame(rects) {
+        const moved = new Set();
+        for (const [id, now] of rects) {
+            const before = this.prev.get(id);
+            if (before &&
+                (before.x !== now.x ||
+                    before.y !== now.y ||
+                    before.width !== now.width ||
+                    before.height !== now.height)) {
+                moved.add(id);
+            }
+        }
+        this.inMotion.clear();
+        for (const id of moved) {
+            if (this.prevMoved.has(id))
+                this.inMotion.add(id);
+        }
+        this.prevMoved = moved;
+        this.prev = rects;
+    }
+    isInMotion(id) {
+        return this.inMotion.has(id);
+    }
+    /** True while anything at all is mid-animation. */
+    get hasMotion() {
+        return this.inMotion.size > 0;
+    }
+    clear() {
+        this.prev.clear();
+        this.prevMoved.clear();
+        this.inMotion.clear();
+    }
+}
+exports.MotionTracker = MotionTracker;
+//# sourceMappingURL=motion-tracker.js.map

package/src/libs/renderer/src/svg/node-sizing.d.ts

@@ -0,0 +1,51 @@
+import type { NodeModel } from '@grafloria/engine';
+/**
+ * Sizing constraints for a single node. Every field is optional; an absent
+ * field means "no constraint" (the global resizer minimum still applies as a
+ * safety floor).
+ */
+export interface NodeSizing {
+    /** Content-aware auto-sizing: the node grows to fit its label + panel. */
+    auto?: boolean;
+    minWidth?: number;
+    minHeight?: number;
+    maxWidth?: number;
+    maxHeight?: number;
+    /**
+     * Aspect lock. `true` locks to the node's CURRENT width/height ratio; a number
+     * locks to that explicit width÷height ratio. Honored during a resize gesture
+     * even without the Shift modifier.
+     */
+    aspectLock?: boolean | number;
+    /** Content padding (px) reserved around the label when auto-sizing. */
+    padding?: number;
+}
+/** Read a node's sizing config (never null — an absent config is `{}`). */
+export declare function getNodeSizing(node: NodeModel): NodeSizing;
+/** True when the node opts into content-aware auto-sizing. */
+export declare function isAutoSized(node: NodeModel): boolean;
+/**
+ * The explicit aspect ratio (w÷h) a node is locked to, or null when unlocked.
+ * `aspectLock: true` resolves against a supplied current size.
+ */
+export declare function resolveAspectRatio(sizing: NodeSizing, current?: {
+    width: number;
+    height: number;
+}): number | null;
+/** Clamp a scalar into `[min, max]`, tolerating an inverted or absent bound. */
+export declare function clampValue(value: number, min?: number, max?: number): number;
+export interface ClampOptions {
+    /** Global floor applied when the node declares no `minWidth`/`minHeight`. */
+    floorWidth?: number;
+    floorHeight?: number;
+}
+/**
+ * Clamp a candidate width/height to a node's sizing constraints. The per-node
+ * min/max win; a global floor (the resizer's `minWidth`/`minHeight`) fills in
+ * when the node sets none. Used identically by the resizer and the auto-sizer,
+ * so both cannot disagree about the legal range.
+ */
+export declare function clampSizeToConstraints(width: number, height: number, sizing: NodeSizing, opts?: ClampOptions): {
+    width: number;
+    height: number;
+};

package/src/libs/renderer/src/svg/node-sizing.js

@@ -0,0 +1,65 @@
+"use strict";
+// Per-node sizing constraints (Wave 5 / Nodes & shapes — shared by Card 6 + 7)
+//
+// One config seam owns every "how big may this node be" rule: the interactive
+// resizer (Card 6) reads it to clamp a drag DURING the gesture, and the
+// content-aware auto-sizer (Card 7) reads it to floor/ceil a computed desired
+// size. Keeping it in ONE place is deliberate — the two features must agree
+// about a node's min/max, or a user could drag a node to a size auto-sizing
+// would immediately fight.
+//
+// It lives on `node.metadata.sizing` so it serializes for free (metadata is part
+// of SerializedNode) and needs no NodeModel schema change.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getNodeSizing = getNodeSizing;
+exports.isAutoSized = isAutoSized;
+exports.resolveAspectRatio = resolveAspectRatio;
+exports.clampValue = clampValue;
+exports.clampSizeToConstraints = clampSizeToConstraints;
+/** Read a node's sizing config (never null — an absent config is `{}`). */
+function getNodeSizing(node) {
+    const raw = node.getMetadata('sizing');
+    return raw && typeof raw === 'object' ? raw : {};
+}
+/** True when the node opts into content-aware auto-sizing. */
+function isAutoSized(node) {
+    return getNodeSizing(node).auto === true;
+}
+/**
+ * The explicit aspect ratio (w÷h) a node is locked to, or null when unlocked.
+ * `aspectLock: true` resolves against a supplied current size.
+ */
+function resolveAspectRatio(sizing, current) {
+    if (typeof sizing.aspectLock === 'number' && sizing.aspectLock > 0) {
+        return sizing.aspectLock;
+    }
+    if (sizing.aspectLock === true && current && current.height > 0) {
+        return current.width / current.height;
+    }
+    return null;
+}
+/** Clamp a scalar into `[min, max]`, tolerating an inverted or absent bound. */
+function clampValue(value, min, max) {
+    let out = value;
+    if (typeof max === 'number' && isFinite(max))
+        out = Math.min(out, max);
+    if (typeof min === 'number' && isFinite(min))
+        out = Math.max(out, min);
+    return out;
+}
+/**
+ * Clamp a candidate width/height to a node's sizing constraints. The per-node
+ * min/max win; a global floor (the resizer's `minWidth`/`minHeight`) fills in
+ * when the node sets none. Used identically by the resizer and the auto-sizer,
+ * so both cannot disagree about the legal range.
+ */
+function clampSizeToConstraints(width, height, sizing, opts = {}) {
+    var _a, _b;
+    const minW = (_a = sizing.minWidth) !== null && _a !== void 0 ? _a : opts.floorWidth;
+    const minH = (_b = sizing.minHeight) !== null && _b !== void 0 ? _b : opts.floorHeight;
+    return {
+        width: clampValue(width, minW, sizing.maxWidth),
+        height: clampValue(height, minH, sizing.maxHeight),
+    };
+}
+//# sourceMappingURL=node-sizing.js.map

package/src/libs/renderer/src/svg/node-toolbar.d.ts

@@ -0,0 +1,30 @@
+import type { NodeModel } from '@grafloria/engine';
+/** The Halo context-toolbar actions a node may expose. */
+export type ToolbarHaloAction = 'connect' | 'clone' | 'fork' | 'delete';
+/**
+ * Per-node tool visibility. Every field is optional; an absent field means "use
+ * the controller's global default". `halo: true` → all actions, an array → only
+ * those actions, `false` → no halo.
+ */
+export interface NodeToolbarConfig {
+    resize?: boolean;
+    rotate?: boolean;
+    remove?: boolean;
+    halo?: boolean | ToolbarHaloAction[];
+}
+/** A per-TYPE policy the host installs on the controller. */
+export type ToolbarResolver = (node: NodeModel) => NodeToolbarConfig | undefined;
+/** Read a node's own toolbar config from metadata, or undefined. */
+export declare function getNodeToolbar(node: NodeModel): NodeToolbarConfig | undefined;
+/**
+ * The effective toolbar config for a node: the node's own metadata, with a
+ * host-supplied resolver (per-type policy) layered on top.
+ */
+export declare function resolveToolbar(node: NodeModel, resolver?: ToolbarResolver): NodeToolbarConfig;
+/** Whether a boolean tool (resize / rotate / remove) is enabled; `def` when unset. */
+export declare function toolbarAllows(config: NodeToolbarConfig, tool: 'resize' | 'rotate' | 'remove', def?: boolean): boolean;
+/**
+ * Whether a Halo action is enabled: `undefined` → `def`, `false` → never,
+ * `true` → always, an array → membership.
+ */
+export declare function haloAllows(config: NodeToolbarConfig, action: ToolbarHaloAction, def?: boolean): boolean;

package/src/libs/renderer/src/svg/node-toolbar.js

@@ -0,0 +1,45 @@
+"use strict";
+// Per-node toolbar configuration (Wave 5 / Nodes & shapes — Card 6)
+//
+// Which floating tools appear around a selected node — the 8 resize handles, the
+// rotate handle, the remove button, and which Halo actions — should be a
+// per-node / per-type decision, not one global switch. A sticky-note node might
+// allow resize but not rotate; a locked "system" node might show only the Halo
+// `connect`. This config seam lets a node declare that on `metadata.toolbar`
+// (serializes for free), with a controller-level resolver for per-TYPE policy.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getNodeToolbar = getNodeToolbar;
+exports.resolveToolbar = resolveToolbar;
+exports.toolbarAllows = toolbarAllows;
+exports.haloAllows = haloAllows;
+/** Read a node's own toolbar config from metadata, or undefined. */
+function getNodeToolbar(node) {
+    const raw = node.getMetadata('toolbar');
+    return raw && typeof raw === 'object' ? raw : undefined;
+}
+/**
+ * The effective toolbar config for a node: the node's own metadata, with a
+ * host-supplied resolver (per-type policy) layered on top.
+ */
+function resolveToolbar(node, resolver) {
+    var _a, _b;
+    return Object.assign(Object.assign({}, ((_a = getNodeToolbar(node)) !== null && _a !== void 0 ? _a : {})), ((_b = resolver === null || resolver === void 0 ? void 0 : resolver(node)) !== null && _b !== void 0 ? _b : {}));
+}
+/** Whether a boolean tool (resize / rotate / remove) is enabled; `def` when unset. */
+function toolbarAllows(config, tool, def = true) {
+    const v = config[tool];
+    return v === undefined ? def : v !== false;
+}
+/**
+ * Whether a Halo action is enabled: `undefined` → `def`, `false` → never,
+ * `true` → always, an array → membership.
+ */
+function haloAllows(config, action, def = true) {
+    const h = config.halo;
+    if (h === undefined)
+        return def;
+    if (typeof h === 'boolean')
+        return h;
+    return h.includes(action);
+}
+//# sourceMappingURL=node-toolbar.js.map

package/src/libs/renderer/src/svg/notation-shapes.d.ts

@@ -0,0 +1,2 @@
+/** Register every notation shape that the base registry does not already own. */
+export declare function registerNotationShapes(): void;

package/src/libs/renderer/src/svg/notation-shapes.js

@@ -0,0 +1,126 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.registerNotationShapes = registerNotationShapes;
+/**
+ * The notation silhouettes the base registry was missing.
+ *
+ * Group B of the stencil fidelity audit: nine masters had no shape to point at,
+ * so they fell back to a rectangle — a Delay looked like a Process, a Weak
+ * Entity like a plain Entity, an ISA triangle like a box. Each is registered
+ * through the PUBLIC `registerPathShape` seam (the same one the shapes demo uses
+ * for its star), so links attach to the real outline rather than a bounding box.
+ *
+ * The double-outline family (weak entity / weak relationship / multivalued
+ * attribute) is the Chen-notation convention for "existence-dependent": the
+ * inner outline is inset by {@link DOUBLE_INSET} px.
+ */
+const shape_registry_1 = require("./shape-registry");
+/** Gap between the two outlines of a "double" ERD shape. */
+const DOUBLE_INSET = 5;
+const rectPath = (x, y, w, h) => `M ${x} ${y} L ${x + w} ${y} L ${x + w} ${y + h} L ${x} ${y + h} Z`;
+const diamondPath = (x, y, w, h) => `M ${x + w / 2} ${y} L ${x + w} ${y + h / 2} L ${x + w / 2} ${y + h} L ${x} ${y + h / 2} Z`;
+/** An axis-aligned ellipse as two arcs (path form, so it composes with insets). */
+const ellipsePath = (cx, cy, rx, ry) => `M ${cx - rx} ${cy} A ${rx} ${ry} 0 1 0 ${cx + rx} ${cy} A ${rx} ${ry} 0 1 0 ${cx - rx} ${cy} Z`;
+/** The same ellipse wound the OTHER way (sweep 1) — a nonzero-rule fill HOLE. */
+const ellipsePathCCW = (cx, cy, rx, ry) => `M ${cx - rx} ${cy} A ${rx} ${ry} 0 1 1 ${cx + rx} ${cy} A ${rx} ${ry} 0 1 1 ${cx - rx} ${cy} Z`;
+/** Register every notation shape that the base registry does not already own. */
+function registerNotationShapes() {
+    // ── Flowchart ──────────────────────────────────────────────────────────────
+    // Delay: a rectangle whose RIGHT edge is a half-round cap (ISO 5807).
+    define('delay', (w, h) => {
+        const r = h / 2;
+        return `M 0 0 L ${w - r} 0 A ${r} ${r} 0 0 1 ${w - r} ${h} L 0 ${h} Z`;
+    });
+    // Display: left edge swept inward, right edge rounded — the CRT/monitor glyph.
+    define('display', (w, h) => {
+        const r = h / 2;
+        const lead = Math.min(w * 0.18, r);
+        return `M ${lead} 0 L ${w - r} 0 A ${r} ${r} 0 0 1 ${w - r} ${h} L ${lead} ${h} Q 0 ${h / 2} ${lead} 0 Z`;
+    });
+    // Summing junction: a circle crossed by its two diagonals (✕).
+    define('summing-junction', (w, h) => {
+        const r = Math.min(w, h) / 2, cx = w / 2, cy = h / 2, d = r * Math.SQRT1_2;
+        return `${ellipsePath(cx, cy, r, r)} M ${cx - d} ${cy - d} L ${cx + d} ${cy + d} M ${cx + d} ${cy - d} L ${cx - d} ${cy + d}`;
+    });
+    // OR: a circle crossed by its vertical and horizontal axes (✚).
+    define('or-junction', (w, h) => {
+        const r = Math.min(w, h) / 2, cx = w / 2, cy = h / 2;
+        return `${ellipsePath(cx, cy, r, r)} M ${cx - r} ${cy} L ${cx + r} ${cy} M ${cx} ${cy - r} L ${cx} ${cy + r}`;
+    });
+    // ── UML activity ───────────────────────────────────────────────────────────
+    // Fork / join: a solid synchronisation BAR, not a full-height box. Kept as a
+    // band centred in the node box so the node can still be sized normally.
+    define('sync-bar', (w, h) => {
+        const t = Math.max(4, Math.min(h, 8)); // bar thickness
+        const y = (h - t) / 2;
+        return rectPath(0, y, w, t);
+    });
+    // ── ERD (Chen) double outlines ─────────────────────────────────────────────
+    define('double-rect', (w, h) => `${rectPath(0, 0, w, h)} ${rectPath(DOUBLE_INSET, DOUBLE_INSET, w - DOUBLE_INSET * 2, h - DOUBLE_INSET * 2)}`);
+    define('double-diamond', (w, h) => `${diamondPath(0, 0, w, h)} ${diamondPath(DOUBLE_INSET, DOUBLE_INSET, w - DOUBLE_INSET * 2, h - DOUBLE_INSET * 2)}`);
+    define('double-ellipse', (w, h) => `${ellipsePath(w / 2, h / 2, w / 2, h / 2)} ${ellipsePath(w / 2, h / 2, w / 2 - DOUBLE_INSET, h / 2 - DOUBLE_INSET)}`);
+    // ── BPMN gateways ──────────────────────────────────────────────────────────
+    // A gateway's IDENTITY is its inner marker, not its caption: exclusive = ✕,
+    // inclusive = ◯ ring, parallel = ＋ (BPMN 2.0 §10.6). The markers are extra
+    // subpaths of the diamond path: line subpaths have zero area, so `fill`
+    // paints only the diamond while `stroke` draws the marker; the ring subpath
+    // is wound the same direction as the diamond, so nonzero filling leaves it
+    // an outline. Links, ports and the caption's geometry delegate to the plain
+    // diamond so the marker never distorts attachment points.
+    const diamondGeom = delegateTo('diamond');
+    define('gateway-xor', (w, h) => {
+        const cx = w / 2, cy = h / 2, a = Math.min(w, h) * 0.18;
+        return `${diamondPath(0, 0, w, h)} M ${r3(cx - a)} ${r3(cy - a)} L ${r3(cx + a)} ${r3(cy + a)} M ${r3(cx + a)} ${r3(cy - a)} L ${r3(cx - a)} ${r3(cy + a)}`;
+    }, diamondGeom);
+    define('gateway-or', (w, h) => {
+        const r = Math.min(w, h) * 0.22;
+        return `${diamondPath(0, 0, w, h)} ${ellipsePath(w / 2, h / 2, r, r)}`;
+    }, diamondGeom);
+    define('gateway-and', (w, h) => {
+        const cx = w / 2, cy = h / 2, a = Math.min(w, h) * 0.24;
+        return `${diamondPath(0, 0, w, h)} M ${r3(cx - a)} ${cy} L ${r3(cx + a)} ${cy} M ${cx} ${r3(cy - a)} L ${cx} ${r3(cy + a)}`;
+    }, diamondGeom);
+    // ── BPMN events ────────────────────────────────────────────────────────────
+    // An intermediate event is a DOUBLE ring (start = thin single, end = thick
+    // single — those two stay `circle` and differ by strokeWidth, which is
+    // template data). Same double-outline device as the Chen shapes; geometry
+    // delegates to the plain circle.
+    define('event-intermediate', (w, h) => {
+        const r = Math.min(w, h) / 2, cx = w / 2, cy = h / 2;
+        const inset = Math.max(3, r * 0.18);
+        return `${ellipsePath(cx, cy, r, r)} ${ellipsePath(cx, cy, r - inset, r - inset)}`;
+    }, delegateTo('circle'));
+    // ── UML final node / final state ───────────────────────────────────────────
+    // A BULLS-EYE: thin outer ring + solid inner dot — what tells a final node
+    // apart from the initial node's plain filled disc. Painted from FILL alone by
+    // WINDING: outer circle clockwise, ring-hole circle COUNTER-clockwise (the
+    // nonzero rule leaves the band between them filled and the gap empty), inner
+    // dot clockwise again. Works with any fill colour the template declares;
+    // stroke should stay thin (it outlines each circle).
+    define('final-node', (w, h) => {
+        const r = Math.min(w, h) / 2, cx = w / 2, cy = h / 2;
+        const band = Math.max(2, r * 0.16); // outer ring line thickness
+        return `${ellipsePath(cx, cy, r, r)} ${ellipsePathCCW(cx, cy, r - band, r - band)} ${ellipsePath(cx, cy, r * 0.5, r * 0.5)}`;
+    }, delegateTo('circle'));
+}
+/** Round to 3 decimals, matching the registry's own vertex formatting. */
+const r3 = (n) => Math.round(n * 1000) / 1000;
+/**
+ * Geometry options that delegate ports / link attachment / label box to an
+ * already-registered base figure — used by shapes whose path carries interior
+ * MARKER subpaths. `registerPathShape` otherwise derives anchors by sampling
+ * every subpath, and a marker in the middle would pull them off the outline.
+ */
+function delegateTo(base) {
+    const def = (0, shape_registry_1.getShapeDefinition)(base);
+    return def
+        ? { portAnchor: def.portAnchor, boundaryPoint: def.boundaryPoint, innerRect: def.innerRect }
+        : {};
+}
+/** Register `type` unless something already owns that name (never clobber). */
+function define(type, path, opts) {
+    if ((0, shape_registry_1.hasShape)(type))
+        return;
+    (0, shape_registry_1.registerPathShape)(type, path, opts);
+}
+//# sourceMappingURL=notation-shapes.js.map

package/src/libs/renderer/src/svg/paint-servers.d.ts

@@ -0,0 +1,49 @@
+import type { VNode } from '../types';
+import type { LinearGradient, RadialGradient, Pattern, Shadow, GradientStop } from '@grafloria/engine';
+/** A fill/stroke paint that resolves to an SVG paint server (not a colour). */
+export type PaintSpec = LinearGradient | RadialGradient | Pattern;
+/** True when a fill/stroke value is a paint-server spec object (vs a colour string). */
+export declare function isPaintSpec(value: unknown): value is PaintSpec;
+/** True when a `style.shadow` value is a Shadow spec object (vs the legacy boolean). */
+export declare function isShadowSpec(value: unknown): value is Shadow;
+/**
+ * The one flat colour that best stands in for a paint server.
+ *
+ * wave8/culling — Card 4: at a far-zoom LOD tier the renderer stops emitting
+ * paint servers entirely and paints this instead. A gradient across a shape that
+ * is 35x17 CSS pixels resolves to about one colour on the display anyway; what it
+ * costs is a `<defs>` entry, a `url(#…)` indirection, and — the expensive part —
+ * a VNode-cache bypass for every gradient entity in the scene, every frame.
+ *
+ * For a gradient that stand-in is the stop nearest the MIDDLE, not the first one:
+ * a two-stop white→black gradient read as "white" is a bigger visual lie than
+ * reading it as mid-grey, and the middle stop is what the eye integrates to.
+ * For a pattern it is the background it is drawn on — the marks are sub-pixel and
+ * what survives is the field they sit on.
+ */
+export declare function flattenPaint(spec: PaintSpec): string;
+/** Stable `<defs>` element id for a paint/shadow spec (identical specs → same id). */
+export declare function paintDefId(spec: object): string;
+/** A linear gradient in absolute pixel endpoints (userSpaceOnUse), not 0–1. */
+export interface UserSpaceLinear {
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    stops: GradientStop[];
+}
+/** A radial gradient with a pixel centre and radius (userSpaceOnUse), not 0–1. */
+export interface UserSpaceRadial {
+    cx: number;
+    cy: number;
+    r: number;
+    stops: GradientStop[];
+}
+/** `<linearGradient gradientUnits="userSpaceOnUse">` with pixel endpoints. */
+export declare function buildLinearGradientUserSpace(id: string, g: UserSpaceLinear): VNode;
+/** `<radialGradient gradientUnits="userSpaceOnUse">` with a pixel centre + radius. */
+export declare function buildRadialGradientUserSpace(id: string, g: UserSpaceRadial): VNode;
+/** Build the `<linearGradient>` / `<radialGradient>` / `<pattern>` def for a paint spec. */
+export declare function buildPaintServerVNode(id: string, spec: PaintSpec): VNode;
+/** Build the `<filter>` (feDropShadow) def for a Shadow spec. */
+export declare function buildShadowFilterVNode(id: string, shadow: Shadow): VNode;