gloomberb 0.16.0 → 0.16.2

package/src/components/chart/composite/drawing-store.ts

@@ -0,0 +1,59 @@
+import { useEffect, useRef } from "react";
+import { usePaneSettingValue } from "../../../state/app/context";
+import { CHART_DRAWINGS_SETTING_KEY, parseChartDrawings, type ChartDrawing } from "./tools";
+
+let nextDrawingSequence = 1;
+
+export function nextDrawingId(): string {
+  return `drawing:${nextDrawingSequence++}`;
+}
+
+/** Levels are stored with the account, so their ids must not repeat across sessions. */
+export function nextLevelId(): string {
+  return `${Date.now().toString(36)}-${(nextDrawingSequence++).toString(36)}`;
+}
+
+export const NO_DRAWINGS: readonly ChartDrawing[] = [];
+/** 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.
+ */
+export 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;
+}

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

@@ -0,0 +1,319 @@
+import { useEffect, useRef } from "react";
+import { Box, ScrollBox, Text, useUiCapabilities, type ScrollBoxRenderable } from "../../../ui";
+import { colors as themeColors, hoverBg } from "../../../theme/colors";
+import { CANONICAL_EXCHANGE_ALIASES } from "../../../utils/exchanges";
+import { displayWidth, formatPercentRaw, truncateToDisplayWidth } from "../../../utils/format";
+import type { ResolvedSeries } from "../../../time-series/types";
+import { consumeChartMouseEvent, type ChartMouseEvent } from "../core/pointer";
+import { formatCompositePointDetails, formatCompositeSeriesValue, seriesPriceReference } from "./format";
+import type { CompositeChartProps, CompositeChartScene } from "./types";
+
+const LEGEND_WHEEL_DELTA_PER_CELL = 8;
+
+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
+  ));
+}
+
+export 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>
+  );
+}

package/src/components/chart/composite/panel-bitmap.ts

@@ -0,0 +1,139 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import type { NativeChartBitmap } from "../native/chart-rasterizer";
+import type { StaticChartBitmapSize } from "./bitmap";
+import { renderCompositePanelBitmap } from "./rasterizer";
+import type { CompositeChartColors, 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;
+
+function renderPanelBitmap(
+  panel: CompositePanelScene,
+  bitmapSize: StaticChartBitmapSize,
+  colors: CompositeChartColors,
+  snapGridToRows = false,
+): NativeChartBitmap {
+  return renderCompositePanelBitmap(panel, {
+    pixelWidth: bitmapSize.pixelWidth,
+    pixelHeight: bitmapSize.pixelHeight,
+    colors,
+    snapGridToRows,
+  });
+}
+
+export 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;
+}

package/src/components/chart/composite/panel-gestures.ts

@@ -0,0 +1,59 @@
+import type { ChartMouseEvent } from "../core/pointer";
+import { compositeViewportPositions, type CompositeNavigationFrame, type CompositeViewportRange } from "./interactions";
+
+export const COMPOSITE_PANEL_ROLE = "composite-chart-panel";
+
+export function isVerticalWheelDirection(
+  direction: "up" | "down" | "left" | "right",
+): direction is "up" | "down" {
+  return direction === "up" || direction === "down";
+}
+
+export 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.
+ */
+export 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),
+  };
+}
+
+export interface PendingWheel {
+  /** Fraction of the visible span, positive toward older observations. */
+  panRatio: number;
+  zoomLog: number;
+  anchorRatio: number;
+}
+
+/** Blurs a focused text field, the focus change a consumed mousedown prevents. */
+export 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?.();
+}

package/src/components/chart/composite/panel-labels.ts

@@ -0,0 +1,107 @@
+import type { ChartSurfaceProps } from "../../../ui";
+import type { NativeChartBitmap } from "../native/chart-rasterizer";
+import { compositeAxisTicks, formatCompositeCursorValue, type CompositeAxisValueFormatter } from "./format";
+import type { CompositeColumnLayout } from "./column-layout";
+import { projectCompositeValue, unprojectCompositeValue } from "./scene";
+import type { CompositeAxisDomain, CompositeChartScene, CompositePanelScene } from "./types";
+
+export 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,
+  };
+}
+
+export function axisLabelRows(lines: string[]): ReadonlyMap<number, string> {
+  return new Map(lines.flatMap((line, row) => {
+    const label = line.trim();
+    return label ? [[row, label] as const] : [];
+  }));
+}
+
+export 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);
+}
+
+export 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.
+ */
+export 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);
+}
+
+
+export 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;
+}