gloomberb 0.18.2 → 0.18.4

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

@@ -13,11 +13,13 @@ import {
 import {
   type CellMouseEvent,
   type MouseLikeEvent,
+  type PinchGestureEvent,
   callCellMouseHandler,
   callMouseHandler,
   cancelWebFrame,
   cellBoundsForElement,
   cellMouseEvent,
+  pinchWheelEvent,
   requestWebFrame,
 } from "./mouse";
 import { hideDragShield, showDragShield } from "./drag-shield";
@@ -212,15 +214,54 @@ export const WebBox = forwardRef<HTMLDivElement, Record<string, unknown> & { chi
     }, []);
 
     const handlesWheel = typeof props.onMouseScroll === "function";
+    const pinchAsWheel = handlesWheel && props.pinchAsWheel === true;
     useEffect(() => {
       const element = elementRef.current;
       if (!element || !handlesWheel) return;
+      // WebKit pinches with gesture events; with `pinchAsWheel` they reach the
+      // handler as the Ctrl+wheel Chromium sends for one. The wheel events a
+      // newer WebKit adds for the same pinch are dropped, so it zooms once.
+      let pinching = false;
+      let pinchScale = 1;
       const handleWheel = (event: WheelEvent) => {
+        if (pinching && event.ctrlKey) {
+          event.preventDefault();
+          return;
+        }
+        // A plain scroll means the pinch is over, whatever became of its end.
+        pinching = false;
         callMouseHandler(propsRef.current.onMouseScroll, event, "scroll");
       };
+      const startPinch = (event: Event) => {
+        event.preventDefault();
+        pinching = true;
+        pinchScale = (event as PinchGestureEvent).scale || 1;
+      };
+      const changePinch = (event: Event) => {
+        event.preventDefault();
+        const scale = (event as PinchGestureEvent).scale;
+        const step = pinchScale > 0 && scale > 0 ? scale / pinchScale : 1;
+        if (scale > 0) pinchScale = scale;
+        const wheel = pinchWheelEvent(event as PinchGestureEvent, step);
+        if (wheel) callCellMouseHandler(propsRef.current.onMouseScroll, wheel);
+      };
+      const endPinch = (event: Event) => {
+        event.preventDefault();
+        pinching = false;
+      };
       element.addEventListener("wheel", handleWheel, { passive: false });
-      return () => element.removeEventListener("wheel", handleWheel);
-    }, [handlesWheel]);
+      if (pinchAsWheel) {
+        element.addEventListener("gesturestart", startPinch);
+        element.addEventListener("gesturechange", changePinch);
+        element.addEventListener("gestureend", endPinch);
+      }
+      return () => {
+        element.removeEventListener("wheel", handleWheel);
+        element.removeEventListener("gesturestart", startPinch);
+        element.removeEventListener("gesturechange", changePinch);
+        element.removeEventListener("gestureend", endPinch);
+      };
+    }, [handlesWheel, pinchAsWheel]);
 
     const handleMouseDown = (event: MouseEvent) => {
       const hasSyntheticDrag = typeof propsRef.current.onMouse === "function";

package/src/renderers/dom/host/chart-surface.tsx

@@ -285,6 +285,8 @@ export const WebChartSurface = forwardRef<BoxRenderable, Record<string, unknown>
     return (
       <WebBox
         {...props}
+        // A pinch over a chart zooms it in WebKit as it does in Chromium.
+        pinchAsWheel
         ref={ref as Ref<HTMLDivElement>}
         data-gloom-role={(props["data-gloom-role"] as string | undefined) ?? "chart-surface"}
         style={{

package/src/renderers/dom/host/hls.chunk.ts

@@ -0,0 +1,3 @@
+// The HLS player, about half a megabyte, in a file of its own: only a live
+// stream that the webview cannot play natively loads it (see media-surface.tsx).
+export { default } from "hls.js";

package/src/renderers/dom/host/image-surface.tsx

@@ -0,0 +1,49 @@
+/** @jsxImportSource react */
+import { useEffect, useState, type CSSProperties, type ReactNode } from "react";
+import type { ImageSurfaceProps } from "../../../ui/host";
+import { cleanDomProps, commonStyle } from "./style";
+
+/**
+ * Images that failed to load this session, such as a company with no logo:
+ * a row scrolled back into view draws its fallback at once rather than an
+ * empty box while it asks again.
+ */
+const failedImages = new Set<string>();
+const FAILED_IMAGES_KEPT = 2_000;
+
+function rememberFailedImage(src: string): void {
+  if (failedImages.size >= FAILED_IMAGES_KEPT) failedImages.delete(failedImages.values().next().value!);
+  failedImages.add(src);
+}
+
+/** An image filling its box; `children` stand in without a `src`, or once it fails to load. */
+export function WebImageSurface({ children, src, alt = "", objectFit = "contain", ...props }: ImageSurfaceProps) {
+  const imageSrc = typeof src === "string" ? src.trim() : "";
+  const [failed, setFailed] = useState(() => failedImages.has(imageSrc));
+  useEffect(() => setFailed(failedImages.has(imageSrc)), [imageSrc]);
+  const baseStyle = commonStyle(props);
+  return (
+    <div
+      {...cleanDomProps(props)}
+      style={{
+        ...baseStyle,
+        overflow: baseStyle.overflow ?? "hidden",
+        ...(props.style as CSSProperties | undefined),
+      }}
+    >
+      {imageSrc && !failed ? (
+        <img
+          key={imageSrc}
+          src={imageSrc}
+          alt={alt}
+          draggable={false}
+          onError={() => {
+            rememberFailedImage(imageSrc);
+            setFailed(true);
+          }}
+          style={{ width: "100%", height: "100%", display: "block", objectFit }}
+        />
+      ) : children as ReactNode}
+    </div>
+  );
+}

package/src/renderers/dom/host/media-surface.tsx

@@ -1,5 +1,5 @@
 /** @jsxImportSource react */
-import Hls from "hls.js";
+import type Hls from "hls.js";
 import { forwardRef, useEffect, useImperativeHandle, useRef, useState, type CSSProperties, type ReactNode } from "react";
 import type { MediaSurfaceHandle, MediaSurfaceProps } from "../../../ui/host";
 import { cleanDomProps, commonStyle } from "./style";
@@ -173,24 +173,30 @@ export const WebMediaSurface = forwardRef<HTMLVideoElement, MediaSurfaceProps>(f
       video.src = mediaSrc;
       video.load();
       startPlayback();
-    } else if (Hls.isSupported()) {
-      hls = new Hls({
-        backBufferLength: 30,
-        enableWorker: true,
-        lowLatencyMode: true,
-        // A pane is a fraction of the screen, so the top rendition would be
-        // decoded and then scaled away. Re-evaluated when the pane is resized.
-        capLevelToPlayerSize: true,
-      });
-      hls.on(Hls.Events.ERROR, (_event, data) => {
-        if (!data.fatal) return;
-        fail(data.details ? `Stream playback failed: ${data.details}` : "Stream playback failed.");
-      });
-      hls.on(Hls.Events.MANIFEST_PARSED, startPlayback);
-      hls.loadSource(mediaSrc);
-      hls.attachMedia(video);
     } else {
-      fail("HLS playback is unavailable in this desktop runtime.");
+      // Loaded with the first stream that needs it, not with the app.
+      void import("./hls.chunk.js").then(({ default: HlsPlayer }) => {
+        if (!active) return;
+        if (!HlsPlayer.isSupported()) {
+          fail("HLS playback is unavailable in this desktop runtime.");
+          return;
+        }
+        hls = new HlsPlayer({
+          backBufferLength: 30,
+          enableWorker: true,
+          lowLatencyMode: true,
+          // A pane is a fraction of the screen, so the top rendition would be
+          // decoded and then scaled away. Re-evaluated when the pane is resized.
+          capLevelToPlayerSize: true,
+        });
+        hls.on(HlsPlayer.Events.ERROR, (_event, data) => {
+          if (!data.fatal) return;
+          fail(data.details ? `Stream playback failed: ${data.details}` : "Stream playback failed.");
+        });
+        hls.on(HlsPlayer.Events.MANIFEST_PARSED, startPlayback);
+        hls.loadSource(mediaSrc);
+        hls.attachMedia(video);
+      }, () => fail("The stream player could not be loaded."));
     }
 
     return () => {

package/src/renderers/dom/host/mouse.ts

@@ -54,6 +54,36 @@ function resolveScroll(event: MouseLikeEvent) {
   };
 }
 
+/** WebKit's trackpad pinch: the scale since the pinch began, at the pointer. */
+export interface PinchGestureEvent extends Event {
+  scale: number;
+  clientX: number;
+  clientY: number;
+  shiftKey?: boolean;
+  altKey?: boolean;
+  ctrlKey?: boolean;
+  metaKey?: boolean;
+}
+
+/** Chromium sends a trackpad pinch as Ctrl+wheel with `deltaY = -100 ln(scale step)`. */
+const PINCH_WHEEL_PIXELS_PER_E = 100;
+
+/**
+ * One step of a WebKit pinch (`step`, the scale since the last one) as the
+ * Ctrl+wheel event Chromium sends for it, so one handler serves both. Null
+ * for a step that zooms nothing.
+ */
+export function pinchWheelEvent(event: PinchGestureEvent, step: number): CellMouseEvent | null {
+  if (!(step > 0) || !Number.isFinite(step) || step === 1) return null;
+  const deltaY = -PINCH_WHEEL_PIXELS_PER_E * Math.log(step);
+  const base = cellMouseEvent(event as unknown as MouseLikeEvent, "scroll");
+  return {
+    ...base,
+    modifiers: { shift: event.shiftKey === true, alt: event.altKey === true, ctrl: true },
+    scroll: { direction: deltaY > 0 ? "down" : "up", delta: Math.abs(deltaY), deltaX: 0, deltaY },
+  };
+}
+
 /**
  * `ahead` is where the browser predicts the pointer will be a moment later
  * (`getPredictedEvents`), for drawing what follows it; hit tests and releases

package/src/renderers/dom/host/size-observer.ts

@@ -13,7 +13,7 @@ import { isLiveResizing } from "../../../ui/live-resize";
  * A box that is not displayed has no size to report: a research tab kept
  * mounted while another one shows sits under `display: none`, and the 0 by 0
  * the browser reports there would have its chart redraw for one pixel and
- * show that pixel stretched over the plot when the tab comes back (GLO-590).
+ * show that pixel stretched over the plot when the tab comes back.
  * It keeps the size it was last laid out at instead, so the tab comes back
  * with the bitmap it left with.
  */

package/src/renderers/dom/host/style.ts

@@ -127,7 +127,7 @@ export function cleanDomProps(props: Record<string, unknown>): Record<string, un
     "cursorColor", "selectionBg", "selectionFg", "showCursor", "keyBindings", "wrapText", "wrapMode",
     "initialValue", "value", "onInput", "onChange", "onSubmit", "onEscape", "onCursorChange", "onMouse",
     "scrollX", "scrollY", "focusable", "bitmap", "bitmaps", "crosshair", "vectors", "text", "font",
-    "hoverBackgroundColor", "joinPastedLines", "stickyScroll", "stickyStart", "onStickyPinChange",
+    "hoverBackgroundColor", "joinPastedLines", "stickyScroll", "stickyStart", "onStickyPinChange", "pinchAsWheel",
   ]) {
     delete next[key];
   }

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

@@ -12,6 +12,7 @@ import { WebIcon, WebIconButton } from "../desktop/icons";
 import { WebMenu } from "../desktop/menu";
 import { WebPopover } from "../desktop/popover";
 import { useHorizontalOverflow } from "./overflow-fade";
+import { useTopSurfaceColor } from "./top-surface";
 import { hideDragShield, showDragShield } from "./drag-shield";
 
 type CssVars = CSSProperties & Record<`--${string}`, string>;
@@ -44,9 +45,10 @@ export function WebTabs({
   // A tab bar occupies exactly the one row every caller reserves for it. Any
   // extra pixels here are pixels the pane's children are told they own and the
   // pane then clips, which is how a chart's time axis ends up behind a footer.
-  // Title-bar tabs fill the header to its bottom edge, so the active tab's
-  // underline lies on the header's bottom rule. Every variant draws the one tab
-  // look in styles.css: text, and the active tab on an accent underline.
+  // Title-bar tabs fill the header to its bottom edge, where the active tab's
+  // box covers the header's bottom rule and opens into the pane. Every variant
+  // draws the one tab look in styles.css: text, the active tab on an accent
+  // underline, and title-bar tabs as boxes instead of underlines.
   const listHeight = header ? "100%" : variant === "underline" || compact ? WEB_CELL_HEIGHT : "100%";
 
   useEffect(() => () => dragCleanupRef.current?.(), []);
@@ -67,6 +69,9 @@ export function WebTabs({
   useEffect(() => {
     if (!overflowing) setOverflowMenuOpen(false);
   }, [overflowing]);
+  // The active title-bar tab opens into the pane, so it takes the colour of
+  // whatever is directly under it.
+  useTopSurfaceColor(tabListRef, header, [activeValue, tabs]);
 
   const selectFromOverflowMenu = (value: string) => {
     setOverflowMenuOpen(false);
@@ -173,12 +178,14 @@ export function WebTabs({
     <div
       ref={tabListRef}
       data-gloom-role="tab-list"
+      data-gloom-variant={header ? "header" : undefined}
       role="tablist"
       onWheel={overflow.onWheel}
       style={{
         display: "flex",
         flexDirection: "row",
-        alignItems: "stretch",
+        // Title-bar tabs stand on the header's bottom edge, clear of its top.
+        alignItems: header ? "flex-end" : "stretch",
         gap: 0,
         width: "100%",
         height: listHeight,
@@ -217,7 +224,10 @@ export function WebTabs({
           transform: `translateX(${dragTranslateX}px)${sourceDragging ? " scale(1.03)" : ""}`,
           zIndex: dragSourceValue === tab.value ? 2 : undefined,
           willChange: dragSourceValue ? "transform" : undefined,
-          transition: `color 110ms ease, transform ${dragSourceValue && dragSourceValue !== tab.value ? "var(--tab-reorder-duration, 160ms)" : "0ms"} cubic-bezier(0.77, 0, 0.175, 1)`,
+          // An inactive title-bar tab fades its hover fill in. The active one's
+          // box changes with the bar's rule and the body under it, which do not
+          // fade, so it does not either.
+          transition: `color 110ms ease${header && !active ? ", background-color 110ms ease" : ""}, transform ${dragSourceValue && dragSourceValue !== tab.value ? "var(--tab-reorder-duration, 160ms)" : "0ms"} cubic-bezier(0.77, 0, 0.175, 1)`,
           cursor: disabled ? "default" : dragSourceValue ? "grabbing" : reorderable ? "grab" : "pointer",
           ...(dragTarget ? { color: "var(--gloom-text)" } : {}),
         } satisfies CssVars;
@@ -230,6 +240,7 @@ export function WebTabs({
             data-active={active ? "true" : undefined}
             data-dense={dense || compact ? "true" : undefined}
             data-reorderable={reorderable ? "true" : undefined}
+            data-drag-target={dragTarget ? "true" : undefined}
             data-tab-value={tab.value}
             type="button"
             role="tab"

package/src/renderers/dom/host/top-surface.ts

@@ -0,0 +1,127 @@
+import { useLayoutEffect, type RefObject } from "react";
+
+type Rgba = [number, number, number, number];
+
+const THROTTLE_MS = 120;
+/** Rows and cells follow the cursor and selection; a tab must not take their colour. */
+const TRANSIENT_ROLES = /^data-table-(row|cell|header-cell)$/;
+const ACTIVE_BG = "--pane-tab-active-bg";
+
+function parseColor(value: string): Rgba | null {
+  const trimmed = value.trim();
+  if (!trimmed || trimmed === "transparent") return [0, 0, 0, 0];
+  const rgb = /^rgba?\(([^)]+)\)$/.exec(trimmed);
+  if (rgb) {
+    const parts = rgb[1]!.split(/[\s,/]+/).filter(Boolean).map(Number);
+    if (parts.length < 3 || parts.some(Number.isNaN)) return null;
+    return [parts[0]!, parts[1]!, parts[2]!, parts[3] ?? 1];
+  }
+  const srgb = /^color\(srgb\s+([^)]+)\)$/.exec(trimmed);
+  if (srgb) {
+    const parts = srgb[1]!.split(/[\s/]+/).filter(Boolean).map(Number);
+    if (parts.length < 3 || parts.some(Number.isNaN)) return null;
+    return [parts[0]! * 255, parts[1]! * 255, parts[2]! * 255, parts[3] ?? 1];
+  }
+  return null;
+}
+
+function over(top: Rgba, base: Rgba): Rgba {
+  const alpha = top[3];
+  return [
+    top[0] * alpha + base[0] * (1 - alpha),
+    top[1] * alpha + base[1] * (1 - alpha),
+    top[2] * alpha + base[2] * (1 - alpha),
+    1,
+  ];
+}
+
+/**
+ * The colour the active title-bar tab takes so it reads as the top of the pane
+ * body: whatever surface sits directly under it (the query bar's band, a detail
+ * header, a table header, the body itself), translucent layers composited.
+ */
+function measureTopSurface(body: HTMLElement, x: number): string | null {
+  const bodyRect = body.getBoundingClientRect();
+  if (bodyRect.width <= 0 || bodyRect.height <= 0) return null;
+  const y = bodyRect.top + 1;
+  let top: Element = document.elementsFromPoint(x, y).find((element) => body.contains(element)) ?? body;
+  // A marked surface (query bar, detail header) is taken whole, so hovering a
+  // control inside it never tints the tab.
+  const surface = top.closest("[data-gloom-top-surface]");
+  if (surface && body.contains(surface)) top = surface;
+
+  const layers: Rgba[] = [];
+  for (let element: Element | null = top; element; element = element.parentElement) {
+    const role = element.getAttribute("data-gloom-role") ?? "";
+    const rect = element.getBoundingClientRect();
+    const startsAtTop = Math.abs(rect.top - bodyRect.top) <= 1.5;
+    const spansBody = rect.width >= bodyRect.width * 0.6;
+    if (element === body || element === surface || (startsAtTop && spansBody && !TRANSIENT_ROLES.test(role))) {
+      const color = parseColor(getComputedStyle(element).backgroundColor);
+      if (color && color[3] > 0) layers.push(color);
+    }
+    if (element === body) break;
+  }
+  // From the body outwards to the topmost surface.
+  let color: Rgba | null = null;
+  for (let index = layers.length - 1; index >= 0; index -= 1) {
+    const layer = layers[index]!;
+    color = color ? over(layer, color) : layer[3] >= 1 ? layer : null;
+  }
+  if (!color) return null;
+  return `rgb(${Math.round(color[0])}, ${Math.round(color[1])}, ${Math.round(color[2])})`;
+}
+
+/**
+ * Keeps `--pane-tab-active-bg` on a title-bar tab list equal to the surface
+ * under its active tab, so the tab opens into the pane. Without a measure the
+ * header's own value (the body colour) applies. A change to the body itself
+ * (focus and theme recolour it) is measured at once, before it paints; changes
+ * inside it (a detail opens, a query bar appears) at most every 120 ms; a
+ * resize once it stops, so dragging a pane's edge costs no measures.
+ */
+export function useTopSurfaceColor(listRef: RefObject<HTMLElement | null>, enabled: boolean, deps: readonly unknown[]) {
+  useLayoutEffect(() => {
+    const list = listRef.current;
+    if (!enabled || !list) return;
+    const body = list.closest("[data-gloom-role=pane-window], [data-gloom-role=detached-pane-window]")
+      ?.querySelector<HTMLElement>(":scope > [data-gloom-role=pane-body]");
+    if (!body) return;
+
+    let timer: ReturnType<typeof setTimeout> | null = null;
+    const measure = () => {
+      if (timer != null) clearTimeout(timer);
+      timer = null;
+      const active = list.querySelector<HTMLElement>("[data-active=true]");
+      if (!active) return;
+      const rect = active.getBoundingClientRect();
+      const color = measureTopSurface(body, rect.left + rect.width / 2);
+      if (color === (list.style.getPropertyValue(ACTIVE_BG) || null)) return;
+      if (color) list.style.setProperty(ACTIVE_BG, color);
+      else list.style.removeProperty(ACTIVE_BG);
+    };
+    const schedule = () => {
+      if (timer == null) timer = setTimeout(measure, THROTTLE_MS);
+    };
+    const settle = () => {
+      if (timer != null) clearTimeout(timer);
+      timer = setTimeout(measure, THROTTLE_MS);
+    };
+    measure();
+    const resize = new ResizeObserver(settle);
+    resize.observe(body);
+    // Live data rewrites text constantly; only structure and inline styles
+    // (visibility, focus colours, theme) can change what sits under the tab.
+    const mutations = new MutationObserver((records) => {
+      if (records.some((record) => record.target === body)) measure();
+      else schedule();
+    });
+    mutations.observe(body, { subtree: true, childList: true, attributes: true, attributeFilter: ["style", "data-gloom-top-surface"] });
+    return () => {
+      if (timer != null) clearTimeout(timer);
+      resize.disconnect();
+      mutations.disconnect();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [enabled, ...deps]);
+}

package/src/renderers/dom/styles.css

@@ -507,6 +507,45 @@ button, [data-gloom-interactive="true"] { cursor: pointer; }
 [data-gloom-role="tab-button"][data-active="true"]::after { opacity: 1; }
 [data-gloom-role="tab-button"]:disabled { color: var(--gloom-text-muted); cursor: default; }
 [data-gloom-role="tab-button"]:focus-visible { outline: none; }
+/* Title-bar tabs: the same text, sizes and colours, drawn as raised boxes
+   instead of underlines. The active tab is a box with rounded top corners,
+   open at the bottom: its top and sides in the header rule's colour (the
+   accent while the pane is focused), its fill the surface under it, laid over
+   the rule so it opens into the pane. An inactive tab takes the hover fill in
+   the same shape. The pane header sets the colours (pane/header.tsx). */
+[data-gloom-role="tab-list"][data-gloom-variant="header"] {
+  /* Header colour left above a box, and the box's line: the header rule's width. */
+  --pane-tab-top-gap: 2px;
+  --pane-tab-rule: 1px;
+}
+[data-gloom-role="tab-list"][data-gloom-variant="header"] > [data-gloom-role="tab-button"] {
+  height: calc(100% - var(--pane-tab-top-gap));
+  /* The sides take their line from the padding, so a label sits where it
+     would without the box. The gap and the top line push the label down; the
+     bottom padding lifts it back onto the header's centre line, halfway
+     between its top rule (a divider or a floating border, when there is one)
+     and its bottom rule, where the title sits. */
+  padding: 0 calc(var(--gloom-space-sm) - var(--pane-tab-rule)) calc(var(--pane-tab-top-gap) + 2 * var(--pane-tab-rule) - var(--pane-tab-top-inset, 0px));
+  border: var(--pane-tab-rule) solid transparent;
+  border-bottom: 0;
+  border-radius: var(--gloom-radius-md) var(--gloom-radius-md) 0 0;
+  /* The line lies on the bar, as the rule does, so a translucent hairline is
+     the same colour on both. */
+  background-clip: padding-box;
+}
+[data-gloom-role="tab-list"][data-gloom-variant="header"] > [data-gloom-role="tab-button"]::after { content: none; }
+[data-gloom-role="tab-list"][data-gloom-variant="header"] > [data-gloom-role="tab-button"][data-active="true"] {
+  background-color: var(--pane-tab-active-bg, var(--gloom-bg));
+  border-color: var(--pane-tab-border, var(--gloom-hairline));
+}
+[data-gloom-role="tab-list"][data-gloom-variant="header"] > [data-gloom-role="tab-button"]:not([data-active="true"]):not(:disabled):is(:hover, :focus-visible, [data-drag-target="true"]) {
+  background-color: var(--gloom-hover-fill);
+}
+/* A tab's close mark stays inside the box: in a 20px title bar the box is
+   shorter than the icon button, whose fill would cover the box's top line. */
+[data-gloom-role="tab-list"][data-gloom-variant="header"] [data-gloom-role="tab-close"] {
+  max-height: 100%;
+}
 /* A tab's close mark and a strip's plus are the icon button: 20 by 18, the control radius, the hover fill. */
 [data-gloom-role="tab-add"] {
   border: 0;
@@ -597,6 +636,30 @@ button, [data-gloom-interactive="true"] { cursor: pointer; }
   border-bottom: 1px solid currentColor;
   opacity: .7;
 }
+/* Controls a surface shows only while the pointer is over it or the keyboard
+   is in it (a chart legend's fold, its tool bar's), so at rest it draws as it
+   always has. */
+[data-gloom-reveal-scope]:not(:hover):not(:focus-within) [data-gloom-reveal="hover"] {
+  display: none !important;
+}
+/* The line between two chart panels: drawn while the pointer is on it or
+   drags it, in the accent a pane sidebar's divider takes. */
+[data-gloom-role="composite-chart-panel-divider"] {
+  cursor: row-resize;
+}
+[data-gloom-role="composite-chart-panel-divider"]::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50%;
+  height: 1px;
+  background: var(--gloom-accent);
+  opacity: 0;
+}
+[data-gloom-role="composite-chart-panel-divider"]:is(:hover, [data-active="true"])::before {
+  opacity: 1;
+}
 [data-gloom-role="dock-divider"] {
   background: transparent !important;
 }
@@ -624,6 +687,58 @@ button, [data-gloom-interactive="true"] { cursor: pointer; }
   top: 50%;
   height: 1px;
 }
+/* The frame a launch draws before the app is up (boot-frame.ts): the last
+   layout's chrome with empty panes, or the bare header and status bar. It
+   covers the app until the app has drawn its own layout. The page sets the
+   theme's colours before drawing it, so it needs no fallbacks. */
+#gloom-boot-frame {
+  position: fixed;
+  inset: 0;
+  z-index: 2147483000;
+  overflow: hidden;
+  pointer-events: none;
+  background: var(--gloom-bg);
+}
+#gloom-boot-frame[data-gloom-boot-frame="layout"] > * { height: 100%; min-height: 100%; }
+#gloom-boot-frame [data-gloom-role="pane-body"] { position: relative; }
+/* Lines of text still to come, faint enough to read as the pane's shape:
+   one bar every line of text (lh), half a line thick. */
+#gloom-boot-frame [data-gloom-role="pane-body"]::before {
+  content: "";
+  position: absolute;
+  inset: var(--gloom-space-sm) var(--gloom-inset);
+  background: repeating-linear-gradient(
+    to bottom,
+    color-mix(in srgb, var(--gloom-text-muted) 10%, transparent) 0 0.5lh,
+    transparent 0.5lh 1lh
+  );
+  -webkit-mask-image: linear-gradient(to right, var(--gloom-bg) 40%, transparent 80%), linear-gradient(to bottom, var(--gloom-bg) 30%, transparent 90%);
+  -webkit-mask-composite: source-in;
+  mask-image: linear-gradient(to right, var(--gloom-bg) 40%, transparent 80%), linear-gradient(to bottom, var(--gloom-bg) 30%, transparent 90%);
+  mask-composite: intersect;
+}
+/* Where the app draws its own: the app's column runs a hairline taller than
+   the window and sits scrolled by it, so its header shows one pixel short and
+   its status bar ends a pixel above the bottom. The shell sits the same, and
+   nothing moves when the app takes over. */
+.gloom-boot-header, .gloom-boot-status {
+  position: absolute;
+  left: 0;
+  right: 0;
+}
+/* Every desktop and web window draws its header as the title bar. */
+.gloom-boot-header {
+  top: -1px;
+  height: __TITLEBAR_OVERLAY_HEIGHT_PX__px;
+  background: var(--gloom-header);
+}
+/* One line of text tall, as the status bar is, its hairline inside it. */
+.gloom-boot-status {
+  bottom: 1px;
+  box-shadow: inset 0 1px 0 var(--gloom-hairline);
+  background: var(--gloom-panel);
+}
+.gloom-boot-status::before { content: "\200b"; }
 .gloom-loading, .gloom-fatal {
   padding: 24px;
   color: var(--gloom-text, #f2f2f2);

package/src/renderers/dom/test-utils.tsx

@@ -9,6 +9,7 @@ import { WebBox } from "./host/box";
 import { WebText, WebSpan } from "./host/text";
 import { WebScrollBox } from "./host/scroll-box";
 import { WebInput } from "./host/input";
+import { WebImageSurface } from "./host/image-surface";
 import { WebButton, WebTextField } from "./desktop/controls";
 import { noopRendererHost } from "../../test-support/renderer-host";
 
@@ -19,7 +20,7 @@ function createUi(capabilities: UiHost["capabilities"]): UiHost {
     kind: "desktop-web",
     capabilities: { ...BASE_CAPABILITIES, ...capabilities },
     Box: WebBox, Text: WebText, Span: WebSpan, ScrollBox: WebScrollBox,
-    Button: WebButton, Input: WebInput, TextField: WebTextField,
+    Button: WebButton, Input: WebInput, TextField: WebTextField, ImageSurface: WebImageSurface,
     SpinnerMark: () => null,
   } as unknown as UiHost;
 }

package/src/renderers/electrobun/bun/application-menu/index.ts

@@ -32,7 +32,7 @@ function buildApplicationMenu(keybindings: ResolvedKeybindings): ApplicationMenu
   const accelerator = (actionId: string) => ({ accelerator: menuAcceleratorFor(keybindings, actionId) });
   return [
     {
-      label: "Gloomberb",
+      label: "Gloom",
       submenu: [
         { role: "about" },
         { type: "divider" },
@@ -43,7 +43,7 @@ function buildApplicationMenu(keybindings: ResolvedKeybindings): ApplicationMenu
         { role: "hideOthers" },
         { role: "showAll" },
         { type: "divider" },
-        commandItem("Quit Gloomberb", { type: "quit" }, { accelerator: "CmdOrCtrl+Q" }),
+        commandItem("Quit Gloom", { type: "quit" }, { accelerator: "CmdOrCtrl+Q" }),
       ],
     },
     {
@@ -122,7 +122,7 @@ function buildApplicationMenu(keybindings: ResolvedKeybindings): ApplicationMenu
     {
       label: "Help",
       submenu: [
-        openCommandBar("Gloomberb Help", "HELP"),
+        openCommandBar("Gloom Help", "HELP"),
         commandItem("Open Issue on GitHub", { type: "open-url", url: GITHUB_ISSUE_URL }),
       ],
     },

package/src/renderers/electrobun/bun/core-capabilities.ts

@@ -8,6 +8,7 @@ import type { AppServices } from "../../../core/app-services";
 import { diskNotesFilesIO, isNotesFile } from "../../../plugins/builtin/notes/files";
 import type { BrokerAdapter } from "../../../types/broker";
 import type { AppConfig, BrokerInstanceConfig } from "../../../types/config";
+import { errorMessage } from "../../../utils/errors";
 
 const DESKTOP_CORE_PLUGIN_ID = "desktop-core";
 
@@ -221,7 +222,14 @@ function createNotesFilesCapability(): PluginCapability {
         await io(input).delete(file(input));
         return null;
       }, "action"),
-      listKeys: op((input: any) => io(input).listKeys({ strict: input.strict === true })),
+      listKeys: op(async (input: any) => {
+        const skipped: Array<{ key: string; reason: string }> = [];
+        const keys = await io(input).listKeys({
+          strict: input.strict === true,
+          ...(input.reportSkipped === true ? { skipped: (key: string, error: unknown) => skipped.push({ key, reason: errorMessage(error) }) } : {}),
+        });
+        return input.reportSkipped === true ? { keys, skipped } : keys;
+      }),
     },
   };
 }