@oml/markdown 0.7.0

package/out/renderers/diagram-renderer.js

@@ -0,0 +1,2354 @@
+// Copyright (c) 2026 Modelware. All rights reserved.
+import 'reflect-metadata';
+import { CanvasMarkdownBlockRenderer } from './renderer.js';
+const D = 'http://opencaesar.io/oml/diagram#';
+const RDF_TYPE = 'http://www.w3.org/1999/02/22-rdf-syntax-ns#type';
+const TYPE_IRIS = {
+    Node: `${D}Node`,
+    Edge: `${D}Edge`,
+    Port: `${D}Port`,
+    Compartment: `${D}Compartment`,
+};
+const LIST_ITEM_IRI = `${D}ListItem`;
+const CSS_EDITOR_FOREGROUND = 'var(--vscode-editor-foreground, var(--oml-static-foreground, #24292f))';
+const CSS_EDITOR_BACKGROUND = 'var(--vscode-editor-background, transparent)';
+const CSS_CANVAS_BACKGROUND = 'var(--vscode-editor-background, var(--oml-static-background, #ffffff))';
+const CSS_FOCUS_BORDER = 'var(--vscode-focusBorder, var(--oml-static-link, #0969da))';
+let diagramCanvasSeq = 0;
+let x6GraphCtor;
+let dagreLib;
+export class DiagramMarkdownBlockRenderer extends CanvasMarkdownBlockRenderer {
+    constructor() {
+        super(...arguments);
+        this.canvasKinds = ['diagram'];
+    }
+    render(result) {
+        const container = this.createResultContainer(result.status);
+        const payload = result.payload;
+        if (!payload) {
+            container.appendChild(this.createMessageContainer('Diagram renderer requires tabular payload.'));
+            return container;
+        }
+        const subjectIndex = payload.columns.indexOf('subject');
+        const predicateIndex = payload.columns.indexOf('predicate');
+        const objectIndex = payload.columns.indexOf('object');
+        if (subjectIndex < 0 || predicateIndex < 0 || objectIndex < 0) {
+            container.appendChild(this.createMessageContainer("Diagram renderer requires columns named 'subject', 'predicate', and 'object'."));
+            return container;
+        }
+        const rows = payload.rows.map((row) => ({
+            s: row[subjectIndex] ?? '',
+            p: row[predicateIndex] ?? '',
+            o: row[objectIndex] ?? '',
+        })).filter((row) => row.s && row.p && row.o);
+        if (rows.length === 0) {
+            container.appendChild(this.createMessageContainer('No diagram triples returned.'));
+            return container;
+        }
+        const canvas = document.createElement('div');
+        canvas.className = 'graph-canvas-root diagram-canvas-root';
+        canvas.style.setProperty('--oml-diagram-height', resolveCanvasHeight(result.options));
+        canvas.style.setProperty('--oml-diagram-min-height', resolveCanvasMinHeight(result.options));
+        const baseId = `md-diagram-${diagramCanvasSeq++}`;
+        canvas.id = baseId;
+        container.appendChild(canvas);
+        const tripleIndex = indexTriples(rows);
+        const stylesheet = parseDiagramStylesheet(result.options);
+        const compiled = compileDiagramGraph(tripleIndex, stylesheet);
+        const layoutOptions = resolveDagreLayoutOptions(result.options);
+        if (compiled.nodes.length === 0) {
+            container.appendChild(this.createMessageContainer('No diagram nodes were inferred from the diagram namespace triples.'));
+            return container;
+        }
+        void renderWithX6(canvas, baseId, compiled, layoutOptions, {
+            downloadSvg: (content) => this.requestTextFileDownload(content, 'diagram', 'svg'),
+        }).catch((error) => {
+            const detail = error instanceof Error ? error.message : String(error);
+            container.appendChild(this.createMessageContainer(`Diagram rendering failed: ${detail}`));
+        });
+        return container;
+    }
+}
+async function renderWithX6(canvas, baseId, graph, layoutOptions, actions) {
+    await waitForCanvasReady(canvas);
+    const liveCanvas = getLiveCanvas(baseId);
+    if (!liveCanvas) {
+        return;
+    }
+    const GraphCtor = await loadX6GraphCtor();
+    const layout = await layoutGraphDagre(graph, layoutOptions);
+    const minHeight = asFiniteNumber(parseCssPixels(liveCanvas.style.getPropertyValue('--oml-diagram-min-height')), numericCanvasMinHeight(undefined));
+    const desiredHeight = Math.max(minHeight, Math.ceil(layout.contentHeight + 12));
+    setLockedCanvasHeight(liveCanvas, desiredHeight, minHeight);
+    let activePortDrag;
+    let isResizingCanvas = false;
+    const isPortPointerTarget = (event) => {
+        const target = event?.target;
+        if (target?.closest('.x6-port, .x6-port-body, .oml-port-body')) {
+            return true;
+        }
+        const path = typeof event?.composedPath === 'function' ? event.composedPath() : [];
+        return path.some((entry) => (entry instanceof Element
+            && (entry.classList.contains('x6-port')
+                || entry.classList.contains('x6-port-body')
+                || entry.classList.contains('oml-port-body'))));
+    };
+    const findPortIdFromTarget = (target) => {
+        if (!(target instanceof Element))
+            return undefined;
+        const portHost = target.closest('.x6-port');
+        if (!portHost)
+            return undefined;
+        return portHost.getAttribute('port')
+            ?? portHost.getAttribute('data-port-id')
+            ?? undefined;
+    };
+    const nodeById = new Map(graph.nodes.map((node) => [node.id, node]));
+    const isCompartmentNode = (node) => {
+        const nodeId = String(node?.id ?? '');
+        return nodeById.get(nodeId)?.kind === 'Compartment';
+    };
+    const graphView = new GraphCtor({
+        container: liveCanvas,
+        autoResize: false,
+        grid: false,
+        panning: true,
+        mousewheel: {
+            enabled: true,
+            minScale: 0.4,
+            maxScale: 2.5,
+            factor: 1.1,
+        },
+        connecting: {
+            router: 'normal',
+            connector: 'rounded',
+            allowBlank: false,
+            allowNode: false,
+            allowPort: false,
+            allowEdge: false,
+            allowLoop: false,
+        },
+        guard: (event) => isPortPointerTarget(event) || isResizingCanvas,
+        interacting(cellView, event) {
+            const isPortTarget = isPortPointerTarget(event);
+            const isCompartment = isCompartmentNode(cellView?.cell);
+            return {
+                nodeMovable: !isCompartment && !isPortTarget && !activePortDrag,
+                edgeMovable: false,
+                vertexMovable: false,
+                arrowheadMovable: false,
+                labelMovable: false,
+            };
+        },
+        background: {
+            color: CSS_CANVAS_BACKGROUND,
+        },
+    });
+    const toPlainRect = (value) => {
+        if (!value)
+            return undefined;
+        const x = Number(value.x);
+        const y = Number(value.y);
+        const width = Number(value.width);
+        const height = Number(value.height);
+        if (![x, y, width, height].every(Number.isFinite)) {
+            return undefined;
+        }
+        return { x, y, width, height };
+    };
+    const toPlainPoint = (value) => {
+        if (!value)
+            return undefined;
+        const x = Number(value.x);
+        const y = Number(value.y);
+        if (![x, y].every(Number.isFinite)) {
+            return undefined;
+        }
+        return { x, y };
+    };
+    const logResize = (_phase, _details) => { };
+    const portsByOwner = new Map();
+    for (const node of graph.nodes) {
+        if (node.kind !== 'Port' || !node.parentId)
+            continue;
+        const list = portsByOwner.get(node.parentId) ?? [];
+        list.push(node);
+        portsByOwner.set(node.parentId, list);
+    }
+    for (const list of portsByOwner.values()) {
+        list.sort((a, b) => a.id.localeCompare(b.id));
+    }
+    const ownerByPortId = new Map();
+    for (const [ownerId, ports] of portsByOwner.entries()) {
+        for (const port of ports) {
+            ownerByPortId.set(port.id, ownerId);
+        }
+    }
+    const ordered = [...graph.nodes]
+        .filter((node) => node.kind !== 'Port')
+        .sort((a, b) => nodeDepth(a.id, nodeById) - nodeDepth(b.id, nodeById));
+    for (const node of ordered) {
+        const box = layout.boxes.get(node.id);
+        if (!box)
+            continue;
+        const labelText = node.labels.length > 0 ? node.labels.join('\n') : localName(node.id);
+        const resolvedStyle = node.style;
+        const resolvedShape = resolveRenderNodeShape(resolvedStyle);
+        const x = box.x;
+        const y = box.y;
+        const ownerPorts = portsByOwner.get(node.id) ?? [];
+        const portItems = ownerPorts.map((port, index) => ({
+            id: port.id,
+            group: 'boundary',
+            args: {
+                x: box.width,
+                y: ((index + 1) * box.height) / (ownerPorts.length + 1),
+            },
+            attrs: resolvePortAttrs(port.style, port.classes, port.labels[0] ?? 'Port'),
+        }));
+        const { bodyAttrs, labelAttrs, iconSvgAttrs, iconPathAttrs, imageAttrs } = resolveNodeAttrs(resolvedStyle);
+        const iconPathSelectors = iconPathAttrs.map((_, index) => `iconPath${index}`);
+        graphView.addNode({
+            id: node.id,
+            shape: resolvedShape.graphShape,
+            markup: [
+                { tagName: resolvedShape.bodyTag, selector: 'body' },
+                {
+                    tagName: 'svg',
+                    selector: 'iconSvg',
+                    children: iconPathSelectors.map((selector) => ({
+                        tagName: 'path',
+                        selector,
+                    })),
+                },
+                { tagName: 'image', selector: 'icon' },
+                { tagName: 'text', selector: 'label' },
+            ],
+            x,
+            y,
+            width: box.width,
+            height: box.height,
+            attrs: {
+                body: {
+                    ...resolvedShape.bodyDefaults,
+                    ...bodyAttrs,
+                    ...(resolvedShape.bodyTag === 'rect' ? { rx: 2, ry: 2 } : {}),
+                    class: node.classes.length > 0 ? node.classes.join(' ') : undefined,
+                },
+                iconSvg: iconSvgAttrs,
+                icon: imageAttrs,
+                ...Object.fromEntries(iconPathSelectors.map((selector, index) => [selector, iconPathAttrs[index]])),
+                label: {
+                    text: labelText,
+                    fontFamily: 'var(--vscode-editor-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif)',
+                    fontSize: 12,
+                    textAnchor: 'middle',
+                    textVerticalAnchor: node.children.length > 0 ? 'top' : 'middle',
+                    refX: '50%',
+                    refX2: 0,
+                    refY: node.children.length > 0 ? 0 : '50%',
+                    ...labelAttrs,
+                },
+            },
+            ports: ownerPorts.length > 0 ? {
+                groups: {
+                    boundary: {
+                        position: { name: 'absolute' },
+                        markup: [
+                            {
+                                tagName: 'rect',
+                                selector: 'body',
+                            },
+                            {
+                                tagName: 'image',
+                                selector: 'icon',
+                            },
+                            {
+                                tagName: 'text',
+                                selector: 'label',
+                            },
+                        ],
+                        attrs: {
+                            body: {
+                                width: 12,
+                                height: 12,
+                                x: -6,
+                                y: -6,
+                                class: 'oml-port-body',
+                                magnet: false,
+                                stroke: CSS_FOCUS_BORDER,
+                                strokeWidth: 1,
+                                fill: CSS_EDITOR_BACKGROUND,
+                            },
+                            icon: {
+                                width: 12,
+                                height: 12,
+                                x: -6,
+                                y: -6,
+                                preserveAspectRatio: 'xMidYMid meet',
+                                display: 'none',
+                            },
+                            label: {
+                                fill: CSS_EDITOR_FOREGROUND,
+                                fontFamily: 'var(--vscode-editor-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif)',
+                                fontSize: 12,
+                                textAnchor: 'start',
+                                x: 10,
+                                dy: '0.9em',
+                            },
+                        },
+                        label: {
+                            position: {
+                                name: 'right',
+                                args: {
+                                    dx: 4,
+                                    dy: 8,
+                                },
+                            },
+                        },
+                    },
+                },
+                items: portItems,
+            } : undefined,
+            zIndex: 10,
+            data: {
+                kind: node.kind,
+                ownerId: node.parentId,
+            },
+        });
+    }
+    // Establish explicit embedding after all nodes exist so nested nodes move with parents.
+    for (const node of ordered) {
+        if (!node.parentId)
+            continue;
+        const childCell = graphView.getCellById(node.id);
+        const parentCell = graphView.getCellById(node.parentId);
+        if (!childCell || !parentCell || typeof parentCell.addChild !== 'function')
+            continue;
+        parentCell.addChild(childCell);
+    }
+    let isAutoResizingContainers = false;
+    const collectModelDescendants = (rootId) => {
+        const out = [];
+        const stack = [...(nodeById.get(rootId)?.children ?? [])];
+        const seen = new Set();
+        while (stack.length > 0) {
+            const id = stack.pop();
+            if (!id || seen.has(id))
+                continue;
+            seen.add(id);
+            const spec = nodeById.get(id);
+            if (!spec || spec.kind === 'Port')
+                continue;
+            out.push(id);
+            for (const childId of spec.children) {
+                stack.push(childId);
+            }
+        }
+        return out;
+    };
+    const toRectBounds = (value) => {
+        if (!value)
+            return undefined;
+        const left = Number(value.x);
+        const top = Number(value.y);
+        const width = Number(value.width);
+        const height = Number(value.height);
+        if (![left, top, width, height].every(Number.isFinite)) {
+            return undefined;
+        }
+        return { left, top, right: left + width, bottom: top + height };
+    };
+    const rectsIntersect = (a, b) => {
+        const ra = toRectBounds(a);
+        const rb = toRectBounds(b);
+        if (!ra || !rb)
+            return false;
+        return ra.left <= rb.right
+            && ra.right >= rb.left
+            && ra.top <= rb.bottom
+            && ra.bottom >= rb.top;
+    };
+    const findContainingCompartments = (nodeId) => {
+        const movedCell = graphView.getCellById(nodeId);
+        if (!movedCell || typeof movedCell.getBBox !== 'function')
+            return [];
+        const movedBBox = movedCell.getBBox();
+        const containing = [];
+        for (const spec of nodeById.values()) {
+            if (spec.kind !== 'Compartment')
+                continue;
+            const compartment = graphView.getCellById(spec.id);
+            if (!compartment || typeof compartment.getBBox !== 'function')
+                continue;
+            const box = compartment.getBBox();
+            if (!rectsIntersect(movedBBox, box))
+                continue;
+            const area = box.width * box.height;
+            containing.push({ id: spec.id, area });
+        }
+        containing.sort((left, right) => left.area - right.area || left.id.localeCompare(right.id));
+        return containing.map((entry) => entry.id);
+    };
+    const collectVisualChildrenInCompartment = (containerId, containerBBox) => {
+        const spec = nodeById.get(containerId);
+        if (!spec || spec.kind !== 'Compartment') {
+            return [];
+        }
+        const parentId = spec.parentId;
+        if (!parentId) {
+            return [];
+        }
+        const out = [];
+        if (!toRectBounds(containerBBox)) {
+            return [];
+        }
+        for (const candidate of nodeById.values()) {
+            if (candidate.id === containerId || candidate.kind !== 'Node' || candidate.parentId !== parentId) {
+                continue;
+            }
+            const cell = graphView.getCellById(candidate.id);
+            if (!cell || typeof cell.getBBox !== 'function')
+                continue;
+            const bbox = cell.getBBox();
+            if (rectsIntersect(bbox, containerBBox)) {
+                out.push(candidate.id);
+            }
+        }
+        return out;
+    };
+    const ensureContainerContainsChildren = (containerId, movedNodeId) => {
+        const container = graphView.getCellById(containerId);
+        const containerSpec = nodeById.get(containerId);
+        if (!container || !containerSpec || typeof container.getBBox !== 'function' || typeof container.size !== 'function') {
+            logResize('container-skip', {
+                containerId,
+                hasContainer: !!container,
+                hasSpec: !!containerSpec,
+                hasGetBBox: typeof container?.getBBox === 'function',
+                hasSize: typeof container?.size === 'function',
+            });
+            return;
+        }
+        const modelChildIds = collectModelDescendants(containerId);
+        const runtimeChildren = typeof container.getChildren === 'function'
+            ? container.getChildren().map((child) => String(child?.id ?? '')).filter((id) => id.length > 0)
+            : [];
+        const containerBBox = container.getBBox();
+        let childIds = [...new Set([...modelChildIds, ...runtimeChildren])]
+            .filter((childId) => nodeById.get(childId)?.kind !== 'Port');
+        if (movedNodeId && nodeById.get(movedNodeId)?.kind !== 'Port' && !childIds.includes(movedNodeId)) {
+            childIds.push(movedNodeId);
+        }
+        const visualChildren = (childIds.length === 0 && containerSpec.kind === 'Compartment')
+            ? collectVisualChildrenInCompartment(containerId, containerBBox)
+            : [];
+        if (visualChildren.length > 0) {
+            childIds = [...new Set([...childIds, ...visualChildren])];
+        }
+        if (childIds.length === 0) {
+            logResize('container-no-children', { containerId, modelChildIds, runtimeChildren, visualChildren });
+            return;
+        }
+        const containerSize = container.size();
+        let minLeft = Number.POSITIVE_INFINITY;
+        let minTop = Number.POSITIVE_INFINITY;
+        let maxRight = Number.NEGATIVE_INFINITY;
+        let maxBottom = Number.NEGATIVE_INFINITY;
+        const childCells = [];
+        const childDebug = [];
+        for (const childId of childIds) {
+            const child = graphView.getCellById(childId);
+            if (!child || typeof child.getBBox !== 'function')
+                continue;
+            const absBBox = child.getBBox();
+            const relLeft = absBBox.x - containerBBox.x;
+            const relTop = absBBox.y - containerBBox.y;
+            minLeft = Math.min(minLeft, relLeft);
+            minTop = Math.min(minTop, relTop);
+            maxRight = Math.max(maxRight, relLeft + absBBox.width);
+            maxBottom = Math.max(maxBottom, relTop + absBBox.height);
+            childDebug.push({
+                id: childId,
+                relPos: toPlainPoint({ x: relLeft, y: relTop }),
+                childSize: toPlainRect({ x: 0, y: 0, width: absBBox.width, height: absBBox.height }),
+                absBBox: toPlainRect(absBBox),
+            });
+            childCells.push(child);
+        }
+        if (childCells.length === 0 || !Number.isFinite(minLeft) || !Number.isFinite(minTop) || !Number.isFinite(maxRight) || !Number.isFinite(maxBottom)) {
+            logResize('container-no-bounds', {
+                containerId,
+                childIds,
+                childCellCount: childCells.length,
+                minLeft,
+                minTop,
+                maxRight,
+                maxBottom,
+                childDebug,
+            });
+            return;
+        }
+        // When a child overflows into or past the inset (padding) area, shift the
+        // container origin (without moving its embedded children, which keep their
+        // absolute positions) and expand the size to compensate so the opposite edge
+        // is preserved.
+        // topPadding is the reserved header/label area; children must stay below it.
+        const topPadding = containerSpec.contentTopPadding;
+        const shiftX = minLeft < 0 ? minLeft : 0;
+        const shiftY = minTop < topPadding ? minTop - topPadding : 0;
+        // Dimensions needed relative to the (possibly shifted) new origin.
+        const baseWidth = containerSize.width - shiftX;
+        const baseHeight = containerSize.height - shiftY;
+        const neededWidth = Math.ceil(Math.max(baseWidth, maxRight - shiftX));
+        const neededHeight = Math.ceil(Math.max(baseHeight, maxBottom - shiftY));
+        logResize('container-eval', {
+            containerId,
+            modelChildIds,
+            runtimeChildren,
+            childIds,
+            containerBBox: toPlainRect(containerBBox),
+            containerSize: toPlainRect({ x: 0, y: 0, ...containerSize }),
+            topPadding,
+            bounds: { minLeft, minTop, maxRight, maxBottom },
+            shift: { shiftX, shiftY },
+            childDebug,
+            needed: { neededWidth, neededHeight },
+        });
+        if (shiftX < 0 || shiftY < 0) {
+            // Move only the container box (not children) so it encompasses the overflow.
+            container.setPosition(containerBBox.x + shiftX, containerBBox.y + shiftY);
+        }
+        if (neededWidth !== containerSize.width || neededHeight !== containerSize.height) {
+            logResize('container-resize', {
+                containerId,
+                from: containerSize,
+                to: { width: neededWidth, height: neededHeight },
+            });
+            container.resize(neededWidth, neededHeight);
+        }
+        else {
+            logResize('container-no-resize', { containerId });
+        }
+    };
+    const growAncestorContainers = (node) => {
+        if (isAutoResizingContainers) {
+            logResize('grow-skip-reentrant', { nodeId: String(node?.id ?? '') });
+            return;
+        }
+        const nodeId = String(node?.id ?? '');
+        const movedSpec = nodeById.get(nodeId);
+        let parentId = movedSpec?.parentId;
+        if (!parentId && typeof node?.getParent === 'function') {
+            const runtimeParent = node.getParent();
+            parentId = runtimeParent ? String(runtimeParent.id ?? '') : undefined;
+        }
+        if (!parentId) {
+            logResize('grow-no-parent', { nodeId, specParentId: movedSpec?.parentId });
+            return;
+        }
+        const visualCompartmentIds = findContainingCompartments(nodeId)
+            .filter((id) => id !== nodeId);
+        logResize('grow-start', { nodeId, parentId, visualCompartmentIds });
+        // Set the flag before any ensureContainerContainsChildren call so that
+        // position/size changes we apply do not re-enter growAncestorContainers.
+        isAutoResizingContainers = true;
+        try {
+            for (const visualCompartmentId of visualCompartmentIds) {
+                logResize('grow-visual-compartment', { nodeId, parentId, visualCompartmentId });
+                ensureContainerContainsChildren(visualCompartmentId, nodeId);
+            }
+            while (parentId) {
+                ensureContainerContainsChildren(parentId, nodeId);
+                const parentCell = graphView.getCellById(parentId);
+                if (parentCell && typeof parentCell.getParent === 'function') {
+                    const runtimeParent = parentCell.getParent();
+                    logResize('grow-step', {
+                        nodeId,
+                        currentParentId: parentId,
+                        nextParentId: runtimeParent ? String(runtimeParent.id ?? '') : undefined,
+                    });
+                    parentId = runtimeParent ? String(runtimeParent.id ?? '') : undefined;
+                }
+                else {
+                    const modelParentId = nodeById.get(parentId)?.parentId;
+                    logResize('grow-step-fallback', { nodeId, currentParentId: parentId, modelParentId });
+                    parentId = modelParentId;
+                }
+            }
+        }
+        finally {
+            isAutoResizingContainers = false;
+            logResize('grow-end', { nodeId });
+        }
+    };
+    const isPrimaryMover = (node, options) => {
+        // Reject events fired because an ancestor was translated (co-translated children).
+        // options.translateBy holds the id of the original mover; for co-translated
+        // children it will differ from node.id.
+        if (!options?.translateBy)
+            return true;
+        return String(options.translateBy) === String(node?.id ?? '');
+    };
+    graphView.on('node:change:position', ({ node, options }) => {
+        logResize('event-change-position', { nodeId: String(node?.id ?? ''), silent: !!options?.silent, translateBy: options?.translateBy });
+        if (options?.silent)
+            return;
+        if (!isPrimaryMover(node, options))
+            return;
+        growAncestorContainers(node);
+    });
+    graphView.on('node:moving', ({ node }) => {
+        logResize('event-moving', { nodeId: String(node?.id ?? '') });
+        growAncestorContainers(node);
+    });
+    graphView.on('node:moved', ({ node, options }) => {
+        logResize('event-moved', { nodeId: String(node?.id ?? ''), silent: !!options?.silent, translateBy: options?.translateBy });
+        if (options?.silent)
+            return;
+        if (!isPrimaryMover(node, options))
+            return;
+        growAncestorContainers(node);
+    });
+    const edgeLabelPosition = (placement) => {
+        if (placement === 'begin')
+            return 0.15;
+        if (placement === 'end')
+            return 0.85;
+        return 0.5;
+    };
+    const endpointOwnerId = (nodeId) => {
+        const node = nodeById.get(nodeId);
+        if (!node)
+            return undefined;
+        return node.kind === 'Port' ? node.parentId : node.id;
+    };
+    const undirectedPairKey = (a, b) => (a < b ? `${a}<->${b}` : `${b}<->${a}`);
+    const edgeById = new Map(graph.edges.map((edge) => [edge.id, edge]));
+    const undirectedEdgeIdsByPair = new Map();
+    for (const edge of graph.edges) {
+        const sourceOwner = endpointOwnerId(edge.sourceId);
+        const targetOwner = endpointOwnerId(edge.targetId);
+        if (!sourceOwner || !targetOwner || sourceOwner === targetOwner)
+            continue;
+        const key = undirectedPairKey(sourceOwner, targetOwner);
+        const ids = undirectedEdgeIdsByPair.get(key) ?? [];
+        ids.push(edge.id);
+        undirectedEdgeIdsByPair.set(key, ids);
+    }
+    const fanningVertexForEdge = (edge) => {
+        const sourceOwner = endpointOwnerId(edge.sourceId);
+        const targetOwner = endpointOwnerId(edge.targetId);
+        if (!sourceOwner || !targetOwner || sourceOwner === targetOwner) {
+            return undefined;
+        }
+        const edgeIds = undirectedEdgeIdsByPair.get(undirectedPairKey(sourceOwner, targetOwner)) ?? [];
+        if (edgeIds.length <= 1) {
+            return undefined;
+        }
+        const orderedEdgeIds = [...edgeIds].sort((leftId, rightId) => {
+            const leftEdge = edgeById.get(leftId);
+            const rightEdge = edgeById.get(rightId);
+            if (!leftEdge || !rightEdge)
+                return leftId.localeCompare(rightId);
+            const leftSource = endpointOwnerId(leftEdge.sourceId);
+            const leftTarget = endpointOwnerId(leftEdge.targetId);
+            const rightSource = endpointOwnerId(rightEdge.sourceId);
+            const rightTarget = endpointOwnerId(rightEdge.targetId);
+            const leftForward = leftSource && leftTarget ? (leftSource < leftTarget ? 0 : 1) : 0;
+            const rightForward = rightSource && rightTarget ? (rightSource < rightTarget ? 0 : 1) : 0;
+            if (leftForward !== rightForward)
+                return leftForward - rightForward;
+            return leftId.localeCompare(rightId);
+        });
+        const [pairA, pairB] = sourceOwner < targetOwner
+            ? [sourceOwner, targetOwner]
+            : [targetOwner, sourceOwner];
+        const forwardIds = [];
+        const reverseIds = [];
+        for (const edgeId of orderedEdgeIds) {
+            const pairEdge = edgeById.get(edgeId);
+            if (!pairEdge)
+                continue;
+            const pairSource = endpointOwnerId(pairEdge.sourceId);
+            const pairTarget = endpointOwnerId(pairEdge.targetId);
+            if (pairSource === pairA && pairTarget === pairB) {
+                forwardIds.push(edgeId);
+            }
+            else if (pairSource === pairB && pairTarget === pairA) {
+                reverseIds.push(edgeId);
+            }
+        }
+        // Only fan when both directions exist for the same endpoint pair.
+        if (forwardIds.length === 0 || reverseIds.length === 0) {
+            return undefined;
+        }
+        let directionSign = 0;
+        let laneIndex = 0;
+        let laneCount = 0;
+        if (sourceOwner === pairA && targetOwner === pairB) {
+            directionSign = 1;
+            laneIndex = forwardIds.indexOf(edge.id);
+            laneCount = forwardIds.length;
+        }
+        else if (sourceOwner === pairB && targetOwner === pairA) {
+            directionSign = -1;
+            laneIndex = reverseIds.indexOf(edge.id);
+            laneCount = reverseIds.length;
+        }
+        if (directionSign === 0 || laneIndex < 0 || laneCount <= 0) {
+            return undefined;
+        }
+        const pairABox = layout.boxes.get(pairA);
+        const pairBBox = layout.boxes.get(pairB);
+        if (!pairABox || !pairBBox) {
+            return undefined;
+        }
+        const sx = pairABox.x + (pairABox.width / 2);
+        const sy = pairABox.y + (pairABox.height / 2);
+        const tx = pairBBox.x + (pairBBox.width / 2);
+        const ty = pairBBox.y + (pairBBox.height / 2);
+        const dx = tx - sx;
+        const dy = ty - sy;
+        const len = Math.hypot(dx, dy);
+        if (!Number.isFinite(len) || len < 1) {
+            return undefined;
+        }
+        const laneOffset = (laneIndex - ((laneCount - 1) / 2));
+        const offset = (directionSign * 16) + (laneOffset * 10);
+        if (Math.abs(offset) < 0.01) {
+            return undefined;
+        }
+        const px = -dy / len;
+        const py = dx / len;
+        const midx = sx + (dx * 0.5);
+        const midy = sy + (dy * 0.5);
+        return [
+            { x: midx + (px * offset), y: midy + (py * offset) },
+        ];
+    };
+    const resolveEndpoint = (nodeId) => {
+        const node = nodeById.get(nodeId);
+        if (node?.kind === 'Port' && node.parentId) {
+            return {
+                cell: node.parentId,
+                port: node.id,
+                anchor: { name: 'center' },
+                connectionPoint: { name: 'boundary' },
+            };
+        }
+        return {
+            cell: nodeId,
+            anchor: { name: 'center' },
+            connectionPoint: { name: 'boundary' },
+        };
+    };
+    for (const edge of graph.edges) {
+        const resolvedStyle = edge.style;
+        const lineAttrs = resolveEdgeLineAttrs(resolvedStyle);
+        graphView.addEdge({
+            id: edge.id,
+            source: resolveEndpoint(edge.sourceId),
+            target: resolveEndpoint(edge.targetId),
+            router: { name: 'normal' },
+            connector: { name: 'rounded' },
+            attrs: {
+                line: lineAttrs,
+            },
+            vertices: fanningVertexForEdge(edge),
+            labels: edge.labels.map((label, index) => ({
+                id: `${edge.id}:label:${index}`,
+                position: {
+                    distance: edgeLabelPosition(label.placement),
+                    offset: 8,
+                },
+                attrs: {
+                    label: resolveEdgeLabelAttrs(resolvedStyle, label.placement, label.text),
+                    body: resolveEdgeLabelBodyAttrs(resolvedStyle, label.placement),
+                    labelBody: resolveEdgeLabelBodyAttrs(resolvedStyle, label.placement),
+                },
+            })),
+            zIndex: 5,
+        });
+    }
+    // Compartments are structural containers: do not drag them; select parent instead.
+    const selectCompartmentParent = (node) => {
+        if (!isCompartmentNode(node)) {
+            return;
+        }
+        const parent = typeof node.getParent === 'function' ? node.getParent() : undefined;
+        if (!parent) {
+            return;
+        }
+        if (typeof graphView.cleanSelection === 'function') {
+            graphView.cleanSelection();
+        }
+        if (typeof graphView.select === 'function') {
+            graphView.select(parent);
+        }
+    };
+    graphView.on('node:mousedown', ({ node, e }) => {
+        if (!isCompartmentNode(node)) {
+            return;
+        }
+        selectCompartmentParent(node);
+        e.preventDefault();
+        e.stopPropagation();
+        if (typeof e.stopImmediatePropagation === 'function') {
+            e.stopImmediatePropagation();
+        }
+    });
+    graphView.on('node:click', ({ node, e }) => {
+        if (!isCompartmentNode(node)) {
+            return;
+        }
+        selectCompartmentParent(node);
+        e.preventDefault();
+        e.stopPropagation();
+    });
+    const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
+    const onPointerMove = (event) => {
+        if (!activePortDrag)
+            return;
+        const node = graphView.getCellById(activePortDrag.nodeId);
+        if (!node || typeof node.size !== 'function' || typeof node.getPort !== 'function' || typeof node.setPortProp !== 'function')
+            return;
+        const size = node.size();
+        const deltaY = event.clientY - activePortDrag.startClientY;
+        const nextY = clamp(activePortDrag.startPortY + deltaY, 4, Math.max(4, size.height - 4));
+        node.setPortProp(activePortDrag.portId, 'args/y', nextY);
+    };
+    const onPointerUp = () => {
+        activePortDrag = undefined;
+    };
+    window.addEventListener('pointermove', onPointerMove);
+    window.addEventListener('pointerup', onPointerUp);
+    const startPortDrag = (clientY, node, portId) => {
+        if (!node || typeof node.getPort !== 'function')
+            return;
+        const existing = node.getPort(portId);
+        const startPortY = typeof existing?.args?.y === 'number' ? existing.args.y : (node.size().height / 2);
+        activePortDrag = {
+            nodeId: String(node.id),
+            portId: String(portId),
+            startClientY: clientY,
+            startPortY,
+        };
+    };
+    const onCanvasPointerDown = (event) => {
+        if (!isPortPointerTarget(event))
+            return;
+        const portId = findPortIdFromTarget(event.target);
+        if (!portId)
+            return;
+        const ownerId = ownerByPortId.get(portId);
+        if (!ownerId)
+            return;
+        const node = graphView.getCellById(ownerId);
+        startPortDrag(event.clientY, node, portId);
+        event.preventDefault();
+        event.stopPropagation();
+        if (typeof event.stopImmediatePropagation === 'function')
+            event.stopImmediatePropagation();
+    };
+    liveCanvas.addEventListener('pointerdown', onCanvasPointerDown, true);
+    liveCanvas.addEventListener('DOMNodeRemovedFromDocument', () => {
+        window.removeEventListener('pointermove', onPointerMove);
+        window.removeEventListener('pointerup', onPointerUp);
+        liveCanvas.removeEventListener('pointerdown', onCanvasPointerDown, true);
+    }, { once: true });
+    const resultContainer = liveCanvas.closest('.oml-md-result');
+    const resizeObserver = new ResizeObserver(() => {
+        if (!liveCanvas.isConnected) {
+            return;
+        }
+        const width = liveCanvas.clientWidth;
+        const height = liveCanvas.clientHeight;
+        graphView.resize(width, height);
+    });
+    resizeObserver.observe(liveCanvas);
+    let resultResizeObserver;
+    if (resultContainer instanceof HTMLElement) {
+        resultResizeObserver = new ResizeObserver(() => {
+            const nextWidth = Math.max(0, Math.floor(resultContainer.clientWidth));
+            liveCanvas.style.width = `${nextWidth}px`;
+            graphView.resize(liveCanvas.clientWidth, liveCanvas.clientHeight);
+        });
+        resultResizeObserver.observe(resultContainer);
+    }
+    liveCanvas.addEventListener('DOMNodeRemovedFromDocument', () => {
+        resizeObserver.disconnect();
+        resultResizeObserver?.disconnect();
+    }, { once: true });
+    const resizeHandle = document.createElement('div');
+    resizeHandle.className = 'canvas-resize-handle';
+    liveCanvas.appendChild(resizeHandle);
+    let canvasResize;
+    const onResizePointerDown = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (typeof event.stopImmediatePropagation === 'function')
+            event.stopImmediatePropagation();
+        canvasResize = { pointerId: event.pointerId, startY: event.clientY, startHeight: liveCanvas.clientHeight };
+        isResizingCanvas = true;
+        resizeHandle.setPointerCapture(event.pointerId);
+    };
+    const onResizePointerMove = (event) => {
+        if (!canvasResize || event.pointerId !== canvasResize.pointerId)
+            return;
+        const delta = event.clientY - canvasResize.startY;
+        const newHeight = Math.max(minHeight, canvasResize.startHeight + delta);
+        liveCanvas.style.height = `${Math.ceil(newHeight)}px`;
+    };
+    const onResizePointerEnd = (event) => {
+        if (!canvasResize || event.pointerId !== canvasResize.pointerId)
+            return;
+        canvasResize = undefined;
+        isResizingCanvas = false;
+    };
+    resizeHandle.addEventListener('pointerdown', onResizePointerDown);
+    resizeHandle.addEventListener('pointermove', onResizePointerMove);
+    resizeHandle.addEventListener('pointerup', onResizePointerEnd);
+    resizeHandle.addEventListener('pointercancel', onResizePointerEnd);
+    installDiagramToolbar(liveCanvas, graphView, graph, actions);
+}
+function installDiagramToolbar(graphRoot, graphView, graph, actions) {
+    const hotspot = document.createElement('div');
+    hotspot.className = 'graph-corner-hotspot';
+    graphRoot.appendChild(hotspot);
+    const toolbar = document.createElement('div');
+    toolbar.className = 'graph-corner-toolbar';
+    const filterInput = document.createElement('input');
+    filterInput.type = 'search';
+    filterInput.className = 'tree-filter graph-filter';
+    filterInput.placeholder = 'Filter...';
+    filterInput.addEventListener('input', () => {
+        applyDiagramFilter(graphView, graph, filterInput.value);
+    });
+    toolbar.appendChild(filterInput);
+    const downloadButton = createToolbarDownloadButton('Download SVG');
+    downloadButton.addEventListener('click', () => {
+        const svg = graphRoot.querySelector('.x6-graph-svg, .x6-svg, svg');
+        if (!svg) {
+            return;
+        }
+        const exported = createStandaloneSvg(svg);
+        const serialized = new XMLSerializer().serializeToString(exported);
+        const content = serialized.startsWith('<?xml')
+            ? serialized
+            : `<?xml version="1.0" encoding="UTF-8"?>\n${serialized}`;
+        actions.downloadSvg(content);
+    });
+    toolbar.appendChild(downloadButton);
+    graphRoot.appendChild(toolbar);
+    let hideTimer = 0;
+    const showToolbar = () => {
+        if (hideTimer) {
+            window.clearTimeout(hideTimer);
+            hideTimer = 0;
+        }
+        graphRoot.classList.add('graph-toolbar-visible');
+    };
+    const scheduleHideToolbar = () => {
+        if (document.activeElement === filterInput) {
+            return;
+        }
+        hideTimer = window.setTimeout(() => {
+            graphRoot.classList.remove('graph-toolbar-visible');
+            hideTimer = 0;
+        }, 120);
+    };
+    hotspot.addEventListener('mouseenter', showToolbar);
+    toolbar.addEventListener('mouseenter', showToolbar);
+    hotspot.addEventListener('mouseleave', scheduleHideToolbar);
+    toolbar.addEventListener('mouseleave', scheduleHideToolbar);
+    filterInput.addEventListener('focus', showToolbar);
+    filterInput.addEventListener('blur', scheduleHideToolbar);
+    const swallowPointer = (event) => {
+        event.stopPropagation();
+    };
+    toolbar.addEventListener('pointerdown', swallowPointer, true);
+    toolbar.addEventListener('mousedown', swallowPointer, true);
+    filterInput.addEventListener('pointerdown', swallowPointer, true);
+    filterInput.addEventListener('mousedown', swallowPointer, true);
+    downloadButton.addEventListener('pointerdown', swallowPointer, true);
+    downloadButton.addEventListener('mousedown', swallowPointer, true);
+}
+function applyDiagramFilter(graphView, graph, rawQuery) {
+    const query = rawQuery.trim().toLowerCase();
+    const allNodes = graphView.getNodes();
+    const allEdges = graphView.getEdges();
+    if (!query) {
+        for (const node of allNodes)
+            node.show();
+        for (const edge of allEdges)
+            edge.show();
+        return;
+    }
+    const nodeById = new Map(graph.nodes.map((node) => [node.id, node]));
+    const visibleNodeIds = new Set(allNodes.map((node) => String(node.id)));
+    const endpointOwner = (id) => {
+        const node = nodeById.get(id);
+        if (!node)
+            return undefined;
+        return node.kind === 'Port' ? node.parentId : node.id;
+    };
+    const childrenByParent = new Map();
+    for (const node of graph.nodes) {
+        if (!node.parentId || !visibleNodeIds.has(node.id))
+            continue;
+        const list = childrenByParent.get(node.parentId) ?? [];
+        list.push(node.id);
+        childrenByParent.set(node.parentId, list);
+    }
+    const edgeById = new Map(graph.edges.map((edge) => [edge.id, edge]));
+    const edgesByNode = new Map();
+    const addEdgeToNode = (nodeId, edgeId) => {
+        const list = edgesByNode.get(nodeId) ?? [];
+        list.push(edgeId);
+        edgesByNode.set(nodeId, list);
+    };
+    for (const edge of graph.edges) {
+        const source = endpointOwner(edge.sourceId);
+        const target = endpointOwner(edge.targetId);
+        if (!source || !target)
+            continue;
+        if (!visibleNodeIds.has(source) || !visibleNodeIds.has(target))
+            continue;
+        addEdgeToNode(source, edge.id);
+        addEdgeToNode(target, edge.id);
+    }
+    const addAncestors = (nodeId, keepNodeIds) => {
+        let cursor = nodeById.get(nodeId)?.parentId;
+        while (cursor) {
+            if (visibleNodeIds.has(cursor)) {
+                keepNodeIds.add(cursor);
+            }
+            cursor = nodeById.get(cursor)?.parentId;
+        }
+    };
+    const addDescendants = (nodeId, keepNodeIds) => {
+        const stack = [...(childrenByParent.get(nodeId) ?? [])];
+        while (stack.length > 0) {
+            const next = stack.pop();
+            if (!next)
+                continue;
+            keepNodeIds.add(next);
+            stack.push(...(childrenByParent.get(next) ?? []));
+        }
+    };
+    const matchedNodeIds = new Set();
+    for (const nodeId of visibleNodeIds) {
+        const spec = nodeById.get(nodeId);
+        if (!spec)
+            continue;
+        const labels = spec.labels.join(' ').toLowerCase();
+        const idValue = spec.id.toLowerCase();
+        const kind = spec.kind.toLowerCase();
+        if (labels.includes(query) || idValue.includes(query) || kind.includes(query)) {
+            matchedNodeIds.add(nodeId);
+        }
+    }
+    const matchedEdgeIds = new Set();
+    for (const edge of graph.edges) {
+        const edgeText = [
+            edge.id,
+            edge.labels.map((label) => label.text).join(' ')
+        ].join(' ').toLowerCase();
+        if (edgeText.includes(query)) {
+            matchedEdgeIds.add(edge.id);
+        }
+    }
+    const keepNodeIds = new Set();
+    const keepEdgeIds = new Set();
+    for (const nodeId of matchedNodeIds) {
+        keepNodeIds.add(nodeId);
+        addAncestors(nodeId, keepNodeIds);
+        addDescendants(nodeId, keepNodeIds);
+        for (const edgeId of edgesByNode.get(nodeId) ?? []) {
+            const edge = edgeById.get(edgeId);
+            if (!edge)
+                continue;
+            const source = endpointOwner(edge.sourceId);
+            const target = endpointOwner(edge.targetId);
+            if (!source || !target)
+                continue;
+            keepEdgeIds.add(edgeId);
+            keepNodeIds.add(source);
+            keepNodeIds.add(target);
+            addAncestors(source, keepNodeIds);
+            addAncestors(target, keepNodeIds);
+        }
+    }
+    for (const edgeId of matchedEdgeIds) {
+        const edge = edgeById.get(edgeId);
+        if (!edge)
+            continue;
+        const source = endpointOwner(edge.sourceId);
+        const target = endpointOwner(edge.targetId);
+        if (!source || !target)
+            continue;
+        keepEdgeIds.add(edgeId);
+        keepNodeIds.add(source);
+        keepNodeIds.add(target);
+        addAncestors(source, keepNodeIds);
+        addAncestors(target, keepNodeIds);
+    }
+    for (const edge of graph.edges) {
+        const source = endpointOwner(edge.sourceId);
+        const target = endpointOwner(edge.targetId);
+        if (!source || !target)
+            continue;
+        if (keepNodeIds.has(source) && keepNodeIds.has(target)) {
+            keepEdgeIds.add(edge.id);
+        }
+    }
+    for (const node of allNodes) {
+        if (keepNodeIds.has(String(node.id))) {
+            node.show();
+        }
+        else {
+            node.hide();
+        }
+    }
+    for (const edge of allEdges) {
+        if (keepEdgeIds.has(String(edge.id))) {
+            edge.show();
+        }
+        else {
+            edge.hide();
+        }
+    }
+}
+function createToolbarDownloadButton(title) {
+    const downloadButton = document.createElement('button');
+    downloadButton.className = 'tree-download-btn';
+    downloadButton.title = title;
+    downloadButton.setAttribute('aria-label', title);
+    const iconSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    iconSvg.setAttribute('viewBox', '0 0 24 24');
+    iconSvg.setAttribute('width', '20');
+    iconSvg.setAttribute('height', '20');
+    iconSvg.setAttribute('aria-hidden', 'true');
+    iconSvg.setAttribute('focusable', 'false');
+    iconSvg.style.fill = 'currentColor';
+    const iconPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    iconPath.setAttribute('d', 'M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z');
+    iconSvg.appendChild(iconPath);
+    downloadButton.appendChild(iconSvg);
+    return downloadButton;
+}
+function createStandaloneSvg(sourceSvg) {
+    const clone = sourceSvg.cloneNode(true);
+    clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+    clone.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
+    const bbox = getSafeSvgBounds(sourceSvg);
+    if (bbox) {
+        clone.setAttribute('viewBox', `${bbox.x} ${bbox.y} ${bbox.width} ${bbox.height}`);
+        clone.setAttribute('width', `${Math.ceil(bbox.width)}`);
+        clone.setAttribute('height', `${Math.ceil(bbox.height)}`);
+    }
+    else {
+        const fallbackWidth = Math.max(1, Math.ceil(sourceSvg.clientWidth || 1));
+        const fallbackHeight = Math.max(1, Math.ceil(sourceSvg.clientHeight || 1));
+        clone.setAttribute('viewBox', `0 0 ${fallbackWidth} ${fallbackHeight}`);
+        clone.setAttribute('width', `${fallbackWidth}`);
+        clone.setAttribute('height', `${fallbackHeight}`);
+    }
+    inlineComputedSvgStyles(sourceSvg, clone);
+    return clone;
+}
+function getSafeSvgBounds(svg) {
+    try {
+        const box = svg.getBBox();
+        if (Number.isFinite(box.width) && Number.isFinite(box.height) && box.width > 0 && box.height > 0) {
+            return { x: box.x, y: box.y, width: box.width, height: box.height };
+        }
+    }
+    catch {
+        // ignore and use fallback below
+    }
+    return undefined;
+}
+function inlineComputedSvgStyles(sourceRoot, cloneRoot) {
+    const properties = [
+        'fill',
+        'stroke',
+        'stroke-width',
+        'stroke-linecap',
+        'stroke-linejoin',
+        'stroke-dasharray',
+        'stroke-dashoffset',
+        'opacity',
+        'fill-opacity',
+        'stroke-opacity',
+        'vector-effect',
+        'paint-order',
+        'font-family',
+        'font-size',
+        'font-weight',
+        'font-style',
+        'line-height',
+        'text-anchor',
+        'dominant-baseline',
+        'letter-spacing',
+        'word-spacing',
+        'color',
+        'marker-start',
+        'marker-mid',
+        'marker-end',
+    ];
+    const sourceNodes = sourceRoot.querySelectorAll('*');
+    const cloneNodes = cloneRoot.querySelectorAll('*');
+    const count = Math.min(sourceNodes.length, cloneNodes.length);
+    for (let i = 0; i < count; i += 1) {
+        const source = sourceNodes[i];
+        const target = cloneNodes[i];
+        const computed = window.getComputedStyle(source);
+        const declarations = [];
+        for (const property of properties) {
+            const value = computed.getPropertyValue(property).trim();
+            if (!value) {
+                continue;
+            }
+            declarations.push(`${property}:${value}`);
+        }
+        if (declarations.length > 0) {
+            target.setAttribute('style', declarations.join(';'));
+        }
+    }
+}
+async function loadX6GraphCtor() {
+    if (x6GraphCtor) {
+        return x6GraphCtor;
+    }
+    const mod = await import('@antv/x6');
+    const ctor = mod.Graph;
+    if (typeof ctor !== 'function') {
+        throw new Error('X6 Graph constructor is unavailable in @antv/x6');
+    }
+    x6GraphCtor = ctor;
+    return x6GraphCtor;
+}
+async function loadDagreLib() {
+    if (dagreLib) {
+        return dagreLib;
+    }
+    const mod = await import('@dagrejs/dagre');
+    dagreLib = mod.default ?? mod;
+    return dagreLib;
+}
+async function layoutGraphDagre(graph, options) {
+    const dagre = await loadDagreLib();
+    const nodeById = new Map(graph.nodes.map((node) => [node.id, node]));
+    const layoutNodes = graph.nodes.filter((node) => node.kind !== 'Port');
+    const childrenByParent = new Map();
+    for (const node of layoutNodes) {
+        const list = childrenByParent.get(node.parentId) ?? [];
+        list.push(node.id);
+        childrenByParent.set(node.parentId, list);
+    }
+    const endpointOwner = (id) => {
+        const node = nodeById.get(id);
+        if (!node)
+            return undefined;
+        if (node.kind === 'Port')
+            return node.parentId;
+        return node.id;
+    };
+    const layoutOptionsForParent = (parentId) => {
+        if (!parentId) {
+            return { type: 'dagre', dagre: options };
+        }
+        const parent = nodeById.get(parentId);
+        if (!parent) {
+            return { type: 'dagre', dagre: options };
+        }
+        const styleLayout = asRecord(parent.style.layout);
+        if (!styleLayout) {
+            return { type: 'dagre', dagre: options };
+        }
+        const type = typeof styleLayout.type === 'string' ? styleLayout.type.trim().toLowerCase() : '';
+        if (type === 'stack') {
+            return {
+                type: 'stack',
+                stack: {
+                    direction: styleLayout.direction === 'horizontal' ? 'horizontal' : 'vertical',
+                    gap: clampLayoutNumber(styleLayout.gap, 0, 400, 0),
+                    marginx: clampLayoutNumber(styleLayout.marginx, 0, 200, 0),
+                    marginy: clampLayoutNumber(styleLayout.marginy, 0, 200, 0),
+                    stretch: typeof styleLayout.stretch === 'boolean' ? styleLayout.stretch : true,
+                },
+            };
+        }
+        if (type !== '' && type !== 'dagre') {
+            return { type: 'dagre', dagre: options };
+        }
+        const rankdirRaw = typeof styleLayout.rankdir === 'string'
+            ? styleLayout.rankdir.toUpperCase()
+            : options.rankdir;
+        const rankdir = (rankdirRaw === 'LR' || rankdirRaw === 'RL' || rankdirRaw === 'TB' || rankdirRaw === 'BT')
+            ? rankdirRaw
+            : options.rankdir;
+        return {
+            type: 'dagre',
+            dagre: {
+                rankdir,
+                nodesep: clampLayoutNumber(styleLayout.nodesep, 0, 400, options.nodesep),
+                ranksep: clampLayoutNumber(styleLayout.ranksep, 0, 500, options.ranksep),
+                marginx: clampLayoutNumber(styleLayout.marginx, 0, 200, options.marginx),
+                marginy: clampLayoutNumber(styleLayout.marginy, 0, 200, options.marginy),
+            },
+        };
+    };
+    const childPositionById = new Map();
+    const edgesBetweenChildren = (parentId, childSet) => {
+        const seen = new Set();
+        const links = [];
+        for (const edge of graph.edges) {
+            const sourceId = endpointOwner(edge.sourceId);
+            const targetId = endpointOwner(edge.targetId);
+            if (!sourceId || !targetId || sourceId === targetId)
+                continue;
+            if (!childSet.has(sourceId) || !childSet.has(targetId))
+                continue;
+            const sourceNode = nodeById.get(sourceId);
+            const targetNode = nodeById.get(targetId);
+            if (!sourceNode || !targetNode)
+                continue;
+            if (sourceNode.parentId !== parentId || targetNode.parentId !== parentId)
+                continue;
+            const key = `${sourceId}=>${targetId}`;
+            if (seen.has(key))
+                continue;
+            seen.add(key);
+            links.push({ source: sourceId, target: targetId });
+        }
+        return links;
+    };
+    const layoutChildren = (parentId) => {
+        const childIds = childrenByParent.get(parentId) ?? [];
+        for (const childId of childIds) {
+            layoutChildren(childId);
+        }
+        if (childIds.length === 0) {
+            return { width: 0, height: 0 };
+        }
+        const parent = parentId ? nodeById.get(parentId) : undefined;
+        const topPadding = parent?.contentTopPadding ?? 0;
+        const localLayout = layoutOptionsForParent(parentId);
+        let totalWidth = 0;
+        let totalHeight = 0;
+        if (localLayout.type === 'stack') {
+            const local = localLayout.stack;
+            const childNodes = childIds.map((childId) => nodeById.get(childId)).filter((node) => !!node);
+            const maxChildWidth = childNodes.reduce((max, child) => Math.max(max, child.width), 0);
+            const maxChildHeight = childNodes.reduce((max, child) => Math.max(max, child.height), 0);
+            const parentContentWidth = Math.max(0, (parent?.width ?? 0) - (local.marginx * 2));
+            const parentContentHeight = Math.max(0, (parent?.height ?? 0) - topPadding - (local.marginy * 2));
+            const availableWidth = Math.max(maxChildWidth, parentContentWidth);
+            const availableHeight = Math.max(maxChildHeight, parentContentHeight);
+            const isSingleChild = childNodes.length === 1;
+            let cursorX = local.marginx;
+            let cursorY = topPadding + local.marginy;
+            for (const child of childNodes) {
+                if (local.stretch && isSingleChild) {
+                    child.width = Math.max(0, availableWidth);
+                    child.height = Math.max(0, availableHeight);
+                }
+                else if (local.direction === 'vertical' && local.stretch) {
+                    child.width = Math.max(0, availableWidth);
+                }
+                else if (local.direction === 'horizontal' && local.stretch) {
+                    child.height = Math.max(0, availableHeight);
+                }
+                childPositionById.set(child.id, { x: cursorX, y: cursorY });
+                if (local.direction === 'vertical') {
+                    cursorY += child.height + local.gap;
+                }
+                else {
+                    cursorX += child.width + local.gap;
+                }
+            }
+            if (local.direction === 'vertical') {
+                const contentHeight = Math.max(0, childNodes.reduce((sum, child) => sum + child.height, 0) + (Math.max(0, childNodes.length - 1) * local.gap));
+                const contentWidth = Math.max(0, childNodes.reduce((max, child) => Math.max(max, child.width), 0));
+                totalWidth = (local.marginx * 2) + contentWidth;
+                totalHeight = topPadding + (local.marginy * 2) + contentHeight;
+            }
+            else {
+                const contentWidth = Math.max(0, childNodes.reduce((sum, child) => sum + child.width, 0) + (Math.max(0, childNodes.length - 1) * local.gap));
+                const contentHeight = Math.max(0, childNodes.reduce((max, child) => Math.max(max, child.height), 0));
+                totalWidth = (local.marginx * 2) + contentWidth;
+                totalHeight = topPadding + (local.marginy * 2) + contentHeight;
+            }
+        }
+        else {
+            const localOptions = localLayout.dagre;
+            const g = new dagre.graphlib.Graph({ multigraph: true, compound: false });
+            g.setGraph({
+                rankdir: localOptions.rankdir,
+                nodesep: localOptions.nodesep,
+                ranksep: localOptions.ranksep,
+                marginx: 0,
+                marginy: 0,
+            });
+            g.setDefaultEdgeLabel(() => ({}));
+            const childSet = new Set(childIds);
+            for (const childId of childIds) {
+                const child = nodeById.get(childId);
+                if (!child)
+                    continue;
+                g.setNode(child.id, { width: child.width, height: child.height });
+            }
+            let edgeSeq = 0;
+            for (const link of edgesBetweenChildren(parentId, childSet)) {
+                g.setEdge(link.source, link.target, {}, `e${edgeSeq++}`);
+            }
+            dagre.layout(g);
+            let minX = Number.POSITIVE_INFINITY;
+            let minY = Number.POSITIVE_INFINITY;
+            let maxX = 0;
+            let maxY = 0;
+            for (const childId of childIds) {
+                const child = nodeById.get(childId);
+                const laid = child ? g.node(childId) : undefined;
+                if (!child || !laid || typeof laid.x !== 'number' || typeof laid.y !== 'number')
+                    continue;
+                const width = asFiniteNumber(laid.width, child.width);
+                const height = asFiniteNumber(laid.height, child.height);
+                const left = laid.x - (width / 2);
+                const top = laid.y - (height / 2);
+                minX = Math.min(minX, left);
+                minY = Math.min(minY, top);
+                maxX = Math.max(maxX, left + width);
+                maxY = Math.max(maxY, top + height);
+            }
+            if (!Number.isFinite(minX) || !Number.isFinite(minY)) {
+                minX = 0;
+                minY = 0;
+            }
+            for (const childId of childIds) {
+                const child = nodeById.get(childId);
+                const laid = child ? g.node(childId) : undefined;
+                if (!child || !laid || typeof laid.x !== 'number' || typeof laid.y !== 'number')
+                    continue;
+                const width = asFiniteNumber(laid.width, child.width);
+                const height = asFiniteNumber(laid.height, child.height);
+                const left = laid.x - (width / 2);
+                const top = laid.y - (height / 2);
+                childPositionById.set(childId, {
+                    x: localOptions.marginx + (left - minX),
+                    y: topPadding + localOptions.marginy + (top - minY),
+                });
+            }
+            const contentWidth = Math.max(0, maxX - minX);
+            const contentHeight = Math.max(0, maxY - minY);
+            totalWidth = (localOptions.marginx * 2) + contentWidth;
+            totalHeight = topPadding + (localOptions.marginy * 2) + contentHeight;
+        }
+        if (parent) {
+            if (!parent.hasExplicitWidth) {
+                parent.width = Math.max(parent.width, totalWidth);
+            }
+            if (!parent.hasExplicitHeight) {
+                parent.height = Math.max(parent.height, totalHeight);
+            }
+        }
+        return { width: totalWidth, height: totalHeight };
+    };
+    layoutChildren(undefined);
+    const normalizeStackChildren = (parentId) => {
+        const parent = nodeById.get(parentId);
+        if (!parent) {
+            return;
+        }
+        const childIds = childrenByParent.get(parentId) ?? [];
+        if (childIds.length === 0) {
+            return;
+        }
+        const localLayout = layoutOptionsForParent(parentId);
+        if (localLayout.type === 'stack') {
+            const local = localLayout.stack;
+            const childNodes = childIds.map((childId) => nodeById.get(childId)).filter((node) => !!node);
+            const topPadding = parent.contentTopPadding;
+            const contentWidth = Math.max(0, parent.width - (local.marginx * 2));
+            const contentHeight = Math.max(0, parent.height - topPadding - (local.marginy * 2));
+            const isSingleChild = childNodes.length === 1;
+            if (local.stretch) {
+                for (const child of childNodes) {
+                    if (isSingleChild) {
+                        child.width = contentWidth;
+                        child.height = contentHeight;
+                        continue;
+                    }
+                    if (local.direction === 'vertical') {
+                        child.width = contentWidth;
+                    }
+                    else {
+                        child.height = contentHeight;
+                    }
+                }
+            }
+            let cursorX = local.marginx;
+            let cursorY = topPadding + local.marginy;
+            for (const child of childNodes) {
+                childPositionById.set(child.id, { x: cursorX, y: cursorY });
+                if (local.direction === 'vertical') {
+                    cursorY += child.height + local.gap;
+                }
+                else {
+                    cursorX += child.width + local.gap;
+                }
+            }
+        }
+        for (const childId of childIds) {
+            normalizeStackChildren(childId);
+        }
+    };
+    for (const rootId of graph.roots) {
+        normalizeStackChildren(rootId);
+    }
+    const boxes = new Map();
+    let maxRight = 0;
+    let maxBottom = 0;
+    const assignAbsolute = (parentId, baseX, baseY) => {
+        const childIds = childrenByParent.get(parentId) ?? [];
+        for (const childId of childIds) {
+            const node = nodeById.get(childId);
+            const rel = childPositionById.get(childId);
+            if (!node || !rel)
+                continue;
+            const x = baseX + rel.x;
+            const y = baseY + rel.y;
+            boxes.set(node.id, { x, y, width: node.width, height: node.height });
+            maxRight = Math.max(maxRight, x + node.width);
+            maxBottom = Math.max(maxBottom, y + node.height);
+            assignAbsolute(node.id, x, y);
+        }
+    };
+    assignAbsolute(undefined, 0, 0);
+    for (const node of layoutNodes) {
+        if (boxes.has(node.id))
+            continue;
+        boxes.set(node.id, { x: 0, y: 0, width: node.width, height: node.height });
+        maxRight = Math.max(maxRight, node.width);
+        maxBottom = Math.max(maxBottom, node.height);
+    }
+    return {
+        boxes,
+        contentWidth: Math.max(280, Math.ceil(maxRight + 16)),
+        contentHeight: Math.max(160, Math.ceil(maxBottom + 16)),
+    };
+}
+function nodeDepth(id, nodeById) {
+    let depth = 0;
+    let cursor = nodeById.get(id);
+    while (cursor?.parentId) {
+        depth += 1;
+        cursor = nodeById.get(cursor.parentId);
+        if (depth > 32)
+            break;
+    }
+    return depth;
+}
+function asFiniteNumber(value, fallback) {
+    if (typeof value === 'number' && Number.isFinite(value)) {
+        return value;
+    }
+    return fallback;
+}
+function getLiveCanvas(baseId) {
+    const element = document.getElementById(baseId);
+    return element instanceof HTMLElement && element.isConnected ? element : null;
+}
+function setLockedCanvasHeight(canvas, height, minHeight) {
+    canvas.style.setProperty('--oml-diagram-height', `${Math.ceil(height)}px`);
+    canvas.style.setProperty('--oml-diagram-min-height', `${Math.ceil(minHeight)}px`);
+}
+function parseCssPixels(value) {
+    if (!value) {
+        return undefined;
+    }
+    const match = /^\s*(\d+(?:\.\d+)?)px\s*$/.exec(value);
+    if (!match) {
+        return undefined;
+    }
+    const parsed = Number.parseFloat(match[1]);
+    return Number.isFinite(parsed) ? parsed : undefined;
+}
+function compileDiagramGraph(index, stylesheet) {
+    const typeMap = new Map();
+    const parentMap = new Map();
+    const sourceMap = new Map();
+    const targetMap = new Map();
+    const textMap = new Map();
+    const beginTextMap = new Map();
+    const endTextMap = new Map();
+    const classMap = new Map();
+    const propertyRowsBySubject = new Map();
+    for (const row of index.rows) {
+        if (row.p !== RDF_TYPE) {
+            const properties = propertyRowsBySubject.get(row.s) ?? [];
+            properties.push(row);
+            propertyRowsBySubject.set(row.s, properties);
+        }
+        if (row.p === RDF_TYPE) {
+            const types = typeMap.get(row.s) ?? new Set();
+            types.add(row.o);
+            typeMap.set(row.s, types);
+            continue;
+        }
+        if (row.p === `${D}parent`) {
+            parentMap.set(row.s, row.o);
+            continue;
+        }
+        if (row.p === `${D}source`) {
+            sourceMap.set(row.s, row.o);
+            continue;
+        }
+        if (row.p === `${D}target`) {
+            targetMap.set(row.s, row.o);
+            continue;
+        }
+        if (row.p === `${D}text`) {
+            textMap.set(row.s, row.o);
+            continue;
+        }
+        if (row.p === `${D}beginText`) {
+            beginTextMap.set(row.s, row.o);
+            continue;
+        }
+        if (row.p === `${D}endText`) {
+            endTextMap.set(row.s, row.o);
+            continue;
+        }
+        if (row.p === `${D}class`) {
+            const classes = classMap.get(row.s) ?? [];
+            for (const token of row.o.split(/\s+/).map((value) => value.trim()).filter((value) => value.length > 0)) {
+                if (!classes.includes(token)) {
+                    classes.push(token);
+                }
+            }
+            classMap.set(row.s, classes);
+        }
+    }
+    const propertiesFor = (subject) => {
+        const rows = propertyRowsBySubject.get(subject) ?? [];
+        const props = new Map();
+        for (const row of rows) {
+            const fullIri = row.p;
+            const shortName = localName(row.p);
+            const add = (key) => {
+                if (!key)
+                    return;
+                const list = props.get(key) ?? [];
+                if (!list.includes(row.o)) {
+                    list.push(row.o);
+                    props.set(key, list);
+                }
+            };
+            add(fullIri);
+            add(shortName);
+            add(toIdentifier(shortName));
+        }
+        return Object.fromEntries(props);
+    };
+    const classSetFor = (subject) => {
+        const classes = classMap.get(subject) ?? [];
+        return [...classes];
+    };
+    const styleFor = (elementKind, subject, classes, properties) => resolveElementStyle(elementKind, subject, classes, properties, stylesheet);
+    const kindOf = (id) => {
+        const types = typeMap.get(id) ?? new Set();
+        if (types.has(TYPE_IRIS.Node))
+            return 'Node';
+        // Keep backward compatibility: treat legacy :ListItem as a regular node.
+        if (types.has(LIST_ITEM_IRI))
+            return 'Node';
+        if (types.has(TYPE_IRIS.Edge))
+            return 'Edge';
+        if (types.has(TYPE_IRIS.Port))
+            return 'Port';
+        if (types.has(TYPE_IRIS.Compartment))
+            return 'Compartment';
+        return undefined;
+    };
+    const nodeCandidates = [...typeMap.keys()].filter((id) => {
+        const kind = kindOf(id);
+        return kind === 'Node' || kind === 'Port' || kind === 'Compartment';
+    });
+    const edgeCandidates = [...typeMap.keys()].filter((id) => kindOf(id) === 'Edge');
+    const nodeMap = new Map();
+    for (const id of nodeCandidates) {
+        const kind = kindOf(id);
+        nodeMap.set(id, {
+            id,
+            kind,
+            labels: [],
+            classes: classSetFor(id),
+            properties: propertiesFor(id),
+            style: {},
+            children: [],
+            width: 160,
+            height: 70,
+            hasExplicitWidth: false,
+            hasExplicitHeight: false,
+            contentTopPadding: 0,
+        });
+    }
+    const validParent = (child, parent) => {
+        if (!parent)
+            return false;
+        if (child === 'Node')
+            return parent === 'Node' || parent === 'Compartment';
+        if (child === 'Compartment')
+            return parent === 'Node';
+        if (child === 'Port')
+            return parent === 'Node';
+        return false;
+    };
+    for (const node of nodeMap.values()) {
+        const parentId = parentMap.get(node.id);
+        if (!parentId)
+            continue;
+        const parent = nodeMap.get(parentId);
+        if (!parent)
+            continue;
+        if (!validParent(node.kind, parent.kind))
+            continue;
+        node.parentId = parent.id;
+        parent.children.push(node.id);
+    }
+    const attachNodeLabel = (parentId, text) => {
+        const node = nodeMap.get(parentId);
+        if (!node)
+            return;
+        if (text.trim().length === 0)
+            return;
+        if (!node.labels.includes(text)) {
+            node.labels.push(text);
+        }
+    };
+    for (const row of index.rows) {
+        if (row.p === `${D}text` && nodeMap.has(row.s)) {
+            attachNodeLabel(row.s, row.o);
+        }
+    }
+    const edges = [];
+    for (const id of edgeCandidates) {
+        const sourceId = sourceMap.get(id);
+        const targetId = targetMap.get(id);
+        if (!sourceId || !targetId)
+            continue;
+        if (!nodeMap.has(sourceId) || !nodeMap.has(targetId))
+            continue;
+        const edge = {
+            id,
+            sourceId,
+            targetId,
+            classes: classSetFor(id),
+            properties: propertiesFor(id),
+            style: {},
+            labels: [],
+        };
+        edges.push(edge);
+    }
+    for (const edge of edges) {
+        const beginText = beginTextMap.get(edge.id);
+        if (beginText && beginText.trim().length > 0) {
+            edge.labels.push({ text: beginText, placement: 'begin' });
+        }
+        const centerText = textMap.get(edge.id);
+        if (centerText && centerText.trim().length > 0) {
+            edge.labels.push({ text: centerText, placement: 'center' });
+        }
+        const endText = endTextMap.get(edge.id);
+        if (endText && endText.trim().length > 0) {
+            edge.labels.push({ text: endText, placement: 'end' });
+        }
+    }
+    for (const node of nodeMap.values()) {
+        const baseLabel = node.labels[0] ?? localName(node.id);
+        const selectorKind = node.kind === 'Compartment'
+            ? 'compartment'
+            : (node.kind === 'Port' ? 'port' : 'node');
+        node.style = styleFor(selectorKind, node.id, node.classes, node.properties);
+        const estimated = estimateSize(node.kind, baseLabel, node.labels.length, node.style);
+        node.width = estimated.width;
+        node.height = estimated.height;
+        node.hasExplicitWidth = estimated.hasExplicitWidth;
+        node.hasExplicitHeight = estimated.hasExplicitHeight;
+        node.contentTopPadding = resolveContainerTopPadding(node, baseLabel);
+    }
+    for (const edge of edges) {
+        edge.style = styleFor('edge', edge.id, edge.classes, edge.properties);
+    }
+    const roots = [...nodeMap.values()]
+        .filter((node) => node.kind === 'Node' && !node.parentId)
+        .map((node) => node.id);
+    const reachable = new Set();
+    const visit = (id) => {
+        if (reachable.has(id))
+            return;
+        reachable.add(id);
+        const node = nodeMap.get(id);
+        if (!node)
+            return;
+        for (const child of node.children)
+            visit(child);
+    };
+    for (const root of roots)
+        visit(root);
+    const filteredNodes = [...nodeMap.values()].filter((node) => reachable.has(node.id));
+    const filteredEdges = edges.filter((edge) => reachable.has(edge.sourceId) && reachable.has(edge.targetId));
+    return { nodes: filteredNodes, edges: filteredEdges, roots };
+}
+function estimateSize(kind, label, labelCount, style) {
+    const styledWidth = toPositiveNumber(style.width);
+    const styledHeight = toPositiveNumber(style.height);
+    if (styledWidth && styledHeight) {
+        return { width: styledWidth, height: styledHeight, hasExplicitWidth: true, hasExplicitHeight: true };
+    }
+    if (kind === 'Port') {
+        return {
+            width: styledWidth ?? 14,
+            height: styledHeight ?? 14,
+            hasExplicitWidth: styledWidth !== undefined,
+            hasExplicitHeight: styledHeight !== undefined,
+        };
+    }
+    const textWidth = Math.max(24, label.length * 7);
+    const baseWidth = Math.max(72, Math.min(280, textWidth + 26));
+    if (kind === 'Compartment') {
+        const size = { width: baseWidth, height: Math.max(44, 24 + labelCount * 16) };
+        return {
+            width: styledWidth ?? size.width,
+            height: styledHeight ?? size.height,
+            hasExplicitWidth: styledWidth !== undefined,
+            hasExplicitHeight: styledHeight !== undefined,
+        };
+    }
+    const size = { width: baseWidth, height: Math.max(36, 20 + labelCount * 16) };
+    return {
+        width: styledWidth ?? size.width,
+        height: styledHeight ?? size.height,
+        hasExplicitWidth: styledWidth !== undefined,
+        hasExplicitHeight: styledHeight !== undefined,
+    };
+}
+function resolveContainerTopPadding(node, labelText) {
+    if (node.children.length === 0) {
+        return 0;
+    }
+    const explicitPadding = toNonNegativeNumber(node.style.paddingTop);
+    if (explicitPadding !== undefined) {
+        return Math.ceil(explicitPadding);
+    }
+    const attrs = extractStyleAttrs(node.style);
+    const label = asRecord(attrs.label);
+    if (label?.display === 'none') {
+        return 0;
+    }
+    const labelOpacity = toNonNegativeNumber(label?.opacity);
+    if (labelOpacity !== undefined && labelOpacity <= 0) {
+        return 0;
+    }
+    const fontSize = toPositiveNumber(label?.fontSize) ?? 12;
+    const lineCount = Math.max(1, labelText.split('\n').filter((line) => line.trim().length > 0).length);
+    return Math.ceil((fontSize * 1.2) * lineCount);
+}
+function localName(value) {
+    const hash = value.lastIndexOf('#');
+    if (hash >= 0 && hash < value.length - 1)
+        return value.slice(hash + 1);
+    const slash = value.lastIndexOf('/');
+    if (slash >= 0 && slash < value.length - 1)
+        return value.slice(slash + 1);
+    return value;
+}
+function indexTriples(rows) {
+    const bySubject = new Map();
+    for (const row of rows) {
+        const list = bySubject.get(row.s) ?? [];
+        list.push(row);
+        bySubject.set(row.s, list);
+    }
+    return { bySubject, rows };
+}
+function resolveCanvasHeight(options) {
+    const canvas = isRecord(options?.canvas) ? options.canvas : undefined;
+    const raw = canvas?.height ?? options?.height;
+    const minHeight = numericCanvasMinHeight(options);
+    if (typeof raw === 'number' && Number.isFinite(raw) && raw >= minHeight) {
+        return `${raw}px`;
+    }
+    if (typeof raw === 'string') {
+        const trimmed = raw.trim();
+        if (/^\d+(\.\d+)?(px|vh|%)$/.test(trimmed)) {
+            return trimmed;
+        }
+    }
+    return '920px';
+}
+function resolveCanvasMinHeight(options) {
+    return `${numericCanvasMinHeight(options)}px`;
+}
+function numericCanvasMinHeight(options) {
+    const canvas = isRecord(options?.canvas) ? options.canvas : undefined;
+    const raw = canvas?.minHeight ?? options?.minHeight;
+    if (typeof raw === 'number' && Number.isFinite(raw)) {
+        return Math.max(120, Math.round(raw));
+    }
+    return 220;
+}
+function isRecord(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+function resolveDagreLayoutOptions(options) {
+    const layout = isRecord(options?.layout) ? options.layout : {};
+    const rankdirRaw = typeof layout.rankdir === 'string' ? layout.rankdir.toUpperCase() : 'LR';
+    const rankdir = (rankdirRaw === 'LR' || rankdirRaw === 'RL' || rankdirRaw === 'TB' || rankdirRaw === 'BT')
+        ? rankdirRaw
+        : 'LR';
+    const nodesep = clampLayoutNumber(layout.nodesep, 0, 400, 28);
+    const ranksep = clampLayoutNumber(layout.ranksep, 0, 500, 64);
+    const marginx = clampLayoutNumber(layout.marginx, 0, 200, 16);
+    const marginy = clampLayoutNumber(layout.marginy, 0, 200, 16);
+    return { rankdir, nodesep, ranksep, marginx, marginy };
+}
+function clampLayoutNumber(value, min, max, fallback) {
+    if (typeof value !== 'number' || !Number.isFinite(value)) {
+        return fallback;
+    }
+    return Math.max(min, Math.min(max, Math.round(value)));
+}
+function parseDiagramStylesheet(options) {
+    const stylesheet = options?.stylesheet;
+    if (!Array.isArray(stylesheet)) {
+        return [];
+    }
+    const rules = [];
+    for (const entry of stylesheet) {
+        if (!isRecord(entry))
+            continue;
+        const selector = typeof entry.selector === 'string' ? entry.selector.trim() : '';
+        const style = isRecord(entry.style) ? entry.style : undefined;
+        if (!selector || !style)
+            continue;
+        const parsed = parseStyleSelector(selector);
+        if (!parsed)
+            continue;
+        rules.push({
+            elementKind: parsed.elementKind,
+            className: parsed.className,
+            condition: parsed.condition,
+            style: normalizeDiagramStyle(parsed.elementKind, style),
+        });
+    }
+    return rules;
+}
+function parseStyleSelector(selector) {
+    const match = /^\s*(node|compartment|port|edge)(?:\.([A-Za-z0-9_-]+))?(?:\s*\[(.+)\]\s*)?$/i.exec(selector);
+    if (!match)
+        return undefined;
+    return {
+        elementKind: match[1].toLowerCase(),
+        className: match[2]?.trim() || undefined,
+        condition: match[3]?.trim() || undefined,
+    };
+}
+// OML node-level properties read directly from style (not from attrs).
+// These pass through as top-level keys so callers can read style.layout, style.width, etc.
+const OML_PASSTHROUGH_STYLE_KEYS = new Set([
+    'layout', 'shape', 'width', 'height',
+    'paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight',
+]);
+// Record-valued top-level style keys that map directly into the attrs sub-tree under the same name.
+// 'label' and 'icon' cover nodes, compartments, ports, and edges.
+// The *-label and *-label-body variants are edge-specific (begin/center/end label text and background).
+const ATTRS_RECORD_STYLE_KEYS = new Set([
+    'label', 'icon',
+    'label-body',
+    'begin-label', 'center-label', 'end-label',
+    'begin-label-body', 'center-label-body', 'end-label-body',
+]);
+function normalizeDiagramStyle(elementKind, raw) {
+    const isEdge = elementKind === 'edge';
+    const shapeKey = isEdge ? 'line' : 'body';
+    const shapeOverrides = {};
+    const labelOverrides = {};
+    const attrsRecords = {};
+    const passthrough = {};
+    for (const [rawKey, value] of Object.entries(raw)) {
+        const key = rawKey.trim();
+        if (!key || value === undefined || value === null)
+            continue;
+        // OML node-level keys: pass through to the top level of the normalized style object
+        if (OML_PASSTHROUGH_STYLE_KEYS.has(key)) {
+            passthrough[key] = value;
+            continue;
+        }
+        // Record-valued keys: routed directly into attrs.X (e.g. label → attrs.label)
+        if (ATTRS_RECORD_STYLE_KEYS.has(key)) {
+            if (isRecord(value)) {
+                attrsRecords[key] = value;
+            }
+            continue;
+        }
+        // Typographic flat keys: routed to attrs.label; X6-specific label props (from 'label:') take priority
+        if (key === 'color') {
+            labelOverrides.fill = value;
+            continue;
+        }
+        if (key === 'font-size' || key === 'fontSize') {
+            labelOverrides.fontSize = value;
+            continue;
+        }
+        if (key === 'font-family' || key === 'fontFamily') {
+            labelOverrides.fontFamily = value;
+            continue;
+        }
+        if (key === 'font-weight' || key === 'fontWeight') {
+            labelOverrides.fontWeight = value;
+            continue;
+        }
+        if (key === 'font-style' || key === 'fontStyle') {
+            labelOverrides.fontStyle = value;
+            continue;
+        }
+        if (key === 'font-variant' || key === 'fontVariant') {
+            labelOverrides.fontVariant = value;
+            continue;
+        }
+        // All remaining flat keys are SVG/CSS presentation attributes routed to attrs.body (shapes) or
+        // attrs.line (edges), camelCased. Any SVG attribute works without needing a new mapping —
+        // stroke-dasharray, rx, ry, fill-opacity, stroke-linecap, opacity, etc.
+        const camel = key.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+        shapeOverrides[camel] = value;
+        // For edges, auto-propagate stroke colour to the arrowhead targetMarker
+        if (isEdge && key === 'stroke') {
+            shapeOverrides.targetMarker = { stroke: value };
+        }
+    }
+    const mergedAttrs = { ...attrsRecords };
+    if (Object.keys(shapeOverrides).length > 0) {
+        mergedAttrs[shapeKey] = shapeOverrides;
+    }
+    // Merge typographic flat keys (base) with explicit label: sub-object (takes priority)
+    const explicitLabel = isRecord(attrsRecords.label) ? attrsRecords.label : {};
+    const mergedLabel = { ...labelOverrides, ...explicitLabel };
+    if (Object.keys(mergedLabel).length > 0) {
+        mergedAttrs.label = mergedLabel;
+    }
+    const result = { ...passthrough };
+    if (Object.keys(mergedAttrs).length > 0) {
+        result.attrs = mergedAttrs;
+    }
+    return result;
+}
+function resolveElementStyle(elementKind, value, classes, properties, stylesheet) {
+    if (stylesheet.length === 0) {
+        return {};
+    }
+    const merged = {};
+    for (const rule of stylesheet) {
+        if (rule.elementKind !== elementKind)
+            continue;
+        if (rule.className && !classes.includes(rule.className))
+            continue;
+        if (rule.condition && !evaluateStyleCondition(rule.condition, value, properties))
+            continue;
+        mergeStyleRecord(merged, rule.style);
+    }
+    return merged;
+}
+function mergeStyleRecord(target, source) {
+    for (const [key, value] of Object.entries(source)) {
+        if (key !== 'attrs') {
+            target[key] = value;
+            continue;
+        }
+        const sourceAttrs = asRecord(value);
+        if (!sourceAttrs) {
+            target[key] = value;
+            continue;
+        }
+        const targetAttrs = asRecord(target.attrs) ?? {};
+        const mergedAttrs = { ...targetAttrs };
+        for (const [part, partAttrsValue] of Object.entries(sourceAttrs)) {
+            const sourcePartAttrs = asRecord(partAttrsValue);
+            if (!sourcePartAttrs) {
+                mergedAttrs[part] = partAttrsValue;
+                continue;
+            }
+            const targetPartAttrs = asRecord(mergedAttrs[part]) ?? {};
+            mergedAttrs[part] = { ...targetPartAttrs, ...sourcePartAttrs };
+        }
+        target.attrs = mergedAttrs;
+    }
+}
+function evaluateStyleCondition(condition, value, properties) {
+    const context = { value, properties };
+    for (const [key, values] of Object.entries(properties)) {
+        context[key] = values.length === 1 ? values[0] : values;
+    }
+    try {
+        // eslint-disable-next-line no-new-func
+        const fn = new Function('value', 'properties', 'ctx', `with (ctx) { return !!(${condition}); }`);
+        return fn(value, properties, context);
+    }
+    catch {
+        return false;
+    }
+}
+function extractStyleAttrs(style) {
+    return asRecord(style.attrs) ?? {};
+}
+function asRecord(value) {
+    return isRecord(value) ? value : undefined;
+}
+function extractImageHrefFromIcon(iconAttrs) {
+    if (!iconAttrs)
+        return undefined;
+    const href = iconAttrs.href ?? iconAttrs.xlinkHref ?? iconAttrs['xlink:href'];
+    if (typeof href !== 'string') {
+        return undefined;
+    }
+    const trimmed = href.trim();
+    if (!trimmed) {
+        return undefined;
+    }
+    return normalizeImageHref(trimmed);
+}
+function normalizeImageHref(href) {
+    if (!href || href.startsWith('#') || href.startsWith('data:') || /^[a-z][a-z0-9+.-]*:/i.test(href)) {
+        return href;
+    }
+    try {
+        return new URL(href, window.location.href).toString();
+    }
+    catch {
+        return href;
+    }
+}
+function readIconPaths(iconAttrs) {
+    if (!iconAttrs) {
+        return [];
+    }
+    const paths = Array.isArray(iconAttrs.paths) ? iconAttrs.paths : undefined;
+    if (!paths || paths.length === 0) {
+        return [];
+    }
+    const normalized = [];
+    for (const entry of paths) {
+        if (!isRecord(entry)) {
+            continue;
+        }
+        const d = typeof entry.d === 'string' ? entry.d.trim() : '';
+        if (!d) {
+            continue;
+        }
+        const attrs = { d };
+        for (const [key, value] of Object.entries(entry)) {
+            if (key === 'd' || value === undefined || value === null) {
+                continue;
+            }
+            if (typeof value !== 'string' && typeof value !== 'number' && typeof value !== 'boolean') {
+                continue;
+            }
+            attrs[key] = value;
+        }
+        normalized.push(attrs);
+    }
+    return normalized;
+}
+function resolveRenderNodeShape(style) {
+    const raw = typeof style.shape === 'string' ? style.shape.trim().toLowerCase() : '';
+    if (raw === 'ellipse' || raw === 'circle') {
+        return {
+            graphShape: 'ellipse',
+            bodyTag: 'ellipse',
+            bodyDefaults: {
+                refCx: '50%',
+                refCy: '50%',
+                refRx: '50%',
+                refRy: '50%',
+            },
+        };
+    }
+    return {
+        graphShape: 'rect',
+        bodyTag: 'rect',
+        bodyDefaults: {},
+    };
+}
+function resolveNodeAttrs(style) {
+    const attrs = extractStyleAttrs(style);
+    const body = asRecord(attrs.body);
+    const label = asRecord(attrs.label);
+    const icon = asRecord(attrs.icon);
+    const imageUrl = extractImageHrefFromIcon(icon);
+    const iconPaths = readIconPaths(icon);
+    const usesImage = !!imageUrl;
+    const bodyAttrs = {
+        fill: CSS_EDITOR_BACKGROUND,
+        stroke: CSS_EDITOR_FOREGROUND,
+        strokeWidth: 1,
+        ...(body ?? {}),
+    };
+    const labelAttrs = {
+        fill: CSS_EDITOR_FOREGROUND,
+        ...(label ?? {}),
+    };
+    const iconSvgAttrs = {
+        refX: 0,
+        refY: 0,
+        refWidth: '100%',
+        refHeight: '100%',
+        viewBox: (typeof icon?.viewBox === 'string' && icon.viewBox.trim().length > 0)
+            ? icon.viewBox.trim()
+            : '0 0 24 24',
+        preserveAspectRatio: icon?.preserveAspectRatio ?? 'xMidYMid meet',
+        display: iconPaths.length > 0 ? undefined : 'none',
+    };
+    const imageAttrs = {
+        refX: 0,
+        refY: 0,
+        refWidth: '100%',
+        refHeight: '100%',
+        opacity: 1,
+        display: usesImage ? undefined : 'none',
+        ...(icon ?? {}),
+    };
+    delete imageAttrs.paths;
+    delete imageAttrs.viewBox;
+    if (usesImage) {
+        imageAttrs.href = imageUrl;
+        imageAttrs.xlinkHref = imageUrl;
+        imageAttrs['xlink:href'] = imageUrl;
+    }
+    return { bodyAttrs, labelAttrs, iconSvgAttrs, iconPathAttrs: iconPaths, imageAttrs };
+}
+function toNonNegativeNumber(value) {
+    if (typeof value === 'number' && Number.isFinite(value) && value >= 0) {
+        return value;
+    }
+    if (typeof value === 'string') {
+        const parsed = Number.parseFloat(value);
+        if (Number.isFinite(parsed) && parsed >= 0) {
+            return parsed;
+        }
+    }
+    return undefined;
+}
+function resolveEdgeLineAttrs(style) {
+    const attrs = extractStyleAttrs(style);
+    const line = asRecord(attrs.line);
+    return {
+        fill: 'none',
+        stroke: CSS_EDITOR_FOREGROUND,
+        strokeOpacity: 0.85,
+        strokeWidth: 1.2,
+        targetMarker: {
+            name: 'block',
+            open: true,
+            size: 10,
+            stroke: CSS_EDITOR_FOREGROUND,
+            fill: 'none',
+        },
+        ...(line ?? {}),
+    };
+}
+function resolveEdgeLabelAttrs(style, placement, text) {
+    const attrs = extractStyleAttrs(style);
+    const base = asRecord(attrs.label);
+    const specific = asRecord(attrs[`${placement}-label`]);
+    return {
+        text,
+        fill: CSS_EDITOR_FOREGROUND,
+        fontFamily: 'var(--vscode-editor-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif)',
+        fontSize: 12,
+        ...(base ?? {}),
+        ...(specific ?? {}),
+    };
+}
+function resolveEdgeLabelBodyAttrs(style, placement) {
+    const attrs = extractStyleAttrs(style);
+    const base = asRecord(attrs['label-body']);
+    const specific = asRecord(attrs[`${placement}-label-body`]);
+    return {
+        fill: CSS_EDITOR_BACKGROUND,
+        fillOpacity: 0.9,
+        stroke: 'none',
+        strokeWidth: 0,
+        ...(base ?? {}),
+        ...(specific ?? {}),
+    };
+}
+function resolvePortAttrs(style, classes, text) {
+    const attrs = extractStyleAttrs(style);
+    const body = asRecord(attrs.body);
+    const icon = asRecord(attrs.icon);
+    const label = asRecord(attrs.label);
+    const imageUrl = extractImageHrefFromIcon(icon);
+    return {
+        body: {
+            width: 12,
+            height: 12,
+            x: -6,
+            y: -6,
+            class: ['oml-port-body', ...classes].join(' '),
+            magnet: false,
+            stroke: CSS_FOCUS_BORDER,
+            strokeWidth: 1,
+            fill: CSS_EDITOR_BACKGROUND,
+            ...(body ?? {}),
+        },
+        icon: {
+            width: 12,
+            height: 12,
+            x: -6,
+            y: -6,
+            preserveAspectRatio: 'xMidYMid meet',
+            display: imageUrl ? undefined : 'none',
+            ...(icon ?? {}),
+            ...(imageUrl ? { href: imageUrl, xlinkHref: imageUrl, 'xlink:href': imageUrl } : {}),
+        },
+        label: {
+            text,
+            fill: CSS_EDITOR_FOREGROUND,
+            fontFamily: 'var(--vscode-editor-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif)',
+            fontSize: 12,
+            textAnchor: 'start',
+            x: 10,
+            dy: '0.9em',
+            ...(label ?? {}),
+        },
+    };
+}
+function toPositiveNumber(value) {
+    if (typeof value === 'number' && Number.isFinite(value) && value > 0) {
+        return value;
+    }
+    if (typeof value === 'string') {
+        const parsed = Number.parseFloat(value);
+        if (Number.isFinite(parsed) && parsed > 0) {
+            return parsed;
+        }
+    }
+    return undefined;
+}
+function toIdentifier(value) {
+    return value.replace(/[^A-Za-z0-9_$]/g, '_');
+}
+async function waitForCanvasReady(canvas) {
+    const maxAttempts = 24;
+    for (let i = 0; i < maxAttempts; i += 1) {
+        if (canvas.isConnected && canvas.clientWidth > 0 && canvas.clientHeight > 0) {
+            return;
+        }
+        await new Promise((resolve) => requestAnimationFrame(() => resolve(undefined)));
+    }
+}
+//# sourceMappingURL=diagram-renderer.js.map