gloomberb 0.6.1 → 0.7.0

package/src/components/chart/comparison-stock-chart.tsx

@@ -54,12 +54,10 @@ import {
   normalizeChartResolutionSupport,
   sortChartResolutions,
   type ChartResolutionSupport,
-  type ManualChartResolution,
 } from "./chart-resolution";
 import { RIGHT_EDGE_ANCHOR_RATIO, resolveAnchoredChartZoom } from "./chart-viewport";
 import {
   buildComparisonChartScene,
-  formatComparisonAxisValue,
   formatComparisonCursorAxisValue,
   renderComparisonChart,
 } from "./comparison-chart-renderer";
@@ -98,6 +96,7 @@ import {
   type NativeSurfaceRenderableNode,
 } from "./native/surface-visibility";
 import { formatAxisCell, formatDateShort, resolveChartAxisWidth, type StyledContent } from "./chart-renderer";
+import { TimeAxisLabel } from "./time-axis-label";
 
 const MODE_CHIPS: Record<ComparisonChartRenderMode, string> = {
   area: "A",
@@ -112,6 +111,7 @@ interface ComparisonStockChartProps {
   symbols: string[];
   axisMode: ChartAxisMode;
   onOpenSymbol: (symbol: string) => void;
+  onEditTickers?: () => void;
 }
 
 interface ComparisonChartSymbolSource {
@@ -514,6 +514,7 @@ function ComparisonStockChartView({
   preferredRenderer,
   symbolSources,
   onOpenSymbol,
+  onEditTickers,
 }: ComparisonStockChartViewProps) {
   const renderer = useNativeRenderer();
   const { canvasCharts, cellWidthPx = 8, cellHeightPx = 18, pixelRatio = 1 } = useUiCapabilities();
@@ -548,6 +549,7 @@ function ComparisonStockChartView({
   const lastCanvasBaseBitmapRef = useRef<{ key: string; bitmap: NativeChartBitmap } | null>(null);
   const displayCursorRef = useRef<DisplayCursorState>(EMPTY_DISPLAY_CURSOR);
   const targetCursorRef = useRef<DisplayCursorState>(EMPTY_DISPLAY_CURSOR);
+  const mouseCrosshairDisabledRef = useRef(false);
   const cursorMotionKindRef = useRef<ChartCursorMotionKind>("discrete");
   const animationFrameRef = useRef<number | null>(null);
   const pendingCanonicalResetRef = useRef(1);
@@ -908,11 +910,10 @@ function ComparisonStockChartView({
       }
       return {
         ...current,
-        panOffset: clamp(pendingExpansion.targetPanOffset, 0, getMaxComparisonPanOffset(series, current.presetRange, current.zoomLevel, chartWidth)),
+        panOffset: clamp(pendingExpansion.targetPanOffset, 0, getMaxComparisonPanOffset(series, current.zoomLevel)),
       };
     });
   }, [
-    chartWidth,
     series,
     seriesDates,
     viewState.activePreset,
@@ -982,8 +983,8 @@ function ComparisonStockChartView({
   }), [viewState.panOffset, viewState.renderMode, viewState.zoomLevel]);
 
   const visibleWindow = useMemo(() => (
-    getVisibleComparisonWindow(series, projectionViewState, chartWidth)
-  ), [chartWidth, projectionViewState, series]);
+    getVisibleComparisonWindow(series, projectionViewState)
+  ), [projectionViewState, series]);
 
   const projection = useMemo(() => (
     projectComparisonChartData(series, chartWidth, projectionViewState, axisMode)
@@ -1037,6 +1038,14 @@ function ComparisonStockChartView({
     selectedSymbol: viewState.selectedSymbol,
     colors: chartColors,
   }), [chartColors, chartHeight, chartWidth, projection, viewState.selectedSymbol]);
+  const displayScene = useMemo(() => buildComparisonChartScene(projection, {
+    width: chartWidth,
+    height: chartHeight,
+    cursorX: displayCursorX,
+    cursorY: displayCursorY,
+    selectedSymbol: viewState.selectedSymbol,
+    colors: chartColors,
+  }), [chartColors, chartHeight, chartWidth, displayCursorX, displayCursorY, projection, viewState.selectedSymbol]);
 
   const staticResult = useMemo(() => renderComparisonChart(projection, {
     width: chartWidth,
@@ -1088,6 +1097,12 @@ function ComparisonStockChartView({
     };
 
     return [
+      ...(onEditTickers ? [{
+        id: "tickers",
+        key: "t",
+        label: "ickers",
+        onPress: onEditTickers,
+      }] : []),
       {
         id: "mode",
         key: "m",
@@ -1111,26 +1126,13 @@ function ComparisonStockChartView({
       { id: "reset", key: "0", label: "reset", onPress: resetView },
       ...(width >= 72 ? [{ id: "range", key: "1-7", label: "range", onPress: cycleRange }] : []),
     ];
-  }, [effectiveResolution, resolutionChips, series, supportMap, viewState.presetRange, visibleDateWindow, width]);
+  }, [effectiveResolution, onEditTickers, resolutionChips, series, supportMap, viewState.presetRange, visibleDateWindow, width]);
 
   usePaneFooter("comparison-chart", () => ({
     order: 10,
     hints: footerHints,
   }), [footerHints]);
 
-  const liveScene = useMemo(() => (
-    effectiveRenderer === "kitty"
-      ? staticScene
-      : buildComparisonChartScene(projection, {
-        width: chartWidth,
-        height: chartHeight,
-        cursorX: displayCursorX,
-        cursorY: displayCursorY,
-        selectedSymbol: viewState.selectedSymbol,
-        colors: chartColors,
-      })
-  ), [chartColors, chartHeight, chartWidth, displayCursorX, displayCursorY, effectiveRenderer, projection, staticScene, viewState.selectedSymbol]);
-
   const nativeCrosshair = useMemo<NativeCrosshairOverlay | null>(() => {
     if (displayCursor.cellX === null || displayCursor.cellY === null) return null;
     return {
@@ -1385,7 +1387,7 @@ function ComparisonStockChartView({
         return;
       case "a": {
         const panStep = getKeyboardPanCellCount(chartWidth);
-        if (viewState.panOffset >= getMaxComparisonPanOffset(series, viewState.presetRange, viewState.zoomLevel, chartWidth) && expandBufferRange({
+        if (viewState.panOffset >= getMaxComparisonPanOffset(series, viewState.zoomLevel) && expandBufferRange({
           kind: "pan-left",
           targetPanOffset: viewState.panOffset + panStep,
         })) {
@@ -1393,7 +1395,7 @@ function ComparisonStockChartView({
         }
         setViewState((current) => ({
           ...clearActivePreset(current),
-          panOffset: clamp(current.panOffset + panStep, 0, getMaxComparisonPanOffset(series, current.presetRange, current.zoomLevel, chartWidth)),
+          panOffset: clamp(current.panOffset + panStep, 0, getMaxComparisonPanOffset(series, current.zoomLevel)),
         }));
         return;
       }
@@ -1401,7 +1403,7 @@ function ComparisonStockChartView({
         const panStep = getKeyboardPanCellCount(chartWidth);
         setViewState((current) => ({
           ...clearActivePreset(current),
-          panOffset: clamp(current.panOffset - panStep, 0, getMaxComparisonPanOffset(series, current.presetRange, current.zoomLevel, chartWidth)),
+          panOffset: clamp(current.panOffset - panStep, 0, getMaxComparisonPanOffset(series, current.zoomLevel)),
         }));
         return;
       }
@@ -1417,7 +1419,11 @@ function ComparisonStockChartView({
         setResolution(nextResolution);
         return;
       }
+      case "t":
+        onEditTickers?.();
+        return;
       case "h":
+        mouseCrosshairDisabledRef.current = false;
         cursorMotionKindRef.current = "discrete";
         setViewState((current) => ({
           ...current,
@@ -1425,6 +1431,7 @@ function ComparisonStockChartView({
         }));
         return;
       case "l":
+        mouseCrosshairDisabledRef.current = false;
         cursorMotionKindRef.current = "discrete";
         setViewState((current) => ({
           ...current,
@@ -1432,6 +1439,7 @@ function ComparisonStockChartView({
         }));
         return;
       case "escape":
+        mouseCrosshairDisabledRef.current = true;
         updateDisplayCursorTarget(EMPTY_DISPLAY_CURSOR, "discrete");
         setViewState((current) => ({ ...current, cursorX: null, cursorY: null }));
         return;
@@ -1488,6 +1496,7 @@ function ComparisonStockChartView({
   });
 
   const handlePlotMove = (event: ChartMouseEvent) => {
+    if (mouseCrosshairDisabledRef.current) return;
     const localPointer = getLocalPlotPointer(event, plotRef.current, renderer);
     if (!localPointer) return;
     const selectionCursor = resolveSelectionCursor(localPointer, projection.dates.length, chartWidth);
@@ -1506,6 +1515,7 @@ function ComparisonStockChartView({
   };
 
   const handlePlotDown = (event: ChartMouseEvent) => {
+    mouseCrosshairDisabledRef.current = false;
     const localPointer = getLocalPlotPointer(event, plotRef.current, renderer);
     if (!localPointer) return;
     const selectionCursor = resolveSelectionCursor(localPointer, projection.dates.length, chartWidth);
@@ -1528,6 +1538,7 @@ function ComparisonStockChartView({
   };
 
   const handlePlotDrag = (event: ChartMouseEvent) => {
+    if (mouseCrosshairDisabledRef.current && !dragRef.current) return;
     const localPointer = getLocalPlotPointer(event, plotRef.current, renderer);
     if (localPointer) {
       const selectionCursor = resolveSelectionCursor(localPointer, projection.dates.length, chartWidth);
@@ -1592,7 +1603,7 @@ function ComparisonStockChartView({
     if (scrollPanCells === 0) return;
 
     const targetPanOffset = viewState.panOffset + scrollPanCells;
-    if (scrollPanCells > 0 && viewState.panOffset >= getMaxComparisonPanOffset(series, viewState.presetRange, viewState.zoomLevel, chartWidth) && expandBufferRange({
+    if (scrollPanCells > 0 && viewState.panOffset >= getMaxComparisonPanOffset(series, viewState.zoomLevel) && expandBufferRange({
       kind: "pan-left",
       targetPanOffset,
     })) {
@@ -1603,7 +1614,7 @@ function ComparisonStockChartView({
       panOffset: clamp(
         current.panOffset + scrollPanCells,
         0,
-        getMaxComparisonPanOffset(series, current.presetRange, current.zoomLevel, chartWidth),
+        getMaxComparisonPanOffset(series, current.zoomLevel),
       ),
     }));
   };
@@ -1613,7 +1624,8 @@ function ComparisonStockChartView({
   }
 
   const hasChartData = series.some((entry) => entry.points.length > 0);
-  const cursorScene = effectiveRenderer === "kitty" ? staticScene : liveScene;
+  const hasDisplayCursor = displayCursorX !== null && displayCursorY !== null;
+  const cursorScene = hasDisplayCursor ? displayScene : staticScene;
   const selectedSeries = hasChartData ? (cursorScene?.selectedSeries ?? staticResult.selectedSeries) : null;
   const selectedPoint = hasChartData ? (cursorScene?.selectedPoint ?? staticResult.selectedPoint) : null;
   const selectedRawValue = selectedPoint?.rawValue ?? selectedSeries?.latestRawValue ?? null;
@@ -1641,6 +1653,8 @@ function ComparisonStockChartView({
     start: visibleWindow.dates[0] ?? null,
     end: visibleWindow.dates[visibleWindow.dates.length - 1] ?? null,
   });
+  const cursorTimeAxisColumn = hasDisplayCursor ? displayScene?.cursorColumn ?? null : null;
+  const cursorTimeAxisDate = hasDisplayCursor ? displayScene?.activeDate ?? null : null;
 
   const canvasBitmapSize = useMemo(() => {
     if (!canvasCharts) return null;
@@ -1929,7 +1943,14 @@ function ComparisonStockChartView({
       </Box>
 
       <Box height={timeAxisRows}>
-        <Text fg={colors.textDim}>{timeAxisLabel}</Text>
+        <TimeAxisLabel
+          timeLabels={timeAxisLabel}
+          width={chartWidth}
+          cursorColumn={cursorTimeAxisColumn}
+          cursorDate={cursorTimeAxisDate}
+          dates={projection.dates}
+          cursorColor={chartColors.crosshairColor}
+        />
       </Box>
 
       {legendRows > 0 && (

package/src/components/chart/static-chart-surface.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-import { Box, ChartSurface, Text, useUiCapabilities } from "../../ui";
+import { Box, ChartSurface, Text, useNativeRenderer, useUiCapabilities } from "../../ui";
 import type { ProjectedChartPoint } from "./chart-data";
 import {
   buildChartScene,
@@ -8,7 +8,7 @@ import {
   renderChart,
   type RenderChartOptions,
 } from "./chart-renderer";
-import { renderNativeChartBase, type NativeChartBitmap } from "./native/chart-rasterizer";
+import { computeBitmapSize, renderNativeChartBase, type NativeChartBitmap } from "./native/chart-rasterizer";
 
 export interface StaticChartSurfaceProps extends Omit<
   RenderChartOptions,
@@ -47,10 +47,12 @@ export function StaticChartSurface({
 }: StaticChartSurfaceProps) {
   const {
     canvasCharts,
+    nativeCharts,
     cellWidthPx = 8,
     cellHeightPx = 18,
     pixelRatio = 1,
   } = useUiCapabilities();
+  const nativeRenderer = useNativeRenderer();
   const timeAxisRows = showTimeAxis ? 1 : 0;
   const labelRows = yAxisLabel ? 1 : 0;
   const totalWidth = Math.max(1, Math.floor(width));
@@ -101,14 +103,36 @@ export function StaticChartSurface({
     : 0;
   const axisGap = axisWidth > 0 ? 1 : 0;
   const plotWidth = Math.max(1, totalWidth - axisWidth - axisGap);
+  const rendererResolution = nativeRenderer.resolution;
+  const rendererTerminalWidth = nativeRenderer.terminalWidth;
+  const rendererTerminalHeight = nativeRenderer.terminalHeight;
   const bitmapSize = useMemo(() => {
-    if (!canvasCharts) return null;
+    if (nativeCharts && rendererResolution && rendererTerminalWidth > 0 && rendererTerminalHeight > 0) {
+      return computeBitmapSize(
+        { x: 0, y: 0, width: plotWidth, height: plotHeight },
+        rendererResolution,
+        rendererTerminalWidth,
+        rendererTerminalHeight,
+      );
+    }
+    if (!canvasCharts && !nativeCharts) return null;
     const scale = Math.max(1, pixelRatio);
     return {
       pixelWidth: Math.max(1, Math.round(plotWidth * cellWidthPx * scale)),
       pixelHeight: Math.max(1, Math.round(plotHeight * cellHeightPx * scale)),
     };
-  }, [canvasCharts, cellHeightPx, cellWidthPx, pixelRatio, plotHeight, plotWidth]);
+  }, [
+    canvasCharts,
+    cellHeightPx,
+    cellWidthPx,
+    nativeCharts,
+    pixelRatio,
+    plotHeight,
+    plotWidth,
+    rendererResolution,
+    rendererTerminalHeight,
+    rendererTerminalWidth,
+  ]);
   const renderOptions = useMemo<RenderChartOptions>(() => ({
     width: plotWidth,
     height: plotHeight,

package/src/components/chart/stock-chart.test.ts

@@ -9,7 +9,6 @@ import {
   resolveAdjacentSelectionCursorX,
   resolveChartKeyboardKey,
   resolveIndicatorBufferRange,
-  resolveVisibleChartDateWindow,
   resolveSelectionDisplayCursorState,
 } from "./stock-chart";
 import { getPointTerminalColumn } from "./chart-renderer";
@@ -215,21 +214,6 @@ describe("stock chart auto helpers", () => {
     expect(nextState.window).toEqual(renderedAutoView.window);
   });
 
-  test("derives the visible label window from the actual visible chart points", () => {
-    const visibleWindow = resolveVisibleChartDateWindow([
-      { date: new Date("2026-01-03T00:00:00Z") },
-      { date: new Date("2026-01-06T00:00:00Z") },
-    ], {
-      start: new Date("2026-01-01T00:00:00Z"),
-      end: new Date("2026-01-08T00:00:00Z"),
-    });
-
-    expect(visibleWindow).toEqual({
-      start: new Date("2026-01-03T00:00:00Z"),
-      end: new Date("2026-01-06T00:00:00Z"),
-    });
-  });
-
   test("zooms in by at least one visible point on every auto step when more detail is available", () => {
     const history = makeDailyHistory(1, 10);
 

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

@@ -27,7 +27,7 @@ import {
   getKeyboardPanCellCount,
   resolveDragPanOffset,
 } from "./chart-scroll";
-import { getVisibleWindow, projectChartData, resolveBarSize, resolveStableOhlcProjectionOptions, type ProjectedChartPoint } from "./chart-data";
+import { projectChartData, resolveBarSize, resolveStableOhlcProjectionOptions, type ProjectedChartPoint } from "./chart-data";
 import {
   buildPresetDateWindow,
   buildVisibleDateWindow,
@@ -127,6 +127,7 @@ import {
 } from "./native/surface-visibility";
 import type { PricePoint, TickerFinancials } from "../../types/financials";
 import type { TickerRecord } from "../../types/ticker";
+import { TimeAxisLabel } from "./time-axis-label";
 
 const MODE_CHIPS: Record<ChartRenderMode, string> = {
   area: "A",
@@ -173,7 +174,6 @@ interface StockChartProps {
 }
 
 interface ResolvedStockChartProps extends StockChartProps {
-  symbol: string | null;
   ticker: TickerRecord | null;
   financials: TickerFinancials | null;
 }
@@ -726,14 +726,6 @@ function isSeriesAcceptedForRequest(
   return windowPoints.length >= minimumPointCount;
 }
 
-function canRenderAutoViewForWindow(
-  render: AutoRenderedView | null,
-  requestedWindow: DateWindowRange | null | undefined,
-): render is AutoRenderedView {
-  if (!render || !requestedWindow?.start || !requestedWindow.end) return false;
-  return getWindowPoints(render.data, requestedWindow).length > 0;
-}
-
 export function resolveAutoDisplayState(options: {
   shouldUseRenderedAutoView: boolean;
   renderedAutoView: AutoRenderedView | null;
@@ -772,13 +764,6 @@ export function resolveAutoDisplayState(options: {
   };
 }
 
-export function resolveVisibleChartDateWindow(
-  points: readonly Pick<PricePoint, "date">[],
-  preferredWindow: DateWindowRange | null | undefined,
-): DateWindowRange | null {
-  return getDateWindowBounds(getPointDates(points)) ?? preferredWindow ?? null;
-}
-
 function buildDateWindowFromIndices(dates: readonly Date[], startIdx: number, endIdx: number): DateWindowRange | null {
   if (dates.length === 0 || endIdx <= startIdx) return null;
   return {
@@ -1430,8 +1415,8 @@ function buildIndicatorProjectionKey(options: {
 }
 
 export function StockChart(props: StockChartProps) {
-  const { symbol, ticker, financials } = usePaneTicker();
-  return <ResolvedStockChart {...props} symbol={symbol} ticker={ticker} financials={financials} />;
+  const { ticker, financials } = usePaneTicker();
+  return <ResolvedStockChart {...props} ticker={ticker} financials={financials} />;
 }
 
 export const ResolvedStockChart = memo(function ResolvedStockChart({
@@ -1448,7 +1433,6 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
   showVolume: showVolumeOverride,
   footerControls,
   footerHints,
-  symbol,
   ticker,
   financials,
 }: ResolvedStockChartProps) {
@@ -1514,6 +1498,7 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
   const lastCanvasBaseBitmapRef = useRef<{ key: string; bitmap: NativeChartBitmap } | null>(null);
   const displayCursorRef = useRef<DisplayCursorState>(EMPTY_DISPLAY_CURSOR);
   const targetCursorRef = useRef<DisplayCursorState>(EMPTY_DISPLAY_CURSOR);
+  const mouseCrosshairDisabledRef = useRef(false);
   const cursorMotionKindRef = useRef<ChartCursorMotionKind>("discrete");
   const animationFrameRef = useRef<number | null>(null);
   const pendingCanonicalResetRef = useRef(1);
@@ -2906,6 +2891,11 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
     if (!interactive) return;
 
     switch (key) {
+      case "escape":
+        mouseCrosshairDisabledRef.current = true;
+        updateDisplayCursorTarget(EMPTY_DISPLAY_CURSOR, "discrete");
+        commitSelectionCursor({ cursorX: null, cursorY: null });
+        return;
       case "left":
         if (event.shift) {
           if (effectiveResolution === "auto") {
@@ -2923,6 +2913,7 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
             return { ...cleared, panOffset: current.panOffset + panStep };
           });
         } else {
+          mouseCrosshairDisabledRef.current = false;
           cursorMotionKindRef.current = "discrete";
           const pointCount = projection.points.length;
           const currentIndex = pointCount <= 0
@@ -2974,6 +2965,7 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
             return cleared.panOffset === nextPanOffset ? cleared : { ...cleared, panOffset: nextPanOffset };
           });
         } else {
+          mouseCrosshairDisabledRef.current = false;
           cursorMotionKindRef.current = "discrete";
           const pointCount = projection.points.length;
           const currentIndex = pointCount <= 0
@@ -3058,6 +3050,19 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
     colors: chartColors,
     timeAxisDates,
   }), [axisMode, chartColors, chartHeight, chartWidth, compact, projection.effectiveMode, projection.points, selectionCursorX, selectionCursorY, showVolume, timeAxisDates, volumeHeight]);
+  const displayScene = useMemo(() => buildChartScene(projection.points, {
+    width: chartWidth,
+    height: chartHeight,
+    showVolume: showVolume && !compact,
+    volumeHeight,
+    cursorX: displayCursorX,
+    cursorY: displayCursorY,
+    mode: projection.effectiveMode,
+    axisMode,
+    colors: chartColors,
+    timeAxisDates,
+    indicators,
+  }), [axisMode, chartColors, chartHeight, chartWidth, compact, displayCursorX, displayCursorY, indicators, projection.effectiveMode, projection.points, showVolume, timeAxisDates, volumeHeight]);
   const snappedSelectionCursorX = selectionScene
     ? getPointTerminalColumn(selectionScene.activeIdx, projection.points.length, chartWidth, projection.effectiveMode)
     : null;
@@ -3419,6 +3424,8 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
     : null;
   const isUpdating = !compact && (renderBodyState.updating || boundsBodyState.updating);
   const timeAxisLabel = selectionScene?.timeLabels ?? staticResult.timeLabels;
+  const cursorTimeAxisColumn = hasDisplayCursor ? displayScene?.cursorColumn ?? null : null;
+  const cursorTimeAxisDate = hasDisplayCursor ? displayScene?.dateAtCursor ?? null : null;
   const timeAxisBox = (
     <Box
       height={1}
@@ -3426,7 +3433,14 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
       overflow="hidden"
       data-gloom-role="chart-time-axis"
     >
-      <Text fg={colors.textDim} style={{ whiteSpace: "pre" }}>{timeAxisLabel}</Text>
+      <TimeAxisLabel
+        timeLabels={timeAxisLabel}
+        width={chartWidth}
+        cursorColumn={cursorTimeAxisColumn}
+        cursorDate={cursorTimeAxisDate}
+        dates={timeAxisDates}
+        cursorColor={chartColors.crosshairColor}
+      />
     </Box>
   );
   const chartFooterHints = useMemo<PaneHint[]>(() => {
@@ -3573,6 +3587,7 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
 
   const handlePlotMove = (event: ChartMouseEvent) => {
     if (!interactive || compact) return;
+    if (mouseCrosshairDisabledRef.current) return;
     const localPointer = getLocalPlotPointer(event, plotRef.current, renderer);
     if (!localPointer) return;
     const selectionCursor = resolveSelectionCursor(localPointer, projection.points.length, chartWidth, projection.effectiveMode);
@@ -3594,6 +3609,7 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
     if (compact) return;
     if (!interactive) onActivate?.();
     focusPaneForMouseInteraction(event);
+    mouseCrosshairDisabledRef.current = false;
     const localPointer = getLocalPlotPointer(event, plotRef.current, renderer);
     if (!localPointer) return;
     const selectionCursor = resolveSelectionCursor(localPointer, projection.points.length, chartWidth, projection.effectiveMode);
@@ -3618,6 +3634,7 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
 
   const handlePlotDrag = (event: ChartMouseEvent) => {
     if (compact || (!interactive && !dragRef.current)) return;
+    if (mouseCrosshairDisabledRef.current && !dragRef.current) return;
     const localPointer = getLocalPlotPointer(event, plotRef.current, renderer);
     if (localPointer) {
       const selectionCursor = resolveSelectionCursor(localPointer, projection.points.length, chartWidth, projection.effectiveMode);

package/src/components/chart/time-axis-label.tsx

@@ -0,0 +1,43 @@
+import { useMemo } from "react";
+import { Span, Text } from "../../ui";
+import { colors } from "../../theme/colors";
+import { buildCursorTimeAxisSegments } from "./chart-renderer";
+
+interface TimeAxisLabelProps {
+  timeLabels: string;
+  width: number;
+  cursorColumn: number | null;
+  cursorDate: Date | string | number | null;
+  dates: Array<Date | string | number>;
+  cursorColor: string;
+}
+
+export function TimeAxisLabel({
+  timeLabels,
+  width,
+  cursorColumn,
+  cursorDate,
+  dates,
+  cursorColor,
+}: TimeAxisLabelProps) {
+  const segments = useMemo(() => buildCursorTimeAxisSegments({
+    timeLabels,
+    width,
+    cursorColumn,
+    cursorDate,
+    dates,
+  }), [cursorColumn, cursorDate, dates, timeLabels, width]);
+
+  return (
+    <Text style={{ whiteSpace: "pre" }}>
+      {segments.map((segment, index) => (
+        <Span
+          key={index}
+          fg={segment.highlighted ? cursorColor : colors.textDim}
+        >
+          {segment.text}
+        </Span>
+      ))}
+    </Text>
+  );
+}