semiotic 2.0.3 → 3.0.0-beta.1

package/ai/dist/src/components/realtime/RealtimeFrame.js

@@ -0,0 +1,710 @@
+"use client";
+"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 });
+const React = __importStar(require("react"));
+const react_1 = require("react");
+const d3_scale_1 = require("d3-scale");
+const RingBuffer_1 = require("./RingBuffer");
+const IncrementalExtent_1 = require("./IncrementalExtent");
+const lineRenderer_1 = require("./renderers/lineRenderer");
+const swarmRenderer_1 = require("./renderers/swarmRenderer");
+const candlestickRenderer_1 = require("./renderers/candlestickRenderer");
+const waterfallRenderer_1 = require("./renderers/waterfallRenderer");
+const barRenderer_1 = require("./renderers/barRenderer");
+const BinAccumulator_1 = require("./BinAccumulator");
+const RENDERERS = {
+    line: lineRenderer_1.lineRenderer,
+    swarm: swarmRenderer_1.swarmRenderer,
+    candlestick: candlestickRenderer_1.candlestickRenderer,
+    waterfall: waterfallRenderer_1.waterfallRenderer,
+    bar: barRenderer_1.barRenderer
+};
+const DEFAULT_MARGIN = { top: 20, right: 20, bottom: 30, left: 40 };
+const DEFAULT_LINE_STYLE = {};
+function resolveAccessor(accessor, fallback) {
+    if (typeof accessor === "function")
+        return (d) => +accessor(d);
+    const key = accessor || fallback;
+    return (d) => +d[key];
+}
+function getTimeAxis(arrowOfTime) {
+    return arrowOfTime === "up" || arrowOfTime === "down" ? "y" : "x";
+}
+function buildScales(arrowOfTime, timeExtent, valueExtent, width, height) {
+    const timeAxis = getTimeAxis(arrowOfTime);
+    let timeRange;
+    let valueRange;
+    if (timeAxis === "x") {
+        timeRange = arrowOfTime === "right" ? [0, width] : [width, 0];
+        valueRange = [height, 0];
+    }
+    else {
+        timeRange = arrowOfTime === "down" ? [0, height] : [height, 0];
+        valueRange = [0, width];
+    }
+    return {
+        time: (0, d3_scale_1.scaleLinear)().domain(timeExtent).range(timeRange),
+        value: (0, d3_scale_1.scaleLinear)().domain(valueExtent).range(valueRange)
+    };
+}
+function defaultTickFormat(v) {
+    return String(Math.round(v * 100) / 100);
+}
+const LIGHT_THEME = {
+    axisStroke: "#ccc",
+    tickText: "#666",
+    crosshair: "rgba(0, 0, 0, 0.25)",
+    hoverFill: "rgba(255, 255, 255, 0.3)",
+    hoverStroke: "rgba(0, 0, 0, 0.4)",
+    pointRing: "white"
+};
+/** Read CSS custom properties from an element to build theme-aware colors */
+function resolveThemeColors(el) {
+    if (!el)
+        return LIGHT_THEME;
+    const style = getComputedStyle(el);
+    const textSecondary = style.getPropertyValue("--text-secondary").trim();
+    const textPrimary = style.getPropertyValue("--text-primary").trim();
+    const surface3 = style.getPropertyValue("--surface-3").trim();
+    const surface0 = style.getPropertyValue("--surface-0").trim();
+    // If no CSS custom properties are found, fall back to light defaults
+    if (!textSecondary && !textPrimary)
+        return LIGHT_THEME;
+    return {
+        axisStroke: surface3 || LIGHT_THEME.axisStroke,
+        tickText: textSecondary || LIGHT_THEME.tickText,
+        crosshair: textSecondary ? `${textSecondary}66` : LIGHT_THEME.crosshair,
+        hoverFill: surface0 ? `${surface0}4D` : LIGHT_THEME.hoverFill,
+        hoverStroke: textSecondary ? `${textSecondary}99` : LIGHT_THEME.hoverStroke,
+        pointRing: surface0 || LIGHT_THEME.pointRing
+    };
+}
+function drawAxes(ctx, arrowOfTime, timeScale, valueScale, width, height, tickFormatTime, tickFormatValue, theme) {
+    const timeAxis = getTimeAxis(arrowOfTime);
+    const fmtValue = tickFormatValue || defaultTickFormat;
+    const colors = theme || LIGHT_THEME;
+    ctx.strokeStyle = colors.axisStroke;
+    ctx.lineWidth = 1;
+    ctx.fillStyle = colors.tickText;
+    ctx.font = "10px sans-serif";
+    ctx.textAlign = "center";
+    ctx.textBaseline = "top";
+    if (timeAxis === "x") {
+        ctx.beginPath();
+        ctx.moveTo(0, height);
+        ctx.lineTo(width, height);
+        ctx.stroke();
+        ctx.beginPath();
+        ctx.moveTo(0, 0);
+        ctx.lineTo(0, height);
+        ctx.stroke();
+        const timeTicks = timeScale.ticks(5);
+        ctx.textAlign = "center";
+        ctx.textBaseline = "top";
+        for (const tick of timeTicks) {
+            const x = timeScale(tick);
+            ctx.beginPath();
+            ctx.moveTo(x, height);
+            ctx.lineTo(x, height + 5);
+            ctx.stroke();
+            if (tickFormatTime) {
+                ctx.fillText(tickFormatTime(tick), x, height + 7);
+            }
+        }
+        ctx.textAlign = "right";
+        ctx.textBaseline = "middle";
+        const valueTicks = valueScale.ticks(5);
+        for (const tick of valueTicks) {
+            const y = valueScale(tick);
+            ctx.beginPath();
+            ctx.moveTo(-5, y);
+            ctx.lineTo(0, y);
+            ctx.stroke();
+            ctx.fillText(fmtValue(tick), -8, y);
+        }
+    }
+    else {
+        ctx.beginPath();
+        ctx.moveTo(0, 0);
+        ctx.lineTo(0, height);
+        ctx.stroke();
+        ctx.beginPath();
+        ctx.moveTo(0, timeAxis === "y" && arrowOfTime === "down" ? 0 : height);
+        ctx.lineTo(width, timeAxis === "y" && arrowOfTime === "down" ? 0 : height);
+        ctx.stroke();
+        ctx.textAlign = "center";
+        ctx.textBaseline = "top";
+        const valueTicks = valueScale.ticks(5);
+        for (const tick of valueTicks) {
+            const x = valueScale(tick);
+            ctx.beginPath();
+            ctx.moveTo(x, height);
+            ctx.lineTo(x, height + 5);
+            ctx.stroke();
+            ctx.fillText(fmtValue(tick), x, height + 7);
+        }
+        ctx.textAlign = "right";
+        ctx.textBaseline = "middle";
+        const timeTicks = timeScale.ticks(5);
+        for (const tick of timeTicks) {
+            const y = timeScale(tick);
+            ctx.beginPath();
+            ctx.moveTo(-5, y);
+            ctx.lineTo(0, y);
+            ctx.stroke();
+            if (tickFormatTime) {
+                ctx.fillText(tickFormatTime(tick), -8, y);
+            }
+        }
+    }
+}
+// Binary search: find the index of the nearest point by time value
+function findNearestIndex(buf, targetTime, getTime) {
+    if (buf.size === 0)
+        return -1;
+    let lo = 0;
+    let hi = buf.size - 1;
+    while (lo < hi) {
+        const mid = (lo + hi) >> 1;
+        const t = getTime(buf.get(mid));
+        if (t < targetTime)
+            lo = mid + 1;
+        else
+            hi = mid;
+    }
+    // lo is first point with time >= targetTime; check if lo-1 is closer
+    if (lo > 0) {
+        const tLo = getTime(buf.get(lo));
+        const tPrev = getTime(buf.get(lo - 1));
+        if (Math.abs(tPrev - targetTime) <= Math.abs(tLo - targetTime)) {
+            return lo - 1;
+        }
+    }
+    return lo;
+}
+function drawCrosshair(ctx, hover, width, height, config, pointColor, theme) {
+    const showCrosshair = config.crosshair !== false;
+    if (!showCrosshair)
+        return;
+    const colors = theme || LIGHT_THEME;
+    ctx.save();
+    const crossStyle = typeof config.crosshair === "object" ? config.crosshair : {};
+    ctx.strokeStyle = crossStyle.stroke || colors.crosshair;
+    ctx.lineWidth = crossStyle.strokeWidth || 1;
+    if (crossStyle.strokeDasharray) {
+        ctx.setLineDash(crossStyle.strokeDasharray.split(/[\s,]+/).map(Number));
+    }
+    else {
+        ctx.setLineDash([4, 4]);
+    }
+    // Vertical guide
+    ctx.beginPath();
+    ctx.moveTo(hover.x, 0);
+    ctx.lineTo(hover.x, height);
+    ctx.stroke();
+    // Horizontal guide
+    ctx.beginPath();
+    ctx.moveTo(0, hover.y);
+    ctx.lineTo(width, hover.y);
+    ctx.stroke();
+    ctx.restore();
+    // Point indicator
+    ctx.beginPath();
+    ctx.arc(hover.x, hover.y, 4, 0, Math.PI * 2);
+    ctx.fillStyle = pointColor;
+    ctx.fill();
+    ctx.strokeStyle = colors.pointRing;
+    ctx.lineWidth = 2;
+    ctx.stroke();
+}
+const defaultTooltipStyle = {
+    background: "rgba(0, 0, 0, 0.85)",
+    color: "white",
+    padding: "6px 10px",
+    borderRadius: 4,
+    fontSize: 12,
+    lineHeight: 1.5,
+    boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
+    pointerEvents: "none",
+    whiteSpace: "nowrap"
+};
+function DefaultTooltip({ hover, formatTime }) {
+    const fmtValue = (v) => Number.isInteger(v) ? String(v) : v.toFixed(2);
+    const fmtTime = formatTime || fmtValue;
+    const colorMap = hover.data.barColors;
+    const hoveredCat = hover.data.hoveredCategory;
+    const hoveredCatVal = hover.data.hoveredCategoryValue;
+    return (React.createElement("div", { className: "semiotic-tooltip", style: defaultTooltipStyle },
+        hoveredCat != null && hoveredCatVal != null ? (React.createElement(React.Fragment, null,
+            React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 5, fontWeight: 600, marginBottom: 2 } },
+                colorMap && colorMap[hoveredCat] && (React.createElement("span", { style: { width: 8, height: 8, borderRadius: "50%", background: colorMap[hoveredCat], flexShrink: 0 } })),
+                React.createElement("span", null, hoveredCat),
+                React.createElement("span", { style: { marginLeft: "auto" } }, fmtValue(hoveredCatVal))),
+            React.createElement("div", { style: { opacity: 0.6, fontSize: 11 } },
+                "total ",
+                fmtValue(hover.value)))) : (React.createElement("div", { style: { fontWeight: 600, marginBottom: 2 } }, fmtValue(hover.value))),
+        React.createElement("div", { style: { opacity: 0.7, fontSize: 11 } }, fmtTime(hover.time))));
+}
+const RealtimeFrame = (0, react_1.forwardRef)(function RealtimeFrame(props, ref) {
+    const { chartType = "line", arrowOfTime = "right", windowMode = "sliding", windowSize = 200, data, timeAccessor, valueAccessor, timeExtent: fixedTimeExtent, valueExtent: fixedValueExtent, extentPadding = 0.1, size = [500, 300], margin: marginProp, className, lineStyle = DEFAULT_LINE_STYLE, annotations, svgAnnotationRules, hoverAnnotation, tooltipContent, customHoverBehavior, showAxes = true, background, categoryAccessor, binSize, barColors, barStyle, waterfallStyle, swarmStyle, tickFormatTime, tickFormatValue } = props;
+    const margin = { ...DEFAULT_MARGIN, ...marginProp };
+    const adjustedWidth = size[0] - margin.left - margin.right;
+    const adjustedHeight = size[1] - margin.top - margin.bottom;
+    // Memoize accessors so they don't change every render.
+    // Without this, the data effect re-runs on every render
+    // (new function reference), which triggers cascading re-renders.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const getTime = (0, react_1.useMemo)(() => resolveAccessor(timeAccessor, "time"), [timeAccessor]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const getValue = (0, react_1.useMemo)(() => resolveAccessor(valueAccessor, "value"), [valueAccessor]);
+    const getCategory = (0, react_1.useMemo)(() => categoryAccessor
+        ? (typeof categoryAccessor === "function" ? categoryAccessor : (d) => d[categoryAccessor])
+        : undefined, [categoryAccessor]);
+    const bufferRef = (0, react_1.useRef)(new RingBuffer_1.RingBuffer(windowSize));
+    const timeExtentRef = (0, react_1.useRef)(new IncrementalExtent_1.IncrementalExtent());
+    const valueExtentRef = (0, react_1.useRef)(new IncrementalExtent_1.IncrementalExtent());
+    const canvasRef = (0, react_1.useRef)(null);
+    const rafRef = (0, react_1.useRef)(0);
+    const dirtyRef = (0, react_1.useRef)(false);
+    const scalesRef = (0, react_1.useRef)(null);
+    const [annotationFrame, setAnnotationFrame] = (0, react_1.useState)(0);
+    const growingCapRef = (0, react_1.useRef)(windowSize);
+    // Hover state: ref for canvas (sync), React state for tooltip (async)
+    const hoverRef = (0, react_1.useRef)(null);
+    const [hoverPoint, setHoverPoint] = (0, react_1.useState)(null);
+    // Store the render function in a ref so scheduleRender is stable
+    // and never goes stale. The ref is updated every React render
+    // (below the hooks) so it always captures fresh props/closures.
+    const renderFnRef = (0, react_1.useRef)(() => { });
+    // Stable scheduleRender — never recreated, so no stale closure chain
+    const scheduleRender = (0, react_1.useCallback)(() => {
+        if (rafRef.current)
+            return;
+        rafRef.current = requestAnimationFrame(() => renderFnRef.current());
+    }, []);
+    const pushPoint = (0, react_1.useCallback)((point) => {
+        const buf = bufferRef.current;
+        const t = getTime(point);
+        const v = getValue(point);
+        if (windowMode === "growing" && buf.full) {
+            growingCapRef.current *= 2;
+            buf.resize(growingCapRef.current);
+        }
+        const evicted = buf.push(point);
+        timeExtentRef.current.push(t);
+        valueExtentRef.current.push(v);
+        if (evicted != null) {
+            timeExtentRef.current.evict(getTime(evicted));
+            valueExtentRef.current.evict(getValue(evicted));
+        }
+        dirtyRef.current = true;
+        scheduleRender();
+    }, [windowMode, getTime, getValue, scheduleRender]);
+    const pushManyPoints = (0, react_1.useCallback)((points) => {
+        for (const p of points) {
+            pushPoint(p);
+        }
+    }, [pushPoint]);
+    const clearAll = (0, react_1.useCallback)(() => {
+        bufferRef.current.clear();
+        timeExtentRef.current.clear();
+        valueExtentRef.current.clear();
+        dirtyRef.current = true;
+        scheduleRender();
+    }, [scheduleRender]);
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        push: pushPoint,
+        pushMany: pushManyPoints,
+        clear: clearAll,
+        getData: () => bufferRef.current.toArray()
+    }), [pushPoint, pushManyPoints, clearAll]);
+    // Controlled data prop
+    (0, react_1.useEffect)(() => {
+        if (!data)
+            return;
+        bufferRef.current.clear();
+        timeExtentRef.current.clear();
+        valueExtentRef.current.clear();
+        for (const d of data) {
+            bufferRef.current.push(d);
+            timeExtentRef.current.push(getTime(d));
+            valueExtentRef.current.push(getValue(d));
+        }
+        dirtyRef.current = true;
+        scheduleRender();
+    }, [data, getTime, getValue, scheduleRender]);
+    // Hover mouse handler — stored in ref so it always captures fresh closures
+    const hoverHandlerRef = (0, react_1.useRef)(() => { });
+    const hoverLeaveRef = (0, react_1.useRef)(() => { });
+    hoverHandlerRef.current = (e) => {
+        if (!hoverAnnotation)
+            return;
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        const rect = canvas.getBoundingClientRect();
+        // Mouse position in chart coordinates (canvas is full-size, ctx translated by margin)
+        const chartX = e.clientX - rect.left - margin.left;
+        const chartY = e.clientY - rect.top - margin.top;
+        // Outside chart area → clear hover
+        if (chartX < 0 || chartX > adjustedWidth || chartY < 0 || chartY > adjustedHeight) {
+            if (hoverRef.current) {
+                hoverRef.current = null;
+                setHoverPoint(null);
+                if (customHoverBehavior)
+                    customHoverBehavior(null);
+                scheduleRender();
+            }
+            return;
+        }
+        const scales = scalesRef.current;
+        if (!scales)
+            return;
+        const buf = bufferRef.current;
+        if (buf.size === 0)
+            return;
+        const timeAxis = getTimeAxis(arrowOfTime);
+        const timePixel = timeAxis === "x" ? chartX : chartY;
+        const targetTime = scales.time.invert(timePixel);
+        let hover;
+        if (chartType === "bar" && binSize) {
+            // Snap to the bin the cursor is in
+            const bins = (0, BinAccumulator_1.computeBins)(buf, getTime, getValue, binSize, getCategory);
+            const binStart = Math.floor(targetTime / binSize) * binSize;
+            const bin = bins.get(binStart);
+            if (!bin)
+                return;
+            const [domainMin, domainMax] = scales.time.domain();
+            const clampedStart = Math.max(bin.start, domainMin);
+            const clampedEnd = Math.min(bin.end, domainMax);
+            const midTime = clampedStart + (clampedEnd - clampedStart) / 2;
+            const tPixel = scales.time(midTime);
+            const vPixel = scales.value(bin.total);
+            const x = timeAxis === "x" ? tPixel : vPixel;
+            const y = timeAxis === "x" ? vPixel : tPixel;
+            // Hit-test which category segment the cursor is in
+            let hoveredCategory;
+            let hoveredCategoryValue;
+            if (getCategory && bin.categories.size > 0) {
+                const colorKeys = barColors ? Object.keys(barColors) : [];
+                const listed = new Set(colorKeys);
+                const unlisted = Array.from(bin.categories.keys()).filter(c => !listed.has(c)).sort();
+                const catOrder = [...colorKeys.filter(k => bin.categories.has(k)), ...unlisted];
+                const valuePixel = timeAxis === "x" ? chartY : chartX;
+                let cumBase = 0;
+                for (const cat of catOrder) {
+                    const catVal = bin.categories.get(cat) || 0;
+                    if (catVal === 0)
+                        continue;
+                    const edgeA = scales.value(cumBase);
+                    const edgeB = scales.value(cumBase + catVal);
+                    const lo = Math.min(edgeA, edgeB);
+                    const hi = Math.max(edgeA, edgeB);
+                    if (valuePixel >= lo && valuePixel <= hi) {
+                        hoveredCategory = cat;
+                        hoveredCategoryValue = catVal;
+                        break;
+                    }
+                    cumBase += catVal;
+                }
+            }
+            hover = {
+                data: {
+                    binStart: bin.start, binEnd: bin.end, total: bin.total,
+                    categories: Object.fromEntries(bin.categories),
+                    barColors: barColors || {},
+                    hoveredCategory,
+                    hoveredCategoryValue
+                },
+                time: midTime,
+                value: bin.total,
+                x,
+                y
+            };
+        }
+        else {
+            const idx = findNearestIndex(buf, targetTime, getTime);
+            if (idx < 0)
+                return;
+            const d = buf.get(idx);
+            const t = getTime(d);
+            const v = getValue(d);
+            const tPixel = scales.time(t);
+            const vPixel = scales.value(v);
+            const x = timeAxis === "x" ? tPixel : vPixel;
+            const y = timeAxis === "x" ? vPixel : tPixel;
+            hover = { data: d, time: t, value: v, x, y };
+        }
+        hoverRef.current = hover;
+        setHoverPoint(hover);
+        if (customHoverBehavior)
+            customHoverBehavior(hover);
+        scheduleRender();
+    };
+    hoverLeaveRef.current = () => {
+        if (hoverRef.current) {
+            hoverRef.current = null;
+            setHoverPoint(null);
+            if (customHoverBehavior)
+                customHoverBehavior(null);
+            scheduleRender();
+        }
+    };
+    // Stable event handlers that delegate to refs
+    const onMouseMove = (0, react_1.useCallback)((e) => hoverHandlerRef.current(e), []);
+    const onMouseLeave = (0, react_1.useCallback)(() => hoverLeaveRef.current(), []);
+    // Update the render function ref on every React render.
+    // This captures the latest props (arrowOfTime, chartType, lineStyle,
+    // annotations, etc.) without needing useCallback dependency chains.
+    // The rAF loop calls this via renderFnRef, so it always sees fresh values.
+    renderFnRef.current = () => {
+        rafRef.current = 0;
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        const ctx = canvas.getContext("2d");
+        if (!ctx)
+            return;
+        const buf = bufferRef.current;
+        const tExtent = timeExtentRef.current;
+        const vExtent = valueExtentRef.current;
+        if (tExtent.dirty) {
+            tExtent.recalculate(buf, getTime);
+        }
+        if (vExtent.dirty) {
+            vExtent.recalculate(buf, getValue);
+        }
+        let tDomain = fixedTimeExtent || tExtent.extent;
+        let vDomain = fixedValueExtent || vExtent.extent;
+        if (chartType === "bar" && binSize && !fixedValueExtent && buf.size > 0) {
+            const [, maxTotal] = (0, BinAccumulator_1.computeBinExtent)(buf, getTime, getValue, binSize, getCategory);
+            vDomain = [0, maxTotal + maxTotal * extentPadding];
+        }
+        else if (chartType === "waterfall" && !fixedValueExtent && buf.size > 0) {
+            const [minCum, maxCum] = (0, waterfallRenderer_1.computeWaterfallExtent)(buf, getValue);
+            const range = maxCum - minCum;
+            const pad = range > 0 ? range * extentPadding : 1;
+            vDomain = [
+                Math.min(0, minCum - Math.abs(pad)),
+                Math.max(0, maxCum + Math.abs(pad))
+            ];
+        }
+        else if (!fixedValueExtent && vDomain[0] !== Infinity) {
+            const range = vDomain[1] - vDomain[0];
+            const pad = range > 0 ? range * extentPadding : 1;
+            vDomain = [vDomain[0] - pad, vDomain[1] + pad];
+        }
+        if (tDomain[0] === Infinity || tDomain[1] === -Infinity) {
+            tDomain = [0, 1];
+        }
+        if (vDomain[0] === Infinity || vDomain[1] === -Infinity) {
+            vDomain = [0, 1];
+        }
+        const scales = buildScales(arrowOfTime, tDomain, vDomain, adjustedWidth, adjustedHeight);
+        scalesRef.current = scales;
+        const dpr = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
+        canvas.width = size[0] * dpr;
+        canvas.height = size[1] * dpr;
+        canvas.style.width = `${size[0]}px`;
+        canvas.style.height = `${size[1]}px`;
+        ctx.scale(dpr, dpr);
+        ctx.translate(margin.left, margin.top);
+        ctx.clearRect(-margin.left, -margin.top, size[0], size[1]);
+        // Resolve theme colors from CSS custom properties for theme-aware rendering
+        const theme = resolveThemeColors(canvas);
+        if (background) {
+            ctx.fillStyle = background;
+            ctx.fillRect(0, 0, adjustedWidth, adjustedHeight);
+        }
+        if (showAxes) {
+            ctx.save();
+            drawAxes(ctx, arrowOfTime, scales.time, scales.value, adjustedWidth, adjustedHeight, tickFormatTime, tickFormatValue, theme);
+            ctx.restore();
+        }
+        const renderer = RENDERERS[chartType];
+        if (renderer) {
+            const layout = {
+                width: adjustedWidth,
+                height: adjustedHeight,
+                timeAxis: getTimeAxis(arrowOfTime)
+            };
+            renderer(ctx, buf, scales, layout, lineStyle, { time: getTime, value: getValue, category: getCategory }, annotations, chartType === "bar" ? { binSize, barColors, barStyle }
+                : chartType === "waterfall" ? { waterfallStyle }
+                    : chartType === "swarm" ? { swarmStyle, barColors }
+                        : undefined);
+        }
+        // Draw bar highlight on hovered bin/segment
+        if (hoverAnnotation && hoverRef.current && chartType === "bar" && binSize) {
+            const hd = hoverRef.current.data;
+            if (hd.binStart != null) {
+                const gap = barStyle?.gap ?? 1;
+                const tAxis = getTimeAxis(arrowOfTime);
+                // Determine which segment to highlight
+                const segBase = hd.hoveredCategory != null
+                    ? (() => {
+                        // Walk categories to find the cumulative base of the hovered segment
+                        const cats = hd.categories || {};
+                        const colorKeys = barColors ? Object.keys(barColors) : [];
+                        const listed = new Set(colorKeys);
+                        const unlisted = Object.keys(cats).filter((c) => !listed.has(c)).sort();
+                        const catOrder = [...colorKeys.filter((k) => k in cats), ...unlisted];
+                        let base = 0;
+                        for (const cat of catOrder) {
+                            if (cat === hd.hoveredCategory)
+                                return base;
+                            base += cats[cat] || 0;
+                        }
+                        return base;
+                    })()
+                    : 0;
+                const segTop = hd.hoveredCategory != null
+                    ? segBase + (hd.hoveredCategoryValue || 0)
+                    : hd.total;
+                const [domainMin, domainMax] = scales.time.domain();
+                const clampedBinStart = Math.max(hd.binStart, domainMin);
+                const clampedBinEnd = Math.min(hd.binEnd, domainMax);
+                if (tAxis === "x") {
+                    const rawX0 = scales.time(clampedBinStart);
+                    const rawX1 = scales.time(clampedBinEnd);
+                    const x0 = Math.min(rawX0, rawX1) + gap / 2;
+                    const x1 = Math.max(rawX0, rawX1) - gap / 2;
+                    const yBot = scales.value(segBase);
+                    const yTop = scales.value(segTop);
+                    const ry = Math.min(yBot, yTop);
+                    const rh = Math.abs(yBot - yTop);
+                    ctx.fillStyle = theme.hoverFill;
+                    ctx.fillRect(x0, ry, x1 - x0, rh);
+                    ctx.strokeStyle = theme.hoverStroke;
+                    ctx.lineWidth = 1;
+                    ctx.setLineDash([]);
+                    ctx.strokeRect(x0, ry, x1 - x0, rh);
+                }
+                else {
+                    const rawY0 = scales.time(clampedBinStart);
+                    const rawY1 = scales.time(clampedBinEnd);
+                    const y0 = Math.min(rawY0, rawY1) + gap / 2;
+                    const y1 = Math.max(rawY0, rawY1) - gap / 2;
+                    const xLeft = scales.value(segBase);
+                    const xRight = scales.value(segTop);
+                    const rx = Math.min(xLeft, xRight);
+                    const rw = Math.abs(xRight - xLeft);
+                    ctx.fillStyle = theme.hoverFill;
+                    ctx.fillRect(rx, y0, rw, y1 - y0);
+                    ctx.strokeStyle = theme.hoverStroke;
+                    ctx.lineWidth = 1;
+                    ctx.setLineDash([]);
+                    ctx.strokeRect(rx, y0, rw, y1 - y0);
+                }
+            }
+        }
+        // Draw crosshair after chart data so it renders on top
+        if (hoverAnnotation && hoverRef.current) {
+            const config = typeof hoverAnnotation === "object" ? hoverAnnotation : {};
+            drawCrosshair(ctx, hoverRef.current, adjustedWidth, adjustedHeight, config, lineStyle.stroke || "#007bff", theme);
+        }
+        const wasDirty = dirtyRef.current;
+        dirtyRef.current = false;
+        // Trigger React re-render so SVG annotations recompute positions
+        // using the scales we just stored in scalesRef.
+        // Only do this when data actually changed (wasDirty) to avoid
+        // setAnnotationFrame → re-render → effect → scheduleRender → loop.
+        if (wasDirty && annotations && annotations.length > 0 && svgAnnotationRules) {
+            setAnnotationFrame(f => f + 1);
+        }
+    };
+    // Initial render and cleanup
+    (0, react_1.useEffect)(() => {
+        scheduleRender();
+        return () => {
+            if (rafRef.current) {
+                cancelAnimationFrame(rafRef.current);
+            }
+        };
+    }, [scheduleRender]);
+    // Re-render canvas when visual props change
+    (0, react_1.useEffect)(() => {
+        dirtyRef.current = true;
+        scheduleRender();
+    }, [arrowOfTime, chartType, adjustedWidth, adjustedHeight, showAxes, background, lineStyle, scheduleRender]);
+    // Compute annotation elements during React render using latest scales
+    const renderedAnnotations = React.useMemo(() => {
+        if (!annotations || annotations.length === 0 || !svgAnnotationRules) {
+            return null;
+        }
+        const scales = scalesRef.current;
+        const timeAxis = getTimeAxis(arrowOfTime);
+        return annotations
+            .map((annotation, i) => svgAnnotationRules(annotation, i, {
+            scales,
+            timeAxis,
+            width: adjustedWidth,
+            height: adjustedHeight
+        }))
+            .filter(Boolean);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [annotations, svgAnnotationRules, arrowOfTime, adjustedWidth, adjustedHeight, annotationFrame]);
+    const hasAnnotations = renderedAnnotations && renderedAnnotations.length > 0;
+    // Tooltip positioning: anchor at the hovered point, flip if near edges
+    const tooltipElement = hoverAnnotation && hoverPoint ? (React.createElement("div", { className: "realtime-frame-tooltip", style: {
+            position: "absolute",
+            left: margin.left + hoverPoint.x,
+            top: margin.top + hoverPoint.y,
+            transform: `translate(${hoverPoint.x > adjustedWidth * 0.7 ? "calc(-100% - 12px)" : "12px"}, ${hoverPoint.y < adjustedHeight * 0.3 ? "4px" : "calc(-100% - 4px)"})`,
+            pointerEvents: "none",
+            zIndex: 1
+        } }, tooltipContent
+        ? tooltipContent(hoverPoint)
+        : React.createElement(DefaultTooltip, { hover: hoverPoint, formatTime: tickFormatTime }))) : null;
+    return (React.createElement("div", { className: `realtime-frame${className ? ` ${className}` : ""}`, style: {
+            position: "relative",
+            width: size[0],
+            height: size[1]
+        }, onMouseMove: hoverAnnotation ? onMouseMove : undefined, onMouseLeave: hoverAnnotation ? onMouseLeave : undefined },
+        React.createElement("canvas", { ref: canvasRef, style: {
+                position: "absolute",
+                left: 0,
+                top: 0
+            } }),
+        hasAnnotations && (React.createElement("svg", { width: size[0], height: size[1], style: {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                pointerEvents: "none"
+            } },
+            React.createElement("g", { transform: `translate(${margin.left},${margin.top})` }, renderedAnnotations))),
+        tooltipElement));
+});
+exports.default = RealtimeFrame;