@grafloria/element 0.3.18 → 0.3.20

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

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

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

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