@grafloria/element 0.3.20 → 0.3.21

package/src/libs/renderer/src/svg/paint-servers.js

@@ -1,225 +0,0 @@
-"use strict";
-// SVG paint servers (Styling & theming — Card 2)
-//
-// First-class support for gradient / pattern fills and drop-shadow filters.
-// When a node/link `style.fill` or `style.stroke` is a SPEC OBJECT (not a
-// colour string), or `style.shadow` is a Shadow spec, the renderer materialises
-// a `<linearGradient>` / `<radialGradient>` / `<pattern>` / `<filter>` inside a
-// single deduped `<defs>` block and references it via `url(#grafloria-def-<hash>)`.
-//
-// Two identical specs hash to the SAME id, so they share ONE def — the renderer
-// keeps a per-frame Map<id, VNode> and only registers a def the first time it
-// sees that id in a frame.
-//
-// These helpers are PURE (no renderer state) so they can be unit-tested in
-// isolation; the renderer owns the per-frame dedup Map and the resolve() glue.
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.isPaintSpec = isPaintSpec;
-exports.isShadowSpec = isShadowSpec;
-exports.flattenPaint = flattenPaint;
-exports.paintDefId = paintDefId;
-exports.buildLinearGradientUserSpace = buildLinearGradientUserSpace;
-exports.buildRadialGradientUserSpace = buildRadialGradientUserSpace;
-exports.buildPaintServerVNode = buildPaintServerVNode;
-exports.buildShadowFilterVNode = buildShadowFilterVNode;
-const GRADIENT_TYPES = new Set(['linear', 'radial']);
-const PATTERN_TYPES = new Set(['dots', 'lines', 'grid', 'hatch', 'crosshatch']);
-/** True when a fill/stroke value is a paint-server spec object (vs a colour string). */
-function isPaintSpec(value) {
-    if (value == null || typeof value !== 'object')
-        return false;
-    const type = value.type;
-    return typeof type === 'string' && (GRADIENT_TYPES.has(type) || PATTERN_TYPES.has(type));
-}
-/** True when a `style.shadow` value is a Shadow spec object (vs the legacy boolean). */
-function isShadowSpec(value) {
-    return (value != null &&
-        typeof value === 'object' &&
-        typeof value.blur === 'number' &&
-        typeof value.offsetX === 'number');
-}
-/**
- * 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.
- */
-function flattenPaint(spec) {
-    var _a, _b, _c, _d, _e, _f;
-    if (spec.type === 'linear' || spec.type === 'radial') {
-        const stops = (_a = spec.stops) !== null && _a !== void 0 ? _a : [];
-        if (stops.length === 0)
-            return FLATTEN_FALLBACK;
-        let best = stops[0];
-        let bestDelta = Math.abs(((_b = best.offset) !== null && _b !== void 0 ? _b : 0) - 0.5);
-        for (const stop of stops) {
-            const delta = Math.abs(((_c = stop.offset) !== null && _c !== void 0 ? _c : 0) - 0.5);
-            if (delta < bestDelta) {
-                best = stop;
-                bestDelta = delta;
-            }
-        }
-        return (_d = best.color) !== null && _d !== void 0 ? _d : FLATTEN_FALLBACK;
-    }
-    // Pattern: dots/lines/grid/hatch/crosshatch.
-    return (_f = (_e = spec.backgroundColor) !== null && _e !== void 0 ? _e : spec.color) !== null && _f !== void 0 ? _f : FLATTEN_FALLBACK;
-}
-/** Used only when a spec carries no colour at all — a malformed spec still paints. */
-const FLATTEN_FALLBACK = '#888888';
-// ---------------------------------------------------------------------------
-// Stable hashing — identical specs (regardless of key order) share one def id.
-// ---------------------------------------------------------------------------
-function stableStringify(value) {
-    var _a;
-    if (value === null || typeof value !== 'object')
-        return (_a = JSON.stringify(value)) !== null && _a !== void 0 ? _a : 'null';
-    if (Array.isArray(value))
-        return '[' + value.map(stableStringify).join(',') + ']';
-    const keys = Object.keys(value).sort();
-    return '{' + keys.map((k) => JSON.stringify(k) + ':' + stableStringify(value[k])).join(',') + '}';
-}
-/** FNV-1a 32-bit → base36. Short, stable, collision-resistant enough for def ids. */
-function fnv1a(str) {
-    let h = 0x811c9dc5;
-    for (let i = 0; i < str.length; i++) {
-        h ^= str.charCodeAt(i);
-        h = Math.imul(h, 0x01000193);
-    }
-    return (h >>> 0).toString(36);
-}
-/** Stable `<defs>` element id for a paint/shadow spec (identical specs → same id). */
-function paintDefId(spec) {
-    return `grafloria-def-${fnv1a(stableStringify(spec))}`;
-}
-// ---------------------------------------------------------------------------
-// VNode builders (pure) — turn a spec + id into the SVG def element.
-// ---------------------------------------------------------------------------
-function buildStops(stops) {
-    return (stops !== null && stops !== void 0 ? stops : []).map((s, i) => ({
-        type: 'stop',
-        key: `stop-${i}`,
-        props: Object.assign({ offset: s.offset, 'stop-color': s.color }, (s.opacity !== undefined ? { 'stop-opacity': s.opacity } : {})),
-    }));
-}
-function buildLinearGradient(id, g) {
-    // Coordinates are 0–1 normalized → SVG default gradientUnits="objectBoundingBox".
-    return {
-        type: 'linearGradient',
-        key: id,
-        props: { id, x1: g.x1, y1: g.y1, x2: g.x2, y2: g.y2 },
-        children: buildStops(g.stops),
-    };
-}
-function buildRadialGradient(id, g) {
-    return {
-        type: 'radialGradient',
-        key: id,
-        props: { id, cx: g.cx, cy: g.cy, r: g.r },
-        children: buildStops(g.stops),
-    };
-}
-function buildPattern(id, p) {
-    var _a, _b, _c;
-    const tile = Math.max(1, (_a = p.spacing) !== null && _a !== void 0 ? _a : 8); // repeat period (user units)
-    const feature = Math.max(0.5, (_b = p.size) !== null && _b !== void 0 ? _b : 2); // dot radius / line thickness
-    const color = (_c = p.color) !== null && _c !== void 0 ? _c : '#000000';
-    const c = tile / 2;
-    const children = [];
-    if (p.backgroundColor) {
-        children.push({
-            type: 'rect',
-            key: 'bg',
-            props: { x: 0, y: 0, width: tile, height: tile, fill: p.backgroundColor },
-        });
-    }
-    const line = (x1, y1, x2, y2, key) => ({
-        type: 'line',
-        key,
-        props: { x1, y1, x2, y2, stroke: color, strokeWidth: feature },
-    });
-    switch (p.type) {
-        case 'dots':
-            children.push({ type: 'circle', key: 'dot', props: { cx: c, cy: c, r: feature, fill: color } });
-            break;
-        case 'lines':
-            children.push(line(0, c, tile, c, 'h'));
-            break;
-        case 'grid':
-            children.push(line(0, c, tile, c, 'h'), line(c, 0, c, tile, 'v'));
-            break;
-        case 'hatch':
-            children.push(line(0, tile, tile, 0, 'd'));
-            break;
-        case 'crosshatch':
-            children.push(line(0, tile, tile, 0, 'd1'), line(0, 0, tile, tile, 'd2'));
-            break;
-    }
-    return {
-        type: 'pattern',
-        key: id,
-        props: { id, width: tile, height: tile, patternUnits: 'userSpaceOnUse' },
-        children,
-    };
-}
-/** `<linearGradient gradientUnits="userSpaceOnUse">` with pixel endpoints. */
-function buildLinearGradientUserSpace(id, g) {
-    return {
-        type: 'linearGradient',
-        key: id,
-        props: { id, gradientUnits: 'userSpaceOnUse', x1: g.x1, y1: g.y1, x2: g.x2, y2: g.y2 },
-        children: buildStops(g.stops),
-    };
-}
-/** `<radialGradient gradientUnits="userSpaceOnUse">` with a pixel centre + radius. */
-function buildRadialGradientUserSpace(id, g) {
-    return {
-        type: 'radialGradient',
-        key: id,
-        props: { id, gradientUnits: 'userSpaceOnUse', cx: g.cx, cy: g.cy, r: g.r },
-        children: buildStops(g.stops),
-    };
-}
-/** Build the `<linearGradient>` / `<radialGradient>` / `<pattern>` def for a paint spec. */
-function buildPaintServerVNode(id, spec) {
-    switch (spec.type) {
-        case 'linear':
-            return buildLinearGradient(id, spec);
-        case 'radial':
-            return buildRadialGradient(id, spec);
-        default:
-            return buildPattern(id, spec);
-    }
-}
-/** Build the `<filter>` (feDropShadow) def for a Shadow spec. */
-function buildShadowFilterVNode(id, shadow) {
-    return {
-        type: 'filter',
-        key: id,
-        // Room around the element so the blurred shadow isn't clipped. The filter
-        // region is expressed as percentage strings, whereas VNodeProps types
-        // x/y/width/height as numbers — hence the `as any` on this one props object.
-        props: { id, x: '-50%', y: '-50%', width: '200%', height: '200%' },
-        children: [
-            {
-                type: 'feDropShadow',
-                key: 'drop',
-                props: {
-                    dx: shadow.offsetX,
-                    dy: shadow.offsetY,
-                    stdDeviation: shadow.blur,
-                    'flood-color': shadow.color,
-                },
-            },
-        ],
-    };
-}
-//# sourceMappingURL=paint-servers.js.map

package/src/libs/renderer/src/svg/panel.d.ts

@@ -1,115 +0,0 @@
-import type { NodeModel } from '@grafloria/engine';
-import type { VNode } from '../types/vnode.types';
-/** Icon/badge anchor: a corner, or `'c'` — dead centre of the node body
- *  (a BPMN event's trigger glyph sits in the middle of its circle). */
-export type PanelCorner = 'tl' | 'tr' | 'bl' | 'br' | 'c';
-/** A header band across the top of the node (ERD/UML title row). */
-export interface PanelHeader {
-    text?: string;
-    /**
-     * STACKED header lines — the UML classifier convention of a «stereotype»
-     * over the name. Wins over `text` when present; the band grows to hold
-     * every line, and each line is fitted to the band width (shrunk, never
-     * clipped: «enumeration» over a 120px card used to paint "umeration»
-     * Enumera" cut off at both edges).
-     */
-    lines?: string[];
-    /** Band height in px. Default 22, or 16/line + 4 when `lines` stack. */
-    height?: number;
-    fill?: string;
-    textColor?: string;
-}
-/** A raster image slot below the header (data: URI strongly preferred). */
-export interface PanelImage {
-    href: string;
-    /** Slot height in px. Default 48. */
-    height?: number;
-}
-/** A small icon — a raster href OR an emoji/text glyph — pinned to a corner. */
-export interface PanelIcon {
-    href?: string;
-    /** Emoji or short glyph, used when `href` is absent. */
-    glyph?: string;
-    /** Box size in px. Default 18. */
-    size?: number;
-    /** Corner to pin to. Default 'tl'. */
-    corner?: PanelCorner;
-}
-/** A count / status badge pinned to a corner. */
-export interface PanelBadge {
-    text: string;
-    corner?: PanelCorner;
-    fill?: string;
-    textColor?: string;
-}
-/** A stacked body text row (ERD field / UML member). */
-export interface PanelRow {
-    text: string;
-    align?: 'start' | 'middle' | 'end';
-}
-/** The composite-panel spec stored at `node.metadata.panel`. */
-export interface PanelSpec {
-    header?: PanelHeader;
-    image?: PanelImage;
-    icon?: PanelIcon;
-    badges?: PanelBadge[];
-    rows?: PanelRow[];
-    /** Per-row height in px. Default 18. */
-    rowHeight?: number;
-}
-/** Read a node's panel spec, or null when it has none. */
-export declare function getNodePanel(node: NodeModel): PanelSpec | null;
-/** True when the node carries a composite panel. */
-export declare function hasPanel(node: NodeModel): boolean;
-/**
- * Allow only image-safe URL schemes on an asset href. Blocks `javascript:` and
- * `data:text/html` (the executable-URL vectors); permits `data:image/*`,
- * `blob:`, `http(s):`, and scheme-relative / path references. An unsafe or
- * non-string href resolves to '' so the slot renders empty instead of dangerous.
- */
-export declare function sanitizeAssetUrl(href: unknown): string;
-/**
- * Extra content space a panel reserves so content-aware auto-sizing (Card 7)
- * grows the shape to fit the WHOLE body. `top` = header + image stacked above
- * the label; `bottom` = the stacked rows below it; `width` = the widest text the
- * panel must show.
- */
-export declare function measurePanelReserve(node: NodeModel): {
-    top?: number;
-    bottom?: number;
-    width?: number;
-} | undefined;
-/** Style inputs the host renderer supplies (theme-derived, CSS-mode aware). */
-export interface PanelRenderContext {
-    /** Node id — used for stable child keys. */
-    nodeId: string;
-    fontSize: number;
-    headerFill: string;
-    headerTextColor: string;
-    bodyTextColor: string;
-    badgeFill: string;
-    badgeTextColor: string;
-}
-/**
- * Build the panel overlay VNodes for a node, in draw order (background bands
- * first, corner overlays last). Returns [] when the node has no panel. These are
- * appended to the node group ON TOP of the base shape body, so the panel rides
- * whatever silhouette the shape registry drew.
- */
-export declare function renderNodePanel(node: NodeModel, width: number, height: number, ctx: PanelRenderContext): VNode[];
-/**
- * The body inner rect available to the node LABEL once the panel's header/image
- * (top) and rows (bottom) have taken their space. Keeps the label from
- * overlapping the panel bands. Given the shape's own inner rect.
- */
-export declare function panelAdjustedInnerRect(node: NodeModel, inner: {
-    x: number;
-    y: number;
-    w: number;
-    h: number;
-}, width: number, height: number): {
-    x: number;
-    y: number;
-    w: number;
-    h: number;
-};

package/src/libs/renderer/src/svg/panel.js

@@ -1,353 +0,0 @@
-"use strict";
-// Composite / panel node model (Wave 5 / Nodes & shapes — Card 5)
-//
-// A node body beyond "one shape + one label": an optional header band over the
-// body (ERD / UML title rows), an image slot, an icon slot, corner/count badges
-// and stacked text rows. This is a LIGHTWEIGHT panel — a vertical stack plus
-// four corner anchors, deliberately ~10% of a GoJS Panel — NOT a general layout
-// engine.
-//
-// It composes with ANY base shape: the panel VNodes are OVERLAID on top of the
-// shape body the registry produced, so `{ shape: 'cylinder', panel: {...} }`
-// works exactly like `{ shape: 'rect', panel: {...} }`. The spec lives on
-// `node.metadata.panel`, so it serializes for free.
-//
-// SAFETY: every text field is user data and is emitted through `textContent`
-// (never innerHTML), and every image href is passed through `sanitizeAssetUrl`,
-// which blocks the `javascript:`/`data:text/html` vectors. This is the same
-// "diagram data is user input" rule the foreignObject XSS fix established.
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getNodePanel = getNodePanel;
-exports.hasPanel = hasPanel;
-exports.sanitizeAssetUrl = sanitizeAssetUrl;
-exports.measurePanelReserve = measurePanelReserve;
-exports.renderNodePanel = renderNodePanel;
-exports.panelAdjustedInnerRect = panelAdjustedInnerRect;
-const DEFAULT_HEADER_HEIGHT = 22;
-const DEFAULT_IMAGE_HEIGHT = 48;
-const DEFAULT_ROW_HEIGHT = 18;
-const DEFAULT_ICON_SIZE = 18;
-const DEFAULT_FONT_SIZE = 12;
-const HEADER_LINE_HEIGHT = 16;
-const MIN_HEADER_FONT_PX = 8;
-/** The header's lines, whether given as `lines` or a single `text`. */
-function headerLines(header) {
-    if (header.lines && header.lines.length > 0)
-        return header.lines;
-    return header.text ? [header.text] : [];
-}
-/** The header band's height: explicit, or grown to hold its stacked lines. */
-function headerHeight(header) {
-    if (header.height !== undefined)
-        return header.height;
-    const n = headerLines(header).length;
-    return n > 1 ? n * HEADER_LINE_HEIGHT + 4 : DEFAULT_HEADER_HEIGHT;
-}
-/**
- * The font size at which one UNWRAPPABLE header line fits `maxWidth`. Same
- * 0.6em average-glyph estimate the label engine uses; the floor keeps a very
- * long line legible-and-shrunk rather than invisible (past it the band is
- * simply too small for the name, and clipping at 8px beats 3px noise).
- */
-function fitHeaderLine(line, maxWidth, base) {
-    if (!line || !isFinite(maxWidth) || maxWidth <= 0)
-        return base;
-    const needed = maxWidth / (line.length * 0.6);
-    return needed >= base ? base : Math.max(MIN_HEADER_FONT_PX, Math.floor(needed));
-}
-/** Read a node's panel spec, or null when it has none. */
-function getNodePanel(node) {
-    const raw = node.getMetadata('panel');
-    return raw && typeof raw === 'object' ? raw : null;
-}
-/** True when the node carries a composite panel. */
-function hasPanel(node) {
-    return getNodePanel(node) !== null;
-}
-/**
- * Allow only image-safe URL schemes on an asset href. Blocks `javascript:` and
- * `data:text/html` (the executable-URL vectors); permits `data:image/*`,
- * `blob:`, `http(s):`, and scheme-relative / path references. An unsafe or
- * non-string href resolves to '' so the slot renders empty instead of dangerous.
- */
-function sanitizeAssetUrl(href) {
-    if (typeof href !== 'string')
-        return '';
-    const trimmed = href.trim();
-    if (trimmed === '')
-        return '';
-    // Strip whitespace + control chars (0x00–0x20 and DEL) an attacker could use
-    // to smuggle a scheme past the check ("java\tscript:"), but keep URL
-    // punctuation intact. Escapes only — never embed raw control bytes here.
-    const normalized = trimmed.replace(/[\u0000-\u0020\u007f]/g, '').toLowerCase();
-    if (normalized.startsWith('javascript:') || normalized.startsWith('vbscript:'))
-        return '';
-    if (normalized.startsWith('data:')) {
-        // Only raster image data URIs — never data:text/html or data:image/svg+xml
-        // (SVG can carry script).
-        return /^data:image\/(png|jpe?g|gif|webp|bmp|avif);/.test(normalized) ? trimmed : '';
-    }
-    return trimmed;
-}
-/**
- * Extra content space a panel reserves so content-aware auto-sizing (Card 7)
- * grows the shape to fit the WHOLE body. `top` = header + image stacked above
- * the label; `bottom` = the stacked rows below it; `width` = the widest text the
- * panel must show.
- */
-function measurePanelReserve(node) {
-    var _a, _b;
-    const panel = getNodePanel(node);
-    if (!panel)
-        return undefined;
-    const rowHeight = (_a = panel.rowHeight) !== null && _a !== void 0 ? _a : DEFAULT_ROW_HEIGHT;
-    let top = 0;
-    let bottom = 0;
-    let width = 0;
-    if (panel.header) {
-        top += headerHeight(panel.header);
-        for (const line of headerLines(panel.header))
-            width = Math.max(width, estimate(line));
-    }
-    if (panel.image)
-        top += (_b = panel.image.height) !== null && _b !== void 0 ? _b : DEFAULT_IMAGE_HEIGHT;
-    if (panel.rows && panel.rows.length > 0) {
-        bottom += panel.rows.length * rowHeight;
-        for (const row of panel.rows)
-            width = Math.max(width, estimate(row.text));
-    }
-    const out = {};
-    if (top > 0)
-        out.top = top;
-    if (bottom > 0)
-        out.bottom = bottom;
-    if (width > 0)
-        out.width = width;
-    return Object.keys(out).length > 0 ? out : undefined;
-}
-function estimate(text) {
-    return text ? text.length * DEFAULT_FONT_SIZE * 0.6 + 12 : 0;
-}
-/**
- * Build the panel overlay VNodes for a node, in draw order (background bands
- * first, corner overlays last). Returns [] when the node has no panel. These are
- * appended to the node group ON TOP of the base shape body, so the panel rides
- * whatever silhouette the shape registry drew.
- */
-function renderNodePanel(node, width, height, ctx) {
-    var _a, _b, _c, _d, _e;
-    const panel = getNodePanel(node);
-    if (!panel)
-        return [];
-    const out = [];
-    const rowHeight = (_a = panel.rowHeight) !== null && _a !== void 0 ? _a : DEFAULT_ROW_HEIGHT;
-    let cursorY = 0;
-    // ── header band ──────────────────────────────────────────────────────────
-    if (panel.header) {
-        const header = panel.header;
-        const h = headerHeight(header);
-        out.push({
-            type: 'rect',
-            key: `panel-header-bg-${ctx.nodeId}`,
-            props: {
-                x: 0,
-                y: 0,
-                width,
-                height: h,
-                fill: (_b = header.fill) !== null && _b !== void 0 ? _b : ctx.headerFill,
-                className: 'panel-header',
-                pointerEvents: 'none',
-            },
-        });
-        const lines = headerLines(header);
-        const lineH = lines.length > 0 ? h / lines.length : h;
-        lines.forEach((line, i) => {
-            var _a;
-            // A stacked stereotype line reads smaller and lighter than the name —
-            // the UML card convention («interface» over Interface).
-            const stereo = lines.length > 1 && i < lines.length - 1;
-            const base = stereo ? ctx.fontSize - 2 : ctx.fontSize;
-            out.push(textVNode(`panel-header-text-${ctx.nodeId}${lines.length > 1 ? `-${i}` : ''}`, {
-                text: line,
-                x: width / 2,
-                y: lineH * (i + 0.5),
-                align: 'middle',
-                fill: (_a = header.textColor) !== null && _a !== void 0 ? _a : ctx.headerTextColor,
-                // A header line cannot wrap; it shrinks to its band instead of
-                // painting past the card's edges.
-                fontSize: fitHeaderLine(line, width - 10, base),
-                fontWeight: stereo ? 400 : 600,
-            }));
-        });
-        cursorY += h;
-    }
-    // ── image slot ───────────────────────────────────────────────────────────
-    if (panel.image) {
-        const h = (_c = panel.image.height) !== null && _c !== void 0 ? _c : DEFAULT_IMAGE_HEIGHT;
-        const href = sanitizeAssetUrl(panel.image.href);
-        if (href) {
-            out.push({
-                type: 'image',
-                key: `panel-image-${ctx.nodeId}`,
-                props: {
-                    x: 0,
-                    y: cursorY,
-                    width,
-                    height: h,
-                    href,
-                    preserveAspectRatio: 'xMidYMid meet',
-                    className: 'panel-image',
-                    pointerEvents: 'none',
-                },
-            });
-        }
-        cursorY += h;
-    }
-    // ── stacked rows (ERD/UML members), pinned to the BOTTOM of the body ───────
-    if (panel.rows && panel.rows.length > 0) {
-        const rowsTop = height - panel.rows.length * rowHeight;
-        panel.rows.forEach((row, i) => {
-            var _a;
-            const align = (_a = row.align) !== null && _a !== void 0 ? _a : 'start';
-            const x = align === 'middle' ? width / 2 : align === 'end' ? width - 6 : 6;
-            out.push(textVNode(`panel-row-${ctx.nodeId}-${i}`, {
-                text: row.text,
-                x,
-                y: rowsTop + i * rowHeight + rowHeight / 2,
-                align,
-                fill: ctx.bodyTextColor,
-                fontSize: ctx.fontSize,
-            }));
-        });
-    }
-    // ── icon (corner overlay) ──────────────────────────────────────────────────
-    if (panel.icon) {
-        const size = (_d = panel.icon.size) !== null && _d !== void 0 ? _d : DEFAULT_ICON_SIZE;
-        const pos = cornerBox((_e = panel.icon.corner) !== null && _e !== void 0 ? _e : 'tl', width, height, size, size);
-        const href = sanitizeAssetUrl(panel.icon.href);
-        if (href) {
-            out.push({
-                type: 'image',
-                key: `panel-icon-${ctx.nodeId}`,
-                props: {
-                    x: pos.x,
-                    y: pos.y,
-                    width: size,
-                    height: size,
-                    href,
-                    preserveAspectRatio: 'xMidYMid meet',
-                    className: 'panel-icon',
-                    pointerEvents: 'none',
-                },
-            });
-        }
-        else if (panel.icon.glyph) {
-            out.push(textVNode(`panel-icon-${ctx.nodeId}`, {
-                text: panel.icon.glyph,
-                x: pos.x + size / 2,
-                y: pos.y + size / 2,
-                align: 'middle',
-                fill: ctx.bodyTextColor,
-                fontSize: size,
-            }));
-        }
-    }
-    // ── badges (corner overlays, last so they sit on top) ──────────────────────
-    if (panel.badges && panel.badges.length > 0) {
-        // Group badges by corner so multiple badges on the same corner stack inward.
-        const perCorner = new Map();
-        panel.badges.forEach((badge, i) => {
-            var _a, _b, _c, _d;
-            const corner = (_a = badge.corner) !== null && _a !== void 0 ? _a : 'tr';
-            const index = (_b = perCorner.get(corner)) !== null && _b !== void 0 ? _b : 0;
-            perCorner.set(corner, index + 1);
-            const text = String(badge.text);
-            const bw = Math.max(16, text.length * ctx.fontSize * 0.6 + 8);
-            const bh = 16;
-            const base = cornerBox(corner, width, height, bw, bh);
-            // Stack additional same-corner badges toward the centre horizontally.
-            const dir = corner === 'tr' || corner === 'br' ? -1 : 1;
-            const x = base.x + dir * index * (bw + 4);
-            out.push({
-                type: 'rect',
-                key: `panel-badge-bg-${ctx.nodeId}-${i}`,
-                props: {
-                    x,
-                    y: base.y,
-                    width: bw,
-                    height: bh,
-                    rx: bh / 2,
-                    ry: bh / 2,
-                    fill: (_c = badge.fill) !== null && _c !== void 0 ? _c : ctx.badgeFill,
-                    className: 'panel-badge',
-                    pointerEvents: 'none',
-                },
-            });
-            out.push(textVNode(`panel-badge-text-${ctx.nodeId}-${i}`, {
-                text,
-                x: x + bw / 2,
-                y: base.y + bh / 2,
-                align: 'middle',
-                fill: (_d = badge.textColor) !== null && _d !== void 0 ? _d : ctx.badgeTextColor,
-                fontSize: ctx.fontSize - 2,
-                fontWeight: 600,
-            }));
-        });
-    }
-    return out;
-}
-/**
- * The body inner rect available to the node LABEL once the panel's header/image
- * (top) and rows (bottom) have taken their space. Keeps the label from
- * overlapping the panel bands. Given the shape's own inner rect.
- */
-function panelAdjustedInnerRect(node, inner, width, height) {
-    var _a, _b;
-    const panel = getNodePanel(node);
-    if (!panel)
-        return inner;
-    const rowHeight = (_a = panel.rowHeight) !== null && _a !== void 0 ? _a : DEFAULT_ROW_HEIGHT;
-    let top = 0;
-    let bottom = 0;
-    if (panel.header)
-        top += headerHeight(panel.header);
-    if (panel.image)
-        top += (_b = panel.image.height) !== null && _b !== void 0 ? _b : DEFAULT_IMAGE_HEIGHT;
-    if (panel.rows && panel.rows.length > 0)
-        bottom += panel.rows.length * rowHeight;
-    // Intersect the panel-reserved body band with the shape's own inner rect.
-    const bandTop = Math.max(inner.y, top);
-    const bandBottom = Math.min(inner.y + inner.h, height - bottom);
-    const h = Math.max(0, bandBottom - bandTop);
-    return { x: inner.x, y: bandTop, w: inner.w, h };
-}
-/** Position a `bw × bh` box in one of the four corners (2px inset) or centred. */
-function cornerBox(corner, width, height, bw, bh) {
-    const inset = 2;
-    const right = width - bw - inset;
-    const bottom = height - bh - inset;
-    switch (corner) {
-        case 'tl':
-            return { x: inset, y: inset };
-        case 'tr':
-            return { x: right, y: inset };
-        case 'bl':
-            return { x: inset, y: bottom };
-        case 'br':
-            return { x: right, y: bottom };
-        case 'c':
-            return { x: (width - bw) / 2, y: (height - bh) / 2 };
-    }
-}
-/**
- * A single-line <text> carrying user content via `textContent` (never
- * innerHTML). dominant-baseline centres it vertically on `y`.
- */
-function textVNode(key, spec) {
-    return {
-        type: 'text',
-        key,
-        props: Object.assign(Object.assign({ x: spec.x, y: spec.y, textAnchor: spec.align, dominantBaseline: 'middle', fontSize: spec.fontSize, fill: spec.fill }, (spec.fontWeight ? { fontWeight: spec.fontWeight } : {})), { pointerEvents: 'none', textContent: spec.text }),
-    };
-}
-//# sourceMappingURL=panel.js.map