gloomberb 0.16.0 → 0.16.2

package/src/renderers/dom/desktop/popover.tsx

@@ -2,12 +2,16 @@
 
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
-import type { HostPopoverProps } from "../../../ui";
+import type { BoxRenderable, HostPopoverProps } from "../../../ui";
 import { blendHex } from "../../../theme/colors";
+import { WEB_CELL_HEIGHT, WEB_CELL_WIDTH } from "../../../theme/font-scale";
 import { useThemeColors } from "../../../theme/theme-context";
 
 const VIEWPORT_MARGIN = 10;
+/** How far a popover kept inside its pane stays off the pane's edge. */
+const PANE_MARGIN = 4;
 const POPOVER_GAP = 6;
+const PANE_SELECTOR = '[data-gloom-role="pane-window"], [data-gloom-role="detached-pane-window"]';
 /** `.gloom-popover` in styles.css: above dialogs and toasts. */
 const POPOVER_Z_INDEX = 10_001;
 
@@ -21,6 +25,51 @@ function cssSize(value: number | string | undefined): number | string | undefine
   return typeof value === "number" ? `${value}px` : value;
 }
 
+interface Edges {
+  left: number;
+  top: number;
+  right: number;
+  bottom: number;
+}
+
+/**
+ * Where an anchor element is now, in viewport pixels. Null once it is gone
+ * from the page (a removed message), so the popover falls back to its trigger.
+ */
+function anchorEdges(anchor: BoxRenderable): Edges | null {
+  const rect = anchor.getBoundingClientRect?.();
+  if (rect) {
+    if (rect.width === 0 && rect.height === 0) return null;
+    return { left: rect.x, top: rect.y, right: rect.x + rect.width, bottom: rect.y + rect.height };
+  }
+  const bounds = anchor.absoluteBounds;
+  if (!bounds) return null;
+  return {
+    left: bounds.x * WEB_CELL_WIDTH,
+    top: bounds.y * WEB_CELL_HEIGHT,
+    right: (bounds.x + bounds.width) * WEB_CELL_WIDTH,
+    bottom: (bounds.y + bounds.height) * WEB_CELL_HEIGHT,
+  };
+}
+
+/** The area a popover must stay in: the window, and for `pane` the pane that holds its trigger too. */
+function placementEdges(wrapper: Element | null, boundary: HostPopoverProps["boundary"]): Edges {
+  const viewport = {
+    left: VIEWPORT_MARGIN,
+    top: VIEWPORT_MARGIN,
+    right: window.innerWidth - VIEWPORT_MARGIN,
+    bottom: window.innerHeight - VIEWPORT_MARGIN,
+  };
+  const pane = boundary === "pane" ? wrapper?.closest(PANE_SELECTOR)?.getBoundingClientRect() : null;
+  if (!pane) return viewport;
+  return {
+    left: Math.max(viewport.left, pane.left + PANE_MARGIN),
+    top: Math.max(viewport.top, pane.top + PANE_MARGIN),
+    right: Math.min(viewport.right, pane.right - PANE_MARGIN),
+    bottom: Math.min(viewport.bottom, pane.bottom - PANE_MARGIN),
+  };
+}
+
 /**
  * The popover is portalled to <body>, so its z-index only competes in the root
  * stacking context. A trigger inside a surface stacked above the popover layer
@@ -45,6 +94,10 @@ export function WebPopover({
   trigger,
   children,
   anchorPoint,
+  anchor,
+  boundary = "viewport",
+  onPointerEnter,
+  onPointerLeave,
   placement = "bottom-start",
   minWidth = 280,
   maxWidth = "min(420px, calc(100vw - 20px))",
@@ -59,18 +112,19 @@ export function WebPopover({
   const [zIndex, setZIndex] = useState<number | undefined>(undefined);
 
   const updatePosition = useCallback(() => {
-    const anchor = anchorRef.current;
+    const wrapper = anchorRef.current;
     const popover = popoverRef.current;
-    if (!anchor || !popover) return;
+    if (!wrapper || !popover) return;
 
     const popoverRect = popover.getBoundingClientRect();
-    const triggerRect = anchor.getBoundingClientRect();
+    const triggerRect = wrapper.getBoundingClientRect();
+    const elementEdges = anchor ? anchorEdges(anchor) : null;
     // Keyboard-driven popovers can intentionally omit a visible trigger. In
     // that case the anchor wrapper still inherits a line-height, so its DOM
     // rect is not truly empty even though there is nothing useful to anchor to.
     // Center these unanchored menus; explicit pointer/footer coordinates still
     // take precedence below.
-    if (!anchorPoint && (trigger == null || (triggerRect.width === 0 && triggerRect.height === 0))) {
+    if (!elementEdges && !anchorPoint && (trigger == null || (triggerRect.width === 0 && triggerRect.height === 0))) {
       setPosition({
         left: Math.max(
           VIEWPORT_MARGIN,
@@ -90,28 +144,26 @@ export function WebPopover({
       });
       return;
     }
-    const anchorRect = anchorPoint
+    const anchorRect = elementEdges ?? (anchorPoint
       ? {
         left: anchorPoint.x,
         right: anchorPoint.x,
         top: anchorPoint.y,
         bottom: anchorPoint.y,
       }
-      : triggerRect;
+      : triggerRect);
+    const edges = placementEdges(wrapper, boundary);
     const preferredLeft = placement === "bottom-end"
       ? anchorRect.right - popoverRect.width
       : anchorRect.left;
-    const left = Math.max(
-      VIEWPORT_MARGIN,
-      Math.min(preferredLeft, window.innerWidth - popoverRect.width - VIEWPORT_MARGIN),
-    );
+    const left = Math.max(edges.left, Math.min(preferredLeft, edges.right - popoverRect.width));
     const below = anchorRect.bottom + POPOVER_GAP;
     const above = anchorRect.top - popoverRect.height - POPOVER_GAP;
-    const top = below + popoverRect.height <= window.innerHeight - VIEWPORT_MARGIN
+    const top = below + popoverRect.height <= edges.bottom
       ? below
-      : Math.max(VIEWPORT_MARGIN, above);
+      : Math.max(edges.top, above);
     setPosition({ left, top, visible: true });
-  }, [anchorPoint, placement, trigger]);
+  }, [anchor, anchorPoint, boundary, placement, trigger]);
 
   useLayoutEffect(() => {
     if (!open) {
@@ -123,10 +175,15 @@ export function WebPopover({
     const frame = window.requestAnimationFrame(updatePosition);
     window.addEventListener("resize", updatePosition);
     document.addEventListener("scroll", updatePosition, true);
+    // New content (a hover card swapped to another name) can change the size
+    // the placement was worked out for.
+    const resizeObserver = typeof ResizeObserver === "function" ? new ResizeObserver(updatePosition) : null;
+    if (popoverRef.current) resizeObserver?.observe(popoverRef.current);
     return () => {
       window.cancelAnimationFrame(frame);
       window.removeEventListener("resize", updatePosition);
       document.removeEventListener("scroll", updatePosition, true);
+      resizeObserver?.disconnect();
     };
   }, [open, updatePosition]);
 
@@ -181,6 +238,8 @@ export function WebPopover({
           tabIndex={-1}
           onMouseDown={(event) => event.stopPropagation()}
           onClick={(event) => event.stopPropagation()}
+          onMouseEnter={onPointerEnter}
+          onMouseLeave={onPointerLeave}
           style={{
             left: position.left,
             top: position.top,

package/src/renderers/dom/host/box.tsx

@@ -88,11 +88,45 @@ export const WebBox = forwardRef<HTMLDivElement, Record<string, unknown> & { chi
       });
     };
 
+    const lastPointRef = useRef({ x: 0, y: 0 });
+    const dragSessionRef = useRef<{
+      move: (event: globalThis.MouseEvent) => void;
+      up: (event: globalThis.MouseEvent) => void;
+      cancel: () => void;
+    } | null>(null);
+    const endDocumentDragRef = useRef<(event: globalThis.MouseEvent | null, notify: boolean) => void>(() => {});
+    endDocumentDragRef.current = (event, notify) => {
+      const session = dragSessionRef.current;
+      const wasDragging = draggingRef.current;
+      if (!session && !wasDragging) return;
+      draggingRef.current = false;
+      dragSessionRef.current = null;
+      document.body.classList.remove("gloom-dragging");
+      if (session) {
+        document.removeEventListener("mousemove", session.move);
+        document.removeEventListener("mouseup", session.up);
+        document.removeEventListener("pointerup", session.up);
+        document.removeEventListener("pointercancel", session.cancel);
+        window.removeEventListener("blur", session.cancel);
+      }
+      if (!notify || !wasDragging) return;
+      const point = event ?? new MouseEvent("mouseup", {
+        clientX: lastPointRef.current.x,
+        clientY: lastPointRef.current.y,
+        button: 0,
+        bubbles: true,
+      });
+      flushPendingFrameNow();
+      callMouseHandler(propsRef.current.onMouse, point, "up");
+      callMouseHandler(propsRef.current.onMouseUp, point, "up");
+      callMouseHandler(propsRef.current.onMouseDragEnd, point, "drag-end");
+    };
+
     useEffect(() => () => {
       cancelPendingFrame();
       pendingMoveRef.current = null;
       pendingDragRef.current = null;
-      document.body.classList.remove("gloom-dragging");
+      endDocumentDragRef.current(null, true);
     }, []);
 
     const handlesWheel = typeof props.onMouseScroll === "function";
@@ -106,40 +140,49 @@ export const WebBox = forwardRef<HTMLDivElement, Record<string, unknown> & { chi
       return () => element.removeEventListener("wheel", handleWheel);
     }, [handlesWheel]);
 
-    const stopDocumentDrag = () => {
-      if (!draggingRef.current) return;
-      draggingRef.current = false;
-      document.body.classList.remove("gloom-dragging");
-      document.removeEventListener("mousemove", handleDocumentMove);
-      document.removeEventListener("mouseup", handleDocumentUp);
-    };
-
-    const handleDocumentMove = (event: globalThis.MouseEvent) => {
-      if (!draggingRef.current) return;
-      scheduleFrameMouseHandler(event, "drag");
-    };
-
-    const handleDocumentUp = (event: globalThis.MouseEvent) => {
-      if (!draggingRef.current) return;
-      flushPendingFrameNow();
-      callMouseHandler(propsRef.current.onMouse, event, "up");
-      callMouseHandler(propsRef.current.onMouseUp, event, "up");
-      callMouseHandler(propsRef.current.onMouseDragEnd, event, "drag-end");
-      stopDocumentDrag();
-    };
-
     const handleMouseDown = (event: MouseEvent) => {
       const hasSyntheticDrag = typeof propsRef.current.onMouse === "function";
       const hasDirectDrag = typeof propsRef.current.onMouseDrag === "function" || typeof propsRef.current.onMouseDragEnd === "function";
       pendingMoveRef.current = null;
+      // A press that never saw mouseup (the window move took the pointer) is still tracked.
+      // Finish it before the new press, so its drag-end cannot clear the drag this press starts.
+      endDocumentDragRef.current(null, true);
       callMouseHandler(propsRef.current.onMouseDown, event, "down");
       if (event.button !== 0 || (event.isPropagationStopped() && !hasDirectDrag)) return;
       if (!hasSyntheticDrag && !hasDirectDrag) return;
       callMouseHandler(propsRef.current.onMouse, event, "down");
       draggingRef.current = true;
-      document.body.classList.add("gloom-dragging");
-      document.addEventListener("mousemove", handleDocumentMove);
-      document.addEventListener("mouseup", handleDocumentUp);
+      lastPointRef.current = { x: event.clientX, y: event.clientY };
+      const originX = event.clientX;
+      const originY = event.clientY;
+      const move = (moveEvent: globalThis.MouseEvent) => {
+        if (!draggingRef.current) return;
+        lastPointRef.current = { x: moveEvent.clientX, y: moveEvent.clientY };
+        // The button is up and mouseup never arrived. End the drag instead of following the cursor.
+        if (moveEvent.buttons === 0) {
+          endDocumentDragRef.current(moveEvent, true);
+          return;
+        }
+        const dx = moveEvent.clientX - originX;
+        const dy = moveEvent.clientY - originY;
+        if (!document.body.classList.contains("gloom-dragging")) {
+          if (dx * dx + dy * dy < 9) return;
+          document.body.classList.add("gloom-dragging");
+        }
+        scheduleFrameMouseHandler(moveEvent, "drag");
+      };
+      const up = (upEvent: globalThis.MouseEvent) => {
+        endDocumentDragRef.current(upEvent, true);
+      };
+      const cancel = () => {
+        endDocumentDragRef.current(null, true);
+      };
+      dragSessionRef.current = { move, up, cancel };
+      document.addEventListener("mousemove", move);
+      document.addEventListener("mouseup", up);
+      document.addEventListener("pointerup", up);
+      document.addEventListener("pointercancel", cancel);
+      window.addEventListener("blur", cancel);
     };
 
     const handleMouseDownCapture = (event: MouseEvent) => {

package/src/renderers/dom/host/input.tsx

@@ -27,9 +27,21 @@ function textInputStyle(props: Record<string, unknown>, multiline: boolean): CSS
   const backgroundColor = focused && typeof props.focusedBackgroundColor === "string"
     ? props.focusedBackgroundColor
     : props.backgroundColor;
+  const base = commonStyle(props);
+  const overrides = props.style as CSSProperties | undefined;
 
   return {
-    ...commonStyle(props),
+    ...base,
+    // Flush unless the caller insets the text. Longhands, never the `padding`
+    // shorthand: React writes style keys in order, and a shorthand here landed
+    // after a caller's `paddingLeft` and wiped it, so every bordered field's
+    // text sat on its border.
+    ...(overrides?.padding === undefined ? {
+      paddingTop: base.paddingTop ?? 0,
+      paddingRight: base.paddingRight ?? 0,
+      paddingBottom: base.paddingBottom ?? 0,
+      paddingLeft: base.paddingLeft ?? 0,
+    } : {}),
     display: "block",
     resize: "none",
     border: "none",
@@ -40,10 +52,9 @@ function textInputStyle(props: Record<string, unknown>, multiline: boolean): CSS
     overflow: multiline ? "auto" : "hidden",
     width: cellWidth(props.width) ?? "100%",
     height: cellHeight(props.height) ?? (multiline ? "100%" : "var(--cell-h)"),
-    padding: 0,
     margin: 0,
     caretColor: typeof props.cursorColor === "string" ? props.cursorColor : "auto",
-    ...(props.style as CSSProperties | undefined),
+    ...overrides,
   };
 }
 

package/src/renderers/dom/host/tabs.tsx

@@ -27,6 +27,7 @@ export function WebTabs({
   addLabel = "+",
   onAdd,
   onReorder,
+  onDrag,
   focused = false,
   palette,
 }: HostTabsProps) {
@@ -138,6 +139,41 @@ export function WebTabs({
     dragCleanupRef.current = cleanup;
   };
 
+  // A click selects the tab. A drag moves the window, and the listeners come off
+  // before that starts so a native move that swallows mouseup cannot leave them on.
+  const startPressDrag = (event: ReactMouseEvent<HTMLButtonElement>) => {
+    if (event.button !== 0 || !onDrag) return;
+    dragCleanupRef.current?.();
+    const startX = event.clientX;
+    const startY = event.clientY;
+    let moved = false;
+    const cleanup = () => {
+      document.removeEventListener("mousemove", handleMove);
+      document.removeEventListener("mouseup", handleUp);
+      window.removeEventListener("blur", handleUp);
+      dragCleanupRef.current = null;
+    };
+    const handleMove = (moveEvent: MouseEvent) => {
+      if (moveEvent.buttons === 0) {
+        cleanup();
+        return;
+      }
+      if (moved) return;
+      if (Math.abs(moveEvent.clientX - startX) < 4 && Math.abs(moveEvent.clientY - startY) < 4) return;
+      moved = true;
+      suppressClickRef.current = true;
+      cleanup();
+      onDrag();
+    };
+    const handleUp = () => {
+      cleanup();
+    };
+    document.addEventListener("mousemove", handleMove);
+    document.addEventListener("mouseup", handleUp);
+    window.addEventListener("blur", handleUp);
+    dragCleanupRef.current = cleanup;
+  };
+
   const resolveTabBackground = (active: boolean, hovered: boolean) => {
     if (header) return active ? "var(--pane-tab-active-bg)" : hovered ? "var(--pane-tab-hover-bg)" : "transparent";
     if (active && variant === "pill") {
@@ -264,7 +300,7 @@ export function WebTabs({
             style={tabStyle}
             onMouseEnter={() => setHoveredValue(tab.value)}
             onMouseLeave={() => setHoveredValue((current) => (current === tab.value ? null : current))}
-            onMouseDown={reorderable ? (event) => startReorder(tab.value, event) : undefined}
+            onMouseDown={reorderable ? (event) => startReorder(tab.value, event) : onDrag ? startPressDrag : undefined}
             onClick={(event) => {
               if (suppressClickRef.current) {
                 suppressClickRef.current = false;

package/src/renderers/dom/styles.css

@@ -136,26 +136,33 @@ button, [data-gloom-interactive="true"] { cursor: pointer; }
 [data-gloom-role="pane-header"] {
   align-items: center;
   padding-inline: 7px;
-  cursor: grab;
+  cursor: default;
   -webkit-user-select: none;
   user-select: none;
 }
-[data-gloom-role="pane-header"] * {
-  cursor: inherit;
+[data-gloom-role="pane-header"][data-drag-surface="pane"] {
+  cursor: grab;
+}
+[data-gloom-role="pane-header-tabs"] {
+  cursor: default;
+}
+[data-gloom-role="pane-header"] [data-gloom-role="tab-button"],
+[data-gloom-role="pane-header"] button,
+[data-gloom-role="pane-header"] [data-gloom-interactive="true"] {
+  cursor: pointer;
 }
 [data-gloom-role="pane-header"][data-window-mode-selected="true"] {
   background: color-mix(in srgb, var(--gloom-border-focused) 24%, var(--gloom-panel)) !important;
 }
 [data-gloom-role="pane-action"],
-[data-gloom-role="pane-close"] {
+[data-gloom-role="pane-close"],
+[data-gloom-role="pane-restore"] {
   cursor: pointer;
 }
+body.gloom-dragging,
 body.gloom-dragging [data-gloom-role="pane-header"] {
   cursor: grabbing;
 }
-body.gloom-dragging {
-  cursor: grabbing;
-}
 [data-gloom-role="pane-title"] {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -273,6 +280,33 @@ body.gloom-dragging {
     0 0 0 4px color-mix(in srgb, var(--gloom-border-focused) 28%, transparent);
   pointer-events: none;
 }
+/* Heat map tiles animate only transforms and opacity, which the compositor
+   runs on its own: a tile sliding from its old place after a relayout, the
+   previous colour fading out over the new one, and a light flash on a tile
+   whose move just jumped. */
+@keyframes gloom-heat-glide-a {
+  from { transform: translate(var(--heat-glide-x, 0), var(--heat-glide-y, 0)); }
+  to { transform: none; }
+}
+@keyframes gloom-heat-glide-b {
+  from { transform: translate(var(--heat-glide-x, 0), var(--heat-glide-y, 0)); }
+  to { transform: none; }
+}
+@keyframes gloom-heat-fade {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+@keyframes gloom-heat-pulse {
+  0%, 100% { opacity: 0; }
+  30% { opacity: 0.16; }
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-gloom-role="heat-tile"],
+  [data-gloom-role="heat-tile"] * {
+    transition: none !important;
+    animation: none !important;
+  }
+}
 [data-gloom-role="chart-surface"] {
   cursor: crosshair;
 }

package/src/renderers/electrobun/bun/desktop/backend-requests.ts

@@ -1,3 +1,4 @@
+import Electrobun from "electrobun/bun";
 import {
   exportConfig,
   importConfig,
@@ -12,10 +13,9 @@ import type {
 import { encodeRpcValue } from "../../shared/rpc-codec";
 import { paneIdFromDetachedRpcKey } from "../window/focus";
 import type { DesktopBackend, DesktopRpc } from "./backend";
-import {
-  checkElectrobunDesktopUpdate,
-  runElectrobunDesktopUpdate,
-} from "./update";
+import { createElectrobunDesktopUpdater } from "./update";
+
+const desktopUpdater = createElectrobunDesktopUpdater(Electrobun.Updater);
 
 function sendUpdateProgress(rpc: DesktopRpc, progress: UpdateProgress): void {
   try {
@@ -41,17 +41,22 @@ export async function handleDesktopBackendRequest(
 ): Promise<DesktopBackendRequestResponse<DesktopCoreRequest["method"]>> {
   switch (request.method) {
     case "update.check":
-      return checkElectrobunDesktopUpdate(
+      return desktopUpdater.check(
         typeof request.payload.currentVersion === "string" ? request.payload.currentVersion : "",
       );
     case "update.start": {
       const { release, currentVersion } = request.payload;
-      void runElectrobunDesktopUpdate(
+      void desktopUpdater.download(
         typeof currentVersion === "string" ? currentVersion : release.version,
         (progress) => sendUpdateProgress(rpc, progress),
       );
       return null;
     }
+    case "update.apply":
+      // Only the main window offers Restart; a popped-out window never relaunches the app.
+      if (paneIdFromDetachedRpcKey(backend.rpcs.getRpcWindowKey(rpc))) return null;
+      void desktopUpdater.apply((progress) => sendUpdateProgress(rpc, progress));
+      return null;
     case "ticker.loadAll":
       return backend.requireServices().tickerRepository.loadAllTickers();
     case "ticker.load":

package/src/renderers/electrobun/bun/desktop/backend.ts

@@ -500,6 +500,7 @@ export class DesktopBackend {
         return handleDesktopHostRequest(this, rpc, request);
       case "update.check":
       case "update.start":
+      case "update.apply":
       case "ticker.loadAll":
       case "ticker.load":
       case "ticker.save":