@astryxdesign/core 0.7.5-canary.fccd771 → 0.7.5

package/src/motion/projection.test.ts

@@ -0,0 +1,107 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file projection.test.ts
+ * @input vitest, the projection functions
+ * @output Checks WWDC18's projection verbatim and the release-target rules
+ *   (nearest projected rest, step limits)
+ * @position Testing; validates projection.ts without a browser
+ */
+
+import {describe, expect, it} from 'vitest';
+import {project, projectDistance, selectSnapPoint} from './projection';
+import {scroll} from './uikit/scroll';
+
+describe('projectDistance', () => {
+  it('is WWDC18\u2019s (v ÷ 1000)·r ÷ (1 − r)', () => {
+    for (const velocity of [-2500, -1, 0, 640, 3000]) {
+      for (const rate of [0.998, 0.99]) {
+        expect(projectDistance(velocity, rate)).toBeCloseTo(
+          ((velocity / 1000) * rate) / (1 - rate),
+          9,
+        );
+      }
+    }
+  });
+
+  it('projects 499 ms of the release speed at the normal rate (the sheet\u2019s prior art)', () => {
+    expect(projectDistance(1000)).toBeCloseTo(499, 9);
+    expect(projectDistance(1000, scroll.decelerationRate.fast)).toBeCloseTo(
+      99,
+      9,
+    );
+  });
+
+  it('a release at rest projects onto itself', () => {
+    expect(project(321, 0)).toBe(321);
+  });
+
+  it('rejects a rate outside (0, 1)', () => {
+    expect(() => projectDistance(10, 1)).toThrow(RangeError);
+  });
+});
+
+describe('selectSnapPoint', () => {
+  const detents = [0, 300, 600];
+
+  it('goes to the point nearest the projected rest, not the release point', () => {
+    // Released nearer 300, but thrown toward 600.
+    expect(selectSnapPoint(detents, {position: 320, velocity: 900}).value).toBe(
+      600,
+    );
+    // A slow release places.
+    expect(selectSnapPoint(detents, {position: 320, velocity: 20}).value).toBe(
+      300,
+    );
+    // Thrown the other way.
+    expect(
+      selectSnapPoint(detents, {position: 320, velocity: -900}).value,
+    ).toBe(0);
+  });
+
+  it('a projection past the ends lands on the end', () => {
+    expect(
+      selectSnapPoint(detents, {position: 580, velocity: 6000}).value,
+    ).toBe(600);
+    expect(
+      selectSnapPoint(detents, {position: 10, velocity: -6000}).index,
+    ).toBe(0);
+  });
+
+  it('reports the projection it chose from', () => {
+    const choice = selectSnapPoint(detents, {position: 100, velocity: 400});
+    expect(choice.projected).toBeCloseTo(100 + 0.4 * 499, 9);
+  });
+
+  it('limits the travel to maxSteps points from fromIndex', () => {
+    const pages = [0, 100, 200, 300, 400];
+    expect(selectSnapPoint(pages, {position: 110, velocity: 5000}).value).toBe(
+      400,
+    );
+    expect(
+      selectSnapPoint(pages, {
+        position: 110,
+        velocity: 5000,
+        fromIndex: 1,
+        maxSteps: 1,
+      }).value,
+    ).toBe(200);
+  });
+
+  it('breaks an exact tie toward the direction of travel', () => {
+    expect(
+      selectSnapPoint([0, 100], {position: 50, velocity: 0.0001, rate: 0.5})
+        .value,
+    ).toBe(100);
+    expect(
+      selectSnapPoint([0, 100], {position: 50, velocity: -0.0001, rate: 0.5})
+        .value,
+    ).toBe(0);
+  });
+
+  it('needs at least one point', () => {
+    expect(() => selectSnapPoint([], {position: 0, velocity: 0})).toThrow(
+      RangeError,
+    );
+  });
+});

package/src/motion/projection.ts

@@ -0,0 +1,116 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file projection.ts
+ * @input A release position and velocity, candidate rest points
+ * @output Exports `projectDistance` / `project` (WWDC18's momentum
+ *   projection) and `selectSnapPoint` (the release target UIKit-style)
+ * @position Pure math; no DOM, no React
+ *
+ * WWDC18 "Designing Fluid Interfaces" (session 803): a thrown object goes to
+ * the endpoint nearest to where it WOULD coast if it were scrolled, not the
+ * endpoint nearest to where the finger let go. The talk's projection
+ * function, verbatim in units/s:
+ *
+ *   func project(initialVelocity: CGFloat, decelerationRate: CGFloat) -> CGFloat {
+ *     return (initialVelocity / 1000.0) * decelerationRate / (1.0 - decelerationRate)
+ *   }
+ *
+ * used with `UIScrollView.DecelerationRate.normal`. A slow release projects
+ * onto itself, so it places; a flick continues past the finger.
+ *
+ * SYNC: When modified, update:
+ * - /packages/core/src/motion/projection.test.ts
+ * - /packages/core/src/motion/README.md
+ */
+
+import {scroll} from './uikit/scroll';
+
+/** Distance a surface released at `velocity` units/s coasts (WWDC18). */
+export function projectDistance(
+  velocity: number,
+  rate: number = scroll.decelerationRate.normal,
+): number {
+  if (!(rate > 0 && rate < 1)) {
+    throw new RangeError(`projection: rate must be in (0, 1), got ${rate}`);
+  }
+  return ((velocity / 1000) * rate) / (1 - rate);
+}
+
+/** Where a surface released at `position` with `velocity` would come to rest. */
+export function project(
+  position: number,
+  velocity: number,
+  rate: number = scroll.decelerationRate.normal,
+): number {
+  return position + projectDistance(velocity, rate);
+}
+
+export interface SnapSelection {
+  /** Index of the chosen point in the list passed in. */
+  readonly index: number;
+  /** The chosen point. */
+  readonly value: number;
+  /** The projected rest position the choice was made from. */
+  readonly projected: number;
+}
+
+/**
+ * The rest point a release goes to: the one nearest the projected rest
+ * position. This is the math primitive (projection + nearest); the release
+ * policy on top of it (a flick advances at least one detent, a release moving
+ * back toward its start cancels) is `resolveSnapPoint` (resolveSnapPoint.ts), so a
+ * component's release rule calls that rather than adding its own. `fromIndex` + `maxSteps` limit how many points away from the
+ * starting one a single release may travel (by index order; pass points
+ * sorted along the axis). Ties go to the point in the direction of travel.
+ *
+ * @example
+ * ```
+ * // A sheet with detents at 0, 300 and 600 px, released at 320 px moving
+ * // 900 px/s toward 600: projected ≈ 769 → 600.
+ * selectSnapPoint([0, 300, 600], {position: 320, velocity: 900});
+ * ```
+ */
+export function selectSnapPoint(
+  points: ReadonlyArray<number>,
+  {
+    position,
+    velocity,
+    rate = scroll.decelerationRate.normal,
+    fromIndex,
+    maxSteps,
+  }: {
+    position: number;
+    velocity: number;
+    rate?: number;
+    fromIndex?: number;
+    maxSteps?: number;
+  },
+): SnapSelection {
+  if (points.length === 0) {
+    throw new RangeError(
+      'projection: selectSnapPoint needs at least one point',
+    );
+  }
+  const projected = project(position, velocity, rate);
+  let lo = 0;
+  let hi = points.length - 1;
+  if (fromIndex != null && maxSteps != null) {
+    // A stale index past either end counts from the nearest real point.
+    const from = Math.min(Math.max(fromIndex, 0), points.length - 1);
+    lo = Math.max(lo, from - maxSteps);
+    hi = Math.min(hi, from + maxSteps);
+  }
+  let best = lo;
+  let bestDistance = Infinity;
+  for (let i = lo; i <= hi; i++) {
+    const distance = Math.abs(points[i] - projected);
+    const isTie = Math.abs(distance - bestDistance) < 1e-9;
+    const isAhead = Math.sign(points[i] - points[best]) === Math.sign(velocity);
+    if (distance < bestDistance - 1e-9 || (isTie && isAhead)) {
+      best = i;
+      bestDistance = distance;
+    }
+  }
+  return {index: best, value: points[best], projected};
+}

package/src/motion/reducedMotion.stylex.ts

@@ -0,0 +1,41 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file reducedMotion.stylex.ts
+ * @input StyleX constant definitions
+ * @output reducedMotionFadeConsts (the Reduced Motion cross-fade's duration
+ *   and easing) for StyleX transitions, and reducedMotionKeys (its two media
+ *   keys, which a transition spells literally)
+ * @position The CSS side of the Reduced Motion policy (reducedMotion.ts):
+ *   values a transition takes under its two Reduce Motion media keys
+ *
+ * Constants, not theme variables: no theme lengthens the fade
+ * (design:reduced-motion DR4). They equal `timing.reducedMotionCrossFadeMs`
+ * and `timing.curves.move`, which reducedMotion.test.ts checks.
+ *
+ * SYNC: When modified, update /packages/core/src/motion/uikit/timing.ts and
+ * /packages/core/src/motion/reducedMotion.test.ts.
+ */
+
+import * as stylex from '@stylexjs/stylex';
+
+export const reducedMotionFadeConsts = stylex.defineConsts({
+  /** The cross-fade under Reduce Motion on a coarse pointer. */
+  duration: '200ms',
+  /** Core Animation's easeInOut. */
+  easing: 'cubic-bezier(0.42, 0, 0.58, 1)',
+});
+
+/**
+ * The two Reduce Motion media keys, spelled once: under Reduce Motion a coarse
+ * primary pointer fades (DR2) and any other completes at once (DR3). A
+ * component spells the key literally rather than as a computed key: StyleX
+ * puts a constant key in a later priority layer than the literal media key,
+ * where it would outrank the element's state styles. reducedMotion.test.ts
+ * holds every literal in core to these, exactly.
+ */
+export const reducedMotionKeys = stylex.defineConsts({
+  fade: '@media (prefers-reduced-motion: reduce) and (pointer: coarse)',
+  instant:
+    '@media (prefers-reduced-motion: reduce) and (not (pointer: coarse))',
+});

package/src/motion/reducedMotion.test.ts

@@ -0,0 +1,129 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file reducedMotion.test.ts
+ * @input reducedMotion.ts, reducedMotion.stylex.ts, the timing table, and
+ *   every StyleX source file in core
+ * @output Proof that the Reduced Motion policy for code beside the animator
+ *   fades 200 ms at most on a coarse pointer or a touch release and completes
+ *   at once elsewhere, that its CSS constants match the table, and that every
+ *   StyleX key splitting Reduce Motion by pointer spells the two queries
+ * @position Testing for /packages/core/src/motion/reducedMotion.ts
+ */
+
+import {readdirSync, readFileSync} from 'node:fs';
+import {join, resolve} from 'node:path';
+import {afterEach, describe, expect, it, vi} from 'vitest';
+import {
+  REDUCED_MOTION_FADE_QUERY,
+  REDUCED_MOTION_INSTANT_QUERY,
+  reducedMotionFade,
+} from './reducedMotion';
+import {
+  reducedMotionFadeConsts,
+  reducedMotionKeys,
+} from './reducedMotion.stylex';
+import {timing} from './uikit/timing';
+
+/** The person's settings, through `matchMedia`: no option overrides them. */
+function settings(reduced: boolean, coarse: boolean) {
+  vi.stubGlobal('matchMedia', (query: string) => ({
+    matches: query.includes('prefers-reduced-motion')
+      ? reduced
+      : query.includes('pointer: coarse')
+        ? coarse
+        : false,
+    media: query,
+  }));
+}
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+describe('reducedMotionFade', () => {
+  it('is null when motion is not reduced', () => {
+    settings(false, true);
+    expect(reducedMotionFade(null)).toBeNull();
+  });
+
+  it('fades 200 ms at most on easeInOut on a coarse pointer', () => {
+    settings(true, true);
+    const fade = reducedMotionFade(null);
+    expect(fade).toEqual({
+      duration: timing.reducedMotionCrossFadeMs,
+      easing: 'cubic-bezier(0.42, 0, 0.58, 1)',
+    });
+    expect(fade?.duration).toBeGreaterThan(0);
+    expect(fade?.duration).toBeLessThanOrEqual(200);
+  });
+
+  it('completes at once on any other pointer, unless a touch release started it', () => {
+    settings(true, false);
+    expect(reducedMotionFade(null)).toEqual({duration: 0, easing: 'linear'});
+    expect(reducedMotionFade(null, {touchRelease: true})?.duration).toBe(
+      timing.reducedMotionCrossFadeMs,
+    );
+  });
+});
+
+describe('the CSS side of the policy', () => {
+  it('holds the same fade as the table', () => {
+    expect(reducedMotionFadeConsts.duration).toBe(
+      `${timing.reducedMotionCrossFadeMs}ms`,
+    );
+    expect(reducedMotionFadeConsts.easing).toBe(
+      `cubic-bezier(${timing.curves.move.join(', ')})`,
+    );
+  });
+
+  it('spells the two media keys from the queries', () => {
+    expect(reducedMotionKeys.fade).toBe(`@media ${REDUCED_MOTION_FADE_QUERY}`);
+    expect(reducedMotionKeys.instant).toBe(
+      `@media ${REDUCED_MOTION_INSTANT_QUERY}`,
+    );
+  });
+
+  it('every key that splits Reduce Motion by pointer is one of the two constants, spelled exactly', () => {
+    const allowed = new Set<string>([
+      reducedMotionKeys.fade,
+      reducedMotionKeys.instant,
+    ]);
+    const root = resolve(__dirname, '..');
+    const offenders: string[] = [];
+    const walk = (dir: string) => {
+      for (const entry of readdirSync(dir, {withFileTypes: true})) {
+        const path = join(dir, entry.name);
+        if (entry.isDirectory()) {
+          if (entry.name !== 'node_modules' && entry.name !== '__tests__') {
+            walk(path);
+          }
+        } else if (
+          /\.tsx?$/.test(entry.name) &&
+          !/\.(test|spec|stories)\.tsx?$/.test(entry.name)
+        ) {
+          for (const match of readFileSync(path, 'utf8').matchAll(
+            /'(@media[^']*prefers-reduced-motion: reduce[^']*pointer[^']*)'/g,
+          )) {
+            if (!allowed.has(match[1])) {
+              offenders.push(`${path.slice(root.length)}: ${match[1]}`);
+            }
+          }
+          // A constant as a computed key lands in a later priority layer.
+          if (
+            !/[/\\]motion[/\\]reducedMotion\.ts$/.test(path) &&
+            /\[reducedMotionKeys\.(fade|instant)\]/.test(
+              readFileSync(path, 'utf8'),
+            )
+          ) {
+            offenders.push(
+              `${path.slice(root.length)}: a computed reducedMotionKeys key`,
+            );
+          }
+        }
+      }
+    };
+    walk(root);
+    expect(offenders).toEqual([]);
+  });
+});

package/src/motion/reducedMotion.ts

@@ -0,0 +1,94 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file reducedMotion.ts
+ * @input The Reduced Motion preference, the primary pointer, the motion tables
+ * @output reducedMotionFade (the fade the animator would play, for motion it
+ *   does not drive) and the two media queries a StyleX transition spells
+ * @position The one Reduced Motion policy (design:reduced-motion) for code
+ *   beside the animator: a raw Web Animations fade, a CSS transition
+ *
+ * Under Reduce Motion nothing moves, scales or springs. On a coarse primary
+ * pointer, or for a change started by a touch drag's release on any pointer
+ * (DR2), a change becomes an opacity-only cross-fade of
+ * `timing.reducedMotionCrossFadeMs` (200 ms) on `timing.curves.move`; on
+ * any other primary pointer it completes at once (DR3). No theme value or
+ * call site lengthens the fade (DR4). The animator follows the same policy on
+ * its own (animator.ts).
+ *
+ * In StyleX, a transition spells the two keys literally and takes its values
+ * from reducedMotion.stylex.ts. A constant used as a computed key compiles to
+ * a later priority layer than the literal media key, which would outrank the
+ * element's state styles, so the keys stay literal:
+ *
+ * ```
+ * transitionProperty: {
+ *   default: 'opacity, translate',
+ *   '@media (prefers-reduced-motion: reduce) and (pointer: coarse)': 'opacity',
+ *   '@media (prefers-reduced-motion: reduce) and (not (pointer: coarse))': 'none',
+ * },
+ * transitionDuration: {
+ *   default: '300ms',
+ *   '@media (prefers-reduced-motion: reduce) and (pointer: coarse)':
+ *     reducedMotionFadeConsts.duration,
+ *   '@media (prefers-reduced-motion: reduce) and (not (pointer: coarse))': '0s',
+ * },
+ * ```
+ *
+ * reducedMotion.test.ts requires every such key in core to equal one of
+ * `reducedMotionKeys`, exactly.
+ *
+ * SYNC: When modified, update:
+ * - /packages/core/src/motion/reducedMotion.stylex.ts
+ * - /packages/core/src/motion/reducedMotion.test.ts
+ * - /packages/core/src/motion/animator.ts (its Reduced Motion path)
+ */
+
+import {defaultIsCoarsePointer, defaultPrefersReducedMotion} from './animator';
+import {reducedMotionCrossFade} from './uikit/timing';
+
+/** Reduce Motion on a coarse primary pointer: an opacity-only cross-fade. */
+export const REDUCED_MOTION_FADE_QUERY =
+  '(prefers-reduced-motion: reduce) and (pointer: coarse)';
+
+/** Reduce Motion on any other primary pointer: the change completes at once. */
+export const REDUCED_MOTION_INSTANT_QUERY =
+  '(prefers-reduced-motion: reduce) and (not (pointer: coarse))';
+
+/**
+ * The fade to play under Reduce Motion. `duration` 0 means the change
+ * completes at once; `easing` is a CSS timing function.
+ */
+export interface ReducedMotionFade {
+  readonly duration: number;
+  readonly easing: string;
+}
+
+/**
+ * The Reduced Motion fade for a change to `element` now, for motion the
+ * animator does not drive (two titles cross-fading with Web Animations):
+ * null when motion is not reduced (play the normal motion), else an
+ * opacity-only fade of 200 ms on a coarse pointer or for a touch release, or
+ * duration 0 (at once) on any other pointer, on Core Animation's easeInOut;
+ * the length is fixed.
+ */
+export function reducedMotionFade(
+  element?: Element | null,
+  options: {
+    /** The change starts from the release of a touch drag (DR2). */
+    touchRelease?: boolean;
+  } = {},
+): ReducedMotionFade | null {
+  if (!defaultPrefersReducedMotion()) {
+    return null;
+  }
+  const fades = options.touchRelease === true || defaultIsCoarsePointer();
+  if (!fades) {
+    return {duration: 0, easing: 'linear'};
+  }
+  const curve = reducedMotionCrossFade.curve;
+  return {
+    duration: reducedMotionCrossFade.durationMs,
+    easing: `cubic-bezier(${curve.join(', ')})`,
+  };
+}

package/src/motion/reducedMotionPlan.test.ts

@@ -0,0 +1,182 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file reducedMotionPlan.test.ts
+ * @input planReducedMotion and a stand-in view of the animator
+ * @output Tests of the Reduce Motion planner on its own (the animator's
+ *   behavior under the plan is in animator.test.ts)
+ * @position Testing for /packages/core/src/motion/reducedMotionPlan.ts
+ */
+
+import {describe, expect, it} from 'vitest';
+import type {MotionProperty} from './animator';
+import {planReducedMotion, type ReducedMotionView} from './reducedMotionPlan';
+import {reducedMotionCrossFade} from './uikit/timing';
+
+const MS = reducedMotionCrossFade.durationMs;
+
+function view(overrides: Partial<ReducedMotionView> = {}): ReducedMotionView {
+  const values: Partial<Record<MotionProperty, number>> = {opacity: 1};
+  return {
+    valueAt: property => values[property] ?? 0,
+    opacityHeading: () => 1,
+    ownOpacity: () => 1,
+    writesOwnOpacity: () => false,
+    borrowedOpacity: null,
+    hasOpacityCurve: false,
+    restingOpacity: 1,
+    hasPendingLanding: false,
+    ...overrides,
+  };
+}
+
+describe('planReducedMotion', () => {
+  it('without a fade (a fine primary pointer), writes everything at once (DR3)', () => {
+    const plan = planReducedMotion(
+      view(),
+      0,
+      {x: 100, opacity: 0},
+      ['x', 'opacity'],
+      false,
+    );
+    expect(plan.atOnce).toEqual(['x', 'opacity']);
+    expect(plan.opacityFade).toBeNull();
+    expect(plan.landing).toBeNull();
+  });
+
+  it('an entrance lands at once and fades in over the cross-fade (DR2)', () => {
+    const plan = planReducedMotion(
+      view({valueAt: p => (p === 'opacity' ? 0 : 0)}),
+      0,
+      {x: 100, opacity: 1},
+      ['x', 'opacity'],
+      true,
+    );
+    expect(plan.atOnce).toEqual(['x']);
+    expect(plan.opacityFade).toEqual([
+      {at: 0, value: 0},
+      {at: MS, value: 1},
+    ]);
+    expect(plan.landing).toBeNull();
+  });
+
+  it('an exit fades out in place, then lands its travel', () => {
+    const plan = planReducedMotion(
+      view(),
+      0,
+      {x: 100, opacity: 0},
+      ['x', 'opacity'],
+      true,
+    );
+    expect(plan.opacityFade).toEqual([
+      {at: 0, value: 1},
+      {at: MS, value: 0},
+    ]);
+    expect(plan.landing?.at).toBe(MS);
+    expect([...(plan.landing?.values ?? [])]).toEqual([['x', 100]]);
+    expect(plan.holds).toEqual({x: 0});
+  });
+
+  it('a move whose opacity rises from a visible value dips rather than landing in view', () => {
+    const plan = planReducedMotion(
+      view({valueAt: p => (p === 'opacity' ? 0.5 : 0)}),
+      0,
+      {x: 100, opacity: 1},
+      ['x', 'opacity'],
+      true,
+    );
+    expect(plan.opacityFade).toEqual([
+      {at: 0, value: 0.5},
+      {at: MS / 2, value: 0},
+    ]);
+    expect(plan.landing?.at).toBe(MS / 2);
+    expect(plan.landing?.fadeIn).toEqual({
+      to: 1,
+      ms: MS / 2,
+      isBorrowed: false,
+    });
+  });
+
+  it('a move whose opacity falls to a visible value dips rather than landing in view', () => {
+    const plan = planReducedMotion(
+      view(),
+      0,
+      {x: 100, opacity: 0.5},
+      ['x', 'opacity'],
+      true,
+    );
+    expect(plan.landing?.at).toBe(MS / 2);
+    expect(plan.landing?.fadeIn).toEqual({
+      to: 0.5,
+      ms: MS / 2,
+      isBorrowed: false,
+    });
+  });
+
+  it('a move alone dips on the stylesheet opacity it borrows, and lands at the bottom', () => {
+    const plan = planReducedMotion(
+      view({ownOpacity: () => 0.6}),
+      0,
+      {x: 100},
+      ['x'],
+      true,
+    );
+    expect(plan.borrowed).toBe(0.6);
+    expect(plan.opacityFade).toEqual([
+      {at: 0, value: 0.6},
+      {at: MS / 2, value: 0},
+    ]);
+    expect(plan.landing?.at).toBe(MS / 2);
+    expect(plan.landing?.fadeIn).toEqual({
+      to: 0.6,
+      ms: MS / 2,
+      isBorrowed: true,
+    });
+  });
+
+  it('a stylesheet that hides the element lends nothing: the move lands at once, with no dip', () => {
+    const plan = planReducedMotion(
+      view({ownOpacity: () => 0}),
+      0,
+      {x: 100},
+      ['x'],
+      true,
+    );
+    expect(plan.atOnce).toEqual(['x']);
+    expect(plan.opacityFade).toBeNull();
+    expect(plan.landing).toBeNull();
+  });
+
+  it('an opacity the animator writes is owned: a dip returns to it, borrowing nothing', () => {
+    const plan = planReducedMotion(
+      view({ownOpacity: () => 0, writesOwnOpacity: () => true}),
+      0,
+      {x: 100},
+      ['x'],
+      true,
+    );
+    expect(plan.borrowed).toBeNull();
+    expect(plan.landing?.fadeIn).toEqual({
+      to: 1,
+      ms: MS / 2,
+      isBorrowed: false,
+    });
+  });
+
+  it('an exit by role on a surface no call owns opacity on restores the stylesheet opacity', () => {
+    const plan = planReducedMotion(
+      view({ownOpacity: () => 0.6}),
+      0,
+      {y: 40},
+      ['y'],
+      true,
+      'exit',
+    );
+    expect(plan.opacityFade).toEqual([
+      {at: 0, value: 0.6},
+      {at: MS, value: 0},
+    ]);
+    expect(plan.landing?.restore).toBe(0.6);
+    expect(plan.landing?.restoreIsBorrowed).toBe(true);
+  });
+});