@sybilion/uilib 1.0.26 → 1.0.28

package/assets/mini-app-global.css

@@ -139,12 +139,12 @@
   --header-height: 94px;
   --page-x-padding: var(--p-16);
   --page-y-padding: var(--p-12);
-  --page-color: oklch(1 0 0);
-  --page-color-alpha-800: oklch(from var(--page-color) l c h / 0.8);
-  --background: var(--sb-slate-100);
-  --background-alpha-800: oklch(from var(--background) l c h / 0.8);
-  --background-alpha-700: oklch(from var(--background) l c h / 0.7);
-  --background-alpha-500: oklch(from var(--background) l c h / 0.5);
+  --page-color: var(--sb-slate-100);
+  --page-color-alpha-800: var(--sb-slate-100);
+  --background: oklch(1 0 0);
+  --background-alpha-800: oklch(0.99 0 0 / 0.8);
+  --background-alpha-700: oklch(0.99 0 0 / 0.7);
+  --background-alpha-500: oklch(0.99 0 0 / 0.5);
   --foreground: oklch(0.15 0 0);
   --card: oklch(1 0 0);
   --card-foreground: oklch(0.15 0 0);
@@ -196,12 +196,12 @@
 }
 
 .dark {
-  --page-color: oklch(0.14 0 0);
-  --page-color-alpha-800: oklch(from var(--page-color) l c h / 0.95);
-  --background: oklch(0.22 0 0);
-  --background-alpha-800: oklch(from var(--background) l c h / 0.95);
-  --background-alpha-700: oklch(from var(--background) l c h / 0.7);
-  --background-alpha-500: oklch(from var(--background) l c h / 0.5);
+  --page-color: oklch(0.22 0 0);
+  --page-color-alpha-800: oklch(0.2242 0 0 / 0.8);
+  --background: oklch(0.14 0 0);
+  --background-alpha-800: oklch(0.14 0 0 / 0.95);
+  --background-alpha-700: oklch(0.14 0 0 / 0.7);
+  --background-alpha-500: oklch(0.14 0 0 / 0.5);
   --foreground: oklch(0.95 0 0);
   --card: oklch(0.1 0 0);
   --card-foreground: oklch(0.95 0 0);

package/dist/esm/components/ui/Chart/Chart.styl.js

@@ -1,6 +1,6 @@
 import styleInject from 'style-inject';
 
-var css_248z = ".Chart_chartContainer__--q1l{aspect-ratio:16/9;display:flex;font-size:.75rem;justify-content:center;line-height:1rem;max-width:100%;touch-action:none;width:100%}.Chart_chartContainer__--q1l .recharts-cartesian-axis-tick text{fill:var(--muted-foreground)}.Chart_chartContainer__--q1l .recharts-cartesian-grid line[stroke=\"#ccc\"]{stroke:var(--border)}.dark .Chart_chartContainer__--q1l .recharts-cartesian-grid line[stroke=\"#ccc\"]{stroke:var(--sb-slate-900)}.Chart_chartContainer__--q1l .recharts-curve.recharts-tooltip-cursor,.Chart_chartContainer__--q1l .recharts-polar-grid [stroke=\"#ccc\"]{stroke:var(--border)}.Chart_chartContainer__--q1l .recharts-radial-bar-background-sector,.Chart_chartContainer__--q1l .recharts-rectangle.recharts-tooltip-cursor{fill:var(--muted)}.Chart_chartContainer__--q1l .recharts-reference-line [stroke=\"#ccc\"]{stroke:var(--border)}.Chart_chartContainer__--q1l .recharts-dot[stroke=\"#fff\"]{stroke:transparent}.Chart_chartContainer__--q1l .recharts-layer,.Chart_chartContainer__--q1l .recharts-sector{outline:none}.Chart_chartContainer__--q1l .recharts-sector[stroke=\"#fff\"]{stroke:transparent}.Chart_chartContainer__--q1l .recharts-surface{outline:none}.Chart_chartContainer__--q1l .recharts-wrapper{position:relative}.Chart_chartContainer__--q1l .recharts-surface{position:relative;z-index:1}.Chart_chartContainer__--q1l .recharts-tooltip-wrapper{position:relative;z-index:3!important}.Chart_chartContainer__--q1l .recharts-active-dot{z-index:3}.Chart_chartGrid__t52WF{stroke-width:.6}.Chart_tooltipContainer__6tc0q{align-items:start;display:grid;min-width:8rem;width:minmax(300px,100%);grid-gap:.375rem;background-color:var(--background);border:1px solid var(--border)/.5;border-radius:.5rem;box-shadow:0 10px 10px -5px rgba(0,0,0,.3),0 0 2px 0 rgba(0,0,0,.5);font-size:.75rem;gap:.375rem;line-height:1rem;opacity:0;padding:.375rem .625rem;transition:opacity .5s ease-out}.Chart_chartContainer__--q1l:hover .Chart_tooltipContainer__6tc0q{opacity:1;transition-duration:.5s}.Chart_tooltipItem__j8I9T{align-items:stretch;display:flex;flex-wrap:wrap;gap:.5rem;width:100%}.Chart_tooltipItem__j8I9T>svg{color:var(--muted-foreground);height:.625rem;width:.625rem}.Chart_tooltipIndicator__Z-JWp{background-color:var(--color-bg);border-color:var(--color-border);border-radius:2px;border-width:1px;flex-shrink:0}.Chart_tooltipIndicator__Z-JWp.Chart_indicator-dot__MWcmW{height:.625rem;width:.625rem}.Chart_tooltipIndicator__Z-JWp.Chart_indicator-line__MO3ul{width:.25rem}.Chart_tooltipIndicator__Z-JWp.Chart_indicator-dashed__2LqIN{background-color:transparent;border-style:dashed;border-width:1.5px;width:0}.Chart_tooltipIndicator__Z-JWp.Chart_indicator-dashed__2LqIN.Chart_nested__7EWWk{margin-bottom:.125rem;margin-top:.125rem}.Chart_tooltipContent__M3R-W{display:flex;flex:1 1 0%;justify-content:space-between;line-height:1}.Chart_tooltipLabel__zMpjZ{display:grid;grid-gap:.375rem;gap:.375rem}.Chart_tooltipValue__vTQxU{color:var(--foreground);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:\"tnum\";font-variant-numeric:tabular-nums;font-weight:500;margin-left:var(--p-3)}.Chart_legendContainer__u1J3U{align-items:center;display:flex;gap:1rem;justify-content:center}.Chart_legendItem__0CSyC{align-items:center;display:flex;gap:.375rem}.Chart_legendItem__0CSyC>svg{color:var(--muted-foreground);height:.75rem;width:.75rem}.Chart_legendIndicator__erzzP{border-radius:2px;flex-shrink:0;height:.5rem;width:.5rem}.chart-line-blinking path{animation:chart-line-blink 1s ease-in-out infinite;animation-direction:alternate}@keyframes Chart_chart-line-blink__4EI-g{0%{opacity:.5}to{opacity:1}}";
+var css_248z = ".Chart_chartContainer__--q1l{aspect-ratio:16/9;display:flex;font-size:.75rem;justify-content:center;line-height:1rem;max-width:100%;touch-action:none;width:100%}.Chart_chartContainer__--q1l .recharts-cartesian-axis-tick text{fill:var(--muted-foreground)}.Chart_chartContainer__--q1l .recharts-cartesian-grid line[stroke=\"#ccc\"]{stroke:var(--border)}.dark .Chart_chartContainer__--q1l .recharts-cartesian-grid line[stroke=\"#ccc\"]{stroke:var(--sb-slate-900)}.Chart_chartContainer__--q1l .recharts-curve.recharts-tooltip-cursor,.Chart_chartContainer__--q1l .recharts-polar-grid [stroke=\"#ccc\"]{stroke:var(--border)}.Chart_chartContainer__--q1l .recharts-radial-bar-background-sector,.Chart_chartContainer__--q1l .recharts-rectangle.recharts-tooltip-cursor{fill:var(--muted)}.Chart_chartContainer__--q1l .recharts-reference-line [stroke=\"#ccc\"]{stroke:var(--border)}.Chart_chartContainer__--q1l .recharts-dot[stroke=\"#fff\"]{stroke:transparent}.Chart_chartContainer__--q1l .recharts-layer,.Chart_chartContainer__--q1l .recharts-sector{outline:none}.Chart_chartContainer__--q1l .recharts-sector[stroke=\"#fff\"]{stroke:transparent}.Chart_chartContainer__--q1l .recharts-surface{outline:none}.Chart_chartContainer__--q1l .recharts-wrapper{position:relative}.Chart_chartContainer__--q1l .recharts-surface{position:relative;z-index:1}.Chart_chartContainer__--q1l .recharts-tooltip-wrapper{z-index:3!important}.Chart_chartContainer__--q1l .recharts-active-dot{z-index:3}.Chart_chartGrid__t52WF{stroke-width:.6}.Chart_tooltipContainer__6tc0q{align-items:start;box-sizing:border-box;display:grid;max-width:100%;min-width:0;overflow-wrap:break-word;width:-moz-max-content;width:max-content;word-break:break-word;grid-gap:.375rem;background-color:var(--background);border:1px solid var(--border)/.5;border-radius:.5rem;box-shadow:0 10px 10px -5px rgba(0,0,0,.3),0 0 2px 0 rgba(0,0,0,.5);font-size:.75rem;gap:.375rem;line-height:1rem;opacity:0;padding:.375rem .625rem;transition:opacity .5s ease-out}.Chart_chartContainer__--q1l:hover .Chart_tooltipContainer__6tc0q{opacity:1;transition-duration:.5s}.Chart_tooltipItem__j8I9T{align-items:stretch;display:flex;flex-wrap:wrap;gap:.5rem;width:100%}.Chart_tooltipItem__j8I9T>svg{color:var(--muted-foreground);height:.625rem;width:.625rem}.Chart_tooltipIndicator__Z-JWp{background-color:var(--color-bg);border-color:var(--color-border);border-radius:2px;border-width:1px;flex-shrink:0}.Chart_tooltipIndicator__Z-JWp.Chart_indicator-dot__MWcmW{height:.625rem;width:.625rem}.Chart_tooltipIndicator__Z-JWp.Chart_indicator-line__MO3ul{width:.25rem}.Chart_tooltipIndicator__Z-JWp.Chart_indicator-dashed__2LqIN{background-color:transparent;border-style:dashed;border-width:1.5px;width:0}.Chart_tooltipIndicator__Z-JWp.Chart_indicator-dashed__2LqIN.Chart_nested__7EWWk{margin-bottom:.125rem;margin-top:.125rem}.Chart_tooltipContent__M3R-W{display:flex;flex:1 1 0%;justify-content:space-between;line-height:1}.Chart_tooltipLabel__zMpjZ{display:grid;grid-gap:.375rem;gap:.375rem}.Chart_tooltipValue__vTQxU{color:var(--foreground);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:\"tnum\";font-variant-numeric:tabular-nums;font-weight:500;margin-left:var(--p-3)}.Chart_legendContainer__u1J3U{align-items:center;display:flex;gap:1rem;justify-content:center}.Chart_legendItem__0CSyC{align-items:center;display:flex;gap:.375rem}.Chart_legendItem__0CSyC>svg{color:var(--muted-foreground);height:.75rem;width:.75rem}.Chart_legendIndicator__erzzP{border-radius:2px;flex-shrink:0;height:.5rem;width:.5rem}.chart-line-blinking path{animation:chart-line-blink 1s ease-in-out infinite;animation-direction:alternate}@keyframes Chart_chart-line-blink__4EI-g{0%{opacity:.5}to{opacity:1}}";
 var S = {"chartContainer":"Chart_chartContainer__--q1l","chartGrid":"Chart_chartGrid__t52WF","tooltipContainer":"Chart_tooltipContainer__6tc0q","tooltipItem":"Chart_tooltipItem__j8I9T","tooltipIndicator":"Chart_tooltipIndicator__Z-JWp","indicator-dot":"Chart_indicator-dot__MWcmW","indicator-line":"Chart_indicator-line__MO3ul","indicator-dashed":"Chart_indicator-dashed__2LqIN","nested":"Chart_nested__7EWWk","tooltipContent":"Chart_tooltipContent__M3R-W","tooltipLabel":"Chart_tooltipLabel__zMpjZ","tooltipValue":"Chart_tooltipValue__vTQxU","legendContainer":"Chart_legendContainer__u1J3U","legendItem":"Chart_legendItem__0CSyC","legendIndicator":"Chart_legendIndicator__erzzP","chart-line-blink":"Chart_chart-line-blink__4EI-g"};
 styleInject(css_248z);
 

package/dist/esm/components/ui/Chart/components/BaseChartWrapper.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import cn from 'classnames';
-import { forwardRef, useRef, useState, useEffect, useMemo } from 'react';
+import { forwardRef, useState, useRef, useMemo, useEffect } from 'react';
 import { ChartTooltip } from '../Chart.js';
 import { QuantileBands } from './QuantileBands.js';
 import { getForecastColor, ChartLines } from '../../ChartAreaInteractive/ChartLines.js';
@@ -16,6 +16,50 @@ import { ChartContainer } from './ChartContainer.js';
 import { CustomChartLegend } from './CustomChartLegend/CustomChartLegend.js';
 import { ChartTooltipContent } from './ChartTooltipContent.js';
 
+const DEFAULT_CHART_MARGIN = {
+    top: 5,
+    right: 5,
+    bottom: 5,
+    left: 5,
+};
+function resolveChartMargin(margin) {
+    return {
+        top: margin?.top ?? DEFAULT_CHART_MARGIN.top,
+        right: margin?.right ?? DEFAULT_CHART_MARGIN.right,
+        bottom: margin?.bottom ?? DEFAULT_CHART_MARGIN.bottom,
+        left: margin?.left ?? DEFAULT_CHART_MARGIN.left,
+    };
+}
+/** Plot box inside `.recharts-wrapper`, same convention as Recharts cartesian viewBox. */
+function getPlotViewBox(wrapper, m) {
+    const w = wrapper.clientWidth;
+    const h = wrapper.clientHeight;
+    return {
+        x: m.left,
+        y: m.top,
+        width: Math.max(0, w - m.left - m.right),
+        height: Math.max(0, h - m.top - m.bottom),
+    };
+}
+function clampTooltipTranslate(args) {
+    const { coordinate, viewBox, tooltipWidth: tw, tooltipHeight: th, offset, edgeMargin, } = args;
+    const minX = viewBox.x + edgeMargin;
+    const maxX = viewBox.x + viewBox.width - tw - edgeMargin;
+    const minY = viewBox.y + edgeMargin;
+    const maxY = viewBox.y + viewBox.height - th - edgeMargin;
+    const clamp = (v, lo, hi) => Math.min(Math.max(v, lo), Math.max(lo, hi));
+    let tx = coordinate.x + offset;
+    if (tx + tw > viewBox.x + viewBox.width - edgeMargin) {
+        tx = coordinate.x - tw - offset;
+    }
+    tx = clamp(tx, minX, maxX);
+    let ty = coordinate.y + offset;
+    if (ty + th > viewBox.y + viewBox.height - edgeMargin) {
+        ty = coordinate.y - th - offset;
+    }
+    ty = clamp(ty, minY, maxY);
+    return { x: tx, y: ty };
+}
 /**
  * Simple loading component without hooks for better performance
  * Rendered when chart is waiting in render queue
@@ -30,16 +74,8 @@ BaseChartWrapperLoading.displayName = 'BaseChartWrapperLoading';
  */
 const BaseChartWrapperContent = forwardRef((props, ref) => {
     const { chartConfig = {}, chartData, historicalLineColor, forecastData = [], loading, hasCombinedData, renderId, isDarkTheme, height, className, loadingComponentClassName, footerClassName, chartClassName, xAxisClassName, yAxisClassName, legendClassName, footerActions, quantileBands, quantileBandKey, xMin, xMax, yMin, yMax, autoScaleYAxis = true, formatNumber, formatDate: formatDateFn = formatDate, labelFormatter, onLegendClick, margin, chartType = 'composed', disableAnimation = false, showGrid = true, showAxes = true, showTooltip = true, showLegend = true, showChartAxesLegend = true, xAxisLabel, yAxisLabel, showActiveDots = true, overlayElements, hiddenSeries, excludeLegendIds, onAnalysisSelect, onFailedAnalysisClick, containerProps, error, loadingMessage, noDataMessage = 'No data available', onGridHeightChange, forecastLineStyle = 'dashed', disableHistoricalAnimation = false, onShowAll: _onShowAll, onShowOnly: _onShowOnly, maxVisibleItems, preventDeselection, legendVariant = 'default', legendWidth = 1000, legendMarginLeft = 0, } = props;
-    const activeDataRef = useRef(null);
-    /** Raw cursor position from Recharts (tooltip anchor). */
-    const rawTooltipCoordinateRef = useRef(null);
-    /** Last transform actually applied after viewport/boundary adjustment. */
-    const lastAppliedTooltipPositionRef = useRef(null);
-    const isTooltipActiveRef = useRef(false);
-    // const [activeDotsData, setActiveDotsData] = useState<ActiveDot[]>([]);
     const [shouldAnimate, setShouldAnimate] = useState(false);
     const rootRef = useRef(null);
-    // Merge forwarded ref with internal rootRef using callback ref
     const setRefs = (node) => {
         rootRef.current = node;
         if (typeof ref === 'function') {
@@ -49,107 +85,83 @@ const BaseChartWrapperContent = forwardRef((props, ref) => {
             ref.current = node;
         }
     };
-    // const prevGridHeightRef = useRef<number>(0);
-    const tooltipWrapperRef = useRef(null);
+    const resolvedChartMargin = useMemo(() => resolveChartMargin(margin), [margin?.top, margin?.right, margin?.bottom, margin?.left]);
     const TOOLTIP_EDGE_MARGIN = 8;
-    const applyTooltipPosition = (opts) => {
+    const TOOLTIP_OFFSET = 10;
+    const tooltipWrapperRef = useRef(null);
+    const rawTooltipCoordinateRef = useRef(null);
+    const tooltipSizeRef = useRef({
+        width: 0,
+        height: 0,
+    });
+    const tooltipResizeObserverRef = useRef(null);
+    const tooltipResizeObservedTargetRef = useRef(null);
+    const applyTooltipPosition = () => {
         const wrapper = tooltipWrapperRef.current;
-        const root = rootRef.current;
-        const raw = rawTooltipCoordinateRef.current;
-        if (!wrapper || !raw)
+        const coord = rawTooltipCoordinateRef.current;
+        const chartWrapper = rootRef.current?.querySelector('.recharts-wrapper');
+        if (!wrapper || !coord || !(chartWrapper instanceof HTMLElement))
             return;
-        const setTransform = (el, x, y) => {
-            el.style.transform = `translate(${x}px, ${y}px)`;
-            lastAppliedTooltipPositionRef.current = { x, y };
-        };
-        setTransform(wrapper, raw.x, raw.y);
-        if (opts?.skipBoundaryAdjust || !root)
+        const measured = wrapper.getBoundingClientRect();
+        const width = tooltipSizeRef.current.width || measured.width;
+        const height = tooltipSizeRef.current.height || measured.height;
+        if (width <= 0 || height <= 0)
             return;
-        const runAdjust = () => {
-            const w = tooltipWrapperRef.current;
-            const rEl = rootRef.current;
-            const rCoord = rawTooltipCoordinateRef.current;
-            if (!w || !rEl || !rCoord)
-                return;
-            const rootRect = rEl.getBoundingClientRect();
-            const rightBound = Math.min(rootRect.right, window.innerWidth);
-            let x = rCoord.x;
-            const y = rCoord.y;
-            w.style.transform = `translate(${x}px, ${y}px)`;
-            let tooltipRect = w.getBoundingClientRect();
-            if (tooltipRect.right > rightBound - TOOLTIP_EDGE_MARGIN) {
-                x -= tooltipRect.right - rightBound + TOOLTIP_EDGE_MARGIN;
-            }
-            const leftBound = Math.max(rootRect.left, 0);
-            w.style.transform = `translate(${x}px, ${y}px)`;
-            tooltipRect = w.getBoundingClientRect();
-            if (tooltipRect.left < leftBound + TOOLTIP_EDGE_MARGIN) {
-                x += leftBound + TOOLTIP_EDGE_MARGIN - tooltipRect.left;
-            }
-            setTransform(w, x, y);
-        };
-        requestAnimationFrame(() => {
-            requestAnimationFrame(runAdjust);
+        tooltipSizeRef.current = { width, height };
+        const next = clampTooltipTranslate({
+            coordinate: coord,
+            viewBox: getPlotViewBox(chartWrapper, resolvedChartMargin),
+            tooltipWidth: width,
+            tooltipHeight: height,
+            offset: TOOLTIP_OFFSET,
+            edgeMargin: TOOLTIP_EDGE_MARGIN,
         });
+        wrapper.style.transform = `translate(${next.x}px, ${next.y}px)`;
     };
     const applyTooltipPositionRef = useRef(applyTooltipPosition);
     applyTooltipPositionRef.current = applyTooltipPosition;
-    // Effect to watch for tooltip wrapper and apply transforms/opacity
+    // Own only the final transform: smooth follow cursor, but clamp in local chart coords first.
     useEffect(() => {
-        const restorePosition = () => {
-            const pos = lastAppliedTooltipPositionRef.current ??
-                rawTooltipCoordinateRef.current;
-            if (tooltipWrapperRef.current && pos) {
-                const currentTransform = tooltipWrapperRef.current.style.transform;
-                const expectedTransform = `translate(${pos.x}px, ${pos.y}px)`;
-                // Always restore position if transform is missing, reset, or doesn't match expected position
-                // This prevents Recharts from resetting the tooltip position
-                if (!currentTransform ||
-                    currentTransform === 'none' ||
-                    currentTransform === 'translate(0px, 0px)' ||
-                    currentTransform !== expectedTransform) {
-                    tooltipWrapperRef.current.style.transform = expectedTransform;
-                }
+        const connectResizeObserver = (wrapperEl) => {
+            if (tooltipResizeObservedTargetRef.current === wrapperEl) {
+                return;
             }
-        };
-        const findAndSetupTooltipWrapper = () => {
-            const wrapper = rootRef.current?.querySelector('.recharts-tooltip-wrapper');
-            if (wrapper && wrapper !== tooltipWrapperRef.current) {
-                tooltipWrapperRef.current = wrapper;
-                // Add transition for smooth movement and opacity
-                wrapper.style.transition =
-                    'transform 0.2s ease-out, opacity 0.2s ease-out';
-                // Override Recharts' visibility: hidden with visibility: visible
-                // We'll control visibility through opacity instead
-                wrapper.style.visibility = 'visible';
-                // Set initial opacity based on active state
-                const isActive = activeDataRef.current?.active === true;
-                wrapper.style.opacity = isActive ? '1' : '0';
-                wrapper.style.pointerEvents = isActive ? 'auto' : 'none';
-                // Always restore position if we have a last position
-                restorePosition();
-                if (rawTooltipCoordinateRef.current) {
-                    applyTooltipPositionRef.current();
-                }
+            const resizeRo = tooltipResizeObserverRef.current ??
+                new ResizeObserver(entries => {
+                    const entry = entries[0];
+                    if (!entry)
+                        return;
+                    const { width, height } = entry.contentRect;
+                    tooltipSizeRef.current = { width, height };
+                    requestAnimationFrame(() => applyTooltipPositionRef.current());
+                });
+            tooltipResizeObserverRef.current = resizeRo;
+            const prevObserved = tooltipResizeObservedTargetRef.current;
+            if (prevObserved && prevObserved !== wrapperEl) {
+                resizeRo.unobserve(prevObserved);
             }
-            // Always ensure visibility is visible (Recharts sets it to hidden)
-            if (tooltipWrapperRef.current) {
-                tooltipWrapperRef.current.style.visibility = 'visible';
-                // Continuously restore position to prevent resets
-                restorePosition();
+            tooltipResizeObservedTargetRef.current = wrapperEl;
+            resizeRo.observe(wrapperEl);
+            if (wrapperEl instanceof HTMLElement) {
+                tooltipWrapperRef.current = wrapperEl;
+                wrapperEl.style.transition =
+                    'transform 0.2s ease-out, opacity 0.2s ease-out';
+                requestAnimationFrame(() => applyTooltipPositionRef.current());
             }
         };
-        // Initial check
-        findAndSetupTooltipWrapper();
-        // Watch for tooltip wrapper changes and style mutations
+        const tryObserveTooltipWrapper = () => {
+            const wrapper = rootRef.current?.querySelector('.recharts-tooltip-wrapper');
+            if (wrapper)
+                connectResizeObserver(wrapper);
+        };
+        tryObserveTooltipWrapper();
         const observer = new MutationObserver(mutations => {
-            findAndSetupTooltipWrapper();
-            // If transform attribute changed, restore position if needed
+            tryObserveTooltipWrapper();
             mutations.forEach(mutation => {
                 if (mutation.type === 'attributes' &&
                     mutation.attributeName === 'style' &&
                     mutation.target === tooltipWrapperRef.current) {
-                    restorePosition();
+                    requestAnimationFrame(() => applyTooltipPositionRef.current());
                 }
             });
         });
@@ -161,27 +173,17 @@ const BaseChartWrapperContent = forwardRef((props, ref) => {
                 attributeFilter: ['style'],
             });
         }
-        // Use requestAnimationFrame to continuously monitor and restore position
-        // Only run when we have a last position to maintain
-        let rafId = null;
-        const monitorPosition = () => {
-            if (rawTooltipCoordinateRef.current && tooltipWrapperRef.current) {
-                restorePosition();
-                rafId = requestAnimationFrame(monitorPosition);
-            }
-            else {
-                rafId = null;
-            }
+        const onWinResize = () => {
+            requestAnimationFrame(() => applyTooltipPositionRef.current());
         };
-        // Start monitoring if we already have a position
-        if (rawTooltipCoordinateRef.current) {
-            rafId = requestAnimationFrame(monitorPosition);
-        }
+        window.addEventListener('resize', onWinResize);
         return () => {
             observer.disconnect();
-            if (rafId !== null) {
-                cancelAnimationFrame(rafId);
-            }
+            tooltipResizeObserverRef.current?.disconnect();
+            tooltipResizeObserverRef.current = null;
+            tooltipResizeObservedTargetRef.current = null;
+            tooltipWrapperRef.current = null;
+            window.removeEventListener('resize', onWinResize);
         };
     }, []);
     const renderTooltipContent = (props) => {
@@ -191,73 +193,18 @@ const BaseChartWrapperContent = forwardRef((props, ref) => {
         // If no valid payload items, render ChartTooltipContent with active=false and empty payload
         // This allows ChartTooltipContent to clear its lastTooltipData state
         if (!filteredPayload || filteredPayload.length === 0) {
-            // Update refs to reflect inactive state
-            if (isTooltipActiveRef.current) {
-                isTooltipActiveRef.current = false;
-                // Always maintain last position when tooltip becomes inactive
-                const pos = lastAppliedTooltipPositionRef.current ??
-                    rawTooltipCoordinateRef.current;
-                if (pos && tooltipWrapperRef.current) {
-                    const wrapper = tooltipWrapperRef.current;
-                    wrapper.style.transform = `translate(${pos.x}px, ${pos.y}px)`;
-                    wrapper.style.visibility = 'visible';
-                    wrapper.style.opacity = '0';
-                    wrapper.style.pointerEvents = 'none';
-                }
-            }
-            // Render ChartTooltipContent with active=false and empty payload to trigger cleanup
-            // This ensures lastTooltipData is cleared when there's no valid data
             return (jsx(ChartTooltipContent, { active: false, payload: [], label: props.label, labelFormatter: labelFormatter || defaultLabelFormatter, indicator: "dot" }));
         }
-        // Store tooltip data in ref (not state) to avoid re-render
-        // Use filtered payload instead of original props.payload
-        activeDataRef.current = {
-            ...props,
-            payload: filteredPayload,
-        };
-        const wasActive = isTooltipActiveRef.current;
         const isActive = props.active === true;
-        // When tooltip becomes active and has coordinate, update last position
         if (isActive && props.coordinate) {
-            const newCoordinate = {
+            rawTooltipCoordinateRef.current = {
                 x: props.coordinate.x,
                 y: props.coordinate.y,
             };
-            rawTooltipCoordinateRef.current = newCoordinate;
-            isTooltipActiveRef.current = true;
-            if (tooltipWrapperRef.current) {
-                tooltipWrapperRef.current.style.visibility = 'visible';
-                tooltipWrapperRef.current.style.opacity = '1';
-                tooltipWrapperRef.current.style.pointerEvents = 'auto';
-                applyTooltipPosition();
-            }
+            requestAnimationFrame(() => applyTooltipPositionRef.current());
         }
-        else if (!isActive && wasActive) {
-            isTooltipActiveRef.current = false;
-            // Always maintain last position when tooltip becomes inactive
-            const pos = lastAppliedTooltipPositionRef.current ??
-                rawTooltipCoordinateRef.current;
-            if (pos && tooltipWrapperRef.current) {
-                const wrapper = tooltipWrapperRef.current;
-                wrapper.style.transform = `translate(${pos.x}px, ${pos.y}px)`;
-                // Keep visibility visible but hide with opacity transition
-                wrapper.style.visibility = 'visible';
-                wrapper.style.opacity = '0';
-                wrapper.style.pointerEvents = 'none';
-            }
-        }
-        else if (!isActive && !wasActive) {
-            // Ensure opacity is 0 when inactive, but keep visibility visible and maintain position
-            if (tooltipWrapperRef.current) {
-                tooltipWrapperRef.current.style.visibility = 'visible';
-                tooltipWrapperRef.current.style.opacity = '0';
-                tooltipWrapperRef.current.style.pointerEvents = 'none';
-                const pos = lastAppliedTooltipPositionRef.current ??
-                    rawTooltipCoordinateRef.current;
-                if (pos) {
-                    tooltipWrapperRef.current.style.transform = `translate(${pos.x}px, ${pos.y}px)`;
-                }
-            }
+        else {
+            rawTooltipCoordinateRef.current = null;
         }
         return (jsx(ChartTooltipContent, { active: props.active, payload: filteredPayload, label: props.label, labelFormatter: labelFormatter || defaultLabelFormatter, indicator: "dot" }));
     };
@@ -385,7 +332,7 @@ const BaseChartWrapperContent = forwardRef((props, ref) => {
     }
     const ChartComponent = chartType === 'line' ? LineChart : ComposedChart;
     const defaultLabelFormatter = (v) => formatDateFn(v, true);
-    return (jsxs("div", { className: cn(S.root, !showLegend && S.noLegend, !showChartAxesLegend && S.hideChartAxesLegend, isLoaded && S.loaded, className), ref: setRefs, children: [loading && (jsx("div", { className: S.loadingOverlay, children: jsx(Skeleton, {}) })), showGrid && (jsx(ChartContainer, { config: chartConfig, className: cn(S.gridLayer, chartClassName), style: height ? { height: `${height}px` } : undefined, children: jsxs(ChartComponent, { data: chartData, margin: margin, children: [jsx(ChartGrid, {}), showAxes && (jsx(ChartAxes, { formatDate: formatDateFn, formatNumber: formatNumber, xAxisClassName: xAxisClassName, yAxisClassName: yAxisClassName, xAxisLabel: xAxisLabel, yAxisLabel: yAxisLabel, xMin: xMin, xMax: xMax, yMin: yMin, yMax: yMax, autoScaleYAxis: effectiveAutoScale }))] }) })), jsx(ChartContainer, { config: chartConfig, className: cn(S.chartLayer, chartClassName), style: height ? { height: `${height}px` } : undefined, ...containerProps, children: jsxs(ChartComponent, { data: chartData, margin: margin, children: [showAxes && (jsx(ChartAxes, { formatDate: formatDateFn, formatNumber: formatNumber, xAxisClassName: cn(xAxisClassName), yAxisClassName: cn(yAxisClassName), xAxisLabel: xAxisLabel, yAxisLabel: yAxisLabel, xMin: xMin, xMax: xMax, yMin: yMin, yMax: yMax, autoScaleYAxis: effectiveAutoScale })), quantileBands?.[0] && (jsx(QuantileBands, { hiddenBands: hiddenSeries, quantileBandKey: quantileBandKey, animate: true, animationDuration: 150, animationBegin: 0, customBands: quantileBands, showLegend: showLegend })), jsx(ChartLines, { historicalLineColor: historicalLineColor, chartData: chartData, forecastData: forecastData, hiddenSeries: hiddenSeries, isDarkTheme: isDarkTheme, shouldAnimate: shouldAnimate, showLegend: showLegend, forecastLineStyle: forecastLineStyle }), showTooltip && (jsx("div", { children: jsx(ChartTooltip, { cursor: false, content: renderTooltipContent }) }))] }) }), overlayElements, jsxs("div", { className: cn(S.footer, footerClassName), children: [showLegend &&
+    return (jsxs("div", { className: cn(S.root, !showLegend && S.noLegend, !showChartAxesLegend && S.hideChartAxesLegend, isLoaded && S.loaded, className), ref: setRefs, children: [loading && (jsx("div", { className: S.loadingOverlay, children: jsx(Skeleton, {}) })), showGrid && (jsx(ChartContainer, { config: chartConfig, className: cn(S.gridLayer, chartClassName), style: height ? { height: `${height}px` } : undefined, children: jsxs(ChartComponent, { data: chartData, margin: margin, children: [jsx(ChartGrid, {}), showAxes && (jsx(ChartAxes, { formatDate: formatDateFn, formatNumber: formatNumber, xAxisClassName: xAxisClassName, yAxisClassName: yAxisClassName, xAxisLabel: xAxisLabel, yAxisLabel: yAxisLabel, xMin: xMin, xMax: xMax, yMin: yMin, yMax: yMax, autoScaleYAxis: effectiveAutoScale }))] }) })), jsx(ChartContainer, { config: chartConfig, className: cn(S.chartLayer, chartClassName), style: height ? { height: `${height}px` } : undefined, ...containerProps, children: jsxs(ChartComponent, { data: chartData, margin: margin, children: [showAxes && (jsx(ChartAxes, { formatDate: formatDateFn, formatNumber: formatNumber, xAxisClassName: cn(xAxisClassName), yAxisClassName: cn(yAxisClassName), xAxisLabel: xAxisLabel, yAxisLabel: yAxisLabel, xMin: xMin, xMax: xMax, yMin: yMin, yMax: yMax, autoScaleYAxis: effectiveAutoScale })), quantileBands?.[0] && (jsx(QuantileBands, { hiddenBands: hiddenSeries, quantileBandKey: quantileBandKey, animate: true, animationDuration: 150, animationBegin: 0, customBands: quantileBands, showLegend: showLegend })), jsx(ChartLines, { historicalLineColor: historicalLineColor, chartData: chartData, forecastData: forecastData, hiddenSeries: hiddenSeries, isDarkTheme: isDarkTheme, shouldAnimate: shouldAnimate, showLegend: showLegend, forecastLineStyle: forecastLineStyle }), showTooltip && (jsx("div", { children: jsx(ChartTooltip, { cursor: false, offset: TOOLTIP_OFFSET, allowEscapeViewBox: { x: false, y: false }, content: renderTooltipContent }) }))] }) }), overlayElements, jsxs("div", { className: cn(S.footer, footerClassName), children: [showLegend &&
                         (legendVariant === 'svg' ? (jsx(LegendSvg, { payload: legendPayload.map(p => ({
                                 value: p.value,
                                 color: p.color,

package/dist/esm/components/ui/ChartAreaInteractive/ChartAreaInteractive.helpers.js

@@ -1,4 +1,104 @@
 // Helper function to format large numbers with k/m abbreviations
+const timeRangeToMonths = {
+    '6m': 6,
+    '1y': 12,
+    '3y': 36,
+    '5y': 60,
+    All: 12,
+};
+function isPlottableNumber(value) {
+    return typeof value === 'number' && Number.isFinite(value);
+}
+/** Any row the chart can draw a number for (excludes date-only or empty rows) */
+function hasPlottableChartSeriesValue(item) {
+    for (const [key, v] of Object.entries(item)) {
+        if (key === 'date')
+            continue;
+        if (isPlottableNumber(v))
+            return true;
+        if (Array.isArray(v) && v.some(x => isPlottableNumber(x))) {
+            return true;
+        }
+    }
+    return false;
+}
+/**
+ * Row counts toward the "end" of the window when anchoring the time range to a
+ * selected forecast (shared historical + that analysis line / quantiles).
+ */
+function rowContributesToAnchoredTimeRange(item, analysisId) {
+    if (isPlottableNumber(item.historical)) {
+        return true;
+    }
+    const forecastKey = `forecast_${analysisId}`;
+    if (isPlottableNumber(item[forecastKey])) {
+        return true;
+    }
+    for (const key of Object.keys(item)) {
+        if (key.startsWith('q') && key.endsWith(`_${analysisId}`)) {
+            if (isPlottableNumber(item[key])) {
+                return true;
+            }
+        }
+    }
+    return false;
+}
+function computeLatestPlottableDate(data, options) {
+    const anchorId = options?.endDateAnchorAnalysisId;
+    const pick = (item, useAnchor) => {
+        if (!item.date)
+            return null;
+        if (useAnchor && anchorId != null) {
+            if (!rowContributesToAnchoredTimeRange(item, anchorId)) {
+                return null;
+            }
+        }
+        else if (!hasPlottableChartSeriesValue(item)) {
+            return null;
+        }
+        return new Date(item.date);
+    };
+    let latest = null;
+    for (const item of data) {
+        const d = pick(item, true);
+        if (d && (!latest || d > latest)) {
+            latest = d;
+        }
+    }
+    if (latest == null && anchorId != null) {
+        for (const item of data) {
+            const d = pick(item, false);
+            if (d && (!latest || d > latest)) {
+                latest = d;
+            }
+        }
+    }
+    return latest;
+}
+const filterDataForTimeRange = (data, currentTimeRange, options) => {
+    if (currentTimeRange === 'All')
+        return data;
+    const latestDate = computeLatestPlottableDate(data, options);
+    // Pre-compute start date based on latest date in data
+    let startDate = null;
+    if (latestDate) {
+        const monthsToSubtract = timeRangeToMonths[currentTimeRange] || timeRangeToMonths.All;
+        startDate = new Date(latestDate);
+        startDate.setMonth(startDate.getMonth() - monthsToSubtract);
+    }
+    // Slice by date for every row. Rows with forecast_* keys must not bypass the
+    // window (e.g. spaghetti plots), or the X range stays stuck at full history.
+    const filteredData = data.filter(item => {
+        if (!item.date)
+            return false;
+        if (startDate) {
+            const date = new Date(item.date);
+            return date >= startDate;
+        }
+        return true;
+    });
+    return filteredData;
+};
 const shortDateFormatter = (value) => {
     return new Date(value).toLocaleDateString('en-US', {
         month: 'short',
@@ -12,4 +112,4 @@ const longDateFormatter = (value) => {
     });
 };
 
-export { longDateFormatter, shortDateFormatter };
+export { filterDataForTimeRange, longDateFormatter, shortDateFormatter };

package/dist/esm/components/ui/ChartAreaInteractive/ChartAreaInteractive.js

@@ -5,7 +5,7 @@ import { BaseChartWrapper } from '../Chart/components/BaseChartWrapper.js';
 import { InteractionOverlay } from '../InteractionOverlay/InteractionOverlay.js';
 import { TimeRangeControls } from '../TimeRangeControls/TimeRangeControls.js';
 import { ensureChartForecastBridge } from '../../../utils/chartConnectionPoint.js';
-import { shortDateFormatter, longDateFormatter } from './ChartAreaInteractive.helpers.js';
+import { filterDataForTimeRange, shortDateFormatter, longDateFormatter } from './ChartAreaInteractive.helpers.js';
 import S from './ChartAreaInteractive.styl.js';
 import { PinOverlay } from './overlays/PinOverlay/PinOverlay.js';
 import { IntervalsOverlay } from './overlays/IntervalsOverlay/IntervalsOverlay.js';
@@ -37,11 +37,19 @@ function ChartAreaInteractive({ className, chartContainerClassName, legendClassN
             ensureAnalysisSeriesVisible(selectedAnalysisId);
         }
     }, [selectedAnalysisId, ensureAnalysisSeriesVisible]);
+    const timeFilteredChartData = useMemo(() => {
+        const raw = selectedAnalysisId ?? selectedForecast?.id ?? null;
+        const anchorId = raw == null ? null : typeof raw === 'number' ? raw : Number(raw);
+        const opts = anchorId != null && Number.isFinite(anchorId)
+            ? { endDateAnchorAnalysisId: anchorId }
+            : undefined;
+        return filterDataForTimeRange(chartData, timeRange, opts);
+    }, [chartData, timeRange, selectedAnalysisId, selectedForecast?.id]);
     const bridgedChartData = useMemo(() => disableForecastHistoricalBridge
-        ? chartData
-        : ensureChartForecastBridge(chartData, {
+        ? timeFilteredChartData
+        : ensureChartForecastBridge(timeFilteredChartData, {
             forecastSeriesIds: forecastData?.map(f => f.id),
-        }), [chartData, disableForecastHistoricalBridge, forecastData]);
+        }), [timeFilteredChartData, disableForecastHistoricalBridge, forecastData]);
     // Extract quantileBands from restProps
     // const quantileBands = (restProps as any).quantileBands;
     const getLoadingMessage = () => {

package/dist/esm/index.js

@@ -1,4 +1,5 @@
 export { MINIAPP_CHANNEL, MINIAPP_VERSION, applyThemeToDocument, buildReadyMessage, parseThemeSyncMessage, resolveParentOriginFromReferrer } from './mini-app/miniAppProtocol.js';
+export { getDefaultMiniAppThemeConfig } from './mini-app/miniAppThemeConfig.js';
 export { MiniAppRoot, useMiniAppShellTheme } from './mini-app/MiniAppRoot.js';
 export { ChatContext, ChatProvider, useChat, useChats, useChatsForDataset, useChatsForScopeId, useCurrentChat } from './contexts/chat-context.js';
 export { AnalysesSelector } from './components/ui/AnalysesSelector/AnalysesSelector.js';

package/dist/esm/mini-app/MiniAppRoot.js

@@ -1,9 +1,10 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import cn from 'classnames';
-import { createContext, useContext, useState, useRef, useCallback, useEffect, useMemo } from 'react';
-import { Scroll } from '@homecode/ui';
+import { createContext, useContext, useState, useRef, useMemo, useCallback, useEffect } from 'react';
+import { Theme, Scroll } from '@homecode/ui';
 import S from './MiniAppRoot.styl.js';
 import { resolveParentOriginFromReferrer, applyThemeToDocument, buildReadyMessage, parseThemeSyncMessage } from './miniAppProtocol.js';
+import { getDefaultMiniAppThemeConfig } from './miniAppThemeConfig.js';
 
 const defaultTheme = {
     mode: 'light',
@@ -45,10 +46,13 @@ function isTrustedParentMessage(event) {
         return false;
     return true;
 }
-function MiniAppRoot({ children, className, appId, onThemeChange, }) {
+function MiniAppRoot({ children, className, appId, onThemeChange, getThemeConfig, }) {
     const [theme, setTheme] = useState(() => isEmbeddedMiniApp() ? defaultTheme : themeFromDocument());
     const onThemeChangeRef = useRef(onThemeChange);
     onThemeChangeRef.current = onThemeChange;
+    const getThemeConfigRef = useRef(getThemeConfig ?? getDefaultMiniAppThemeConfig);
+    getThemeConfigRef.current = getThemeConfig ?? getDefaultMiniAppThemeConfig;
+    const currThemeConfig = useMemo(() => getThemeConfigRef.current(theme.isDarkMode), [theme.isDarkMode]);
     const sendReady = useCallback(() => {
         if (!window.parent || window.parent === window)
             return;
@@ -88,7 +92,7 @@ function MiniAppRoot({ children, className, appId, onThemeChange, }) {
         return () => window.removeEventListener('load', sendReady);
     }, [sendReady]);
     const ctx = useMemo(() => ({ theme }), [theme]);
-    return (jsx(MiniAppShellContext.Provider, { value: ctx, children: jsx(Scroll, { y: true, fadeSize: "l", className: cn(S.root, className), innerClassName: S.inner, offset: { y: { before: 50, after: 50 } }, autoHide: true, children: children }) }));
+    return (jsxs(MiniAppShellContext.Provider, { value: ctx, children: [jsx(Theme, { config: currThemeConfig }), jsx(Scroll, { y: true, fadeSize: "l", className: cn(S.root, className), innerClassName: S.inner, offset: { y: { before: 50, after: 50 } }, autoHide: true, children: children })] }));
 }
 
 export { MiniAppRoot, useMiniAppShellTheme };