semiotic 2.0.3 → 3.0.0-beta.1

package/dist/realtime.module.js

@@ -0,0 +1,1566 @@
+"use client";
+import * as React from 'react';
+import { forwardRef, useMemo, useRef, useState, useCallback, useImperativeHandle, useEffect } from 'react';
+import { scaleLinear } from 'd3-scale';
+
+class RingBuffer {
+    constructor(_capacity) {
+        this._capacity = _capacity;
+        this.head = 0;
+        this._size = 0;
+        if (_capacity < 1) {
+            throw new Error("RingBuffer capacity must be at least 1");
+        }
+        this.buffer = new Array(_capacity);
+    }
+    push(value) {
+        let evicted;
+        if (this._size === this._capacity) {
+            // Buffer is full — the slot at head is the oldest item
+            evicted = this.buffer[this.head];
+        }
+        else {
+            this._size++;
+        }
+        this.buffer[this.head] = value;
+        this.head = (this.head + 1) % this._capacity;
+        return evicted;
+    }
+    pushMany(values) {
+        const evicted = [];
+        for (const v of values) {
+            const e = this.push(v);
+            if (e !== undefined) {
+                evicted.push(e);
+            }
+        }
+        return evicted;
+    }
+    get(index) {
+        if (index < 0 || index >= this._size)
+            return undefined;
+        const realIndex = (this.head - this._size + index + this._capacity) % this._capacity;
+        return this.buffer[realIndex];
+    }
+    peek() {
+        if (this._size === 0)
+            return undefined;
+        return this.buffer[(this.head - 1 + this._capacity) % this._capacity];
+    }
+    peekOldest() {
+        if (this._size === 0)
+            return undefined;
+        return this.buffer[(this.head - this._size + this._capacity) % this._capacity];
+    }
+    [Symbol.iterator]() {
+        let i = 0;
+        const self = this;
+        return {
+            next() {
+                if (i >= self._size)
+                    return { done: true, value: undefined };
+                return { done: false, value: self.get(i++) };
+            }
+        };
+    }
+    toArray() {
+        const result = [];
+        for (const item of this) {
+            result.push(item);
+        }
+        return result;
+    }
+    resize(newCapacity) {
+        if (newCapacity < 1) {
+            throw new Error("RingBuffer capacity must be at least 1");
+        }
+        const items = this.toArray();
+        const evicted = [];
+        while (items.length > newCapacity) {
+            evicted.push(items.shift());
+        }
+        this._capacity = newCapacity;
+        this.buffer = new Array(newCapacity);
+        this.head = 0;
+        this._size = 0;
+        for (const item of items) {
+            this.push(item);
+        }
+        return evicted;
+    }
+    clear() {
+        this.buffer = new Array(this._capacity);
+        this.head = 0;
+        this._size = 0;
+    }
+    get size() {
+        return this._size;
+    }
+    get capacity() {
+        return this._capacity;
+    }
+    get full() {
+        return this._size === this._capacity;
+    }
+}
+
+class IncrementalExtent {
+    constructor() {
+        this._min = Infinity;
+        this._max = -Infinity;
+        this._dirty = false;
+    }
+    push(value) {
+        if (Number.isNaN(value))
+            return;
+        if (value < this._min)
+            this._min = value;
+        if (value > this._max)
+            this._max = value;
+    }
+    evict(value) {
+        if (value === this._min || value === this._max) {
+            this._dirty = true;
+        }
+    }
+    recalculate(values, accessor) {
+        this._min = Infinity;
+        this._max = -Infinity;
+        for (const v of values) {
+            const n = accessor ? accessor(v) : v;
+            if (Number.isNaN(n))
+                continue;
+            if (n < this._min)
+                this._min = n;
+            if (n > this._max)
+                this._max = n;
+        }
+        this._dirty = false;
+    }
+    clear() {
+        this._min = Infinity;
+        this._max = -Infinity;
+        this._dirty = false;
+    }
+    get extent() {
+        return [this._min, this._max];
+    }
+    get min() {
+        return this._min;
+    }
+    get max() {
+        return this._max;
+    }
+    get dirty() {
+        return this._dirty;
+    }
+}
+
+function resolveColor$1(value, thresholds, baseColor) {
+    let color = baseColor;
+    for (const t of thresholds) {
+        if (t.thresholdType === "lesser") {
+            if (value < t.value)
+                color = t.color;
+        }
+        else {
+            if (value > t.value)
+                color = t.color;
+        }
+    }
+    return color;
+}
+const lineRenderer = (ctx, data, scales, layout, style, accessors, annotations) => {
+    const { time: timeScale, value: valueScale } = scales;
+    const { timeAxis } = layout;
+    const { time: getTime, value: getValue } = accessors;
+    const baseColor = style.stroke || "#007bff";
+    // Extract color thresholds from annotations
+    const colorThresholds = annotations
+        ? annotations
+            .filter((a) => a.type === "threshold" && a.color)
+            .map((a) => ({
+            value: a.value,
+            color: a.color,
+            thresholdType: (a.thresholdType || "greater")
+        }))
+        : null;
+    const hasColorThresholds = colorThresholds && colorThresholds.length > 0;
+    // Fast path: no color thresholds — single-path draw, zero overhead
+    if (!hasColorThresholds) {
+        ctx.beginPath();
+        ctx.strokeStyle = baseColor;
+        ctx.lineWidth = style.strokeWidth || 2;
+        if (style.strokeDasharray) {
+            ctx.setLineDash(style.strokeDasharray.split(/[\s,]+/).map(Number));
+        }
+        else {
+            ctx.setLineDash([]);
+        }
+        let started = false;
+        for (const d of data) {
+            const t = getTime(d);
+            const v = getValue(d);
+            if (t == null || v == null || Number.isNaN(t) || Number.isNaN(v)) {
+                started = false;
+                continue;
+            }
+            const tPixel = timeScale(t);
+            const vPixel = valueScale(v);
+            const x = timeAxis === "x" ? tPixel : vPixel;
+            const y = timeAxis === "x" ? vPixel : tPixel;
+            if (!started) {
+                ctx.moveTo(x, y);
+                started = true;
+            }
+            else {
+                ctx.lineTo(x, y);
+            }
+        }
+        ctx.stroke();
+        return;
+    }
+    // Threshold mode: segment-based drawing
+    ctx.lineWidth = style.strokeWidth || 2;
+    if (style.strokeDasharray) {
+        ctx.setLineDash(style.strokeDasharray.split(/[\s,]+/).map(Number));
+    }
+    else {
+        ctx.setLineDash([]);
+    }
+    let prevX = null;
+    let prevY = null;
+    let prevValue = null;
+    let prevColor = null;
+    let pathStarted = false;
+    function toPixel(t, v) {
+        const tPixel = timeScale(t);
+        const vPixel = valueScale(v);
+        return timeAxis === "x" ? [tPixel, vPixel] : [vPixel, tPixel];
+    }
+    function startSegment(color, x, y) {
+        ctx.beginPath();
+        ctx.strokeStyle = color;
+        ctx.moveTo(x, y);
+        pathStarted = true;
+    }
+    function endSegment() {
+        if (pathStarted) {
+            ctx.stroke();
+            pathStarted = false;
+        }
+    }
+    for (const d of data) {
+        const t = getTime(d);
+        const v = getValue(d);
+        if (t == null || v == null || Number.isNaN(t) || Number.isNaN(v)) {
+            endSegment();
+            prevX = null;
+            prevY = null;
+            prevValue = null;
+            prevColor = null;
+            continue;
+        }
+        const [x, y] = toPixel(t, v);
+        const currColor = resolveColor$1(v, colorThresholds, baseColor);
+        if (prevX === null || prevColor === null || prevValue === null) {
+            // First valid point
+            startSegment(currColor, x, y);
+            prevX = x;
+            prevY = y;
+            prevValue = v;
+            prevColor = currColor;
+            continue;
+        }
+        if (currColor === prevColor) {
+            ctx.lineTo(x, y);
+        }
+        else {
+            // Find all thresholds crossed between prevValue and v, sorted by interpolation t
+            const crossings = [];
+            for (const threshold of colorThresholds) {
+                const tv = threshold.value;
+                // Check if the threshold value lies between prevValue and v
+                if ((prevValue <= tv && v >= tv) || (prevValue >= tv && v <= tv)) {
+                    // Don't add crossing at exact endpoints
+                    if (prevValue !== tv && v !== tv) {
+                        const interpT = (tv - prevValue) / (v - prevValue);
+                        crossings.push({ t: interpT, color: "" }); // color resolved after sorting
+                    }
+                }
+            }
+            // Sort crossings by interpolation parameter
+            crossings.sort((a, b) => a.t - b.t);
+            for (const crossing of crossings) {
+                const midX = prevX + (x - prevX) * crossing.t;
+                const midY = prevY + (y - prevY) * crossing.t;
+                // Nudge slightly past the crossing to determine the color on the other side
+                const nudgedValue = prevValue + (v - prevValue) * Math.min(crossing.t + 0.0001, 1);
+                const nextColor = resolveColor$1(nudgedValue, colorThresholds, baseColor);
+                ctx.lineTo(midX, midY);
+                endSegment();
+                startSegment(nextColor, midX, midY);
+            }
+            ctx.lineTo(x, y);
+        }
+        prevX = x;
+        prevY = y;
+        prevValue = v;
+        prevColor = currColor;
+    }
+    endSegment();
+};
+
+const DEFAULT_PALETTE$1 = [
+    "#007bff", "#28a745", "#dc3545", "#fd7e14", "#6f42c1",
+    "#20c997", "#e83e8c", "#17a2b8", "#6610f2", "#ffc107"
+];
+function resolveColor(value, thresholds, baseColor) {
+    let color = baseColor;
+    for (const t of thresholds) {
+        if (t.thresholdType === "lesser") {
+            if (value < t.value)
+                color = t.color;
+        }
+        else {
+            if (value > t.value)
+                color = t.color;
+        }
+    }
+    return color;
+}
+const swarmRenderer = (ctx, data, scales, layout, style, accessors, annotations, options) => {
+    var _a, _b, _c, _d, _e;
+    const { time: timeScale, value: valueScale } = scales;
+    const { timeAxis } = layout;
+    const { time: getTime, value: getValue, category: getCategory } = accessors;
+    const ss = options === null || options === void 0 ? void 0 : options.swarmStyle;
+    const barColors = options === null || options === void 0 ? void 0 : options.barColors;
+    const radius = (_a = ss === null || ss === void 0 ? void 0 : ss.radius) !== null && _a !== void 0 ? _a : 3;
+    const defaultFill = (_c = (_b = ss === null || ss === void 0 ? void 0 : ss.fill) !== null && _b !== void 0 ? _b : style.stroke) !== null && _c !== void 0 ? _c : "#007bff";
+    const opacity = (_d = ss === null || ss === void 0 ? void 0 : ss.opacity) !== null && _d !== void 0 ? _d : 0.7;
+    const hasStroke = (ss === null || ss === void 0 ? void 0 : ss.stroke) != null;
+    // Extract color thresholds from annotations
+    const colorThresholds = annotations
+        ? annotations
+            .filter((a) => a.type === "threshold" && a.color)
+            .map((a) => ({
+            value: a.value,
+            color: a.color,
+            thresholdType: (a.thresholdType || "greater")
+        }))
+        : null;
+    const hasColorThresholds = colorThresholds && colorThresholds.length > 0;
+    ctx.globalAlpha = opacity;
+    let paletteIndex = 0;
+    const categoryColorCache = {};
+    for (const d of data) {
+        const t = getTime(d);
+        const v = getValue(d);
+        if (v == null || Number.isNaN(v))
+            continue;
+        let x, y;
+        if (timeAxis === "x") {
+            x = timeScale(t);
+            y = valueScale(v);
+        }
+        else {
+            x = valueScale(v);
+            y = timeScale(t);
+        }
+        // Determine fill color
+        let fill = defaultFill;
+        if (getCategory) {
+            const cat = getCategory(d);
+            if (barColors && barColors[cat]) {
+                fill = barColors[cat];
+            }
+            else {
+                if (!(cat in categoryColorCache)) {
+                    categoryColorCache[cat] = DEFAULT_PALETTE$1[paletteIndex % DEFAULT_PALETTE$1.length];
+                    paletteIndex++;
+                }
+                fill = categoryColorCache[cat];
+            }
+        }
+        // Threshold coloring overrides category/default fill
+        if (hasColorThresholds) {
+            fill = resolveColor(v, colorThresholds, fill);
+        }
+        ctx.fillStyle = fill;
+        ctx.beginPath();
+        ctx.arc(x, y, radius, 0, Math.PI * 2);
+        ctx.fill();
+        if (hasStroke) {
+            ctx.strokeStyle = ss.stroke;
+            ctx.lineWidth = (_e = ss === null || ss === void 0 ? void 0 : ss.strokeWidth) !== null && _e !== void 0 ? _e : 1;
+            ctx.stroke();
+        }
+    }
+    ctx.globalAlpha = 1;
+};
+
+const candlestickRenderer = () => {
+    throw new Error("candlestickRenderer: Not yet implemented");
+};
+
+const DEFAULT_POSITIVE_COLOR = "#28a745";
+const DEFAULT_NEGATIVE_COLOR = "#dc3545";
+function computeWaterfallExtent(data, getValue) {
+    let min = 0;
+    let max = 0;
+    let cumulative = 0;
+    for (const d of data) {
+        const v = getValue(d);
+        if (v == null || Number.isNaN(v))
+            continue;
+        cumulative += v;
+        if (cumulative < min)
+            min = cumulative;
+        if (cumulative > max)
+            max = cumulative;
+    }
+    return [min, max];
+}
+const waterfallRenderer = (ctx, data, scales, layout, style, accessors, annotations, options) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const { time: timeScale, value: valueScale } = scales;
+    const { timeAxis, width, height } = layout;
+    const { time: getTime, value: getValue } = accessors;
+    const ws = options === null || options === void 0 ? void 0 : options.waterfallStyle;
+    const positiveColor = (_a = ws === null || ws === void 0 ? void 0 : ws.positiveColor) !== null && _a !== void 0 ? _a : DEFAULT_POSITIVE_COLOR;
+    const negativeColor = (_b = ws === null || ws === void 0 ? void 0 : ws.negativeColor) !== null && _b !== void 0 ? _b : DEFAULT_NEGATIVE_COLOR;
+    const gap = (_c = ws === null || ws === void 0 ? void 0 : ws.gap) !== null && _c !== void 0 ? _c : 1;
+    const connectorStroke = ws === null || ws === void 0 ? void 0 : ws.connectorStroke;
+    const connectorWidth = (_d = ws === null || ws === void 0 ? void 0 : ws.connectorWidth) !== null && _d !== void 0 ? _d : 1;
+    const hasStroke = (ws === null || ws === void 0 ? void 0 : ws.stroke) != null;
+    if (hasStroke) {
+        ctx.strokeStyle = ws.stroke;
+        ctx.lineWidth = (_e = ws === null || ws === void 0 ? void 0 : ws.strokeWidth) !== null && _e !== void 0 ? _e : 1;
+    }
+    // Collect into array for random access (skip NaN/null values)
+    const arr = [];
+    for (const d of data) {
+        const v = getValue(d);
+        if (v == null || Number.isNaN(v))
+            continue;
+        arr.push(d);
+    }
+    if (arr.length === 0)
+        return;
+    let baseline = 0;
+    // Track the end edge of the previous bar and its cumulative value for connectors
+    let prevEdge = null;
+    let prevCumulative = null;
+    for (let i = 0; i < arr.length; i++) {
+        const d = arr[i];
+        const t = getTime(d);
+        const delta = getValue(d);
+        const cumEnd = baseline + delta;
+        // Compute bar width from time gap to next point
+        let barWidthTime;
+        if (i < arr.length - 1) {
+            barWidthTime = getTime(arr[i + 1]) - t;
+        }
+        else if (i > 0) {
+            barWidthTime = t - getTime(arr[i - 1]);
+        }
+        else {
+            // Single point fallback: use 0 to trigger pixel fallback
+            barWidthTime = 0;
+        }
+        ctx.fillStyle = delta >= 0 ? positiveColor : negativeColor;
+        if (timeAxis === "x") {
+            let rawX0, rawX1;
+            if (barWidthTime !== 0) {
+                rawX0 = timeScale(t);
+                rawX1 = timeScale(t + barWidthTime);
+            }
+            else {
+                rawX0 = timeScale(t);
+                rawX1 = rawX0 + width / 10;
+            }
+            const x0 = Math.min(rawX0, rawX1) + gap / 2;
+            const x1 = Math.max(rawX0, rawX1) - gap / 2;
+            const barWidth = x1 - x0;
+            if (barWidth <= 0) {
+                baseline = cumEnd;
+                prevEdge = x1;
+                prevCumulative = cumEnd;
+                continue;
+            }
+            const yBaseline = valueScale(baseline);
+            const yTop = valueScale(cumEnd);
+            const rectY = Math.min(yBaseline, yTop);
+            const rectH = Math.abs(yBaseline - yTop);
+            // Connector line at the baseline level from previous bar's right edge to this bar's left edge
+            if (connectorStroke && prevEdge != null && prevCumulative != null) {
+                ctx.save();
+                ctx.strokeStyle = connectorStroke;
+                ctx.lineWidth = connectorWidth;
+                const connY = valueScale(prevCumulative);
+                ctx.beginPath();
+                ctx.moveTo(prevEdge, connY);
+                ctx.lineTo(x0, connY);
+                ctx.stroke();
+                ctx.restore();
+                if (hasStroke) {
+                    ctx.strokeStyle = ws.stroke;
+                    ctx.lineWidth = (_f = ws === null || ws === void 0 ? void 0 : ws.strokeWidth) !== null && _f !== void 0 ? _f : 1;
+                }
+            }
+            ctx.fillRect(x0, rectY, barWidth, rectH);
+            if (hasStroke)
+                ctx.strokeRect(x0, rectY, barWidth, rectH);
+            prevEdge = x1;
+        }
+        else {
+            // timeAxis === "y": horizontal bars
+            let rawY0, rawY1;
+            if (barWidthTime !== 0) {
+                rawY0 = timeScale(t);
+                rawY1 = timeScale(t + barWidthTime);
+            }
+            else {
+                rawY0 = timeScale(t);
+                rawY1 = rawY0 + height / 10;
+            }
+            const y0 = Math.min(rawY0, rawY1) + gap / 2;
+            const y1 = Math.max(rawY0, rawY1) - gap / 2;
+            const barHeight = y1 - y0;
+            if (barHeight <= 0) {
+                baseline = cumEnd;
+                prevEdge = y1;
+                prevCumulative = cumEnd;
+                continue;
+            }
+            const xBaseline = valueScale(baseline);
+            const xEnd = valueScale(cumEnd);
+            const rectX = Math.min(xBaseline, xEnd);
+            const rectW = Math.abs(xEnd - xBaseline);
+            // Connector line at the baseline level from previous bar's bottom edge to this bar's top edge
+            if (connectorStroke && prevEdge != null && prevCumulative != null) {
+                ctx.save();
+                ctx.strokeStyle = connectorStroke;
+                ctx.lineWidth = connectorWidth;
+                const connX = valueScale(prevCumulative);
+                ctx.beginPath();
+                ctx.moveTo(connX, prevEdge);
+                ctx.lineTo(connX, y0);
+                ctx.stroke();
+                ctx.restore();
+                if (hasStroke) {
+                    ctx.strokeStyle = ws.stroke;
+                    ctx.lineWidth = (_g = ws === null || ws === void 0 ? void 0 : ws.strokeWidth) !== null && _g !== void 0 ? _g : 1;
+                }
+            }
+            ctx.fillRect(rectX, y0, rectW, barHeight);
+            if (hasStroke)
+                ctx.strokeRect(rectX, y0, rectW, barHeight);
+            prevEdge = y1;
+        }
+        baseline = cumEnd;
+        prevCumulative = cumEnd;
+    }
+};
+
+function computeBins(data, getTime, getValue, binSize, getCategory) {
+    const bins = new Map();
+    for (const d of data) {
+        const t = getTime(d);
+        const v = getValue(d);
+        if (t == null || v == null || Number.isNaN(t) || Number.isNaN(v))
+            continue;
+        const binStart = Math.floor(t / binSize) * binSize;
+        let bin = bins.get(binStart);
+        if (!bin) {
+            bin = { start: binStart, end: binStart + binSize, total: 0, categories: new Map() };
+            bins.set(binStart, bin);
+        }
+        bin.total += v;
+        if (getCategory) {
+            const cat = getCategory(d);
+            bin.categories.set(cat, (bin.categories.get(cat) || 0) + v);
+        }
+    }
+    return bins;
+}
+function computeBinExtent(data, getTime, getValue, binSize, getCategory) {
+    const bins = computeBins(data, getTime, getValue, binSize, getCategory);
+    if (bins.size === 0)
+        return [0, 0];
+    let maxTotal = 0;
+    for (const bin of bins.values()) {
+        if (bin.total > maxTotal)
+            maxTotal = bin.total;
+    }
+    return [0, maxTotal];
+}
+
+const DEFAULT_PALETTE = [
+    "#4e79a7", "#f28e2b", "#e15759", "#76b7b2",
+    "#59a14f", "#edc948", "#b07aa1", "#ff9da7",
+    "#9c755f", "#bab0ac"
+];
+const barRenderer = (ctx, data, scales, layout, style, accessors, annotations, options) => {
+    var _a, _b;
+    const binSize = options === null || options === void 0 ? void 0 : options.binSize;
+    if (!binSize)
+        return;
+    const { time: timeScale, value: valueScale } = scales;
+    const { timeAxis } = layout;
+    const { time: getTime, value: getValue, category: getCategory } = accessors;
+    const barColors = options === null || options === void 0 ? void 0 : options.barColors;
+    const barStyle = options === null || options === void 0 ? void 0 : options.barStyle;
+    const bins = computeBins(data, getTime, getValue, binSize, getCategory);
+    if (bins.size === 0)
+        return;
+    const [domainMin, domainMax] = timeScale.domain();
+    const gap = (_a = barStyle === null || barStyle === void 0 ? void 0 : barStyle.gap) !== null && _a !== void 0 ? _a : 1;
+    const hasCategories = getCategory != null;
+    // Determine category order: barColors keys first, then alphabetical for unlisted
+    let categoryOrder = null;
+    if (hasCategories) {
+        const allCategories = new Set();
+        for (const bin of bins.values()) {
+            for (const cat of bin.categories.keys()) {
+                allCategories.add(cat);
+            }
+        }
+        const colorKeys = barColors ? Object.keys(barColors) : [];
+        const listed = new Set(colorKeys);
+        const unlisted = Array.from(allCategories).filter(c => !listed.has(c)).sort();
+        categoryOrder = [...colorKeys.filter(k => allCategories.has(k)), ...unlisted];
+    }
+    // Bar stroke settings
+    const hasBarStroke = (barStyle === null || barStyle === void 0 ? void 0 : barStyle.stroke) != null;
+    if (hasBarStroke) {
+        ctx.strokeStyle = barStyle.stroke;
+        ctx.lineWidth = (_b = barStyle === null || barStyle === void 0 ? void 0 : barStyle.strokeWidth) !== null && _b !== void 0 ? _b : 1;
+    }
+    for (const bin of bins.values()) {
+        if (timeAxis === "x") {
+            const clampedStart = Math.max(bin.start, domainMin);
+            const clampedEnd = Math.min(bin.end, domainMax);
+            if (clampedStart >= clampedEnd)
+                continue;
+            const rawX0 = timeScale(clampedStart);
+            const rawX1 = timeScale(clampedEnd);
+            const x0 = Math.min(rawX0, rawX1) + gap / 2;
+            const x1 = Math.max(rawX0, rawX1) - gap / 2;
+            const barWidth = x1 - x0;
+            if (barWidth <= 0)
+                continue;
+            if (hasCategories && categoryOrder) {
+                let cumulativeBase = 0;
+                let paletteIdx = 0;
+                for (const cat of categoryOrder) {
+                    const catVal = bin.categories.get(cat) || 0;
+                    if (catVal === 0)
+                        continue;
+                    const yBottom = valueScale(cumulativeBase);
+                    const yTop = valueScale(cumulativeBase + catVal);
+                    const rectY = Math.min(yBottom, yTop);
+                    const rectH = Math.abs(yBottom - yTop);
+                    ctx.fillStyle = (barColors && barColors[cat]) || DEFAULT_PALETTE[paletteIdx % DEFAULT_PALETTE.length];
+                    ctx.fillRect(x0, rectY, barWidth, rectH);
+                    if (hasBarStroke)
+                        ctx.strokeRect(x0, rectY, barWidth, rectH);
+                    cumulativeBase += catVal;
+                    paletteIdx++;
+                }
+            }
+            else {
+                const yZero = valueScale(0);
+                const yTop = valueScale(bin.total);
+                const rectY = Math.min(yZero, yTop);
+                const rectH = Math.abs(yZero - yTop);
+                ctx.fillStyle = (barStyle === null || barStyle === void 0 ? void 0 : barStyle.fill) || style.stroke || "#007bff";
+                ctx.fillRect(x0, rectY, barWidth, rectH);
+                if (hasBarStroke)
+                    ctx.strokeRect(x0, rectY, barWidth, rectH);
+            }
+        }
+        else {
+            // timeAxis === "y": horizontal bars
+            const clampedStart = Math.max(bin.start, domainMin);
+            const clampedEnd = Math.min(bin.end, domainMax);
+            if (clampedStart >= clampedEnd)
+                continue;
+            const rawY0 = timeScale(clampedStart);
+            const rawY1 = timeScale(clampedEnd);
+            const y0 = Math.min(rawY0, rawY1) + gap / 2;
+            const y1 = Math.max(rawY0, rawY1) - gap / 2;
+            const barHeight = y1 - y0;
+            if (barHeight <= 0)
+                continue;
+            if (hasCategories && categoryOrder) {
+                let cumulativeBase = 0;
+                let paletteIdx = 0;
+                for (const cat of categoryOrder) {
+                    const catVal = bin.categories.get(cat) || 0;
+                    if (catVal === 0)
+                        continue;
+                    const xLeft = valueScale(cumulativeBase);
+                    const xRight = valueScale(cumulativeBase + catVal);
+                    const rectX = Math.min(xLeft, xRight);
+                    const rectW = Math.abs(xRight - xLeft);
+                    ctx.fillStyle = (barColors && barColors[cat]) || DEFAULT_PALETTE[paletteIdx % DEFAULT_PALETTE.length];
+                    ctx.fillRect(rectX, y0, rectW, barHeight);
+                    if (hasBarStroke)
+                        ctx.strokeRect(rectX, y0, rectW, barHeight);
+                    cumulativeBase += catVal;
+                    paletteIdx++;
+                }
+            }
+            else {
+                const xZero = valueScale(0);
+                const xEnd = valueScale(bin.total);
+                const rectX = Math.min(xZero, xEnd);
+                const rectW = Math.abs(xEnd - xZero);
+                ctx.fillStyle = (barStyle === null || barStyle === void 0 ? void 0 : barStyle.fill) || style.stroke || "#007bff";
+                ctx.fillRect(rectX, y0, rectW, barHeight);
+                if (hasBarStroke)
+                    ctx.strokeRect(rectX, y0, rectW, barHeight);
+            }
+        }
+    }
+};
+
+const RENDERERS = {
+    line: lineRenderer,
+    swarm: swarmRenderer,
+    candlestick: candlestickRenderer,
+    waterfall: waterfallRenderer,
+    bar: 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: scaleLinear().domain(timeExtent).range(timeRange),
+        value: 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 = 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 = Object.assign(Object.assign({}, 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 = useMemo(() => resolveAccessor(timeAccessor, "time"), [timeAccessor]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const getValue = useMemo(() => resolveAccessor(valueAccessor, "value"), [valueAccessor]);
+    const getCategory = useMemo(() => categoryAccessor
+        ? (typeof categoryAccessor === "function" ? categoryAccessor : (d) => d[categoryAccessor])
+        : undefined, [categoryAccessor]);
+    const bufferRef = useRef(new RingBuffer(windowSize));
+    const timeExtentRef = useRef(new IncrementalExtent());
+    const valueExtentRef = useRef(new IncrementalExtent());
+    const canvasRef = useRef(null);
+    const rafRef = useRef(0);
+    const dirtyRef = useRef(false);
+    const scalesRef = useRef(null);
+    const [annotationFrame, setAnnotationFrame] = useState(0);
+    const growingCapRef = useRef(windowSize);
+    // Hover state: ref for canvas (sync), React state for tooltip (async)
+    const hoverRef = useRef(null);
+    const [hoverPoint, setHoverPoint] = 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 = useRef(() => { });
+    // Stable scheduleRender — never recreated, so no stale closure chain
+    const scheduleRender = useCallback(() => {
+        if (rafRef.current)
+            return;
+        rafRef.current = requestAnimationFrame(() => renderFnRef.current());
+    }, []);
+    const pushPoint = 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 = useCallback((points) => {
+        for (const p of points) {
+            pushPoint(p);
+        }
+    }, [pushPoint]);
+    const clearAll = useCallback(() => {
+        bufferRef.current.clear();
+        timeExtentRef.current.clear();
+        valueExtentRef.current.clear();
+        dirtyRef.current = true;
+        scheduleRender();
+    }, [scheduleRender]);
+    useImperativeHandle(ref, () => ({
+        push: pushPoint,
+        pushMany: pushManyPoints,
+        clear: clearAll,
+        getData: () => bufferRef.current.toArray()
+    }), [pushPoint, pushManyPoints, clearAll]);
+    // Controlled data prop
+    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 = useRef(() => { });
+    const hoverLeaveRef = 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 = 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 = useCallback((e) => hoverHandlerRef.current(e), []);
+    const onMouseLeave = 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 = () => {
+        var _a;
+        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] = computeBinExtent(buf, getTime, getValue, binSize, getCategory);
+            vDomain = [0, maxTotal + maxTotal * extentPadding];
+        }
+        else if (chartType === "waterfall" && !fixedValueExtent && buf.size > 0) {
+            const [minCum, maxCum] = 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 = (_a = barStyle === null || barStyle === void 0 ? void 0 : barStyle.gap) !== null && _a !== void 0 ? _a : 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
+    useEffect(() => {
+        scheduleRender();
+        return () => {
+            if (rafRef.current) {
+                cancelAnimationFrame(rafRef.current);
+            }
+        };
+    }, [scheduleRender]);
+    // Re-render canvas when visual props change
+    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));
+});
+
+/**
+ * RealtimeLineChart - Simplified wrapper for streaming line charts.
+ *
+ * Wraps RealtimeFrame with `chartType="line"` and exposes stroke/strokeWidth
+ * as top-level props instead of requiring a `lineStyle` object.
+ *
+ * @example
+ * ```tsx
+ * const ref = useRef<RealtimeFrameHandle>(null)
+ *
+ * <RealtimeLineChart
+ *   ref={ref}
+ *   stroke="#007bff"
+ *   strokeWidth={2}
+ *   windowSize={200}
+ *   enableHover
+ * />
+ * ```
+ */
+const RealtimeLineChart = forwardRef(function RealtimeLineChart(props, ref) {
+    const { size = [500, 300], margin, className, arrowOfTime = "right", windowMode = "sliding", windowSize = 200, data, timeAccessor, valueAccessor, timeExtent, valueExtent, extentPadding, stroke = "#007bff", strokeWidth = 2, strokeDasharray, showAxes = true, background, enableHover, tooltipContent, onHover, annotations, svgAnnotationRules, tickFormatTime, tickFormatValue } = props;
+    const frameRef = useRef(null);
+    useImperativeHandle(ref, () => ({
+        push: (point) => { var _a; return (_a = frameRef.current) === null || _a === void 0 ? void 0 : _a.push(point); },
+        pushMany: (points) => { var _a; return (_a = frameRef.current) === null || _a === void 0 ? void 0 : _a.pushMany(points); },
+        clear: () => { var _a; return (_a = frameRef.current) === null || _a === void 0 ? void 0 : _a.clear(); },
+        getData: () => { var _a, _b; return (_b = (_a = frameRef.current) === null || _a === void 0 ? void 0 : _a.getData()) !== null && _b !== void 0 ? _b : []; }
+    }));
+    const lineStyle = { stroke, strokeWidth, strokeDasharray };
+    return (React.createElement(RealtimeFrame, { ref: frameRef, chartType: "line", size: size, margin: margin, className: className, arrowOfTime: arrowOfTime, windowMode: windowMode, windowSize: windowSize, data: data, timeAccessor: timeAccessor, valueAccessor: valueAccessor, timeExtent: timeExtent, valueExtent: valueExtent, extentPadding: extentPadding, lineStyle: lineStyle, showAxes: showAxes, background: background, hoverAnnotation: enableHover, tooltipContent: tooltipContent, customHoverBehavior: onHover, annotations: annotations, svgAnnotationRules: svgAnnotationRules, tickFormatTime: tickFormatTime, tickFormatValue: tickFormatValue }));
+});
+
+/**
+ * RealtimeBarChart - Simplified wrapper for streaming temporal histograms.
+ *
+ * Wraps RealtimeFrame with `chartType="bar"` and exposes bar styling as
+ * top-level props. Supports both simple and stacked (categorical) modes.
+ *
+ * Edge bins that only partially fall within the visible time window are
+ * rendered at proportionally narrower widths (Datadog-style).
+ *
+ * @example
+ * ```tsx
+ * // Simple histogram
+ * <RealtimeBarChart
+ *   ref={ref}
+ *   binSize={20}
+ *   fill="#007bff"
+ *   enableHover
+ * />
+ *
+ * // Stacked by category
+ * <RealtimeBarChart
+ *   ref={ref}
+ *   binSize={25}
+ *   categoryAccessor="category"
+ *   colors={{ errors: "#dc3545", warnings: "#fd7e14", info: "#007bff" }}
+ *   enableHover
+ * />
+ * ```
+ */
+const RealtimeBarChart = forwardRef(function RealtimeBarChart(props, ref) {
+    const { binSize, size = [500, 300], margin, className, arrowOfTime = "right", windowMode = "sliding", windowSize = 200, data, timeAccessor, valueAccessor, timeExtent, valueExtent, extentPadding, categoryAccessor, colors, fill, stroke, strokeWidth, gap, showAxes = true, background, enableHover, tooltipContent, onHover, annotations, svgAnnotationRules, tickFormatTime, tickFormatValue } = props;
+    const frameRef = useRef(null);
+    useImperativeHandle(ref, () => ({
+        push: (point) => { var _a; return (_a = frameRef.current) === null || _a === void 0 ? void 0 : _a.push(point); },
+        pushMany: (points) => { var _a; return (_a = frameRef.current) === null || _a === void 0 ? void 0 : _a.pushMany(points); },
+        clear: () => { var _a; return (_a = frameRef.current) === null || _a === void 0 ? void 0 : _a.clear(); },
+        getData: () => { var _a, _b; return (_b = (_a = frameRef.current) === null || _a === void 0 ? void 0 : _a.getData()) !== null && _b !== void 0 ? _b : []; }
+    }));
+    const barStyle = {};
+    if (fill != null)
+        barStyle.fill = fill;
+    if (stroke != null)
+        barStyle.stroke = stroke;
+    if (strokeWidth != null)
+        barStyle.strokeWidth = strokeWidth;
+    if (gap != null)
+        barStyle.gap = gap;
+    return (React.createElement(RealtimeFrame, { ref: frameRef, chartType: "bar", size: size, margin: margin, className: className, arrowOfTime: arrowOfTime, windowMode: windowMode, windowSize: windowSize, data: data, timeAccessor: timeAccessor, valueAccessor: valueAccessor, timeExtent: timeExtent, valueExtent: valueExtent, extentPadding: extentPadding, binSize: binSize, categoryAccessor: categoryAccessor, barColors: colors, barStyle: barStyle, showAxes: showAxes, background: background, hoverAnnotation: enableHover, tooltipContent: tooltipContent, customHoverBehavior: onHover, annotations: annotations, svgAnnotationRules: svgAnnotationRules, tickFormatTime: tickFormatTime, tickFormatValue: tickFormatValue }));
+});
+
+/**
+ * RealtimeSwarmChart - Simplified wrapper for streaming dot/swarm charts.
+ *
+ * Wraps RealtimeFrame with `chartType="swarm"` and exposes dot styling as
+ * top-level props. Each data point renders as an individual dot at its
+ * (time, value) coordinates.
+ *
+ * Supports threshold coloring via annotations to recolor dots that cross
+ * value boundaries.
+ *
+ * @example
+ * ```tsx
+ * <RealtimeSwarmChart
+ *   ref={ref}
+ *   radius={4}
+ *   opacity={0.8}
+ *   categoryAccessor="sensor"
+ *   colors={{ sensor1: "#007bff", sensor2: "#28a745" }}
+ * />
+ * ```
+ */
+const RealtimeSwarmChart = forwardRef(function RealtimeSwarmChart(props, ref) {
+    const { size = [500, 300], margin, className, arrowOfTime = "right", windowMode = "sliding", windowSize = 200, data, timeAccessor, valueAccessor, timeExtent, valueExtent, extentPadding, categoryAccessor, colors, radius, fill, opacity, stroke, strokeWidth, showAxes = true, background, enableHover, tooltipContent, onHover, annotations, svgAnnotationRules, tickFormatTime, tickFormatValue } = props;
+    const frameRef = useRef(null);
+    useImperativeHandle(ref, () => ({
+        push: (point) => { var _a; return (_a = frameRef.current) === null || _a === void 0 ? void 0 : _a.push(point); },
+        pushMany: (points) => { var _a; return (_a = frameRef.current) === null || _a === void 0 ? void 0 : _a.pushMany(points); },
+        clear: () => { var _a; return (_a = frameRef.current) === null || _a === void 0 ? void 0 : _a.clear(); },
+        getData: () => { var _a, _b; return (_b = (_a = frameRef.current) === null || _a === void 0 ? void 0 : _a.getData()) !== null && _b !== void 0 ? _b : []; }
+    }));
+    const swarmStyle = {};
+    if (radius != null)
+        swarmStyle.radius = radius;
+    if (fill != null)
+        swarmStyle.fill = fill;
+    if (opacity != null)
+        swarmStyle.opacity = opacity;
+    if (stroke != null)
+        swarmStyle.stroke = stroke;
+    if (strokeWidth != null)
+        swarmStyle.strokeWidth = strokeWidth;
+    return (React.createElement(RealtimeFrame, { ref: frameRef, chartType: "swarm", size: size, margin: margin, className: className, arrowOfTime: arrowOfTime, windowMode: windowMode, windowSize: windowSize, data: data, timeAccessor: timeAccessor, valueAccessor: valueAccessor, timeExtent: timeExtent, valueExtent: valueExtent, extentPadding: extentPadding, categoryAccessor: categoryAccessor, barColors: colors, swarmStyle: swarmStyle, showAxes: showAxes, background: background, hoverAnnotation: enableHover, tooltipContent: tooltipContent, customHoverBehavior: onHover, annotations: annotations, svgAnnotationRules: svgAnnotationRules, tickFormatTime: tickFormatTime, tickFormatValue: tickFormatValue }));
+});
+
+/**
+ * RealtimeWaterfallChart - Simplified wrapper for streaming waterfall charts.
+ *
+ * Wraps RealtimeFrame with `chartType="waterfall"` and exposes waterfall styling
+ * as top-level props. Visualizes cumulative deltas as connected bars rising and
+ * falling from a running baseline.
+ *
+ * @example
+ * ```tsx
+ * <RealtimeWaterfallChart
+ *   ref={ref}
+ *   positiveColor="#28a745"
+ *   negativeColor="#dc3545"
+ *   connectorStroke="#999"
+ *   windowSize={300}
+ * />
+ * ```
+ */
+const RealtimeWaterfallChart = forwardRef(function RealtimeWaterfallChart(props, ref) {
+    const { size = [500, 300], margin, className, arrowOfTime = "right", windowMode = "sliding", windowSize = 200, data, timeAccessor, valueAccessor, timeExtent, valueExtent, extentPadding, positiveColor, negativeColor, connectorStroke, connectorWidth, gap, stroke, strokeWidth, showAxes = true, background, enableHover, tooltipContent, onHover, annotations, svgAnnotationRules, tickFormatTime, tickFormatValue } = props;
+    const frameRef = useRef(null);
+    useImperativeHandle(ref, () => ({
+        push: (point) => { var _a; return (_a = frameRef.current) === null || _a === void 0 ? void 0 : _a.push(point); },
+        pushMany: (points) => { var _a; return (_a = frameRef.current) === null || _a === void 0 ? void 0 : _a.pushMany(points); },
+        clear: () => { var _a; return (_a = frameRef.current) === null || _a === void 0 ? void 0 : _a.clear(); },
+        getData: () => { var _a, _b; return (_b = (_a = frameRef.current) === null || _a === void 0 ? void 0 : _a.getData()) !== null && _b !== void 0 ? _b : []; }
+    }));
+    const waterfallStyle = {};
+    if (positiveColor != null)
+        waterfallStyle.positiveColor = positiveColor;
+    if (negativeColor != null)
+        waterfallStyle.negativeColor = negativeColor;
+    if (connectorStroke != null)
+        waterfallStyle.connectorStroke = connectorStroke;
+    if (connectorWidth != null)
+        waterfallStyle.connectorWidth = connectorWidth;
+    if (gap != null)
+        waterfallStyle.gap = gap;
+    if (stroke != null)
+        waterfallStyle.stroke = stroke;
+    if (strokeWidth != null)
+        waterfallStyle.strokeWidth = strokeWidth;
+    return (React.createElement(RealtimeFrame, { ref: frameRef, chartType: "waterfall", size: size, margin: margin, className: className, arrowOfTime: arrowOfTime, windowMode: windowMode, windowSize: windowSize, data: data, timeAccessor: timeAccessor, valueAccessor: valueAccessor, timeExtent: timeExtent, valueExtent: valueExtent, extentPadding: extentPadding, waterfallStyle: waterfallStyle, showAxes: showAxes, background: background, hoverAnnotation: enableHover, tooltipContent: tooltipContent, customHoverBehavior: onHover, annotations: annotations, svgAnnotationRules: svgAnnotationRules, tickFormatTime: tickFormatTime, tickFormatValue: tickFormatValue }));
+});
+
+export { IncrementalExtent, RealtimeBarChart, RealtimeFrame, RealtimeLineChart, RealtimeSwarmChart, RealtimeWaterfallChart, RingBuffer, barRenderer, candlestickRenderer, lineRenderer, swarmRenderer, waterfallRenderer };
+//# sourceMappingURL=realtime.module.js.map