@oxy.so/bloom 4.22.2 → 4.24.0

package/lib/typescript/module/overlay/ModalKeyboard.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import type { View } from 'react-native';
+export interface ModalKeyboardProps {
+    /** The surface's panel: where focus goes, and what Tab stays inside. */
+    panelRef: React.RefObject<View | null>;
+    /** The surface has started its exit: focus goes back now, Escape is spent. */
+    closing?: boolean;
+    /** Whether Escape may dismiss it (a dialog's `dismissOnBackdrop`). */
+    dismissible: boolean;
+    dismiss: () => void;
+}
+/**
+ * An open modal surface's keyboard and focus, WEB. Renders nothing; it must
+ * sit INSIDE the surface's `OverlayRoot`, which is how it knows the surface's
+ * place in the overlay stack. Used by the web `Dialog` (card and side drawers)
+ * and the web `BottomSheet`.
+ *
+ *  - Focus moves INTO the panel when it opens — to whatever the content
+ *    focused itself (an `autoFocus` field), else the first tabbable, else the
+ *    panel — and goes BACK to the element that had it once the surface starts
+ *    closing (or unmounts), unless the host has already put it somewhere else.
+ *  - Tab and Shift+Tab wrap at the panel's edges.
+ *  - Escape dismisses (when `dismissible`), from anywhere — a text field of the
+ *    surface included, which react-native-web keeps every keydown from
+ *    bubbling out of (`./modal-keyboard.ts`).
+ *
+ * All three belong to the TOP-MOST surface only: a menu or a second dialog
+ * opened from this one takes them until it closes, so Escape closes one layer
+ * at a time. Inert without a DOM, so native never runs any of it.
+ */
+export declare function ModalKeyboard({ panelRef, closing, dismissible, dismiss }: ModalKeyboardProps): null;
+//# sourceMappingURL=ModalKeyboard.d.ts.map

package/lib/typescript/module/overlay/ModalKeyboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalKeyboard.d.ts","sourceRoot":"","sources":["../../../../src/overlay/ModalKeyboard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAC9D,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAMzC,MAAM,WAAW,kBAAkB;IACjC,wEAAwE;IACxE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC;IACvC,8EAA8E;IAC9E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sEAAsE;IACtE,WAAW,EAAE,OAAO,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,OAAe,EAAE,WAAW,EAAE,OAAO,EAAE,EAAE,kBAAkB,QAmDpG"}

package/lib/typescript/module/overlay/modal-keyboard.d.ts

@@ -0,0 +1,17 @@
+/** The elements inside `node` that Tab can land on, in document order. */
+export declare function tabbablesWithin(node: HTMLElement | null): HTMLElement[];
+/**
+ * Keep Tab inside `node`: from the last tabbable (or from outside) forward to
+ * the first, from the first (or from outside) backward to the last. Returns
+ * whether it moved focus.
+ */
+export declare function wrapTab(event: KeyboardEvent, node: HTMLElement | null): boolean;
+/**
+ * Dismiss on Escape — see the file comment for the three steps. `claim` runs
+ * in the capture phase and says whether this surface is the one the key is
+ * for (the top-most, nothing anchored open above it). An open anchored
+ * surface (a menu, a select's list) always keeps the key: it is the top layer
+ * whatever the caller's own bookkeeping says.
+ */
+export declare function listenForEscape(claim: () => boolean, dismiss: () => void): () => void;
+//# sourceMappingURL=modal-keyboard.d.ts.map

package/lib/typescript/module/overlay/modal-keyboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal-keyboard.d.ts","sourceRoot":"","sources":["../../../../src/overlay/modal-keyboard.ts"],"names":[],"mappings":"AAiDA,0EAA0E;AAC1E,wBAAgB,eAAe,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,GAAG,WAAW,EAAE,CASvE;AAED;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,WAAW,GAAG,IAAI,GAAG,OAAO,CAa/E;AAYD;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,OAAO,EAAE,OAAO,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI,CAkCrF"}

package/lib/typescript/module/overlay/stack.d.ts

@@ -120,5 +120,11 @@ export declare function releaseOverlayRank(rank: number): void;
 export declare function resetOverlayStack(): void;
 /** In-flow shell drawers yield interaction to any portaled surface above them. */
 export declare function hasActiveOverlays(): boolean;
+/**
+ * Whether the surface painting at `layer` is the top-most one open — the one
+ * Escape and Tab belong to. A menu opened from inside a dialog takes a higher
+ * rank than the dialog, so the dialog stands aside until it closes.
+ */
+export declare function isTopmostOverlayLayer(layer: OverlayLayer): boolean;
 export {};
 //# sourceMappingURL=stack.d.ts.map

package/lib/typescript/module/overlay/stack.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stack.d.ts","sourceRoot":"","sources":["../../../../src/overlay/stack.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AAEH;;;GAGG;AACH,eAAO,MAAM,kBAAkB,OAAO,CAAC;AAEvC;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,KAAK,CAAC;AAErC;;;;;;GAMG;AACH,eAAO,MAAM,sBAAsB,MAAM,CAAC;AAE1C;;;GAGG;AACH,eAAO,MAAM,aAAa,QAC8C,CAAC;AAEzE,0EAA0E;AAC1E,MAAM,WAAW,YAAY;IAC3B,2EAA2E;IAC3E,IAAI,EAAE,MAAM,CAAC;IACb,yBAAyB;IACzB,QAAQ,EAAE,MAAM,CAAC;IACjB,yCAAyC;IACzC,OAAO,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;GAMG;AACH,UAAU,QAAQ;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;CACnB;AAED,OAAO,CAAC,MAAM,CAAC;IAEb,IAAI,8BAA8B,EAAE,QAAQ,GAAG,SAAS,CAAC;CAC1D;AAgBD,kFAAkF;AAClF,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,YAAY,CAIvD;AAED;;GAEG;AACH,wBAAgB,kBAAkB,IAAI,MAAM,CAI3C;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAItD;AAED,+DAA+D;AAC/D,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAIrD;AAED,4CAA4C;AAC5C,wBAAgB,iBAAiB,IAAI,IAAI,CAExC;AAED,kFAAkF;AAClF,wBAAgB,iBAAiB,IAAI,OAAO,CAE3C"}
+{"version":3,"file":"stack.d.ts","sourceRoot":"","sources":["../../../../src/overlay/stack.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AAEH;;;GAGG;AACH,eAAO,MAAM,kBAAkB,OAAO,CAAC;AAEvC;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,KAAK,CAAC;AAErC;;;;;;GAMG;AACH,eAAO,MAAM,sBAAsB,MAAM,CAAC;AAE1C;;;GAGG;AACH,eAAO,MAAM,aAAa,QAC8C,CAAC;AAEzE,0EAA0E;AAC1E,MAAM,WAAW,YAAY;IAC3B,2EAA2E;IAC3E,IAAI,EAAE,MAAM,CAAC;IACb,yBAAyB;IACzB,QAAQ,EAAE,MAAM,CAAC;IACjB,yCAAyC;IACzC,OAAO,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;GAMG;AACH,UAAU,QAAQ;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;CACnB;AAED,OAAO,CAAC,MAAM,CAAC;IAEb,IAAI,8BAA8B,EAAE,QAAQ,GAAG,SAAS,CAAC;CAC1D;AAgBD,kFAAkF;AAClF,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,YAAY,CAIvD;AAED;;GAEG;AACH,wBAAgB,kBAAkB,IAAI,MAAM,CAI3C;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAItD;AAED,+DAA+D;AAC/D,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAIrD;AAED,4CAA4C;AAC5C,wBAAgB,iBAAiB,IAAI,IAAI,CAExC;AAED,kFAAkF;AAClF,wBAAgB,iBAAiB,IAAI,OAAO,CAE3C;AAED;;;;GAIG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,YAAY,GAAG,OAAO,CAMlE"}

package/lib/typescript/module/sidebar/Sidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../../../src/sidebar/Sidebar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkE,MAAM,OAAO,CAAC;AA4CvF,OAAO,KAAK,EAAkB,YAAY,EAAE,MAAM,SAAS,CAAC;AA4tB5D,eAAO,MAAM,OAAO,0CAAyB,CAAC"}
+{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../../../src/sidebar/Sidebar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkE,MAAM,OAAO,CAAC;AA4CvF,OAAO,KAAK,EAAkB,YAAY,EAAE,MAAM,SAAS,CAAC;AAiuB5D,eAAO,MAAM,OAAO,0CAAyB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxy.so/bloom",
-  "version": "4.22.2",
+  "version": "4.24.0",
   "packageManager": "bun@1.3.14",
   "description": "Bloom UI — Oxy ecosystem component library for React Native + Expo + Web",
   "main": "lib/commonjs/index.js",

package/src/ai-chat/AiChatContainer.tsx

@@ -92,10 +92,11 @@ const HIDDEN_FROM_A11Y = {
  * `floatingChrome` changes the geometry, not the parts:
  *
  *   thread    the `children` fill the whole card, under everything below
- *   header    the `header` slot + breadcrumb row, absolute at the top, no band;
- *             an edge scrim of the surface (opaque at the top, gone
- *             `SCRIM_TAIL_RATIO` below the block) fades in over the first 16px
- *             of transcript scrolled under it
+ *   header    the `header` slot + breadcrumb row, absolute at the top, no band
+ *             at rest; once the transcript scrolls under it, the surface fades
+ *             in behind it over the first 16px — solid across the whole block,
+ *             then a ramp to nothing `SCRIM_TAIL_RATIO` below it — so no turn
+ *             ever shows through the title or the crumbs
  *   footer    absolute at the bottom, with no band of its own: the transcript
  *             passes behind the composer and stays in sight around it
  *
@@ -340,6 +341,7 @@ function FloatingChrome({
   const alpha = parsed?.a ?? 1;
   const topStyle = useAnimatedStyle(() => ({ opacity: topFade.value * alpha }), [topFade, alpha]);
   const prefix = testID ?? 'ai-chat';
+  const scrimTail = Math.round(headerHeight * SCRIM_TAIL_RATIO);
 
   // Absolute over a card of fixed height; sticky in the flow of a card that
   // grows with the document, pinned to the screen's gutter.
@@ -363,9 +365,7 @@ function FloatingChrome({
               top: 0,
               left: 0,
               right: 0,
-              // Past the block's own bottom: a ramp that ends where the layout
-              // does is a line across the transcript again.
-              height: Math.round(headerHeight * (1 + SCRIM_TAIL_RATIO)),
+              height: headerHeight + scrimTail,
               // The card's own corners, since nothing clips a document card.
               ...(documentScroll
                 ? { borderTopLeftRadius: DOCUMENT_CARD_RADIUS, borderTopRightRadius: DOCUMENT_CARD_RADIUS, overflow: 'hidden' as const }
@@ -373,7 +373,17 @@ function FloatingChrome({
             },
             topStyle,
           ]}>
-          <EdgeScrim color={solid} />
+          {/* SOLID behind the header's own block. A ramp that starts fading
+              inside the block leaves the breadcrumb row over half-covered
+              turns — measured in a browser, a code block's lines read straight
+              through the chat's title and crumbs at every width. The ramp
+              only starts where the block ends. */}
+          <View testID={`${prefix}-fade-top-surface`} style={{ height: headerHeight, backgroundColor: solid }} />
+          {/* Past the block's own bottom: a ramp that ends where the layout
+              does is a line across the transcript again. */}
+          <View style={{ height: scrimTail }}>
+            <EdgeScrim color={solid} />
+          </View>
         </Animated.View>
       ) : null}
       {header}

package/src/ai-chat/AiChatShell.tsx

@@ -368,6 +368,10 @@ export function AiChatShell({
   const panelOpen = panelOpenState && !wide && !!panel;
   const dismissPanel = useCallback(() => setPanelOpen(false), [setPanelOpen]);
   const panelRef = usePanelInteraction(panelOpenState && !!panel, panelOpen, dismissPanel);
+  const dismissNav = useCallback(() => setNavOpen(false), [setNavOpen]);
+  // The nav drawer covers the workspace whenever it is open: Escape closes it,
+  // focus moves in and is kept there, and returns to the opener on close.
+  const navRef = usePanelInteraction(navOpen, navOpen, dismissNav);
   // The swipe's handlers are built once and read the drawer's state from here.
   const navOpenRef = useRef(navOpen);
   navOpenRef.current = navOpen;
@@ -608,6 +612,7 @@ export function AiChatShell({
         ) : null}
         {!navInFlow && mobileSidebar ? (
           <View
+            ref={navRef}
             {...(navOpen ? null : CLOSED_LAYER)}
             pointerEvents={navOpen ? 'box-none' : 'none'}
             style={{ position: overlayPosition, top: 0, bottom: 0, left: 0, zIndex: 10, width: 272, paddingTop: 12, paddingBottom: 12, paddingLeft: 6 }}>
@@ -652,12 +657,17 @@ export function AiChatShell({
           ]}>
           {!navInFlow ? (
             <Animated.View
+              {...(navOpen ? null : CLOSED_LAYER)}
               pointerEvents={navOpen ? 'auto' : 'none'}
               style={[{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, zIndex: 50 }, veilStyle]}>
+              {/* Never a Tab stop: open, focus is kept in the drawer and Escape
+                  closes it; closed, the veil is not there at all. `tabIndex`,
+                  not `focusable` — react-native-web's Pressable writes its own
+                  tabIndex 0 over `focusable`. */}
               <Pressable
                 accessibilityRole="button"
                 accessibilityLabel={l.closeNavigation}
-                focusable={navOpen}
+                tabIndex={-1}
                 onPress={() => setNavOpen(false)}
                 style={{ flex: 1, backgroundColor: veil }}
               />
@@ -701,7 +711,7 @@ export function AiChatShell({
               <Pressable
                 accessibilityRole="button"
                 accessibilityLabel={l.closePanel(panelLabel)}
-                focusable={panelOpen}
+                tabIndex={panelOpen ? 0 : -1}
                 onPress={() => setPanelOpen(false)}
                 style={{ flex: 1, backgroundColor: 'rgba(0, 0, 0, 0.4)' }}
               />

package/src/ai-chat/use-panel-interaction.ts

@@ -1,19 +1,19 @@
 import { useEffect, useRef } from 'react';
 import { BackHandler, Platform, type View } from 'react-native';
 import { useAccessibilityFocus } from '../hooks/use-accessibility-focus';
+import { listenForEscape, tabbablesWithin, wrapTab } from '../overlay/modal-keyboard';
 import { hasActiveOverlays } from '../overlay/stack';
 
-function visible(element: HTMLElement): boolean {
-  for (let current: HTMLElement | null = element; current; current = current.parentElement) {
-    const style = getComputedStyle(current);
-    if (style.display === 'none' || style.visibility === 'hidden') return false;
-  }
-  return true;
-}
-
-const FOCUSABLE = 'button, a[href], input, select, textarea, [tabindex]';
-
-/** Interaction only: the shell continues to own the drawer's layout and motion. */
+/**
+ * Interaction only: the shell continues to own the drawer's layout and motion.
+ * Used by both shell drawers — the panel and the navigation.
+ *
+ *   open    Escape (web) and back (Android) close it
+ *   modal   it covers the workspace: focus moves in on open, Tab is kept
+ *           inside, and focus goes back to the opener on close
+ *
+ * Any portaled overlay above (a dialog, a menu) takes all of it first.
+ */
 export function usePanelInteraction(open: boolean, modal: boolean, close: () => void) {
   const ref = useAccessibilityFocus<View>(modal);
   const closeRef = useRef(close);
@@ -33,36 +33,22 @@ export function usePanelInteraction(open: boolean, modal: boolean, close: () =>
     // This ref is a native View on native, a DOM host on web.
     const node = ref.current as unknown as HTMLElement | null;
     const opener = document.activeElement as HTMLElement | null;
-    const candidates = () => Array.from(node?.querySelectorAll<HTMLElement>(FOCUSABLE) ?? [])
-      .filter(element => element.tabIndex >= 0 && !element.matches(':disabled, [aria-disabled="true"]') &&
-        !element.closest('[hidden], [aria-hidden="true"]') && visible(element));
-    const focusFirst = () => candidates()[0]?.focus();
+    const focusFirst = () => tabbablesWithin(node)[0]?.focus();
     if (modal) focusFirst();
     const onFocus = (event: FocusEvent) => {
       if (modal && !hasActiveOverlays() && node && !node.contains(event.target as Node)) focusFirst();
     };
-    const onKey = (event: KeyboardEvent) => {
-      if (event.defaultPrevented || hasActiveOverlays()) return;
-      if (event.key === 'Escape') {
-        event.preventDefault();
-        event.stopPropagation();
-        closeRef.current();
-      } else if (modal && event.key === 'Tab') {
-        const items = candidates();
-        const first = items[0];
-        const last = items[items.length - 1];
-        if (event.shiftKey && (document.activeElement === first || !node?.contains(document.activeElement))) {
-          event.preventDefault(); last?.focus();
-        } else if (!event.shiftKey && (document.activeElement === last || !node?.contains(document.activeElement))) {
-          event.preventDefault(); first?.focus();
-        }
-      }
+    const onTab = (event: KeyboardEvent) => {
+      if (modal && !event.defaultPrevented && !hasActiveOverlays()) wrapTab(event, node);
     };
-    // Menus/dialogs consume Escape on document; shell listens after them.
-    window.addEventListener('keydown', onKey);
+    const stopEscape = listenForEscape(() => !hasActiveOverlays(), () => closeRef.current());
+    // Capture: a text field inside the drawer stops its own keydowns (see
+    // `overlay/modal-keyboard.ts`), and Tab must wrap from there too.
+    window.addEventListener('keydown', onTab, true);
     document.addEventListener('focusin', onFocus);
     return () => {
-      window.removeEventListener('keydown', onKey);
+      stopEscape();
+      window.removeEventListener('keydown', onTab, true);
       document.removeEventListener('focusin', onFocus);
       if (opener?.isConnected) opener.focus();
     };

package/src/bottom-sheet/BottomSheetBase.tsx

@@ -32,6 +32,7 @@ import Animated, {
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { EDGE_GAP, windowEdgeGap } from '../layout/edge';
 import { Backdrop, BACKDROP_DIM_OPACITY } from '../overlay';
+import { ModalKeyboard } from '../overlay/ModalKeyboard';
 import { useTheme } from '../theme/use-theme';
 import type { BottomSheetRef, BottomSheetProps, BottomSheetShellProps, BottomSheetBaseProps } from './types';
 
@@ -92,6 +93,7 @@ export const BottomSheetBase = forwardRef((props: BottomSheetBaseProps, ref: Rea
     const closeTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
     const hasClosedRef = useRef(false);
     const scrollViewRef = useRef<Animated.ScrollView>(null);
+    const sheetRef = useRef<View>(null);
     /**
      * Monotonically increasing counter that identifies "the current close
      * attempt". Bumped every time the sheet re-opens (`present()`), so any
@@ -696,6 +698,11 @@ export const BottomSheetBase = forwardRef((props: BottomSheetBaseProps, ref: Rea
 
     return (
         <Shell visible={rendered} onRequestClose={dismiss} keyboardHeight={keyboardHeight}>
+            {/* Web keyboard and focus: in on open, back on close, Tab kept in
+                the sheet, Escape a USER dismissal — through `onDismissAttempt`,
+                exactly like the backdrop. The sheet had no keyboard path at
+                all. Inside the shell's `OverlayRoot`; inert on native. */}
+            <ModalKeyboard panelRef={sheetRef} dismissible dismiss={handleBackdropPress} />
             <View style={StyleSheet.absoluteFill}>
                 {backdropComponent ? (
                     <Animated.View style={[StyleSheet.absoluteFill, customBackdropStyle]}>
@@ -723,6 +730,7 @@ export const BottomSheetBase = forwardRef((props: BottomSheetBaseProps, ref: Rea
 
                 <GestureDetector gesture={panGesture}>
                     <Animated.View
+                        ref={sheetRef}
                         onLayout={onLayout}
                         style={[
                             dynamicStyles.sheet,

package/src/chat-composer/ChatComposer.tsx

@@ -8,7 +8,7 @@
  * app owns drafts per conversation and a composer that kept its own would lose
  * them on every navigation.
  */
-import React, { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 import {
   TextInput,
   View,
@@ -31,6 +31,7 @@ import { RiForbidLine } from '../icons/remix/RiForbidLine';
 import { RiMic2Line } from '../icons/remix/RiMic2Line';
 import { RiSendPlaneLine } from '../icons/remix/RiSendPlaneLine';
 import { useControllableState } from '../hooks/use-controllable-state';
+import { useTextareaAutosize } from '../hooks/use-textarea-autosize';
 import type { WebCssStyle } from '../styles/web-view-style';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
@@ -175,19 +176,16 @@ export function ChatComposer({
    *
    * They are not interchangeable: react-native-web reports `scrollHeight`,
    * which never falls below the height already applied, so a field grown to six
-   * lines and then emptied would stay six lines tall. Collapsing the node to
-   * zero first and restoring it in the same frame is what makes it SHRINK.
+   * lines and then emptied would stay six lines tall. `useTextareaAutosize`
+   * collapses the node to measure it only when the draft may have got SHORTER —
+   * collapsing on every keystroke re-laid-out the whole page three times a key.
    */
-  useLayoutEffect(() => {
-    if (!IS_WEB) return;
-    const node = localRef.current as unknown as HTMLTextAreaElement | null;
-    if (!node || typeof node.scrollHeight !== 'number' || !node.style) return;
-    const previous = node.style.height;
-    node.style.height = '0px';
-    const measured = node.scrollHeight;
-    node.style.height = previous;
-    if (measured > 0) setContentHeight(measured);
-  }, [text, minHeight]);
+  useTextareaAutosize(localRef, text, {
+    enabled: IS_WEB,
+    height,
+    minHeight,
+    onMeasure: setContentHeight,
+  });
 
   const onContentSizeChange = useCallback(
     (event: NativeSyntheticEvent<TextInputContentSizeChangeEventData>) => {

package/src/composer-panel/ComposerPanelBase.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
   TextInput,
   View,
@@ -17,6 +17,7 @@ import Animated, {
 } from 'react-native-reanimated';
 
 import { useControllableState } from '../hooks/use-controllable-state';
+import { useTextareaAutosize } from '../hooks/use-textarea-autosize';
 import type { WebCssStyle } from '../styles/web-view-style';
 import { useTheme } from '../theme/use-theme';
 import { TYPE_SCALE } from '../typography';
@@ -175,18 +176,15 @@ export function ComposerPanelBase({
   );
 
   // The prompt grows with its text, one 20px line at a time, up to 200 before it
-  // scrolls. Web measures the textarea from zero (so it also shrinks back);
-  // native reads the content size.
+  // scrolls. Web measures the textarea, collapsing it only when the draft may
+  // have got shorter (`useTextareaAutosize`); native reads the content size.
   const [height, setHeight] = useState(PROMPT_LINE);
-  useLayoutEffect(() => {
-    if (!IS_WEB) return;
-    const node = fieldRef.current as unknown as { style?: { height: string }; scrollHeight?: number } | null;
-    if (!node?.style || typeof node.scrollHeight !== 'number') return;
-    node.style.height = '0px';
-    const next = Math.min(PROMPT_MAX_HEIGHT, Math.max(PROMPT_LINE, node.scrollHeight));
-    node.style.height = `${next}px`;
-    setHeight(next);
-  }, [text]);
+  useTextareaAutosize(fieldRef, text, {
+    enabled: IS_WEB,
+    height,
+    minHeight: PROMPT_LINE,
+    onMeasure: (content) => setHeight(Math.min(PROMPT_MAX_HEIGHT, Math.max(PROMPT_LINE, content))),
+  });
   const onContentSizeChange = useCallback(
     (event: NativeSyntheticEvent<TextInputContentSizeChangeEventData>) => {
       if (IS_WEB) return;

package/src/composer-panel/ComposerPillBase.tsx

@@ -16,6 +16,7 @@ import Animated, {
 } from 'react-native-reanimated';
 
 import { useControllableState } from '../hooks/use-controllable-state';
+import { useTextareaAutosize } from '../hooks/use-textarea-autosize';
 import { RiArrowDownSLine } from '../icons/remix/RiArrowDownSLine';
 import { RadioIndicator } from '../radio-indicator';
 import type { WebCssStyle } from '../styles/web-view-style';
@@ -459,6 +460,15 @@ export function ComposerPillBase({
   const [contentHeight, setContentHeight] = useState(LINE_HEIGHT);
   const [modelWidth, setModelWidth] = useState(0);
 
+  const fieldRef = useRef<TextInput | null>(null);
+  const setFieldRef = useCallback(
+    (node: TextInput | null) => {
+      fieldRef.current = node;
+      if (inputRef) (inputRef as React.MutableRefObject<TextInput | null>).current = node;
+    },
+    [inputRef],
+  );
+
   // The add control shares the canonical inset and hover surfaces.
   const addPalette: ComposerPalette = useMemo(() => {
     if (glass) return { ...palette, add: 'transparent', addHover: 'transparent' };
@@ -547,6 +557,22 @@ export function ComposerPillBase({
   const pillHeight = PILL_HEIGHT + (lines - 1) * LINE_HEIGHT;
   const multiLine = lines > 1;
 
+  /*
+   * On web the field is measured, not reported. react-native-web's
+   * `onContentSizeChange` reads `scrollHeight` on input only, and that never
+   * falls below the height already applied: a pill grown to four lines stayed
+   * four lines tall after the draft was deleted, and after send — a
+   * programmatic clear fires no input at all. `useTextareaAutosize` measures on
+   * every change of the draft and collapses the field only when it may have
+   * got shorter.
+   */
+  useTextareaAutosize(fieldRef, text, {
+    enabled: IS_WEB,
+    height: fieldHeight,
+    minHeight: LINE_HEIGHT,
+    onMeasure: setContentHeight,
+  });
+
   const pillStyle: WebCssStyle = {
     width: '100%',
     height: pillHeight,
@@ -593,7 +619,7 @@ export function ComposerPillBase({
 
       <View style={fieldStyle}>
         <TextInput
-          ref={inputRef}
+          ref={setFieldRef}
           {...dataHook('bloomComposerInput')}
           testID={testID ? `${testID}-input` : undefined}
           accessibilityLabel={labels.message}
@@ -609,7 +635,7 @@ export function ComposerPillBase({
           cursorColor={palette.accent500}
           returnKeyType="send"
           multiline
-          onContentSizeChange={(event) => setContentHeight(event.nativeEvent.contentSize.height)}
+          onContentSizeChange={IS_WEB ? undefined : (event) => setContentHeight(event.nativeEvent.contentSize.height)}
           style={{
             width: '100%',
             height: fieldHeight,

package/src/dialog/Dialog.web.tsx

@@ -37,6 +37,7 @@ import Animated, {
 import { RemoveScrollBar } from 'react-remove-scroll-bar';
 
 import { Backdrop, OverlayRoot } from '../overlay';
+import { ModalKeyboard } from '../overlay/ModalKeyboard';
 import { StyledView } from '../styles/styled-primitives';
 import { Portal } from '../portal/index.web';
 import { adoptStyleSheet } from '../styles/adopt-style-sheet';
@@ -219,6 +220,7 @@ function CenterOrSideDialog({
   // the imperative `control.close()` still drives the exit + post-exit onClose.
   const [isOpen, setIsOpen] = useState(() => controlledOpen ?? startOpen ?? false);
   const [isClosing, setIsClosing] = useState(false);
+  const panelRef = useRef<View>(null);
   const closeCallbacksRef = useRef<(() => void)[]>([]);
   // Read the latest controlled flag inside stable callbacks without re-binding.
   const isControlledRef = useRef(isControlled);
@@ -314,24 +316,6 @@ function CenterOrSideDialog({
       : withTiming(1, { duration: BACKDROP_FADE_IN_DURATION, easing: Easing.out(Easing.ease) });
   }, [backdropFade, isOpen, isClosing]);
 
-  // Escape-to-close while open. The listener is intentionally scoped to the
-  // open lifetime so stacked dialogs don't fight for the keydown — the
-  // top-most one wins via document-level event order. Escape honors
-  // `dismissOnBackdrop`: a blocking dialog (e.g. an unanswered confirm) is not
-  // dismissible by Escape, matching the backdrop's behavior. The default
-  // (`dismissOnBackdrop` true) is unchanged — Escape still closes.
-  useEffect(() => {
-    if (!isOpen || !dismissOnBackdrop || typeof document === 'undefined') return;
-    const handler = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        e.stopPropagation();
-        close();
-      }
-    };
-    document.addEventListener('keydown', handler);
-    return () => document.removeEventListener('keydown', handler);
-  }, [close, dismissOnBackdrop, isOpen]);
-
   useImperativeHandle(
     control?.ref,
     () => ({ open, close }),
@@ -359,6 +343,12 @@ function CenterOrSideDialog({
                 `OverlayInertBoundary` take the page out of the tab order and
                 the accessibility tree while it is open. */}
             <OverlayRoot modal>
+              <ModalKeyboard
+                panelRef={panelRef}
+                closing={isClosing}
+                dismissible={dismissOnBackdrop}
+                dismiss={close}
+              />
               {/* The press target IS the full-viewport box, so it uses
                   `Backdrop` (which opts back in from the Portal root's
                   `pointer-events: none` via the `pointerEvents` PROP — the style
@@ -380,6 +370,7 @@ function CenterOrSideDialog({
                 }}
               >
                 <DialogPanel
+                  panelRef={panelRef}
                   testID={testID}
                   label={label}
                   title={title}
@@ -410,6 +401,7 @@ function CenterOrSideDialog({
         <ClosingContext.Provider value={isClosing}>
           <RemoveScrollBar />
           <SheetSurface
+            panelRef={panelRef}
             testID={testID}
             label={label}
             title={title}
@@ -439,6 +431,7 @@ function CenterOrSideDialog({
 }
 
 function DialogPanel({
+  panelRef,
   testID,
   label,
   title,
@@ -454,6 +447,7 @@ function DialogPanel({
   isClosing,
   children,
 }: {
+  panelRef: React.RefObject<View | null>;
   testID?: string;
   label?: string;
   title?: string;
@@ -508,7 +502,11 @@ function DialogPanel({
 
   return (
     <Animated.View
+      ref={panelRef}
       role="dialog"
+      aria-modal
+      // Focus lands on the panel itself when it holds nothing tabbable.
+      tabIndex={-1}
       aria-label={label}
       aria-labelledby={title ? titleId : undefined}
       aria-describedby={description ? descriptionId : undefined}
@@ -625,6 +623,7 @@ function DialogPanel({
  * implementation with native and supports drag-to-dismiss on web.
  */
 function SheetSurface({
+  panelRef,
   testID,
   label,
   title,
@@ -646,6 +645,7 @@ function SheetSurface({
   style,
   children,
 }: {
+  panelRef: React.RefObject<View | null>;
   testID?: string;
   label?: string;
   title?: string;
@@ -750,6 +750,7 @@ function SheetSurface({
 
   return (
     <OverlayRoot style={[sheetStyles.root, containerStyle]} className={containerClassName} modal>
+      <ModalKeyboard panelRef={panelRef} closing={!shown} dismissible={dismissOnBackdrop} dismiss={onDismiss} />
       <Backdrop
         testID={testID ? `${testID}-backdrop` : DIALOG_SHEET_BACKDROP_TESTID}
         accessibilityLabel={label ? `Dismiss ${label}` : 'Dismiss dialog'}
@@ -763,7 +764,10 @@ function SheetSurface({
       />
 
       <StyledView
+        ref={panelRef}
         role="dialog"
+        aria-modal
+        tabIndex={-1}
         aria-label={label}
         aria-labelledby={title ? titleId : undefined}
         aria-describedby={description ? descriptionId : undefined}

package/src/dialog/DialogBottomSheet.tsx

@@ -100,6 +100,8 @@ export function DialogBottomSheet({
   isControlledRef.current = isControlled;
   const onCloseRef = useRef(onClose);
   onCloseRef.current = onClose;
+  const controlledOpenRef = useRef(controlledOpen);
+  controlledOpenRef.current = controlledOpen;
 
   // Drain queued close callbacks atomically — capturing the list and resetting
   // it before invocation ensures a callback that synchronously re-opens the
@@ -139,12 +141,15 @@ export function DialogBottomSheet({
   }, []);
 
   // Fired when the sheet has finished closing. Drains queued callbacks, then
-  // fires `onClose` ONLY in imperative mode — controlled mode already requested
-  // the close through `onClose` (the host then flipped `open`), so firing it
-  // again here would double-call it.
+  // fires `onClose` in imperative mode. In controlled mode a close the HOST
+  // made (it flipped `open` to false, usually after `close()` asked it to) was
+  // already requested through `onClose`, so firing it again would double-call
+  // it — but a close the SHEET made on its own (the backdrop, a drag, Escape)
+  // arrives with `open` still true, and the host has to hear about it or its
+  // state says open over a closed sheet.
   const handleDismiss = useCallback(() => {
     callQueuedCallbacks();
-    if (!isControlledRef.current) onCloseRef.current?.();
+    if (!isControlledRef.current || controlledOpenRef.current) onCloseRef.current?.();
   }, [callQueuedCallbacks]);
 
   // In controlled mode, mirror the `open` prop onto the underlying sheet so both