@multiplatform.one/theme 7.63.3 → 7.64.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/theme",
-  "version": "7.63.3",
+  "version": "7.64.0",
   "description": "Tamagui theme system for multiplatform.one",
   "keywords": [
     "multiplatform",
@@ -72,8 +72,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@multiplatform.one/platform": "^7.63.3",
-    "@multiplatform.one/store": "^7.63.3",
+    "@multiplatform.one/platform": "^7.64.0",
+    "@multiplatform.one/store": "^7.64.0",
     "@tamagui/animations-react-native": "2.7.6",
     "@tamagui/colors": "2.7.6",
     "@tamagui/config": "2.7.6",
@@ -89,8 +89,8 @@
   },
   "devDependencies": {
     "@expo/prebuild-config": "55.0.18",
-    "@multiplatform.one/config": "7.63.3",
-    "@multiplatform.one/test-utils": "7.63.3",
+    "@multiplatform.one/config": "7.64.0",
+    "@multiplatform.one/test-utils": "7.64.0",
     "@tamagui/animations-css": "2.7.6",
     "@tamagui/animations-reanimated": "2.7.6",
     "@tamagui/font-inter": "2.7.6",

package/src/keyboardFocusRing.openFocus.spec.ts

@@ -0,0 +1,96 @@
+/**
+ * FZ-7944 round 2, LC-71: an overlay's open focus paints a ring only when the
+ * open came from the keyboard. Any other open lands on the frame, except a
+ * mouse open with a first text field, which takes the caret.
+ */
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { ensureKeyboardModalityTracking, focusOnOpen } from "./keyboardFocusRing";
+
+function pointer(pointerType: "mouse" | "touch" | "pen") {
+  const event = new Event("pointerdown", { bubbles: true });
+  Object.defineProperty(event, "pointerType", { value: pointerType });
+  document.body.dispatchEvent(event);
+}
+
+function key() {
+  document.body.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", bubbles: true }));
+}
+
+function overlay(tag: "button" | "input", type?: string) {
+  const frame = document.createElement("div");
+  frame.tabIndex = -1;
+  const target = document.createElement(tag);
+  if (type) target.setAttribute("type", type);
+  frame.append(target);
+  document.body.append(frame);
+  const focus = { frame: vi.spyOn(frame, "focus"), target: vi.spyOn(target, "focus") };
+  return { frame, target, focus };
+}
+
+describe("focusOnOpen (LC-71, FZ-7944)", () => {
+  beforeEach(() => ensureKeyboardModalityTracking());
+  afterEach(() => {
+    document.body.replaceChildren();
+  });
+
+  it("a keyboard open focuses the first control and paints its ring", () => {
+    key();
+    const { frame, target, focus } = overlay("button");
+    expect(focusOnOpen(target, frame)).toBe(target);
+    expect(focus.target).toHaveBeenCalledWith({ preventScroll: true, focusVisible: true });
+  });
+
+  it("a keyboard open still puts the caret in the first field", () => {
+    key();
+    const { frame, target, focus } = overlay("input");
+    expect(focusOnOpen(target, frame)).toBe(target);
+    expect(focus.target).toHaveBeenCalledWith({ preventScroll: true, focusVisible: true });
+  });
+
+  it("a mouse open lands on the frame, so the first button never rings", () => {
+    pointer("mouse");
+    const { frame, target, focus } = overlay("button");
+    expect(focusOnOpen(target, frame)).toBe(frame);
+    expect(focus.target).not.toHaveBeenCalled();
+    expect(focus.frame).toHaveBeenCalledWith({ preventScroll: true, focusVisible: false });
+  });
+
+  it("a mouse open puts the caret in a first text field", () => {
+    pointer("mouse");
+    const { frame, target, focus } = overlay("input");
+    expect(focusOnOpen(target, frame)).toBe(target);
+    expect(focus.target).toHaveBeenCalledWith({ preventScroll: true, focusVisible: false });
+  });
+
+  it("a touch open lands on the frame, not a text field, so no keyboard rises", () => {
+    pointer("touch");
+    const { frame, target, focus } = overlay("input");
+    expect(focusOnOpen(target, frame)).toBe(frame);
+    expect(focus.target).not.toHaveBeenCalled();
+    expect(focus.frame).toHaveBeenCalledWith({ preventScroll: true, focusVisible: false });
+  });
+
+  it("a touch open lands on the frame for a non-text control too", () => {
+    pointer("touch");
+    const { frame, target, focus } = overlay("input", "checkbox");
+    expect(focusOnOpen(target, frame)).toBe(frame);
+    expect(focus.target).not.toHaveBeenCalled();
+  });
+
+  it("a frame without a tabindex is made focusable, so it can take the open", () => {
+    pointer("mouse");
+    const { frame, target } = overlay("button");
+    frame.removeAttribute("tabindex");
+    expect(focusOnOpen(target, frame)).toBe(frame);
+    expect(frame.getAttribute("tabindex")).toBe("-1");
+    expect(document.activeElement).toBe(frame);
+  });
+
+  it("with nothing focusable the frame takes focus", () => {
+    pointer("mouse");
+    const frame = document.createElement("div");
+    frame.tabIndex = -1;
+    document.body.append(frame);
+    expect(focusOnOpen(null, frame)).toBe(frame);
+  });
+});

package/src/keyboardFocusRing.ts

@@ -11,6 +11,7 @@
  */
 
 let lastInputWasKeyboard = false;
+let lastPointerWasTouch = false;
 let hooked = false;
 
 /**
@@ -22,7 +23,14 @@ export function ensureKeyboardModalityTracking() {
   if (hooked || typeof document === "undefined") return;
   hooked = true;
   document.addEventListener("keydown", () => (lastInputWasKeyboard = true), true);
-  document.addEventListener("pointerdown", () => (lastInputWasKeyboard = false), true);
+  document.addEventListener(
+    "pointerdown",
+    (event) => {
+      lastInputWasKeyboard = false;
+      lastPointerWasTouch = event.pointerType === "touch";
+    },
+    true,
+  );
 }
 
 /**
@@ -36,6 +44,35 @@ export function wasKeyboardFocus(): boolean {
   return lastInputWasKeyboard;
 }
 
+function isTextEntry(node: HTMLElement): boolean {
+  if (node.isContentEditable || node.tagName === "TEXTAREA") return true;
+  if (node.tagName !== "INPUT") return false;
+  const type = (node as HTMLInputElement).type;
+  return !["button", "checkbox", "color", "file", "radio", "range", "reset", "submit"].includes(
+    type,
+  );
+}
+
+/**
+ * An overlay's open focus (LC-71, FZ-7944). Only a keyboard open lands on a
+ * control and rings it. Any other open (pointer, touch, mounted open) lands on
+ * the frame, which paints no ring: Chromium ignores `focusVisible: false` and
+ * rings a control focused before any input. A mouse open still puts the caret
+ * in a first text field, which shows LC-133's border; a touch open does not,
+ * so the keyboard does not rise over a sheet the user only looked at. A frame
+ * without a tabindex gets -1, or its focus() is a no-op and the browser's
+ * own pick stays. Returns the node that took focus.
+ */
+export function focusOnOpen(target: HTMLElement | null, frame: HTMLElement): HTMLElement {
+  ensureKeyboardModalityTracking();
+  const keyboard = lastInputWasKeyboard;
+  const caret = target !== null && isTextEntry(target) && !lastPointerWasTouch;
+  const node = target && (keyboard || caret) ? target : frame;
+  if (node === frame && !frame.hasAttribute("tabindex")) frame.tabIndex = -1;
+  node.focus({ preventScroll: true, focusVisible: keyboard } as FocusOptions);
+  return node;
+}
+
 import { FOCUS_VISIBLE_RING_INSET } from "./theme/focusState";
 
 /**

package/src/theme/createThemes.ts

@@ -700,6 +700,55 @@ const childrenHues = [
   "gray",
 ] as const;
 
+/**
+ * FZ-7944 round 2, LC-71: the keyboard ring is the accent, never a white or
+ * black neutral. A hue scope rings in its own accent ink. The roots, whose
+ * house accent is the neutral inverse, ring in the blue scope's ink, the
+ * default accent on Apple platforms. Solid accent sub-themes keep the on-fill
+ * ring they paint for content inside the fill.
+ */
+function holdFocusRingAccent(
+  themes: Record<string, Record<string, string>>,
+): Record<string, Record<string, string>> {
+  const out: Record<string, Record<string, string>> = { ...themes };
+  for (const scheme of ["light", "dark"] as const) {
+    const base = themes[scheme];
+    if (!base) continue;
+    const grounds = [base.color1, base.color2].map(luminanceOf);
+    if (grounds.some((lum) => lum === null)) continue;
+    const holds = (color: string | undefined): color is string => {
+      const lum = luminanceOf(color);
+      return (
+        lum !== null &&
+        isChromatic(color) &&
+        grounds.every((ground) => contrastRatio(lum, ground as number) >= minContrastRatio)
+      );
+    };
+    const rootRing = [base.accentColor, themes[`${scheme}_blue`]?.accentColor].find(holds);
+    for (const [name, theme] of Object.entries(themes)) {
+      if (name !== scheme && !name.startsWith(`${scheme}_`)) continue;
+      if (theme.outlineColor === undefined) continue;
+      const parts = name.split("_");
+      if (parts.includes("accent")) continue;
+      const hue = (childrenHues as readonly string[]).includes(parts[1] ?? "")
+        ? parts[1]
+        : undefined;
+      const scopeInk = hue ? themes[`${scheme}_${hue}`]?.accentColor : undefined;
+      const ring = holds(scopeInk) ? scopeInk : rootRing;
+      if (!ring || ring === theme.outlineColor) continue;
+      out[name] = { ...theme, outlineColor: ring };
+    }
+  }
+  return out;
+}
+
+function isChromatic(color: string | undefined): boolean {
+  const hex = color ? normalizeToHex(color) : null;
+  if (!hex) return false;
+  const channels = [1, 3, 5].map((index) => Number.parseInt(hex.slice(index, index + 2), 16));
+  return Math.max(...channels) - Math.min(...channels) >= 24;
+}
+
 export function createThemesBuilder(
   baseTheme: BaseThemeBuilderDefinition,
   accentTheme: ThemeBuilderDefinition,
@@ -769,12 +818,14 @@ export function createThemesBuilder(
   const initialTheme = tamaguiCreateThemes(
     createThemesProps as Parameters<typeof tamaguiCreateThemes>[0],
   );
-  const themes = holdColorThemeAccent(
-    holdSwitchTrack(
-      holdSyntaxFloor(
-        holdNamedInkFloor(
-          holdSelectedState(
-            holdAccentFloor(neutralizeSemanticEntryText(neutralizeTintText(initialTheme))),
+  const themes = holdFocusRingAccent(
+    holdColorThemeAccent(
+      holdSwitchTrack(
+        holdSyntaxFloor(
+          holdNamedInkFloor(
+            holdSelectedState(
+              holdAccentFloor(neutralizeSemanticEntryText(neutralizeTintText(initialTheme))),
+            ),
           ),
         ),
       ),

package/src/theme/focusState.spec.ts

@@ -28,13 +28,13 @@ import { defaultKnobs } from "./knobs";
 import { resolveKnobs } from "./resolveKnobs";
 
 describe("focusState tokens (DG-A11Y-01 / DG-STATE-01 / W12)", () => {
-  it("FOCUS_VISIBLE_RING meets ≥2px solid outline contract at offset 0 (F1)", () => {
+  it("FOCUS_VISIBLE_RING meets ≥2px solid outline contract at offset +2 (FZ-7944)", () => {
     expect(FOCUS_VISIBLE_RING.outlineWidth).toBeGreaterThanOrEqual(FOCUS_RING_MIN_WIDTH);
     expect(FOCUS_VISIBLE_RING.outlineStyle).toBe("solid");
     expect(FOCUS_VISIBLE_RING.outlineColor).toBe("$outlineColor");
-    // Board verify pass F1: offset 0 — not −2 (band inside the fill, where it
-    // measured 1.17–1.31:1 on solid intents) and not +2 (a gapped halo).
-    expect(FOCUS_VISIBLE_RING.outlineOffset).toBe(0);
+    // Not −2 (band inside the fill, 1.17–1.31:1 on solid intents). FZ-7944
+    // round 2: a 2px gap, the macOS and iPadOS keyboard ring.
+    expect(FOCUS_VISIBLE_RING.outlineOffset).toBe(2);
     expect(FOCUS_RING_MIN_CONTRAST).toBeGreaterThanOrEqual(3);
   });
 
@@ -121,14 +121,14 @@ describe("$outlineColor token contrast (DF-03 / DG-A11Y-01)", () => {
   }
 
   // MPO-41 — assert the RATIO on the surface the band actually draws on, not
-  // just the declaration. At offset 0 the band paints OUTSIDE the border box,
+  // just the declaration. At offset +2 the band paints OUTSIDE the border box,
   // on the page ground behind the control; intent Buttons pin the parent-scope
   // `$outlineColor` literal on the ring (LC-51), so the pair that must clear
   // the floor is base `outlineColor` × base ground — for accent and error
   // controls alike, in both schemes.
   for (const scheme of ["light", "dark"] as const) {
     for (const intent of ["accent", "error"] as const) {
-      it(`${scheme} ${intent}: offset-0 ring clears ≥3:1 on the page ground it draws on`, () => {
+      it(`${scheme} ${intent}: the ring clears ≥3:1 on the page ground it draws on`, () => {
         const base = themes[scheme];
         expect(themes[`${scheme}_${intent}`]).toBeTruthy();
         const ring = normalizeToHex(base.outlineColor);
@@ -175,21 +175,21 @@ describe("the ring still paints inside a clipped / fused group (LC-71 §4 inset
     expect(keyboardFocusRingProps).toEqual(FOCUS_VISIBLE_RING_INSET);
   });
 
-  it("ensureFocusVisibleRing honors the explicit per-call-site inset and defaults to 0", () => {
+  it("ensureFocusVisibleRing honors the explicit per-call-site inset and defaults to +2", () => {
     expect(ensureFocusVisibleRing({ outlineOffset: -2 }).outlineOffset).toBe(-2);
-    expect(ensureFocusVisibleRing({ outlineWidth: 3 }).outlineOffset).toBe(0);
-    expect(ensureFocusVisibleRing().outlineOffset).toBe(0);
+    expect(ensureFocusVisibleRing({ outlineWidth: 3 }).outlineOffset).toBe(2);
+    expect(ensureFocusVisibleRing().outlineOffset).toBe(2);
   });
 });
 
 describe("LC-71: keyboard-only; measure the ring / text node, not the frame", () => {
-  it("standalone ring paints a 2px band on the ring-carrying node's box at offset 0", () => {
+  it("standalone ring paints a 2px band 2px clear of the ring-carrying node's box", () => {
     // Measure the node that paints the outline (the ring carrier / text node),
     // never an ancestor Frame. Band = [offset, offset + width] from THAT box.
     const { outlineOffset, outlineWidth } = FOCUS_VISIBLE_RING;
     expect(outlineWidth).toBe(2);
-    expect(outlineOffset).toBe(0);
-    expect(outlineOffset + outlineWidth).toBe(2);
+    expect(outlineOffset).toBe(2);
+    expect(outlineOffset + outlineWidth).toBe(4);
   });
 
   it("chip dismiss rings the glyph node, not the 44px hit-box frame", () => {
@@ -287,10 +287,10 @@ describe("theme DEV warn (outline-none / positive-tabindex)", () => {
  * shipping and being found in a later audit.
  */
 describe("LC-71 §4: the sanctioned focus-ring offset set is closed (MPO-92)", () => {
-  it("is exactly three offsets — clipping inset, default, shape halo", () => {
+  it("is exactly three offsets — clipping inset, flush, default", () => {
     expect([...SANCTIONED_FOCUS_RING_OFFSETS]).toEqual([-2, 0, 2]);
     expect(FOCUS_RING_CLIPPED_OFFSET).toBe(-2);
-    expect(FOCUS_VISIBLE_RING.outlineOffset).toBe(0);
+    expect(FOCUS_VISIBLE_RING.outlineOffset).toBe(2);
     expect(FOCUS_RING_HALO_OFFSET).toBe(2);
   });
 
@@ -312,7 +312,7 @@ describe("LC-71 §4: the sanctioned focus-ring offset set is closed (MPO-92)", (
     });
     // The band spans [outlineOffset, outlineOffset + outlineWidth] from the
     // border edge — here [2, 4]. Inner edge ≥ 0 means it paints entirely on the
-    // surface BEHIND the control, exactly like the default offset 0, so it
+    // surface BEHIND the control, exactly like the default ring, so it
     // measures against the page ground and cannot reproduce the 1.17–1.31:1
     // inside-the-fill failure MPO-41 retired.
     expect(FOCUS_VISIBLE_RING_HALO.outlineOffset).toBeGreaterThanOrEqual(0);

package/src/theme/focusState.ts

@@ -48,31 +48,26 @@ export function focusRingColorMeetsContrast(ringColor: string, surfaceColor: str
 
 /**
  * ONE ring geometry (DG-A11Y-01 / LC-71 §4): 2px solid `$outlineColor` at
- * offset **0** — the band hugs the border box and paints OUTSIDE it, on the
- * surface behind the control (reference §10; board F1 verify pass: offset 0,
- * not −2 and not +2). Offset 0 is what makes the ≥3:1 floor computable: the
- * ring contrasts against the page ground, not the control's own fill. The
- * old flat inset (−2) painted the band INSIDE solid intent fills and sank to
- * 1.17–1.31:1 (light accent 1.27, light error 1.17, dark error 1.31) where
- * the same ring on the page ground clears 5.78–6.50:1 (MPO-41 / MPO-19 X7).
+ * offset **+2**, a band clear of the border box with a 2px gap, painted on the
+ * surface behind the control. FZ-7944 round 2 moved the default from 0 to +2
+ * (the macOS and iPadOS keyboard ring); the ≥3:1 floor stays computable
+ * because the band still paints on the page ground, never inside a fill. The
+ * old flat inset (−2) painted INSIDE solid intent fills and sank to
+ * 1.17–1.31:1 (MPO-41 / MPO-19 X7).
  *
- * The inset did not die — it moved to `FOCUS_VISIBLE_RING_INSET`, an
- * explicit per-call-site carve-out for clipping ancestors. MPO-19 X7 names
- * the same offset `FOCUS_RING_CLIPPED_OFFSET` so call sites do not type `-2`.
- *
- * MPO-92 ratified a second, shape-scoped carve-out on the other side:
- * `FOCUS_VISIBLE_RING_HALO` (+2) for pill/circular thumbs and inline text
- * links. The F1 "not +2" reading was about the DEFAULT — a blanket +2 on
- * every control — and it stands. The halo is a named carve-out with a written
- * shape scope, exactly as the inset is; `SANCTIONED_FOCUS_RING_OFFSETS` below
- * is the closed set of all three.
+ * Two carve-outs stay named: `FOCUS_VISIBLE_RING_INSET` (−2) for clipping
+ * ancestors, and `FOCUS_RING_FLUSH_OFFSET` (0) for rows and cells that sit
+ * edge to edge inside a padded overlay, where a gapped band would collide
+ * with the neighbour. `SANCTIONED_FOCUS_RING_OFFSETS` is the closed set.
  */
 export const FOCUS_RING_CLIPPED_OFFSET = -2;
+export const FOCUS_RING_FLUSH_OFFSET = 0;
+export const FOCUS_RING_HALO_OFFSET = 2;
 export const FOCUS_VISIBLE_RING = {
   outlineWidth: FOCUS_RING_MIN_WIDTH,
   outlineStyle: "solid" as const,
   outlineColor: "$outlineColor",
-  outlineOffset: 0,
+  outlineOffset: FOCUS_RING_HALO_OFFSET,
 } satisfies ControlStateProps;
 
 /**
@@ -94,29 +89,10 @@ export const FOCUS_VISIBLE_RING_INSET = {
 } satisfies ControlStateProps;
 
 /**
- * The LC-71 §4 halo carve-out (MPO-92, ratified 2026-09-02): the SAME ring,
- * pushed 2px clear of the border box, for the two shapes where a band hugging
- * the edge reads as part of the glyph instead of around it.
- *
- * Scope is by SHAPE, not by instance, and it is closed at two:
- *   - **pill / circular thumbs** — a round handle the user drags (Slider
- *     thumb, Rating star, TimeRangeScrubber handle). At offset 0 the band is
- *     concentric with the glyph's own edge and reads as a thicker glyph.
- *   - **inline text links** — a link inside a run of prose (markdown/mdx
- *     `Link`, ErrorSummary's summary link, backoffice "View All"). At offset 0
- *     the band crosses the line box and collides with ascenders/descenders of
- *     the surrounding text.
- *
- * NOT for standalone rectangles on the page ground — cards, tiles, rows,
- * fields. Those are the default `FOCUS_VISIBLE_RING` (offset 0), which is
- * what makes the Axiom 12 ≥3:1 floor computable against the page ground.
- *
- * Contrast is unaffected: like offset 0 the halo paints OUTSIDE the border
- * box, on the surface behind the control, so it measures against the same
- * page ground the default does — the 1.17–1.31:1 failures MPO-41 retired were
- * the INSET painting inside solid intent fills, a defect the halo cannot have.
+ * The halo (MPO-92): pill and circular thumbs and inline text links. Since
+ * FZ-7944 round 2 it equals the default ring; the name stays so those call
+ * sites keep saying why they hold +2 if the default ever moves again.
  */
-export const FOCUS_RING_HALO_OFFSET = 2;
 export const FOCUS_VISIBLE_RING_HALO = {
   ...FOCUS_VISIBLE_RING,
   outlineOffset: FOCUS_RING_HALO_OFFSET,
@@ -124,7 +100,7 @@ export const FOCUS_VISIBLE_RING_HALO = {
 
 /**
  * The CLOSED set of sanctioned focus-ring offsets (LC-71 §4). Three, and only
- * three: the default 0, the clipping inset −2, the shape halo +2. A call site
+ * three: the clipping inset −2, the flush 0, the default +2. A call site
  * that wants any other number is a rule gap, not a preference — file it and
  * amend §4, do not type the number. `focusState.spec.ts` asserts this set is
  * exactly what the repo paints, so a fourth offset fails a test instead of
@@ -132,8 +108,8 @@ export const FOCUS_VISIBLE_RING_HALO = {
  */
 export const SANCTIONED_FOCUS_RING_OFFSETS = [
   FOCUS_RING_CLIPPED_OFFSET,
+  FOCUS_RING_FLUSH_OFFSET,
   FOCUS_VISIBLE_RING.outlineOffset,
-  FOCUS_RING_HALO_OFFSET,
 ] as const;
 
 /** True when `offset` is one of the three offsets LC-71 §4 sanctions. */

package/src/theme/hairlineToken.spec.ts

@@ -50,7 +50,7 @@ describe("LC-148 HAIRLINE-TOKEN: borderWidth small is the theme's hairline", ()
       controlBorderOutlined: "$borderColorHairline",
       elevatedSurface: "$borderColorHairline",
     });
-    expect(edges({ borderWidth: "small" }, "dark").elevatedSurface).toBe("$color5");
+    expect(edges({ borderWidth: "small" }, "dark").elevatedSurface).toBe("transparent");
     expect(edges({ borderWidth: "none", fillStyle: "outlined" }).borderRadius).toBe(
       "$borderColorHairline",
     );
@@ -64,7 +64,7 @@ describe("LC-148 HAIRLINE-TOKEN: borderWidth small is the theme's hairline", ()
         controlBorderOutlined: "$borderColor",
         elevatedSurface: "$borderColor",
       });
-      expect(edges({ borderWidth }, "dark").elevatedSurface).toBe("$color6");
+      expect(edges({ borderWidth }, "dark").elevatedSurface).toBe("transparent");
     }
   });
 

package/src/theme/motion.spec.ts

@@ -1,6 +1,12 @@
+import { readFileSync, readdirSync, statSync } from "node:fs";
+import path from "node:path";
 import { describe, expect, it } from "vitest";
+import { GAP_LG_KNOB } from "../audit/constraintAudit";
 import { animationConfig, animationDurations, motionStops } from "./animations/css";
+import { transitionProps } from "./transitionProps";
+import { transitionProps as nativeTransitionProps } from "./transitionProps.native";
 import {
+  motionExitFactor,
   motionFor,
   motionDurationMs,
   motionSeconds,
@@ -82,3 +88,134 @@ describe("motion durations", () => {
     expect(motionSettleMs(["quick", { opacity: "slow" }])).toBe(980);
   });
 });
+
+const bouncyStops = ["bouncy", "superBouncy"];
+const nonBouncy = motionStops.filter((stop) => !bouncyStops.includes(stop));
+const ms = (stop: unknown) => animationDurations[stop as keyof typeof animationDurations];
+
+function bezierYs(timing: string): number[] {
+  const match = timing.match(/cubic-bezier\(([^)]+)\)/);
+  if (!match) return [];
+  const [, y1, , y2] = match[1].split(",").map(Number);
+  return [y1, y2];
+}
+
+const publicRoot = path.resolve(__dirname, "../../..");
+
+function sources(dir: string, out: string[] = []): string[] {
+  for (const name of readdirSync(dir)) {
+    if (name === "node_modules" || name === "dist" || name === "types") continue;
+    const file = path.join(dir, name);
+    if (statSync(file).isDirectory()) sources(file, out);
+    else if (/\.tsx?$/.test(name) && !/\.(spec|test|stories)\.tsx?$|\.d\.ts$/.test(name)) {
+      out.push(file);
+    }
+  }
+  return out;
+}
+
+function enterExitObjects(source: string): string[] {
+  const objects: string[] = [];
+  for (const match of source.matchAll(
+    /\b(?:enterStyle|exitStyle)\s*(?:=\{|:)\s*(?:[^{}?]*\?\s*)?(\{[^{}]*\}|[A-Za-z_$][\w$]*)/g,
+  )) {
+    const value = match[1];
+    if (value.startsWith("{")) objects.push(value);
+    else {
+      const declared = source.match(
+        new RegExp(`\\b(?:const|let)\\s+${value}\\s*=\\s*(\\{[^{}]*\\})`),
+      );
+      if (declared) objects.push(declared[1]);
+    }
+  }
+  return objects;
+}
+
+function numbersIn(expression: string, source: string): number[] {
+  const values = [...expression.matchAll(/-?\d+(?:\.\d+)?/g)].map((m) => Math.abs(Number(m[0])));
+  for (const [identifier] of expression.matchAll(/[A-Za-z_$][\w$]*/g)) {
+    const declared = source.match(new RegExp(`\\bconst\\s+${identifier}\\s*=\\s*([^;\\n]+)`));
+    if (declared && !/[{(]/.test(declared[1])) {
+      values.push(
+        ...[...declared[1].matchAll(/-?\d+(?:\.\d+)?/g)].map((m) => Math.abs(Number(m[0]))),
+      );
+    }
+  }
+  return values;
+}
+
+describe("LC-178 MOTION-CHARACTER: quick in, quicker out, short and still", () => {
+  it("exits every role faster than it enters, about two thirds of the enter duration", () => {
+    for (const stop of motionStops) {
+      for (const [name, role] of Object.entries(motionFor(stop))) {
+        const enter = ms(role.transition);
+        const exit = ms(role.exit);
+        const shorter = nonBouncy.filter((candidate) => ms(candidate) < enter);
+        if (shorter.length === 0) {
+          expect(role.exit, `${stop}.${name}`).toBe(role.transition);
+          continue;
+        }
+        expect(exit, `${stop}.${name} exit`).toBeLessThan(enter);
+        const target = enter * motionExitFactor;
+        const best = Math.min(...shorter.map((candidate) => Math.abs(ms(candidate) - target)));
+        expect(Math.abs(exit - target), `${stop}.${name} exit near 2/3`).toBe(best);
+      }
+    }
+    for (const role of Object.values(motionFor("none"))) expect(role.exit).toBeUndefined();
+  });
+
+  it("never picks a bouncy stop, so no role overshoots opacity", () => {
+    for (const stop of motionStops) {
+      for (const [name, role] of Object.entries(motionFor(stop))) {
+        const presetBounce = name === "control" && bouncyStops.includes(stop);
+        for (const leg of presetBounce ? [role.exit] : [role.transition, role.exit]) {
+          expect(bouncyStops, `${stop}.${name}`).not.toContain(leg);
+          for (const y of bezierYs(animationConfig[leg as keyof typeof animationConfig])) {
+            expect(y, `${stop}.${name} ${String(leg)} curve`).toBeGreaterThanOrEqual(0);
+            expect(y, `${stop}.${name} ${String(leg)} curve`).toBeLessThanOrEqual(1);
+          }
+        }
+      }
+    }
+  });
+
+  it("hands the exit stop to the driver, and native springs clamp their overshoot", () => {
+    const { overlay } = motionFor("quick");
+    expect(transitionProps(overlay).transition).toEqual(["quicker", { exit: "quickest" }]);
+    expect(nativeTransitionProps(overlay).transition).toEqual([
+      "quicker",
+      { overshootClamping: true, exit: "quickest" },
+    ]);
+    const shortest = motionFor("quickestLessBouncy").control;
+    expect(nativeTransitionProps(shortest).transition).toEqual([
+      "quickestLessBouncy",
+      { overshootClamping: true },
+    ]);
+  });
+
+  it("keeps every enter and exit offset in public/* within gapLg and its opacity in [0, 1]", () => {
+    const limit = GAP_LG_KNOB.gapLg;
+    expect(limit).toBeGreaterThan(0);
+    const travel: string[] = [];
+    const opacity: string[] = [];
+    let seen = 0;
+    for (const file of sources(publicRoot)) {
+      const source = readFileSync(file, "utf8");
+      for (const object of enterExitObjects(source)) {
+        seen += 1;
+        const where = `${path.relative(publicRoot, file)}: ${object}`;
+        for (const [, axis, expression] of object.matchAll(/\b([xy])\s*:\s*([^,}]+)/g)) {
+          if (numbersIn(expression, source).some((value) => value > limit)) {
+            travel.push(`${where} (${axis} past gapLg ${limit})`);
+          }
+        }
+        for (const [, value] of object.matchAll(/\bopacity\s*:\s*(-?\d+(?:\.\d+)?)/g)) {
+          if (Number(value) < 0 || Number(value) > 1) opacity.push(where);
+        }
+      }
+    }
+    expect(seen).toBeGreaterThan(10);
+    expect(travel).toEqual([]);
+    expect(opacity).toEqual([]);
+  });
+});