gloomberb 0.7.0 → 0.7.1

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

@@ -14,7 +14,7 @@ import {
   type RefObject,
 } from "react";
 import { TextAttributes, type ScrollBoxRenderable } from "../../../ui/host";
-import { colors, hoverBg } from "../../../theme/colors";
+import { useThemeColors } from "../../../theme/theme-context";
 import { useAppDispatch, usePaneInstance } from "../../../state/app-context";
 import { useRafCallback } from "../../../react/use-raf-callback";
 import { measurePerf } from "../../../utils/perf-marks";
@@ -24,7 +24,11 @@ import type {
   DataTableProps,
   DataTableSectionHeader,
 } from "../../../components/ui/data-table";
-import { getTableWidth, hasMeaningfulTableHorizontalOverflow } from "../../../components/ui/table-layout";
+import {
+  buildTableGridTemplateColumns,
+  getTableWidth,
+  hasMeaningfulTableHorizontalOverflow,
+} from "../../../components/ui/table-layout";
 import { WEB_CELL_HEIGHT, WEB_CELL_WIDTH } from "./input-host";
 import { useScrollbarActivity } from "./scrollbar-activity";
 
@@ -36,6 +40,14 @@ interface VirtualRow {
 }
 
 const TABLE_INLINE_PADDING_PX = 8;
+const CSS_BG = "var(--gloom-bg)";
+const CSS_PANEL = "var(--gloom-panel)";
+const CSS_TEXT = "var(--gloom-text)";
+const CSS_TEXT_DIM = "var(--gloom-text-dim)";
+const CSS_TEXT_BRIGHT = "var(--gloom-text-bright)";
+const CSS_SELECTED = "var(--gloom-selected)";
+const CSS_SELECTED_TEXT = "var(--gloom-selected-text)";
+const CSS_HOVER_BG = "var(--gloom-hover-bg)";
 
 function hasAttribute(attributes: unknown, flag: number): boolean {
   return typeof attributes === "number" && (attributes & flag) !== 0;
@@ -84,32 +96,6 @@ function clippedCellTextStyle(
   };
 }
 
-function columnMinCh(column: DataTableColumn): number {
-  const width = Math.max(1, Math.floor(column.width));
-  if ((column.flexGrow ?? 0) > 0) {
-    return Math.max(8, Math.min(18, Math.floor(width * 0.35)));
-  }
-  if (column.align === "right") {
-    return Math.max(3, Math.min(width, 8));
-  }
-  if (width >= 16) {
-    return Math.max(8, Math.min(16, Math.floor(width * 0.35)));
-  }
-  return Math.max(1, Math.min(width, 8));
-}
-
-function columnFlexWeight(column: DataTableColumn): number {
-  const flexGrow = column.flexGrow ?? 0;
-  const baseWeight = Math.max(1, Math.floor(column.width));
-  return flexGrow > 0 ? baseWeight * Math.max(1, flexGrow) : baseWeight;
-}
-
-function buildGridTemplateColumns(columns: readonly DataTableColumn[]): string {
-  return columns
-    .map((column) => `minmax(${columnMinCh(column)}ch, ${columnFlexWeight(column)}fr)`)
-    .join(" ");
-}
-
 function toCellY(pixels: number): number {
   return Math.max(0, Math.round(pixels / WEB_CELL_HEIGHT));
 }
@@ -265,6 +251,82 @@ function renderHeaderLabel<C extends DataTableColumn>(
   };
 }
 
+function WebDataTableHeader<C extends DataTableColumn>({
+  columns,
+  focusPane,
+  gridTemplateColumns,
+  onHeaderClick,
+  sortColumnId,
+  sortDirection,
+}: {
+  columns: C[];
+  focusPane: () => void;
+  gridTemplateColumns: string;
+  onHeaderClick: (columnId: string) => void;
+  sortColumnId: string | null;
+  sortDirection: "asc" | "desc";
+}) {
+  useThemeColors();
+  return (
+    <div
+      data-gloom-role="data-table-header-row"
+      style={{
+        position: "sticky",
+        top: 0,
+        zIndex: 2,
+        display: "grid",
+        gridTemplateColumns,
+        columnGap: "1ch",
+        alignItems: "center",
+        width: "100%",
+        minWidth: 0,
+        height: WEB_CELL_HEIGHT,
+        paddingLeft: TABLE_INLINE_PADDING_PX,
+        paddingRight: TABLE_INLINE_PADDING_PX,
+        boxSizing: "border-box",
+        backgroundColor: CSS_PANEL,
+      }}
+    >
+      {columns.map((column) => {
+        const { isSorted, text } = renderHeaderLabel(
+          column,
+          sortColumnId,
+          sortDirection,
+        );
+        return (
+          <div
+            key={column.id}
+            data-gloom-role="data-table-header-cell"
+            data-gloom-interactive="true"
+            style={{
+              minWidth: 0,
+              height: WEB_CELL_HEIGHT,
+              overflow: "hidden",
+              backgroundColor: column.headerBackgroundColor ?? CSS_PANEL,
+            }}
+            onMouseDown={(event) => {
+              focusPane();
+              event.preventDefault();
+              onHeaderClick(column.id);
+            }}
+          >
+            <span
+              title={text}
+              style={clippedCellTextStyle(
+                column,
+                isSorted ? CSS_TEXT : column.headerColor ?? CSS_TEXT_DIM,
+                TextAttributes.BOLD,
+              )}
+            >
+              {text}
+            </span>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
 function WebDataTableRowInner<
   T,
   C extends DataTableColumn,
@@ -303,6 +365,7 @@ function WebDataTableRowInner<
   selected: boolean;
   setHoveredIdx: (index: number | null) => void;
 }) {
+  useThemeColors();
   const sectionHeader: DataTableSectionHeader | null =
     renderSectionHeader?.(item, index) ?? null;
   const baseRowStyle: CSSProperties = {
@@ -330,7 +393,7 @@ function WebDataTableRowInner<
         data-gloom-role="data-table-section-header"
         style={{
           ...baseRowStyle,
-          backgroundColor: sectionHeader.backgroundColor ?? colors.bg,
+          backgroundColor: sectionHeader.backgroundColor ?? CSS_BG,
         }}
         onMouseDown={(event) => {
           focusPane();
@@ -341,7 +404,7 @@ function WebDataTableRowInner<
           title={sectionHeader.text}
           style={{
             ...cellTextStyle(
-              sectionHeader.color ?? colors.textBright,
+              sectionHeader.color ?? CSS_TEXT_BRIGHT,
               sectionHeader.attributes ?? TextAttributes.BOLD,
             ),
             gridColumn: "1 / -1",
@@ -358,10 +421,10 @@ function WebDataTableRowInner<
   const rowState = { selected, hovered };
   const rowBackgroundColor = getRowBackgroundColor?.(item, index, rowState);
   const rowBg = selected
-    ? colors.selected
+    ? CSS_SELECTED
     : hovered
-      ? hoverBg()
-      : rowBackgroundColor ?? colors.bg;
+      ? CSS_HOVER_BG
+      : rowBackgroundColor ?? CSS_BG;
 
   return (
     <div
@@ -438,7 +501,7 @@ function WebDataTableRowInner<
                 title={cell.text}
                 style={clippedCellTextStyle(
                   column,
-                  cell.color ?? (selected ? colors.selectedText : colors.text),
+                  cell.color ?? (selected ? CSS_SELECTED_TEXT : CSS_TEXT),
                   cell.attributes ?? TextAttributes.NONE,
                 )}
               >
@@ -494,7 +557,7 @@ export function WebDataTable<T, C extends DataTableColumn = DataTableColumn>({
   const [scrollbarActive, markScrollbarActive] = useScrollbarActivity();
   const tableWidth = useMemo(() => getTableWidth(columns), [columns]);
   const gridTemplateColumns = useMemo(
-    () => buildGridTemplateColumns(columns),
+    () => buildTableGridTemplateColumns(columns),
     [columns],
   );
   const selectRow = useCallback((item: T, index: number) => {
@@ -624,7 +687,7 @@ export function WebDataTable<T, C extends DataTableColumn = DataTableColumn>({
     width: "100%",
     minWidth: 0,
     minHeight: 0,
-    backgroundColor: colors.bg,
+    backgroundColor: CSS_BG,
     overflow: "hidden",
   };
   const bodyScrollerStyle: CSSProperties = {
@@ -634,7 +697,7 @@ export function WebDataTable<T, C extends DataTableColumn = DataTableColumn>({
     minHeight: 0,
     overflowX: horizontalScrollEnabled ? "auto" : "hidden",
     overflowY: "auto",
-    backgroundColor: colors.bg,
+    backgroundColor: CSS_BG,
   };
 
   return (
@@ -673,77 +736,29 @@ export function WebDataTable<T, C extends DataTableColumn = DataTableColumn>({
             minHeight: WEB_CELL_HEIGHT,
           }}
         >
-          <div
-            data-gloom-role="data-table-header-row"
-            style={{
-              position: "sticky",
-              top: 0,
-              zIndex: 2,
-              display: "grid",
-              gridTemplateColumns,
-              columnGap: "1ch",
-              alignItems: "center",
-              width: "100%",
-              minWidth: 0,
-              height: WEB_CELL_HEIGHT,
-              paddingLeft: TABLE_INLINE_PADDING_PX,
-              paddingRight: TABLE_INLINE_PADDING_PX,
-              boxSizing: "border-box",
-              backgroundColor: colors.panel,
-            }}
-          >
-            {columns.map((column) => {
-              const { isSorted, text } = renderHeaderLabel(
-                column,
-                sortColumnId,
-                sortDirection,
-              );
-              return (
-                <div
-                  key={column.id}
-                  data-gloom-role="data-table-header-cell"
-                  data-gloom-interactive="true"
-                  style={{
-                    minWidth: 0,
-                    height: WEB_CELL_HEIGHT,
-                    overflow: "hidden",
-                    backgroundColor: column.headerBackgroundColor ?? colors.panel,
-                  }}
-                  onMouseDown={(event) => {
-                    focusPane();
-                    event.preventDefault();
-                    onHeaderClick(column.id);
-                  }}
-                >
-                  <span
-                    title={text}
-                    style={clippedCellTextStyle(
-                      column,
-                      isSorted ? colors.text : column.headerColor ?? colors.textDim,
-                      TextAttributes.BOLD,
-                    )}
-                  >
-                    {text}
-                  </span>
-                </div>
-              );
-            })}
-          </div>
+          <WebDataTableHeader
+            columns={columns}
+            focusPane={focusPane}
+            gridTemplateColumns={gridTemplateColumns}
+            onHeaderClick={onHeaderClick}
+            sortColumnId={sortColumnId}
+            sortDirection={sortDirection}
+          />
           {items.length === 0 ? (
             emptyContent ?? (
               <div
                 style={{
                   width: "100%",
                   padding: `${WEB_CELL_HEIGHT}px ${WEB_CELL_WIDTH}px`,
-                  color: colors.textDim,
+                  color: CSS_TEXT_DIM,
                   lineHeight: "var(--cell-h)",
                 }}
               >
-                <div style={cellTextStyle(colors.textBright, TextAttributes.BOLD)}>
+                <div style={cellTextStyle(CSS_TEXT_BRIGHT, TextAttributes.BOLD)}>
                   {emptyStateTitle}
                 </div>
                 {emptyStateHint ? (
-                  <div style={cellTextStyle(colors.textDim, TextAttributes.NONE)}>
+                  <div style={cellTextStyle(CSS_TEXT_DIM, TextAttributes.NONE)}>
                     {emptyStateHint}
                   </div>
                 ) : null}

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

@@ -4,6 +4,7 @@ import { Box, Input, ScrollBox, Text, Textarea, editableTextContextMenuItems, us
 import { TextAttributes, type InputRenderable, type ScrollBoxRenderable } from "../../../ui";
 import { useShortcut } from "../../../react/input";
 import { blendHex, colors, hoverBg } from "../../../theme/colors";
+import { useThemeColors } from "../../../theme/theme-context";
 import { isDetailBackNavigationKey } from "../../../utils/back-navigation";
 import type { ButtonProps } from "../../../components/ui/button";
 import type { TextFieldProps } from "../../../components/ui/fields";
@@ -97,6 +98,7 @@ export function WebButton({
   shortcut,
   width,
 }: ButtonProps) {
+  useThemeColors();
   const palette = buttonPalette({ variant, active, disabled });
 
   return (
@@ -156,6 +158,7 @@ export function WebTextField({
   placeholderColor = colors.textDim,
   onMouseDown,
 }: TextFieldProps) {
+  useThemeColors();
   const localInputRef = useRef<InputRenderable>(null);
   const resolvedInputRef = inputRef ?? localInputRef;
   const renderer = useRendererHost();
@@ -245,6 +248,7 @@ export function WebMessageComposer({
   keyBindings,
   wrapText = false,
 }: MessageComposerProps) {
+  useThemeColors();
   const borderColor = focused
     ? blendHex(colors.borderFocused, colors.textBright, 0.24)
     : colors.border;
@@ -361,6 +365,7 @@ export function WebListView({
   scrollable = false,
   autoScrollToIndex = true,
 }: ListViewProps) {
+  useThemeColors();
   const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
   const scrollRef = useRef<ScrollBoxRenderable>(null);
   const baseBg = bgColor ?? colors.bg;
@@ -489,6 +494,7 @@ export function WebSegmentedControl({
   value,
   onChange,
 }: SegmentedControlProps) {
+  useThemeColors();
   return (
     <Box
       flexDirection="row"
@@ -538,6 +544,7 @@ export function WebDialogFrame({
   footer,
   showTitleDivider = true,
 }: DialogFrameProps) {
+  useThemeColors();
   return (
     <Box flexDirection="column" style={{ padding: 14 }}>
       <Box
@@ -583,6 +590,7 @@ export function WebPageStackView({
   backLabel = "Back",
   backHint,
 }: PageStackViewProps) {
+  useThemeColors();
   useShortcut((event) => {
     if (!focused || !detailOpen || !isDetailBackNavigationKey(event)) return;
     event.stopPropagation?.();

package/src/renderers/electrobun/view/desktop-window-bridge.ts

@@ -2,9 +2,10 @@ import type { PaneRuntimeState } from "../../../core/state/app-state";
 import type {
   DesktopDockPreviewState,
   DesktopSharedStateSnapshot,
+  DesktopThemePreviewState,
   DesktopWindowBridge,
 } from "../../../types/desktop-window";
-import { backendRequest, getElectrobunBackendInitSnapshot, onDesktopDockPreview, onDesktopState } from "./backend-rpc";
+import { backendRequest, getElectrobunBackendInitSnapshot, onDesktopDockPreview, onDesktopState, onDesktopThemePreview } from "./backend-rpc";
 import { detachedSnapshotKey, prepareDetachedSnapshot } from "./desktop-window-snapshot";
 
 export function createDesktopWindowBridge(kind: "main" | "detached", paneId?: string): DesktopWindowBridge {
@@ -21,6 +22,11 @@ export function createDesktopWindowBridge(kind: "main" | "detached", paneId?: st
         await backendRequest("desktop.syncMainState", { snapshot });
       }
       : undefined,
+    syncThemePreview: kind === "main"
+      ? async (preview: DesktopThemePreviewState) => {
+        await backendRequest("desktop.setThemePreview", { preview });
+      }
+      : undefined,
     replaceDetachedPaneState: kind === "detached"
       ? async (targetPaneId: string, paneState: PaneRuntimeState) => {
         await backendRequest("desktop.replaceDetachedPaneState", { paneId: targetPaneId, paneState });
@@ -55,5 +61,10 @@ export function createDesktopWindowBridge(kind: "main" | "detached", paneId?: st
         listener(message.preview);
       });
     },
+    subscribeThemePreview(listener: (preview: DesktopThemePreviewState) => void) {
+      return onDesktopThemePreview((message) => {
+        listener(message.preview);
+      });
+    },
   };
 }

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

@@ -3,6 +3,7 @@
 import { useCallback, useMemo, useState, type ReactNode } from "react";
 import { DialogHostProvider, type DialogApi } from "../../../ui/dialog";
 import { blendHex, colors } from "../../../theme/colors";
+import { useThemeColors } from "../../../theme/theme-context";
 
 interface DialogState {
   id: string;
@@ -13,6 +14,7 @@ interface DialogState {
 let nextDialogId = 1;
 
 export function WebDialogHostProvider({ children }: { children: ReactNode }) {
+  useThemeColors();
   const [dialogState, setDialogState] = useState<DialogState | null>(null);
   const dialogBorder = blendHex(colors.border, colors.borderFocused, 0.18);
   const dialogBg = blendHex(colors.panel, colors.bg, 0.12);

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

@@ -99,7 +99,7 @@ export function WebInputHostProvider({ children }: { children: ReactNode }) {
   const shortcutsRef = useRef<ShortcutEntry[]>([]);
 
   const dispatchShortcut = (shortcutEvent: KeyEventLike) => {
-    for (const phase of ["normal", "after"] as const) {
+    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;

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

@@ -6,7 +6,7 @@ import { UiHostProvider } from "../../../ui/host";
 import { debugLog } from "../../../utils/debug-log";
 import { measurePerfAsync } from "../../../utils/perf-marks";
 import { startMainThreadMonitor } from "../../../utils/main-thread-monitor";
-import { initElectrobunBackend } from "./backend-rpc";
+import { backendRequest, initElectrobunBackend } from "./backend-rpc";
 import { installElectrobunAiHost } from "./ai-host";
 import { installElectrobunBrokerRemoteClient } from "./broker-remote-client";
 import { installElectrobunConfigStoreHost } from "./config-host";
@@ -45,9 +45,24 @@ debugLog.mirrorToConsole({
 });
 const stopMainThreadMonitor = startMainThreadMonitor("electrobun.web", { mirrorToConsole: true });
 
+rootElement.tabIndex = -1;
 root.render(<div className="gloom-loading">Starting Gloomberb...</div>);
 bootLog.warn("diagnostic console mirror enabled", { sources: ELECTROBUN_WEB_CONSOLE_LOG_SOURCES });
 
+function focusWebSurface(): void {
+  window.focus();
+  rootElement.focus({ preventScroll: true });
+}
+
+function requestStartupFocus(): void {
+  focusWebSurface();
+  requestAnimationFrame(() => {
+    void backendRequest("host.focusWindow")
+      .catch(() => null)
+      .then(() => focusWebSurface());
+  });
+}
+
 async function boot() {
   bootLog.info("boot started");
   const backendInitPromise = initElectrobunBackend();
@@ -78,6 +93,7 @@ async function boot() {
                 desktopWindowBridge={desktopWindowBridge}
                 desktopApplicationMenuBridge={desktopApplicationMenuBridge}
                 desktopSnapshot={desktopSnapshot}
+                desktopThemePreview={init.desktopThemePreview}
               />
             </WebDialogHostProvider>
           </WebToastHostProvider>
@@ -85,6 +101,7 @@ async function boot() {
       </UiHostProvider>,
     );
   });
+  requestStartupFocus();
   bootLog.info("root render scheduled", {
     layoutPanes: config.layout.instances.length,
     floatingPanes: config.layout.floating.length,

package/src/renderers/electrobun/view/styles.css

@@ -1,5 +1,6 @@
 @keyframes gloom-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
 html, body, #root { width: 100%; height: 100%; min-height: 100%; overflow: hidden; background: #000; }
+#root:focus { outline: none; }
 body {
   --cell-w: 8px;
   --cell-h: 18px;
@@ -119,6 +120,8 @@ body.gloom-dragging {
   pointer-events: auto;
 }
 [data-gloom-role="status-bar"] {
+  flex: 0 0 var(--cell-h);
+  height: var(--cell-h);
   min-height: var(--cell-h);
   max-height: var(--cell-h);
   align-items: center;
@@ -129,6 +132,8 @@ body.gloom-dragging {
   line-height: var(--cell-h);
 }
 [data-gloom-role="pane-footer"] {
+  flex: 0 0 var(--cell-h);
+  height: var(--cell-h);
   min-height: var(--cell-h);
   max-height: var(--cell-h);
   align-items: center;
@@ -294,18 +299,11 @@ body.gloom-dragging {
   min-width: 260px;
   max-width: 420px;
   padding: 10px 12px;
-  border: 1px solid #3a4148;
-  background: #151b20;
-  color: #d8dde3;
+  border: 1px solid;
   box-shadow: 0 12px 24px rgba(0,0,0,.28);
 }
-.gloom-toast-success { border-color: #54c99f; }
-.gloom-toast-error { border-color: #ff6b5f; }
 .gloom-toast-action {
   margin-top: 8px;
-  color: #101417;
-  background: #d8dde3;
-  border: 0;
   padding: 4px 8px;
   border-radius: 4px;
 }

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

@@ -1,17 +1,42 @@
 /// <reference lib="dom" />
 /** @jsxImportSource react */
-import { useCallback, useMemo, useState, type ReactNode } from "react";
+import { useCallback, useMemo, useState, type CSSProperties, type ReactNode } from "react";
+import { colors } from "../../../theme/colors";
 import { ToastHostProvider, type ToastHost, type ToastOptions } from "../../../ui/toast";
 
+type WebToastType = "info" | "success" | "error";
+
 interface ToastEntry {
   id: number;
   body: string;
-  type: "info" | "success" | "error";
+  type: WebToastType;
   action?: ToastOptions["action"];
 }
 
 let nextToastId = 1;
 
+function webToastBorderColor(type: WebToastType): string {
+  if (type === "success") return colors.positive;
+  if (type === "error") return colors.negative;
+  return colors.borderFocused;
+}
+
+function getToastStyle(type: WebToastType): CSSProperties {
+  return {
+    background: colors.panel,
+    borderColor: webToastBorderColor(type),
+    color: colors.text,
+  };
+}
+
+function getToastActionStyle(): CSSProperties {
+  return {
+    background: colors.selected,
+    border: `1px solid ${colors.borderFocused}`,
+    color: colors.selectedText,
+  };
+}
+
 export function WebToastHostProvider({ children }: { children: ReactNode }) {
   const [toasts, setToasts] = useState<ToastEntry[]>([]);
 
@@ -33,11 +58,12 @@ export function WebToastHostProvider({ children }: { children: ReactNode }) {
       return (
         <div className="gloom-toast-viewport">
           {toasts.map((toast) => (
-            <div key={toast.id} className={`gloom-toast gloom-toast-${toast.type}`}>
+            <div key={toast.id} className="gloom-toast" style={getToastStyle(toast.type)}>
               <div>{toast.body}</div>
               {toast.action && (
                 <button
                   className="gloom-toast-action"
+                  style={getToastActionStyle()}
                   onClick={() => {
                     toast.action?.onClick();
                     dismiss(toast.id);

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

@@ -940,6 +940,13 @@ const WebScrollBox = forwardRef<ScrollBoxRenderable, Record<string, unknown> & {
         const element = getElement();
         if (element) element.scrollTop = Math.max(0, value) * WEB_CELL_HEIGHT;
       },
+      get scrollTopPx() {
+        return Math.max(0, getElement()?.scrollTop ?? 0);
+      },
+      set scrollTopPx(value: number) {
+        const element = getElement();
+        if (element) element.scrollTop = Math.max(0, value);
+      },
       get scrollLeft() {
         return toCellX(getElement()?.scrollLeft ?? 0);
       },
@@ -947,12 +954,25 @@ const WebScrollBox = forwardRef<ScrollBoxRenderable, Record<string, unknown> & {
         const element = getElement();
         if (element) element.scrollLeft = Math.max(0, value) * WEB_CELL_WIDTH;
       },
+      get scrollLeftPx() {
+        return Math.max(0, getElement()?.scrollLeft ?? 0);
+      },
+      set scrollLeftPx(value: number) {
+        const element = getElement();
+        if (element) element.scrollLeft = Math.max(0, value);
+      },
       get scrollHeight() {
         return toCellY(getElement()?.scrollHeight ?? 0);
       },
       get scrollWidth() {
         return toCellX(getElement()?.scrollWidth ?? 0);
       },
+      get scrollHeightPx() {
+        return Math.max(0, getElement()?.scrollHeight ?? 0);
+      },
+      get scrollWidthPx() {
+        return Math.max(0, getElement()?.scrollWidth ?? 0);
+      },
       get viewport() {
         const element = getElement();
         return {
@@ -960,6 +980,13 @@ const WebScrollBox = forwardRef<ScrollBoxRenderable, Record<string, unknown> & {
           height: toCellY(element?.clientHeight ?? 0),
         };
       },
+      get viewportPx() {
+        const element = getElement();
+        return {
+          width: Math.max(0, element?.clientWidth ?? 0),
+          height: Math.max(0, element?.clientHeight ?? 0),
+        };
+      },
       getBoundingClientRect() {
         const rect = getElement()?.getBoundingClientRect();
         return {
@@ -986,6 +1013,21 @@ const WebScrollBox = forwardRef<ScrollBoxRenderable, Record<string, unknown> & {
           top: Math.max(0, target.y ?? toCellY(element.scrollTop)) * WEB_CELL_HEIGHT,
         });
       },
+      scrollToPixels(target: number | { x?: number; y?: number }, y?: number) {
+        const element = getElement();
+        if (!element) 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),
+        });
+      },
     }), [horizontalScrollBar, verticalScrollBar]);
 
     const scrollable = props.scrollX === true || props.scrollY === true;

package/src/renderers/opentui/input-host.tsx

@@ -15,7 +15,7 @@ export function OpenTuiInputHostProvider({ children }: { children: ReactNode })
   const shortcutsRef = useRef<ShortcutEntry[]>([]);
   const dispatchShortcut = (event: KeyEventLike) => {
     const shortcuts = shortcutsRef.current;
-    for (const phase of ["normal", "after"] as const) {
+    for (const phase of ["before", "normal", "after"] as const) {
       if (phase === "after" && (event.defaultPrevented || event.propagationStopped)) return;
       for (const entry of shortcuts) {
         if (entry.phase !== phase || !entry.enabledRef.current) continue;