@walkeros/explorer 0.3.1 → 1.0.0

package/dist/components/molecules/flow-map/FlowMap.js

@@ -0,0 +1,1028 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useEffect, useRef } from 'react';
+import rough from 'roughjs';
+import { Icon } from '@iconify/react';
+/**
+ * RoughRect - Renders a hand-drawn rectangle using rough.js SVG mode
+ * Uses a rounded rectangle path for softer corners
+ */
+function RoughRect({ x, y, width, height, fill, stroke, }) {
+    const ref = useRef(null);
+    useEffect(() => {
+        if (!ref.current)
+            return;
+        const svg = ref.current.ownerSVGElement;
+        if (!svg)
+            return;
+        // Clear previous content
+        ref.current.replaceChildren();
+        const rs = rough.svg(svg);
+        const r = 8; // corner radius
+        // Create rounded rectangle path
+        const path = `M ${x + r} ${y}
+      L ${x + width - r} ${y}
+      Q ${x + width} ${y} ${x + width} ${y + r}
+      L ${x + width} ${y + height - r}
+      Q ${x + width} ${y + height} ${x + width - r} ${y + height}
+      L ${x + r} ${y + height}
+      Q ${x} ${y + height} ${x} ${y + height - r}
+      L ${x} ${y + r}
+      Q ${x} ${y} ${x + r} ${y}
+      Z`;
+        // Draw main rectangle
+        const rectNode = rs.path(path, {
+            fill,
+            fillStyle: 'solid',
+            stroke,
+            strokeWidth: 1.5,
+            roughness: 1.2,
+            bowing: 1,
+        });
+        ref.current.appendChild(rectNode);
+        return () => {
+            ref.current?.replaceChildren();
+        };
+    }, [x, y, width, height, fill, stroke]);
+    return _jsx("g", { ref: ref });
+}
+/**
+ * RoughCircle - Renders a hand-drawn circle using rough.js SVG mode
+ */
+function RoughCircle({ cx, cy, diameter, fill, stroke, }) {
+    const ref = useRef(null);
+    useEffect(() => {
+        if (!ref.current)
+            return;
+        const svg = ref.current.ownerSVGElement;
+        if (!svg)
+            return;
+        ref.current.replaceChildren();
+        const rs = rough.svg(svg);
+        const circleNode = rs.circle(cx, cy, diameter, {
+            fill,
+            fillStyle: 'solid',
+            stroke,
+            strokeWidth: 1.5,
+            roughness: 0.8,
+        });
+        ref.current.appendChild(circleNode);
+        return () => {
+            ref.current?.replaceChildren();
+        };
+    }, [cx, cy, diameter, fill, stroke]);
+    return _jsx("g", { ref: ref });
+}
+/**
+ * Marker - Red circle with number/text inside
+ */
+function Marker({ x, y, text }) {
+    return (_jsxs("g", { children: [_jsx(RoughCircle, { cx: x, cy: y, diameter: MARKER_SIZE, fill: "var(--flow-marker-fill, #dc2626)", stroke: "var(--flow-marker-stroke, #991b1b)" }), _jsx("text", { x: x, y: y, textAnchor: "middle", dominantBaseline: "central", fill: "var(--flow-marker-text, #ffffff)", fontSize: 10, fontWeight: 600, fontFamily: "system-ui, -apple-system, sans-serif", children: text })] }));
+}
+/**
+ * RoughArrow - Renders a hand-drawn curved arrow using rough.js SVG mode
+ * Uses quadratic bezier curves for an organic feel.
+ * Includes arrowhead that follows the curve's final angle.
+ */
+function RoughArrow({ fromX, fromY, toX, toY, stroke, arrowSize = 8, centerY, }) {
+    const ref = useRef(null);
+    useEffect(() => {
+        if (!ref.current)
+            return;
+        const svg = ref.current.ownerSVGElement;
+        if (!svg)
+            return;
+        // Clear previous content
+        ref.current.replaceChildren();
+        const rs = rough.svg(svg);
+        const strokeWidth = 1.5;
+        const color = stroke;
+        const dx = toX - fromX;
+        const dy = toY - fromY;
+        const length = Math.sqrt(dx * dx + dy * dy);
+        // Calculate control point for quadratic bezier curve
+        // For horizontal lines: slight upward curve
+        // For diagonal lines: curve that exits horizontally then bends to target
+        const midX = (fromX + toX) / 2;
+        const midY = (fromY + toY) / 2;
+        let controlX;
+        let controlY;
+        if (Math.abs(dy) < 2) {
+            // Nearly horizontal: subtle upward curve
+            controlX = midX;
+            controlY = midY - Math.min(length * 0.08, 12);
+        }
+        else if (centerY !== undefined) {
+            // Curve towards whichever endpoint is farther from center
+            // This creates natural spreading for fan-in and fan-out
+            const fromDistFromCenter = Math.abs(fromY - centerY);
+            const toDistFromCenter = Math.abs(toY - centerY);
+            controlX = fromX + dx * 0.5;
+            if (fromDistFromCenter >= toDistFromCenter) {
+                // Source is farther from center → curve towards source's side
+                controlY =
+                    fromY < centerY
+                        ? midY - Math.abs(dy) * 0.3 // Source above center → curve UP
+                        : midY + Math.abs(dy) * 0.3; // Source below center → curve DOWN
+            }
+            else {
+                // Target is farther from center → curve towards target's side
+                controlY =
+                    toY < centerY
+                        ? midY - Math.abs(dy) * 0.3 // Target above center → curve UP
+                        : midY + Math.abs(dy) * 0.3; // Target below center → curve DOWN
+            }
+        }
+        else {
+            // Fallback when centerY not provided: simple direction-based curve
+            controlX = fromX + dx * 0.5;
+            controlY =
+                dy > 0 ? fromY - Math.abs(dy) * 0.3 : fromY + Math.abs(dy) * 0.3;
+        }
+        // Calculate the angle at the end of the curve (tangent at t=1)
+        // For quadratic bezier: tangent = 2(1-t)(P1-P0) + 2t(P2-P1) at t=1 = 2(P2-P1)
+        const tangentX = toX - controlX;
+        const tangentY = toY - controlY;
+        const endAngle = Math.atan2(tangentY, tangentX);
+        // Calculate where the curve should stop (before the arrowhead)
+        const curveEndX = toX - Math.cos(endAngle) * arrowSize;
+        const curveEndY = toY - Math.sin(endAngle) * arrowSize;
+        // Draw curved line using SVG path with quadratic bezier
+        const curvePath = `M ${fromX} ${fromY} Q ${controlX} ${controlY} ${curveEndX} ${curveEndY}`;
+        const curveNode = rs.path(curvePath, {
+            stroke: color,
+            strokeWidth,
+            roughness: 0.8,
+            fill: 'none',
+        });
+        ref.current.appendChild(curveNode);
+        // Draw arrowhead (two lines at angles from curve's end tangent)
+        const arrowAngle = Math.PI / 6; // 30 degrees
+        const arrowLength = 8;
+        // Arrow head line 1 (upper)
+        const arrow1EndX = curveEndX - Math.cos(endAngle - arrowAngle) * arrowLength;
+        const arrow1EndY = curveEndY - Math.sin(endAngle - arrowAngle) * arrowLength;
+        const arrowHead1 = rs.line(curveEndX, curveEndY, arrow1EndX, arrow1EndY, {
+            stroke: color,
+            strokeWidth,
+            roughness: 0.5,
+        });
+        ref.current.appendChild(arrowHead1);
+        // Arrow head line 2 (lower)
+        const arrow2EndX = curveEndX - Math.cos(endAngle + arrowAngle) * arrowLength;
+        const arrow2EndY = curveEndY - Math.sin(endAngle + arrowAngle) * arrowLength;
+        const arrowHead2 = rs.line(curveEndX, curveEndY, arrow2EndX, arrow2EndY, {
+            stroke: color,
+            strokeWidth,
+            roughness: 0.5,
+        });
+        ref.current.appendChild(arrowHead2);
+        return () => {
+            ref.current?.replaceChildren();
+        };
+    }, [fromX, fromY, toX, toY, stroke, arrowSize, centerY]);
+    return _jsx("g", { ref: ref });
+}
+// Default layout configuration
+export const defaultLayout = {
+    labelSize: 13,
+    labelWeight: '600',
+    textSize: 12,
+    textWeight: 'normal',
+    boxHeight: 50,
+    descriptionSize: 13,
+};
+// Layout constants
+const STAGE_WIDTH = 120;
+const STAGE_HEIGHT = 50;
+const STAGE_GAP = 50; // Horizontal gap between stages
+const VERTICAL_GAP = 12; // Vertical gap between stacked sources/destinations
+const PADDING_X = 8;
+const PADDING_Y = 8;
+const EDGE_ARROW_LENGTH = 25; // Space for incoming/outgoing arrows
+const TITLE_HEIGHT = 30;
+const ARROW_SIZE = 8;
+const ARROW_OFFSET = 6; // Vertical offset for parallel return arrows
+/**
+ * Resolves a transformer chain by following `next` references.
+ * Returns an ordered array of transformers from the starting key to the end.
+ * Throws if a reference is invalid or circular.
+ */
+function resolveTransformerChain(transformers, startKey) {
+    if (!transformers || !startKey)
+        return [];
+    const result = [];
+    const visited = new Set();
+    let currentKey = startKey;
+    while (currentKey) {
+        if (visited.has(currentKey)) {
+            throw new Error(`FlowMap: Circular reference detected in transformer chain at "${currentKey}"`);
+        }
+        const config = transformers[currentKey];
+        if (!config) {
+            throw new Error(`FlowMap: Invalid transformer reference "${currentKey}". Available transformers: ${Object.keys(transformers).join(', ') || 'none'}`);
+        }
+        visited.add(currentKey);
+        result.push({ name: currentKey, config });
+        currentKey = config.next;
+    }
+    return result;
+}
+/**
+ * Collects all unique transformers that are reachable from sources (pre) or destinations (post).
+ * Returns them in chain order based on `next` references.
+ * Finds the chain head (transformer not referenced by any other's `next`) and walks from there.
+ */
+function collectReachableTransformers(transformers, entryPoints) {
+    if (!transformers)
+        return [];
+    // Find all unique transformer names referenced by walking each entry point's chain
+    const referencedNames = new Set();
+    for (const entry of entryPoints) {
+        if (!entry || !transformers[entry])
+            continue;
+        const chain = resolveTransformerChain(transformers, entry);
+        chain.forEach((p) => referencedNames.add(p.name));
+    }
+    if (referencedNames.size === 0)
+        return [];
+    // Find chain head: transformer in our set that's not anyone's `next`
+    const nextTargets = new Set();
+    for (const name of referencedNames) {
+        const next = transformers[name]?.next;
+        if (next && referencedNames.has(next)) {
+            nextTargets.add(next);
+        }
+    }
+    // Chain head = in referencedNames but not in nextTargets
+    let chainHead;
+    for (const name of referencedNames) {
+        if (!nextTargets.has(name)) {
+            chainHead = name;
+            break;
+        }
+    }
+    // Walk from chain head
+    if (!chainHead)
+        chainHead = [...referencedNames][0];
+    return resolveTransformerChain(transformers, chainHead);
+}
+/**
+ * Gets the index of a transformer in the transformer list.
+ * Returns transformerList.length if not found (= connects directly to collector).
+ */
+function getTransformerIndex(transformerName, transformerList) {
+    if (!transformerName)
+        return transformerList.length;
+    const idx = transformerList.findIndex((p) => p.name === transformerName);
+    return idx >= 0 ? idx : transformerList.length;
+}
+// Dynamic width calculation function
+function calculateTotalWidth(stageCount, hasStageBefore, hasStageAfter) {
+    const leftEdge = hasStageBefore ? 0 : EDGE_ARROW_LENGTH;
+    const rightEdge = hasStageAfter ? 0 : EDGE_ARROW_LENGTH;
+    return (leftEdge +
+        STAGE_WIDTH * stageCount +
+        STAGE_GAP * (stageCount - 1) +
+        rightEdge);
+}
+const MARKER_SIZE = 16;
+const MARKER_OFFSET = 4; // Offset from box edge
+function getMarkerPosition(position, stages, centerY, totalWidth) {
+    const sourcePos = stages.source;
+    const collectorPos = stages.collector;
+    const destPos = stages.destination;
+    const beforePos = stages.before;
+    const afterPos = stages.after;
+    // Helper to get box marker position (top corners)
+    const getBoxMarker = (pos, variant) => {
+        if (!pos)
+            return null;
+        if (variant === '-left') {
+            return { x: pos.x + MARKER_OFFSET, y: pos.y - MARKER_OFFSET };
+        }
+        // Default and -right: top-right corner
+        return {
+            x: pos.x + pos.width - MARKER_OFFSET,
+            y: pos.y - MARKER_OFFSET,
+        };
+    };
+    // Helper to get arrow marker position (between stages)
+    const getArrowMarker = (fromPos) => {
+        if (!fromPos)
+            return null;
+        const fromCenterY = fromPos.y + fromPos.height / 2;
+        return {
+            x: fromPos.x + fromPos.width + STAGE_GAP / 2 - 6,
+            y: fromCenterY + MARKER_SIZE / 2 + 4,
+        };
+    };
+    switch (position) {
+        // Stage-before (only right side, no left)
+        case 'stage-before':
+        case 'stage-before-right':
+            return getBoxMarker(beforePos);
+        // Source stage (above box, top corners) - first source
+        case 'source':
+        case 'source-right':
+            return getBoxMarker(sourcePos);
+        case 'source-left':
+            return getBoxMarker(sourcePos, '-left');
+        // Collector stage (above box, top corners)
+        case 'collector':
+        case 'collector-right':
+            return getBoxMarker(collectorPos);
+        case 'collector-left':
+            return getBoxMarker(collectorPos, '-left');
+        // Destination stage (above box, top corners) - first destination
+        case 'destination':
+        case 'destination-right':
+            return getBoxMarker(destPos);
+        case 'destination-left':
+            return getBoxMarker(destPos, '-left');
+        // Stage-after (only left side, no right)
+        case 'stage-after':
+        case 'stage-after-left':
+            return getBoxMarker(afterPos, '-left');
+        // Edge arrows (in/out)
+        case 'incoming':
+            return { x: EDGE_ARROW_LENGTH / 2, y: centerY + MARKER_SIZE / 2 + 8 };
+        case 'outgoing':
+            return {
+                x: totalWidth - EDGE_ARROW_LENGTH / 2,
+                y: centerY + MARKER_SIZE / 2 + 8,
+            };
+        // Arrow between before and source
+        case 'before-source':
+            return getArrowMarker(beforePos);
+        // Between-stage arrows (for simple flows without transformers)
+        case 'source-collector':
+            return getArrowMarker(sourcePos);
+        case 'collector-destination':
+            return getArrowMarker(collectorPos);
+        // Arrow between destination and after
+        case 'destination-after':
+            return getArrowMarker(destPos);
+        // Pre-transformer to collector arrow
+        case 'pre-collector':
+            // Find the last pre-transformer position
+            const preKeys = Object.keys(stages).filter((k) => k.startsWith('pre-'));
+            if (preKeys.length === 0)
+                return null;
+            const lastPrePos = stages[preKeys[preKeys.length - 1]];
+            return getArrowMarker(lastPrePos);
+        // Collector to post-transformer arrow
+        case 'collector-post':
+            return getArrowMarker(collectorPos);
+        default: {
+            // Handle named source markers: source-{name}, source-{name}-left, source-{name}-right
+            const sourceNameMatch = position.match(/^source-([^-]+)(-left|-right)?$/);
+            if (sourceNameMatch) {
+                const name = sourceNameMatch[1];
+                const variant = sourceNameMatch[2];
+                const pos = stages[`source-${name}`];
+                return getBoxMarker(pos, variant);
+            }
+            // Handle named destination markers: destination-{name}, destination-{name}-left, destination-{name}-right
+            const destNameMatch = position.match(/^destination-([^-]+)(-left|-right)?$/);
+            if (destNameMatch) {
+                const name = destNameMatch[1];
+                const variant = destNameMatch[2];
+                const pos = stages[`destination-${name}`];
+                return getBoxMarker(pos, variant);
+            }
+            // Handle pre-transformer markers: pre-{name}, pre-{name}-left, pre-{name}-right
+            const preMatch = position.match(/^pre-([^-]+)(-left|-right)?$/);
+            if (preMatch) {
+                const name = preMatch[1];
+                const variant = preMatch[2];
+                // Skip if this looks like a -next pattern
+                if (name === 'collector')
+                    return null;
+                const pos = stages[`pre-${name}`];
+                return getBoxMarker(pos, variant);
+            }
+            // Handle post-transformer markers: post-{name}, post-{name}-left, post-{name}-right
+            const postMatch = position.match(/^post-([^-]+)(-left|-right)?$/);
+            if (postMatch) {
+                const name = postMatch[1];
+                const variant = postMatch[2];
+                const pos = stages[`post-${name}`];
+                return getBoxMarker(pos, variant);
+            }
+            // Handle source to pre-transformer arrow: source-{name}-pre
+            const sourcePreMatch = position.match(/^source-([^-]+)-pre$/);
+            if (sourcePreMatch) {
+                const name = sourcePreMatch[1];
+                const pos = stages[`source-${name}`];
+                return getArrowMarker(pos);
+            }
+            // Handle source to collector arrow: source-{name}-collector
+            const sourceCollectorMatch = position.match(/^source-([^-]+)-collector$/);
+            if (sourceCollectorMatch) {
+                const name = sourceCollectorMatch[1];
+                const pos = stages[`source-${name}`];
+                return getArrowMarker(pos);
+            }
+            // Handle pre-transformer chain arrow: pre-{name}-next
+            const preNextMatch = position.match(/^pre-([^-]+)-next$/);
+            if (preNextMatch) {
+                const name = preNextMatch[1];
+                const pos = stages[`pre-${name}`];
+                return getArrowMarker(pos);
+            }
+            // Handle post-transformer chain arrow: post-{name}-next
+            const postNextMatch = position.match(/^post-([^-]+)-next$/);
+            if (postNextMatch) {
+                const name = postNextMatch[1];
+                const pos = stages[`post-${name}`];
+                return getArrowMarker(pos);
+            }
+            // Handle post to destination arrow: post-destination-{name}
+            const postDestMatch = position.match(/^post-destination-([^-]+)$/);
+            if (postDestMatch) {
+                const name = postDestMatch[1];
+                // Find the last post-transformer position before this destination
+                const postKeys = Object.keys(stages).filter((k) => k.startsWith('post-'));
+                if (postKeys.length === 0)
+                    return getArrowMarker(collectorPos);
+                const lastPostPos = stages[postKeys[postKeys.length - 1]];
+                return getArrowMarker(lastPostPos);
+            }
+            return null;
+        }
+    }
+}
+export function FlowMap({ stageBefore, sources, preTransformers, collector, postTransformers, destinations, stageAfter, title, layout = defaultLayout, boxHeight: boxHeightProp, descriptionHeight: descriptionHeightProp, markers, className, withReturn, }) {
+    // Convert Record-based sources/destinations to arrays with names
+    const sourceEntries = Object.entries(sources ?? { default: {} });
+    const destinationEntries = Object.entries(destinations ?? { default: {} });
+    // Collect pre-transformers reachable from sources
+    const sourceNextValues = sourceEntries.map(([, config]) => config.next);
+    const preTransformerList = collectReachableTransformers(preTransformers, sourceNextValues);
+    // Collect post-transformers reachable from destinations (via 'before')
+    const destBeforeValues = destinationEntries.map(([, config]) => config.before);
+    const postTransformerList = collectReachableTransformers(postTransformers, destBeforeValues);
+    // Sort sources by target transformer index to avoid edge crossings
+    // Sources connecting to earlier transformers go on top
+    const sortedSourceEntries = [...sourceEntries].sort(([, a], [, b]) => {
+        const aIdx = getTransformerIndex(a.next, preTransformerList);
+        const bIdx = getTransformerIndex(b.next, preTransformerList);
+        return aIdx - bIdx;
+    });
+    // Sort destinations by source transformer index - ASCENDING (earlier transformer = top)
+    // This mirrors source sorting behavior for symmetry
+    const sortedDestinationEntries = [...destinationEntries].sort(([, a], [, b]) => {
+        const aIdx = getTransformerIndex(a.before, postTransformerList);
+        const bIdx = getTransformerIndex(b.before, postTransformerList);
+        return aIdx - bIdx; // ASCENDING: earlier transformer at top (mirrors sources)
+    });
+    const containerRef = useRef(null);
+    // Check if any stage has a description or link
+    const hasDescription = stageBefore?.description ||
+        sourceEntries.some(([, s]) => s.description) ||
+        preTransformerList.some((p) => p.config.description) ||
+        collector?.description ||
+        postTransformerList.some((p) => p.config.description) ||
+        destinationEntries.some(([, d]) => d.description) ||
+        stageAfter?.description ||
+        destinationEntries.some(([, d]) => d.after?.description);
+    const hasLink = stageBefore?.link !== false ||
+        sourceEntries.some(([, s]) => s.link !== false) ||
+        preTransformerList.some((p) => p.config.link !== false) ||
+        collector?.link !== false ||
+        postTransformerList.some((p) => p.config.link !== false) ||
+        destinationEntries.some(([, d]) => d.link !== false) ||
+        stageAfter?.link !== false ||
+        destinationEntries.some(([, d]) => d.after?.link !== false);
+    // Check if markers need extra padding (top for stage markers, bottom for arrow markers)
+    const stageMarkerPositions = [
+        'stage-before',
+        'stage-before-right',
+        'source',
+        'source-left',
+        'source-right',
+        'collector',
+        'collector-left',
+        'collector-right',
+        'destination',
+        'destination-left',
+        'destination-right',
+        'stage-after',
+        'stage-after-left',
+    ];
+    // Helper to check if a position is a stage marker (including named stages and transformers)
+    const isStageMarker = (pos) => {
+        if (stageMarkerPositions.includes(pos))
+            return true;
+        // Check patterns: source-{name}, destination-{name}, pre-{name}, post-{name}
+        return /^(source|destination|pre|post)-[^-]+(-left|-right)?$/.test(pos);
+    };
+    const hasTopMarkers = markers?.some((m) => isStageMarker(m.position)) ?? false;
+    const markerTopPadding = hasTopMarkers ? MARKER_SIZE / 2 + MARKER_OFFSET : 0;
+    // Filter markers that have legend text
+    const legendItems = markers?.filter((m) => m.text) ?? [];
+    // Estimate total text length to determine how many lines we need
+    const totalTextLength = legendItems.reduce((sum, item) => sum + (item.text?.length ?? 0), 0);
+    // Rough estimate: ~5.5 chars per pixel at 11px font, available width ~450px = ~82 chars per line
+    const LEGEND_LINE_HEIGHT = 18;
+    const estimatedLines = Math.max(1, Math.ceil(totalTextLength / 70));
+    const legendHeight = legendItems.length > 0 ? LEGEND_LINE_HEIGHT * estimatedLines + 8 : 0;
+    // Use prop values if provided, otherwise use layout defaults
+    const boxHeight = boxHeightProp ?? layout.boxHeight;
+    const descriptionHeight = descriptionHeightProp ?? 30;
+    const belowBoxHeight = hasDescription || hasLink ? descriptionHeight + 10 : 0; // Space for description/link content
+    // Calculate max rows for multi-source/destination layout
+    const maxRows = Math.max(sourceEntries.length, destinationEntries.length, 1);
+    const stackedHeight = boxHeight * maxRows + VERTICAL_GAP * (maxRows - 1);
+    // Check if any destination has an after stage or if shared stageAfter exists
+    const hasAnyAfterStage = stageAfter || destinationEntries.some(([, d]) => d.after);
+    // Calculate stage count and total width dynamically
+    // Stages: stageBefore? + sources(1) + preTransformers + collector(1) + postTransformers + destinations(1) + afterStages?
+    const stageCount = (stageBefore ? 1 : 0) +
+        1 + // sources column
+        preTransformerList.length +
+        1 + // collector
+        postTransformerList.length +
+        1 + // destinations column
+        (hasAnyAfterStage ? 1 : 0);
+    const totalWidth = calculateTotalWidth(stageCount, !!stageBefore, !!hasAnyAfterStage);
+    const baseHeight = PADDING_Y * 2 +
+        stackedHeight +
+        belowBoxHeight +
+        markerTopPadding +
+        legendHeight;
+    const totalHeight = title ? baseHeight + TITLE_HEIGHT : baseHeight;
+    // Calculate positions (declarative, no useEffect)
+    const baseY = (title ? TITLE_HEIGHT : 0) + PADDING_Y + markerTopPadding;
+    // Calculate the vertical center of the stacked area (for collector positioning)
+    const stackedCenterY = baseY + stackedHeight / 2;
+    // Helper to calculate Y positions for stacked items centered around stackedCenterY
+    const getStackedY = (index, count) => {
+        const totalStackHeight = boxHeight * count + VERTICAL_GAP * (count - 1);
+        const startY = stackedCenterY - totalStackHeight / 2;
+        return startY + index * (boxHeight + VERTICAL_GAP);
+    };
+    // Build stage positions dynamically based on which stages are active
+    // Start at 0 if stageBefore exists (no left edge arrow), otherwise leave space for arrow
+    let currentX = stageBefore ? 0 : EDGE_ARROW_LENGTH;
+    const stages = {};
+    // Arrays to hold named source/destination positions
+    const sourcePositions = [];
+    const destinationPositions = [];
+    if (stageBefore) {
+        stages.before = {
+            x: currentX,
+            y: stackedCenterY - boxHeight / 2, // Center vertically
+            width: STAGE_WIDTH,
+            height: boxHeight,
+        };
+        currentX += STAGE_WIDTH + STAGE_GAP;
+    }
+    // Position ALL sources in the source column (stacked vertically)
+    const sourceX = currentX;
+    sortedSourceEntries.forEach(([name], index) => {
+        const pos = {
+            x: sourceX,
+            y: getStackedY(index, sortedSourceEntries.length),
+            width: STAGE_WIDTH,
+            height: boxHeight,
+        };
+        sourcePositions.push({ name, pos });
+        stages[`source-${name}`] = pos;
+    });
+    // Keep 'source' alias pointing to first source for backward compatibility
+    if (sourcePositions.length > 0) {
+        stages.source = sourcePositions[0].pos;
+    }
+    currentX += STAGE_WIDTH + STAGE_GAP;
+    // Pre-transformer positions
+    // Strategy: position at source Y if only ONE source connects, otherwise center
+    // This keeps transformers aligned with their sources when there's no branching
+    const preTransformerPositions = [];
+    // Build map: transformer name → list of sources that connect to it (directly or via chain)
+    const transformerIncomingSources = new Map();
+    sortedSourceEntries.forEach(([sourceName, config]) => {
+        const targetTransformer = config.next;
+        if (targetTransformer) {
+            const existing = transformerIncomingSources.get(targetTransformer) ?? [];
+            existing.push(sourceName);
+            transformerIncomingSources.set(targetTransformer, existing);
+        }
+    });
+    // Also track chain connections (transformer A → transformer B means B receives from A's sources too)
+    preTransformerList.forEach(({ name, config }) => {
+        if (config.next) {
+            // This transformer's output goes to config.next
+            // So config.next receives from all sources that this transformer receives from
+            const mySources = transformerIncomingSources.get(name) ?? [];
+            const nextSources = transformerIncomingSources.get(config.next) ?? [];
+            // Mark that the next transformer receives from chain (we'll use this for positioning)
+            transformerIncomingSources.set(config.next, [
+                ...new Set([...nextSources, `chain:${name}`]),
+            ]);
+        }
+    });
+    preTransformerList.forEach(({ name }) => {
+        const incomingSources = transformerIncomingSources.get(name) ?? [];
+        // Filter to only direct sources (not chain connections)
+        const directSources = incomingSources.filter((s) => !s.startsWith('chain:'));
+        const hasChainInput = incomingSources.some((s) => s.startsWith('chain:'));
+        let y;
+        if (directSources.length === 1 && !hasChainInput) {
+            // Only ONE direct source, no chain input → align with that source
+            const sourcePos = stages[`source-${directSources[0]}`];
+            y = sourcePos ? sourcePos.y : stackedCenterY - boxHeight / 2;
+        }
+        else {
+            // Multiple sources or has chain input → center
+            y = stackedCenterY - boxHeight / 2;
+        }
+        const pos = {
+            x: currentX,
+            y,
+            width: STAGE_WIDTH,
+            height: boxHeight,
+        };
+        preTransformerPositions.push({ name, pos });
+        stages[`pre-${name}`] = pos;
+        currentX += STAGE_WIDTH + STAGE_GAP;
+    });
+    // Collector position (single, centered)
+    stages.collector = {
+        x: currentX,
+        y: stackedCenterY - boxHeight / 2,
+        width: STAGE_WIDTH,
+        height: boxHeight,
+    };
+    currentX += STAGE_WIDTH + STAGE_GAP;
+    // Post-transformer positions
+    // Strategy: position at destination Y if only ONE destination connects, otherwise center
+    // This mirrors pre-transformer behavior for symmetry
+    const postTransformerPositions = [];
+    // Build map: transformer name → list of destinations that receive from it (directly or via chain)
+    const transformerOutgoingDests = new Map();
+    sortedDestinationEntries.forEach(([destName, config]) => {
+        const sourceTransformer = config.before;
+        if (sourceTransformer) {
+            const existing = transformerOutgoingDests.get(sourceTransformer) ?? [];
+            existing.push(destName);
+            transformerOutgoingDests.set(sourceTransformer, existing);
+        }
+    });
+    // Also track chain connections (transformer A → transformer B means A sends to all of B's destinations)
+    // Walk backwards through chain to propagate destination info
+    for (let i = postTransformerList.length - 1; i >= 0; i--) {
+        const { name, config } = postTransformerList[i];
+        if (config.next) {
+            // This transformer sends to config.next, so it indirectly sends to config.next's destinations
+            const nextDests = transformerOutgoingDests.get(config.next) ?? [];
+            const myDests = transformerOutgoingDests.get(name) ?? [];
+            // Mark chain connection
+            transformerOutgoingDests.set(name, [
+                ...new Set([...myDests, `chain:${config.next}`]),
+            ]);
+        }
+    }
+    // First position destinations (we need their positions for smart post-transformer positioning)
+    const destinationX = currentX + postTransformerList.length * (STAGE_WIDTH + STAGE_GAP);
+    sortedDestinationEntries.forEach(([name], index) => {
+        const pos = {
+            x: destinationX,
+            y: getStackedY(index, sortedDestinationEntries.length),
+            width: STAGE_WIDTH,
+            height: boxHeight,
+        };
+        destinationPositions.push({ name, pos });
+        stages[`destination-${name}`] = pos;
+    });
+    // Keep 'destination' alias pointing to first destination for backward compatibility
+    if (destinationPositions.length > 0) {
+        stages.destination = destinationPositions[0].pos;
+    }
+    // Now position post-transformers with smart Y-positioning (can now reference destination positions)
+    postTransformerList.forEach(({ name }) => {
+        const outgoingDests = transformerOutgoingDests.get(name) ?? [];
+        // Filter to only direct destinations (not chain connections)
+        const directDests = outgoingDests.filter((d) => !d.startsWith('chain:'));
+        const hasChainOutput = outgoingDests.some((d) => d.startsWith('chain:'));
+        let y;
+        if (directDests.length === 1 && !hasChainOutput) {
+            // Only ONE direct destination, no chain output → align with that destination
+            const destPos = stages[`destination-${directDests[0]}`];
+            y = destPos ? destPos.y : stackedCenterY - boxHeight / 2;
+        }
+        else {
+            // Multiple destinations or has chain output → center
+            y = stackedCenterY - boxHeight / 2;
+        }
+        const pos = {
+            x: currentX,
+            y,
+            width: STAGE_WIDTH,
+            height: boxHeight,
+        };
+        postTransformerPositions.push({ name, pos });
+        stages[`post-${name}`] = pos;
+        currentX += STAGE_WIDTH + STAGE_GAP;
+    });
+    // Position after stages (per-destination or shared)
+    // Each destination with `after` or falling back to shared `stageAfter` gets its own box
+    const afterPositions = [];
+    if (hasAnyAfterStage) {
+        const afterX = currentX + STAGE_WIDTH + STAGE_GAP;
+        sortedDestinationEntries.forEach(([destName, destConfig], index) => {
+            // Use destination's after config, or fall back to shared stageAfter
+            const afterConfig = destConfig.after ?? stageAfter;
+            if (afterConfig) {
+                const pos = {
+                    x: afterX,
+                    y: getStackedY(index, sortedDestinationEntries.length), // Same Y as destination
+                    width: STAGE_WIDTH,
+                    height: boxHeight,
+                };
+                afterPositions.push({ name: destName, pos, config: afterConfig });
+                stages[`after-${destName}`] = pos;
+            }
+        });
+        // Keep 'after' alias pointing to first after position for backward compatibility
+        if (afterPositions.length > 0) {
+            stages.after = afterPositions[0].pos;
+        }
+    }
+    // Calculate center Y for arrows (collector's center)
+    const centerY = stackedCenterY;
+    // Stage configurations with colors and default links
+    const stageConfigs = [
+        ...(stageBefore
+            ? [
+                {
+                    key: 'before',
+                    config: stageBefore,
+                    fillVar: '--flow-before-fill',
+                    strokeVar: '--flow-before-stroke',
+                    defaultLabel: 'Before',
+                    defaultLink: undefined,
+                },
+            ]
+            : []),
+        // Sources (named, sorted by target transformer)
+        ...sortedSourceEntries.map(([name, sourceConfig]) => ({
+            key: `source-${name}`,
+            config: sourceConfig,
+            fillVar: '--flow-source-fill',
+            strokeVar: '--flow-source-stroke',
+            defaultLabel: 'Source',
+            defaultLink: '/docs/sources',
+        })),
+        // Pre-transformers
+        ...preTransformerList.map(({ name, config }) => ({
+            key: `pre-${name}`,
+            config,
+            fillVar: '--flow-transformer-fill',
+            strokeVar: '--flow-transformer-stroke',
+            defaultLabel: name.charAt(0).toUpperCase() + name.slice(1),
+            defaultLink: '/docs/transformers',
+        })),
+        {
+            key: 'collector',
+            config: collector,
+            fillVar: '--flow-collector-fill',
+            strokeVar: '--flow-collector-stroke',
+            defaultLabel: 'Collector',
+            defaultLink: '/docs/collectors',
+        },
+        // Post-transformers
+        ...postTransformerList.map(({ name, config }) => ({
+            key: `post-${name}`,
+            config,
+            fillVar: '--flow-transformer-fill',
+            strokeVar: '--flow-transformer-stroke',
+            defaultLabel: name.charAt(0).toUpperCase() + name.slice(1),
+            defaultLink: '/docs/transformers',
+        })),
+        // Destinations (named, sorted by source transformer)
+        ...sortedDestinationEntries.map(([name, destConfig]) => ({
+            key: `destination-${name}`,
+            config: destConfig,
+            fillVar: '--flow-destination-fill',
+            strokeVar: '--flow-destination-stroke',
+            defaultLabel: 'Destination',
+            defaultLink: '/docs/destinations',
+        })),
+        // After stages (per-destination)
+        ...afterPositions.map(({ name: destName, config: afterConfig }) => ({
+            key: `after-${destName}`,
+            config: afterConfig,
+            fillVar: '--flow-after-fill',
+            strokeVar: '--flow-after-stroke',
+            defaultLabel: 'External',
+            defaultLink: undefined,
+        })),
+    ];
+    return (_jsx("div", { ref: containerRef, className: `elb-explorer elb-flow-map ${className || ''}`, style: {
+            width: '100%',
+            maxWidth: totalWidth,
+        }, children: _jsxs("svg", { viewBox: `0 0 ${totalWidth} ${totalHeight}`, style: {
+                width: '100%',
+                height: 'auto',
+                display: 'block',
+            }, children: [title && (_jsx("text", { x: totalWidth / 2, y: 18, textAnchor: "middle", dominantBaseline: "middle", fill: "var(--color-text, #f3f4f6)", fontSize: 14, fontWeight: 600, fontFamily: "system-ui, -apple-system, sans-serif", children: title })), (() => {
+                    const collectorPos = stages.collector;
+                    const collectorCenterY = collectorPos.y + boxHeight / 2;
+                    // Helper to spread connection points vertically on an edge
+                    const getSpreadY = (idx, count, baseY) => {
+                        if (count <= 1)
+                            return baseY;
+                        const spread = Math.min(boxHeight * 0.6, (count - 1) * 12);
+                        const step = spread / (count - 1);
+                        return baseY - spread / 2 + idx * step;
+                    };
+                    // Find target position for a source (either pre-transformer or collector)
+                    const getSourceTarget = (sourceName, sourceConfig) => {
+                        if (sourceConfig.next && preTransformers?.[sourceConfig.next]) {
+                            return stages[`pre-${sourceConfig.next}`];
+                        }
+                        // No pre-transformer, connect to first pre-transformer or collector
+                        if (preTransformerList.length > 0) {
+                            return stages[`pre-${preTransformerList[0].name}`];
+                        }
+                        return collectorPos;
+                    };
+                    // Find source position for a destination (either post-transformer or collector)
+                    const getDestinationSource = (destName, destConfig) => {
+                        if (destConfig.before && postTransformers?.[destConfig.before]) {
+                            return stages[`post-${destConfig.before}`];
+                        }
+                        // No post-transformer, connect from last post-transformer or collector
+                        if (postTransformerList.length > 0) {
+                            return stages[`post-${postTransformerList[postTransformerList.length - 1].name}`];
+                        }
+                        return collectorPos;
+                    };
+                    return (_jsxs(_Fragment, { children: [!stageBefore && sourceEntries.length === 1 && (_jsx(RoughArrow, { fromX: 0, fromY: centerY, toX: stages.source.x, toY: centerY, stroke: "var(--flow-edge-stroke, #9ca3af)", centerY: centerY })), stageBefore && (_jsx(RoughArrow, { fromX: stages.before.x + STAGE_WIDTH, fromY: centerY, toX: stages.source.x, toY: stages.source.y + boxHeight / 2, stroke: "var(--flow-edge-stroke, #9ca3af)", centerY: centerY })), (() => {
+                                // Build map: targetKey -> list of sources connecting to it
+                                const sourcesByTarget = new Map();
+                                sourcePositions.forEach(({ name, pos }, sortIndex) => {
+                                    const sourceConfig = sources?.[name] ?? {};
+                                    const targetKey = sourceConfig.next
+                                        ? `pre-${sourceConfig.next}`
+                                        : preTransformerList.length > 0
+                                            ? `pre-${preTransformerList[0].name}`
+                                            : 'collector';
+                                    const existing = sourcesByTarget.get(targetKey) ?? [];
+                                    existing.push({ name, pos, sortIndex });
+                                    sourcesByTarget.set(targetKey, existing);
+                                });
+                                return sourcePositions.map(({ name, pos: sourcePos }) => {
+                                    const sourceConfig = sources?.[name] ?? {};
+                                    const targetPos = getSourceTarget(name, sourceConfig);
+                                    const sourceCenterY = sourcePos.y + boxHeight / 2;
+                                    const targetCenterY = targetPos.y + boxHeight / 2;
+                                    // Find sources connecting to the same target
+                                    const targetKey = sourceConfig.next
+                                        ? `pre-${sourceConfig.next}`
+                                        : preTransformerList.length > 0
+                                            ? `pre-${preTransformerList[0].name}`
+                                            : 'collector';
+                                    const sourcesToSameTarget = sourcesByTarget.get(targetKey) ?? [];
+                                    const indexWithinTarget = sourcesToSameTarget.findIndex((s) => s.name === name);
+                                    // Only spread if multiple sources connect to same target
+                                    const spreadY = getSpreadY(indexWithinTarget, sourcesToSameTarget.length, targetCenterY);
+                                    const offset = withReturn ? ARROW_OFFSET : 0;
+                                    return (_jsxs(React.Fragment, { children: [_jsx(RoughArrow, { fromX: sourcePos.x + STAGE_WIDTH, fromY: sourceCenterY - offset, toX: targetPos.x, toY: spreadY - offset, stroke: "var(--flow-edge-stroke, #9ca3af)", centerY: centerY }), withReturn && (_jsx(RoughArrow, { fromX: targetPos.x, fromY: spreadY + offset, toX: sourcePos.x + STAGE_WIDTH, toY: sourceCenterY + offset, stroke: "var(--flow-edge-stroke, #9ca3af)", centerY: centerY }))] }, `source-${name}-arrows`));
+                                });
+                            })(), preTransformerPositions.map(({ name, pos }, index) => {
+                                const procConfig = preTransformers?.[name] ?? {};
+                                // Find next target: next transformer in chain, or collector
+                                let targetPos;
+                                if (procConfig.next && preTransformers?.[procConfig.next]) {
+                                    targetPos = stages[`pre-${procConfig.next}`];
+                                }
+                                else {
+                                    targetPos = collectorPos;
+                                }
+                                const fromY = pos.y + boxHeight / 2;
+                                const toY = targetPos.y + boxHeight / 2;
+                                const offset = withReturn ? ARROW_OFFSET : 0;
+                                return (_jsxs(React.Fragment, { children: [_jsx(RoughArrow, { fromX: pos.x + STAGE_WIDTH, fromY: fromY - offset, toX: targetPos.x, toY: toY - offset, stroke: "var(--flow-edge-stroke, #9ca3af)", centerY: centerY }), withReturn && (_jsx(RoughArrow, { fromX: targetPos.x, fromY: toY + offset, toX: pos.x + STAGE_WIDTH, toY: fromY + offset, stroke: "var(--flow-edge-stroke, #9ca3af)", centerY: centerY }))] }, `pre-${name}-chain`));
+                            }), destinationPositions.map(({ name, pos: destPos }) => {
+                                const destConfig = destinations?.[name] ?? {};
+                                const sourcePos = getDestinationSource(name, destConfig);
+                                const destCenterY = destPos.y + boxHeight / 2;
+                                const sourceCenterY = sourcePos.y + boxHeight / 2;
+                                // Draw straight horizontal arrow (post-transformers are already at destination Y)
+                                const offset = withReturn ? ARROW_OFFSET : 0;
+                                return (_jsxs(React.Fragment, { children: [_jsx(RoughArrow, { fromX: sourcePos.x + STAGE_WIDTH, fromY: sourceCenterY - offset, toX: destPos.x, toY: destCenterY - offset, stroke: "var(--flow-edge-stroke, #9ca3af)", centerY: centerY }), withReturn && (_jsx(RoughArrow, { fromX: destPos.x, fromY: destCenterY + offset, toX: sourcePos.x + STAGE_WIDTH, toY: sourceCenterY + offset, stroke: "var(--flow-edge-stroke, #9ca3af)", centerY: centerY }))] }, `destination-${name}-arrows`));
+                            }), postTransformerPositions
+                                .slice(0, -1)
+                                .map(({ name, pos }, index) => {
+                                const procConfig = postTransformers?.[name] ?? {};
+                                // Find next target: next transformer in chain
+                                const nextProc = postTransformerPositions[index + 1];
+                                if (!nextProc)
+                                    return null;
+                                const targetPos = nextProc.pos;
+                                const fromY = pos.y + boxHeight / 2;
+                                const toY = targetPos.y + boxHeight / 2;
+                                const offset = withReturn ? ARROW_OFFSET : 0;
+                                return (_jsxs(React.Fragment, { children: [_jsx(RoughArrow, { fromX: pos.x + STAGE_WIDTH, fromY: fromY - offset, toX: targetPos.x, toY: toY - offset, stroke: "var(--flow-edge-stroke, #9ca3af)", centerY: centerY }), withReturn && (_jsx(RoughArrow, { fromX: targetPos.x, fromY: toY + offset, toX: pos.x + STAGE_WIDTH, toY: fromY + offset, stroke: "var(--flow-edge-stroke, #9ca3af)", centerY: centerY }))] }, `post-${name}-chain`));
+                            }), postTransformerList.length > 0 &&
+                                (() => {
+                                    const firstPostPos = stages[`post-${postTransformerList[0].name}`];
+                                    const fromY = collectorCenterY;
+                                    const toY = firstPostPos.y + boxHeight / 2;
+                                    const offset = withReturn ? ARROW_OFFSET : 0;
+                                    return (_jsxs(_Fragment, { children: [_jsx(RoughArrow, { fromX: collectorPos.x + STAGE_WIDTH, fromY: fromY - offset, toX: firstPostPos.x, toY: toY - offset, stroke: "var(--flow-edge-stroke, #9ca3af)", centerY: centerY }), withReturn && (_jsx(RoughArrow, { fromX: firstPostPos.x, fromY: toY + offset, toX: collectorPos.x + STAGE_WIDTH, toY: fromY + offset, stroke: "var(--flow-edge-stroke, #9ca3af)", centerY: centerY }))] }));
+                                })(), afterPositions.map(({ name: destName, pos: afterPos }) => {
+                                const destPos = stages[`destination-${destName}`];
+                                if (!destPos)
+                                    return null;
+                                const destCenterY = destPos.y + boxHeight / 2;
+                                const afterCenterY = afterPos.y + boxHeight / 2;
+                                return (_jsx(RoughArrow, { fromX: destPos.x + STAGE_WIDTH, fromY: destCenterY, toX: afterPos.x, toY: afterCenterY, stroke: "var(--flow-edge-stroke, #9ca3af)", centerY: centerY }, `dest-${destName}-after`));
+                            }), !hasAnyAfterStage && destinationEntries.length === 1 && (_jsx(RoughArrow, { fromX: stages.destination.x + STAGE_WIDTH, fromY: centerY, toX: totalWidth, toY: centerY, stroke: "var(--flow-edge-stroke, #9ca3af)", centerY: centerY }))] }));
+                })(), stageConfigs.map(({ key, config, fillVar, strokeVar, defaultLabel, defaultLink }) => {
+                    const pos = stages[key];
+                    const icon = config?.icon;
+                    const label = config?.label || defaultLabel;
+                    const text = config?.text;
+                    const description = config?.description;
+                    const link = config?.link;
+                    const stageHighlight = config?.highlight !== false;
+                    // Calculate label Y position
+                    // When text exists: label at ~25% from top, text fills remaining space centered
+                    const labelY = text
+                        ? pos.y + pos.height * 0.28
+                        : pos.y + pos.height / 2;
+                    // Resolve link URL: undefined = default, false = none, string = custom
+                    const linkUrl = link === false
+                        ? null
+                        : typeof link === 'string'
+                            ? link
+                            : defaultLink;
+                    // Content to render (box, label, text, description)
+                    const stageContent = (_jsxs(_Fragment, { children: [_jsx(RoughRect, { x: pos.x, y: pos.y, width: pos.width, height: pos.height, fill: `var(${fillVar}, #6b7280)`, stroke: stageHighlight
+                                    ? `var(${strokeVar}, #6b7280)`
+                                    : 'var(--flow-edge-stroke, #9ca3af)' }), _jsx("foreignObject", { x: pos.x + 4, y: labelY - layout.labelSize / 2 - 2, width: pos.width - 8, height: layout.labelSize + 4, children: _jsxs("div", { style: {
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'center',
+                                        gap: '6px',
+                                        height: '100%',
+                                        fontSize: layout.labelSize,
+                                        fontWeight: layout.labelWeight,
+                                        fontFamily: 'system-ui, -apple-system, sans-serif',
+                                        color: 'var(--color-text)',
+                                    }, children: [icon && _jsx(Icon, { icon: icon, width: 14, height: 14 }), _jsx("span", { children: label })] }) }), text && (_jsx("foreignObject", { x: pos.x + 4, y: pos.y + pos.height * 0.34, width: pos.width - 8, height: pos.height * 0.62, children: _jsx("div", { style: {
+                                        fontSize: layout.textSize,
+                                        fontWeight: layout.textWeight,
+                                        color: 'var(--color-text)',
+                                        textAlign: 'center',
+                                        fontFamily: 'system-ui, -apple-system, sans-serif',
+                                        lineHeight: 1.3,
+                                        height: '100%',
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'center',
+                                    }, children: text }) })), description && (_jsx("foreignObject", { x: pos.x, y: pos.y + pos.height + 8, width: STAGE_WIDTH, height: descriptionHeight, children: _jsx("div", { style: {
+                                        fontSize: layout.descriptionSize,
+                                        color: 'var(--color-text-muted)',
+                                        textAlign: 'center',
+                                        fontFamily: 'system-ui, -apple-system, sans-serif',
+                                        lineHeight: 1.3,
+                                    }, children: description }) }))] }));
+                    // Wrap in link if URL is set
+                    return linkUrl ? (_jsx("a", { href: linkUrl, style: { cursor: 'pointer', textDecoration: 'none' }, children: stageContent }, key)) : (_jsx("g", { children: stageContent }, key));
+                }), markers?.map((marker, index) => {
+                    const pos = getMarkerPosition(marker.position, stages, centerY, totalWidth);
+                    // Skip markers for stages that don't exist
+                    if (!pos)
+                        return null;
+                    const id = marker.id ?? String(index + 1);
+                    return (_jsx(Marker, { x: pos.x, y: pos.y, text: id }, `marker-${index}`));
+                }), legendItems.length > 0 && (_jsx("foreignObject", { x: PADDING_X, y: baseY + stackedHeight + belowBoxHeight + 4, width: totalWidth - PADDING_X * 2, height: LEGEND_LINE_HEIGHT * estimatedLines, children: _jsx("div", { style: {
+                            fontSize: 11,
+                            fontFamily: 'system-ui, -apple-system, sans-serif',
+                            color: 'var(--color-text-muted)',
+                            lineHeight: 1.6,
+                        }, children: legendItems.map((item, index) => {
+                            const id = item.id ?? String((markers?.indexOf(item) ?? index) + 1);
+                            return (_jsxs("span", { children: [_jsx("span", { style: {
+                                            width: 12,
+                                            height: 12,
+                                            borderRadius: '50%',
+                                            background: 'var(--flow-marker-fill, #dc2626)',
+                                            display: 'inline-flex',
+                                            alignItems: 'center',
+                                            justifyContent: 'center',
+                                            fontSize: 8,
+                                            fontWeight: 600,
+                                            color: 'var(--flow-marker-text, #ffffff)',
+                                            verticalAlign: 'middle',
+                                            marginRight: 4,
+                                            position: 'relative',
+                                            top: -1,
+                                        }, children: id }), _jsx("span", { style: { marginRight: 10 }, children: item.text })] }, `legend-${index}`));
+                        }) }) }))] }) }));
+}
+//# sourceMappingURL=FlowMap.js.map