gloomberb 0.16.1 → 0.16.2

package/src/components/layout/pane/footer/registration.tsx

@@ -66,17 +66,17 @@ export function PaneFooterProvider({
   const value = useMemo(() => ({ register, unregister }), [register, unregister]);
   const footer = useMemo(() => combinePaneFooterRegistrations(registrations), [registrations]);
 
-  const [arrowClaims, setArrowClaims] = useState<ReadonlySet<string>>(() => new Set());
-  const setArrowClaim = useCallback((id: string, claimed: boolean) => {
-    setArrowClaims((current) => {
-      if (current.has(id) === claimed) return current;
-      const next = new Set(current);
-      if (claimed) next.add(id);
-      else next.delete(id);
-      return next;
-    });
-  }, []);
-  const arrowValue = useMemo(() => ({ claimed: arrowClaims.size > 0, setArrowClaim }), [arrowClaims, setArrowClaim]);
+  const [arrowClaims, setArrowClaim] = useMemberSet();
+  const [strips, setStrip] = useMemberSet();
+  const [holds, setArrowHold] = useMemberSet();
+  const arrowValue = useMemo<PaneArrowState>(() => ({
+    claimed: arrowClaims.size > 0,
+    strip: strips.size > 0,
+    held: holds.size > 0,
+    setArrowClaim,
+    setStrip,
+    setArrowHold,
+  }), [arrowClaims, holds, setArrowClaim, setArrowHold, setStrip, strips]);
 
   return (
     <PaneFooterContext.Provider value={value}>
@@ -87,22 +87,57 @@ export function PaneFooterProvider({
   );
 }
 
-const PaneArrowContext = createContext<{ claimed: boolean; setArrowClaim(id: string, claimed: boolean): void } | null>(null);
+function useMemberSet(): [ReadonlySet<string>, (id: string, member: boolean) => void] {
+  const [members, setMembers] = useState<ReadonlySet<string>>(() => new Set());
+  const setMember = useCallback((id: string, member: boolean) => {
+    setMembers((current) => {
+      if (current.has(id) === member) return current;
+      const next = new Set(current);
+      if (member) next.add(id);
+      else next.delete(id);
+      return next;
+    });
+  }, []);
+  return [members, setMember];
+}
+
+interface PaneArrowState {
+  /** A focused tab strip owns Left, Right, h and l. */
+  claimed: boolean;
+  /** The pane has a tab strip that walks its tabs by keyboard. */
+  strip: boolean;
+  /** Content the user moved into (a chart) holds the strip's keys until Esc. */
+  held: boolean;
+  setArrowClaim(id: string, claimed: boolean): void;
+  setStrip(id: string, present: boolean): void;
+  setArrowHold(id: string, held: boolean): void;
+}
+
+const PaneArrowContext = createContext<PaneArrowState | null>(null);
+
+function usePaneArrowMember(set: ((id: string, member: boolean) => void) | undefined, member: boolean) {
+  const id = useId();
+  useEffect(() => {
+    if (!set) return;
+    set(id, member);
+    return () => set(id, false);
+  }, [id, member, set]);
+}
 
 /**
- * A focused tab strip owns Left and Right in its pane. It claims them here, so
- * a read-only chart in the same pane leaves them to the strip and the arrows
- * keep walking the tabs.
+ * A tab strip's keys. A focused strip owns Left, Right, h and l in its pane and
+ * claims them, so a chart in the same pane leaves them to it and the arrows
+ * keep walking the tabs. While content the user moved into holds them (a chart
+ * after Down, Enter or a click), the strip lets go until that content hands
+ * them back with Esc. Returns whether the strip has its keys now.
  */
-export function usePaneArrowClaim(claimed: boolean) {
+export function usePaneTabStripKeys(navigates: boolean, focused: boolean): { active: boolean; held: boolean } {
   const context = useContext(PaneArrowContext);
-  const id = useId();
-  const setArrowClaim = context?.setArrowClaim;
-  useEffect(() => {
-    if (!setArrowClaim) return;
-    setArrowClaim(id, claimed);
-    return () => setArrowClaim(id, false);
-  }, [claimed, id, setArrowClaim]);
+  const held = context?.held ?? false;
+  const active = navigates && focused && !held;
+  usePaneArrowMember(context?.setStrip, navigates);
+  usePaneArrowMember(context?.setArrowClaim, active);
+  return { active, held: navigates && held };
 }
 
 /** Whether a tab strip in this pane owns Left and Right. */
@@ -110,6 +145,16 @@ export function usePaneArrowsClaimed(): boolean {
   return useContext(PaneArrowContext)?.claimed ?? false;
 }
 
+/** Whether this pane has a tab strip that content can hand the keys back to. */
+export function usePaneHasTabStrip(): boolean {
+  return useContext(PaneArrowContext)?.strip ?? false;
+}
+
+/** While `held`, the pane's tab strips leave Left, Right, h and l to the caller. */
+export function usePaneArrowHold(held: boolean) {
+  usePaneArrowMember(useContext(PaneArrowContext)?.setArrowHold, held);
+}
+
 export function PaneFooterScope({
   active,
   children,

package/src/components/layout/pane/header.tsx

@@ -152,8 +152,9 @@ export function PaneHeader({
     capturePointerDrag(nativeRenderer, terminalHeaderRef.current);
     onHeaderMouseDown?.(event);
   }, [nativeRenderer, onHeaderMouseDown]);
-  // The grip, the title and the empty bar move the pane. A fullscreen pane
-  // cannot move, so there they move the desktop window instead.
+  // The whole bar moves the pane: the grip, the title, the empty space and its
+  // padding. Tabs and buttons stop the press before it gets here. A fullscreen
+  // pane cannot move, so there the bar moves the desktop window instead.
   const windowDrag = Boolean(titleBar) || (fullscreen && titleBarOverlay === true && nativeWindowChrome === true);
   const beginPaneDrag = (event: { stopPropagation?: () => void }) => {
     event.stopPropagation?.();
@@ -167,12 +168,9 @@ export function PaneHeader({
     }
     void rendererHost.startWindowDrag?.();
   };
-  const paneDragHandlers = {
-    onMouseDown: beginPaneDrag,
-    onMouseDrag: onHeaderMouseDrag,
-    onMouseDragEnd: onHeaderMouseDragEnd,
-  };
-  const chromeHandlers = windowDrag ? { onMouseDown: beginWindowDrag } : paneDragHandlers;
+  const barHandlers = windowDrag
+    ? { onMouseDown: beginWindowDrag }
+    : { onMouseDown: beginPaneDrag, onMouseDrag: onHeaderMouseDrag, onMouseDragEnd: onHeaderMouseDragEnd };
 
   if (nativePaneChrome) {
     const ruleColor = visuallyFocused ? colors.borderFocused : colors.border;
@@ -187,6 +185,8 @@ export function PaneHeader({
         data-floating={floating ? "true" : "false"}
         data-focused={focused ? "true" : "false"}
         data-window-mode-selected={windowModeSelected ? "true" : "false"}
+        data-drag-surface={windowDrag ? "window" : "pane"}
+        {...barHandlers}
         onMouseMove={onHeaderMouseMove}
         onContextMenu={onHeaderContextMenu}
         style={{
@@ -207,13 +207,13 @@ export function PaneHeader({
         }}
       >
         {!titleBar && (
-          <Box data-gloom-role="pane-grip" flexShrink={0} flexDirection="row" alignItems="center" style={{ alignSelf: "stretch", marginRight: 6 }} {...paneDragHandlers}>
+          <Box data-gloom-role="pane-grip" flexShrink={0} flexDirection="row" alignItems="center" style={{ alignSelf: "stretch", marginRight: 6 }}>
             <Icon name="grip" size={12} color={visuallyFocused ? colors.borderFocused : colors.textMuted} />
           </Box>
         )}
         {/* Full header height, so trimming the title to its capitals never lets
             this clip cut descenders. */}
-        <Box data-gloom-role="pane-header-chrome" minWidth={0} flexShrink={tabs ? 0 : 1} overflow="hidden" flexDirection="row" alignItems="center" style={{ alignSelf: "stretch", ...(tabs ? { maxWidth: "40%" } : {}) }} {...chromeHandlers}>
+        <Box data-gloom-role="pane-header-chrome" minWidth={0} flexShrink={tabs ? 0 : 1} overflow="hidden" flexDirection="row" alignItems="center" style={{ alignSelf: "stretch", ...(tabs ? { maxWidth: "40%" } : {}) }}>
           <Text
             fg={textColor}
             selectable={false}
@@ -285,7 +285,7 @@ export function PaneHeader({
             />
           </Box>
         ))}
-        <Box data-gloom-role="pane-header-chrome" flexGrow={1} minWidth={0} {...chromeHandlers} />
+        <Box flexGrow={1} minWidth={0} />
         {locked && (
           <Box data-gloom-role="pane-lock">
             <IconButton icon="lock" label="Locked: the close shortcut leaves this pane open" color={colors.textMuted} />

package/src/components/layout/shell/menu.ts

@@ -17,6 +17,7 @@ import {
 import { PANE_MANAGEMENT_ACCELERATORS, type PaneManagementAccelerators } from "./shortcuts";
 import { t } from "../../../i18n";
 import { displayWidth } from "../../../utils/format";
+import { fireAndForget } from "../../../utils/fire-and-forget";
 
 const MENU_MIN_WIDTH = 18;
 const MENU_MAX_WIDTH = 44;
@@ -174,7 +175,7 @@ export function menuForPane(
       label: "Pop Out",
       accelerator: accelerators.popOut,
       onSelect: () => {
-        void desktopWindowBridge.popOutPane?.(pane.instance.instanceId);
+        fireAndForget(desktopWindowBridge.popOutPane?.(pane.instance.instanceId), "desktop.popOutPane");
       },
     });
   }

package/src/components/layout/shell/pane/actions.ts

@@ -14,6 +14,7 @@ import type { LayoutConfig } from "../../../../types/config";
 import { isPaneLockedInLayout } from "../../../../pane-settings";
 import type { RendererHost } from "../../../../ui";
 import { capturePaneScreenshotPngBase64 } from "../../../../utils/dom-screenshot";
+import { fireAndForget } from "../../../../utils/fire-and-forget";
 import {
   exportPaneTableCsv,
   hasPaneTableExporter,
@@ -160,7 +161,7 @@ export function useShellPaneActions({
   const popOutFocusedPane = useCallback(() => {
     if (!focusedPaneId || desktopWindowBridge?.kind !== "main" || !desktopWindowBridge.popOutPane) return false;
     if (!isPaneInLayout(visibleLayout, focusedPaneId)) return false;
-    void desktopWindowBridge.popOutPane(focusedPaneId);
+    fireAndForget(desktopWindowBridge.popOutPane(focusedPaneId), "desktop.popOutPane");
     return true;
   }, [desktopWindowBridge, focusedPaneId, visibleLayout]);
 

package/src/components/layout/shell/pane/layers.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { useCallback, useMemo, useRef } from "react";
 import { Box } from "../../../../ui";
 import { resolveOccludedPaneIds } from "../pane-occlusion";
 import type {
@@ -117,6 +117,11 @@ export function ShellPaneLayers({
   // the compositor already skips covered windows, and a drag keeps everything
   // drawn so the preview never reveals a blank spot.
   const occludedPaneIds = nativePaneChrome || dragFloatingRect ? EMPTY_OCCLUSION : coveredPaneIds;
+  // The failure card's Close. Stable, so a focus or layout change does not
+  // re-render every memoized pane body.
+  const closePaneRef = useRef(handleFloatingClose);
+  closePaneRef.current = handleFloatingClose;
+  const closePane = useCallback((paneId: string) => closePaneRef.current(paneId), []);
 
   return (
     <>
@@ -131,6 +136,7 @@ export function ShellPaneLayers({
         const focused = focusedPaneId === leaf.instanceId && (!overlayOpen || menuPaneId === leaf.instanceId);
         const windowModeSelected = windowModePaneId === leaf.instanceId;
         const showActions = focused || hoveredPaneId === leaf.instanceId || menuPaneId === leaf.instanceId;
+        const title = getPaneTitle(pane);
         return (
           <Box
             key={`dock:${leaf.instanceId}`}
@@ -156,7 +162,7 @@ export function ShellPaneLayers({
                 return (
                   <PaneWrapper
                     paneId={leaf.instanceId}
-                    title={getPaneTitle(pane)}
+                    title={title}
                     focused={focused}
                     width={rect.width}
                     height={rect.height}
@@ -181,10 +187,12 @@ export function ShellPaneLayers({
                       component={pane.def.component}
                       paneId={pane.instance.instanceId}
                       paneType={pane.instance.paneId}
+                      title={title}
                       focused={focused}
                       width={bodyFrame.width ?? 1}
                       height={bodyFrame.height ?? 1}
                       inView={!coveredPaneIds.has(leaf.instanceId)}
+                      closePane={closePane}
                     />
                   </PaneWrapper>
                 );
@@ -205,6 +213,7 @@ export function ShellPaneLayers({
         const focused = focusedPaneId === pane.instance.instanceId && (!overlayOpen || menuPaneId === pane.instance.instanceId);
         const windowModeSelected = windowModePaneId === pane.instance.instanceId;
         const showActions = focused || hoveredPaneId === pane.instance.instanceId || menuPaneId === pane.instance.instanceId;
+        const title = getPaneTitle(pane);
         return (
           <PaneFooterProvider key={`float:${pane.instance.instanceId}`}>
             {(footer) => {
@@ -221,7 +230,7 @@ export function ShellPaneLayers({
               return (
                 <FloatingPaneWrapper
                   paneId={pane.instance.instanceId}
-                  title={getPaneTitle(pane)}
+                  title={title}
                   x={preview.x}
                   y={preview.y}
                   width={preview.width}
@@ -253,11 +262,13 @@ export function ShellPaneLayers({
                     component={pane.def.component}
                     paneId={pane.instance.instanceId}
                     paneType={pane.instance.paneId}
+                    title={title}
                     focused={focused}
                     width={bodyFrame.width ?? 1}
                     height={bodyFrame.height ?? 1}
                     inView={!coveredPaneIds.has(pane.instance.instanceId)}
                     onClose={handleFloatingClose}
+                    closePane={closePane}
                   />
                 </FloatingPaneWrapper>
               );

package/src/components/metric-treemap/heat-surface.tsx

@@ -1,7 +1,13 @@
 import { memo, useEffect, useMemo, useRef, useState, type CSSProperties } from "react";
 import { Box, Text, TextAttributes, useUiCapabilities } from "../../ui";
-import { blendHex, colors } from "../../theme/colors";
-import { heatmapColorDistance, resolveHeatmapSelectedTileColors, resolveHeatmapTileColors } from "../../theme/heat-colors";
+import { blendHex } from "../../theme/colors";
+import {
+  heatmapColorDistance,
+  resolveHeatmapSelectedTileColors,
+  resolveHeatmapSelectionRing,
+  resolveHeatmapTileColors,
+} from "../../theme/heat-colors";
+import { useThemeColors } from "../../theme/theme-context";
 import { t } from "../../i18n";
 import { clipToDisplayWidth, padTo } from "../../utils/format";
 import type { FloatMetricTreemapTile, MetricTreemapItem } from "./layout";
@@ -17,6 +23,7 @@ import {
   heatTileLabelCells,
   heatTileLabelPx,
   heatTileMotion,
+  heatTileValueWithSuffix,
 } from "./heat-tiles";
 
 type PreventableMouseEvent = { preventDefault(): void };
@@ -203,7 +210,7 @@ function useItemsById<T>(scene: MetricTreemapScene<T>, items: readonly MetricTre
 const VISIBLE_FADE_DISTANCE = 0.03;
 
 const DomHeatTile = memo(function DomHeatTile({
-  id, rect, canvasWidth, canvasHeight, gap, label, value, background, foreground,
+  id, rect, canvasWidth, canvasHeight, gap, label, value, valueSuffix, background, foreground,
   selected, reducedMotion, glide, pulseCount, events,
 }: {
   id: string;
@@ -213,6 +220,7 @@ const DomHeatTile = memo(function DomHeatTile({
   gap: number;
   label: string;
   value: string | null;
+  valueSuffix: string | null;
   background: string;
   foreground: string;
   selected: boolean;
@@ -222,6 +230,7 @@ const DomHeatTile = memo(function DomHeatTile({
   events: SurfaceEvents;
 }) {
   const text = heatTileLabelPx(rect.width - gap * 2, rect.height - gap * 2, label, value);
+  const shownValue = heatTileValueWithSuffix(value, valueSuffix, { width: rect.width - gap * 2, valuePx: text.valuePx });
   // Where this tile sat before the last relayout, kept to slide it from there.
   const placedRef = useRef(rect);
   const glideRef = useRef<{ dx: number; dy: number; count: number }>({ dx: 0, dy: 0, count: 0 });
@@ -234,13 +243,19 @@ const DomHeatTile = memo(function DomHeatTile({
     placedRef.current = rect;
   }
   const motion = heatTileMotion({ reducedMotion, glide, glideCount: glideRef.current.count, pulseCount });
+  const colors = useThemeColors();
+  const ring = resolveHeatmapSelectionRing(colors);
   // The colour this tile showed before, kept to fade out over the new one.
   const shownRef = useRef(background);
   const fadeRef = useRef<{ from: string; key: number } | null>(null);
+  const paletteRef = useRef(colors);
+  // A theme switch recolours every tile at once; only a move fades.
+  const themeChanged = paletteRef.current !== colors;
+  paletteRef.current = colors;
   if (shownRef.current !== background) {
     // A step too small to see snaps: a fade costs a compositor layer for its whole run.
     const visible = heatmapColorDistance(shownRef.current, background) >= VISIBLE_FADE_DISTANCE;
-    if (!motion.fadeAnimation) fadeRef.current = null;
+    if (!motion.fadeAnimation || themeChanged) fadeRef.current = null;
     else if (visible) fadeRef.current = { from: shownRef.current, key: (fadeRef.current?.key ?? 0) + 1 };
     shownRef.current = background;
   }
@@ -267,9 +282,9 @@ const DomHeatTile = memo(function DomHeatTile({
     justifyContent: "center",
     gap: 0,
     cursor: "pointer",
-    // The page's brightest text, then a hairline of the page: clear on a pink or
-    // aqua tile whether its own text is dark or light.
-    boxShadow: selected ? `inset 0 0 0 2px ${colors.textBright}, inset 0 0 0 3px ${colors.bg}` : undefined,
+    // The theme's text tone against the page, then a hairline of the page: one
+    // of the two stands out on any tile, bright or dim.
+    boxShadow: selected ? `inset 0 0 0 2px ${ring.outer}, inset 0 0 0 3px ${ring.inner}` : undefined,
     zIndex: selected ? 1 : undefined,
     ...(motion.glideAnimation
       ? {
@@ -336,7 +351,7 @@ const DomHeatTile = memo(function DomHeatTile({
         <Text style={{ ...lineStyle, fontSize: text.tickerPx, fontWeight: 700, lineHeight: 1.12 }}>{label}</Text>
       )}
       {text.tier === "full" && value && (
-        <Text style={{ ...lineStyle, fontSize: text.valuePx, fontWeight: 500, lineHeight: 1.12 }}>{value}</Text>
+        <Text style={{ ...lineStyle, fontSize: text.valuePx, fontWeight: 500, lineHeight: 1.12 }}>{shownValue}</Text>
       )}
     </Box>
   );
@@ -347,6 +362,7 @@ function headerLabel(header: MetricTreemapHeader): string {
 }
 
 function DomHeader({ header, canvasWidth, canvasHeight }: { header: MetricTreemapHeader; canvasWidth: number; canvasHeight: number }) {
+  const colors = useThemeColors();
   const sector = header.level === 0 && !header.other;
   return (
     <Box
@@ -402,6 +418,7 @@ function DomTooltip<T>({ state, itemsById, otherLines }: {
   itemsById: ReadonlyMap<string, MetricTreemapItem<T>>;
   otherLines: readonly string[] | null;
 }) {
+  const colors = useThemeColors();
   if (!state) return null;
   const lines = state.id === OTHER_ID
     ? otherLines
@@ -457,6 +474,7 @@ function DomHeatTreemap<T>({
   scene, items, width, height, selectedId, onSelect, onActivate, otherTooltip, otherSummary: summarizeOther,
 }: HeatTreemapSurfaceProps<T>) {
   const reducedMotion = usePrefersReducedMotion();
+  const colors = useThemeColors();
   const itemsById = useItemsById(scene, items);
   const chartRef = useRef<{ getBoundingClientRect?: () => { x: number; y: number; width: number; height: number } } | null>(null);
   const [tooltip, setTooltip] = useState<TooltipState | null>(null);
@@ -543,7 +561,7 @@ function DomHeatTreemap<T>({
         )}
         {scene.tiles.map((tile) => {
           const item = itemsById.get(tile.item.id) ?? tile.item;
-          const tileColors = resolveHeatmapTileColors(item.colorValue);
+          const tileColors = resolveHeatmapTileColors(item.colorValue, colors);
           return (
             <DomHeatTile
               key={tile.item.id}
@@ -554,6 +572,7 @@ function DomHeatTreemap<T>({
               gap={gap}
               label={item.label}
               value={item.primaryText ?? null}
+              valueSuffix={item.primaryTextSuffix ?? null}
               background={tileColors.background}
               foreground={tileColors.foreground}
               selected={tile.item.id === selectedId}
@@ -586,7 +605,7 @@ function tileRect(tile: FloatMetricTreemapTile<unknown>): TreemapRect {
 // Terminal: whole cells, a one-cell gutter right of and under each tile.
 
 const TerminalHeatTile = memo(function TerminalHeatTile({
-  id, x, y, width, height, label, value, colorValue, selected, events,
+  id, x, y, width, height, label, value, valueSuffix, colorValue, selected, events,
 }: {
   id: string;
   x: number;
@@ -595,17 +614,21 @@ const TerminalHeatTile = memo(function TerminalHeatTile({
   height: number;
   label: string;
   value: string | null;
+  valueSuffix: string | null;
   colorValue: number | null;
   selected: boolean;
   events: SurfaceEvents;
 }) {
+  // Read here, not passed down: a theme switch reaches every tile even though its props are the same.
+  const colors = useThemeColors();
   const { background, foreground } = selected
-    ? resolveHeatmapSelectedTileColors(colorValue)
-    : resolveHeatmapTileColors(colorValue);
+    ? resolveHeatmapSelectedTileColors(colorValue, colors)
+    : resolveHeatmapTileColors(colorValue, colors);
   const renderWidth = Math.max(1, width - (width >= 3 ? 1 : 0));
   const renderHeight = Math.max(1, height - (height >= 2 ? 1 : 0));
   const tier = heatTileLabelCells(renderWidth, renderHeight, label, value);
-  const lines = tier === "full" && value ? [label, value] : tier === "none" ? [] : [label];
+  const shownValue = heatTileValueWithSuffix(value, valueSuffix, { width: renderWidth });
+  const lines = tier === "full" && shownValue ? [label, shownValue] : tier === "none" ? [] : [label];
   const top = Math.max(0, Math.floor((renderHeight - lines.length) / 2));
   return (
     <Box
@@ -641,6 +664,7 @@ const TerminalHeatTile = memo(function TerminalHeatTile({
 function TerminalHeatTreemap<T>({
   scene, items, width, height, selectedId, onSelect, onActivate, otherSummary: summarizeOther,
 }: HeatTreemapSurfaceProps<T>) {
+  const colors = useThemeColors();
   const itemsById = useItemsById(scene, items);
   const events = useSurfaceEvents(itemsById, onSelect, onActivate);
   const other = scene.other;
@@ -688,6 +712,7 @@ function TerminalHeatTreemap<T>({
               height={tile.height}
               label={item.label}
               value={item.primaryText ?? null}
+              valueSuffix={item.primaryTextSuffix ?? null}
               colorValue={item.colorValue ?? null}
               selected={tile.item.id === selectedId}
               events={events}
@@ -701,12 +726,14 @@ function TerminalHeatTreemap<T>({
 
 /**
  * The heat map look of the treemap: optional sector and industry blocks,
- * calm tiles (ticker, then the move, as space allows), a continuous
- * pink-indigo-teal scale, and on the desktop a hover tooltip, colour fades,
- * a short pulse on a tile whose move jumps and a glide when sizes change.
+ * calm tiles (ticker, then the move, as space allows), a continuous scale
+ * from the theme's down colour to its up colour, and on the desktop a hover
+ * tooltip, colour fades, a short pulse on a tile whose move jumps and a glide
+ * when sizes change.
  */
 export function HeatTreemapSurface<T>(props: HeatTreemapSurfaceProps<T>) {
   const { nativePaneChrome } = useUiCapabilities();
+  const colors = useThemeColors();
   if (props.scene.tiles.length === 0) {
     return (
       <Box width={props.width} height={props.height} paddingX={1} paddingY={1}>

package/src/components/metric-treemap/heat-tiles.ts

@@ -57,6 +57,24 @@ export function heatTileLabelPx(width: number, height: number, ticker: string, v
   return NO_LABEL;
 }
 
+/**
+ * The move with its qualifier (an after-hours move's AH) where that still fits
+ * at the size the move alone was given, else the move alone. The qualifier
+ * never shrinks the text or drops the move.
+ */
+export function heatTileValueWithSuffix(
+  value: string | null,
+  suffix: string | null | undefined,
+  room: { width: number; valuePx?: number },
+): string | null {
+  if (!value || !suffix) return value;
+  const withSuffix = `${value} ${suffix}`;
+  const width = room.valuePx == null
+    ? withSuffix.length
+    : withSuffix.length * MONO_CHAR_EM * room.valuePx + TILE_PAD_X_PX * 2;
+  return width <= room.width ? withSuffix : value;
+}
+
 /** The same tiers on a cell grid: whole words or nothing, never a clipped ticker. */
 export function heatTileLabelCells(width: number, height: number, ticker: string, value: string | null): HeatTileLabelTier {
   if (width < ticker.length || height < 1 || ticker.length === 0) return "none";

package/src/components/metric-treemap/layout.ts

@@ -4,6 +4,8 @@ export interface MetricTreemapItem<T = unknown> {
   weight: number | null | undefined;
   colorValue?: number | null;
   primaryText?: string | null;
+  /** A short qualifier after primaryText, such as AH for an after-hours move; the heat map shows it where the tile has room. */
+  primaryTextSuffix?: string | null;
   secondaryText?: string | null;
   tertiaryText?: string | null;
   /** Optional hierarchy for the heat map layout (a sector); the flat layouts ignore it. */