gloomberb 0.16.1 → 0.16.3

package/src/components/layout/shell/terminal-pointer-runtime.ts

@@ -87,8 +87,8 @@ export function useShellTerminalPointerRuntime({
   windowMode,
 }: UseShellTerminalPointerRuntimeOptions) {
   const {
-    dragFloatingRect,
-    dragRef,
+    live,
+    startDrag,
     updateDividerPreview,
     updateDragFloatingRect,
   } = dragRuntime;
@@ -112,7 +112,7 @@ export function useShellTerminalPointerRuntime({
 
       for (const { pane, rect: visibleRect } of sortedFloatingPanes(visibleFloatingPanes)) {
         const paneId = pane.instance.instanceId;
-        const rect = getVisibleFloatingRect(visibleRect, paneId, dragFloatingRect, width, contentHeight);
+        const rect = getVisibleFloatingRect(visibleRect, paneId, live.get().floating, width, contentHeight);
         if (!pointInRect({ x: rect.x, y: rect.y, width: rect.width, height: rect.height }, event.x, shellY)) continue;
 
         const relativeX = event.x - rect.x;
@@ -120,13 +120,13 @@ export function useShellTerminalPointerRuntime({
         selectWindowModePane(paneId);
 
         if (relativeX >= rect.width - 2 && relativeY >= rect.height - 1) {
-          dragRef.current = {
+          startDrag({
             type: "float-resize",
             paneId,
             startX: preciseX,
             startY: preciseShellY,
             origRect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
-          };
+          });
           updateDragFloatingRect({ paneId, rect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height } });
         }
 
@@ -138,7 +138,7 @@ export function useShellTerminalPointerRuntime({
       if (!transientFocusActive) {
         for (const divider of dockDividerLayouts) {
           if (!pointInRect(divider.rect, event.x, shellY)) continue;
-          dragRef.current = {
+          startDrag({
             type: "divider",
             path: divider.path,
             axis: divider.axis,
@@ -146,7 +146,7 @@ export function useShellTerminalPointerRuntime({
             startY: preciseShellY,
             startRatio: divider.ratio,
             bounds: divider.bounds,
-          };
+          });
           updateDividerPreview({
             pathKey: divider.path.join("."),
             rect: divider.rect,
@@ -179,7 +179,7 @@ export function useShellTerminalPointerRuntime({
 
       for (const { pane, rect: visibleRect } of sortedFloatingPanes(visibleFloatingPanes)) {
         const paneId = pane.instance.instanceId;
-        const rect = getVisibleFloatingRect(visibleRect, paneId, dragFloatingRect, width, contentHeight);
+        const rect = getVisibleFloatingRect(visibleRect, paneId, live.get().floating, width, contentHeight);
         if (!pointInRect({ x: rect.x, y: rect.y, width: rect.width, height: rect.height }, event.x, shellY)) continue;
         const relativeX = event.x - rect.x;
         const relativeY = shellY - rect.y;
@@ -212,13 +212,13 @@ export function useShellTerminalPointerRuntime({
           return;
         }
         if (!transientFocusActive && relativeX >= rect.width - 2 && relativeY >= rect.height - 1) {
-          dragRef.current = {
+          startDrag({
             type: "float-resize",
             paneId,
             startX: preciseX,
             startY: preciseShellY,
             origRect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
-          };
+          });
           updateDragFloatingRect({ paneId, rect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height } });
           event.stopPropagation();
           event.preventDefault();
@@ -230,14 +230,14 @@ export function useShellTerminalPointerRuntime({
           return;
         }
         if (relativeY === 0) {
-          dragRef.current = {
+          startDrag({
             type: "pane-drag",
             paneId,
             mode: "floating",
             startX: preciseX,
             startY: preciseShellY,
             origRect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
-          };
+          });
           updateDragFloatingRect({ paneId, rect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height } });
           event.stopPropagation();
           event.preventDefault();
@@ -248,7 +248,7 @@ export function useShellTerminalPointerRuntime({
 
       for (const divider of dockDividerLayouts) {
         if (!pointInRect(divider.rect, event.x, shellY)) continue;
-        dragRef.current = {
+        startDrag({
           type: "divider",
           path: divider.path,
           axis: divider.axis,
@@ -256,7 +256,7 @@ export function useShellTerminalPointerRuntime({
           startY: preciseShellY,
           startRatio: divider.ratio,
           bounds: divider.bounds,
-        };
+        });
         updateDividerPreview({
           pathKey: divider.path.join("."),
           rect: divider.rect,
@@ -308,14 +308,14 @@ export function useShellTerminalPointerRuntime({
           return;
         }
         if (relativeY === 0) {
-          dragRef.current = {
+          startDrag({
             type: "pane-drag",
             paneId: leaf.instanceId,
             mode: "docked",
             startX: preciseX,
             startY: preciseShellY,
             origRect: { x: leaf.rect.x, y: leaf.rect.y, width: leaf.rect.width, height: leaf.rect.height },
-          };
+          });
           event.stopPropagation();
           event.preventDefault();
           return;
@@ -333,12 +333,11 @@ export function useShellTerminalPointerRuntime({
     contentHeight,
     dockDividerLayouts,
     dockLeafLayouts,
-    dragFloatingRect,
-    dragRef,
     focusPane,
     focusedPaneId,
     handleActiveDrag,
     handleFloatingClose,
+    live,
     restoreFullscreen,
     menuState,
     openPaneMenu,
@@ -346,6 +345,7 @@ export function useShellTerminalPointerRuntime({
     selectWindowModePane,
     setHoveredMenuItemId,
     setMenuState,
+    startDrag,
     transientFocusActive,
     updateDividerPreview,
     updateDragFloatingRect,

package/src/components/layout/shell/window-mode/overlays.tsx

@@ -1,3 +1,4 @@
+import { useCallback } from "react";
 import { Box, Text } from "../../../../ui";
 import type {
   DockGeometryOptions,
@@ -8,6 +9,7 @@ import type {
 } from "../../../../layout/pane-manager";
 import { colors } from "../../../../theme/colors";
 import { constrainFloatingRectToBounds } from "../drag";
+import { useLiveDrag, type LiveDragGeometry, type LiveDragStore } from "../drag/live";
 import {
   getFloatingResizeCornerPosition,
   type WindowEditDockMovePreview,
@@ -27,9 +29,9 @@ interface ShellWindowModeOverlaysProps {
   contentHeight: number;
   dockGeometryOptions: DockGeometryOptions;
   dockLeafLayouts: DockLeafLayout[];
-  dragFloatingRect: { paneId: string; rect: FloatingRect } | null;
   focusedPaneId: string | null;
   getPaneTitle: (pane: ResolvedPane) => string;
+  live: LiveDragStore;
   menuOpen: boolean;
   nativePaneChrome: boolean;
   nativeWindowModePanelRect: LayoutBounds | null;
@@ -64,9 +66,9 @@ export function ShellWindowModeOverlays({
   contentHeight,
   dockGeometryOptions,
   dockLeafLayouts,
-  dragFloatingRect,
   focusedPaneId,
   getPaneTitle,
+  live,
   menuOpen,
   nativePaneChrome,
   nativeWindowModePanelRect,
@@ -84,9 +86,15 @@ export function ShellWindowModeOverlays({
   const highlightedDockedLeaf = highlightedPaneId && !highlightedFloatingPane
     ? dockLeafLayouts.find((leaf) => leaf.instanceId === highlightedPaneId)
     : null;
+  // The terminal frame follows a floating pane while it moves; desktop panes draw their own.
+  const followedPaneId = !nativePaneChrome && highlightedFloatingPane ? highlightedFloatingPane.pane.instance.instanceId : null;
+  const selectDragRect = useCallback((geometry: LiveDragGeometry) => (
+    followedPaneId && geometry.floating?.paneId === followedPaneId ? geometry.floating.rect : null
+  ), [followedPaneId]);
+  const dragRect = useLiveDrag(live, selectDragRect);
   const highlightedRect = highlightedFloatingPane
-    ? dragFloatingRect?.paneId === highlightedFloatingPane.pane.instance.instanceId
-      ? constrainFloatingRectToBounds(dragFloatingRect.rect, width, contentHeight)
+    ? dragRect
+      ? constrainFloatingRectToBounds(dragRect, width, contentHeight)
       : highlightedFloatingPane.rect
     : highlightedDockedLeaf?.rect ?? null;
   const highlightedZIndex = highlightedFloatingPane

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. */