gloomberb 0.9.4 → 0.9.6

package/src/components/table-view-shared.tsx

@@ -2,7 +2,6 @@ import {
   useCallback,
   useEffect,
   useRef,
-  useState,
   type ReactNode,
   type RefObject,
 } from "react";
@@ -114,23 +113,16 @@ export function useTableViewState({
   headerScrollRef,
   scrollRef,
   syncHeaderScroll,
-  hoveredIdx,
-  setHoveredIdx,
 }: {
   headerScrollRef?: RefObject<ScrollBoxRenderable | null>;
   scrollRef?: RefObject<ScrollBoxRenderable | null>;
   syncHeaderScroll?: () => void;
-  hoveredIdx?: number | null;
-  setHoveredIdx?: (index: number | null) => void;
 }) {
   const internalHeaderScrollRef = useRef<ScrollBoxRenderable>(null);
   const internalScrollRef = useRef<ScrollBoxRenderable>(null);
-  const [internalHoveredIdx, setInternalHoveredIdx] = useState<number | null>(null);
 
   const effectiveHeaderScrollRef = headerScrollRef ?? internalHeaderScrollRef;
   const effectiveScrollRef = scrollRef ?? internalScrollRef;
-  const effectiveHoveredIdx = hoveredIdx !== undefined ? hoveredIdx : internalHoveredIdx;
-  const effectiveSetHoveredIdx = setHoveredIdx ?? setInternalHoveredIdx;
 
   const defaultSyncHeaderScroll = useCallback(() => {
     const body = effectiveScrollRef.current;
@@ -144,8 +136,6 @@ export function useTableViewState({
   return {
     effectiveHeaderScrollRef,
     effectiveScrollRef,
-    effectiveHoveredIdx,
-    effectiveSetHoveredIdx,
     effectiveSyncHeaderScroll: syncHeaderScroll ?? defaultSyncHeaderScroll,
   };
 }

package/src/components/ticker/list-table-view.tsx

@@ -56,8 +56,6 @@ export interface TickerListTableViewProps {
   scrollRef?: RefObject<ScrollBoxRenderable | null>;
   syncHeaderScroll?: () => void;
   onBodyScrollActivity?: () => void;
-  hoveredIdx?: number | null;
-  setHoveredIdx?: (index: number | null) => void;
   keyboardNavigation?: boolean;
   onRootKeyDown?: (event: DataTableKeyEvent) => boolean | void;
   onVisibleRangeChange?: (range: TickerListVisibleRange) => void;
@@ -119,8 +117,6 @@ export function TickerListTableView({
   scrollRef,
   syncHeaderScroll,
   onBodyScrollActivity,
-  hoveredIdx,
-  setHoveredIdx,
   keyboardNavigation = true,
   onRootKeyDown,
   onVisibleRangeChange,
@@ -187,7 +183,7 @@ export function TickerListTableView({
     ticker: TickerRecord,
     column: ColumnConfig,
     _index: number,
-    rowState: { selected: boolean; hovered: boolean },
+    rowState: { selected: boolean },
   ) => {
     const financials = financialsMap.get(ticker.metadata.ticker);
     if (column.id === PRICE_SPARKLINE_COLUMN_ID) {
@@ -279,8 +275,6 @@ export function TickerListTableView({
       scrollRef={effectiveScrollRef}
       syncHeaderScroll={syncHeaderScroll}
       onBodyScrollActivity={handleBodyScrollActivity}
-      hoveredIdx={hoveredIdx}
-      setHoveredIdx={setHoveredIdx}
       keyboardNavigation={keyboardNavigation}
       onRootKeyDown={onRootKeyDown}
       resetScrollKey={resetScrollKey}

package/src/components/ticker/list-table.test.tsx

@@ -32,8 +32,6 @@ const manyTickers: TickerRecord[] = Array.from({ length: 1000 }, (_, index) => (
   },
 }));
 
-function noop(_index: number | null): void {}
-
 function resolveCell(_column: ColumnConfig, ticker: TickerRecord, _financials: TickerFinancials | undefined): TickerTableCell {
   resolveCellCallCount += 1;
   return { text: ticker.metadata.ticker };
@@ -69,8 +67,6 @@ function LargeTickerListTableHarness() {
         columns={columns}
         tickers={manyTickers}
         cursorSymbol={cursorSymbol}
-        hoveredIdx={null}
-        setHoveredIdx={noop}
         setCursorSymbol={setCursorSymbol}
         resolveCell={resolveCell}
         financialsMap={financialsMap}

package/src/components/toggle-list.tsx

@@ -26,6 +26,9 @@ export interface ToggleListProps {
   rowGap?: number;
   rowHeight?: number;
   surface?: "framed" | "plain";
+  remoteLabel?: string;
+  remoteScope?: string;
+  remoteMetadata?: Record<string, unknown>;
 }
 
 function DesktopToggleRow({
@@ -124,6 +127,9 @@ export function ToggleList({
   rowGap,
   rowHeight,
   surface,
+  remoteLabel,
+  remoteScope,
+  remoteMetadata,
 }: ToggleListProps) {
   const isDesktopWeb = useUiHost().kind === "desktop-web";
   const listItems: ListViewItem[] = items.map((item) => ({
@@ -145,6 +151,10 @@ export function ToggleList({
       rowGap={rowGap ?? (isDesktopWeb ? 0 : undefined)}
       rowHeight={rowHeight}
       surface={surface}
+      remoteLabel={remoteLabel}
+      remoteScope={remoteScope}
+      remoteMetadata={remoteMetadata}
+      remoteItemKind="toggle"
       onSelect={onSelect}
       onActivate={(item) => {
         onToggle?.(item.id);

package/src/components/ui/button.tsx

@@ -2,6 +2,7 @@ import { Box, Text, useUiHost } from "../../ui";
 import { TextAttributes } from "../../ui";
 import { type ComponentType } from "react";
 import { colors } from "../../theme/colors";
+import { useRemoteUiNode } from "../../remote/semantic-tree";
 
 export type ButtonVariant = "primary" | "secondary" | "ghost" | "danger";
 
@@ -45,6 +46,17 @@ export function Button({
   shortcut,
   width,
 }: ButtonProps) {
+  useRemoteUiNode({
+    role: "button",
+    label,
+    disabled,
+    actions: {
+      press: () => {
+        if (!disabled) onPress?.();
+      },
+    },
+    metadata: { variant, active, shortcut },
+  });
   const HostButton = useUiHost().Button as ComponentType<ButtonProps> | undefined;
   if (HostButton) {
     return (

package/src/components/ui/data-table/index.tsx

@@ -5,6 +5,8 @@ import type {
   DataTableColumn,
   DataTableProps,
 } from "./types";
+import { useRemoteUiNode } from "../../../remote/semantic-tree";
+import { resolveRemoteItemIndex } from "../../../remote/semantic-helpers";
 
 export type {
   DataTableCell,
@@ -16,6 +18,46 @@ export type {
 export function DataTable<T, C extends DataTableColumn = DataTableColumn>(
   props: DataTableProps<T, C>,
 ) {
+  useRemoteUiNode({
+    role: "table",
+    label: "Data table",
+    actions: {
+      selectRow: (input) => {
+        const index = resolveTableIndex(input, props);
+        const item = index >= 0 ? props.items[index] : undefined;
+        if (item) props.onSelect(item, index);
+      },
+      activateRow: (input) => {
+        const index = resolveTableIndex(input, props);
+        const item = index >= 0 ? props.items[index] : undefined;
+        if (item) {
+          props.onSelect(item, index);
+          props.onActivate?.(item, index);
+        }
+      },
+      sort: (input) => {
+        const columnId = typeof input === "string"
+          ? input
+          : input && typeof input === "object" && typeof (input as { columnId?: unknown }).columnId === "string"
+            ? (input as { columnId: string }).columnId
+            : null;
+        if (columnId && props.columns.some((column) => column.id === columnId)) {
+          props.onHeaderClick(columnId);
+        }
+      },
+    },
+    metadata: {
+      sortColumnId: props.sortColumnId,
+      sortDirection: props.sortDirection,
+      columns: props.columns.map((column) => ({ id: column.id, label: column.label })),
+      rows: props.items.slice(0, 200).map((item, index) => ({
+        index,
+        key: props.getItemKey(item, index),
+        selected: props.isSelected(item, index),
+      })),
+      rowCount: props.items.length,
+    },
+  });
   const HostDataTable = useUiHost().DataTable as
     | ComponentType<DataTableProps<T, C>>
     | undefined;
@@ -24,3 +66,12 @@ export function DataTable<T, C extends DataTableColumn = DataTableColumn>(
   }
   return <OpenTuiDataTable {...props} />;
 }
+
+function resolveTableIndex<T, C extends DataTableColumn>(
+  input: unknown,
+  props: DataTableProps<T, C>,
+): number {
+  return resolveRemoteItemIndex(input, props.items, {
+    key: (item, index) => props.getItemKey(item, index),
+  });
+}

package/src/components/ui/data-table/opentui/index.tsx

@@ -40,8 +40,6 @@ export function OpenTuiDataTable<T, C extends DataTableColumn = DataTableColumn>
   scrollRef,
   syncHeaderScroll,
   onBodyScrollActivity,
-  hoveredIdx,
-  setHoveredIdx,
   headerScrollId,
   bodyScrollId,
   getItemKey,
@@ -369,8 +367,7 @@ export function OpenTuiDataTable<T, C extends DataTableColumn = DataTableColumn>
                 }
 
                 const selected = isSelected(item, index);
-                const hovered = hoveredIdx === index && !selected;
-                const rowState = { selected, hovered };
+                const rowState = { selected };
                 const rowBackgroundColor = getRowBackgroundColor?.(
                   item,
                   index,
@@ -378,9 +375,8 @@ export function OpenTuiDataTable<T, C extends DataTableColumn = DataTableColumn>
                 );
                 const rowBg = selected
                   ? colors.selected
-                  : hovered
-                    ? hoverBg()
-                    : rowBackgroundColor ?? colors.bg;
+                  : rowBackgroundColor ?? colors.bg;
+                const rowHoverBg = selected ? undefined : hoverBg();
 
                 return (
                   <Box
@@ -390,10 +386,8 @@ export function OpenTuiDataTable<T, C extends DataTableColumn = DataTableColumn>
                     {...tableContentWidthProps(contentWidth)}
                     paddingX={horizontalPadding}
                     backgroundColor={rowBg}
+                    hoverBackgroundColor={rowHoverBg}
                     data-gloom-context-menu-surface={rowContextMenuSurface ? "true" : undefined}
-                    onMouseMove={() => {
-                      if (hoveredIdx !== index) setHoveredIdx(index);
-                    }}
                     onMouseDown={(event: any) => {
                       focusPane();
                       onTableMouseDown?.(event);

package/src/components/ui/data-table/types.ts

@@ -29,6 +29,10 @@ export interface DataTableSectionHeader {
 
 export type DataTableScrollAlign = "nearest" | "center";
 
+export interface DataTableRowState {
+  selected: boolean;
+}
+
 export interface DataTableProps<
   T,
   C extends DataTableColumn = DataTableColumn,
@@ -42,8 +46,6 @@ export interface DataTableProps<
   scrollRef: RefObject<ScrollBoxRenderable | null>;
   syncHeaderScroll: () => void;
   onBodyScrollActivity: () => void;
-  hoveredIdx: number | null;
-  setHoveredIdx: (index: number | null) => void;
   headerScrollId?: string;
   bodyScrollId?: string;
   getItemKey: (item: T, index: number) => string;
@@ -58,7 +60,7 @@ export interface DataTableProps<
     item: T,
     column: C,
     index: number,
-    rowState: { selected: boolean; hovered: boolean },
+    rowState: DataTableRowState,
   ) => DataTableCell;
   renderSectionHeader?: (
     item: T,
@@ -67,7 +69,7 @@ export interface DataTableProps<
   getRowBackgroundColor?: (
     item: T,
     index: number,
-    rowState: { selected: boolean; hovered: boolean },
+    rowState: DataTableRowState,
   ) => string | undefined;
   emptyContent?: ReactNode;
   bodyAfter?: ReactNode;

package/src/components/ui/fields.tsx

@@ -2,6 +2,8 @@ import { Box, Input, Span, Text, useUiHost } from "../../ui";
 import { useEffect, useRef, useState, type ComponentType, type RefObject } from "react";
 import { type InputRenderable } from "../../ui";
 import { colors } from "../../theme/colors";
+import { useRemoteUiNode } from "../../remote/semantic-tree";
+import { remoteStringValue } from "../../remote/semantic-helpers";
 
 export interface TextFieldProps {
   label?: string;
@@ -46,6 +48,22 @@ export function TextField({
   placeholderColor = colors.textDim,
   onMouseDown,
 }: TextFieldProps) {
+  useRemoteUiNode({
+    role: "text-field",
+    label: label ?? placeholder,
+    actions: {
+      setValue: (input) => {
+        const nextValue = remoteStringValue(input);
+        onChange?.(nextValue);
+      },
+      submit: (input) => {
+        const nextValue = remoteStringValue(input, value ?? "");
+        onSubmit?.(nextValue);
+      },
+      blur: () => onBlur?.(value ?? ""),
+    },
+    metadata: { value, placeholder, focused, type, variant },
+  });
   const HostTextField = useUiHost().TextField as ComponentType<TextFieldProps> | undefined;
   if (HostTextField) {
     return (

package/src/components/ui/list-view.tsx

@@ -2,12 +2,19 @@ import { Box, ScrollBox, Text, useUiHost } from "../../ui";
 import { useEffect, useRef, useState, type ComponentType, type ReactNode } from "react";
 import { TextAttributes, type ScrollBoxRenderable } from "../../ui";
 import { colors, hoverBg } from "../../theme/colors";
+import { useRemoteUiNode } from "../../remote/semantic-tree";
+import { resolveRemoteItemIndex } from "../../remote/semantic-helpers";
 
 export interface ListViewItem {
   id: string;
   label: string;
   description?: string;
   detail?: string;
+  category?: string;
+  kind?: string;
+  right?: string;
+  checked?: boolean;
+  current?: boolean;
   disabled?: boolean;
 }
 
@@ -38,6 +45,13 @@ export interface ListViewProps {
   scrollable?: boolean;
   selectOnHover?: boolean;
   autoScrollToIndex?: boolean;
+  onMouseScroll?: (event: any) => void;
+  remoteRole?: string;
+  remoteLabel?: string;
+  remoteScope?: string;
+  remoteItemKind?: string;
+  remoteItemCategory?: string;
+  remoteMetadata?: Record<string, unknown>;
 }
 
 function DefaultRow({
@@ -88,7 +102,49 @@ export function ListView({
   scrollable = false,
   selectOnHover = false,
   autoScrollToIndex = true,
+  onMouseScroll,
+  remoteRole = "list",
+  remoteLabel,
+  remoteScope,
+  remoteItemKind,
+  remoteItemCategory,
+  remoteMetadata,
 }: ListViewProps) {
+  useRemoteUiNode({
+    role: remoteRole,
+    label: remoteLabel ?? emptyMessage,
+    actions: {
+      select: (input) => {
+        const index = resolveListIndex(input, items);
+        if (index >= 0 && !items[index]?.disabled) onSelect?.(index);
+      },
+      activate: (input) => {
+        const index = resolveListIndex(input, items);
+        const item = index >= 0 ? items[index] : undefined;
+        if (item && !item.disabled) {
+          onSelect?.(index);
+          onActivate?.(item, index);
+        }
+      },
+    },
+    metadata: {
+      ...remoteMetadata,
+      scope: remoteScope,
+      selectedIndex,
+      items: items.map((item, index) => ({
+        index,
+        id: item.id,
+        label: item.label,
+        detail: item.detail,
+        category: item.category ?? remoteItemCategory,
+        kind: item.kind ?? remoteItemKind,
+        right: item.right,
+        checked: item.checked,
+        current: item.current,
+        disabled: item.disabled === true,
+      })),
+    },
+  });
   const HostListView = useUiHost().ListView as ComponentType<ListViewProps> | undefined;
   if (HostListView) {
     return (
@@ -113,6 +169,13 @@ export function ListView({
         scrollable={scrollable}
         selectOnHover={selectOnHover}
         autoScrollToIndex={autoScrollToIndex}
+        onMouseScroll={onMouseScroll}
+        remoteRole={remoteRole}
+        remoteLabel={remoteLabel}
+        remoteScope={remoteScope}
+        remoteItemKind={remoteItemKind}
+        remoteItemCategory={remoteItemCategory}
+        remoteMetadata={remoteMetadata}
       />
     );
   }
@@ -130,7 +193,7 @@ export function ListView({
     const sb = scrollRef.current;
     if (!sb) return;
     const safeIndex = Math.min(activeScrollIndex, items.length - 1);
-    const viewportH = Math.max(sb.viewport.height, 1);
+    const viewportH = Math.max(sb.viewport?.height ?? 1, 1);
     if (safeIndex < sb.scrollTop) {
       sb.scrollTo(safeIndex);
     } else if (safeIndex >= sb.scrollTop + viewportH) {
@@ -142,7 +205,9 @@ export function ListView({
     if (!scrollable) return;
     const sb = scrollRef.current;
     if (!sb) return;
-    sb.verticalScrollBar.visible = items.length > sb.viewport.height;
+    if (sb.verticalScrollBar) {
+      sb.verticalScrollBar.visible = items.length > (sb.viewport?.height ?? 0);
+    }
   }, [items.length, height, flexGrow, scrollable]);
 
   if (items.length === 0) {
@@ -166,12 +231,13 @@ export function ListView({
         key={item.id}
         height={1}
         backgroundColor={rowBg}
-        onMouseMove={() => {
+        onMouseOver={() => {
           if (!disabled) {
             setHoveredIndex((current) => (current === index ? current : index));
             if (selectOnHover) onSelect?.(index);
           }
         }}
+        {...(onMouseScroll ? { onMouseScroll } : {})}
         onMouseDown={() => {
           if (disabled) return;
           onSelect?.(index);
@@ -188,7 +254,14 @@ export function ListView({
   return (
     <Box flexDirection="column" height={height} flexGrow={flexGrow}>
       {scrollable ? (
-        <ScrollBox ref={scrollRef} height={height} flexGrow={flexGrow} scrollY focusable={false}>
+        <ScrollBox
+          ref={scrollRef}
+          height={height}
+          flexGrow={flexGrow}
+          scrollY
+          focusable={false}
+          {...(onMouseScroll ? { onMouseScroll } : {})}
+        >
           {rows}
         </ScrollBox>
       ) : rows}
@@ -204,3 +277,10 @@ export function ListView({
     </Box>
   );
 }
+
+function resolveListIndex(input: unknown, items: ListViewItem[]): number {
+  return resolveRemoteItemIndex(input, items, {
+    id: (item) => item.id,
+    label: (item) => item.label,
+  });
+}

package/src/components/ui/message-composer.tsx

@@ -2,6 +2,8 @@ import { Box, Text, Textarea, useUiHost } from "../../ui";
 import { type ComponentType, type RefObject } from "react";
 import { type TextareaRenderable } from "../../ui";
 import { colors } from "../../theme/colors";
+import { useRemoteUiNode } from "../../remote/semantic-tree";
+import { remoteStringValue } from "../../remote/semantic-helpers";
 
 export interface MessageComposerProps {
   inputRef?: RefObject<TextareaRenderable | null>;
@@ -54,6 +56,26 @@ export function MessageComposer({
   keyBindings,
   wrapText = false,
 }: MessageComposerProps) {
+  useRemoteUiNode({
+    role: "message-composer",
+    label: placeholder || "Message composer",
+    actions: {
+      setValue: (input) => {
+        const value = remoteStringValue(input);
+        onFocusRequest?.();
+        onInput?.(value);
+      },
+      submit: () => {
+        onFocusRequest?.();
+        onSubmit?.();
+      },
+      focus: () => {
+        onFocusRequest?.();
+        inputRef?.current?.focus?.();
+      },
+    },
+    metadata: { focused, placeholder, height },
+  });
   const HostMessageComposer = useUiHost().MessageComposer as ComponentType<MessageComposerProps> | undefined;
   if (HostMessageComposer) {
     return (

package/src/components/ui/tabs.tsx

@@ -3,6 +3,7 @@ import { useShortcut } from "../../react/input";
 import { Box, ScrollBox, Text, useUiHost } from "../../ui";
 import { TextAttributes, type ScrollBoxRenderable } from "../../ui";
 import { colors, hoverBg } from "../../theme/colors";
+import { useRemoteUiNode } from "../../remote/semantic-tree";
 
 type TabPointerEvent = {
   button?: number;
@@ -76,6 +77,36 @@ export function Tabs({
     navigationValueRef.current = value;
     onSelect(value);
   }, [onSelect]);
+  useRemoteUiNode({
+    role: "tabs",
+    label: "Tabs",
+    actions: {
+      select: (input) => {
+        const value = resolveTabValue(input, tabs);
+        if (!value) return;
+        const tab = tabs.find((entry) => entry.value === value);
+        if (!tab || tab.disabled) return;
+        handleSelect(value);
+      },
+      add: onAdd ? () => onAdd() : undefined,
+      close: (input) => {
+        const value = resolveTabValue(input, tabs);
+        if (!value) return;
+        const tab = tabs.find((entry) => entry.value === value);
+        if (!tab || tab.disabled) return;
+        tab.onClose?.(value);
+      },
+    },
+    metadata: {
+      activeValue,
+      tabs: tabs.map((tab) => ({
+        label: tab.label,
+        value: tab.value,
+        disabled: tab.disabled === true,
+        closeable: !!tab.onClose,
+      })),
+    },
+  });
 
   const selectAdjacentTab = useCallback((direction: -1 | 1) => {
     const enabledTabs = tabs.filter((tab) => !tab.disabled);
@@ -144,6 +175,20 @@ export function Tabs({
   );
 }
 
+function resolveTabValue(input: unknown, tabs: TabItem[]): string | null {
+  if (typeof input === "string") return input;
+  if (typeof input === "number") return tabs[input]?.value ?? null;
+  if (input && typeof input === "object") {
+    const value = input as { value?: unknown; label?: unknown; index?: unknown };
+    if (typeof value.value === "string") return value.value;
+    if (typeof value.label === "string") {
+      return tabs.find((tab) => tab.label === value.label)?.value ?? null;
+    }
+    if (typeof value.index === "number") return tabs[value.index]?.value ?? null;
+  }
+  return null;
+}
+
 function tabWidth(
   tab: TabItem,
   active: boolean,
@@ -287,7 +332,6 @@ function OpenTuiTabs({
             flexDirection="row"
             backgroundColor={active && variant === "pill" ? palette.activeBg : hovered ? palette.hoverBg : undefined}
             onMouseOver={startHover}
-            onMouseMove={startHover}
             onMouseOut={endHover}
             onMouseDown={selectTab}
             onDoubleClick={tab.disabled || !tab.onDoubleClick ? undefined : () => tab.onDoubleClick?.(tab.value)}
@@ -319,7 +363,7 @@ function OpenTuiTabs({
           width={addWidth}
           height={1}
           backgroundColor={hoveredValue === "__add__" ? palette.hoverBg : undefined}
-          onMouseMove={() => setHoveredValue((current) => (current === "__add__" ? current : "__add__"))}
+          onMouseOver={() => setHoveredValue((current) => (current === "__add__" ? current : "__add__"))}
           onMouseOut={() => setHoveredValue((current) => (current === "__add__" ? null : current))}
           onMouseDown={(event: TabPointerEvent) => {
             event.preventDefault();

package/src/components/ui/ui.test.tsx

@@ -51,7 +51,6 @@ function DataTableActivationHarness() {
   const headerScrollRef = useRef<ScrollBoxRenderable>(null);
   const scrollRef = useRef<ScrollBoxRenderable>(null);
   const [selectedId, setSelectedId] = useState<string | null>(null);
-  const [hoveredIdx, setHoveredIdx] = useState<number | null>(null);
 
   return (
     <DataTable
@@ -64,8 +63,6 @@ function DataTableActivationHarness() {
       scrollRef={scrollRef}
       syncHeaderScroll={() => {}}
       onBodyScrollActivity={() => {}}
-      hoveredIdx={hoveredIdx}
-      setHoveredIdx={setHoveredIdx}
       getItemKey={(row) => row.id}
       isSelected={(row) => selectedId === row.id}
       onSelect={(row) => {
@@ -89,7 +86,6 @@ function DataTableSectionHarness() {
   const headerScrollRef = useRef<ScrollBoxRenderable>(null);
   const scrollRef = useRef<ScrollBoxRenderable>(null);
   const [selectedId, setSelectedId] = useState<string | null>(null);
-  const [hoveredIdx, setHoveredIdx] = useState<number | null>(null);
   const rows: SectionTableRow[] = [
     { kind: "header", id: "macro", label: "Macro Releases" },
     { kind: "row", id: "cpi", name: "CPI" },
@@ -106,8 +102,6 @@ function DataTableSectionHarness() {
       scrollRef={scrollRef}
       syncHeaderScroll={() => {}}
       onBodyScrollActivity={() => {}}
-      hoveredIdx={hoveredIdx}
-      setHoveredIdx={setHoveredIdx}
       getItemKey={(row) => row.id}
       isSelected={(row) => row.kind === "row" && row.id === selectedId}
       onSelect={(row) => {
@@ -211,7 +205,6 @@ function DataTableColumnGapHarness() {
 function DataTableVirtualizationHarness() {
   const headerScrollRef = useRef<ScrollBoxRenderable>(null);
   const scrollRef = useRef<ScrollBoxRenderable>(null);
-  const [hoveredIdx, setHoveredIdx] = useState<number | null>(null);
   const rows = Array.from({ length: 100 }, (_, index) => ({
     id: `row-${index}`,
     name: `Row ${index}`,
@@ -237,8 +230,6 @@ function DataTableVirtualizationHarness() {
       scrollRef={scrollRef}
       syncHeaderScroll={() => {}}
       onBodyScrollActivity={() => {}}
-      hoveredIdx={hoveredIdx}
-      setHoveredIdx={setHoveredIdx}
       getItemKey={(row) => row.id}
       isSelected={() => false}
       onSelect={() => {}}

package/src/core/state/app/layout-reducer.ts

@@ -64,7 +64,13 @@ export function reduceLayoutAction(state: AppState, action: AppAction): AppState
     }
 
     case "UPDATE_LAYOUT":
-      return withFocusedPane(state, { ...state.config, layout: action.layout });
+      return withFocusedPane(
+        state,
+        { ...state.config, layout: action.layout },
+        Object.prototype.hasOwnProperty.call(action, "focusedPaneId")
+          ? { focusedPaneId: action.focusedPaneId ?? null }
+          : {},
+      );
 
     case "SWITCH_LAYOUT": {
       if (action.index < 0 || action.index >= state.config.layouts.length) return state;