@sybilion/uilib 1.0.27 → 1.0.28

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/types/src/components/ui/ChartAreaInteractive/ChartAreaInteractive.helpers.d.ts

@@ -9,7 +9,12 @@ declare const timeRangeToMonths: {
     readonly All: 12;
 };
 export type TimeRange = keyof typeof timeRangeToMonths;
-export declare const filterDataForTimeRange: (data: ChartDataPoint[], currentTimeRange: TimeRange, availableAnalyses: number[]) => ChartDataPoint[];
+export type FilterDataForTimeRangeOptions = {
+    /** When set (e.g. selected forecast on Forecast tab), the window ends at the
+     *  latest point that has shared historical or that analysis — not at another run. */
+    endDateAnchorAnalysisId?: number | null;
+};
+export declare const filterDataForTimeRange: (data: ChartDataPoint[], currentTimeRange: TimeRange, options?: FilterDataForTimeRangeOptions) => ChartDataPoint[];
 export declare const shortDateFormatter: (value: string) => string;
 export declare const longDateFormatter: (value: string) => string;
 /**

package/dist/esm/types/src/docs/contexts/theme-context.d.ts

@@ -4,5 +4,6 @@ export declare function ThemeProvider({ children }: {
 }): import("react/jsx-runtime").JSX.Element;
 export declare const useTheme: () => {
     theme: ThemeMode;
+    isDarkMode: boolean;
     setTheme: (theme: ThemeMode) => void;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sybilion/uilib",
-  "version": "1.0.27",
+  "version": "1.0.28",
   "description": "Sybilion Design System — React UI components (Webpack + Stylus)",
   "publishConfig": {
     "access": "public",

package/src/components/ui/Chart/Chart.styl

@@ -57,10 +57,9 @@
       position relative
       z-index 1
 
-    // Tooltip wrapper is positioned absolutely, can have higher z-index
+    // Tooltip portal positions with absolute + transform; do not override with relative.
     .recharts-tooltip-wrapper
       z-index 3 !important
-      position relative
 
     // Active dots and cursor
     .recharts-active-dot
@@ -75,8 +74,12 @@
 // Tooltip styles
 .tooltipContainer
   display grid
-  width minmax(300px, 100%)
-  min-width 8rem
+  box-sizing border-box
+  width max-content
+  max-width 100%
+  min-width 0
+  overflow-wrap break-word
+  word-break break-word
   align-items start
   gap 0.375rem /* gap-1.5 */
   padding 0.375rem 0.625rem /* py-1.5 px-2.5 */

package/src/components/ui/Chart/components/BaseChartWrapper.tsx

@@ -35,6 +35,78 @@ import { ChartAxes } from './ChartAxes';
 import { ChartGrid } from './ChartGrid';
 import { LegendSvg } from './LegendSvg/LegendSvg';
 
+type ChartMargin = { top: number; right: number; bottom: number; left: number };
+
+const DEFAULT_CHART_MARGIN: ChartMargin = {
+  top: 5,
+  right: 5,
+  bottom: 5,
+  left: 5,
+};
+
+function resolveChartMargin(
+  margin: Partial<ChartMargin> | undefined,
+): ChartMargin {
+  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: HTMLElement, m: ChartMargin) {
+  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: {
+  coordinate: { x: number; y: number };
+  viewBox: { x: number; y: number; width: number; height: number };
+  tooltipWidth: number;
+  tooltipHeight: number;
+  offset: number;
+  edgeMargin: number;
+}): { x: number; y: number } {
+  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: number, lo: number, hi: number) =>
+    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 };
+}
+
 export interface BaseChartWrapperProps {
   renderId?: string; // unique id for the render, used to identify the render in the render queue
   chartConfig?: ChartConfig;
@@ -200,21 +272,10 @@ const BaseChartWrapperContent = forwardRef<
     legendMarginLeft = 0,
   } = props;
 
-  const activeDataRef = useRef<any>(null);
-  /** Raw cursor position from Recharts (tooltip anchor). */
-  const rawTooltipCoordinateRef = useRef<{ x: number; y: number } | null>(null);
-  /** Last transform actually applied after viewport/boundary adjustment. */
-  const lastAppliedTooltipPositionRef = useRef<{ x: number; y: number } | null>(
-    null,
-  );
-  const isTooltipActiveRef = useRef<boolean>(false);
-
-  // const [activeDotsData, setActiveDotsData] = useState<ActiveDot[]>([]);
   const [shouldAnimate, setShouldAnimate] = useState(false);
 
   const rootRef = useRef<HTMLDivElement>(null);
 
-  // Merge forwarded ref with internal rootRef using callback ref
   const setRefs = (node: HTMLDivElement | null) => {
     rootRef.current = node;
     if (typeof ref === 'function') {
@@ -223,137 +284,105 @@ const BaseChartWrapperContent = forwardRef<
       ref.current = node;
     }
   };
-  // const prevGridHeightRef = useRef<number>(0);
-  const tooltipWrapperRef = useRef<HTMLElement | null>(null);
+
+  const resolvedChartMargin = useMemo(
+    () => resolveChartMargin(margin),
+    [margin?.top, margin?.right, margin?.bottom, margin?.left],
+  );
 
   const TOOLTIP_EDGE_MARGIN = 8;
+  const TOOLTIP_OFFSET = 10;
 
-  const applyTooltipPosition = (opts?: { skipBoundaryAdjust?: boolean }) => {
+  const tooltipWrapperRef = useRef<HTMLElement | null>(null);
+  const rawTooltipCoordinateRef = useRef<{ x: number; y: number } | null>(null);
+  const tooltipSizeRef = useRef<{ width: number; height: number }>({
+    width: 0,
+    height: 0,
+  });
+  const tooltipResizeObserverRef = useRef<ResizeObserver | null>(null);
+  const tooltipResizeObservedTargetRef = useRef<Element | null>(null);
+
+  const applyTooltipPosition = () => {
     const wrapper = tooltipWrapperRef.current;
-    const root = rootRef.current;
-    const raw = rawTooltipCoordinateRef.current;
-    if (!wrapper || !raw) return;
+    const coord = rawTooltipCoordinateRef.current;
+    const chartWrapper = rootRef.current?.querySelector('.recharts-wrapper');
 
-    const setTransform = (el: HTMLElement, x: number, y: number) => {
-      el.style.transform = `translate(${x}px, ${y}px)`;
-      lastAppliedTooltipPositionRef.current = { x, y };
-    };
+    if (!wrapper || !coord || !(chartWrapper instanceof HTMLElement)) return;
 
-    setTransform(wrapper, raw.x, raw.y);
+    const measured = wrapper.getBoundingClientRect();
+    const width = tooltipSizeRef.current.width || measured.width;
+    const height = tooltipSizeRef.current.height || measured.height;
 
-    if (opts?.skipBoundaryAdjust || !root) return;
+    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;
-      }
+    tooltipSizeRef.current = { width, height };
 
-      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);
+    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: Element) => {
+      if (tooltipResizeObservedTargetRef.current === wrapperEl) {
+        return;
       }
-    };
-
-    const findAndSetupTooltipWrapper = () => {
-      const wrapper = rootRef.current?.querySelector(
-        '.recharts-tooltip-wrapper',
-      ) as HTMLElement | null;
+      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;
 
-      if (wrapper && wrapper !== tooltipWrapperRef.current) {
-        tooltipWrapperRef.current = wrapper;
+      const prevObserved = tooltipResizeObservedTargetRef.current;
+      if (prevObserved && prevObserved !== wrapperEl) {
+        resizeRo.unobserve(prevObserved);
+      }
+      tooltipResizeObservedTargetRef.current = wrapperEl;
+      resizeRo.observe(wrapperEl);
 
-        // Add transition for smooth movement and opacity
-        wrapper.style.transition =
+      if (wrapperEl instanceof HTMLElement) {
+        tooltipWrapperRef.current = wrapperEl;
+        wrapperEl.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();
-        }
+        requestAnimationFrame(() => applyTooltipPositionRef.current());
       }
+    };
 
-      // 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();
-      }
+    const tryObserveTooltipWrapper = () => {
+      const wrapper = rootRef.current?.querySelector(
+        '.recharts-tooltip-wrapper',
+      );
+      if (wrapper) connectResizeObserver(wrapper);
     };
 
-    // Initial check
-    findAndSetupTooltipWrapper();
+    tryObserveTooltipWrapper();
 
-    // Watch for tooltip wrapper changes and style mutations
     const observer = new MutationObserver(mutations => {
-      findAndSetupTooltipWrapper();
+      tryObserveTooltipWrapper();
 
-      // If transform attribute changed, restore position if needed
       mutations.forEach(mutation => {
         if (
           mutation.type === 'attributes' &&
           mutation.attributeName === 'style' &&
           mutation.target === tooltipWrapperRef.current
         ) {
-          restorePosition();
+          requestAnimationFrame(() => applyTooltipPositionRef.current());
         }
       });
     });
@@ -367,28 +396,18 @@ const BaseChartWrapperContent = forwardRef<
       });
     }
 
-    // Use requestAnimationFrame to continuously monitor and restore position
-    // Only run when we have a last position to maintain
-    let rafId: number | null = 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);
     };
   }, []);
 
@@ -403,23 +422,6 @@ const BaseChartWrapperContent = forwardRef<
     // 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 (
         <ChartTooltipContent
           active={false}
@@ -431,60 +433,16 @@ const BaseChartWrapperContent = forwardRef<
       );
     }
 
-    // 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();
-      }
-    } 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)`;
-        }
-      }
+      requestAnimationFrame(() => applyTooltipPositionRef.current());
+    } else {
+      rawTooltipCoordinateRef.current = null;
     }
 
     return (
@@ -753,7 +711,12 @@ const BaseChartWrapperContent = forwardRef<
 
           {showTooltip && (
             <div>
-              <ChartTooltip cursor={false} content={renderTooltipContent} />
+              <ChartTooltip
+                cursor={false}
+                offset={TOOLTIP_OFFSET}
+                allowEscapeViewBox={{ x: false, y: false }}
+                content={renderTooltipContent}
+              />
             </div>
           )}
         </ChartComponent>

package/src/components/ui/ChartAreaInteractive/ChartAreaInteractive.helpers.ts

@@ -67,22 +67,99 @@ const timeRangeToMonths = {
 
 export type TimeRange = keyof typeof timeRangeToMonths;
 
+function isPlottableNumber(value: unknown): value is number {
+  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: ChartDataPoint): boolean {
+  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: ChartDataPoint,
+  analysisId: number,
+): boolean {
+  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: ChartDataPoint[],
+  options?: { endDateAnchorAnalysisId?: number | null },
+): Date | null {
+  const anchorId = options?.endDateAnchorAnalysisId;
+
+  const pick = (item: ChartDataPoint, useAnchor: boolean): Date | null => {
+    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: Date | null = 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;
+}
+
+export type FilterDataForTimeRangeOptions = {
+  /** When set (e.g. selected forecast on Forecast tab), the window ends at the
+   *  latest point that has shared historical or that analysis — not at another run. */
+  endDateAnchorAnalysisId?: number | null;
+};
+
 export const filterDataForTimeRange = (
   data: ChartDataPoint[],
   currentTimeRange: TimeRange,
-  availableAnalyses: number[],
+  options?: FilterDataForTimeRangeOptions,
 ) => {
   if (currentTimeRange === 'All') return data;
 
-  // Find the latest date in the data
-  const latestDate = data.reduce(
-    (latest, item) => {
-      if (!item.date) return latest;
-      const itemDate = new Date(item.date);
-      return !latest || itemDate > latest ? itemDate : latest;
-    },
-    null as Date | null,
-  );
+  const latestDate = computeLatestPlottableDate(data, options);
 
   // Pre-compute start date based on latest date in data
   let startDate: Date | null = null;
@@ -93,41 +170,14 @@ export const filterDataForTimeRange = (
     startDate.setMonth(startDate.getMonth() - monthsToSubtract);
   }
 
-  // Create a Set for faster lookup when there are many analyses
-  const forecastKeyPrefix = 'forecast_';
-  const hasManyAnalyses = availableAnalyses.length > 10;
-  const hasAnalyses = availableAnalyses.length > 0;
-  const forecastKeysSet = hasManyAnalyses
-    ? new Set(availableAnalyses.map(id => `${forecastKeyPrefix}${id}`))
-    : null;
-
+  // 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 (hasAnalyses) {
-      // Optimize forecast data check for many analyses
-      let hasForecastData = false;
-      if (hasManyAnalyses && forecastKeysSet) {
-        // Check if any forecast key exists in the item
-        hasForecastData = Object.keys(item).some(key =>
-          forecastKeysSet.has(key),
-        );
-      } else {
-        // Original approach for small number of analyses
-        hasForecastData = availableAnalyses.some(
-          analysisId => item[`forecast_${analysisId}`] !== undefined,
-        );
-      }
-
-      if (hasForecastData) {
-        return true;
-      }
-    }
-
-    // For historical data, apply time range filtering
+    if (!item.date) return false;
     if (startDate) {
       const date = new Date(item.date);
       return date >= startDate;
     }
-
     return true;
   });
   return filteredData;

package/src/components/ui/ChartAreaInteractive/ChartAreaInteractive.tsx

@@ -11,6 +11,7 @@ import { TimeRangeControls } from '#uilib/components/ui/TimeRangeControls/TimeRa
 import { ensureChartForecastBridge } from '#uilib/utils/chartConnectionPoint';
 
 import {
+  filterDataForTimeRange,
   longDateFormatter,
   shortDateFormatter,
 } from './ChartAreaInteractive.helpers';
@@ -94,14 +95,25 @@ export function ChartAreaInteractive({
     }
   }, [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

package/src/docs/contexts/theme-context.tsx

@@ -8,9 +8,11 @@ export type ThemeMode = 'light' | 'dark';
 
 const ThemeContext = createContext<{
   theme: ThemeMode;
+  isDarkMode: boolean;
   setTheme: (theme: ThemeMode) => void;
 }>({
   theme: 'light',
+  isDarkMode: false,
   setTheme: () => {},
 });
 
@@ -37,7 +39,13 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
   }, [theme]);
 
   return (
-    <ThemeContext.Provider value={{ theme, setTheme }}>
+    <ThemeContext.Provider
+      value={{
+        theme,
+        isDarkMode: theme === 'dark',
+        setTheme,
+      }}
+    >
       <ThemeRoot config={currThemeConfig} />
       {children}
     </ThemeContext.Provider>

package/src/docs/pages/ChartAreaInteractivePage.tsx

@@ -9,6 +9,7 @@ import type {
 import { ForecastItemData } from '#uilib/components/ui/ChartAreaInteractive/ChartLines';
 import { PageContentSection } from '#uilib/components/ui/Page';
 import { Tabs, TabsList, TabsTrigger } from '#uilib/components/ui/Tabs';
+import { useTheme } from '#uilib/docs/contexts/theme-context';
 import type { ForecastData } from '#uilib/types/forecast-data';
 
 import { AppPageHeader } from '../components/AppPageHeader/AppPageHeader';
@@ -48,6 +49,30 @@ const DEMO_DISCRETE_THRESHOLDS = (() => {
 })();
 
 const INITIAL_CHART: ChartDataPoint[] = [
+  { date: '2021-01-01', historical: 6 },
+  { date: '2021-02-01', historical: 8 },
+  { date: '2021-03-01', historical: 7 },
+  { date: '2021-04-01', historical: 10 },
+  { date: '2021-05-01', historical: 9 },
+  { date: '2021-06-01', historical: 10 },
+  { date: '2021-07-01', historical: 11 },
+  { date: '2021-08-01', historical: 10 },
+  { date: '2021-09-01', historical: 12 },
+  { date: '2021-10-01', historical: 11 },
+  { date: '2021-11-01', historical: 13 },
+  { date: '2021-12-01', historical: 12 },
+  { date: '2022-01-01', historical: 8 },
+  { date: '2022-02-01', historical: 10 },
+  { date: '2022-03-01', historical: 9 },
+  { date: '2022-04-01', historical: 12 },
+  { date: '2022-05-01', historical: 11 },
+  { date: '2022-06-01', historical: 12 },
+  { date: '2022-07-01', historical: 13 },
+  { date: '2022-08-01', historical: 12 },
+  { date: '2022-09-01', historical: 14 },
+  { date: '2022-10-01', historical: 13 },
+  { date: '2022-11-01', historical: 15 },
+  { date: '2022-12-01', historical: 14 },
   { date: '2023-01-01', historical: 10 },
   { date: '2023-02-01', historical: 12 },
   { date: '2023-03-01', historical: 11 },
@@ -65,6 +90,7 @@ const DEMO_FORECAST_ITEMS: ForecastItemData[] = [
 type DemoMode = 'none' | OverlayMode;
 
 export default function ChartAreaInteractivePage() {
+  const { isDarkMode } = useTheme();
   const [timeRange, setTimeRange] = useState<TimeRange>('1y');
   const [pinMonth, setPinMonth] = useState<string | undefined>(undefined);
   const [demoMode, setDemoMode] = useState<DemoMode>('none');
@@ -139,7 +165,7 @@ export default function ChartAreaInteractivePage() {
           chartData={chartData}
           forecastData={DEMO_FORECAST_ITEMS}
           loading={false}
-          isDarkTheme={false}
+          isDarkTheme={isDarkMode}
           toggleLegendSeries={toggleLegendSeries}
           ensureAnalysisSeriesVisible={ensureAnalysisSeriesVisible}
           hiddenSeries={hidden}