gloomberb 0.10.0 → 0.10.2

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

@@ -3,7 +3,7 @@ import { useRef, type RefObject } from "react";
 import { Box, Input, Text, Textarea, editableTextContextMenuItems, useRendererHost, useUiCapabilities } from "../../../../ui";
 import { TextAttributes, type InputRenderable } from "../../../../ui";
 import { useShortcut } from "../../../../react/input";
-import { blendHex, colors } from "../../../../theme/colors";
+import { blendHex, type ThemeColors } from "../../../../theme/colors";
 import { contrastRatio } from "../../../../theme/color-utils";
 import { useThemeColors } from "../../../../theme/theme-context";
 import { isDetailBackNavigationKey } from "../../../../utils/back-navigation";
@@ -35,8 +35,8 @@ export function WebButton({
   width,
   height,
 }: ButtonProps) {
-  useThemeColors();
-  const palette = buttonPalette({ variant, active, disabled });
+  const colors = useThemeColors();
+  const palette = buttonPalette({ variant, active, disabled }, colors);
 
   return (
     <Box
@@ -56,7 +56,7 @@ export function WebButton({
         borderRadius: CONTROL_RADIUS,
         paddingLeft: 8,
         paddingRight: 8,
-        boxShadow: controlShadow(active),
+        boxShadow: controlShadow(active, colors),
         cursor: disabled ? "default" : "pointer",
       }}
     >
@@ -81,7 +81,7 @@ export function WebButton({
   );
 }
 
-function checkboxAccentColor(): string {
+function checkboxAccentColor(colors: ThemeColors): string {
   const base = colors.borderFocused;
   const nativeCheckmark = "#ffffff";
   const candidates = [
@@ -112,15 +112,15 @@ export function WebCheckbox({
   description,
   width,
 }: CheckboxProps) {
-  useThemeColors();
+  const colors = useThemeColors();
   const textColor = disabled
     ? colors.textMuted
     : active
     ? colors.textBright
     : colors.text;
   const visibleLabel = displayLabel ?? label;
-  const accentColor = checkboxAccentColor();
-  const borderColor = checked ? accentColor : controlBorderColor(active, false);
+  const accentColor = checkboxAccentColor(colors);
+  const borderColor = checked ? accentColor : controlBorderColor(active, false, colors);
   return (
     <Box
       flexDirection="column"
@@ -164,7 +164,7 @@ export function WebCheckbox({
             width: 14,
             height: 14,
             margin: 0,
-            backgroundColor: checked ? accentColor : panelFill(),
+            backgroundColor: checked ? accentColor : panelFill(colors),
             backgroundImage: checked ? checkboxCheckImage() : undefined,
             backgroundPosition: "center",
             backgroundRepeat: "no-repeat",
@@ -217,12 +217,15 @@ export function WebTextField({
   hint,
   type = "text",
   variant = "default",
-  backgroundColor = colors.bg,
-  textColor = colors.text,
-  placeholderColor = colors.textDim,
+  backgroundColor,
+  textColor,
+  placeholderColor,
   onMouseDown,
 }: TextFieldProps) {
-  useThemeColors();
+  const colors = useThemeColors();
+  const resolvedBackgroundColor = backgroundColor ?? colors.bg;
+  const resolvedTextColor = textColor ?? colors.text;
+  const resolvedPlaceholderColor = placeholderColor ?? colors.textDim;
   const localInputRef = useRef<InputRenderable>(null);
   const resolvedInputRef = inputRef ?? localInputRef;
   const renderer = useRendererHost();
@@ -234,7 +237,7 @@ export function WebTextField({
       {label && (
         <Box height={1}>
           <Text
-            fg={focused ? colors.textBright : placeholderColor}
+            fg={focused ? colors.textBright : resolvedPlaceholderColor}
             style={{ fontWeight: 600 }}
           >
             {label}
@@ -245,7 +248,7 @@ export function WebTextField({
         height={1}
         width={width}
         alignItems="center"
-        backgroundColor={plain ? "transparent" : backgroundColor}
+        backgroundColor={plain ? "transparent" : resolvedBackgroundColor}
         onMouseDown={() => {
           onMouseDown?.();
           resolvedInputRef.current?.focus?.();
@@ -259,9 +262,9 @@ export function WebTextField({
         }}
         data-gloom-role="desktop-text-field"
         style={{
-          border: plain ? "none" : `1px solid ${controlBorderColor(focused, false)}`,
+          border: plain ? "none" : `1px solid ${controlBorderColor(focused, false, colors)}`,
           borderRadius: plain ? 0 : CONTROL_RADIUS,
-          boxShadow: plain ? undefined : controlShadow(focused),
+          boxShadow: plain ? undefined : controlShadow(focused, colors),
           overflow: "hidden",
         }}
       >
@@ -272,11 +275,11 @@ export function WebTextField({
           type={type}
           placeholder={placeholder}
           focused={focused}
-          textColor={textColor}
-          focusedTextColor={textColor}
-          placeholderColor={placeholderColor}
-          backgroundColor={plain ? "transparent" : backgroundColor}
-          focusedBackgroundColor={plain ? "transparent" : backgroundColor}
+          textColor={resolvedTextColor}
+          focusedTextColor={resolvedTextColor}
+          placeholderColor={resolvedPlaceholderColor}
+          backgroundColor={plain ? "transparent" : resolvedBackgroundColor}
+          focusedBackgroundColor={plain ? "transparent" : resolvedBackgroundColor}
           cursorColor={colors.textBright}
           style={{
             paddingLeft: plain ? 0 : 10,
@@ -318,7 +321,7 @@ export function WebMessageComposer({
   keyBindings,
   wrapText = false,
 }: MessageComposerProps) {
-  useThemeColors();
+  const colors = useThemeColors();
   const borderColor = focused
     ? blendHex(colors.borderFocused, colors.textBright, 0.24)
     : colors.border;
@@ -336,7 +339,7 @@ export function WebMessageComposer({
       flexDirection="row"
       width={width}
       height={height}
-      backgroundColor={panelFill()}
+      backgroundColor={panelFill(colors)}
       onMouseDown={requestFocus}
       data-gloom-role="desktop-message-composer"
       style={{
@@ -378,13 +381,13 @@ export function WebSegmentedControl({
   value,
   onChange,
 }: SegmentedControlProps) {
-  useThemeColors();
+  const colors = useThemeColors();
   return (
     <Box
       flexDirection="row"
-      backgroundColor={panelFill()}
+      backgroundColor={panelFill(colors)}
       style={{
-        border: `1px solid ${panelBorder()}`,
+        border: `1px solid ${panelBorder(colors)}`,
         borderRadius: CONTROL_RADIUS,
         padding: 2,
       }}
@@ -428,7 +431,7 @@ export function WebDialogFrame({
   footer,
   showTitleDivider = false,
 }: DialogFrameProps) {
-  useThemeColors();
+  const colors = useThemeColors();
   return (
     <Box flexDirection="column" style={{ padding: 14 }}>
       <Box
@@ -436,7 +439,7 @@ export function WebDialogFrame({
         flexDirection="row"
         alignItems="center"
         style={{
-          borderBottom: showTitleDivider ? `1px solid ${panelBorder()}` : "none",
+          borderBottom: showTitleDivider ? `1px solid ${panelBorder(colors)}` : "none",
           paddingBottom: showTitleDivider ? 8 : 0,
           marginBottom: showTitleDivider ? 10 : 14,
         }}
@@ -450,7 +453,7 @@ export function WebDialogFrame({
         <Box
           height={1}
           style={{
-            borderTop: `1px solid ${panelBorder()}`,
+            borderTop: `1px solid ${panelBorder(colors)}`,
             paddingTop: 8,
             marginTop: 10,
           }}
@@ -474,7 +477,7 @@ export function WebPageStackView({
   backLabel = "Back",
   backHint,
 }: PageStackViewProps) {
-  useThemeColors();
+  const colors = useThemeColors();
   useShortcut((event) => {
     if (!focused || !detailOpen || !isDetailBackNavigationKey(event)) return;
     event.stopPropagation?.();
@@ -506,7 +509,7 @@ export function WebPageStackView({
           height={1}
           flexDirection="row"
           alignItems="center"
-          backgroundColor={panelFill()}
+          backgroundColor={panelFill(colors)}
           onMouseDown={(event: { preventDefault?: () => void; stopPropagation?: () => void }) => {
             event.preventDefault?.();
             event.stopPropagation?.();
@@ -514,7 +517,7 @@ export function WebPageStackView({
           }}
           data-gloom-interactive="true"
           style={{
-            border: `1px solid ${panelBorder()}`,
+            border: `1px solid ${panelBorder(colors)}`,
             borderRadius: CONTROL_RADIUS,
             paddingInline: 8,
             cursor: "pointer",

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

@@ -3,7 +3,7 @@ import { useEffect, useRef, useState, type CSSProperties } from "react";
 import { Box, ScrollBox, Text, type ScrollBoxRenderable } from "../../../../ui";
 import { TextAttributes } from "../../../../ui";
 import type { ListRowState, ListViewItem, ListViewProps } from "../../../../components/ui/list-view";
-import { blendHex, colors, hoverBg } from "../../../../theme/colors";
+import { blendHex, hoverBg, type ThemeColors } from "../../../../theme/colors";
 import { useThemeColors } from "../../../../theme/theme-context";
 import {
   CONTROL_RADIUS,
@@ -19,6 +19,7 @@ function DefaultDesktopRow({
   item: ListViewItem;
   selected: boolean;
 }) {
+  const colors = useThemeColors();
   return (
     <Box
       flexDirection="row"
@@ -50,7 +51,7 @@ function DefaultDesktopRow({
   );
 }
 
-function listRowStyle(selected: boolean): CSSProperties {
+function listRowStyle(selected: boolean, colors: ThemeColors): CSSProperties {
   return {
     borderRadius: CONTROL_RADIUS,
     border: `1px solid ${selected ? colors.borderFocused : "transparent"}`,
@@ -85,12 +86,12 @@ export function WebListView({
   selectOnHover = false,
   autoScrollToIndex = true,
 }: ListViewProps) {
-  useThemeColors();
+  const colors = useThemeColors();
   const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
   const scrollRef = useRef<ScrollBoxRenderable>(null);
   const baseBg = bgColor ?? colors.bg;
-  const activeBg = selectedBgColor ?? selectedPanelFill();
-  const rowHoverBg = hoverBgColor ?? hoverBg();
+  const activeBg = selectedBgColor ?? selectedPanelFill(colors);
+  const rowHoverBg = hoverBgColor ?? hoverBg(colors);
   const selectedItem = selectedIndex >= 0 ? items[selectedIndex] : undefined;
   const activeScrollIndex = scrollIndex ?? selectedIndex;
   const effectiveSurface = surface ?? (scrollable ? "framed" : "plain");
@@ -102,10 +103,10 @@ export function WebListView({
       backgroundColor: "transparent",
     }
     : {
-      border: `1px solid ${panelBorder()}`,
+      border: `1px solid ${panelBorder(colors)}`,
       borderRadius: CONTROL_RADIUS,
       padding: 4,
-      backgroundColor: subtlePanelFill(),
+      backgroundColor: subtlePanelFill(colors),
     };
 
   useEffect(() => {
@@ -113,7 +114,7 @@ export function WebListView({
     const scrollBox = scrollRef.current;
     if (!scrollBox) return;
     const safeIndex = Math.min(activeScrollIndex, items.length - 1);
-    const viewportHeight = Math.max(scrollBox.viewport.height, 1);
+    const viewportHeight = Math.max(scrollBox.viewport?.height ?? 0, 1);
     const rowTop = safeIndex * rowHeight;
     const rowBottom = rowTop + rowHeight;
     if (rowTop < scrollBox.scrollTop) {
@@ -127,7 +128,9 @@ export function WebListView({
     if (!scrollable) return;
     const scrollBox = scrollRef.current;
     if (!scrollBox) return;
-    scrollBox.verticalScrollBar.visible = items.length * rowHeight > scrollBox.viewport.height;
+    if (scrollBox.verticalScrollBar) {
+      scrollBox.verticalScrollBar.visible = items.length * rowHeight > (scrollBox.viewport?.height ?? 0);
+    }
   }, [items.length, height, flexGrow, rowHeight, scrollable]);
 
   const rows = items.length === 0
@@ -163,7 +166,7 @@ export function WebListView({
             onActivate?.(item, index);
           }}
           data-gloom-role="desktop-list-row"
-          style={listRowStyle(selected)}
+          style={listRowStyle(selected, colors)}
         >
           {renderRow
             ? renderRow(item, state, index)
@@ -196,9 +199,9 @@ export function WebListView({
       {showSelectedDescription && selectedItem?.description && (
         <Box
           flexDirection="row"
-          backgroundColor={subtlePanelFill()}
+          backgroundColor={subtlePanelFill(colors)}
           style={{
-            border: `1px solid ${panelBorder()}`,
+            border: `1px solid ${panelBorder(colors)}`,
             borderRadius: CONTROL_RADIUS,
             paddingInline: 10,
           }}

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

@@ -1,10 +1,9 @@
-/// <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 { blendHex } from "../../../../theme/colors";
 import { useThemeColors } from "../../../../theme/theme-context";
 
 const VIEWPORT_MARGIN = 10;
@@ -31,7 +30,7 @@ export function WebPopover({
   maxWidth = "min(420px, calc(100vw - 20px))",
   label,
 }: HostPopoverProps) {
-  useThemeColors();
+  const colors = useThemeColors();
   const anchorRef = useRef<HTMLDivElement | null>(null);
   const popoverRef = useRef<HTMLDivElement | null>(null);
   const [position, setPosition] = useState<PopoverPosition>({ left: 0, top: 0, visible: false });

package/src/renderers/electrobun/view/dialog-host.tsx

@@ -1,8 +1,7 @@
-/// <reference lib="dom" />
 /** @jsxImportSource react */
 import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
 import { DialogHostProvider, type DialogApi } from "../../../ui/dialog";
-import { blendHex, colors } from "../../../theme/colors";
+import { blendHex } from "../../../theme/colors";
 import { useThemeColors } from "../../../theme/theme-context";
 
 interface DialogState {
@@ -27,7 +26,7 @@ export function shouldFocusDialogContainer(
 }
 
 export function WebDialogHostProvider({ children }: { children: ReactNode }) {
-  useThemeColors();
+  const colors = useThemeColors();
   const [dialogState, setDialogState] = useState<DialogState | null>(null);
   const dialogStateRef = useRef<DialogState | null>(null);
   const dialogElementRef = useRef<HTMLDivElement | null>(null);

package/src/renderers/electrobun/view/fatal-screen.tsx

@@ -1,4 +1,3 @@
-/// <reference lib="dom" />
 /** @jsxImportSource react */
 import { Component, useMemo, useState, type ErrorInfo, type ReactNode } from "react";
 import { backendRequest, requestElectrobunRestart } from "./backend-rpc";

package/src/renderers/electrobun/view/host/box.tsx

@@ -1,4 +1,3 @@
-/// <reference lib="dom" />
 /** @jsxImportSource react */
 import {
   forwardRef,

package/src/renderers/electrobun/view/host/chart-surface.tsx

@@ -1,4 +1,3 @@
-/// <reference lib="dom" />
 /** @jsxImportSource react */
 import {
   forwardRef,

package/src/renderers/electrobun/view/host/input.tsx

@@ -1,4 +1,3 @@
-/// <reference lib="dom" />
 /** @jsxImportSource react */
 import {
   forwardRef,

package/src/renderers/electrobun/view/host/media-surface.tsx

@@ -1,4 +1,3 @@
-/// <reference lib="dom" />
 /** @jsxImportSource react */
 import Hls from "hls.js";
 import { forwardRef, useEffect, useImperativeHandle, useRef, useState, type CSSProperties, type ReactNode } from "react";

package/src/renderers/electrobun/view/host/native.ts

@@ -1,4 +1,3 @@
-/// <reference lib="dom" />
 import type { ContextMenuItem } from "../../../../types/context-menu";
 import { editableTextContextMenuItems } from "../../../../ui/context-menu";
 import { backendRequest, onContextMenuSelect } from "../backend-rpc";

package/src/renderers/electrobun/view/host/scroll-box.tsx

@@ -1,4 +1,3 @@
-/// <reference lib="dom" />
 /** @jsxImportSource react */
 import {
   forwardRef,

package/src/renderers/electrobun/view/host/tabs.tsx

@@ -1,4 +1,3 @@
-/// <reference lib="dom" />
 /** @jsxImportSource react */
 import {
   useEffect,

package/src/renderers/electrobun/view/host/text.tsx

@@ -1,4 +1,3 @@
-/// <reference lib="dom" />
 /** @jsxImportSource react */
 import type { CSSProperties, ReactNode } from "react";
 import {

package/src/renderers/electrobun/view/http-fetch.ts

@@ -1,16 +1,8 @@
-/// <reference lib="dom" />
 import { setCloudApiFetchTransport } from "../../../api-client";
 import { setHttpFetchTransport } from "../../../utils/http-transport";
+import type { DesktopHttpFetchResponse } from "../shared/protocol";
 import { backendRequest } from "./backend-rpc";
 
-interface ElectrobunHttpFetchResponse {
-  status: number;
-  statusText: string;
-  headers: Record<string, string>;
-  setCookie?: string[];
-  body: string;
-}
-
 const CLOUD_MARKET_HTTP_TIMEOUT_MS = 10_000;
 
 function normalizeHeaders(headers: HeadersInit | undefined): Record<string, string> {
@@ -81,8 +73,8 @@ async function requestBackendHttpFetch(
   url: string,
   init?: RequestInit,
   timeoutMs?: number,
-): Promise<ElectrobunHttpFetchResponse> {
-  return backendRequest<ElectrobunHttpFetchResponse>("http.fetch", {
+): Promise<DesktopHttpFetchResponse> {
+  return backendRequest("http.fetch", {
     url,
     init: {
       method: init?.method,

package/src/renderers/electrobun/view/input-host.tsx

@@ -1,12 +1,11 @@
-/// <reference lib="dom" />
 /** @jsxImportSource react */
-import { useEffect, useLayoutEffect, useMemo, useRef, useSyncExternalStore, type ReactNode } from "react";
+import { useEffect, useMemo, useSyncExternalStore, type ReactNode } from "react";
 import {
+  createShortcutRegistry,
   InputHostProvider,
-  shouldDeliverShortcut,
+  useRegisteredShortcut,
   type InputHost,
   type KeyEventLike,
-  type ShortcutOptions,
 } from "../../../react/input";
 import {
   isMouseBackNavigationButton,
@@ -76,16 +75,6 @@ function toMouseBackKeyEventLike(event: MouseEvent): KeyEventLike {
   };
 }
 
-interface ShortcutEntry {
-  handlerRef: { current: (event: KeyEventLike) => void };
-  enabledRef: { current: boolean };
-  allowEditableRef: { current: boolean };
-  phase: NonNullable<ShortcutOptions["phase"]>;
-  order: number;
-}
-
-let nextShortcutOrder = 1;
-
 function subscribeViewport(listener: () => void): () => void {
   window.addEventListener("resize", listener);
   return () => window.removeEventListener("resize", listener);
@@ -103,30 +92,17 @@ function getViewport() {
 }
 
 export function WebInputHostProvider({ children }: { children: ReactNode }) {
-  const shortcutsRef = useRef<ShortcutEntry[]>([]);
-
-  const dispatchShortcut = (shortcutEvent: KeyEventLike) => {
-    for (const phase of ["before", "normal", "after"] as const) {
-      if (phase === "after" && (shortcutEvent.defaultPrevented || shortcutEvent.propagationStopped)) break;
-      for (const entry of shortcutsRef.current) {
-        if (entry.phase !== phase || !entry.enabledRef.current) continue;
-        if (!shouldDeliverShortcut(shortcutEvent, entry.allowEditableRef.current)) continue;
-        entry.handlerRef.current(shortcutEvent);
-        if (shortcutEvent.propagationStopped) break;
-      }
-      if (shortcutEvent.propagationStopped) break;
-    }
-  };
+  const shortcutRegistry = useMemo(() => createShortcutRegistry(), []);
 
   useEffect(() => {
     const onKeyDown = (event: KeyboardEvent) => {
       const shortcutEvent = toKeyEventLike(event);
-      dispatchShortcut(shortcutEvent);
+      shortcutRegistry.dispatch(shortcutEvent);
       if (shouldConsumeWebAppKeyDown(event)) event.preventDefault();
     };
     window.addEventListener("keydown", onKeyDown);
     return () => window.removeEventListener("keydown", onKeyDown);
-  }, []);
+  }, [shortcutRegistry]);
 
   useEffect(() => {
     const preventBrowserBack = (event: MouseEvent) => {
@@ -138,7 +114,7 @@ export function WebInputHostProvider({ children }: { children: ReactNode }) {
       if (!isMouseBackNavigationButton(event.button)) return;
       event.preventDefault();
       event.stopPropagation();
-      dispatchShortcut(toMouseBackKeyEventLike(event));
+      shortcutRegistry.dispatch(toMouseBackKeyEventLike(event));
     };
 
     window.addEventListener("mousedown", preventBrowserBack, true);
@@ -149,35 +125,16 @@ export function WebInputHostProvider({ children }: { children: ReactNode }) {
       window.removeEventListener("auxclick", preventBrowserBack, true);
       window.removeEventListener("mouseup", onMouseUp, true);
     };
-  }, []);
+  }, [shortcutRegistry]);
 
   const host = useMemo<InputHost>(() => ({
     useShortcut(handler, options) {
-      const handlerRef = useRef(handler);
-      const enabledRef = useRef(options?.enabled !== false);
-      const allowEditableRef = useRef(options?.allowEditable === true);
-      handlerRef.current = handler;
-      enabledRef.current = options?.enabled !== false;
-      allowEditableRef.current = options?.allowEditable === true;
-
-      useLayoutEffect(() => {
-        const entry: ShortcutEntry = {
-          handlerRef,
-          enabledRef,
-          allowEditableRef,
-          phase: options?.phase ?? "normal",
-          order: nextShortcutOrder++,
-        };
-        shortcutsRef.current = [...shortcutsRef.current, entry].sort((a, b) => a.order - b.order);
-        return () => {
-          shortcutsRef.current = shortcutsRef.current.filter((current) => current !== entry);
-        };
-      }, [options?.phase, options?.scope]);
+      useRegisteredShortcut(shortcutRegistry, handler, options);
     },
     useViewport() {
       return useSyncExternalStore(subscribeViewport, getViewport, getViewport);
     },
-  }), []);
+  }), [shortcutRegistry]);
 
   return (
     <InputHostProvider host={host}>

package/src/renderers/electrobun/view/key-event.ts

@@ -1,4 +1,3 @@
-/// <reference lib="dom" />
 
 type KeyboardTargetLike = EventTarget & {
   tagName?: string;

package/src/renderers/electrobun/view/main.tsx

@@ -1,4 +1,3 @@
-/// <reference lib="dom" />
 /** @jsxImportSource react */
 import { createRoot } from "react-dom/client";
 import { App } from "../../../app";
@@ -9,7 +8,6 @@ import { measurePerfAsync } from "../../../utils/perf-marks";
 import {
   backendRequest,
   initElectrobunBackend,
-  requestMainWindowRemoteControl,
   setElectrobunRemoteRequestHandler,
 } from "./backend-rpc";
 import { installElectrobunAiHost } from "./ai-host";
@@ -30,6 +28,7 @@ import { createApplicationMenuBridge } from "./application-menu-bridge";
 import { createDesktopDeepLinkBridge } from "./desktop-deeplink-bridge";
 import { createDesktopWindowBridge } from "./desktop/window/bridge";
 import { prepareDetachedSnapshot } from "./desktop/window/snapshot";
+import { createElectrobunAppServices } from "./app-services";
 
 const rootElement = document.getElementById("root");
 if (!rootElement) {
@@ -100,7 +99,7 @@ async function boot() {
   const webUiHost = createWebUiHost(init.desktopPlatform);
   const remoteControlAdapter = init.windowKind === "main"
     ? { registerHandler: setElectrobunRemoteRequestHandler }
-    : { handleRequest: requestMainWindowRemoteControl };
+    : undefined;
   measurePerfAsync("startup.electrobun.root-render", async () => {
     root.render(
       <ElectrobunErrorBoundary>
@@ -110,6 +109,7 @@ async function boot() {
               <WebDialogHostProvider>
                 <App
                   config={config}
+                  servicesFactory={createElectrobunAppServices}
                   desktopWindowBridge={desktopWindowBridge}
                   desktopApplicationMenuBridge={desktopApplicationMenuBridge}
                   desktopDeepLinkBridge={desktopDeepLinkBridge}

package/src/renderers/electrobun/view/native-renderer.ts

@@ -1,4 +1,3 @@
-/// <reference lib="dom" />
 import type { NativeRendererHost } from "../../../ui";
 import { WEB_CELL_HEIGHT, WEB_CELL_WIDTH } from "./input-host";
 import { hasWebCtrlModifier, normalizeWebKeyName, shouldConsumeWebAppKeyDown, webKeySequence } from "./key-event";

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

@@ -2,6 +2,10 @@ import type {
   ApplicationMenuSelectMessage,
   CapabilityEventMessage,
   ContextMenuSelectMessage,
+  DesktopBackendRequestArgs,
+  DesktopBackendRequestMethod,
+  DesktopBackendRequestPayload,
+  DesktopBackendRequestResponse,
   DesktopDockPreviewMessage,
   DesktopRestartMessage,
   DesktopStateMessage,
@@ -16,7 +20,15 @@ function unsubscribe(): () => void {
   return () => {};
 }
 
-export async function backendRequest<T = unknown>(): Promise<T> {
+export function backendRequest<T = unknown>(
+  method: "capability.invoke",
+  payload: DesktopBackendRequestPayload<"capability.invoke">,
+): Promise<T>;
+export function backendRequest<K extends Exclude<DesktopBackendRequestMethod, "capability.invoke">>(
+  method: K,
+  ...args: DesktopBackendRequestArgs<K>
+): Promise<DesktopBackendRequestResponse<K>>;
+export async function backendRequest(): Promise<unknown> {
   throw new Error("Electrobun backend requests are unavailable in the CLI screenshot renderer.");
 }
 

package/src/renderers/electrobun/view/native-stubs/chart/surface-manager.ts

@@ -10,11 +10,22 @@ export interface NativeOccluder {
   zIndex: number;
 }
 
+export interface NativeLocalOccluder {
+  id: string;
+  paneId: string;
+  rect: { x: number; y: number; width: number; height: number };
+}
+
+// Must expose every public method of the terminal manager: the desktop view
+// bundle swaps this module in, so a missing method is a runtime crash.
+// native-stubs.test.ts guards the drift.
 export class NativeSurfaceManager {
   setWindowState(): void {}
   upsertSurface(): void {}
   updateSurfaceGeometry(): void {}
   removeSurface(): void {}
+  upsertLocalOccluder(): void {}
+  removeLocalOccluder(): void {}
   destroy(): void {}
 }