gloomberb 0.6.0 → 0.7.0

package/src/plugins/prediction-markets/pane.test.tsx

@@ -14,7 +14,6 @@ import {
 } from "./test-helpers";
 import { attachPredictionMarketsPersistence } from "./services/fetch";
 import {
-  loadKalshiCatalog,
   normalizeKalshiMarket,
 } from "./services/kalshi-adapter";
 import { normalizePolymarketMarket } from "./services/polymarket-adapter";
@@ -379,7 +378,7 @@ describe("prediction markets pane interactions", () => {
     ).toBe("polymarket:pm-1");
   });
 
-  test("supports detail outcome navigation and backspace return from the keyboard", async () => {
+  test("supports detail outcome navigation and escape return from the keyboard", async () => {
     attachPredictionMarketsPersistence(new MemoryPersistence());
 
     globalThis.fetch = (async (input: Request | string | URL) => {
@@ -512,20 +511,13 @@ describe("prediction markets pane interactions", () => {
     await flushFrames(testSetup);
 
     const escapeFrame = testSetup.captureCharFrame();
-    expect(escapeFrame).toContain("\u2190 Back");
-    expect(escapeFrame).toContain("Rule 2");
+    expect(escapeFrame).toContain("search markets");
+    expect(escapeFrame).not.toContain("Rule 2");
     expect(
       harnessStateRef.current?.paneState[TEST_PANE_ID]?.pluginState?.[
         "prediction-markets"
       ]?.selectedDetailMarketKey,
     ).toBe("kalshi:KXFED-27APR-T4.50");
-
-    await emitKeypress(testSetup, { name: "backspace", sequence: "\u007f" });
-    await flushFrames(testSetup);
-
-    const frame = testSetup.captureCharFrame();
-    expect(frame).toContain("search markets");
-    expect(frame).not.toContain("Rule 2");
   });
 
   test("opens full-page detail from a row double click and preserves the browse selection", async () => {

package/src/plugins/prediction-markets/test-helpers.tsx

@@ -1,5 +1,5 @@
 import { act, useMemo, useReducer, useRef } from "react";
-import type { ScrollBoxRenderable } from "#opentui/core";
+import type { ScrollBoxRenderable } from "@opentui/core";
 import { PaneFooterBar, PaneFooterProvider } from "../../components/layout/pane-footer";
 import {
   AppContext,

package/src/plugins/registry.ts

@@ -32,9 +32,8 @@ import type {
 } from "../types/plugin";
 import type { ContextMenuContext, ContextMenuItem } from "../types/context-menu";
 import type { TickerRecord } from "../types/ticker";
-import { addPaneFloating, removePane } from "./pane-manager";
 import { EventBus, type PluginEvents } from "./event-bus";
-import { createPaneInstance, resolvePaneInstance } from "../types/config";
+import { resolvePaneInstance } from "../types/config";
 import { createPluginPersistence } from "./plugin-persistence";
 import { debugLog } from "../utils/debug-log";
 import { PluginRenderProvider, type PluginRuntimeAccess } from "./plugin-runtime";
@@ -170,9 +169,18 @@ export class PluginRegistry implements PluginRuntimeAccess {
   openCommandBar = (query?: string) => {
     this.openCommandBarFn(query);
   };
+  openPaneSettings = (paneId?: string) => {
+    this.openPaneSettingsFn(paneId);
+  };
   openPluginCommandWorkflow = (commandId: string) => {
     this.openPluginCommandWorkflowFn(commandId);
   };
+  showPane = (paneId: string) => {
+    this.showPaneFn(paneId);
+  };
+  hidePane = (paneId: string) => {
+    this.hidePaneFn(paneId);
+  };
 
   getLayoutFn: (() => LayoutConfig) = () => ({ dockRoot: null, instances: [], floating: [], detached: [] });
   updateLayoutFn: ((layout: LayoutConfig) => void) = () => {};
@@ -528,41 +536,6 @@ export class PluginRegistry implements PluginRuntimeAccess {
     }
   }
 
-  showWidget(paneId: string): void {
-    try {
-      const disabledPlugins = new Set(this.getConfigFn().disabledPlugins);
-      for (const [pluginId, items] of this.pluginItems) {
-        if (items.panes.includes(paneId) && disabledPlugins.has(pluginId)) {
-          return;
-        }
-      }
-    } catch {
-      return;
-    }
-
-    const layout = this.getLayoutFn();
-    const existingInstanceId = this.resolvePaneTarget(paneId);
-    if (existingInstanceId && layout.floating.some((entry) => entry.instanceId === existingInstanceId)) {
-      this.focusPaneFn(existingInstanceId);
-      return;
-    }
-
-    const def = this.panesMap.get(paneId);
-    const { width, height } = this.getTermSizeFn();
-    const instance = existingInstanceId
-      ? layout.instances.find((entry) => entry.instanceId === existingInstanceId)!
-      : createPaneInstance(paneId, { instanceId: `${paneId}:main` });
-    const nextLayout = addPaneFloating(layout, instance, width, height, def);
-    this.updateLayoutFn(nextLayout);
-    this.focusPaneFn(instance.instanceId);
-  }
-
-  hideWidget(paneId: string): void {
-    const target = this.resolvePaneTarget(paneId);
-    if (!target) return;
-    this.updateLayoutFn(removePane(this.getLayoutFn(), target));
-  }
-
   private createContext(pluginId: string): GloomPluginContext {
     const items = this.getOrCreatePluginItems(pluginId);
 
@@ -716,8 +689,6 @@ export class PluginRegistry implements PluginRuntimeAccess {
       },
       emit: (event, payload) => this.events.emit(event, payload),
 
-      showWidget: (widgetId) => this.showWidget(widgetId),
-      hideWidget: (widgetId) => this.hideWidget(widgetId),
       notify: (notification) => this.notifyFn(notification),
     };
   }

package/src/react/input.ts

@@ -9,14 +9,23 @@ export interface KeyEventLike {
   alt: boolean;
   meta: boolean;
   super?: boolean;
+  targetEditable?: 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 +52,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/data-table.tsx

@@ -24,6 +24,7 @@ import type {
   DataTableProps,
   DataTableSectionHeader,
 } from "../../../components/ui/data-table";
+import { getTableWidth, hasMeaningfulTableHorizontalOverflow } from "../../../components/ui/table-layout";
 import { WEB_CELL_HEIGHT, WEB_CELL_WIDTH } from "./input-host";
 import { useScrollbarActivity } from "./scrollbar-activity";
 
@@ -489,7 +490,9 @@ export function WebDataTable<T, C extends DataTableColumn = DataTableColumn>({
   const headerVertical = useScrollbarState(false);
   const bodyHorizontal = useScrollbarState(showHorizontalScrollbar);
   const bodyVertical = useScrollbarState(true);
+  const [viewportWidth, setViewportWidth] = useState(0);
   const [scrollbarActive, markScrollbarActive] = useScrollbarActivity();
+  const tableWidth = useMemo(() => getTableWidth(columns), [columns]);
   const gridTemplateColumns = useMemo(
     () => buildGridTemplateColumns(columns),
     [columns],
@@ -538,6 +541,25 @@ export function WebDataTable<T, C extends DataTableColumn = DataTableColumn>({
   const totalHeight = virtualize
     ? rowVirtualizer.getTotalSize()
     : WEB_CELL_HEIGHT + items.length * WEB_CELL_HEIGHT;
+  const horizontalScrollEnabled = showHorizontalScrollbar
+    && hasMeaningfulTableHorizontalOverflow(tableWidth, viewportWidth);
+  const scrollContentWidth = horizontalScrollEnabled
+    ? Math.max(1, tableWidth * WEB_CELL_WIDTH)
+    : "100%";
+  const measureViewportWidth = useCallback(() => {
+    const element = bodyElementRef.current;
+    const nextValue = element ? toCellX(element.clientWidth) : 0;
+    setViewportWidth((current) => current === nextValue ? current : nextValue);
+  }, []);
+
+  useEffect(() => {
+    measureViewportWidth();
+    const element = bodyElementRef.current;
+    if (!element || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measureViewportWidth);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [measureViewportWidth]);
 
   useEffect(() => {
     if (scrollToIndex == null || items.length === 0) return;
@@ -589,11 +611,11 @@ export function WebDataTable<T, C extends DataTableColumn = DataTableColumn>({
 
   useEffect(() => {
     headerHorizontal.bar.visible = false;
-    bodyHorizontal.bar.visible = showHorizontalScrollbar;
-    if (!showHorizontalScrollbar) {
+    bodyHorizontal.bar.visible = horizontalScrollEnabled;
+    if (!horizontalScrollEnabled) {
       if (bodyElementRef.current) bodyElementRef.current.scrollLeft = 0;
     }
-  }, [bodyHorizontal.bar, headerHorizontal.bar, showHorizontalScrollbar]);
+  }, [bodyHorizontal.bar, headerHorizontal.bar, horizontalScrollEnabled]);
 
   const rootStyle: CSSProperties = {
     display: "flex",
@@ -610,7 +632,7 @@ export function WebDataTable<T, C extends DataTableColumn = DataTableColumn>({
     flex: "1 1 0px",
     minWidth: 0,
     minHeight: 0,
-    overflowX: showHorizontalScrollbar ? "auto" : "hidden",
+    overflowX: horizontalScrollEnabled ? "auto" : "hidden",
     overflowY: "auto",
     backgroundColor: colors.bg,
   };
@@ -621,7 +643,7 @@ export function WebDataTable<T, C extends DataTableColumn = DataTableColumn>({
         ref={bodyElementRef}
         data-gloom-role="data-table-body-scroll"
         data-gloom-scrollbar-x={
-          showHorizontalScrollbar && bodyHorizontal.visible
+          horizontalScrollEnabled && bodyHorizontal.visible
             ? "visible"
             : "hidden"
         }
@@ -646,7 +668,7 @@ export function WebDataTable<T, C extends DataTableColumn = DataTableColumn>({
           data-gloom-role="data-table-scroll-content"
           style={{
             position: "relative",
-            width: "100%",
+            width: scrollContentWidth,
             height: items.length > 0 ? totalHeight : "100%",
             minHeight: WEB_CELL_HEIGHT,
           }}

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

@@ -14,13 +14,27 @@ import type { PageStackViewProps } from "../../../components/ui/page-stack-view"
 import type { SegmentedControlProps } from "../../../components/ui/toggle";
 
 const CONTROL_RADIUS = 6;
-const PANEL_BORDER = blendHex(colors.border, colors.borderFocused, 0.18);
-const PANEL_FILL = blendHex(colors.panel, colors.bg, 0.22);
+
+function panelBorder(): string {
+  return blendHex(colors.border, colors.borderFocused, 0.18);
+}
+
+function panelFill(): string {
+  return blendHex(colors.panel, colors.bg, 0.22);
+}
+
+function subtlePanelFill(): string {
+  return blendHex(colors.panel, colors.bg, 0.42);
+}
+
+function selectedPanelFill(): string {
+  return blendHex(colors.selected, colors.bg, 0.42);
+}
 
 function controlBorderColor(focused = false, active = false): string {
   if (active) return colors.borderFocused;
   if (focused) return blendHex(colors.borderFocused, colors.textBright, 0.24);
-  return PANEL_BORDER;
+  return panelBorder();
 }
 
 function controlShadow(active = false): string {
@@ -33,8 +47,8 @@ function buttonPalette(props: Pick<ButtonProps, "variant" | "active" | "disabled
   if (props.disabled) {
     return {
       fg: colors.textMuted,
-      bg: "rgba(63, 72, 82, 0.35)",
-      border: PANEL_BORDER,
+      bg: subtlePanelFill(),
+      border: panelBorder(),
     };
   }
   if (props.active) {
@@ -62,14 +76,14 @@ function buttonPalette(props: Pick<ButtonProps, "variant" | "active" | "disabled
       return {
         fg: colors.textDim,
         bg: "rgba(0, 0, 0, 0)",
-        border: PANEL_BORDER,
+        border: panelBorder(),
       };
     case "secondary":
     default:
       return {
         fg: colors.text,
-        bg: PANEL_FILL,
-        border: PANEL_BORDER,
+        bg: panelFill(),
+        border: panelBorder(),
       };
   }
 }
@@ -248,7 +262,7 @@ export function WebMessageComposer({
       flexDirection="row"
       width={width}
       height={height}
-      backgroundColor={PANEL_FILL}
+      backgroundColor={panelFill()}
       onMouseDown={requestFocus}
       data-gloom-role="desktop-message-composer"
       style={{
@@ -350,7 +364,7 @@ export function WebListView({
   const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
   const scrollRef = useRef<ScrollBoxRenderable>(null);
   const baseBg = bgColor ?? colors.bg;
-  const activeBg = selectedBgColor ?? "rgba(84, 201, 159, 0.12)";
+  const activeBg = selectedBgColor ?? selectedPanelFill();
   const rowHoverBg = hoverBgColor ?? hoverBg();
   const selectedItem = selectedIndex >= 0 ? items[selectedIndex] : undefined;
   const activeScrollIndex = scrollIndex ?? selectedIndex;
@@ -435,10 +449,10 @@ export function WebListView({
               backgroundColor: "transparent",
             }
             : {
-              border: `1px solid ${PANEL_BORDER}`,
+              border: `1px solid ${panelBorder()}`,
               borderRadius: CONTROL_RADIUS,
               padding: 4,
-              backgroundColor: "rgba(9, 12, 15, 0.22)",
+              backgroundColor: subtlePanelFill(),
             }}
         >
           <Box flexDirection="column" gap={rowGap}>
@@ -454,9 +468,9 @@ export function WebListView({
       {showSelectedDescription && selectedItem?.description && (
         <Box
           flexDirection="row"
-          backgroundColor="rgba(9, 12, 15, 0.22)"
+          backgroundColor={subtlePanelFill()}
           style={{
-            border: `1px solid ${PANEL_BORDER}`,
+            border: `1px solid ${panelBorder()}`,
             borderRadius: CONTROL_RADIUS,
             paddingInline: 10,
           }}
@@ -478,9 +492,9 @@ export function WebSegmentedControl({
   return (
     <Box
       flexDirection="row"
-      backgroundColor="rgba(8, 11, 14, 0.32)"
+      backgroundColor={panelFill()}
       style={{
-        border: `1px solid ${PANEL_BORDER}`,
+        border: `1px solid ${panelBorder()}`,
         borderRadius: CONTROL_RADIUS,
         padding: 2,
       }}
@@ -531,7 +545,7 @@ export function WebDialogFrame({
         flexDirection="row"
         alignItems="center"
         style={{
-          borderBottom: showTitleDivider ? `1px solid ${PANEL_BORDER}` : "none",
+          borderBottom: showTitleDivider ? `1px solid ${panelBorder()}` : "none",
           paddingBottom: showTitleDivider ? 8 : 0,
           marginBottom: showTitleDivider ? 10 : 14,
         }}
@@ -545,7 +559,7 @@ export function WebDialogFrame({
         <Box
           height={1}
           style={{
-            borderTop: `1px solid ${PANEL_BORDER}`,
+            borderTop: `1px solid ${panelBorder()}`,
             paddingTop: 8,
             marginTop: 10,
           }}
@@ -600,7 +614,7 @@ export function WebPageStackView({
           height={1}
           flexDirection="row"
           alignItems="center"
-          backgroundColor={PANEL_FILL}
+          backgroundColor={panelFill()}
           onMouseDown={(event) => {
             event.preventDefault?.();
             event.stopPropagation?.();
@@ -608,7 +622,7 @@ export function WebPageStackView({
           }}
           data-gloom-interactive="true"
           style={{
-            border: `1px solid ${PANEL_BORDER}`,
+            border: `1px solid ${panelBorder()}`,
             borderRadius: CONTROL_RADIUS,
             paddingInline: 8,
             cursor: "pointer",

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

@@ -2,6 +2,7 @@
 /** @jsxImportSource react */
 import { useCallback, useMemo, useState, type ReactNode } from "react";
 import { DialogHostProvider, type DialogApi } from "../../../ui/dialog";
+import { blendHex, colors } from "../../../theme/colors";
 
 interface DialogState {
   id: string;
@@ -13,6 +14,8 @@ let nextDialogId = 1;
 
 export function WebDialogHostProvider({ children }: { children: ReactNode }) {
   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);
 
   const close = useCallback((value?: unknown) => {
     setDialogState((current) => {
@@ -46,7 +49,14 @@ export function WebDialogHostProvider({ children }: { children: ReactNode }) {
             if (event.target === event.currentTarget) close(undefined);
           }}
         >
-          <div className="gloom-dialog">
+          <div
+            className="gloom-dialog"
+            style={{
+              borderColor: dialogBorder,
+              background: dialogBg,
+              color: colors.text,
+            }}
+          >
             {typeof dialogState.content === "function"
               ? dialogState.content({
                 dialogId: dialogState.id,

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

@@ -1,14 +1,25 @@
 /// <reference lib="dom" />
 /** @jsxImportSource react */
-import { useEffect, useMemo, useSyncExternalStore, type ReactNode } from "react";
-import { InputHostProvider, type InputHost, type KeyEventLike } from "../../../react/input";
-import { hasWebCtrlModifier, normalizeWebKeyName, shouldConsumeWebAppKeyDown, webKeySequence } from "./key-event";
+import { useEffect, useLayoutEffect, useMemo, useRef, useSyncExternalStore, type ReactNode } from "react";
+import { InputHostProvider, type InputHost, type KeyEventLike, type ShortcutOptions } from "../../../react/input";
+import {
+  isMouseBackNavigationButton,
+  MOUSE_BACK_NAVIGATION_EVENT_NAME,
+} from "../../../utils/back-navigation";
+import {
+  hasWebCtrlModifier,
+  isEditableKeyboardTarget,
+  normalizeWebKeyName,
+  shouldConsumeWebAppKeyDown,
+  webKeySequence,
+} from "./key-event";
 
 export const WEB_CELL_WIDTH = 8;
 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 +29,56 @@ function toKeyEventLike(event: KeyboardEvent): KeyEventLike {
     alt: event.altKey,
     meta: event.metaKey,
     super: event.metaKey,
+    targetEditable: isEditableKeyboardTarget(event.target),
+    get defaultPrevented() {
+      return event.defaultPrevented;
+    },
+    get propagationStopped() {
+      return propagationStopped;
+    },
+    preventDefault: () => event.preventDefault(),
+    stopPropagation: () => {
+      propagationStopped = true;
+      event.stopPropagation();
+    },
+  };
+}
+
+function toMouseBackKeyEventLike(event: MouseEvent): KeyEventLike {
+  let propagationStopped = false;
+  return {
+    key: MOUSE_BACK_NAVIGATION_EVENT_NAME,
+    name: MOUSE_BACK_NAVIGATION_EVENT_NAME,
+    sequence: "",
+    ctrl: event.ctrlKey,
+    shift: event.shiftKey,
+    alt: event.altKey,
+    meta: event.metaKey,
+    super: event.metaKey,
+    targetEditable: isEditableKeyboardTarget(event.target),
+    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 +96,72 @@ function getViewport() {
 }
 
 export function WebInputHostProvider({ children }: { children: ReactNode }) {
+  const shortcutsRef = useRef<ShortcutEntry[]>([]);
+
+  const dispatchShortcut = (shortcutEvent: KeyEventLike) => {
+    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;
+    }
+  };
+
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => {
+      const shortcutEvent = toKeyEventLike(event);
+      dispatchShortcut(shortcutEvent);
+      if (shouldConsumeWebAppKeyDown(event)) event.preventDefault();
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, []);
+
+  useEffect(() => {
+    const preventBrowserBack = (event: MouseEvent) => {
+      if (!isMouseBackNavigationButton(event.button)) return;
+      event.preventDefault();
+      event.stopPropagation();
+    };
+    const onMouseUp = (event: MouseEvent) => {
+      if (!isMouseBackNavigationButton(event.button)) return;
+      event.preventDefault();
+      event.stopPropagation();
+      dispatchShortcut(toMouseBackKeyEventLike(event));
+    };
+
+    window.addEventListener("mousedown", preventBrowserBack, true);
+    window.addEventListener("auxclick", preventBrowserBack, true);
+    window.addEventListener("mouseup", onMouseUp, true);
+    return () => {
+      window.removeEventListener("mousedown", preventBrowserBack, true);
+      window.removeEventListener("auxclick", preventBrowserBack, true);
+      window.removeEventListener("mouseup", onMouseUp, true);
+    };
+  }, []);
+
   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/key-event.ts

@@ -38,7 +38,7 @@ function targetHasClosest(target: KeyboardTargetLike, selector: string): boolean
   }
 }
 
-function isEditableKeyboardTarget(target: EventTarget | null): boolean {
+export function isEditableKeyboardTarget(target: EventTarget | null): boolean {
   const element = getKeyboardTarget(target);
   if (!element) return false;