gloomberb 0.9.9 → 0.10.0

package/src/renderers/electrobun/view/ai-host.ts

@@ -3,28 +3,103 @@ import {
   type AiRunnerEvent,
 } from "../../../capabilities";
 import {
-  getAiProviderDefinitions,
-  __setDetectedProvidersForTests,
-} from "../../../plugins/builtin/ai/providers";
-import { AiRunCancelledError, setAiRunHost } from "../../../plugins/builtin/ai/runner";
+  AiRunCancelledError,
+  installAiRunHost,
+  type AiAuthProgressEvent,
+  type AiRunHost,
+  type AiRuntimeAuthType,
+  type AiRuntimeCatalog,
+} from "../../../plugins/builtin/ai/runner";
+import { debugLog } from "../../../utils/debug-log";
 import { backendRequest, onCapabilityEvent } from "./backend-rpc";
 
+const AI_STARTUP_READINESS_TIMEOUT_MS = 5_000;
+const aiHostLog = debugLog.createLogger("electrobun-ai-host");
 let nextRunId = 1;
 
-export async function installElectrobunAiHost(): Promise<void> {
-  const availability = await backendRequest<Record<string, boolean>>("capability.invoke", {
+function connectProvider(
+  providerId: string,
+  authType?: AiRuntimeAuthType,
+  onAuthEvent?: (event: AiAuthProgressEvent) => void,
+): Promise<AiRuntimeCatalog> {
+  const subscriptionId = `ai-login:${nextRunId++}`;
+  let settled = false;
+  let disposeMessages: () => void = () => {};
+  let resolveDone: (catalog: AiRuntimeCatalog) => void = () => {};
+  let rejectDone: (error: unknown) => void = () => {};
+  const cleanup = () => {
+    disposeMessages();
+    void backendRequest("capability.unsubscribe", { subscriptionId }).catch(() => {});
+  };
+  const settle = (callback: () => void) => {
+    if (settled) return;
+    settled = true;
+    cleanup();
+    callback();
+  };
+  const done = new Promise<AiRuntimeCatalog>((resolve, reject) => {
+    resolveDone = resolve;
+    rejectDone = reject;
+  });
+  disposeMessages = onCapabilityEvent(subscriptionId, (message) => {
+    const event = message.event as AiRunnerEvent;
+    if (event.kind === "account-connected") {
+      settle(() => resolveDone(event.catalog as AiRuntimeCatalog));
+    } else if (event.kind === "account-auth") {
+      onAuthEvent?.(event.event);
+    } else if (event.kind === "account-error") {
+      settle(() => rejectDone(new Error(event.error)));
+    }
+  });
+  void backendRequest("capability.subscribe", {
+    subscriptionId,
     capabilityId: AI_RUNNER_CAPABILITY_ID,
-    operationId: "getProviderAvailability",
-    payload: {},
+    operationId: "connectProvider",
+    payload: { providerId, authType },
+  }).catch((error) => {
+    settle(() => rejectDone(error));
+  }).finally(() => {
+    if (settled) void backendRequest("capability.unsubscribe", { subscriptionId }).catch(() => {});
   });
-  const providers = getAiProviderDefinitions().map((definition) => ({
-    ...definition,
-    available: availability[definition.id] ?? false,
-  }));
+  return done;
+}
 
-  __setDetectedProvidersForTests(providers);
-  setAiRunHost({
-    run({ provider, prompt, cwd, onChunk }) {
+export function installElectrobunAiHost(): void {
+  const host: AiRunHost = {
+    getCatalog() {
+      return backendRequest("capability.invoke", {
+        capabilityId: AI_RUNNER_CAPABILITY_ID,
+        operationId: "getCatalog",
+        payload: {},
+      });
+    },
+    connect(providerId, authType, onAuthEvent) {
+      return connectProvider(providerId, authType, onAuthEvent);
+    },
+    disconnect(providerId) {
+      return backendRequest("capability.invoke", {
+        capabilityId: AI_RUNNER_CAPABILITY_ID,
+        operationId: "disconnectProvider",
+        payload: { providerId },
+      });
+    },
+    checkStatus(providerId) {
+      return backendRequest("capability.invoke", {
+        capabilityId: AI_RUNNER_CAPABILITY_ID,
+        operationId: "checkProviderStatus",
+        payload: { providerId },
+      });
+    },
+    run({
+      providerId,
+      prompt,
+      messages,
+      agentMessages,
+      modelId,
+      onChunk,
+      onAgentMessages,
+      outputMode,
+    }) {
       const subscriptionId = `ai-run:${nextRunId++}`;
       let disposed = false;
       let settled = false;
@@ -58,7 +133,10 @@ export async function installElectrobunAiHost(): Promise<void> {
             onChunk?.(event.output);
             break;
           case "done":
-            settle(() => resolveDone(event.output));
+            settle(() => {
+              if (event.agentMessages) onAgentMessages?.(event.agentMessages);
+              resolveDone(event.output);
+            });
             break;
           case "cancelled":
             settle(() => rejectDone(new AiRunCancelledError()));
@@ -66,21 +144,35 @@ export async function installElectrobunAiHost(): Promise<void> {
           case "error":
             settle(() => rejectDone(new Error(event.error)));
             break;
+          case "account-connected":
+          case "account-auth":
+          case "account-error":
+            break;
         }
       });
 
-      void backendRequest("capability.subscribe", {
+      const subscribePromise = backendRequest("capability.subscribe", {
         subscriptionId,
         capabilityId: AI_RUNNER_CAPABILITY_ID,
         operationId: "run",
         payload: {
-          providerId: provider.id,
+          providerId,
           prompt,
-          cwd,
+          messages,
+          agentMessages,
+          modelId,
+          outputMode,
         },
       }).catch((error) => {
         settle(() => rejectDone(error));
+      }).finally(() => {
+        // Cancellation can race the async subscribe. Unsubscribe again after it
+        // settles so a late backend subscription cannot outlive this run.
+        if (disposed) {
+          void backendRequest("capability.unsubscribe", { subscriptionId }).catch(() => {});
+        }
       });
+      void subscribePromise;
 
       return {
         done,
@@ -89,5 +181,18 @@ export async function installElectrobunAiHost(): Promise<void> {
         },
       };
     },
+  };
+  void installAiRunHost(host, {
+    catalogTimeoutMs: AI_STARTUP_READINESS_TIMEOUT_MS,
+    timeoutMessage: "In-app AI provider discovery timed out during desktop startup",
+    onCatalogError(error) {
+      aiHostLog.warn("In-app AI provider discovery could not finish during desktop startup", {
+        error: error instanceof Error ? error.message : String(error),
+      });
+    },
+  }).catch((error) => {
+    aiHostLog.warn("In-app AI providers could not be initialized", {
+      error: error instanceof Error ? error.message : String(error),
+    });
   });
 }

package/src/renderers/electrobun/view/backend-rpc.ts

@@ -164,6 +164,10 @@ export async function backendRequest<T = unknown>(method: string, payload: unkno
   return decodeRpcValue<T>(result);
 }
 
+export function requestMainWindowRemoteControl(request: RemoteControlRequest): Promise<RemoteControlResponse> {
+  return backendRequest("remote.forward", { request });
+}
+
 export async function initElectrobunBackend(payload?: { kind?: "main" | "detached"; paneId?: string }): Promise<ElectrobunBackendInit> {
   initSnapshot = await backendRequest<ElectrobunBackendInit>("init", payload ?? null);
   return initSnapshot;

package/src/renderers/electrobun/view/cli-pane-shot-entry.tsx

@@ -14,16 +14,30 @@ import { webUiHost } from "./ui-host";
 import { getLoadablePlugins } from "../../../plugins/catalog";
 import { setSharedMarketDataForTests } from "../../../plugins/registry";
 import { PluginRenderProvider, type PluginRuntimeAccess } from "../../../plugins/runtime";
+import {
+  RemoteUiRegistryProvider,
+  useRemoteUiRegistry,
+} from "../../../remote/semantic-tree";
+import type { RemoteUiNodeSnapshot } from "../../../remote/types";
 import { FloatingPaneWrapper } from "../../../components/layout/floating-pane";
 import { PaneContent } from "../../../components/layout/pane/content";
 import { resolvePaneBodyFrame } from "../../../components/layout/pane/sizing";
 import { getPaneDisplayTitle } from "../../../components/layout/pane/title";
+import { subtractTimeRange } from "../../../components/chart/core/date-window";
+import {
+  getPresetResolution,
+  normalizeChartResolutionSupport,
+  TIME_RANGE_ORDER,
+} from "../../../components/chart/core/resolution";
+import type { TimeRange } from "../../../components/chart/core/types";
 import type { AppConfig } from "../../../types/config";
 import type { CachedFinancialsTarget, DataProvider, QuoteSubscriptionTarget } from "../../../types/data-provider";
-import type { OptionsChain, TickerFinancials } from "../../../types/financials";
+import type { OptionsChain, PricePoint, TickerFinancials } from "../../../types/financials";
 import type { TickerRecord } from "../../../types/ticker";
 import type { AppState, PaneRuntimeState } from "../../../core/state/app/state";
 import type { PaneDef } from "../../../types/plugin";
+import { canonicalTickerKey, parsePublicTickerKey } from "../../../utils/exchanges";
+import { hydrateFredSeries, type FredSeriesCacheEntry } from "../../../data/fred-series";
 
 interface CliPaneShotPayload {
   config: AppConfig;
@@ -33,6 +47,7 @@ interface CliPaneShotPayload {
   tickers: TickerRecord[];
   financials: Array<[string, TickerFinancials]>;
   optionsChains: Array<[string, OptionsChain]>;
+  fredSeries: Array<[string, FredSeriesCacheEntry]>;
   paneState: Record<string, PaneRuntimeState>;
 }
 
@@ -42,10 +57,14 @@ declare global {
     __GLOOM_CLI_SHOT_READY__?: boolean;
     __GLOOM_CLI_SHOT_PENDING__?: number;
     __GLOOM_CLI_SHOT_ERROR__?: string;
+    __GLOOM_CLI_SHOT_SEMANTIC_UI__?: RemoteUiNodeSnapshot[];
   }
 }
 
-const SHOT_READY_STABLE_FRAMES = 2;
+// Effects that request pane data start after the first paint. Waiting only two
+// frames can capture the shell before those requests register, leaving a
+// loading chart or stale performance table in an otherwise valid PNG.
+const SHOT_READY_STABLE_FRAMES = 10;
 const SHOT_LOADING_TEXT_PATTERN = /\b(Loading|Rendering pane)\b/i;
 const TRACKED_RESPONSE_METHODS = new Set<PropertyKey>([
   "arrayBuffer",
@@ -58,6 +77,12 @@ const TRACKED_RESPONSE_METHODS = new Set<PropertyKey>([
 let pendingShotWork = 0;
 let didInstallShotFetchTracker = false;
 let shotDataProvider: DataProvider | null = null;
+const SHOT_CHART_RESOLUTION_SUPPORT = normalizeChartResolutionSupport(
+  TIME_RANGE_ORDER.map((maxRange) => ({
+    resolution: getPresetResolution(maxRange),
+    maxRange,
+  })),
+);
 
 const rendererHost: RendererHost = {
   requestExit() {},
@@ -73,6 +98,22 @@ function normalizeSymbol(value: string): string {
   return value.trim().replace(/^\$/, "").toUpperCase();
 }
 
+function clipShotPriceHistory(points: PricePoint[], range: TimeRange): PricePoint[] {
+  if (range === "ALL" || points.length === 0) return points;
+  const dated = points.flatMap((point) => {
+    const date = point.date instanceof Date ? point.date : new Date(point.date);
+    return Number.isFinite(date.getTime()) ? [{ point, date }] : [];
+  });
+  const end = dated.reduce<Date | null>((latest, entry) => (
+    !latest || entry.date.getTime() > latest.getTime() ? entry.date : latest
+  ), null);
+  if (!end) return [];
+  const start = subtractTimeRange(end, range);
+  return dated
+    .filter(({ date }) => date.getTime() >= start.getTime() && date.getTime() <= end.getTime())
+    .map(({ point }) => point);
+}
+
 function updatePendingShotWork(next: number): void {
   pendingShotWork = Math.max(0, next);
   window.__GLOOM_CLI_SHOT_PENDING__ = pendingShotWork;
@@ -112,6 +153,24 @@ function isShotLoadingTextVisible(): boolean {
   return SHOT_LOADING_TEXT_PATTERN.test(document.body.textContent ?? "");
 }
 
+function hasUnresolvedChartData(): boolean {
+  return (window.__GLOOM_CLI_SHOT_SEMANTIC_UI__ ?? []).some((node) => (
+    node.role === "chart-data"
+    && (
+      node.metadata?.kind === "stock-price"
+      || node.metadata?.kind === "price-comparison"
+      || node.metadata?.kind === "chart-composer"
+    )
+    && (
+      node.metadata.loading === true
+      || (node.metadata.kind !== "chart-composer" && (
+        typeof node.metadata.projectedPointCount !== "number"
+        || node.metadata.projectedPointCount <= 0
+      ))
+    )
+  ));
+}
+
 function waitForShotReadiness(): () => void {
   let cancelled = false;
   let mutationVersion = 0;
@@ -131,7 +190,12 @@ function waitForShotReadiness(): () => void {
     if (cancelled || window.__GLOOM_CLI_SHOT_READY__) return;
     const changedSinceLastFrame = mutationVersion !== lastSeenMutationVersion;
     lastSeenMutationVersion = mutationVersion;
-    if (pendingShotWork === 0 && !isShotLoadingTextVisible() && !changedSinceLastFrame) {
+    if (
+      pendingShotWork === 0
+      && !isShotLoadingTextVisible()
+      && !hasUnresolvedChartData()
+      && !changedSinceLastFrame
+    ) {
       stableFrames += 1;
     } else {
       stableFrames = 0;
@@ -153,11 +217,22 @@ function waitForShotReadiness(): () => void {
 }
 
 function createShotDataProvider(payload: CliPaneShotPayload): DataProvider {
-  const financials = new Map(payload.financials.map(([symbol, data]) => [normalizeSymbol(symbol), data]));
-  const optionsChains = new Map((payload.optionsChains ?? []).map(([symbol, data]) => [normalizeSymbol(symbol), data]));
+  const financials = new Map<string, TickerFinancials>();
+  for (const [key, data] of payload.financials) {
+    const instrument = parsePublicTickerKey(key);
+    financials.set(canonicalTickerKey(instrument.symbol, instrument.exchange), data);
+    if (!instrument.exchange) financials.set(normalizeSymbol(instrument.symbol), data);
+  }
+  const optionsChains = new Map<string, OptionsChain>();
+  for (const [key, data] of payload.optionsChains ?? []) {
+    const instrument = parsePublicTickerKey(key);
+    optionsChains.set(canonicalTickerKey(instrument.symbol, instrument.exchange), data);
+    if (!instrument.exchange) optionsChains.set(normalizeSymbol(instrument.symbol), data);
+  }
 
-  const getFinancials = (symbol: string) => {
-    const data = financials.get(normalizeSymbol(symbol));
+  const getFinancials = (symbol: string, exchange?: string) => {
+    const data = financials.get(canonicalTickerKey(symbol, exchange))
+      ?? financials.get(normalizeSymbol(symbol));
     if (!data) throw new Error(`No screenshot market data available for ${symbol}.`);
     return data;
   };
@@ -165,18 +240,20 @@ function createShotDataProvider(payload: CliPaneShotPayload): DataProvider {
   return {
     id: "cli-shot",
     name: "CLI screenshot data",
-    getTickerFinancials(ticker) {
-      return trackShotWork(Promise.resolve().then(() => getFinancials(ticker)));
+    getTickerFinancials(ticker, exchange) {
+      return trackShotWork(Promise.resolve().then(() => getFinancials(ticker, exchange)));
     },
     getTickerFinancialsBatch(targets: CachedFinancialsTarget[]) {
       return resolveShotWork(targets.map((target) => ({
         target,
-        financials: financials.get(normalizeSymbol(target.symbol)) ?? null,
+        financials: financials.get(canonicalTickerKey(target.symbol, target.exchange))
+          ?? financials.get(normalizeSymbol(target.symbol))
+          ?? null,
       })));
     },
-    getQuote(ticker) {
+    getQuote(ticker, exchange) {
       return trackShotWork(Promise.resolve().then(() => {
-        const quote = getFinancials(ticker).quote;
+        const quote = getFinancials(ticker, exchange).quote;
         if (!quote) throw new Error(`No screenshot quote data available for ${ticker}.`);
         return quote;
       }));
@@ -184,15 +261,17 @@ function createShotDataProvider(payload: CliPaneShotPayload): DataProvider {
     getQuotesBatch(targets: QuoteSubscriptionTarget[]) {
       return resolveShotWork(targets.map((target) => ({
         target,
-        quote: financials.get(normalizeSymbol(target.symbol))?.quote ?? null,
+        quote: (financials.get(canonicalTickerKey(target.symbol, target.exchange))
+          ?? financials.get(normalizeSymbol(target.symbol)))?.quote ?? null,
       })));
     },
     getExchangeRate() {
       return resolveShotWork(1);
     },
-    getOptionsChain(ticker) {
+    getOptionsChain(ticker, exchange) {
       return trackShotWork(Promise.resolve().then(() => {
-        const chain = optionsChains.get(normalizeSymbol(ticker));
+        const chain = optionsChains.get(canonicalTickerKey(ticker, exchange))
+          ?? optionsChains.get(normalizeSymbol(ticker));
         if (!chain) throw new Error(`No screenshot options data available for ${ticker}.`);
         return chain;
       }));
@@ -213,11 +292,18 @@ function createShotDataProvider(payload: CliPaneShotPayload): DataProvider {
     getArticleSummary() {
       return resolveShotWork(null);
     },
-    getPriceHistory(ticker) {
-      return trackShotWork(Promise.resolve().then(() => getFinancials(ticker).priceHistory ?? []));
+    getPriceHistory(ticker, exchange, range) {
+      return trackShotWork(Promise.resolve().then(() => (
+        clipShotPriceHistory(getFinancials(ticker, exchange).priceHistory ?? [], range)
+      )));
     },
-    getPriceHistoryForResolution(ticker) {
-      return trackShotWork(Promise.resolve().then(() => getFinancials(ticker).priceHistory ?? []));
+    getPriceHistoryForResolution(ticker, exchange, bufferRange) {
+      return trackShotWork(Promise.resolve().then(() => (
+        clipShotPriceHistory(getFinancials(ticker, exchange).priceHistory ?? [], bufferRange)
+      )));
+    },
+    getChartResolutionSupport() {
+      return resolveShotWork(SHOT_CHART_RESOLUTION_SUPPORT);
     },
     subscribeQuotes() {
       return () => {};
@@ -230,8 +316,14 @@ function installShotMarketData(payload: CliPaneShotPayload): void {
   shotDataProvider = provider;
   const coordinator = new MarketDataCoordinator(provider);
   coordinator.primeCachedFinancials(payload.tickers.flatMap((ticker) => {
-    const financials = payload.financials.find(([symbol]) => normalizeSymbol(symbol) === normalizeSymbol(ticker.metadata.ticker))?.[1];
     const instrument = instrumentFromTicker(ticker, ticker.metadata.ticker);
+    const instrumentKey = instrument
+      ? canonicalTickerKey(instrument.symbol, instrument.exchange)
+      : normalizeSymbol(ticker.metadata.ticker);
+    const financials = payload.financials.find(([key]) => {
+      const candidate = parsePublicTickerKey(key);
+      return canonicalTickerKey(candidate.symbol, candidate.exchange) === instrumentKey;
+    })?.[1];
     return instrument && financials ? [{ instrument, financials }] : [];
   }));
   setSharedMarketDataForTests(provider);
@@ -315,6 +407,22 @@ function HydratePayload({
   return children;
 }
 
+function CaptureShotSemanticUi() {
+  const registry = useRemoteUiRegistry();
+
+  useEffect(() => {
+    let frame = 0;
+    const capture = () => {
+      window.__GLOOM_CLI_SHOT_SEMANTIC_UI__ = registry?.snapshot() ?? [];
+      frame = requestAnimationFrame(capture);
+    };
+    capture();
+    return () => cancelAnimationFrame(frame);
+  }, [registry]);
+
+  return null;
+}
+
 function ShotPane({ payload }: { payload: CliPaneShotPayload }) {
   const instance = payload.config.layout.instances.find((entry) => entry.instanceId === payload.paneId);
   if (!instance) throw new Error(`Pane instance ${payload.paneId} is missing from the screenshot layout.`);
@@ -375,31 +483,35 @@ function render() {
   const payload = window.__GLOOM_CLI_SHOT_PAYLOAD__;
   if (!payload) throw new Error("Missing CLI pane screenshot payload.");
   installShotFetchTracker();
+  hydrateFredSeries(payload.fredSeries ?? []);
   installShotMarketData(payload);
 
   const rootElement = document.getElementById("root");
   if (!rootElement) throw new Error("Missing root element.");
 
   createRoot(rootElement).render(
-    <UiHostProvider ui={webUiHost} renderer={rendererHost} nativeRenderer={webNativeRenderer}>
-      <WebInputHostProvider>
-        <WebToastHostProvider>
-          <WebDialogHostProvider>
-            <AppProvider config={payload.config} desktopSnapshot={{
-              config: payload.config,
-              paneState: payload.paneState,
-              focusedPaneId: payload.paneId,
-              activePanel: "right",
-              statusBarVisible: false,
-            }}>
-              <HydratePayload payload={payload}>
-                <ShotPane payload={payload} />
-              </HydratePayload>
-            </AppProvider>
-          </WebDialogHostProvider>
-        </WebToastHostProvider>
-      </WebInputHostProvider>
-    </UiHostProvider>,
+    <RemoteUiRegistryProvider>
+      <CaptureShotSemanticUi />
+      <UiHostProvider ui={webUiHost} renderer={rendererHost} nativeRenderer={webNativeRenderer}>
+        <WebInputHostProvider>
+          <WebToastHostProvider>
+            <WebDialogHostProvider>
+              <AppProvider config={payload.config} desktopSnapshot={{
+                config: payload.config,
+                paneState: payload.paneState,
+                focusedPaneId: payload.paneId,
+                activePanel: "right",
+                statusBarVisible: false,
+              }}>
+                <HydratePayload payload={payload}>
+                  <ShotPane payload={payload} />
+                </HydratePayload>
+              </AppProvider>
+            </WebDialogHostProvider>
+          </WebToastHostProvider>
+        </WebInputHostProvider>
+      </UiHostProvider>
+    </RemoteUiRegistryProvider>,
   );
 }
 

package/src/renderers/electrobun/view/desktop/popover.tsx

@@ -0,0 +1,166 @@
+/// <reference lib="dom" />
+/** @jsxImportSource react */
+
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import type { HostPopoverProps } from "../../../../ui";
+import { blendHex, colors } from "../../../../theme/colors";
+import { useThemeColors } from "../../../../theme/theme-context";
+
+const VIEWPORT_MARGIN = 10;
+const POPOVER_GAP = 6;
+
+interface PopoverPosition {
+  left: number;
+  top: number;
+  visible: boolean;
+}
+
+function cssSize(value: number | string | undefined): number | string | undefined {
+  return typeof value === "number" ? `${value}px` : value;
+}
+
+export function WebPopover({
+  open,
+  onOpenChange,
+  trigger,
+  children,
+  anchorPoint,
+  placement = "bottom-start",
+  minWidth = 280,
+  maxWidth = "min(420px, calc(100vw - 20px))",
+  label,
+}: HostPopoverProps) {
+  useThemeColors();
+  const anchorRef = useRef<HTMLDivElement | null>(null);
+  const popoverRef = useRef<HTMLDivElement | null>(null);
+  const [position, setPosition] = useState<PopoverPosition>({ left: 0, top: 0, visible: false });
+
+  const updatePosition = useCallback(() => {
+    const anchor = anchorRef.current;
+    const popover = popoverRef.current;
+    if (!anchor || !popover) return;
+
+    const popoverRect = popover.getBoundingClientRect();
+    const triggerRect = anchor.getBoundingClientRect();
+    // 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))) {
+      setPosition({
+        left: Math.max(
+          VIEWPORT_MARGIN,
+          Math.min(
+            (window.innerWidth - popoverRect.width) / 2,
+            window.innerWidth - popoverRect.width - VIEWPORT_MARGIN,
+          ),
+        ),
+        top: Math.max(
+          VIEWPORT_MARGIN,
+          Math.min(
+            (window.innerHeight - popoverRect.height) / 2,
+            window.innerHeight - popoverRect.height - VIEWPORT_MARGIN,
+          ),
+        ),
+        visible: true,
+      });
+      return;
+    }
+    const anchorRect = anchorPoint
+      ? {
+        left: anchorPoint.x,
+        right: anchorPoint.x,
+        top: anchorPoint.y,
+        bottom: anchorPoint.y,
+      }
+      : triggerRect;
+    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 below = anchorRect.bottom + POPOVER_GAP;
+    const above = anchorRect.top - popoverRect.height - POPOVER_GAP;
+    const top = below + popoverRect.height <= window.innerHeight - VIEWPORT_MARGIN
+      ? below
+      : Math.max(VIEWPORT_MARGIN, above);
+    setPosition({ left, top, visible: true });
+  }, [anchorPoint, placement, trigger]);
+
+  useLayoutEffect(() => {
+    if (!open) {
+      setPosition((current) => current.visible ? { ...current, visible: false } : current);
+      return;
+    }
+    updatePosition();
+    const frame = window.requestAnimationFrame(updatePosition);
+    window.addEventListener("resize", updatePosition);
+    document.addEventListener("scroll", updatePosition, true);
+    return () => {
+      window.cancelAnimationFrame(frame);
+      window.removeEventListener("resize", updatePosition);
+      document.removeEventListener("scroll", updatePosition, true);
+    };
+  }, [open, updatePosition]);
+
+  useEffect(() => {
+    if (!open) return;
+    const focusFrame = window.requestAnimationFrame(() => popoverRef.current?.focus({ preventScroll: true }));
+    const handleOutsideMouseDown = (event: MouseEvent) => {
+      const target = event.target;
+      if (!(target instanceof Node)) return;
+      if (anchorRef.current?.contains(target) || popoverRef.current?.contains(target)) return;
+      onOpenChange(false);
+    };
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key !== "Escape") return;
+      event.preventDefault();
+      event.stopPropagation();
+      onOpenChange(false);
+      queueMicrotask(() => anchorRef.current?.focus({ preventScroll: true }));
+    };
+    document.addEventListener("mousedown", handleOutsideMouseDown, true);
+    document.addEventListener("keydown", handleKeyDown, true);
+    return () => {
+      window.cancelAnimationFrame(focusFrame);
+      document.removeEventListener("mousedown", handleOutsideMouseDown, true);
+      document.removeEventListener("keydown", handleKeyDown, true);
+    };
+  }, [onOpenChange, open]);
+
+  return (
+    <>
+      <div ref={anchorRef} tabIndex={-1} className="gloom-popover-anchor">
+        {trigger}
+      </div>
+      {open && createPortal(
+        <div
+          ref={popoverRef}
+          className="gloom-popover"
+          role="dialog"
+          aria-label={label}
+          tabIndex={-1}
+          onMouseDown={(event) => event.stopPropagation()}
+          onClick={(event) => event.stopPropagation()}
+          style={{
+            left: position.left,
+            top: position.top,
+            visibility: position.visible ? "visible" : "hidden",
+            minWidth: cssSize(minWidth),
+            maxWidth: cssSize(maxWidth),
+            borderColor: blendHex(colors.border, colors.borderFocused, 0.18),
+            background: blendHex(colors.panel, colors.bg, 0.08),
+            color: colors.text,
+          }}
+        >
+          {children}
+        </div>,
+        document.body,
+      )}
+    </>
+  );
+}