@oxyhq/bloom 0.52.0 → 0.53.0

package/lib/typescript/module/motion/motion.web.d.ts

@@ -0,0 +1,79 @@
+/**
+ * WEB FORK of `motion.ts`. Same three names, same contract ("a value you hand to
+ * an `Animated.View`'s `entering` / `exiting`"), different mechanism — because on
+ * web the native mechanism does nothing at all and the obvious replacement is
+ * worse than nothing.
+ *
+ * WHY THE DEFAULT FILE CANNOT SERVE WEB. `motion.ts` exports custom
+ * `EntryExitAnimationFunction` worklet builders. Reanimated's web layout-animation
+ * manager resolves an animation by NAME: `tryGetAnimationConfig` reads
+ * `config.presetName` off the function, a custom builder has none, and
+ * `checkUndefinedAnimationFail` then bails to `makeElementVisible(element, 0)`.
+ * Measured in Chrome 5.x/reanimated 4.5.0: the card mounts at `transform: none`,
+ * `opacity: 1` and stays there for every sampled frame of both directions, with
+ * one `[Reanimated] Couldn't load entering/exiting animation` warning per element.
+ * Native is unaffected — it runs the builder directly, with no name lookup.
+ *
+ * WHY THE ENTER AND THE EXITS USE DIFFERENT MECHANISMS. Rebuilding all three as
+ * `Keyframe`s is the obvious fix and is only HALF right, because reanimated's two
+ * web directions differ in one decisive argument:
+ *
+ *   - `exiting` -> `handleExitingAnimation` calls `setElementAnimation` on a
+ *     throwaway clone with `shouldSavePosition` FALSE. The custom keyframe's
+ *     `duration x 5` cleanup only tears that clone down, which is what it is for.
+ *     A `Keyframe` here is safe AND exact: it compiles to a real CSS `@keyframes`
+ *     rule, so the full scale + opacity shape survives.
+ *   - `entering` -> `chooseAction` calls `setElementAnimation` on the REAL element
+ *     with `shouldSavePosition` TRUE, and since a custom keyframe's generated
+ *     `REA-ENTERING-n` name is absent from reanimated's built-in `Animations`
+ *     map, `scheduleAnimationCleanup` fires
+ *     `setElementPosition` at `duration x 5` — `position: absolute`, a frozen
+ *     `top`/`left`/`width`/`height` snapshot, `transform` cleared. The animation
+ *     plays and the element is then pinned, silently, one and a half seconds
+ *     later. That is failure mode (C) in `~/Oxy/AGENTS.md` and it is strictly
+ *     worse than the inert animation it would replace.
+ *
+ * So the enter uses a PREDEFINED builder, whose `presetName` IS in `Animations`
+ * and therefore skips `scheduleAnimationCleanup` entirely. Predefined builders
+ * cannot combine a fade with a scale, so the web enter keeps the fade and drops
+ * the 0.7 -> 1 growth. `ScreenTransition` in this same folder already made that
+ * trade for the same reason ("on web the slide is intentionally dropped").
+ *
+ * The imperative shared-value drive (failure mode (A)'s remedy, and what
+ * `toast/ToastRow.tsx` uses for its own enter) is the third option and is not
+ * available here: these are exported VALUES, not components, so there is no
+ * render to hang a `useSharedValue` off — and it could not express an exit at
+ * all, since keeping an unmounting element alive is exactly what `exiting` is for.
+ *
+ * WEB EASING IS LINEAR. `Keyframe` has no `.easing()` modifier, and a per-stop
+ * easing only survives `convertAnimationObjectToKeyframes` when it resolves to one
+ * of reanimated's seven `WebEasings` names (all of them ease-IN curves), while
+ * `.easing(Easing.bezier(...))` needs the `__closure` the worklets babel plugin
+ * adds — absent in every Oxy web build — and degrades to linear WITH a warning.
+ * `ShrinkAndPop` therefore carries an extra midpoint stop so its piecewise-linear
+ * web curve tracks the native `withTiming` segments closely rather than cutting
+ * the corner.
+ */
+import { type EntryOrExitLayoutType } from 'react-native-reanimated';
+/**
+ * Entering: fade in.
+ *
+ * The scale is dropped on web — see the header. `FadeIn`'s own default duration
+ * is already 300ms, matching the native builder, and the bare class is exported
+ * rather than a `.duration()` instance so nothing shares a mutable builder.
+ */
+export declare const ScaleAndFadeIn: EntryOrExitLayoutType;
+/** Exiting counterpart to {@link ScaleAndFadeIn}: fade out while shrinking to 70%. */
+export declare const ScaleAndFadeOut: EntryOrExitLayoutType;
+/**
+ * Exiting with a brief "pop": the scale dips to 70%, overshoots to 110%, and the
+ * element fades out.
+ *
+ * Stops are the native timeline sampled at its own breakpoints, so every property
+ * is declared at every stop and nothing depends on CSS's cross-stop interpolation:
+ * scale reaches 0.7 at 75ms (30%) and 1.1 at 225ms (90%); opacity holds until
+ * 125ms (50%) and then falls to 0 by 250ms. The 50% stop's 0.8333 scale and the
+ * 90% stop's 0.2 opacity are the native values at those instants.
+ */
+export declare const ShrinkAndPop: EntryOrExitLayoutType;
+//# sourceMappingURL=motion.web.d.ts.map

package/lib/typescript/module/motion/motion.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"motion.web.d.ts","sourceRoot":"","sources":["../../../../src/motion/motion.web.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDG;AACH,OAAO,EAGL,KAAK,qBAAqB,EAC3B,MAAM,yBAAyB,CAAC;AAOjC;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,EAAE,qBAA8B,CAAC;AAE5D,sFAAsF;AACtF,eAAO,MAAM,eAAe,EAAE,qBAGD,CAAC;AAE9B;;;;;;;;;GASG;AACH,eAAO,MAAM,YAAY,EAAE,qBAMF,CAAC"}

package/lib/typescript/module/progressive-blur/index.web.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.web.d.ts","sourceRoot":"","sources":["../../../../src/progressive-blur/index.web.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAEpD,YAAY,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAEpD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,SAAa,EACb,SAAiB,EACjB,GAAG,IAAI,EACR,EAAE,oBAAoB,2CAkBtB;yBAvBe,eAAe"}
+{"version":3,"file":"index.web.d.ts","sourceRoot":"","sources":["../../../../src/progressive-blur/index.web.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAEpD,YAAY,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAEpD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,SAAa,EACb,SAAiB,EACjB,GAAG,IAAI,EACR,EAAE,oBAAoB,2CAkBtB;yBAvBe,eAAe"}

package/lib/typescript/module/styles/web-view-style.d.ts

@@ -18,4 +18,53 @@ import type { ViewStyle } from 'react-native';
  * where Yoga silently ignores it.
  */
 export declare const WEB_POSITION_FIXED: ViewStyle["position"];
+/**
+ * A `ViewStyle` that may ALSO carry CSS react-native-web forwards straight to the
+ * DOM node but React Native does not model at all.
+ *
+ * This is the OTHER shape of the same RN/RNW type gap `WEB_POSITION_FIXED`
+ * covers, and it needs a different escape hatch because the two are structurally
+ * different: `position` is a key RN DOES model, just with a narrower value union,
+ * so a value-level cast is enough and it can still be written inside an ordinary
+ * style object. The properties below have no key on `ViewStyle` at all, so the
+ * whole OBJECT has to cross the boundary.
+ *
+ * ANNOTATE, DO NOT CAST. Every `.web` fork used to spell this `{ … } as ViewStyle`
+ * inline. That is not a widening, it is SILENCING: `as` only requires the two
+ * types to be COMPARABLE, so `{ animatoin: '…' } as ViewStyle` compiles happily
+ * and the typo ships as a style key react-native-web drops on the floor.
+ * Annotating with this interface restores excess-property checking — a key that
+ * is neither a real RN style nor a listed web-only property is a compile error —
+ * and, unlike a widening helper function, it erases completely, so the emitted
+ * JavaScript is byte-identical to the cast it replaces.
+ *
+ * ```ts
+ * const glass: WebCssStyle = { backdropFilter: 'blur(24px)' };
+ * // …then pass it anywhere a `ViewStyle` is expected.
+ * ```
+ *
+ * Only add a key here once react-native-web is confirmed to pass it through and
+ * RN has no equivalent. Several near-misses do NOT belong: RN 0.83 models
+ * `cursor`, `boxShadow`, `filter` and `pointerEvents` on `ViewStyle` directly, so
+ * those need no widening at all (`userSelect` is the trap — RN declares it on
+ * `TextStyle` only). Prefixed spellings sit alongside the standard ones because
+ * Safari still needs them for `backdrop-filter` and `mask-image`.
+ */
+export interface WebCssStyle extends ViewStyle {
+    /** CSS `animation` shorthand. Bloom's web forks self-inject the `@keyframes`. */
+    animation?: string;
+    animationDelay?: string;
+    transitionProperty?: string;
+    transitionDuration?: string;
+    transitionTimingFunction?: string;
+    backdropFilter?: string;
+    WebkitBackdropFilter?: string;
+    maskImage?: string;
+    WebkitMaskImage?: string;
+    backgroundImage?: string;
+    scrollbarWidth?: 'auto' | 'thin' | 'none';
+    scrollbarColor?: string;
+    /** RN declares this on `TextStyle`, not `ViewStyle`. */
+    userSelect?: 'auto' | 'none' | 'text' | 'contain' | 'all';
+}
 //# sourceMappingURL=web-view-style.d.ts.map

package/lib/typescript/module/styles/web-view-style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"web-view-style.d.ts","sourceRoot":"","sources":["../../../../src/styles/web-view-style.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,kBAAkB,EAAc,SAAS,CAAC,UAAU,CAAC,CAAC"}
+{"version":3,"file":"web-view-style.d.ts","sourceRoot":"","sources":["../../../../src/styles/web-view-style.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,kBAAkB,EAAc,SAAS,CAAC,UAAU,CAAC,CAAC;AAEnE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,iFAAiF;IACjF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IAC1C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,wDAAwD;IACxD,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,KAAK,CAAC;CAC3D"}

package/lib/typescript/module/tab-bar/TabBarBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabBarBase.d.ts","sourceRoot":"","sources":["../../../../src/tab-bar/TabBarBase.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,OAAO,EAOL,KAAK,aAAa,EACnB,MAAM,OAAO,CAAC;AAgBf,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAEtE,OAAO,EAiBL,KAAK,gBAAgB,EACrB,KAAK,kBAAkB,EACxB,MAAM,UAAU,CAAC;AAClB,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAe,MAAM,SAAS,CAAC;AAqa3E;;;;;;GAMG;AACH,wBAAgB,YAAY,CAC1B,OAAO,EAAE,aAAa,CAAC,kBAAkB,CAAC,EAC1C,IAAI,EAAE,aAAa,CAAC,oBAAoB,CAAC;YAElB,WAAW;;EAGnC;AAED,+EAA+E;AAC/E,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,aAAa,CAAC,gBAAgB,CAAC;YAC1C,iBAAiB;;EAG/C"}
+{"version":3,"file":"TabBarBase.d.ts","sourceRoot":"","sources":["../../../../src/tab-bar/TabBarBase.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,OAAO,EAOL,KAAK,aAAa,EACnB,MAAM,OAAO,CAAC;AAgBf,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAEtE,OAAO,EAiBL,KAAK,gBAAgB,EACrB,KAAK,kBAAkB,EACxB,MAAM,UAAU,CAAC;AAClB,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAe,MAAM,SAAS,CAAC;AA0a3E;;;;;;GAMG;AACH,wBAAgB,YAAY,CAC1B,OAAO,EAAE,aAAa,CAAC,kBAAkB,CAAC,EAC1C,IAAI,EAAE,aAAa,CAAC,oBAAoB,CAAC;YAElB,WAAW;;EAGnC;AAED,+EAA+E;AAC/E,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,aAAa,CAAC,gBAAgB,CAAC;YAC1C,iBAAiB;;EAG/C"}

package/lib/typescript/module/tab-bar/index.d.ts

@@ -8,6 +8,6 @@ export declare const TabBarButton: {
 };
 export { MINIMIZE_SPRING, setMinimized, TabBarMinimizeProvider, useMinimizeOnScroll, useMinimizeState, useTabBarMinimized, } from './minimize-context';
 export type { MinimizeState } from './minimize-context';
-export { useTabBarReservedSpace } from './use-reserved-space';
+export { useTabBarFootprint } from './use-footprint';
 export type { TabBarButtonProps, TabBarItem, TabBarProps, TabBarTheme } from './types';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/tab-bar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/tab-bar/index.ts"],"names":[],"mappings":"AAmBA,eAAO,MAAM,MAAM;;;CAA+C,CAAC;AACnE,eAAO,MAAM,YAAY;;;CAAkC,CAAC;AAE5D,OAAO,EACL,eAAe,EACf,YAAY,EACZ,sBAAsB,EACtB,mBAAmB,EACnB,gBAAgB,EAChB,kBAAkB,GACnB,MAAM,oBAAoB,CAAC;AAC5B,YAAY,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAC9D,YAAY,EAAE,iBAAiB,EAAE,UAAU,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/tab-bar/index.ts"],"names":[],"mappings":"AAmBA,eAAO,MAAM,MAAM;;;CAA+C,CAAC;AACnE,eAAO,MAAM,YAAY;;;CAAkC,CAAC;AAE5D,OAAO,EACL,eAAe,EACf,YAAY,EACZ,sBAAsB,EACtB,mBAAmB,EACnB,gBAAgB,EAChB,kBAAkB,GACnB,MAAM,oBAAoB,CAAC;AAC5B,YAAY,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACrD,YAAY,EAAE,iBAAiB,EAAE,UAAU,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC"}

package/lib/typescript/module/tab-bar/index.web.d.ts

@@ -8,6 +8,6 @@ export declare const TabBarButton: {
 };
 export { MINIMIZE_SPRING, setMinimized, TabBarMinimizeProvider, useMinimizeOnScroll, useMinimizeState, useTabBarMinimized, } from './minimize-context';
 export type { MinimizeState } from './minimize-context';
-export { useTabBarReservedSpace } from './use-reserved-space';
+export { useTabBarFootprint } from './use-footprint';
 export type { TabBarButtonProps, TabBarItem, TabBarProps, TabBarTheme } from './types';
 //# sourceMappingURL=index.web.d.ts.map

package/lib/typescript/module/tab-bar/index.web.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.web.d.ts","sourceRoot":"","sources":["../../../../src/tab-bar/index.web.tsx"],"names":[],"mappings":"AAqBA,eAAO,MAAM,MAAM;;;CAA+C,CAAC;AACnE,eAAO,MAAM,YAAY;;;CAAkC,CAAC;AAE5D,OAAO,EACL,eAAe,EACf,YAAY,EACZ,sBAAsB,EACtB,mBAAmB,EACnB,gBAAgB,EAChB,kBAAkB,GACnB,MAAM,oBAAoB,CAAC;AAC5B,YAAY,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAC9D,YAAY,EAAE,iBAAiB,EAAE,UAAU,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.web.d.ts","sourceRoot":"","sources":["../../../../src/tab-bar/index.web.tsx"],"names":[],"mappings":"AAqBA,eAAO,MAAM,MAAM;;;CAA+C,CAAC;AACnE,eAAO,MAAM,YAAY;;;CAAkC,CAAC;AAE5D,OAAO,EACL,eAAe,EACf,YAAY,EACZ,sBAAsB,EACtB,mBAAmB,EACnB,gBAAgB,EAChB,kBAAkB,GACnB,MAAM,oBAAoB,CAAC;AAC5B,YAAY,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACrD,YAAY,EAAE,iBAAiB,EAAE,UAAU,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC"}

package/lib/typescript/module/tab-bar/shared.d.ts

@@ -29,9 +29,9 @@ export declare const LABEL_FONT_SIZE = 9.5;
 /**
  * Vertical gap between the bottom of the pill and the bottom of the window.
  *
- * The safe-area inset is folded in HERE, which is why anything reserving layout
- * space for the bar must go through `useTabBarReservedSpace` (which derives its
- * number from this same function) rather than adding `insets.bottom` to a
+ * The safe-area inset is folded in HERE, which is why anything accounting for
+ * the bar in its own layout must go through `useTabBarFootprint` (which derives
+ * its number from this same function) rather than adding `insets.bottom` to a
  * hardcoded height — that double-counts the inset.
  */
 export declare function tabBarBottomGap(bottomInset: number): number;

package/lib/typescript/module/tab-bar/surface.web.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"surface.web.d.ts","sourceRoot":"","sources":["../../../../src/tab-bar/surface.web.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAkBnD,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,kBAAkB,2CAWjE;yBAXe,aAAa"}
+{"version":3,"file":"surface.web.d.ts","sourceRoot":"","sources":["../../../../src/tab-bar/surface.web.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAkBnD,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,kBAAkB,2CAWjE;yBAXe,aAAa"}

package/lib/typescript/module/tab-bar/use-footprint.d.ts

@@ -0,0 +1,31 @@
+/**
+ * The vertical space the tab bar OCCUPIES above the bottom of the window, in
+ * px: its own height plus its own bottom offset, and nothing else.
+ *
+ * It is deliberately the raw footprint, with no clearance folded in. Clearance
+ * is a consumer decision and it differs per call site — a scroll view wants the
+ * footprint plus a breathing gap so the last row clears the pill, while a
+ * floating action button anchored by `bottom` already supplies its own gap and
+ * wants the footprint bare. Baking a margin in here would place that FAB too
+ * high and make one word mean two things inside a single file. Add your own:
+ *
+ * ```tsx
+ * const footprint = useTabBarFootprint();
+ *
+ * <Animated.ScrollView contentContainerStyle={{ paddingBottom: footprint + 12 }} />
+ * <Fab style={{ position: 'absolute', right: 16, bottom: footprint }} />
+ * ```
+ *
+ * The value ALREADY INCLUDES the bottom safe-area inset — the bar folds the
+ * inset into its own gap, so this is measured from the true window edge, not
+ * from the safe area. Never write `footprint + insets.bottom`: that counts the
+ * home indicator twice and strands a visible band of dead space under every
+ * list (114px accounted for a 76px bar on an iOS device or PWA). Whatever you
+ * add on top is your own clearance — never the inset a second time.
+ *
+ * It is the EXPANDED height, deliberately. The bar minimizes while scrolling
+ * down and re-expands on the way up, so measuring the minimized height would
+ * hide the end of a list the moment the user scrolled back to it.
+ */
+export declare function useTabBarFootprint(): number;
+//# sourceMappingURL=use-footprint.d.ts.map

package/lib/typescript/module/tab-bar/use-footprint.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-footprint.d.ts","sourceRoot":"","sources":["../../../../src/tab-bar/use-footprint.ts"],"names":[],"mappings":"AAiBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,kBAAkB,IAAI,MAAM,CAG3C"}

package/lib/typescript/module/toast/ToastRow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToastRow.d.ts","sourceRoot":"","sources":["../../../../src/toast/ToastRow.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA2B/B,OAAO,KAAK,EAEV,aAAa,EAEb,QAAQ,EACR,WAAW,EACZ,MAAM,SAAS,CAAC;AAwDjB,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eAHR,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI;kCA6UzC,CAAC"}
+{"version":3,"file":"ToastRow.d.ts","sourceRoot":"","sources":["../../../../src/toast/ToastRow.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA4B/B,OAAO,KAAK,EAEV,aAAa,EAEb,QAAQ,EACR,WAAW,EACZ,MAAM,SAAS,CAAC;AAwDjB,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eAHR,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI;kCAiVzC,CAAC"}

package/lib/typescript/module/toast/ToastSwipeHandler.d.ts

@@ -2,12 +2,18 @@
  * Derived from sonner-native v0.26.4 — src/gestures.tsx
  * (MIT © Gunnar Torfi Steinarsson). See the top-level NOTICE.
  *
- * W2 — the animated style reads `translate`, `direction`, `position`,
- * `windowWidth` and `isAndroid`; ALL of them are in the dependency array. On web
- * without the worklets babel plugin reanimated re-runs the mapper on its deps
- * rather than on auto-tracked reads, so a missing dep freezes the swipe transform
- * at its first frame (upstream omits `position` and `isAndroid`, so a toast that
- * changes position mid-life swipes the wrong way).
+ * W2 — the animated style reads `translate`, `direction`, `position`, `rowWidth`
+ * and `isAndroid`; ALL of them are in the dependency array. On web without the
+ * worklets babel plugin reanimated re-runs the mapper on its deps rather than on
+ * auto-tracked reads, so a missing dep freezes the swipe transform at its first
+ * frame (upstream omits `position` and `isAndroid`, so a toast that changes
+ * position mid-life swipes the wrong way).
+ *
+ * W12 — this wrapper is THE row box, so it is where `TOAST_MAX_ROW_WIDTH` caps
+ * and centres the toast. Capping here rather than on `ToastContent`'s card
+ * covers `toast.custom` JSX and `unstyled` rows too, which never reach that
+ * card. Every distance the gesture measures is a fraction of the capped
+ * `rowWidth`, not of the window — see the constant.
  */
 import * as React from 'react';
 import { type ViewStyle } from 'react-native';

package/lib/typescript/module/toast/ToastSwipeHandler.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToastSwipeHandler.d.ts","sourceRoot":"","sources":["../../../../src/toast/ToastSwipeHandler.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAIL,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AActB,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAWzD,KAAK,sBAAsB,GAAG,IAAI,CAAC,UAAU,EAAE,WAAW,CAAC,GAAG;IAC5D,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,GAAG,CAAC,SAAS,GAAG,SAAS,CAAC,EAAE,CAAC;IAC9C,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,OAAO,EAAE,CAAC,IAAI,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CACnD,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CACtC,KAAK,CAAC,iBAAiB,CAAC,sBAAsB,CAAC,CAqJhD,CAAC"}
+{"version":3,"file":"ToastSwipeHandler.d.ts","sourceRoot":"","sources":["../../../../src/toast/ToastSwipeHandler.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAIL,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAetB,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAWzD,KAAK,sBAAsB,GAAG,IAAI,CAAC,UAAU,EAAE,WAAW,CAAC,GAAG;IAC5D,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,GAAG,CAAC,SAAS,GAAG,SAAS,CAAC,EAAE,CAAC;IAC9C,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,OAAO,EAAE,CAAC,IAAI,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CACnD,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CACtC,KAAK,CAAC,iBAAiB,CAAC,sBAAsB,CAAC,CAuJhD,CAAC"}

package/lib/typescript/module/toast/constants.d.ts

@@ -1,11 +1,3 @@
-/**
- * Derived from sonner-native v0.26.4 — src/constants.ts and src/animations.ts
- * (MIT © Gunnar Torfi Steinarsson). See the top-level NOTICE.
- *
- * The two animation durations live HERE rather than in `animations.ts` so
- * `toast-store.ts` never has to import a Reanimated-dependent module: the store
- * stays pure JS and its suite needs zero React Native mocks.
- */
 import type { AutoWiggle, ToastPosition, ToastSwipeDirection, ToastTheme, ToastVariant } from './types';
 /** Fallback row height until a toast has been measured. */
 export declare const ESTIMATED_TOAST_HEIGHT = 70;
@@ -13,6 +5,32 @@ export declare const CLOSE_BUTTON_HIT_AREA = 60;
 export declare const OUTSIDE_PRESS_PADDING = 20;
 /** However deep a stack gets, a buried row never narrows past this scale. */
 export declare const MIN_STACK_SCALE_X = 0.8;
+/**
+ * W12 — HOW WIDE A TOAST ROW IS ALLOWED TO GET.
+ *
+ * sonner-native has no cap: the row is `width: '100%'` and the card inside it is
+ * inset by `marginHorizontal: space.lg`, so the card is always
+ * screen-width-minus-32. That is correct for the platform it was written for and
+ * wrong everywhere else — on a 1280px desktop viewport it produces a ~1248px
+ * card, which reads as a page banner rather than a toast. sonner (web) instead
+ * fixes the card at `--width: 356px`.
+ *
+ * The cap therefore sizes the ROW BOX, which carries the card's two `space.lg`
+ * gutters, so the visible card lands on sonner's 356px on any viewport wide
+ * enough to reach it. `maxWidth` needs no platform fork because it degrades by
+ * itself: below a 388px viewport the row is still screen-width and the card is
+ * still screen-width-minus-32, exactly as before, so phone portrait — the case
+ * the mobile sizing was right for — is untouched. Above it (desktop, tablet,
+ * phone landscape) the row caps and centres.
+ *
+ * `ToastSwipeHandler`'s dismiss threshold and `calculateStackScaleX`'s depth cue
+ * are fractions of this row width, NOT of the window: at 1280px a
+ * window-relative threshold would demand a 320px drag from a 388px card, and a
+ * window-relative squeeze would shrink a buried row by 4px instead of 16px.
+ * A consumer who overrides the cap through `toastOptions.toastContainerStyle`
+ * moves the card only; both of those keep measuring against this default.
+ */
+export declare const TOAST_MAX_ROW_WIDTH: number;
 /** Enter animation length; also the auto-close timer's head start and the overlay teardown delay. */
 export declare const ENTERING_ANIMATION_DURATION = 300;
 export declare const STACKING_ANIMATION_DURATION = 600;

package/lib/typescript/module/toast/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../src/toast/constants.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,KAAK,EACV,UAAU,EACV,aAAa,EACb,mBAAmB,EACnB,UAAU,EACV,YAAY,EACb,MAAM,SAAS,CAAC;AAEjB,2DAA2D;AAC3D,eAAO,MAAM,sBAAsB,KAAK,CAAC;AACzC,eAAO,MAAM,qBAAqB,KAAK,CAAC;AACxC,eAAO,MAAM,qBAAqB,KAAK,CAAC;AACxC,6EAA6E;AAC7E,eAAO,MAAM,iBAAiB,MAAM,CAAC;AAErC,qGAAqG;AACrG,eAAO,MAAM,2BAA2B,MAAM,CAAC;AAC/C,eAAO,MAAM,2BAA2B,MAAM,CAAC;AAE/C,eAAO,MAAM,aAAa,EAAE;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,aAAa,CAAC;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,uBAAuB,EAAE,mBAAmB,CAAC;IAC7C,OAAO,EAAE,YAAY,GAAG,SAAS,CAAC;IAClC,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,qBAAqB,EAAE,OAAO,CAAC;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,UAAU,CAAC;IAClB,kBAAkB,EAAE,UAAU,CAAC;IAC/B,UAAU,EAAE,OAAO,CAAC;IACpB,cAAc,EAAE,OAAO,CAAC;IACxB,QAAQ,EAAE,MAAM,CAAC;IACjB,gBAAgB,EAAE,OAAO,CAAC;CA8B3B,CAAC"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../src/toast/constants.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EACV,UAAU,EACV,aAAa,EACb,mBAAmB,EACnB,UAAU,EACV,YAAY,EACb,MAAM,SAAS,CAAC;AAEjB,2DAA2D;AAC3D,eAAO,MAAM,sBAAsB,KAAK,CAAC;AACzC,eAAO,MAAM,qBAAqB,KAAK,CAAC;AACxC,eAAO,MAAM,qBAAqB,KAAK,CAAC;AACxC,6EAA6E;AAC7E,eAAO,MAAM,iBAAiB,MAAM,CAAC;AAErC;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,mBAAmB,QAAqB,CAAC;AAEtD,qGAAqG;AACrG,eAAO,MAAM,2BAA2B,MAAM,CAAC;AAC/C,eAAO,MAAM,2BAA2B,MAAM,CAAC;AAE/C,eAAO,MAAM,aAAa,EAAE;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,aAAa,CAAC;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,uBAAuB,EAAE,mBAAmB,CAAC;IAC7C,OAAO,EAAE,YAAY,GAAG,SAAS,CAAC;IAClC,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,qBAAqB,EAAE,OAAO,CAAC;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,UAAU,CAAC;IAClB,kBAAkB,EAAE,UAAU,CAAC;IAC/B,UAAU,EAAE,OAAO,CAAC;IACpB,cAAc,EAAE,OAAO,CAAC;IACxB,QAAQ,EAAE,MAAM,CAAC;IACjB,gBAAgB,EAAE,OAAO,CAAC;CA8B3B,CAAC"}

package/lib/typescript/module/toast/position-utils.d.ts

@@ -5,16 +5,21 @@ export declare const getOrderedToastIds: (toasts: ToastProps[], position: ToastP
  *
  * Scale rather than width: changing the real width would rewrap the text. Returns
  * 1 (no squeeze) for a single row, an expanded stack, stacking turned off, or
- * before the window width is known.
+ * before the row width is known.
+ *
+ * `rowWidth` is the row's OWN width, not the window's. Upstream can use the
+ * screen width because its row is always full-bleed; Bloom's is capped at
+ * `TOAST_MAX_ROW_WIDTH`, and dividing a fixed `stackGap` inset by a 1280px window
+ * would shrink a buried row by 4 visible pixels instead of the intended 16.
  */
-export declare const calculateStackScaleX: ({ index, numberOfToasts, enableStacking, position, isExpanded, stackGap, screenWidth, }: {
+export declare const calculateStackScaleX: ({ index, numberOfToasts, enableStacking, position, isExpanded, stackGap, rowWidth, }: {
     index: number;
     numberOfToasts: number;
     enableStacking: boolean;
     position: ToastPosition;
     isExpanded: boolean;
     stackGap: number;
-    screenWidth: number;
+    rowWidth: number;
 }) => number;
 export declare const calculateToastPosition: ({ index, numberOfToasts, enableStacking, position, allToastHeights, gap, orderedToastIds, isExpanded, stackGap, }: {
     index: number;

package/lib/typescript/module/toast/position-utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"position-utils.d.ts","sourceRoot":"","sources":["../../../../src/toast/position-utils.ts"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAEzD,eAAO,MAAM,kBAAkB,GAC7B,QAAQ,UAAU,EAAE,EACpB,UAAU,aAAa,EACvB,gBAAgB,OAAO,KACtB,KAAK,CAAC,MAAM,GAAG,MAAM,CAQvB,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,GAAI,yFAQlC;IACD,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,OAAO,CAAC;IACxB,QAAQ,EAAE,aAAa,CAAC;IACxB,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;CACrB,KAAG,MASH,CAAC;AAaF,eAAO,MAAM,sBAAsB,GAAI,mHAUpC;IACD,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,OAAO,CAAC;IACxB,QAAQ,EAAE,aAAa,CAAC;IACxB,eAAe,EAAE,MAAM,CAAC,MAAM,GAAG,MAAM,EAAE,MAAM,CAAC,CAAC;IACjD,GAAG,EAAE,MAAM,CAAC;IACZ,eAAe,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;IACxC,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;CAClB,KAAG,MAoDH,CAAC"}
+{"version":3,"file":"position-utils.d.ts","sourceRoot":"","sources":["../../../../src/toast/position-utils.ts"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAEzD,eAAO,MAAM,kBAAkB,GAC7B,QAAQ,UAAU,EAAE,EACpB,UAAU,aAAa,EACvB,gBAAgB,OAAO,KACtB,KAAK,CAAC,MAAM,GAAG,MAAM,CAQvB,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,oBAAoB,GAAI,sFAQlC;IACD,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,OAAO,CAAC;IACxB,QAAQ,EAAE,aAAa,CAAC;IACxB,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;CAClB,KAAG,MASH,CAAC;AAaF,eAAO,MAAM,sBAAsB,GAAI,mHAUpC;IACD,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,OAAO,CAAC;IACxB,QAAQ,EAAE,aAAa,CAAC;IACxB,eAAe,EAAE,MAAM,CAAC,MAAM,GAAG,MAAM,EAAE,MAAM,CAAC,CAAC;IACjD,GAAG,EAAE,MAAM,CAAC;IACZ,eAAe,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC;IACxC,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;CAClB,KAAG,MAoDH,CAAC"}

package/lib/typescript/module/zoomable-image-gallery/ZoomableImageGallery.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ZoomableImageGallery.d.ts","sourceRoot":"","sources":["../../../../src/zoomable-image-gallery/ZoomableImageGallery.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAkEjF,OAAO,KAAK,EAGV,0BAA0B,EAC1B,yBAAyB,EAC1B,MAAM,SAAS,CAAC;AA44BjB,eAAO,MAAM,oBAAoB,8GAA4B,CAAC;AAyK9D,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"ZoomableImageGallery.d.ts","sourceRoot":"","sources":["../../../../src/zoomable-image-gallery/ZoomableImageGallery.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAkEjF,OAAO,KAAK,EAGV,0BAA0B,EAC1B,yBAAyB,EAC1B,MAAM,SAAS,CAAC;AA64BjB,eAAO,MAAM,oBAAoB,8GAA4B,CAAC;AAyK9D,eAAe,oBAAoB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxyhq/bloom",
-  "version": "0.52.0",
+  "version": "0.53.0",
   "description": "Bloom UI — Oxy ecosystem component library for React Native + Expo + Web",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -477,6 +477,11 @@
     },
     "./motion": {
       "react-native": "./src/motion/index.ts",
+      "browser": {
+        "types": "./lib/typescript/module/motion/index.web.d.ts",
+        "import": "./lib/module/motion/index.web.js",
+        "require": "./lib/commonjs/motion/index.web.js"
+      },
       "import": {
         "types": "./lib/typescript/module/motion/index.d.ts",
         "default": "./lib/module/motion/index.js"

package/src/__tests__/Motion.test.tsx

@@ -1,6 +1,10 @@
 import React from 'react';
 import { Text } from 'react-native';
 import { render } from '@testing-library/react-native';
+import type {
+  EntryOrExitLayoutType,
+  LayoutAnimation,
+} from 'react-native-reanimated';
 
 import {
   ScaleAndFadeIn,
@@ -12,21 +16,45 @@ import {
 // The reanimated mock resolves `withTiming(v)` -> v, `withDelay(d, v)` -> v and
 // `withSequence(...v)` -> last, so the builder output is deterministic.
 
+/**
+ * The presets are typed as reanimated's `entering`/`exiting` union so the two
+ * platform files present ONE contract and nothing can depend on the mechanism.
+ * These tests are about the native mechanism specifically, so they narrow back
+ * down through a runtime check rather than a cast: a predefined builder is a
+ * class (it carries the `createInstance` static), a custom worklet builder is a
+ * plain function.
+ */
+const isWorkletBuilder = (
+  preset: EntryOrExitLayoutType,
+): preset is () => LayoutAnimation =>
+  // A predefined builder is a class and carries the `createInstance` static; a
+  // custom worklet builder is a plain nullary function.
+  typeof preset === 'function' &&
+  !('createInstance' in preset) &&
+  preset.length === 0;
+
+const runNativeBuilder = (preset: EntryOrExitLayoutType): LayoutAnimation => {
+  if (!isWorkletBuilder(preset)) {
+    throw new Error('expected the native preset to be a custom worklet builder');
+  }
+  return preset();
+};
+
 describe('motion presets', () => {
   it('ScaleAndFadeIn enters from 70% scale and transparent', () => {
-    const { initialValues, animations } = ScaleAndFadeIn();
+    const { initialValues, animations } = runNativeBuilder(ScaleAndFadeIn);
     expect(initialValues).toEqual({ opacity: 0, transform: [{ scale: 0.7 }] });
     expect(animations).toEqual({ opacity: 1, transform: [{ scale: 1 }] });
   });
 
   it('ScaleAndFadeOut exits to 70% scale and transparent', () => {
-    const { initialValues, animations } = ScaleAndFadeOut();
+    const { initialValues, animations } = runNativeBuilder(ScaleAndFadeOut);
     expect(initialValues).toEqual({ opacity: 1, transform: [{ scale: 1 }] });
     expect(animations).toEqual({ opacity: 0, transform: [{ scale: 0.7 }] });
   });
 
   it('ShrinkAndPop overshoots to 110% before leaving', () => {
-    const { initialValues, animations } = ShrinkAndPop();
+    const { initialValues, animations } = runNativeBuilder(ShrinkAndPop);
     expect(initialValues).toEqual({ opacity: 1, transform: [{ scale: 1 }] });
     // withSequence resolves to its final keyframe (the 1.1 overshoot) in the mock.
     expect(animations.transform).toEqual([{ scale: 1.1 }]);

package/src/__tests__/MotionWebFork.test.ts

@@ -0,0 +1,140 @@
+/**
+ * Regression guard for the `motion` web fork.
+ *
+ * The bug: `motion.ts`'s custom worklet builders are INERT on web. Reanimated's
+ * web layout-animation manager resolves an animation by preset name, a custom
+ * builder has none, and `startWebLayoutAnimation` falls through to
+ * `makeElementVisible` — the element appears at its final frame with one
+ * `[Reanimated] Couldn't load entering/exiting animation` warning apiece.
+ *
+ * The trap: rebuilding all three as `Keyframe`s fixes the exits and makes the
+ * ENTER worse. Reanimated's `entering` path calls `setElementAnimation` with
+ * `shouldSavePosition` TRUE, and any animation name absent from its built-in
+ * `Animations` map — which every custom `Keyframe` is, since they mint a fresh
+ * `REA-ENTERING-n` rule — also gets a `scheduleAnimationCleanup` that pins the
+ * element with `position: absolute` and a frozen box at `duration x 5`. That is
+ * failure mode (C) in `~/Oxy/AGENTS.md`.
+ *
+ * So the invariant is asymmetric, and BOTH halves are load-bearing:
+ *   entering -> a PREDEFINED builder (its `presetName` is in `Animations`, so no
+ *               cleanup is ever scheduled), never a `Keyframe`.
+ *   exiting  -> a `Keyframe` is safe (the cleanup only reaps the throwaway clone)
+ *               and is the only mechanism that can express the full shape.
+ *
+ * The actual motion is verified in a real browser — jest cannot run reanimated's
+ * web layout-animation manager.
+ */
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+import { Keyframe } from 'react-native-reanimated';
+
+import {
+  ScaleAndFadeIn,
+  ScaleAndFadeOut,
+  ShrinkAndPop,
+} from '../motion/motion.web';
+
+const SRC = join(__dirname, '..');
+const read = (rel: string) => readFileSync(join(SRC, rel), 'utf8');
+
+/**
+ * Upstream's `ReanimatedKeyframe` type hides the instance state that the web
+ * layout manager actually reads (`createCustomKeyFrameAnimation` takes
+ * `config.definitions` raw, `getDurationFromConfig` takes `config.durationV`), so
+ * the test narrows to it with a runtime-checked predicate rather than a cast.
+ */
+type KeyframeState = {
+  definitions: Record<string, Record<string, unknown>>;
+  durationV: number | undefined;
+};
+
+const isKeyframeState = (value: unknown): value is KeyframeState =>
+  value instanceof Keyframe && 'definitions' in value;
+
+const stateOf = (preset: unknown): KeyframeState => {
+  if (!isKeyframeState(preset)) {
+    throw new Error('expected a Keyframe');
+  }
+  return preset;
+};
+
+describe('motion web fork', () => {
+  it('never hands a Keyframe to `entering`', () => {
+    // The whole reason the enter and the exits use different mechanisms.
+    expect(ScaleAndFadeIn instanceof Keyframe).toBe(false);
+    expect(typeof ScaleAndFadeIn).toBe('object');
+  });
+
+  it('uses a predefined reanimated builder for the enter', () => {
+    const web = read('motion/motion.web.ts');
+    expect(web).toMatch(/export const ScaleAndFadeIn[^=]*=\s*FadeIn;/);
+    expect(web).toMatch(/import \{[\s\S]*\bFadeIn\b[\s\S]*\} from 'react-native-reanimated'/);
+  });
+
+  it('uses a Keyframe for both exits', () => {
+    expect(ScaleAndFadeOut instanceof Keyframe).toBe(true);
+    expect(ShrinkAndPop instanceof Keyframe).toBe(true);
+  });
+
+  it('keeps the full scale + opacity shape on ScaleAndFadeOut', () => {
+    expect(stateOf(ScaleAndFadeOut).definitions).toEqual({
+      from: { opacity: 1, transform: [{ scale: 1 }] },
+      to: { opacity: 0, transform: [{ scale: 0.7 }] },
+    });
+  });
+
+  /**
+   * Every stop declares every animated property, so the CSS the web parser emits
+   * does not depend on cross-stop interpolation, and the intermediate values are
+   * the native timeline sampled at those instants (250ms total: scale 1 -> 0.7 by
+   * 75ms, -> 1.1 by 225ms; opacity held to 125ms, then to 0 by 250ms).
+   */
+  it('samples the native ShrinkAndPop timeline at every stop', () => {
+    const stops = stateOf(ShrinkAndPop).definitions;
+    expect(Object.keys(stops)).toEqual(['0', '30', '50', '90', '100']);
+    for (const [percent, style] of Object.entries(stops)) {
+      expect({ percent, keys: Object.keys(style).sort() }).toEqual({
+        percent,
+        keys: ['opacity', 'transform'],
+      });
+    }
+    expect(stops['0']).toEqual({ opacity: 1, transform: [{ scale: 1 }] });
+    expect(stops['30']).toEqual({ opacity: 1, transform: [{ scale: 0.7 }] });
+    expect(stops['90']).toEqual({ opacity: 0.2, transform: [{ scale: 1.1 }] });
+    expect(stops['100']).toEqual({ opacity: 0, transform: [{ scale: 1.1 }] });
+  });
+
+  it('matches the native durations', () => {
+    // `withTiming`'s default for the pair the native file animates, and
+    // 75 + 150 for the pop's two sequenced scale legs.
+    expect(stateOf(ScaleAndFadeOut).durationV).toBe(300);
+    expect(stateOf(ShrinkAndPop).durationV).toBe(250);
+  });
+
+  it('leaves the native file on its custom worklet builders', () => {
+    const native = read('motion/motion.ts');
+    expect(native).toMatch(/'worklet';/);
+    expect(native).not.toMatch(/\bKeyframe\b/);
+    expect(native).not.toMatch(/\bFadeIn\b/);
+  });
+
+  it('is wired as a web-forked subpath', () => {
+    const script = readFileSync(
+      join(SRC, '..', 'scripts', 'generate-platform-exports.mjs'),
+      'utf8',
+    );
+    // Between the WEB_FORKED_SUBPATHS opener and its closing bracket.
+    const forked = script.slice(
+      script.indexOf('const WEB_FORKED_SUBPATHS'),
+      script.indexOf(']);', script.indexOf('const WEB_FORKED_SUBPATHS')),
+    );
+    expect(forked).toContain("'./motion'");
+
+    const pkg: { exports: Record<string, { browser?: { import?: string } }> } =
+      JSON.parse(readFileSync(join(SRC, '..', 'package.json'), 'utf8'));
+    expect(pkg.exports['./motion']?.browser?.import).toBe(
+      './lib/module/motion/index.web.js',
+    );
+  });
+});