@astryxdesign/core 0.7.7-canary.fc68123 → 0.7.7

package/src/animator/createAnimator.ts

@@ -1,324 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-/**
- * @file createAnimator.ts
- * @input An element; the internal motion animator (motion/animator.ts), the
- *   `springs.stateChange` motion role and the momentum coast (motion/coast.ts)
- * @output The public animator: `createAnimator`, the `AnimatorHandle` it
- *   returns, and their value types
- * @position Public entry point, re-exported from the package root. The
- *   `useAnimator` hook wraps it. Importing it does no DOM work.
- *
- * SYNC: When modified, update:
- * - /packages/core/src/animator/createAnimator.test.ts
- * - /packages/core/src/animator/createAnimator.doc.mjs
- * - /packages/core/src/hooks/useAnimator.ts
- */
-
-import {
-  createMotionAnimator,
-  SETTLE_THRESHOLD,
-  type Animator as MotionAnimator,
-  type MotionCurve,
-  type MotionProperty,
-  type MotionValues,
-} from '../motion/animator';
-import {coast} from '../motion/coast';
-import {solveDecay} from '../motion/decay';
-import {registerSpringsTable, springs} from '../motion/uikit/springs';
-
-/**
- * A channel the animator drives. `x` and `y` translate the element (px).
- * `scale` scales it about its transform origin (1 is its size). `rotate`
- * turns it (degrees, clockwise), and `opacity` fades it (0 to 1).
- */
-export type AnimatorChannel = 'x' | 'y' | 'scale' | 'rotate' | 'opacity';
-
-/**
- * Values by channel. A velocity uses the same keys, in units per second:
- * px/s, scale per second, deg/s, opacity per second.
- */
-export type AnimatorValues = Partial<Record<AnimatorChannel, number>>;
-
-/** Every channel's value (or velocity), as `get` and `getVelocity` read it. */
-export type AnimatorSnapshot = Readonly<Record<AnimatorChannel, number>>;
-
-/** Options of `AnimatorHandle.animate`. */
-export interface AnimatorAnimateOptions {
-  /**
-   * Each channel's velocity at the start, such as a drag's release velocity.
-   * A channel without one keeps the
-   * velocity it has on screen, so an `animate` that interrupts another
-   * carries on smoothly.
-   */
-  velocity?: AnimatorValues;
-}
-
-/**
- * A release velocity for `AnimatorHandle.decay`, per channel, in its units
- * per second. That is px/s for `x` and `y`, and degrees per second for
- * `rotate`. `scale` and `opacity` take their units per second.
- */
-export type AnimatorDecayVelocity = AnimatorValues;
-
-/**
- * Animates one element. Each method acts on the channels it is given and
- * leaves the others where they are.
- */
-export interface AnimatorHandle {
-  /**
-   * Springs the given channels to `target` on the `springs.stateChange`
-   * motion role, from wherever they are on screen. The promise resolves when
-   * they arrive, or as soon as a later `animate`, `decay`, `set` or `stop`
-   * takes any of them over.
-   */
-  animate(
-    target: AnimatorValues,
-    options?: AnimatorAnimateOptions,
-  ): Promise<void>;
-  /**
-   * Coasts the given channels from a release velocity, slowing as a scroll
-   * view's momentum does. It resolves when they stop, or when another call
-   * takes them over. The distance follows from the velocity alone: there are
-   * no bounds, except that opacity stops at 0 or 1.
-   */
-  decay(velocity: AnimatorDecayVelocity): Promise<void>;
-  /**
-   * Puts the given channels at these values at once, ending their motion:
-   * the per-frame write of a drag.
-   */
-  set(values: AnimatorValues): void;
-  /** Every channel's value on screen now. */
-  get(): AnimatorSnapshot;
-  /** Every channel's velocity on screen now, in units per second. */
-  getVelocity(): AnimatorSnapshot;
-  /** Halts every channel where it is on screen. */
-  stop(): void;
-}
-
-/** What `createAnimator` returns: the handle, and `destroy`. */
-export interface Animator extends AnimatorHandle {
-  /**
-   * Stops every motion and lets go of the element; the element keeps the
-   * values it shows. The animator does nothing after this.
-   */
-  destroy(): void;
-}
-
-const CHANNELS: ReadonlyArray<AnimatorChannel> = [
-  'x',
-  'y',
-  'scale',
-  'rotate',
-  'opacity',
-];
-
-/** The values of the channels the public API names, and nothing else. */
-function motionValues(values: AnimatorValues | undefined): MotionValues {
-  const out: MotionValues = {};
-  if (values == null) {
-    return out;
-  }
-  for (const channel of CHANNELS) {
-    const value = values[channel];
-    if (typeof value === 'number' && Number.isFinite(value)) {
-      out[channel] = value;
-    }
-  }
-  return out;
-}
-
-/**
- * A coast from `from` at `velocity` on the momentum decay a scroll view
- * uses, ending at rest. The theme does not change this decay. An opacity
- * coast stops at 0 or 1.
- */
-function momentum(
-  from: number,
-  velocity: number,
-  threshold: number,
-  isUnit: boolean,
-): MotionCurve {
-  const glide = solveDecay({from, velocity});
-  const edge = !isUnit ? null : glide.rest < 0 ? 0 : glide.rest > 1 ? 1 : null;
-  const hit = edge == null ? null : glide.timeToReach(edge);
-  const duration = hit ?? glide.settleTime(threshold);
-  const end = edge ?? glide.rest;
-  return {
-    duration,
-    at: t => (t >= duration ? end : glide.value(t)),
-    velocity: t => (t >= duration ? 0 : glide.velocity(t)),
-  };
-}
-
-function snapshot(
-  read: (channel: AnimatorChannel) => number,
-): AnimatorSnapshot {
-  return {
-    x: read('x'),
-    y: read('y'),
-    scale: read('scale'),
-    rotate: read('rotate'),
-    opacity: read('opacity'),
-  };
-}
-
-/**
- * Resolves once every motion of one call has finished, or as soon as any of
- * them is interrupted (`finished` resolves `false`). A later call that takes
- * over one channel ends the whole call where it stopped, as one `animate`
- * does. The other channels move on.
- */
-async function settledOrTakenOver(
-  moving: ReadonlyArray<Promise<boolean>>,
-): Promise<void> {
-  if (moving.length === 0) {
-    return;
-  }
-  await new Promise<void>(resolve => {
-    let left = moving.length;
-    for (const finished of moving) {
-      void finished.then(completed => {
-        left -= 1;
-        if (!completed || left === 0) {
-          resolve();
-        }
-      });
-    }
-  });
-}
-
-/**
- * An animator whose element is attached later, through `attach`. It is the
- * one construction `createAnimator` and `useAnimator` share, so the hook has
- * no behavior of its own. Not exported from the package.
- */
-export function createAttachableAnimator(): {
-  readonly animator: Animator;
-  readonly attach: (element: HTMLElement | null) => void;
-} {
-  const motion: MotionAnimator = createMotionAnimator(null);
-  // Calls do nothing while no element is attached, before the ref attaches
-  // or after it lets go. They also do nothing after destroy, and animate and
-  // decay then resolve at once.
-  let element: HTMLElement | null = null;
-  let destroyed = false;
-  const inactive = () => destroyed || element == null;
-  const animator: Animator = {
-    async animate(target, options) {
-      const to = motionValues(target);
-      if (inactive() || Object.keys(to).length === 0) {
-        return;
-      }
-      // The role registry is written on first use, never on import.
-      registerSpringsTable();
-      const velocity = motionValues(options?.velocity);
-      await motion.animate(to, {
-        spring: springs.stateChange,
-        ...(Object.keys(velocity).length > 0 ? {velocity} : {}),
-      }).finished;
-    },
-    async decay(velocity) {
-      if (inactive()) {
-        return;
-      }
-      const given = motionValues(velocity);
-      // The translate axes coast as a throw, which Reduce Motion lets
-      // continue. The others coast as a transition, which it replaces.
-      const translate = coast(motion, {x: given.x, y: given.y});
-      const others: Partial<Record<MotionProperty | 'scale', MotionCurve>> = {};
-      for (const channel of ['scale', 'rotate', 'opacity'] as const) {
-        const v0 = given[channel];
-        if (v0 != null) {
-          const property = channel === 'scale' ? 'scaleX' : channel;
-          others[channel] = momentum(
-            motion.get(property),
-            v0,
-            SETTLE_THRESHOLD[property],
-            channel === 'opacity',
-          );
-        }
-      }
-      const moving: Promise<boolean>[] = [];
-      if (Object.keys(translate).length > 0) {
-        moving.push(motion.decay(translate).finished);
-      }
-      if (Object.keys(others).length > 0) {
-        moving.push(motion.play(others).finished);
-      }
-      await settledOrTakenOver(moving);
-    },
-    set(values) {
-      if (!inactive()) {
-        motion.set(motionValues(values));
-      }
-    },
-    get() {
-      return snapshot(channel => motion.get(channel));
-    },
-    getVelocity() {
-      return snapshot(channel => motion.getVelocity(channel));
-    },
-    stop() {
-      if (!inactive()) {
-        motion.stop();
-      }
-    },
-    destroy() {
-      if (!destroyed) {
-        destroyed = true;
-        // Halts every channel where it shows, so the element keeps those
-        // values and nothing reads as moving, then lets go of it.
-        motion.stop();
-        motion.dispose();
-      }
-    },
-  };
-  return {
-    animator,
-    attach: next => {
-      if (destroyed || next === element) {
-        return;
-      }
-      if (element != null) {
-        // The old node takes its values with it, so the next node, or a
-        // remount, starts at rest.
-        motion.attach(null);
-        motion.stop();
-        motion.set(motionValues(REST));
-      }
-      element = next;
-      motion.attach(next);
-    },
-  };
-}
-
-/** A new or remounted element starts from these values. */
-const REST = {x: 0, y: 0, scale: 1, rotate: 0, opacity: 1} as const;
-
-/**
- * Animates `element` with the motion Core uses. `animate` springs channels to
- * a target on the state-change motion, and `decay` coasts them from a release
- * velocity. `set` jumps them, `get` and `getVelocity` read them, `stop` halts
- * them, and `destroy` lets the element go. Under Reduce Motion every call is
- * planned. A move becomes a short cross-fade on a touch screen, and it lands
- * at once with a mouse.
- *
- * Use one animator per element: two on one element overwrite each other.
- *
- * @example
- * ```
- * const card = document.querySelector('.card');
- * const animator = createAnimator(card);
- * await animator.animate({x: 0, rotate: 0}, {velocity: {x: -900}});
- * animator.decay({x: 2400});
- * animator.destroy();
- * ```
- */
-export function createAnimator(element: HTMLElement): Animator {
-  const {animator, attach} = createAttachableAnimator();
-  attach(element);
-  return animator;
-}

package/src/hooks/pressGroupContext.ts

@@ -1,21 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-/**
- * @file pressGroupContext.ts
- * @input Nothing
- * @output PressGroupContext: true inside a group whose own tracker paints
- *   its actions' press
- * @position Internal; not exported from the hooks entry. AlertDialog
- *   provides it around its tracked actions, and Button reads it.
- */
-
-import {createContext} from 'react';
-
-/**
- * True inside a group whose tracker paints a pointer's press on its actions.
- * Those actions take no `:active` paint, so one press never lights two.
- */
-export const PressGroupContext = createContext(false);
-PressGroupContext.displayName = 'PressGroupContext';

package/src/hooks/useActionGroupTracking.ts

@@ -1,224 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-'use client';
-
-/**
- * @file useActionGroupTracking.ts
- * @input A ref to a group of sibling actions, the actions' selector, and the
- *   component's tracking constants
- * @output Exports useActionGroupTracking and ActionGroupTrackingOptions
- * @position Internal hook, not exported from the hooks entry. A long press
- *   drives the shared action-group tracker (hooks/actionGroupTracker.ts) for
- *   a group that a held pointer slides across. AlertDialog consumes it.
- *
- * SYNC: When modified, update useActionGroupTracking.test.tsx
- */
-
-import {useEffect, useRef, useState, type RefObject} from 'react';
-import {isActive} from '../gestures/GestureRecognizer';
-import {LongPressGestureRecognizer} from '../gestures/LongPressGestureRecognizer';
-import {lockSelection} from '../utils/selectionLock';
-import type {GestureTouch, PointerKind} from '../gestures/types';
-import {useGestureRecognizer} from '../gestures/useGestureRecognizer';
-import {UIKIT_PRESS} from '../motion/uikit/gestures';
-import {isIosWebKit} from '../utils/touchQueries';
-import {createActionGroupTracker} from './actionGroupTracker';
-import {useIsomorphicLayoutEffect} from './useIsomorphicLayoutEffect';
-
-export interface ActionGroupTrackingOptions {
-  /** Selects the actions inside the tracked element. */
-  itemSelector: string;
-  /** How long after touch-down the touched action highlights, ms. */
-  highlightOnsetMs: number;
-  /**
-   * How far outside an action a finger keeps it highlighted, px. A mouse or a
-   * pen hit-tests the actions' exact rects.
-   */
-  highlightExpansion: number;
-  /** Pointers that are tracked; others keep the browser's click. @default every pointer */
-  pointerTypes?: ReadonlyArray<PointerKind>;
-  /** A press whose target this rejects is not tracked. */
-  shouldTrack?: (target: unknown) => boolean;
-  /** Off, nothing is attached and nothing is tracked. @default true */
-  isEnabled?: boolean;
-  /**
-   * Let the gesture host write the group's `touch-action` and refuse a text
-   * selection while a finger or a pen holds it.
-   * @default true
-   */
-  manageStyle?: boolean;
-  /** Runs the action under the finger at the lift. @default its own click */
-  onActivate?: (item: HTMLElement) => void;
-}
-
-const PRESS = UIKIT_PRESS;
-
-/** The ref handed to the recognizer while tracking is off: no element. */
-const DETACHED: RefObject<Element | null> = {current: null};
-
-const EVERY_POINTER: ReadonlyArray<PointerKind> = ['touch', 'pen', 'mouse'];
-
-/**
- * The group's press: a long press that a second finger on the group ends with
- * nothing acting. A plain long press ignores a second finger.
- */
-class ActionGroupPress extends LongPressGestureRecognizer {
-  protected override acceptsTouch(touch: GestureTouch): boolean {
-    if (isActive(this.state)) {
-      this.setState('cancelled');
-      return false;
-    }
-    return super.acceptsTouch(touch);
-  }
-}
-
-/**
- * Track a held pointer on the group behind `ref` across the actions inside
- * it, through the shared action-group tracker.
- */
-export function useActionGroupTracking(
-  ref: RefObject<HTMLElement | null>,
-  options: ActionGroupTrackingOptions,
-): ActionGroupPress {
-  const optionsRef = useRef(options);
-  // Keeps the recognizer's delegate and the tracker, which run outside
-  // render, reading the latest options.
-  useIsomorphicLayoutEffect(() => {
-    optionsRef.current = options;
-  });
-  // The pointer that started the current press. Only a finger gets the hit
-  // expansion; a mouse or a pen hit-tests the actions' exact rects.
-  const pointerRef = useRef<PointerKind>('touch');
-  const landedRef = useRef<Node | null>(null);
-  const [tracker] = useState(() =>
-    createActionGroupTracker(() => ({
-      roots: () => [ref.current],
-      itemSelector: optionsRef.current.itemSelector,
-      highlightExpansion:
-        pointerRef.current === 'touch'
-          ? optionsRef.current.highlightExpansion
-          : 0,
-      onActivate: optionsRef.current.onActivate,
-      // The browser's own click for a press the group ran is taken, so the
-      // action runs once. The gesture host swallows it for a press it claims.
-      // This covers one it does not claim, a mouse under a coarse pointer.
-      swallowsNativeClick: true,
-    })),
-  );
-  const isEnabled = options.isEnabled ?? true;
-  // Synchronizes the tracker with tracking on and mounted. Turning tracking
-  // off, or unmounting, drops a tracked press and ends its release fades.
-  // The host reports no cancellation to a disabled recognizer, and the lift
-  // that runs an action often closes the owner before its fade ends.
-  useEffect(
-    () => () => {
-      tracker.cancel();
-      tracker.dispose();
-    },
-    [tracker, isEnabled],
-  );
-
-  return useGestureRecognizer(
-    isEnabled ? ref : DETACHED,
-    () =>
-      new ActionGroupPress({
-        name: 'ActionGroupTracking',
-        minimumPressDuration: options.highlightOnsetMs,
-        allowableMovement: Number.POSITIVE_INFINITY,
-        allowedPointerTypes: options.pointerTypes ?? EVERY_POINTER,
-        delaysTouchesBegan: true,
-        // The hold picks an action, so a held finger or pen starts no text
-        // selection and opens no callout while down. A long press brings this
-        // lock by default; this hold has no minimum duration, so it names it.
-        selectionLock: lockSelection,
-        shouldReceiveTouch: (recognizer, touch) => {
-          if (recognizer.numberOfTouches === 0) {
-            pointerRef.current = touch.pointerType;
-            const target = touch.target as Node | null;
-            landedRef.current =
-              typeof target?.nodeType === 'number' ? target : null;
-          }
-          return receiveTouch(recognizer, touch, optionsRef.current);
-        },
-      }),
-    recognizer => {
-      switch (recognizer.state) {
-        case 'began': {
-          const {x, y} = recognizer.location();
-          tracker.begin(x, y, {landed: landedRef.current});
-          break;
-        }
-        case 'changed': {
-          const {x, y} = recognizer.location();
-          tracker.move(x, y);
-          break;
-        }
-        case 'ended': {
-          const doc = ref.current?.ownerDocument;
-          const focusedBefore = doc?.activeElement ?? null;
-          const beganOn = tracker.beganOn;
-          // Whether a click on the lifted action would focus it. A mouse's or
-          // a pen's pointerdown already gave the engine's answer, on the action
-          // it began on. A tap focuses on a later mousedown, which the claimed
-          // touch cancels, so the platform answers for a finger.
-          // iOS WebKit focuses no tapped button; Chromium and Firefox do.
-          const clickFocuses =
-            pointerRef.current === 'touch'
-              ? !isIosWebKit(doc?.defaultView)
-              : beganOn != null && focusedBefore === beganOn;
-          const lifted = tracker.end();
-          // The lift runs the action's own click(), which moves no focus. So
-          // focus moves to the lifted action, unless its click moved focus.
-          if (
-            clickFocuses &&
-            lifted != null &&
-            lifted.isConnected &&
-            doc?.activeElement === focusedBefore &&
-            focusedBefore !== lifted
-          ) {
-            lifted.focus({preventScroll: true, focusVisible: false});
-          }
-          break;
-        }
-        case 'cancelled':
-          tracker.cancel();
-          break;
-        case 'possible':
-        case 'failed':
-          // Listeners are not called for these.
-          break;
-      }
-    },
-    {
-      isEnabled,
-      manageStyle: options.manageStyle ?? true,
-      actionGroup: true,
-    },
-  );
-}
-
-/**
- * The recognizer's should-receive delegate. It also picks the press's clock.
- * Inside a scroller the press waits the content-touch delay and fails past
- * the slop, so the scroller takes a flick. Elsewhere it begins at once, with
- * no movement limit.
- */
-function receiveTouch(
-  recognizer: LongPressGestureRecognizer,
-  touch: GestureTouch,
-  options: ActionGroupTrackingOptions,
-): boolean {
-  if (options.shouldTrack?.(touch.target) === false) {
-    return false;
-  }
-  if (recognizer.numberOfTouches === 0) {
-    const isInsideScroller = touch.scroll?.isInsideScroller === true;
-    recognizer.minimumPressDuration = isInsideScroller
-      ? PRESS.contentTouchDelay.value
-      : options.highlightOnsetMs;
-    recognizer.allowableMovement = isInsideScroller
-      ? PRESS.slop.value
-      : Number.POSITIVE_INFINITY;
-  }
-  return true;
-}

package/src/hooks/useAnimator.doc.mjs

@@ -1,109 +0,0 @@
-// 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().',
-      },
-    ],
-  },
-};