@omercnet/paseo-shared-browser 1.2.1 → 1.2.2-next.237.1

package/client/browser-resolution-picker.tsx

@@ -0,0 +1,189 @@
+/** Grouped resolution choices with independent host favorites and capture quality. */
+import type { PluginHostProps } from "@getpaseo/plugin/client";
+import { Icon } from "@getpaseo/plugin/client/react-native";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import type { BrowserDisplayPreferences } from "../shared/browser-display-preferences";
+import type { DevicePresetId } from "../shared/device-presets";
+import type { ResolutionGroup } from "../shared/resolution-menu";
+import type { CaptureDensityMode } from "./browser-auto-capture-density";
+import { BrowserQualityControls } from "./browser-quality-controls";
+import { FavoriteStar } from "./favorite-star";
+
+export interface BrowserResolutionPickerProps {
+  theme: PluginHostProps["theme"];
+  groups: readonly ResolutionGroup[];
+  selectedPresetId: DevicePresetId | null;
+  fillViewportResolution: { width: number; height: number } | null;
+  fillViewportSelected: boolean;
+  fillViewportDetail: string;
+  onFillViewport(): void;
+  favoritePresetIds: readonly DevicePresetId[];
+  selectDisabled: boolean;
+  favoriteDisabled: boolean;
+  density: number;
+  densityMode: CaptureDensityMode;
+  viewport: { width: number; height: number } | null;
+  onDensityChange(value: CaptureDensityMode): void;
+  captureQuality: BrowserDisplayPreferences["captureQuality"];
+  videoBitrate: BrowserDisplayPreferences["videoBitrate"];
+  videoFps: BrowserDisplayPreferences["videoFps"];
+  onVideoBitrateChange(value: BrowserDisplayPreferences["videoBitrate"]): void;
+  onVideoFpsChange(value: BrowserDisplayPreferences["videoFps"]): void;
+  onSelect(id: DevicePresetId): void;
+  onToggleFavorite(id: DevicePresetId): void;
+  onQualityChange(quality: BrowserDisplayPreferences["captureQuality"]): void;
+}
+
+const STYLES = StyleSheet.create({
+  group: { gap: 8 },
+  header: { fontSize: 11, fontWeight: "600" },
+  row: { flexDirection: "row", gap: 8, alignItems: "center" },
+  choice: {
+    minHeight: 46,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderWidth: 1,
+    borderRadius: 8,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    flex: 1,
+  },
+  title: { flex: 1, fontSize: 13, fontWeight: "600" },
+  detail: { fontSize: 11 },
+  star: {
+    width: 44,
+    minHeight: 44,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: 8,
+  },
+  quality: {
+    minHeight: 44,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderWidth: 1,
+    borderRadius: 8,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+  },
+});
+/** Keeps star presses outside the resolution button; favoriting never resizes the browser. */
+export function BrowserResolutionPicker(props: BrowserResolutionPickerProps) {
+  const { theme } = props;
+  const colors = theme.colors;
+  const selectedStyle = {
+    borderColor: colors.accent,
+    backgroundColor: colors.surface2,
+  };
+  const baseStyle = {
+    borderColor: colors.border,
+    backgroundColor: colors.surface1,
+  };
+  const fillDisabled = props.selectDisabled || !props.fillViewportResolution;
+  return (
+    <View style={{ gap: 12 }}>
+      <View style={STYLES.group}>
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel={`Fill viewport, ${props.fillViewportDetail}`}
+          accessibilityState={{ disabled: fillDisabled, selected: props.fillViewportSelected }}
+          disabled={fillDisabled}
+          onPress={props.onFillViewport}
+          style={({ pressed }) => [
+            STYLES.quality,
+            baseStyle,
+            props.fillViewportSelected ? selectedStyle : null,
+            { opacity: fillDisabled ? 0.45 : pressed ? 0.72 : 1 },
+          ]}
+        >
+          <Icon name="Maximize" size={18} color={colors.foregroundMuted} />
+          <Text style={[STYLES.title, { color: colors.foreground }]}>Fill viewport</Text>
+        </Pressable>
+        <Text style={[STYLES.detail, { color: colors.foregroundMuted }]}>
+          {props.fillViewportDetail} · Follow the visible browser area while controlling
+        </Text>
+      </View>
+      {props.groups.map((group) => (
+        <View key={group.id} style={STYLES.group}>
+          <Text style={[STYLES.header, { color: colors.foregroundMuted }]}>{group.label}</Text>
+          {group.presets.map((preset) => {
+            const selected = preset.id === props.selectedPresetId;
+            const favorite = props.favoritePresetIds.includes(preset.id);
+            return (
+              <View key={preset.id} style={STYLES.row}>
+                <Pressable
+                  accessibilityRole="button"
+                  accessibilityLabel={`Emulate ${preset.label}`}
+                  accessibilityState={{
+                    selected,
+                    disabled: props.selectDisabled,
+                  }}
+                  disabled={props.selectDisabled}
+                  onPress={() => props.onSelect(preset.id)}
+                  style={({ pressed }) => [
+                    STYLES.choice,
+                    baseStyle,
+                    selected ? selectedStyle : null,
+                    {
+                      opacity: props.selectDisabled ? 0.45 : pressed ? 0.72 : 1,
+                    },
+                  ]}
+                >
+                  <Icon
+                    name={preset.isMobile ? "Smartphone" : "Monitor"}
+                    size={18}
+                    color={selected ? colors.accent : colors.foregroundMuted}
+                  />
+                  <Text style={[STYLES.title, { color: colors.foreground }]}>{preset.label}</Text>
+                  <Text style={[STYLES.detail, { color: colors.foregroundMuted }]}>
+                    {preset.viewport.width} × {preset.viewport.height}
+                  </Text>
+                </Pressable>
+                <Pressable
+                  accessibilityRole="button"
+                  accessibilityLabel={`${favorite ? "Remove" : "Add"} ${preset.label} ${favorite ? "from" : "to"} favorites`}
+                  accessibilityState={{
+                    selected: favorite,
+                    disabled: props.favoriteDisabled,
+                  }}
+                  disabled={props.favoriteDisabled}
+                  onPress={() => props.onToggleFavorite(preset.id)}
+                  style={({ pressed }) => [
+                    STYLES.star,
+                    {
+                      backgroundColor: "transparent",
+                      opacity: props.favoriteDisabled ? 0.45 : pressed ? 0.72 : 1,
+                    },
+                  ]}
+                >
+                  <FavoriteStar
+                    filled={favorite}
+                    size={20}
+                    color={favorite ? colors.accent : colors.foregroundMuted}
+                  />
+                </Pressable>
+              </View>
+            );
+          })}
+        </View>
+      ))}
+      <BrowserQualityControls
+        theme={theme}
+        density={props.density}
+        densityMode={props.densityMode}
+        viewport={props.viewport}
+        densityDisabled={props.selectDisabled}
+        onDensityChange={props.onDensityChange}
+        disabled={props.favoriteDisabled}
+        captureQuality={props.captureQuality}
+        videoBitrate={props.videoBitrate}
+        videoFps={props.videoFps}
+        onQualityChange={props.onQualityChange}
+        onVideoBitrateChange={props.onVideoBitrateChange}
+        onVideoFpsChange={props.onVideoFpsChange}
+      />
+    </View>
+  );
+}

package/client/browser-tabs.tsx

@@ -0,0 +1,117 @@
+/** Local tab selection. Each viewer picks a page without changing another viewer's attachment. */
+import type { PluginWorkspacePanelProps } from "@getpaseo/plugin/client";
+import type { ReactNode } from "react";
+import { Pressable, ScrollView, Text, View } from "react-native";
+import type { BrowserState, BrowserTab } from "../shared/browser";
+import { ChromeIconButton } from "./browser-chrome";
+import type { createStyles } from "./browser-panel-styles";
+
+/** Use the live selected-tab state when available, and the tab snapshot otherwise. */
+function controllerSummary(tab: BrowserTab, selectedState: BrowserState | null): string {
+  if (selectedState) {
+    if (selectedState.controller === "self") return "You control";
+    if (selectedState.controller === "other") {
+      return `${selectedState.controllerLabel ?? "Another viewer"} controls`;
+    }
+    return "No controller";
+  }
+  return tab.controllerLabel ? `${tab.controllerLabel} controls` : "No controller";
+}
+
+/** Show compact per-tab presence while keeping control actions on the selected tab only. */
+export function BrowserTabs({
+  styles,
+  theme,
+  tabs,
+  selectedId,
+  selectedState,
+  statusColor,
+  statusLabel,
+  controlAction,
+  canCreate,
+  canClose,
+  onSelect,
+  onCreate,
+  onClose,
+}: {
+  styles: ReturnType<typeof createStyles>;
+  theme: PluginWorkspacePanelProps["theme"];
+  tabs: BrowserTab[];
+  selectedId: string | null;
+  selectedState: BrowserState | null;
+  statusColor: string;
+  statusLabel: string;
+  controlAction: ReactNode;
+  canCreate: boolean;
+  canClose: boolean;
+  onSelect(id: string): void;
+  onCreate(): void;
+  onClose(): void;
+}) {
+  return (
+    <View style={styles.tabBar}>
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        style={styles.tabList}
+        contentContainerStyle={styles.tabListContent}
+      >
+        {tabs.length === 0 ? <Text style={styles.tabMeta}>Connecting browser…</Text> : null}
+        {tabs.map((tab) => {
+          const selected = tab.id === selectedId;
+          const currentState = selected && selectedState?.tabId === tab.id ? selectedState : null;
+          const viewerCount = currentState?.viewerCount ?? tab.viewerCount;
+          const controller = controllerSummary(tab, currentState);
+          const presence = `${viewerCount} viewer${viewerCount === 1 ? "" : "s"} · ${controller}`;
+          return (
+            <View key={tab.id} style={[styles.tabItem, selected ? styles.tabItemSelected : null]}>
+              <Pressable
+                accessibilityRole="tab"
+                accessibilityLabel={`${tab.title || tab.url || "New tab"}, ${presence}${selected ? `, ${statusLabel}` : ""}`}
+                accessibilityState={{ selected }}
+                onPress={() => onSelect(tab.id)}
+                style={styles.tabSelect}
+              >
+                <Text
+                  numberOfLines={1}
+                  style={[styles.tabLabel, selected ? styles.tabLabelSelected : null]}
+                >
+                  {tab.title || tab.url || "New tab"}
+                </Text>
+                <View style={styles.tabMetaRow}>
+                  {selected ? (
+                    <View style={[styles.statusDot, { backgroundColor: statusColor }]} />
+                  ) : null}
+                  <Text numberOfLines={1} style={styles.tabMeta}>
+                    {presence}
+                  </Text>
+                </View>
+              </Pressable>
+              {selected ? (
+                <View style={styles.tabActions}>
+                  {currentState ? controlAction : null}
+                  <ChromeIconButton
+                    styles={styles}
+                    theme={theme}
+                    label="Close selected browser tab"
+                    icon="X"
+                    disabled={!currentState || !canClose}
+                    onPress={onClose}
+                  />
+                </View>
+              ) : null}
+            </View>
+          );
+        })}
+      </ScrollView>
+      <ChromeIconButton
+        styles={styles}
+        theme={theme}
+        label="New browser tab"
+        icon="Plus"
+        disabled={!canCreate}
+        onPress={onCreate}
+      />
+    </View>
+  );
+}

package/client/browser-toolbar-menu-web.test.ts

@@ -0,0 +1,185 @@
+import { describe, expect, it, vi } from "vitest";
+
+vi.mock("react-native", () => ({ Platform: { OS: "web" } }));
+
+import { bindBrowserToolbarMenuWeb } from "./browser-toolbar-menu-web";
+
+/** Deterministic host nodes exercise focus/ownership, without a browser or shared page. */
+interface MenuEvent {
+  key?: string;
+  shiftKey?: boolean;
+  target: unknown;
+  preventDefault(): void;
+  stopPropagation(): void;
+}
+function fixture(hierarchy?: Parameters<typeof bindBrowserToolbarMenuWeb>[5]) {
+  const listeners = new Map<string, (event: MenuEvent) => void>();
+  const doc = {
+    activeElement: null as unknown,
+    addEventListener: (name: string, fn: (event: MenuEvent) => void) => listeners.set(name, fn),
+    removeEventListener: (name: string) => listeners.delete(name),
+  };
+  const item = (disabled = false) => {
+    const result = {
+      focus: vi.fn(() => {
+        doc.activeElement = result;
+        listeners.get("focusin")?.({ target: result, preventDefault() {}, stopPropagation() {} });
+      }),
+      contains: (node: unknown) => node === result,
+      getAttribute: (name: string) => (name === "aria-disabled" ? String(disabled) : null),
+    };
+    return result;
+  };
+  const items = [item(), item(true), item()];
+  const triggerButton = item();
+  const menu = {
+    ownerDocument: doc,
+    contains: (node: unknown) => items.some((item) => item === node),
+    querySelectorAll: () => items,
+  };
+  const trigger = {
+    contains: (node: unknown) => node === triggerButton,
+    querySelectorAll: () => [triggerButton],
+  };
+  const backdrop = {};
+  const overlay = { contains: (node: unknown) => node === backdrop || menu.contains(node) };
+  const close = vi.fn();
+  let restore = true;
+  const dispose = bindBrowserToolbarMenuWeb(
+    menu,
+    trigger,
+    close,
+    () => restore,
+    overlay,
+    hierarchy,
+  );
+  const event = (key: string, target = doc.activeElement) => ({
+    key,
+    target,
+    preventDefault: vi.fn(),
+    stopPropagation: vi.fn(),
+  });
+  return {
+    doc,
+    menu,
+    items,
+    triggerButton,
+    backdrop,
+    listeners,
+    close,
+    dispose,
+    event,
+    handoff: () => {
+      restore = false;
+    },
+  };
+}
+
+describe("local toolbar menu keyboard and dismissal", () => {
+  it("Tab and Shift+Tab exit through the surrounding host controls", () => {
+    for (const backwards of [false, true]) {
+      const f = fixture();
+      const before = { focus: vi.fn(), getAttribute: () => null };
+      const after = { focus: vi.fn(), getAttribute: () => null };
+      Object.assign(f.doc, {
+        querySelectorAll: () => [before, f.triggerButton, after, ...f.items],
+      });
+      f.listeners.get("keydown")!({ ...f.event("Tab"), shiftKey: backwards });
+      expect(f.close).toHaveBeenCalledOnce();
+      f.dispose();
+      expect((backwards ? before : after).focus).toHaveBeenCalledOnce();
+      expect(f.triggerButton.focus).not.toHaveBeenCalled();
+    }
+  });
+  it("focuses the first item and uses arrows/Home/End without forwarding keys", () => {
+    const f = fixture();
+    expect(f.doc.activeElement).toBe(f.items[0]);
+    for (const [key, index] of [
+      ["ArrowDown", 2],
+      ["ArrowDown", 0],
+      ["ArrowUp", 2],
+      ["Home", 0],
+      ["End", 2],
+    ] as const) {
+      const event = f.event(key);
+      f.listeners.get("keydown")!(event);
+      expect(f.doc.activeElement).toBe(f.items[index]);
+      expect(event.preventDefault).toHaveBeenCalledOnce();
+      expect(event.stopPropagation).toHaveBeenCalledOnce();
+    }
+    f.dispose();
+  });
+  it("Escape dismisses and returns focus even if the row is removed before cleanup", () => {
+    const f = fixture();
+    const event = f.event("Escape");
+    f.listeners.get("keydown")!(event);
+    expect(f.close).toHaveBeenCalledOnce();
+    f.doc.activeElement = {};
+    f.dispose();
+    expect(f.triggerButton.focus).toHaveBeenCalledOnce();
+    expect(f.listeners.size).toBe(0);
+  });
+  it("does not restore focus when an action hands it to another dialog or keyboard", () => {
+    const f = fixture();
+    f.handoff();
+    f.dispose();
+    expect(f.triggerButton.focus).not.toHaveBeenCalled();
+  });
+  it("consumes local backdrop dismissal so it cannot click through to the remote page", () => {
+    const f = fixture();
+    const event = f.event("", f.backdrop);
+    f.listeners.get("pointerdown")!(event);
+    expect(f.close).toHaveBeenCalledOnce();
+    expect(event.preventDefault).toHaveBeenCalledOnce();
+    expect(event.stopPropagation).toHaveBeenCalledOnce();
+    f.dispose();
+  });
+  it("leaves deliberate outside-host focus alone", () => {
+    const f = fixture();
+    const event = f.event("", {});
+    f.listeners.get("pointerdown")!(event);
+    expect(f.close).toHaveBeenCalledOnce();
+    expect(event.preventDefault).not.toHaveBeenCalled();
+    f.dispose();
+    expect(f.triggerButton.focus).not.toHaveBeenCalled();
+  });
+});
+
+describe("root-owned submenu Tab exit", () => {
+  it("Tab and Shift+Tab from a descendant skip the whole popup", () => {
+    for (const backwards of [false, true]) {
+      const f = fixture();
+      const childMenu = {};
+      const child = {
+        focus: vi.fn(),
+        getAttribute: () => null,
+        closest: () => childMenu,
+      };
+      const originalContains = f.menu.contains;
+      f.menu.contains = (node) => node === child || originalContains(node);
+      const before = { focus: vi.fn(), getAttribute: () => null };
+      const after = { focus: vi.fn(), getAttribute: () => null };
+      Object.assign(f.doc, {
+        querySelectorAll: () => [before, f.triggerButton, after, ...f.items, child],
+      });
+      f.doc.activeElement = child;
+      const event = { ...f.event("Tab", child), shiftKey: backwards };
+      f.listeners.get("keydown")!(event);
+      expect(f.close).toHaveBeenCalledOnce();
+      f.dispose();
+      expect((backwards ? before : after).focus).toHaveBeenCalledOnce();
+      expect(child.focus).not.toHaveBeenCalled();
+      expect(f.triggerButton.focus).not.toHaveBeenCalled();
+    }
+  });
+  it("nested binders leave Tab to the root without publishing a second close", () => {
+    const closeRoot = vi.fn();
+    const f = fixture({ nested: true, closeRoot });
+    const event = f.event("Tab");
+    f.listeners.get("keydown")!(event);
+    expect(f.close).not.toHaveBeenCalled();
+    expect(closeRoot).not.toHaveBeenCalled();
+    expect(event.preventDefault).not.toHaveBeenCalled();
+    f.dispose();
+  });
+});

package/client/browser-toolbar-menu-web.ts

@@ -0,0 +1,159 @@
+/** Web focus and dismissal for local menus; never forwards menu keys to Chromium. */
+import { Platform } from "react-native";
+
+interface FocusNode {
+  focus(): void;
+  contains(node: unknown): boolean;
+  getAttribute(name: string): string | null;
+  getClientRects?(): ArrayLike<unknown>;
+  closest?(selector: string): unknown;
+}
+interface MenuNode extends FocusNode {
+  querySelectorAll(selector: string): ArrayLike<FocusNode>;
+  ownerDocument: {
+    activeElement: unknown;
+    querySelectorAll?(selector: string): ArrayLike<FocusNode>;
+    addEventListener(type: string, listener: (event: MenuEvent) => void, capture: boolean): void;
+    removeEventListener(type: string, listener: (event: MenuEvent) => void, capture: boolean): void;
+  };
+}
+interface MenuEvent {
+  key?: string;
+  shiftKey?: boolean;
+  target: unknown;
+  preventDefault(): void;
+  stopPropagation(): void;
+}
+
+/** Restore trigger focus only if the menu still owns it and the action did not hand it away. */
+export function bindBrowserToolbarMenuWeb(
+  node: unknown,
+  trigger: unknown,
+  close: () => void,
+  restoreFocus: () => boolean,
+  overlay?: unknown,
+  hierarchy?: { openSubmenu?(): void; back?(): void; closeRoot?(): void; nested?: boolean },
+): () => void {
+  if (Platform.OS !== "web" || !node || typeof node !== "object" || !("ownerDocument" in node)) {
+    return () => {};
+  }
+  const menu = node as MenuNode;
+  const anchor = trigger as MenuNode | null;
+  const enabledItems = () =>
+    Array.from(menu.querySelectorAll('[role="menuitem"]')).filter(
+      (item) =>
+        item.getAttribute("aria-disabled") !== "true" &&
+        item.getAttribute("disabled") === null &&
+        (!item.closest || item.closest('[role="menu"]') === menu),
+    );
+  enabledItems()[0]?.focus();
+  let focusOwned = menu.contains(menu.ownerDocument.activeElement);
+  let returnTarget: FocusNode | null = null;
+  const focusin = (event: MenuEvent) => {
+    focusOwned = menu.contains(event.target);
+  };
+
+  const keydown = (event: MenuEvent) => {
+    if (!menu.contains(event.target)) return;
+    const target = event.target as FocusNode;
+    // Only the root owns Tab exit. Its host-order calculation excludes the
+    // entire popup, and its cleanup performs the one final focus restoration.
+    if (event.key === "Tab" && hierarchy?.nested) return;
+    if (event.key !== "Tab" && target.closest && target.closest('[role="menu"]') !== menu) return;
+    if (
+      event.key === "ArrowRight" &&
+      target.getAttribute("aria-expanded") !== null &&
+      hierarchy?.openSubmenu
+    ) {
+      event.preventDefault();
+      event.stopPropagation();
+      hierarchy.openSubmenu();
+      return;
+    }
+    if ((event.key === "ArrowLeft" || event.key === "Escape") && hierarchy?.back) {
+      event.preventDefault();
+      event.stopPropagation();
+      hierarchy.back();
+      return;
+    }
+    if (event.key === "Escape" || event.key === "Tab") {
+      if (event.key === "Tab") {
+        // Menu Tab leaves the popup rather than walking its command rows or
+        // trapping focus. Follow the trigger's surrounding host tab order.
+        const triggerButton = Array.from(
+          anchor?.querySelectorAll('[role="button"], [role="menuitem"]') ?? [],
+        )[0];
+        const focusable = Array.from(
+          menu.ownerDocument.querySelectorAll?.(
+            'button, [role="button"], input:not([type="hidden"]), select, textarea, a[href], [tabindex]',
+          ) ?? [],
+        ).filter(
+          (item) =>
+            !menu.contains(item) &&
+            item.getAttribute("disabled") === null &&
+            item.getAttribute("aria-disabled") !== "true" &&
+            Number(item.getAttribute("tabindex") ?? 0) >= 0 &&
+            !item.closest?.('[aria-hidden="true"], [inert]') &&
+            (!item.getClientRects || item.getClientRects().length > 0),
+        );
+        const index = triggerButton ? focusable.indexOf(triggerButton) : -1;
+        if (index >= 0)
+          returnTarget = focusable[index + (event.shiftKey ? -1 : 1)] ?? triggerButton ?? null;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      if (event.key === "Tab" && hierarchy?.closeRoot) hierarchy.closeRoot();
+      else close();
+      return;
+    }
+    if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key ?? "")) return;
+    event.preventDefault();
+    event.stopPropagation();
+    const items = enabledItems();
+    if (!items.length) return;
+    const index = items.indexOf(menu.ownerDocument.activeElement as FocusNode);
+    let next: number;
+    if (event.key === "Home") next = 0;
+    else if (event.key === "End") next = items.length - 1;
+    else if (event.key === "ArrowDown") next = (index + 1) % items.length;
+    else next = index <= 0 ? items.length - 1 : index - 1;
+    items[next]?.focus();
+  };
+  const outside = (event: MenuEvent) => {
+    if (hierarchy?.nested || menu.contains(event.target) || anchor?.contains(event.target)) return;
+    // Consume backdrop presses before re-enabling the image below it. A local
+    // dismiss must never become a newly controlled remote mouse-down.
+    if (overlay && (overlay as FocusNode).contains(event.target)) {
+      event.preventDefault();
+      event.stopPropagation();
+    } else {
+      // The user deliberately focused another host surface; leave it alone.
+      focusOwned = false;
+    }
+    close();
+  };
+  menu.ownerDocument.addEventListener("keydown", keydown, true);
+  menu.ownerDocument.addEventListener("pointerdown", outside, true);
+  menu.ownerDocument.addEventListener("focusin", focusin, true);
+  return () => {
+    menu.ownerDocument.removeEventListener("keydown", keydown, true);
+    menu.ownerDocument.removeEventListener("pointerdown", outside, true);
+    menu.ownerDocument.removeEventListener("focusin", focusin, true);
+    // Native React unmount can remove the focused row before passive cleanup.
+    // Remember ownership rather than consulting only the now-detached node.
+    if (restoreFocus() && focusOwned) {
+      (
+        returnTarget ??
+        Array.from(anchor?.querySelectorAll('[role="button"], [role="menuitem"]') ?? [])[0]
+      )?.focus();
+    }
+  };
+}
+
+/** Restore an in-menu trigger after compact Back, without touching native hosts. */
+export function focusBrowserMenuTrigger(node: unknown): void {
+  if (Platform.OS !== "web" || !node || typeof node !== "object" || !("querySelectorAll" in node))
+    return;
+  const trigger = node as MenuNode;
+  Array.from(trigger.querySelectorAll('[role="menuitem"], [role="button"]'))[0]?.focus();
+}