@oxy.so/bloom 4.18.1 → 4.19.1

package/lib/typescript/module/portal/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/portal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EACd,YAAY,EACZ,MAAM,GACP,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/portal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EACd,YAAY,EACZ,MAAM,GACP,MAAM,UAAU,CAAC;AAIlB,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,YAAY,EAAE,yBAAyB,EAAE,MAAM,kBAAkB,CAAC"}

package/lib/typescript/module/portal/index.web.d.ts

@@ -1,2 +1,4 @@
 export { PortalProvider, PortalOutlet, Portal, } from './Portal.web';
+export { OverlayInertBoundary } from '../overlay/OverlayInertBoundary';
+export type { OverlayInertBoundaryProps } from '../overlay/types';
 //# sourceMappingURL=index.web.d.ts.map

package/lib/typescript/module/portal/index.web.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.web.d.ts","sourceRoot":"","sources":["../../../../src/portal/index.web.ts"],"names":[],"mappings":"AAKA,OAAO,EACL,cAAc,EACd,YAAY,EACZ,MAAM,GACP,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.web.d.ts","sourceRoot":"","sources":["../../../../src/portal/index.web.ts"],"names":[],"mappings":"AAKA,OAAO,EACL,cAAc,EACd,YAAY,EACZ,MAAM,GACP,MAAM,cAAc,CAAC;AAItB,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,YAAY,EAAE,yBAAyB,EAAE,MAAM,kBAAkB,CAAC"}

package/lib/typescript/module/rating/Rating.d.ts

@@ -2,9 +2,17 @@ import React from 'react';
 import type { RatingProps } from './types';
 /** 5 → "5.0", 4.9 → "4.9", 4.923 → "4.92". */
 export declare function formatRatingValue(value: number | string): string;
+/**
+ * The number a drawn rating value stands for, for the `stars` fill: a number
+ * is itself; a string is read after dropping bidi/format characters, with a
+ * comma or Arabic decimal separator (U+066B) accepted as the decimal point and
+ * Arabic-Indic digits accepted — so "4,5" wrapped in FSI…PDI is 4.5. Otherwise it is
+ * `Number()`'s reading, so anything unreadable is `NaN` (no fill).
+ */
+export declare function parseRatingValue(value: number | string): number;
 /** How much of star `index` (0-based) a rating fills, `0..1`. */
 export declare function starFill(rating: number, index: number): number;
-declare function RatingComponent({ value, count, countStyle, reviewsLabel, newLabel, size, variant, color, starColor, countColor, emptyStarColor, accessibilityLabel, style, testID, }: RatingProps): import("react/jsx-runtime").JSX.Element;
+declare function RatingComponent({ value, count, countStyle, reviewsLabel, newLabel, size, variant, color, starColor, countColor, emptyStarColor, fillValue, accessibilityLabel, style, testID, }: RatingProps): import("react/jsx-runtime").JSX.Element;
 export declare const Rating: React.MemoExoticComponent<typeof RatingComponent>;
 export {};
 //# sourceMappingURL=Rating.d.ts.map

package/lib/typescript/module/rating/Rating.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Rating.d.ts","sourceRoot":"","sources":["../../../../src/rating/Rating.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAQpC,OAAO,KAAK,EAAE,WAAW,EAAc,MAAM,SAAS,CAAC;AAiCvD,8CAA8C;AAC9C,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAIhE;AAQD,iEAAiE;AACjE,wBAAgB,QAAQ,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAG9D;AA6CD,iBAAS,eAAe,CAAC,EACvB,KAAK,EACL,KAAK,EACL,UAA0B,EAC1B,YAAwB,EACxB,QAAgB,EAChB,IAAe,EACf,OAAmB,EACnB,KAAK,EACL,SAAS,EACT,UAAU,EACV,cAAc,EACd,kBAAkB,EAClB,KAAK,EACL,MAAM,GACP,EAAE,WAAW,2CAmDb;AAED,eAAO,MAAM,MAAM,mDAAwB,CAAC"}
+{"version":3,"file":"Rating.d.ts","sourceRoot":"","sources":["../../../../src/rating/Rating.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAQpC,OAAO,KAAK,EAAE,WAAW,EAAc,MAAM,SAAS,CAAC;AAkCvD,8CAA8C;AAC9C,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAIhE;AAkBD;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAS/D;AAED,iEAAiE;AACjE,wBAAgB,QAAQ,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAG9D;AAkDD,iBAAS,eAAe,CAAC,EACvB,KAAK,EACL,KAAK,EACL,UAA0B,EAC1B,YAAwB,EACxB,QAAgB,EAChB,IAAe,EACf,OAAmB,EACnB,KAAK,EACL,SAAS,EACT,UAAU,EACV,cAAc,EACd,SAAS,EACT,kBAAkB,EAClB,KAAK,EACL,MAAM,GACP,EAAE,WAAW,2CAmDb;AAED,eAAO,MAAM,MAAM,mDAAwB,CAAC"}

package/lib/typescript/module/rating/types.d.ts

@@ -40,6 +40,15 @@ export interface RatingProps {
     countColor?: string;
     /** `stars` variant: the unfilled part of each star. Default the theme's border colour. */
     emptyStarColor?: string;
+    /**
+     * `stars` variant: the number the stars are filled to, clamped to `0..5`,
+     * independent of the drawn `value`. Pass it with a localised `value` string
+     * (`value="4,5"` with `fillValue={4.5}`) so the text follows the locale and
+     * the fill does not depend on parsing it. Without it a string `value` is
+     * parsed (bidi marks dropped, a comma decimal accepted). Ignored by
+     * `compact` and while there is no rating (`value` empty).
+     */
+    fillValue?: number;
     /**
      * Overrides the composed accessible name ("Rated 4.92 out of 5, 128
      * reviews"), which is English — pass a translated sentence here.

package/lib/typescript/module/rating/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/rating/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,8FAA8F;AAC9F,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE5C,oEAAoE;AACpE,MAAM,MAAM,gBAAgB,GAAG,aAAa,GAAG,SAAS,CAAC;AAEzD;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,OAAO,CAAC;AAEhD,MAAM,WAAW,WAAW;IAC1B;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC/B,kEAAkE;IAClE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,6BAA6B;IAC7B,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,uGAAuG;IACvG,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wBAAwB;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,sFAAsF;IACtF,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uFAAuF;IACvF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wEAAwE;IACxE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0FAA0F;IAC1F,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,iEAAiE;AACjE,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE3D,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,iFAAiF;IACjF,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,mCAAmC;IACnC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,wBAAwB;IACxB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;;OAOG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;OAGG;IACH,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IACzD,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,yCAAyC;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,cAAc;IAC7B,wFAAwF;IACxF,KAAK,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,gEAAgE;IAChE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/rating/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,8FAA8F;AAC9F,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE5C,oEAAoE;AACpE,MAAM,MAAM,gBAAgB,GAAG,aAAa,GAAG,SAAS,CAAC;AAEzD;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,OAAO,CAAC;AAEhD,MAAM,WAAW,WAAW;IAC1B;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC/B,kEAAkE;IAClE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,6BAA6B;IAC7B,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,uGAAuG;IACvG,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wBAAwB;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,sFAAsF;IACtF,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uFAAuF;IACvF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wEAAwE;IACxE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0FAA0F;IAC1F,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,iEAAiE;AACjE,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE3D,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,iFAAiF;IACjF,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,mCAAmC;IACnC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,wBAAwB;IACxB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;;OAOG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;OAGG;IACH,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IACzD,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,yCAAyC;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,cAAc;IAC7B,wFAAwF;IACxF,KAAK,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,gEAAgE;IAChE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}

package/package.json

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

package/src/bottom-sheet/BottomSheet.web.tsx

@@ -32,8 +32,12 @@ function WebShell({ children }: BottomSheetShellProps) {
             {/* `OverlayRoot` owns the portal-root pointer-events opt-in (see
                 `src/overlay`). It used to ride in the style array below as an
                 RN-only box-none value, which never reached the DOM — the whole
-                sheet, backdrop included, was click-through on web. */}
-            <OverlayRoot style={webStyles.rootView}>
+                sheet, backdrop included, was click-through on web. `modal`:
+                the sheet dims and blocks the page, so the app's
+                `OverlayInertBoundary` makes that page inert while it is open.
+                (Native needs no flag — its shell is an RN `Modal`, a separate
+                window the screen reader is already confined to.) */}
+            <OverlayRoot style={webStyles.rootView} modal>
                 <GestureHandlerRootView style={StyleSheet.absoluteFill}>
                     {children}
                 </GestureHandlerRootView>

package/src/dialog/Dialog.web.tsx

@@ -144,7 +144,8 @@ function useDialogCss(): void {
  * Accessibility: the panel has `role="dialog"` and the `title`/`description`
  * props (when provided) become the `aria-labelledby` / `aria-describedby`
  * targets. Pressing the backdrop dismisses. Pressing `Escape` dismisses.
- * Focus is locked inside the dialog while it's open.
+ * While it is open the page behind is `inert` — provided the app wraps its
+ * content in `OverlayInertBoundary` (`OverlayRoot modal` below registers it).
  *
  * Web motion never uses reanimated `exiting` (which throws `removeChild` on
  * concurrent React unmounts): the centered card uses CSS keyframes and the
@@ -354,8 +355,10 @@ function CenterOrSideDialog({
                 overlay stack. It mounts here, inside the `isOpen` guard, which
                 is what makes the rank track OPENING rather than mounting — the
                 dialog is declared once at the app root and stays mounted for
-                the app's lifetime. */}
-            <OverlayRoot>
+                the app's lifetime. `modal` makes the app's
+                `OverlayInertBoundary` take the page out of the tab order and
+                the accessibility tree while it is open. */}
+            <OverlayRoot modal>
               {/* 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
@@ -746,7 +749,7 @@ function SheetSurface({
   );
 
   return (
-    <OverlayRoot style={[sheetStyles.root, containerStyle]} className={containerClassName}>
+    <OverlayRoot style={[sheetStyles.root, containerStyle]} className={containerClassName} modal>
       <Backdrop
         testID={testID ? `${testID}-backdrop` : DIALOG_SHEET_BACKDROP_TESTID}
         accessibilityLabel={label ? `Dismiss ${label}` : 'Dismiss dialog'}

package/src/index.ts

@@ -106,6 +106,7 @@ export {
   Backdrop,
   useOverlayLayer,
   useOverlayLayerContext,
+  useModalOverlayActive,
   layerForRank,
   BACKDROP_BLUR_INTENSITY,
   BACKDROP_DIM_OPACITY,

package/src/index.web.ts

@@ -111,6 +111,7 @@ export {
   Backdrop,
   useOverlayLayer,
   useOverlayLayerContext,
+  useModalOverlayActive,
   layerForRank,
   BACKDROP_BLUR_INTENSITY,
   BACKDROP_DIM_OPACITY,

package/src/input-otp/InputOtp.tsx

@@ -291,7 +291,13 @@ export function InputOtp({
             autoFocus={autoFocus && index === 0}
             // Long enough to accept a full autofilled code in one box.
             maxLength={length}
-            selectTextOnFocus
+            // Typing into a filled box must REPLACE its digit, so the digit is
+            // selected on focus. Web's `selectTextOnFocus` does that. Android's
+            // does not: it selects on the input's next layout, and focusing a box
+            // lays nothing out, so the keystroke landed beside the old digit and
+            // `writeFrom` spread both across two boxes. Native selects in
+            // `onFocus` instead (see Search, OxyHQ/Mention#1126).
+            selectTextOnFocus={IS_WEB}
             caretHidden={false}
             editable={!disabled}
             accessibilityLabel={`Digit ${index + 1} of ${length}`}
@@ -300,7 +306,10 @@ export function InputOtp({
             value={digit === ' ' ? '' : digit}
             onChangeText={(text) => writeFrom(index, text)}
             onKeyPress={(event) => onKeyPress(event, index)}
-            onFocus={() => setFocusedIndex(index)}
+            onFocus={() => {
+              setFocusedIndex(index);
+              if (!IS_WEB && digit !== '' && digit !== ' ') inputsRef.current[index]?.setSelection(0, 1);
+            }}
             onBlur={() => setFocusedIndex((current) => (current === index ? null : current))}
             keyboardAppearance={theme.isDark ? 'dark' : 'light'}
             style={[

package/src/overlay/Overlay.tsx

@@ -58,6 +58,7 @@ import { StyledView } from '../styles/styled-primitives';
 import { SurfaceLevelProvider } from '../styles/surface-levels';
 import { layerForRank, type OverlayLayer } from './stack';
 import { useHardwareBack } from './use-hardware-back';
+import { useModalOverlayRegistration } from './use-modal-overlay-active';
 import { useOverlayLayer } from './use-overlay-layer';
 import type { OverlayRootProps, BackdropProps } from './types';
 
@@ -181,6 +182,9 @@ function OverlayRootView({
   layer,
   modal,
 }: OverlayRootViewProps & { layer: OverlayLayer }) {
+  // Android cannot confine TalkBack from this side of the outlet — the app's
+  // `OverlayInertBoundary` hides the content once it hears a modal is open.
+  useModalOverlayRegistration(modal);
   return (
     <OverlayLayerContext.Provider value={layer}>
       {/* `pointerEvents` stays a PROP: react-native-web resolves the RN-only

package/src/overlay/OverlayInertBoundary.tsx

@@ -0,0 +1,72 @@
+/**
+ * `OverlayInertBoundary` — the app content's half of a modal overlay.
+ *
+ * A modal Bloom surface renders at the portal outlet, which is the app
+ * content's SIBLING. It can mark itself modal (`accessibilityViewIsModal`, which
+ * iOS honours by hiding the siblings), but it cannot hide the app on Android:
+ * TalkBack only skips a subtree whose OWN root says
+ * `importantForAccessibility="no-hide-descendants"`, and that root belongs to
+ * the app. Without it, TalkBack walked from the settings modal straight into
+ * the Home feed behind it (OxyHQ/Mention#1126).
+ *
+ * The app wraps its content — everything that is NOT the `PortalOutlet` — in
+ * this boundary. While any modal overlay is open (`./modal-registry.ts`) it
+ * takes that content out of the accessibility tree:
+ *
+ *   - Android: `importantForAccessibility="no-hide-descendants"`.
+ *   - iOS: `accessibilityElementsHidden`, alongside the surface's own
+ *     `accessibilityViewIsModal` (either alone is enough; both costs nothing).
+ *   - Web: `inert`, which removes the subtree from the tab order AND the
+ *     accessibility tree, plus `aria-hidden` for engines that lag on `inert`.
+ *     The web portal root is a child of `document.body`, never of the app
+ *     root, so the surface itself is untouched. Web dialogs set no focus trap
+ *     of their own, so nothing is applied twice.
+ *
+ * Layout: on web the boundary is `display: contents`, so it generates no box
+ * and a document-scrolling page lays out exactly as without it. On native it is
+ * a `flex: 1` view — the content it wraps already fills the root there — and it
+ * is never collapsed, because flattening a layout-only view would drop the
+ * accessibility prop the moment it is needed.
+ */
+import { Platform, StyleSheet, View } from 'react-native';
+
+import type { OverlayInertBoundaryProps } from './types';
+import { useModalOverlayActive } from './use-modal-overlay-active';
+
+export function OverlayInertBoundary({ children, style, testID }: OverlayInertBoundaryProps) {
+  const active = useModalOverlayActive();
+
+  if (Platform.OS === 'web') {
+    return (
+      <View
+        testID={testID}
+        style={[styles.web, style]}
+        aria-hidden={active ? true : undefined}
+        {...(active ? { inert: true } : null)}
+      >
+        {children}
+      </View>
+    );
+  }
+
+  return (
+    <View
+      testID={testID}
+      collapsable={false}
+      style={[styles.native, style]}
+      importantForAccessibility={active ? 'no-hide-descendants' : 'auto'}
+      accessibilityElementsHidden={active}
+    >
+      {children}
+    </View>
+  );
+}
+
+OverlayInertBoundary.displayName = 'OverlayInertBoundary';
+
+const styles = StyleSheet.create({
+  native: { flex: 1 },
+  // No box of its own on web: the wrapped content lays out against the
+  // boundary's parent, flex tree or document scroll alike.
+  web: { display: 'contents' },
+});

package/src/overlay/index.ts

@@ -7,6 +7,8 @@ export {
   type OverlayLayer,
 } from './stack';
 export { useOverlayLayer } from './use-overlay-layer';
+export { useModalOverlayActive } from './use-modal-overlay-active';
+export { OverlayInertBoundary } from './OverlayInertBoundary';
 export {
   useOverlayLayerContext,
   BACKDROP_BLUR_INTENSITY,
@@ -14,4 +16,4 @@ export {
   OverlayRoot,
   Backdrop,
 } from './Overlay';
-export type { OverlayRootProps, BackdropProps } from './types';
+export type { OverlayRootProps, BackdropProps, OverlayInertBoundaryProps } from './types';

package/src/overlay/modal-registry.ts

@@ -0,0 +1,101 @@
+/**
+ * Which MODAL overlays are open right now, as a subscribable store.
+ *
+ * ## Why this exists
+ *
+ * A modal surface has to keep a screen reader inside it. iOS can do that from
+ * the overlay's side: `accessibilityViewIsModal` on the `OverlayRoot` hides its
+ * siblings, and at the native portal outlet the app content IS a sibling.
+ * Android has no equivalent. TalkBack keeps walking into the app behind the
+ * open surface (OxyHQ/Mention#1126: the Home feed stayed reachable under the
+ * settings modal), and the only switch that stops it —
+ * `importantForAccessibility="no-hide-descendants"` — has to sit ON the app
+ * content. A portaled surface cannot reach that view: the outlet renders it as
+ * the content's sibling, not its ancestor.
+ *
+ * So the knowledge travels the other way. Every `OverlayRoot` with `modal`
+ * registers here while it is mounted, and `OverlayInertBoundary` — which the
+ * app wraps around its own content — subscribes and hides what it wraps while
+ * anything modal is open.
+ *
+ * Non-modal overlays (menus, popovers, tooltips, toasts, the shell drawers)
+ * never register: the content under an anchored menu must stay reachable.
+ *
+ * Tokens rather than a counter so StrictMode's mount/unmount/remount and an
+ * unmatched release can never drift the count: a token is either in the set or
+ * not.
+ */
+
+interface ModalRegistry {
+  live: Set<object>;
+  listeners: Set<() => void>;
+}
+
+declare global {
+  // eslint-disable-next-line no-var
+  var __oxy_so_bloom_modal_overlays__: ModalRegistry | undefined;
+}
+
+/**
+ * `globalThis`-anchored for the same reason as `./stack.ts`: the surfaces that
+ * register (`./dialog`, `./settings-modal`, …) and the boundary the app mounts
+ * (`./portal`) are imported through different subpaths, and a bundler can
+ * resolve those through different export conditions. Two physical copies of
+ * this module would each keep their own set, and the boundary would never hear
+ * about the surfaces.
+ */
+function registry(): ModalRegistry {
+  globalThis.__oxy_so_bloom_modal_overlays__ ??= { live: new Set(), listeners: new Set() };
+  return globalThis.__oxy_so_bloom_modal_overlays__;
+}
+
+function notify(reg: ModalRegistry): void {
+  for (const listener of Array.from(reg.listeners)) listener();
+}
+
+/**
+ * Mark a modal overlay as open. Returns its release. Called from an effect in
+ * `OverlayRoot`, which React balances even under StrictMode.
+ */
+export function registerModalOverlay(token: object): () => void {
+  const reg = registry();
+  const wasActive = reg.live.size > 0;
+  reg.live.add(token);
+  if (!wasActive) notify(reg);
+  return () => {
+    const current = registry();
+    if (!current.live.delete(token)) return;
+    if (current.live.size === 0) notify(current);
+  };
+}
+
+/** Whether any modal overlay is open. */
+export function hasActiveModalOverlays(): boolean {
+  return registry().live.size > 0;
+}
+
+/** How many modal overlays are open. Exported for tests. */
+export function activeModalOverlayCount(): number {
+  return registry().live.size;
+}
+
+/**
+ * Subscribe to changes in `hasActiveModalOverlays()`. Listeners fire only when
+ * the answer flips — a second modal opening over a first changes nothing for
+ * the content underneath.
+ */
+export function subscribeModalOverlays(listener: () => void): () => void {
+  const reg = registry();
+  reg.listeners.add(listener);
+  return () => {
+    registry().listeners.delete(listener);
+  };
+}
+
+/** Test seam — drops all open modals, notifying current subscribers. */
+export function resetModalOverlays(): void {
+  const reg = registry();
+  const wasActive = reg.live.size > 0;
+  reg.live.clear();
+  if (wasActive) notify(reg);
+}

package/src/overlay/types.ts

@@ -36,13 +36,32 @@ export interface OverlayRootProps {
   onRequestClose?: () => void;
   /**
    * The surface is modal: a screen reader must not wander into the app behind
-   * it. Native only — sets `accessibilityViewIsModal` on this root, which is the
-   * app content's sibling at the portal outlet (iOS confines VoiceOver to
-   * it). Web surfaces already carry `aria-modal` on their own dialog node.
+   * it. Two effects:
+   *
+   *  - Native: sets `accessibilityViewIsModal` on this root, which is the app
+   *    content's sibling at the portal outlet (iOS confines VoiceOver to it).
+   *  - Every platform: registers the surface as an open modal while mounted
+   *    (`./modal-registry.ts`), so the app's `OverlayInertBoundary` hides the
+   *    content behind it — the only way to confine TalkBack on Android, and
+   *    what makes the content `inert` on web.
+   *
+   * Dialogs, sheets, the settings modal and the media viewer set it; anchored
+   * surfaces (menus, popovers, tooltips), toasts and the shell drawers do not.
    */
   modal?: boolean;
 }
 
+export interface OverlayInertBoundaryProps {
+  /** The app's own content — everything EXCEPT the `PortalOutlet`. */
+  children?: ReactNode;
+  /**
+   * Native only (web renders no box). Defaults to `flex: 1`; override when the
+   * boundary's parent is not a column that the content should fill.
+   */
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
 export interface BackdropProps {
   /** Dismiss handler. Omit (or pass `disabled`) for a backdrop that only dims. */
   onPress?: () => void;

package/src/overlay/use-modal-overlay-active.ts

@@ -0,0 +1,31 @@
+/**
+ * `useModalOverlayActive` — whether any modal Bloom overlay is open.
+ *
+ * Re-renders only when the answer flips. See `./modal-registry.ts` for who
+ * registers and why.
+ */
+import { useEffect, useSyncExternalStore } from 'react';
+
+import {
+  hasActiveModalOverlays,
+  registerModalOverlay,
+  subscribeModalOverlays,
+} from './modal-registry';
+
+/** `false` on the server: nothing is open before hydration. */
+const serverSnapshot = () => false;
+
+export function useModalOverlayActive(): boolean {
+  return useSyncExternalStore(subscribeModalOverlays, hasActiveModalOverlays, serverSnapshot);
+}
+
+/**
+ * Register as an open modal overlay while mounted and `modal` is true. Used by
+ * `OverlayRoot`; exported only within the family.
+ */
+export function useModalOverlayRegistration(modal: boolean): void {
+  useEffect(() => {
+    if (!modal) return undefined;
+    return registerModalOverlay({});
+  }, [modal]);
+}

package/src/portal/index.ts

@@ -3,3 +3,8 @@ export {
   PortalOutlet,
   Portal,
 } from './Portal';
+// The app-content half of a modal overlay: wrap everything EXCEPT the
+// `PortalOutlet` in it. Lives in `overlay/` (it reads the modal registry) and is
+// offered here because this is the subpath the app root already imports.
+export { OverlayInertBoundary } from '../overlay/OverlayInertBoundary';
+export type { OverlayInertBoundaryProps } from '../overlay/types';

package/src/portal/index.web.ts

@@ -8,3 +8,8 @@ export {
   PortalOutlet,
   Portal,
 } from './Portal.web';
+// The app-content half of a modal overlay: wrap everything EXCEPT the
+// `PortalOutlet` in it. Lives in `overlay/` (it reads the modal registry) and is
+// offered here because this is the subpath the app root already imports.
+export { OverlayInertBoundary } from '../overlay/OverlayInertBoundary';
+export type { OverlayInertBoundaryProps } from '../overlay/types';

package/src/rating/Rating.tsx

@@ -26,7 +26,8 @@ import type { RatingProps, RatingSize } from './types';
  * `variant="stars"` draws five stars before the value instead of one, 2px
  * apart, each filled to its share of the value: the unfilled star in
  * `emptyStarColor` (border), and over it the filled star clipped to the
- * fraction. The clip is anchored with a LOGICAL inset (`insetInlineStart`) so a
+ * fraction. The fill comes from `fillValue` when given, else from `value`
+ * (parsed by `parseRatingValue` when it is a localised string). The clip is anchored with a LOGICAL inset (`insetInlineStart`) so a
  * right-to-left row fills from the right — the root carries
  * `useDirectionProps()` for react-native-web to resolve it.
  *
@@ -52,12 +53,45 @@ const IS_WEB = Platform.OS === 'web';
 const STAR_COUNT = 5;
 const STAR_GAP = 2;
 
+/**
+ * Bidi isolates and marks (U+2066–U+2069 LRI/RLI/FSI/PDI, U+200E/U+200F
+ * LRM/RLM, U+061C ALM) a localised string is wrapped in. None of them are
+ * part of the number.
+ */
+const FORMAT_CHARACTERS = /[\u2066-\u2069\u200E\u200F\u061C]/g;
+/** Arabic-Indic (U+0660) and extended Arabic-Indic (U+06F0) digit zeros. */
+const ARABIC_ZERO = 0x0660;
+const EXTENDED_ARABIC_ZERO = 0x06f0;
+
+/**
+ * The number a drawn rating value stands for, for the `stars` fill: a number
+ * is itself; a string is read after dropping bidi/format characters, with a
+ * comma or Arabic decimal separator (U+066B) accepted as the decimal point and
+ * Arabic-Indic digits accepted — so "4,5" wrapped in FSI…PDI is 4.5. Otherwise it is
+ * `Number()`'s reading, so anything unreadable is `NaN` (no fill).
+ */
+export function parseRatingValue(value: number | string): number {
+  if (typeof value === 'number') return value;
+  const text = value
+    .replace(FORMAT_CHARACTERS, '')
+    .trim()
+    .replace(/[\u0660-\u0669]/g, (d) => String(d.charCodeAt(0) - ARABIC_ZERO))
+    .replace(/[\u06F0-\u06F9]/g, (d) => String(d.charCodeAt(0) - EXTENDED_ARABIC_ZERO))
+    .replace(/[,\u066B]/, '.');
+  return Number(text);
+}
+
 /** How much of star `index` (0-based) a rating fills, `0..1`. */
 export function starFill(rating: number, index: number): number {
   if (!Number.isFinite(rating)) return 0;
   return Math.min(1, Math.max(0, rating - index));
 }
 
+/** A fill on the five-star scale, clamped to `0..5`; `NaN` stays `NaN` (no fill). */
+function clampRating(rating: number): number {
+  return Math.min(STAR_COUNT, Math.max(0, rating));
+}
+
 function StarRow({
   rating,
   size,
@@ -113,6 +147,7 @@ function RatingComponent({
   starColor,
   countColor,
   emptyStarColor,
+  fillValue,
   accessibilityLabel,
   style,
   testID,
@@ -148,7 +183,7 @@ function RatingComponent({
     >
       {variant === 'stars' && rated ? (
         <StarRow
-          rating={typeof value === 'number' ? value : Number(value)}
+          rating={clampRating(fillValue ?? parseRatingValue(value))}
           size={config.star}
           fill={starPaint}
           empty={emptyStarColor ?? theme.colors.border}

package/src/rating/types.ts

@@ -44,6 +44,15 @@ export interface RatingProps {
   countColor?: string;
   /** `stars` variant: the unfilled part of each star. Default the theme's border colour. */
   emptyStarColor?: string;
+  /**
+   * `stars` variant: the number the stars are filled to, clamped to `0..5`,
+   * independent of the drawn `value`. Pass it with a localised `value` string
+   * (`value="4,5"` with `fillValue={4.5}`) so the text follows the locale and
+   * the fill does not depend on parsing it. Without it a string `value` is
+   * parsed (bidi marks dropped, a comma decimal accepted). Ignored by
+   * `compact` and while there is no rating (`value` empty).
+   */
+  fillValue?: number;
   /**
    * Overrides the composed accessible name ("Rated 4.92 out of 5, 128
    * reviews"), which is English — pass a translated sentence here.