@grafloria/element 0.3.18 → 0.3.20

package/src/libs/renderer/src/svg/edge-templates.d.ts

@@ -0,0 +1,152 @@
+/**
+ * edge-templates.ts — Wave 4 (Edges & links), Card 5
+ *
+ * The extensibility seam for edges: LINK templates, LABEL templates and custom
+ * MARKERS. Before this, `LabelRenderer` could only emit SVG `<text>` and
+ * `ArrowStyle.type` was a closed enum — an author who wanted an HTML badge on an
+ * edge, a bespoke link body, or a half-arrowhead had to fork the renderer.
+ *
+ * Three registries, one shape (same as the named-style registry in
+ * ../themes/style-registry.ts, deliberately):
+ *
+ *   registerLinkTemplate('audit-trail', ctx => …)   // link.style.template
+ *   registerLabelTemplate('badge',      ctx => …)   // label.template
+ *   registerMarker('feather',           { render, tipOffset })  // arrowHead.type
+ *
+ * WHY NAMES AND NOT FUNCTIONS ON THE MODEL: LinkStyle / LinkLabel are
+ * serializable model state that lives in @grafloria/engine, and the engine must not
+ * depend on the renderer's VNode type. A name survives save/load; a closure does
+ * not. It also means a template can be redefined at runtime and every link using
+ * it repaints — which is why renderers subscribe to `onEdgeTemplateChange` and
+ * drop their VNode cache, exactly like they do for named styles.
+ *
+ * Framework-agnostic: VNodes only. A template that wants real HTML returns a
+ * `foreignObject` VNode (see `htmlLabelVNode`); the patcher materialises its
+ * children in the XHTML namespace and then treats the subtree as opaque.
+ */
+import type { ArrowStyle, LinkLabel, LinkModel, Point } from '@grafloria/engine';
+import type { VNode } from '../types/vnode.types';
+import type { Theme } from '../types/theme.types';
+/** What a LINK template is given. Everything it needs; nothing it can corrupt. */
+export interface LinkTemplateContext {
+    link: LinkModel;
+    /** The ROUTED polyline for this frame — not the model's stale `segments`. */
+    points: Point[];
+    /** The SVG path string the default renderer would have drawn (jumps included). */
+    pathData: string;
+    /** Resolved link styles (stroke, strokeWidth, className, …) for this state. */
+    styles: Record<string, unknown>;
+    theme: Theme;
+    /** Current level-of-detail tier, so a template can drop detail when zoomed out. */
+    lod: string;
+    /** True when the link is selected — templates usually want to react to this. */
+    selected: boolean;
+}
+/** What a LABEL template is given. */
+export interface LabelTemplateContext {
+    label: LinkLabel;
+    link: LinkModel;
+    /** World-space anchor the label resolved to (position/slot + offset + optimizer). */
+    anchor: Point;
+    /** Rotation in degrees the default renderer would have applied, if any. */
+    rotation?: number;
+    theme: Theme;
+}
+/** What a custom MARKER is given. */
+export interface MarkerContext {
+    style: ArrowStyle;
+    /** Normalised size (never negative). */
+    size: number;
+    /** Resolved colour (the marker's own, else the link's stroke). */
+    color: string;
+    /** Stroke width for outlined markers. */
+    width: number;
+    /**
+     * The SVG transform placing the marker: `translate(x, y) rotate(deg)`. The
+     * marker draws in its LOCAL frame — origin at the anchor, +x along the
+     * direction of travel — and MUST put this on its root element.
+     */
+    transform: string;
+    /** Theme background — the fill for hollow markers, so they don't glare on dark. */
+    backgroundColor: string;
+    /** Which end this marker sits on. */
+    end: 'source' | 'target';
+}
+export type LinkTemplate = (ctx: LinkTemplateContext) => VNode | VNode[] | null;
+export type LabelTemplate = (ctx: LabelTemplateContext) => VNode | VNode[] | null;
+export interface MarkerDefinition {
+    render: (ctx: MarkerContext) => VNode | null;
+    /**
+     * Distance from the marker's local origin to its visual TIP along +x. The
+     * renderer pulls the marker back from the path endpoint by exactly this, so
+     * the tip lands ON the port. A triangle drawn from 0 to `size` has tipOffset
+     * `size`; a dot centred on the origin has `size / 2`; a bar has 0.
+     *
+     * Either a constant or a function of the style (so it can scale with `size`).
+     */
+    tipOffset?: number | ((style: ArrowStyle) => number);
+}
+export declare function registerLinkTemplate(name: string, template: LinkTemplate): void;
+export declare function getLinkTemplate(name: string): LinkTemplate | undefined;
+export declare function registerLabelTemplate(name: string, template: LabelTemplate): void;
+export declare function getLabelTemplate(name: string): LabelTemplate | undefined;
+export declare function registerMarker(name: string, definition: MarkerDefinition): void;
+export declare function getMarker(name: string): MarkerDefinition | undefined;
+export declare function hasMarker(name: string): boolean;
+/** Resolve a registered marker's tip offset for a concrete style. */
+export declare function markerTipOffset(definition: MarkerDefinition, style: ArrowStyle): number;
+export declare function listLinkTemplates(): string[];
+export declare function listLabelTemplates(): string[];
+export declare function listMarkers(): string[];
+/** Remove one link template. Returns false when it was not registered. */
+export declare function unregisterLinkTemplate(name: string): boolean;
+/** Remove one label template. Returns false when it was not registered. */
+export declare function unregisterLabelTemplate(name: string): boolean;
+/** Remove one marker. Returns false when it was not registered. */
+export declare function unregisterMarker(name: string): boolean;
+/** Drop every registration (tests, hosts tearing a document down). */
+export declare function clearEdgeTemplates(): void;
+/**
+ * Internal: let a PER-DIAGRAM registry participate in the version/notify
+ * protocol. A scoped registration must invalidate cached VNodes for exactly the
+ * reason a global one must — the definition is baked into the cache. Notifying
+ * every renderer (not just the contributing one) is deliberate: over-invalidation
+ * costs a repaint, under-invalidation shows a stale picture.
+ */
+export declare function notifyEdgeTemplatesChanged(): void;
+/** Bumped on every mutation — renderers key cache invalidation off this. */
+export declare function getEdgeTemplateVersion(): number;
+/**
+ * Subscribe to registry changes. Renderers use this to drop cached link VNodes
+ * when a template is (re)defined — the template's OUTPUT is baked into the
+ * cached VNode, so a redefinition that did not invalidate would never show up.
+ */
+export declare function onEdgeTemplateChange(listener: () => void): () => void;
+export interface HtmlLabelOptions {
+    /** Stable id: becomes part of the VNode key. */
+    id: string;
+    /** Raw HTML. Injected verbatim via `innerHTML` — the author owns its safety. */
+    html: string;
+    /** Centre of the label box in world coordinates. */
+    anchor: Point;
+    width: number;
+    height: number;
+    /** Extra class on the XHTML wrapper div. */
+    className?: string;
+}
+/**
+ * A `foreignObject` VNode carrying arbitrary HTML, positioned so `anchor` is its
+ * CENTRE (labels are centred on the path, unlike nodes which are top-left).
+ *
+ * THE KEY CARRIES A CONTENT HASH, and that is load-bearing. The VNode patcher
+ * treats `foreignObject` subtrees as OPAQUE: it patches their props but NEVER
+ * diffs into their children, so that whatever a framework mounted inside stays
+ * alive. That is exactly right for host-mounted content — and exactly wrong for
+ * content we own, because an edited label would keep rendering its old HTML
+ * forever. Folding the content into the key means changed HTML is a DIFFERENT
+ * VNode identity, which the patcher replaces wholesale. Unchanged HTML keeps the
+ * same key and the same live DOM.
+ */
+export declare function htmlLabelVNode(options: HtmlLabelOptions): VNode;
+/** FNV-1a — small, fast, stable across runs. Only used to key VNodes. */
+export declare function hashString(value: string): string;

package/src/libs/renderer/src/svg/edge-templates.js

@@ -0,0 +1,233 @@
+"use strict";
+/**
+ * edge-templates.ts — Wave 4 (Edges & links), Card 5
+ *
+ * The extensibility seam for edges: LINK templates, LABEL templates and custom
+ * MARKERS. Before this, `LabelRenderer` could only emit SVG `<text>` and
+ * `ArrowStyle.type` was a closed enum — an author who wanted an HTML badge on an
+ * edge, a bespoke link body, or a half-arrowhead had to fork the renderer.
+ *
+ * Three registries, one shape (same as the named-style registry in
+ * ../themes/style-registry.ts, deliberately):
+ *
+ *   registerLinkTemplate('audit-trail', ctx => …)   // link.style.template
+ *   registerLabelTemplate('badge',      ctx => …)   // label.template
+ *   registerMarker('feather',           { render, tipOffset })  // arrowHead.type
+ *
+ * WHY NAMES AND NOT FUNCTIONS ON THE MODEL: LinkStyle / LinkLabel are
+ * serializable model state that lives in @grafloria/engine, and the engine must not
+ * depend on the renderer's VNode type. A name survives save/load; a closure does
+ * not. It also means a template can be redefined at runtime and every link using
+ * it repaints — which is why renderers subscribe to `onEdgeTemplateChange` and
+ * drop their VNode cache, exactly like they do for named styles.
+ *
+ * Framework-agnostic: VNodes only. A template that wants real HTML returns a
+ * `foreignObject` VNode (see `htmlLabelVNode`); the patcher materialises its
+ * children in the XHTML namespace and then treats the subtree as opaque.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.registerLinkTemplate = registerLinkTemplate;
+exports.getLinkTemplate = getLinkTemplate;
+exports.registerLabelTemplate = registerLabelTemplate;
+exports.getLabelTemplate = getLabelTemplate;
+exports.registerMarker = registerMarker;
+exports.getMarker = getMarker;
+exports.hasMarker = hasMarker;
+exports.markerTipOffset = markerTipOffset;
+exports.listLinkTemplates = listLinkTemplates;
+exports.listLabelTemplates = listLabelTemplates;
+exports.listMarkers = listMarkers;
+exports.unregisterLinkTemplate = unregisterLinkTemplate;
+exports.unregisterLabelTemplate = unregisterLabelTemplate;
+exports.unregisterMarker = unregisterMarker;
+exports.clearEdgeTemplates = clearEdgeTemplates;
+exports.notifyEdgeTemplatesChanged = notifyEdgeTemplatesChanged;
+exports.getEdgeTemplateVersion = getEdgeTemplateVersion;
+exports.onEdgeTemplateChange = onEdgeTemplateChange;
+exports.htmlLabelVNode = htmlLabelVNode;
+exports.hashString = hashString;
+const patch_1 = require("../vnode/patch");
+const registry_scope_1 = require("../ext/registry-scope");
+// ===========================================================================
+// Registries
+// ===========================================================================
+const linkTemplates = new Map();
+const labelTemplates = new Map();
+const markers = new Map();
+const listeners = new Set();
+let version = 0;
+function bump() {
+    version++;
+    listeners.forEach(listener => listener());
+}
+function registerLinkTemplate(name, template) {
+    linkTemplates.set(name, template);
+    bump();
+}
+function getLinkTemplate(name) {
+    var _a, _b;
+    // DIAGRAM-FIRST, then process-global — see `ext/registry-scope.ts`.
+    return (_b = (_a = (0, registry_scope_1.scopedTable)(registry_scope_1.LINK_TEMPLATES)) === null || _a === void 0 ? void 0 : _a.get(name)) !== null && _b !== void 0 ? _b : linkTemplates.get(name);
+}
+function registerLabelTemplate(name, template) {
+    labelTemplates.set(name, template);
+    bump();
+}
+function getLabelTemplate(name) {
+    var _a, _b;
+    return (_b = (_a = (0, registry_scope_1.scopedTable)(registry_scope_1.LABEL_TEMPLATES)) === null || _a === void 0 ? void 0 : _a.get(name)) !== null && _b !== void 0 ? _b : labelTemplates.get(name);
+}
+function registerMarker(name, definition) {
+    markers.set(name, definition);
+    bump();
+}
+function getMarker(name) {
+    var _a, _b;
+    return (_b = (_a = (0, registry_scope_1.scopedTable)(registry_scope_1.MARKERS)) === null || _a === void 0 ? void 0 : _a.get(name)) !== null && _b !== void 0 ? _b : markers.get(name);
+}
+function hasMarker(name) {
+    var _a;
+    return ((_a = (0, registry_scope_1.scopedTable)(registry_scope_1.MARKERS)) === null || _a === void 0 ? void 0 : _a.has(name)) === true || markers.has(name);
+}
+/** Resolve a registered marker's tip offset for a concrete style. */
+function markerTipOffset(definition, style) {
+    const tip = definition.tipOffset;
+    if (typeof tip === 'function')
+        return tip(style);
+    return typeof tip === 'number' ? tip : 0;
+}
+function listLinkTemplates() {
+    return union(linkTemplates, (0, registry_scope_1.scopedTable)(registry_scope_1.LINK_TEMPLATES));
+}
+function listLabelTemplates() {
+    return union(labelTemplates, (0, registry_scope_1.scopedTable)(registry_scope_1.LABEL_TEMPLATES));
+}
+function listMarkers() {
+    return union(markers, (0, registry_scope_1.scopedTable)(registry_scope_1.MARKERS));
+}
+/** Global names plus this diagram's own, global order first, no duplicates. */
+function union(global, scoped) {
+    if (!scoped || scoped.size === 0)
+        return Array.from(global.keys());
+    return [...new Set([...global.keys(), ...scoped.keys()])];
+}
+// ---------------------------------------------------------------------------
+// Wave 6 — Card 0: per-name removal.
+//
+// `clearEdgeTemplates()` was all-or-nothing, which is useless as an extension
+// disposer: tearing down ONE extension would have wiped every OTHER extension's
+// templates too. These remove exactly one registration, which is what the
+// ExtensionHost's `links.registerTemplate()` disposer needs.
+// ---------------------------------------------------------------------------
+/** Remove one link template. Returns false when it was not registered. */
+function unregisterLinkTemplate(name) {
+    const existed = linkTemplates.delete(name);
+    if (existed)
+        bump();
+    return existed;
+}
+/** Remove one label template. Returns false when it was not registered. */
+function unregisterLabelTemplate(name) {
+    const existed = labelTemplates.delete(name);
+    if (existed)
+        bump();
+    return existed;
+}
+/** Remove one marker. Returns false when it was not registered. */
+function unregisterMarker(name) {
+    const existed = markers.delete(name);
+    if (existed)
+        bump();
+    return existed;
+}
+/** Drop every registration (tests, hosts tearing a document down). */
+function clearEdgeTemplates() {
+    if (linkTemplates.size === 0 && labelTemplates.size === 0 && markers.size === 0)
+        return;
+    linkTemplates.clear();
+    labelTemplates.clear();
+    markers.clear();
+    bump();
+}
+/**
+ * Internal: let a PER-DIAGRAM registry participate in the version/notify
+ * protocol. A scoped registration must invalidate cached VNodes for exactly the
+ * reason a global one must — the definition is baked into the cache. Notifying
+ * every renderer (not just the contributing one) is deliberate: over-invalidation
+ * costs a repaint, under-invalidation shows a stale picture.
+ */
+function notifyEdgeTemplatesChanged() {
+    bump();
+}
+/** Bumped on every mutation — renderers key cache invalidation off this. */
+function getEdgeTemplateVersion() {
+    return version;
+}
+/**
+ * Subscribe to registry changes. Renderers use this to drop cached link VNodes
+ * when a template is (re)defined — the template's OUTPUT is baked into the
+ * cached VNode, so a redefinition that did not invalidate would never show up.
+ */
+function onEdgeTemplateChange(listener) {
+    listeners.add(listener);
+    return () => listeners.delete(listener);
+}
+/**
+ * A `foreignObject` VNode carrying arbitrary HTML, positioned so `anchor` is its
+ * CENTRE (labels are centred on the path, unlike nodes which are top-left).
+ *
+ * THE KEY CARRIES A CONTENT HASH, and that is load-bearing. The VNode patcher
+ * treats `foreignObject` subtrees as OPAQUE: it patches their props but NEVER
+ * diffs into their children, so that whatever a framework mounted inside stays
+ * alive. That is exactly right for host-mounted content — and exactly wrong for
+ * content we own, because an edited label would keep rendering its old HTML
+ * forever. Folding the content into the key means changed HTML is a DIFFERENT
+ * VNode identity, which the patcher replaces wholesale. Unchanged HTML keeps the
+ * same key and the same live DOM.
+ */
+function htmlLabelVNode(options) {
+    const { id, html, anchor, width, height, className } = options;
+    return {
+        type: 'foreignObject',
+        key: `link-label-html-${id}-${hashString(html)}`,
+        props: {
+            x: anchor.x - width / 2,
+            y: anchor.y - height / 2,
+            width,
+            height,
+            className: 'link-label-foreign',
+            // foreignObject has no fill/stroke of its own; overflow must be visible or
+            // a label that outgrows its box is silently clipped.
+            style: { overflow: 'visible' },
+        },
+        children: [
+            {
+                type: 'div',
+                props: {
+                    xmlns: patch_1.XHTML_NS,
+                    className: className ? `link-label-html ${className}` : 'link-label-html',
+                    innerHTML: html,
+                    style: {
+                        width: '100%',
+                        height: '100%',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        pointerEvents: 'none',
+                    },
+                },
+                children: [],
+            },
+        ],
+    };
+}
+/** FNV-1a — small, fast, stable across runs. Only used to key VNodes. */
+function hashString(value) {
+    let hash = 0x811c9dc5;
+    for (let i = 0; i < value.length; i++) {
+        hash ^= value.charCodeAt(i);
+        hash = Math.imul(hash, 0x01000193);
+    }
+    return (hash >>> 0).toString(36);
+}
+//# sourceMappingURL=edge-templates.js.map

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

@@ -0,0 +1,50 @@
+import type { NodeModel } from '@grafloria/engine';
+import type { VNode } from '../types/vnode.types';
+/** A single node in the structured, sanitized rich-content tree. */
+export interface HtmlContentNode {
+    /** Element tag — validated against {@link ALLOWED_TAGS}. */
+    tag: string;
+    /** Text content, emitted via `textContent` (never innerHTML). */
+    text?: string;
+    /** Inline style (object form); values are sanitized. */
+    style?: Record<string, string | number>;
+    className?: string;
+    /** Extra attributes — filtered against {@link ALLOWED_ATTRS} + sanitized. */
+    attrs?: Record<string, string>;
+    children?: HtmlContentNode[];
+}
+/** The HTML-node body spec, stored at `node.metadata.html`. */
+export interface HtmlNodeContent {
+    /** Plain-text body (safe: rendered through `textContent`). */
+    text?: string;
+    /** Structured, sanitized rich content. */
+    content?: HtmlContentNode;
+    /** Inline style for the root container (object form; values sanitized). */
+    style?: Record<string, string | number>;
+    className?: string;
+    /** Inner padding (px). Default 4. */
+    padding?: number;
+    /**
+     * Let the HTML capture pointer events (forms / links). Default false, so the
+     * shape background beneath receives clicks and the node stays draggable /
+     * selectable like any shape.
+     */
+    interactive?: boolean;
+}
+/** Read a node's HTML body spec, or null when it has none. */
+export declare function getHtmlContent(node: NodeModel): HtmlNodeContent | null;
+/** True when the node renders an HTML body. */
+export declare function hasHtmlContent(node: NodeModel): boolean;
+/**
+ * Convert ONE sanitized content node to a VNode. Unknown tags collapse to a
+ * `<span>` (their text is kept, their dangerous identity is dropped). Returns
+ * null for a node that contributes nothing.
+ */
+export declare function sanitizeHtmlContent(spec: HtmlContentNode): VNode | null;
+/**
+ * Build the `<foreignObject>` body VNode for an HTML node, sized to the node.
+ * Returns null when the node has no HTML content. The wrapper div is
+ * `pointer-events: none` unless the content opts into interactivity, so the
+ * shape background beneath keeps receiving selection / drag hits.
+ */
+export declare function buildHtmlForeignObject(node: NodeModel, width: number, height: number): VNode | null;

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

@@ -0,0 +1,214 @@
+"use strict";
+// HTML / foreignObject rich-content nodes (Wave 5 / Nodes & shapes — Card 4)
+//
+// A node whose BODY is arbitrary HTML, sized to `node.size` and living inside a
+// `<foreignObject>`. Because it renders as an ordinary child of the node's
+// translated+rotated `<g>` (on top of the shape background the registry drew), it
+// participates in selection, hit-testing and rotation exactly like any shape —
+// no separate code path.
+//
+// TWO hard-won invariants are honored here:
+//
+//   1. OPAQUE foreignObject (patch.ts). The VNode patcher patches a
+//      foreignObject's PROPS but never diffs its children, so live HTML survives
+//      across frames. We therefore KEY the foreignObject by a hash of its
+//      content: a data change flips the key → the patcher replaces the whole
+//      subtree (fresh content); a hover / selection change keeps the key → the
+//      subtree is left untouched.
+//
+//   2. "Diagram data is user input." NOTHING here uses `innerHTML`. Rich content
+//      is a STRUCTURED, allow-listed tree (`HtmlContentNode`) converted to VNodes
+//      whose text is emitted via `textContent`; tags, attributes and style
+//      declarations are filtered against allow-lists, and image/link URLs pass
+//      through `sanitizeAssetUrl`. This is the same rule the earlier
+//      foreignObject XSS fix established — it is not reopened.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getHtmlContent = getHtmlContent;
+exports.hasHtmlContent = hasHtmlContent;
+exports.sanitizeHtmlContent = sanitizeHtmlContent;
+exports.buildHtmlForeignObject = buildHtmlForeignObject;
+const patch_1 = require("../vnode/patch");
+const panel_1 = require("./panel");
+/** Structural HTML tags a content node may use. Deliberately no script/iframe/
+ * object/embed/style/link/form-control-with-handlers. */
+const ALLOWED_TAGS = new Set([
+    'div',
+    'span',
+    'p',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'ul',
+    'ol',
+    'li',
+    'table',
+    'thead',
+    'tbody',
+    'tr',
+    'td',
+    'th',
+    'b',
+    'i',
+    'strong',
+    'em',
+    'small',
+    'code',
+    'pre',
+    'br',
+    'hr',
+    'img',
+]);
+/** Attributes allowed to survive on a content node (per-tag URL sanitization
+ * applies on top of this for `src`). */
+const ALLOWED_ATTRS = new Set(['title', 'alt', 'width', 'height', 'colspan', 'rowspan']);
+/** Read a node's HTML body spec, or null when it has none. */
+function getHtmlContent(node) {
+    const raw = node.getMetadata('html');
+    return raw && typeof raw === 'object' ? raw : null;
+}
+/** True when the node renders an HTML body. */
+function hasHtmlContent(node) {
+    return getHtmlContent(node) !== null;
+}
+/** Drop `javascript:` / `expression(` and other executable style payloads. */
+function sanitizeStyleValue(value) {
+    if (typeof value === 'number')
+        return value;
+    const lowered = value.toLowerCase();
+    if (lowered.includes('javascript:') ||
+        lowered.includes('expression(') ||
+        lowered.includes('vbscript:') ||
+        // url(...) can smuggle a script URL; drop any url() to be safe.
+        lowered.includes('url(')) {
+        return null;
+    }
+    return value;
+}
+function sanitizeStyle(style) {
+    if (!style)
+        return undefined;
+    const out = {};
+    for (const [k, v] of Object.entries(style)) {
+        // Block CSS custom properties / anything odd; allow simple property names.
+        if (!/^[a-zA-Z-]+$/.test(k))
+            continue;
+        const safe = sanitizeStyleValue(v);
+        if (safe !== null)
+            out[k] = safe;
+    }
+    return Object.keys(out).length > 0 ? out : undefined;
+}
+/**
+ * Convert ONE sanitized content node to a VNode. Unknown tags collapse to a
+ * `<span>` (their text is kept, their dangerous identity is dropped). Returns
+ * null for a node that contributes nothing.
+ */
+function sanitizeHtmlContent(spec) {
+    if (!spec || typeof spec.tag !== 'string')
+        return null;
+    const tag = ALLOWED_TAGS.has(spec.tag) ? spec.tag : 'span';
+    const props = { xmlns: patch_1.XHTML_NS };
+    const style = sanitizeStyle(spec.style);
+    if (style)
+        props['style'] = style;
+    if (typeof spec.className === 'string')
+        props['className'] = spec.className;
+    if (spec.attrs) {
+        for (const [k, v] of Object.entries(spec.attrs)) {
+            if (typeof v !== 'string')
+                continue;
+            // Never accept event handlers or arbitrary attrs; `src` is URL-sanitized.
+            if (/^on/i.test(k))
+                continue;
+            if (k === 'src' && tag === 'img') {
+                const safe = (0, panel_1.sanitizeAssetUrl)(v);
+                if (safe)
+                    props['src'] = safe;
+            }
+            else if (ALLOWED_ATTRS.has(k)) {
+                props[k] = v;
+            }
+        }
+    }
+    const children = [];
+    if (spec.children) {
+        for (const child of spec.children) {
+            const built = sanitizeHtmlContent(child);
+            if (built)
+                children.push(built);
+        }
+    }
+    const vnode = { type: tag, props };
+    // Text OWNS the element's content — never mixed with children (matches the
+    // patcher's textContent-owns-the-element rule).
+    if (typeof spec.text === 'string' && children.length === 0) {
+        props['textContent'] = spec.text;
+    }
+    else if (children.length > 0) {
+        vnode.children = children;
+    }
+    return vnode;
+}
+/** Cheap, stable djb2 hash of a value's JSON form — used to key the FO subtree. */
+function hashContent(value) {
+    var _a;
+    const str = (_a = JSON.stringify(value)) !== null && _a !== void 0 ? _a : '';
+    let h = 5381;
+    for (let i = 0; i < str.length; i++)
+        h = ((h << 5) + h + str.charCodeAt(i)) | 0;
+    return (h >>> 0).toString(36);
+}
+/**
+ * Build the `<foreignObject>` body VNode for an HTML node, sized to the node.
+ * Returns null when the node has no HTML content. The wrapper div is
+ * `pointer-events: none` unless the content opts into interactivity, so the
+ * shape background beneath keeps receiving selection / drag hits.
+ */
+function buildHtmlForeignObject(node, width, height) {
+    var _a, _b;
+    const html = getHtmlContent(node);
+    if (!html)
+        return null;
+    const pad = (_a = html.padding) !== null && _a !== void 0 ? _a : 4;
+    const wrapperStyle = Object.assign(Object.assign({ width: '100%', height: '100%', boxSizing: 'border-box', overflow: 'hidden', padding: `${pad}px` }, (html.interactive ? {} : { pointerEvents: 'none' })), ((_b = sanitizeStyle(html.style)) !== null && _b !== void 0 ? _b : {}));
+    const inner = [];
+    if (html.content) {
+        const built = sanitizeHtmlContent(html.content);
+        if (built)
+            inner.push(built);
+    }
+    else if (typeof html.text === 'string') {
+        inner.push({
+            type: 'div',
+            props: { xmlns: patch_1.XHTML_NS, textContent: html.text },
+        });
+    }
+    const wrapper = {
+        type: 'div',
+        props: {
+            xmlns: patch_1.XHTML_NS,
+            className: html.className ? `grafloria-html-node ${html.className}` : 'grafloria-html-node',
+            style: wrapperStyle,
+        },
+        children: inner,
+    };
+    // Key by content hash so a DATA change replaces the opaque subtree while a
+    // hover / selection change (same content) leaves it untouched.
+    return {
+        type: 'foreignObject',
+        key: `html-${node.id}-${hashContent(html)}`,
+        props: {
+            x: 0,
+            y: 0,
+            width,
+            height,
+            // Guard: a rotated node rotates the whole <g>, which includes this FO.
+            className: 'grafloria-html-foreign',
+        },
+        children: [wrapper],
+    };
+}
+//# sourceMappingURL=html-node.js.map

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

@@ -0,0 +1,25 @@
+export * from './svg-renderer';
+export * from './ArrowRenderer';
+export * from './LabelRenderer';
+export * from './JumpPointDetector';
+export * from './JumpPointRenderer';
+export * from './port-positioning';
+export * from './port-layout';
+export * from './port-glyph';
+export * from './port-label';
+export * from './port-spots';
+export * from './link-hit-test';
+export * from './shape-registry';
+export { registerNotationShapes } from './notation-shapes';
+export * from './path-outline';
+export * from './node-sizing';
+export * from './node-toolbar';
+export * from './auto-size';
+export * from './panel';
+export * from './html-node';
+export * from './text-block';
+export * from './link-fanout';
+export * from './edge-optimizer';
+export * from './edge-templates';
+export * from './route-memo';
+export * from './route-solver-bridge';