gloomberb 0.10.1 → 0.10.2

package/src/components/chart/composite/composite-chart.tsx

@@ -64,8 +64,11 @@ import {
 import {
   renderCompositeAxisText,
   renderCompositePanelText,
-  renderCompositeTimeAxis,
 } from "./text-renderer";
+import {
+  buildCompositeTimeAxisLayout,
+  buildCompositeViewportTimeAxisLayout,
+} from "./time-axis";
 import type {
   CompositeChartColors,
   CompositeChartProps,
@@ -78,6 +81,12 @@ import type {
 const DESKTOP_BITMAP_RESIZE_DEBOUNCE_MS = 32;
 const LEGEND_WHEEL_DELTA_PER_CELL = 8;
 
+function isVerticalWheelDirection(
+  direction: "up" | "down" | "left" | "right",
+): direction is "up" | "down" {
+  return direction === "up" || direction === "down";
+}
+
 function renderPanelBitmap(
   panel: CompositePanelScene,
   bitmapSize: StaticChartBitmapSize,
@@ -400,21 +409,13 @@ function CompositePanelSurface({
     consumeChartMouseEvent(event);
     const pointerTarget = plotRef.current as unknown as Parameters<typeof getLocalPlotPointer>[1];
     const pointer = getLocalPlotPointer(event, pointerTarget, renderer);
-    if (event.modifiers.ctrl && pointer) {
-      const zoomIn = direction === "up" || direction === "left";
+    if (event.modifiers.ctrl && pointer && isVerticalWheelDirection(direction)) {
+      const zoomIn = direction === "up";
       const magnitude = Math.min(Math.max(Math.abs(event.scroll?.delta ?? 1), 1), 8);
       const pointerRatio = pointer.cellX / Math.max(plotWidth - 1, 1);
-      const anchorDate = resolveCompositeCursorDate(scene, pointer.cellX);
-      const viewportSpan = Math.max(viewport.end.getTime() - viewport.start.getTime(), 1);
-      const viewportAnchorRatio = anchorDate
-        ? Math.max(0, Math.min(
-            1,
-            (anchorDate.getTime() - viewport.start.getTime()) / viewportSpan,
-          ))
-        : pointerRatio;
       onZoomViewport(
         zoomIn ? 1 + magnitude * 0.04 : 1 / (1 + magnitude * 0.04),
-        viewportAnchorRatio,
+        pointerRatio,
       );
       updateCursor(event);
       return;
@@ -734,12 +735,14 @@ function CompositeLegend({
 export function CompositeChart({
   series,
   legendSeries,
+  timelineSeries,
   panels,
   width,
   height,
   focused = false,
   cursorDate,
   viewport,
+  viewportResetKey,
   colors,
   interactive = true,
   axisWidth = 9,
@@ -762,6 +765,12 @@ export function CompositeChart({
   const totalWidth = Math.max(1, Math.floor(width));
   const totalHeight = Math.max(1, Math.floor(height));
   const visibleSeries = useMemo(() => series.filter((entry) => entry.points.length > 0), [series]);
+  const marketTimelineSeries = useMemo(() => {
+    const supplied = timelineSeries?.filter((entry) => entry.points.length > 0) ?? [];
+    return supplied.some((entry) => entry.timeBasis?.kind === "market")
+      ? supplied
+      : visibleSeries;
+  }, [timelineSeries, visibleSeries]);
   const visibleLegendSeries = useMemo(
     () => (legendSeries ?? visibleSeries).filter((entry) => entry.points.length > 0),
     [legendSeries, visibleSeries],
@@ -777,9 +786,23 @@ export function CompositeChart({
         : Math.min(current, visibleLegendSeries.length - 1)
     ));
   }, [visibleLegendSeries.length]);
+  const previousAuthoredViewportRef = useRef<CompositeViewportRange | null>(viewport ?? null);
+  const previousViewportResetKeyRef = useRef(viewportResetKey);
+  const [interactionViewport, setInteractionViewport] = useState<CompositeViewportRange | null>(null);
+  const hasViewportResetKey = viewportResetKey !== undefined
+    || previousViewportResetKeyRef.current !== undefined;
+  const authoredViewportChanged = hasViewportResetKey
+    ? previousViewportResetKeyRef.current !== viewportResetKey
+    : shouldResetCompositeViewport(
+        previousAuthoredViewportRef.current,
+        viewport ?? null,
+      );
+  const navigationAnchorViewport = authoredViewportChanged
+    ? viewport
+    : interactionViewport ?? viewport;
   const navigationBounds = useMemo(
-    () => resolveCompositeNavigationBounds(visibleSeries, viewport),
-    [viewport, visibleSeries],
+    () => resolveCompositeNavigationBounds(visibleSeries, navigationAnchorViewport),
+    [navigationAnchorViewport, visibleSeries],
   );
   const initialViewport = useMemo(() => (
     navigationBounds
@@ -788,82 +811,91 @@ export function CompositeChart({
         : navigationBounds
       : null
   ), [navigationBounds, viewport]);
-  const previousNavigationBoundsRef = useRef<CompositeViewportRange | null>(navigationBounds);
-  const previousInitialViewportRef = useRef<CompositeViewportRange | null>(initialViewport);
-  const [interactionViewport, setInteractionViewport] = useState<CompositeViewportRange | null>(null);
-  const navigationBoundsChanged = shouldResetCompositeViewport(
-    previousNavigationBoundsRef.current,
-    navigationBounds,
-  );
-  const initialViewportChanged = shouldResetCompositeViewport(
-    previousInitialViewportRef.current,
-    initialViewport,
-  );
-  const interactionViewportStillValid = !!interactionViewport
-    && !!navigationBounds
-    && sameCompositeViewport(
-      clampCompositeViewport(interactionViewport, navigationBounds),
-      interactionViewport,
-    );
-  const shouldResetInteractionViewport = initialViewportChanged
-    || (navigationBoundsChanged && !interactionViewportStillValid);
-  const currentInteractionViewport = shouldResetInteractionViewport ? null : interactionViewport;
+  const viewportSeriesKey = visibleLegendSeries
+    .map((entry) => `${entry.id}:${entry.label}`)
+    .join("|");
+  const clampedInteractionViewport = interactionViewport && navigationBounds
+    ? clampCompositeViewport(interactionViewport, navigationBounds)
+    : interactionViewport;
+  const interactionViewportNeedsSync = !!interactionViewport
+    && !!clampedInteractionViewport
+    && !sameCompositeViewport(interactionViewport, clampedInteractionViewport);
+  const currentInteractionViewport = authoredViewportChanged
+    ? null
+    : clampedInteractionViewport;
   const effectiveViewport = navigationBounds
     ? currentInteractionViewport
       ? clampCompositeViewport(currentInteractionViewport, navigationBounds)
       : initialViewport
     : null;
-  const effectiveViewportStart = effectiveViewport?.start.getTime() ?? null;
-  const effectiveViewportEnd = effectiveViewport?.end.getTime() ?? null;
-  const viewportSeriesKey = visibleLegendSeries
-    .map((entry) => `${entry.id}:${entry.label}`)
-    .join("|");
+  const interactionViewportStart = currentInteractionViewport?.start.getTime() ?? null;
+  const interactionViewportEnd = currentInteractionViewport?.end.getTime() ?? null;
   const lastReportedViewportRef = useRef<string | null>(null);
+  const viewportInteractionRef = useRef<"pan" | "reset" | "sync" | "zoom">("reset");
   useEffect(() => {
     if (!onViewportChange) return;
-    const viewportKey = effectiveViewportStart === null || effectiveViewportEnd === null
+    if (interactionViewportNeedsSync) return;
+    const interactionKey = interactionViewportStart === null || interactionViewportEnd === null
       ? "none"
-      : `${effectiveViewportStart}:${effectiveViewportEnd}`;
-    const key = `${viewportSeriesKey}|${viewportKey}`;
+      : `${interactionViewportStart}:${interactionViewportEnd}`;
+    const key = `${viewportSeriesKey}|${interactionKey}`;
+    // The callback drives adaptive data loading. Seed it from the authored
+    // viewport without echoing that controlled value back into the loader.
+    if (lastReportedViewportRef.current === null) {
+      lastReportedViewportRef.current = key;
+      return;
+    }
     if (lastReportedViewportRef.current === key) return;
     lastReportedViewportRef.current = key;
     onViewportChange(
-      effectiveViewportStart === null || effectiveViewportEnd === null
+      interactionViewportStart === null || interactionViewportEnd === null
         ? null
         : {
-            start: new Date(effectiveViewportStart),
-            end: new Date(effectiveViewportEnd),
+            start: new Date(interactionViewportStart),
+            end: new Date(interactionViewportEnd),
           },
+      viewportInteractionRef.current,
     );
-  }, [effectiveViewportEnd, effectiveViewportStart, onViewportChange, viewportSeriesKey]);
+  }, [
+    interactionViewportEnd,
+    interactionViewportNeedsSync,
+    interactionViewportStart,
+    onViewportChange,
+    viewportSeriesKey,
+  ]);
   const minimumViewportSpanMs = useMemo(
     () => navigationBounds ? resolveCompositeMinimumSpanMs(visibleSeries, navigationBounds) : 1,
     [navigationBounds, visibleSeries],
   );
 
   useEffect(() => {
-    const previousBounds = previousNavigationBoundsRef.current;
-    const previousInitial = previousInitialViewportRef.current;
-    previousNavigationBoundsRef.current = navigationBounds;
-    previousInitialViewportRef.current = initialViewport;
+    previousAuthoredViewportRef.current = viewport ?? null;
+    previousViewportResetKeyRef.current = viewportResetKey;
     if (
-      shouldResetCompositeViewport(previousInitial, initialViewport)
-      || (
-        shouldResetCompositeViewport(previousBounds, navigationBounds)
-        && interactionViewport
-        && navigationBounds
-        && !sameCompositeViewport(
-          clampCompositeViewport(interactionViewport, navigationBounds),
-          interactionViewport,
-        )
-      )
+      authoredViewportChanged
+      || (interactionViewport && !navigationBounds)
     ) {
+      viewportInteractionRef.current = "reset";
       setInteractionViewport(null);
+      return;
     }
-  }, [initialViewport, interactionViewport, navigationBounds]);
+    if (interactionViewportNeedsSync && clampedInteractionViewport) {
+      viewportInteractionRef.current = "sync";
+      setInteractionViewport(clampedInteractionViewport);
+    }
+  }, [
+    authoredViewportChanged,
+    clampedInteractionViewport,
+    interactionViewport,
+    interactionViewportNeedsSync,
+    navigationBounds,
+    viewport,
+    viewportResetKey,
+  ]);
 
   const zoomViewport = useCallback((zoomFactor: number, anchorRatio = 1) => {
     if (!navigationBounds || !initialViewport) return;
+    viewportInteractionRef.current = "zoom";
     setInteractionViewport((current) => {
       const base = current ?? initialViewport;
       const next = zoomCompositeViewport(
@@ -872,22 +904,30 @@ export function CompositeChart({
         zoomFactor,
         anchorRatio,
         minimumViewportSpanMs,
+        marketTimelineSeries,
       );
+      if (sameCompositeViewport(next, base)) return current;
       return sameCompositeViewport(next, initialViewport) ? null : next;
     });
-  }, [initialViewport, minimumViewportSpanMs, navigationBounds]);
+  }, [initialViewport, marketTimelineSeries, minimumViewportSpanMs, navigationBounds]);
   const panViewport = useCallback((
     shiftRatio: number,
     fromViewport?: CompositeViewportRange,
   ) => {
     if (!navigationBounds || !initialViewport) return;
+    viewportInteractionRef.current = "pan";
     setInteractionViewport((current) => {
       const base = fromViewport ?? current ?? initialViewport;
-      const next = panCompositeViewport(base, navigationBounds, shiftRatio);
+      const next = panCompositeViewport(base, navigationBounds, shiftRatio, marketTimelineSeries);
+      if (sameCompositeViewport(next, base)) {
+        if (!fromViewport) return current;
+        return sameCompositeViewport(base, initialViewport) ? null : base;
+      }
       return sameCompositeViewport(next, initialViewport) ? null : next;
     });
-  }, [initialViewport, navigationBounds]);
+  }, [initialViewport, marketTimelineSeries, navigationBounds]);
   const resetViewport = useCallback(() => {
+    viewportInteractionRef.current = "reset";
     setInteractionViewport(null);
   }, []);
   const hasLeftAxis = visibleSeries.some((entry) => entry.axis === "left");
@@ -917,8 +957,8 @@ export function CompositeChart({
     width: 1,
     height: Math.max(panelCount, 1),
     viewport: effectiveViewport ?? undefined,
-    timelineSeries: visibleLegendSeries,
-  }), [effectiveViewport, panelCount, panels, visibleLegendSeries, visibleSeries]);
+    timelineSeries: marketTimelineSeries,
+  }), [effectiveViewport, marketTimelineSeries, panelCount, panels, visibleSeries]);
   const layoutPanels = useMemo<CompositePanelScene[] | null>(() => {
     if (!projectedScene) return null;
     const panelSpecById = new Map(panels.map((panel) => [panel.id, panel] as const));
@@ -955,6 +995,30 @@ export function CompositeChart({
       )
       : null
   ), [baseScene, normalizedCursorTimestamp]);
+  const handleEmptyMouseScroll = useCallback((event: ChartMouseEvent) => {
+    const direction = event.scroll?.direction;
+    if (!interactive || !navigationBounds || !direction) return;
+    onActivate?.();
+    consumeChartMouseEvent(event);
+    if (event.modifiers.ctrl && isVerticalWheelDirection(direction)) {
+      const zoomIn = direction === "up";
+      if (!zoomIn) {
+        resetViewport();
+        return;
+      }
+      const magnitude = Math.min(Math.max(Math.abs(event.scroll?.delta ?? 1), 1), 8);
+      zoomViewport(1 + magnitude * 0.04, 0.5);
+      return;
+    }
+    panViewport(resolveCompositeWheelPanRatio(direction, event.scroll?.delta));
+  }, [
+    interactive,
+    navigationBounds,
+    onActivate,
+    panViewport,
+    resetViewport,
+    zoomViewport,
+  ]);
   const keyboardCursorDateRef = useRef<Date | null>(scene?.cursorDate ?? null);
   keyboardCursorDateRef.current = scene?.cursorDate ?? null;
   const lastCursorTimestampRef = useRef<number | null>(normalizedCursorTimestamp);
@@ -1049,9 +1113,25 @@ export function CompositeChart({
     }
   }, { enabled: focused && interactive });
 
+  const leftPadding = leftAxisWidth + (leftAxisWidth ? axisGap : 0);
+  const rightPadding = rightAxisWidth + (rightAxisWidth ? axisGap : 0);
+  const timeAxisLayout = scene && showTimeAxis
+    ? buildCompositeTimeAxisLayout(scene, plotWidth)
+    : null;
+  const emptyTimeAxisLayout = !scene && showTimeAxis && effectiveViewport
+    ? buildCompositeViewportTimeAxisLayout(effectiveViewport, plotWidth)
+    : null;
+
   if (!scene) {
+    const emptyPlotHeight = Math.max(0, totalHeight - legendRows - timeAxisRows);
     return (
-      <Box flexDirection="column" width={totalWidth} height={totalHeight} overflow="hidden">
+      <Box
+        flexDirection="column"
+        width={totalWidth}
+        height={totalHeight}
+        overflow="hidden"
+        data-gloom-role="composite-chart"
+      >
         {legendRows > 0 && legendAccessory ? (
           <CompositeLegend
             scene={null}
@@ -1067,22 +1147,41 @@ export function CompositeChart({
             keyboardIndex={legendKeyboardIndex}
           />
         ) : null}
-        {totalHeight > legendRows ? (
-          <Box
-            width={totalWidth}
-            height={totalHeight - legendRows}
-            alignItems="center"
-            justifyContent="center"
-          >
-            <Text fg={resolvedColors.textDim}>{emptyMessage}</Text>
+        {emptyPlotHeight > 0 ? (
+          <Box flexDirection="row" width={totalWidth} height={emptyPlotHeight}>
+            {leftPadding > 0 ? <Box width={leftPadding} /> : null}
+            <ChartSurface
+              width={plotWidth}
+              height={emptyPlotHeight}
+              alignItems="center"
+              justifyContent="center"
+              onMouseScroll={interactive && navigationBounds ? handleEmptyMouseScroll : undefined}
+              cursor={interactive && navigationBounds ? "grab" : undefined}
+              data-gloom-interactive={interactive && navigationBounds ? "true" : undefined}
+              data-gloom-role="composite-chart-empty"
+              data-gloom-label={emptyMessage}
+            >
+              <Text fg={resolvedColors.textDim}>{emptyMessage}</Text>
+            </ChartSurface>
+            {rightPadding > 0 ? <Box width={rightPadding} /> : null}
+          </Box>
+        ) : null}
+        {emptyTimeAxisLayout ? (
+          <Box flexDirection="row" width={totalWidth} height={1}>
+            {leftPadding > 0 ? <Box width={leftPadding} /> : null}
+            <StaticXAxisLabels
+              labels={[emptyTimeAxisLayout.text]}
+              positionedLabels={emptyTimeAxisLayout.ticks}
+              width={plotWidth}
+              color={resolvedColors.textDim}
+            />
+            {rightPadding > 0 ? <Box width={rightPadding} /> : null}
           </Box>
         ) : null}
       </Box>
     );
   }
 
-  const leftPadding = leftAxisWidth + (leftAxisWidth ? axisGap : 0);
-  const rightPadding = rightAxisWidth + (rightAxisWidth ? axisGap : 0);
   const timeAxisCursorColumn = scene.cursorXRatio === null
     ? null
     : scene.cursorXRatio * Math.max(plotWidth - 1, 0);
@@ -1127,11 +1226,12 @@ export function CompositeChart({
           onZoomViewport={zoomViewport}
         />
       ))}
-      {showTimeAxis ? (
+      {timeAxisLayout ? (
         <Box flexDirection="row" width={totalWidth} height={1}>
           {leftPadding > 0 ? <Box width={leftPadding} /> : null}
           <StaticXAxisLabels
-            labels={[renderCompositeTimeAxis(scene, plotWidth)]}
+            labels={[timeAxisLayout.text]}
+            positionedLabels={timeAxisLayout.ticks}
             width={plotWidth}
             color={resolvedColors.textDim}
             cursorColumn={timeAxisCursorColumn}

package/src/components/chart/composite/format.test.ts

@@ -8,7 +8,10 @@ import {
   formatCompositeTimeAxisDate,
 } from "./format";
 import type { ResolvedSeries, TimeSeriesPoint } from "../../../time-series/types";
-import { renderCompositeTimeAxis } from "./text-renderer";
+import {
+  renderCompositeTimeAxis,
+  renderCompositeViewportTimeAxis,
+} from "./text-renderer";
 
 function scene(start: string, end: string): CompositeChartScene {
   const startTime = Date.parse(start);
@@ -38,7 +41,7 @@ describe("composite chart timestamp formatting", () => {
     expect(formatCompositeTimeAxisDate(cursor, intraday.startTime, intraday.endTime))
       .toBe("12:05 UTC");
     expect(renderCompositeTimeAxis(intraday, 60)).toContain("09:30 UTC");
-    expect(renderCompositeTimeAxis(intraday, 60)).toContain("12:45 UTC");
+    expect(renderCompositeTimeAxis(intraday, 60)).toContain("12:00");
     expect(renderCompositeTimeAxis(intraday, 60)).toContain("16:00 UTC");
   });
 
@@ -51,9 +54,9 @@ describe("composite chart timestamp formatting", () => {
       overnight.endTime,
     )).toBe("01-02 00:15 UTC");
     const axis = renderCompositeTimeAxis(overnight, 80);
-    expect(axis).toContain("01-01 23:30 UTC");
-    expect(axis).toContain("01-02 00:00 UTC");
-    expect(axis).toContain("01-02 00:30 UTC");
+    expect(axis).toContain("Jan 1 23:30 UTC");
+    expect(axis).toContain("Jan 2 00:00");
+    expect(axis).toContain("Jan 2 00:30 UTC");
   });
 
   test("keeps longer chart spans as concise UTC calendar dates", () => {
@@ -62,8 +65,18 @@ describe("composite chart timestamp formatting", () => {
 
     expect(formatCompositeCursorDate(cursor, weekly.startTime, weekly.endTime)).toBe("2025-01-04");
     expect(formatCompositeTimeAxisDate(cursor, weekly.startTime, weekly.endTime)).toBe("2025-01-04");
-    expect(renderCompositeTimeAxis(weekly, 60)).toContain("2025-01-01");
-    expect(renderCompositeTimeAxis(weekly, 60)).toContain("2025-01-08");
+    expect(renderCompositeTimeAxis(weekly, 60)).toContain("Jan 1");
+    expect(renderCompositeTimeAxis(weekly, 60)).toContain("Jan 8");
+  });
+
+  test("renders recovery-shell dates directly from a viewport", () => {
+    const axis = renderCompositeViewportTimeAxis({
+      start: new Date("2025-01-01T00:00:00.000Z"),
+      end: new Date("2025-01-08T00:00:00.000Z"),
+    }, 60);
+
+    expect(axis).toContain("Jan 1");
+    expect(axis).toContain("Jan 8");
   });
 });
 

package/src/components/chart/composite/index.ts

@@ -1,29 +1,8 @@
 export { CompositeChart } from "./composite-chart";
-export {
-  allocateCompositePanelHeights,
-  buildCompositeChartScene,
-  projectCompositeValue,
-  resolveCompositeCursorDate,
-  resolveTimeSeriesPointValue,
-} from "./scene";
-export { renderCompositePanelBitmap } from "./rasterizer";
 export {
   pricePointsToResolvedSeries,
-  resolvedPriceSeries,
   type PricePointsToResolvedSeriesOptions,
 } from "./price-series";
-export {
-  renderCompositeAxisText,
-  renderCompositePanelText,
-  renderCompositeTimeAxis,
-} from "./text-renderer";
-export {
-  compositeAxisTicks,
-  formatCompositeAxisValue,
-  formatCompositeCursorDate,
-  formatCompositeSeriesValue,
-  formatCompositeTimeAxisDate,
-} from "./format";
 export type {
   BuildCompositeChartSceneOptions,
   CompositeAxisDomain,

package/src/components/chart/composite/interactions.test.ts

@@ -1,6 +1,7 @@
 import { describe, expect, test } from "bun:test";
 import type { ResolvedSeries, TimeSeriesPoint } from "../../../time-series/types";
 import {
+  compositeViewportHasObservations,
   panCompositeViewport,
   resolveCompositeChartInteraction,
   resolveCompositeMinimumSpanMs,
@@ -10,6 +11,10 @@ import {
   zoomCompositeViewport,
   type CompositeViewportRange,
 } from "./interactions";
+import {
+  buildCompositeTimeScale,
+  projectCompositeTimestamp,
+} from "./time-scale";
 
 const DAY_MS = 24 * 60 * 60 * 1000;
 
@@ -43,6 +48,27 @@ function viewport(startDay: number, endDay: number): CompositeViewportRange {
   };
 }
 
+function intradayMarketSeries(): ResolvedSeries {
+  const points: TimeSeriesPoint[] = [];
+  for (const day of [2, 3]) {
+    const sessionStart = Date.UTC(2025, 0, day, 13, 30);
+    for (let index = 0; index < 78; index += 1) {
+      const date = new Date(sessionStart + index * 5 * 60_000);
+      points.push({ date, observedAt: date, value: 100 + points.length });
+    }
+  }
+  return {
+    ...series([]),
+    nativeFrequency: "intraday",
+    timeBasis: {
+      kind: "market",
+      timeZone: "America/New_York",
+      cadenceMs: 5 * 60_000,
+    },
+    points,
+  };
+}
+
 describe("composite chart interactions", () => {
   test("zooms around the right edge and clamps zoom-out to loaded bounds", () => {
     const bounds = viewport(1, 11);
@@ -65,11 +91,34 @@ describe("composite chart interactions", () => {
     expect(clampedNewer).toEqual(viewport(7, 11));
   });
 
-  test("uses the finest real observation step as the zoom floor", () => {
-    const data = series([1, 2, 5, 11]);
+  test("keeps the same market-slot span while panning across a closed session", () => {
+    const data = intradayMarketSeries();
+    const bounds = resolveCompositeNavigationBounds([data])!;
+    const visible = {
+      start: new Date("2025-01-03T13:30:00.000Z"),
+      end: new Date("2025-01-03T17:00:00.000Z"),
+    };
+    const panned = panCompositeViewport(visible, bounds, 0.5, [data]);
+    const scale = buildCompositeTimeScale(
+      [data],
+      bounds.start.getTime(),
+      bounds.end.getTime(),
+    );
+    const projectedSpan = (window: CompositeViewportRange) => (
+      projectCompositeTimestamp(scale, window.end.getTime())!.ratio
+      - projectCompositeTimestamp(scale, window.start.getTime())!.ratio
+    );
+
+    expect(panned.end.getTime() - panned.start.getTime())
+      .not.toBe(visible.end.getTime() - visible.start.getTime());
+    expect(Math.abs(projectedSpan(panned) - projectedSpan(visible))).toBeLessThan(1e-12);
+  });
+
+  test("uses representative cadence instead of a stray fine gap as the zoom floor", () => {
+    const data = series([1, 2, 5, 8, 11]);
     const bounds = resolveCompositeNavigationBounds([data]);
     expect(bounds).toEqual(viewport(1, 11));
-    expect(resolveCompositeMinimumSpanMs([data], bounds!)).toBe(DAY_MS);
+    expect(resolveCompositeMinimumSpanMs([data], bounds!)).toBe(3 * DAY_MS);
   });
 
   test("keeps the selected window separate from wider loaded navigation bounds", () => {
@@ -77,6 +126,44 @@ describe("composite chart interactions", () => {
     expect(resolveCompositeNavigationBounds([data], viewport(5, 9))).toEqual(viewport(1, 9));
   });
 
+  test("clamps overlapping requested bounds to real data but preserves disjoint requests", () => {
+    const data = series([1, 2, 3, 4, 5, 6, 7, 8, 9]);
+
+    expect(resolveCompositeNavigationBounds([data], viewport(5, 12))).toEqual(viewport(1, 9));
+    expect(resolveCompositeNavigationBounds([data], viewport(20, 30))).toEqual(viewport(20, 30));
+  });
+
+  test("requires distinct renderable observations inside a viewport", () => {
+    const data = series([1, 2, 3]);
+    const emptyPoint = point(4);
+    emptyPoint.value = null;
+    data.points.push(emptyPoint);
+
+    expect(compositeViewportHasObservations([data], viewport(1, 2))).toBe(true);
+    expect(compositeViewportHasObservations([data], viewport(2, 2))).toBe(false);
+    expect(compositeViewportHasObservations([data], viewport(3, 4))).toBe(false);
+  });
+
+  test("does not zoom or pan a populated viewport into fewer than two observations", () => {
+    const data = series([1, 5, 10, 11]);
+    const bounds = viewport(1, 11);
+    const populated = viewport(1, 5);
+
+    expect(zoomCompositeViewport(populated, bounds, 2, 0.5, 1, [data])).toEqual(populated);
+    expect(panCompositeViewport(populated, bounds, -1, [data])).toEqual(populated);
+    expect(panCompositeViewport(populated, bounds, -1.5, [data])).toEqual(viewport(7, 11));
+  });
+
+  test("allows zoom-out to recover when refreshed data has already emptied the viewport", () => {
+    const data = series([1, 2, 10, 11]);
+    const bounds = viewport(1, 11);
+    const empty = viewport(5, 6);
+    const expanded = zoomCompositeViewport(empty, bounds, 0.5, 0.5, 1, [data]);
+
+    expect(expanded.end.getTime() - expanded.start.getTime()).toBe(2 * DAY_MS);
+    expect(compositeViewportHasObservations([data], expanded)).toBe(false);
+  });
+
   test("keeps live viewport drift but resets deliberate range/window changes", () => {
     const original = viewport(1, 11);
     const oneMinuteLater = {