semiotic 2.0.3 → 3.0.0-beta.2

package/ai/dist/src/components/stream/ordinalSceneBuilders/statisticalScene.js

@@ -0,0 +1,278 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildBoxplotScene = buildBoxplotScene;
+exports.buildViolinScene = buildViolinScene;
+exports.buildHistogramScene = buildHistogramScene;
+exports.buildRidgelineScene = buildRidgelineScene;
+const d3_array_1 = require("d3-array");
+const SceneGraph_1 = require("../SceneGraph");
+function buildBoxplotScene(ctx, layout) {
+    const { scales, columns, config, getR, resolveSummaryStyle } = ctx;
+    const { r: rScale, projection } = scales;
+    const nodes = [];
+    const isVertical = projection === "vertical";
+    const showOutliers = config.showOutliers !== false;
+    for (const col of Object.values(columns)) {
+        const values = col.pieceData
+            .map(d => getR(d))
+            .filter(v => v != null && !isNaN(v))
+            .sort((a, b) => a - b);
+        if (values.length === 0)
+            continue;
+        const min = values[0];
+        const max = values[values.length - 1];
+        const q1 = (0, d3_array_1.quantile)(values, 0.25) ?? min;
+        const median = (0, d3_array_1.quantile)(values, 0.5) ?? (min + max) / 2;
+        const q3 = (0, d3_array_1.quantile)(values, 0.75) ?? max;
+        // IQR-based whiskers
+        const iqr = q3 - q1;
+        const lowerFence = q1 - 1.5 * iqr;
+        const upperFence = q3 + 1.5 * iqr;
+        const whiskerMin = values.find(v => v >= lowerFence) ?? min;
+        const whiskerMax = [...values].reverse().find(v => v <= upperFence) ?? max;
+        const style = resolveSummaryStyle(col.pieceData[0], col.name);
+        const outliers = [];
+        if (showOutliers) {
+            for (const d of col.pieceData) {
+                const v = getR(d);
+                if (v < lowerFence || v > upperFence) {
+                    const px = isVertical ? col.middle : rScale(v);
+                    const py = isVertical ? rScale(v) : col.middle;
+                    outliers.push({ px, py, value: v, datum: d });
+                }
+            }
+        }
+        nodes.push({
+            type: "boxplot",
+            x: isVertical ? col.middle : 0,
+            y: isVertical ? 0 : col.middle,
+            projection: isVertical ? "vertical" : "horizontal",
+            columnWidth: col.width * 0.6,
+            minPos: rScale(whiskerMin),
+            q1Pos: rScale(q1),
+            medianPos: rScale(median),
+            q3Pos: rScale(q3),
+            maxPos: rScale(whiskerMax),
+            stats: { min: whiskerMin, q1, median, q3, max: whiskerMax },
+            style,
+            datum: col.pieceData,
+            category: col.name,
+            outliers
+        });
+        // Add outlier points
+        if (showOutliers) {
+            for (const o of outliers) {
+                nodes.push({
+                    type: "point",
+                    x: o.px,
+                    y: o.py,
+                    r: 3,
+                    style: { fill: style.fill || "#999", opacity: 0.6 },
+                    datum: o.datum
+                });
+            }
+        }
+    }
+    return nodes;
+}
+function buildViolinScene(ctx, layout) {
+    const { scales, columns, config, getR, resolveSummaryStyle } = ctx;
+    const { r: rScale, projection } = scales;
+    const nodes = [];
+    const isVertical = projection === "vertical";
+    const bins = config.bins || 20;
+    const showIQR = config.showIQR !== false;
+    for (const col of Object.values(columns)) {
+        const values = col.pieceData
+            .map(d => getR(d))
+            .filter(v => v != null && !isNaN(v))
+            .sort((a, b) => a - b);
+        if (values.length < 2)
+            continue;
+        const vMin = values[0];
+        const vMax = values[values.length - 1];
+        const binWidth = (vMax - vMin) / bins || 1;
+        // Build histogram bins
+        const counts = new Array(bins).fill(0);
+        for (const v of values) {
+            const idx = Math.min(Math.floor((v - vMin) / binWidth), bins - 1);
+            counts[idx]++;
+        }
+        const maxCount = Math.max(...counts, 1);
+        // Build symmetric violin path
+        const halfWidth = col.width / 2 * 0.9;
+        let pathStr = "";
+        if (isVertical) {
+            // Right side (top to bottom)
+            for (let i = 0; i < bins; i++) {
+                const y = rScale(vMin + (i + 0.5) * binWidth);
+                const w = (counts[i] / maxCount) * halfWidth;
+                pathStr += i === 0 ? `M ${col.middle + w} ${y}` : ` L ${col.middle + w} ${y}`;
+            }
+            // Left side (bottom to top)
+            for (let i = bins - 1; i >= 0; i--) {
+                const y = rScale(vMin + (i + 0.5) * binWidth);
+                const w = (counts[i] / maxCount) * halfWidth;
+                pathStr += ` L ${col.middle - w} ${y}`;
+            }
+            pathStr += " Z";
+        }
+        else {
+            // Top side (left to right)
+            for (let i = 0; i < bins; i++) {
+                const x = rScale(vMin + (i + 0.5) * binWidth);
+                const w = (counts[i] / maxCount) * halfWidth;
+                pathStr += i === 0 ? `M ${x} ${col.middle - w}` : ` L ${x} ${col.middle - w}`;
+            }
+            // Bottom side (right to left)
+            for (let i = bins - 1; i >= 0; i--) {
+                const x = rScale(vMin + (i + 0.5) * binWidth);
+                const w = (counts[i] / maxCount) * halfWidth;
+                pathStr += ` L ${x} ${col.middle + w}`;
+            }
+            pathStr += " Z";
+        }
+        const style = resolveSummaryStyle(col.pieceData[0], col.name);
+        // IQR overlay
+        let iqrLine;
+        if (showIQR && values.length >= 4) {
+            const q1 = (0, d3_array_1.quantile)(values, 0.25) ?? vMin;
+            const median = (0, d3_array_1.quantile)(values, 0.5) ?? (vMin + vMax) / 2;
+            const q3 = (0, d3_array_1.quantile)(values, 0.75) ?? vMax;
+            iqrLine = {
+                q1Pos: rScale(q1),
+                medianPos: rScale(median),
+                q3Pos: rScale(q3)
+            };
+        }
+        const violinBounds = isVertical
+            ? { x: col.x, y: Math.min(rScale(vMax), rScale(vMin)), width: col.width, height: Math.abs(rScale(vMax) - rScale(vMin)) }
+            : { x: Math.min(rScale(vMin), rScale(vMax)), y: col.x, width: Math.abs(rScale(vMax) - rScale(vMin)), height: col.width };
+        nodes.push({
+            type: "violin",
+            pathString: pathStr,
+            translateX: 0,
+            translateY: 0,
+            bounds: violinBounds,
+            iqrLine,
+            style,
+            datum: col.pieceData,
+            category: col.name
+        });
+    }
+    return nodes;
+}
+function buildHistogramScene(ctx, layout) {
+    const { scales, columns, config, getR, resolveSummaryStyle } = ctx;
+    const { r: rScale } = scales;
+    const nodes = [];
+    const numBins = config.bins || 25;
+    const isRelative = config.normalize;
+    // Histograms always render horizontally: categories on y-axis, value bins on x-axis
+    for (const col of Object.values(columns)) {
+        const values = col.pieceData
+            .map(d => getR(d))
+            .filter(v => v != null && !isNaN(v));
+        if (values.length === 0)
+            continue;
+        const vMin = Math.min(...values);
+        const vMax = Math.max(...values);
+        const binWidth = (vMax - vMin) / numBins || 1;
+        const counts = new Array(numBins).fill(0);
+        for (const v of values) {
+            const idx = Math.min(Math.floor((v - vMin) / binWidth), numBins - 1);
+            counts[idx]++;
+        }
+        const total = values.length;
+        const maxCount = Math.max(...counts, 1);
+        const style = resolveSummaryStyle(col.pieceData[0], col.name);
+        for (let i = 0; i < numBins; i++) {
+            if (counts[i] === 0)
+                continue;
+            const normCount = isRelative ? counts[i] / total : counts[i] / maxCount;
+            // Bar height proportional to count, within the column band
+            const barH = normCount * col.width * 0.9;
+            // Bin position on the value (x) axis
+            const binStart = rScale(vMin + i * binWidth);
+            const binEnd = rScale(vMin + (i + 1) * binWidth);
+            const x = Math.min(binStart, binEnd);
+            const w = Math.abs(binEnd - binStart);
+            // Align bar to baseline (bottom of the column band)
+            const y = col.x + col.width - barH;
+            nodes.push((0, SceneGraph_1.buildRectNode)(x, y, w, barH, style, { bin: i, count: counts[i], range: [vMin + i * binWidth, vMin + (i + 1) * binWidth], category: col.name }, col.name));
+        }
+    }
+    return nodes;
+}
+function buildRidgelineScene(ctx, layout) {
+    const { scales, columns, config, getR, resolveSummaryStyle } = ctx;
+    const { r: rScale, projection } = scales;
+    const nodes = [];
+    const numBins = config.bins || 20;
+    const isHorizontal = projection === "horizontal";
+    // Amplitude controls how far the density extends (can overlap neighbors)
+    const amplitude = config.amplitude || 1.5;
+    for (const col of Object.values(columns)) {
+        const values = col.pieceData
+            .map(d => getR(d))
+            .filter(v => v != null && !isNaN(v))
+            .sort((a, b) => a - b);
+        if (values.length < 2)
+            continue;
+        const vMin = values[0];
+        const vMax = values[values.length - 1];
+        const binWidth = (vMax - vMin) / numBins || 1;
+        // Build histogram bins
+        const counts = new Array(numBins).fill(0);
+        for (const v of values) {
+            const idx = Math.min(Math.floor((v - vMin) / binWidth), numBins - 1);
+            counts[idx]++;
+        }
+        const maxCount = Math.max(...counts, 1);
+        const style = resolveSummaryStyle(col.pieceData[0], col.name);
+        const halfBand = col.width * amplitude;
+        // Build one-sided area path (density extends in one direction from baseline)
+        let pathStr = "";
+        if (isHorizontal) {
+            // Horizontal: categories on y, values on x
+            // Baseline is the bottom of the column band, density extends upward
+            const baseline = col.x + col.width;
+            // Start at baseline
+            pathStr = `M ${rScale(vMin)} ${baseline}`;
+            // Density curve going upward (negative y)
+            for (let i = 0; i < numBins; i++) {
+                const x = rScale(vMin + (i + 0.5) * binWidth);
+                const h = (counts[i] / maxCount) * halfBand;
+                pathStr += ` L ${x} ${baseline - h}`;
+            }
+            // Close back to baseline
+            pathStr += ` L ${rScale(vMax)} ${baseline} Z`;
+        }
+        else {
+            // Vertical: categories on x, values on y
+            // Baseline is the left of the column band, density extends rightward
+            const baseline = col.x;
+            pathStr = `M ${baseline} ${rScale(vMin)}`;
+            for (let i = 0; i < numBins; i++) {
+                const y = rScale(vMin + (i + 0.5) * binWidth);
+                const w = (counts[i] / maxCount) * halfBand;
+                pathStr += ` L ${baseline + w} ${y}`;
+            }
+            pathStr += ` L ${baseline} ${rScale(vMax)} Z`;
+        }
+        const ridgeBounds = isHorizontal
+            ? { x: Math.min(rScale(vMin), rScale(vMax)), y: col.x, width: Math.abs(rScale(vMax) - rScale(vMin)), height: col.width }
+            : { x: col.x, y: Math.min(rScale(vMax), rScale(vMin)), width: col.width, height: Math.abs(rScale(vMax) - rScale(vMin)) };
+        nodes.push({
+            type: "violin",
+            pathString: pathStr,
+            translateX: 0,
+            translateY: 0,
+            bounds: ridgeBounds,
+            style: { ...style, fillOpacity: style.fillOpacity ?? 0.5 },
+            datum: col.pieceData,
+            category: col.name
+        });
+    }
+    return nodes;
+}

package/ai/dist/src/components/stream/ordinalSceneBuilders/timelineScene.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildTimelineScene = buildTimelineScene;
+const SceneGraph_1 = require("../SceneGraph");
+function buildTimelineScene(ctx, layout) {
+    const { scales, columns, getRawRange, resolvePieceStyle } = ctx;
+    const { r: rScale, projection } = scales;
+    const nodes = [];
+    const isHorizontal = projection === "horizontal";
+    for (const col of Object.values(columns)) {
+        for (const d of col.pieceData) {
+            const range = getRawRange(d);
+            if (!range)
+                continue;
+            const [start, end] = range;
+            const style = resolvePieceStyle(d, col.name);
+            if (isHorizontal) {
+                const x0 = rScale(Math.min(start, end));
+                const x1 = rScale(Math.max(start, end));
+                nodes.push((0, SceneGraph_1.buildRectNode)(x0, col.x, x1 - x0, col.width, style, d, col.name));
+            }
+            else {
+                const y0 = rScale(Math.max(start, end));
+                const y1 = rScale(Math.min(start, end));
+                nodes.push((0, SceneGraph_1.buildRectNode)(col.x, y0, col.width, y1 - y0, style, d, col.name));
+            }
+        }
+    }
+    return nodes;
+}

package/ai/dist/src/components/stream/ordinalSceneBuilders/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/ai/dist/src/components/stream/ordinalTypes.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/ai/dist/src/components/stream/renderers/areaCanvasRenderer.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.areaCanvasRenderer = void 0;
+/**
+ * Canvas area renderer.
+ * Renders AreaSceneNode as filled regions between topPath and bottomPath.
+ * Supports both overlapping areas and stacked areas.
+ */
+const areaCanvasRenderer = (ctx, nodes, scales, layout) => {
+    const areaNodes = nodes.filter((n) => n.type === "area");
+    for (const node of areaNodes) {
+        if (node.topPath.length < 2)
+            continue;
+        ctx.beginPath();
+        // Draw top path forward
+        const [startX, startY] = node.topPath[0];
+        ctx.moveTo(startX, startY);
+        for (let i = 1; i < node.topPath.length; i++) {
+            ctx.lineTo(node.topPath[i][0], node.topPath[i][1]);
+        }
+        // Draw bottom path backward to close the area
+        for (let i = node.bottomPath.length - 1; i >= 0; i--) {
+            ctx.lineTo(node.bottomPath[i][0], node.bottomPath[i][1]);
+        }
+        ctx.closePath();
+        // Fill
+        const fillOpacity = node.style.fillOpacity ?? 0.7;
+        ctx.globalAlpha = fillOpacity;
+        ctx.fillStyle = node.style.fill || "#4e79a7";
+        ctx.fill();
+        // Stroke on top
+        if (node.style.stroke && node.style.stroke !== "none") {
+            ctx.globalAlpha = 1;
+            ctx.strokeStyle = node.style.stroke;
+            ctx.lineWidth = node.style.strokeWidth || 2;
+            ctx.setLineDash([]);
+            // Only stroke the top path (not the baseline)
+            ctx.beginPath();
+            ctx.moveTo(node.topPath[0][0], node.topPath[0][1]);
+            for (let i = 1; i < node.topPath.length; i++) {
+                ctx.lineTo(node.topPath[i][0], node.topPath[i][1]);
+            }
+            ctx.stroke();
+        }
+        ctx.globalAlpha = 1;
+    }
+};
+exports.areaCanvasRenderer = areaCanvasRenderer;

package/ai/dist/src/components/stream/renderers/barCanvasRenderer.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.barCanvasRenderer = void 0;
+/**
+ * Canvas bar renderer.
+ * Renders RectSceneNode as filled rectangles. Supports icon/isotype mode
+ * where an image is stamped repeatedly to fill the bar instead of a solid fill.
+ */
+const barCanvasRenderer = (ctx, nodes, scales, layout) => {
+    const rectNodes = nodes.filter((n) => n.type === "rect");
+    for (const node of rectNodes) {
+        if (node.style.opacity != null) {
+            ctx.globalAlpha = node.style.opacity;
+        }
+        if (node.style.icon) {
+            // Icon/isotype mode: stamp the image to fill the bar
+            drawIconBar(ctx, node);
+        }
+        else {
+            // Standard solid fill
+            ctx.fillStyle = node.style.fill || "#007bff";
+            ctx.fillRect(node.x, node.y, node.w, node.h);
+            if (node.style.stroke) {
+                ctx.strokeStyle = node.style.stroke;
+                ctx.lineWidth = node.style.strokeWidth || 1;
+                ctx.strokeRect(node.x, node.y, node.w, node.h);
+            }
+        }
+        // Pulse overlay
+        if (node._pulseIntensity && node._pulseIntensity > 0) {
+            ctx.globalAlpha = node._pulseIntensity * 0.3;
+            ctx.fillStyle = node._pulseColor || "rgba(255,255,255,0.6)";
+            ctx.fillRect(node.x, node.y, node.w, node.h);
+        }
+        ctx.globalAlpha = 1;
+    }
+};
+exports.barCanvasRenderer = barCanvasRenderer;
+function drawIconBar(ctx, node) {
+    const icon = node.style.icon;
+    const padding = node.style.iconPadding || 2;
+    // Determine icon size: fit within the bar width
+    const iconSize = Math.min(node.w, node.w) - padding;
+    if (iconSize <= 0)
+        return;
+    // Determine if bar is primarily vertical or horizontal
+    const isVerticalBar = node.h > node.w;
+    ctx.save();
+    ctx.beginPath();
+    ctx.rect(node.x, node.y, node.w, node.h);
+    ctx.clip();
+    if (isVerticalBar) {
+        // Stamp icons from bottom to top
+        const step = iconSize + padding;
+        const startY = node.y + node.h - iconSize;
+        const centerX = node.x + (node.w - iconSize) / 2;
+        for (let y = startY; y >= node.y - iconSize; y -= step) {
+            ctx.drawImage(icon, centerX, y, iconSize, iconSize);
+        }
+    }
+    else {
+        // Stamp icons from left to right
+        const step = iconSize + padding;
+        const centerY = node.y + (node.h - iconSize) / 2;
+        for (let x = node.x; x < node.x + node.w; x += step) {
+            ctx.drawImage(icon, x, centerY, iconSize, iconSize);
+        }
+    }
+    ctx.restore();
+}

package/ai/dist/src/components/stream/renderers/boxplotCanvasRenderer.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.boxplotCanvasRenderer = void 0;
+const boxplotCanvasRenderer = (ctx, nodes, _scales, _layout) => {
+    const boxNodes = nodes.filter((n) => n.type === "boxplot");
+    for (const node of boxNodes) {
+        const halfWidth = node.columnWidth / 2;
+        const isVert = node.projection === "vertical";
+        const fillColor = node.style.fill || "#007bff";
+        const strokeColor = node.style.stroke || "#333";
+        const lineWidth = node.style.strokeWidth || 1;
+        const opacity = node.style.fillOpacity ?? node.style.opacity ?? 0.6;
+        ctx.save();
+        // Whisker line (min to max)
+        ctx.strokeStyle = strokeColor;
+        ctx.lineWidth = lineWidth;
+        ctx.beginPath();
+        if (isVert) {
+            ctx.moveTo(node.x, node.minPos);
+            ctx.lineTo(node.x, node.maxPos);
+        }
+        else {
+            ctx.moveTo(node.minPos, node.y);
+            ctx.lineTo(node.maxPos, node.y);
+        }
+        ctx.stroke();
+        // Whisker caps
+        ctx.beginPath();
+        if (isVert) {
+            ctx.moveTo(node.x - halfWidth * 0.4, node.minPos);
+            ctx.lineTo(node.x + halfWidth * 0.4, node.minPos);
+            ctx.moveTo(node.x - halfWidth * 0.4, node.maxPos);
+            ctx.lineTo(node.x + halfWidth * 0.4, node.maxPos);
+        }
+        else {
+            ctx.moveTo(node.minPos, node.y - halfWidth * 0.4);
+            ctx.lineTo(node.minPos, node.y + halfWidth * 0.4);
+            ctx.moveTo(node.maxPos, node.y - halfWidth * 0.4);
+            ctx.lineTo(node.maxPos, node.y + halfWidth * 0.4);
+        }
+        ctx.stroke();
+        // IQR box (q1 to q3)
+        ctx.globalAlpha = opacity;
+        ctx.fillStyle = fillColor;
+        if (isVert) {
+            const boxTop = Math.min(node.q1Pos, node.q3Pos);
+            const boxH = Math.abs(node.q3Pos - node.q1Pos);
+            ctx.fillRect(node.x - halfWidth, boxTop, node.columnWidth, boxH);
+            ctx.globalAlpha = 1;
+            ctx.strokeRect(node.x - halfWidth, boxTop, node.columnWidth, boxH);
+        }
+        else {
+            const boxLeft = Math.min(node.q1Pos, node.q3Pos);
+            const boxW = Math.abs(node.q3Pos - node.q1Pos);
+            ctx.fillRect(boxLeft, node.y - halfWidth, boxW, node.columnWidth);
+            ctx.globalAlpha = 1;
+            ctx.strokeRect(boxLeft, node.y - halfWidth, boxW, node.columnWidth);
+        }
+        // Median line
+        ctx.strokeStyle = "#fff";
+        ctx.lineWidth = 2;
+        ctx.beginPath();
+        if (isVert) {
+            ctx.moveTo(node.x - halfWidth, node.medianPos);
+            ctx.lineTo(node.x + halfWidth, node.medianPos);
+        }
+        else {
+            ctx.moveTo(node.medianPos, node.y - halfWidth);
+            ctx.lineTo(node.medianPos, node.y + halfWidth);
+        }
+        ctx.stroke();
+        ctx.restore();
+    }
+};
+exports.boxplotCanvasRenderer = boxplotCanvasRenderer;

package/ai/dist/src/components/stream/renderers/candlestickCanvasRenderer.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.candlestickCanvasRenderer = void 0;
+const candlestickCanvasRenderer = (ctx, nodes, _scales, _layout) => {
+    for (const node of nodes) {
+        if (node.type !== "candlestick")
+            continue;
+        const n = node;
+        // Draw wick (high-low line)
+        ctx.beginPath();
+        ctx.moveTo(n.x, n.highY);
+        ctx.lineTo(n.x, n.lowY);
+        ctx.strokeStyle = n.wickColor;
+        ctx.lineWidth = n.wickWidth;
+        ctx.stroke();
+        // Draw body (open-close rect)
+        const bodyTop = Math.min(n.openY, n.closeY);
+        const bodyHeight = Math.abs(n.openY - n.closeY);
+        const bodyColor = n.isUp ? n.upColor : n.downColor;
+        ctx.fillStyle = bodyColor;
+        ctx.fillRect(n.x - n.bodyWidth / 2, bodyTop, n.bodyWidth, Math.max(bodyHeight, 1));
+        // Body border
+        ctx.strokeStyle = bodyColor;
+        ctx.lineWidth = 1;
+        ctx.strokeRect(n.x - n.bodyWidth / 2, bodyTop, n.bodyWidth, Math.max(bodyHeight, 1));
+    }
+};
+exports.candlestickCanvasRenderer = candlestickCanvasRenderer;

package/ai/dist/src/components/stream/renderers/connectorCanvasRenderer.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.connectorCanvasRenderer = void 0;
+const connectorCanvasRenderer = (ctx, nodes, _scales, _layout) => {
+    const connectorNodes = nodes.filter((n) => n.type === "connector");
+    if (connectorNodes.length === 0)
+        return;
+    // Group connectors by their group key so we can draw filled polygons
+    const groups = new Map();
+    for (const node of connectorNodes) {
+        const key = node.group || "_default";
+        if (!groups.has(key))
+            groups.set(key, []);
+        groups.get(key).push(node);
+    }
+    for (const [, segments] of groups) {
+        if (segments.length === 0)
+            continue;
+        const firstStyle = segments[0].style;
+        const hasFill = firstStyle.fill && firstStyle.fill !== "none";
+        // Draw filled polygon if fill is specified (e.g. radar plot)
+        if (hasFill) {
+            ctx.beginPath();
+            ctx.moveTo(segments[0].x1, segments[0].y1);
+            for (const seg of segments) {
+                ctx.lineTo(seg.x2, seg.y2);
+            }
+            ctx.closePath();
+            ctx.globalAlpha = firstStyle.fillOpacity ?? firstStyle.opacity ?? 0.3;
+            ctx.fillStyle = firstStyle.fill;
+            ctx.fill();
+            ctx.globalAlpha = 1;
+        }
+        // Draw stroke lines
+        for (const node of segments) {
+            ctx.beginPath();
+            ctx.moveTo(node.x1, node.y1);
+            ctx.lineTo(node.x2, node.y2);
+            ctx.strokeStyle = node.style.stroke || node.style.fill || "#999";
+            ctx.lineWidth = node.style.strokeWidth || 1;
+            ctx.globalAlpha = node.style.opacity ?? 0.5;
+            ctx.stroke();
+            ctx.globalAlpha = 1;
+        }
+    }
+};
+exports.connectorCanvasRenderer = connectorCanvasRenderer;

package/ai/dist/src/components/stream/renderers/heatmapCanvasRenderer.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.heatmapCanvasRenderer = void 0;
+/**
+ * Canvas heatmap renderer.
+ * Renders HeatcellSceneNode as filled rectangles with color encoding.
+ */
+const heatmapCanvasRenderer = (ctx, nodes, scales, layout) => {
+    const heatNodes = nodes.filter((n) => n.type === "heatcell");
+    for (const node of heatNodes) {
+        // Apply decay opacity if present (stored as style.opacity by applyDecay)
+        const nodeStyle = node.style;
+        if (nodeStyle?.opacity != null) {
+            ctx.globalAlpha = nodeStyle.opacity;
+        }
+        ctx.fillStyle = node.fill;
+        ctx.fillRect(node.x, node.y, node.w, node.h);
+        // Cell border
+        ctx.strokeStyle = "#fff";
+        ctx.lineWidth = 1;
+        ctx.strokeRect(node.x, node.y, node.w, node.h);
+        // Pulse overlay
+        if (node._pulseIntensity && node._pulseIntensity > 0) {
+            ctx.globalAlpha = node._pulseIntensity * 0.3;
+            ctx.fillStyle = node._pulseColor || "rgba(255,255,255,0.6)";
+            ctx.fillRect(node.x, node.y, node.w, node.h);
+        }
+        ctx.globalAlpha = 1;
+    }
+};
+exports.heatmapCanvasRenderer = heatmapCanvasRenderer;