@grafloria/element 0.3.20 → 0.3.21

package/src/libs/renderer/src/svg/shape-registry.js

@@ -1,1104 +0,0 @@
-"use strict";
-// Shape registry + geometry contract (Nodes & shapes foundation)
-//
-// Historically the five built-in node shapes (rect, circle, ellipse, diamond,
-// hexagon) were hardcoded across FIVE parallel switch statements:
-//   - SVGRenderer.renderNodeShape        (node body)
-//   - SVGRenderer.renderSelectionHighlight
-//   - SVGRenderer.renderShadow
-//   - SVGRenderer.shapeEdgePoint         (smart-connection boundary)
-//   - getPortPositionForShape            (port-positioning.ts)
-// Adding a shape meant editing every switch in lock-step.
-//
-// This module introduces ONE `ShapeDefinition` geometry contract and a
-// registry so every shape lives in a single place. The five render sites now
-// consult the registry instead of switching on `shapeConfig.type`.
-//
-// GEOMETRY CONTRACT — each shape exposes just three geometry primitives:
-//   1. outline(w, h, transform) — the shape's outline as an SVG element +
-//      geometry props. A single `transform` (grow outward by `grow` px,
-//      translate by dx/dy, optional corner radius) drives ALL THREE render
-//      sites: the node body (identity transform), the selection highlight
-//      (grow = padding) and the drop shadow (dx = dy = offset). This is why
-//      "selection + shadow reuse outline".
-//   2. boundaryPoint(rect, side, cross) — the point on the outline used by
-//      smart connection points; returns null to fall back to the bbox edge.
-//   3. portAnchor(w, h, side, rank, count) — the local-space port position.
-//
-// The exact rendered output of the five built-ins is preserved bit-for-bit;
-// this is a structural refactor, not a visual change.
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.registerShape = registerShape;
-exports.registerPathShape = registerPathShape;
-exports.buildPathShapeDefinition = buildPathShapeDefinition;
-exports.getShape = getShape;
-exports.hasShape = hasShape;
-exports.listShapes = listShapes;
-exports.unregisterShape = unregisterShape;
-exports.getShapeDefinition = getShapeDefinition;
-exports.getShapeRegistryVersion = getShapeRegistryVersion;
-exports.onShapeRegistryChange = onShapeRegistryChange;
-exports.notifyShapeRegistered = notifyShapeRegistered;
-exports.getInnerRect = getInnerRect;
-exports.defaultInnerRect = defaultInnerRect;
-exports.buildShapeBody = buildShapeBody;
-exports.buildShapeSelection = buildShapeSelection;
-exports.buildShapeShadow = buildShapeShadow;
-const tslib_1 = require("tslib");
-const path_outline_1 = require("./path-outline");
-const path_geometry_1 = require("../canvas/path-geometry");
-const registry_scope_1 = require("../ext/registry-scope");
-// ---------------------------------------------------------------------------
-// Shared geometry helpers (extracted verbatim from the original switch sites)
-// ---------------------------------------------------------------------------
-function fmt(verts) {
-    return verts.map((v) => `${v.x},${v.y}`).join(' ');
-}
-/** Even fraction along an edge: 1 port → 1/2; 2 ports → 1/3, 2/3; … */
-function edgeFraction(rank, count) {
-    return (rank + 1) / (count + 1);
-}
-/** Base perimeter angle for each side (radians) — circle/ellipse anchors. */
-const SIDE_ANGLES = {
-    top: -Math.PI / 2,
-    right: 0,
-    bottom: Math.PI / 2,
-    left: Math.PI,
-};
-/**
- * Symmetric angular fan around the side's base angle: a single port sits on
- * the base angle; additional ports spread ±15° steps, centered.
- */
-function fanAngle(side, rank, count) {
-    const spacing = Math.PI / 12; // 15 degrees between adjacent ports
-    return SIDE_ANGLES[side] + (rank - (count - 1) / 2) * spacing;
-}
-/**
- * Analytic projection onto an ellipse/circle outline for a smart attachment.
- * Mirrors the original shapeEdgePoint ellipse/circle branch exactly.
- */
-function ellipseBoundaryPoint(rect, side, cross, rx, ry) {
-    const cx = rect.x + rect.w / 2;
-    const cy = rect.y + rect.h / 2;
-    const vertical = side === 'top' || side === 'bottom';
-    const clampv = (v, lo, hi) => Math.max(lo, Math.min(hi, v));
-    if (vertical) {
-        const x = clampv(cross, cx - rx * 0.9, cx + rx * 0.9);
-        const dy = ry * Math.sqrt(Math.max(0, 1 - Math.pow(((x - cx) / rx), 2)));
-        return { x, y: side === 'top' ? cy - dy : cy + dy };
-    }
-    const y = clampv(cross, cy - ry * 0.9, cy + ry * 0.9);
-    const dx = rx * Math.sqrt(Math.max(0, 1 - Math.pow(((y - cy) / ry), 2)));
-    return { x: side === 'left' ? cx - dx : cx + dx, y };
-}
-/**
- * Intersect the outline polygon with the axis line at `cross`, keeping the
- * intersection that belongs to the requested side. Mirrors the original
- * shapeEdgePoint hexagon/diamond branch exactly (returns null at a degenerate
- * vertex tangent so the caller falls through to the box edge).
- */
-function polygonBoundaryPoint(verts, side, cross) {
-    const vertical = side === 'top' || side === 'bottom';
-    let best = null;
-    for (let i = 0; i < verts.length; i++) {
-        const a = verts[i];
-        const b = verts[(i + 1) % verts.length];
-        if (vertical) {
-            const lo = Math.min(a.x, b.x);
-            const hi = Math.max(a.x, b.x);
-            if (cross < lo || cross > hi || lo === hi)
-                continue;
-            const y = a.y + ((cross - a.x) / (b.x - a.x)) * (b.y - a.y);
-            if (best === null || (side === 'top' ? y < best : y > best))
-                best = y;
-        }
-        else {
-            const lo = Math.min(a.y, b.y);
-            const hi = Math.max(a.y, b.y);
-            if (cross < lo || cross > hi || lo === hi)
-                continue;
-            const x = a.x + ((cross - a.y) / (b.y - a.y)) * (b.x - a.x);
-            if (best === null || (side === 'left' ? x < best : x > best))
-                best = x;
-        }
-    }
-    if (best !== null) {
-        return vertical ? { x: cross, y: best } : { x: best, y: cross };
-    }
-    return null;
-}
-// ---------------------------------------------------------------------------
-// Built-in shape definitions (existing geometry — extracted, not invented)
-// ---------------------------------------------------------------------------
-const RectShape = {
-    type: 'rect',
-    styleMode: 'inline',
-    bodyDeferGeomKeys: ['rx', 'ry'],
-    outline(width, height, t = {}) {
-        var _a, _b, _c;
-        const grow = (_a = t.grow) !== null && _a !== void 0 ? _a : 0;
-        const dx = (_b = t.dx) !== null && _b !== void 0 ? _b : 0;
-        const dy = (_c = t.dy) !== null && _c !== void 0 ? _c : 0;
-        const geom = {
-            x: -grow + dx,
-            y: -grow + dy,
-            width: width + 2 * grow,
-            height: height + 2 * grow,
-        };
-        if (t.radius !== undefined && (t.radiusAlways || t.radius)) {
-            geom['rx'] = t.radius;
-            if (t.radiusY)
-                geom['ry'] = t.radius;
-        }
-        return { el: 'rect', geom };
-    },
-    boundaryPoint() {
-        // Rects use the bounding-box edge — handled by the caller's fallback.
-        return null;
-    },
-    portAnchor(width, height, side, rank, count) {
-        const f = edgeFraction(rank, count);
-        switch (side) {
-            case 'left':
-                return { x: 0, y: height * f };
-            case 'right':
-                return { x: width, y: height * f };
-            case 'top':
-                return { x: width * f, y: 0 };
-            case 'bottom':
-                return { x: width * f, y: height };
-            default:
-                return { x: 0, y: 0 };
-        }
-    },
-};
-const CircleShape = {
-    type: 'circle',
-    styleMode: 'inline',
-    // rx/ry are rect corner-radius styles — meaningless (and confusing) on a circle
-    bodyStripKeys: ['rx', 'ry'],
-    outline(width, height, t = {}) {
-        var _a, _b, _c;
-        const grow = (_a = t.grow) !== null && _a !== void 0 ? _a : 0;
-        const dx = (_b = t.dx) !== null && _b !== void 0 ? _b : 0;
-        const dy = (_c = t.dy) !== null && _c !== void 0 ? _c : 0;
-        const radius = Math.min(width, height) / 2 + grow;
-        return {
-            el: 'circle',
-            geom: { cx: width / 2 + dx, cy: height / 2 + dy, r: radius },
-        };
-    },
-    boundaryPoint(rect, side, cross) {
-        const r = Math.min(rect.w, rect.h) / 2;
-        return ellipseBoundaryPoint(rect, side, cross, r, r);
-    },
-    portAnchor(width, height, side, rank, count) {
-        const radius = Math.min(width, height) / 2;
-        const cx = width / 2;
-        const cy = height / 2;
-        const angle = fanAngle(side, rank, count);
-        return { x: cx + radius * Math.cos(angle), y: cy + radius * Math.sin(angle) };
-    },
-    // A square inscribed in the circle: side = 2r/√2 ≈ 0.707·(2r). Use 0.6·min
-    // as a conservative label box so text never bleeds past the curve.
-    innerRect(width, height) {
-        const d = Math.min(width, height);
-        return { x: (width - 0.6 * d) / 2, y: (height - 0.6 * d) / 2, w: 0.6 * d, h: 0.6 * d };
-    },
-};
-const EllipseShape = {
-    type: 'ellipse',
-    // Ellipse spreads node styles directly; geometry is merged AFTER so a rect
-    // corner-radius `rx` (borderRadius) in the styles never wins over rx = w/2.
-    styleMode: 'spread',
-    outline(width, height, t = {}) {
-        var _a, _b, _c;
-        const grow = (_a = t.grow) !== null && _a !== void 0 ? _a : 0;
-        const dx = (_b = t.dx) !== null && _b !== void 0 ? _b : 0;
-        const dy = (_c = t.dy) !== null && _c !== void 0 ? _c : 0;
-        return {
-            el: 'ellipse',
-            geom: {
-                cx: width / 2 + dx,
-                cy: height / 2 + dy,
-                rx: width / 2 + grow,
-                ry: height / 2 + grow,
-            },
-        };
-    },
-    boundaryPoint(rect, side, cross) {
-        return ellipseBoundaryPoint(rect, side, cross, rect.w / 2, rect.h / 2);
-    },
-    portAnchor(width, height, side, rank, count) {
-        const rx = width / 2;
-        const ry = height / 2;
-        const cx = width / 2;
-        const cy = height / 2;
-        const angle = fanAngle(side, rank, count);
-        return { x: cx + rx * Math.cos(angle), y: cy + ry * Math.sin(angle) };
-    },
-    // ~0.6·w × ~0.6·h centered box (inscribed-rectangle approximation).
-    innerRect(width, height) {
-        return { x: 0.2 * width, y: 0.2 * height, w: 0.6 * width, h: 0.6 * height };
-    },
-};
-function diamondVerts(width, height, t) {
-    var _a, _b, _c;
-    // Diamond of the reference box expanded by `grow` on every side, translated
-    // by (dx, dy). Center is invariant under grow, so vertices push outward.
-    const grow = (_a = t.grow) !== null && _a !== void 0 ? _a : 0;
-    const dx = (_b = t.dx) !== null && _b !== void 0 ? _b : 0;
-    const dy = (_c = t.dy) !== null && _c !== void 0 ? _c : 0;
-    const x0 = -grow + dx;
-    const y0 = -grow + dy;
-    const w = width + 2 * grow;
-    const h = height + 2 * grow;
-    const cx = x0 + w / 2;
-    const cy = y0 + h / 2;
-    return [
-        { x: cx, y: y0 }, // top
-        { x: x0 + w, y: cy }, // right
-        { x: cx, y: y0 + h }, // bottom
-        { x: x0, y: cy }, // left
-    ];
-}
-const DiamondShape = {
-    type: 'diamond',
-    styleMode: 'inline',
-    outline(width, height, t = {}) {
-        const verts = diamondVerts(width, height, t);
-        return { el: 'polygon', geom: { points: fmt(verts) }, verts };
-    },
-    boundaryPoint(rect, side, cross) {
-        const local = diamondVerts(rect.w, rect.h, {});
-        const world = local.map((v) => ({ x: v.x + rect.x, y: v.y + rect.y }));
-        return polygonBoundaryPoint(world, side, cross);
-    },
-    portAnchor(width, height, side) {
-        const cx = width / 2;
-        const cy = height / 2;
-        const vertices = {
-            top: { x: cx, y: 0 },
-            right: { x: width, y: cy },
-            bottom: { x: cx, y: height },
-            left: { x: 0, y: cy },
-        };
-        return vertices[side];
-    },
-    // The largest axis-aligned rectangle inside a diamond is half its span; use
-    // ~0.5 so text clears the sloped edges (documented approximation).
-    innerRect(width, height) {
-        return { x: 0.25 * width, y: 0.25 * height, w: 0.5 * width, h: 0.5 * height };
-    },
-};
-function hexagonVerts(width, height, t) {
-    var _a, _b, _c;
-    // Flat-top hexagon. The horizontal 25% offset stays keyed to the ORIGINAL
-    // width; `grow` pushes each vertex outward and (dx, dy) translates. This
-    // matches the original renderHexagonShape / selection / shadow geometry.
-    const grow = (_a = t.grow) !== null && _a !== void 0 ? _a : 0;
-    const dx = (_b = t.dx) !== null && _b !== void 0 ? _b : 0;
-    const dy = (_c = t.dy) !== null && _c !== void 0 ? _c : 0;
-    const ox = width * 0.25;
-    const cy = height / 2;
-    return [
-        { x: ox - grow + dx, y: -grow + dy }, // top-left
-        { x: width - ox + grow + dx, y: -grow + dy }, // top-right
-        { x: width + grow + dx, y: cy + dy }, // right
-        { x: width - ox + grow + dx, y: height + grow + dy }, // bottom-right
-        { x: ox - grow + dx, y: height + grow + dy }, // bottom-left
-        { x: -grow + dx, y: cy + dy }, // left
-    ];
-}
-const HexagonShape = {
-    type: 'hexagon',
-    // Hexagon spreads node styles directly (historical parity with ellipse).
-    styleMode: 'spread',
-    outline(width, height, t = {}) {
-        const verts = hexagonVerts(width, height, t);
-        return { el: 'polygon', geom: { points: fmt(verts) }, verts };
-    },
-    boundaryPoint(rect, side, cross) {
-        const local = hexagonVerts(rect.w, rect.h, {});
-        const world = local.map((v) => ({ x: v.x + rect.x, y: v.y + rect.y }));
-        return polygonBoundaryPoint(world, side, cross);
-    },
-    portAnchor(width, height, side, rank, count) {
-        const cy = height / 2;
-        const edgeStart = width * 0.25;
-        const edgeSpan = width * 0.5;
-        switch (side) {
-            case 'top':
-                return { x: edgeStart + edgeSpan * edgeFraction(rank, count), y: 0 };
-            case 'bottom':
-                return { x: edgeStart + edgeSpan * edgeFraction(rank, count), y: height };
-            case 'right':
-                return { x: width, y: cy };
-            case 'left':
-            default:
-                return { x: 0, y: cy };
-        }
-    },
-};
-function boxOf(width, height, t) {
-    var _a, _b, _c;
-    const grow = (_a = t.grow) !== null && _a !== void 0 ? _a : 0;
-    return { x0: -grow + ((_b = t.dx) !== null && _b !== void 0 ? _b : 0), y0: -grow + ((_c = t.dy) !== null && _c !== void 0 ? _c : 0), w: width + 2 * grow, h: height + 2 * grow };
-}
-/** Round to 3dp so path/point strings stay compact and diff-stable. */
-function r3(n) {
-    return Math.round(n * 1000) / 1000;
-}
-/** Clamp a scalar into [lo, hi]. */
-function clampN(v, lo, hi) {
-    return Math.max(lo, Math.min(hi, v));
-}
-/**
- * Port anchor on a polygon's REAL edge: intersect the outline with the center
- * line at the even edge-fraction; fall back to the box edge at a vertex tangent.
- */
-function polygonPortAnchor(verts, width, height, side, rank, count) {
-    const f = edgeFraction(rank, count);
-    const cross = side === 'top' || side === 'bottom' ? width * f : height * f;
-    const p = polygonBoundaryPoint(verts, side, cross);
-    if (p)
-        return p;
-    return side === 'left'
-        ? { x: 0, y: cross }
-        : side === 'right'
-            ? { x: width, y: cross }
-            : side === 'top'
-                ? { x: cross, y: 0 }
-                : { x: cross, y: height };
-}
-/** Rect-style box-edge port anchor (used by the ~rectangular path shapes). */
-function boxPortAnchor(width, height, side, rank, count) {
-    const f = edgeFraction(rank, count);
-    switch (side) {
-        case 'left':
-            return { x: 0, y: height * f };
-        case 'right':
-            return { x: width, y: height * f };
-        case 'top':
-            return { x: width * f, y: 0 };
-        default:
-            return { x: width * f, y: height };
-    }
-}
-/** Build a straight-edged (polygon) shape from a box-parameterized vertex list. */
-function polygonShape(type, vertsFn, opts = {}) {
-    var _a;
-    return {
-        type,
-        styleMode: (_a = opts.styleMode) !== null && _a !== void 0 ? _a : 'inline',
-        outline(width, height, t = {}) {
-            const verts = vertsFn(boxOf(width, height, t));
-            return { el: 'polygon', geom: { points: fmt(verts) }, verts };
-        },
-        boundaryPoint(rect, side, cross) {
-            const local = vertsFn({ x0: 0, y0: 0, w: rect.w, h: rect.h });
-            const world = local.map((v) => ({ x: v.x + rect.x, y: v.y + rect.y }));
-            return polygonBoundaryPoint(world, side, cross);
-        },
-        portAnchor(width, height, side, rank, count) {
-            if (opts.portAnchor)
-                return opts.portAnchor(width, height, side, rank, count);
-            const verts = vertsFn({ x0: 0, y0: 0, w: width, h: height });
-            return polygonPortAnchor(verts, width, height, side, rank, count);
-        },
-        innerRect: opts.innerRect,
-    };
-}
-/** Build a curved / compound shape emitted as a single <path> (`d` from box). */
-function pathShape(type, dFn, opts = {}) {
-    var _a, _b;
-    return {
-        type,
-        styleMode: 'inline',
-        outline(width, height, t = {}) {
-            return { el: 'path', geom: { d: dFn(boxOf(width, height, t)) } };
-        },
-        // ~rectangular footprint → the bounding-box edge is a good attachment.
-        boundaryPoint: (_a = opts.boundaryPoint) !== null && _a !== void 0 ? _a : (() => null),
-        portAnchor: (_b = opts.portAnchor) !== null && _b !== void 0 ? _b : boxPortAnchor,
-        innerRect: opts.innerRect,
-    };
-}
-// ── Vertex builders (skew = horizontal shear used by parallelogram/trapezoid) ─
-const SKEW = 0.25; // fraction of width sheared off — the classic flowchart lean
-function parallelogramVerts(b, lean) {
-    const s = b.w * SKEW;
-    // lean = 1 → top edge shifted right (data / I-O); lean = -1 → shifted left.
-    return lean === 1
-        ? [
-            { x: r3(b.x0 + s), y: b.y0 },
-            { x: r3(b.x0 + b.w), y: b.y0 },
-            { x: r3(b.x0 + b.w - s), y: r3(b.y0 + b.h) },
-            { x: b.x0, y: r3(b.y0 + b.h) },
-        ]
-        : [
-            { x: b.x0, y: b.y0 },
-            { x: r3(b.x0 + b.w - s), y: b.y0 },
-            { x: r3(b.x0 + b.w), y: r3(b.y0 + b.h) },
-            { x: r3(b.x0 + s), y: r3(b.y0 + b.h) },
-        ];
-}
-function trapezoidVerts(b, narrow) {
-    const s = b.w * SKEW;
-    return narrow === 'top'
-        ? [
-            { x: r3(b.x0 + s), y: b.y0 },
-            { x: r3(b.x0 + b.w - s), y: b.y0 },
-            { x: r3(b.x0 + b.w), y: r3(b.y0 + b.h) },
-            { x: b.x0, y: r3(b.y0 + b.h) },
-        ]
-        : [
-            { x: b.x0, y: b.y0 },
-            { x: r3(b.x0 + b.w), y: b.y0 },
-            { x: r3(b.x0 + b.w - s), y: r3(b.y0 + b.h) },
-            { x: r3(b.x0 + s), y: r3(b.y0 + b.h) },
-        ];
-}
-function triangleVerts(b, dir) {
-    const cx = r3(b.x0 + b.w / 2);
-    return dir === 'up'
-        ? [
-            { x: cx, y: b.y0 },
-            { x: r3(b.x0 + b.w), y: r3(b.y0 + b.h) },
-            { x: b.x0, y: r3(b.y0 + b.h) },
-        ]
-        : [
-            { x: b.x0, y: b.y0 },
-            { x: r3(b.x0 + b.w), y: b.y0 },
-            { x: cx, y: r3(b.y0 + b.h) },
-        ];
-}
-/** UML package (folder): a tab on the top-left plus the body — a 7-vertex poly. */
-function packageVerts(b) {
-    const tabW = b.w * 0.4;
-    const tabH = b.h * 0.2;
-    return [
-        { x: b.x0, y: r3(b.y0 + tabH) },
-        { x: b.x0, y: b.y0 },
-        { x: r3(b.x0 + tabW), y: b.y0 },
-        { x: r3(b.x0 + tabW), y: r3(b.y0 + tabH) },
-        { x: r3(b.x0 + b.w), y: r3(b.y0 + tabH) },
-        { x: r3(b.x0 + b.w), y: r3(b.y0 + b.h) },
-        { x: b.x0, y: r3(b.y0 + b.h) },
-    ];
-}
-/** Isometric cube outer silhouette (a 6-vertex hexagon; edges drawn by cubePath). */
-function cubeSilhouetteVerts(b) {
-    const d = Math.min(b.w, b.h) * 0.22;
-    return [
-        { x: b.x0, y: r3(b.y0 + d) },
-        { x: r3(b.x0 + d), y: b.y0 },
-        { x: r3(b.x0 + b.w), y: b.y0 },
-        { x: r3(b.x0 + b.w), y: r3(b.y0 + b.h - d) },
-        { x: r3(b.x0 + b.w - d), y: r3(b.y0 + b.h) },
-        { x: b.x0, y: r3(b.y0 + b.h) },
-    ];
-}
-/** Note silhouette (folded top-right corner) — a 6-vertex poly; fold by notePath. */
-function noteVerts(b) {
-    const f = Math.min(b.w, b.h) * 0.25;
-    return [
-        { x: b.x0, y: b.y0 },
-        { x: r3(b.x0 + b.w - f), y: b.y0 },
-        { x: r3(b.x0 + b.w), y: r3(b.y0 + f) },
-        { x: r3(b.x0 + b.w), y: r3(b.y0 + b.h) },
-        { x: b.x0, y: r3(b.y0 + b.h) },
-    ];
-}
-// ── Straight-edged shapes ──────────────────────────────────────────────────
-const ParallelogramShape = polygonShape('parallelogram', (b) => parallelogramVerts(b, 1));
-const ParallelogramTopShape = polygonShape('parallelogram-top', (b) => parallelogramVerts(b, -1));
-const TrapezoidShape = polygonShape('trapezoid', (b) => trapezoidVerts(b, 'top'));
-const TrapezoidBottomShape = polygonShape('trapezoid-bottom', (b) => trapezoidVerts(b, 'bottom'));
-const TriangleShape = polygonShape('triangle', (b) => triangleVerts(b, 'up'), {
-    // apex/base custom anchors read better than generic edge intersections
-    portAnchor(width, height, side, rank, count) {
-        if (side === 'top')
-            return { x: width / 2, y: 0 };
-        if (side === 'bottom')
-            return { x: width * edgeFraction(rank, count), y: height };
-        if (side === 'left')
-            return { x: width * 0.25, y: height / 2 };
-        return { x: width * 0.75, y: height / 2 };
-    },
-    innerRect: (w, h) => ({ x: 0.25 * w, y: 0.45 * h, w: 0.5 * w, h: 0.5 * h }),
-});
-const TriangleDownShape = polygonShape('triangle-down', (b) => triangleVerts(b, 'down'), {
-    innerRect: (w, h) => ({ x: 0.25 * w, y: 0.05 * h, w: 0.5 * w, h: 0.5 * h }),
-});
-const PackageShape = polygonShape('package', packageVerts, {
-    innerRect: (w, h) => ({ x: 0.08 * w, y: 0.28 * h, w: 0.84 * w, h: 0.64 * h }),
-});
-const CubeShape = Object.assign(Object.assign({}, polygonShape('cube', cubeSilhouetteVerts, {
-    innerRect: (w, h) => ({ x: 0.06 * w, y: 0.32 * h, w: 0.62 * w, h: 0.6 * h }),
-})), { 
-    // Override the outline to draw the two interior 3D edges as extra subpaths.
-    outline(width, height, t = {}) {
-        const b = boxOf(width, height, t);
-        const d = Math.min(b.w, b.h) * 0.22;
-        const { x0, y0 } = b;
-        const w = b.w;
-        const h = b.h;
-        const front = `M ${r3(x0)},${r3(y0 + d)} L ${r3(x0)},${r3(y0 + h)} L ${r3(x0 + w - d)},${r3(y0 + h)} L ${r3(x0 + w - d)},${r3(y0 + d)} Z`;
-        const top = `M ${r3(x0)},${r3(y0 + d)} L ${r3(x0 + d)},${r3(y0)} L ${r3(x0 + w)},${r3(y0)} L ${r3(x0 + w - d)},${r3(y0 + d)}`;
-        const rightEdge = `M ${r3(x0 + w - d)},${r3(y0 + d)} L ${r3(x0 + w)},${r3(y0)} L ${r3(x0 + w)},${r3(y0 + h - d)} L ${r3(x0 + w - d)},${r3(y0 + h)}`;
-        return { el: 'path', geom: { d: `${front} ${top} ${rightEdge}` } };
-    } });
-// ── Curved / compound (path) shapes ────────────────────────────────────────
-const DocumentShape = pathShape('document', (b) => {
-    const wave = b.h * 0.12;
-    const { x0, y0, w, h } = b;
-    // rect top + sides, then a double Q-curve wavy bottom
-    return (`M ${r3(x0)},${r3(y0)} L ${r3(x0 + w)},${r3(y0)} L ${r3(x0 + w)},${r3(y0 + h - wave)} ` +
-        `Q ${r3(x0 + 0.75 * w)},${r3(y0 + h - 2 * wave)} ${r3(x0 + 0.5 * w)},${r3(y0 + h - wave)} ` +
-        `Q ${r3(x0 + 0.25 * w)},${r3(y0 + h)} ${r3(x0)},${r3(y0 + h - wave)} Z`);
-}, { innerRect: (w, h) => ({ x: 0.08 * w, y: 0.08 * h, w: 0.84 * w, h: 0.72 * h }) });
-/** Classic DB-cylinder rim radius (must match the outline generator exactly). */
-function cylinderRy(w, h) {
-    return Math.min(h / 2, w / 2 / (2.5 + w / h));
-}
-const CylinderShape = Object.assign(Object.assign({}, pathShape('cylinder', (b) => {
-    const { x0, y0, w, h } = b;
-    const rx = w / 2;
-    const ry = cylinderRy(w, h); // classic DB rim curvature
-    const body = h - 2 * ry;
-    // full top ellipse (two arcs) + body sides + front bottom arc
-    return (`M ${r3(x0)},${r3(y0 + ry)} ` +
-        `a ${r3(rx)},${r3(ry)} 0 0 0 ${r3(w)} 0 ` +
-        `a ${r3(rx)},${r3(ry)} 0 0 0 ${r3(-w)} 0 ` +
-        `l 0 ${r3(body)} ` +
-        `a ${r3(rx)},${r3(ry)} 0 0 0 ${r3(w)} 0 ` +
-        `l 0 ${r3(-body)}`);
-}, { innerRect: (w, h) => ({ x: 0.1 * w, y: 0.28 * h, w: 0.8 * w, h: 0.5 * h }) })), { 
-    // Card 7 — geometry-true anchors. Ports ride the cylinder's real geometry: the
-    // top port sits on the FRONT RIM SEAM (the visible top edge of the body, at
-    // y = 2·ry), the bottom on the front base arc, and the sides on the vertical
-    // body seam — not the bounding box.
-    portAnchor(width, height, side, rank, count) {
-        const ry = cylinderRy(width, height);
-        const rx = width / 2;
-        const cx = width / 2;
-        const f = edgeFraction(rank, count);
-        if (side === 'left' || side === 'right') {
-            return { x: side === 'left' ? 0 : width, y: ry + (height - 2 * ry) * f };
-        }
-        const x = Math.max(0, Math.min(width, cx + (f - 0.5) * rx * 1.6));
-        const dx = rx > 0 ? (x - cx) / rx : 0;
-        const off = ry * Math.sqrt(Math.max(0, 1 - dx * dx));
-        // front rim seam (top) / front base arc (bottom)
-        return side === 'top' ? { x, y: ry + off } : { x, y: height - ry + off };
-    },
-    // Smart-connection boundary: project onto the SILHOUETTE — the top/bottom rim
-    // curves and the vertical sides — instead of the bounding box.
-    boundaryPoint(rect, side, cross) {
-        const ry = cylinderRy(rect.w, rect.h);
-        const rx = rect.w / 2;
-        const cx = rect.x + rect.w / 2;
-        if (side === 'left')
-            return { x: rect.x, y: clampN(cross, rect.y + ry, rect.y + rect.h - ry) };
-        if (side === 'right')
-            return { x: rect.x + rect.w, y: clampN(cross, rect.y + ry, rect.y + rect.h - ry) };
-        const px = clampN(cross, rect.x, rect.x + rect.w);
-        const dx = rx > 0 ? (px - cx) / rx : 0;
-        const off = ry * Math.sqrt(Math.max(0, 1 - dx * dx));
-        return side === 'top'
-            ? { x: px, y: rect.y + ry - off } // upper half of the top rim
-            : { x: px, y: rect.y + rect.h - ry + off }; // lower half of the base
-    } });
-const CloudShape = pathShape('cloud', (b) => {
-    // Five bump arcs around the box — a recognizable cloud silhouette scaled
-    // to (w, h). Bumps are cubic beziers so grow/dx-dy just move the box.
-    const { x0, y0, w, h } = b;
-    const X = (fx) => r3(x0 + fx * w);
-    const Y = (fy) => r3(y0 + fy * h);
-    return (`M ${X(0.25)},${Y(0.85)} ` +
-        `C ${X(0.05)},${Y(0.85)} ${X(0.05)},${Y(0.55)} ${X(0.2)},${Y(0.5)} ` +
-        `C ${X(0.15)},${Y(0.2)} ${X(0.45)},${Y(0.1)} ${X(0.55)},${Y(0.3)} ` +
-        `C ${X(0.65)},${Y(0.08)} ${X(0.95)},${Y(0.15)} ${X(0.85)},${Y(0.45)} ` +
-        `C ${X(1.02)},${Y(0.5)} ${X(0.98)},${Y(0.82)} ${X(0.78)},${Y(0.85)} ` +
-        `Z`);
-}, { innerRect: (w, h) => ({ x: 0.2 * w, y: 0.35 * h, w: 0.6 * w, h: 0.45 * h }) });
-// Predefined process / subroutine: rect + a vertical bar inset on each side.
-const PredefinedProcessShape = pathShape('predefined-process', (b) => {
-    const { x0, y0, w, h } = b;
-    const bar = w * 0.1;
-    const rect = `M ${r3(x0)},${r3(y0)} L ${r3(x0 + w)},${r3(y0)} L ${r3(x0 + w)},${r3(y0 + h)} L ${r3(x0)},${r3(y0 + h)} Z`;
-    const left = `M ${r3(x0 + bar)},${r3(y0)} L ${r3(x0 + bar)},${r3(y0 + h)}`;
-    const right = `M ${r3(x0 + w - bar)},${r3(y0)} L ${r3(x0 + w - bar)},${r3(y0 + h)}`;
-    return `${rect} ${left} ${right}`;
-}, { innerRect: (w, h) => ({ x: 0.12 * w, y: 0.12 * h, w: 0.76 * w, h: 0.76 * h }) });
-// UML component: body rect + two small tabs protruding on the left edge.
-const ComponentShape = pathShape('component', (b) => {
-    const { x0, y0, w, h } = b;
-    const tw = w * 0.14;
-    const th = h * 0.16;
-    const bodyX = x0 + tw / 2;
-    const bodyW = w - tw / 2;
-    const y1 = y0 + h * 0.2;
-    const y2 = y0 + h * 0.55;
-    const body = `M ${r3(bodyX)},${r3(y0)} L ${r3(x0 + bodyW)},${r3(y0)} L ${r3(x0 + bodyW)},${r3(y0 + h)} L ${r3(bodyX)},${r3(y0 + h)} Z`;
-    const tab = (ty) => `M ${r3(x0)},${r3(ty)} L ${r3(x0 + tw)},${r3(ty)} L ${r3(x0 + tw)},${r3(ty + th)} L ${r3(x0)},${r3(ty + th)} Z`;
-    return `${body} ${tab(y1)} ${tab(y2)}`;
-}, { innerRect: (w, h) => ({ x: 0.16 * w, y: 0.1 * h, w: 0.76 * w, h: 0.8 * h }) });
-// Note: folded top-right corner rect + the little fold triangle.
-const NoteShape = Object.assign(Object.assign({}, pathShape('note', () => '', {
-    innerRect: (w, h) => ({ x: 0.08 * w, y: 0.08 * h, w: 0.84 * w, h: 0.84 * h }),
-})), { outline(width, height, t = {}) {
-        const b = boxOf(width, height, t);
-        const f = Math.min(b.w, b.h) * 0.25;
-        const { x0, y0, w, h } = b;
-        const body = `M ${r3(x0)},${r3(y0)} L ${r3(x0 + w - f)},${r3(y0)} L ${r3(x0 + w)},${r3(y0 + f)} L ${r3(x0 + w)},${r3(y0 + h)} L ${r3(x0)},${r3(y0 + h)} Z`;
-        const fold = `M ${r3(x0 + w - f)},${r3(y0)} L ${r3(x0 + w - f)},${r3(y0 + f)} L ${r3(x0 + w)},${r3(y0 + f)}`;
-        return { el: 'path', geom: { d: `${body} ${fold}` } };
-    },
-    boundaryPoint(rect, side, cross) {
-        const local = noteVerts({ x0: 0, y0: 0, w: rect.w, h: rect.h });
-        const world = local.map((v) => ({ x: v.x + rect.x, y: v.y + rect.y }));
-        return polygonBoundaryPoint(world, side, cross);
-    } });
-// Terminal / stadium / pill: a fully rounded rectangle (rx = ry = height/2).
-const TerminalShape = {
-    type: 'terminal',
-    styleMode: 'inline',
-    bodyStripKeys: ['rx', 'ry'], // never let a themed borderRadius fight rx = h/2
-    outline(width, height, t = {}) {
-        const b = boxOf(width, height, t);
-        const rad = b.h / 2;
-        return { el: 'rect', geom: { x: r3(b.x0), y: r3(b.y0), width: r3(b.w), height: r3(b.h), rx: r3(rad), ry: r3(rad) } };
-    },
-    boundaryPoint() {
-        return null; // straight top/bottom + semicircle ends → bbox edge is fine
-    },
-    portAnchor: boxPortAnchor,
-    innerRect: (w, h) => ({ x: h * 0.5, y: 0.15 * h, w: Math.max(0, w - h), h: 0.7 * h }),
-};
-// Actor (UML use-case): stick figure — head circle + torso/arms/legs strokes.
-const ActorShape = {
-    type: 'actor',
-    styleMode: 'inline',
-    outline(width, height, t = {}) {
-        const b = boxOf(width, height, t);
-        const { x0, y0, w, h } = b;
-        const cx = x0 + w / 2;
-        const rHead = Math.min(w * 0.22, h * 0.16);
-        const headCy = y0 + rHead;
-        const neck = headCy + rHead;
-        const hip = y0 + h * 0.62;
-        const arms = y0 + h * 0.4;
-        // head as two arcs (full circle), then torso, arms, and two legs
-        const head = `M ${r3(cx - rHead)},${r3(headCy)} a ${r3(rHead)},${r3(rHead)} 0 1 0 ${r3(2 * rHead)} 0 a ${r3(rHead)},${r3(rHead)} 0 1 0 ${r3(-2 * rHead)} 0`;
-        const torso = `M ${r3(cx)},${r3(neck)} L ${r3(cx)},${r3(hip)}`;
-        const armLine = `M ${r3(x0 + w * 0.18)},${r3(arms)} L ${r3(x0 + w * 0.82)},${r3(arms)}`;
-        const legs = `M ${r3(x0 + w * 0.2)},${r3(y0 + h)} L ${r3(cx)},${r3(hip)} L ${r3(x0 + w * 0.8)},${r3(y0 + h)}`;
-        return { el: 'path', geom: { d: `${head} ${torso} ${armLine} ${legs}` } };
-    },
-    boundaryPoint() {
-        return null;
-    },
-    // Card 7 — geometry-true anchors: the side ports attach to the actor's HANDS
-    // (the ends of the arm line at 40% height), the top to the head crown, and the
-    // bottom between the feet. Multiple ports on a side fan slightly so they don't
-    // stack on the same hand.
-    portAnchor(width, height, side, rank, count) {
-        const armY = height * 0.4;
-        const spread = (rank - (count - 1) / 2) * height * 0.12;
-        switch (side) {
-            case 'left':
-                return { x: width * 0.18, y: clampN(armY + spread, 0, height) };
-            case 'right':
-                return { x: width * 0.82, y: clampN(armY + spread, 0, height) };
-            case 'top':
-                return { x: width / 2, y: 0 };
-            case 'bottom':
-            default:
-                return { x: width * (0.2 + 0.6 * edgeFraction(rank, count)), y: height };
-        }
-    },
-};
-// ---------------------------------------------------------------------------
-// Registry
-// ---------------------------------------------------------------------------
-const registry = new Map();
-/**
- * Register (or replace) a shape definition. This is the payoff: a new shape is
- * added in ONE place and immediately works across body/selection/shadow,
- * smart-connection boundaries and port positioning — no switch edits.
- */
-function registerShape(type, def) {
-    registry.set(type, Object.assign(Object.assign({}, def), { type }));
-    // Wave 6: participate in the version/notify protocol (see `unregisterShape`
-    // below) so cached renders invalidate and ExtensionHost disposers are exact.
-    notifyShapeRegistered();
-}
-/**
- * Register an arbitrary SVG-path shape (Card 2). This is the payoff of the
- * geometry contract: a userland caller adds a brand-new silhouette in ONE call
- * and it works everywhere the built-ins do — node body, selection highlight,
- * drop shadow, smart-connection boundary and geometry-true port anchors — with
- * NO core-team switch edits.
- *
- * ```ts
- * // Parametric — a 5-point star that fills any box.
- * registerPathShape('star', (w, h) => starPath(w, h));
- * // Static — a chevron authored in a 24×24 art box.
- * registerPathShape('chevron', 'M2,4 L14,4 L22,12 L14,20 L2,20 L10,12 Z',
- *   { viewBox: { x: 0, y: 0, w: 24, h: 24 } });
- * ```
- */
-function registerPathShape(type, path, opts = {}) {
-    registry.set(type, buildPathShapeDefinition(type, path, opts));
-    // Wave 6: path shapes bypass `registerShape` (they build the definition here),
-    // so they must bump the version themselves or an extension that contributes a
-    // path shape would be invisible to cache invalidation and to its own disposer.
-    notifyShapeRegistered();
-}
-/**
- * BUILD a path shape's definition without storing it anywhere.
- *
- * Extracted from {@link registerPathShape} so a PER-DIAGRAM registry can offer
- * `registerPathShape` too. Everything expensive and everything subtle — path
- * parsing, the one-slot outline sample memo, the derived boundary and port
- * anchors — lives here, so the global and scoped paths cannot drift into
- * producing different geometry for the same path.
- */
-function buildPathShapeDefinition(type, path, opts = {}) {
-    var _a, _b;
-    const steps = (_a = opts.sampleSteps) !== null && _a !== void 0 ? _a : 24;
-    const viewBox = (_b = opts.viewBox) !== null && _b !== void 0 ? _b : { x: 0, y: 0, w: 1, h: 1 };
-    // Commands for a natural (origin-anchored) `width × height` box. Static strings
-    // are parsed ONCE and rescaled per size; generators re-parse their output.
-    const staticCmds = typeof path === 'string' ? (0, path_geometry_1.parsePath)(path) : null;
-    const cmdsForSize = (width, height) => staticCmds
-        ? (0, path_outline_1.fitCmdsToBox)(staticCmds, viewBox, width, height)
-        : (0, path_geometry_1.parsePath)(path(width, height));
-    // One-slot memo for the sampled outline — port positions are recomputed every
-    // frame per port, so re-flattening the path each call would be wasteful.
-    let sampleKey = '';
-    let sampleCache = [];
-    const outlinePoints = (width, height) => {
-        const key = `${width}x${height}`;
-        if (key !== sampleKey) {
-            sampleKey = key;
-            sampleCache = (0, path_outline_1.sampleOutlinePoints)(cmdsForSize(width, height), steps);
-        }
-        return sampleCache;
-    };
-    return {
-        type,
-        styleMode: 'inline',
-        outline(width, height, t = {}) {
-            const box = boxOf(width, height, t);
-            // Draw at the (grown) box size, then translate to the box origin so grow
-            // (selection padding) and dx/dy (shadow offset) compose exactly as they do
-            // for every other shape.
-            const cmds = (0, path_outline_1.translateCmds)(cmdsForSize(box.w, box.h), box.x0, box.y0);
-            return { el: 'path', geom: { d: (0, path_outline_1.serializePathCmds)(cmds) } };
-        },
-        boundaryPoint(rect, side, cross) {
-            if (opts.boundaryPoint)
-                return opts.boundaryPoint(rect, side, cross);
-            const local = outlinePoints(rect.w, rect.h);
-            if (local.length < 3)
-                return null; // degenerate → caller uses bbox edge
-            const world = local.map((v) => ({ x: v.x + rect.x, y: v.y + rect.y }));
-            return polygonBoundaryPoint(world, side, cross);
-        },
-        portAnchor(width, height, side, rank, count) {
-            if (opts.portAnchor)
-                return opts.portAnchor(width, height, side, rank, count);
-            const verts = outlinePoints(width, height);
-            if (verts.length < 3)
-                return boxPortAnchor(width, height, side, rank, count);
-            return polygonPortAnchor(verts, width, height, side, rank, count);
-        },
-        innerRect: opts.innerRect,
-    };
-}
-/**
- * The rect shape is the default fallback for unknown / unset shape types.
- *
- * Resolution order is DIAGRAM-FIRST, then process-global. A diagram that
- * contributed its own `badge` sees its own; every other diagram — and this one,
- * for every name it did not claim — still sees the global registry. See
- * `ext/registry-scope.ts` for why the lookup is ambient rather than threaded.
- */
-function getShape(type) {
-    var _a, _b, _c;
-    if (!type)
-        return RectShape;
-    return (_c = (_b = (_a = (0, registry_scope_1.scopedTable)(registry_scope_1.SHAPES)) === null || _a === void 0 ? void 0 : _a.get(type)) !== null && _b !== void 0 ? _b : registry.get(type)) !== null && _c !== void 0 ? _c : RectShape;
-}
-/** Whether a shape type is registered (excludes the implicit rect fallback). */
-function hasShape(type) {
-    var _a;
-    return ((_a = (0, registry_scope_1.scopedTable)(registry_scope_1.SHAPES)) === null || _a === void 0 ? void 0 : _a.has(type)) === true || registry.has(type);
-}
-/** All registered shape type names (built-ins + extended library + aliases). */
-function listShapes() {
-    const scoped = (0, registry_scope_1.scopedTable)(registry_scope_1.SHAPES);
-    if (!scoped || scoped.size === 0)
-        return [...registry.keys()];
-    // Union, global order first, so an override renames nothing and adds nothing twice.
-    return [...new Set([...registry.keys(), ...scoped.keys()])];
-}
-// ---------------------------------------------------------------------------
-// Wave 6 — Card 0: removal + invalidation.
-//
-// The registry previously had NO removal path and NO change signal, which made
-// a leak-free `ExtensionHost` disposer impossible to synthesize: an extension
-// could add a shape but never take it back, so tearing an extension down left
-// its shapes live forever. These are PURELY ADDITIVE — `registerShape` and the
-// lookup path above are untouched — and they are what `shapes.register()` on the
-// ExtensionHost returns its disposer against.
-//
-// The version counter mirrors the one edge-templates and the style registry
-// already expose, so a renderer can invalidate a cached VNode when the shape
-// catalogue changes underneath it.
-// ---------------------------------------------------------------------------
-let shapeVersion = 0;
-const shapeListeners = new Set();
-function bumpShapes() {
-    shapeVersion++;
-    for (const listener of [...shapeListeners])
-        listener();
-}
-/** Remove a registered shape. Returns false when the type was not registered. */
-function unregisterShape(type) {
-    const existed = registry.delete(type);
-    if (existed)
-        bumpShapes();
-    return existed;
-}
-/**
- * Snapshot the current catalogue, so a caller can restore it later. Used by the
- * ExtensionHost to give a scoped extension an exact "undo" even when it OVERWROTE
- * an existing shape rather than adding a new one.
- */
-function getShapeDefinition(type) {
-    var _a, _b;
-    return (_b = (_a = (0, registry_scope_1.scopedTable)(registry_scope_1.SHAPES)) === null || _a === void 0 ? void 0 : _a.get(type)) !== null && _b !== void 0 ? _b : registry.get(type);
-}
-/**
- * Monotonic counter, incremented on every add/remove. Cheap cache key.
- * NOTE: `registerShape` itself bumps it — see the wrapper installed below.
- */
-function getShapeRegistryVersion() {
-    return shapeVersion;
-}
-/** Subscribe to catalogue changes. Returns a disposer. */
-function onShapeRegistryChange(listener) {
-    shapeListeners.add(listener);
-    return () => shapeListeners.delete(listener);
-}
-/** Internal: let `registerShape` participate in the version/notify protocol. */
-function notifyShapeRegistered() {
-    bumpShapes();
-}
-/**
- * The label box for a shape in local coords. Falls back to a padded bounding
- * box when the shape doesn't override `innerRect`.
- */
-function getInnerRect(def, width, height) {
-    return def.innerRect ? def.innerRect(width, height) : defaultInnerRect(width, height);
-}
-/** Padded-bbox label box: inset by up to 8px, clamped so it never inverts. */
-function defaultInnerRect(width, height) {
-    const pad = Math.max(0, Math.min(8, width / 2 - 1, height / 2 - 1));
-    return { x: pad, y: pad, w: width - 2 * pad, h: height - 2 * pad };
-}
-// Register the five built-ins.
-for (const def of [RectShape, CircleShape, EllipseShape, DiamondShape, HexagonShape]) {
-    registry.set(def.type, def);
-}
-// Register the extended flowchart / BPMN / UML / ERD figure library. Each is a
-// full ShapeDefinition, so it works everywhere the built-ins do — no switch
-// edits at any of the five render sites.
-for (const def of [
-    ParallelogramShape,
-    ParallelogramTopShape,
-    TrapezoidShape,
-    TrapezoidBottomShape,
-    TriangleShape,
-    TriangleDownShape,
-    PackageShape,
-    CubeShape,
-    DocumentShape,
-    CylinderShape,
-    CloudShape,
-    PredefinedProcessShape,
-    ComponentShape,
-    NoteShape,
-    TerminalShape,
-    ActorShape,
-]) {
-    registry.set(def.type, def);
-}
-// Common aliases (draw.io / mermaid / BPMN vocabulary) → the same definitions.
-const SHAPE_ALIASES = {
-    data: ParallelogramShape, // flowchart I/O
-    'input-output': ParallelogramShape,
-    database: CylinderShape,
-    cylinder3d: CylinderShape,
-    subroutine: PredefinedProcessShape,
-    'predefined-process-alt': PredefinedProcessShape,
-    stadium: TerminalShape,
-    pill: TerminalShape,
-    terminator: TerminalShape,
-    'manual-operation': TrapezoidShape, // narrow-bottom in some dialects; near enough
-    folder: PackageShape,
-    comment: NoteShape,
-    'use-case-actor': ActorShape,
-};
-for (const [alias, def] of Object.entries(SHAPE_ALIASES)) {
-    registry.set(alias, def);
-}
-// ---------------------------------------------------------------------------
-// VNode builders — turn a ShapeDefinition + styles into the exact VNodes the
-// three render sites used to build inline. Kept here so all shape geometry and
-// its style-composition rules live together.
-// ---------------------------------------------------------------------------
-/**
- * Node body VNode. Reproduces the historical per-shape style composition:
- *  - 'inline' shapes (rect/circle/diamond) hoist fill/stroke/strokeWidth into
- *    an inline `style` string (highest CSS specificity) and pass the rest
- *    through; circle strips the meaningless rect rx/ry.
- *  - 'spread' shapes (ellipse/hexagon) spread node styles as presentation
- *    attributes with geometry merged last.
- */
-/** CSS property name for each paint key that may carry a `var()` reference. */
-const CSS_PAINT_PROPS = {
-    fill: 'fill',
-    stroke: 'stroke',
-    strokeWidth: 'stroke-width',
-};
-/**
- * Pull any paint whose value is a `var(--…)` reference out of the attribute bag
- * and into an inline CSS style string (where variables are legal).
- *
- * `hoisted` is `''` when nothing needed moving — the overwhelmingly common case,
- * and the caller then emits the original props untouched.
- */
-function hoistCssVarPaints(styles) {
-    const rest = Object.assign({}, styles);
-    const decls = [];
-    for (const [key, cssProp] of Object.entries(CSS_PAINT_PROPS)) {
-        const value = rest[key];
-        if (typeof value === 'string' && value.includes('var(')) {
-            decls.push(`${cssProp}: ${value}`);
-            delete rest[key];
-        }
-    }
-    if (decls.length === 0)
-        return { hoisted: '', rest };
-    // Preserve an existing style string, with the hoisted paints appended so they
-    // still win over anything the caller had already put there.
-    const existing = typeof rest['style'] === 'string' ? rest['style'] : '';
-    delete rest['style'];
-    return { hoisted: [existing, decls.join('; ')].filter(Boolean).join('; '), rest };
-}
-function buildShapeBody(def, width, height, cornerRadius, 
-// `any` (not Record<string, any>) so the inline `style` string below is
-// accepted — matches the original render helpers' loosely-typed styles arg.
-styles) {
-    var _a, _b;
-    const spec = def.outline(width, height, { radius: cornerRadius, radiusY: true });
-    if (def.styleMode === 'spread') {
-        // TWO bugs met on this line, found independently by the export and the theming
-        // work. Both are the same root cause — a 'spread' shape paints through
-        // PRESENTATION ATTRIBUTES — and the fix for one subsumes the other:
-        //
-        //   1. A presentation attribute LOSES to any author stylesheet rule. So
-        //      `[data-grafloria-instance] .diagram-node { fill: var(--grafloria-node-fill) }`
-        //      beat `fill="#e8f5e9"`, and in CSS mode an ellipse/hexagon (and every
-        //      'spread' figure) silently rendered the THEME fill instead of its own.
-        //      'inline' shapes never had this, because they hoist the same values into
-        //      an inline `style`, which DOES beat the stylesheet — the two style modes
-        //      simply disagreed about the cascade.
-        //   2. An attribute cannot hold a CSS variable: `fill="var(--grafloria-…)"` is
-        //      invalid, the attribute is dropped, and the shape paints BLACK. Wave 4
-        //      made that reachable, because a theme-bound property (`themeRef(...)`)
-        //      emits exactly such a var() reference.
-        //
-        // Hoisting EVERY paint into the inline style fixes both: inline style outranks
-        // the stylesheet (1) and is the one place var() is legal (2). The presentation
-        // attributes are KEPT, because Canvas/programmatic consumers and existing tests
-        // read props.fill — and where the value is a var(), the inline style is what
-        // actually paints.
-        const inlineStyle = composeInlineStyle(styles);
-        // Literal paints KEEP their presentation attribute (Canvas + programmatic
-        // consumers and the existing tests read props.fill). A var() paint DROPS it:
-        // the attribute is invalid, so it is not merely outranked — it is garbage that
-        // every downstream consumer would have to special-case (the headless exporter
-        // would write `fill="var(--…)"` into a standalone file, where nothing resolves
-        // it and the shape paints BLACK).
-        const { rest } = hoistCssVarPaints(styles);
-        return {
-            type: spec.el,
-            props: Object.assign(Object.assign(Object.assign({}, rest), (inlineStyle ? { style: mergeInlineStyle(styles.style, inlineStyle) } : {})), spec.geom),
-        };
-    }
-    // Split geometry into pre/post so deferred keys (rect rx/ry) win over any
-    // same-named key arriving via the pass-through styles.
-    const deferKeys = (_a = def.bodyDeferGeomKeys) !== null && _a !== void 0 ? _a : [];
-    const pre = {};
-    const post = {};
-    for (const [k, v] of Object.entries(spec.geom)) {
-        (deferKeys.includes(k) ? post : pre)[k] = v;
-    }
-    const { fill, stroke, strokeWidth, className } = styles, rest = tslib_1.__rest(styles, ["fill", "stroke", "strokeWidth", "className"]);
-    for (const k of (_b = def.bodyStripKeys) !== null && _b !== void 0 ? _b : [])
-        delete rest[k];
-    const inlineStyle = composeInlineStyle({ fill, stroke, strokeWidth });
-    return {
-        type: spec.el,
-        props: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, pre), (className ? { className } : {})), (inlineStyle ? { style: inlineStyle } : {})), rest), post),
-    };
-}
-/**
- * The paint values a node body must carry as an INLINE style, so they beat the
- * themed `.diagram-node` stylesheet rule (a presentation attribute would not).
- * Returns '' when no layer above the theme set anything — which is what lets an
- * untouched node still fall back to the theme.
- */
-function composeInlineStyle(styles) {
-    return [
-        styles.fill ? `fill: ${styles.fill}` : '',
-        styles.stroke ? `stroke: ${styles.stroke}` : '',
-        styles.strokeWidth !== undefined ? `stroke-width: ${styles.strokeWidth}` : '',
-    ]
-        .filter(Boolean)
-        .join('; ');
-}
-/** Append the hoisted paint to a style the caller already had (string or object form). */
-function mergeInlineStyle(existing, hoisted) {
-    if (existing === null || existing === undefined || existing === '')
-        return hoisted;
-    if (typeof existing === 'string')
-        return `${existing}; ${hoisted}`;
-    const parts = Object.entries(existing)
-        .filter(([, v]) => v !== null && v !== undefined)
-        .map(([k, v]) => `${k.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase()}: ${v}`);
-    return [...parts, hoisted].join('; ');
-}
-/** Selection-highlight VNode: the outline grown by `padding`, plus baseProps. */
-function buildShapeSelection(def, width, height, padding, baseProps) {
-    const spec = def.outline(width, height, { grow: padding, radius: 6, radiusY: true });
-    return { type: spec.el, props: Object.assign(Object.assign({}, spec.geom), baseProps) };
-}
-/** Drop-shadow VNode: the outline offset by (offset, offset), plus baseProps. */
-function buildShapeShadow(def, width, height, offset, borderRadius, baseProps) {
-    const spec = def.outline(width, height, {
-        dx: offset,
-        dy: offset,
-        radius: borderRadius,
-        radiusAlways: true,
-        radiusY: false,
-    });
-    return { type: spec.el, props: Object.assign(Object.assign({}, spec.geom), baseProps) };
-}
-//# sourceMappingURL=shape-registry.js.map