@liminis/editor 0.2.2 → 0.4.0

package/dist/app/editor/c4/renderer.js

@@ -1,569 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { buildClippedEdgePaths } from './edge-clipping.js';
-// =============================================================================
-// CONSTANTS
-// =============================================================================
-/** Colors for light mode (matches imperative renderer — white fills, colored strokes) */
-const LIGHT_COLORS = {
-    containerFill: '#ffffff', // oklch(1.00 0.00 0)
-    componentFill: '#f8f8f8', // oklch(0.98 0.00 0)
-    externalFill: '#f0f4f8', // oklch(0.96 0.01 240)
-    personFill: '#006b2d', // oklch(0.45 0.16 152)
-    boundaryFill: '#f4f7fb', // oklch(0.98 0.01 240)
-    containerStroke: '#005998', // oklch(0.45 0.15 240)
-    componentStroke: '#0068a0', // oklch(0.50 0.12 240)
-    externalStroke: '#667280', // oklch(0.55 0.02 240)
-    personStroke: '#004b1e', // oklch(0.35 0.16 152)
-    boundaryStroke: '#63869b', // oklch(0.60 0.05 240)
-    edgeStroke: '#565656', // oklch(0.35 0.00 0)
-    textPrimary: '#303030', // oklch(0.20 0.00 0)
-    textSecondary: '#626262', // oklch(0.40 0.00 0)
-    textOnBoundary: '#3d3d3d', // oklch(0.25 0.00 0)
-    edgeLabel: '#4a4a4a', // oklch(0.30 0.00 0)
-    edgeLabelBackground: '#ffffff', // oklch(1.00 0.00 0)
-};
-/** Colors for dark mode */
-const DARK_COLORS = {
-    containerFill: '#16191c', // oklch(0.20 0.01 240)
-    componentFill: '#16191c', // oklch(0.20 0.01 240)
-    externalFill: '#2d2d2d', // oklch(0.18 0.00 0)
-    personFill: '#006b2d', // oklch(0.45 0.16 152)
-    boundaryFill: '#131619', // oklch(0.15 0.01 240)
-    containerStroke: '#0098e0', // oklch(0.65 0.15 240)
-    componentStroke: '#2b89bf', // oklch(0.60 0.12 240)
-    externalStroke: '#667280', // oklch(0.55 0.02 240)
-    personStroke: '#009848', // oklch(0.60 0.16 152)
-    boundaryStroke: '#47657d', // oklch(0.50 0.05 240)
-    edgeStroke: '#a7a7a7', // oklch(0.70 0.00 0)
-    textPrimary: '#d6d6d6', // oklch(0.90 0.00 0)
-    textSecondary: '#b2b2b2', // oklch(0.75 0.00 0)
-    textOnBoundary: '#d6d6d6', // oklch(0.90 0.00 0)
-    edgeLabel: '#bebebe', // oklch(0.80 0.00 0)
-    edgeLabelBackground: '#16191c', // oklch(0.20 0.01 240)
-};
-const BORDER_RADIUS = 8;
-const PERSON_HEAD_RADIUS = 14;
-const PERSON_BODY_WIDTH = 40;
-const PERSON_BODY_HEIGHT = 30;
-const NAME_FONT_SIZE = 14;
-const TECH_FONT_SIZE = 11;
-const DESCRIPTION_FONT_SIZE = 11;
-const EDGE_LABEL_FONT_SIZE = 11;
-const ARROW_SIZE = 8;
-const LEGEND_ROW_HEIGHT = 24;
-const LEGEND_MARGIN = 20;
-const STEP_NUMBER_PATTERN = /^(\d+)\s*\[(.+)\]$/;
-const LEGEND_THRESHOLD = 50;
-// =============================================================================
-// HELPER FUNCTIONS
-// =============================================================================
-function getColors(isDarkMode) {
-    return isDarkMode ? DARK_COLORS : LIGHT_COLORS;
-}
-function calculateArrowheadPoints(startPoint, endPoint) {
-    const dx = endPoint.x - startPoint.x;
-    const dy = endPoint.y - startPoint.y;
-    const len = Math.sqrt(dx * dx + dy * dy);
-    if (len === 0)
-        return '';
-    const ux = dx / len;
-    const uy = dy / len;
-    const px = -uy;
-    const py = ux;
-    const tipX = endPoint.x;
-    const tipY = endPoint.y;
-    const baseX = endPoint.x - ux * ARROW_SIZE;
-    const baseY = endPoint.y - uy * ARROW_SIZE;
-    const halfW = ARROW_SIZE * 0.5;
-    return `${tipX},${tipY} ${baseX + px * halfW},${baseY + py * halfW} ${baseX - px * halfW},${baseY - py * halfW}`;
-}
-function shortenEdgeEnd(points) {
-    if (points.length < 2)
-        return points;
-    const result = [...points];
-    const lastIndex = result.length - 1;
-    const secondLastIndex = lastIndex - 1;
-    const dx = result[lastIndex].x - result[secondLastIndex].x;
-    const dy = result[lastIndex].y - result[secondLastIndex].y;
-    const len = Math.sqrt(dx * dx + dy * dy);
-    if (len > ARROW_SIZE) {
-        const ratio = (len - ARROW_SIZE) / len;
-        result[lastIndex] = {
-            x: result[secondLastIndex].x + dx * ratio,
-            y: result[secondLastIndex].y + dy * ratio,
-        };
-    }
-    return result;
-}
-/**
- * Split an edge label into lines for rendering.
- * If the label contains a [technology] suffix, always put it on its own line.
- * Otherwise, break long labels at a natural word boundary near the middle.
- */
-function splitEdgeLabel(label) {
-    const techMatch = /^(.+?)\s*(\[.+\])$/.exec(label);
-    if (techMatch) {
-        return [techMatch[1].trim(), techMatch[2]];
-    }
-    const LINE_BREAK_THRESHOLD = 30;
-    if (label.length > LINE_BREAK_THRESHOLD) {
-        const mid = Math.floor(label.length / 2);
-        let breakIdx = label.lastIndexOf(' ', mid + 10);
-        if (breakIdx < mid - 15 || breakIdx === -1)
-            breakIdx = label.indexOf(' ', mid - 5);
-        if (breakIdx === -1)
-            breakIdx = mid;
-        return [label.slice(0, breakIdx).trim(), label.slice(breakIdx).trim()];
-    }
-    return [label];
-}
-/**
- * Wrap text into lines that fit within a given pixel width.
- * Uses approximate character width for system-ui at the given font size.
- */
-function wrapText(text, maxWidth, fontSize) {
-    const avgCharWidth = fontSize * 0.55;
-    const maxChars = Math.floor(maxWidth / avgCharWidth);
-    if (text.length <= maxChars)
-        return [text];
-    const words = text.split(' ');
-    const lines = [];
-    let current = '';
-    for (const word of words) {
-        const test = current ? `${current} ${word}` : word;
-        if (test.length > maxChars && current) {
-            lines.push(current);
-            current = word;
-        }
-        else {
-            current = test;
-        }
-    }
-    if (current)
-        lines.push(current);
-    return lines;
-}
-/**
- * Render a multi-line description as tspan elements within a text element.
- */
-function DescriptionText({ x, y, text, nodeWidth, fill, fontSize, lineHeight = 14 }) {
-    // Leave padding on each side
-    const maxWidth = nodeWidth - 20;
-    const lines = wrapText(text, maxWidth, fontSize);
-    return (_jsx("text", { x: x, y: y, textAnchor: "middle", fill: fill, fontSize: fontSize, fontFamily: "system-ui, -apple-system, sans-serif", opacity: 0.7, children: lines.map((line, i) => (_jsx("tspan", { x: x, dy: i === 0 ? 0 : lineHeight, children: line }, i))) }));
-}
-/** Build id→parentId map for O(1) parent lookups */
-function buildParentMap(allNodes) {
-    const map = new Map();
-    for (const node of allNodes) {
-        map.set(node.id, node.element.parent);
-    }
-    return map;
-}
-/** Compute nesting depth for alternating boundary fills */
-function getNestingDepth(element, parentMap) {
-    let depth = 0;
-    let parentId = element.parent;
-    while (parentId) {
-        depth++;
-        parentId = parentMap.get(parentId);
-    }
-    return depth;
-}
-function processEdgesForLegend(edges) {
-    const legendEntries = [];
-    let nextLetterIndex = 0;
-    const nextLetter = () => String.fromCharCode(65 + (nextLetterIndex++ % 26));
-    const processed = edges.map((edge) => {
-        if (!edge.label)
-            return { ...edge, isLegendRef: false, isStepNumber: false };
-        const stepMatch = STEP_NUMBER_PATTERN.exec(edge.label);
-        if (stepMatch) {
-            const stepNum = stepMatch[1];
-            const description = stepMatch[2];
-            legendEntries.push({ index: stepNum, label: description, isStep: true });
-            const showInline = description.length <= LEGEND_THRESHOLD;
-            return {
-                ...edge,
-                label: stepNum,
-                displayLabel: showInline ? description : undefined,
-                isLegendRef: true,
-                isStepNumber: true,
-            };
-        }
-        if (edge.label.length > LEGEND_THRESHOLD) {
-            const letter = nextLetter();
-            legendEntries.push({ index: letter, label: edge.label, isStep: false });
-            return { ...edge, label: letter, isLegendRef: true, isStepNumber: false };
-        }
-        return { ...edge, isLegendRef: false, isStepNumber: false };
-    });
-    // If multiple edges between same pair, or any one is in legend,
-    // move ALL edges in that pair to legend
-    const pairCounts = new Map();
-    for (const edge of processed) {
-        if (edge.label) {
-            const key = [edge.source, edge.target].sort().join('::');
-            pairCounts.set(key, (pairCounts.get(key) ?? 0) + 1);
-        }
-    }
-    const pairNeedsLegend = new Map();
-    for (const edge of processed) {
-        const key = [edge.source, edge.target].sort().join('::');
-        if (edge.isLegendRef || (pairCounts.get(key) ?? 0) > 1) {
-            pairNeedsLegend.set(key, true);
-        }
-    }
-    for (const edge of processed) {
-        if (!edge.isLegendRef && edge.label) {
-            const key = [edge.source, edge.target].sort().join('::');
-            if (pairNeedsLegend.get(key)) {
-                const letter = nextLetter();
-                legendEntries.push({ index: letter, label: edge.label, isStep: false });
-                edge.label = letter;
-                edge.isLegendRef = true;
-            }
-        }
-    }
-    return { edges: processed, legendEntries };
-}
-// =============================================================================
-// LEGEND PLACEMENT
-// =============================================================================
-function computeLegendPlacement(legendEntries, layout) {
-    const longestLabel = Math.max(...legendEntries.map((e) => e.label.length), 0);
-    const legendW = Math.min(longestLabel * 6 + 40, 400);
-    const legendH = legendEntries.length * LEGEND_ROW_HEIGHT + LEGEND_MARGIN;
-    const margin = LEGEND_MARGIN;
-    const allNodes = layout.nodes;
-    function overlapsNodes(rx, ry, rw, rh) {
-        for (const node of allNodes) {
-            if (rx < node.x + node.width + margin &&
-                rx + rw + margin > node.x &&
-                ry < node.y + node.height + margin &&
-                ry + rh + margin > node.y) {
-                return true;
-            }
-        }
-        return false;
-    }
-    const step = 30;
-    let bestPlacement = null;
-    let bestScore = -Infinity;
-    const allowOverflow = legendW;
-    for (let cy = margin; cy <= layout.height - legendH - margin; cy += step) {
-        for (let cx = margin; cx <= layout.width + allowOverflow - legendW; cx += step) {
-            if (!overlapsNodes(cx, cy, legendW, legendH)) {
-                const withinX = cx + legendW <= layout.width;
-                const withinY = cy + legendH <= layout.height;
-                const withinBonus = (withinX ? 50 : 0) + (withinY ? 50 : 0);
-                const overflowX = Math.max(0, (cx + legendW) - layout.width);
-                const overflowY = Math.max(0, (cy + legendH) - layout.height);
-                const overflowPenalty = (overflowX + overflowY) * 0.5;
-                const score = withinBonus +
-                    (cx / (layout.width || 1)) * 30 +
-                    ((1 - cy / (layout.height || 1)) * 20) -
-                    overflowPenalty;
-                if (score > bestScore) {
-                    bestScore = score;
-                    bestPlacement = { x: cx, y: cy };
-                }
-            }
-        }
-    }
-    for (const node of allNodes) {
-        const cx = node.x + node.width + margin;
-        const cy = node.y;
-        if (!overlapsNodes(cx, cy, legendW, legendH)) {
-            const withinX = cx + legendW <= layout.width;
-            const withinY = cy + legendH <= layout.height;
-            const withinBonus = (withinX ? 50 : 0) + (withinY ? 50 : 0);
-            const overflowX = Math.max(0, (cx + legendW) - layout.width);
-            const overflowY = Math.max(0, (cy + legendH) - layout.height);
-            const overflowPenalty = (overflowX + overflowY) * 0.5;
-            const score = withinBonus +
-                (cx / (layout.width || 1)) * 30 +
-                ((1 - cy / (layout.height || 1)) * 20) -
-                overflowPenalty;
-            if (score > bestScore) {
-                bestScore = score;
-                bestPlacement = { x: cx, y: cy };
-            }
-        }
-    }
-    if (!bestPlacement) {
-        bestPlacement = { x: margin, y: layout.height + margin };
-    }
-    let totalWidth = layout.width;
-    let totalHeight = layout.height;
-    if (bestPlacement.x + legendW + margin > totalWidth) {
-        totalWidth = bestPlacement.x + legendW + margin;
-    }
-    if (bestPlacement.y + legendH + margin > totalHeight) {
-        totalHeight = bestPlacement.y + legendH + margin;
-    }
-    return {
-        x: bestPlacement.x,
-        y: bestPlacement.y,
-        width: legendW,
-        height: legendH,
-        totalWidth,
-        totalHeight,
-    };
-}
-/**
- * Compute legend placement and dimensions for a layout.
- * Exported for use by C4InteractiveRenderer to create a legend hit area.
- * Returns null if the layout has no legend entries.
- */
-export function computeLegendInfo(layout) {
-    const { legendEntries } = processEdgesForLegend(layout.edges);
-    if (legendEntries.length === 0)
-        return null;
-    const lp = computeLegendPlacement(legendEntries, layout);
-    return { x: lp.x, y: lp.y, width: lp.width, height: lp.height };
-}
-function SystemBoundary({ node, colors, parentMap }) {
-    const { x, y, width, height, element } = node;
-    const isExt = element.properties.external === true;
-    const hasChildren = (node.children?.length ?? 0) > 0 || element.properties.style === 'boundary';
-    const depth = getNestingDepth(element, parentMap);
-    const boundaryFillColor = depth % 2 === 0 ? colors.boundaryFill : colors.containerFill;
-    return (_jsxs("g", { children: [_jsx("rect", { x: x, y: y, width: width, height: height, rx: BORDER_RADIUS, ry: BORDER_RADIUS, fill: isExt ? colors.externalFill : hasChildren ? boundaryFillColor : colors.containerFill, stroke: isExt ? colors.externalStroke : hasChildren ? colors.boundaryStroke : colors.containerStroke, strokeWidth: 2.5, strokeDasharray: (isExt || hasChildren) ? '8 4' : 'none' }), _jsx("text", { x: x + width / 2, y: hasChildren ? y + 24 : y + height / 2 - (element.properties.tech ? 6 : 0) - (element.properties.description ? 6 : 0), textAnchor: "middle", dominantBaseline: hasChildren ? undefined : 'middle', fill: hasChildren ? colors.textOnBoundary : colors.textPrimary, fontSize: NAME_FONT_SIZE, fontWeight: "600", fontFamily: "system-ui, -apple-system, sans-serif", children: element.name }), element.properties.tech && (_jsxs("text", { x: x + width / 2, y: hasChildren ? y + 40 : y + height / 2 + 10 - (element.properties.description ? 6 : 0), textAnchor: "middle", fill: hasChildren ? colors.textOnBoundary : colors.textSecondary, fontSize: TECH_FONT_SIZE, fontFamily: "system-ui, -apple-system, sans-serif", opacity: 0.8, children: ["[", element.properties.tech, "]"] })), element.properties.description && !hasChildren && (_jsx(DescriptionText, { x: x + width / 2, y: y + height / 2 + (element.properties.tech ? 26 : 14), text: element.properties.description, nodeWidth: width, fill: colors.textSecondary, fontSize: DESCRIPTION_FONT_SIZE }))] }));
-}
-function Container({ node, colors, allNodes, parentMap }) {
-    const { x, y, width, height, element } = node;
-    const isExt = element.properties.external === true;
-    const hasChildren = (node.children?.length ?? 0) > 0 || element.properties.style === 'boundary';
-    if (element.properties.shape === 'cylinder') {
-        return _jsx(CylinderShape, { node: node, colors: colors, allNodes: allNodes, parentMap: parentMap });
-    }
-    if (element.properties.shape === 'queue') {
-        return _jsx(QueueShape, { node: node, colors: colors, allNodes: allNodes, parentMap: parentMap });
-    }
-    const depth = getNestingDepth(element, parentMap);
-    const boundaryFillColor = depth % 2 === 0 ? colors.boundaryFill : colors.containerFill;
-    const fill = isExt ? colors.externalFill : hasChildren ? boundaryFillColor : colors.containerFill;
-    const stroke = isExt ? colors.externalStroke : hasChildren ? colors.boundaryStroke : colors.containerStroke;
-    const textColor = hasChildren ? colors.textOnBoundary : colors.textPrimary;
-    const textY = hasChildren
-        ? y + 24
-        : y + height / 2 - (element.properties.tech ? 6 : 0) - (element.properties.description ? 6 : 0);
-    return (_jsxs("g", { children: [_jsx("rect", { x: x, y: y, width: width, height: height, rx: BORDER_RADIUS, ry: BORDER_RADIUS, fill: fill, stroke: stroke, strokeWidth: 2.5, strokeDasharray: (isExt || hasChildren) ? '8 4' : 'none' }), _jsx("text", { x: x + width / 2, y: textY, textAnchor: "middle", dominantBaseline: hasChildren ? undefined : 'middle', fill: textColor, fontSize: NAME_FONT_SIZE, fontWeight: "600", fontFamily: "system-ui, -apple-system, sans-serif", children: element.name }), element.properties.tech && (_jsxs("text", { x: x + width / 2, y: y + height / 2 + 10 - (element.properties.description ? 6 : 0), textAnchor: "middle", fill: colors.textSecondary, fontSize: TECH_FONT_SIZE, fontFamily: "system-ui, -apple-system, sans-serif", opacity: 0.8, children: ["[", element.properties.tech, "]"] })), element.properties.description && !hasChildren && (_jsx(DescriptionText, { x: x + width / 2, y: y + height / 2 + (element.properties.tech ? 26 : 14), text: element.properties.description, nodeWidth: width, fill: colors.textSecondary, fontSize: DESCRIPTION_FONT_SIZE }))] }));
-}
-function CylinderShape({ node, colors }) {
-    const { x, y, width, height, element } = node;
-    const isExt = element.properties.external === true;
-    const ellipseRy = 12;
-    const bodyY = y + ellipseRy;
-    const bodyHeight = height - ellipseRy * 2;
-    const fill = isExt ? colors.externalFill : colors.containerFill;
-    const stroke = isExt ? colors.externalStroke : colors.containerStroke;
-    return (_jsxs("g", { children: [_jsx("rect", { x: x, y: bodyY, width: width, height: bodyHeight, fill: fill, stroke: stroke, strokeWidth: 2.5, strokeDasharray: isExt ? '8 4' : 'none' }), _jsx("ellipse", { cx: x + width / 2, cy: y + height - ellipseRy, rx: width / 2, ry: ellipseRy, fill: fill, stroke: stroke, strokeWidth: 2.5, strokeDasharray: isExt ? '8 4' : 'none' }), _jsx("ellipse", { cx: x + width / 2, cy: y + ellipseRy, rx: width / 2, ry: ellipseRy, fill: fill, stroke: stroke, strokeWidth: 2.5, strokeDasharray: isExt ? '8 4' : 'none' }), _jsx("text", { x: x + width / 2, y: y + height / 2 - (element.properties.tech ? 6 : 0), textAnchor: "middle", dominantBaseline: "middle", fill: colors.textPrimary, fontSize: NAME_FONT_SIZE, fontWeight: "600", fontFamily: "system-ui, -apple-system, sans-serif", children: element.name }), element.properties.tech && (_jsxs("text", { x: x + width / 2, y: y + height / 2 + 12, textAnchor: "middle", fill: colors.textSecondary, fontSize: TECH_FONT_SIZE, fontFamily: "system-ui, -apple-system, sans-serif", opacity: 0.8, children: ["[", element.properties.tech, "]"] }))] }));
-}
-function QueueShape({ node, colors }) {
-    const { x, y, width, height, element } = node;
-    const isExt = element.properties.external === true;
-    const fill = isExt ? colors.externalFill : colors.containerFill;
-    const stroke = isExt ? colors.externalStroke : colors.containerStroke;
-    const ellipseRx = 16;
-    return (_jsxs("g", { children: [_jsx("rect", { x: x + ellipseRx, y: y, width: width - ellipseRx * 2, height: height, fill: fill, stroke: fill }), _jsx("ellipse", { cx: x + ellipseRx, cy: y + height / 2, rx: ellipseRx, ry: height / 2, fill: fill, stroke: stroke, strokeWidth: 2.5, strokeDasharray: isExt ? '8 4' : 'none' }), _jsx("ellipse", { cx: x + width - ellipseRx, cy: y + height / 2, rx: ellipseRx, ry: height / 2, fill: fill, stroke: stroke, strokeWidth: 2.5, strokeDasharray: isExt ? '8 4' : 'none' }), _jsx("line", { x1: x + ellipseRx, y1: y, x2: x + width - ellipseRx, y2: y, stroke: stroke, strokeWidth: 2.5 }), _jsx("line", { x1: x + ellipseRx, y1: y + height, x2: x + width - ellipseRx, y2: y + height, stroke: stroke, strokeWidth: 2.5 }), _jsx("text", { x: x + width / 2, y: y + height / 2 - (element.properties.tech ? 6 : 0), textAnchor: "middle", dominantBaseline: "middle", fill: colors.textPrimary, fontSize: NAME_FONT_SIZE, fontWeight: "600", fontFamily: "system-ui, -apple-system, sans-serif", children: element.name }), element.properties.tech && (_jsxs("text", { x: x + width / 2, y: y + height / 2 + 12, textAnchor: "middle", fill: colors.textSecondary, fontSize: TECH_FONT_SIZE, fontFamily: "system-ui, -apple-system, sans-serif", opacity: 0.8, children: ["[", element.properties.tech, "]"] })), element.properties.description && (_jsx(DescriptionText, { x: x + width / 2, y: y + height / 2 + (element.properties.tech ? 26 : 14), text: element.properties.description, nodeWidth: width, fill: colors.textSecondary, fontSize: DESCRIPTION_FONT_SIZE }))] }));
-}
-function Component({ node, colors }) {
-    const { x, y, width, height, element } = node;
-    return (_jsxs("g", { children: [_jsx("rect", { x: x, y: y, width: width, height: height, rx: BORDER_RADIUS / 2, ry: BORDER_RADIUS / 2, fill: colors.componentFill, stroke: colors.componentStroke, strokeWidth: 2.5 }), _jsx("text", { x: x + width / 2, y: y + height / 2 - (element.properties.tech ? 4 : 0), textAnchor: "middle", dominantBaseline: "middle", fill: colors.textPrimary, fontSize: NAME_FONT_SIZE - 1, fontWeight: "500", fontFamily: "system-ui, -apple-system, sans-serif", children: element.name }), element.properties.tech && (_jsxs("text", { x: x + width / 2, y: y + height / 2 + 12, textAnchor: "middle", fill: colors.textSecondary, fontSize: TECH_FONT_SIZE - 1, fontFamily: "system-ui, -apple-system, sans-serif", opacity: 0.8, children: ["[", element.properties.tech, "]"] }))] }));
-}
-function Person({ node, colors }) {
-    const { x, y, width, height, element } = node;
-    const centerX = x + width / 2;
-    const iconY = y + 12;
-    return (_jsxs("g", { children: [_jsx("circle", { cx: centerX, cy: iconY + PERSON_HEAD_RADIUS, r: PERSON_HEAD_RADIUS, fill: colors.personFill, stroke: colors.personStroke, strokeWidth: 1.5 }), _jsx("rect", { x: centerX - PERSON_BODY_WIDTH / 2, y: iconY + PERSON_HEAD_RADIUS * 2 + 4, width: PERSON_BODY_WIDTH, height: PERSON_BODY_HEIGHT, rx: PERSON_BODY_WIDTH / 2, ry: 8, fill: colors.personFill, stroke: colors.personStroke, strokeWidth: 1.5 }), _jsx("text", { x: centerX, y: y + height - 18, textAnchor: "middle", fill: colors.textOnBoundary, fontSize: NAME_FONT_SIZE, fontWeight: "600", fontFamily: "system-ui, -apple-system, sans-serif", children: element.name }), element.properties.description && (_jsx("text", { x: centerX, y: y + height - 4, textAnchor: "middle", fill: colors.textOnBoundary, fontSize: DESCRIPTION_FONT_SIZE, fontFamily: "system-ui, -apple-system, sans-serif", opacity: 0.7, children: element.properties.description.length > 20
-                    ? element.properties.description.slice(0, 17) + '...'
-                    : element.properties.description }))] }));
-}
-function EdgeComponent({ edge, colors }) {
-    const { points, label } = edge;
-    if (points.length < 2)
-        return _jsx(_Fragment, {});
-    const shortenedPoints = shortenEdgeEnd(points);
-    const arrowPoints = calculateArrowheadPoints(shortenedPoints[shortenedPoints.length - 1], points[points.length - 1]);
-    const midpoint = {
-        x: (points[0].x + points[points.length - 1].x) / 2,
-        y: (points[0].y + points[points.length - 1].y) / 2,
-    };
-    const edgeDx = points[points.length - 1].x - points[0].x;
-    const edgeDy = points[points.length - 1].y - points[0].y;
-    let angleDeg = Math.atan2(edgeDy, edgeDx) * (180 / Math.PI);
-    if (angleDeg > 90)
-        angleDeg -= 180;
-    if (angleDeg < -90)
-        angleDeg += 180;
-    if (Math.abs(angleDeg) > 60)
-        angleDeg = 0;
-    const labelX = midpoint.x;
-    const labelY = midpoint.y;
-    const labelTransform = `rotate(${angleDeg}, ${labelX}, ${labelY})`;
-    // Compute edge paths with label clipping
-    let edgePaths;
-    if (label) {
-        if (edge.isStepNumber && edge.displayLabel) {
-            // Step number with inline text: clip around the displayLabel text (above the circle).
-            // The circle itself is opaque and covers the line naturally.
-            const displayLines = splitEdgeLabel(edge.displayLabel);
-            const longestLine = displayLines.reduce((a, b) => (a.length > b.length ? a : b), '');
-            const avgCharWidth = EDGE_LABEL_FONT_SIZE * 0.55;
-            const halfW = (longestLine.length * avgCharWidth) / 2 + 3;
-            const ascent = EDGE_LABEL_FONT_SIZE * 0.8;
-            const descent = EDGE_LABEL_FONT_SIZE * 0.2;
-            const pad = 3;
-            // displayLabel renders at labelY - 16
-            const textBaseline = labelY - 16;
-            const clipTop = textBaseline - ascent - pad;
-            const clipBottom = textBaseline + descent + pad;
-            const clipCenterY = (clipTop + clipBottom) / 2;
-            const halfH = (clipBottom - clipTop) / 2;
-            edgePaths = buildClippedEdgePaths(shortenedPoints, { x: labelX, y: clipCenterY }, halfW, halfH, angleDeg);
-        }
-        else if (edge.isStepNumber || edge.isLegendRef) {
-            // Circle/square shapes are opaque — no line clipping needed
-            edgePaths = [shortenedPoints.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x} ${p.y}`).join(' ')];
-        }
-        else {
-            // Clip around text label
-            const lines = splitEdgeLabel(label);
-            const longestLine = lines.reduce((a, b) => (a.length > b.length ? a : b), '');
-            const avgCharWidth = EDGE_LABEL_FONT_SIZE * 0.55;
-            const halfW = (longestLine.length * avgCharWidth) / 2 + 3;
-            const lineHeight = 14;
-            const ascent = EDGE_LABEL_FONT_SIZE * 0.8;
-            const descent = EDGE_LABEL_FONT_SIZE * 0.2;
-            const pad = 3;
-            let clipTop;
-            let clipBottom;
-            if (lines.length === 1) {
-                const baseline = labelY + 4;
-                clipTop = baseline - ascent - pad;
-                clipBottom = baseline + descent + pad;
-            }
-            else {
-                const firstBaseline = labelY - ((lines.length - 1) * lineHeight) / 2;
-                const lastBaseline = firstBaseline + (lines.length - 1) * lineHeight;
-                clipTop = firstBaseline - ascent - pad;
-                clipBottom = lastBaseline + descent + pad;
-            }
-            const clipCenterY = (clipTop + clipBottom) / 2;
-            const halfH = (clipBottom - clipTop) / 2;
-            edgePaths = buildClippedEdgePaths(shortenedPoints, { x: labelX, y: clipCenterY }, halfW, halfH, angleDeg);
-        }
-    }
-    else {
-        edgePaths = [shortenedPoints.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x} ${p.y}`).join(' ')];
-    }
-    // Render label content
-    let labelContent = null;
-    if (label) {
-        if (edge.isStepNumber || edge.isLegendRef) {
-            labelContent = (_jsxs(_Fragment, { children: [edge.isStepNumber ? (_jsx("circle", { cx: labelX, cy: labelY, r: 10, fill: colors.edgeLabelBackground, stroke: colors.edgeStroke, strokeWidth: 1.5 })) : (_jsx("rect", { x: labelX - 10, y: labelY - 10, width: 20, height: 20, rx: 3, fill: colors.edgeLabelBackground, stroke: colors.edgeStroke, strokeWidth: 1.5 })), _jsx("text", { x: labelX, y: labelY + 4, textAnchor: "middle", fill: colors.edgeStroke, fontSize: 10, fontWeight: "600", fontFamily: "system-ui, -apple-system, sans-serif", children: label }), edge.isStepNumber && edge.displayLabel && (_jsx("text", { x: labelX, y: labelY - 16, textAnchor: "middle", fill: colors.edgeLabel, fontSize: EDGE_LABEL_FONT_SIZE, fontFamily: "system-ui, -apple-system, sans-serif", transform: labelTransform, children: edge.displayLabel }))] }));
-        }
-        else {
-            const lines = splitEdgeLabel(label);
-            const lineHeight = 14;
-            const startY = lines.length === 1
-                ? labelY + 4
-                : labelY - ((lines.length - 1) * lineHeight) / 2;
-            labelContent = (_jsx("text", { x: labelX, textAnchor: "middle", fill: colors.edgeLabel, fontSize: EDGE_LABEL_FONT_SIZE, fontFamily: "system-ui, -apple-system, sans-serif", transform: labelTransform, children: lines.map((line, i) => (_jsx("tspan", { x: labelX, y: startY + i * lineHeight, children: line }, i))) }));
-        }
-    }
-    return (_jsxs("g", { children: [edgePaths.map((d, i) => (_jsx("path", { d: d, fill: "none", stroke: colors.edgeStroke, strokeWidth: 1.5 }, i))), arrowPoints && _jsx("polygon", { points: arrowPoints, fill: colors.edgeStroke }), labelContent] }));
-}
-// =============================================================================
-// LEGEND RENDERER
-// =============================================================================
-function Legend({ entries, placement, colors }) {
-    const circleR = 9;
-    const baseY = placement.y + circleR + 4;
-    return (_jsx("g", { className: "legend-layer", children: entries.map((entry, i) => {
-            const rowY = baseY + i * LEGEND_ROW_HEIGHT;
-            const symbolCenterX = placement.x + circleR;
-            const symbolCenterY = rowY - 4;
-            const textY = rowY;
-            return (_jsxs("g", { children: [entry.isStep ? (_jsx("circle", { cx: symbolCenterX, cy: symbolCenterY, r: circleR, fill: colors.edgeLabelBackground, stroke: colors.edgeStroke, strokeWidth: 1.5 })) : (_jsx("rect", { x: symbolCenterX - circleR, y: symbolCenterY - circleR, width: circleR * 2, height: circleR * 2, rx: 3, fill: colors.edgeLabelBackground, stroke: colors.edgeStroke, strokeWidth: 1.5 })), _jsx("text", { x: symbolCenterX, y: textY, textAnchor: "middle", fill: colors.edgeStroke, fontSize: 10, fontWeight: "600", fontFamily: "system-ui, -apple-system, sans-serif", children: entry.index }), _jsx("text", { x: placement.x + circleR * 2 + 8, y: textY, fill: colors.edgeLabel, fontSize: 11, fontFamily: "system-ui, -apple-system, sans-serif", children: entry.label })] }, i));
-        }) }));
-}
-// =============================================================================
-// NODE RENDERER DISPATCHER
-// =============================================================================
-function renderNode(node, colors, allNodes, parentMap) {
-    const { element } = node;
-    switch (element.type) {
-        case 'system':
-            return _jsx(SystemBoundary, { node: node, colors: colors, allNodes: allNodes, parentMap: parentMap }, node.id);
-        case 'container':
-            return _jsx(Container, { node: node, colors: colors, allNodes: allNodes, parentMap: parentMap }, node.id);
-        case 'component':
-            return _jsx(Component, { node: node, colors: colors, allNodes: allNodes, parentMap: parentMap }, node.id);
-        case 'person':
-            return _jsx(Person, { node: node, colors: colors, allNodes: allNodes, parentMap: parentMap }, node.id);
-        default:
-            return _jsx(Container, { node: node, colors: colors, allNodes: allNodes, parentMap: parentMap }, node.id);
-    }
-}
-/**
- * C4 Diagram SVG Renderer.
- *
- * Pure component: takes layout + theme, returns SVG.
- * Used directly in the editor and via renderToStaticMarkup for publishing.
- */
-export function C4Renderer({ layout, isDarkMode }) {
-    const colors = getColors(isDarkMode);
-    const boundaryNodes = layout.nodes.filter((n) => n.element.type === 'system' &&
-        ((n.children?.length ?? 0) > 0 || n.element.properties.style === 'boundary'));
-    const regularNodes = layout.nodes.filter((n) => !(n.element.type === 'system' &&
-        ((n.children?.length ?? 0) > 0 || n.element.properties.style === 'boundary')));
-    const parentMap = buildParentMap(layout.nodes);
-    const { edges: processedEdges, legendEntries } = processEdgesForLegend(layout.edges);
-    let totalWidth = layout.width;
-    let totalHeight = layout.height;
-    let legendPlacement = null;
-    if (legendEntries.length > 0) {
-        const lp = computeLegendPlacement(legendEntries, layout);
-        legendPlacement = { x: lp.x, y: lp.y };
-        totalWidth = lp.totalWidth;
-        totalHeight = lp.totalHeight;
-    }
-    return (_jsxs("svg", { width: totalWidth, height: totalHeight, viewBox: `${layout.viewBoxX} ${layout.viewBoxY} ${totalWidth} ${totalHeight}`, xmlns: "http://www.w3.org/2000/svg", "data-diagram": "c4", style: { fontFamily: 'system-ui, -apple-system, sans-serif' }, children: [_jsx("g", { className: "boundaries-layer", children: boundaryNodes.map((node) => renderNode(node, colors, layout.nodes, parentMap)) }), _jsx("g", { className: "nodes-layer", children: regularNodes.map((node) => renderNode(node, colors, layout.nodes, parentMap)) }), _jsx("g", { className: "edges-layer", children: processedEdges.map((edge, i) => (_jsx(EdgeComponent, { edge: edge, colors: colors }, `${edge.source}-${edge.target}-${i}`))) }), legendPlacement && legendEntries.length > 0 && (_jsx(Legend, { entries: legendEntries, placement: legendPlacement, colors: colors }))] }));
-}
-export function C4RendererContent({ layout, isDarkMode, legendPositionOverride }) {
-    const colors = getColors(isDarkMode);
-    const boundaryNodes = layout.nodes.filter((n) => n.element.type === 'system' &&
-        ((n.children?.length ?? 0) > 0 || n.element.properties.style === 'boundary'));
-    const regularNodes = layout.nodes.filter((n) => !(n.element.type === 'system' &&
-        ((n.children?.length ?? 0) > 0 || n.element.properties.style === 'boundary')));
-    const parentMap = buildParentMap(layout.nodes);
-    const { edges: processedEdges, legendEntries } = processEdgesForLegend(layout.edges);
-    let legendPlacement = null;
-    if (legendEntries.length > 0) {
-        if (legendPositionOverride) {
-            legendPlacement = legendPositionOverride;
-        }
-        else {
-            const lp = computeLegendPlacement(legendEntries, layout);
-            legendPlacement = { x: lp.x, y: lp.y };
-        }
-    }
-    return (_jsxs(_Fragment, { children: [_jsx("g", { className: "boundaries-layer", children: boundaryNodes.map((node) => renderNode(node, colors, layout.nodes, parentMap)) }), _jsx("g", { className: "nodes-layer", children: regularNodes.map((node) => renderNode(node, colors, layout.nodes, parentMap)) }), _jsx("g", { className: "edges-layer", children: processedEdges.map((edge, i) => (_jsx(EdgeComponent, { edge: edge, colors: colors }, `${edge.source}-${edge.target}-${i}`))) }), legendPlacement && legendEntries.length > 0 && (_jsx(Legend, { entries: legendEntries, placement: legendPlacement, colors: colors }))] }));
-}
-export function C4ErrorDisplay({ errors, isDarkMode }) {
-    const errorColor = isDarkMode ? '#ff5e5b' : '#de0013'; // oklch(0.70 0.20 25) / oklch(0.55 0.25 25)
-    const bgColor = isDarkMode ? '#201616' : '#fbe9e7'; // oklch(0.20 0.02 25) / oklch(0.95 0.02 25)
-    const textColor = isDarkMode ? '#cacaca' : '#3d3d3d'; // oklch(0.85 0.00 0) / oklch(0.25 0.00 0)
-    return (_jsxs("div", { style: {
-            padding: '1rem',
-            backgroundColor: bgColor,
-            borderRadius: '8px',
-            border: `1px solid ${errorColor}`,
-            fontFamily: 'ui-monospace, monospace',
-            fontSize: '13px',
-        }, children: [_jsx("div", { style: { color: errorColor, fontWeight: 600, marginBottom: '0.5rem' }, children: "C4 Diagram Parse Error" }), errors.map((error, i) => (_jsxs("div", { style: { color: textColor, marginBottom: '0.25rem' }, children: ["Line ", error.line, ", Column ", error.column, ": ", error.message] }, i)))] }));
-}
-export default C4Renderer;