semiotic 3.0.0-beta.2 → 3.0.0-beta.4

package/ai/dist/src/components/server/renderToStaticSVG.js

@@ -1,594 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.renderToStaticSVG = renderToStaticSVG;
-exports.renderXYToStaticSVG = renderXYToStaticSVG;
-exports.renderOrdinalToStaticSVG = renderOrdinalToStaticSVG;
-exports.renderNetworkToStaticSVG = renderNetworkToStaticSVG;
-const React = __importStar(require("react"));
-const ReactDOMServer = __importStar(require("react-dom/server"));
-const d3_shape_1 = require("d3-shape");
-const PipelineStore_1 = require("../stream/PipelineStore");
-const layouts_1 = require("../stream/layouts");
-const OrdinalPipelineStore_1 = require("../stream/OrdinalPipelineStore");
-// ── Scene graph → SVG conversion ──────────────────────────────────────────
-function sceneNodeToSVG(node, i) {
-    switch (node.type) {
-        case "line": {
-            const n = node;
-            if (n.path.length === 0)
-                return null;
-            const d = "M" + n.path.map(([x, y]) => `${x},${y}`).join("L");
-            return (React.createElement("path", { key: `line-${i}`, d: d, fill: "none", stroke: n.style.stroke || "#4e79a7", strokeWidth: n.style.strokeWidth || 2, strokeDasharray: n.style.strokeDasharray, opacity: n.style.opacity }));
-        }
-        case "area": {
-            const n = node;
-            if (n.topPath.length === 0)
-                return null;
-            const top = n.topPath.map(([x, y]) => `${x},${y}`).join("L");
-            const bottom = [...n.bottomPath].reverse().map(([x, y]) => `${x},${y}`).join("L");
-            const d = `M${top}L${bottom}Z`;
-            return (React.createElement("path", { key: `area-${i}`, d: d, fill: n.style.fill || "#4e79a7", fillOpacity: n.style.fillOpacity ?? n.style.opacity ?? 0.7, stroke: n.style.stroke, strokeWidth: n.style.strokeWidth }));
-        }
-        case "point": {
-            const n = node;
-            return (React.createElement("circle", { key: `point-${i}`, cx: n.x, cy: n.y, r: n.r, fill: n.style.fill || "#4e79a7", opacity: n.style.opacity ?? 0.8, stroke: n.style.stroke, strokeWidth: n.style.strokeWidth }));
-        }
-        case "rect": {
-            const n = node;
-            return (React.createElement("rect", { key: `rect-${i}`, x: n.x, y: n.y, width: n.w, height: n.h, fill: n.style.fill || "#4e79a7", opacity: n.style.opacity, stroke: n.style.stroke, strokeWidth: n.style.strokeWidth }));
-        }
-        case "heatcell": {
-            const n = node;
-            return (React.createElement("rect", { key: `heatcell-${i}`, x: n.x, y: n.y, width: n.w, height: n.h, fill: n.fill }));
-        }
-        case "candlestick": {
-            const n = node;
-            const bodyTop = Math.min(n.openY, n.closeY);
-            const bodyHeight = Math.max(Math.abs(n.openY - n.closeY), 1);
-            const bodyColor = n.isUp ? n.upColor : n.downColor;
-            return (React.createElement("g", { key: `candle-${i}` },
-                React.createElement("line", { x1: n.x, y1: n.highY, x2: n.x, y2: n.lowY, stroke: n.wickColor, strokeWidth: n.wickWidth }),
-                React.createElement("rect", { x: n.x - n.bodyWidth / 2, y: bodyTop, width: n.bodyWidth, height: bodyHeight, fill: bodyColor, stroke: bodyColor, strokeWidth: 1 })));
-        }
-        default:
-            return null;
-    }
-}
-function defaultTickFormat(v) {
-    return String(Math.round(v * 100) / 100);
-}
-function generateAxesSVG(scales, layout, props) {
-    const xTicks = scales.x.ticks(5).map(v => ({
-        pixel: scales.x(v),
-        label: (props.xFormat || props.tickFormatTime || defaultTickFormat)(v)
-    }));
-    const yTicks = scales.y.ticks(5).map(v => ({
-        pixel: scales.y(v),
-        label: (props.yFormat || props.tickFormatValue || defaultTickFormat)(v)
-    }));
-    return (React.createElement("g", { className: "stream-axes" },
-        React.createElement("line", { x1: 0, y1: layout.height, x2: layout.width, y2: layout.height, stroke: "#ccc", strokeWidth: 1 }),
-        xTicks.map((tick, i) => (React.createElement("g", { key: `xtick-${i}`, transform: `translate(${tick.pixel},${layout.height})` },
-            React.createElement("line", { y2: 5, stroke: "#ccc", strokeWidth: 1 }),
-            React.createElement("text", { y: 18, textAnchor: "middle", fontSize: 10, fill: "#666" }, tick.label)))),
-        props.xLabel && (React.createElement("text", { x: layout.width / 2, y: layout.height + 40, textAnchor: "middle", fontSize: 12, fill: "#333" }, props.xLabel)),
-        React.createElement("line", { x1: 0, y1: 0, x2: 0, y2: layout.height, stroke: "#ccc", strokeWidth: 1 }),
-        yTicks.map((tick, i) => (React.createElement("g", { key: `ytick-${i}`, transform: `translate(0,${tick.pixel})` },
-            React.createElement("line", { x2: -5, stroke: "#ccc", strokeWidth: 1 }),
-            React.createElement("text", { x: -8, textAnchor: "end", dominantBaseline: "middle", fontSize: 10, fill: "#666" }, tick.label)))),
-        props.yLabel && (React.createElement("text", { x: -(props.margin?.left ?? 40) + 15, y: layout.height / 2, textAnchor: "middle", fontSize: 12, fill: "#333", transform: `rotate(-90, ${-(props.margin?.left ?? 40) + 15}, ${layout.height / 2})` }, props.yLabel))));
-}
-// ── StreamXYFrame SSR ─────────────────────────────────────────────────────
-function renderStreamXYFrame(props) {
-    const defaultMargin = { top: 20, right: 20, bottom: 30, left: 40 };
-    const size = props.size || [500, 300];
-    const margin = { ...defaultMargin, ...props.margin };
-    const width = size[0] - margin.left - margin.right;
-    const height = size[1] - margin.top - margin.bottom;
-    const isStreaming = props.runtimeMode === "streaming" ||
-        ["bar", "swarm", "waterfall"].includes(props.chartType);
-    const pipelineConfig = {
-        chartType: props.chartType,
-        windowSize: props.windowSize ?? 200,
-        windowMode: props.windowMode ?? "sliding",
-        arrowOfTime: isStreaming ? (props.arrowOfTime ?? "right") : "right",
-        extentPadding: props.extentPadding ?? 0.1,
-        xAccessor: isStreaming ? undefined : props.xAccessor,
-        yAccessor: isStreaming ? undefined : props.yAccessor,
-        timeAccessor: isStreaming ? props.timeAccessor : undefined,
-        valueAccessor: props.valueAccessor,
-        colorAccessor: props.colorAccessor,
-        sizeAccessor: props.sizeAccessor,
-        groupAccessor: props.groupAccessor,
-        categoryAccessor: props.categoryAccessor,
-        lineDataAccessor: props.lineDataAccessor,
-        xExtent: props.xExtent,
-        yExtent: props.yExtent,
-        sizeRange: props.sizeRange,
-        binSize: props.binSize,
-        normalize: props.normalize,
-        boundsAccessor: props.boundsAccessor,
-        boundsStyle: props.boundsStyle,
-        openAccessor: props.openAccessor,
-        highAccessor: props.highAccessor,
-        lowAccessor: props.lowAccessor,
-        closeAccessor: props.closeAccessor,
-        candlestickStyle: props.candlestickStyle,
-        lineStyle: props.lineStyle,
-        pointStyle: props.pointStyle,
-        areaStyle: props.areaStyle,
-        colorScheme: props.colorScheme,
-        barColors: props.barColors
-    };
-    const store = new PipelineStore_1.PipelineStore(pipelineConfig);
-    // Ingest bounded data
-    if (props.data) {
-        store.ingest({ inserts: props.data, bounded: true });
-    }
-    // Compute scene graph
-    store.computeScene({ width, height });
-    if (!store.scales || store.scene.length === 0) {
-        // No data — return empty SVG
-        return ReactDOMServer.renderToStaticMarkup(React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "stream-xy-frame", width: size[0], height: size[1] }));
-    }
-    // Convert scene nodes to SVG
-    const dataMarks = store.scene
-        .map((node, i) => sceneNodeToSVG(node, i))
-        .filter(Boolean);
-    // Generate axes
-    const showAxes = props.showAxes !== false;
-    const axes = showAxes
-        ? generateAxesSVG(store.scales, { width, height }, props)
-        : null;
-    // Title
-    const title = props.title && typeof props.title === "string" ? (React.createElement("text", { x: size[0] / 2, y: 16, textAnchor: "middle", fontSize: 14, fontWeight: "bold", fill: "#333" }, props.title)) : null;
-    // Background
-    const bg = props.background ? (React.createElement("rect", { x: 0, y: 0, width: width, height: height, fill: props.background })) : null;
-    const svgElement = (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: `stream-xy-frame${props.className ? ` ${props.className}` : ""}`, width: size[0], height: size[1] },
-        React.createElement("g", { transform: `translate(${margin.left},${margin.top})` },
-            bg,
-            dataMarks,
-            axes),
-        title));
-    return ReactDOMServer.renderToStaticMarkup(svgElement);
-}
-// ── Network scene graph → SVG conversion ──────────────────────────────────
-function networkSceneNodeToSVG(node, i) {
-    switch (node.type) {
-        case "circle": {
-            const n = node;
-            return (React.createElement("circle", { key: `net-circle-${i}`, cx: n.cx, cy: n.cy, r: n.r, fill: n.style.fill || "#4e79a7", stroke: n.style.stroke, strokeWidth: n.style.strokeWidth, opacity: n.style.opacity }));
-        }
-        case "rect": {
-            const n = node;
-            return (React.createElement("rect", { key: `net-rect-${i}`, x: n.x, y: n.y, width: n.w, height: n.h, fill: n.style.fill || "#4e79a7", stroke: n.style.stroke, strokeWidth: n.style.strokeWidth, opacity: n.style.opacity }));
-        }
-        case "arc": {
-            const n = node;
-            const arcPath = (0, d3_shape_1.arc)()
-                .innerRadius(n.innerR)
-                .outerRadius(n.outerR)
-                .startAngle(n.startAngle)
-                .endAngle(n.endAngle)({}) || "";
-            return (React.createElement("path", { key: `net-arc-${i}`, d: arcPath, transform: `translate(${n.cx},${n.cy})`, fill: n.style.fill || "#4e79a7", stroke: n.style.stroke, strokeWidth: n.style.strokeWidth, opacity: n.style.opacity }));
-        }
-        default:
-            return null;
-    }
-}
-function networkSceneEdgeToSVG(edge, i) {
-    switch (edge.type) {
-        case "line": {
-            const e = edge;
-            return (React.createElement("line", { key: `net-edge-line-${i}`, x1: e.x1, y1: e.y1, x2: e.x2, y2: e.y2, stroke: e.style.stroke || "#999", strokeWidth: e.style.strokeWidth || 1, opacity: e.style.opacity }));
-        }
-        case "bezier": {
-            const e = edge;
-            return (React.createElement("path", { key: `net-edge-bezier-${i}`, d: e.pathD, fill: e.style.fill || "#999", fillOpacity: e.style.fillOpacity, stroke: e.style.stroke || "none", strokeWidth: e.style.strokeWidth, opacity: e.style.opacity }));
-        }
-        case "ribbon": {
-            const e = edge;
-            return (React.createElement("path", { key: `net-edge-ribbon-${i}`, d: e.pathD, fill: e.style.fill || "#999", fillOpacity: e.style.fillOpacity, stroke: e.style.stroke || "none", strokeWidth: e.style.strokeWidth, opacity: e.style.opacity }));
-        }
-        case "curved": {
-            const e = edge;
-            return (React.createElement("path", { key: `net-edge-curved-${i}`, d: e.pathD, fill: e.style.fill || "none", stroke: e.style.stroke || "#999", strokeWidth: e.style.strokeWidth || 1, opacity: e.style.opacity }));
-        }
-        default:
-            return null;
-    }
-}
-function networkLabelToSVG(label, i) {
-    return (React.createElement("text", { key: `net-label-${i}`, x: label.x, y: label.y, textAnchor: label.anchor || "middle", dominantBaseline: (label.baseline || "auto"), fontSize: label.fontSize || 11, fontWeight: label.fontWeight, fill: label.fill || "#333", stroke: label.stroke, strokeWidth: label.strokeWidth, paintOrder: label.paintOrder }, label.text));
-}
-// ── Helper functions for building RealtimeNodes/Edges from props ──────────
-function resolveAccessor(accessor, defaultKey) {
-    if (!accessor)
-        return (d) => d[defaultKey];
-    if (typeof accessor === "function")
-        return accessor;
-    return (d) => d[accessor];
-}
-function buildRealtimeNodes(propsNodes, config) {
-    const nodeIDFn = resolveAccessor(config.nodeIDAccessor, "id");
-    return propsNodes.map((d) => ({
-        id: String(nodeIDFn(d)),
-        x: 0,
-        y: 0,
-        x0: 0,
-        x1: 0,
-        y0: 0,
-        y1: 0,
-        width: 0,
-        height: 0,
-        value: 0,
-        data: d
-    }));
-}
-function buildRealtimeEdges(propsEdges, config) {
-    const sourceFn = resolveAccessor(config.sourceAccessor, "source");
-    const targetFn = resolveAccessor(config.targetAccessor, "target");
-    const valueFn = resolveAccessor(config.valueAccessor, "value");
-    return propsEdges.map((d) => ({
-        source: String(sourceFn(d)),
-        target: String(targetFn(d)),
-        value: Number(valueFn(d)) || 1,
-        y0: 0,
-        y1: 0,
-        sankeyWidth: 0,
-        data: d
-    }));
-}
-// ── Stream-first network renderer ─────────────────────────────────────────
-const HIERARCHICAL_TYPES = new Set([
-    "tree",
-    "cluster",
-    "treemap",
-    "circlepack",
-    "partition"
-]);
-function renderNetworkFrame(props) {
-    const chartType = props.chartType || "force";
-    const size = props.size || [500, 500];
-    const defaultMargin = { top: 20, right: 20, bottom: 20, left: 20 };
-    const margin = { ...defaultMargin, ...props.margin };
-    const innerWidth = size[0] - margin.left - margin.right;
-    const innerHeight = size[1] - margin.top - margin.bottom;
-    const plugin = (0, layouts_1.getLayoutPlugin)(chartType);
-    if (!plugin) {
-        throw new Error(`No layout plugin found for chart type: "${chartType}". ` +
-            `Supported types: force, sankey, chord, tree, cluster, treemap, circlepack, partition.`);
-    }
-    // Build pipeline config from props
-    const config = {
-        chartType,
-        nodeIDAccessor: props.nodeIDAccessor,
-        sourceAccessor: props.sourceAccessor,
-        targetAccessor: props.targetAccessor,
-        valueAccessor: props.valueAccessor,
-        childrenAccessor: props.childrenAccessor,
-        hierarchySum: props.hierarchySum,
-        orientation: props.orientation,
-        nodeAlign: props.nodeAlign,
-        nodePaddingRatio: props.nodePaddingRatio,
-        nodeWidth: props.nodeWidth,
-        iterations: props.iterations,
-        forceStrength: props.forceStrength,
-        padAngle: props.padAngle,
-        groupWidth: props.groupWidth,
-        sortGroups: props.sortGroups,
-        edgeSort: props.edgeSort,
-        treeOrientation: props.treeOrientation,
-        edgeType: props.edgeType,
-        padding: props.padding,
-        paddingTop: props.paddingTop,
-        nodeStyle: props.nodeStyle,
-        edgeStyle: props.edgeStyle,
-        nodeLabel: props.nodeLabel,
-        showLabels: props.showLabels,
-        colorBy: props.colorBy,
-        colorScheme: props.colorScheme,
-        edgeColorBy: props.edgeColorBy,
-        edgeOpacity: props.edgeOpacity,
-        colorByDepth: props.colorByDepth,
-        nodeSize: props.nodeSize,
-        nodeSizeRange: props.nodeSizeRange
-    };
-    let nodes;
-    let edges;
-    if (HIERARCHICAL_TYPES.has(chartType)) {
-        // Hierarchical layouts: single root object from props.data or props.edges
-        const hierarchyRoot = props.data || props.edges;
-        if (!hierarchyRoot || Array.isArray(hierarchyRoot)) {
-            // No valid hierarchy root — return empty SVG
-            return ReactDOMServer.renderToStaticMarkup(React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "stream-network-frame", width: size[0], height: size[1] }));
-        }
-        // The hierarchy plugin expects the root via config.__hierarchyRoot
-        ;
-        config.__hierarchyRoot = hierarchyRoot;
-        // computeLayout will populate these arrays from the hierarchy
-        nodes = [];
-        edges = [];
-    }
-    else {
-        // Graph layouts (force, sankey, chord): nodes + edges arrays
-        const propsNodes = props.nodes || [];
-        const propsEdges = Array.isArray(props.edges) ? props.edges : [];
-        if (propsNodes.length === 0 && propsEdges.length === 0) {
-            return ReactDOMServer.renderToStaticMarkup(React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "stream-network-frame", width: size[0], height: size[1] }));
-        }
-        nodes = buildRealtimeNodes(propsNodes, config);
-        edges = buildRealtimeEdges(propsEdges, config);
-    }
-    // Run layout
-    plugin.computeLayout(nodes, edges, config, [innerWidth, innerHeight]);
-    // Build scene graph
-    const { sceneNodes, sceneEdges, labels } = plugin.buildScene(nodes, edges, config, [innerWidth, innerHeight]);
-    // Convert scene graph to SVG elements
-    const edgeElements = sceneEdges
-        .map((edge, i) => networkSceneEdgeToSVG(edge, i))
-        .filter(Boolean);
-    const nodeElements = sceneNodes
-        .map((node, i) => networkSceneNodeToSVG(node, i))
-        .filter(Boolean);
-    const labelElements = labels
-        .map((label, i) => networkLabelToSVG(label, i))
-        .filter(Boolean);
-    // Title
-    const title = props.title && typeof props.title === "string" ? (React.createElement("text", { x: size[0] / 2, y: 16, textAnchor: "middle", fontSize: 14, fontWeight: "bold", fill: "#333" }, props.title)) : null;
-    // Background
-    const bg = props.background ? (React.createElement("rect", { x: 0, y: 0, width: innerWidth, height: innerHeight, fill: props.background })) : null;
-    const svgElement = (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: `stream-network-frame${props.className ? ` ${props.className}` : ""}`, width: size[0], height: size[1] },
-        React.createElement("g", { transform: `translate(${margin.left},${margin.top})` },
-            bg,
-            edgeElements,
-            nodeElements,
-            labelElements),
-        title));
-    return ReactDOMServer.renderToStaticMarkup(svgElement);
-}
-// ── Ordinal scene graph → SVG conversion ─────────────────────────────
-function ordinalSceneNodeToSVG(node, i) {
-    switch (node.type) {
-        case "rect": {
-            const n = node;
-            return (React.createElement("rect", { key: `ord-rect-${i}`, x: n.x, y: n.y, width: n.w, height: n.h, fill: n.style.fill || "#4e79a7", opacity: n.style.opacity, stroke: n.style.stroke, strokeWidth: n.style.strokeWidth }));
-        }
-        case "point": {
-            const n = node;
-            return (React.createElement("circle", { key: `ord-point-${i}`, cx: n.x, cy: n.y, r: n.r, fill: n.style.fill || "#4e79a7", opacity: n.style.opacity ?? 0.8, stroke: n.style.stroke, strokeWidth: n.style.strokeWidth }));
-        }
-        case "wedge": {
-            const n = node;
-            const arcPath = (0, d3_shape_1.arc)()
-                .innerRadius(n.innerRadius)
-                .outerRadius(n.outerRadius)
-                .startAngle(n.startAngle)
-                .endAngle(n.endAngle)({}) || "";
-            return (React.createElement("path", { key: `ord-wedge-${i}`, d: arcPath, transform: `translate(${n.cx},${n.cy})`, fill: n.style.fill || "#4e79a7", stroke: n.style.stroke, strokeWidth: n.style.strokeWidth, opacity: n.style.opacity }));
-        }
-        case "boxplot": {
-            const n = node;
-            const halfW = n.columnWidth / 2;
-            if (n.projection === "vertical") {
-                return (React.createElement("g", { key: `ord-boxplot-${i}` },
-                    React.createElement("line", { x1: n.x, y1: n.minPos, x2: n.x, y2: n.maxPos, stroke: n.style.stroke || "#333", strokeWidth: 1 }),
-                    React.createElement("rect", { x: n.x - halfW, y: Math.min(n.q1Pos, n.q3Pos), width: n.columnWidth, height: Math.abs(n.q3Pos - n.q1Pos), fill: n.style.fill || "#4e79a7", fillOpacity: n.style.fillOpacity ?? 0.6, stroke: n.style.stroke || "#333", strokeWidth: 1 }),
-                    React.createElement("line", { x1: n.x - halfW, y1: n.medianPos, x2: n.x + halfW, y2: n.medianPos, stroke: n.style.stroke || "#333", strokeWidth: 2 }),
-                    React.createElement("line", { x1: n.x - halfW * 0.5, y1: n.minPos, x2: n.x + halfW * 0.5, y2: n.minPos, stroke: n.style.stroke || "#333", strokeWidth: 1 }),
-                    React.createElement("line", { x1: n.x - halfW * 0.5, y1: n.maxPos, x2: n.x + halfW * 0.5, y2: n.maxPos, stroke: n.style.stroke || "#333", strokeWidth: 1 })));
-            }
-            else {
-                // horizontal
-                return (React.createElement("g", { key: `ord-boxplot-${i}` },
-                    React.createElement("line", { x1: n.minPos, y1: n.y, x2: n.maxPos, y2: n.y, stroke: n.style.stroke || "#333", strokeWidth: 1 }),
-                    React.createElement("rect", { x: Math.min(n.q1Pos, n.q3Pos), y: n.y - halfW, width: Math.abs(n.q3Pos - n.q1Pos), height: n.columnWidth, fill: n.style.fill || "#4e79a7", fillOpacity: n.style.fillOpacity ?? 0.6, stroke: n.style.stroke || "#333", strokeWidth: 1 }),
-                    React.createElement("line", { x1: n.medianPos, y1: n.y - halfW, x2: n.medianPos, y2: n.y + halfW, stroke: n.style.stroke || "#333", strokeWidth: 2 }),
-                    React.createElement("line", { x1: n.minPos, y1: n.y - halfW * 0.5, x2: n.minPos, y2: n.y + halfW * 0.5, stroke: n.style.stroke || "#333", strokeWidth: 1 }),
-                    React.createElement("line", { x1: n.maxPos, y1: n.y - halfW * 0.5, x2: n.maxPos, y2: n.y + halfW * 0.5, stroke: n.style.stroke || "#333", strokeWidth: 1 })));
-            }
-        }
-        case "violin": {
-            const n = node;
-            const elements = [
-                React.createElement("path", { key: `ord-violin-path-${i}`, d: n.pathString, transform: n.translateX || n.translateY ? `translate(${n.translateX},${n.translateY})` : undefined, fill: n.style.fill || "#4e79a7", fillOpacity: n.style.fillOpacity ?? 0.6, stroke: n.style.stroke || "#333", strokeWidth: n.style.strokeWidth || 1 })
-            ];
-            if (n.iqrLine && n.bounds) {
-                const b = n.bounds;
-                const midX = b.x + b.width / 2;
-                const midY = b.y + b.height / 2;
-                const isVerticalViolin = b.height > b.width;
-                if (isVerticalViolin) {
-                    elements.push(React.createElement("line", { key: `ord-violin-iqr-${i}`, x1: midX, y1: n.iqrLine.q1Pos, x2: midX, y2: n.iqrLine.q3Pos, stroke: n.style.stroke || "#333", strokeWidth: 2 }), React.createElement("circle", { key: `ord-violin-med-${i}`, cx: midX, cy: n.iqrLine.medianPos, r: 3, fill: "white", stroke: n.style.stroke || "#333", strokeWidth: 1 }));
-                }
-                else {
-                    elements.push(React.createElement("line", { key: `ord-violin-iqr-${i}`, x1: n.iqrLine.q1Pos, y1: midY, x2: n.iqrLine.q3Pos, y2: midY, stroke: n.style.stroke || "#333", strokeWidth: 2 }), React.createElement("circle", { key: `ord-violin-med-${i}`, cx: n.iqrLine.medianPos, cy: midY, r: 3, fill: "white", stroke: n.style.stroke || "#333", strokeWidth: 1 }));
-                }
-            }
-            return React.createElement("g", { key: `ord-violin-${i}` }, elements);
-        }
-        case "connector": {
-            const n = node;
-            return (React.createElement("line", { key: `ord-conn-${i}`, x1: n.x1, y1: n.y1, x2: n.x2, y2: n.y2, stroke: n.style.stroke || "#999", strokeWidth: n.style.strokeWidth || 1, opacity: n.style.opacity ?? 0.5 }));
-        }
-        default:
-            return null;
-    }
-}
-function generateOrdinalAxesSVG(store, layout, props) {
-    const scales = store.scales;
-    if (!scales)
-        return null;
-    // Skip axes for radial projection (pie/donut)
-    if (scales.projection === "radial")
-        return null;
-    const isVertical = scales.projection === "vertical";
-    const columns = store.columns;
-    const categoryTicks = Object.values(columns).map(col => ({
-        pixel: col.middle,
-        label: (props.oFormat || String)(col.name)
-    }));
-    const rTicks = scales.r.ticks(5).map(v => ({
-        pixel: scales.r(v),
-        label: (props.rFormat || defaultTickFormat)(v)
-    }));
-    if (isVertical) {
-        // Vertical: categories on x-axis, values on y-axis
-        return (React.createElement("g", { className: "ordinal-axes" },
-            React.createElement("line", { x1: 0, y1: layout.height, x2: layout.width, y2: layout.height, stroke: "#ccc", strokeWidth: 1 }),
-            categoryTicks.map((tick, i) => (React.createElement("g", { key: `oxtick-${i}`, transform: `translate(${tick.pixel},${layout.height})` },
-                React.createElement("line", { y2: 5, stroke: "#ccc", strokeWidth: 1 }),
-                React.createElement("text", { y: 18, textAnchor: "middle", fontSize: 10, fill: "#666" }, tick.label)))),
-            props.oLabel && (React.createElement("text", { x: layout.width / 2, y: layout.height + 40, textAnchor: "middle", fontSize: 12, fill: "#333" }, props.oLabel)),
-            React.createElement("line", { x1: 0, y1: 0, x2: 0, y2: layout.height, stroke: "#ccc", strokeWidth: 1 }),
-            rTicks.map((tick, i) => (React.createElement("g", { key: `oytick-${i}`, transform: `translate(0,${tick.pixel})` },
-                React.createElement("line", { x2: -5, stroke: "#ccc", strokeWidth: 1 }),
-                React.createElement("text", { x: -8, textAnchor: "end", dominantBaseline: "middle", fontSize: 10, fill: "#666" }, tick.label)))),
-            props.rLabel && (React.createElement("text", { x: -(props.margin?.left ?? 40) + 15, y: layout.height / 2, textAnchor: "middle", fontSize: 12, fill: "#333", transform: `rotate(-90, ${-(props.margin?.left ?? 40) + 15}, ${layout.height / 2})` }, props.rLabel))));
-    }
-    else {
-        // Horizontal: categories on y-axis, values on x-axis
-        return (React.createElement("g", { className: "ordinal-axes" },
-            React.createElement("line", { x1: 0, y1: layout.height, x2: layout.width, y2: layout.height, stroke: "#ccc", strokeWidth: 1 }),
-            rTicks.map((tick, i) => (React.createElement("g", { key: `oxtick-${i}`, transform: `translate(${tick.pixel},${layout.height})` },
-                React.createElement("line", { y2: 5, stroke: "#ccc", strokeWidth: 1 }),
-                React.createElement("text", { y: 18, textAnchor: "middle", fontSize: 10, fill: "#666" }, tick.label)))),
-            props.rLabel && (React.createElement("text", { x: layout.width / 2, y: layout.height + 40, textAnchor: "middle", fontSize: 12, fill: "#333" }, props.rLabel)),
-            React.createElement("line", { x1: 0, y1: 0, x2: 0, y2: layout.height, stroke: "#ccc", strokeWidth: 1 }),
-            categoryTicks.map((tick, i) => (React.createElement("g", { key: `oytick-${i}`, transform: `translate(0,${tick.pixel})` },
-                React.createElement("line", { x2: -5, stroke: "#ccc", strokeWidth: 1 }),
-                React.createElement("text", { x: -8, textAnchor: "end", dominantBaseline: "middle", fontSize: 10, fill: "#666" }, tick.label)))),
-            props.oLabel && (React.createElement("text", { x: -(props.margin?.left ?? 40) + 15, y: layout.height / 2, textAnchor: "middle", fontSize: 12, fill: "#333", transform: `rotate(-90, ${-(props.margin?.left ?? 40) + 15}, ${layout.height / 2})` }, props.oLabel))));
-    }
-}
-// ── StreamOrdinalFrame SSR ───────────────────────────────────────────
-function renderOrdinalFrame(props) {
-    const defaultMargin = { top: 20, right: 20, bottom: 30, left: 40 };
-    const size = props.size || [500, 400];
-    const margin = { ...defaultMargin, ...props.margin };
-    const width = size[0] - margin.left - margin.right;
-    const height = size[1] - margin.top - margin.bottom;
-    const projection = props.projection || "vertical";
-    const isRadial = projection === "radial";
-    const pipelineConfig = {
-        chartType: props.chartType,
-        windowSize: props.windowSize ?? 10000,
-        windowMode: props.windowMode ?? "sliding",
-        extentPadding: props.extentPadding ?? 0.05,
-        projection,
-        oAccessor: props.oAccessor,
-        rAccessor: props.rAccessor,
-        colorAccessor: props.colorAccessor,
-        stackBy: props.stackBy,
-        groupBy: props.groupBy,
-        categoryAccessor: props.categoryAccessor,
-        valueAccessor: props.valueAccessor,
-        timeAccessor: props.timeAccessor,
-        rExtent: props.rExtent,
-        oExtent: props.oExtent,
-        barPadding: props.barPadding,
-        innerRadius: props.innerRadius,
-        normalize: props.normalize,
-        startAngle: props.startAngle,
-        bins: props.bins,
-        showOutliers: props.showOutliers,
-        showIQR: props.showIQR,
-        amplitude: props.amplitude,
-        oSort: props.oSort,
-        connectorAccessor: props.connectorAccessor,
-        connectorStyle: props.connectorStyle,
-        dynamicColumnWidth: props.dynamicColumnWidth,
-        pieceStyle: props.pieceStyle,
-        summaryStyle: props.summaryStyle,
-        colorScheme: props.colorScheme,
-        barColors: props.barColors
-    };
-    const store = new OrdinalPipelineStore_1.OrdinalPipelineStore(pipelineConfig);
-    // Ingest bounded data
-    if (props.data) {
-        store.ingest({ inserts: props.data, bounded: true });
-    }
-    // Compute scene graph
-    store.computeScene({ width, height });
-    if (!store.scales || store.scene.length === 0) {
-        return ReactDOMServer.renderToStaticMarkup(React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "stream-ordinal-frame", width: size[0], height: size[1] }));
-    }
-    // Convert scene nodes to SVG
-    const dataMarks = store.scene
-        .map((node, i) => ordinalSceneNodeToSVG(node, i))
-        .filter(Boolean);
-    // Generate axes
-    const showAxes = props.showAxes !== false;
-    const axes = showAxes
-        ? generateOrdinalAxesSVG(store, { width, height }, props)
-        : null;
-    // Title
-    const title = props.title && typeof props.title === "string" ? (React.createElement("text", { x: size[0] / 2, y: 16, textAnchor: "middle", fontSize: 14, fontWeight: "bold", fill: "#333" }, props.title)) : null;
-    // Background
-    const bg = props.background ? (React.createElement("rect", { x: 0, y: 0, width: width, height: height, fill: props.background })) : null;
-    // For radial projection, translate to center
-    const translateX = isRadial ? margin.left + width / 2 : margin.left;
-    const translateY = isRadial ? margin.top + height / 2 : margin.top;
-    const svgElement = (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: `stream-ordinal-frame${props.className ? ` ${props.className}` : ""}`, width: size[0], height: size[1] },
-        React.createElement("g", { transform: `translate(${translateX},${translateY})` },
-            bg,
-            dataMarks,
-            axes),
-        title));
-    return ReactDOMServer.renderToStaticMarkup(svgElement);
-}
-// ── Public API ────────────────────────────────────────────────────────────
-function renderToStaticSVG(frameType, props) {
-    switch (frameType) {
-        case "xy":
-            return renderStreamXYFrame(props);
-        case "ordinal":
-            return renderOrdinalFrame(props);
-        case "network":
-            return renderNetworkFrame(props);
-        default:
-            throw new Error(`Unknown frame type: ${frameType}. Must be "xy", "ordinal", or "network".`);
-    }
-}
-function renderXYToStaticSVG(props) {
-    return renderStreamXYFrame(props);
-}
-function renderOrdinalToStaticSVG(props) {
-    return renderOrdinalFrame(props);
-}
-function renderNetworkToStaticSVG(props) {
-    return renderNetworkFrame(props);
-}