@astryxdesign/core 0.7.7-canary.bf14580 → 0.7.7-canary.c19ca12

package/src/hooks/useAnimator.doc.mjs

@@ -0,0 +1,109 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').HookDoc} */
+export const docs = {
+  name: 'useAnimator',
+  displayName: 'useAnimator',
+  keywords: [
+    'animate',
+    'animation',
+    'animator',
+    'spring',
+    'decay',
+    'momentum',
+    'fling',
+    'motion',
+    'transform',
+    'opacity',
+    'drag',
+    'card',
+  ],
+  params: [
+    {
+      name: 'ref',
+      type: 'RefObject<HTMLElement | null>',
+      description:
+        'The ref of the one element to animate, the same ref you pass to the element: another hook, such as a gesture hook, can take it too, so a drag and an animation share one element. After every render the animator follows the element behind it. When the element unmounts its motion stops and its values return to rest, so a remount starts at rest, and so does a node that replaces it. Before the element mounts, and while it is unmounted, every call does nothing and `animate` and `decay` resolve at once.',
+      required: true,
+    },
+  ],
+  returns: [
+    {
+      name: 'animator',
+      type: 'AnimatorHandle',
+      description:
+        "The element's animator, the same object on every render: `animate(target, {velocity?})` springs channels to a target on the state-change motion Astryx's components use, `decay(velocity)` coasts them from a release velocity, `set(values)` jumps them, `get()` and `getVelocity()` read them, and `stop()` halts them. The channels are `x` and `y` (px), `scale` (1 at the element's size), `rotate` (degrees) and `opacity` (0 to 1). `animate` and `decay` return a promise that resolves when the motion ends. Calling it never re-renders the component. Calls before the ref attaches do nothing and resolve at once.",
+    },
+  ],
+  usage: {
+    description:
+      "Animates one element with the motion Astryx's own components use. Call `animator.animate` to spring an element to new values on the state-change motion, `animator.decay` to fling it with the momentum of a released scroll view, and `animator.set` to move it directly, so a card can follow a finger, snap back and be thrown away. To animate an area's layout as its items change, use `useAnimatedLayout`; for what a component already animates, such as a sheet's detents or a carousel's snapping, use the component's own props. Outside React, use `createAnimator`.",
+    bestPractices: [
+      {
+        guidance: true,
+        description:
+          'Call the animator from event handlers and effects: it lives outside render, so animating never re-renders the component.',
+      },
+      {
+        guidance: true,
+        description:
+          'Start every `animate` that follows a drag with the release velocity, so the element carries on as it was thrown.',
+      },
+      {
+        guidance: true,
+        description:
+          'Reach every state an animation shows without the animation too: a key, a button or a menu item that calls the same code.',
+      },
+      {
+        guidance: false,
+        description:
+          'Keep the animated values in React state: read them with `animator.get()` when you need them.',
+      },
+    ],
+    accessibility: [
+      {
+        name: 'Keyboard and assistive technology',
+        category: 'Keyboard',
+        description:
+          'An animator moves an element; it adds no way to act. Give every action an animation stands for a control a keyboard and a screen reader can reach, such as a button that discards a card, and have it call `animate`, which Reduce Motion turns into a fade in place. Keep `decay` for a throw the person made: Reduce Motion keeps the momentum of a coast, as it continues that throw. Keep focus on an element that stays on screen: move it before you fling its element away.',
+      },
+      {
+        name: 'Reduce Motion',
+        category: 'Content',
+        criterion: '2.3.3 Animation from Interactions',
+        description:
+          'When the person asks for reduced motion, every call is planned for them. On a touch screen a move or a scale becomes a short opacity cross-fade: the element fades out where it was and fades back in where it lands. With a mouse it lands at once. A decay of `x` and `y` keeps its momentum, as it continues the throw the person made; a decay of `scale`, `rotate` or `opacity` is planned like a move. No option turns this off.',
+      },
+    ],
+  },
+  relatedHooks: ['useAnimatedLayout'],
+  importPath: '@astryxdesign/core/hooks',
+  category: 'interaction',
+};
+
+/** @type {import('@astryxdesign/cli/authoring').HookTranslationDoc} */
+export const docsDense = {
+  description:
+    "Animates the element behind ref (x, y, scale, rotate, opacity) with Astryx's motion; returns the animator.",
+  paramDescriptions: {
+    ref: 'The element ref; share it with a gesture hook to drag and animate one element.',
+  },
+  returnDescriptions: {
+    animator:
+      'animate(target, {velocity?}), decay(velocity), set, get, getVelocity, stop; stable, never re-renders.',
+  },
+  usage: {
+    description:
+      'Spring with animate, fling with decay, follow a finger with set. Reduce Motion: a cross-fade on touch, at once with a mouse; decay keeps its momentum.',
+    bestPractices: [
+      {
+        guidance: true,
+        description: 'Pass the release velocity to animate after a drag.',
+      },
+      {
+        guidance: false,
+        description: 'Keep animated values in state; read animator.get().',
+      },
+    ],
+  },
+};

package/src/hooks/useAnimator.ts

@@ -0,0 +1,67 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file useAnimator.ts
+ * @input React (useState), the element ref the caller owns, the public
+ *   animator factory (animator/createAnimator.ts) and useAttachment
+ * @output Exports `useAnimator(ref)`: the public animator for the element
+ *   behind `ref`
+ * @position Public hook, exported from `@astryxdesign/core/hooks`. A thin
+ *   wrapper over `createAnimator` with no behavior of its own.
+ *
+ * SYNC: When modified, update:
+ * - /packages/core/src/hooks/useAnimator.test.tsx
+ * - /packages/core/src/hooks/useAnimator.doc.mjs
+ */
+
+import {useState, type RefObject} from 'react';
+import {
+  createAttachableAnimator,
+  type AnimatorHandle,
+} from '../animator/createAnimator';
+import {useAttachment} from './useAttachment';
+
+/**
+ * Animates the element behind `ref` with the motion Core uses. Call
+ * `animate`, `decay`, `set`, `get`, `getVelocity` or `stop` on the returned
+ * animator from event handlers and effects. Pass the same `ref` to a gesture
+ * hook to drag and animate one element.
+ *
+ * The hook makes the animator once, and animating never re-renders the
+ * component. After each commit, the animator follows the element behind
+ * `ref`, also a node that replaces it. An unmount stops running motion and
+ * drops the values. A remount, or a node that replaces the element, starts
+ * at rest. While no element is attached, every call does nothing, and
+ * `animate` and `decay` resolve at once.
+ *
+ * @example
+ * ```
+ * const ref = useRef<HTMLDivElement>(null);
+ * const animator = useAnimator(ref);
+ * return (
+ *   <div ref={ref} onClick={() => animator.animate({scale: 1.2})}>
+ *     Card
+ *   </div>
+ * );
+ * ```
+ */
+export function useAnimator(
+  ref: RefObject<HTMLElement | null>,
+): AnimatorHandle {
+  const [{handle, attach}] = useState(() => {
+    const {animator, attach: attachElement} = createAttachableAnimator();
+    // The handle without `destroy`: the hook owns the element's lifetime.
+    const {destroy: _destroy, ...handle} = animator;
+    return {
+      handle,
+      attach: (element: HTMLElement) => {
+        attachElement(element);
+        return () => attachElement(null);
+      },
+    };
+  });
+  useAttachment(ref, attach, null);
+  return handle;
+}

package/src/hooks/useAttachment.ts

@@ -9,7 +9,7 @@
  * @output Exports useAttachment and useAttachmentPair (two elements): they keep
  *   the attach function bound to the nodes the refs hold across commits
  * @position Internal React helper, not in hooks/index.ts: the one attach and
- *   release lifecycle of the gesture hooks and the pager
+ *   release lifecycle of the gesture hooks, the pager and useAnimator
  *
  * SYNC: When modified, update gestures/__tests__/useGestureRecognizer.test.tsx,
  * gestures/__tests__/useFingerScroll.test.tsx and

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/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

@@ -25,6 +25,11 @@
 // 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' timestamps, on the clock of the
+// touch's own window. A busy main thread can delay the timer past the
+// deadline. A touch stamped after the deadline then reports the press before
+// it acts.
 
 import {useCallback, useEffect, useRef} from 'react';
 import {
@@ -37,6 +42,41 @@ import {
 const DEFAULT_DELAY_MS = LONG_PRESS_DURATION_MS;
 const DEFAULT_MOVE_CANCEL_PX = LONG_PRESS_ALLOWABLE_MOVEMENT_PX;
 
+/** The part of a window's performance timeline a press reads. */
+type EventClock = Pick<Performance, 'now'>;
+
+function clockOf(e: React.TouchEvent): EventClock | null {
+  const view = e.view as unknown as {performance?: EventClock} | null;
+  return (
+    view?.performance ??
+    (typeof performance === 'undefined' ? null : performance)
+  );
+}
+
+/**
+ * An event's time on its window's clock. jsdom stamps events with
+ * `Date.now()`. The hook reads the age of such a stamp on that clock, so a
+ * frozen system time keeps the hold's length. A stamp nearer `Date.now()` than
+ * the window's clock is that kind of stamp.
+ */
+function timeOn(
+  clock: EventClock | null,
+  timeStamp: number | undefined,
+): number | undefined {
+  // A stamp of 0 means the event carries no time, so the hold falls back to
+  // the full delay on the page's timer.
+  if (timeStamp == null || !Number.isFinite(timeStamp) || timeStamp <= 0) {
+    return undefined;
+  }
+  if (
+    clock != null &&
+    Math.abs(Date.now() - timeStamp) < Math.abs(clock.now() - timeStamp)
+  ) {
+    return clock.now() - (Date.now() - timeStamp);
+  }
+  return timeStamp;
+}
+
 export interface UseLongPressOptions {
   /** Fired with the touch start point once the press is held for `delayMs`. */
   onLongPress: (point: {x: number; y: number}) => void;
@@ -59,8 +99,12 @@ export interface LongPressTolerance {
 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.
@@ -118,6 +162,9 @@ export function useLongPressDetector(
 
   const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const startRef = useRef<{x: number; y: number} | null>(null);
+  // The pending press's deadline and clock, when it started from a touch.
+  const deadlineRef = useRef<number | null>(null);
+  const clockRef = useRef<EventClock | 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.
@@ -130,10 +177,39 @@ export function useLongPressDetector(
       timerRef.current = null;
     }
     startRef.current = null;
+    deadlineRef.current = null;
+    clockRef.current = null;
   }, []);
 
-  const start = useCallback(
-    (point: {x: number; y: number}, tolerance?: LongPressTolerance) => {
+  const fire = useCallback(() => {
+    const from = startRef.current;
+    if (from == null) {
+      return;
+    }
+    clear();
+    onLongPressRef.current({x: from.x, y: from.y});
+  }, [clear]);
+
+  // A touch stamped at or past the deadline: the finger was down for the
+  // whole delay, so the press reports before the touch acts.
+  const fireIfDue = useCallback(
+    (e: React.TouchEvent | undefined) => {
+      const deadline = deadlineRef.current;
+      const eventTime =
+        e == null ? undefined : timeOn(clockRef.current, e.timeStamp);
+      if (deadline != null && eventTime != null && eventTime >= deadline) {
+        fire();
+      }
+    },
+    [fire],
+  );
+
+  const begin = useCallback(
+    (
+      point: {x: number; y: number},
+      tolerance: LongPressTolerance | undefined,
+      started: {at: number; clock: EventClock} | undefined,
+    ) => {
       if (disabled) {
         return;
       }
@@ -142,15 +218,40 @@ export function useLongPressDetector(
       clear();
       startRef.current = {x: point.x, y: point.y};
       pressToleranceRef.current = tolerance ?? null;
-      timerRef.current = setTimeout(() => {
-        const from = startRef.current;
-        if (from == null) {
+      const clock = started?.clock ?? null;
+      const deadline = started == null ? null : started.at + delayMs;
+      clockRef.current = clock;
+      deadlineRef.current = deadline;
+      // Wait only for the rest of the hold, so a touch handled late does not
+      // lengthen it, and never past the delay.
+      const remaining =
+        clock == null || deadline == null
+          ? delayMs
+          : Math.min(delayMs, Math.max(0, deadline - clock.now()));
+      // A late timer yields to queued input once, so a lift stamped before
+      // the deadline still cancels the press. The gesture arena does the same.
+      const run = (mayYield: boolean) => {
+        timerRef.current = null;
+        if (
+          mayYield &&
+          clock != null &&
+          deadline != null &&
+          clock.now() > deadline
+        ) {
+          timerRef.current = setTimeout(() => run(false), 0);
           return;
         }
-        onLongPressRef.current({x: from.x, y: from.y});
-      }, delayMs);
+        fire();
+      };
+      timerRef.current = setTimeout(() => run(true), remaining);
     },
-    [disabled, delayMs, clear],
+    [disabled, delayMs, clear, fire],
+  );
+
+  const start = useCallback(
+    (point: {x: number; y: number}, tolerance?: LongPressTolerance) =>
+      begin(point, tolerance, undefined),
+    [begin],
   );
 
   const moveTo = useCallback(
@@ -179,17 +280,29 @@ export function useLongPressDetector(
         return;
       }
       if (e.touches.length !== 1) {
+        // A second finger ends the press, unless the press was already due.
+        fireIfDue(e);
         clear();
         return;
       }
       const touch = e.touches[0];
-      start({x: touch.clientX, y: touch.clientY});
+      const clock = clockOf(e);
+      const at = timeOn(clock, e.timeStamp);
+      begin(
+        {x: touch.clientX, y: touch.clientY},
+        undefined,
+        clock == null || at == null ? undefined : {at, clock},
+      );
     },
-    [disabled, clear, start],
+    [disabled, clear, begin, fireIfDue],
   );
 
   const onTouchMove = useCallback(
     (e: React.TouchEvent) => {
+      if (startRef.current == null) {
+        return;
+      }
+      fireIfDue(e);
       if (startRef.current == null) {
         return;
       }
@@ -200,7 +313,15 @@ export function useLongPressDetector(
       const touch = e.touches[0];
       moveTo({x: touch.clientX, y: touch.clientY});
     },
-    [clear, moveTo],
+    [clear, moveTo, fireIfDue],
+  );
+
+  const onTouchEnd = useCallback(
+    (e?: React.TouchEvent) => {
+      fireIfDue(e);
+      clear();
+    },
+    [clear, fireIfDue],
   );
 
   useEffect(() => clear, [clear]);
@@ -208,8 +329,8 @@ export function useLongPressDetector(
   return {
     onTouchStart,
     onTouchMove,
-    onTouchEnd: clear,
-    onTouchCancel: clear,
+    onTouchEnd,
+    onTouchCancel: onTouchEnd,
     start,
     moveTo,
     cancel: clear,

package/src/hooks/useMenuPress.ts

@@ -483,7 +483,10 @@ export function useMenuPress(options: UseMenuPressOptions): UseMenuPressReturn {
           // Detach before acting: the activation usually closes the menu.
           endGesture();
           // Once armed, the one swallower stays installed.
-          armClickGuard(doc, {staysInstalled: true});
+          armClickGuard(doc, {
+            staysInstalled: true,
+            cancelsTouchEnd: native?.pointerType === 'touch',
+          });
           if (native != null) {
             activate(effect.row, native);
           }
@@ -492,7 +495,10 @@ export function useMenuPress(options: UseMenuPressOptions): UseMenuPressReturn {
         case 'settle': {
           endGesture();
           if (effect.stray) {
-            armClickGuard(doc, {staysInstalled: true});
+            armClickGuard(doc, {
+              staysInstalled: true,
+              cancelsTouchEnd: native?.pointerType === 'touch',
+            });
           }
           if (effect.dismiss) {
             optionsRef.current.onDismiss?.();

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",

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

@@ -0,0 +1,15 @@
+// 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/formatTokenValue.ts.
+ * Do not edit by hand. Run `pnpm generate:i18n-runtime` instead.
+ */
+
+const english: Readonly<Record<string, string>> = {
+  "@astryx.powersearch.valueEditor.dateRange": "date range",
+  "@astryx.powersearch.valueEditor.filtersCount": "{count, number} {count, plural, one {filter} other {filters}}",
+  "@astryx.powersearch.valueEditor.itemsCount": "{count, number} {count, plural, one {item} other {items}}"
+};
+
+export default english;

package/src/i18n/generated-locales/en.generated.ts

@@ -78,6 +78,47 @@ const runtimeCatalog: Readonly<Record<string, string>> = {
     '{count, number} {count, plural, one {filter} other {filters}}',
   '@astryx.powersearch.resultCount':
     '{count, number} {count, plural, one {result} other {results}}',
+  '@astryx.powersearch.sheet.filtersTitle': 'Filters',
+  '@astryx.powersearch.sheet.addFilter': 'Add filter',
+  '@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.clearAll': 'Clear all',
+  '@astryx.powersearch.sheet.clearAllTitle': 'Clear all filters?',
+  '@astryx.powersearch.sheet.clearAllDescription':
+    'This removes all editable filters from this search.',
+  '@astryx.powersearch.sheet.clearAllConfirm': 'Clear filters',
+  '@astryx.powersearch.sheet.clearAllCancel': 'Keep filters',
+  '@astryx.powersearch.sheet.done': 'Done',
+  '@astryx.powersearch.sheet.search': 'Search',
+  '@astryx.powersearch.sheet.searchResults': 'Search results',
+  '@astryx.powersearch.sheet.searchFields': 'Search filters',
+  '@astryx.powersearch.sheet.searchFieldsPlaceholder': 'Search filters…',
+  '@astryx.powersearch.sheet.ungroupedFields': 'General',
+  '@astryx.powersearch.sheet.noMatchingFields': 'No filters match your search',
+  '@astryx.powersearch.sheet.tryDifferentSearch': 'Try a different search.',
+  '@astryx.powersearch.sheet.noResults': 'No results found',
+  '@astryx.powersearch.sheet.filterUnavailable':
+    'This filter is no longer available',
+  '@astryx.powersearch.sheet.removeFilter': 'Remove {field} filter',
+  '@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.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.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.fieldOperator': '{field} {operator}',
+  '@astryx.powersearch.sheet.labelValue': '{label} {value}',
+  '@astryx.powersearch.sheet.filtersClearedWithCount':
+    'All filters removed. {resultCount}',
+  '@astryx.powersearch.sheet.editableFiltersClearedWithCount':
+    'Editable filters removed. {resultCount}',
   '@astryx.alertDialog.cancel': 'Cancel',
   '@astryx.appShell.mobileNavigation': 'Mobile navigation',
   '@astryx.appShell.skipToContent': 'Skip to content',

package/src/i18n/generated-locales/pseudo.generated.ts

@@ -80,6 +80,48 @@ const runtimeCatalog: Readonly<Record<string, string>> = {
     '⟦{count, number} {count, plural, one {filter} other {filters}}⟧',
   '@astryx.powersearch.resultCount':
     '⟦{count, number} {count, plural, one {result} other {results}}⟧',
+  '@astryx.powersearch.sheet.filtersTitle': '⟦Ƒíłţéřš⟧',
+  '@astryx.powersearch.sheet.addFilter': '⟦Àðð ƒíłţéř⟧',
+  '@astryx.powersearch.sheet.noFilters': '⟦Ñó ƒíłţéřš àþþłíéð⟧',
+  '@astryx.powersearch.sheet.noFiltersDescription':
+    '⟦Àðð à ƒíłţéř ţó ñàřřóŵ ýóúř řéšúłţš àñð ƒíñð ŵĥàţ ýóú ñééð ƒàšţéř.⟧',
+  '@astryx.powersearch.sheet.clearAll': '⟦Çłéàř àłł⟧',
+  '@astryx.powersearch.sheet.clearAllTitle': '⟦Çłéàř àłł ƒíłţéřš?⟧',
+  '@astryx.powersearch.sheet.clearAllDescription':
+    '⟦Ţĥíš řéɱóṽéš àłł éðíţàƀłé ƒíłţéřš ƒřóɱ ţĥíš šéàřçĥ.⟧',
+  '@astryx.powersearch.sheet.clearAllConfirm': '⟦Çłéàř ƒíłţéřš⟧',
+  '@astryx.powersearch.sheet.clearAllCancel': '⟦Ķééþ ƒíłţéřš⟧',
+  '@astryx.powersearch.sheet.done': '⟦Ðóñé⟧',
+  '@astryx.powersearch.sheet.search': '⟦Šéàřçĥ⟧',
+  '@astryx.powersearch.sheet.searchResults': '⟦Šéàřçĥ řéšúłţš⟧',
+  '@astryx.powersearch.sheet.searchFields': '⟦Šéàřçĥ ƒíłţéřš⟧',
+  '@astryx.powersearch.sheet.searchFieldsPlaceholder': '⟦Šéàřçĥ ƒíłţéřš…⟧',
+  '@astryx.powersearch.sheet.ungroupedFields': '⟦Ĝéñéřàł⟧',
+  '@astryx.powersearch.sheet.noMatchingFields':
+    '⟦Ñó ƒíłţéřš ɱàţçĥ ýóúř šéàřçĥ⟧',
+  '@astryx.powersearch.sheet.tryDifferentSearch': '⟦Ţřý à ð탃éřéñţ šéàřçĥ.⟧',
+  '@astryx.powersearch.sheet.noResults': '⟦Ñó řéšúłţš ƒóúñð⟧',
+  '@astryx.powersearch.sheet.filterUnavailable':
+    '⟦Ţĥíš ƒíłţéř íš ñó łóñĝéř àṽàíłàƀłé⟧',
+  '@astryx.powersearch.sheet.removeFilter': '⟦Řéɱóṽé {field} ƒíłţéř⟧',
+  '@astryx.powersearch.sheet.relativeDaysAgo':
+    '⟦{count, number} {count, plural, one {day} other {days}} àĝó⟧',
+  '@astryx.powersearch.sheet.relativeDaysFromNow':
+    '⟦{count, number} {count, plural, one {day} other {days}} ƒřóɱ ñóŵ⟧',
+  '@astryx.powersearch.sheet.relativeWeeksAgo':
+    '⟦{count, number} {count, plural, one {week} other {weeks}} àĝó⟧',
+  '@astryx.powersearch.sheet.relativeWeeksFromNow':
+    '⟦{count, number} {count, plural, one {week} other {weeks}} ƒřóɱ ñóŵ⟧',
+  '@astryx.powersearch.sheet.relativeMonthsAgo':
+    '⟦{count, number} {count, plural, one {month} other {months}} àĝó⟧',
+  '@astryx.powersearch.sheet.relativeMonthsFromNow':
+    '⟦{count, number} {count, plural, one {month} other {months}} ƒřóɱ ñóŵ⟧',
+  '@astryx.powersearch.sheet.fieldOperator': '⟦{field} {operator}⟧',
+  '@astryx.powersearch.sheet.labelValue': '⟦{label} {value}⟧',
+  '@astryx.powersearch.sheet.filtersClearedWithCount':
+    '⟦Àłł ƒíłţéřš řéɱóṽéð. {resultCount}⟧',
+  '@astryx.powersearch.sheet.editableFiltersClearedWithCount':
+    '⟦Éðíţàƀłé ƒíłţéřš řéɱóṽéð. {resultCount}⟧',
   '@astryx.alertDialog.cancel': '⟦Çàñçéł⟧',
   '@astryx.appShell.mobileNavigation': '⟦Ṁóƀíłé ñàṽíĝàţíóñ⟧',
   '@astryx.appShell.skipToContent': '⟦Šķíþ ţó çóñţéñţ⟧',

package/src/index.ts

@@ -173,6 +173,19 @@ export * from './Outline';
 // Overflow list
 export * from './OverflowList';
 
+// Animating one element: from the package root only, since one API has one
+// entry. Its hook ships from './hooks'.
+export {
+  createAnimator,
+  type Animator,
+  type AnimatorAnimateOptions,
+  type AnimatorChannel,
+  type AnimatorDecayVelocity,
+  type AnimatorHandle,
+  type AnimatorSnapshot,
+  type AnimatorValues,
+} from './animator/createAnimator';
+
 // Hooks
 export * from './hooks';