gloomberb 0.16.0 → 0.16.2

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

@@ -1,145 +1,35 @@
-import { usePaneArrowsClaimed } from "../../layout/pane/footer/registration";
-import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
-import {
-  AsciiText,
-  Box,
-  ChartSurface,
-  ScrollBox,
-  Text,
-  useNativeRenderer,
-  useUiCapabilities,
-  type BoxRenderable,
-  type ChartSurfaceProps,
-  type ScrollBoxRenderable,
-} from "../../../ui";
-import { useShortcut } from "../../../react/input";
-import { usePaneFooter } from "../../layout/pane/footer/registration";
-import type { PaneHint } from "../../layout/pane/footer/model";
-import type { ContextMenuItem } from "../../../types/context-menu";
-import { useOptionalPaneInstanceId, usePaneSettingValue } from "../../../state/app/context";
-import { colors as themeColors, hoverBg } from "../../../theme/colors";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { useCompositeChartKeyboard } from "./use-composite-chart-keyboard";
+import { useCompositeViewport } from "./use-composite-viewport";
+import { CompositePanelSurface } from "./panel-surface";
+import { MINIMUM_AXIS_LABEL_WIDTH, compositeAxisLabelWidth } from "./panel-labels";
+import { isVerticalWheelDirection } from "./panel-gestures";
+import { type ChartToolSpan, CHART_DRAWING_COLORS, isDrawingTool, type ChartDrawing } from "./tools";
+import { ChartDrawingStore, NO_DRAWINGS } from "./drawing-store";
+import { CompositeLegend } from "./legend";
+import { ChartToolbar, CHART_TOOLBAR_WIDTH } from "./toolbar";
+import { AsciiText, Box, ChartSurface, Text, useUiCapabilities } from "../../../ui";
+import { useOptionalPaneInstanceId } from "../../../state/app/context";
 import { useThemeColors } from "../../../theme/theme-context";
 import { chartSurfaceBackground, usePaneSurface } from "../../layout/pane/surface";
-import { CANONICAL_EXCHANGE_ALIASES } from "../../../utils/exchanges";
-import { displayWidth, formatPercentRaw, truncateToDisplayWidth } from "../../../utils/format";
-import { isPlainKey } from "../../../utils/keyboard";
 import { CHART_WATERMARK_ROLE } from "../../../utils/screenshot-watermark";
 import type { ResolvedSeries } from "../../../time-series/types";
 import { downsampleCompositeChartScene } from "./downsample";
 import { reuseResolvedSeriesList } from "./panel-series";
-import {
-  consumeChartMouseEvent,
-  getGlobalMouseX,
-  getLocalPlotPointer,
-  type ChartMouseEvent,
-} from "../core/pointer";
-import type { NativeChartBitmap } from "../native/chart-rasterizer";
+import { consumeChartMouseEvent, type ChartMouseEvent } from "../core/pointer";
 import { useShowChartTextFallback } from "../native/use-chart-text-fallback";
-import {
-  useStaticChartBitmapSize,
-  type StaticChartBitmapSize,
-} from "./bitmap";
-import {
-  StaticXAxisLabels,
-  StaticXMarkerLabels,
-  StaticXMarkerOverlay,
-} from "./axis-overlays";
-import { PriceAxisLabels } from "./price-axis-labels";
-import {
-  compositeAxisTicks,
-  formatCompositeCursorValue,
-  formatCompositePointDetails,
-  formatCompositeSeriesValue,
-  seriesPriceReference,
-  formatCompositeTimeAxisDate,
-  type CompositeAxisValueFormatter,
-} from "./format";
-import {
-  COMPOSITE_KEYBOARD_PAN_RATIO,
-  COMPOSITE_ZOOM_STEP_FACTOR,
-  buildCompositeNavigationFrame,
-  compositeNavigationDataViewport,
-  compositeViewportPositions,
-  fitCompositeViewport,
-  panCompositeViewport,
-  resolveCompositeChartInteraction,
-  resolveCompositeWheelPan,
-  resolveCompositeWheelZoom,
-  sameCompositeViewport,
-  shouldResetCompositeViewport,
-  zoomCompositeViewport,
-  type CompositeNavigationFrame,
-  type CompositeViewportRange,
-} from "./interactions";
-import { buildCompositeColumnLayout, type CompositeColumnLayout } from "./column-layout";
-import { renderCompositePanelBitmap } from "./rasterizer";
-import {
-  fitAxisLabels,
-  hitTestLevel,
-  levelGrabRatio,
-  levelPanel,
-  levelVectors,
-  paintLevels,
-  projectLevels,
-  roundLevelValue,
-  writeLevelText,
-  type CompositeChartLevel,
-  type CompositeChartLevels,
-  type ProjectedLevel,
-} from "./levels";
-import {
-  buildChartToolVectors,
-  CHART_DRAWING_COLORS,
-  CHART_DRAWINGS_SETTING_KEY,
-  countMeasureBars,
-  drawChartToolOverlay,
-  resolveChartToolKind,
-  resolveMeasureAxisDomain,
-  resolveMeasureDirection,
-  resolveMeasureValueAt,
-  resolveZoomTimeRange,
-  hitTestDrawings,
-  isDrawingTool,
-  nextDrawingColor,
-  parseChartDrawings,
-  resolveDrawingFromDrag,
-  resolveZoomBoxRange,
-  shiftDrawing,
-  summarizeMeasure,
-  summarizeZoomRange,
-  summarizeZoomSelection,
-  type ChartDrawing,
-  type ChartDrawingPoint,
-  type ChartToolDrag,
-  type ChartToolKind,
-} from "./tools";
-import {
-  COMPOSITE_RIGHT_OFFSET_RATIO,
-  compositeRightOffsetRatio,
-  projectCompositeTimestamp,
-  unprojectCompositeTimestamp,
-} from "./time-scale";
+import { StaticXAxisLabels, StaticXMarkerLabels, StaticXMarkerOverlay } from "./axis-overlays";
+import { formatCompositeTimeAxisDate } from "./format";
+import { resolveCompositeWheelPan, resolveCompositeWheelZoom } from "./interactions";
+import { COMPOSITE_RIGHT_OFFSET_RATIO } from "./time-scale";
 import {
   allocateCompositePanelHeights,
   applyCompositeChartCursor,
   buildCompositeChartScene,
-  projectCompositeValue,
   resizeCompositePanel,
-  resolveAdjacentCompositeCursorDate,
-  resolveCompositeCursorDate,
-  unprojectCompositeValue,
 } from "./scene";
-import {
-  compositeAxisTickLabels,
-  renderCompositeAxisText,
-  renderCompositePanelText,
-} from "./text-renderer";
-import {
-  buildCompositeTimeAxisLayout,
-  buildCompositeViewportTimeAxisLayout,
-} from "./time-axis";
+import { buildCompositeTimeAxisLayout, buildCompositeViewportTimeAxisLayout } from "./time-axis";
 import type {
-  CompositeAxisDomain,
   CompositeChartColors,
   CompositeChartProps,
   CompositeChartScene,
@@ -147,408 +37,6 @@ import type {
   CompositePanelScene,
 } from "./types";
 
-// A short resize-only delay coalesces geometry churn without delaying
-// live-data paints or depending on a foreground animation frame.
-const DESKTOP_BITMAP_RESIZE_DEBOUNCE_MS = 32;
-const LEGEND_WHEEL_DELTA_PER_CELL = 8;
-/** How far past the first loaded observation a backfilling chart may pan, as a fraction of the view. */
-const HISTORICAL_PADDING_RATIO = 0.5;
-
-function isVerticalWheelDirection(
-  direction: "up" | "down" | "left" | "right",
-): direction is "up" | "down" {
-  return direction === "up" || direction === "down";
-}
-
-interface PanGesture {
-  kind: "pan";
-  startGlobalX: number;
-  frame: CompositeNavigationFrame;
-  startViewport: CompositeViewportRange;
-  positionsPerCell: number;
-}
-
-/**
- * A drag pans in the frame it started in; see `CompositeNavigationFrame`. The
- * plot covers the viewport plus its reserved right offset, so a cell is worth
- * that much time and the bars keep pace with the pointer.
- */
-function startPanGesture(
-  frame: CompositeNavigationFrame,
-  viewport: CompositeViewportRange,
-  plotWidth: number,
-  globalX: number,
-  plotSpanFactor: number,
-): PanGesture {
-  const positions = compositeViewportPositions(frame, viewport);
-  const span = positions ? Math.max(positions.end - positions.start, Number.EPSILON) : 1;
-  return {
-    kind: "pan",
-    startGlobalX: globalX,
-    frame,
-    startViewport: viewport,
-    positionsPerCell: span * plotSpanFactor / Math.max(plotWidth, 1),
-  };
-}
-
-interface PendingWheel {
-  /** Fraction of the visible span, positive toward older observations. */
-  panRatio: number;
-  zoomLog: number;
-  anchorRatio: number;
-}
-
-const webFrame = globalThis as typeof globalThis & {
-  requestAnimationFrame?: (callback: () => void) => number;
-  cancelAnimationFrame?: (handle: number) => void;
-};
-
-function renderPanelBitmap(
-  panel: CompositePanelScene,
-  bitmapSize: StaticChartBitmapSize,
-  colors: CompositeChartColors,
-  snapGridToRows = false,
-): NativeChartBitmap {
-  return renderCompositePanelBitmap(panel, {
-    pixelWidth: bitmapSize.pixelWidth,
-    pixelHeight: bitmapSize.pixelHeight,
-    colors,
-    snapGridToRows,
-  });
-}
-
-function useCompositePanelBitmap({
-  panel,
-  bitmapSize,
-  colors,
-  isDesktopWeb,
-}: {
-  panel: CompositePanelScene;
-  bitmapSize: StaticChartBitmapSize | null;
-  colors: CompositeChartColors;
-  isDesktopWeb: boolean;
-}): NativeChartBitmap | null {
-  const [desktopBitmap, setDesktopBitmap] = useState<NativeChartBitmap | null>(null);
-  const desktopBitmapRef = useRef<NativeChartBitmap | null>(null);
-  const desktopRenderInputRef = useRef<{
-    panel: CompositePanelScene;
-    pixelWidth: number;
-    pixelHeight: number;
-    colors: CompositeChartColors;
-  } | null>(null);
-  const desktopRequestedSizeRef = useRef<{ pixelWidth: number; pixelHeight: number } | null>(null);
-  const desktopRenderedSizeRef = useRef<{ pixelWidth: number; pixelHeight: number } | null>(null);
-  const desktopRenderTimerRef = useRef<ReturnType<typeof globalThis.setTimeout> | null>(null);
-  const desktopActiveRef = useRef(false);
-  const pixelWidth = bitmapSize?.pixelWidth ?? null;
-  const pixelHeight = bitmapSize?.pixelHeight ?? null;
-
-  desktopRenderInputRef.current = isDesktopWeb && pixelWidth !== null && pixelHeight !== null
-    ? { panel, pixelWidth, pixelHeight, colors }
-    : null;
-
-  // The cursor is drawn as a separate overlay, so the plot raster stays cached
-  // (and resident in the terminal) while the crosshair moves.
-  const terminalBitmap = useMemo(() => {
-    if (isDesktopWeb || !bitmapSize) return null;
-    return renderPanelBitmap(panel, bitmapSize, colors, true);
-  }, [bitmapSize, colors, isDesktopWeb, panel]);
-
-  useEffect(() => {
-    const cancelRender = () => {
-      if (desktopRenderTimerRef.current === null) return;
-      clearTimeout(desktopRenderTimerRef.current);
-      desktopRenderTimerRef.current = null;
-    };
-    const scheduleRender = (delay: number) => {
-      if (desktopRenderTimerRef.current !== null) return;
-      desktopRenderTimerRef.current = globalThis.setTimeout(() => {
-        desktopRenderTimerRef.current = null;
-        if (!desktopActiveRef.current) return;
-        const input = desktopRenderInputRef.current;
-        if (!input) return;
-        const next = renderPanelBitmap(
-          input.panel,
-          { pixelWidth: input.pixelWidth, pixelHeight: input.pixelHeight },
-          input.colors,
-        );
-        if (!desktopActiveRef.current) return;
-        desktopRenderedSizeRef.current = {
-          pixelWidth: input.pixelWidth,
-          pixelHeight: input.pixelHeight,
-        };
-        desktopBitmapRef.current = next;
-        setDesktopBitmap(next);
-      }, delay);
-    };
-
-    if (!isDesktopWeb) {
-      desktopActiveRef.current = false;
-      cancelRender();
-      desktopRequestedSizeRef.current = null;
-      desktopRenderedSizeRef.current = null;
-      return;
-    }
-    if (pixelWidth === null || pixelHeight === null) {
-      desktopActiveRef.current = false;
-      cancelRender();
-      desktopRequestedSizeRef.current = null;
-      desktopRenderedSizeRef.current = null;
-      desktopBitmapRef.current = null;
-      setDesktopBitmap((current) => current === null ? current : null);
-      return;
-    }
-
-    desktopActiveRef.current = true;
-    const nextSize = { pixelWidth, pixelHeight };
-    const requestedSize = desktopRequestedSizeRef.current;
-    const requestedSizeChanged = !requestedSize
-      || requestedSize.pixelWidth !== pixelWidth
-      || requestedSize.pixelHeight !== pixelHeight;
-    desktopRequestedSizeRef.current = nextSize;
-    const renderedSize = desktopRenderedSizeRef.current;
-    const sizeAlreadyRendered = !!renderedSize
-      && renderedSize.pixelWidth === pixelWidth
-      && renderedSize.pixelHeight === pixelHeight;
-
-    if (!desktopBitmapRef.current || sizeAlreadyRendered) {
-      if (requestedSizeChanged) cancelRender();
-      scheduleRender(0);
-      return;
-    }
-
-    if (!requestedSizeChanged || desktopRenderTimerRef.current !== null) return;
-    scheduleRender(DESKTOP_BITMAP_RESIZE_DEBOUNCE_MS);
-  }, [colors, isDesktopWeb, panel, pixelHeight, pixelWidth]);
-
-  useEffect(() => () => {
-    desktopActiveRef.current = false;
-    if (desktopRenderTimerRef.current !== null) {
-      clearTimeout(desktopRenderTimerRef.current);
-      desktopRenderTimerRef.current = null;
-    }
-  }, []);
-
-  if (!bitmapSize) return null;
-  return isDesktopWeb ? desktopBitmap : terminalBitmap;
-}
-
-function resolvePanelCrosshair(
-  panel: CompositePanelScene,
-  columnLayout: CompositeColumnLayout,
-  bitmap: NativeChartBitmap | null,
-  cursorXRatio: number | null,
-  cursorYRatio: number | null,
-  color: string,
-): ChartSurfaceProps["crosshair"] {
-  if (!bitmap || cursorXRatio === null) return null;
-  const markers = panel.series.flatMap((series) => {
-    // Column cohorts are drawn at their group center, not each observation's
-    // own timestamp, so match the position the bar actually occupies.
-    const cursorPoint = series.points.find((point) => {
-      const xRatio = series.source.style === "columns"
-        ? columnLayout.groupByPoint.get(point)?.xRatio ?? point.xRatio
-        : point.xRatio;
-      return Math.abs(xRatio - cursorXRatio) < 1e-9;
-    });
-    return cursorPoint
-      ? [{
-        pixelY: cursorPoint.yRatio * Math.max(bitmap.height - 1, 0),
-        color: series.source.color,
-      }]
-      : [];
-  });
-  return {
-    pixelX: cursorXRatio * Math.max(bitmap.width - 1, 0),
-    pixelY: cursorYRatio === null ? null : cursorYRatio * Math.max(bitmap.height - 1, 0),
-    color,
-    markers,
-  };
-}
-
-function axisLabelRows(lines: string[]): ReadonlyMap<number, string> {
-  return new Map(lines.flatMap((line, row) => {
-    const label = line.trim();
-    return label ? [[row, label] as const] : [];
-  }));
-}
-
-function cursorAxisLabel(
-  panel: CompositePanelScene,
-  side: "left" | "right",
-  cursorYRatio: number | null,
-  format?: CompositeAxisValueFormatter,
-): string | null {
-  const domain = panel.axes[side];
-  if (!domain || cursorYRatio === null) return null;
-  const value = unprojectCompositeValue(cursorYRatio, domain);
-  if (value === null) return null;
-  return format ? format(value, domain) : formatCompositeCursorValue(value, domain);
-}
-
-const MINIMUM_AXIS_LABEL_WIDTH = 3;
-
-/**
- * Reserve cursor precision even when the tick values are round numbers. This
- * keeps the plot stable while the pointer moves between integer tick values.
- */
-function compositeAxisLabelWidth(
-  domain: CompositeAxisDomain | undefined,
-  format: CompositeAxisValueFormatter | undefined,
-  includeCursor: boolean,
-): number {
-  if (!domain) return 0;
-  const ticks = compositeAxisTicks(domain, format);
-  const labels = ticks.map((tick) => tick.label);
-  if (includeCursor) {
-    const cursorFormat = format ?? formatCompositeCursorValue;
-    for (const { value } of ticks) {
-      labels.push(cursorFormat(value, domain));
-      // Totals use two decimals at their compact scale; prices can use four
-      // below one currency unit. Probe those digits without changing the data.
-      const scale = domain.unitGroup.toLowerCase().split(":")[0] === "currency-total"
-        ? 10 ** Math.max(0, Math.min(12, Math.floor(Math.log10(Math.abs(value) || 1) / 3) * 3))
-        : Math.abs(value) > 0 && Math.abs(value) < 0.01
-          ? 10 ** Math.floor(Math.log10(Math.abs(value))) : 1;
-      const precisionValue = (value < 0 ? -1 : 1) * (Math.floor(Math.abs(value) / scale) + 0.1234) * scale;
-      labels.push(cursorFormat(precisionValue, domain));
-    }
-  }
-  return labels.reduce((widest, label) => Math.max(widest, [...label].length), 0);
-}
-
-
-const HAND_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M6.4 8V3.5a1.15 1.15 0 0 1 2.3 0V7m0-.6a1.15 1.15 0 0 1 2.3 0V8m0-.5a1.15 1.15 0 0 1 2.3 0v3.1c0 2.1-1.7 3.8-3.8 3.8H8.9c-1.2 0-2.3-.6-3-1.6L3.6 9.4a1.15 1.15 0 0 1 1.8-1.4L6.4 9.2" fill="none" stroke="#000" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
-const RULER_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><rect x="1.4" y="4.6" width="13.2" height="6.8" rx="1.4" fill="none" stroke="#000" stroke-width="1.4"/><path d="M5 4.6v2.6M8 4.6v3.6M11 4.6v2.6" stroke="#000" stroke-width="1.3" stroke-linecap="round"/></svg>`;
-const PEN_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M2.4 13.6 4 9.9 10.6 3.3a1.6 1.6 0 0 1 2.3 0l0 0a1.6 1.6 0 0 1 0 2.3L6.2 12 2.4 13.6Z" fill="none" stroke="#000" stroke-width="1.5" stroke-linejoin="round"/></svg>`;
-const LINE_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M3.2 12.8 12.8 3.2" stroke="#000" stroke-width="1.6" stroke-linecap="round"/><circle cx="3.2" cy="12.8" r="2" fill="none" stroke="#000" stroke-width="1.4"/><circle cx="12.8" cy="3.2" r="2" fill="none" stroke="#000" stroke-width="1.4"/></svg>`;
-const LEVEL_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M1.6 8h4.2M10.2 8h4.2" stroke="#000" stroke-width="1.6" stroke-linecap="round"/><circle cx="8" cy="8" r="2.2" fill="none" stroke="#000" stroke-width="1.4"/></svg>`;
-const MARQUEE_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M2.2 6V3.4a1.2 1.2 0 0 1 1.2-1.2H6M10 2.2h2.6a1.2 1.2 0 0 1 1.2 1.2V6M13.8 10v2.6a1.2 1.2 0 0 1-1.2 1.2H10M6 13.8H3.4a1.2 1.2 0 0 1-1.2-1.2V10" fill="none" stroke="#000" stroke-width="1.7" stroke-linecap="round"/></svg>`;
-
-const CHART_TOOLS: ReadonlyArray<{
-  /** null is the resting state: the pointer pans and nothing is armed. */
-  kind: ChartToolKind | null;
-  label: string;
-  shortcut: string;
-  hint: string;
-  glyph: string;
-  icon: string;
-}> = [
-  {
-    kind: null,
-    label: "Pan",
-    shortcut: "Esc",
-    hint: "Drag to move through time, the resting state of the pointer",
-    glyph: "\u2725",
-    icon: HAND_ICON,
-  },
-  {
-    kind: "measure",
-    label: "Ruler",
-    shortcut: "Shift+M",
-    hint: "Drag to measure change, percent, bars, and elapsed time",
-    glyph: "\u2194",
-    icon: RULER_ICON,
-  },
-  {
-    kind: "zoom",
-    label: "Zoom to range",
-    shortcut: "Shift+Z",
-    hint: "Drag to select a time range to zoom into",
-    glyph: "\u229e",
-    icon: MARQUEE_ICON,
-  },
-  {
-    kind: "line",
-    label: "Trend line",
-    shortcut: "Shift+D",
-    hint: "Drag a straight line, grab an end to reshape it, Backspace deletes",
-    glyph: "\u2571",
-    icon: LINE_ICON,
-  },
-  {
-    kind: "pencil",
-    label: "Freehand",
-    shortcut: "Shift+P",
-    hint: "Draw freehand, drag a shape to move it, Backspace deletes",
-    glyph: "\u223f",
-    icon: PEN_ICON,
-  },
-  {
-    kind: "level",
-    label: "Price level",
-    shortcut: "Shift+H",
-    hint: "Click to add a level every chart of this ticker shows, drag one to move it, Backspace deletes",
-    glyph: "\u2550",
-    icon: LEVEL_ICON,
-  },
-];
-
-interface ChartToolSpan {
-  startXRatio: number;
-  endXRatio: number;
-  /** The anchor's own time, which can sit outside the view once it pans. */
-  startTime: number;
-  color: string;
-}
-
-/** Pane menu names for the tools, with the keys that pick them. */
-const CHART_TOOL_MENU: ReadonlyArray<{ kind: ChartToolKind; label: string; accelerator: string }> = [
-  { kind: "measure", label: "Ruler", accelerator: "Shift+M" },
-  { kind: "zoom", label: "Zoom to Range", accelerator: "Shift+Z" },
-  { kind: "line", label: "Trend Line", accelerator: "Shift+D" },
-  { kind: "pencil", label: "Freehand", accelerator: "Shift+P" },
-  { kind: "level", label: "Price Level", accelerator: "Shift+H" },
-];
-
-/** What Enter does next with a tool in hand, for the footer and the pane menu. */
-const KEYBOARD_TOOL_HINTS: Record<ChartToolKind, {
-  start: string;
-  startTitle: string;
-  finish: string;
-  finishTitle: string;
-}> = {
-  measure: { start: "measure", startTitle: "Start Measure", finish: "done", finishTitle: "Finish Measure" },
-  zoom: { start: "select", startTitle: "Select Range", finish: "zoom", finishTitle: "Zoom to Range" },
-  line: { start: "draw", startTitle: "Draw Line", finish: "place", finishTitle: "Place Line" },
-  pencil: { start: "draw", startTitle: "Draw Freehand", finish: "place", finishTitle: "Place Drawing" },
-  level: { start: "add level", startTitle: "Add Level", finish: "add level", finishTitle: "Add Level" },
-};
-
-/**
- * A tool placed from the keyboard: Enter anchors it at the cursor, the arrows
- * move its end and Enter finishes it. Held in data, so a pan, a zoom or a new
- * bar leaves it on the observations it was placed on.
- */
-interface KeyboardToolPlacement {
-  kind: ChartToolKind;
-  panelId: string;
-  start: ChartDrawingPoint;
-  end: ChartDrawingPoint;
-  /** Every step the end took: the freehand tool's trail. */
-  path: ChartDrawingPoint[];
-  /** Up or Down set the end's level, so Left and Right stop following the series. */
-  freeValue: boolean;
-}
-
-/** A keyboard placement projected into the plot of the panel that holds it. */
-interface KeyboardToolDrag {
-  panelId: string;
-  drag: ChartToolDrag;
-  start: ChartDrawingPoint;
-  end: ChartDrawingPoint;
-}
-
-const ARMED_TOOL_BY_INTERACTION = {
-  "arm-measure": "measure",
-  "arm-zoom": "zoom",
-  "arm-line": "line",
-  "arm-pencil": "pencil",
-  "arm-level": "level",
-} as const satisfies Record<string, ChartToolKind>;
-
-const COMPOSITE_PANEL_ROLE = "composite-chart-panel";
-
 // Wordmark cell grid at scale 1 (27 columns of 8px, 4 rows of 12px).
 const WATERMARK_BASE_WIDTH_PX = 216;
 const WATERMARK_BASE_HEIGHT_PX = 48;
@@ -567,1385 +55,7 @@ function chartWatermarkScale(plotWidthPx: number, plotHeightPx: number): number
   return scale >= 1 ? Math.round(scale * 4) / 4 : null;
 }
 
-let nextDrawingSequence = 1;
-
-function nextDrawingId(): string {
-  return `drawing:${nextDrawingSequence++}`;
-}
-
-/** Levels are stored with the account, so their ids must not repeat across sessions. */
-function nextLevelId(): string {
-  return `${Date.now().toString(36)}-${(nextDrawingSequence++).toString(36)}`;
-}
-
-const NO_LEVELS: readonly ProjectedLevel[] = [];
-
-/** Shift and a letter, whether or not the terminal reports the shift itself. */
-function isShiftedLetter(event: { name?: string; shift?: boolean; ctrl?: boolean; meta?: boolean; alt?: boolean }, letter: string): boolean {
-  if (event.ctrl || event.meta || event.alt) return false;
-  return event.name === letter.toUpperCase() || (event.shift === true && event.name === letter);
-}
-
-/** Icon cells plus the gap between chips. */
-const CHART_TOOLBAR_WIDTH = CHART_TOOLS.length * 3 + (CHART_TOOLS.length - 1);
-
-function ChartToolChip({
-  tool,
-  active,
-  isDesktopWeb,
-  onPress,
-}: {
-  tool: (typeof CHART_TOOLS)[number];
-  active: boolean;
-  isDesktopWeb: boolean;
-  onPress: () => void;
-}) {
-  const label = `${tool.label} (${tool.shortcut}). ${tool.hint}`;
-  const color = active ? themeColors.text : themeColors.textDim;
-  return (
-    <Box
-      flexDirection="row"
-      alignItems="center"
-      justifyContent="center"
-      width={3}
-      height={1}
-      flexShrink={0}
-      backgroundColor={active ? themeColors.selected : undefined}
-      hoverBackgroundColor={hoverBg()}
-      onMouseDown={(event: ChartMouseEvent) => {
-        consumeChartMouseEvent(event);
-        onPress();
-      }}
-      cursor="pointer"
-      data-gloom-interactive="true"
-      data-gloom-role="composite-chart-tool"
-      data-gloom-label={label}
-      data-active={active ? "true" : "false"}
-      title={isDesktopWeb ? label : undefined}
-      // Cells size the terminal strip; the desktop chip sizes to its icon.
-      style={isDesktopWeb ? { width: "auto", paddingInline: 4, borderRadius: 4 } : undefined}
-    >
-      {isDesktopWeb ? (
-        <Box
-          flexShrink={0}
-          style={{
-            width: 13,
-            height: 13,
-            backgroundColor: color,
-            maskImage: svgMaskUrl(tool.icon),
-            WebkitMaskImage: svgMaskUrl(tool.icon),
-            maskSize: "contain",
-            WebkitMaskSize: "contain",
-            maskRepeat: "no-repeat",
-            WebkitMaskRepeat: "no-repeat",
-            maskPosition: "center",
-            WebkitMaskPosition: "center",
-          }}
-        />
-      ) : (
-        <Text fg={color}>{tool.glyph}</Text>
-      )}
-    </Box>
-  );
-}
-
-
-/** Blurs a focused text field, the focus change a consumed mousedown prevents. */
-function releaseEditableFocus(event: ChartMouseEvent): void {
-  if (!event.target?.closest?.(`[data-gloom-role="${COMPOSITE_PANEL_ROLE}"]`)) return;
-  const active = (globalThis as {
-    document?: { activeElement?: { tagName?: string; blur?: () => void } };
-  }).document?.activeElement;
-  const tag = active?.tagName?.toUpperCase();
-  if (tag !== "INPUT" && tag !== "TEXTAREA") return;
-  active?.blur?.();
-}
-
-function svgMaskUrl(svg: string): string {
-  return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
-}
-
-function ChartColorSwatch({
-  color,
-  active,
-  isDesktopWeb,
-  onPress,
-}: {
-  color: string;
-  active: boolean;
-  isDesktopWeb: boolean;
-  onPress: () => void;
-}) {
-  return (
-    <Box
-      flexDirection="row"
-      alignItems="center"
-      justifyContent="center"
-      width={2}
-      height={1}
-      flexShrink={0}
-      backgroundColor={active ? themeColors.selected : undefined}
-      hoverBackgroundColor={hoverBg()}
-      onMouseDown={(event: ChartMouseEvent) => {
-        consumeChartMouseEvent(event);
-        onPress();
-      }}
-      cursor="pointer"
-      data-gloom-interactive="true"
-      data-gloom-role="composite-chart-color"
-      data-gloom-label={`Drawing colour ${color}`}
-      data-active={active ? "true" : "false"}
-      style={isDesktopWeb
-        ? {
-          width: 14,
-          height: 14,
-          borderRadius: 999,
-          backgroundColor: color,
-          border: `1.5px solid ${active ? themeColors.text : "transparent"}`,
-        }
-        : undefined}
-    >
-      {isDesktopWeb ? null : <Text fg={color}>{active ? "\u25c9" : "\u25cf"}</Text>}
-    </Box>
-  );
-}
-
-function ChartToolbar({
-  armedTool,
-  isDesktopWeb,
-  left,
-  top,
-  drawColor,
-  showColors,
-  levelTool,
-  onArmTool,
-  onPickColor,
-}: {
-  armedTool: ChartToolKind | null;
-  isDesktopWeb: boolean;
-  left: number;
-  top: number;
-  drawColor: string;
-  showColors: boolean;
-  /** The chart's levels can be edited here. */
-  levelTool: boolean;
-  onArmTool: (tool: ChartToolKind | null) => void;
-  onPickColor: (color: string) => void;
-}) {
-  return (
-    <Box
-      position="absolute"
-      left={left}
-      top={top}
-      height={1}
-      flexDirection="row"
-      gap={1}
-      zIndex={30}
-      backgroundColor={themeColors.bg}
-      style={isDesktopWeb
-        ? {
-          gap: 3,
-          padding: 3,
-          borderRadius: 7,
-          backgroundColor: `color-mix(in srgb, ${themeColors.bg} 78%, transparent)`,
-          backdropFilter: "blur(6px)",
-          width: "auto",
-          height: "auto",
-        }
-        : undefined}
-      data-gloom-role="composite-chart-toolbar"
-    >
-      {CHART_TOOLS.filter((tool) => levelTool || tool.kind !== "level").map((tool) => (
-        <ChartToolChip
-          key={tool.kind ?? "pan"}
-          tool={tool}
-          active={armedTool === tool.kind}
-          isDesktopWeb={isDesktopWeb}
-          onPress={() => onArmTool(tool.kind)}
-        />
-      ))}
-      {/* Colours only take space while something can use them. */}
-      {showColors ? CHART_DRAWING_COLORS.map((color) => (
-        <ChartColorSwatch
-          key={color}
-          color={color}
-          active={color === drawColor}
-          isDesktopWeb={isDesktopWeb}
-          onPress={() => onPickColor(color)}
-        />
-      )) : null}
-    </Box>
-  );
-}
-
-function resolveSeriesCursorYRatio(
-  panel: CompositePanelScene,
-  scene: CompositeChartScene,
-): number | null {
-  for (const series of panel.series) {
-    const value = scene.cursorValues.find(
-      (entry) => entry.seriesId === series.source.id,
-    )?.value ?? null;
-    const domain = panel.axes[series.source.axis];
-    if (value === null || !domain) continue;
-    const yRatio = projectCompositeValue(value, domain);
-    if (yRatio !== null) return yRatio;
-  }
-  return null;
-}
-
-interface CompositePanelSurfaceProps {
-  panel: CompositePanelScene;
-  scene: CompositeChartScene;
-  plotWidth: number;
-  leftAxisWidth: number;
-  rightAxisWidth: number;
-  axisGap: number;
-  colors: CompositeChartColors;
-  interactive: boolean;
-  /** False keeps the hover cursor but removes pan, zoom, and the tools. */
-  navigable: boolean;
-  formatAxisValue?: CompositeAxisValueFormatter;
-  remoteKind?: string;
-  viewport: CompositeViewportRange;
-  frame: CompositeNavigationFrame;
-  armedTool: ChartToolKind | null;
-  drawings: readonly ChartDrawing[];
-  selectedDrawingId: string | null;
-  drawColor: string;
-  onDraw: (drawing: ChartDrawing) => void;
-  onEditDrawing: (id: string, update: (drawing: ChartDrawing) => ChartDrawing) => void;
-  onSelectDrawing: (id: string | null) => void;
-  onActivate?: () => void;
-  onCursorDateChange: (date: Date | null) => void;
-  /** Positive positions move toward older observations. A gesture supplies the frame and origin it started from. */
-  onPanViewport: (
-    deltaPositions: number,
-    gesture?: { frame: CompositeNavigationFrame; from: CompositeViewportRange },
-  ) => void;
-  onZoomViewport: (zoomFactor: number, anchorRatio: number) => void;
-  onSetViewport: (range: CompositeViewportRange) => void;
-  onToolSpanChange: (span: ChartToolSpan | null) => void;
-  /** The tool being placed from the keyboard, when it lives in this panel. */
-  keyboardToolDrag: KeyboardToolDrag | null;
-  /** A press on the plot: the pointer takes over from a keyboard placement. */
-  onPointerPress: () => void;
-  showTextFallback: boolean;
-  /** Set while the owner is picking a bar: a press picks instead of panning. */
-  onPickTime?: (date: Date) => void;
-  /** The chart's levels when they draw on this panel. */
-  levels: CompositeChartLevels | null;
-  selectedLevelId: string | null;
-  onSelectLevel: (id: string | null) => void;
-}
-
-function CompositePanelSurface({
-  panel,
-  scene,
-  plotWidth,
-  leftAxisWidth,
-  rightAxisWidth,
-  axisGap,
-  colors,
-  interactive,
-  navigable,
-  formatAxisValue,
-  remoteKind,
-  viewport,
-  frame,
-  armedTool,
-  drawings,
-  selectedDrawingId,
-  drawColor,
-  onDraw,
-  onEditDrawing,
-  onSelectDrawing,
-  onActivate,
-  onCursorDateChange,
-  onPanViewport,
-  onZoomViewport,
-  onSetViewport,
-  onToolSpanChange,
-  keyboardToolDrag,
-  onPointerPress,
-  showTextFallback,
-  onPickTime,
-  levels,
-  selectedLevelId,
-  onSelectLevel,
-}: CompositePanelSurfaceProps) {
-  const isDesktopWeb = useUiCapabilities().nativePaneChrome === true;
-  const { cellHeightPx = 18, cellWidthPx = 8, fractionalViewport = false } = useUiCapabilities();
-  const renderer = useNativeRenderer();
-  const plotRef = useRef<BoxRenderable | null>(null);
-  const [cursorYRatio, setCursorYRatio] = useState<number | null>(null);
-  const [toolDrag, setToolDrag] = useState<ChartToolDrag | null>(null);
-  // A pointer drag owns the plot while it lasts; otherwise a tool placed from
-  // the keyboard draws and reads out exactly like one.
-  const keyboardDrag = toolDrag ? null : keyboardToolDrag;
-  const activeDrag = toolDrag ?? keyboardDrag?.drag ?? null;
-  // A keyboard placement's end sits at the level the user put it, so it
-  // draws a level line where otherwise only the pointer would.
-  const heldCursorYRatio = keyboardDrag ? keyboardDrag.drag.endYRatio : cursorYRatio;
-  const seriesCursorYRatio = useMemo(
-    () => resolveSeriesCursorYRatio(panel, scene),
-    [panel, scene],
-  );
-  const activeCursorYRatio = scene.cursorXRatio === null
-    ? null
-    : heldCursorYRatio ?? seriesCursorYRatio;
-  const dragRef = useRef<
-    | PanGesture
-    | {
-      kind: "edit";
-      drawingId: string;
-      pointIndex: number | null;
-      lastXRatio: number;
-      lastYRatio: number;
-    }
-    | { kind: "level-move"; id: string }
-    | ChartToolDrag
-    | null
-  >(null);
-  const plotAspect = (plotWidth * cellWidthPx) / Math.max(panel.height * cellHeightPx, 1);
-  // The plot is wider than the viewport by the reserved right offset. Gestures
-  // read the pointer in plot space, so they convert through this.
-  const plotSpanFactor = 1 + compositeRightOffsetRatio(scene.timeScale);
-  const bitmapSize = useStaticChartBitmapSize(plotWidth, panel.height);
-  const bitmap = useCompositePanelBitmap({ panel, bitmapSize, colors, isDesktopWeb });
-  const columnLayout = useMemo(() => buildCompositeColumnLayout(panel), [panel]);
-  // The level line follows the pointer only. A keyboard or shared cursor knows
-  // its column, and the series markers and axis readout already say the value.
-  // A tool placed from the keyboard is the exception: its end is a level.
-  const pointerCursorYRatio = scene.cursorXRatio === null ? null : heldCursorYRatio;
-  const crosshair = useMemo(
-    () => resolvePanelCrosshair(panel, columnLayout, bitmap, scene.cursorXRatio, pointerCursorYRatio, colors.crosshair),
-    [bitmap, colors.crosshair, columnLayout, panel, pointerCursorYRatio, scene.cursorXRatio],
-  );
-  const measureDomain = useMemo(() => resolveMeasureAxisDomain(panel), [panel]);
-  const toolReadout = useMemo(() => {
-    if (!activeDrag) return null;
-    // A keyboard placement knows its data points exactly, even off screen; a
-    // pointer drag reads them back from the plot.
-    const startTime = keyboardDrag?.start.time
-      ?? unprojectCompositeTimestamp(scene.timeScale, activeDrag.startXRatio);
-    const endTime = keyboardDrag?.end.time
-      ?? unprojectCompositeTimestamp(scene.timeScale, activeDrag.endXRatio);
-    if (activeDrag.kind === "zoom") {
-      return {
-        direction: "up" as const,
-        summary: keyboardDrag
-          ? summarizeZoomRange(scene, startTime, endTime)
-          : summarizeZoomSelection(scene, activeDrag),
-        startTime,
-        startValueLabel: null,
-        endValueLabel: null,
-      };
-    }
-    const startValue = keyboardDrag
-      ? keyboardDrag.start.value
-      : measureDomain ? unprojectCompositeValue(activeDrag.startYRatio, measureDomain) : null;
-    const endValue = keyboardDrag
-      ? keyboardDrag.end.value
-      : measureDomain ? unprojectCompositeValue(activeDrag.endYRatio, measureDomain) : null;
-    return {
-      direction: resolveMeasureDirection(startValue, endValue),
-      summary: summarizeMeasure({
-        startValue,
-        endValue,
-        startTime,
-        endTime,
-        // Cross-market cursor stops include every listing's observations;
-        // measured bars still follow the primary market's session scale.
-        bars: countMeasureBars(scene.timeScale.kind === "market"
-          ? scene.timeScale.anchors.map(({ timestamp }) => new Date(timestamp))
-          : scene.dates, startTime, endTime),
-        domain: measureDomain,
-      }),
-      startTime,
-      startValueLabel: measureDomain && startValue !== null
-        ? formatCompositeCursorValue(startValue, measureDomain)
-        : null,
-      endValueLabel: measureDomain && endValue !== null
-        ? formatCompositeCursorValue(endValue, measureDomain)
-        : null,
-    };
-  }, [activeDrag, keyboardDrag, measureDomain, scene]);
-  const toolSummary = toolReadout?.summary ?? null;
-  const toolStartTime = toolReadout?.startTime ?? null;
-  const toolSpan = useMemo(() => {
-    if (!activeDrag || !toolSummary || toolStartTime === null) return null;
-    return {
-      startXRatio: activeDrag.startXRatio,
-      endXRatio: activeDrag.endXRatio,
-      startTime: toolStartTime,
-      color: activeDrag.kind === "zoom"
-        ? colors.crosshair
-        : toolReadout?.direction === "down" ? colors.negative : themeColors.positive,
-    };
-  }, [activeDrag, colors.crosshair, colors.negative, toolReadout?.direction, toolStartTime, toolSummary]);
-  useEffect(() => {
-    onToolSpanChange(toolSpan);
-  }, [onToolSpanChange, toolSpan]);
-  const panelDrawings = useMemo(
-    () => drawings.filter((drawing) => drawing.panelId === panel.id),
-    [drawings, panel.id],
-  );
-  // A dragged level moves here and is saved once, when the pointer lets go.
-  const [levelDraft, setLevelDraft] = useState<{ id: string; value: number } | null>(null);
-  const levelDraftRef = useRef(levelDraft);
-  levelDraftRef.current = levelDraft;
-  const levelDomain = useMemo(() => {
-    const series = levels ? panel.series.find((entry) => entry.source.id === levels.seriesId) : undefined;
-    return series ? panel.axes[series.source.axis] ?? null : null;
-  }, [levels, panel]);
-  const projectedLevels = useMemo(
-    () => levels && levelDomain ? projectLevels(levels.items, levelDomain, levelDraft) : NO_LEVELS,
-    [levelDomain, levelDraft, levels],
-  );
-  const bitmapLayers = useMemo(() => {
-    if (!bitmap) return null;
-    // The desktop composites overlays as vectors, so the plot raster stays put
-    // while a tool drags. Copying and reblending it per frame is what made the
-    // ruler feel heavy.
-    if (isDesktopWeb) return [bitmap];
-    const base = !activeDrag && panelDrawings.length === 0 ? bitmap : drawChartToolOverlay(
-      bitmap,
-      activeDrag,
-      {
-        positive: themeColors.positive,
-        negative: colors.negative,
-        zoom: colors.crosshair,
-        draw: drawColor,
-      },
-      toolReadout?.direction ?? "up",
-      { scene, panel, items: panelDrawings, selectedId: selectedDrawingId },
-    );
-    return [projectedLevels.length > 0 ? paintLevels(base, projectedLevels, selectedLevelId) : base];
-  }, [
-    activeDrag,
-    bitmap,
-    colors.crosshair,
-    colors.negative,
-    drawColor,
-    isDesktopWeb,
-    panel,
-    panelDrawings,
-    projectedLevels,
-    scene,
-    selectedDrawingId,
-    selectedLevelId,
-    toolReadout?.direction,
-  ]);
-  const vectors = useMemo<ChartSurfaceProps["vectors"]>(() => {
-    if (!isDesktopWeb) return null;
-    const shapes = [...levelVectors(projectedLevels, selectedLevelId), ...buildChartToolVectors({
-      scene,
-      panel,
-      drawings: panelDrawings,
-      selectedId: selectedDrawingId,
-      drag: activeDrag,
-      colors: {
-        positive: themeColors.positive,
-        negative: colors.negative,
-        zoom: colors.crosshair,
-        draw: drawColor,
-      },
-      direction: toolReadout?.direction ?? "up",
-    })];
-    return shapes.length > 0 ? shapes : null;
-  }, [
-    activeDrag,
-    colors.crosshair,
-    colors.negative,
-    drawColor,
-    isDesktopWeb,
-    panel,
-    panelDrawings,
-    projectedLevels,
-    scene,
-    selectedDrawingId,
-    selectedLevelId,
-    toolReadout?.direction,
-  ]);
-  const textLines = useMemo(
-    () => isDesktopWeb || !showTextFallback
-      ? []
-      : writeLevelText(
-        renderCompositePanelText(panel, plotWidth, scene.cursorXRatio, pointerCursorYRatio),
-        projectedLevels,
-        selectedLevelId,
-      ),
-    [isDesktopWeb, panel, plotWidth, pointerCursorYRatio, projectedLevels, scene.cursorXRatio, selectedLevelId, showTextFallback],
-  );
-  const leftAxisLabels = useMemo(
-    () => axisLabelRows(
-      renderCompositeAxisText(panel.axes.left, panel.height, leftAxisWidth, "left", formatAxisValue),
-    ),
-    [formatAxisValue, leftAxisWidth, panel],
-  );
-  const rightAxisLabels = useMemo(
-    () => axisLabelRows(
-      renderCompositeAxisText(panel.axes.right, panel.height, rightAxisWidth, "right", formatAxisValue),
-    ),
-    [formatAxisValue, panel, rightAxisWidth],
-  );
-  const leftAxisTicks = useMemo(
-    () => compositeAxisTickLabels(panel.axes.left, leftAxisWidth, formatAxisValue),
-    [formatAxisValue, leftAxisWidth, panel],
-  );
-  const rightAxisTicks = useMemo(
-    () => compositeAxisTickLabels(panel.axes.right, rightAxisWidth, formatAxisValue),
-    [formatAxisValue, panel, rightAxisWidth],
-  );
-  const cursorRow = activeCursorYRatio === null
-    ? null
-    : Math.round(activeCursorYRatio * Math.max(panel.height - 1, 0));
-  const cursorPixelY = activeCursorYRatio === null
-    ? null
-    : activeCursorYRatio * Math.max(panel.height * cellHeightPx - 1, 0);
-  const leftCursorLabel = cursorAxisLabel(panel, "left", activeCursorYRatio, formatAxisValue);
-  const rightCursorLabel = cursorAxisLabel(panel, "right", activeCursorYRatio, formatAxisValue);
-  const measureReadout = useMemo(() => {
-    if (!activeDrag || !toolReadout?.summary) return null;
-    const text = toolReadout.summary;
-    const centreX = (activeDrag.startXRatio + activeDrag.endXRatio) / 2;
-    const centreY = activeDrag.kind === "zoom"
-      ? 0.5
-      : (activeDrag.startYRatio + activeDrag.endYRatio) / 2;
-    const width = Math.min([...text].length, plotWidth);
-    return {
-      text,
-      width,
-      color: activeDrag.kind === "zoom"
-        ? colors.text
-        : toolReadout.direction === "down" ? colors.negative : themeColors.positive,
-      left: leftAxisWidth + (leftAxisWidth ? axisGap : 0)
-        + Math.max(0, Math.min(plotWidth - width, Math.round(centreX * plotWidth - width / 2))),
-      top: Math.max(0, Math.min(panel.height - 1, Math.round(centreY * (panel.height - 1)))),
-    };
-  }, [
-    activeDrag,
-    axisGap,
-    colors.negative,
-    colors.text,
-    leftAxisWidth,
-    panel.height,
-    plotWidth,
-    toolReadout,
-  ]);
-  const axisMarkers = useMemo(() => {
-    // The crosshair already marks the moving end, so the axes only need the
-    // anchor the drag started from.
-    if (!activeDrag || activeDrag.kind === "zoom" || !toolReadout?.startValueLabel) return null;
-    return {
-      side: null,
-      // A keyboard anchor can leave the value range once the view moves.
-      yRatio: Math.max(0, Math.min(1, activeDrag.startYRatio)),
-      label: toolReadout.startValueLabel,
-      color: toolReadout.direction === "down" ? colors.negative : themeColors.positive,
-    };
-  }, [activeDrag, colors.negative, toolReadout]);
-  const lastPriceMarker = useMemo(() => {
-    const marker = panel.lastPrice;
-    const domain = marker ? panel.axes[marker.axis] : undefined;
-    if (!marker || !domain) return null;
-    return {
-      side: marker.axis,
-      yRatio: marker.yRatio,
-      label: formatAxisValue
-        ? formatAxisValue(marker.value, domain)
-        : formatCompositeCursorValue(marker.value, domain),
-      color: marker.color,
-    };
-  }, [formatAxisValue, panel]);
-  const priorCloseMarker = useMemo(() => {
-    const marker = panel.priorClose;
-    const domain = marker ? panel.axes[marker.axis] : undefined;
-    if (!marker || !domain) return null;
-    return {
-      side: marker.axis,
-      yRatio: marker.yRatio,
-      label: formatAxisValue ? formatAxisValue(marker.value, domain) : formatCompositeCursorValue(marker.value, domain),
-      color: colors.textDim,
-    };
-  }, [colors.textDim, formatAxisValue, panel]);
-  const levelMarkers = useMemo(() => levelDomain ? [...projectedLevels]
-    // The picked level's label first, then alerts', when they compete for room.
-    .sort((left, right) => Number(right.level.id === selectedLevelId) - Number(left.level.id === selectedLevelId)
-      || Number(left.level.editable) - Number(right.level.editable))
-    .map(({ level, yRatio }) => ({
-      side: levelDomain.side,
-      yRatio,
-      label: formatAxisValue ? formatAxisValue(level.value, levelDomain) : formatCompositeCursorValue(level.value, levelDomain),
-      color: level.color,
-    })) : [], [formatAxisValue, levelDomain, projectedLevels, selectedLevelId]);
-  const buildAxisMarkers = (side: "left" | "right") => {
-    if (!panel.axes[side]) return undefined;
-    const toAxisMarker = (marker: { yRatio: number; label: string; color: string }) => ({
-      row: Math.round(marker.yRatio * Math.max(panel.height - 1, 0)),
-      pixelY: marker.yRatio * Math.max(panel.height * cellHeightPx - 1, 0),
-      label: marker.label,
-      color: marker.color,
-    });
-    const onSide = <T extends { side: string | null }>(marker: T | null): marker is T => (
-      !!marker && (marker.side === null || marker.side === side)
-    );
-    const fixed = [lastPriceMarker, axisMarkers].filter(onSide).map(toAxisMarker);
-    // The prior close's label yields to every level's.
-    const levelLabels = [...levelMarkers, priorCloseMarker].filter(onSide).map(toAxisMarker);
-    // A label is a row tall, so close levels would stack into an unreadable
-    // pile and hide the last price: each keeps its line, and only the labels
-    // with a row to themselves show. Desktop badges sit between rows.
-    const markers = [
-      ...fitAxisLabels(levelLabels, fixed, (marker) => fractionalViewport ? marker.pixelY / cellHeightPx : marker.row),
-      ...fixed,
-    ];
-    return markers.length > 0 ? markers : undefined;
-  };
-  const leftAxisMarkers = buildAxisMarkers("left");
-  const rightAxisMarkers = buildAxisMarkers("right");
-
-  const pointerRatios = useCallback((event: ChartMouseEvent) => {
-    const pointerTarget = plotRef.current as unknown as Parameters<typeof getLocalPlotPointer>[1];
-    const pointer = getLocalPlotPointer(event, pointerTarget, renderer);
-    if (!pointer) return null;
-    return {
-      xRatio: plotWidth <= 1 ? 0 : Math.max(0, Math.min(1, pointer.cellX / (plotWidth - 1))),
-      yRatio: panel.height <= 1 ? 0.5 : Math.max(0, Math.min(1, pointer.cellY / (panel.height - 1))),
-    };
-  }, [panel.height, plotWidth, renderer]);
-  const updateCursor = useCallback((event: ChartMouseEvent): boolean => {
-    const pointerTarget = plotRef.current as unknown as Parameters<typeof getLocalPlotPointer>[1];
-    const pointer = getLocalPlotPointer(event, pointerTarget, renderer);
-    if (!pointer) return false;
-    const nextDate = resolveCompositeCursorDate(scene, pointer.cellX);
-    if (!nextDate) return false;
-    const nextYRatio = panel.height <= 1
-      ? 0.5
-      : Math.max(0, Math.min(1, pointer.cellY / (panel.height - 1)));
-    setCursorYRatio((current) => current === nextYRatio ? current : nextYRatio);
-    onCursorDateChange(nextDate);
-    consumeChartMouseEvent(event);
-    return true;
-  }, [onCursorDateChange, panel.height, renderer, scene]);
-  const clearCursor = useCallback(() => {
-    setCursorYRatio(null);
-    onCursorDateChange(null);
-  }, [onCursorDateChange]);
-  const startDrag = useCallback((event: ChartMouseEvent) => {
-    onActivate?.();
-    onPointerPress();
-    // The plot consumes the press, so the browser never moves focus off a text
-    // field for us. Hand it back, but only for a press that truly landed here:
-    // a dialog over the plot must keep the focus it just took.
-    if (isDesktopWeb) releaseEditableFocus(event);
-    consumeChartMouseEvent(event);
-    if (onPickTime) {
-      const pointer = getLocalPlotPointer(event, plotRef.current as unknown as Parameters<typeof getLocalPlotPointer>[1], renderer);
-      const date = pointer ? resolveCompositeCursorDate(scene, pointer.cellX) : null;
-      if (date) onPickTime(date);
-      return;
-    }
-    // A keyboard-armed tool covers terminals that never forward modifier drags.
-    const tool = resolveChartToolKind(event.modifiers) ?? armedTool;
-    if (tool === "level" && levels?.onEdit && levelDomain) {
-      const ratios = pointerRatios(event);
-      if (!ratios) return;
-      const hit = hitTestLevel(projectedLevels, ratios.yRatio, levelGrabRatio(panel.height));
-      if (hit) {
-        onSelectLevel(hit.id);
-        if (hit.editable) dragRef.current = { kind: "level-move", id: hit.id };
-      } else {
-        const value = unprojectCompositeValue(ratios.yRatio, levelDomain);
-        if (value !== null) {
-          const id = nextLevelId();
-          levels.onEdit({ kind: "add", id, value: roundLevelValue(value, levelDomain) });
-          onSelectLevel(id);
-        }
-      }
-      updateCursor(event);
-      return;
-    }
-    if (tool) {
-      const ratios = pointerRatios(event);
-      if (!ratios) return;
-      // With a drawing tool in hand, grabbing an existing shape edits it
-      // instead of starting a new one on top of it.
-      const hit = isDrawingTool(tool)
-        ? hitTestDrawings(drawings, scene, panel, ratios, plotAspect)
-        : null;
-      if (hit) {
-        onSelectDrawing(hit.drawing.id);
-        dragRef.current = {
-          kind: "edit",
-          drawingId: hit.drawing.id,
-          pointIndex: hit.pointIndex,
-          lastXRatio: ratios.xRatio,
-          lastYRatio: ratios.yRatio,
-        };
-        updateCursor(event);
-        return;
-      }
-      const started: ChartToolDrag = {
-        kind: tool,
-        startXRatio: ratios.xRatio,
-        startYRatio: ratios.yRatio,
-        endXRatio: ratios.xRatio,
-        endYRatio: ratios.yRatio,
-        path: [{ xRatio: ratios.xRatio, yRatio: ratios.yRatio }],
-      };
-      if (isDrawingTool(tool)) onSelectDrawing(null);
-      dragRef.current = { ...started, path: [...started.path] };
-      setToolDrag(started);
-      updateCursor(event);
-      return;
-    }
-    if (!updateCursor(event)) return;
-    dragRef.current = startPanGesture(
-      frame,
-      viewport,
-      plotWidth,
-      getGlobalMouseX(event, renderer),
-      plotSpanFactor,
-    );
-  }, [
-    armedTool,
-    drawings,
-    frame,
-    levelDomain,
-    levels,
-    onActivate,
-    onPickTime,
-    onPointerPress,
-    onSelectDrawing,
-    onSelectLevel,
-    panel,
-    plotAspect,
-    projectedLevels,
-    plotSpanFactor,
-    plotWidth,
-    pointerRatios,
-    renderer,
-    scene,
-    updateCursor,
-    viewport,
-  ]);
-  const pressCursor = useCallback((event: ChartMouseEvent) => {
-    onActivate?.();
-    updateCursor(event);
-  }, [onActivate, updateCursor]);
-  const dragViewport = useCallback((event: ChartMouseEvent) => {
-    const drag = dragRef.current;
-    if (!drag) return;
-    consumeChartMouseEvent(event);
-    updateCursor(event);
-    if (drag.kind === "level-move") {
-      const ratios = pointerRatios(event);
-      const value = ratios && levelDomain ? unprojectCompositeValue(ratios.yRatio, levelDomain) : null;
-      if (value !== null && levelDomain) setLevelDraft({ id: drag.id, value: roundLevelValue(value, levelDomain) });
-      return;
-    }
-    if (drag.kind === "edit") {
-      const ratios = pointerRatios(event);
-      if (!ratios) return;
-      // Read the deltas before advancing the ref: the state updater runs later,
-      // and a mutable capture would hand it a zero move every time.
-      const deltaXRatio = ratios.xRatio - drag.lastXRatio;
-      const deltaYRatio = ratios.yRatio - drag.lastYRatio;
-      const { drawingId, pointIndex } = drag;
-      drag.lastXRatio = ratios.xRatio;
-      drag.lastYRatio = ratios.yRatio;
-      onEditDrawing(
-        drawingId,
-        (drawing) => shiftDrawing(drawing, scene, panel, deltaXRatio, deltaYRatio, pointIndex),
-      );
-      return;
-    }
-    if (drag.kind !== "pan") {
-      const ratios = pointerRatios(event);
-      if (!ratios) return;
-      drag.endXRatio = ratios.xRatio;
-      drag.endYRatio = ratios.yRatio;
-      if (drag.kind === "pencil") drag.path.push({ xRatio: ratios.xRatio, yRatio: ratios.yRatio });
-      setToolDrag({ ...drag, path: [...drag.path] });
-      return;
-    }
-    const globalX = getGlobalMouseX(event, renderer);
-    if (drag.frame !== frame) {
-      // Data refreshed mid-drag. The new frame maps positions differently, so
-      // continue from where the plot is now instead of replaying the drag.
-      Object.assign(drag, startPanGesture(frame, viewport, plotWidth, globalX, plotSpanFactor));
-    }
-    onPanViewport(
-      (globalX - drag.startGlobalX) * drag.positionsPerCell,
-      { frame: drag.frame, from: drag.startViewport },
-    );
-  }, [
-    frame,
-    levelDomain,
-    onEditDrawing,
-    onPanViewport,
-    panel,
-    plotSpanFactor,
-    plotWidth,
-    pointerRatios,
-    renderer,
-    scene,
-    updateCursor,
-    viewport,
-  ]);
-  const finishToolDrag = useCallback(() => {
-    const drag = dragRef.current;
-    if (!drag || drag.kind === "pan") return;
-    dragRef.current = null;
-    if (drag.kind === "edit") return;
-    if (drag.kind === "level-move") {
-      const draft = levelDraftRef.current;
-      setLevelDraft(null);
-      if (draft) levels?.onEdit?.({ kind: "move", id: draft.id, value: draft.value });
-      return;
-    }
-    setToolDrag(null);
-    if (isDrawingTool(drag.kind)) {
-      const drawing = resolveDrawingFromDrag(scene, panel, drag, drawColor, nextDrawingId());
-      if (drawing) onDraw(drawing);
-      return;
-    }
-    if (drag.kind !== "zoom") return;
-    const range = resolveZoomBoxRange(scene, drag, frame.minimumSpanMs);
-    if (range) onSetViewport(range);
-  }, [drawColor, frame.minimumSpanMs, levels, onDraw, onSetViewport, panel, scene]);
-  const resetDrag = useCallback(() => {
-    if (dragRef.current?.kind === "pan") {
-      dragRef.current = null;
-      return;
-    }
-    finishToolDrag();
-  }, [finishToolDrag]);
-  const handleMouseMove = useCallback((event: ChartMouseEvent) => {
-    // A release over a neighbouring pane never reaches this surface, so treat a
-    // plain move, which only fires with no button held, as the missing release.
-    finishToolDrag();
-    updateCursor(event);
-  }, [finishToolDrag, updateCursor]);
-  // Trackpads fire wheel events faster than the plot can paint, so one frame
-  // absorbs every event that arrived since the last one.
-  const pendingWheelRef = useRef<PendingWheel | null>(null);
-  const wheelFrameRef = useRef<number | null>(null);
-  const latestWheelStateRef = useRef({ frame, viewport, onPanViewport, onZoomViewport, plotSpanFactor });
-  latestWheelStateRef.current = { frame, viewport, onPanViewport, onZoomViewport, plotSpanFactor };
-  const flushWheel = useCallback(() => {
-    wheelFrameRef.current = null;
-    const pending = pendingWheelRef.current;
-    pendingWheelRef.current = null;
-    if (!pending) return;
-    const latest = latestWheelStateRef.current;
-    if (pending.panRatio !== 0) {
-      const positions = compositeViewportPositions(latest.frame, latest.viewport);
-      const span = positions ? Math.max(positions.end - positions.start, Number.EPSILON) : 0;
-      latest.onPanViewport(pending.panRatio * span * latest.plotSpanFactor);
-    }
-    if (pending.zoomLog !== 0) {
-      latest.onZoomViewport(Math.exp(pending.zoomLog), pending.anchorRatio);
-    }
-  }, []);
-  useEffect(() => () => {
-    pendingWheelRef.current = null;
-    if (wheelFrameRef.current !== null) {
-      webFrame.cancelAnimationFrame?.(wheelFrameRef.current);
-      wheelFrameRef.current = null;
-    }
-  }, []);
-  const panFromWheel = useCallback((event: ChartMouseEvent) => {
-    const scroll = event.scroll;
-    if (!scroll) return;
-    onActivate?.();
-    consumeChartMouseEvent(event);
-    const pointerTarget = plotRef.current as unknown as Parameters<typeof getLocalPlotPointer>[1];
-    const pointer = getLocalPlotPointer(event, pointerTarget, renderer);
-    updateCursor(event);
-    const pending = pendingWheelRef.current ?? { panRatio: 0, zoomLog: 0, anchorRatio: 0.5 };
-    if (event.modifiers.ctrl && pointer && isVerticalWheelDirection(scroll.direction)) {
-      pending.zoomLog += Math.log(resolveCompositeWheelZoom(scroll));
-      // The anchor is a fraction of the viewport, so a pointer over the empty
-      // right offset anchors on the newest observation instead of past it.
-      pending.anchorRatio = Math.min(
-        1,
-        pointer.cellX / Math.max(plotWidth - 1, 1) * plotSpanFactor,
-      );
-    } else {
-      pending.panRatio += resolveCompositeWheelPan(scroll, plotWidth * cellWidthPx);
-    }
-    pendingWheelRef.current = pending;
-    if (!isDesktopWeb || typeof webFrame.requestAnimationFrame !== "function") {
-      flushWheel();
-      return;
-    }
-    if (wheelFrameRef.current === null) {
-      wheelFrameRef.current = webFrame.requestAnimationFrame(flushWheel);
-    }
-  }, [
-    cellWidthPx,
-    flushWheel,
-    isDesktopWeb,
-    onActivate,
-    plotSpanFactor,
-    plotWidth,
-    renderer,
-    updateCursor,
-  ]);
-
-  return (
-    <Box
-      flexDirection="row"
-      height={panel.height}
-      width={plotWidth + leftAxisWidth + rightAxisWidth + axisGap * ((leftAxisWidth ? 1 : 0) + (rightAxisWidth ? 1 : 0))}
-      position="relative"
-    >
-      {measureReadout ? (
-        <Box
-          position="absolute"
-          left={measureReadout.left}
-          top={measureReadout.top}
-          width={measureReadout.width}
-          height={1}
-          zIndex={25}
-          backgroundColor={colors.background}
-          style={isDesktopWeb
-            ? {
-              width: "auto",
-              paddingInline: 4,
-              borderRadius: 4,
-              backgroundColor: `color-mix(in srgb, ${colors.background} 82%, transparent)`,
-            }
-            : undefined}
-          data-gloom-role="composite-chart-measure"
-        >
-          <Text fg={measureReadout.color}>{measureReadout.text}</Text>
-        </Box>
-      ) : null}
-      {leftAxisWidth > 0 ? (
-        <>
-          <PriceAxisLabels
-            axisLabels={leftAxisLabels}
-            axisTicks={leftAxisTicks}
-            axisWidth={leftAxisWidth}
-            axisSectionWidth={leftAxisWidth}
-            side="left"
-            height={panel.height}
-            cursorRow={cursorRow}
-            cursorPixelY={cursorPixelY}
-            cursorLabel={leftCursorLabel}
-            cursorColor={colors.crosshair}
-            cursorBackgroundColor={colors.background}
-            axisColor={colors.textDim}
-            extraMarkers={leftAxisMarkers}
-          />
-          <Box width={axisGap} />
-        </>
-      ) : null}
-      <ChartSurface
-        ref={plotRef}
-        width={plotWidth}
-        height={panel.height}
-        flexDirection="column"
-        bitmaps={bitmapLayers}
-        crosshair={crosshair}
-        vectors={vectors}
-        onMouseMove={interactive ? handleMouseMove : undefined}
-        onMouseDown={interactive ? navigable ? startDrag : pressCursor : undefined}
-        onMouseDrag={interactive && navigable ? dragViewport : undefined}
-        onMouseUp={interactive && navigable ? resetDrag : undefined}
-        onMouseDragEnd={interactive && navigable ? resetDrag : undefined}
-        onMouseScroll={interactive && navigable ? panFromWheel : undefined}
-        onMouseOut={interactive ? clearCursor : undefined}
-        cursor={interactive ? toolDrag || !navigable || onPickTime ? "crosshair" : "grab" : undefined}
-        data-gloom-interactive={interactive ? "true" : undefined}
-        data-gloom-role={COMPOSITE_PANEL_ROLE}
-        data-gloom-remote-kind={remoteKind}
-        data-gloom-label={panel.label ?? panel.id}
-      >
-        {textLines.map((line, index) => <Text key={index} fg={colors.text}>{line}</Text>)}
-      </ChartSurface>
-      {rightAxisWidth > 0 ? (
-        <>
-          <Box width={axisGap} />
-          <PriceAxisLabels
-            axisLabels={rightAxisLabels}
-            axisTicks={rightAxisTicks}
-            axisWidth={rightAxisWidth}
-            axisSectionWidth={rightAxisWidth}
-            side="right"
-            height={panel.height}
-            cursorRow={cursorRow}
-            cursorPixelY={cursorPixelY}
-            cursorLabel={rightCursorLabel}
-            cursorColor={colors.crosshair}
-            cursorBackgroundColor={colors.background}
-            axisColor={colors.textDim}
-            extraMarkers={rightAxisMarkers}
-          />
-        </>
-      ) : null}
-    </Box>
-  );
-}
-
-function legendValue(
-  series: ResolvedSeries,
-  value: number | null,
-  formatValue: CompositeChartProps["formatValue"],
-  scene: CompositeChartScene | null,
-): string {
-  if (value === null) return "—";
-  return formatValue ? formatValue(value, series) : formatCompositeSeriesValue(value, series, axisPriceReference(scene, series));
-}
-
-/** The reference the axis holding a series keeps for its asset, so an average
- * of the price shows the price's decimals rather than its own float tail. A
- * series far from that price (another coin on a shared axis) keeps its own. */
-function axisPriceReference(scene: CompositeChartScene | null, series: ResolvedSeries): number | undefined {
-  const own = seriesPriceReference(series);
-  for (const panel of scene?.panels ?? []) {
-    for (const domain of [panel.axes.left, panel.axes.right]) {
-      if (!domain?.seriesIds.includes(series.id)) continue;
-      const shared = domain.priceReferences?.[series.priceAssetCategory ?? ""];
-      if (shared === undefined || own === undefined) return own ?? shared;
-      const ratio = Math.abs(own / shared);
-      return ratio > 0.1 && ratio < 10 ? shared : own;
-    }
-  }
-  return own;
-}
-
-const LISTED_TICKER_PATTERN = /(^|[\s(])([A-Z0-9^][A-Z0-9.^=/-]*):([A-Z0-9]{2,})(?=$|[\s),])/g;
-
-/** `Volume AAPL:XNAS Price` → `Volume AAPL Price`, for a legend name that must shorten. */
-function withoutListingExchange(label: string): string {
-  return label.replace(LISTED_TICKER_PATTERN, (match, lead: string, symbol: string, exchange: string) => (
-    CANONICAL_EXCHANGE_ALIASES[exchange] ? `${lead}${symbol}` : match
-  ));
-}
-
-function CompositeLegend({
-  scene,
-  series,
-  visibleSeriesIds,
-  width,
-  accessory,
-  accessoryWidth,
-  formatValue,
-  showLatestChangePercent,
-  onActivate,
-  onToggleSeries,
-  isSeriesToggleable,
-  keyboardIndex,
-}: {
-  scene: CompositeChartScene | null;
-  series: ResolvedSeries[];
-  visibleSeriesIds: ReadonlySet<string>;
-  width: number;
-  accessory: CompositeChartProps["legendAccessory"];
-  accessoryWidth: CompositeChartProps["legendAccessoryWidth"];
-  formatValue: CompositeChartProps["formatValue"];
-  showLatestChangePercent: CompositeChartProps["showLatestChangePercent"];
-  onActivate: CompositeChartProps["onActivate"];
-  onToggleSeries: CompositeChartProps["onToggleSeries"];
-  isSeriesToggleable: CompositeChartProps["isSeriesToggleable"];
-  keyboardIndex?: number | null;
-}) {
-  const isDesktopWeb = useUiCapabilities().nativePaneChrome === true;
-  const scrollRef = useRef<ScrollBoxRenderable | null>(null);
-  const cursorValueById = new Map(
-    scene?.cursorValues.map((entry) => [entry.seriesId, entry] as const) ?? [],
-  );
-  const entries = series.map((entry) => {
-    const toggleable = !!onToggleSeries && (isSeriesToggleable?.(entry) ?? true);
-    const cursorValue = cursorValueById.get(entry.id);
-    const changeText = showLatestChangePercent
-        && !scene?.cursorDate
-        && typeof entry.latestChangePercent === "number"
-        && Number.isFinite(entry.latestChangePercent)
-      ? ` ${formatPercentRaw(entry.latestChangePercent)}`
-      : "";
-    const valueText = entry.points.length === 0
-      ? entry.hidden ? "" : "no data"
-      : `${legendValue(
-        entry,
-        cursorValue?.value ?? null,
-        formatValue,
-        scene,
-      )}${changeText}`;
-    const fullText = [entry.label, valueText].filter(Boolean).join(" ");
-    const details = formatCompositePointDetails(cursorValue?.point);
-    const exactTotal = entry.unitGroup.split(":")[0] === "currency-total"
-      && cursorValue?.value != null && Number.isFinite(cursorValue.value)
-      ? `Value ${cursorValue.value} ${entry.unit}` : "";
-    const tooltip = [fullText, exactTotal, details].filter(Boolean).join(" · ");
-    const label = entry.label;
-    const compactLabel = withoutListingExchange(label);
-    const labelWidth = displayWidth(label);
-    const text = [label, valueText].filter(Boolean).join(" ");
-    return {
-      entry,
-      label,
-      compactLabel,
-      text,
-      width: Math.max(1, displayWidth(text)) + 2,
-      labelWidth,
-      valueText,
-      toggleable,
-      tooltip,
-    };
-  });
-  type LegendEntry = (typeof entries)[number];
-  const setEntryLabel = (target: LegendEntry, label: string, labelWidth: number) => {
-    target.label = label;
-    target.labelWidth = labelWidth;
-    target.text = [truncateToDisplayWidth(label, labelWidth), target.valueText].filter(Boolean).join(" ");
-    target.width = Math.max(1, displayWidth(target.text)) + 2;
-  };
-  const measureSeriesWidth = () => entries.reduce(
-    (total, entry, index) => total + entry.width + (index > 0 ? 1 : 0),
-    0,
-  );
-  // One cell in from the pane border, so the first marker and the legend text
-  // line up with the query bar and tables above and below the chart.
-  const inset = width > 1 ? 1 : 0;
-  const innerWidth = Math.max(0, width - inset);
-  const resolvedAccessoryWidth = accessory
-    ? Math.max(1, Math.min(innerWidth, Math.floor(accessoryWidth ?? 14)))
-    : 0;
-  const reservedAccessoryGap = accessory && innerWidth > resolvedAccessoryWidth ? 1 : 0;
-  // The cursor date lives on the time axis, where the crosshair points at it.
-  const widthBeforeAccessory = Math.max(0, innerWidth - resolvedAccessoryWidth - reservedAccessoryGap);
-  // Names get the room the row has. When it overflows, the widest name
-  // shortens first: its listing exchange goes before any of the name is cut.
-  // The value (including its sign/unit) always stays intact. If the row cannot
-  // fit even with every name at a readable fragment, it keeps the old 30-cell
-  // entries and scrolls.
-  const minimumSeriesWidth = entries.reduce((total, entry, index) => {
-    const text = [truncateToDisplayWidth(entry.compactLabel, Math.min(8, displayWidth(entry.compactLabel))), entry.valueText]
-      .filter(Boolean).join(" ");
-    return total + Math.max(1, displayWidth(text)) + 2 + (index > 0 ? 1 : 0);
-  }, 0);
-  if (minimumSeriesWidth <= widthBeforeAccessory) {
-    while (measureSeriesWidth() > widthBeforeAccessory) {
-      const shrinkable = entries
-        .filter((entry) => entry.label !== entry.compactLabel || entry.labelWidth > 8)
-        .sort((left, right) => right.labelWidth - left.labelWidth)[0];
-      if (!shrinkable) break;
-      if (shrinkable.label !== shrinkable.compactLabel) {
-        setEntryLabel(shrinkable, shrinkable.compactLabel, Math.min(shrinkable.labelWidth, displayWidth(shrinkable.compactLabel)));
-      } else {
-        setEntryLabel(shrinkable, shrinkable.label, shrinkable.labelWidth - 1);
-      }
-    }
-  } else {
-    for (const entry of entries) {
-      const budget = Math.max(0, 30 - (entry.valueText ? displayWidth(entry.valueText) + 1 : 0));
-      if (entry.labelWidth > budget) setEntryLabel(entry, entry.compactLabel, budget);
-    }
-  }
-  const desiredSeriesWidth = measureSeriesWidth();
-  const seriesWidth = Math.min(desiredSeriesWidth, widthBeforeAccessory);
-  const accessorySpacerWidth = accessory
-    ? Math.max(reservedAccessoryGap, innerWidth - seriesWidth - resolvedAccessoryWidth)
-    : 0;
-  const keyboardEntryStart = keyboardIndex === null || keyboardIndex === undefined
-    ? null
-    : entries.slice(0, keyboardIndex).reduce(
-      (total, entry, index) => total + entry.width + (index > 0 ? 1 : 0),
-      0,
-    ) + (keyboardIndex > 0 ? 1 : 0);
-  const keyboardEntryEnd = keyboardEntryStart === null
-    ? null
-    : keyboardEntryStart + (entries[keyboardIndex!]?.width ?? 0);
-
-  useEffect(() => {
-    if (keyboardEntryStart === null || keyboardEntryEnd === null) return;
-    const scrollBox = scrollRef.current;
-    const viewportWidth = scrollBox?.viewport?.width || scrollBox?.width || seriesWidth;
-    if (!scrollBox || viewportWidth <= 0) return;
-    const currentLeft = scrollBox.scrollLeft ?? 0;
-    const nextLeft = keyboardEntryStart < currentLeft
-      ? keyboardEntryStart
-      : keyboardEntryEnd > currentLeft + viewportWidth
-        ? keyboardEntryEnd - viewportWidth
-        : currentLeft;
-    if (nextLeft === currentLeft) return;
-    scrollBox.scrollLeft = nextLeft;
-    scrollBox.scrollTo({ x: nextLeft, y: scrollBox.scrollTop });
-  }, [keyboardEntryEnd, keyboardEntryStart, seriesWidth]);
-  const handleMouseScroll = (event?: {
-    preventDefault?: () => void;
-    stopPropagation?: () => void;
-    scroll?: { direction?: string; delta?: number };
-  }) => {
-    const direction = event?.scroll?.direction;
-    const scrollBox = scrollRef.current;
-    const viewportWidth = scrollBox?.viewport?.width || scrollBox?.width || 0;
-    const contentWidth = Math.max(desiredSeriesWidth, scrollBox?.scrollWidth ?? 0);
-    if (!direction || !scrollBox || viewportWidth <= 0 || contentWidth <= viewportWidth) return;
-
-    event.preventDefault?.();
-    event.stopPropagation?.();
-    const rawDelta = Math.abs(event.scroll?.delta ?? 1);
-    const deltaCells = Math.max(1, Math.round(rawDelta / LEGEND_WHEEL_DELTA_PER_CELL));
-    const directionSign = direction === "right" || direction === "down" ? 1 : -1;
-    const nextLeft = Math.max(
-      0,
-      Math.min(
-        contentWidth - viewportWidth,
-        (scrollBox.scrollLeft ?? 0) + directionSign * deltaCells,
-      ),
-    );
-    scrollBox.scrollLeft = nextLeft;
-    scrollBox.scrollTo({ x: nextLeft, y: scrollBox.scrollTop });
-  };
-  return (
-    <Box
-      flexDirection="row"
-      alignItems="flex-end"
-      width={width}
-      height={1}
-      paddingLeft={inset}
-      overflow="visible"
-      // Accessory dropdowns must escape above the sibling drawing toolbar.
-      zIndex={accessory ? 40 : 20}
-      data-gloom-role="composite-chart-legend"
-    >
-      {seriesWidth > 0 ? (
-        <ScrollBox
-          ref={scrollRef}
-          width={seriesWidth}
-          height={1}
-          flexShrink={0}
-          scrollX
-          focusable={false}
-          horizontalScrollbarOptions={{ visible: false }}
-          onMouseScroll={handleMouseScroll}
-          data-gloom-role="composite-chart-legend-scroll"
-        >
-          <Box flexDirection="row" width={desiredSeriesWidth} height={1} gap={1}>
-            {entries.map(({ entry, text, toggleable, tooltip, width: entryWidth }, index) => {
-              const entryVisible = visibleSeriesIds.has(entry.id);
-              return (
-              <Box
-                key={entry.id}
-                flexDirection="row"
-                alignItems="center"
-                width={entryWidth}
-                height={1}
-                flexShrink={0}
-                overflow="hidden"
-                backgroundColor={keyboardIndex === index ? themeColors.selected : undefined}
-                hoverBackgroundColor={toggleable ? hoverBg() : undefined}
-                onMouseDown={toggleable ? (event: ChartMouseEvent) => {
-                  onActivate?.();
-                  consumeChartMouseEvent(event);
-                  onToggleSeries?.(entry.id);
-                } : undefined}
-                cursor={toggleable ? "pointer" : undefined}
-                data-gloom-interactive={toggleable ? "true" : undefined}
-                data-gloom-role="composite-chart-legend-series"
-                data-gloom-label={`${toggleable
-                  ? `${entryVisible ? "Hide" : "Show"} `
-                  : ""}${tooltip}`}
-                data-visible={entryVisible ? "true" : "false"}
-                title={isDesktopWeb ? tooltip : undefined}
-              >
-                {isDesktopWeb ? (
-                  <Box
-                    flexShrink={0}
-                    style={{
-                      width: 8,
-                      height: 8,
-                      marginInlineEnd: 6,
-                      borderRadius: 999,
-                      border: `1px solid ${entry.color}`,
-                      backgroundColor: entryVisible ? entry.color : "transparent",
-                    }}
-                    data-gloom-role="composite-chart-legend-marker"
-                  />
-                ) : (
-                  <Text fg={entryVisible ? entry.color : themeColors.textMuted}>● </Text>
-                )}
-                {/* The filled/hollow marker already says whether a series is
-                    shown; the word only repeated it in every legend slot. */}
-                <Text fg={entryVisible ? themeColors.text : themeColors.textDim}>{text}</Text>
-              </Box>
-              );
-            })}
-          </Box>
-        </ScrollBox>
-      ) : null}
-      {accessorySpacerWidth > 0 ? (
-        <Box width={accessorySpacerWidth} flexShrink={0} />
-      ) : null}
-      {accessory ? (
-        <Box
-          position="relative"
-          width={resolvedAccessoryWidth}
-          flexShrink={0}
-          height={1}
-          overflow="visible"
-          zIndex={21}
-        >
-          {accessory}
-        </Box>
-      ) : null}
-    </Box>
-  );
-}
-
-const NO_DRAWINGS: readonly ChartDrawing[] = [];
 const NO_X_MARKERS: readonly CompositeChartXMarker[] = [];
-/** Coalesces a drag into one write instead of one per pointer move. */
-const DRAWING_PERSIST_DELAY_MS = 400;
-
-/**
- * Drawings are anchored to data, so they outlive the mounted chart: they ride
- * along with the pane settings that already carry the chart spec. Only mounted
- * inside a pane, so a standalone chart still renders without app state.
- */
-function ChartDrawingStore({
-  paneInstanceId,
-  drawings,
-  onRestore,
-}: {
-  paneInstanceId: string;
-  drawings: readonly ChartDrawing[];
-  onRestore: (drawings: readonly ChartDrawing[]) => void;
-}) {
-  const [stored, setStored] = usePaneSettingValue<readonly ChartDrawing[]>(
-    CHART_DRAWINGS_SETTING_KEY,
-    NO_DRAWINGS,
-    paneInstanceId,
-  );
-  const restoredRef = useRef<readonly ChartDrawing[] | null>(null);
-  if (restoredRef.current === null) {
-    restoredRef.current = parseChartDrawings(stored);
-  }
-
-  useEffect(() => {
-    const restored = restoredRef.current;
-    if (restored && restored.length > 0) onRestore(restored);
-    // Restoring once on mount: later writes must not scroll back in time.
-  }, []);
-
-  useEffect(() => {
-    const restored = restoredRef.current ?? NO_DRAWINGS;
-    if (drawings === restored) return;
-    if (drawings.length === 0 && restored.length === 0) return;
-    const timer = setTimeout(() => setStored(drawings), DRAWING_PERSIST_DELAY_MS);
-    return () => clearTimeout(timer);
-  }, [drawings, setStored]);
-
-  return null;
-}
-
 export function CompositeChart({
   series,
   legendSeries,
@@ -1986,16 +96,11 @@ export function CompositeChart({
   const isDesktopWeb = useUiCapabilities().nativePaneChrome === true;
   const showTextFallback = useShowChartTextFallback();
   const [internalCursorDate, setInternalCursorDate] = useState<Date | null>(null);
-  const [legendKeyboardIndex, setLegendKeyboardIndex] = useState<number | null>(null);
   const [toolSpan, setToolSpan] = useState<ChartToolSpan | null>(null);
-  const [armedTool, setArmedTool] = useState<ChartToolKind | null>(null);
-  const [keyboardPlacement, setKeyboardPlacement] = useState<KeyboardToolPlacement | null>(null);
-  const keyboardId = `composite-chart:${useId()}`;
   const paneInstanceId = useOptionalPaneInstanceId();
   const [drawings, setDrawings] = useState<readonly ChartDrawing[]>(NO_DRAWINGS);
   const [selectedDrawingId, setSelectedDrawingId] = useState<string | null>(null);
   const [drawColor, setDrawColor] = useState<string>(CHART_DRAWING_COLORS[0]);
-  const [selectedLevelId, setSelectedLevelId] = useState<string | null>(null);
   const addDrawing = useCallback((drawing: ChartDrawing) => {
     setDrawings((current) => [...current, drawing]);
     setSelectedDrawingId(drawing.id);
@@ -2050,126 +155,13 @@ export function CompositeChart({
     () => new Set(visibleSeries.map((entry) => entry.id)),
     [visibleSeries],
   );
-  useEffect(() => {
-    setLegendKeyboardIndex((current) => (
-      current === null || visibleLegendSeries.length === 0
-        ? null
-        : Math.min(current, visibleLegendSeries.length - 1)
-    ));
-  }, [visibleLegendSeries.length]);
-  const previousAuthoredViewportRef = useRef<CompositeViewportRange | null>(viewport ?? null);
-  const previousViewportResetKeyRef = useRef(viewportResetKey);
-  // The user owns this once they navigate. Data refreshes never rewrite it;
-  // only the authored viewport changing or an explicit reset clears it.
-  const [userViewport, setUserViewport] = useState<CompositeViewportRange | null>(null);
-  const hasViewportResetKey = viewportResetKey !== undefined
-    || previousViewportResetKeyRef.current !== undefined;
-  const authoredViewportChanged = hasViewportResetKey
-    ? previousViewportResetKeyRef.current !== viewportResetKey
-    : shouldResetCompositeViewport(
-        previousAuthoredViewportRef.current,
-        viewport ?? null,
-      );
-  const navigationFrame = useMemo(
-    () => buildCompositeNavigationFrame(visibleSeries, marketTimelineSeries, {
-      historicalPaddingRatio: allowHistoricalBackfill ? HISTORICAL_PADDING_RATIO : 0,
-    }),
-    [allowHistoricalBackfill, marketTimelineSeries, visibleSeries],
-  );
-  const authoredViewport = useMemo(() => {
-    // The requested dates own the axis, including gaps in a cached or partial
-    // response. Fitting them to available observations silently changes the
-    // research period. User pan/zoom gestures retain their navigation limits.
-    if (viewport && Number.isFinite(viewport.start.getTime())
-      && Number.isFinite(viewport.end.getTime()) && viewport.start <= viewport.end) return viewport;
-    return navigationFrame ? compositeNavigationDataViewport(navigationFrame) : null;
-  }, [navigationFrame, viewport]);
-  const activeUserViewport = authoredViewportChanged ? null : userViewport;
-  const effectiveViewport = activeUserViewport ?? authoredViewport;
-  const userViewportStart = activeUserViewport?.start.getTime() ?? null;
-  const userViewportEnd = activeUserViewport?.end.getTime() ?? null;
-  const lastReportedViewportRef = useRef<string | null>(null);
-  const viewportInteractionRef = useRef<"pan" | "reset" | "zoom">("reset");
-  useEffect(() => {
-    if (!onViewportChange) return;
-    const key = userViewportStart === null || userViewportEnd === null
-      ? "none"
-      : `${userViewportStart}:${userViewportEnd}`;
-    // 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(
-      userViewportStart === null || userViewportEnd === null
-        ? null
-        : { start: new Date(userViewportStart), end: new Date(userViewportEnd) },
-      viewportInteractionRef.current,
-    );
-  }, [onViewportChange, userViewportEnd, userViewportStart]);
-
-  useEffect(() => {
-    previousAuthoredViewportRef.current = viewport ?? null;
-    previousViewportResetKeyRef.current = viewportResetKey;
-    if (authoredViewportChanged && userViewport) {
-      viewportInteractionRef.current = "reset";
-      setUserViewport(null);
-    }
-  }, [authoredViewportChanged, userViewport, viewport, viewportResetKey]);
-
-  const navigate = useCallback((
-    kind: "pan" | "zoom",
-    compute: (base: CompositeViewportRange, frame: CompositeNavigationFrame) => CompositeViewportRange,
-    gesture?: { frame: CompositeNavigationFrame; from: CompositeViewportRange },
-  ) => {
-    const frame = gesture?.frame ?? navigationFrame;
-    if (!frame) return;
-    viewportInteractionRef.current = kind;
-    setUserViewport((current) => {
-      const base = gesture?.from ?? current ?? authoredViewport;
-      if (!base) return current;
-      const next = compute(base, frame);
-      // Once navigated, the window is the user's until they reset it, even if
-      // a gesture happens to land back on the authored range: the owner may
-      // echo a navigated range back as the authored one, and dropping to null
-      // there would reload the original range under the pointer.
-      return sameCompositeViewport(next, current ?? base) ? current : next;
-    });
-  }, [authoredViewport, navigationFrame]);
-  const panViewport = useCallback((
-    deltaPositions: number,
-    gesture?: { frame: CompositeNavigationFrame; from: CompositeViewportRange },
-  ) => {
-    navigate("pan", (base, frame) => panCompositeViewport(frame, base, deltaPositions), gesture);
-  }, [navigate]);
-  const panViewportByRatio = useCallback((shiftRatio: number) => {
-    if (!navigationFrame || !effectiveViewport) return;
-    const positions = compositeViewportPositions(navigationFrame, effectiveViewport);
-    if (!positions) return;
-    panViewport(shiftRatio * Math.max(positions.end - positions.start, Number.EPSILON));
-  }, [effectiveViewport, navigationFrame, panViewport]);
-  const zoomViewport = useCallback((zoomFactor: number, anchorRatio = 1) => {
-    navigate("zoom", (base, frame) => zoomCompositeViewport(frame, base, zoomFactor, anchorRatio));
-  }, [navigate]);
-  const setViewportRange = useCallback((range: CompositeViewportRange) => {
-    navigate("zoom", (_base, frame) => fitCompositeViewport(frame, range));
-  }, [navigate]);
-  const resetViewport = useCallback(() => {
-    viewportInteractionRef.current = "reset";
-    setUserViewport(null);
-  }, []);
-  // Sticky while armed: the toolbar chip shows which tool owns the drag, and a
-  // one-shot tool would blink off before the user could see it.
-  const armTool = useCallback((tool: ChartToolKind | null) => {
-    setArmedTool((current) => current === tool ? null : tool);
-    setKeyboardPlacement(null);
-    if (tool === null) setSelectedDrawingId(null);
-    if (tool !== "level") setSelectedLevelId(null);
-  }, []);
-  const cancelKeyboardPlacement = useCallback(() => setKeyboardPlacement(null), []);
+  const {
+    navigationFrame, activeUserViewport, effectiveViewport,
+    panViewport, panViewportByRatio, zoomViewport, setViewportRange, resetViewport,
+  } = useCompositeViewport({
+    viewport, viewportResetKey, visibleSeries, marketTimelineSeries,
+    allowHistoricalBackfill, onViewportChange,
+  });
   const legendRows = showLegend && (visibleSeries.length > 0 || legendAccessory)
     ? 1
     : 0;
@@ -2296,10 +288,66 @@ export function CompositeChart({
       )
       : null
   ), [baseScene, normalizedCursorTimestamp]);
+  const lastCursorTimestampRef = useRef<number | null>(normalizedCursorTimestamp);
+  const renderedCursorTimestampRef = useRef<number | null>(normalizedCursorTimestamp);
+  if (renderedCursorTimestampRef.current !== normalizedCursorTimestamp) {
+    renderedCursorTimestampRef.current = normalizedCursorTimestamp;
+    lastCursorTimestampRef.current = normalizedCursorTimestamp;
+  }
+
+  const updateCursor = useCallback((date: Date | null) => {
+    const timestamp = date?.getTime() ?? null;
+    const nextTimestamp = timestamp !== null && Number.isFinite(timestamp) ? timestamp : null;
+    if (lastCursorTimestampRef.current === nextTimestamp) return;
+    lastCursorTimestampRef.current = nextTimestamp;
+    if (cursorDate === undefined) setInternalCursorDate(date);
+    onCursorDateChange?.(date);
+  }, [cursorDate, onCursorDateChange]);
+
+  const {
+    armedTool,
+    armTool,
+    cancelKeyboardPlacement,
+    activateFromPointer,
+    legendKeyboardIndex,
+    levelHost,
+    levelsEditable,
+    selectedLevelId,
+    setSelectedLevelId,
+    keyboardToolDrag,
+  } = useCompositeChartKeyboard({
+    focused,
+    interactive,
+    navigable,
+    showLegend,
+    scene,
+    cursorDate,
+    updateCursor,
+    onActivate,
+    timePick,
+    levels,
+    visibleLegendSeries,
+    visibleSeriesIds,
+    onToggleSeries,
+    isSeriesToggleable,
+    navigationFrame,
+    activeUserViewport,
+    panViewportByRatio,
+    zoomViewport,
+    setViewportRange,
+    resetViewport,
+    drawings,
+    selectedDrawingId,
+    setSelectedDrawingId,
+    drawColor,
+    addDrawing,
+    removeDrawing,
+    pickDrawColor,
+  });
   const handleEmptyMouseScroll = useCallback((event: ChartMouseEvent) => {
     const scroll = event.scroll;
     if (!interactive || !navigationFrame || !scroll) return;
-    onActivate?.();
+    activateFromPointer();
     consumeChartMouseEvent(event);
     if (event.modifiers.ctrl && isVerticalWheelDirection(scroll.direction)) {
       const factor = resolveCompositeWheelZoom(scroll);
@@ -2312,511 +360,15 @@ export function CompositeChart({
     }
     panViewportByRatio(resolveCompositeWheelPan(scroll, plotWidth * cellWidthPx));
   }, [
+    activateFromPointer,
     cellWidthPx,
     interactive,
     navigationFrame,
-    onActivate,
     panViewportByRatio,
     plotWidth,
     resetViewport,
     zoomViewport,
   ]);
-  const levelHost = useMemo(
-    () => scene && levels ? levelPanel(scene, levels.seriesId) : null,
-    [levels, scene],
-  );
-  const levelItems = levels?.items ?? [];
-  const levelsEditable = !!levels?.onEdit && !!levelHost;
-  const selectedLevel = levelItems.find((level) => level.id === selectedLevelId) ?? null;
-  useEffect(() => {
-    if (selectedLevelId && !selectedLevel) setSelectedLevelId(null);
-  }, [selectedLevel, selectedLevelId]);
-  const keyboardCursorDateRef = useRef<Date | null>(scene?.cursorDate ?? null);
-  keyboardCursorDateRef.current = scene?.cursorDate ?? null;
-  const lastCursorTimestampRef = useRef<number | null>(normalizedCursorTimestamp);
-  const renderedCursorTimestampRef = useRef<number | null>(normalizedCursorTimestamp);
-  if (renderedCursorTimestampRef.current !== normalizedCursorTimestamp) {
-    renderedCursorTimestampRef.current = normalizedCursorTimestamp;
-    lastCursorTimestampRef.current = normalizedCursorTimestamp;
-  }
-
-  const updateCursor = useCallback((date: Date | null) => {
-    const timestamp = date?.getTime() ?? null;
-    const nextTimestamp = timestamp !== null && Number.isFinite(timestamp) ? timestamp : null;
-    if (lastCursorTimestampRef.current === nextTimestamp) return;
-    lastCursorTimestampRef.current = nextTimestamp;
-    if (cursorDate === undefined) setInternalCursorDate(date);
-    onCursorDateChange?.(date);
-  }, [cursorDate, onCursorDateChange]);
-
-  // The cursor keys belong to every focused chart; pan, zoom, the tools and
-  // their keys only to one that navigates.
-  const arrowsClaimed = usePaneArrowsClaimed();
-  const keyboardActive = focused && interactive;
-  const toolsActive = keyboardActive && navigable;
-  useEffect(() => {
-    if (!toolsActive) setKeyboardPlacement(null);
-  }, [toolsActive]);
-  const legendKeysActive = keyboardActive && showLegend && visibleLegendSeries.length > 0;
-  const legendEntry = legendKeyboardIndex === null ? undefined : visibleLegendSeries[legendKeyboardIndex];
-  const legendEntryToggleable = !!legendEntry && !!onToggleSeries && (isSeriesToggleable?.(legendEntry) ?? true);
-  const anyLegendToggleable = legendKeysActive && !!onToggleSeries
-    && visibleLegendSeries.some((entry) => isSeriesToggleable?.(entry) ?? true);
-  // With a drawing tool in hand, [ and ] step through the drawings instead of
-  // the legend, the way a click with that tool picks one.
-  const drawingKeysActive = toolsActive && isDrawingTool(armedTool) && drawings.length > 0 && !keyboardPlacement;
-  // Backspace only deletes what the user is working on; otherwise it is the
-  // pane's back key.
-  const canDeleteDrawing = toolsActive && drawings.length > 0 && (!!selectedDrawingId || isDrawingTool(armedTool));
-  // An owner that holds the cursor decides when it goes, so Esc stays the pane's.
-  const clearableCursor = !!scene?.cursorDate && cursorDate === undefined;
-
-  const placementPanel = (panelId: string) => scene?.panels.find((panel) => panel.id === panelId) ?? null;
-  const startKeyboardPlacement = () => {
-    if (!scene || !armedTool) return;
-    const panel = scene.panels.find((entry) => resolveMeasureAxisDomain(entry) !== null);
-    const domain = panel ? resolveMeasureAxisDomain(panel) : null;
-    const date = keyboardCursorDateRef.current ?? resolveAdjacentCompositeCursorDate(scene, null, -1);
-    if (!panel || !domain || !date) return;
-    const time = date.getTime();
-    const value = resolveMeasureValueAt(panel, time) ?? unprojectCompositeValue(0.5, domain);
-    if (value === null) return;
-    const anchor = { time, value };
-    onActivate?.();
-    if (isDrawingTool(armedTool)) setSelectedDrawingId(null);
-    setKeyboardPlacement({ kind: armedTool, panelId: panel.id, start: anchor, end: anchor, path: [anchor], freeValue: false });
-    keyboardCursorDateRef.current = date;
-    updateCursor(date);
-  };
-  /** Moves the end to a new bar, following the series until Up or Down set a level. */
-  const moveKeyboardPlacement = (
-    placement: KeyboardToolPlacement,
-    move: { time: number } | { level: 1 | -1 },
-  ): KeyboardToolPlacement | null => {
-    const panel = placementPanel(placement.panelId);
-    const domain = panel ? resolveMeasureAxisDomain(panel) : null;
-    if (!panel || !domain) return null;
-    let { time, value } = placement.end;
-    let freeValue = placement.freeValue;
-    if ("level" in move) {
-      // Half a row per press: fine enough to reach a wick, quick enough to cross the plot.
-      const step = 1 / (2 * Math.max(panel.height - 1, 1));
-      const ratio = projectCompositeValue(value, domain) ?? 0.5;
-      value = unprojectCompositeValue(Math.max(0, Math.min(1, ratio - move.level * step)), domain) ?? value;
-      freeValue = true;
-    } else {
-      time = move.time;
-      if (!freeValue) value = resolveMeasureValueAt(panel, time) ?? value;
-    }
-    const end = { time, value };
-    return { ...placement, end, path: [...placement.path, end], freeValue };
-  };
-  const finishKeyboardPlacement = () => {
-    const placement = keyboardPlacement;
-    setKeyboardPlacement(null);
-    // A placement that never left its anchor spans nothing, like a click.
-    if (!placement || placement.start.time === placement.end.time) return;
-    if (placement.kind === "zoom") {
-      if (!navigationFrame) return;
-      const range = resolveZoomTimeRange(placement.start.time, placement.end.time, navigationFrame.minimumSpanMs);
-      if (range) setViewportRange(range);
-      return;
-    }
-    if (!isDrawingTool(placement.kind)) return;
-    const points = placement.kind === "pencil"
-      ? placement.path.filter((point, index, path) => (
-        index === 0 || point.time !== path[index - 1]!.time || point.value !== path[index - 1]!.value
-      ))
-      : [placement.start, placement.end];
-    if (points.length < 2) return;
-    addDrawing({ id: nextDrawingId(), panelId: placement.panelId, points, color: drawColor });
-  };
-  const stepLegend = (direction: -1 | 1) => {
-    onActivate?.();
-    setLegendKeyboardIndex((current) => (
-      current === null
-        ? direction > 0 ? 0 : visibleLegendSeries.length - 1
-        : (current + direction + visibleLegendSeries.length) % visibleLegendSeries.length
-    ));
-  };
-  const toggleLegendEntry = () => {
-    if (!legendEntry || !legendEntryToggleable) return;
-    onActivate?.();
-    onToggleSeries?.(legendEntry.id);
-  };
-  /** A level at the keyboard cursor's price, or the last price without a cursor. */
-  const addLevelAtCursor = () => {
-    if (!levels?.onEdit || !levelHost || !scene) return;
-    const { panel, domain } = levelHost;
-    const date = keyboardCursorDateRef.current ?? scene.dates.at(-1) ?? null;
-    // The levels' own series, not whichever one the panel lists first.
-    const pricePanel = { ...panel, series: panel.series.filter((entry) => entry.source.id === levels.seriesId) };
-    const value = (date ? resolveMeasureValueAt(pricePanel, date.getTime()) : null)
-      ?? (panel.lastPrice?.seriesId === levels.seriesId ? panel.lastPrice.value : null)
-      ?? unprojectCompositeValue(0.5, domain);
-    if (value === null) return;
-    const rounded = roundLevelValue(value, domain);
-    onActivate?.();
-    // Enter again at the same cursor picks the level already there.
-    const existing = levelItems.find((level) => level.editable && level.value === rounded);
-    if (existing) {
-      setSelectedLevelId(existing.id);
-      return;
-    }
-    const id = nextLevelId();
-    levels.onEdit({ kind: "add", id, value: rounded });
-    setSelectedLevelId(id);
-  };
-  /** Half a row per press, like a keyboard-placed tool's end. */
-  const nudgeLevel = (level: CompositeChartLevel, direction: 1 | -1) => {
-    if (!levels?.onEdit || !levelHost) return;
-    const { panel, domain } = levelHost;
-    const ratio = projectCompositeValue(level.value, domain);
-    if (ratio === null) return;
-    const step = 1 / (2 * Math.max(panel.height - 1, 1));
-    const value = unprojectCompositeValue(Math.max(0, Math.min(1, ratio - direction * step)), domain);
-    if (value !== null) levels.onEdit({ kind: "move", id: level.id, value: roundLevelValue(value, domain) });
-  };
-  const stepLevel = (direction: -1 | 1) => {
-    // Top to bottom, the order they read in on the plot.
-    const ordered = [...levelItems].sort((left, right) => right.value - left.value);
-    if (ordered.length === 0) return;
-    const index = ordered.findIndex((level) => level.id === selectedLevelId);
-    const next = index < 0
-      ? direction > 0 ? 0 : ordered.length - 1
-      : (index + direction + ordered.length) % ordered.length;
-    setSelectedLevelId(ordered[next]!.id);
-  };
-  const removeSelectedLevel = () => {
-    if (!selectedLevel?.editable) return;
-    levels?.onEdit?.({ kind: "remove", id: selectedLevel.id });
-    setSelectedLevelId(null);
-  };
-  const runLevelAction = () => {
-    if (selectedLevel?.actionable) levels?.action?.run(selectedLevel);
-  };
-  const stepDrawing = (direction: -1 | 1) => {
-    if (drawings.length === 0) return;
-    const index = drawings.findIndex((drawing) => drawing.id === selectedDrawingId);
-    const next = index < 0
-      ? direction > 0 ? 0 : drawings.length - 1
-      : (index + direction + drawings.length) % drawings.length;
-    setSelectedDrawingId(drawings[next]!.id);
-  };
-  const keyboardToolDrag = useMemo<KeyboardToolDrag | null>(() => {
-    if (!keyboardPlacement || !scene) return null;
-    const panel = scene.panels.find((entry) => entry.id === keyboardPlacement.panelId);
-    const domain = panel ? resolveMeasureAxisDomain(panel) : null;
-    if (!panel || !domain) return null;
-    const project = (point: ChartDrawingPoint) => {
-      const xRatio = projectCompositeTimestamp(scene.timeScale, point.time)?.ratio;
-      const yRatio = projectCompositeValue(point.value, domain);
-      return typeof xRatio === "number" && yRatio !== null ? { xRatio, yRatio } : null;
-    };
-    const start = project(keyboardPlacement.start);
-    const end = project(keyboardPlacement.end);
-    if (!start || !end) return null;
-    return {
-      panelId: panel.id,
-      start: keyboardPlacement.start,
-      end: keyboardPlacement.end,
-      drag: {
-        kind: keyboardPlacement.kind,
-        startXRatio: start.xRatio,
-        startYRatio: start.yRatio,
-        endXRatio: end.xRatio,
-        endYRatio: end.yRatio,
-        path: keyboardPlacement.path.flatMap((point) => {
-          const projected = project(point);
-          return projected ? [projected] : [];
-        }),
-      },
-    };
-  }, [keyboardPlacement, scene]);
-
-  // Scoped, so the chart sees its keys before an older pane or stack handler
-  // (Backspace back, Esc close) whichever mounted first; a dialog opened over
-  // it is a newer scope and still comes first.
-  useShortcut((event) => {
-    if (!keyboardActive) return;
-    const consume = () => {
-      event.preventDefault();
-      event.stopPropagation();
-    };
-    if (timePick && scene && isPlainKey(event, "return", "enter", "escape")) {
-      consume();
-      if (event.name === "escape") timePick.onCancel();
-      else chartActionsRef.current.pick();
-      return;
-    }
-    const levelKeys = toolsActive && armedTool === "level" && levelsEditable && !keyboardPlacement;
-    if (levelKeys && isPlainKey(event, "return", "enter")) {
-      consume();
-      addLevelAtCursor();
-      return;
-    }
-    if (levelKeys && selectedLevel?.editable && isPlainKey(event, "up", "down")) {
-      consume();
-      nudgeLevel(selectedLevel, event.name === "up" ? 1 : -1);
-      return;
-    }
-    if (levelKeys && levelItems.length > 0 && isPlainKey(event, "[", "]")) {
-      consume();
-      stepLevel(event.name === "[" ? -1 : 1);
-      return;
-    }
-    if (toolsActive && selectedLevel?.editable && levelsEditable && isPlainKey(event, "backspace")) {
-      consume();
-      removeSelectedLevel();
-      return;
-    }
-    // Taken even once the level has its alert, which then says so, so a quick
-    // second press never falls through to the plain `a` pan.
-    if (toolsActive && selectedLevel && levels?.action && isShiftedLetter(event, "a")) {
-      consume();
-      levels.action.run(selectedLevel);
-      return;
-    }
-    if (toolsActive && armedTool && isPlainKey(event, "return", "enter") && scene) {
-      consume();
-      if (keyboardPlacement) finishKeyboardPlacement();
-      else startKeyboardPlacement();
-      return;
-    }
-    if (keyboardPlacement && (isPlainKey(event, "escape") || isPlainKey(event, "backspace"))) {
-      consume();
-      setKeyboardPlacement(null);
-      return;
-    }
-    if (keyboardPlacement && keyboardPlacement.kind !== "zoom" && isPlainKey(event, "up", "down")) {
-      consume();
-      const level = event.name === "up" ? 1 : -1;
-      setKeyboardPlacement((current) => current && moveKeyboardPlacement(current, { level }));
-      return;
-    }
-    if (isPlainKey(event, "[", "]") && (drawingKeysActive || legendKeysActive)) {
-      consume();
-      const direction = event.name === "[" ? -1 : 1;
-      if (drawingKeysActive) stepDrawing(direction);
-      else stepLegend(direction);
-      return;
-    }
-    if (isPlainKey(event, "space") && legendKeysActive && legendEntryToggleable) {
-      consume();
-      toggleLegendEntry();
-      return;
-    }
-    if (isPlainKey(event, "escape") && toolsActive && (armedTool || selectedDrawingId || selectedLevelId)) {
-      consume();
-      setArmedTool(null);
-      setSelectedDrawingId(null);
-      setSelectedLevelId(null);
-      return;
-    }
-    if (isPlainKey(event, "escape") && legendKeysActive && legendKeyboardIndex !== null && !clearableCursor) {
-      consume();
-      setLegendKeyboardIndex(null);
-      return;
-    }
-    const interaction = resolveCompositeChartInteraction(event);
-    if (!interaction) return;
-    const cursorInteraction = interaction === "cursor-left"
-      || interaction === "cursor-right"
-      || interaction === "clear-cursor";
-    if (!cursorInteraction && !toolsActive) return;
-    if (
-      (interaction === "clear-cursor" && !clearableCursor)
-      || ((interaction === "arm-measure"
-        || interaction === "arm-zoom"
-        || interaction === "arm-line"
-        || interaction === "arm-pencil") && !scene)
-      || (interaction === "arm-level" && !levelsEditable)
-      || (interaction === "delete-drawing" && !canDeleteDrawing)
-      || (interaction === "cycle-colour" && !isDrawingTool(armedTool) && !selectedDrawingId)
-      // A read-only chart leaves the arrows to a focused tab strip in its pane;
-      // a chart you pan and draw on keeps them, with h/l for the tabs.
-      || ((interaction === "cursor-left" || interaction === "cursor-right") && (!scene || (arrowsClaimed && !navigable)))
-      || ((interaction === "zoom-in"
-        || interaction === "zoom-out"
-        || interaction === "pan-left"
-        || interaction === "pan-right") && !navigationFrame)
-    ) {
-      return;
-    }
-    consume();
-    switch (interaction) {
-      case "arm-measure":
-      case "arm-zoom":
-      case "arm-line":
-      case "arm-pencil":
-      case "arm-level":
-        onActivate?.();
-        armTool(ARMED_TOOL_BY_INTERACTION[interaction]);
-        return;
-      case "delete-drawing":
-        removeDrawing();
-        return;
-      case "cycle-colour":
-        pickDrawColor(nextDrawingColor(drawColor));
-        return;
-      case "clear-cursor":
-        keyboardCursorDateRef.current = null;
-        updateCursor(null);
-        return;
-      case "cursor-left":
-      case "cursor-right": {
-        const nextDate = resolveAdjacentCompositeCursorDate(
-          scene!,
-          keyboardCursorDateRef.current,
-          interaction === "cursor-left" ? -1 : 1,
-        );
-        keyboardCursorDateRef.current = nextDate;
-        updateCursor(nextDate);
-        if (nextDate && keyboardPlacement) {
-          const time = nextDate.getTime();
-          setKeyboardPlacement((current) => current && moveKeyboardPlacement(current, { time }));
-        }
-        return;
-      }
-      case "pan-left":
-        panViewportByRatio(COMPOSITE_KEYBOARD_PAN_RATIO);
-        return;
-      case "pan-right":
-        panViewportByRatio(-COMPOSITE_KEYBOARD_PAN_RATIO);
-        return;
-      case "reset":
-        resetViewport();
-        return;
-      case "zoom-in":
-        zoomViewport(COMPOSITE_ZOOM_STEP_FACTOR);
-        return;
-      case "zoom-out":
-        zoomViewport(1 / COMPOSITE_ZOOM_STEP_FACTOR);
-    }
-  }, { enabled: keyboardActive, scope: keyboardId });
-
-  // The keys a mode adds show where they act: Enter with a tool in hand, Space
-  // on a legend entry. Everything else the chart answers is in the pane menu.
-  // Footer and menu entries outlive the render that registered them, so they
-  // call through to this render's actions.
-  const chartActions = {
-    pick: () => {
-      const date = keyboardCursorDateRef.current ?? scene?.dates.at(-1) ?? null;
-      if (date) timePick?.onPick(date);
-    },
-    start: armedTool === "level" ? addLevelAtCursor : startKeyboardPlacement,
-    finish: finishKeyboardPlacement,
-    stepLevel,
-    removeLevel: removeSelectedLevel,
-    levelAction: runLevelAction,
-    toggleLegend: toggleLegendEntry,
-    stepLegend,
-    stepDrawing,
-    removeDrawing,
-    cycleColour: () => pickDrawColor(nextDrawingColor(drawColor)),
-    reset: resetViewport,
-    arm: (tool: ChartToolKind) => {
-      onActivate?.();
-      armTool(tool);
-    },
-  };
-  const chartActionsRef = useRef(chartActions);
-  chartActionsRef.current = chartActions;
-  const armedHints = armedTool ? KEYBOARD_TOOL_HINTS[armedTool] : null;
-  const placing = !!keyboardPlacement;
-  const legendEntryVisible = !!legendEntry && visibleSeriesIds.has(legendEntry.id);
-  const resettable = !!activeUserViewport;
-  const timePickLabel = timePick?.label ?? null;
-  const levelActionHint = selectedLevel?.actionable && levels?.action ? levels.action : null;
-  const levelToolKeys = toolsActive && armedTool === "level" && levelsEditable;
-  const canDeleteLevel = toolsActive && levelsEditable && !!selectedLevel?.editable;
-  usePaneFooter(keyboardId, () => {
-    if (!keyboardActive || !scene) return null;
-    const hints: PaneHint[] = [];
-    if (timePickLabel) {
-      hints.push({ id: "chart-pick", key: "Enter", label: timePickLabel, onPress: () => chartActionsRef.current.pick() });
-    } else if (toolsActive && armedHints) {
-      hints.push(placing
-        ? { id: "chart-tool", key: "Enter", label: armedHints.finish, title: armedHints.finishTitle, onPress: () => chartActionsRef.current.finish() }
-        : { id: "chart-tool", key: "Enter", label: armedHints.start, title: armedHints.startTitle, onPress: () => chartActionsRef.current.start() });
-    }
-    if (toolsActive && levelActionHint) {
-      hints.push({
-        id: "chart-level-action",
-        key: "Shift+A",
-        label: levelActionHint.label,
-        title: levelActionHint.title,
-        onPress: () => chartActionsRef.current.levelAction(),
-      });
-    }
-    if (legendKeysActive && legendEntryToggleable) {
-      hints.push({
-        id: "chart-series",
-        key: "Space",
-        label: legendEntryVisible ? "hide" : "show",
-        title: legendEntryVisible ? "Hide Series" : "Show Series",
-        onPress: () => chartActionsRef.current.toggleLegend(),
-      });
-    }
-    const menu: ContextMenuItem[] = [];
-    if (toolsActive) {
-      for (const tool of CHART_TOOL_MENU.filter((entry) => entry.kind !== "level" || levelsEditable)) {
-        menu.push({
-          id: `chart-tool-${tool.kind}`,
-          label: tool.label,
-          accelerator: tool.accelerator,
-          checked: armedTool === tool.kind,
-          onSelect: () => chartActionsRef.current.arm(tool.kind),
-        });
-      }
-      if (drawingKeysActive) {
-        menu.push({ id: "chart-drawing-next", label: "Next Drawing", accelerator: "]", onSelect: () => chartActionsRef.current.stepDrawing(1) });
-      }
-      if (canDeleteDrawing) {
-        menu.push({ id: "chart-drawing-delete", label: "Delete Drawing", accelerator: "Backspace", onSelect: () => chartActionsRef.current.removeDrawing() });
-      }
-      if (levelToolKeys && levelItems.length > 0) {
-        menu.push({ id: "chart-level-next", label: "Next Level", accelerator: "]", onSelect: () => chartActionsRef.current.stepLevel(1) });
-      }
-      if (canDeleteLevel) {
-        menu.push({ id: "chart-level-delete", label: "Delete Level", accelerator: "Backspace", onSelect: () => chartActionsRef.current.removeLevel() });
-      }
-      if (isDrawingTool(armedTool) || selectedDrawingId) {
-        menu.push({
-          id: "chart-drawing-colour",
-          label: "Drawing Colour",
-          accelerator: "c",
-          onSelect: () => chartActionsRef.current.cycleColour(),
-        });
-      }
-      if (resettable) menu.push({ id: "chart-reset", label: "Reset Zoom", accelerator: "0", onSelect: () => chartActionsRef.current.reset() });
-    }
-    if (legendKeysActive && anyLegendToggleable && !drawingKeysActive) {
-      menu.push({ id: "chart-series-next", label: "Next Series", accelerator: "]", onSelect: () => chartActionsRef.current.stepLegend(1) });
-    }
-    return { order: 10, hints, menu };
-  }, [
-    armedHints,
-    anyLegendToggleable,
-    armedTool,
-    canDeleteDrawing,
-    drawingKeysActive,
-    keyboardActive,
-    legendEntryToggleable,
-    legendEntryVisible,
-    legendKeysActive,
-    placing,
-    resettable,
-    !!scene,
-    selectedDrawingId,
-    timePickLabel,
-    levelActionHint,
-    levelToolKeys,
-    levelItems.length,
-    canDeleteLevel,
-    levelsEditable,
-    toolsActive,
-  ]);
 
   const leftPadding = leftAxisWidth + (leftAxisWidth ? axisGap : 0);
   const rightPadding = rightAxisWidth + (rightAxisWidth ? axisGap : 0);
@@ -2847,7 +399,7 @@ export function CompositeChart({
             accessoryWidth={legendAccessoryWidth}
             formatValue={formatValue}
             showLatestChangePercent={showLatestChangePercent}
-            onActivate={onActivate}
+            onActivate={activateFromPointer}
             onToggleSeries={onToggleSeries}
             isSeriesToggleable={isSeriesToggleable}
             keyboardIndex={legendKeyboardIndex}
@@ -2932,7 +484,7 @@ export function CompositeChart({
           accessoryWidth={legendAccessoryWidth}
           formatValue={formatValue}
           showLatestChangePercent={showLatestChangePercent}
-          onActivate={onActivate}
+          onActivate={activateFromPointer}
           onToggleSeries={onToggleSeries}
           isSeriesToggleable={isSeriesToggleable}
           keyboardIndex={legendKeyboardIndex}
@@ -2948,11 +500,11 @@ export function CompositeChart({
           showColors={isDrawingTool(armedTool) || !!selectedDrawingId}
           levelTool={levelsEditable}
           onArmTool={(tool) => {
-            onActivate?.();
+            activateFromPointer();
             armTool(tool);
           }}
           onPickColor={(color) => {
-            onActivate?.();
+            activateFromPointer();
             pickDrawColor(color);
           }}
         />
@@ -2987,7 +539,7 @@ export function CompositeChart({
           onDraw={addDrawing}
           onEditDrawing={editDrawing}
           onSelectDrawing={setSelectedDrawingId}
-          onActivate={onActivate}
+          onActivate={activateFromPointer}
           onCursorDateChange={updateCursor}
           onPanViewport={panViewport}
           onZoomViewport={zoomViewport}