@astryxdesign/core 0.7.7 → 0.7.8-canary.30b1896

package/src/motion/animator.ts

@@ -4,11 +4,12 @@
  * @file animator.ts
  * @input An element, target values, and a spring, momentum curves (coast.ts)
  *   or any closed-form curve
- * @output Exports `createAnimator`: a compositor animator for translate,
- *   rotate, scale and opacity, with presentation values and velocities read
- *   from the analytic curves, velocity-preserving retargeting, freeze-in-place
- *   `stop`, completion promises, a shared clock, and UIKit's Reduced Motion
- *   substitution; plus its option, handle and transition types
+ * @output Exports `createMotionAnimator`, a compositor animator for
+ *   translate, rotate, scale and opacity, and its option, handle and
+ *   transition types. It reads presentation values and velocities from the
+ *   analytic curves. It retargets with the velocity kept, freezes in place on
+ *   `stop`, and gives completion promises, a shared clock, and UIKit's
+ *   Reduced Motion substitution.
  * @position Motion foundation (DOM). Internal to core: components use it for
  *   every touch-presentation animation; not exported from the package entry
  *
@@ -188,6 +189,7 @@ import {
   registerReducedMotionCrossFade,
 } from './uikit/timing';
 import {planReducedMotion, type ReducedMotionView} from './reducedMotionPlan';
+import {themeReducesMotion} from '../privateAttributes/reducedMotion.stylex';
 
 /**
  * A value the animator can drive.
@@ -244,18 +246,18 @@ export interface AnimateOptions {
   crossfadeAs?: 'entrance' | 'exit';
   /**
    * When the call's animations start. By default a call from rest starts
-   * when the browser commits it, and a call that continues motion on screen
-   * (a retarget) starts now, from the value on screen. Ignored with `at`.
+   * when the browser commits it. A call that continues motion on screen (a
+   * retarget) starts now, from the value on screen. A curve whose tail
+   * already shows as at rest counts as rest. Ignored with `at`.
    * - `'commit'`: a call that continues motion also starts when the browser
-   *   commits it, dated by the browser rather than by the main thread, as a
-   *   call from rest is.
-   * - `'presented'`: a call from rest leaves its element at rest and creates
-   *   its animations two frames later, once the frame that carries the
-   *   element at rest has been presented; they then start at their commit. A
-   *   busy UI process delays the motion instead of skipping into it, for two
-   *   frames more before an idle start. Any other change to the animator
-   *   before then creates the animations first, in call order. A call that
-   *   continues motion on screen (a retarget) starts now, as by default.
+   *   commits it. The browser dates it, as it dates a call from rest.
+   * - `'presented'`: a call from rest leaves its element at rest. Its
+   *   animations are created two frames later, once the frame with the
+   *   element at rest has been presented. They then start at their commit,
+   *   so a busy UI process delays the motion instead of skipping into it.
+   *   Any other change to the animator before then creates the animations
+   *   first, in call order. A call that continues motion on screen starts
+   *   now, as by default.
    */
   start?: 'commit' | 'presented';
   /**
@@ -297,7 +299,7 @@ export interface MotionCurve {
 }
 
 /**
- * Options of `createAnimator`.
+ * Options of `createMotionAnimator`.
  */
 /** How `set` puts values in place. */
 export interface SetOptions {
@@ -652,6 +654,18 @@ const SAMPLE_TOLERANCE: Record<MotionProperty, number> = {
 /** Keyframes start on this grid (ms) and are split where the curve needs it. */
 const SAMPLE_GRID_MS = 1000 / 30;
 
+/**
+ * A curve within this many sample tolerances of its target can show as at
+ * rest. A call on it then starts as one from rest does, at the browser's start.
+ */
+const REST_DISTANCE_TOLERANCES = 2;
+
+/**
+ * A curve shows as at rest only while it moves at most one `SAMPLE_TOLERANCE`
+ * a frame at this rate.
+ */
+const REST_FRAMES_PER_SECOND = 60;
+
 /** A curve that has not settled by then (an undamped spring) snaps. */
 const MAX_DURATION_MS = 30_000;
 
@@ -803,7 +817,7 @@ export function animatorFor(
   const key = options.pseudoElement ?? '';
   let animator = byPseudo.get(key);
   if (animator == null) {
-    animator = createAnimator(element, options);
+    animator = createMotionAnimator(element, options);
     byPseudo.set(key, animator);
   }
   return animator;
@@ -920,7 +934,7 @@ const REDUCED_TRANSITION: SpringTransition = {
  *
  * @example
  * ```
- * const animator = createAnimator(sheet);
+ * const animator = createMotionAnimator(sheet);
  * // finger lifts at 1200 px/s heading for the detent at 0 (a component
  * // passes the spring of its motion role):
  * animator.animate({y: 0}, {spring: {response: 0.45, dampingRatio: 0.9}, velocity: {y: 1200}});
@@ -929,7 +943,7 @@ const REDUCED_TRANSITION: SpringTransition = {
  * animator.stop(['y']);
  * ```
  */
-export function createAnimator(
+export function createMotionAnimator(
   element: HTMLElement | null,
   options: AnimatorOptions = {},
 ): Animator {
@@ -958,8 +972,10 @@ export function createAnimator(
         };
   const pseudoElement = options.pseudoElement;
   // Reduced Motion reads the person's settings and nothing else: no option
-  // overrides them (design:reduced-motion DR4).
-  const prefersReducedMotion = defaultPrefersReducedMotion;
+  // overrides them (design:reduced-motion DR4). A theme that reduces motion
+  // for everyone counts as the setting.
+  const prefersReducedMotion = () =>
+    defaultPrefersReducedMotion() || themeReducesMotion(target);
   const isCoarsePointer = defaultIsCoarsePointer;
   const resting: Record<MotionProperty, number> = {
     ...IDENTITY,
@@ -1165,6 +1181,22 @@ export function createAnimator(
     return curveAt(property, time);
   };
 
+  /**
+   * Whether a curve's tail already shows as at rest at `time`. Under a
+   * starved main thread the browser commits a call late. A call that starts
+   * at its own time then skips that far into its curve. One that starts at
+   * the commit holds an element that hardly moves.
+   */
+  const showsAtRest = (
+    property: MotionProperty,
+    segment: Segment,
+    time: number,
+  ): boolean =>
+    Math.abs(valueAt(property, time) - segment.target) <=
+      REST_DISTANCE_TOLERANCES * SAMPLE_TOLERANCE[property] &&
+    Math.abs(velocityAt(property, time)) <=
+      SAMPLE_TOLERANCE[property] * REST_FRAMES_PER_SECOND;
+
   const velocityAt = (property: MotionProperty, time: number): number => {
     const held = segments.get(property);
     if (held != null && isHeld(held)) {
@@ -2033,10 +2065,10 @@ export function createAnimator(
   // -- starting from rest ---------------------------------------------------
 
   /**
-   * A call starts from rest when nothing on the channels it drives is moving
-   * (a curve still waiting for its first frame counts as rest) and nothing
-   * pins its clock (`at`). Returns its start group, or null for an explicit
-   * start.
+   * A call starts from rest when nothing on the channels it drives moves on
+   * screen and nothing pins its clock (`at`). A curve still waiting for its
+   * first frame counts as rest, as does one whose tail already shows as at
+   * rest. Returns its start group, or null for an explicit start.
    */
   const beginGroup = (
     time: number,
@@ -2070,10 +2102,12 @@ export function createAnimator(
       }
       return null;
     }
-    // A call that continues motion starts now unless it asks for the
-    // browser's start (`commit`). `presented` asks only for a call from rest:
-    // an element still moving is not at rest, so a retarget starts now, from
-    // the value and velocity on screen (spec:AST-094 FR6).
+    // A call that continues motion starts now, unless it asks for the
+    // browser's start (`commit`). `presented` asks only for a call from rest.
+    // A curve that still moves is not at rest, so a call on it starts now,
+    // from the value and velocity on screen. A tail that shows as at rest
+    // counts as rest, so a call on it waits, under `presented` for its two
+    // frames.
     for (const channel of start === 'commit' ? [] : channels) {
       for (const property of CHANNELS[channel]) {
         const segment = segments.get(property);
@@ -2084,7 +2118,8 @@ export function createAnimator(
           time < endOf(property, segment) &&
           (segment.group == null ||
             segment.group.resolved ||
-            shownSince(property, segment) != null)
+            shownSince(property, segment) != null) &&
+          !showsAtRest(property, segment, time)
         ) {
           return null;
         }

package/src/motion/progress.ts

@@ -0,0 +1,155 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file progress.ts
+ * @input A spring, a normalized progress, an animator's presented velocities
+ * @output Exports `progressCurve` (a spring's progress from 0 to 1 as a
+ *   MotionCurve), `mapProgress` (one curve as a function of another),
+ *   `mapRange` (the clamped linear map most companions use) and
+ *   `presentedProgressVelocity` (the progress velocity that continues what
+ *   an animator shows)
+ * @position Shared by the motion building blocks that move several channels
+ *   along one path and by companion motion (a
+ *   scrim's dim following a sheet): one velocity unit, one curve mapping and
+ *   one way to continue an interrupted motion
+ *
+ * A path is described by a normalized progress: 0 where it starts, 1 where
+ * it rests, beyond either end on a spring's overshoot. Its velocity is in
+ * progress per second; each channel's own velocity stays in the channel's
+ * units per second.
+ *
+ * An interrupted motion continues from what is on screen: the
+ * block reads the presented values and velocities from the animator at one
+ * `now` (`get`, `getVelocity`), restarts a path from those values, and starts
+ * its progress with the presented velocity projected on the path's tangent
+ * at its start, v·t / (t·t), where t = d(values)/dp. Channels are weighted
+ * into one unit first (px per unit of scale, say), so a scale and a
+ * translation count alike.
+ *
+ * A companion follows a driving curve through `mapProgress`, most often
+ * with `mapRange`: `mapProgress(sheetY, mapRange([closedY, openY], [0, dim]))`
+ * dims a scrim as a sheet rises. Played on another animator, it stays in
+ * lockstep only when it starts with its driver: pass the driver's start,
+ * `scrim.play({opacity}, {at: start})` with `start = await handle.started`
+ * (or one shared `at` for both calls); two calls from rest otherwise each
+ * start at their own commit.
+ *
+ * SYNC: When modified, update /packages/core/src/motion/progress.test.ts and
+ * /packages/core/src/motion/README.md.
+ */
+
+import type {Animator, MotionCurve, MotionProperty} from './animator';
+import {
+  SETTLING_EPSILON,
+  solveSpring,
+  toSpring,
+  type SpringDescription,
+} from './spring';
+
+/** The step of the finite differences taken on a progress. */
+const STEP = 1e-4;
+
+/**
+ * The progress of `spring` from 0 to 1, starting with `velocity` (progress
+ * per second): exactly 1 once it settles within `epsilon`.
+ */
+export function progressCurve(
+  spring: SpringDescription,
+  {
+    velocity = 0,
+    epsilon = SETTLING_EPSILON,
+  }: {velocity?: number; epsilon?: number} = {},
+): MotionCurve {
+  const curve = solveSpring(toSpring(spring), {from: 0, to: 1, velocity});
+  const duration = curve.settleTime(epsilon);
+  return {
+    duration,
+    at: t => (t >= duration ? 1 : curve.value(t)),
+    velocity: t => (t >= duration ? 0 : curve.velocity(t)),
+  };
+}
+
+/**
+ * The curve of `f(driver(t))`, its velocity by the chain rule: a channel
+ * following a path as its progress moves, or a companion following any
+ * driving curve (a sheet's `y` mapped onto its scrim's opacity). The driver
+ * is any MotionCurve, not only a progress from 0 to 1. A companion played on
+ * another animator starts with its driver (`{at: start}`; see the file
+ * header).
+ */
+export function mapProgress(
+  driver: MotionCurve,
+  f: (value: number) => number,
+): MotionCurve {
+  return {
+    duration: driver.duration,
+    at: t => f(driver.at(t)),
+    velocity: t => {
+      const value = driver.at(t);
+      return (
+        ((f(value + STEP) - f(value - STEP)) / (2 * STEP)) * driver.velocity(t)
+      );
+    },
+  };
+}
+
+/**
+ * The linear map from `input` to `output`, held at `output`'s ends outside
+ * `input` unless `clamp` is false: what most companions are (a scrim's dim
+ * along a sheet's travel, a parallax, a dismissal's fade). Either range may
+ * run backward (`[openY, closedY]`).
+ */
+export function mapRange(
+  input: readonly [number, number],
+  output: readonly [number, number],
+  {clamp = true}: {clamp?: boolean} = {},
+): (x: number) => number {
+  const [a, b] = input;
+  const [c, d] = output;
+  return x => {
+    let t = a === b ? (x < a ? 0 : 1) : (x - a) / (b - a);
+    if (clamp) {
+      t = Math.min(1, Math.max(0, t));
+    }
+    // Exact at both ends.
+    return t === 0 ? c : t === 1 ? d : c + (d - c) * t;
+  };
+}
+
+/**
+ * One channel of a path: an animator property and its value at each
+ * progress.
+ */
+export interface ProgressChannel {
+  readonly property: MotionProperty;
+  /** The property's value at progress `p`. */
+  at(p: number): number;
+  /**
+   * What one unit of the property weighs in the projection, in a unit the
+   * channels share (px per unit of scale for a box `weight` px wide). 1 by
+   * default.
+   */
+  readonly weight?: number;
+}
+
+/**
+ * The progress velocity, per second, that continues what `animator`
+ * presents at `now` along a path that starts there: the presented velocity
+ * projected on the path's tangent at progress 0, v·t / (t·t). 0 when the
+ * path does not move any of its channels.
+ */
+export function presentedProgressVelocity(
+  animator: Pick<Animator, 'getVelocity'>,
+  channels: ReadonlyArray<ProgressChannel>,
+  now?: number,
+): number {
+  let along = 0;
+  let squared = 0;
+  for (const channel of channels) {
+    const weight = channel.weight ?? 1;
+    const tangent = ((channel.at(STEP) - channel.at(0)) / STEP) * weight;
+    along += animator.getVelocity(channel.property, now) * weight * tangent;
+    squared += tangent * tangent;
+  }
+  return squared > 1e-12 ? along / squared : 0;
+}

package/src/motion/reducedMotion.ts

@@ -46,6 +46,7 @@
 
 import {defaultIsCoarsePointer, defaultPrefersReducedMotion} from './animator';
 import {resolveMotion} from './resolveMotion';
+import {themeReducesMotion} from '../privateAttributes/reducedMotion.stylex';
 import {
   reducedMotionCrossFade,
   registerReducedMotionCrossFade,
@@ -83,7 +84,8 @@ export function reducedMotionFade(
     touchRelease?: boolean;
   } = {},
 ): ReducedMotionFade | null {
-  if (!defaultPrefersReducedMotion()) {
+  // A theme that reduces motion for everyone counts as the setting.
+  if (!defaultPrefersReducedMotion() && !themeReducesMotion(element)) {
     return null;
   }
   const fades = options.touchRelease === true || defaultIsCoarsePointer();

package/src/motion/uikit/alert.ts

@@ -0,0 +1,43 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file alert.ts
+ * @input Nothing; data only
+ * @output Exports `alertController`: how UIAlertController (`.alert`) tracks
+ *   a finger across its actions
+ * @position The alert domain of the UIKit constants table (motion/uikit);
+ *   its springs are `springs.alertPresent` and `springs.alertDismiss`
+ *
+ * Every value was read from UIKit on the iOS 26.2 simulator. A host app
+ * presented `UIAlertController(.alert)` with two and with three actions.
+ * Real HID touches drove it, and the action views' highlight was sampled
+ * every frame. Lengths are in pt (CSS px), durations in ms.
+ *
+ * Every leaf carries one or more `@source`; GUESS values also carry the
+ * `@measure` task that will confirm or replace them. uikit.test.ts enforces
+ * both.
+ *
+ * SYNC: When modified, update /packages/core/src/motion/MEASUREMENTS.md
+ */
+
+export const alertController = {
+  actions: {
+    /**
+     * How long after touch-down the touched action highlights: none, it is
+     * highlighted in the touch-down frame (a tap and a 300 ms hold alike).
+     * @source measured: UIKit lab (injected host app), iOS 26.2 simulator,
+     *   iPhone 17 Pro, per-frame highlight of the action views under real HID
+     *   touches, Oct 23 2026
+     */
+    highlightOnsetMs: 0,
+    /**
+     * How far outside an action the finger may go and keep it highlighted:
+     * none. The highlight cleared 1 pt below the action, and a lift there ran
+     * nothing. UIButton keeps 70 pt; an alert action does not.
+     * @source measured: UIKit lab (injected host app), iOS 26.2 simulator,
+     *   iPhone 17 Pro, per-frame highlight of the action views under real HID
+     *   touches, Oct 23 2026
+     */
+    highlightExpansion: 0,
+  },
+} as const;

package/src/privateAttributes/pressGroupItem.stylex.ts

@@ -0,0 +1,44 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+/**
+ * @file privateAttributes/pressGroupItem.stylex.ts
+ * @input Nothing: the private press-group-item attribute
+ * @output pressGroupItemProps, which marks an action a group's tracker
+ *   follows with the pointers it follows, and isTrackedByGroup, which reads
+ *   the mark
+ * @position Owner module of the private press-group-item attribute: the only
+ *   file that writes its name. AlertDialog marks its actions, and the press
+ *   controller (utils/pressFeedback.ts) leaves a press of those pointers to
+ *   the group's tracker. No package entry exports it.
+ */
+
+const PRESS_GROUP_ITEM = 'data-astryx-press-group-item';
+
+/**
+ * Spread on each action that a group's tracker follows. It names the pointer
+ * types the tracker follows, such as `['touch', 'pen']`.
+ */
+export function pressGroupItemProps(
+  pointerTypes: ReadonlyArray<string>,
+): Readonly<Record<string, string>> {
+  return {[PRESS_GROUP_ITEM]: pointerTypes.join(' ')};
+}
+
+/**
+ * Whether a group's tracker paints the press on `element` or an ancestor: a
+ * press of `pointerType`, or any press when it is null.
+ */
+export function isTrackedByGroup(
+  element: Element,
+  pointerType: string | null = null,
+): boolean {
+  const marked = element.closest(`[${PRESS_GROUP_ITEM}]`);
+  if (marked == null) {
+    return false;
+  }
+  return (
+    pointerType == null ||
+    (marked.getAttribute(PRESS_GROUP_ITEM) ?? '')
+      .split(' ')
+      .includes(pointerType)
+  );
+}

package/src/privateAttributes/reducedMotion.stylex.ts

@@ -0,0 +1,45 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+/**
+ * @file privateAttributes/reducedMotion.stylex.ts
+ * @input Whether a theme reduces motion for everyone
+ * @output reducedMotionMarkProps and setRootReducedMotionMark, which write the
+ *   mark, and themeReducesMotion, which reads it
+ * @position Owner module of the private reduced-motion attribute: the only
+ *   file that writes its name. Theme marks its root, and the root theme marks
+ *   `<html>`; the animator, reducedMotionFade and the layout glide read it as
+ *   the person's Reduce Motion setting. No package entry exports it.
+ */
+
+const REDUCED_MOTION = 'data-astryx-reduced-motion';
+
+/** Spread on a theme's root when the theme reduces motion for everyone. */
+export function reducedMotionMarkProps(
+  isMarked: boolean,
+): Readonly<Record<string, string>> {
+  return isMarked ? {[REDUCED_MOTION]: ''} : {};
+}
+
+/**
+ * Marks or unmarks `<html>` for the root theme, so a layer portaled outside
+ * the theme's root reads the mark too.
+ */
+export function setRootReducedMotionMark(
+  root: HTMLElement,
+  isMarked: boolean,
+): void {
+  if (isMarked) {
+    root.setAttribute(REDUCED_MOTION, '');
+  } else {
+    root.removeAttribute(REDUCED_MOTION);
+  }
+}
+
+/**
+ * Whether the theme `element` is in reduces motion for everyone: its root,
+ * or `<html>` for the root theme, carries the mark.
+ */
+export function themeReducesMotion(
+  element: Element | null | undefined,
+): boolean {
+  return element?.closest?.(`[${REDUCED_MOTION}]`) != null;
+}

package/src/theme/Theme.tsx

@@ -45,6 +45,11 @@ import {registerTheme} from './themeRegistry';
 import {dataAttr} from '../naming';
 import {ThemeContext} from './useTheme';
 import {warnOnce} from '../utils/devWarning';
+import {REDUCED_MOTION_PROPERTY, resolveMotionKnobs} from './themeMotion';
+import {
+  reducedMotionMarkProps,
+  setRootReducedMotionMark,
+} from '../privateAttributes/reducedMotion.stylex';
 
 /**
  * Theme provider props
@@ -76,6 +81,11 @@ const wrapperStyles = stylex.create({
   system: {
     colorScheme: 'light dark',
   },
+  // The mark's custom property (REDUCED_MOTION_PROPERTY), which every element
+  // under the mark inherits.
+  reducedMotion: {
+    '--_astryx-reduced-motion': '1',
+  },
 });
 
 // =============================================================================
@@ -110,6 +120,7 @@ const THEME_LAYER_ORDER = '@layer reset, astryx-base, astryx-theme;';
 function useThemeStyleInjection(theme: DefinedTheme): void {
   const id = useId();
 
+  // Syncs the document's stylesheets with the runtime theme CSS.
   useInsertionEffect(() => {
     // Built themes have their CSS in a separate file — skip injection
     if (theme.__built) {
@@ -197,12 +208,18 @@ function useThemeStyleInjection(theme: DefinedTheme): void {
  *
  * - 'light' | 'dark' → sets data-theme="light" | "dark"
  * - 'system' → removes data-theme (reset.css defaults to color-scheme: light dark)
+ *
+ * A theme that reduces motion for everyone also marks `<html>` with
+ * `data-astryx-reduced-motion` and its custom property, so layers portaled
+ * outside the wrapper reduce their motion too.
  */
 function useRootThemeSync(
   isNested: boolean,
   mode: ThemeMode,
   themeName: string,
+  reducesMotion: boolean,
 ): void {
+  // Syncs the theme attributes on the root `<html>` element.
   useIsomorphicLayoutEffect(() => {
     if (isNested) {
       return;
@@ -220,12 +237,20 @@ function useRootThemeSync(
 
     // Sync theme name so @scope rules reach portals/fallback viewports.
     document.documentElement.setAttribute(dataAttr('theme'), themeName);
+    setRootReducedMotionMark(document.documentElement, reducesMotion);
+    if (reducesMotion) {
+      document.documentElement.style.setProperty(REDUCED_MOTION_PROPERTY, '1');
+    } else {
+      document.documentElement.style.removeProperty(REDUCED_MOTION_PROPERTY);
+    }
 
     return () => {
       document.documentElement.removeAttribute('data-theme');
       document.documentElement.removeAttribute(dataAttr('theme'));
+      setRootReducedMotionMark(document.documentElement, false);
+      document.documentElement.style.removeProperty(REDUCED_MOTION_PROPERTY);
     };
-  }, [isNested, mode, themeName]);
+  }, [isNested, mode, themeName, reducesMotion]);
 }
 
 // =============================================================================
@@ -255,7 +280,11 @@ export function Theme({
   registerTheme(theme);
 
   useThemeStyleInjection(theme);
-  useRootThemeSync(isNested, mode, theme.name);
+  // resolveMotionKnobs resolves no public theme to 'always', so no theme
+  // marks its root.
+  const reducesMotion =
+    resolveMotionKnobs(theme.__axes?.motion).reducedMotion === 'always';
+  useRootThemeSync(isNested, mode, theme.name, reducesMotion);
 
   // Get color-scheme style
   const colorSchemeStyle =
@@ -272,8 +301,13 @@ export function Theme({
     <ThemeContext value={ctxValue}>
       <ThemeNestingContext value={true}>
         <div
-          {...stylex.props(wrapperStyles.base, colorSchemeStyle)}
+          {...stylex.props(
+            wrapperStyles.base,
+            colorSchemeStyle,
+            reducesMotion && wrapperStyles.reducedMotion,
+          )}
           data-astryx-theme={theme.name}
+          {...reducedMotionMarkProps(reducesMotion)}
           data-theme={mode === 'system' ? undefined : mode}>
           {children}
         </div>

package/src/theme/motionKnobs.ts

@@ -20,10 +20,11 @@
 export type MotionCharacter = 'crisp' | 'standard' | 'expressive';
 
 /**
- * Whose Reduce Motion setting a theme follows: `'system'`, each person's own.
- * Internal: no theme sets it until `'always'` ships (`spec:AST-108` FR6).
+ * Whose Reduce Motion setting a theme follows: `'system'`, each person's own,
+ * or `'always'`, reduced for everyone. Internal: `resolveKnobs` resolves
+ * every theme to `'system'` until `'always'` ships (`spec:AST-108` FR6).
  */
-export type ThemeReducedMotion = 'system';
+export type ThemeReducedMotion = 'system' | 'always';
 
 /** The motion knobs a theme sets (`spec:AST-108` FR1). */
 export interface ThemeMotionKnobs {

package/src/theme/themeMotion.ts

@@ -87,6 +87,13 @@ function msOf(value: string): number {
  */
 export const MOTION_TEMPO_PROPERTY = '--_astryx-motion-tempo';
 
+/**
+ * The custom property a theme whose `reducedMotion` resolves to `'always'`
+ * sets to `1` on its root, and the root theme on `<html>`: styles that cannot
+ * key a selector on the mark read it in a value.
+ */
+export const REDUCED_MOTION_PROPERTY = '--_astryx-reduced-motion';
+
 /** The duration tokens at `tempo`: today's values times it, to the ms. */
 export function durationTokensAt(tempo: number): Record<string, string> {
   const tokens: Record<string, string> = {};

package/src/utils/dateParser.ts

@@ -32,6 +32,11 @@ export function isLocaleDayFirst(locale: Locale = 'en'): boolean {
   return dayIndex < monthIndex;
 }
 
+// Built at run time: a Unicode property escape in a literal fails a source
+// build whose Babel lacks the Unicode data.
+const LETTER_FREE = new RegExp('^[^\\p{L}]+$', 'u');
+const YEAR_FIRST = new RegExp('^\\d{4}[^\\p{L}\\d]', 'u');
+
 /**
  * Parses user input into a PlainDate.
  *
@@ -138,6 +143,17 @@ export function parseDateInput(
   if (/^\d+$/.test(trimmed)) {
     return null;
   }
+  // In a day-first locale, letter-free text that no form above matched is not
+  // a date. Native `Date` reads `a/b/c` month first. It also takes a year of
+  // one to three digits. So "12/01/2" gives a wrong date. A four-digit year
+  // written first is not ambiguous.
+  if (
+    isLocaleDayFirst(locale) &&
+    LETTER_FREE.test(trimmed) &&
+    !YEAR_FIRST.test(trimmed)
+  ) {
+    return null;
+  }
 
   const parsed = new Date(trimmed);
   if (!isNaN(parsed.getTime())) {