@astryxdesign/core 0.7.5 → 0.7.6-canary.0d71e8d

package/src/motion/coast.ts

@@ -29,15 +29,19 @@
 
 import {SETTLE_THRESHOLD, type Animator, type MotionCurve} from './animator';
 import {solveDecay} from './decay';
+import {resolveMotion} from './resolveMotion';
 import {solveSpring, toSpring, type SpringDescription} from './spring';
-import {scroll} from './uikit/scroll';
+import {registerScrollTable, scroll} from './uikit/scroll';
 
 export interface CoastOptions {
   /** Per-millisecond velocity factor; UIScrollView's normal rate by default. */
   rate?: number;
   /** Edges: a coast crossing one hands its velocity to `bounce`. */
   bounds?: Partial<Record<'x' | 'y', {min: number; max: number}>>;
-  /** The edge spring; `scroll.bounce` by default. */
+  /**
+   * The edge spring; `scroll.bounce` by default, which plays its table value
+   * (it is not a motion role: `spec:AST-094` FR4 lists no scroll spring).
+   */
   bounce?: SpringDescription;
   /**
    * The release time on the document timeline (ms, `performance.now()`
@@ -85,7 +89,10 @@ export function coast(
     }
   }
   const rate = options.rate ?? scroll.decelerationRate.normal;
-  const bounce = toSpring(options.bounce ?? scroll.bounce);
+  registerScrollTable();
+  const bounce = toSpring(
+    resolveMotion(animator.element, options.bounce ?? scroll.bounce),
+  );
   const curves: Partial<Record<'x' | 'y', MotionCurve>> = {};
   for (const [key, v0] of Object.entries(velocities) as ['x' | 'y', number][]) {
     const from = animator.get(key, options.at);

package/src/motion/reducedMotion.ts

@@ -45,7 +45,11 @@
  */
 
 import {defaultIsCoarsePointer, defaultPrefersReducedMotion} from './animator';
-import {reducedMotionCrossFade} from './uikit/timing';
+import {resolveMotion} from './resolveMotion';
+import {
+  reducedMotionCrossFade,
+  registerReducedMotionCrossFade,
+} from './uikit/timing';
 
 /** Reduce Motion on a coarse primary pointer: an opacity-only cross-fade. */
 export const REDUCED_MOTION_FADE_QUERY =
@@ -86,7 +90,13 @@ export function reducedMotionFade(
   if (!fades) {
     return {duration: 0, easing: 'linear'};
   }
-  const curve = reducedMotionCrossFade.curve;
+  if (element != null) {
+    registerReducedMotionCrossFade();
+  }
+  const curve =
+    element != null
+      ? resolveMotion(element, reducedMotionCrossFade.curve)
+      : reducedMotionCrossFade.curve;
   return {
     duration: reducedMotionCrossFade.durationMs,
     easing: `cubic-bezier(${curve.join(', ')})`,

package/src/motion/reducedMotionPlan.test.ts

@@ -26,11 +26,37 @@ function view(overrides: Partial<ReducedMotionView> = {}): ReducedMotionView {
     hasOpacityCurve: false,
     restingOpacity: 1,
     hasPendingLanding: false,
+    hasWaitingDip: false,
     ...overrides,
   };
 }
 
 describe('planReducedMotion', () => {
+  it('a call naming the opacity a waiting dip returns to, with no travel, joins that dip', () => {
+    const plan = planReducedMotion(
+      view({hasPendingLanding: true, hasWaitingDip: true}),
+      0,
+      {opacity: 1},
+      ['opacity'],
+      true,
+    );
+    expect(plan.joins).toBe(true);
+    expect(plan.atOnce).toEqual([]);
+    expect(plan.opacityFade).toBeNull();
+    expect(plan.landing).toBeNull();
+  });
+
+  it('a call naming travel, or another opacity, while a dip waits does not join it', () => {
+    const waiting = view({hasPendingLanding: true, hasWaitingDip: true});
+    expect(
+      planReducedMotion(waiting, 0, {opacity: 1, x: 0}, ['opacity', 'x'], true)
+        .joins,
+    ).toBeUndefined();
+    expect(
+      planReducedMotion(waiting, 0, {opacity: 0.5}, ['opacity'], true).joins,
+    ).toBeUndefined();
+  });
+
   it('without a fade (a fine primary pointer), writes everything at once (DR3)', () => {
     const plan = planReducedMotion(
       view(),

package/src/motion/reducedMotionPlan.ts

@@ -80,6 +80,8 @@ export interface ReducedMotionView {
   readonly restingOpacity: number;
   /** Whether a move of an earlier call still waits to land. */
   readonly hasPendingLanding: boolean;
+  /** Whether an earlier dip's fade back in still waits on its landing. */
+  readonly hasWaitingDip: boolean;
 }
 
 /** What Reduce Motion makes of a call. */
@@ -93,6 +95,11 @@ export interface ReducedMotionPlan {
   readonly landing: PlannedLanding | null;
   /** The stylesheet opacity a dip borrowed (no call owns opacity). */
   readonly borrowed?: number | null;
+  /**
+   * The call joins the waiting dip: it names the opacity the dip returns to
+   * and moves nothing, so the fade goes on as it was.
+   */
+  readonly joins?: boolean;
 }
 
 /** The opacity no call has changed. */
@@ -162,7 +169,7 @@ export function planReducedMotion(
   // A move still waiting to land (an earlier dip's) lands at this call's
   // invisible moment, never while the element shows.
   const pending = view.hasPendingLanding;
-  // Not a theme role: no theme lengthens it (design:reduced-motion DR4).
+  // Not a role: nothing lengthens it (design:reduced-motion DR4).
   const ms = reducedMotionCrossFade.durationMs;
   const landsLater = (
     at: number,
@@ -183,6 +190,18 @@ export function planReducedMotion(
         : {}),
     };
   };
+  // A call that names the opacity a waiting dip returns to, and names no
+  // travel, joins that dip: the fade goes on as it was and the call settles
+  // when the dip ends. A second dip, opened from where the first had got
+  // to, would fade the element out twice.
+  if (
+    named &&
+    view.hasWaitingDip &&
+    !properties.some(property => TRAVEL_PROPERTIES.includes(property)) &&
+    Math.abs(opacityTo - view.opacityHeading()) < 1e-6
+  ) {
+    return {atOnce: [], opacityFade: null, holds, landing: null, joins: true};
+  }
   // Travel lands only while the element is transparent (DR1, DR2): an
   // entrance that starts visible, or an exit that ends visible, dips instead
   // when it has travel or a waiting landing to carry.

package/src/motion/resolveMotion.test.ts

@@ -0,0 +1,123 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file resolveMotion.test.ts
+ * @input resolveMotion.ts, the shared UIKit tables, a stubbed computed style
+ * @output Proof that, with the per-role tables internal (spec:AST-094
+ *   DEC-15), a role plays its table value whatever a scope's CSS variable
+ *   says, reads no style, and leaves values that are not roles alone; and
+ *   that the animator plays the table's spring
+ * @position Testing for /packages/core/src/motion/resolveMotion.ts (the
+ *   browser proof: animator.interaction.browser.spec.ts)
+ */
+
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
+import {createAnimator} from './animator';
+import {coast} from './coast';
+import {resolveMotion} from './resolveMotion';
+import {solveSpring, toSpring} from './spring';
+import {
+  registerSpringsTable,
+  registerTimingTable,
+  scroll,
+  springs,
+  timing,
+} from './uikit';
+
+// Like a touch module: register the tables these motions resolve from.
+registerSpringsTable();
+registerTimingTable();
+
+let reads: number;
+
+beforeEach(() => {
+  reads = 0;
+  vi.spyOn(window, 'getComputedStyle').mockImplementation(
+    () =>
+      ({
+        getPropertyValue: () => {
+          reads += 1;
+          return '';
+        },
+      }) as unknown as CSSStyleDeclaration,
+  );
+});
+
+afterEach(() => {
+  vi.restoreAllMocks();
+  document.body.innerHTML = '';
+});
+
+/** A scope that sets role variables, as a page's own style could. */
+function scoped(values: Record<string, string>) {
+  const scope = document.createElement('div');
+  scope.setAttribute('data-astryx-theme', 'soft');
+  for (const [name, value] of Object.entries(values)) {
+    scope.style.setProperty(name, value);
+  }
+  const child = document.createElement('div');
+  scope.append(child);
+  document.body.append(scope);
+  return child;
+}
+
+describe('resolveMotion while the per-role tables stay internal (DEC-15)', () => {
+  it('plays the table value for a spring, a curve and a duration, whatever a scope sets', () => {
+    const child = scoped({
+      '--motion-springs-settle': '0.8s 0.3',
+      '--motion-timing-curves-move': 'cubic-bezier(0.4, 0, 0.2, 1)',
+      '--motion-timing-state-change-ms': '300ms',
+    });
+    expect(resolveMotion(child, springs.settle)).toBe(springs.settle);
+    expect(resolveMotion(child, timing.curves.move)).toBe(timing.curves.move);
+    expect(resolveMotion(child, timing, 'stateChangeMs')).toBe(
+      timing.stateChangeMs,
+    );
+    expect(resolveMotion(null, springs.settle)).toBe(springs.settle);
+    // No style is read to resolve a role.
+    expect(reads).toBe(0);
+  });
+
+  it('leaves values that are not roles alone', () => {
+    const inline = {response: 0.4, dampingRatio: 0.9};
+    expect(resolveMotion(document.body, inline)).toBe(inline);
+    expect(resolveMotion(document.body, springs.sheetPresent)).toBe(
+      springs.sheetPresent,
+    );
+    expect(resolveMotion(document.body, timing.press, 'scrollBrakeMs')).toBe(
+      timing.press.scrollBrakeMs,
+    );
+  });
+});
+
+describe('the animator', () => {
+  it("plays the table's spring even where a scope sets the role's variable", () => {
+    const child = scoped({'--motion-springs-settle': '0.8s 0.3'});
+    const animator = createAnimator(child, {now: () => 0});
+    animator.set({y: 300});
+    animator.animate({y: 0}, {spring: springs.settle}, {at: 0});
+    const table = solveSpring(toSpring(springs.settle), {from: 300, to: 0});
+    for (const ms of [50, 150, 400]) {
+      expect(animator.get('y', ms)).toBeCloseTo(table.value(ms / 1000), 3);
+    }
+    animator.dispose();
+  });
+  it('a coast plays the table edge spring whatever a scope sets: scroll.bounce is no role', () => {
+    const child = scoped({'--motion-scroll-bounce': '0.8s 0.3'});
+    const animator = createAnimator(child, {now: () => 0});
+    animator.set({x: 60});
+    // Released past the edge: straight back on the edge spring.
+    animator.decay(
+      coast(animator, {x: 0}, {bounds: {x: {min: -500, max: 0}}, at: 0}),
+      {at: 0},
+    );
+    const expected = solveSpring(toSpring(scroll.bounce), {
+      from: 60,
+      to: 0,
+    });
+    for (const ms of [50, 150, 400]) {
+      expect(animator.get('x', ms)).toBeCloseTo(expected.value(ms / 1000), 3);
+    }
+    animator.dispose();
+  });
+});

package/src/motion/resolveMotion.ts

@@ -0,0 +1,68 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file resolveMotion.ts
+ * @input A motion role: a spring or curve of a registered motion table, or a
+ *   table group and the key of one of its values
+ * @output resolveMotion: the role's value
+ * @position Motion foundation; the animator resolves every spring and curve
+ *   it is handed with it, and components resolve the durations they time
+ *   with it
+ *
+ * Every touch motion passes through here, so the role a value plays is named
+ * in one place. A role plays its table value: the per-role tables stay
+ * internal (`spec:AST-094` DEC-15), so nothing reads a role's CSS variable
+ * and no page or theme style sets a role. Nothing here reads style or
+ * layout, listens or observes, imports a table, or runs on import or on the
+ * server.
+ *
+ * SYNC: When modified, update:
+ * - /packages/core/src/motion/resolveMotion.test.ts
+ * - /packages/core/src/motion/animator.ts (resolves each role it plays)
+ */
+
+import type {MotionCurvePoints} from './roles';
+import type {SpringDescription} from './spring';
+
+/**
+ * A motion role's value: its table value, as the per-role tables stay
+ * internal (`spec:AST-094` DEC-15). Hand it a spring or curve of a motion
+ * table, or a table group and a key (the way to name a duration, which is a
+ * bare number):
+ *
+ * @example
+ * ```
+ * const spring = resolveMotion(sheet, springs.settle);
+ * const fadeMs = resolveMotion(row, timing, 'stateChangeMs');
+ * ```
+ *
+ * The element names where the motion plays; anything that is not a role
+ * comes back unchanged too, so a spring
+ * written inline at a call site keeps working.
+ */
+export function resolveMotion<T extends SpringDescription>(
+  element: Element | null | undefined,
+  spring: T,
+): T | SpringDescription;
+export function resolveMotion(
+  element: Element | null | undefined,
+  curve: MotionCurvePoints,
+): MotionCurvePoints;
+export function resolveMotion<G extends object, K extends keyof G & string>(
+  element: Element | null | undefined,
+  group: G,
+  key: K,
+): G[K] extends number
+  ? number
+  : G[K] extends MotionCurvePoints
+    ? MotionCurvePoints
+    : G[K] | SpringDescription;
+export function resolveMotion(
+  _element: Element | null | undefined,
+  leafOrGroup: object,
+  key?: string,
+): unknown {
+  return key === undefined
+    ? leafOrGroup
+    : (leafOrGroup as Record<string, unknown>)[key];
+}

package/src/motion/roleValue.ts

@@ -69,7 +69,8 @@ export function short(n: number): string {
  *   spring: mass folds into the duration, overdamping into a negative bounce);
  * - duration: `250ms`;
  * - curve: `cubic-bezier(0.42, 0, 0.58, 1)`, usable as is in CSS.
- * Throws on a value that is not a valid value of its kind.
+ * Throws on a value that is not a valid value of its kind, a spring that
+ * never settles included.
  */
 export function formatMotionRoleValue(
   kind: MotionRoleKind,

package/src/motion/roles.test.ts

@@ -2,10 +2,11 @@
 
 /**
  * @file roles.test.ts
- * @input roles.ts and the shared UIKit tables (registered on import)
- * @output Proof that each spring, duration and curve of a registered table is
- *   a role named by its path, that non-motion values are not, and that a
- *   role's CSS value reads back as the same motion
+ * @input roles.ts and the shared UIKit tables (registered by this test)
+ * @output Proof that the registered roles are exactly the ones spec:AST-094
+ *   FR4 names, each by its table path; that every other table value, a
+ *   component's measured spring included, is no role; and that a role's CSS
+ *   value reads back as the same motion
  * @position Testing for /packages/core/src/motion/roles.ts
  */
 
@@ -175,6 +176,10 @@ describe('motion roles', () => {
     // thresholds and the arbitration timings are not motion roles either.
     expect(motionRoleIn(timing, 'reducedMotionCrossFadeMs')).toBeUndefined();
     expect(motionRoleOf(springs.menuReducedMotion)).toBeUndefined();
+    // Nor is the keyboard's motion: it rides the keyboard's own spring and
+    // notification duration, not a role (spec:AST-094 FR4).
+    expect(motionRoleIn(springs, 'keyboard')).toBeUndefined();
+    expect(motionRoleIn(timing, 'keyboardNotificationMs')).toBeUndefined();
     expect(motionRoleIn(timing.press, 'scrollBrakeMs')).toBeUndefined();
     expect(motionRoleIn(scroll, 'delaysContentTouchesMs')).toBeUndefined();
     expect(motionRoleIn(navigation, 'parallax')).toBeUndefined();
@@ -244,6 +249,18 @@ describe('motion roles', () => {
     expect(() => formatMotionRoleValue('spring', {response: 0.5})).toThrow(
       /spring is/,
     );
+    // A spring with no damping never settles.
+    for (const never of [
+      {duration: 0.5, bounce: 1},
+      {duration: 0.5, bounce: 1.5},
+      {response: 0.5, dampingRatio: 0},
+      {mass: 1, stiffness: 100, damping: 0},
+    ]) {
+      expect(() => formatMotionRoleValue('spring', never)).toThrow(
+        /must settle/,
+      );
+    }
+    expect(parseMotionRoleValue('spring', '0.5s 1')).toBeNull();
     expect(parseMotionRoleValue('spring', '')).toBeNull();
     expect(parseMotionRoleValue('spring', 'fast')).toBeNull();
     expect(parseMotionRoleValue('spring', '0.4s 0.2')).toEqual({

package/src/motion/uikit/tableImports.test.ts

@@ -0,0 +1,293 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file tableImports.test.ts
+ * @input Core's source files and their relative runtime imports
+ * @output Fails when a component's import graph reaches a motion table it
+ *   only reaches through a barrel or a namespace object, when anything imports
+ *   a table as a namespace object, or when a shared module imports a table
+ *   that belongs to one component
+ * @position Keeps a page to the motion tables it animates with: a namespace
+ *   object (`export * as uikit`) keeps every table, every register function
+ *   and the role registry in the bundle of anything that reads one table.
+ */
+
+import {existsSync, readdirSync, readFileSync, statSync} from 'node:fs';
+import {dirname, join, relative, resolve} from 'node:path';
+import {describe, expect, it} from 'vitest';
+
+/** The tables every touch module may share: the animator and gestures read them. */
+const SHARED_TABLES = new Set([
+  'motion/uikit/gestures.ts',
+  'motion/uikit/navigation.ts',
+  'motion/uikit/scroll.ts',
+  'motion/uikit/springs.ts',
+  'motion/uikit/timing.ts',
+]);
+
+const BARREL = 'motion/uikit/index.ts';
+
+/** A source file of the package, not a test, story or fixture. */
+function isSource(path: string): boolean {
+  return (
+    /\.(ts|tsx)$/.test(path) &&
+    !path.endsWith('.d.ts') &&
+    !/(\.test|\.spec|\.stories|\.test-violations)\.tsx?$/.test(path) &&
+    !/(^|\/)__tests__\//.test(path)
+  );
+}
+
+/** A table: a data module directly under motion/uikit, not the barrel. */
+function isTable(path: string): boolean {
+  return (
+    /^motion\/uikit\/[^/]+\.ts$/.test(path) &&
+    path !== BARREL &&
+    isSource(path) &&
+    !path.endsWith('.generated.ts')
+  );
+}
+
+/** The component a file belongs to (a PascalCase top-level directory), or null. */
+function componentOf(path: string): string | null {
+  const top = path.split('/')[0] ?? '';
+  return path.includes('/') && /^[A-Z]/.test(top) ? top : null;
+}
+
+interface Edge {
+  readonly to: string;
+  readonly namespace: boolean;
+}
+
+const IMPORT =
+  /(?:^|[\s;])(import|export)\s+(type\s+)?([^'";]*?)\s*from\s*['"](\.{1,2}\/[^'"]+)['"]/g;
+const DYNAMIC = /import\(\s*['"](\.{1,2}\/[^'"]+)['"]\s*\)/g;
+const BARE = /(?:^|[\s;])import\s*['"](\.{1,2}\/[^'"]+)['"]/g;
+
+/** The runtime edges of one file; type-only imports load nothing. */
+function edgesOf(
+  path: string,
+  source: string,
+  resolveSpecifier: (from: string, specifier: string) => string | null,
+): Edge[] {
+  const edges: Edge[] = [];
+  const text = source.replace(/\/\*[\s\S]*?\*\//g, '').replace(/\/\/.*$/gm, '');
+  for (const match of text.matchAll(IMPORT)) {
+    const [, , typeOnly, clause = '', specifier = ''] = match;
+    if (typeOnly != null) {
+      continue;
+    }
+    const named = /^\{([\s\S]*)\}$/.exec(clause.trim());
+    if (
+      named != null &&
+      (named[1] ?? '')
+        .split(',')
+        .map(part => part.trim())
+        .filter(Boolean)
+        .every(part => part.startsWith('type '))
+    ) {
+      continue;
+    }
+    const to = resolveSpecifier(path, specifier);
+    if (to != null) {
+      edges.push({to, namespace: /\*\s+as\s+\w+/.test(clause)});
+    }
+  }
+  for (const pattern of [DYNAMIC, BARE]) {
+    for (const match of text.matchAll(pattern)) {
+      const to = resolveSpecifier(path, match[1] ?? '');
+      if (to != null) {
+        edges.push({to, namespace: false});
+      }
+    }
+  }
+  return edges;
+}
+
+/**
+ * Every leak in a package, given its source files by path (relative to the
+ * package's src directory). Pure, so the rule can be checked on a made-up
+ * package too.
+ */
+function findTableLeaks(files: ReadonlyMap<string, string>): string[] {
+  const resolveSpecifier = (from: string, specifier: string): string | null => {
+    const base = join(dirname(from), specifier).replace(/\\/g, '/');
+    const stem = base.replace(/\.js$/, '');
+    for (const candidate of [
+      base,
+      `${stem}.ts`,
+      `${stem}.tsx`,
+      `${stem}/index.ts`,
+      `${stem}/index.tsx`,
+    ]) {
+      if (files.has(candidate)) {
+        return candidate;
+      }
+    }
+    return null;
+  };
+  const graph = new Map<string, Edge[]>();
+  for (const [path, source] of files) {
+    if (isSource(path)) {
+      graph.set(path, edgesOf(path, source, resolveSpecifier));
+    }
+  }
+
+  const leaks: string[] = [];
+  for (const [path, edges] of graph) {
+    for (const edge of edges) {
+      if (edge.namespace && (isTable(edge.to) || edge.to === BARREL)) {
+        leaks.push(
+          `${path} imports ${edge.to} as a namespace object, which keeps every table it reaches; import the tables by name`,
+        );
+      }
+      if (
+        isTable(edge.to) &&
+        !SHARED_TABLES.has(edge.to) &&
+        componentOf(path) == null &&
+        path !== BARREL
+      ) {
+        leaks.push(
+          `${path} (shared code) imports ${edge.to}, a component's table; import it in that component's touch module`,
+        );
+      }
+    }
+  }
+
+  const entries = [...graph.keys()].filter(path =>
+    /^[A-Z][^/]*\/index\.tsx?$/.test(path),
+  );
+  for (const entry of entries) {
+    const reached = new Set<string>([entry]);
+    const queue = [entry];
+    while (queue.length > 0) {
+      const file = queue.pop() as string;
+      for (const edge of graph.get(file) ?? []) {
+        if (!reached.has(edge.to)) {
+          reached.add(edge.to);
+          queue.push(edge.to);
+        }
+      }
+    }
+    for (const table of reached) {
+      if (!isTable(table) || SHARED_TABLES.has(table)) {
+        continue;
+      }
+      // Reached the way a page needs it: some component file this entry
+      // loads imports the table itself.
+      const direct = [...reached].some(
+        file =>
+          componentOf(file) != null &&
+          (graph.get(file) ?? []).some(edge => edge.to === table),
+      );
+      if (!direct) {
+        leaks.push(
+          `${entry} reaches ${table} only through a barrel or shared module; a component's table must be imported by the component that animates with it`,
+        );
+      }
+    }
+  }
+  return leaks;
+}
+
+function readPackage(root: string): Map<string, string> {
+  const files = new Map<string, string>();
+  const walk = (dir: string) => {
+    for (const name of readdirSync(dir)) {
+      if (name === 'node_modules' || name.startsWith('.')) {
+        continue;
+      }
+      const full = join(dir, name);
+      if (statSync(full).isDirectory()) {
+        walk(full);
+      } else if (/\.(ts|tsx)$/.test(name)) {
+        files.set(
+          relative(root, full).replace(/\\/g, '/'),
+          readFileSync(full, 'utf8'),
+        );
+      }
+    }
+  };
+  walk(root);
+  return files;
+}
+
+describe('motion table imports', () => {
+  const src = resolve(__dirname, '../..');
+
+  it('core imports each motion table by name, from the component that animates with it', () => {
+    expect(existsSync(join(src, BARREL))).toBe(true);
+    expect(findTableLeaks(readPackage(src))).toEqual([]);
+  });
+
+  it('catches a table reached through the barrel, a namespace object or shared code', () => {
+    const files = new Map([
+      [
+        'motion/uikit/index.ts',
+        "export {springs} from './springs';\nexport {refresh} from './refresh';\n",
+      ],
+      ['motion/uikit/springs.ts', 'export const springs = {};\n'],
+      ['motion/uikit/refresh.ts', 'export const refresh = {};\n'],
+      ['motion/uikit/wheel.ts', 'export const wheel = {};\n'],
+      [
+        'Refresh/index.ts',
+        "import {refresh} from '../motion/uikit/refresh';\nexport {refresh};\n",
+      ],
+      [
+        'Button/index.ts',
+        "import {springs} from '../motion/uikit';\nexport {springs};\n",
+      ],
+      [
+        'Picker/index.ts',
+        "import * as uikit from '../motion/uikit';\nimport type {Wheel} from '../motion/uikit/wheel';\nexport const p = uikit;\n",
+      ],
+      [
+        'motion/animator.ts',
+        "import {wheel} from './uikit/wheel';\nexport {wheel};\n",
+      ],
+      [
+        'Sheet/index.ts',
+        "import {wheel} from '../motion/animator';\nexport {wheel};\n",
+      ],
+    ]);
+    const leaks = findTableLeaks(files);
+    // The barrel re-exports a component's table, so Button reaches it.
+    expect(
+      leaks.some(leak =>
+        leak.startsWith('Button/index.ts reaches motion/uikit/refresh.ts'),
+      ),
+    ).toBe(true);
+    // A namespace object, and everything it keeps.
+    expect(
+      leaks.some(leak =>
+        leak.startsWith(
+          'Picker/index.ts imports motion/uikit/index.ts as a namespace object',
+        ),
+      ),
+    ).toBe(true);
+    expect(
+      leaks.some(leak =>
+        leak.startsWith('Picker/index.ts reaches motion/uikit/refresh.ts'),
+      ),
+    ).toBe(true);
+    // Shared code importing one component's table, and what that leaks.
+    expect(
+      leaks.some(leak =>
+        leak.startsWith(
+          'motion/animator.ts (shared code) imports motion/uikit/wheel.ts',
+        ),
+      ),
+    ).toBe(true);
+    expect(
+      leaks.some(leak =>
+        leak.startsWith('Sheet/index.ts reaches motion/uikit/wheel.ts'),
+      ),
+    ).toBe(true);
+    // The owner reaching its own table directly is fine; a type import loads nothing.
+    expect(leaks.some(leak => leak.startsWith('Refresh/index.ts'))).toBe(false);
+    expect(
+      leaks.some(leak =>
+        leak.includes('Picker/index.ts reaches motion/uikit/wheel.ts'),
+      ),
+    ).toBe(false);
+  });
+});