@oxy.so/bloom 4.4.0 → 4.6.0

package/src/floating/menu-keyboard.ts

@@ -0,0 +1,242 @@
+/**
+ * The keyboard half of the ARIA menu-button pattern for the anchored menus —
+ * `DropdownMenu`, `ContextMenu`, `Menubar` and their flyout sub-menus — on WEB.
+ *
+ * What shipped: the trigger opened the menu on Enter/Space (it is a real
+ * `<button>`) and focus STAYED on it. The rows are portaled to the end of
+ * `<body>`, so the arrow keys had nothing to move, Tab walked on through the
+ * page BEHIND the open menu, and a keyboard user could open a menu and choose
+ * nothing. The markup was right throughout (`role="menu"`, `menuitem`,
+ * `aria-checked`), which is why nothing flagged it.
+ *
+ * The contract now:
+ *
+ *  - Opening from the keyboard moves focus INTO the menu: Enter, Space and
+ *    ArrowDown land on the first enabled row, ArrowUp on the last. A pointer
+ *    open leaves focus where the pointer put it; an arrow on the trigger of an
+ *    already-open menu then moves it in.
+ *  - In the menu: ArrowDown/ArrowUp move between enabled rows and WRAP;
+ *    Home/End jump to the ends; Enter and Space activate the row — a checkbox
+ *    row toggles, a radio row selects, and a row's `keepOpen` still decides
+ *    whether the menu closes. react-native-web presses a `menuitem`, `checkbox`
+ *    or `radio` on Enter only (`PressResponder.isValidKeyPress` limits Space to
+ *    `role="button"`), so Space is supplied here.
+ *  - Tab closes the menu and returns focus to the trigger — a menu is not in
+ *    the page's tab sequence. Escape closes the innermost surface
+ *    (`escape-stack.ts`) and focus returns the same way.
+ *  - The sub-menu keys stay `menu-sub-flyout.tsx`'s: → on a sub trigger opens
+ *    the flyout and focuses its first row, ← inside it closes it and refocuses
+ *    the trigger row.
+ *
+ * DOM listeners rather than props, like the sub-menu's: a row is
+ * `shared.tsx`'s `MenuRowShell`, the trigger may be the caller's own element
+ * under `asChild`, and the order of rows is whatever the caller rendered —
+ * the DOM already holds all of it. Every entry point is inert without a DOM
+ * node, so native (the menu is a bottom sheet there) is untouched.
+ */
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import { isSpaceKey, rovingItems, rovingMove, rovingTarget } from '../hooks/roving-focus';
+import { MENU_MOTION_DURATION } from './constants';
+
+/** Every role a menu ROW can carry — the rows a pointer or a key can land on. */
+export const MENU_ROW_SELECTOR =
+  '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"], [role="checkbox"], [role="radio"]';
+
+/** A panel, so a nested panel's rows are never counted as this one's. */
+const MENU_PANEL_SELECTOR = '[role="menu"]';
+
+export type MenuFocusEdge = 'first' | 'last';
+
+/**
+ * Where focus should land the next time the menu's panel is ready — set by a
+ * key on the trigger, consumed by the panel. Owned by the family ROOT, which is
+ * the one component both the trigger and the content can reach.
+ */
+export interface MenuFocusIntent {
+  /** The pending edge, or `null` for "leave focus alone" (a pointer open). */
+  edge: React.MutableRefObject<MenuFocusEdge | null>;
+  /** Bumped to ask an ALREADY-open panel to take focus. */
+  tick: number;
+  request: (edge: MenuFocusEdge) => void;
+}
+
+export function useMenuFocusIntent(): MenuFocusIntent {
+  const edge = useRef<MenuFocusEdge | null>(null);
+  const [tick, setTick] = useState(0);
+  const request = useCallback((next: MenuFocusEdge) => {
+    edge.current = next;
+    setTick((count) => count + 1);
+  }, []);
+  return useMemo(() => ({ edge, tick, request }), [tick, request]);
+}
+
+/** A react-native-web host ref, read as the DOM element it is on web. */
+export function hostElement(node: unknown): HTMLElement | null {
+  if (!node || typeof node !== 'object') return null;
+  const scrollable = (node as { getScrollableNode?: () => unknown }).getScrollableNode?.();
+  const element = (scrollable ?? node) as Partial<HTMLElement>;
+  return typeof element.querySelector === 'function' &&
+    typeof element.addEventListener === 'function'
+    ? (element as HTMLElement)
+    : null;
+}
+
+/** The trigger's own focusable control inside its anchor wrapper. */
+export function triggerControl(anchor: unknown): HTMLElement | null {
+  const wrapper = hostElement(anchor);
+  return (
+    wrapper?.querySelector<HTMLElement>('[aria-haspopup]') ??
+    wrapper?.querySelector<HTMLElement>('[tabindex]') ??
+    null
+  );
+}
+
+/**
+ * Hand focus back to the trigger when a surface closes with focus inside it.
+ *
+ * `isInside` says whether an element belongs to the surface. Checked AT the
+ * close, when the panel is still mounted for its exit animation, so a row that
+ * was just activated still counts. Focus that has already gone somewhere real
+ * — a dialog the row opened, a field the pointer clicked — is left alone. The
+ * one deferred case is focus left on a node the exit is about to UNMOUNT (the
+ * outside-press backdrop): once the exit has run and focus has fallen to
+ * `<body>`, it goes back to the trigger too.
+ */
+export function useReturnFocusOnClose(
+  anchorRef: React.RefObject<unknown>,
+  open: boolean,
+  isInside: (element: Element) => boolean,
+): void {
+  const wasOpen = useRef(open);
+  const isInsideRef = useRef(isInside);
+  isInsideRef.current = isInside;
+  useEffect(() => {
+    const closed = wasOpen.current && !open;
+    wasOpen.current = open;
+    if (!closed || typeof document === 'undefined') return undefined;
+    const active = document.activeElement;
+    if (!active || active === document.body || isInsideRef.current(active)) {
+      triggerControl(anchorRef.current)?.focus({ preventScroll: true });
+      return undefined;
+    }
+    const timer = setTimeout(() => {
+      if (document.activeElement === document.body && !active.isConnected) {
+        triggerControl(anchorRef.current)?.focus({ preventScroll: true });
+      }
+    }, MENU_MOTION_DURATION + 50);
+    return () => clearTimeout(timer);
+  }, [open, anchorRef]);
+}
+
+/** Whether an element is one of the menu surfaces — any panel, any depth. */
+export function isInMenuSurface(element: Element): boolean {
+  return element.closest(MENU_PANEL_SELECTOR) !== null;
+}
+
+/**
+ * The menu trigger's keys, on its anchor wrapper: Enter/Space mark a closed
+ * menu's open as a keyboard one (the press itself is the button's own);
+ * ArrowDown/ArrowUp open it — or, open already, move focus in — landing on the
+ * first/last row. Plus the focus return on close.
+ */
+export function useMenuTriggerKeys(
+  anchorRef: React.RefObject<unknown>,
+  {
+    open,
+    setOpen,
+    disabled,
+    intent,
+  }: {
+    open: boolean;
+    setOpen: (next: boolean) => void;
+    disabled?: boolean;
+    intent: MenuFocusIntent | undefined;
+  },
+): void {
+  const edge = intent?.edge;
+  const request = intent?.request;
+  useEffect(() => {
+    const wrapper = hostElement(anchorRef.current);
+    if (!wrapper || disabled || !edge || !request) return undefined;
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.defaultPrevented) return;
+      if (event.key === 'Enter' || isSpaceKey(event.key)) {
+        if (!open) edge.current = 'first';
+        return;
+      }
+      if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return;
+      event.preventDefault();
+      if (!open) setOpen(true);
+      request(event.key === 'ArrowDown' ? 'first' : 'last');
+    };
+    wrapper.addEventListener('keydown', onKeyDown);
+    return () => wrapper.removeEventListener('keydown', onKeyDown);
+  }, [anchorRef, disabled, open, setOpen, edge, request]);
+
+  // A pointer open must not inherit a stale keyboard intent from a key that
+  // did not open anything (a disabled row, a prevented press).
+  useEffect(() => {
+    if (!open && edge) edge.current = null;
+  }, [open, edge]);
+
+  useReturnFocusOnClose(anchorRef, open, isInMenuSurface);
+}
+
+/** The enabled rows that belong to `panel`, in document order. */
+function menuRows(panel: Element): HTMLElement[] {
+  // The owner is the nearest `role="menu"` — the panel itself, or (for a sub
+  // panel, whose rows sit in an inner scroller) the panel around it.
+  const owner = panel.closest(MENU_PANEL_SELECTOR) ?? panel;
+  return rovingItems(owner, MENU_ROW_SELECTOR, { owner: MENU_PANEL_SELECTOR });
+}
+
+/**
+ * The keys inside an open menu panel: arrows (wrapping), Home/End, Space, Tab.
+ * `intent`, when given, lands focus on the first/last row as the panel opens
+ * from the keyboard (a sub-panel focuses its own first row and passes none).
+ */
+export function useMenuPanelKeys(
+  panel: HTMLElement | null,
+  { open, onTab, intent }: { open: boolean; onTab: () => void; intent?: MenuFocusIntent },
+): void {
+  const onTabRef = useRef(onTab);
+  onTabRef.current = onTab;
+
+  const edge = intent?.edge;
+  const tick = intent?.tick;
+  useEffect(() => {
+    if (!open || !panel || !edge?.current) return;
+    const rows = menuRows(panel);
+    const target = edge.current === 'last' ? rows[rows.length - 1] : rows[0];
+    edge.current = null;
+    target?.focus({ preventScroll: true });
+  }, [open, panel, edge, tick]);
+
+  useEffect(() => {
+    if (!panel || !open) return undefined;
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.defaultPrevented) return;
+      const active =
+        typeof document !== 'undefined' ? (document.activeElement as HTMLElement | null) : null;
+      const current = active?.closest?.(MENU_ROW_SELECTOR) ?? null;
+      if (event.key === 'Tab') {
+        event.preventDefault();
+        onTabRef.current();
+        return;
+      }
+      if (isSpaceKey(event.key)) {
+        if (!current || current.getAttribute('aria-disabled') === 'true') return;
+        event.preventDefault();
+        (current as HTMLElement).click();
+        return;
+      }
+      const move = rovingMove(event.key, { orientation: 'vertical', homeEnd: true });
+      if (move === null) return;
+      event.preventDefault();
+      rovingTarget(menuRows(panel), current, move, true)?.focus();
+    };
+    panel.addEventListener('keydown', onKeyDown);
+    return () => panel.removeEventListener('keydown', onKeyDown);
+  }, [panel, open]);
+}

package/src/floating/menu-sub-flyout.tsx

@@ -51,7 +51,10 @@ import {
   MENU_SUB_SIDE_OFFSET,
   ROW_ICON_SIZE,
 } from './constants';
+import { useMenuSurface } from './context';
+import { pushFloatingEscape } from './escape-stack';
 import { FloatingPanel } from './FloatingPanel';
+import { hostElement, MENU_ROW_SELECTOR, useMenuPanelKeys } from './menu-keyboard';
 import { cx, MenuRowChevron, MenuRowShell, splitChildren, SUB_TRIGGER_CLASS } from './shared';
 import type {
   FloatingAnchor,
@@ -119,8 +122,7 @@ function isHoverPointer(event: Event): boolean {
 }
 
 /** Every role a menu ROW can carry — the rows a pointer can actually land on. */
-const MENU_ITEM_SELECTOR =
-  '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"], [role="checkbox"], [role="radio"]';
+const MENU_ITEM_SELECTOR = MENU_ROW_SELECTOR;
 
 /**
  * Did the pointer leave for another ROW, rather than for the gap this sub's
@@ -546,22 +548,25 @@ export function createFlyoutMenuSub(prefix: string): MenuSubParts {
       };
     }, [node, sub]);
 
-    // Escape, in the CAPTURE phase with `stopImmediatePropagation`. Every open
-    // `FloatingPanel` has a bubble-phase `keydown` listener on `document`, and
-    // `stopPropagation` does not stop a sibling listener on the same node — so
-    // without this the sub and its parent menu would both close on one press.
-    // Capture runs before bubble whatever the registration order, which is what
-    // makes "innermost first" hold rather than "whichever mounted first".
+    // Escape closes this flyout and leaves the menu open. The flyout's panel is
+    // `dismissible={false}` (a press outside it is the parent's business), so it
+    // takes its own entry on the escape stack — pushed after the parent's, so it
+    // is the one Escape reaches first (`escape-stack.ts`). This used to be a
+    // document CAPTURE listener with `stopImmediatePropagation`, which also took
+    // Escape away from any field inside the flyout.
+    const { open: subOpen, closeAndRefocus } = sub;
+    const closeRef = useRef(closeAndRefocus);
+    closeRef.current = closeAndRefocus;
     useEffect(() => {
-      if (!sub.open || typeof document === 'undefined') return;
-      const onKeyDown = (event: KeyboardEvent) => {
-        if (event.key !== 'Escape') return;
-        event.stopImmediatePropagation();
-        sub.closeAndRefocus();
-      };
-      document.addEventListener('keydown', onKeyDown, true);
-      return () => document.removeEventListener('keydown', onKeyDown, true);
-    }, [sub]);
+      if (!subOpen || typeof document === 'undefined') return undefined;
+      return pushFloatingEscape(() => closeRef.current());
+    }, [subOpen]);
+
+    // Arrows (wrapping), Home/End, Space and Tab among the flyout's own rows —
+    // the same keys as the menu it flew out of (`menu-keyboard.ts`). Tab closes
+    // the WHOLE menu, not just this flyout: the menu is not in the tab order.
+    const surface = useMenuSurface();
+    useMenuPanelKeys(hostElement(node), { open: sub.open, onTab: surface.close });
 
     // Move focus onto the panel once it has been placed, so Right genuinely
     // ENTERS the submenu rather than only opening it.

package/src/floating/types.ts

@@ -19,6 +19,7 @@
  */
 import type { GestureResponderEvent, StyleProp, TextStyle, View, ViewStyle } from 'react-native';
 
+import type { MenuFocusIntent } from './menu-keyboard';
 import type { WebAriaProps } from '../styles/styled-primitives';
 
 /**
@@ -32,6 +33,11 @@ export interface OverlayShellContextValue {
   setOpen: (next: boolean) => void;
   /** The trigger wrapper. Measured by the web forks, unused on native. */
   anchorRef: React.RefObject<View | null>;
+  /**
+   * Web menus only: where a keyboard open lands focus, handed from the trigger
+   * to the panel (`menu-keyboard.ts`). Absent on native and on `Popover`.
+   */
+  focusIntent?: MenuFocusIntent;
 }
 
 /**
@@ -129,6 +135,11 @@ export interface FloatingPanelProps extends FloatingPositionProps {
    * panel inline (`popover/surface.ts`) and passes it as `style`.
    */
   surface?: 'popover' | 'menu' | 'listbox';
+  /**
+   * Receives the panel's own node as it mounts and unmounts — for a family that
+   * attaches keyboard handling to the rows inside it (`menu-keyboard.ts`).
+   */
+  panelRef?: (node: View | null) => void;
 }
 
 /**

package/src/fonts/index.web.ts

@@ -1,23 +1,8 @@
-// Web variant of the `./fonts` barrel.
-//
-// Every re-export below that has a platform fork names its `.web` source
-// OUTRIGHT rather than letting the bundler pick. That is deliberate: web
-// bundlers are not required to resolve `.web` extensions (Vite does not, out
-// of the box), so an extensionless specifier here would quietly fall through
-// to the default file.
-//
-// - `./apply-font-faces.web` performs the real `@font-face` injection against
-//   the `.woff2` URLs the consuming bundler emits (see `font-urls.web.ts`);
-//   the default `./apply-font-faces` is a no-op stub for native.
-// - `./font-assets.web` is an empty map. The native map is built from Metro
-//   asset `require()` calls, and importing it from an ES module throws
-//   `ReferenceError: require is not defined` during module evaluation — which
-//   white-screens the consumer before React mounts. Naming the `.web` file
-//   here is what keeps it out of the web graph.
-//
-// Web bundlers select this file via the `"browser"` condition in
-// `package.json`'s `exports['./fonts']`; native bundlers fall through to
-// `./index.ts` via the `"react-native"` condition.
+// AUTO-GENERATED by scripts/generate-platform-exports.mjs — DO NOT EDIT.
+// Source of truth: src/fonts/index.ts.
+// Re-run `bun run generate:exports` (or any `bun run build`) after
+// changing that barrel or the set of web-forked subpaths.
+
 export { fontFamilies, fontCssVars } from './tokens';
 export type { FontFamilyName } from './tokens';
 export { applyFontFaces } from './apply-font-faces.web';

package/src/frosted-icon-button/FrostedIconButton.web.tsx

@@ -1,3 +1,12 @@
+/**
+ * `FrostedIconButton` — WEB: a real HTML `<button>` frosted by a real CSS
+ * `backdrop-filter`.
+ *
+ * The native fork frosts via `expo-blur`'s `BlurView`. Forking the file rather
+ * than branching inside one is what keeps that import out of the web graph
+ * entirely — `expo-blur` is an optional peer, and a web bundler that resolves
+ * it at all is a build a consumer did not ask for.
+ */
 import { useBloomAppearance } from '../appearance';
 import { resolveBloomColors } from '../appearance/colors';
 import React, {

package/src/frosted-icon-button/index.web.ts

@@ -1,9 +1,7 @@
-// Web variant of the `./frosted-icon-button` barrel.
-//
-// The default barrel (`./index.ts`) re-exports the React Native implementation,
-// which frosts via `expo-blur`'s `BlurView`. The web fork (`./FrostedIconButton.web`)
-// renders a real HTML `<button>` and frosts via a real CSS `backdrop-filter` —
-// no `expo-blur` import ever reaches a web bundler. Web bundlers select this
-// file via the `"browser"` export condition in `package.json`.
+// AUTO-GENERATED by scripts/generate-platform-exports.mjs — DO NOT EDIT.
+// Source of truth: src/frosted-icon-button/index.ts.
+// Re-run `bun run generate:exports` (or any `bun run build`) after
+// changing that barrel or the set of web-forked subpaths.
+
 export { FrostedIconButton } from './FrostedIconButton.web';
 export type { FrostedIconButtonProps, FrostedIconButtonSize } from './types';

package/src/hooks/roving-focus.ts

@@ -0,0 +1,204 @@
+/**
+ * The keyboard half of the WAI-ARIA composite widgets — tabs, radio groups and
+ * listboxes — on WEB, where react-native-web supplies none of it.
+ *
+ * Three gaps, all measured in a browser against `Tabs`, `SegmentedControl` and
+ * `Select`, and all silent: the markup carries the right `role` and state, so
+ * nothing in a DOM snapshot says the widget cannot be operated.
+ *
+ *  - EVERY option was its own tab stop. react-native-web gives each `Pressable`
+ *    `tabIndex=0`, so a five-tab strip cost five Tab presses to walk past.
+ *  - ARROW KEYS did nothing. A composite widget is ONE tab stop whose options
+ *    are reached with the arrows; without them the only route is Tab.
+ *  - SPACE did nothing on a `tab`, `radio` or `option`. react-native-web's
+ *    press responder (`PressResponder.isValidKeyPress`) activates on Space only
+ *    for `role="button"` or a real `<button>`; any other role answers Enter
+ *    alone.
+ *
+ * WHY THE DOM, NOT PROPS. The group has to know which of its options is
+ * selected, which are disabled, and in which ORDER they sit on screen — and it
+ * receives its options as `children` it did not create. The DOM already holds
+ * all three (`aria-selected` / `aria-checked`, `aria-disabled`, document order),
+ * so this module reads them there instead of growing a second registry that
+ * could disagree with what is rendered. Every function is a no-op without a
+ * DOM, and every caller gates on `Platform.OS === 'web'`, so native is
+ * untouched.
+ *
+ * Activation goes through `element.click()`: that is the press the option's own
+ * `onPress` already hears (react-native-web routes `click` to `onPress`), so a
+ * key and a pointer select through exactly one code path.
+ */
+import { useLayoutEffect } from 'react';
+import { Platform } from 'react-native';
+
+const IS_WEB = Platform.OS === 'web';
+
+/** Which arrow pair moves between the options. */
+export type RovingOrientation = 'horizontal' | 'vertical' | 'both';
+
+/** Where a key asks focus to go. */
+export type RovingMove = 'next' | 'prev' | 'first' | 'last';
+
+export interface RovingKeyOptions {
+  orientation: RovingOrientation;
+  /** Home/End jump to the ends (tabs and listboxes; a radio group has none). */
+  homeEnd?: boolean;
+}
+
+/** The move a key asks for, or `null` for a key this widget does not own. */
+export function rovingMove(key: string, { orientation, homeEnd = true }: RovingKeyOptions): RovingMove | null {
+  const horizontal = orientation !== 'vertical';
+  const vertical = orientation !== 'horizontal';
+  switch (key) {
+    case 'ArrowRight':
+      return horizontal ? 'next' : null;
+    case 'ArrowLeft':
+      return horizontal ? 'prev' : null;
+    case 'ArrowDown':
+      return vertical ? 'next' : null;
+    case 'ArrowUp':
+      return vertical ? 'prev' : null;
+    case 'Home':
+      return homeEnd ? 'first' : null;
+    case 'End':
+      return homeEnd ? 'last' : null;
+    default:
+      return null;
+  }
+}
+
+export function isSpaceKey(key: string): boolean {
+  return key === ' ' || key === 'Spacebar';
+}
+
+function isDisabled(element: HTMLElement): boolean {
+  return (
+    element.getAttribute('aria-disabled') === 'true' ||
+    (element as HTMLElement & { disabled?: boolean }).disabled === true
+  );
+}
+
+/**
+ * The options that belong to `container`, in document order.
+ *
+ * `owner`, when given, is the selector of the group itself: an option whose
+ * nearest such ancestor is NOT `container` belongs to a nested group and is
+ * skipped, so a radio group inside a tab panel inside a tab strip never
+ * mistakes the inner options for its own.
+ */
+export function rovingItems(
+  container: Element | null,
+  selector: string,
+  { owner, includeDisabled = false }: { owner?: string; includeDisabled?: boolean } = {},
+): HTMLElement[] {
+  if (!container) return [];
+  return Array.from(container.querySelectorAll<HTMLElement>(selector)).filter(
+    (element) =>
+      (includeDisabled || !isDisabled(element)) &&
+      (owner === undefined || element.parentElement?.closest(owner) === container),
+  );
+}
+
+/**
+ * The option a move lands on. `wrap` carries the last option round to the first
+ * (tabs, radio groups); a listbox stops at its ends.
+ */
+export function rovingTarget(
+  items: readonly HTMLElement[],
+  current: Element | null,
+  move: RovingMove,
+  wrap: boolean,
+): HTMLElement | null {
+  const count = items.length;
+  if (count === 0) return null;
+  if (move === 'first') return items[0] ?? null;
+  if (move === 'last') return items[count - 1] ?? null;
+  const index = current ? items.indexOf(current as HTMLElement) : -1;
+  if (index < 0) return (move === 'next' ? items[0] : items[count - 1]) ?? null;
+  const step = move === 'next' ? 1 : -1;
+  const next = index + step;
+  if (next >= 0 && next < count) return items[next] ?? null;
+  return wrap ? (items[(next + count) % count] ?? null) : (items[index] ?? null);
+}
+
+/**
+ * Exactly ONE tab stop: the selected option, or — when nothing is selected, or
+ * the selected option is disabled — the first enabled one, so the group stays
+ * reachable. Every other option takes `tabIndex=-1`: still focusable by the
+ * arrows, skipped by Tab.
+ */
+export function applyRovingTabIndex(
+  container: Element | null,
+  selector: string,
+  isSelected: (element: HTMLElement) => boolean,
+  owner?: string,
+): void {
+  const all = rovingItems(container, selector, { owner, includeDisabled: true });
+  const enabled = all.filter((element) => !isDisabled(element));
+  const stop = enabled.find(isSelected) ?? enabled[0];
+  for (const element of all) {
+    const wanted = element === stop ? 0 : -1;
+    if (element.tabIndex !== wanted) element.tabIndex = wanted;
+  }
+}
+
+/**
+ * Keep the group's roving tab stop in step with its selection.
+ *
+ * Runs after EVERY render of the group, without deps, because the group
+ * re-renders whenever an option's selection or `disabled` changes (both arrive
+ * through the group's own props or its children), and a layout effect runs
+ * after the children have committed the attributes it reads. It writes the DOM
+ * only where a value differs, so an idle re-render costs one query.
+ */
+export function useRovingTabIndex(
+  getContainer: () => Element | null,
+  selector: string,
+  isSelected: (element: HTMLElement) => boolean,
+  owner?: string,
+): void {
+  useLayoutEffect(() => {
+    if (!IS_WEB) return;
+    applyRovingTabIndex(getContainer(), selector, isSelected, owner);
+  });
+}
+
+/**
+ * The shared keydown for a tab strip or radio group option. Returns whether it
+ * handled the key (and so prevented its default).
+ *
+ * - Arrows (per `orientation`), and Home/End where `homeEnd`, move focus with
+ *   wrap-around. With `activate: 'follow'` (automatic activation) the option
+ *   focused is also selected; with `'manual'` only focus moves and Enter or
+ *   Space selects.
+ * - Space selects the focused option — the key react-native-web drops.
+ */
+export function handleRovingKeyDown(
+  event: { key: string; currentTarget: unknown; preventDefault: () => void },
+  {
+    selector,
+    owner,
+    orientation,
+    homeEnd,
+    activate,
+  }: RovingKeyOptions & { selector: string; owner: string; activate: 'follow' | 'manual' },
+): boolean {
+  const current = event.currentTarget as HTMLElement | null;
+  if (!current || typeof current.closest !== 'function') return false;
+  if (isSpaceKey(event.key)) {
+    if (isDisabled(current)) return false;
+    // Space scrolls the page by default; the option answers it instead.
+    event.preventDefault();
+    current.click();
+    return true;
+  }
+  const move = rovingMove(event.key, { orientation, homeEnd });
+  if (move === null) return false;
+  const container = current.closest(owner);
+  const target = rovingTarget(rovingItems(container, selector, { owner }), current, move, true);
+  if (!target) return false;
+  event.preventDefault();
+  target.focus();
+  if (activate === 'follow' && target !== current) target.click();
+  return true;
+}

package/src/hover-card/index.web.ts

@@ -1,3 +1,8 @@
+// AUTO-GENERATED by scripts/generate-platform-exports.mjs — DO NOT EDIT.
+// Source of truth: src/hover-card/index.ts.
+// Re-run `bun run generate:exports` (or any `bun run build`) after
+// changing that barrel or the set of web-forked subpaths.
+
 export { HoverCard, HoverCardTrigger, HoverCardContent } from './HoverCard.web';
 export {
   HOVER_CARD_CLOSE_DELAY,

package/src/icons/remix/RiBookReadLine.tsx

@@ -0,0 +1,6 @@
+import { createSinglePathSVG } from '../TEMPLATE';
+
+/** Remix Icon `book-read-line` (Document). */
+export const RiBookReadLine = createSinglePathSVG({
+  path: 'M2 3.9934C2 3.44476 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44495 22 3.9934V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918C2.44405 21 2 20.5551 2 20.0066V3.9934ZM11 5H4V19H11V5ZM13 5V19H20V5H13ZM14 7H19V9H14V7ZM14 10H19V12H14V10Z',
+});

package/src/icons/remix/RiBugLine.tsx

@@ -0,0 +1,6 @@
+import { createSinglePathSVG } from '../TEMPLATE';
+
+/** Remix Icon `bug-line` (Development). */
+export const RiBugLine = createSinglePathSVG({
+  path: 'M13 19.9C15.2822 19.4367 17 17.419 17 15V12C17 11.299 16.8564 10.6219 16.5846 10H7.41538C7.14358 10.6219 7 11.299 7 12V15C7 17.419 8.71776 19.4367 11 19.9V14H13V19.9ZM5.5358 17.6907C5.19061 16.8623 5 15.9534 5 15H2V13H5V12C5 11.3573 5.08661 10.7348 5.2488 10.1436L3.0359 8.86602L4.0359 7.13397L6.05636 8.30049C6.11995 8.19854 6.18609 8.09835 6.25469 8H17.7453C17.8139 8.09835 17.88 8.19854 17.9436 8.30049L19.9641 7.13397L20.9641 8.86602L18.7512 10.1436C18.9134 10.7348 19 11.3573 19 12V13H22V15H19C19 15.9534 18.8094 16.8623 18.4642 17.6907L20.9641 19.134L19.9641 20.866L17.4383 19.4077C16.1549 20.9893 14.1955 22 12 22C9.80453 22 7.84512 20.9893 6.56171 19.4077L4.0359 20.866L3.0359 19.134L5.5358 17.6907ZM8 6C8 3.79086 9.79086 2 12 2C14.2091 2 16 3.79086 16 6H8Z',
+});

package/src/icons/remix/RiChat1Line.tsx

@@ -0,0 +1,6 @@
+import { createSinglePathSVG } from '../TEMPLATE';
+
+/** Remix Icon `chat-1-line` (Communication). */
+export const RiChat1Line = createSinglePathSVG({
+  path: 'M10 3H14C18.4183 3 22 6.58172 22 11C22 15.4183 18.4183 19 14 19V22.5C9 20.5 2 17.5 2 11C2 6.58172 5.58172 3 10 3ZM12 17H14C17.3137 17 20 14.3137 20 11C20 7.68629 17.3137 5 14 5H10C6.68629 5 4 7.68629 4 11C4 14.61 6.46208 16.9656 12 19.4798V17Z',
+});

package/src/icons/remix/RiCloudLine.tsx

@@ -0,0 +1,6 @@
+import { createSinglePathSVG } from '../TEMPLATE';
+
+/** Remix Icon `cloud-line` (Business). */
+export const RiCloudLine = createSinglePathSVG({
+  path: 'M12 2C15.866 2 19 5.13401 19 9C19 9.11351 18.9973 9.22639 18.992 9.33857C21.3265 10.16 23 12.3846 23 15C23 18.3137 20.3137 21 17 21H7C3.68629 21 1 18.3137 1 15C1 12.3846 2.67346 10.16 5.00804 9.33857C5.0027 9.22639 5 9.11351 5 9C5 5.13401 8.13401 2 12 2ZM12 4C9.23858 4 7 6.23858 7 9C7 9.08147 7.00193 9.16263 7.00578 9.24344L7.07662 10.7309L5.67183 11.2252C4.0844 11.7837 3 13.2889 3 15C3 17.2091 4.79086 19 7 19H17C19.2091 19 21 17.2091 21 15C21 12.79 19.21 11 17 11C15.233 11 13.7337 12.1457 13.2042 13.7347L11.3064 13.1021C12.1005 10.7185 14.35 9 17 9C17 6.23858 14.7614 4 12 4Z',
+});

package/src/icons/remix/RiCodeLine.tsx

@@ -0,0 +1,6 @@
+import { createSinglePathSVG } from '../TEMPLATE';
+
+/** Remix Icon `code-line` (Development). */
+export const RiCodeLine = createSinglePathSVG({
+  path: 'M23 12L15.9289 19.0711L14.5147 17.6569L20.1716 12L14.5147 6.34317L15.9289 4.92896L23 12ZM3.82843 12L9.48528 17.6569L8.07107 19.0711L1 12L8.07107 4.92896L9.48528 6.34317L3.82843 12Z',
+});

package/src/icons/remix/RiCpuLine.tsx

@@ -0,0 +1,6 @@
+import { createSinglePathSVG } from '../TEMPLATE';
+
+/** Remix Icon `cpu-line` (Device). */
+export const RiCpuLine = createSinglePathSVG({
+  path: 'M6 18H18V6H6V18ZM14 20H10V22H8V20H5C4.44772 20 4 19.5523 4 19V16H2V14H4V10H2V8H4V5C4 4.44772 4.44772 4 5 4H8V2H10V4H14V2H16V4H19C19.5523 4 20 4.44772 20 5V8H22V10H20V14H22V16H20V19C20 19.5523 19.5523 20 19 20H16V22H14V20ZM8 8H16V16H8V8Z',
+});