gloomberb 0.7.0 → 0.7.2

package/src/components/chart/price-axis-labels.tsx

@@ -0,0 +1,114 @@
+import { useMemo } from "react";
+import { Box, Text, useUiCapabilities } from "../../ui";
+import { colors } from "../../theme/colors";
+import { formatAxisCell } from "./chart-renderer";
+
+interface PriceAxisLabelsProps {
+  axisLabels: ReadonlyMap<number, string>;
+  axisWidth: number;
+  axisSectionWidth: number;
+  height: number;
+  cursorRow: number | null;
+  cursorPixelY?: number | null;
+  cursorLabel: string | null;
+  cursorColor: string;
+}
+
+interface CursorPriceAxisOverlay {
+  labelText: string | null;
+  topPercent: number | null;
+}
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.max(min, Math.min(max, value));
+}
+
+export function buildCursorPriceAxisOverlay({
+  axisWidth,
+  axisSectionWidth,
+  height,
+  cursorPixelY,
+  cursorLabel,
+  cellHeightPx,
+}: {
+  axisWidth: number;
+  axisSectionWidth: number;
+  height: number;
+  cursorPixelY: number | null | undefined;
+  cursorLabel: string | null;
+  cellHeightPx: number;
+}): CursorPriceAxisOverlay {
+  const labelText = cursorLabel === null
+    ? null
+    : formatAxisCell(cursorLabel, axisWidth).padEnd(axisSectionWidth);
+  const pixelHeight = Math.max(height * cellHeightPx, 1);
+  let topPercent: number | null = null;
+
+  if (labelText && cursorPixelY !== null && cursorPixelY !== undefined && Number.isFinite(cursorPixelY) && pixelHeight > 1) {
+    const halfLabelHeight = Math.min(cellHeightPx / 2, (pixelHeight - 1) / 2);
+    const topPx = clamp(cursorPixelY, halfLabelHeight, Math.max(pixelHeight - halfLabelHeight, halfLabelHeight));
+    topPercent = (topPx / Math.max(pixelHeight - 1, 1)) * 100;
+  }
+
+  return { labelText, topPercent };
+}
+
+export function PriceAxisLabels({
+  axisLabels,
+  axisWidth,
+  axisSectionWidth,
+  height,
+  cursorRow,
+  cursorPixelY = null,
+  cursorLabel,
+  cursorColor,
+}: PriceAxisLabelsProps) {
+  const { cellHeightPx = 18, fractionalViewport = false } = useUiCapabilities();
+  const overlay = useMemo(() => buildCursorPriceAxisOverlay({
+    axisWidth,
+    axisSectionWidth,
+    height,
+    cursorPixelY,
+    cursorLabel,
+    cellHeightPx,
+  }), [axisSectionWidth, axisWidth, cellHeightPx, cursorLabel, cursorPixelY, height]);
+  const usePixelOverlay = fractionalViewport && overlay.labelText !== null && overlay.topPercent !== null;
+
+  return (
+    <Box
+      width={axisSectionWidth}
+      height={height}
+      flexDirection="column"
+      overflow="hidden"
+      style={usePixelOverlay ? { position: "relative" } : undefined}
+    >
+      {Array.from({ length: height }, (_, row) => {
+        const isCursorRow = !usePixelOverlay && cursorLabel !== null && cursorRow === row;
+        const label = isCursorRow ? cursorLabel : (axisLabels.get(row) ?? null);
+        return (
+          <Text key={row} fg={isCursorRow ? cursorColor : colors.textDim}>
+            {formatAxisCell(label, axisWidth).padEnd(axisSectionWidth)}
+          </Text>
+        );
+      })}
+      {usePixelOverlay ? (
+        <Text
+          width={axisSectionWidth}
+          fg={cursorColor}
+          bg={colors.bg}
+          style={{
+            position: "absolute",
+            left: 0,
+            top: `${overlay.topPercent}%`,
+            transform: "translateY(-50%)",
+            whiteSpace: "pre",
+            pointerEvents: "none",
+            zIndex: 1,
+          }}
+        >
+          {overlay.labelText}
+        </Text>
+      ) : null}
+    </Box>
+  );
+}

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

@@ -1,5 +1,6 @@
 import { useMemo } from "react";
 import { Box, ChartSurface, Text, useNativeRenderer, useUiCapabilities } from "../../ui";
+import { useThemeColors } from "../../theme/theme-context";
 import type { ProjectedChartPoint } from "./chart-data";
 import {
   buildChartScene,
@@ -45,6 +46,7 @@ export function StaticChartSurface({
   yAxisColor,
   formatYAxisValue,
 }: StaticChartSurfaceProps) {
+  useThemeColors();
   const {
     canvasCharts,
     nativeCharts,

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

@@ -9,6 +9,7 @@ import { ShortcutHint } from "../ui";
 import { saveConfig } from "../../data/config-store";
 import { getSharedMarketData } from "../../plugins/registry";
 import { colors } from "../../theme/colors";
+import { useThemeColors } from "../../theme/theme-context";
 import { formatCompact } from "../../utils/format";
 import { formatMarketPriceWithCurrency } from "../../utils/market-format";
 import { useChartQueries, useChartQuery } from "../../market-data/hooks";
@@ -82,7 +83,6 @@ import {
 } from "./chart-viewport";
 import {
   buildChartScene,
-  formatAxisCell,
   formatCursorAxisValue,
   getActivePointIndex,
   getPointTerminalColumn,
@@ -128,6 +128,7 @@ import {
 import type { PricePoint, TickerFinancials } from "../../types/financials";
 import type { TickerRecord } from "../../types/ticker";
 import { TimeAxisLabel } from "./time-axis-label";
+import { PriceAxisLabels } from "./price-axis-labels";
 
 const MODE_CHIPS: Record<ChartRenderMode, string> = {
   area: "A",
@@ -1436,6 +1437,7 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
   ticker,
   financials,
 }: ResolvedStockChartProps) {
+  const themeColors = useThemeColors();
   const renderer = useNativeRenderer();
   const { canvasCharts, cellWidthPx = 8, cellHeightPx = 18, pixelRatio = 1 } = useUiCapabilities();
   const dispatch = useAppDispatch();
@@ -3013,15 +3015,24 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
       : 0;
     const trend = rawChange < 0 ? "negative" : rawChange > 0 ? "positive" : "neutral";
     return resolveChartPalette({
-      bg: colors.bg,
-      border: colors.border,
-      borderFocused: colors.borderFocused,
-      text: colors.text,
-      textDim: colors.textDim,
-      positive: colors.positive,
-      negative: colors.negative,
+      bg: themeColors.bg,
+      border: themeColors.border,
+      borderFocused: themeColors.borderFocused,
+      text: themeColors.text,
+      textDim: themeColors.textDim,
+      positive: themeColors.positive,
+      negative: themeColors.negative,
     }, trend);
-  }, [chartWindow.points]);
+  }, [
+    chartWindow.points,
+    themeColors.bg,
+    themeColors.border,
+    themeColors.borderFocused,
+    themeColors.negative,
+    themeColors.positive,
+    themeColors.text,
+    themeColors.textDim,
+  ]);
 
   const cursorX = viewState.cursorX !== null ? clamp(viewState.cursorX, 0, chartWidth - 1) : null;
   const cursorY = viewState.cursorY !== null ? clamp(viewState.cursorY, 0, chartHeight - 1) : null;
@@ -3437,6 +3448,7 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
         timeLabels={timeAxisLabel}
         width={chartWidth}
         cursorColumn={cursorTimeAxisColumn}
+        cursorPixelX={hasDisplayCursor ? displayCursor.pixelX : null}
         cursorDate={cursorTimeAxisDate}
         dates={timeAxisDates}
         cursorColor={chartColors.crosshairColor}
@@ -3955,17 +3967,16 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
   );
 
   const axisBox = (
-    <Box width={axisSectionWidth} height={chartHeight} flexDirection="column">
-      {Array.from({ length: chartHeight }, (_, row) => {
-        const isCursorRow = cursorAxisLabel !== null && cursorRow === row;
-        const label = isCursorRow ? cursorAxisLabel : (axisLabels.get(row) ?? null);
-        return (
-          <Text key={row} fg={isCursorRow ? chartColors.crosshairColor : colors.textDim}>
-            {formatAxisCell(label, axisWidth).padEnd(axisSectionWidth)}
-          </Text>
-        );
-      })}
-    </Box>
+    <PriceAxisLabels
+      axisLabels={axisLabels}
+      axisWidth={axisWidth}
+      axisSectionWidth={axisSectionWidth}
+      height={chartHeight}
+      cursorRow={cursorRow}
+      cursorPixelY={hasDisplayCursor ? displayCursor.pixelY : null}
+      cursorLabel={cursorAxisLabel}
+      cursorColor={chartColors.crosshairColor}
+    />
   );
 
   if (compact) {

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

@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-import { Span, Text } from "../../ui";
+import { Box, Span, Text, useUiCapabilities } from "../../ui";
 import { colors } from "../../theme/colors";
 import { buildCursorTimeAxisSegments } from "./chart-renderer";
 
@@ -7,19 +7,60 @@ interface TimeAxisLabelProps {
   timeLabels: string;
   width: number;
   cursorColumn: number | null;
+  cursorPixelX?: number | null;
   cursorDate: Date | string | number | null;
   dates: Array<Date | string | number>;
   cursorColor: string;
 }
 
+interface CursorTimeAxisOverlay {
+  baseText: string;
+  label: string | null;
+  leftPercent: number | null;
+}
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.max(min, Math.min(max, value));
+}
+
+export function buildCursorTimeAxisOverlay({
+  segments,
+  width,
+  cursorPixelX,
+  cellWidthPx,
+}: {
+  segments: ReturnType<typeof buildCursorTimeAxisSegments>;
+  width: number;
+  cursorPixelX: number | null | undefined;
+  cellWidthPx: number;
+}): CursorTimeAxisOverlay {
+  const baseText = segments
+    .map((segment) => (segment.highlighted ? " ".repeat(segment.text.length) : segment.text))
+    .join("")
+    .padEnd(width)
+    .slice(0, width);
+  const label = segments.find((segment) => segment.highlighted)?.text ?? null;
+  const pixelWidth = Math.max(width * cellWidthPx, 1);
+  let leftPercent: number | null = null;
+  if (label && cursorPixelX !== null && cursorPixelX !== undefined && Number.isFinite(cursorPixelX) && pixelWidth > 1) {
+    const halfLabelWidth = Math.min((label.length * cellWidthPx) / 2, (pixelWidth - 1) / 2);
+    const leftPx = clamp(cursorPixelX, halfLabelWidth, Math.max(pixelWidth - halfLabelWidth, halfLabelWidth));
+    leftPercent = (leftPx / Math.max(pixelWidth - 1, 1)) * 100;
+  }
+
+  return { baseText, label, leftPercent };
+}
+
 export function TimeAxisLabel({
   timeLabels,
   width,
   cursorColumn,
+  cursorPixelX = null,
   cursorDate,
   dates,
   cursorColor,
 }: TimeAxisLabelProps) {
+  const { cellWidthPx = 8, fractionalViewport = false } = useUiCapabilities();
   const segments = useMemo(() => buildCursorTimeAxisSegments({
     timeLabels,
     width,
@@ -27,6 +68,42 @@ export function TimeAxisLabel({
     cursorDate,
     dates,
   }), [cursorColumn, cursorDate, dates, timeLabels, width]);
+  const overlay = useMemo(() => buildCursorTimeAxisOverlay({
+    segments,
+    width,
+    cursorPixelX,
+    cellWidthPx,
+  }), [cellWidthPx, cursorPixelX, segments, width]);
+
+  if (fractionalViewport && overlay.label && overlay.leftPercent !== null) {
+    return (
+      <Box
+        width={width}
+        height={1}
+        overflow="hidden"
+        style={{ position: "relative" }}
+      >
+        <Text fg={colors.textDim} style={{ whiteSpace: "pre" }}>
+          {overlay.baseText}
+        </Text>
+        <Text
+          fg={cursorColor}
+          bg={colors.bg}
+          style={{
+            position: "absolute",
+            left: `${overlay.leftPercent}%`,
+            top: 0,
+            transform: "translateX(-50%)",
+            whiteSpace: "pre",
+            pointerEvents: "none",
+            zIndex: 1,
+          }}
+        >
+          {overlay.label}
+        </Text>
+      </Box>
+    );
+  }
 
   return (
     <Text style={{ whiteSpace: "pre" }}>

package/src/components/command-bar/__snapshots__/command-bar.test.tsx.snap

@@ -25,34 +25,6 @@ exports[`CommandBar renders the default layout with opencode-style chrome 1`] =
                                                                                 
                                                                                 
                                                                                 
-"
-`;
-
-exports[`CommandBar renders theme prefix results in the root query 1`] = `
-"                                                                                
-                                                                                
-                Commands                                                        
-                TH                                                              
-                                                                                
-                Themes                                                          
-                Amber                                   current                 
-                Green Phosphor                                                  
-                Cyan                                                            
-                Red Phosphor                                                    
-                Blue Phosphor                                                   
-                Purple Phosphor                                                 
-                Hot Pink                                                        
-                White Phosphor                                                  
-                Tokyo Night                                                     
-                Solarized Dark                                                  
-                Dracula                                                         
-                Nord                                                            
-                Monokai                                                         
-                Catppuccin Mocha                                                
-                                                                                
-                                                                                
-                                                                                
-                                                                                
 "
 `;