rnwind 0.0.4 → 0.0.6

package/lib/cjs/runtime/wrap.cjs

@@ -0,0 +1,254 @@
+'use strict';
+
+var React = require('react');
+var chainHandlers = require('./chain-handlers.cjs');
+var useInteract = require('./hooks/use-interact.cjs');
+var rnwindProvider = require('./components/rnwind-provider.cjs');
+var resolve = require('./resolve.cjs');
+
+/** Matches a leading `active:` / `focus:` variant token (`\b` excludes `inactive:`). */
+const INTERACTIVE_VARIANT = /\b(?:active|focus):/;
+/** One-shot guard so the missing-`onHaptics` warning logs once per session. */
+let warnedMissingOnHaptics = false;
+/**
+ * Dev-only warning when a className carries a haptic utility but no
+ * `onHaptics` dispatcher is wired on the nearest `<RnwindProvider>` — the
+ * haptic would silently drop otherwise. Fires once per session.
+ * @param onHaptics The dispatcher from context (or undefined).
+ * @param haptics The resolved haptic requests (or undefined).
+ */
+function warnIfHapticsUnwired(onHaptics, haptics) {
+    if (onHaptics || !haptics || haptics.length === 0)
+        return;
+    const isDevelopment = typeof __DEV__ === 'undefined' || __DEV__;
+    if (!isDevelopment || warnedMissingOnHaptics)
+        return;
+    warnedMissingOnHaptics = true;
+    // eslint-disable-next-line no-console
+    console.warn('rnwind: a `haptic-*` utility resolved but no `onHaptics` callback is wired on <RnwindProvider>. ' +
+        'Pass `onHaptics` on the provider to forward the request to expo-haptics (or any library).');
+}
+/**
+ * Whether a className needs press/focus state tracking.
+ * @param className Raw className string.
+ * @returns True when an `active:` / `focus:` variant is present.
+ */
+function hasInteractiveVariant(className) {
+    return INTERACTIVE_VARIANT.test(className);
+}
+/**
+ * Best-effort display name for the wrapped component.
+ * @param component Component being wrapped.
+ * @returns Its `displayName`, `name`, or `'Component'`.
+ */
+function displayNameOf(component) {
+    const named = component;
+    return named.displayName ?? named.name ?? 'Component';
+}
+/**
+ * Fire the `mount`-trigger haptics once, after the element mounts. Snaps
+ * the resolved requests + dispatcher at mount via a `useRef` initializer
+ * (evaluated only on the first render), so an unstable inline `onHaptics`
+ * doesn't re-fire them and no ref is written during render.
+ * @param resolved The resolved className (carries any haptic requests).
+ * @param onHaptics The dispatcher from context (or undefined).
+ */
+function useMountHaptics(resolved, onHaptics) {
+    const mount = React.useRef({ resolved, onHaptics });
+    React.useEffect(() => {
+        const { resolved: current, onHaptics: dispatch } = mount.current;
+        if (!dispatch || !current.haptics)
+            return;
+        for (const entry of current.haptics)
+            if (entry.trigger === 'mount')
+                dispatch(entry.request, 'mount');
+    }, []);
+}
+/** Suffix marking a secondary class-prop (`contentContainerClassName`, …). */
+const CLASSNAME_SUFFIX = 'ClassName';
+/**
+ * Resolve every secondary `<prefix>ClassName` prop (e.g.
+ * `contentContainerClassName` on a ScrollView / FlatList) into its
+ * matching `<prefix>Style`, in place. Any existing `<prefix>Style` is
+ * appended last (caller wins). The original `*ClassName` prop is deleted
+ * so RN never sees an unknown attribute. The primary `className` is
+ * handled separately by the leaf and never reaches here.
+ * @param props Mutable prop object being assembled for the host.
+ * @param state Rnwind context for resolution.
+ */
+function applyContainerClassNames(props, state) {
+    for (const key of Object.keys(props)) {
+        if (!key.endsWith(CLASSNAME_SUFFIX))
+            continue;
+        const value = props[key];
+        if (typeof value !== 'string')
+            continue;
+        const styleKey = `${key.slice(0, -CLASSNAME_SUFFIX.length)}Style`;
+        props[styleKey] = resolve.resolve(value, state, props[styleKey]).style;
+        delete props[key];
+    }
+}
+/**
+ * Build the props for the wrapped host: resolved `style`, gradient
+ * (`colors`/`start`/`end`), truncate (`numberOfLines`/`ellipsizeMode`),
+ * secondary `<prefix>ClassName` → `<prefix>Style`, and a chained
+ * `onPressIn` that fires press-trigger haptics. Unknown props on a host
+ * are simply ignored by RN, so this stays generic.
+ * @param rest Forwarded props (incl. `ref`).
+ * @param resolved Resolved className result.
+ * @param state Rnwind context — used to resolve secondary class props.
+ * @param onHaptics Dispatcher from context.
+ * @param userOnPressIn Caller-supplied onPressIn to chain after the haptic.
+ * @returns The merged prop object for `createElement`.
+ */
+function buildProps(rest, resolved, state, onHaptics, userOnPressIn) {
+    warnIfHapticsUnwired(onHaptics, resolved.haptics);
+    const props = { ...rest, style: resolved.style };
+    applyContainerClassNames(props, state);
+    if (resolved.colors) {
+        props.colors = resolved.colors;
+        props.start = resolved.start;
+        props.end = resolved.end;
+    }
+    if (resolved.numberOfLines !== undefined) {
+        props.numberOfLines = resolved.numberOfLines;
+        if (resolved.ellipsizeMode !== undefined)
+            props.ellipsizeMode = resolved.ellipsizeMode;
+    }
+    const pressHaptics = onHaptics && resolved.haptics?.filter((entry) => entry.trigger === 'pressIn');
+    if (pressHaptics && pressHaptics.length > 0) {
+        const previous = userOnPressIn;
+        props.onPressIn = (event) => {
+            for (const entry of pressHaptics)
+                onHaptics(entry.request, 'pressIn');
+            previous?.(event);
+        };
+    }
+    else if (userOnPressIn !== undefined) {
+        props.onPressIn = userOnPressIn;
+    }
+    return props;
+}
+/**
+ * Non-interactive leaf: resolve className → style (+ features) and
+ * forward. One context read, one molecule/atom resolve.
+ * @param props Leaf props.
+ * @param props.as
+ * @param props.className
+ * @param props.style
+ * @param props.onPressIn
+ * @returns The rendered `as` element.
+ */
+function PlainLeaf({ as: As, className, style, onPressIn, ...rest }) {
+    const state = rnwindProvider.useRnwind();
+    const resolved = resolve.resolve(className, state, style);
+    useMountHaptics(resolved, state.onHaptics);
+    return React.createElement(As, buildProps(rest, resolved, state, state.onHaptics, onPressIn));
+}
+/**
+ * Interactive leaf: tracks press/focus via `useInteract()`, feeds it into
+ * `resolve` so `active:`/`focus:` atoms apply, and chains the
+ * press/focus handlers.
+ * @param props Leaf props.
+ * @param props.as
+ * @param props.className
+ * @param props.style
+ * @param props.onPressIn
+ * @param props.onPressOut
+ * @param props.onFocus
+ * @param props.onBlur
+ * @returns The rendered `as` element with interactive wiring.
+ */
+function InteractiveLeaf({ as: As, className, style, onPressIn, onPressOut, onFocus, onBlur, ...rest }) {
+    const state = rnwindProvider.useRnwind();
+    const interact = useInteract.useInteract();
+    const resolved = resolve.resolve(className, state, style, interact.state);
+    useMountHaptics(resolved, state.onHaptics);
+    const props = buildProps(rest, resolved, state, state.onHaptics, onPressIn);
+    props.onPressIn = chainHandlers.chainPress(props.onPressIn, interact.onPressIn);
+    props.onPressOut = chainHandlers.chainPress(onPressOut, interact.onPressOut);
+    props.onFocus = chainHandlers.chainFocus(onFocus, interact.onFocus);
+    props.onBlur = chainHandlers.chainFocus(onBlur, interact.onBlur);
+    return React.createElement(As, props);
+}
+/**
+ * Wrap a component so its `className` prop resolves to RN `style` (plus
+ * gradient / truncate props and haptic dispatch) at render — no matter
+ * how className arrived: written directly, spread through `{...rest}`, or
+ * forwarded down custom wrappers. The returned component is hook-free; it
+ * dispatches to a plain or interactive leaf so non-interactive elements
+ * never pay for press/focus state. `ref` (a normal prop in React 19) and
+ * all other props forward untouched.
+ * @example
+ * ```tsx
+ * const Pressable = wrap(RNPressable)
+ * <Pressable className="active:bg-sky-700 px-4 haptic-light" onPress={fn} />
+ * ```
+ * @param Component Any component accepting a `style` prop.
+ * @returns A component accepting `className`.
+ */
+function wrap(Component) {
+    const as = Component;
+    /**
+     * The wrapped component — hook-free dispatcher to a leaf.
+     * @param props Forwarded props with `className` intercepted.
+     * @param props.className
+     * @returns The rendered leaf.
+     */
+    function RnwindWrapped({ className, ...rest }) {
+        if (className !== undefined && hasInteractiveVariant(className)) {
+            return React.createElement(InteractiveLeaf, { as, className, ...rest });
+        }
+        return React.createElement(PlainLeaf, { as, className, ...rest });
+    }
+    RnwindWrapped.displayName = `wrap(${displayNameOf(Component)})`;
+    return RnwindWrapped;
+}
+/**
+ * Whether a namespace member name denotes a component to wrap —
+ * PascalCase and not a React context (`*Context`). Lowercase utilities /
+ * hooks (`createAnimatedComponent`, `spring`) pass through untouched.
+ * @param name Member key.
+ * @returns True when the member should be `wrap()`-ed.
+ */
+function isComponentMember(name) {
+    return /^[A-Z]/.test(name) && !name.endsWith('Context');
+}
+/**
+ * Wrap a component NAMESPACE (a default/namespace import like reanimated's
+ * `Animated`) so member access — `Animated.View`, `Animated.ScrollView` —
+ * returns a `wrap()`-ed component whose `className` resolves at render.
+ * Returns a Proxy: component members are wrapped lazily and memoised so
+ * each access yields the SAME wrapped component (stable identity — React
+ * would remount otherwise). Non-component members (`createAnimatedComponent`,
+ * config objects) pass straight through.
+ * @example
+ * ```tsx
+ * const Animated = wrapNamespace(RNReanimated)
+ * <Animated.View className="enter-fade" />
+ * ```
+ * @param namespace The imported namespace object.
+ * @returns A Proxy that wraps component members on access.
+ */
+function wrapNamespace(namespace) {
+    const cache = new Map();
+    return new Proxy(namespace, {
+        get(target, key, receiver) {
+            const value = Reflect.get(target, key, receiver);
+            if (typeof key !== 'string' || !isComponentMember(key))
+                return value;
+            if (!value || (typeof value !== 'function' && typeof value !== 'object'))
+                return value;
+            let wrapped = cache.get(key);
+            if (wrapped === undefined) {
+                wrapped = wrap(value);
+                cache.set(key, wrapped);
+            }
+            return wrapped;
+        },
+    });
+}
+
+exports.wrap = wrap;
+exports.wrapNamespace = wrapNamespace;
+//# sourceMappingURL=wrap.cjs.map

package/lib/cjs/runtime/wrap.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"wrap.cjs","sources":["../../../../src/runtime/wrap.tsx"],"sourcesContent":["import { createElement, useEffect, useRef, type ComponentType, type ReactElement } from 'react'\nimport { chainFocus, chainPress } from './chain-handlers'\nimport { useInteract } from './hooks/use-interact'\nimport { useRnwind } from './components/rnwind-provider'\nimport type { RnwindState } from './components/rnwind-provider'\nimport { resolve, type ResolvedCss } from './resolve'\nimport type { OnHaptics } from '../core/parser/haptics'\n\n/** Matches a leading `active:` / `focus:` variant token (`\\b` excludes `inactive:`). */\nconst INTERACTIVE_VARIANT = /\\b(?:active|focus):/\n\n/** One-shot guard so the missing-`onHaptics` warning logs once per session. */\nlet warnedMissingOnHaptics = false\n\n/**\n * Dev-only warning when a className carries a haptic utility but no\n * `onHaptics` dispatcher is wired on the nearest `<RnwindProvider>` — the\n * haptic would silently drop otherwise. Fires once per session.\n * @param onHaptics The dispatcher from context (or undefined).\n * @param haptics The resolved haptic requests (or undefined).\n */\nfunction warnIfHapticsUnwired(onHaptics: OnHaptics | undefined, haptics: ResolvedCss['haptics']): void {\n  if (onHaptics || !haptics || haptics.length === 0) return\n  const isDevelopment = typeof __DEV__ === 'undefined' || __DEV__\n  if (!isDevelopment || warnedMissingOnHaptics) return\n  warnedMissingOnHaptics = true\n  // eslint-disable-next-line no-console\n  console.warn(\n    'rnwind: a `haptic-*` utility resolved but no `onHaptics` callback is wired on <RnwindProvider>. ' +\n      'Pass `onHaptics` on the provider to forward the request to expo-haptics (or any library).',\n  )\n}\n\n/**\n * Whether a className needs press/focus state tracking.\n * @param className Raw className string.\n * @returns True when an `active:` / `focus:` variant is present.\n */\nfunction hasInteractiveVariant(className: string): boolean {\n  return INTERACTIVE_VARIANT.test(className)\n}\n\n/**\n * Best-effort display name for the wrapped component.\n * @param component Component being wrapped.\n * @returns Its `displayName`, `name`, or `'Component'`.\n */\nfunction displayNameOf(component: unknown): string {\n  const named = component as { displayName?: string; name?: string }\n  return named.displayName ?? named.name ?? 'Component'\n}\n\n/**\n * Fire the `mount`-trigger haptics once, after the element mounts. Snaps\n * the resolved requests + dispatcher at mount via a `useRef` initializer\n * (evaluated only on the first render), so an unstable inline `onHaptics`\n * doesn't re-fire them and no ref is written during render.\n * @param resolved The resolved className (carries any haptic requests).\n * @param onHaptics The dispatcher from context (or undefined).\n */\nfunction useMountHaptics(resolved: ResolvedCss, onHaptics: OnHaptics | undefined): void {\n  const mount = useRef({ resolved, onHaptics })\n  useEffect(() => {\n    const { resolved: current, onHaptics: dispatch } = mount.current\n    if (!dispatch || !current.haptics) return\n    for (const entry of current.haptics) if (entry.trigger === 'mount') dispatch(entry.request, 'mount')\n  }, [])\n}\n\n/** Suffix marking a secondary class-prop (`contentContainerClassName`, …). */\nconst CLASSNAME_SUFFIX = 'ClassName'\n\n/**\n * Resolve every secondary `<prefix>ClassName` prop (e.g.\n * `contentContainerClassName` on a ScrollView / FlatList) into its\n * matching `<prefix>Style`, in place. Any existing `<prefix>Style` is\n * appended last (caller wins). The original `*ClassName` prop is deleted\n * so RN never sees an unknown attribute. The primary `className` is\n * handled separately by the leaf and never reaches here.\n * @param props Mutable prop object being assembled for the host.\n * @param state Rnwind context for resolution.\n */\nfunction applyContainerClassNames(props: Record<string, unknown>, state: RnwindState): void {\n  for (const key of Object.keys(props)) {\n    if (!key.endsWith(CLASSNAME_SUFFIX)) continue\n    const value = props[key]\n    if (typeof value !== 'string') continue\n    const styleKey = `${key.slice(0, -CLASSNAME_SUFFIX.length)}Style`\n    props[styleKey] = resolve(value, state, props[styleKey]).style\n    delete props[key]\n  }\n}\n\n/**\n * Build the props for the wrapped host: resolved `style`, gradient\n * (`colors`/`start`/`end`), truncate (`numberOfLines`/`ellipsizeMode`),\n * secondary `<prefix>ClassName` → `<prefix>Style`, and a chained\n * `onPressIn` that fires press-trigger haptics. Unknown props on a host\n * are simply ignored by RN, so this stays generic.\n * @param rest Forwarded props (incl. `ref`).\n * @param resolved Resolved className result.\n * @param state Rnwind context — used to resolve secondary class props.\n * @param onHaptics Dispatcher from context.\n * @param userOnPressIn Caller-supplied onPressIn to chain after the haptic.\n * @returns The merged prop object for `createElement`.\n */\nfunction buildProps(\n  rest: Record<string, unknown>,\n  resolved: ResolvedCss,\n  state: RnwindState,\n  onHaptics: OnHaptics | undefined,\n  userOnPressIn?: unknown,\n): Record<string, unknown> {\n  warnIfHapticsUnwired(onHaptics, resolved.haptics)\n  const props: Record<string, unknown> = { ...rest, style: resolved.style }\n  applyContainerClassNames(props, state)\n  if (resolved.colors) {\n    props.colors = resolved.colors\n    props.start = resolved.start\n    props.end = resolved.end\n  }\n  if (resolved.numberOfLines !== undefined) {\n    props.numberOfLines = resolved.numberOfLines\n    if (resolved.ellipsizeMode !== undefined) props.ellipsizeMode = resolved.ellipsizeMode\n  }\n  const pressHaptics = onHaptics && resolved.haptics?.filter((entry) => entry.trigger === 'pressIn')\n  if (pressHaptics && pressHaptics.length > 0) {\n    const previous = userOnPressIn as ((event: unknown) => void) | undefined\n    props.onPressIn = (event: unknown): void => {\n      for (const entry of pressHaptics) onHaptics(entry.request, 'pressIn')\n      previous?.(event)\n    }\n  } else if (userOnPressIn !== undefined) {\n    props.onPressIn = userOnPressIn\n  }\n  return props\n}\n\n/** Props a leaf receives — the wrapped `as` tag plus forwarded props. */\ninterface LeafProps {\n  readonly as: ComponentType<Record<string, unknown>>\n  readonly className?: string\n  readonly style?: unknown\n  readonly [key: string]: unknown\n}\n\n/**\n * Non-interactive leaf: resolve className → style (+ features) and\n * forward. One context read, one molecule/atom resolve.\n * @param props Leaf props.\n * @param props.as\n * @param props.className\n * @param props.style\n * @param props.onPressIn\n * @returns The rendered `as` element.\n */\nfunction PlainLeaf({ as: As, className, style, onPressIn, ...rest }: LeafProps): ReactElement {\n  const state = useRnwind()\n  const resolved = resolve(className, state, style)\n  useMountHaptics(resolved, state.onHaptics)\n  return createElement(As, buildProps(rest, resolved, state, state.onHaptics, onPressIn))\n}\n\n/**\n * Interactive leaf: tracks press/focus via `useInteract()`, feeds it into\n * `resolve` so `active:`/`focus:` atoms apply, and chains the\n * press/focus handlers.\n * @param props Leaf props.\n * @param props.as\n * @param props.className\n * @param props.style\n * @param props.onPressIn\n * @param props.onPressOut\n * @param props.onFocus\n * @param props.onBlur\n * @returns The rendered `as` element with interactive wiring.\n */\nfunction InteractiveLeaf({ as: As, className, style, onPressIn, onPressOut, onFocus, onBlur, ...rest }: LeafProps): ReactElement {\n  const state = useRnwind()\n  const interact = useInteract()\n  const resolved = resolve(className, state, style, interact.state)\n  useMountHaptics(resolved, state.onHaptics)\n  const props = buildProps(rest, resolved, state, state.onHaptics, onPressIn)\n  props.onPressIn = chainPress(props.onPressIn as Parameters<typeof chainPress>[0], interact.onPressIn)\n  props.onPressOut = chainPress(onPressOut as Parameters<typeof chainPress>[0], interact.onPressOut)\n  props.onFocus = chainFocus(onFocus as Parameters<typeof chainFocus>[0], interact.onFocus)\n  props.onBlur = chainFocus(onBlur as Parameters<typeof chainFocus>[0], interact.onBlur)\n  return createElement(As, props)\n}\n\n/**\n * Wrap a component so its `className` prop resolves to RN `style` (plus\n * gradient / truncate props and haptic dispatch) at render — no matter\n * how className arrived: written directly, spread through `{...rest}`, or\n * forwarded down custom wrappers. The returned component is hook-free; it\n * dispatches to a plain or interactive leaf so non-interactive elements\n * never pay for press/focus state. `ref` (a normal prop in React 19) and\n * all other props forward untouched.\n * @example\n * ```tsx\n * const Pressable = wrap(RNPressable)\n * <Pressable className=\"active:bg-sky-700 px-4 haptic-light\" onPress={fn} />\n * ```\n * @param Component Any component accepting a `style` prop.\n * @returns A component accepting `className`.\n */\nexport function wrap<P>(Component: ComponentType<P>): ComponentType<P & { className?: string }> {\n  const as = Component as unknown as ComponentType<Record<string, unknown>>\n  /**\n   * The wrapped component — hook-free dispatcher to a leaf.\n   * @param props Forwarded props with `className` intercepted.\n   * @param props.className\n   * @returns The rendered leaf.\n   */\n  function RnwindWrapped({ className, ...rest }: { className?: string; [key: string]: unknown }): ReactElement {\n    if (className !== undefined && hasInteractiveVariant(className)) {\n      return createElement(InteractiveLeaf, { as, className, ...rest })\n    }\n    return createElement(PlainLeaf, { as, className, ...rest })\n  }\n  RnwindWrapped.displayName = `wrap(${displayNameOf(Component)})`\n  return RnwindWrapped as unknown as ComponentType<P & { className?: string }>\n}\n\n/**\n * Whether a namespace member name denotes a component to wrap —\n * PascalCase and not a React context (`*Context`). Lowercase utilities /\n * hooks (`createAnimatedComponent`, `spring`) pass through untouched.\n * @param name Member key.\n * @returns True when the member should be `wrap()`-ed.\n */\nfunction isComponentMember(name: string): boolean {\n  return /^[A-Z]/.test(name) && !name.endsWith('Context')\n}\n\n/**\n * Wrap a component NAMESPACE (a default/namespace import like reanimated's\n * `Animated`) so member access — `Animated.View`, `Animated.ScrollView` —\n * returns a `wrap()`-ed component whose `className` resolves at render.\n * Returns a Proxy: component members are wrapped lazily and memoised so\n * each access yields the SAME wrapped component (stable identity — React\n * would remount otherwise). Non-component members (`createAnimatedComponent`,\n * config objects) pass straight through.\n * @example\n * ```tsx\n * const Animated = wrapNamespace(RNReanimated)\n * <Animated.View className=\"enter-fade\" />\n * ```\n * @param namespace The imported namespace object.\n * @returns A Proxy that wraps component members on access.\n */\nexport function wrapNamespace<T extends object>(namespace: T): T {\n  const cache = new Map<string, unknown>()\n  return new Proxy(namespace, {\n    get(target, key, receiver): unknown {\n      const value = Reflect.get(target, key, receiver)\n      if (typeof key !== 'string' || !isComponentMember(key)) return value\n      if (!value || (typeof value !== 'function' && typeof value !== 'object')) return value\n      let wrapped = cache.get(key)\n      if (wrapped === undefined) {\n        wrapped = wrap(value as ComponentType<unknown>)\n        cache.set(key, wrapped)\n      }\n      return wrapped\n    },\n  })\n}\n"],"names":["useRef","useEffect","resolve","useRnwind","createElement","useInteract","chainPress","chainFocus"],"mappings":"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"}

package/lib/cjs/runtime/wrap.d.ts

@@ -0,0 +1,37 @@
+import { type ComponentType } from 'react';
+/**
+ * Wrap a component so its `className` prop resolves to RN `style` (plus
+ * gradient / truncate props and haptic dispatch) at render — no matter
+ * how className arrived: written directly, spread through `{...rest}`, or
+ * forwarded down custom wrappers. The returned component is hook-free; it
+ * dispatches to a plain or interactive leaf so non-interactive elements
+ * never pay for press/focus state. `ref` (a normal prop in React 19) and
+ * all other props forward untouched.
+ * @example
+ * ```tsx
+ * const Pressable = wrap(RNPressable)
+ * <Pressable className="active:bg-sky-700 px-4 haptic-light" onPress={fn} />
+ * ```
+ * @param Component Any component accepting a `style` prop.
+ * @returns A component accepting `className`.
+ */
+export declare function wrap<P>(Component: ComponentType<P>): ComponentType<P & {
+    className?: string;
+}>;
+/**
+ * Wrap a component NAMESPACE (a default/namespace import like reanimated's
+ * `Animated`) so member access — `Animated.View`, `Animated.ScrollView` —
+ * returns a `wrap()`-ed component whose `className` resolves at render.
+ * Returns a Proxy: component members are wrapped lazily and memoised so
+ * each access yields the SAME wrapped component (stable identity — React
+ * would remount otherwise). Non-component members (`createAnimatedComponent`,
+ * config objects) pass straight through.
+ * @example
+ * ```tsx
+ * const Animated = wrapNamespace(RNReanimated)
+ * <Animated.View className="enter-fade" />
+ * ```
+ * @param namespace The imported namespace object.
+ * @returns A Proxy that wraps component members on access.
+ */
+export declare function wrapNamespace<T extends object>(namespace: T): T;

package/lib/cjs/testing/index.cjs

@@ -8,8 +8,9 @@ var node_os = require('node:os');
 var path = require('node:path');
 var React = require('react');
 var lookupCss = require('../runtime/lookup-css.cjs');
+var resolve = require('../runtime/resolve.cjs');
+var runtime_index = require('../runtime/index.cjs');
 var rnwindProvider = require('../runtime/components/rnwind-provider.cjs');
-var haptics = require('../runtime/haptics.cjs');
 var state = require('../metro/state.cjs');
 var metro_transformer = require('../metro/transformer.cjs');
 
@@ -50,26 +51,6 @@ const DEFAULT_THEME_CSS = `@import 'tailwindcss';
 `;
 /** `StyleSheet.create` stub the evaluated bundle calls — identity at test time. */
 const BUNDLE_STYLE_SHEET = { create: (styles) => styles, hairlineWidth: 1 };
-/** Stubbed interactive-state hook return matching `useInteract()`. */
-const NOOP_INTERACT = {
-    state: undefined,
-    onPressIn: () => undefined,
-    onPressOut: () => undefined,
-    onFocus: () => undefined,
-    onBlur: () => undefined,
-};
-/**
- * Identity chain helper matching `chainPress` / `chainFocus`. Returns a
- * single callback that invokes every supplied handler in turn.
- * @param handlers Handlers to chain.
- * @returns Combined callback.
- */
-const NOOP_CHAIN = (...handlers) => (...args) => {
-    for (const handler of handlers) {
-        if (typeof handler === 'function')
-            handler(...args);
-    }
-};
 // Synthesize a require rooted at the consumer's cwd so optional peer
 // lookups (`@testing-library/react-native`, `esbuild`) resolve from THEIR
 // node_modules, not rnwind's. A workspace-local rnwind install resolves
@@ -127,28 +108,87 @@ function compileToJs(source) {
     }
 }
 /**
- * Evaluate the union `style.js` the ledger wrote during the transform
- * so its `registerAtoms` call lands in the process-global registry.
- * Strips the `react-native` + `rnwind` imports from the source and
- * forwards local bindings into the evaluated closure.
- * @param cacheDir The rnwind cache dir where the ledger writes bundles.
+ * Evaluate one generated registry file (`common.style.js`,
+ * `<variant>.style.js`, or `schemes.js`) so its `registerAtoms` /
+ * `registerBreakpoints` / `registerGradients` / `registerHaptics` /
+ * `registerSchemeLoader` calls land in the process-global registries the
+ * runtime resolver reads. Imports (`'rnwind'`, `'react-native'`, relative
+ * `./common.style`), `require(...)` loaders, and `export {...}` are
+ * stripped — every scheme file is evaluated directly, so lazy loaders are
+ * inert.
+ * @param filePath Absolute path to the generated file.
  */
-function evaluateStyleBundle(cacheDir) {
-    const filePath = path.join(cacheDir, 'style.js');
+function evaluateGeneratedFile(filePath) {
     if (!node_fs.existsSync(filePath))
         return;
     const body = node_fs.readFileSync(filePath, 'utf8')
-        .replaceAll(/import \{ StyleSheet \} from 'react-native'\s*\n/g, '')
-        .replaceAll(/import \{[^}]+\} from 'rnwind'\s*\n/g, '');
-    // Bundle body is generated by rnwind itself — not user-controlled.
+        .replaceAll(/import\s+\{[^}]*\}\s+from\s+['"][^'"]+['"];?\s*\n?/g, '')
+        .replaceAll(/import\s+['"][^'"]+['"];?\s*\n?/g, '')
+        .replaceAll(/export\s+\{[^}]*\}\s*;?\s*\n?/g, '');
+    // Generated body is produced by rnwind itself — not user-controlled.
+    // `require` is neutralised: each variant file is evaluated directly,
+    // so the manifest's lazy `require('./x.style')` loaders are no-ops.
     // eslint-disable-next-line sonarjs/code-eval
-    new Function('StyleSheet', 'registerAtoms', body)(BUNDLE_STYLE_SHEET, lookupCss.registerAtoms);
+    new Function('StyleSheet', 'registerAtoms', 'registerMolecules', 'registerBreakpoints', 'registerGradients', 'registerHaptics', 'registerSchemeLoader', 'require', body)(BUNDLE_STYLE_SHEET, lookupCss.registerAtoms, resolve.registerMolecules, lookupCss.registerBreakpoints, resolve.registerGradients, resolve.registerHaptics, lookupCss.registerSchemeLoader, () => { });
+}
+/**
+ * Sort comparator that floats `common.style.js` to the front, rest alpha.
+ * @param a
+ * @param b
+ */
+function commonFirst(a, b) {
+    if (a === 'common.style.js')
+        return -1;
+    if (b === 'common.style.js')
+        return 1;
+    return a.localeCompare(b);
+}
+/**
+ * Evaluate every generated registry the transform wrote (`common` +
+ * every variant scheme + the manifest) so the runtime resolver sees the
+ * full atom / molecule / gradient / haptic registries — same state a
+ * production bundle would hold once all scheme files load.
+ * @param cacheDir The rnwind cache dir holding the generated files.
+ */
+function evaluateGeneratedRegistries(cacheDir) {
+    if (!node_fs.existsSync(cacheDir))
+        return;
+    const files = node_fs.readdirSync(cacheDir).filter((name) => name.endsWith('.style.js'));
+    // common first so variants layer their diffs on top of it.
+    for (const name of files.toSorted(commonFirst)) {
+        evaluateGeneratedFile(path.join(cacheDir, name));
+    }
+    evaluateGeneratedFile(path.join(cacheDir, 'schemes.js'));
+}
+/**
+ * Move every `const {…} = __rnwind;` / `const {…} = __reactNative;`
+ * binding line to the top of the source, preserving order, so they
+ * initialise before the transformer's `const View = _rnwWrap(_rnw0)`
+ * wrap declarations reference them. Mirrors ESM import hoisting.
+ * @param source Source with imports already converted to const-destructures.
+ * @returns Source with binding consts hoisted to the front.
+ */
+function hoistBindingConsts(source) {
+    const hoisted = [];
+    const rest = [];
+    for (const line of source.split('\n')) {
+        if (/=\s*__(?:rnwind|reactNative);\s*$/.test(line))
+            hoisted.push(line);
+        else
+            rest.push(line);
+    }
+    return [...hoisted, ...rest].join('\n');
 }
 /**
  * Evaluate the transformer's rewritten source as a standalone module:
- * strip synthetic imports, forward `import ... from 'rnwind'` +
- * `'react-native'` to local bindings, compile JSX via the compiler, and
- * capture the default export.
+ * strip synthetic generated imports, forward `import ... from 'rnwind'`
+ * (incl. the injected `wrap as _rnwWrap`) and `'react-native'` to local
+ * bindings, compile JSX via the compiler, and capture the default export.
+ * Aliased named imports (`{ View as _rnw0 }`) are converted to valid
+ * destructuring (`{ View: _rnw0 }`). The import-derived `const`s are then
+ * hoisted above the body: the transformer injects `const View =
+ * _rnwWrap(_rnw0)` ahead of the (real-ESM-hoisted) `import … as _rnw0`,
+ * so without re-hoisting the binding the eval would hit a TDZ on `_rnw0`.
  * @param transformedSource Post-transformer source.
  * @param reactNative `react-native` namespace bindings to forward.
  * @returns The default-exported component.
@@ -156,24 +196,14 @@ function evaluateStyleBundle(cacheDir) {
 function evaluateRewrittenModule(transformedSource, reactNative) {
     const prepared = transformedSource
         .replaceAll(/import\s+["']rnwind\/__generated\/[^"']+["'];?\s*\n?/g, '')
-        .replaceAll(/import\s+\{([^}]+)\}\s+from\s+["']rnwind["'];?/g, 'const {$1} = __rnwind;')
-        .replaceAll(/import\s+\{([^}]+)\}\s+from\s+["']react-native["'];?/g, 'const {$1} = __reactNative;')
+        .replaceAll(/import\s+\{([^}]+)\}\s+from\s+["']rnwind["'];?/g, (_m, spec) => `const {${spec.replaceAll(/\bas\b/g, ':')}} = __rnwind;`)
+        .replaceAll(/import\s+\{([^}]+)\}\s+from\s+["']react-native["'];?/g, (_m, spec) => `const {${spec.replaceAll(/\bas\b/g, ':')}} = __reactNative;`)
         .replace(/export\s+default\s+/, 'module.exports.default = ');
-    const compiled = compileToJs(prepared);
-    const rnwindEnv = {
-        lookupCss: lookupCss.lookupCss,
-        useRnwind: rnwindProvider.useRnwind,
-        useR_: rnwindProvider.useR_,
-        useMountHaptic: haptics.useMountHaptic,
-        triggerHaptic: haptics.triggerHaptic,
-        useInteract: () => NOOP_INTERACT,
-        chainPress: NOOP_CHAIN,
-        chainFocus: NOOP_CHAIN,
-    };
+    const compiled = compileToJs(hoistBindingConsts(prepared));
     const moduleObject = { exports: {} };
     // Compiled source originates from rnwind's own transformer + the JSX compiler.
     // eslint-disable-next-line sonarjs/code-eval
-    new Function('React', '__rnwind', '__reactNative', 'module', compiled)(React__namespace, rnwindEnv, reactNative, moduleObject);
+    new Function('React', '__rnwind', '__reactNative', 'module', compiled)(React__namespace, runtime_index, reactNative, moduleObject);
     if (!moduleObject.exports.default) {
         throw new Error('rnwind/testing: evaluated module did not export a default component.');
     }
@@ -249,10 +279,11 @@ async function bootstrapRnwindRuntime(options) {
         const ast = parser.parse(options.source, { sourceType: 'module', plugins: ['typescript', 'jsx'] });
         const result = await metro_transformer.transform({ filename, src: options.source, options: { projectRoot }, ast });
         transformedSource = generate(result.ast).code;
-        evaluateStyleBundle(cacheDir);
+        evaluateGeneratedRegistries(cacheDir);
     }
     const cleanup = () => {
         lookupCss.__resetLookupCssState();
+        resolve.__resetResolveState();
         state.resetRnwindState();
         if (node_fs.existsSync(projectRoot))
             node_fs.rmSync(projectRoot, { recursive: true, force: true });