gloomberb 0.6.0 → 0.6.1

package/src/plugins/builtin/ticker-detail/pane.tsx

@@ -14,7 +14,7 @@ import {
 import { useQuoteStreaming } from "../../../state/use-quote-streaming";
 import { getCollectionName, getCollectionTickerCount } from "../../../state/selectors";
 import { getSharedRegistry } from "../../registry";
-import { EmptyState, Tabs } from "../../../components";
+import { EmptyState, PaneFooterScope, Tabs } from "../../../components";
 import { resolveOptionsTarget } from "../../../utils/options";
 import { ChartTab } from "./chart-tab";
 import { ResolvedFinancialsTab } from "./financials-tab";
@@ -210,12 +210,14 @@ export function TickerDetailPane({ focused, width, height }: PaneProps) {
             height={contentHeight}
             overflow="hidden"
           >
-            <OverviewTab
-              width={width}
-              symbol={symbol}
-              ticker={ticker}
-              financials={financials}
-            />
+            <PaneFooterScope active={resolvedTabId === "overview"}>
+              <OverviewTab
+                width={width}
+                symbol={symbol}
+                ticker={ticker}
+                financials={financials}
+              />
+            </PaneFooterScope>
           </Box>
         )}
         {renderedTabIds.has("financials") && (
@@ -228,10 +230,12 @@ export function TickerDetailPane({ focused, width, height }: PaneProps) {
             height={contentHeight}
             overflow="hidden"
           >
-            <ResolvedFinancialsTab
-              focused={focused && resolvedTabId === "financials"}
-              financials={financials}
-            />
+            <PaneFooterScope active={resolvedTabId === "financials"}>
+              <ResolvedFinancialsTab
+                focused={focused && resolvedTabId === "financials"}
+                financials={financials}
+              />
+            </PaneFooterScope>
           </Box>
         )}
         {renderedTabIds.has("chart") && (
@@ -244,17 +248,19 @@ export function TickerDetailPane({ focused, width, height }: PaneProps) {
             height={contentHeight}
             overflow="hidden"
           >
-            <ChartTab
-              width={width}
-              height={contentHeight}
-              focused={focused && resolvedTabId === "chart"}
-              interactive={chartInteractive}
-              axisMode={paneSettings.chartAxisMode}
-              onActivate={() => setChartInteractiveEager(true)}
-              symbol={symbol}
-              ticker={ticker}
-              financials={financials}
-            />
+            <PaneFooterScope active={resolvedTabId === "chart"}>
+              <ChartTab
+                width={width}
+                height={contentHeight}
+                focused={focused && resolvedTabId === "chart"}
+                interactive={chartInteractive}
+                axisMode={paneSettings.chartAxisMode}
+                onActivate={() => setChartInteractiveEager(true)}
+                symbol={symbol}
+                ticker={ticker}
+                financials={financials}
+              />
+            </PaneFooterScope>
           </Box>
         )}
 
@@ -272,12 +278,14 @@ export function TickerDetailPane({ focused, width, height }: PaneProps) {
               height={contentHeight}
               overflow="hidden"
             >
-              <PluginTab
-                width={width}
-                height={contentHeight}
-                focused={focused && isActive}
-                onCapture={isActive ? handlePluginCapture : ignorePluginCapture}
-              />
+              <PaneFooterScope active={isActive}>
+                <PluginTab
+                  width={width}
+                  height={contentHeight}
+                  focused={focused && isActive}
+                  onCapture={isActive ? handlePluginCapture : ignorePluginCapture}
+                />
+              </PaneFooterScope>
             </Box>
           );
         })}

package/src/plugins/builtin/ticker-detail-chart-tab-switch.test.tsx

@@ -65,6 +65,15 @@ function makeFinancials(length: number): TickerFinancials {
   };
 }
 
+function makeFinancialsWithStatements(length: number): TickerFinancials {
+  const financials = makeFinancials(length);
+  financials.annualStatements = [
+    { date: "2023-12-31", totalRevenue: 90, netIncome: 10 },
+    { date: "2024-12-31", totalRevenue: 110, netIncome: 14 },
+  ];
+  return financials;
+}
+
 function makeDetailConfig(symbol: string): AppConfig {
   const config = createDefaultConfig("/tmp/gloomberb-test");
   config.chartPreferences.renderer = "kitty";
@@ -130,6 +139,13 @@ async function flushFrames(count = 3) {
   }
 }
 
+function getSurfaceVisibleRect(
+  manager: { surfaces: Map<string, { snapshot: { visibleRect: unknown } }> },
+  surfaceId: string,
+): unknown {
+  return manager.surfaces.get(surfaceId)?.snapshot.visibleRect ?? null;
+}
+
 afterEach(() => {
   harnessDispatch = null;
   if (root) {
@@ -201,4 +217,54 @@ describe("Ticker detail chart tab switching", () => {
     expect(returnedOverview).toContain("AAPL");
     expect(manager.surfaces.has("chart-surface:ticker-detail:test:compact:base")).toBe(true);
   });
+
+  test("hides the full chart kitty surface when switching to financials", async () => {
+    const symbol = "AAPL";
+    const config = makeDetailConfig(symbol);
+
+    actEnvironment.IS_REACT_ACT_ENVIRONMENT = true;
+    testSetup = await createTestRenderer({ width: 120, height: 36 });
+    (testSetup.renderer as { _capabilities: unknown })._capabilities = { kitty_graphics: true };
+    (testSetup.renderer as { _resolution: unknown })._resolution = { width: 1200, height: 960 };
+
+    root = createRoot(testSetup.renderer);
+    act(() => {
+      root!.render(
+        <DetailHarness
+          config={config}
+          ticker={makeTicker(symbol)}
+          financials={makeFinancialsWithStatements(48)}
+        />,
+      );
+    });
+
+    await flushFrames();
+    const manager = getNativeSurfaceManager(testSetup.renderer as never) as unknown as {
+      surfaces: Map<string, { snapshot: { visibleRect: unknown } }>;
+    };
+    const fullSurfaceId = "chart-surface:ticker-detail:test:full:base";
+
+    act(() => {
+      harnessDispatch!({
+        type: "UPDATE_PANE_STATE",
+        paneId: TEST_PANE_ID,
+        patch: { activeTabId: "chart" },
+      });
+    });
+
+    await flushFrames();
+    expect(getSurfaceVisibleRect(manager, fullSurfaceId)).not.toBeNull();
+
+    act(() => {
+      harnessDispatch!({
+        type: "UPDATE_PANE_STATE",
+        paneId: TEST_PANE_ID,
+        patch: { activeTabId: "financials" },
+      });
+    });
+
+    await flushFrames();
+    expect(testSetup.captureCharFrame()).toContain("Income");
+    expect(getSurfaceVisibleRect(manager, fullSurfaceId)).toBeNull();
+  });
 });

package/src/plugins/builtin/ticker-detail.test.tsx

@@ -2,6 +2,7 @@ import { afterEach, describe, expect, test } from "bun:test";
 import { act, useReducer, type ReactElement } from "react";
 import { testRender } from "../../renderers/opentui/test-utils";
 import type { ScrollBoxRenderable } from "@opentui/core";
+import { Box } from "../../ui";
 import {
   AppContext,
   appReducer,
@@ -22,6 +23,7 @@ import type { DataProvider } from "../../types/data-provider";
 import type { TickerFinancials } from "../../types/financials";
 import type { DetailTabDef } from "../../types/plugin";
 import type { TickerRecord } from "../../types/ticker";
+import { PaneFooterBar, PaneFooterProvider, usePaneFooter } from "../../components/layout/pane-footer";
 import type { PluginRegistry } from "../registry";
 import { setSharedRegistryForTests } from "../registry";
 import { PluginRenderProvider } from "../plugin-runtime";
@@ -153,6 +155,34 @@ function makeRegistry(): PluginRegistry {
   return { detailTabs } as unknown as PluginRegistry;
 }
 
+function createFooterProbeTab(tabId: string, label: string): DetailTabDef["component"] {
+  return function FooterProbeTab() {
+    usePaneFooter(`footer-probe:${tabId}`, () => ({
+      info: [{ id: `${tabId}:info`, parts: [{ text: `${tabId}-footer`, tone: "value" }] }],
+      hints: [{ id: `${tabId}:hint`, key: label[0]!.toLowerCase(), label: `${label.slice(1).toLowerCase()}-hint` }],
+    }), []);
+    return <text>{`${label} body`}</text>;
+  };
+}
+
+function makeFooterRegistry(): PluginRegistry {
+  const detailTabs = new Map<string, DetailTabDef>([
+    ["probe-alpha", {
+      id: "probe-alpha",
+      name: "Alpha",
+      order: 25,
+      component: createFooterProbeTab("alpha", "Alpha"),
+    }],
+    ["probe-beta", {
+      id: "probe-beta",
+      name: "Beta",
+      order: 30,
+      component: createFooterProbeTab("beta", "Beta"),
+    }],
+  ]);
+  return { detailTabs } as unknown as PluginRegistry;
+}
+
 function createGatewayInstance(id = "ibkr-paper"): BrokerInstanceConfig {
   return {
     id,
@@ -241,6 +271,40 @@ function DetailHarness({
   );
 }
 
+function DetailFooterHarness({
+  config,
+  ticker,
+  financials,
+  activeTabId,
+  width = 90,
+  height = 18,
+}: {
+  config: AppConfig;
+  ticker: TickerRecord;
+  financials: TickerFinancials | null;
+  activeTabId: string;
+  width?: number;
+  height?: number;
+}) {
+  return (
+    <PaneFooterProvider>
+      {(footer) => (
+        <Box flexDirection="column" width={width} height={height}>
+          <DetailHarness
+            config={config}
+            ticker={ticker}
+            financials={financials}
+            activeTabId={activeTabId}
+            width={width}
+            height={height - 1}
+          />
+          <PaneFooterBar footer={footer} focused width={width} />
+        </Box>
+      )}
+    </PaneFooterProvider>
+  );
+}
+
 async function flushFrame() {
   await act(async () => {
     await testSetup!.renderOnce();
@@ -745,4 +809,42 @@ describe("TickerDetailPane", () => {
     expect(frame).toContain("active:overview");
     expect(frame).not.toContain("Trade");
   });
+
+  test("shows only active mounted tab pane hints", async () => {
+    setSharedRegistryForTests(makeFooterRegistry());
+    setOptionsProvider(createProvider(false));
+
+    testSetup = await testRender(
+      <DetailFooterHarness
+        config={createDetailConfig("AAPL")}
+        ticker={makeTicker("AAPL")}
+        financials={null}
+        activeTabId="probe-alpha"
+      />,
+      { width: 90, height: 18 },
+    );
+
+    await flushFrame();
+    await flushFrame();
+
+    let frame = testSetup.captureCharFrame();
+    expect(frame).toContain("alpha-footer");
+    expect(frame).toContain("[a]lpha-hint");
+    expect(frame).not.toContain("beta-footer");
+    expect(frame).not.toContain("[b]eta-hint");
+
+    await act(async () => {
+      harnessDispatch!({ type: "UPDATE_PANE_STATE", paneId: TEST_PANE_ID, patch: { activeTabId: "probe-beta" } });
+      await Promise.resolve();
+    });
+    await flushFrame();
+    await flushFrame();
+
+    frame = testSetup.captureCharFrame();
+    expect(frame).toContain("Beta body");
+    expect(frame).toContain("beta-footer");
+    expect(frame).toContain("[b]eta-hint");
+    expect(frame).not.toContain("alpha-footer");
+    expect(frame).not.toContain("[a]lpha-hint");
+  });
 });

package/src/plugins/ibkr/trade-tab.test.tsx

@@ -2,6 +2,8 @@ import { afterEach, expect, test } from "bun:test";
 import { DialogProvider } from "@opentui-ui/dialog/react";
 import { testRender } from "../../renderers/opentui/test-utils";
 import { act } from "react";
+import { Box } from "../../ui";
+import { PaneFooterBar, PaneFooterProvider } from "../../components/layout/pane-footer";
 import {
   AppContext,
   PaneInstanceProvider,
@@ -104,23 +106,37 @@ function TradeHarness({
   ticker,
   financials,
   brokerAccounts = {},
+  withFooter = false,
 }: {
   config: AppConfig;
   ticker: TickerRecord;
   financials: TickerFinancials;
   brokerAccounts?: Record<string, import("../../types/trading").BrokerAccount[]>;
+  withFooter?: boolean;
 }) {
   const state = createInitialState(config);
   state.focusedPaneId = TEST_PANE_ID;
   state.tickers = new Map([[ticker.metadata.ticker, ticker]]);
   state.financials = new Map([[ticker.metadata.ticker, financials]]);
   state.brokerAccounts = brokerAccounts;
+  const tradeTab = <TradeTab focused width={88} height={30} onCapture={() => {}} />;
 
   return (
     <DialogProvider dialogOptions={{ style: { backgroundColor: "#000000", borderColor: "#ffffff", borderStyle: "single" } }}>
       <AppContext value={{ state, dispatch: () => {} }}>
         <PaneInstanceProvider paneId={TEST_PANE_ID}>
-          <TradeTab focused width={88} height={30} onCapture={() => {}} />
+          {withFooter
+            ? (
+                <PaneFooterProvider>
+                  {(footer) => (
+                    <Box flexDirection="column" width={88} height={31}>
+                      {tradeTab}
+                      <PaneFooterBar footer={footer} focused width={88} />
+                    </Box>
+                  )}
+                </PaneFooterProvider>
+              )
+            : tradeTab}
         </PaneInstanceProvider>
       </AppContext>
     </DialogProvider>
@@ -223,3 +239,39 @@ test("prefills the only cached IBKR account when the live gateway snapshot is em
   expect(frame).toContain("Account DU123456");
   expect(frame).toContain("Paper Gateway");
 });
+
+test("omits redundant and disabled trade footer hints", async () => {
+  const config = createTradeConfig("AMD");
+  const ticker = makeTicker("AMD", "Advanced Micro Devices, Inc.");
+  const financials = makeFinancials();
+
+  clearTradingDraft();
+  stubGatewayRefresh();
+  prefillTradeFromTicker(ticker, "BUY");
+
+  await act(async () => {
+    testSetup = await testRender(
+      <TradeHarness config={config} ticker={ticker} financials={financials} withFooter />,
+      { width: 88, height: 31 },
+    );
+  });
+
+  await act(async () => {
+    await testSetup!.renderOnce();
+  });
+  await act(async () => {
+    await testSetup!.renderOnce();
+  });
+
+  const frame = testSetup.captureCharFrame();
+  expect(frame).toContain("[r]efresh");
+  expect(frame).toContain("[i]profile");
+  expect(frame).toContain("[a]ccount");
+  expect(frame).toContain("[b/v]side");
+  expect(frame).toContain("[q]ty");
+  expect(frame).toContain("[t]ype");
+  expect(frame).toContain("[p]review");
+  expect(frame).not.toContain("[s]ymbol");
+  expect(frame).not.toContain("[l]imit");
+  expect(frame).not.toContain("[x]stop");
+});

package/src/plugins/ibkr/trade-tab.tsx

@@ -695,21 +695,23 @@ export function TradeTab({ focused, width, onCapture }: DetailTabProps) {
       ...(statusText ? [{ id: "status", parts: [{ text: statusText, tone: statusTone === "negative" ? "negative" as const : statusTone === "positive" ? "positive" as const : "muted" as const }] }] : []),
     ],
     hints: [
-      { id: "refresh", key: "r", label: "efresh", onPress: () => refresh().catch(() => {}), disabled: ticketState.busy },
-      { id: "profile", key: "i", label: "profile", onPress: () => chooseBrokerInstance().catch(() => {}), disabled: ticketState.busy },
-      { id: "instrument", key: "s", label: "ymbol", onPress: () => chooseInstrument().catch(() => {}), disabled: ticketState.busy },
-      { id: "account", key: "a", label: "ccount", onPress: () => chooseAccount().catch(() => {}), disabled: ticketState.busy },
-      { id: "side", key: "b/v", label: "side", onPress: symbol && ticker ? () => setTradeTicketDraft(symbol, { action: ticketState.draft.action === "BUY" ? "SELL" : "BUY" }, ticker) : undefined, disabled: ticketState.busy || !symbol || !ticker },
-      { id: "quantity", key: "q", label: "ty", onPress: () => editNumericField("Quantity", ticketState.draft.quantity, (value) => { if (value != null && symbol && ticker) setTradeTicketDraft(symbol, { quantity: value }, ticker); }).catch(() => {}), disabled: ticketState.busy || !symbol || !ticker },
-      { id: "type", key: "t", label: "ype", onPress: () => editOrderType().catch(() => {}), disabled: ticketState.busy },
-      { id: "limit", key: "l", label: "imit", onPress: () => editPriceField("Limit Price", ticketState.draft.limitPrice, (value) => { if (symbol && ticker) setTradeTicketDraft(symbol, { limitPrice: value }, ticker); }).catch(() => {}), disabled: ticketState.busy || !showLimit || !symbol || !ticker },
-      { id: "stop", key: "x", label: "stop", onPress: () => editPriceField("Stop Price", ticketState.draft.stopPrice, (value) => { if (symbol && ticker) setTradeTicketDraft(symbol, { stopPrice: value }, ticker); }).catch(() => {}), disabled: ticketState.busy || !showStop || !symbol || !ticker },
-      { id: "preview", key: "p", label: "review", onPress: () => previewOrder().catch(() => {}), disabled: ticketState.busy || !symbol || !ticker },
+      ...(!ticketState.busy ? [
+        { id: "refresh", key: "r", label: "efresh", onPress: () => refresh().catch(() => {}) },
+        { id: "profile", key: "i", label: "profile", onPress: () => chooseBrokerInstance().catch(() => {}) },
+        { id: "account", key: "a", label: "ccount", onPress: () => chooseAccount().catch(() => {}) },
+      ] : []),
+      ...(!ticketState.busy && symbol && ticker ? [
+        { id: "side", key: "b/v", label: "side", onPress: () => setTradeTicketDraft(symbol, { action: ticketState.draft.action === "BUY" ? "SELL" : "BUY" }, ticker) },
+        { id: "quantity", key: "q", label: "ty", onPress: () => editNumericField("Quantity", ticketState.draft.quantity, (value) => { if (value != null) setTradeTicketDraft(symbol, { quantity: value }, ticker); }).catch(() => {}) },
+        { id: "type", key: "t", label: "ype", onPress: () => editOrderType().catch(() => {}) },
+        ...(showLimit ? [{ id: "limit", key: "l", label: "imit", onPress: () => editPriceField("Limit Price", ticketState.draft.limitPrice, (value) => { setTradeTicketDraft(symbol, { limitPrice: value }, ticker); }).catch(() => {}) }] : []),
+        ...(showStop ? [{ id: "stop", key: "x", label: "stop", onPress: () => editPriceField("Stop Price", ticketState.draft.stopPrice, (value) => { setTradeTicketDraft(symbol, { stopPrice: value }, ticker); }).catch(() => {}) }] : []),
+        { id: "preview", key: "p", label: "review", onPress: () => previewOrder().catch(() => {}) },
+      ] : []),
     ],
   }), [
     chooseAccount,
     chooseBrokerInstance,
-    chooseInstrument,
     editNumericField,
     editOrderType,
     editPriceField,

package/src/react/input.ts

@@ -9,14 +9,22 @@ export interface KeyEventLike {
   alt: boolean;
   meta: boolean;
   super?: boolean;
+  readonly defaultPrevented?: boolean;
+  readonly propagationStopped?: boolean;
   preventDefault(): void;
   stopPropagation(): void;
 }
 
+export interface ShortcutOptions {
+  enabled?: boolean;
+  scope?: string;
+  phase?: "normal" | "after";
+}
+
 export interface InputHost {
   useShortcut(
     handler: (event: KeyEventLike) => void,
-    options?: { enabled?: boolean; scope?: string },
+    options?: ShortcutOptions,
   ): void;
   useViewport(): { width: number; height: number };
 }
@@ -43,7 +51,7 @@ function useInputHost(): InputHost {
 
 export function useShortcut(
   handler: (event: KeyEventLike) => void,
-  options?: { enabled?: boolean; scope?: string },
+  options?: ShortcutOptions,
 ): void {
   useInputHost().useShortcut(handler, options);
 }

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

@@ -1,7 +1,7 @@
 /// <reference lib="dom" />
 /** @jsxImportSource react */
-import { useEffect, useMemo, useSyncExternalStore, type ReactNode } from "react";
-import { InputHostProvider, type InputHost, type KeyEventLike } from "../../../react/input";
+import { useEffect, useLayoutEffect, useMemo, useRef, useSyncExternalStore, type ReactNode } from "react";
+import { InputHostProvider, type InputHost, type KeyEventLike, type ShortcutOptions } from "../../../react/input";
 import { hasWebCtrlModifier, normalizeWebKeyName, shouldConsumeWebAppKeyDown, webKeySequence } from "./key-event";
 
 export const WEB_CELL_WIDTH = 8;
@@ -9,6 +9,7 @@ export const WEB_CELL_HEIGHT = 18;
 
 function toKeyEventLike(event: KeyboardEvent): KeyEventLike {
   const key = normalizeWebKeyName(event.key);
+  let propagationStopped = false;
   return {
     key,
     name: key,
@@ -18,11 +19,29 @@ function toKeyEventLike(event: KeyboardEvent): KeyEventLike {
     alt: event.altKey,
     meta: event.metaKey,
     super: event.metaKey,
+    get defaultPrevented() {
+      return event.defaultPrevented;
+    },
+    get propagationStopped() {
+      return propagationStopped;
+    },
     preventDefault: () => event.preventDefault(),
-    stopPropagation: () => event.stopPropagation(),
+    stopPropagation: () => {
+      propagationStopped = true;
+      event.stopPropagation();
+    },
   };
 }
 
+interface ShortcutEntry {
+  handlerRef: { current: (event: KeyEventLike) => void };
+  enabledRef: { 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);
@@ -40,17 +59,45 @@ function getViewport() {
 }
 
 export function WebInputHostProvider({ children }: { children: ReactNode }) {
+  const shortcutsRef = useRef<ShortcutEntry[]>([]);
+
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => {
+      const shortcutEvent = toKeyEventLike(event);
+      for (const phase of ["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;
+          entry.handlerRef.current(shortcutEvent);
+          if (shortcutEvent.propagationStopped) break;
+        }
+        if (shortcutEvent.propagationStopped) break;
+      }
+      if (shouldConsumeWebAppKeyDown(event)) event.preventDefault();
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, []);
+
   const host = useMemo<InputHost>(() => ({
     useShortcut(handler, options) {
-      useEffect(() => {
-        if (options?.enabled === false) return;
-        const onKeyDown = (event: KeyboardEvent) => {
-          handler(toKeyEventLike(event));
-          if (shouldConsumeWebAppKeyDown(event)) event.preventDefault();
+      const handlerRef = useRef(handler);
+      const enabledRef = useRef(options?.enabled !== false);
+      handlerRef.current = handler;
+      enabledRef.current = options?.enabled !== false;
+
+      useLayoutEffect(() => {
+        const entry: ShortcutEntry = {
+          handlerRef,
+          enabledRef,
+          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);
         };
-        window.addEventListener("keydown", onKeyDown);
-        return () => window.removeEventListener("keydown", onKeyDown);
-      }, [handler, options?.enabled, options?.scope]);
+      }, [options?.phase, options?.scope]);
     },
     useViewport() {
       return useSyncExternalStore(subscribeViewport, getViewport, getViewport);

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

@@ -176,7 +176,7 @@ function cleanDomProps(props: Record<string, unknown>): Record<string, unknown>
     "margin", "marginX", "marginY", "marginLeft", "marginRight", "marginTop", "marginBottom",
     "bold", "underline", "inverse", "dim", "italic", "strikethrough", "attributes", "content", "position", "left", "right", "top", "bottom",
     "zIndex", "width", "height", "minWidth", "minHeight", "maxWidth", "maxHeight", "gap",
-    "border", "borderStyle", "borderColor", "overflow", "selectable", "name", "color",
+    "border", "borderStyle", "borderColor", "overflow", "selectable", "visible", "name", "color",
     "focused", "focusedBackgroundColor", "textColor", "focusedTextColor", "placeholderColor",
     "cursorColor", "selectionBg", "selectionFg", "showCursor", "keyBindings", "wrapText", "wrapMode",
     "initialValue", "value", "onInput", "onChange", "onSubmit", "onCursorChange", "onMouse",
@@ -445,7 +445,11 @@ const WebBox = forwardRef<HTMLDivElement, Record<string, unknown> & { children?:
         onMouseUp={(event) => callMouseHandler(propsRef.current.onMouseUp, event, "up")}
         onMouseOut={handleMouseOut}
         onWheel={typeof props.onMouseScroll === "function" ? handleWheel : undefined}
-        style={{ ...commonStyle(props), ...(props.style as CSSProperties | undefined) }}
+        style={{
+          ...commonStyle(props),
+          ...(props.style as CSSProperties | undefined),
+          ...(props.visible === false ? { display: "none" } : undefined),
+        }}
       >
         {children as ReactNode}
       </div>
@@ -956,6 +960,15 @@ const WebScrollBox = forwardRef<ScrollBoxRenderable, Record<string, unknown> & {
           height: toCellY(element?.clientHeight ?? 0),
         };
       },
+      getBoundingClientRect() {
+        const rect = getElement()?.getBoundingClientRect();
+        return {
+          x: rect?.x ?? 0,
+          y: rect?.y ?? 0,
+          width: rect?.width ?? 0,
+          height: rect?.height ?? 0,
+        };
+      },
       horizontalScrollBar,
       verticalScrollBar,
       scrollTo(target: number | { x?: number; y?: number }, y?: number) {
@@ -1008,7 +1021,13 @@ const WebScrollBox = forwardRef<ScrollBoxRenderable, Record<string, unknown> & {
         onMouseOut={(event) => callMouseHandler(props.onMouseOut, event, "out")}
         onScroll={scrollable ? handleScroll : undefined}
         onWheel={scrollable ? handleWheel : undefined}
-        style={{ ...commonStyle(props), overflowX, overflowY, ...(props.style as CSSProperties | undefined) }}
+        style={{
+          ...commonStyle(props),
+          overflowX,
+          overflowY,
+          ...(props.style as CSSProperties | undefined),
+          ...(props.visible === false ? { display: "none" } : undefined),
+        }}
       >
         {children as ReactNode}
       </div>

package/src/renderers/opentui/host.tsx

@@ -38,6 +38,12 @@ export function toKeyEventLike(event: {
     alt: event.alt ?? false,
     meta: event.meta ?? event.super ?? false,
     super: event.super ?? event.meta ?? false,
+    get defaultPrevented() {
+      return event.defaultPrevented ?? false;
+    },
+    get propagationStopped() {
+      return event.propagationStopped ?? false;
+    },
     preventDefault: () => event.preventDefault?.(),
     stopPropagation: () => event.stopPropagation?.(),
   };