gloomberb 0.11.2 → 0.12.0

package/src/components/chart/native/kitty/index.test.ts

@@ -1,11 +1,9 @@
 import { describe, expect, test } from "bun:test";
 import type { CliRenderer } from "@opentui/core";
-import { buildChartScene, resolveChartPalette } from "../../core/renderer";
 import {
   computeBitmapSize,
   computeNativePlacement,
   excludeCellRects,
-  renderNativeChartBase,
   renderCrosshairStrips,
   type CellRect,
 } from "../chart-rasterizer";
@@ -211,192 +209,6 @@ describe("resolveNativeSurfaceVisibleRect", () => {
   });
 });
 
-describe("renderNativeChartBase", () => {
-  test("leaves untouched bitmap pixels transparent", () => {
-    const palette = resolveChartPalette({
-      bg: "#112233",
-      border: "#333333",
-      borderFocused: "#ffff00",
-      text: "#ffffff",
-      textDim: "#777777",
-      positive: "#00ff00",
-      negative: "#ff0000",
-    }, "positive");
-    const scene = buildChartScene([
-      { date: new Date("2024-01-02"), open: 10, high: 12, low: 9, close: 11, volume: 100 },
-      { date: new Date("2024-01-03"), open: 11, high: 13, low: 10, close: 12, volume: 120 },
-    ], {
-      width: 12,
-      height: 6,
-      showVolume: false,
-      volumeHeight: 0,
-      cursorX: null,
-      cursorY: null,
-      mode: "line",
-      colors: palette,
-    });
-
-    expect(scene).not.toBeNull();
-
-    const bitmap = renderNativeChartBase(scene!, 24, 12);
-    let transparentPixels = 0;
-    let drawnPixels = 0;
-    for (let offset = 3; offset < bitmap.pixels.length; offset += 4) {
-      if (bitmap.pixels[offset] === 0) {
-        transparentPixels += 1;
-      } else {
-        drawnPixels += 1;
-      }
-    }
-    expect(transparentPixels).toBeGreaterThan(0);
-    expect(drawnPixels).toBeGreaterThan(0);
-  });
-
-  test("keeps solid candle bodies opaque over the wick", () => {
-    const palette = resolveChartPalette({
-      bg: "#112233",
-      border: "#333333",
-      borderFocused: "#ffff00",
-      text: "#ffffff",
-      textDim: "#777777",
-      positive: "#00ff00",
-      negative: "#ff0000",
-    }, "negative");
-    const scene = buildChartScene([
-      { date: new Date("2024-01-02"), open: 12, high: 14, low: 8, close: 9, volume: 100 },
-      { date: new Date("2024-01-03"), open: 9, high: 10, low: 7, close: 8.5, volume: 120 },
-    ], {
-      width: 20,
-      height: 12,
-      showVolume: false,
-      volumeHeight: 0,
-      cursorX: null,
-      cursorY: null,
-      mode: "candles",
-      colors: palette,
-    });
-
-    expect(scene).not.toBeNull();
-
-    const bitmap = renderNativeChartBase(scene!, 80, 48);
-    const bodyCenterOffset = (24 * bitmap.width + 20) * 4;
-    expect([...bitmap.pixels.slice(bodyCenterOffset, bodyCenterOffset + 4)]).toEqual([255, 0, 0, 255]);
-  });
-
-  test("ignores cursor state when rendering the base bitmap", () => {
-    const palette = resolveChartPalette({
-      bg: "#112233",
-      border: "#333333",
-      borderFocused: "#ffff00",
-      text: "#ffffff",
-      textDim: "#777777",
-      positive: "#00ff00",
-      negative: "#ff0000",
-    }, "positive");
-    const scene = buildChartScene([
-      { date: new Date("2024-01-02"), open: 10, high: 10, low: 10, close: 10, volume: 100 },
-      { date: new Date("2024-01-03"), open: 10, high: 10, low: 10, close: 10, volume: 120 },
-    ], {
-      width: 12,
-      height: 6,
-      showVolume: false,
-      volumeHeight: 0,
-      cursorX: null,
-      cursorY: null,
-      mode: "line",
-      colors: palette,
-    });
-    const sceneWithCursor = buildChartScene([
-      { date: new Date("2024-01-02"), open: 10, high: 10, low: 10, close: 10, volume: 100 },
-      { date: new Date("2024-01-03"), open: 10, high: 10, low: 10, close: 10, volume: 120 },
-    ], {
-      width: 12,
-      height: 6,
-      showVolume: false,
-      volumeHeight: 0,
-      cursorX: 4.5,
-      cursorY: 2.5,
-      mode: "line",
-      colors: palette,
-    });
-
-    expect(scene).not.toBeNull();
-    expect(sceneWithCursor).not.toBeNull();
-
-    const withoutCursor = renderNativeChartBase(scene!, 120, 60);
-    const withCursor = renderNativeChartBase(sceneWithCursor!, 120, 60);
-    expect(withCursor.pixels).toEqual(withoutCursor.pixels);
-  });
-
-  test("renders indicator overlays into the native chart bitmap", () => {
-    const palette = resolveChartPalette({
-      bg: "#112233",
-      border: "#333333",
-      borderFocused: "#ffff00",
-      text: "#ffffff",
-      textDim: "#777777",
-      positive: "#00ff00",
-      negative: "#ff0000",
-    }, "positive");
-    const points = [
-      { date: new Date("2024-01-02"), open: 10, high: 12, low: 9, close: 11, volume: 100 },
-      { date: new Date("2024-01-03"), open: 11, high: 13, low: 10, close: 12, volume: 120 },
-      { date: new Date("2024-01-04"), open: 12, high: 14, low: 11, close: 13, volume: 130 },
-    ];
-    const baseScene = buildChartScene(points, {
-      width: 18,
-      height: 8,
-      showVolume: false,
-      volumeHeight: 0,
-      cursorX: null,
-      cursorY: null,
-      mode: "line",
-      colors: palette,
-    });
-    const sceneWithIndicator = buildChartScene(points, {
-      width: 18,
-      height: 8,
-      showVolume: false,
-      volumeHeight: 0,
-      cursorX: null,
-      cursorY: null,
-      mode: "line",
-      colors: palette,
-      indicators: {
-        smaLines: [{
-          period: 2,
-          color: "#ff00ff",
-          points: [
-            { index: 0, value: 9.5 },
-            { index: 1, value: 10.5 },
-            { index: 2, value: 11.5 },
-          ],
-        }],
-        emaLines: [],
-        bollinger: null,
-        rsi: null,
-        macd: null,
-      },
-    });
-
-    expect(baseScene).not.toBeNull();
-    expect(sceneWithIndicator).not.toBeNull();
-
-    const baseBitmap = renderNativeChartBase(baseScene!, 120, 60);
-    const indicatorBitmap = renderNativeChartBase(sceneWithIndicator!, 120, 60);
-    expect(indicatorBitmap.pixels).not.toEqual(baseBitmap.pixels);
-
-    let magentaPixels = 0;
-    for (let offset = 0; offset < indicatorBitmap.pixels.length; offset += 4) {
-      const red = indicatorBitmap.pixels[offset]!;
-      const green = indicatorBitmap.pixels[offset + 1]!;
-      const blue = indicatorBitmap.pixels[offset + 2]!;
-      if (red > 180 && blue > 180 && green < 120) magentaPixels += 1;
-    }
-    expect(magentaPixels).toBeGreaterThan(0);
-  });
-});
-
 describe("renderCrosshairStrips", () => {
   const strips = renderCrosshairStrips({
     pixelX: 49.5,

package/src/components/chart/native/raster/crosshair.ts

@@ -7,9 +7,9 @@ interface CrosshairMarker {
 }
 
 export interface CrosshairStripsOptions {
-  /** Cursor position in plot pixels. */
+  /** Cursor position in plot pixels; a null level draws only the column. */
   pixelX: number;
-  pixelY: number;
+  pixelY: number | null;
   /** Plot size in pixels and cells. */
   pixelWidth: number;
   pixelHeight: number;
@@ -45,7 +45,7 @@ export function renderCrosshairStrips(options: CrosshairStripsOptions): Crosshai
   if (cols <= 0 || rows <= 0 || cellWidth <= 0 || cellHeight <= 0) return [];
 
   const x = clamp(options.pixelX, 0, Math.max(pixelWidth - 1, 0));
-  const y = clamp(options.pixelY, 0, Math.max(pixelHeight - 1, 0));
+  const y = options.pixelY === null ? null : clamp(options.pixelY, 0, Math.max(pixelHeight - 1, 0));
   const lineColor = parseHex(options.color, 0.78);
   const focusColor = parseHex(options.color, 0.32);
   const strips: CrosshairStrip[] = [];
@@ -61,12 +61,13 @@ export function renderCrosshairStrips(options: CrosshairStripsOptions): Crosshai
     const markerY = clamp(marker.pixelY, 0, Math.max(pixelHeight - 1, 0));
     drawCircle(vertical.pixels, vertical.width, vertical.height, localX, markerY, 2.6, parseHex(marker.color));
   }
-  drawCircle(vertical.pixels, vertical.width, vertical.height, localX, y, 2.1, focusColor);
+  if (y !== null) drawCircle(vertical.pixels, vertical.width, vertical.height, localX, y, 2.1, focusColor);
   strips.push({
     rect: { x: verticalStart, y: 0, width: verticalCols, height: rows },
     bitmap: vertical,
-    key: `v:${verticalStart}:${localX.toFixed(2)}:${y.toFixed(2)}`,
+    key: `v:${verticalStart}:${localX.toFixed(2)}:${y === null ? "-" : y.toFixed(2)}`,
   });
+  if (y === null) return strips;
 
   // Horizontal strip: a single cell row carrying the level line.
   const horizontalStart = clamp(Math.floor(y / cellHeight), 0, rows - 1);

package/src/components/chart/native/raster/primitives.ts

@@ -147,26 +147,3 @@ export function drawCircle(
     }
   }
 }
-
-export function drawAreaFill(
-  data: Uint8Array,
-  width: number,
-  height: number,
-  yByColumn: Float32Array,
-  bottom: number,
-  color: RgbaColor,
-) {
-  for (let x = 0; x < yByColumn.length; x++) {
-    const yTop = yByColumn[x]!;
-    if (!Number.isFinite(yTop)) continue;
-    const distance = Math.max(bottom - yTop, 1);
-    for (let y = Math.max(Math.floor(yTop), 0); y <= Math.min(Math.ceil(bottom), height - 1); y++) {
-      const fade = 1 - (y - yTop) / distance;
-      blendPixel(data, width, height, x, y, color, 0.08 + fade * 0.32);
-    }
-  }
-}
-
-export function lerp(a: number, b: number, t: number): number {
-  return a + (b - a) * t;
-}

package/src/components/chart/native/renderer-selection.ts

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useSyncExternalStore } from "react";
 import { type PixelResolution } from "../../../ui";
 import { type NativeRendererHost as CliRenderer } from "../../../ui";
 import type { ChartRendererPreference, ResolvedChartRenderer } from "../core/types";
@@ -56,46 +56,96 @@ function shouldQueryKittySupport(
   return !renderer.isDestroyed && preference !== "braille" && snapshot.kittySupport === null;
 }
 
+/**
+ * One capabilities/resolution/resize trio per CliRenderer. Chart surfaces used to
+ * each attach their own listeners, so multi-chart panes blew past MaxListeners(10).
+ */
+interface RendererReadinessHub {
+  snapshot: NativeChartRendererSnapshot;
+  consumers: Set<() => void>;
+  attached: boolean;
+  refresh: () => void;
+}
+
+const readinessHubs = new WeakMap<CliRenderer, RendererReadinessHub>();
+
+function getReadinessHub(renderer: CliRenderer): RendererReadinessHub {
+  let hub = readinessHubs.get(renderer);
+  if (hub) return hub;
+
+  hub = {
+    snapshot: readNativeChartRendererSnapshot(renderer),
+    consumers: new Set(),
+    attached: false,
+    refresh: () => {},
+  };
+  hub.refresh = () => {
+    const next = readNativeChartRendererSnapshot(renderer);
+    if (sameSnapshot(hub!.snapshot, next)) return;
+    hub!.snapshot = next;
+    for (const notify of hub!.consumers) notify();
+  };
+  readinessHubs.set(renderer, hub);
+  return hub;
+}
+
+function subscribeRendererReadiness(renderer: CliRenderer, onStoreChange: () => void): () => void {
+  const hub = getReadinessHub(renderer);
+  const wasEmpty = hub.consumers.size === 0;
+  hub.consumers.add(onStoreChange);
+
+  if (wasEmpty && !hub.attached) {
+    hub.attached = true;
+    renderer.on("capabilities", hub.refresh);
+    renderer.on("resolution", hub.refresh);
+    renderer.on("resize", hub.refresh);
+    hub.refresh();
+  }
+
+  return () => {
+    hub.consumers.delete(onStoreChange);
+    if (hub.consumers.size === 0 && hub.attached) {
+      renderer.off("capabilities", hub.refresh);
+      renderer.off("resolution", hub.refresh);
+      renderer.off("resize", hub.refresh);
+      hub.attached = false;
+    }
+  };
+}
+
+function getRendererReadinessSnapshot(renderer: CliRenderer): NativeChartRendererSnapshot {
+  return getReadinessHub(renderer).snapshot;
+}
+
 export function useResolvedChartRendererState(
   preference: ChartRendererPreference,
   renderer: CliRenderer,
 ): ResolvedChartRendererState {
-  const [snapshot, setSnapshot] = useState<NativeChartRendererSnapshot>(() => (
-    readNativeChartRendererSnapshot(renderer)
-  ));
-
-  useEffect(() => {
-    let cancelled = false;
-    const commitSnapshot = (next: NativeChartRendererSnapshot) => {
-      if (cancelled) return;
-      setSnapshot((current) => (sameSnapshot(current, next) ? current : next));
-    };
+  const subscribe = useCallback(
+    (onStoreChange: () => void) => subscribeRendererReadiness(renderer, onStoreChange),
+    [renderer],
+  );
 
-    const refreshReadiness = () => {
-      const next = readNativeChartRendererSnapshot(renderer);
-      commitSnapshot(next);
-    };
+  const getSnapshot = useCallback(
+    () => getRendererReadinessSnapshot(renderer),
+    [renderer],
+  );
 
-    renderer.on("capabilities", refreshReadiness);
-    renderer.on("resolution", refreshReadiness);
-    renderer.on("resize", refreshReadiness);
-    refreshReadiness();
-
-    if (shouldQueryKittySupport(preference, renderer, readNativeChartRendererSnapshot(renderer))) {
-      ensureKittySupport(renderer).then(() => {
-        refreshReadiness();
-      }).catch(() => {
-        refreshReadiness();
-      });
-    }
+  const snapshot = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
 
+  useEffect(() => {
+    const current = getRendererReadinessSnapshot(renderer);
+    if (!shouldQueryKittySupport(preference, renderer, current)) return;
+    let cancelled = false;
+    ensureKittySupport(renderer).then(() => {
+      if (!cancelled) getReadinessHub(renderer).refresh();
+    }).catch(() => {
+      if (!cancelled) getReadinessHub(renderer).refresh();
+    });
     return () => {
       cancelled = true;
-      renderer.off("capabilities", refreshReadiness);
-      renderer.off("resolution", refreshReadiness);
-      renderer.off("resize", refreshReadiness);
     };
-  }, [preference, renderer]);
+  }, [preference, renderer, snapshot.kittySupport]);
 
   return useMemo(
     () => resolveChartRendererState(preference, snapshot.kittySupport, snapshot.resolution),

package/src/components/chart/static/{chart/surface.test.tsx → chart-surface.test.tsx}

@@ -1,11 +1,11 @@
 import { afterEach, describe, expect, test } from "bun:test";
 import { act, useEffect } from "react";
-import { testRender } from "../../../../renderers/opentui/test-utils";
-import { colors } from "../../../../theme/colors";
-import { RemoteUiRegistryProvider, useRemoteUiRegistry, type RemoteUiRegistry } from "../../../../remote/semantic-tree";
-import { resolveChartPalette } from "../../core/renderer";
-import { StaticChartSurface } from "./surface";
-import type { ProjectedChartPoint } from "../../core/data";
+import { testRender } from "../../../renderers/opentui/test-utils";
+import { colors } from "../../../theme/colors";
+import { RemoteUiRegistryProvider, useRemoteUiRegistry, type RemoteUiRegistry } from "../../../remote/semantic-tree";
+import { resolveChartPalette } from "../core/palette";
+import { StaticChartSurface, buildStaticChartSeries } from "./chart-surface";
+import type { ProjectedChartPoint } from "../core/data";
 
 let testSetup: Awaited<ReturnType<typeof testRender>> | undefined;
 let remoteRegistry: RemoteUiRegistry | null = null;
@@ -35,7 +35,16 @@ function RemoteRegistryProbe() {
 }
 
 describe("StaticChartSurface", () => {
-  test("renders unit and custom y-axis labels", async () => {
+  test("aligns an index-keyed overlay to the primary observations", () => {
+    const [primary, overlay] = buildStaticChartSeries(points, "line", "#00ff00", [
+      { id: "secondary", color: "#ffaa00", points: [{ index: 0, value: 1 }, { index: 2, value: 3 }, { index: 9, value: 4 }] },
+    ]);
+    expect(primary?.timeBasis?.kind).toBe("market");
+    expect(overlay?.points.map((point) => [point.date.toISOString().slice(0, 10), point.value]))
+      .toEqual([["2026-01-01", 1], ["2026-01-03", 3]]);
+  });
+
+  test("renders the y-axis title with custom tick labels", async () => {
     testSetup = await testRender(
       <StaticChartSurface
         points={points}
@@ -57,36 +66,10 @@ describe("StaticChartSurface", () => {
 
     const frame = testSetup.captureCharFrame();
     expect(frame).toContain("Yield (%)");
-    expect(frame).toContain("4.90%");
-    expect(frame).toContain("3.50%");
+    expect(frame).toMatch(/\d\.\d\d%/);
   });
 
-  test("renders custom x-axis scale labels", async () => {
-    testSetup = await testRender(
-      <StaticChartSurface
-        points={points}
-        width={48}
-        height={10}
-        mode="line"
-        colors={resolveChartPalette(colors, "positive")}
-        xAxisLabels={["0%", "50%", "100%"]}
-        xAxisColor={colors.textDim}
-      />,
-      { width: 50, height: 12 },
-    );
-
-    await act(async () => {
-      await testSetup!.renderOnce();
-      await testSetup!.renderOnce();
-    });
-
-    const frame = testSetup.captureCharFrame();
-    expect(frame).toContain("0%");
-    expect(frame).toContain("50%");
-    expect(frame).toContain("100%");
-  });
-
-  test("renders x-axis decision markers", async () => {
+  test("renders custom x-axis labels and decision markers instead of dates", async () => {
     testSetup = await testRender(
       <StaticChartSurface
         points={points}
@@ -111,51 +94,17 @@ describe("StaticChartSurface", () => {
     });
 
     const frame = testSetup.captureCharFrame();
+    expect(frame).toContain("0%");
+    expect(frame).toContain("50%");
+    expect(frame).toContain("100%");
+    expect(frame).not.toContain("Jan");
     expect(frame).toContain("current");
     expect(frame).toContain("target");
     expect(frame).toContain("full");
     expect(frame).toContain("┃");
   });
 
-  test("renders a cursor crosshair after mouse movement", async () => {
-    testSetup = await testRender(
-      <StaticChartSurface
-        points={points}
-        width={48}
-        height={10}
-        mode="line"
-        colors={resolveChartPalette(colors, "positive")}
-        xAxisLabels={["0%", "50%", "100%"]}
-        formatXAxisCursorValue={(ratio) => `X${Math.round(ratio * 100)}`}
-        formatYAxisValue={(value) => `Y${value.toFixed(2)}`}
-        xMarkers={[
-          { id: "current", xRatio: 0.1, label: "current", lineChar: "┊" },
-          { id: "target", xRatio: 0.5, label: "target", lineChar: "┃" },
-        ]}
-      />,
-      { width: 50, height: 12 },
-    );
-
-    await act(async () => {
-      await testSetup!.renderOnce();
-      await testSetup!.renderOnce();
-    });
-    const initialFrame = testSetup.captureCharFrame();
-
-    await act(async () => {
-      await testSetup!.mockMouse.moveTo(20, 4);
-    });
-    await act(async () => {
-      await testSetup!.renderOnce();
-      await testSetup!.renderOnce();
-    });
-
-    expect(testSetup.captureCharFrame()).not.toBe(initialFrame);
-    expect(testSetup.captureCharFrame()).toContain("X49");
-    expect(testSetup.captureCharFrame()).toContain("Y3.97");
-  });
-
-  test("exposes semantic remote cursor control", async () => {
+  test("moves a remote-controlled cursor and labels both axes through the formatters", async () => {
     testSetup = await testRender(
       <RemoteUiRegistryProvider>
         <RemoteRegistryProbe />
@@ -178,9 +127,7 @@ describe("StaticChartSurface", () => {
       await testSetup!.renderOnce();
     });
     const initialFrame = testSetup.captureCharFrame();
-    const chartNode = remoteRegistry?.snapshot().find((node) => (
-      node.role === "chart" && node.metadata?.kind === "static-chart"
-    ));
+    const chartNode = remoteRegistry?.snapshot().find((node) => node.metadata?.kind === "static-chart");
     expect(chartNode?.actions).toContain("moveCursor");
 
     await act(async () => {
@@ -191,8 +138,9 @@ describe("StaticChartSurface", () => {
       await testSetup!.renderOnce();
     });
 
-    expect(testSetup.captureCharFrame()).not.toBe(initialFrame);
-    expect(testSetup.captureCharFrame()).toContain("X49");
-    expect(testSetup.captureCharFrame()).toContain("Y3.97");
+    const frame = testSetup.captureCharFrame();
+    expect(frame).not.toBe(initialFrame);
+    expect(frame).toMatch(/X\d+/);
+    expect(frame).toMatch(/Y\d\.\d\d/);
   });
 });