@tetherto/mdk-react-devkit 0.0.0-stage → 0.12.1

package/dist/primitives/components/labeled-card/labeled-card.example.d.ts

@@ -0,0 +1 @@
+export declare const LabeledCardExample: () => import("react").JSX.Element;

package/dist/primitives/components/labeled-card/labeled-card.example.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Runnable example for LabeledCard.
+ */
+import { LabeledCard } from '@tetherto/mdk-react-devkit';
+const Placeholder = ({ text }) => (_jsx("div", { style: {
+        padding: '12px 16px',
+        background: 'var(--mdk-color-surface-secondary, #1a1a2e)',
+        borderRadius: 4,
+        color: 'var(--mdk-color-text-secondary, #888)',
+        fontSize: 13,
+    }, children: text }));
+export const LabeledCardExample = () => (_jsxs("div", { className: "mdk-example-row", style: { display: 'flex', flexDirection: 'column', gap: 16 }, children: [_jsx(LabeledCard, { label: "Device Overview", children: _jsx(Placeholder, { text: "Device stats here" }) }), _jsx(LabeledCard, { label: "Farm Summary", isFullWidth: true, children: _jsx(Placeholder, { text: "Full-width card body" }) }), _jsx(LabeledCard, { label: "Metrics", isDark: true, children: _jsx(Placeholder, { text: "Dark card body" }) }), _jsx(LabeledCard, { label: "Borderless", hasNoBorder: true, children: _jsx(Placeholder, { text: "Card without a border" }) }), _jsx(LabeledCard, { label: "Pool Statistics", getNavigateOptions: () => ({ href: '#pool-stats', target: '_self' }), children: _jsx(Placeholder, { text: "Click the label to navigate" }) })] }));

package/dist/primitives/components/labeled-card/labeled-card.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import _isString from 'lodash/isString';
+import _get from 'lodash/get';
+import _compact from 'lodash/compact';
+import { cn } from '../../utils';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../tooltip';
+import { forwardRef } from 'react';
+const BASE_CLASS = 'mdk-labeled-card';
+/**
+ * Card variant that pairs a tiny label above the body — used for compact stat or metadata blocks.
+ *
+ * @category layout
+ * @domain generic
+ * @tier agent-ready
+ */
+export const LabeledCard = forwardRef((props, ref) => {
+    const { label, isDark, children, className, hasNoWrap, isRelative, hasNoBorder, hasNoMargin, isFullWidth, isFullHeight, isScrollable, getNavigateOptions, labelTooltip, } = props;
+    const labelText = _isString(label) ? label : '';
+    const navOptions = getNavigateOptions?.(labelText);
+    const containerClasses = cn(BASE_CLASS, _compact([
+        isFullWidth && `${BASE_CLASS}--full-width`,
+        isFullHeight && `${BASE_CLASS}--full-height`,
+        isDark && `${BASE_CLASS}--dark`,
+        hasNoWrap && `${BASE_CLASS}--no-wrap`,
+        hasNoMargin && `${BASE_CLASS}--no-margin`,
+        hasNoBorder && `${BASE_CLASS}--no-border`,
+        isScrollable && `${BASE_CLASS}--scrollable`,
+        isRelative && `${BASE_CLASS}--relative`,
+    ]), className);
+    const titleElement = _jsx("div", { className: `${BASE_CLASS}__title`, children: label });
+    const titleWithTooltip = labelTooltip ? (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: titleElement }), _jsx(TooltipContent, { children: labelTooltip })] }) })) : (titleElement);
+    const href = _get(navOptions, 'href');
+    const target = _get(navOptions, 'target');
+    const content = href ? (_jsx("a", { href: href, target: target, className: `${BASE_CLASS}__link`, children: titleWithTooltip })) : (titleWithTooltip);
+    return (_jsxs("div", { ref: ref, className: containerClasses, children: [_jsx("div", { className: `${BASE_CLASS}__header`, children: content }), _jsx("div", { className: `${BASE_CLASS}__body`, children: children })] }));
+});
+LabeledCard.displayName = 'LabeledCard';

package/dist/primitives/components/lazy-tab-wrapper/index.d.ts

@@ -0,0 +1,29 @@
+import { type ComponentType, type ReactElement, type ReactNode } from 'react';
+import type { SpinnerProps } from '../spinner';
+type LazyTabWrapperProps<T = Record<string, unknown>> = {
+    /**
+     * Lazy-loaded component to render
+     */
+    Component: ComponentType<{
+        data?: T;
+    }>;
+    /**
+     * Data to pass to the component
+     */
+    data?: T;
+    /**
+     * Custom fallback component while loading
+     * @default <Spinner />
+     */
+    fallback?: ReactNode;
+    /**
+     * Spinner type when using default fallback
+     * @default 'circle'
+     */
+    spinnerType?: SpinnerProps['type'];
+};
+export declare function LazyTabWrapper<T = Record<string, unknown>>({ Component, data, fallback, spinnerType, }: LazyTabWrapperProps<T>): ReactElement;
+export declare namespace LazyTabWrapper {
+    var displayName: string;
+}
+export {};

package/dist/primitives/components/lazy-tab-wrapper/index.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Suspense, useMemo } from 'react';
+import { Spinner } from '../spinner';
+/**
+ * LazyTabWrapper - Wrapper for lazy-loaded tab components with Suspense
+ *
+ * Handles lazy loading with a fallback spinner while the component loads.
+ * Useful for code-splitting large tab components.
+ *
+ * @example
+ * ```tsx
+ * const DetailsTab = lazy(() => import('./DetailsTab'))
+ *
+ * <LazyTabWrapper
+ *   Component={DetailsTab}
+ *   data={deviceData}
+ * />
+ * ```
+ *
+ * @example
+ * // With custom fallback
+ * ```tsx
+ * <LazyTabWrapper
+ *   Component={SettingsTab}
+ *   data={settings}
+ *   fallback={<CustomLoader />}
+ * />
+ * ```
+ *
+ * @example
+ * // With typed data
+ * ```tsx
+ * interface DeviceData {
+ *   id: string
+ *   name: string
+ * }
+ *
+ * <LazyTabWrapper<DeviceData>
+ *   Component={DeviceTab}
+ *   data={deviceData}
+ * />
+ * ```
+ * @category layout
+ * @domain generic
+ * @tier agent-ready
+ */
+export const LazyTabWrapper = ({ Component, data, fallback, spinnerType = 'circle', }) => {
+    const defaultFallback = useMemo(() => _jsx(Spinner, { type: spinnerType, fullScreen: true }), [spinnerType]);
+    return (_jsx(Suspense, { fallback: fallback ?? defaultFallback, children: _jsx(Component, { data: data }) }));
+};
+LazyTabWrapper.displayName = 'LazyTabWrapper';

package/dist/primitives/components/lazy-tab-wrapper/lazy-tab-wrapper.example.d.ts

@@ -0,0 +1 @@
+export declare const LazyTabWrapperExample: () => import("react").JSX.Element;

package/dist/primitives/components/lazy-tab-wrapper/lazy-tab-wrapper.example.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Runnable example for LazyTabWrapper.
+ */
+import { lazy } from 'react';
+import { LazyTabWrapper } from '@tetherto/mdk-react-devkit';
+// Simulate a lazily-loaded tab component using a pre-resolved promise so the
+// example renders immediately without an actual dynamic import.
+const StaticTab = ({ data }) => (_jsx("div", { style: {
+        padding: '16px',
+        background: 'var(--mdk-color-surface-secondary, #1a1a2e)',
+        borderRadius: 4,
+        color: 'var(--mdk-color-text-primary, #fff)',
+        fontSize: 13,
+    }, children: data?.title ?? 'Tab content loaded' }));
+// Wrap in lazy() to satisfy the Suspense contract used by LazyTabWrapper.
+const LazyStaticTab = lazy(() => Promise.resolve({ default: StaticTab }));
+export const LazyTabWrapperExample = () => (_jsxs("div", { className: "mdk-example-row", style: { display: 'flex', flexDirection: 'column', gap: 24 }, children: [_jsx(LazyTabWrapper, { Component: LazyStaticTab, data: { title: 'Details Tab (default spinner fallback)' } }), _jsx(LazyTabWrapper, { Component: LazyStaticTab, data: { title: 'Settings Tab (custom fallback)' }, fallback: _jsx("div", { style: { padding: 16, color: '#888', fontSize: 13 }, children: "Loading settings\u2026" }) }), _jsx(LazyTabWrapper, { Component: LazyStaticTab })] }));

package/dist/primitives/components/line-chart/index.d.ts

@@ -0,0 +1,11 @@
+import type { LightWeightLineChartProps } from './types';
+/**
+ * Customisable Chart.js line chart with built-in zoom, tooltip, and
+ * legend. Data is passed via props; the component does no fetching.
+ *
+ * @category charts
+ * @domain generic
+ * @tier agent-ready
+ */
+export declare const LineChart: import("react").FC<LightWeightLineChartProps>;
+export * from './types';

package/dist/primitives/components/line-chart/index.js

@@ -0,0 +1,474 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { format } from 'date-fns/format';
+import { getTimezoneOffset } from 'date-fns-tz';
+import _forEach from 'lodash/forEach';
+import _isArray from 'lodash/isArray';
+import _isEqual from 'lodash/isEqual';
+import _isNil from 'lodash/isNil';
+import _map from 'lodash/map';
+import _max from 'lodash/max';
+import _round from 'lodash/round';
+import _size from 'lodash/size';
+import _debounce from 'lodash/debounce';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { autoscaleProvider, buildTooltipHTML, getVisibleDataPointsForTimeline, } from './line-chart.utils';
+import { CHART_COLORS, GAP, OFFSET } from './line-chart.constants';
+import { withErrorBoundary } from '../error-boundary';
+import { cn } from '../../utils';
+import { resolveChartLegendStrokeColor } from '../../utils/chart-options';
+/**
+ * Time-series line chart built on `lightweight-charts`. Supports multi-series
+ * data, custom tooltips, vertical / horizontal crosshair labels, manual zoom,
+ * point markers, fixed-timezone formatting, and auto-scaling.
+ *
+ * Prefer wrapping in {@link ChartContainer} or {@link LineChartCard} for
+ * title, legend, range selector, and loading / empty states.
+ *
+ * @category charts
+ *
+ * @example
+ * ```tsx
+ * <LineChart data={{ datasets: [{ label: 'Hashrate', data: points }] }} height={320} />
+ * ```
+ */
+const LightWeightLineChart = ({ chartRef: providedChartRef, data, yTicksFormatter, customLabel, priceFormatter, roundPrecision, timeline, fixedTimezone, shouldResetZoom = true, skipRound = true, skipMinWidth = false, backgroundColor = 'transparent', customDateFormat, verticalLineLabelVisible = true, horizontalLineLabelVisible = false, showDateInTooltip = false, uniformDistribution = false, disableAutoRange = false, unit = '', beginAtZero = false, showPointMarkers = false, height = 240, }) => {
+    const chartContainerRef = useRef(null);
+    const lineSeriesRef = useRef([]);
+    const initResizedRef = useRef(false);
+    const toolTipRef = useRef(null);
+    const [showTooltip, setShowTooltip] = useState(false);
+    const seriesToDatasetMap = useRef(new Map());
+    const outerWrapperRef = useRef(null);
+    const didZoomRef = useRef(false);
+    const userHasZoomedRef = useRef(false);
+    const isUpdatingRangeRef = useRef(false);
+    const lastTimelineRef = useRef(undefined);
+    const priceScaleWidthCache = useRef(new Map());
+    const lastAppliedPriceScaleWidth = useRef(0);
+    const chartRef = useRef(null);
+    const handleChartRef = (apiRef) => {
+        const api = apiRef ?? null;
+        if (providedChartRef) {
+            providedChartRef.current = api;
+        }
+        chartRef.current = api;
+    };
+    // lightweight-charts is loaded lazily so it lands in its own async chunk and
+    // is kept out of a consumer's initial bundle until a line chart renders.
+    // Until it resolves there is no chart and no series, so every effect below
+    // that talks to the chart lists `createChart` as a dependency: it has to run
+    // again once the chart exists, or static data is never drawn.
+    const [createChart, setCreateChart] = useState(null);
+    useEffect(() => {
+        let active = true;
+        void import('lightweight-charts').then((m) => {
+            if (active) {
+                setCreateChart(() => m.createChart);
+            }
+        });
+        return () => {
+            active = false;
+        };
+    }, []);
+    const debouncedResetTimeScale = useMemo(() => _debounce(() => {
+        chartRef.current?.timeScale().fitContent();
+    }, 250), []);
+    useEffect(() => {
+        window.addEventListener('resize', debouncedResetTimeScale);
+        return () => {
+            window.removeEventListener('resize', debouncedResetTimeScale);
+        };
+    }, []);
+    const chartOptions = useMemo(() => ({
+        height,
+        autoSize: true,
+        layout: {
+            textColor: CHART_COLORS.WHITE_ALPHA_06,
+            background: {
+                type: 'solid',
+                color: backgroundColor,
+            },
+            attributionLogo: false, // Hide the TradingView logo
+        },
+        grid: {
+            vertLines: { visible: false },
+            horzLines: { color: CHART_COLORS.WHITE_ALPHA_01, visible: true },
+        },
+        localization: {
+            priceFormatter: priceFormatter || yTicksFormatter,
+            ...(customDateFormat && {
+                timeFormatter: (timestamp) => {
+                    const date = new Date(timestamp * 1000);
+                    return format(date, customDateFormat);
+                },
+            }),
+        },
+        timeScale: {
+            timeVisible: true,
+            secondsVisible: false,
+            fixLeftEdge: true,
+            fixRightEdge: true,
+            borderColor: CHART_COLORS.WHITE_ALPHA_02,
+            uniformDistribution,
+            ...(customDateFormat && {
+                tickMarkFormatter: (timestamp) => {
+                    // Check if timestamp is valid before processing
+                    if (typeof timestamp !== 'number' ||
+                        Number.isNaN(timestamp) ||
+                        !Number.isFinite(timestamp)) {
+                        return '';
+                    }
+                    const date = new Date(timestamp * 1000);
+                    // Validate date before formatting
+                    if (Number.isNaN(date.getTime())) {
+                        return '';
+                    }
+                    return format(date, customDateFormat);
+                },
+            }),
+        },
+        crosshair: {
+            vertLine: {
+                color: CHART_COLORS.WHITE_ALPHA_02,
+                labelVisible: verticalLineLabelVisible,
+            },
+            horzLine: {
+                visible: false,
+                labelVisible: horizontalLineLabelVisible,
+            },
+        },
+        // @NOTE: This is to disable yAxis zooming and panning.
+        handleScale: {
+            pinch: true,
+            axisPressedMouseMove: {
+                time: true,
+                price: false,
+            },
+        },
+        leftPriceScale: {
+            visible: true,
+            borderVisible: false,
+            minimumWidth: 50,
+            scaleMargins: {
+                top: 0.2,
+                bottom: 0.1,
+            },
+            ticksVisible: true,
+        },
+        rightPriceScale: {
+            visible: false,
+        },
+    }), [
+        height,
+        backgroundColor,
+        customDateFormat,
+        horizontalLineLabelVisible,
+        priceFormatter,
+        uniformDistribution,
+        verticalLineLabelVisible,
+        yTicksFormatter,
+    ]);
+    const totalDataPoints = _max(_map(data?.datasets ?? [], ({ data }) => (_isArray(data) ? data.length : 0))) ?? 0;
+    useEffect(() => {
+        if (!createChart) {
+            return;
+        }
+        if (!chartRef?.current && chartContainerRef.current) {
+            if (chartRef) {
+                handleChartRef(createChart(chartContainerRef.current, chartOptions));
+            }
+        }
+        if (!chartRef?.current) {
+            return;
+        }
+        const datasetCount = _size(data.datasets);
+        const seriesMatchesData = () => {
+            if (lineSeriesRef.current.length !== datasetCount) {
+                return false;
+            }
+            for (let i = 0; i < datasetCount; i++) {
+                const ds = data.datasets[i];
+                const series = lineSeriesRef.current[i];
+                if (!ds || !series) {
+                    return false;
+                }
+                const mapped = seriesToDatasetMap.current.get(series);
+                if (!mapped) {
+                    return false;
+                }
+                if (mapped.label !== ds.label) {
+                    return false;
+                }
+                if (resolveChartLegendStrokeColor(mapped.borderColor) !==
+                    resolveChartLegendStrokeColor(ds.borderColor)) {
+                    return false;
+                }
+            }
+            return true;
+        };
+        const removeAllSeries = () => {
+            if (!chartRef.current) {
+                return;
+            }
+            for (const series of [...lineSeriesRef.current]) {
+                chartRef.current.removeSeries(series);
+                seriesToDatasetMap.current.delete(series);
+            }
+            lineSeriesRef.current = [];
+        };
+        const addSeriesForDataset = (dataset) => {
+            if (!chartRef.current) {
+                return;
+            }
+            const lineColor = resolveChartLegendStrokeColor(dataset.borderColor);
+            const lineSeriesOptions = {
+                color: lineColor,
+                ...(dataset.borderWidth && { lineWidth: dataset.borderWidth }),
+                lastValueVisible: false,
+                crosshairMarkerVisible: false,
+                priceLineVisible: false,
+                pointMarkersVisible: showPointMarkers,
+            };
+            lineSeriesOptions.autoscaleInfoProvider = autoscaleProvider(beginAtZero);
+            const lineSeries = chartRef.current.addLineSeries(lineSeriesOptions);
+            lineSeriesRef.current.push(lineSeries);
+            seriesToDatasetMap.current.set(lineSeries, dataset);
+        };
+        if (!seriesMatchesData()) {
+            removeAllSeries();
+            for (let i = 0; i < datasetCount; i++) {
+                const dataset = data.datasets[i];
+                if (dataset) {
+                    addSeriesForDataset(dataset);
+                }
+            }
+        }
+        else {
+            for (let i = 0; i < datasetCount; i++) {
+                const ds = data.datasets[i];
+                const series = lineSeriesRef.current[i];
+                if (!ds || !series) {
+                    continue;
+                }
+                series.applyOptions({
+                    visible: ds.visible !== false,
+                    color: resolveChartLegendStrokeColor(ds.borderColor),
+                });
+                seriesToDatasetMap.current.set(series, ds);
+            }
+        }
+    }, [createChart, chartRef, data.datasets, data, priceFormatter, yTicksFormatter, chartOptions, beginAtZero, showPointMarkers]);
+    const resetPriceScaleWidth = () => {
+        lastAppliedPriceScaleWidth.current = 0;
+        priceScaleWidthCache.current.clear();
+        chartRef?.current?.priceScale('left').applyOptions({ minimumWidth: 50 });
+    };
+    useEffect(() => {
+        if (chartRef?.current) {
+            chartRef.current.applyOptions(chartOptions);
+        }
+    }, [chartOptions, chartRef]);
+    const handleCrosshairMove = (param) => {
+        if (!param || !param.seriesData || !toolTipRef?.current) {
+            if (chartRef?.current) {
+                resetPriceScaleWidth();
+            }
+            setShowTooltip(false);
+            return;
+        }
+        const seriesDataArray = Array.from(param.seriesData.entries());
+        if (seriesDataArray.length === 0) {
+            if (chartRef?.current) {
+                resetPriceScaleWidth();
+            }
+            setShowTooltip(false);
+            return;
+        }
+        const html = buildTooltipHTML({
+            seriesData: param.seriesData,
+            seriesToDatasetMap: seriesToDatasetMap.current,
+            yTicksFormatter,
+            unit,
+            customLabel,
+            showDateInTooltip,
+            skipMinWidth,
+        });
+        if (!html) {
+            setShowTooltip(false);
+            return;
+        }
+        if (toolTipRef.current) {
+            toolTipRef.current.innerHTML = html;
+        }
+        // Position tooltip relative to chart - use actual mouse position
+        if (toolTipRef.current && outerWrapperRef.current) {
+            const tooltipElement = toolTipRef.current;
+            const { top: outerWrapperTop, left: outerWrapperLeft, width: outerWrapperWidth, height: outerWrapperHeight, } = outerWrapperRef.current.getBoundingClientRect();
+            // Get cursor position - prefer sourceEvent (actual mouse), fallback to param.point
+            let cursorX;
+            let cursorY;
+            if (param.sourceEvent) {
+                const { clientX, clientY } = param.sourceEvent;
+                cursorX = clientX - outerWrapperLeft;
+                cursorY = clientY - outerWrapperTop;
+            }
+            else if (param.point) {
+                cursorX = param.point.x;
+                cursorY = param.point.y;
+            }
+            else {
+                setShowTooltip(false);
+                return;
+            }
+            tooltipElement.style.position = 'absolute';
+            tooltipElement.style.visibility = 'hidden';
+            tooltipElement.style.display = 'block';
+            // Force a reflow to get accurate dimensions
+            const { width: tooltipWidth, height: tooltipHeight } = tooltipElement.getBoundingClientRect();
+            // Check if tooltip fits on the right side of cursor
+            const fitsOnRight = cursorX + GAP + tooltipWidth <= outerWrapperWidth;
+            // Position tooltip away from cursor
+            let left;
+            if (fitsOnRight) {
+                left = cursorX + GAP;
+            }
+            else {
+                left = cursorX - tooltipWidth - GAP;
+            }
+            // Keep within horizontal bounds
+            if (left < OFFSET) {
+                left = OFFSET;
+            }
+            if (left + tooltipWidth > outerWrapperWidth - OFFSET) {
+                left = outerWrapperWidth - tooltipWidth - OFFSET;
+            }
+            // Vertical position
+            let top = cursorY;
+            // Keep within vertical bounds
+            if (top < OFFSET) {
+                top = OFFSET;
+            }
+            if (top + tooltipHeight > outerWrapperHeight - OFFSET) {
+                top = outerWrapperHeight - tooltipHeight - OFFSET;
+            }
+            tooltipElement.style.left = `${left}px`;
+            tooltipElement.style.top = `${top}px`;
+            tooltipElement.style.visibility = 'visible';
+        }
+        setShowTooltip(true);
+    };
+    useEffect(() => {
+        if (!chartRef?.current)
+            return;
+        chartRef.current.subscribeCrosshairMove(handleCrosshairMove);
+        return () => {
+            if (chartRef?.current) {
+                chartRef.current.unsubscribeCrosshairMove(handleCrosshairMove);
+            }
+        };
+    }, [chartRef, handleCrosshairMove]);
+    useEffect(() => {
+        if (!chartRef?.current)
+            return;
+        const timeScale = chartRef.current.timeScale();
+        const handleVisibleRangeChange = () => {
+            if (!isUpdatingRangeRef.current && initResizedRef.current) {
+                userHasZoomedRef.current = true;
+            }
+        };
+        timeScale.subscribeVisibleLogicalRangeChange(handleVisibleRangeChange);
+        return () => {
+            timeScale.unsubscribeVisibleLogicalRangeChange(handleVisibleRangeChange);
+        };
+    }, [chartRef, createChart]);
+    const updateVisibleRange = useCallback(() => {
+        if (!chartRef?.current)
+            return;
+        if (disableAutoRange)
+            return;
+        if (!_isEqual(timeline, lastTimelineRef.current)) {
+            didZoomRef.current = false;
+            userHasZoomedRef.current = false;
+            lastTimelineRef.current = timeline;
+        }
+        if (userHasZoomedRef.current) {
+            return;
+        }
+        if (totalDataPoints === 0)
+            return;
+        isUpdatingRangeRef.current = true;
+        if (shouldResetZoom && !didZoomRef.current && chartRef.current) {
+            const visiblePoints = timeline ? getVisibleDataPointsForTimeline(timeline) : totalDataPoints;
+            if (visiblePoints < totalDataPoints) {
+                const fromIndex = totalDataPoints - visiblePoints;
+                const toIndex = totalDataPoints - 1;
+                chartRef.current.timeScale().setVisibleLogicalRange({ from: fromIndex, to: toIndex });
+            }
+            else {
+                chartRef.current.timeScale().fitContent();
+            }
+            didZoomRef.current = true;
+        }
+        isUpdatingRangeRef.current = false;
+    }, [chartRef, disableAutoRange, totalDataPoints, shouldResetZoom, timeline]);
+    useEffect(() => {
+        // Use browser's current timezone offset for consistent time display
+        // Only apply offset if fixedTimezone is provided, otherwise timestamps are already in local time
+        const currentTimezoneOffset = fixedTimezone ? getTimezoneOffset(fixedTimezone) : 0;
+        _forEach(data.datasets, ({ data: datasetData, visible, borderColor }, index) => {
+            if (_isArray(datasetData)) {
+                const formattedData = _map(datasetData, ({ x, y }) => ({
+                    time: _round((x + currentTimezoneOffset) / 1000),
+                    value: _isNil(y) ? undefined : skipRound ? y : _round(y, roundPrecision || 0),
+                }));
+                const lineColor = resolveChartLegendStrokeColor(borderColor);
+                lineSeriesRef.current[index]?.setData(formattedData);
+                lineSeriesRef.current[index]?.applyOptions({
+                    visible,
+                    color: lineColor,
+                });
+            }
+        });
+        // Use requestAnimationFrame to ensure chart has processed the data before setting visible range
+        if (shouldResetZoom) {
+            requestAnimationFrame(() => {
+                updateVisibleRange();
+            });
+        }
+    }, [createChart, data.datasets, fixedTimezone, skipRound, roundPrecision, shouldResetZoom, updateVisibleRange]);
+    useEffect(() => {
+        updateVisibleRange();
+    }, [timeline, updateVisibleRange]);
+    useEffect(() => {
+        if (chartRef?.current && disableAutoRange) {
+            if (totalDataPoints === 0)
+                return;
+            chartRef.current.timeScale().fitContent();
+        }
+    }, [disableAutoRange, totalDataPoints]);
+    // Initial visible range setup after chart is ready
+    useEffect(() => {
+        if (!initResizedRef.current && chartRef?.current) {
+            initResizedRef.current = true;
+            // Use requestAnimationFrame to ensure chart is fully rendered
+            requestAnimationFrame(() => {
+                updateVisibleRange();
+            });
+        }
+    }, [chartRef, createChart, updateVisibleRange]);
+    return (_jsxs("div", { className: cn('mdk-lw-line-chart-wrapper', 'mdk-lw-line-chart-wrapper-outer'), ref: outerWrapperRef, children: [_jsx("div", { className: cn('mdk-lw-line-chart-wrapper'), ref: chartContainerRef }), _jsx("div", { className: cn('mdk-lw-line-chart-tooltip', {
+                    'mdk-lw-line-chart-tooltip--no-min-width': skipMinWidth,
+                }), ref: toolTipRef, style: {
+                    display: showTooltip ? 'block' : 'none',
+                } })] }));
+};
+/**
+ * Customisable Chart.js line chart with built-in zoom, tooltip, and
+ * legend. Data is passed via props; the component does no fetching.
+ *
+ * @category charts
+ * @domain generic
+ * @tier agent-ready
+ */
+export const LineChart = withErrorBoundary(LightWeightLineChart, 'LightWeightLineChart');
+export * from './types';