@zendir/ui 0.4.1 → 0.6.0

package/dist/react/charts/unified/useChartStream.js

@@ -1,226 +1,213 @@
-import { useRef, useState, useCallback, useEffect } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
+//#region src/react/charts/unified/useChartStream.ts
+/**
+* @zendir/ui - Real-time Chart Streaming Hook
+*
+* Provides efficient real-time data streaming for charts.
+* Handles buffering, throttling, and memory management.
+*/
 function useChartStream(chartRef, options = {}) {
-  const {
-    maxPoints: _maxPoints = 1e3,
-    timeWindow: _timeWindow,
-    throttleMs = 16,
-    // ~60fps
-    bufferSize = 10,
-    decimate = true,
-    decimateThreshold = 5e3
-  } = options;
-  const bufferRef = useRef(/* @__PURE__ */ new Map());
-  const lastFlushRef = useRef(0);
-  const pointCountRef = useRef(0);
-  const [isPaused, setIsPaused] = useState(false);
-  const animationFrameRef = useRef();
-  const flush = useCallback(() => {
-    const chart = chartRef.current;
-    if (!chart || isPaused) return;
-    const now = Date.now();
-    if (now - lastFlushRef.current < throttleMs) {
-      animationFrameRef.current = requestAnimationFrame(flush);
-      return;
-    }
-    bufferRef.current.forEach((points, seriesIndex) => {
-      if (points.length === 0) return;
-      let processedPoints = points;
-      if (decimate && pointCountRef.current > decimateThreshold) {
-        processedPoints = decimateData(points, Math.ceil(points.length / 2));
-      }
-      processedPoints.forEach((point) => {
-        chart.appendData(seriesIndex, point);
-      });
-      pointCountRef.current += processedPoints.length;
-    });
-    bufferRef.current.clear();
-    lastFlushRef.current = now;
-  }, [chartRef, isPaused, throttleMs, decimate, decimateThreshold]);
-  const push = useCallback((seriesIndex, point) => {
-    if (isPaused) return;
-    let buffer = bufferRef.current.get(seriesIndex);
-    if (!buffer) {
-      buffer = [];
-      bufferRef.current.set(seriesIndex, buffer);
-    }
-    buffer.push(point);
-    if (buffer.length >= bufferSize) {
-      flush();
-    } else if (!animationFrameRef.current) {
-      animationFrameRef.current = requestAnimationFrame(() => {
-        animationFrameRef.current = void 0;
-        flush();
-      });
-    }
-  }, [isPaused, bufferSize, flush]);
-  const pushBatch = useCallback((seriesIndex, points) => {
-    if (isPaused || points.length === 0) return;
-    let buffer = bufferRef.current.get(seriesIndex);
-    if (!buffer) {
-      buffer = [];
-      bufferRef.current.set(seriesIndex, buffer);
-    }
-    buffer.push(...points);
-    flush();
-  }, [isPaused, flush]);
-  const clear = useCallback(() => {
-    var _a;
-    bufferRef.current.clear();
-    pointCountRef.current = 0;
-    (_a = chartRef.current) == null ? void 0 : _a.clearData();
-  }, [chartRef]);
-  const pause = useCallback(() => setIsPaused(true), []);
-  const resume = useCallback(() => setIsPaused(false), []);
-  useEffect(() => {
-    return () => {
-      if (animationFrameRef.current) {
-        cancelAnimationFrame(animationFrameRef.current);
-      }
-    };
-  }, []);
-  return {
-    push,
-    pushBatch,
-    clear,
-    pause,
-    resume,
-    isPaused,
-    pointCount: pointCountRef.current
-  };
+	const { maxPoints: _maxPoints = 1e3, timeWindow: _timeWindow, throttleMs = 16, bufferSize = 10, decimate = true, decimateThreshold = 5e3 } = options;
+	const bufferRef = useRef(/* @__PURE__ */ new Map());
+	const lastFlushRef = useRef(0);
+	const pointCountRef = useRef(0);
+	const [isPaused, setIsPaused] = useState(false);
+	const animationFrameRef = useRef();
+	const flush = useCallback(() => {
+		const chart = chartRef.current;
+		if (!chart || isPaused) return;
+		const now = Date.now();
+		if (now - lastFlushRef.current < throttleMs) {
+			animationFrameRef.current = requestAnimationFrame(flush);
+			return;
+		}
+		bufferRef.current.forEach((points, seriesIndex) => {
+			if (points.length === 0) return;
+			let processedPoints = points;
+			if (decimate && pointCountRef.current > decimateThreshold) processedPoints = decimateData(points, Math.ceil(points.length / 2));
+			processedPoints.forEach((point) => {
+				chart.appendData(seriesIndex, point);
+			});
+			pointCountRef.current += processedPoints.length;
+		});
+		bufferRef.current.clear();
+		lastFlushRef.current = now;
+	}, [
+		chartRef,
+		isPaused,
+		throttleMs,
+		decimate,
+		decimateThreshold
+	]);
+	const push = useCallback((seriesIndex, point) => {
+		if (isPaused) return;
+		let buffer = bufferRef.current.get(seriesIndex);
+		if (!buffer) {
+			buffer = [];
+			bufferRef.current.set(seriesIndex, buffer);
+		}
+		buffer.push(point);
+		if (buffer.length >= bufferSize) flush();
+		else if (!animationFrameRef.current) animationFrameRef.current = requestAnimationFrame(() => {
+			animationFrameRef.current = void 0;
+			flush();
+		});
+	}, [
+		isPaused,
+		bufferSize,
+		flush
+	]);
+	const pushBatch = useCallback((seriesIndex, points) => {
+		if (isPaused || points.length === 0) return;
+		let buffer = bufferRef.current.get(seriesIndex);
+		if (!buffer) {
+			buffer = [];
+			bufferRef.current.set(seriesIndex, buffer);
+		}
+		buffer.push(...points);
+		flush();
+	}, [isPaused, flush]);
+	const clear = useCallback(() => {
+		bufferRef.current.clear();
+		pointCountRef.current = 0;
+		chartRef.current?.clearData();
+	}, [chartRef]);
+	const pause = useCallback(() => setIsPaused(true), []);
+	const resume = useCallback(() => setIsPaused(false), []);
+	useEffect(() => {
+		return () => {
+			if (animationFrameRef.current) cancelAnimationFrame(animationFrameRef.current);
+		};
+	}, []);
+	return {
+		push,
+		pushBatch,
+		clear,
+		pause,
+		resume,
+		isPaused,
+		pointCount: pointCountRef.current
+	};
 }
+/**
+* Largest Triangle Three Buckets (LTTB) algorithm for data decimation
+* Preserves visual shape while reducing point count
+*/
 function decimateData(data, threshold) {
-  if (data.length <= threshold) return data;
-  const result = [];
-  const bucketSize = (data.length - 2) / (threshold - 2);
-  result.push(data[0]);
-  let a = 0;
-  for (let i = 0; i < threshold - 2; i++) {
-    const bucketStart = Math.floor((i + 1) * bucketSize) + 1;
-    const bucketEnd = Math.floor((i + 2) * bucketSize) + 1;
-    const bucketLength = Math.min(bucketEnd, data.length) - bucketStart;
-    let avgX = 0;
-    let avgY = 0;
-    const nextBucketStart = Math.floor((i + 2) * bucketSize) + 1;
-    const nextBucketEnd = Math.min(Math.floor((i + 3) * bucketSize) + 1, data.length);
-    const nextBucketLength = nextBucketEnd - nextBucketStart;
-    for (let j = nextBucketStart; j < nextBucketEnd; j++) {
-      const point = data[j];
-      const [x, y] = getPointXY(point);
-      avgX += x;
-      avgY += y;
-    }
-    avgX /= nextBucketLength || 1;
-    avgY /= nextBucketLength || 1;
-    const [aX, aY] = getPointXY(data[a]);
-    let maxArea = -1;
-    let maxIdx = bucketStart;
-    for (let j = bucketStart; j < bucketStart + bucketLength; j++) {
-      const point = data[j];
-      const [x, y] = getPointXY(point);
-      const area = Math.abs(
-        (aX - avgX) * (y - aY) - (aX - x) * (avgY - aY)
-      );
-      if (area > maxArea) {
-        maxArea = area;
-        maxIdx = j;
-      }
-    }
-    result.push(data[maxIdx]);
-    a = maxIdx;
-  }
-  result.push(data[data.length - 1]);
-  return result;
+	if (data.length <= threshold) return data;
+	const result = [];
+	const bucketSize = (data.length - 2) / (threshold - 2);
+	result.push(data[0]);
+	let a = 0;
+	for (let i = 0; i < threshold - 2; i++) {
+		const bucketStart = Math.floor((i + 1) * bucketSize) + 1;
+		const bucketEnd = Math.floor((i + 2) * bucketSize) + 1;
+		const bucketLength = Math.min(bucketEnd, data.length) - bucketStart;
+		let avgX = 0;
+		let avgY = 0;
+		const nextBucketStart = Math.floor((i + 2) * bucketSize) + 1;
+		const nextBucketEnd = Math.min(Math.floor((i + 3) * bucketSize) + 1, data.length);
+		const nextBucketLength = nextBucketEnd - nextBucketStart;
+		for (let j = nextBucketStart; j < nextBucketEnd; j++) {
+			const point = data[j];
+			const [x, y] = getPointXY(point);
+			avgX += x;
+			avgY += y;
+		}
+		avgX /= nextBucketLength || 1;
+		avgY /= nextBucketLength || 1;
+		const [aX, aY] = getPointXY(data[a]);
+		let maxArea = -1;
+		let maxIdx = bucketStart;
+		for (let j = bucketStart; j < bucketStart + bucketLength; j++) {
+			const point = data[j];
+			const [x, y] = getPointXY(point);
+			const area = Math.abs((aX - avgX) * (y - aY) - (aX - x) * (avgY - aY));
+			if (area > maxArea) {
+				maxArea = area;
+				maxIdx = j;
+			}
+		}
+		result.push(data[maxIdx]);
+		a = maxIdx;
+	}
+	result.push(data[data.length - 1]);
+	return result;
 }
 function getPointXY(point) {
-  if ("time" in point) {
-    return [
-      typeof point.time === "number" ? point.time : new Date(point.time).getTime(),
-      point.value
-    ];
-  }
-  return [
-    typeof point.x === "number" ? point.x : 0,
-    point.y
-  ];
+	if ("time" in point) return [typeof point.time === "number" ? point.time : new Date(point.time).getTime(), point.value];
+	return [typeof point.x === "number" ? point.x : 0, point.y];
 }
 function useWebSocketStream(chartRef, options) {
-  const {
-    url,
-    reconnect = true,
-    reconnectDelay = 1e3,
-    maxReconnects = 10,
-    parseMessage,
-    ...streamOptions
-  } = options;
-  const wsRef = useRef(null);
-  const reconnectCountRef = useRef(0);
-  const reconnectTimerRef = useRef();
-  const [connectionState, setConnectionState] = useState("disconnected");
-  const stream = useChartStream(chartRef, streamOptions);
-  const connect = useCallback(() => {
-    var _a;
-    if (((_a = wsRef.current) == null ? void 0 : _a.readyState) === WebSocket.OPEN) return;
-    setConnectionState("connecting");
-    const ws = new WebSocket(url);
-    ws.onopen = () => {
-      setConnectionState("connected");
-      reconnectCountRef.current = 0;
-    };
-    ws.onmessage = (event) => {
-      try {
-        const data = JSON.parse(event.data);
-        const parsed = parseMessage ? parseMessage(data) : defaultParseMessage(data);
-        if (parsed) {
-          stream.push(parsed.seriesIndex, parsed.point);
-        }
-      } catch (e) {
-      }
-    };
-    ws.onerror = () => {
-      setConnectionState("error");
-    };
-    ws.onclose = () => {
-      setConnectionState("disconnected");
-      if (reconnect && reconnectCountRef.current < maxReconnects) {
-        reconnectCountRef.current++;
-        reconnectTimerRef.current = setTimeout(connect, reconnectDelay * reconnectCountRef.current);
-      }
-    };
-    wsRef.current = ws;
-  }, [url, reconnect, reconnectDelay, maxReconnects, parseMessage, stream]);
-  const disconnect = useCallback(() => {
-    var _a;
-    clearTimeout(reconnectTimerRef.current);
-    (_a = wsRef.current) == null ? void 0 : _a.close();
-    wsRef.current = null;
-  }, []);
-  useEffect(() => {
-    connect();
-    return disconnect;
-  }, [connect, disconnect]);
-  return {
-    ...stream,
-    connectionState,
-    connect,
-    disconnect
-  };
+	const { url, reconnect = true, reconnectDelay = 1e3, maxReconnects = 10, parseMessage, ...streamOptions } = options;
+	const wsRef = useRef(null);
+	const reconnectCountRef = useRef(0);
+	const reconnectTimerRef = useRef();
+	const [connectionState, setConnectionState] = useState("disconnected");
+	const stream = useChartStream(chartRef, streamOptions);
+	const connect = useCallback(() => {
+		if (wsRef.current?.readyState === WebSocket.OPEN) return;
+		setConnectionState("connecting");
+		const ws = new WebSocket(url);
+		ws.onopen = () => {
+			setConnectionState("connected");
+			reconnectCountRef.current = 0;
+		};
+		ws.onmessage = (event) => {
+			try {
+				const data = JSON.parse(event.data);
+				const parsed = parseMessage ? parseMessage(data) : defaultParseMessage(data);
+				if (parsed) stream.push(parsed.seriesIndex, parsed.point);
+			} catch (e) {}
+		};
+		ws.onerror = () => {
+			setConnectionState("error");
+		};
+		ws.onclose = () => {
+			setConnectionState("disconnected");
+			if (reconnect && reconnectCountRef.current < maxReconnects) {
+				reconnectCountRef.current++;
+				reconnectTimerRef.current = setTimeout(connect, reconnectDelay * reconnectCountRef.current);
+			}
+		};
+		wsRef.current = ws;
+	}, [
+		url,
+		reconnect,
+		reconnectDelay,
+		maxReconnects,
+		parseMessage,
+		stream
+	]);
+	const disconnect = useCallback(() => {
+		clearTimeout(reconnectTimerRef.current);
+		wsRef.current?.close();
+		wsRef.current = null;
+	}, []);
+	useEffect(() => {
+		connect();
+		return disconnect;
+	}, [connect, disconnect]);
+	return {
+		...stream,
+		connectionState,
+		connect,
+		disconnect
+	};
 }
 function defaultParseMessage(data) {
-  if (typeof data !== "object" || data === null) return null;
-  const obj = data;
-  if ("time" in obj && "value" in obj) {
-    return {
-      seriesIndex: typeof obj.seriesIndex === "number" ? obj.seriesIndex : 0,
-      point: {
-        time: obj.time,
-        value: obj.value
-      }
-    };
-  }
-  return null;
+	if (typeof data !== "object" || data === null) return null;
+	const obj = data;
+	if ("time" in obj && "value" in obj) return {
+		seriesIndex: typeof obj.seriesIndex === "number" ? obj.seriesIndex : 0,
+		point: {
+			time: obj.time,
+			value: obj.value
+		}
+	};
+	return null;
 }
-export {
-  useChartStream,
-  useWebSocketStream
-};
-//# sourceMappingURL=useChartStream.js.map
+//#endregion
+export { useChartStream, useWebSocketStream };
+
+//# sourceMappingURL=useChartStream.js.map

package/dist/react/charts/unified/useChartStream.js.map

@@ -1 +1 @@
-{"version":3,"file":"useChartStream.js","sources":["../../../../src/react/charts/unified/useChartStream.ts"],"sourcesContent":["/**\n * @zendir/ui - Real-time Chart Streaming Hook\n * \n * Provides efficient real-time data streaming for charts.\n * Handles buffering, throttling, and memory management.\n */\n\nimport { useRef, useCallback, useEffect, useState } from 'react';\nimport type { AstroChartHandle } from './AstroChart';\nimport type { TimeSeriesPoint, DataPoint } from './types';\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport interface StreamOptions {\n  /** Maximum data points to keep */\n  maxPoints?: number;\n  /** Time window in milliseconds (alternative to maxPoints) */\n  timeWindow?: number;\n  /** Throttle interval in milliseconds */\n  throttleMs?: number;\n  /** Buffer size before flushing */\n  bufferSize?: number;\n  /** Enable data decimation for large datasets */\n  decimate?: boolean;\n  /** Decimation threshold (start decimating above this count) */\n  decimateThreshold?: number;\n}\n\nexport interface StreamController {\n  /** Push a single data point */\n  push: (seriesIndex: number, point: TimeSeriesPoint | DataPoint) => void;\n  /** Push multiple data points */\n  pushBatch: (seriesIndex: number, points: (TimeSeriesPoint | DataPoint)[]) => void;\n  /** Clear all data */\n  clear: () => void;\n  /** Pause streaming */\n  pause: () => void;\n  /** Resume streaming */\n  resume: () => void;\n  /** Get current state */\n  isPaused: boolean;\n  /** Get current point count */\n  pointCount: number;\n}\n\n// =============================================================================\n// Hook Implementation\n// =============================================================================\n\nexport function useChartStream(\n  chartRef: React.RefObject<AstroChartHandle>,\n  options: StreamOptions = {}\n): StreamController {\n  const {\n    maxPoints: _maxPoints = 1000,\n    timeWindow: _timeWindow,\n    throttleMs = 16, // ~60fps\n    bufferSize = 10,\n    decimate = true,\n    decimateThreshold = 5000,\n  } = options;\n\n  const bufferRef = useRef<Map<number, (TimeSeriesPoint | DataPoint)[]>>(new Map());\n  const lastFlushRef = useRef<number>(0);\n  const pointCountRef = useRef<number>(0);\n  const [isPaused, setIsPaused] = useState(false);\n  const animationFrameRef = useRef<number>();\n\n  // Flush buffer to chart\n  const flush = useCallback(() => {\n    const chart = chartRef.current;\n    if (!chart || isPaused) return;\n\n    const now = Date.now();\n    if (now - lastFlushRef.current < throttleMs) {\n      // Schedule next flush\n      animationFrameRef.current = requestAnimationFrame(flush);\n      return;\n    }\n\n    bufferRef.current.forEach((points, seriesIndex) => {\n      if (points.length === 0) return;\n\n      // Apply decimation if needed\n      let processedPoints = points;\n      if (decimate && pointCountRef.current > decimateThreshold) {\n        processedPoints = decimateData(points, Math.ceil(points.length / 2));\n      }\n\n      // Append each point\n      processedPoints.forEach(point => {\n        chart.appendData(seriesIndex, point);\n      });\n\n      pointCountRef.current += processedPoints.length;\n    });\n\n    // Clear buffer\n    bufferRef.current.clear();\n    lastFlushRef.current = now;\n  }, [chartRef, isPaused, throttleMs, decimate, decimateThreshold]);\n\n  // Push single point\n  const push = useCallback((seriesIndex: number, point: TimeSeriesPoint | DataPoint) => {\n    if (isPaused) return;\n\n    let buffer = bufferRef.current.get(seriesIndex);\n    if (!buffer) {\n      buffer = [];\n      bufferRef.current.set(seriesIndex, buffer);\n    }\n\n    buffer.push(point);\n\n    // Flush if buffer is full\n    if (buffer.length >= bufferSize) {\n      flush();\n    } else if (!animationFrameRef.current) {\n      // Schedule flush\n      animationFrameRef.current = requestAnimationFrame(() => {\n        animationFrameRef.current = undefined;\n        flush();\n      });\n    }\n  }, [isPaused, bufferSize, flush]);\n\n  // Push batch\n  const pushBatch = useCallback((seriesIndex: number, points: (TimeSeriesPoint | DataPoint)[]) => {\n    if (isPaused || points.length === 0) return;\n\n    let buffer = bufferRef.current.get(seriesIndex);\n    if (!buffer) {\n      buffer = [];\n      bufferRef.current.set(seriesIndex, buffer);\n    }\n\n    buffer.push(...points);\n    flush();\n  }, [isPaused, flush]);\n\n  // Clear all data\n  const clear = useCallback(() => {\n    bufferRef.current.clear();\n    pointCountRef.current = 0;\n    chartRef.current?.clearData();\n  }, [chartRef]);\n\n  // Pause/resume\n  const pause = useCallback(() => setIsPaused(true), []);\n  const resume = useCallback(() => setIsPaused(false), []);\n\n  // Cleanup\n  useEffect(() => {\n    return () => {\n      if (animationFrameRef.current) {\n        cancelAnimationFrame(animationFrameRef.current);\n      }\n    };\n  }, []);\n\n  return {\n    push,\n    pushBatch,\n    clear,\n    pause,\n    resume,\n    isPaused,\n    pointCount: pointCountRef.current,\n  };\n}\n\n// =============================================================================\n// Data Decimation\n// =============================================================================\n\n/**\n * Largest Triangle Three Buckets (LTTB) algorithm for data decimation\n * Preserves visual shape while reducing point count\n */\nfunction decimateData<T extends TimeSeriesPoint | DataPoint>(\n  data: T[],\n  threshold: number\n): T[] {\n  if (data.length <= threshold) return data;\n\n  const result: T[] = [];\n  const bucketSize = (data.length - 2) / (threshold - 2);\n\n  // Always include first point\n  result.push(data[0]);\n\n  let a = 0; // Previous selected point\n\n  for (let i = 0; i < threshold - 2; i++) {\n    // Calculate bucket range\n    const bucketStart = Math.floor((i + 1) * bucketSize) + 1;\n    const bucketEnd = Math.floor((i + 2) * bucketSize) + 1;\n    const bucketLength = Math.min(bucketEnd, data.length) - bucketStart;\n\n    // Calculate average point in next bucket\n    let avgX = 0;\n    let avgY = 0;\n    const nextBucketStart = Math.floor((i + 2) * bucketSize) + 1;\n    const nextBucketEnd = Math.min(Math.floor((i + 3) * bucketSize) + 1, data.length);\n    const nextBucketLength = nextBucketEnd - nextBucketStart;\n\n    for (let j = nextBucketStart; j < nextBucketEnd; j++) {\n      const point = data[j];\n      const [x, y] = getPointXY(point);\n      avgX += x;\n      avgY += y;\n    }\n    avgX /= nextBucketLength || 1;\n    avgY /= nextBucketLength || 1;\n\n    // Find point with largest triangle area\n    const [aX, aY] = getPointXY(data[a]);\n    let maxArea = -1;\n    let maxIdx = bucketStart;\n\n    for (let j = bucketStart; j < bucketStart + bucketLength; j++) {\n      const point = data[j];\n      const [x, y] = getPointXY(point);\n      \n      // Triangle area\n      const area = Math.abs(\n        (aX - avgX) * (y - aY) - (aX - x) * (avgY - aY)\n      );\n\n      if (area > maxArea) {\n        maxArea = area;\n        maxIdx = j;\n      }\n    }\n\n    result.push(data[maxIdx]);\n    a = maxIdx;\n  }\n\n  // Always include last point\n  result.push(data[data.length - 1]);\n\n  return result;\n}\n\nfunction getPointXY(point: TimeSeriesPoint | DataPoint): [number, number] {\n  if ('time' in point) {\n    return [\n      typeof point.time === 'number' ? point.time : new Date(point.time).getTime(),\n      point.value,\n    ];\n  }\n  return [\n    typeof point.x === 'number' ? point.x : 0,\n    point.y,\n  ];\n}\n\n// =============================================================================\n// WebSocket Stream Hook\n// =============================================================================\n\nexport interface WebSocketStreamOptions extends StreamOptions {\n  /** WebSocket URL */\n  url: string;\n  /** Reconnect on disconnect */\n  reconnect?: boolean;\n  /** Reconnect delay in milliseconds */\n  reconnectDelay?: number;\n  /** Maximum reconnect attempts */\n  maxReconnects?: number;\n  /** Message parser */\n  parseMessage?: (data: unknown) => { seriesIndex: number; point: TimeSeriesPoint | DataPoint } | null;\n}\n\nexport interface WebSocketStreamController extends StreamController {\n  /** WebSocket connection state */\n  connectionState: 'connecting' | 'connected' | 'disconnected' | 'error';\n  /** Manually connect */\n  connect: () => void;\n  /** Manually disconnect */\n  disconnect: () => void;\n}\n\nexport function useWebSocketStream(\n  chartRef: React.RefObject<AstroChartHandle>,\n  options: WebSocketStreamOptions\n): WebSocketStreamController {\n  const {\n    url,\n    reconnect = true,\n    reconnectDelay = 1000,\n    maxReconnects = 10,\n    parseMessage,\n    ...streamOptions\n  } = options;\n\n  const wsRef = useRef<WebSocket | null>(null);\n  const reconnectCountRef = useRef(0);\n  const reconnectTimerRef = useRef<ReturnType<typeof setTimeout>>();\n  const [connectionState, setConnectionState] = useState<WebSocketStreamController['connectionState']>('disconnected');\n  \n  const stream = useChartStream(chartRef, streamOptions);\n\n  const connect = useCallback(() => {\n    if (wsRef.current?.readyState === WebSocket.OPEN) return;\n\n    setConnectionState('connecting');\n    const ws = new WebSocket(url);\n\n    ws.onopen = () => {\n      setConnectionState('connected');\n      reconnectCountRef.current = 0;\n    };\n\n    ws.onmessage = (event) => {\n      try {\n        const data = JSON.parse(event.data);\n        const parsed = parseMessage \n          ? parseMessage(data) \n          : defaultParseMessage(data);\n        \n        if (parsed) {\n          stream.push(parsed.seriesIndex, parsed.point);\n        }\n      } catch (e) {\n        if (import.meta.env.DEV) {\n          console.error('Failed to parse WebSocket message:', e);\n        }\n      }\n    };\n\n    ws.onerror = () => {\n      setConnectionState('error');\n    };\n\n    ws.onclose = () => {\n      setConnectionState('disconnected');\n      \n      if (reconnect && reconnectCountRef.current < maxReconnects) {\n        reconnectCountRef.current++;\n        reconnectTimerRef.current = setTimeout(connect, reconnectDelay * reconnectCountRef.current);\n      }\n    };\n\n    wsRef.current = ws;\n  }, [url, reconnect, reconnectDelay, maxReconnects, parseMessage, stream]);\n\n  const disconnect = useCallback(() => {\n    clearTimeout(reconnectTimerRef.current);\n    wsRef.current?.close();\n    wsRef.current = null;\n  }, []);\n\n  // Auto-connect on mount\n  useEffect(() => {\n    connect();\n    return disconnect;\n  }, [connect, disconnect]);\n\n  return {\n    ...stream,\n    connectionState,\n    connect,\n    disconnect,\n  };\n}\n\nfunction defaultParseMessage(data: unknown): { seriesIndex: number; point: TimeSeriesPoint } | null {\n  if (typeof data !== 'object' || data === null) return null;\n  \n  const obj = data as Record<string, unknown>;\n  \n  if ('time' in obj && 'value' in obj) {\n    return {\n      seriesIndex: typeof obj.seriesIndex === 'number' ? obj.seriesIndex : 0,\n      point: {\n        time: obj.time as number,\n        value: obj.value as number,\n      },\n    };\n  }\n  \n  return null;\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useChartStream.js","names":[],"sources":["../../../../src/react/charts/unified/useChartStream.ts"],"sourcesContent":["/**\n * @zendir/ui - Real-time Chart Streaming Hook\n *\n * Provides efficient real-time data streaming for charts.\n * Handles buffering, throttling, and memory management.\n */\n\nimport { useRef, useCallback, useEffect, useState } from \"react\";\nimport type { AstroChartHandle } from \"./AstroChart\";\nimport type { TimeSeriesPoint, DataPoint } from \"./types\";\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport interface StreamOptions {\n  /** Maximum data points to keep */\n  maxPoints?: number;\n  /** Time window in milliseconds (alternative to maxPoints) */\n  timeWindow?: number;\n  /** Throttle interval in milliseconds */\n  throttleMs?: number;\n  /** Buffer size before flushing */\n  bufferSize?: number;\n  /** Enable data decimation for large datasets */\n  decimate?: boolean;\n  /** Decimation threshold (start decimating above this count) */\n  decimateThreshold?: number;\n}\n\nexport interface StreamController {\n  /** Push a single data point */\n  push: (seriesIndex: number, point: TimeSeriesPoint | DataPoint) => void;\n  /** Push multiple data points */\n  pushBatch: (\n    seriesIndex: number,\n    points: (TimeSeriesPoint | DataPoint)[],\n  ) => void;\n  /** Clear all data */\n  clear: () => void;\n  /** Pause streaming */\n  pause: () => void;\n  /** Resume streaming */\n  resume: () => void;\n  /** Get current state */\n  isPaused: boolean;\n  /** Get current point count */\n  pointCount: number;\n}\n\n// =============================================================================\n// Hook Implementation\n// =============================================================================\n\nexport function useChartStream(\n  chartRef: React.RefObject<AstroChartHandle>,\n  options: StreamOptions = {},\n): StreamController {\n  const {\n    maxPoints: _maxPoints = 1000,\n    timeWindow: _timeWindow,\n    throttleMs = 16, // ~60fps\n    bufferSize = 10,\n    decimate = true,\n    decimateThreshold = 5000,\n  } = options;\n\n  const bufferRef = useRef<Map<number, (TimeSeriesPoint | DataPoint)[]>>(\n    new Map(),\n  );\n  const lastFlushRef = useRef<number>(0);\n  const pointCountRef = useRef<number>(0);\n  const [isPaused, setIsPaused] = useState(false);\n  const animationFrameRef = useRef<number>();\n\n  // Flush buffer to chart\n  const flush = useCallback(() => {\n    const chart = chartRef.current;\n    if (!chart || isPaused) return;\n\n    const now = Date.now();\n    if (now - lastFlushRef.current < throttleMs) {\n      // Schedule next flush\n      animationFrameRef.current = requestAnimationFrame(flush);\n      return;\n    }\n\n    bufferRef.current.forEach((points, seriesIndex) => {\n      if (points.length === 0) return;\n\n      // Apply decimation if needed\n      let processedPoints = points;\n      if (decimate && pointCountRef.current > decimateThreshold) {\n        processedPoints = decimateData(points, Math.ceil(points.length / 2));\n      }\n\n      // Append each point\n      processedPoints.forEach((point) => {\n        chart.appendData(seriesIndex, point);\n      });\n\n      pointCountRef.current += processedPoints.length;\n    });\n\n    // Clear buffer\n    bufferRef.current.clear();\n    lastFlushRef.current = now;\n  }, [chartRef, isPaused, throttleMs, decimate, decimateThreshold]);\n\n  // Push single point\n  const push = useCallback(\n    (seriesIndex: number, point: TimeSeriesPoint | DataPoint) => {\n      if (isPaused) return;\n\n      let buffer = bufferRef.current.get(seriesIndex);\n      if (!buffer) {\n        buffer = [];\n        bufferRef.current.set(seriesIndex, buffer);\n      }\n\n      buffer.push(point);\n\n      // Flush if buffer is full\n      if (buffer.length >= bufferSize) {\n        flush();\n      } else if (!animationFrameRef.current) {\n        // Schedule flush\n        animationFrameRef.current = requestAnimationFrame(() => {\n          animationFrameRef.current = undefined;\n          flush();\n        });\n      }\n    },\n    [isPaused, bufferSize, flush],\n  );\n\n  // Push batch\n  const pushBatch = useCallback(\n    (seriesIndex: number, points: (TimeSeriesPoint | DataPoint)[]) => {\n      if (isPaused || points.length === 0) return;\n\n      let buffer = bufferRef.current.get(seriesIndex);\n      if (!buffer) {\n        buffer = [];\n        bufferRef.current.set(seriesIndex, buffer);\n      }\n\n      buffer.push(...points);\n      flush();\n    },\n    [isPaused, flush],\n  );\n\n  // Clear all data\n  const clear = useCallback(() => {\n    bufferRef.current.clear();\n    pointCountRef.current = 0;\n    chartRef.current?.clearData();\n  }, [chartRef]);\n\n  // Pause/resume\n  const pause = useCallback(() => setIsPaused(true), []);\n  const resume = useCallback(() => setIsPaused(false), []);\n\n  // Cleanup\n  useEffect(() => {\n    return () => {\n      if (animationFrameRef.current) {\n        cancelAnimationFrame(animationFrameRef.current);\n      }\n    };\n  }, []);\n\n  return {\n    push,\n    pushBatch,\n    clear,\n    pause,\n    resume,\n    isPaused,\n    pointCount: pointCountRef.current,\n  };\n}\n\n// =============================================================================\n// Data Decimation\n// =============================================================================\n\n/**\n * Largest Triangle Three Buckets (LTTB) algorithm for data decimation\n * Preserves visual shape while reducing point count\n */\nfunction decimateData<T extends TimeSeriesPoint | DataPoint>(\n  data: T[],\n  threshold: number,\n): T[] {\n  if (data.length <= threshold) return data;\n\n  const result: T[] = [];\n  const bucketSize = (data.length - 2) / (threshold - 2);\n\n  // Always include first point\n  result.push(data[0]);\n\n  let a = 0; // Previous selected point\n\n  for (let i = 0; i < threshold - 2; i++) {\n    // Calculate bucket range\n    const bucketStart = Math.floor((i + 1) * bucketSize) + 1;\n    const bucketEnd = Math.floor((i + 2) * bucketSize) + 1;\n    const bucketLength = Math.min(bucketEnd, data.length) - bucketStart;\n\n    // Calculate average point in next bucket\n    let avgX = 0;\n    let avgY = 0;\n    const nextBucketStart = Math.floor((i + 2) * bucketSize) + 1;\n    const nextBucketEnd = Math.min(\n      Math.floor((i + 3) * bucketSize) + 1,\n      data.length,\n    );\n    const nextBucketLength = nextBucketEnd - nextBucketStart;\n\n    for (let j = nextBucketStart; j < nextBucketEnd; j++) {\n      const point = data[j];\n      const [x, y] = getPointXY(point);\n      avgX += x;\n      avgY += y;\n    }\n    avgX /= nextBucketLength || 1;\n    avgY /= nextBucketLength || 1;\n\n    // Find point with largest triangle area\n    const [aX, aY] = getPointXY(data[a]);\n    let maxArea = -1;\n    let maxIdx = bucketStart;\n\n    for (let j = bucketStart; j < bucketStart + bucketLength; j++) {\n      const point = data[j];\n      const [x, y] = getPointXY(point);\n\n      // Triangle area\n      const area = Math.abs((aX - avgX) * (y - aY) - (aX - x) * (avgY - aY));\n\n      if (area > maxArea) {\n        maxArea = area;\n        maxIdx = j;\n      }\n    }\n\n    result.push(data[maxIdx]);\n    a = maxIdx;\n  }\n\n  // Always include last point\n  result.push(data[data.length - 1]);\n\n  return result;\n}\n\nfunction getPointXY(point: TimeSeriesPoint | DataPoint): [number, number] {\n  if (\"time\" in point) {\n    return [\n      typeof point.time === \"number\"\n        ? point.time\n        : new Date(point.time).getTime(),\n      point.value,\n    ];\n  }\n  return [typeof point.x === \"number\" ? point.x : 0, point.y];\n}\n\n// =============================================================================\n// WebSocket Stream Hook\n// =============================================================================\n\nexport interface WebSocketStreamOptions extends StreamOptions {\n  /** WebSocket URL */\n  url: string;\n  /** Reconnect on disconnect */\n  reconnect?: boolean;\n  /** Reconnect delay in milliseconds */\n  reconnectDelay?: number;\n  /** Maximum reconnect attempts */\n  maxReconnects?: number;\n  /** Message parser */\n  parseMessage?: (\n    data: unknown,\n  ) => { seriesIndex: number; point: TimeSeriesPoint | DataPoint } | null;\n}\n\nexport interface WebSocketStreamController extends StreamController {\n  /** WebSocket connection state */\n  connectionState: \"connecting\" | \"connected\" | \"disconnected\" | \"error\";\n  /** Manually connect */\n  connect: () => void;\n  /** Manually disconnect */\n  disconnect: () => void;\n}\n\nexport function useWebSocketStream(\n  chartRef: React.RefObject<AstroChartHandle>,\n  options: WebSocketStreamOptions,\n): WebSocketStreamController {\n  const {\n    url,\n    reconnect = true,\n    reconnectDelay = 1000,\n    maxReconnects = 10,\n    parseMessage,\n    ...streamOptions\n  } = options;\n\n  const wsRef = useRef<WebSocket | null>(null);\n  const reconnectCountRef = useRef(0);\n  const reconnectTimerRef = useRef<ReturnType<typeof setTimeout>>();\n  const [connectionState, setConnectionState] =\n    useState<WebSocketStreamController[\"connectionState\"]>(\"disconnected\");\n\n  const stream = useChartStream(chartRef, streamOptions);\n\n  const connect = useCallback(() => {\n    if (wsRef.current?.readyState === WebSocket.OPEN) return;\n\n    setConnectionState(\"connecting\");\n    const ws = new WebSocket(url);\n\n    ws.onopen = () => {\n      setConnectionState(\"connected\");\n      reconnectCountRef.current = 0;\n    };\n\n    ws.onmessage = (event) => {\n      try {\n        const data = JSON.parse(event.data);\n        const parsed = parseMessage\n          ? parseMessage(data)\n          : defaultParseMessage(data);\n\n        if (parsed) {\n          stream.push(parsed.seriesIndex, parsed.point);\n        }\n      } catch (e) {\n        if (import.meta.env.DEV) {\n          console.error(\"Failed to parse WebSocket message:\", e);\n        }\n      }\n    };\n\n    ws.onerror = () => {\n      setConnectionState(\"error\");\n    };\n\n    ws.onclose = () => {\n      setConnectionState(\"disconnected\");\n\n      if (reconnect && reconnectCountRef.current < maxReconnects) {\n        reconnectCountRef.current++;\n        reconnectTimerRef.current = setTimeout(\n          connect,\n          reconnectDelay * reconnectCountRef.current,\n        );\n      }\n    };\n\n    wsRef.current = ws;\n  }, [url, reconnect, reconnectDelay, maxReconnects, parseMessage, stream]);\n\n  const disconnect = useCallback(() => {\n    clearTimeout(reconnectTimerRef.current);\n    wsRef.current?.close();\n    wsRef.current = null;\n  }, []);\n\n  // Auto-connect on mount\n  useEffect(() => {\n    connect();\n    return disconnect;\n  }, [connect, disconnect]);\n\n  return {\n    ...stream,\n    connectionState,\n    connect,\n    disconnect,\n  };\n}\n\nfunction defaultParseMessage(\n  data: unknown,\n): { seriesIndex: number; point: TimeSeriesPoint } | null {\n  if (typeof data !== \"object\" || data === null) return null;\n\n  const obj = data as Record<string, unknown>;\n\n  if (\"time\" in obj && \"value\" in obj) {\n    return {\n      seriesIndex: typeof obj.seriesIndex === \"number\" ? obj.seriesIndex : 0,\n      point: {\n        time: obj.time as number,\n        value: obj.value as number,\n      },\n    };\n  }\n\n  return null;\n}\n"],"mappings":"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"}

package/dist/react/chatgpt/AppCard.d.ts

@@ -1,6 +1,5 @@
 import { default as React, ReactNode } from 'react';
 import { StatusLevel } from '../utils';
-
 export interface AppCardProps {
     /** Card content */
     children: ReactNode;
@@ -19,7 +18,7 @@ export interface AppCardProps {
         label: string;
         level?: StatusLevel;
         /** @deprecated Use `level` (Astro UX StatusLevel) instead. Still supported for backward compatibility. */
-        variant?: 'success' | 'warning' | 'error' | 'info' | 'neutral';
+        variant?: "success" | "warning" | "error" | "info" | "neutral";
     };
     /** Show fullscreen button (only rendered inside ChatGPT host) */
     allowFullscreen?: boolean;

package/dist/react/chatgpt/index.d.ts

@@ -24,15 +24,15 @@ export interface OpenAiGlobals {
     /** Snapshot of UI state persisted between renders */
     widgetState?: Record<string, unknown>;
     /** Current theme */
-    theme?: 'light' | 'dark';
+    theme?: "light" | "dark";
     /** Current locale (e.g., 'en-US') */
     locale?: string;
     /** Display mode */
-    displayMode?: 'inline' | 'pip' | 'fullscreen';
+    displayMode?: "inline" | "pip" | "fullscreen";
     /** Maximum allowed height */
     maxHeight?: number;
     /** View type */
-    view?: 'conversation' | 'modal';
+    view?: "conversation" | "modal";
     /** User agent info */
     userAgent?: string;
     /** Safe area insets */
@@ -56,7 +56,7 @@ export interface OpenAiGlobals {
         downloadUrl: string;
     }>;
     requestDisplayMode?: (options: {
-        mode: 'inline' | 'pip' | 'fullscreen';
+        mode: "inline" | "pip" | "fullscreen";
     }) => Promise<void>;
     requestModal?: (options: unknown) => Promise<void>;
     notifyIntrinsicHeight?: (height: number) => void;
@@ -87,7 +87,7 @@ export declare function useToolOutput<T = Record<string, unknown>>(): T | undefi
  * Read the tool input (arguments) from the tool invocation
  */
 export declare function useToolInput<T = Record<string, unknown>>(): T | undefined;
-export type ThemeMode = 'light' | 'dark';
+export type ThemeMode = "light" | "dark";
 /**
  * Get current ChatGPT theme and provide CSS-friendly values
  * Named useChatGPTTheme to avoid conflict with the core useTheme from ThemeProvider
@@ -113,9 +113,9 @@ export declare function useLocale(): string;
  * Manage widget display mode (inline, PiP, fullscreen)
  */
 export declare function useDisplayMode(): {
-    mode: 'inline' | 'pip' | 'fullscreen';
+    mode: "inline" | "pip" | "fullscreen";
     maxHeight?: number;
-    requestMode: (mode: 'inline' | 'pip' | 'fullscreen') => Promise<void>;
+    requestMode: (mode: "inline" | "pip" | "fullscreen") => Promise<void>;
     close: () => void;
 };
 /**