gloomberb 0.10.1 → 0.10.3

package/src/renderers/electrobun/view/data-table/index.tsx

@@ -1,4 +1,3 @@
-/// <reference lib="dom" />
 /** @jsxImportSource react */
 import { useVirtualizer } from "@tanstack/react-virtual";
 import {
@@ -16,7 +15,9 @@ import { measurePerf } from "../../../../utils/perf-marks";
 import type {
   DataTableColumn,
   DataTableProps,
+  DataTableVisibleRange,
 } from "../../../../components/ui/data-table";
+import { resolveDataTableVisibleRange } from "../../../../components/ui/data-table/visible-range";
 import {
   buildTableGridTemplateColumns,
   getTableWidth,
@@ -58,6 +59,8 @@ export function WebDataTable<T, C extends DataTableColumn = DataTableColumn>({
   onSelect,
   onActivate,
   onTableMouseDown,
+  visibleRangeKey,
+  onVisibleRangeChange,
   onRowMouseDown,
   onRowContextMenu,
   rowContextMenuSurface = false,
@@ -81,6 +84,10 @@ export function WebDataTable<T, C extends DataTableColumn = DataTableColumn>({
   const dispatch = useAppDispatch();
   const paneInstanceId = usePaneInstance()?.instanceId ?? null;
   const bodyElementRef = useRef<HTMLDivElement | null>(null);
+  const lastVisibleRangeRef = useRef<{
+    key: string | number | undefined;
+    range: DataTableVisibleRange;
+  } | null>(null);
   const headerHorizontal = useScrollbarState(false);
   const headerVertical = useScrollbarState(false);
   const bodyHorizontal = useScrollbarState(showHorizontalScrollbar);
@@ -107,10 +114,32 @@ export function WebDataTable<T, C extends DataTableColumn = DataTableColumn>({
     dispatch({ type: "FOCUS_PANE", paneId: paneInstanceId });
   }, [dispatch, paneInstanceId]);
 
+  const emitVisibleRange = useCallback(() => {
+    if (!onVisibleRangeChange) return;
+    const element = bodyElementRef.current;
+    if (!element) return;
+    const range = resolveDataTableVisibleRange({
+      itemCount: items.length,
+      rowSize: WEB_CELL_HEIGHT,
+      scrollOffset: element.scrollTop,
+      viewportSize: Math.max(0, element.clientHeight - WEB_CELL_HEIGHT),
+    });
+    const previous = lastVisibleRangeRef.current;
+    if (
+      previous !== null
+      && previous.key === visibleRangeKey
+      && previous.range.start === range.start
+      && previous.range.end === range.end
+    ) return;
+    lastVisibleRangeRef.current = { key: visibleRangeKey, range };
+    onVisibleRangeChange(range);
+  }, [items.length, onVisibleRangeChange, visibleRangeKey]);
   const handleBodyScrollActivity = useCallback(() => {
     onBodyScrollActivity();
-  }, [onBodyScrollActivity]);
+    emitVisibleRange();
+  }, [emitVisibleRange, onBodyScrollActivity]);
   const scheduleBodyScrollActivity = useRafCallback(handleBodyScrollActivity);
+  const scheduleVisibleRangeMeasure = useRafCallback(emitVisibleRange);
 
   const rowVirtualizer = useVirtualizer({
     count: items.length,
@@ -155,12 +184,20 @@ export function WebDataTable<T, C extends DataTableColumn = DataTableColumn>({
 
   useEffect(() => {
     measureViewportWidth();
+    scheduleVisibleRangeMeasure();
     const element = bodyElementRef.current;
     if (!element || typeof ResizeObserver === "undefined") return;
-    const observer = new ResizeObserver(scheduleViewportWidthMeasure);
+    const observer = new ResizeObserver(() => {
+      scheduleViewportWidthMeasure();
+      scheduleVisibleRangeMeasure();
+    });
     observer.observe(element);
     return () => observer.disconnect();
-  }, [measureViewportWidth, scheduleViewportWidthMeasure]);
+  }, [measureViewportWidth, scheduleViewportWidthMeasure, scheduleVisibleRangeMeasure]);
+
+  useEffect(() => {
+    scheduleVisibleRangeMeasure();
+  }, [items.length, scheduleVisibleRangeMeasure, visibleRangeKey]);
 
   useEffect(() => {
     if (scrollToIndex == null || items.length === 0) return;
@@ -169,6 +206,7 @@ export function WebDataTable<T, C extends DataTableColumn = DataTableColumn>({
       rowVirtualizer.scrollToIndex(targetIndex, {
         align: scrollToIndexAlign === "center" ? "center" : "auto",
       });
+      scheduleVisibleRangeMeasure();
       return;
     }
     const element = bodyElementRef.current;
@@ -186,12 +224,14 @@ export function WebDataTable<T, C extends DataTableColumn = DataTableColumn>({
     if (nextTop !== currentTop) {
       element.scrollTop = nextTop * WEB_CELL_HEIGHT;
     }
+    scheduleVisibleRangeMeasure();
   }, [
     items.length,
     rowVirtualizer,
     scrollToIndex,
     scrollToIndexAlign,
     scrollToIndexVersion,
+    scheduleVisibleRangeMeasure,
     virtualize,
   ]);
 

package/src/renderers/electrobun/view/data-table/row.tsx

@@ -1,8 +1,6 @@
-/// <reference lib="dom" />
 /** @jsxImportSource react */
 import { memo, type CSSProperties } from "react";
 import { TextAttributes } from "../../../../ui/host";
-import { useThemeColors } from "../../../../theme/theme-context";
 import type {
   DataTableCell,
   DataTableColumn,
@@ -72,7 +70,6 @@ export function WebDataTableHeader<C extends DataTableColumn>({
   sortColumnId: string | null;
   sortDirection: "asc" | "desc";
 }) {
-  useThemeColors();
   return (
     <div
       data-gloom-role="data-table-header-row"
@@ -183,7 +180,6 @@ function WebDataTableRowInner<
   rowContextMenuSurface: boolean;
   selected: boolean;
 }) {
-  useThemeColors();
   const sectionHeader: DataTableSectionHeader | null =
     renderSectionHeader?.(item, index) ?? null;
   const baseRowStyle: CSSProperties = {

package/src/renderers/electrobun/view/desktop/control-styles.ts

@@ -1,77 +1,80 @@
 import type { ButtonProps } from "../../../../components/ui/button";
-import { blendHex, colors } from "../../../../theme/colors";
+import { blendHex, colors, type ThemeColors } from "../../../../theme/colors";
 
 export const CONTROL_RADIUS = 6;
 
-export function panelBorder(): string {
-  return blendHex(colors.border, colors.borderFocused, 0.18);
+export function panelBorder(palette: ThemeColors = colors): string {
+  return blendHex(palette.border, palette.borderFocused, 0.18);
 }
 
-export function panelFill(): string {
-  return blendHex(colors.panel, colors.bg, 0.22);
+export function panelFill(palette: ThemeColors = colors): string {
+  return blendHex(palette.panel, palette.bg, 0.22);
 }
 
-export function subtlePanelFill(): string {
-  return blendHex(colors.panel, colors.bg, 0.42);
+export function subtlePanelFill(palette: ThemeColors = colors): string {
+  return blendHex(palette.panel, palette.bg, 0.42);
 }
 
-export function selectedPanelFill(): string {
-  return blendHex(colors.selected, colors.bg, 0.42);
+export function selectedPanelFill(palette: ThemeColors = colors): string {
+  return blendHex(palette.selected, palette.bg, 0.42);
 }
 
-export function controlBorderColor(focused = false, active = false): string {
-  if (active) return colors.borderFocused;
-  if (focused) return blendHex(colors.borderFocused, colors.textBright, 0.24);
-  return panelBorder();
+export function controlBorderColor(focused = false, active = false, palette: ThemeColors = colors): string {
+  if (active) return palette.borderFocused;
+  if (focused) return blendHex(palette.borderFocused, palette.textBright, 0.24);
+  return panelBorder(palette);
 }
 
-export function controlShadow(active = false): string {
+export function controlShadow(active = false, palette: ThemeColors = colors): string {
   return active
-    ? `0 0 0 1px ${blendHex(colors.bg, colors.borderFocused, 0.18)}, inset 0 1px 0 ${blendHex(colors.bg, colors.textBright, 0.06)}`
-    : `inset 0 1px 0 ${blendHex(colors.bg, colors.textBright, 0.04)}`;
+    ? `0 0 0 1px ${blendHex(palette.bg, palette.borderFocused, 0.18)}, inset 0 1px 0 ${blendHex(palette.bg, palette.textBright, 0.06)}`
+    : `inset 0 1px 0 ${blendHex(palette.bg, palette.textBright, 0.04)}`;
 }
 
-export function buttonPalette(props: Pick<ButtonProps, "variant" | "active" | "disabled">) {
+export function buttonPalette(
+  props: Pick<ButtonProps, "variant" | "active" | "disabled">,
+  palette: ThemeColors = colors,
+) {
   if (props.disabled) {
     return {
-      fg: colors.textMuted,
-      bg: subtlePanelFill(),
-      border: panelBorder(),
+      fg: palette.textMuted,
+      bg: subtlePanelFill(palette),
+      border: panelBorder(palette),
     };
   }
   if (props.active) {
     return {
-      fg: colors.selectedText,
-      bg: colors.selected,
-      border: colors.borderFocused,
+      fg: palette.selectedText,
+      bg: palette.selected,
+      border: palette.borderFocused,
     };
   }
 
   switch (props.variant) {
     case "primary":
       return {
-        fg: colors.bg,
-        bg: colors.borderFocused,
-        border: colors.borderFocused,
+        fg: palette.bg,
+        bg: palette.borderFocused,
+        border: palette.borderFocused,
       };
     case "danger":
       return {
-        fg: colors.bg,
-        bg: colors.negative,
-        border: colors.negative,
+        fg: palette.bg,
+        bg: palette.negative,
+        border: palette.negative,
       };
     case "ghost":
       return {
-        fg: colors.textDim,
+        fg: palette.textDim,
         bg: "transparent",
-        border: panelBorder(),
+        border: panelBorder(palette),
       };
     case "secondary":
     default:
       return {
-        fg: colors.text,
-        bg: panelFill(),
-        border: panelBorder(),
+        fg: palette.text,
+        bg: panelFill(palette),
+        border: panelBorder(palette),
       };
   }
 }

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 {