@astryxdesign/core 0.7.7 → 0.7.8-canary.0d54fd3

package/src/hooks/useImageMode.ts

@@ -73,6 +73,8 @@ export function useImageMode(
     mode: 'dark' | 'light' | null;
   } | null>(null);
 
+  // Syncs the mode with the image at `src`. It fetches and decodes the image,
+  // then samples its pixels.
   useEffect(() => {
     if (!src) {
       return;

package/src/hooks/useInputStatusIcon.tsx

@@ -15,9 +15,10 @@
 import {useCallback, useEffect, useState} from 'react';
 import type {ReactNode} from 'react';
 import * as stylex from '@stylexjs/stylex';
-import {Icon, type IconName, type IconSize} from '../Icon';
+import {Icon, type IconSize} from '../Icon/Icon';
+import type {IconName} from '../Icon/globalIconRegistry';
 import type {InputStatus, InputStatusType} from '../Field/types';
-import {useTooltip} from '../Tooltip';
+import {useTooltip} from '../Tooltip/useTooltip';
 import {radiusVars} from '../theme/tokens.stylex';
 import {themeProps} from '../utils/themeProps';
 import {focusOutlineStyles} from '../utils/focusOutline.stylex';

package/src/hooks/useKeyboardHint.tsx

@@ -244,7 +244,7 @@ export function useKeyboardHint(
     [clearDismissTimeout, dismiss, dismissAfterMs, isEnabled, layer],
   );
 
-  // Cleanup on unmount
+  // Releases the dismiss timer and the layer anchor on unmount.
   useEffect(
     () => () => {
       clearDismissTimeout();

package/src/hooks/useLongPress.doc.mjs

@@ -59,7 +59,7 @@ export const docs = {
   ],
   usage: {
     description:
-      'Detects a single-finger press-and-hold and reports where it happened, so touch users can reach affordances that a pointer gets from right-click. iOS Safari never synthesizes a contextmenu event on long-press, which makes this the only touch route into a cursor-positioned surface such as ContextMenu. The press cancels on movement, lift, multi-touch or unmount.',
+      'Detects a single-finger press-and-hold and reports where it happened, so touch users can reach affordances that a pointer gets from right-click. iOS Safari never synthesizes a contextmenu event on long-press, which makes this the only touch route into a cursor-positioned surface such as ContextMenu. The press cancels on movement, lift, multi-touch or unmount. The hold is timed on the touch events\u2019 own timestamps: when a busy page handles the lift late, a finger held for the full delay still reports its long press, before the lift acts.',
     bestPractices: [
       {
         guidance: true,
@@ -102,7 +102,7 @@ export const docsDense = {
   },
   usage: {
     description:
-      'Touch press-and-hold for affordances a pointer reaches by right-click (e.g. ContextMenu). Reports the point so the surface opens under the finger.',
+      "Touch press-and-hold for affordances a pointer reaches by right-click (e.g. ContextMenu). Reports the point so the surface opens under the finger. Timed on the touch events' timestamps: a busy page delays the report, never drops it.",
     bestPractices: [
       {
         guidance: true,

package/src/hooks/useLongPress.ts

@@ -11,6 +11,7 @@
  *   `useMenuPress` for the held-finger menu open
  *
  * SYNC: When modified, update the hooks barrel /packages/core/src/hooks/index.ts
+ * and the detector it wraps, /packages/core/src/hooks/longPressDetector.ts
  */
 
 // iOS Safari sends no `contextmenu` event on a long press. So a long press is
@@ -18,24 +19,24 @@
 //
 // A caller can spread the touch handlers, or call `start`, `moveTo` and
 // `cancel` from its own pointer events, as `useMenuPress` does. Both ways use
-// this hook's hold time, movement tolerance and timer, so a long press means
-// the same thing on a context menu and on a menu trigger.
+// the hold time, movement tolerance and timer of createLongPressDetector. So a
+// long press means the same thing on a context menu and on a menu trigger.
 //
 // The defaults come from the long-press recognizer. The recognizer measures
 // its tolerance as a distance, as UIKit does. This hook measures it on each
 // axis. The context menu's own movement allowance is a guess and is not
 // measured yet (AST-094).
+//
+// The hold is a deadline on the touch events' own clock (longPressDetector.ts).
 
-import {useCallback, useEffect, useRef} from 'react';
+import {useCallback, useEffect, useState} from 'react';
 import {
-  LONG_PRESS_ALLOWABLE_MOVEMENT_PX,
-  LONG_PRESS_DURATION_MS,
-} from '../motion/uikit/longPress';
+  createLongPressDetector,
+  type LongPressTolerance,
+} from './longPressDetector';
+import {useIsomorphicLayoutEffect} from './useIsomorphicLayoutEffect';
 
-// The long-press numbers have one source, shared with the gesture
-// recognizers (motion/uikit/longPress.ts).
-const DEFAULT_DELAY_MS = LONG_PRESS_DURATION_MS;
-const DEFAULT_MOVE_CANCEL_PX = LONG_PRESS_ALLOWABLE_MOVEMENT_PX;
+export type {LongPressTolerance};
 
 export interface UseLongPressOptions {
   /** Fired with the touch start point once the press is held for `delayMs`. */
@@ -48,19 +49,15 @@ export interface UseLongPressOptions {
   moveCancelPx?: number;
 }
 
-/**
- * @internal A press's own movement tolerance, for a core caller that decides
- * it as the press starts (useMenuPress's trigger). Not in the hooks entry.
- */
-export interface LongPressTolerance {
-  moveCancelPx?: number;
-}
-
 export interface UseLongPressHandlers {
   onTouchStart: (e: React.TouchEvent) => void;
   onTouchMove: (e: React.TouchEvent) => void;
-  onTouchEnd: () => void;
-  onTouchCancel: () => void;
+  /**
+   * The lift. Pass the event, so a press it is stamped past (its timer held
+   * back by a busy page) still reports first. Spreading the handlers does.
+   */
+  onTouchEnd: (e?: React.TouchEvent) => void;
+  onTouchCancel: (e?: React.TouchEvent) => void;
   /**
    * Begin detection at a point, for a caller driving this from its own
    * pointer events rather than the touch handlers above.
@@ -109,109 +106,22 @@ export function useLongPress(
 export function useLongPressDetector(
   options: UseLongPressOptions,
 ): LongPressDetectorHandlers {
-  const {
-    onLongPress,
-    disabled = false,
-    delayMs = DEFAULT_DELAY_MS,
-    moveCancelPx = DEFAULT_MOVE_CANCEL_PX,
-  } = options;
-
-  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const startRef = useRef<{x: number; y: number} | null>(null);
-  // The press in progress's tolerance, when its caller chose one at start.
-  const pressToleranceRef = useRef<LongPressTolerance | null>(null);
-  // Keep the latest callback without re-creating handlers on every render.
-  const onLongPressRef = useRef(onLongPress);
-  onLongPressRef.current = onLongPress;
-
-  const clear = useCallback(() => {
-    if (timerRef.current != null) {
-      clearTimeout(timerRef.current);
-      timerRef.current = null;
-    }
-    startRef.current = null;
-  }, []);
-
-  const start = useCallback(
-    (point: {x: number; y: number}, tolerance?: LongPressTolerance) => {
-      if (disabled) {
-        return;
-      }
-      // Clear a stale timer first, then record the start point. The clear
-      // also sets startRef to null.
-      clear();
-      startRef.current = {x: point.x, y: point.y};
-      pressToleranceRef.current = tolerance ?? null;
-      timerRef.current = setTimeout(() => {
-        const from = startRef.current;
-        if (from == null) {
-          return;
-        }
-        onLongPressRef.current({x: from.x, y: from.y});
-      }, delayMs);
-    },
-    [disabled, delayMs, clear],
-  );
-
-  const moveTo = useCallback(
-    (point: {x: number; y: number}): boolean => {
-      const from = startRef.current;
-      if (from == null) {
-        return false;
-      }
-      // This press's own tolerance when its caller chose one, on either axis.
-      const limit = pressToleranceRef.current?.moveCancelPx ?? moveCancelPx;
-      if (
-        Math.abs(point.x - from.x) > limit ||
-        Math.abs(point.y - from.y) > limit
-      ) {
-        clear();
-        return false;
-      }
-      return true;
-    },
-    [moveCancelPx, clear],
-  );
-
-  const onTouchStart = useCallback(
-    (e: React.TouchEvent) => {
-      if (disabled) {
-        return;
-      }
-      if (e.touches.length !== 1) {
-        clear();
-        return;
-      }
-      const touch = e.touches[0];
-      start({x: touch.clientX, y: touch.clientY});
-    },
-    [disabled, clear, start],
-  );
-
-  const onTouchMove = useCallback(
-    (e: React.TouchEvent) => {
-      if (startRef.current == null) {
-        return;
-      }
-      if (e.touches.length !== 1) {
-        clear();
-        return;
-      }
-      const touch = e.touches[0];
-      moveTo({x: touch.clientX, y: touch.clientY});
-    },
-    [clear, moveTo],
-  );
-
-  useEffect(() => clear, [clear]);
+  const [detector] = useState(() => createLongPressDetector(options));
+  // The detector reads only committed options. A render that React discards
+  // never reaches it.
+  useIsomorphicLayoutEffect(() => {
+    detector.setOptions(options);
+  });
+  // The detector's pending timer ends with the component.
+  useEffect(() => detector.cancel, [detector]);
 
   return {
-    onTouchStart,
-    onTouchMove,
-    onTouchEnd: clear,
-    onTouchCancel: clear,
-    start,
-    moveTo,
-    cancel: clear,
+    onTouchStart: detector.touchStart,
+    onTouchMove: detector.touchMove,
+    onTouchEnd: detector.touchEnd,
+    onTouchCancel: detector.touchEnd,
+    start: detector.start,
+    moveTo: detector.moveTo,
+    cancel: detector.cancel,
   };
 }

package/src/hooks/useMenuHover.ts

@@ -297,6 +297,7 @@ export function useMenuHover<T extends HTMLElement = HTMLElement>(
     };
   }, [clearTimeouts, hideAndRestoreFocus]);
 
+  // Releases the hover timers on unmount.
   useEffect(() => {
     return () => clearTimeouts();
   }, [clearTimeouts]);

package/src/hooks/useMenuPress.ts

@@ -831,6 +831,8 @@ export function useMenuPress(options: UseMenuPressOptions): UseMenuPressReturn {
     endGesture();
   }, [endGesture, step]);
 
+  // Syncs the document listeners of the menu gesture counter with this mount.
+  // Unmount ends the gesture.
   useEffect(() => {
     // Install the gesture counter's listeners before the first press.
     currentGesture();

package/src/hooks/useOverflow.ts

@@ -251,7 +251,8 @@ export function useOverflow(
     [calculate],
   );
 
-  // Recalculate when itemCount changes
+  // Syncs the visible count with the rendered layout. It measures again after
+  // the items change.
   useIsomorphicLayoutEffect(() => {
     calculate();
   }, [calculate]);

package/src/hooks/usePressFeedback.ts

@@ -50,6 +50,7 @@ import {installPressFeedback, pressableProps} from '../utils/pressFeedback';
  * ```
  */
 export function usePressFeedback(): typeof pressableProps {
+  // Syncs the shared document listener for press feedback with this mount.
   useEffect(() => installPressFeedback(), []);
   return pressableProps;
 }

package/src/hooks/useResolvedRequired.ts

@@ -29,6 +29,9 @@ import {FormLayoutContext} from '../FormLayout/FormLayoutContext';
  * Semantics only: this drives `aria-required`, never the native `required`
  * attribute, so a layout-level default can't silently switch on browser
  * validation bubbles. `isOptional` takes precedence, matching `FieldLabel`.
+ *
+ * CheckboxInput and Switch do not use this hook: an unchecked box or an off
+ * switch is an answer, so a form default gives them no required state.
  */
 export function useResolvedRequired({
   isRequired = false,

package/src/hooks/useScrollLock.doc.mjs

@@ -4,23 +4,50 @@
 export const docs = {
   name: 'useScrollLock',
   displayName: 'useScrollLock',
-  keywords: ['scroll', 'lock', 'modal', 'dialog', 'body', 'prevent', 'background', 'ios', 'safari', 'fixed', 'scrollbar', 'gutter', 'layout shift', 'reflow'],
+  keywords: [
+    'scroll',
+    'lock',
+    'modal',
+    'dialog',
+    'page',
+    'prevent',
+    'background',
+    'ios',
+    'safari',
+    'touch',
+    'scrollbar',
+    'gutter',
+    'layout shift',
+    'reflow',
+  ],
   params: [
     {
       name: 'isLocked',
       type: 'boolean',
-      description: 'whether body scroll should be locked.',
+      description: 'whether page scroll should be locked.',
       required: true,
     },
   ],
   returns: [],
   usage: {
     description:
-      'Locks body scroll when active by pinning the body with position: fixed. This prevents background scrolling behind modals and dialogs, which is necessary for iOS Safari where overscroll-behavior: contain does not work. Restores the original scroll position when unlocked. Pinning hides the document scrollbar, so where that scrollbar takes layout space (desktop) the hook holds its gutter open with scrollbar-gutter: stable for the duration of the lock. The page, including any position: fixed chrome, does not shift sideways.',
+      'Locks page scroll while active and keeps the page where it is. The page gets overflow: hidden (on the root, or on body when its own overflow is the one the viewport uses), which stops wheel, keyboard and scrollbar scrolling, and overscroll-behavior-y: none on the root and body, which stops the overscroll bounce while the lock holds. Where the primary pointer is coarse (phones and tablets), a one-finger pan that would scroll the page is cancelled, because iOS Safari scrolls an overflow: hidden page under a finger; pans that a scroller inside the overlay can take, drags on a native range input, pinch-zoom, and one-finger drags on a pinch-zoomed page (which pan the zoomed view) still work. The scroll offset never changes, so nothing jumps when the lock starts or ends, and iOS Safari keeps its toolbar as it was. Where the hidden scrollbar takes layout space (desktop), the hook holds its gutter open with scrollbar-gutter: stable, so the page, including any position: fixed chrome, does not shift sideways.',
     bestPractices: [
-      { guidance: true, description: 'Use when opening full-screen modals or dialogs to prevent background content from scrolling.' },
-      { guidance: true, description: 'Pass the same boolean that controls dialog visibility (e.g., isOpen) as the isLocked parameter.' },
-      { guidance: false, description: 'Use for non-modal overlays like popovers or tooltips; users should be able to scroll away from those.' },
+      {
+        guidance: true,
+        description:
+          'Use when opening full-screen modals or dialogs to prevent background content from scrolling.',
+      },
+      {
+        guidance: true,
+        description:
+          'Pass the same boolean that controls dialog visibility (e.g., isOpen) as the isLocked parameter.',
+      },
+      {
+        guidance: false,
+        description:
+          'Use for non-modal overlays like popovers or tooltips; users should be able to scroll away from those.',
+      },
     ],
   },
   relatedComponents: ['Dialog'],
@@ -32,17 +59,29 @@ export const docs = {
 /** @type {import('@astryxdesign/cli/authoring').HookTranslationDoc} */
 export const docsDense = {
   description:
-    'Locks body scroll when active by pinning body w/ position: fixed. Prevents background scrolling behind modals + dialogs, necessary for iOS Safari where overscroll-behavior: contain does not work. Restores original scroll position when unlocked. Holds the hidden scrollbar\'s gutter open (scrollbar-gutter: stable) so the page (incl. position: fixed chrome) does not shift sideways.',
+    "Locks page scroll while active, page stays where it is: overflow: hidden on the root, or on body when its own overflow propagates (wheel, keyboard, scrollbar) + overscroll-behavior-y: none on root and body (no overscroll bounce while locked) + cancels 1-finger pans that would scroll the page (iOS Safari scrolls overflow: hidden pages under a finger); overlay scrollers, range inputs, pinch-zoom + drags on a zoomed page still work. Offset never changes: no jump, iOS toolbar unchanged. Holds the hidden scrollbar's gutter open (scrollbar-gutter: stable) so the page (incl. position: fixed chrome) does not shift sideways.",
   paramDescriptions: {
-    isLocked: 'whether body scroll should be locked.',
+    isLocked: 'whether page scroll should be locked.',
   },
   usage: {
     description:
-      'Locks body scroll when active by pinning body w/ position: fixed. Prevents background scrolling behind modals + dialogs, necessary for iOS Safari where overscroll-behavior: contain does not work. Restores original scroll position when unlocked. Holds the hidden scrollbar\'s gutter open (scrollbar-gutter: stable) so the page (incl. position: fixed chrome) does not shift sideways.',
+      "Locks page scroll while active, page stays where it is: overflow: hidden on the root, or on body when its own overflow propagates (wheel, keyboard, scrollbar) + overscroll-behavior-y: none on root and body (no overscroll bounce while locked) + cancels 1-finger pans that would scroll the page (iOS Safari scrolls overflow: hidden pages under a finger); overlay scrollers, range inputs, pinch-zoom + drags on a zoomed page still work. Offset never changes: no jump, iOS toolbar unchanged. Holds the hidden scrollbar's gutter open (scrollbar-gutter: stable) so the page (incl. position: fixed chrome) does not shift sideways.",
     bestPractices: [
-      { guidance: true, description: 'Use when opening full-screen modals / dialogs to prevent background content from scrolling.' },
-      { guidance: true, description: 'Pass same boolean that controls dialog visibility (e.g. isOpen) as isLocked parameter.' },
-      { guidance: false, description: 'Use for non-modal overlays like popovers / tooltips; users should be able to scroll away from those.' },
+      {
+        guidance: true,
+        description:
+          'Use when opening full-screen modals / dialogs to prevent background content from scrolling.',
+      },
+      {
+        guidance: true,
+        description:
+          'Pass same boolean that controls dialog visibility (e.g. isOpen) as isLocked parameter.',
+      },
+      {
+        guidance: false,
+        description:
+          'Use for non-modal overlays like popovers / tooltips; users should be able to scroll away from those.',
+      },
     ],
   },
 };

package/src/hooks/useScrollLock.ts

@@ -4,46 +4,45 @@
 
 /**
  * @file useScrollLock.ts
- * @input Uses React useEffect
- * @output Exports useScrollLock hook for locking body scroll
- * @position Core hook; used by Dialog to prevent background scrolling
- *
- * Locks body scroll when active by pinning the body with position:fixed.
- * This is needed because overscroll-behavior:contain doesn't work on iOS Safari.
+ * @input React useEffect, rootScrollStyles, gestures/pageHold with the pan
+ *   decision, and the scrollbar gutter hold
+ * @output useScrollLock, which locks page scroll behind a modal
+ * @position Core hook; used by Dialog, BottomSheet, Drawer, Lightbox and
+ *   MobileNav
  *
  * SYNC: When modified, update:
  * - /packages/core/src/hooks/index.ts
  * - /packages/core/src/hooks/scrollbarGutter.ts
+ * - /packages/core/src/hooks/rootScrollStyles.ts
+ * - /packages/core/src/gestures/pageHold.ts (holdPageScroll)
+ * - /packages/core/src/hooks/useScrollLockImports.test.ts
  */
 
 import {useEffect} from 'react';
+import {claimRootScrollStyle, reportScrollLock} from './rootScrollStyles';
+import {holdPageScroll} from '../gestures/pageHold';
+import {isPageZoomedIn, isPanAbsorbedBeforePage} from './scrollLockTouchGuard';
 import {holdScrollbarGutter, type ScrollbarGutterHold} from './scrollbarGutter';
 
-interface ScrollLockSnapshot {
-  scrollX: number;
-  scrollY: number;
-  overflow: string;
-  position: string;
-  top: string;
-  left: string;
-  right: string;
+interface ActiveLock {
+  releaseRootStyle: () => void;
+  releasePageHold: () => void;
   gutter: ScrollbarGutterHold;
 }
 
 let lockCount = 0;
-let originalBodyState: ScrollLockSnapshot | null = null;
+let activeLock: ActiveLock | null = null;
 
 /**
- * Locks body scroll when `isLocked` is true.
- *
- * Pins the body with `position: fixed` to prevent background scrolling,
- * which is necessary for iOS Safari where `overscroll-behavior: contain`
- * does not prevent body scroll behind modals. Restores scroll position
- * on unlock.
+ * Locks page scroll while `isLocked` is true.
  *
- * Pinning also hides the document's scrollbar, so the gutter that scrollbar
- * occupied is held open for the duration of the lock — without it the page
- * reflows sideways by ~15px the moment an overlay opens.
+ * The page keeps its scroll offset, so nothing jumps on lock or unlock. iOS
+ * Safari scrolls an `overflow: hidden` page under a finger. So where the
+ * primary pointer is coarse (phones and tablets), the lock cancels a
+ * one-finger pan that would reach the page.
+ * Pans that a scroller in the overlay takes, and two-finger zoom, go through.
+ * The gutter of a classic scrollbar stays open, so the page does not shift
+ * sideways.
  *
  * @example
  * ```
@@ -51,59 +50,53 @@ let originalBodyState: ScrollLockSnapshot | null = null;
  * ```
  */
 export function useScrollLock(isLocked: boolean): void {
+  // Syncs the document's scroll lock with `isLocked`. A count of holders keeps
+  // the page locked until the last one releases.
   useEffect(() => {
     if (!isLocked) {
       return;
     }
 
-    const {body} = document;
-
     if (lockCount === 0) {
-      const scrollX = window.scrollX;
-      const scrollY = window.scrollY;
-
-      // Taken before the pinning styles below hide the scrollbar.
-      const gutter = holdScrollbarGutter(body);
-
-      originalBodyState = {
-        scrollX,
-        scrollY,
-        overflow: body.style.overflow,
-        position: body.style.position,
-        top: body.style.top,
-        left: body.style.left,
-        right: body.style.right,
-        gutter,
-      };
-
-      body.style.overflow = 'hidden';
-      body.style.position = 'fixed';
-      body.style.top = `-${scrollY}px`;
-      body.style.left = '0';
-      body.style.right = '0';
-
+      // The hold measures before the lock writes a style, so the lock forces no
+      // layout of its own. `settle` writes the gutter with the styles below.
+      const gutter = holdScrollbarGutter(document.documentElement);
+      // `overscroll-behavior-y: none` also keeps the browser's own
+      // pull-to-refresh (Chrome on Android) from reloading the page behind
+      // the overlay.
+      const releaseRootStyle = claimRootScrollStyle({
+        overflow: 'hidden',
+        overscrollBehaviorY: 'none',
+      });
+      // The hold asks the gesture host only if one exists, so the lock does
+      // not bring the host into every overlay's import.
+      const releasePageHold = holdPageScroll(
+        document,
+        // A drag on a pinch-zoomed page pans the zoomed view: it goes
+        // through, so a zoomed-in reader can move around the overlay.
+        (origin, dx, dy) =>
+          !isPageZoomedIn(document) && !isPanAbsorbedBeforePage(origin, dx, dy),
+      );
       gutter.settle();
+      activeLock = {releaseRootStyle, releasePageHold, gutter};
     }
 
     lockCount += 1;
+    reportScrollLock(1);
 
     return () => {
       lockCount -= 1;
+      reportScrollLock(-1);
 
-      if (lockCount !== 0 || originalBodyState == null) {
+      if (lockCount !== 0 || activeLock == null) {
         return;
       }
 
-      const state = originalBodyState;
-      originalBodyState = null;
-
-      body.style.overflow = state.overflow;
-      body.style.position = state.position;
-      body.style.top = state.top;
-      body.style.left = state.left;
-      body.style.right = state.right;
-      state.gutter.release();
-      window.scrollTo(state.scrollX, state.scrollY);
+      const lock = activeLock;
+      activeLock = null;
+      lock.releasePageHold();
+      lock.releaseRootStyle();
+      lock.gutter.release();
     };
   }, [isLocked]);
 }

package/src/hooks/useScrollableArea.ts

@@ -216,6 +216,8 @@ export function useScrollableArea({
   const getComposedViewportRef = useStableComposedRef(viewportRef);
   const getComposedContentRef = useStableComposedRef(contentRef);
 
+  // Syncs the scroll geometry with the viewport and content nodes. It measures
+  // them, then follows resize, scroll, transition and font events.
   useIsomorphicLayoutEffect(() => {
     if (viewport == null || content == null) {
       return;
@@ -430,6 +432,8 @@ export function useScrollableArea({
   // commit. A loss waits for the next frame.
   const previousOverflowRef = useRef<LogicalOverflowGeometry>(INITIAL_OVERFLOW);
   const previousMappingRef = useRef<LogicalAxisMapping>(INITIAL_MAPPING);
+  // Measures the layout again when overflow starts or the writing-mode mapping
+  // changes. A new scrollbar gutter changes the geometry.
   useIsomorphicLayoutEffect(() => {
     const previous = previousOverflowRef.current;
     const hasGainedOverflow =

package/src/hooks/useStreamingText.ts

@@ -178,6 +178,8 @@ export function useStreamingText(
     '(prefers-reduced-motion: reduce)',
   );
 
+  // Syncs the revealed text with an animation-frame clock while the text
+  // streams.
   useEffect(() => {
     if (!isStreaming || speed === 'instant' || prefersReducedMotion) {
       return;

package/src/i18n/generated-english/PowerSearch/PowerSearchBottomSheet.generated.ts

@@ -0,0 +1,43 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @generated by scripts/generate-i18n-runtime.mjs from packages/core/locales/en.json,
+ * holding the English for the catalog keys named in packages/core/src/PowerSearch/PowerSearchBottomSheet.tsx.
+ * Do not edit by hand. Run `pnpm generate:i18n-runtime` instead.
+ */
+
+const english: Readonly<Record<string, string>> = {
+  "@astryx.powersearch.allFiltersRemoved": "All filters removed",
+  "@astryx.powersearch.editableFiltersRemoved": "Editable filters removed",
+  "@astryx.powersearch.editor.apply": "Apply",
+  "@astryx.powersearch.editor.cancel": "Cancel",
+  "@astryx.powersearch.editor.operator": "Operator",
+  "@astryx.powersearch.sheet.addFilter": "Add filter",
+  "@astryx.powersearch.sheet.clearAll": "Clear all",
+  "@astryx.powersearch.sheet.clearAllCancel": "Keep filters",
+  "@astryx.powersearch.sheet.clearAllConfirm": "Clear filters",
+  "@astryx.powersearch.sheet.clearAllDescription": "This removes all editable filters from this search.",
+  "@astryx.powersearch.sheet.clearAllTitle": "Clear all filters?",
+  "@astryx.powersearch.sheet.done": "Done",
+  "@astryx.powersearch.sheet.editableFiltersClearedWithCount": "Editable filters removed. {resultCount}",
+  "@astryx.powersearch.sheet.fieldOperator": "{field} {operator}",
+  "@astryx.powersearch.sheet.filterUnavailable": "This filter is no longer available",
+  "@astryx.powersearch.sheet.filtersClearedWithCount": "All filters removed. {resultCount}",
+  "@astryx.powersearch.sheet.filtersTitle": "Filters",
+  "@astryx.powersearch.sheet.labelValue": "{label} {value}",
+  "@astryx.powersearch.sheet.noFilters": "No filters applied",
+  "@astryx.powersearch.sheet.noFiltersDescription": "Add a filter to narrow your results and find what you need faster.",
+  "@astryx.powersearch.sheet.noMatchingFields": "No filters match your search",
+  "@astryx.powersearch.sheet.noResults": "No results found",
+  "@astryx.powersearch.sheet.removeFilter": "Remove {field} filter",
+  "@astryx.powersearch.sheet.search": "Search",
+  "@astryx.powersearch.sheet.searchFields": "Search filters",
+  "@astryx.powersearch.sheet.searchFieldsPlaceholder": "Search filters…",
+  "@astryx.powersearch.sheet.searchResults": "Search results",
+  "@astryx.powersearch.sheet.tryDifferentSearch": "Try a different search.",
+  "@astryx.powersearch.sheet.ungroupedFields": "General",
+  "@astryx.tokenizer.tokenAdded": "Added {label}",
+  "@astryx.tokenizer.tokenRemoved": "Removed {label}"
+};
+
+export default english;

package/src/i18n/generated-english/PowerSearch/PowerSearchValueEditor.generated.ts

@@ -7,6 +7,12 @@
  */
 
 const english: Readonly<Record<string, string>> = {
+  "@astryx.powersearch.sheet.relativeDaysAgo": "{count, number} {count, plural, one {day} other {days}} ago",
+  "@astryx.powersearch.sheet.relativeDaysFromNow": "{count, number} {count, plural, one {day} other {days}} from now",
+  "@astryx.powersearch.sheet.relativeMonthsAgo": "{count, number} {count, plural, one {month} other {months}} ago",
+  "@astryx.powersearch.sheet.relativeMonthsFromNow": "{count, number} {count, plural, one {month} other {months}} from now",
+  "@astryx.powersearch.sheet.relativeWeeksAgo": "{count, number} {count, plural, one {week} other {weeks}} ago",
+  "@astryx.powersearch.sheet.relativeWeeksFromNow": "{count, number} {count, plural, one {week} other {weeks}} from now",
   "@astryx.powersearch.valueEditor.addValuesPlaceholder": "Add values…",
   "@astryx.powersearch.valueEditor.date": "Date",
   "@astryx.powersearch.valueEditor.dateRange": "date range",