@zendir/ui 0.1.8 → 0.1.9

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

@@ -1,226 +0,0 @@
-import { useRef, useState, useCallback, useEffect } from "react";
-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
-  };
-}
-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;
-}
-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
-  ];
-}
-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
-  };
-}
-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;
-}
-export {
-  useChartStream,
-  useWebSocketStream
-};
-//# sourceMappingURL=useChartStream.js.map

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

@@ -1 +0,0 @@
-{"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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"}

package/dist/react/visualizations/EclipseTimerCard.js

@@ -1,250 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
-import { useTheme } from "../theme/ThemeProvider.js";
-const EclipseTimerCard = ({
-  eclipse,
-  orbitalPeriodMinutes,
-  orbitPhase = 0,
-  compact = false,
-  className = ""
-}) => {
-  const { tokens, theme } = useTheme();
-  const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
-  const cardBg = isTransparentTheme ? "transparent" : tokens.colors.background.surface;
-  const cardGlass = isTransparentTheme ? {
-    backdropFilter: "blur(12px)",
-    WebkitBackdropFilter: "blur(12px)"
-  } : {};
-  const ECLIPSE_COLORS = {
-    sunlight: "#ffd54f",
-    penumbra: "#78909c"
-  };
-  const { sunlightArc, penumbraArc, umbraArc } = useMemo(() => {
-    const totalPeriod = orbitalPeriodMinutes * 60;
-    const sunlight = eclipse.sunlightDuration / totalPeriod;
-    const umbraSec = eclipse.umbraDuration ?? eclipse.eclipseDuration * 0.5;
-    const penumbraSec = eclipse.penumbraDuration ?? eclipse.eclipseDuration * 0.5;
-    const umbra = umbraSec / totalPeriod;
-    const penumbra = penumbraSec / totalPeriod;
-    return {
-      sunlightArc: sunlight * 100,
-      penumbraArc: penumbra * 100,
-      umbraArc: umbra * 100
-    };
-  }, [eclipse, orbitalPeriodMinutes]);
-  const formatTime = (seconds) => {
-    if (seconds < 0) return "--:--";
-    const mins = Math.floor(seconds / 60);
-    const secs = Math.floor(seconds % 60);
-    return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
-  };
-  const radius = 45;
-  const circumference = 2 * Math.PI * radius;
-  const sunlightDash = sunlightArc / 100 * circumference;
-  const penumbraDash = penumbraArc / 100 * circumference;
-  const umbraDash = umbraArc / 100 * circumference;
-  const cursorRotation = orbitPhase * 360 - 90;
-  const sizeStyle = compact ? { width: "128px", height: "128px" } : { width: "192px", height: "192px" };
-  const cardStyle = {
-    backgroundColor: cardBg,
-    ...cardGlass,
-    border: "none",
-    borderRadius: tokens.borderRadius.lg,
-    padding: tokens.spacing.md,
-    fontFamily: tokens.typography.fontFamily.primary,
-    color: tokens.colors.text.primary
-  };
-  return /* @__PURE__ */ jsxs("div", { className, style: cardStyle, children: [
-    !compact && /* @__PURE__ */ jsxs("div", { style: {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "space-between",
-      marginBottom: tokens.spacing.md
-    }, children: [
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("h3", { style: {
-          fontWeight: tokens.typography.fontWeight.semibold,
-          color: tokens.colors.text.primary,
-          fontSize: tokens.typography.fontSize.md,
-          margin: 0
-        }, children: "Eclipse timer" }),
-        /* @__PURE__ */ jsx("p", { style: {
-          color: tokens.colors.text.tertiary,
-          fontSize: tokens.typography.fontSize.xs,
-          margin: 0,
-          marginTop: tokens.spacing.xs
-        }, children: "Orbit phase" })
-      ] }),
-      /* @__PURE__ */ jsx("span", { style: {
-        padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,
-        borderRadius: tokens.borderRadius.sm,
-        fontSize: tokens.typography.fontSize.xxs,
-        // 0.625rem / 10px (AstroUXDS compact)
-        fontWeight: tokens.typography.fontWeight.medium,
-        letterSpacing: "0.5px",
-        backgroundColor: eclipse.inEclipse ? `${tokens.colors.status.off}20` : `${tokens.colors.status.caution}20`,
-        color: eclipse.inEclipse ? tokens.colors.status.off : tokens.colors.status.caution
-      }, children: eclipse.inEclipse ? "Eclipse" : "Sunlit" })
-    ] }),
-    /* @__PURE__ */ jsx("div", { style: { display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ jsxs("div", { style: { position: "relative", ...sizeStyle }, children: [
-      /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 100 100", style: { width: "100%", height: "100%", transform: "rotate(-90deg)" }, children: [
-        /* @__PURE__ */ jsx(
-          "circle",
-          {
-            cx: "50",
-            cy: "50",
-            r: radius,
-            fill: "none",
-            stroke: tokens.colors.border.muted,
-            strokeWidth: "8"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "circle",
-          {
-            cx: "50",
-            cy: "50",
-            r: radius,
-            fill: "none",
-            stroke: ECLIPSE_COLORS.sunlight,
-            strokeWidth: "8",
-            strokeDasharray: `${sunlightDash} ${circumference}`,
-            strokeDashoffset: "0",
-            strokeLinecap: "round",
-            style: { filter: `drop-shadow(0 0 8px ${ECLIPSE_COLORS.sunlight}40)` }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "circle",
-          {
-            cx: "50",
-            cy: "50",
-            r: radius,
-            fill: "none",
-            stroke: ECLIPSE_COLORS.penumbra,
-            strokeWidth: "8",
-            strokeDasharray: `${penumbraDash} ${circumference}`,
-            strokeDashoffset: `${-sunlightDash}`,
-            strokeLinecap: "round"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "circle",
-          {
-            cx: "50",
-            cy: "50",
-            r: radius,
-            fill: "none",
-            stroke: tokens.colors.background.base,
-            strokeWidth: "8",
-            strokeDasharray: `${umbraDash} ${circumference}`,
-            strokeDashoffset: `${-(sunlightDash + penumbraDash)}`,
-            strokeLinecap: "round"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            position: "absolute",
-            inset: 0,
-            transition: "transform 1s",
-            transform: `rotate(${cursorRotation}deg)`
-          },
-          children: /* @__PURE__ */ jsx("div", { style: {
-            position: "absolute",
-            top: 0,
-            left: "50%",
-            transform: "translate(-50%, -4px)"
-          }, children: /* @__PURE__ */ jsx("div", { style: {
-            width: compact ? "12px" : "16px",
-            height: compact ? "12px" : "16px",
-            backgroundColor: "#fff",
-            borderRadius: "50%",
-            border: `2px solid ${tokens.colors.status.standby}`,
-            boxShadow: `0 0 12px ${tokens.colors.status.standby}`
-          } }) })
-        }
-      ),
-      /* @__PURE__ */ jsxs("div", { style: {
-        position: "absolute",
-        inset: 0,
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "center"
-      }, children: [
-        /* @__PURE__ */ jsx("span", { style: {
-          fontSize: compact ? "8px" : tokens.typography.fontSize.xs,
-          color: tokens.colors.text.tertiary,
-          letterSpacing: "0.5px"
-        }, children: eclipse.inEclipse ? "Sunlight in" : "Eclipse in" }),
-        /* @__PURE__ */ jsx("span", { style: {
-          fontSize: compact ? tokens.typography.fontSize.lg : tokens.typography.fontSize.xxl,
-          fontFamily: tokens.typography.fontFamily.mono,
-          fontWeight: tokens.typography.fontWeight.bold,
-          fontVariantNumeric: "tabular-nums",
-          color: eclipse.inEclipse ? tokens.colors.status.caution : tokens.colors.text.tertiary
-        }, children: formatTime(eclipse.inEclipse ? eclipse.timeToSunlight ?? 0 : eclipse.timeToEclipse) }),
-        !compact && /* @__PURE__ */ jsxs("span", { style: {
-          fontSize: tokens.typography.fontSize.xxs,
-          // 0.625rem / 10px (AstroUXDS compact)
-          color: tokens.colors.text.tertiary,
-          marginTop: tokens.spacing.xs
-        }, children: [
-          "Period: ",
-          orbitalPeriodMinutes.toFixed(1),
-          "m"
-        ] })
-      ] })
-    ] }) }),
-    /* @__PURE__ */ jsxs("div", { style: {
-      display: "grid",
-      gridTemplateColumns: "repeat(2, 1fr)",
-      gap: tokens.spacing.sm,
-      marginTop: tokens.spacing.md,
-      fontSize: compact ? tokens.typography.fontSize.xxs : tokens.typography.fontSize.xs
-      // AstroUXDS compliant
-    }, children: [
-      /* @__PURE__ */ jsxs("div", { style: {
-        backgroundColor: tokens.colors.background.base,
-        borderRadius: tokens.borderRadius.md,
-        padding: tokens.spacing.sm,
-        textAlign: "center"
-      }, children: [
-        /* @__PURE__ */ jsxs("div", { style: {
-          color: tokens.colors.status.caution,
-          fontWeight: tokens.typography.fontWeight.bold,
-          fontFamily: tokens.typography.fontFamily.mono,
-          fontVariantNumeric: "tabular-nums"
-        }, children: [
-          Math.round(eclipse.sunlightDuration / 60),
-          "m"
-        ] }),
-        /* @__PURE__ */ jsx("div", { style: { color: tokens.colors.text.tertiary }, children: "Daylight" })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { style: {
-        backgroundColor: tokens.colors.background.base,
-        borderRadius: tokens.borderRadius.md,
-        padding: tokens.spacing.sm,
-        textAlign: "center"
-      }, children: [
-        /* @__PURE__ */ jsxs("div", { style: {
-          color: tokens.colors.text.tertiary,
-          fontWeight: tokens.typography.fontWeight.bold,
-          fontFamily: tokens.typography.fontFamily.mono,
-          fontVariantNumeric: "tabular-nums"
-        }, children: [
-          Math.round(((eclipse.umbraDuration ?? 0) + (eclipse.penumbraDuration ?? 0)) / 60),
-          "m"
-        ] }),
-        /* @__PURE__ */ jsx("div", { style: { color: tokens.colors.text.tertiary }, children: "Eclipse" })
-      ] })
-    ] })
-  ] });
-};
-export {
-  EclipseTimerCard
-};
-//# sourceMappingURL=EclipseTimerCard.js.map

package/dist/react/visualizations/EclipseTimerCard.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"EclipseTimerCard.js","sources":["../../../src/react/visualizations/EclipseTimerCard.tsx"],"sourcesContent":["/**\n * EclipseTimerCard - Circular orbit phase visualization\n * \n * Shows the spacecraft's position in its orbital day/night cycle with\n * visual sectors for sunlight, penumbra, and umbra (eclipse).\n * \n * Astro UX Compliance:\n * - Uses official Astro status colors\n * - Sentence-case labels\n * - Tabular numbers for data\n * - Roboto/Roboto Mono typography\n * - 4px-based spacing\n */\n\nimport React, { useMemo } from 'react';\nimport type { EclipseInfo } from '../types';\nimport { useTheme } from '../theme';\n\nexport interface EclipseTimerCardProps {\n  /** Eclipse information from API */\n  eclipse: EclipseInfo;\n  /** Orbital period in minutes */\n  orbitalPeriodMinutes: number;\n  /** Current phase in orbit (0-1) */\n  orbitPhase?: number;\n  /** Compact mode for smaller displays */\n  compact?: boolean;\n  /** Custom class name */\n  className?: string;\n}\n\nexport const EclipseTimerCard: React.FC<EclipseTimerCardProps> = ({\n  eclipse,\n  orbitalPeriodMinutes,\n  orbitPhase = 0,\n  compact = false,\n  className = '',\n}) => {\n  const { tokens, theme } = useTheme();\n  const isTransparentTheme = theme === 'transparent' || theme === 'transparent-bold' || theme === 'transparent-minimal';\n  // Use transparent background with blur for transparent themes (matching Timeline)\n  const cardBg = isTransparentTheme ? 'transparent' : tokens.colors.background.surface;\n  const cardGlass = isTransparentTheme ? { \n    backdropFilter: 'blur(12px)' as const, \n    WebkitBackdropFilter: 'blur(12px)' as const,\n  } : {};\n\n  // Medium-soft colors for eclipse phases (readable, not too pale)\n  const ECLIPSE_COLORS = {\n    sunlight: '#ffd54f',\n    penumbra: '#78909c',\n    umbra: '#546e7a',\n  };\n  const { sunlightArc, penumbraArc, umbraArc } = useMemo(() => {\n    const totalPeriod = orbitalPeriodMinutes * 60; // seconds\n    const sunlight = eclipse.sunlightDuration / totalPeriod;\n    const umbraSec = eclipse.umbraDuration ?? eclipse.eclipseDuration * 0.5;\n    const penumbraSec = eclipse.penumbraDuration ?? eclipse.eclipseDuration * 0.5;\n    const umbra = umbraSec / totalPeriod;\n    const penumbra = penumbraSec / totalPeriod;\n    return {\n      sunlightArc: sunlight * 100,\n      penumbraArc: penumbra * 100,\n      umbraArc: umbra * 100,\n    };\n  }, [eclipse, orbitalPeriodMinutes]);\n\n  // Format time for display (Astro: tabular numbers)\n  const formatTime = (seconds: number): string => {\n    if (seconds < 0) return '--:--';\n    const mins = Math.floor(seconds / 60);\n    const secs = Math.floor(seconds % 60);\n    return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;\n  };\n\n  // Calculate SVG arc parameters\n  const radius = 45;\n  const circumference = 2 * Math.PI * radius;\n  \n  const sunlightDash = (sunlightArc / 100) * circumference;\n  const penumbraDash = (penumbraArc / 100) * circumference;\n  const umbraDash = (umbraArc / 100) * circumference;\n\n  // Cursor rotation based on orbit phase\n  const cursorRotation = orbitPhase * 360 - 90; // -90 to start at top\n\n  const sizeStyle: React.CSSProperties = compact \n    ? { width: '128px', height: '128px' } \n    : { width: '192px', height: '192px' };\n\n  // Astro UX compliant card styling (transparent theme: glass background)\n  const cardStyle: React.CSSProperties = {\n    backgroundColor: cardBg,\n    ...cardGlass,\n    border: 'none',\n    borderRadius: tokens.borderRadius.lg,\n    padding: tokens.spacing.md,\n    fontFamily: tokens.typography.fontFamily.primary,\n    color: tokens.colors.text.primary,\n  };\n\n  return (\n    <div className={className} style={cardStyle}>\n      {!compact && (\n        <div style={{\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          marginBottom: tokens.spacing.md,\n        }}>\n          <div>\n            {/* Astro: Sentence-case labels */}\n            <h3 style={{ \n              fontWeight: tokens.typography.fontWeight.semibold, \n              color: tokens.colors.text.primary, \n              fontSize: tokens.typography.fontSize.md,\n              margin: 0,\n            }}>\n              Eclipse timer\n            </h3>\n            <p style={{ \n              color: tokens.colors.text.tertiary, \n              fontSize: tokens.typography.fontSize.xs,\n              margin: 0,\n              marginTop: tokens.spacing.xs,\n            }}>\n              Orbit phase\n            </p>\n          </div>\n          {/* Status badge - Astro style */}\n          <span style={{\n            padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,\n            borderRadius: tokens.borderRadius.sm,\n            fontSize: tokens.typography.fontSize.xxs, // 0.625rem / 10px (AstroUXDS compact)\n            fontWeight: tokens.typography.fontWeight.medium,\n            letterSpacing: '0.5px',\n            backgroundColor: eclipse.inEclipse \n              ? `${tokens.colors.status.off}20` \n              : `${tokens.colors.status.caution}20`,\n            color: eclipse.inEclipse \n              ? tokens.colors.status.off \n              : tokens.colors.status.caution,\n          }}>\n            {eclipse.inEclipse ? 'Eclipse' : 'Sunlit'}\n          </span>\n        </div>\n      )}\n\n      <div style={{ display: 'flex', justifyContent: 'center' }}>\n        <div style={{ position: 'relative', ...sizeStyle }}>\n          {/* SVG Ring */}\n          <svg viewBox=\"0 0 100 100\" style={{ width: '100%', height: '100%', transform: 'rotate(-90deg)' }}>\n            {/* Background ring */}\n            <circle \n              cx=\"50\" cy=\"50\" r={radius} \n              fill=\"none\" \n              stroke={tokens.colors.border.muted}\n              strokeWidth=\"8\"\n            />\n            \n            {/* Sunlight sector - soft amber */}\n            <circle \n              cx=\"50\" cy=\"50\" r={radius}\n              fill=\"none\"\n              stroke={ECLIPSE_COLORS.sunlight}\n              strokeWidth=\"8\"\n              strokeDasharray={`${sunlightDash} ${circumference}`}\n              strokeDashoffset=\"0\"\n              strokeLinecap=\"round\"\n              style={{ filter: `drop-shadow(0 0 8px ${ECLIPSE_COLORS.sunlight}40)` }}\n            />\n            \n            {/* Penumbra sector */}\n            <circle \n              cx=\"50\" cy=\"50\" r={radius}\n              fill=\"none\"\n              stroke={ECLIPSE_COLORS.penumbra}\n              strokeWidth=\"8\"\n              strokeDasharray={`${penumbraDash} ${circumference}`}\n              strokeDashoffset={`${-sunlightDash}`}\n              strokeLinecap=\"round\"\n            />\n            \n            {/* Umbra sector - dark */}\n            <circle \n              cx=\"50\" cy=\"50\" r={radius}\n              fill=\"none\"\n              stroke={tokens.colors.background.base}\n              strokeWidth=\"8\"\n              strokeDasharray={`${umbraDash} ${circumference}`}\n              strokeDashoffset={`${-(sunlightDash + penumbraDash)}`}\n              strokeLinecap=\"round\"\n            />\n          </svg>\n\n          {/* Position cursor */}\n          <div \n            style={{ \n              position: 'absolute',\n              inset: 0,\n              transition: 'transform 1s',\n              transform: `rotate(${cursorRotation}deg)`,\n            }}\n          >\n            <div style={{\n              position: 'absolute',\n              top: 0,\n              left: '50%',\n              transform: 'translate(-50%, -4px)',\n            }}>\n              <div style={{\n                width: compact ? '12px' : '16px',\n                height: compact ? '12px' : '16px',\n                backgroundColor: '#fff',\n                borderRadius: '50%',\n                border: `2px solid ${tokens.colors.status.standby}`,\n                boxShadow: `0 0 12px ${tokens.colors.status.standby}`,\n              }} />\n            </div>\n          </div>\n\n          {/* Center content */}\n          <div style={{\n            position: 'absolute',\n            inset: 0,\n            display: 'flex',\n            flexDirection: 'column',\n            alignItems: 'center',\n            justifyContent: 'center',\n          }}>\n            {/* Astro: Sentence-case labels (Tier 3 compliance) */}\n            <span style={{ \n              fontSize: compact ? '8px' : tokens.typography.fontSize.xs, \n              color: tokens.colors.text.tertiary,\n              letterSpacing: '0.5px',\n            }}>\n              {eclipse.inEclipse ? 'Sunlight in' : 'Eclipse in'}\n            </span>\n            {/* Astro: Tabular numbers */}\n            <span style={{ \n              fontSize: compact ? tokens.typography.fontSize.lg : tokens.typography.fontSize.xxl, \n              fontFamily: tokens.typography.fontFamily.mono,\n              fontWeight: tokens.typography.fontWeight.bold,\n              fontVariantNumeric: 'tabular-nums',\n              color: eclipse.inEclipse ? tokens.colors.status.caution : tokens.colors.text.tertiary,\n            }}>\n              {formatTime(eclipse.inEclipse ? (eclipse.timeToSunlight ?? 0) : eclipse.timeToEclipse)}\n            </span>\n            {!compact && (\n              <span style={{ \n                fontSize: tokens.typography.fontSize.xxs, // 0.625rem / 10px (AstroUXDS compact)\n                color: tokens.colors.text.tertiary,\n                marginTop: tokens.spacing.xs,\n              }}>\n                Period: {orbitalPeriodMinutes.toFixed(1)}m\n              </span>\n            )}\n          </div>\n        </div>\n      </div>\n\n      {/* Stats row - Astro: Sentence-case, tabular numbers */}\n      <div style={{\n        display: 'grid',\n        gridTemplateColumns: 'repeat(2, 1fr)',\n        gap: tokens.spacing.sm,\n        marginTop: tokens.spacing.md,\n        fontSize: compact ? tokens.typography.fontSize.xxs : tokens.typography.fontSize.xs, // AstroUXDS compliant\n      }}>\n        <div style={{\n          backgroundColor: tokens.colors.background.base,\n          borderRadius: tokens.borderRadius.md,\n          padding: tokens.spacing.sm,\n          textAlign: 'center',\n        }}>\n          <div style={{ \n            color: tokens.colors.status.caution, \n            fontWeight: tokens.typography.fontWeight.bold,\n            fontFamily: tokens.typography.fontFamily.mono,\n            fontVariantNumeric: 'tabular-nums',\n          }}>\n            {Math.round(eclipse.sunlightDuration / 60)}m\n          </div>\n          <div style={{ color: tokens.colors.text.tertiary }}>Daylight</div>\n        </div>\n        <div style={{\n          backgroundColor: tokens.colors.background.base,\n          borderRadius: tokens.borderRadius.md,\n          padding: tokens.spacing.sm,\n          textAlign: 'center',\n        }}>\n          <div style={{ \n            color: tokens.colors.text.tertiary, \n            fontWeight: tokens.typography.fontWeight.bold,\n            fontFamily: tokens.typography.fontFamily.mono,\n            fontVariantNumeric: 'tabular-nums',\n          }}>\n            {Math.round(((eclipse.umbraDuration ?? 0) + (eclipse.penumbraDuration ?? 0)) / 60)}m\n          </div>\n          <div style={{ color: tokens.colors.text.tertiary }}>Eclipse</div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default EclipseTimerCard;\n\n\n\n\n"],"names":[],"mappings":"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"}