gloomberb 0.16.1 → 0.16.3

package/src/plugins/builtin/world-venue-map/venue-header.tsx

@@ -0,0 +1,32 @@
+import type { CloudWorldVenuePayload } from "../../../api-client";
+import { colors } from "../../../theme/colors";
+import { Box, Text, TextAttributes } from "../../../ui";
+import { formatVenueCountdown, formatVenueLocalTime, venueRemainingSeconds } from "./model";
+
+export function SelectedVenueHeader({
+  venue,
+  checkedAt,
+  now,
+  width,
+}: {
+  venue: CloudWorldVenuePayload | null;
+  checkedAt: number;
+  now: number;
+  width: number;
+}) {
+  if (!venue) return <Box height={2} />;
+  const remaining = formatVenueCountdown(venueRemainingSeconds(venue, checkedAt, now));
+  const state = venue.isOpen ? "OPEN" : "CLOSED";
+  const transition = remaining ? `${venue.isOpen ? "closes" : "opens"} ${remaining}` : "";
+  return (
+    <Box flexDirection="column" height={2} width={width} paddingX={1}>
+      <Box flexDirection="row" justifyContent="space-between" width="100%">
+        <Text fg={colors.textBright} attributes={TextAttributes.BOLD}>{venue.mic}</Text>
+        <Text fg={venue.isOpen ? colors.positive : colors.textDim}>{state}</Text>
+      </Box>
+      <Text fg={colors.textMuted}>
+        {`${venue.city}, ${venue.country} · ${formatVenueLocalTime(venue.timezone, now)}${transition ? ` · ${transition}` : ""}`}
+      </Text>
+    </Box>
+  );
+}

package/src/plugins/builtin/yield-curve/headless.ts

@@ -52,6 +52,18 @@ const defaultDependencies: Required<YieldCurveHeadlessDependencies> = {
 
 const bp = (value: number | null) => value == null ? null : Math.round(value * 100);
 
+/** The official publisher of each curve, as docs/research-data.md lists them. */
+const CURVE_PUBLISHERS: Record<CurveId, string> = {
+  us: "US Treasury",
+  "us-real": "US Treasury",
+  "us-breakeven": "US Treasury",
+  "eu-aaa": "ECB",
+  de: "Bundesbank",
+  gb: "Bank of England",
+  jp: "Japan Ministry of Finance",
+  ca: "Bank of Canada",
+};
+
 export function createYieldCurveHeadless(
   dependencies: YieldCurveHeadlessDependencies = defaultDependencies,
 ): HeadlessPaneDefinition<"rows"> {
@@ -80,6 +92,7 @@ export function createYieldCurveHeadless(
       if (args.options.tab === "world") {
         const rows = await loadWorld(context);
         return {
+          freshness: { source: "Government bond publishers", status: "not-a-feed", basis: "daily curves" },
           columns: WORLD_COLUMNS,
           rows: rows.map((row) => ({ market: row.market, twoYear: row.twoYear, tenYear: row.tenYear, thirtyYear: row.thirtyYear,
             twosTensBasisPoints: bp(row.twosTens), tenYearChangeBasisPoints: bp(row.tenYearChange), asOf: row.asOf })),
@@ -105,6 +118,9 @@ export function createYieldCurveHeadless(
       const spread = (id: string) => bp(spreads.find((entry) => entry.id === id)?.value ?? null);
       const twosTens = spread("2s10s");
       return {
+        // Each curve is its official publisher's daily close; a past date is a historical curve, not a feed.
+        freshness: { source: CURVE_PUBLISHERS[curve], status: "not-a-feed",
+          ...(requestedDate ? { basis: "historical curve" } : { basis: "daily curve", cadence: "daily" }) },
         ...(comparePoints ? { columns: COMPARE_COLUMNS } : {}),
         rows: rows.map((point) => {
           const compare = compareAt(point.maturity);

package/src/plugins/loader.ts

@@ -204,6 +204,18 @@ export function pluginsMissingHostExports(): string[] {
 /** Bun's wording when an import does not resolve, from a native import. */
 const UNRESOLVED_MODULE = /Cannot find (?:module|package) '([^']+)'/;
 
+/**
+ * The specifier an import failed to resolve. Bun puts it on the error as
+ * `specifier`; the message is only a fallback, because from Bun 1.4 it names
+ * the package alone ("Cannot find package 'peer' imported from …" for
+ * `peer/bridge`), and the subpath decides whether the peer has the file.
+ */
+export function unresolvedSpecifier(err: unknown, message: string): string | undefined {
+  const specifier = (err as { specifier?: unknown } | null)?.specifier;
+  if (typeof specifier === "string" && specifier) return specifier;
+  return UNRESOLVED_MODULE.exec(message)?.[1];
+}
+
 /** Imported at another commit earlier in this process, with files besides the entry that Bun keeps. */
 function hasStaleModules(pluginDir: string, commit: string | null): boolean {
   if (!importedCommits.has(pluginDir) || importedCommits.get(pluginDir) === commit) return false;
@@ -300,7 +312,7 @@ export async function loadExternalPlugin(
     // A sibling plugin it imports that is linked now but was not when this
     // process first resolved it. Bun keeps that failure until a restart, which
     // is all the plugin needs: not a crash.
-    const unresolved = UNRESOLVED_MODULE.exec(message)?.[1];
+    const unresolved = unresolvedSpecifier(err, message);
     if (unresolved && isLinkedPeerModule(pluginDir, unresolved)) {
       loaderLog.info(`${directory} loads after a restart: ${message}`);
       return { ...base, plugin: placeholder, needsRestart: true };

package/src/plugins/registry/pane-settings.ts

@@ -44,6 +44,7 @@ export function resolveRegistryPaneQuickSettings(
   return resolved.paneDef.quickSettings.flatMap((quickSetting): ResolvedRegistryPaneQuickSetting[] => {
     const field = resolved.settingsDef.fields.find((candidate) => candidate.key === quickSetting.key);
     if (!field) return [];
+    if (quickSetting.visible && !quickSetting.visible(resolved.context)) return [];
     if (quickSetting.onValue != null) {
       if (field.type !== "select") return [];
       const onValue = quickSetting.onValue;

package/src/renderers/browser/app-services.ts

@@ -5,6 +5,7 @@ import { createAppRuntime } from "../../core/app-runtime";
 import { createGloomberbCloudCapabilities, createGloomberbCloudProvider } from "../../sources/gloomberb-cloud";
 import { AssetDataRouter } from "../../sources/provider-router";
 import { JsonPersistence } from "../../data/json-persistence";
+import { isBrokerAccountSnapshotKey } from "../../brokers/account-cache";
 import { JsonTickerRepository } from "../../data/json-ticker-repository";
 
 export function createBrowserAppServices({ config, plugins, externalPlugins }: AppServicesFactoryOptions) {
@@ -15,7 +16,8 @@ export function createBrowserAppServices({ config, plugins, externalPlugins }: A
   );
   return createAppRuntime({
     config, plugins, externalPlugins, dataProvider,
-    persistence: new JsonPersistence(localStorage),
+    // Broker account snapshots are kept with the positions, so a reload keeps the account's equity and cash.
+    persistence: new JsonPersistence(localStorage, { keepResource: isBrokerAccountSnapshotKey }),
     tickerRepository: new JsonTickerRepository(localStorage),
     configure({ pluginRegistry, newsService }) {
       dataProvider.attachRegistry(pluginRegistry);

package/src/renderers/dom/build-assets.ts

@@ -1,5 +1,6 @@
 import { readFile, writeFile } from "fs/promises";
-import { join, relative } from "path";
+import { dirname, join, relative, resolve } from "path";
+import type { BunPlugin } from "bun";
 import { TITLEBAR_OVERLAY_HEIGHT_PX } from "../../components/layout/titlebar-overlay";
 
 /** Imports whose path ends with the first entry resolve to the second, relative to the view directory. */
@@ -27,6 +28,13 @@ interface ViewBundleOptions {
 }
 
 const ELECTROBUN_VIEW_DIR = join(process.cwd(), "src", "renderers", "electrobun", "view");
+
+/**
+ * Where the world map finds its land data, relative to the map's
+ * `basemap.ts`. Only view bundles define it, so the terminal binary, which
+ * never draws that map, leaves the data out.
+ */
+export const WORLD_MAP_DATA_SPECIFIER = "./natural-earth/index.chunk.js";
 const DOM_RENDERER_DIR = join(process.cwd(), "src", "renderers", "dom");
 
 export function electrobunViewPath(...parts: string[]): string {
@@ -50,6 +58,7 @@ export async function buildViewBundle({
   failureMessage,
   missingEntryMessage,
 }: ViewBundleOptions): Promise<{ script: string; stylesheet: string | null }> {
+  const chunks = new Map<string, string>();
   const result = await Bun.build({
     entrypoints: [entrypoint],
     outdir,
@@ -58,8 +67,15 @@ export async function buildViewBundle({
     splitting: false,
     sourcemap,
     minify: true,
-    define: { "process.env.NODE_ENV": "\"production\"", ...define },
-    plugins: aliasRules.length > 0 ? [electrobunViewAliasPlugin(aliasRules)] : [],
+    define: {
+      "process.env.NODE_ENV": "\"production\"",
+      __GLOOM_WORLD_MAP_DATA__: JSON.stringify(WORLD_MAP_DATA_SPECIFIER),
+      ...define,
+    },
+    plugins: [
+      lazyChunkPlugin(outdir, outdir, chunks),
+      ...(aliasRules.length > 0 ? [electrobunViewAliasPlugin(aliasRules)] : []),
+    ],
   });
 
   if (!result.success) {
@@ -69,6 +85,7 @@ export async function buildViewBundle({
 
   const script = result.outputs.find((output) => output.kind === "entry-point" && output.path.endsWith(".js"));
   if (!script) throw new Error(missingEntryMessage);
+  await buildLazyChunks(outdir, chunks, failureMessage);
 
   const stylesheet = result.outputs.find((output) => output.path.endsWith(".css"))?.path ?? null;
   if (stylesheet) await writeFile(stylesheet, withTitlebarOverlayHeight(await readFile(stylesheet, "utf8")));
@@ -122,6 +139,67 @@ ${bootstrapScript}
 `;
 }
 
+/**
+ * The view bundle is one file (no splitting), so a module reached through
+ * `import()` would land in it. A module named `*.chunk.ts` and imported as
+ * `import("./path/name.chunk.js")` instead ships as its own file at that path
+ * next to the importing bundle, fetched the first time it is asked for: large
+ * data only some panes draw, such as the world map's coastlines. The terminal
+ * and the tests run the source, where the same `import()` loads the module.
+ */
+function lazyChunkPlugin(rootOutdir: string, emitDir: string, chunks: Map<string, string>): BunPlugin {
+  return {
+    name: "lazy-chunks",
+    setup(build) {
+      build.onResolve({ filter: /\.chunk(\.js|\.ts)?$/ }, (args) => {
+        if (args.kind.startsWith("entry-point") || /[\\/]node_modules[\\/]/.test(args.importer)) return undefined;
+        if (args.kind !== "dynamic-import") {
+          throw new Error(`${args.path} is a lazy chunk; load it with import() (from ${args.importer})`);
+        }
+        if (!args.path.startsWith("./") || !args.path.endsWith(".chunk.js")) {
+          throw new Error(`Lazy chunk ${args.path} must be imported as "./<path>.chunk.js" (from ${args.importer})`);
+        }
+        const source = resolve(dirname(args.importer), args.path.replace(/\.js$/, ".ts"));
+        const output = resolve(emitDir, args.path);
+        if (relative(rootOutdir, output).startsWith("..")) throw new Error(`Lazy chunk ${args.path} would land outside ${rootOutdir}`);
+        const existing = chunks.get(output);
+        if (existing && existing !== source) throw new Error(`Two lazy chunks emit ${output}: ${existing} and ${source}`);
+        chunks.set(output, source);
+        return { path: args.path, external: true };
+      });
+    },
+  };
+}
+
+/** Builds each lazy chunk on its own, and the chunks those load in turn. */
+async function buildLazyChunks(rootOutdir: string, chunks: Map<string, string>, failureMessage: string): Promise<void> {
+  const built = new Set<string>();
+  let pending = [...chunks.entries()];
+  while (pending.length) {
+    const nested = new Map<string, string>();
+    for (const [output, source] of pending) {
+      if (built.has(output)) continue;
+      built.add(output);
+      const result = await Bun.build({
+        entrypoints: [source],
+        outdir: dirname(output),
+        naming: relative(dirname(output), output),
+        target: "browser",
+        format: "esm",
+        splitting: false,
+        sourcemap: "none",
+        minify: true,
+        plugins: [lazyChunkPlugin(rootOutdir, dirname(output), nested)],
+      });
+      if (!result.success) {
+        const details = result.logs.map((log) => log.message).filter(Boolean).join("\n");
+        throw new Error(`${failureMessage}: lazy chunk ${source}\n${details}`);
+      }
+    }
+    pending = [...nested.entries()];
+  }
+}
+
 function electrobunViewAliasPlugin(aliasRules: AliasRule[]) {
   return {
     name: "electrobun-view-aliases",

package/src/renderers/dom/data-table/dom.ts

@@ -143,6 +143,24 @@ export function useScrollBoxHandle(
     get scrollWidth() {
       return toCellX(elementRef.current?.scrollWidth ?? 0);
     },
+    // Whole rows are rounded, so the scroll keys read the ends in pixels.
+    get scrollTopPx() {
+      return options.headerOnly ? 0 : Math.max(0, elementRef.current?.scrollTop ?? 0);
+    },
+    get scrollHeightPx() {
+      const element = elementRef.current;
+      if (!element) return 0;
+      return options.headerOnly ? tableHeaderPx() : Math.max(0, element.scrollHeight - (options.viewportTopInsetPx ?? 0));
+    },
+    get viewportPx() {
+      const element = elementRef.current;
+      return {
+        width: Math.max(0, element?.clientWidth ?? 0),
+        height: options.headerOnly
+          ? tableHeaderPx()
+          : Math.max(0, (element?.clientHeight ?? 0) - (options.viewportTopInsetPx ?? 0)),
+      };
+    },
     get viewport() {
       const element = elementRef.current;
       if (options.headerOnly) {
@@ -161,6 +179,19 @@ export function useScrollBoxHandle(
     },
     horizontalScrollBar,
     verticalScrollBar,
+    scrollToPixels(target: number | { x?: number; y?: number }, y?: number) {
+      const element = elementRef.current;
+      if (!element || options.headerOnly) return;
+      if (typeof target === "number") {
+        element.scrollTop = Math.max(0, target);
+        if (typeof y === "number") element.scrollLeft = Math.max(0, y);
+        return;
+      }
+      element.scrollTo({
+        left: Math.max(0, target.x ?? element.scrollLeft),
+        top: Math.max(0, target.y ?? element.scrollTop),
+      });
+    },
     scrollTo(target: number | { x?: number; y?: number }, y?: number) {
       const element = elementRef.current;
       if (!element) return;

package/src/renderers/dom/data-table/index.tsx

@@ -11,6 +11,7 @@ import {
 } from "react";
 import { EmptyState } from "../../../components/ui/status";
 import { usePaneInstance } from "../../../state/app/context";
+import { useRegisterPaneScrollBox } from "../../../state/pane-scroll-registry";
 import { useRafCallback } from "../../../react/use-raf-callback";
 import { measurePerf } from "../../../utils/perf-marks";
 import type {
@@ -284,6 +285,10 @@ export function WebDataTable<T, C extends DataTableColumn = DataTableColumn>({
     bodyVertical.bar,
     { viewportTopInsetPx: headerPx },
   );
+  // The terminal table body is a ScrollBox the pane scroll keys already reach;
+  // this is the same for the desktop one. A table with a cursor takes the keys
+  // first, so only a table without one is scrolled by them.
+  useRegisterPaneScrollBox(scrollRef, { enabled: true });
 
   useEffect(() => {
     headerHorizontal.bar.visible = false;

package/src/renderers/dom/data-table/row.tsx

@@ -353,6 +353,8 @@ function WebDataTableRowInner<
           <div
             key={column.id}
             data-gloom-role="data-table-cell"
+            // The instant behind a shortened time ("Wed 11:27"), so a rendered-view report can print it whole.
+            data-gloom-cell-instant={cell.value instanceof Date && Number.isFinite(cell.value.getTime()) ? cell.value.toISOString() : undefined}
             style={{
               minWidth: 0,
               position: freezeFirstColumn && columnIndex === 0 ? "sticky" : undefined,

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

@@ -345,8 +345,10 @@ export function WebTextField({
           focusedBackgroundColor={plain ? "transparent" : resolvedBackgroundColor}
           cursorColor={colors.textBright}
           style={{
-            paddingLeft: plain ? 0 : comfortable ? 8 : 10,
-            paddingRight: plain ? 0 : comfortable ? 8 : 10,
+            // A framed field keeps its text one cell off the frame; a plain one
+            // sits flush in the row or band that holds it.
+            paddingLeft: plain ? 0 : "var(--cell-w)",
+            paddingRight: plain ? 0 : "var(--cell-w)",
             borderRadius: plain ? 0 : CONTROL_RADIUS,
             // The field is taller than a cell, so the input takes the inner
             // height and centers its text on the box's own line.
@@ -581,8 +583,10 @@ export function WebDialogFrame({
       </Box>
       {children}
       {footer && (
+        // Sized by its line, not one cell: a cell-high box with this padding
+        // left the key line hanging out of its bottom.
         <Box
-          height={1}
+          flexShrink={0}
           style={{
             borderTop: `1px solid ${panelBorder(colors)}`,
             paddingTop: 8,

package/src/renderers/dom/desktop/list-view.tsx

@@ -5,6 +5,7 @@ import { TextAttributes } from "../../../ui";
 import type { ListRowState, ListViewItem, ListViewProps } from "../../../components/ui/list-view";
 import { blendHex, hoverBg, type ThemeColors } from "../../../theme/colors";
 import { useThemeColors } from "../../../theme/theme-context";
+import { WEB_CELL_HEIGHT } from "../../../theme/font-scale";
 import { isInsideDialogSurface } from "../host/focus-scope";
 import { isEditableKeyboardTarget } from "../key-event";
 import {
@@ -58,6 +59,10 @@ function DefaultDesktopRow({
   );
 }
 
+const FRAMED_LIST_PADDING_PX = 4;
+/** What a framed list adds above and below its rows: padding and a 1px border on each side. */
+const FRAMED_LIST_CHROME_PX = 2 * (FRAMED_LIST_PADDING_PX + 1);
+
 function listRowStyle(selected: boolean, disabled: boolean, colors: ThemeColors): CSSProperties {
   return {
     borderRadius: CONTROL_RADIUS,
@@ -109,6 +114,16 @@ export function WebListView({
   const tabStopIndex = selectedIndex >= 0 && items[selectedIndex] && !items[selectedIndex].disabled
     ? selectedIndex : items.findIndex((item) => !item.disabled);
   const effectiveSurface = surface ?? (scrollable ? "framed" : "plain");
+  // `height` counts terminal rows. A list that is not meant to scroll takes
+  // only the rows it has, up to that many; one with more rows than that
+  // scrolls inside the height instead of drawing over whatever follows it.
+  const rowsHeight = items.length === 0 ? 1 : items.length * rowHeight + (items.length - 1) * rowGap;
+  const overflowsHeight = !scrollable && height != null && rowsHeight > height;
+  const scrolls = scrollable || overflowsHeight;
+  // The frame's padding and border sit outside the rows it was asked to hold.
+  const scrollHeight = overflowsHeight
+    ? `${height * WEB_CELL_HEIGHT + (effectiveSurface === "plain" ? 0 : FRAMED_LIST_CHROME_PX)}px`
+    : height;
   const frameStyle = effectiveSurface === "plain"
     ? {
       border: "none",
@@ -119,12 +134,12 @@ export function WebListView({
     : {
       border: `1px solid ${panelBorder(colors)}`,
       borderRadius: CONTROL_RADIUS,
-      padding: 4,
+      padding: FRAMED_LIST_PADDING_PX,
       backgroundColor: subtlePanelFill(colors),
     };
 
   useEffect(() => {
-    if (!scrollable || !autoScrollToIndex || activeScrollIndex < 0) return;
+    if (!scrolls || !autoScrollToIndex || activeScrollIndex < 0) return;
     const scrollBox = scrollRef.current;
     if (!scrollBox) return;
     const safeIndex = Math.min(activeScrollIndex, items.length - 1);
@@ -136,16 +151,16 @@ export function WebListView({
     } else if (rowBottom > scrollBox.scrollTop + viewportHeight) {
       scrollBox.scrollTo(rowBottom - viewportHeight);
     }
-  }, [activeScrollIndex, autoScrollToIndex, items.length, rowHeight, rowStride, scrollable]);
+  }, [activeScrollIndex, autoScrollToIndex, items.length, rowHeight, rowStride, scrolls]);
 
   useEffect(() => {
-    if (!scrollable) return;
+    if (!scrolls) return;
     const scrollBox = scrollRef.current;
     if (!scrollBox) return;
     if (scrollBox.verticalScrollBar) {
       scrollBox.verticalScrollBar.visible = items.length * rowStride - rowGap > (scrollBox.viewport?.height ?? 0);
     }
-  }, [items.length, height, flexGrow, rowGap, rowStride, scrollable]);
+  }, [items.length, height, flexGrow, rowGap, rowStride, scrolls]);
 
   // The dialog or pane around the list moves its cursor (j/k, Home/End). A row
   // Tab or a press left focused follows it, or Space and Enter would act on the
@@ -156,8 +171,8 @@ export function WebListView({
     const active = document.activeElement;
     if (!list || !active || !list.contains(active) || isEditableKeyboardTarget(active)) return;
     const row = list.querySelectorAll<HTMLElement>('[role="option"]')[selectedIndex];
-    if (row && !row.contains(active)) row.focus({ preventScroll: scrollable });
-  }, [listDomId, scrollable, selectedIndex]);
+    if (row && !row.contains(active)) row.focus({ preventScroll: scrolls });
+  }, [listDomId, scrolls, selectedIndex]);
 
   const rows = items.length === 0
     ? (
@@ -233,11 +248,21 @@ export function WebListView({
     });
 
   return (
-    <Box id={listDomId} flexDirection="column" height={height} flexGrow={flexGrow} gap={1} role="listbox" aria-label={remoteLabel}>
-      {scrollable ? (
+    <Box
+      id={listDomId}
+      flexDirection="column"
+      height={scrollable ? height : undefined}
+      // A list sized by its container gives up height to it, and scrolls.
+      minHeight={scrollable && height == null ? 0 : undefined}
+      flexGrow={flexGrow}
+      gap={1}
+      role="listbox"
+      aria-label={remoteLabel}
+    >
+      {scrolls ? (
         <ScrollBox
           ref={scrollRef}
-          height={height}
+          height={scrollHeight}
           flexGrow={flexGrow}
           scrollY
           focusable={false}

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,