react-native-skelo 0.0.3 → 0.1.0-alpha.0

package/lib/module/components/Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useMemo","Parser","SkeletonRenderer","SkeletonIgnore","StyleSkeleton","getDeepExpander","DEFAULT_CONFIG","Skeleton","loading","children","styles","excludeStyles","deep","animation","duration","baseColor","highlightColor","borderRadius","accessible","accessibilityLabel","debug","skeletonTree","__DEV__","console","log","expand","expanded","createElement","Fragment","length","warn","parsed","parse","summarize","nodes","map","node","type","style","JSON","stringify","error","config","exclude","tree","displayName","Ignore"],"sourceRoot":"../../../src","sources":["components/Skeleton.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useMemo","Parser","SkeletonRenderer","SkeletonIgnore","StyleSkeleton","expandToComponentNodes","DEFAULT_CONFIG","Skeleton","loading","children","styles","excludeStyles","deep","animation","duration","baseColor","highlightColor","borderRadius","accessible","accessibilityLabel","debug","skeletonTree","__DEV__","console","log","expanded","createElement","Fragment","length","warn","parsed","parse","summarize","nodes","map","node","type","style","JSON","stringify","error","config","exclude","tree","displayName","Ignore"],"sourceRoot":"../../../src","sources":["components/Skeleton.tsx"],"mappings":"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","ignoreList":[]}

package/lib/typescript/animations/PulseAnimation.d.ts

@@ -1,15 +1,59 @@
 import React from 'react';
 import type { DimensionValue, StyleProp, ViewStyle } from 'react-native';
 interface PulseProps {
+    /**
+     * Width of the pulse container
+     */
     width?: DimensionValue;
+    /**
+     * Height of the pulse container
+     */
     height?: DimensionValue;
+    /**
+     * Base color of the skeleton
+     * @default '#E1E9EE'
+     */
     baseColor?: string;
+    /**
+     * Highlight color for pulse
+     * @default '#F2F8FC'
+     */
     highlightColor?: string;
+    /**
+     * Animation duration in milliseconds
+     * @default 1000
+     */
     duration?: number;
+    /**
+     * Border radius
+     */
     borderRadius?: number;
+    /**
+     * Additional styles
+     */
     style?: StyleProp<ViewStyle>;
+    /**
+     * Child content (rendered inside pulse)
+     */
     children?: React.ReactNode;
 }
+/**
+ * Pulse animation component using Reanimated 3
+ *
+ * Creates a subtle breathing/pulsing effect using:
+ * - Shared values for performance
+ * - Worklets for 60 FPS on UI thread
+ * - Opacity animation for pulse effect
+ *
+ * @example
+ * ```tsx
+ * <PulseAnimation
+ *   width={200}
+ *   height={20}
+ *   borderRadius={4}
+ * />
+ * ```
+ */
 export declare function PulseAnimation({ width, height, baseColor, duration, borderRadius, style, children, }: PulseProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=PulseAnimation.d.ts.map

package/lib/typescript/animations/PulseAnimation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PulseAnimation.d.ts","sourceRoot":"","sources":["../../../src/animations/PulseAnimation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAWzE,UAAU,UAAU;IAClB,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAGD,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,MAAM,EACN,SAAqB,EACrB,QAAe,EACf,YAAgB,EAChB,KAAK,EACL,QAAQ,GACT,EAAE,UAAU,qBAqCZ"}
+{"version":3,"file":"PulseAnimation.d.ts","sourceRoot":"","sources":["../../../src/animations/PulseAnimation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAWzE,UAAU,UAAU;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC;IAEvB;;OAEG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC;IAExB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE7B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,MAAM,EACN,SAAqB,EACrB,QAAe,EACf,YAAgB,EAChB,KAAK,EACL,QAAQ,GACT,EAAE,UAAU,qBAiDZ"}

package/lib/typescript/animations/ShimmerAnimation.d.ts

@@ -1,15 +1,59 @@
 import React from 'react';
 import type { DimensionValue, StyleProp, ViewStyle } from 'react-native';
 interface ShimmerProps {
+    /**
+     * Width of the shimmer container
+     */
     width?: DimensionValue;
+    /**
+     * Height of the shimmer container
+     */
     height?: DimensionValue;
+    /**
+     * Base color of the skeleton
+     * @default '#E1E9EE'
+     */
     baseColor?: string;
+    /**
+     * Highlight color that shimmers across
+     * @default '#F2F8FC'
+     */
     highlightColor?: string;
+    /**
+     * Animation duration in milliseconds
+     * @default 1500
+     */
     duration?: number;
+    /**
+     * Border radius
+     */
     borderRadius?: number;
+    /**
+     * Additional styles
+     */
     style?: StyleProp<ViewStyle>;
+    /**
+     * Child content (rendered on top of shimmer)
+     */
     children?: React.ReactNode;
 }
+/**
+ * Shimmer animation component using Reanimated 3
+ *
+ * Creates a smooth left-to-right shimmer effect using:
+ * - Shared values for performance
+ * - Worklets for 60 FPS on UI thread
+ * - Linear gradient for shimmer effect
+ *
+ * @example
+ * ```tsx
+ * <ShimmerAnimation
+ *   width={200}
+ *   height={20}
+ *   borderRadius={4}
+ * />
+ * ```
+ */
 export declare function ShimmerAnimation({ width, height, baseColor, highlightColor, duration, borderRadius, style, children, }: ShimmerProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=ShimmerAnimation.d.ts.map

package/lib/typescript/animations/ShimmerAnimation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ShimmerAnimation.d.ts","sourceRoot":"","sources":["../../../src/animations/ShimmerAnimation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,KAAK,EACV,cAAc,EAEd,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAC;AAWtB,UAAU,YAAY;IACpB,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAKD,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,MAAM,EACN,SAAqB,EACrB,cAA0B,EAC1B,QAAe,EACf,YAAgB,EAChB,KAAK,EACL,QAAQ,GACT,EAAE,YAAY,qBAsDd"}
+{"version":3,"file":"ShimmerAnimation.d.ts","sourceRoot":"","sources":["../../../src/animations/ShimmerAnimation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAYzE,UAAU,YAAY;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC;IAEvB;;OAEG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC;IAExB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE7B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,MAAM,EACN,SAAqB,EACrB,cAA0B,EAC1B,QAAe,EACf,YAAgB,EAChB,KAAK,EACL,QAAQ,GACT,EAAE,YAAY,qBA2Ed"}

package/lib/typescript/components/Skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAG9C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAKlD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,QAAQ,CAAC,EACvB,OAAO,EACP,QAAQ,EACR,MAAM,EACN,aAAa,EACb,IAAY,EACZ,SAAoC,EACpC,QAAkC,EAClC,SAAoC,EACpC,cAA8C,EAC9C,YAA0C,EAC1C,UAAiB,EACjB,kBAAsC,EACtC,KAAa,GACd,EAAE,aAAa,qBAyFf;yBAvGe,QAAQ"}
+{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAG9C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAKlD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,QAAQ,CAAC,EACvB,OAAO,EACP,QAAQ,EACR,MAAM,EACN,aAAa,EACb,IAAY,EACZ,SAAoC,EACpC,QAAkC,EAClC,SAAoC,EACpC,cAA8C,EAC9C,YAA0C,EAC1C,UAAiB,EACjB,kBAAsC,EACtC,KAAa,GACd,EAAE,aAAa,qBAiFf;yBA/Fe,QAAQ"}

package/package.json

@@ -1,29 +1,12 @@
 {
   "name": "react-native-skelo",
-  "version": "0.0.3",
+  "version": "0.1.0-alpha.0",
   "description": "Automatic skeleton loading for React Native. Write your UI once, Skelo builds the loading state automatically.",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
   "types": "lib/typescript/index.d.ts",
   "react-native": "src/index.ts",
   "source": "src/index.ts",
-  "exports": {
-    ".": {
-      "types": "./lib/typescript/index.d.ts",
-      "react-native": "./src/index.ts",
-      "import": "./lib/module/index.js",
-      "require": "./lib/commonjs/index.js",
-      "default": "./lib/commonjs/index.js"
-    },
-    "./deep": {
-      "types": "./lib/typescript/deep.d.ts",
-      "react-native": "./src/deep.ts",
-      "import": "./lib/module/deep.js",
-      "require": "./lib/commonjs/deep.js",
-      "default": "./lib/commonjs/deep.js"
-    },
-    "./package.json": "./package.json"
-  },
   "files": [
     "src",
     "lib",
@@ -35,7 +18,6 @@
     "test:watch": "jest --watch",
     "test:coverage": "jest --coverage",
     "typecheck": "tsc --noEmit",
-    "build": "bob build",
     "lint": "eslint \"**/*.{js,ts,tsx}\"",
     "lint:fix": "eslint \"**/*.{js,ts,tsx}\" --fix",
     "format": "prettier --write \"**/*.{js,ts,tsx,json,md}\"",
@@ -88,6 +70,7 @@
   "peerDependencies": {
     "react": "*",
     "react-native": "*",
+    "react-native-linear-gradient": ">=2.8.0",
     "react-native-reanimated": ">=3.0.0",
     "react-reconciler": ">=0.29.0"
   },
@@ -112,6 +95,7 @@
     "react": "18.2.0",
     "react-native": "0.73.1",
     "react-native-builder-bob": "^0.23.2",
+    "react-native-linear-gradient": "^2.8.3",
     "react-native-reanimated": "^3.6.1",
     "react-reconciler": "^0.29.2",
     "react-test-renderer": "18.2.0",
@@ -127,7 +111,7 @@
       "<rootDir>/lib/"
     ],
     "transformIgnorePatterns": [
-      "node_modules/(?!(@react-native|react-native|react-native-reanimated)/)"
+      "node_modules/(?!(@react-native|react-native|react-native-reanimated|react-native-linear-gradient)/)"
     ],
     "collectCoverageFrom": [
       "src/**/*.{ts,tsx}",

package/src/animations/PulseAnimation.tsx

@@ -11,17 +11,67 @@ import Animated, {
 } from 'react-native-reanimated';
 
 interface PulseProps {
+  /**
+   * Width of the pulse container
+   */
   width?: DimensionValue;
+
+  /**
+   * Height of the pulse container
+   */
   height?: DimensionValue;
+
+  /**
+   * Base color of the skeleton
+   * @default '#E1E9EE'
+   */
   baseColor?: string;
+
+  /**
+   * Highlight color for pulse
+   * @default '#F2F8FC'
+   */
   highlightColor?: string;
+
+  /**
+   * Animation duration in milliseconds
+   * @default 1000
+   */
   duration?: number;
+
+  /**
+   * Border radius
+   */
   borderRadius?: number;
+
+  /**
+   * Additional styles
+   */
   style?: StyleProp<ViewStyle>;
+
+  /**
+   * Child content (rendered inside pulse)
+   */
   children?: React.ReactNode;
 }
 
-// Breathing opacity loop on the UI thread with Reanimated.
+/**
+ * Pulse animation component using Reanimated 3
+ *
+ * Creates a subtle breathing/pulsing effect using:
+ * - Shared values for performance
+ * - Worklets for 60 FPS on UI thread
+ * - Opacity animation for pulse effect
+ *
+ * @example
+ * ```tsx
+ * <PulseAnimation
+ *   width={200}
+ *   height={20}
+ *   borderRadius={4}
+ * />
+ * ```
+ */
 export function PulseAnimation({
   width,
   height,
@@ -31,9 +81,12 @@ export function PulseAnimation({
   style,
   children,
 }: PulseProps) {
+  // Shared value for opacity (0 to 1)
   const opacity = useSharedValue(1);
 
   useEffect(() => {
+    // Start infinite pulse animation
+    // Sequence: fade out -> fade in
     opacity.value = withRepeat(
       withSequence(
         withTiming(0.5, {
@@ -45,21 +98,30 @@ export function PulseAnimation({
           easing: Easing.inOut(Easing.ease),
         })
       ),
-      -1,
-      false
+      -1, // Infinite repeat
+      false // Don't reverse
     );
   }, [duration, opacity]);
 
+  // Animated style for pulse effect
   const animatedStyle = useAnimatedStyle(() => {
     'worklet';
-    return { opacity: opacity.value };
+
+    return {
+      opacity: opacity.value,
+    };
   }, []);
 
   return (
     <Animated.View
       style={[
         styles.container,
-        { width, height, borderRadius, backgroundColor: baseColor },
+        {
+          width,
+          height,
+          borderRadius,
+          backgroundColor: baseColor,
+        },
         animatedStyle,
         style,
       ]}

package/src/animations/ShimmerAnimation.tsx

@@ -1,10 +1,5 @@
-import React, { useEffect, useState } from 'react';
-import type {
-  DimensionValue,
-  LayoutChangeEvent,
-  StyleProp,
-  ViewStyle,
-} from 'react-native';
+import React, { useEffect } from 'react';
+import type { DimensionValue, StyleProp, ViewStyle } from 'react-native';
 import { StyleSheet, View } from 'react-native';
 import Animated, {
   useSharedValue,
@@ -14,21 +9,70 @@ import Animated, {
   interpolate,
   Easing,
 } from 'react-native-reanimated';
+import { LinearGradient } from 'react-native-linear-gradient';
 
 interface ShimmerProps {
+  /**
+   * Width of the shimmer container
+   */
   width?: DimensionValue;
+
+  /**
+   * Height of the shimmer container
+   */
   height?: DimensionValue;
+
+  /**
+   * Base color of the skeleton
+   * @default '#E1E9EE'
+   */
   baseColor?: string;
+
+  /**
+   * Highlight color that shimmers across
+   * @default '#F2F8FC'
+   */
   highlightColor?: string;
+
+  /**
+   * Animation duration in milliseconds
+   * @default 1500
+   */
   duration?: number;
+
+  /**
+   * Border radius
+   */
   borderRadius?: number;
+
+  /**
+   * Additional styles
+   */
   style?: StyleProp<ViewStyle>;
+
+  /**
+   * Child content (rendered on top of shimmer)
+   */
   children?: React.ReactNode;
 }
 
-// Shimmer with no gradient library: the sweeping overlay uses React Native's
-// built-in `experimental_backgroundImage` CSS gradient (New Architecture),
-// animated on the UI thread with Reanimated.
+/**
+ * Shimmer animation component using Reanimated 3
+ *
+ * Creates a smooth left-to-right shimmer effect using:
+ * - Shared values for performance
+ * - Worklets for 60 FPS on UI thread
+ * - Linear gradient for shimmer effect
+ *
+ * @example
+ * ```tsx
+ * <ShimmerAnimation
+ *   width={200}
+ *   height={20}
+ *   borderRadius={4}
+ * />
+ * ```
+ */
 export function ShimmerAnimation({
   width,
   height,
@@ -39,56 +83,77 @@ export function ShimmerAnimation({
   style,
   children,
 }: ShimmerProps) {
+  // Shared value for animation progress (0 to 1)
   const progress = useSharedValue(0);
-  const [measuredWidth, setMeasuredWidth] = useState(0);
 
   useEffect(() => {
+    // Start infinite shimmer animation
     progress.value = withRepeat(
-      withTiming(1, { duration, easing: Easing.linear }),
-      -1,
-      false
+      withTiming(1, {
+        duration,
+        easing: Easing.linear,
+      }),
+      -1, // Infinite repeat
+      false // Don't reverse
     );
   }, [duration, progress]);
 
-  const onLayout = (event: LayoutChangeEvent) => {
-    const w = event.nativeEvent.layout.width;
-    setMeasuredWidth(prev => (prev === w ? prev : w));
-  };
-
-  const containerWidth = typeof width === 'number' ? width : measuredWidth;
-
+  // Animated style for shimmer overlay
   const animatedStyle = useAnimatedStyle(() => {
     'worklet';
-    const translateX = interpolate(
-      progress.value,
-      [0, 1],
-      [-containerWidth, containerWidth]
-    );
-    return { transform: [{ translateX }] };
-  }, [containerWidth]);
 
-  // `experimental_backgroundImage` isn't in the ViewStyle types yet.
-  const gradientStyle = {
-    ...StyleSheet.absoluteFillObject,
-    experimental_backgroundImage: `linear-gradient(to right, ${baseColor}, ${highlightColor}, ${baseColor})`,
-  } as unknown as ViewStyle;
+    // Calculate shimmer position
+    // Interpolate from -100% to 100% to create left-to-right sweep
+    const translateX = interpolate(progress.value, [0, 1], [-1, 1]);
+
+    return {
+      transform: [{ translateX: translateX * (typeof width === 'number' ? width : 200) }],
+    };
+  }, [width]);
 
   return (
     <View
-      onLayout={onLayout}
       style={[
         styles.container,
-        { width, height, borderRadius, backgroundColor: baseColor },
+        {
+          width,
+          height,
+          borderRadius,
+          backgroundColor: baseColor,
+        },
         style,
       ]}
     >
+      {/* Shimmer gradient overlay */}
       <Animated.View
-        pointerEvents="none"
-        style={[StyleSheet.absoluteFill, animatedStyle]}
+        style={[
+          StyleSheet.absoluteFill,
+          {
+            overflow: 'hidden',
+            borderRadius,
+          },
+        ]}
       >
-        <View style={gradientStyle} />
+        <Animated.View
+          style={[
+            styles.shimmer,
+            {
+              width: typeof width === 'number' ? width : '100%',
+              height: '100%',
+            },
+            animatedStyle,
+          ]}
+        >
+          <LinearGradient
+            colors={[baseColor, highlightColor, highlightColor, baseColor]}
+            start={{ x: 0, y: 0 }}
+            end={{ x: 1, y: 0 }}
+            style={StyleSheet.absoluteFill}
+          />
+        </Animated.View>
       </Animated.View>
 
+      {/* Child content */}
       {children}
     </View>
   );
@@ -98,4 +163,7 @@ const styles = StyleSheet.create({
   container: {
     overflow: 'hidden',
   },
+  shimmer: {
+    position: 'absolute',
+  },
 });

package/src/components/Skeleton.tsx

@@ -4,7 +4,7 @@ import { Parser } from '../core/parser';
 import { SkeletonRenderer } from './SkeletonRenderer';
 import { SkeletonIgnore } from './SkeletonIgnore';
 import { StyleSkeleton } from '../core/generator/StyleSkeleton';
-import { getDeepExpander } from '../core/deepRegistry';
+import { expandToComponentNodes } from '../core/parser/expandOffline';
 import { DEFAULT_CONFIG } from '../constants/defaults';
 
 /**
@@ -63,23 +63,15 @@ export function Skeleton({
     }
 
     try {
-      // Deep mode: expand opaque components into their real host tree via the
-      // opt-in expander (registered by importing 'react-native-skelo/deep').
-      // Falls back to static parsing if unavailable or it returns nothing.
+      // Deep mode: expand opaque components into their real host tree by
+      // rendering them offline. Falls back to static parsing on failure.
       if (deep) {
-        const expand = getDeepExpander();
-        if (expand) {
-          const expanded = expand(<>{children}</>);
-          if (expanded && expanded.length > 0) {
-            return expanded;
-          }
-          if (__DEV__) {
-            console.warn('[Skelo] deep expansion returned nothing; falling back to static parsing.');
-          }
-        } else if (__DEV__) {
-          console.warn(
-            "[Skelo] `deep` requires react-reconciler. Install it and add `import 'react-native-skelo/deep';` in your app entry."
-          );
+        const expanded = expandToComponentNodes(<>{children}</>);
+        if (expanded && expanded.length > 0) {
+          return expanded;
+        }
+        if (__DEV__) {
+          console.warn('[Skelo] deep expansion returned nothing; falling back to static parsing.');
         }
       }
 

package/lib/commonjs/core/deepRegistry.js

@@ -1,18 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getDeepExpander = getDeepExpander;
-exports.setDeepExpander = setDeepExpander;
-// Deep expansion is opt-in so the core bundle never depends on react-reconciler.
-// `react-native-skelo/deep` registers the expander; Skeleton reads it here.
-
-let expander = null;
-function setDeepExpander(fn) {
-  expander = fn;
-}
-function getDeepExpander() {
-  return expander;
-}
-//# sourceMappingURL=deepRegistry.js.map

package/lib/commonjs/core/deepRegistry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["expander","setDeepExpander","fn","getDeepExpander"],"sourceRoot":"../../../src","sources":["core/deepRegistry.ts"],"mappings":";;;;;;;AAGA;AACA;;AAGA,IAAIA,QAA6B,GAAG,IAAI;AAEjC,SAASC,eAAeA,CAACC,EAAgB,EAAQ;EACtDF,QAAQ,GAAGE,EAAE;AACf;AAEO,SAASC,eAAeA,CAAA,EAAwB;EACrD,OAAOH,QAAQ;AACjB","ignoreList":[]}

package/lib/commonjs/deep.js

@@ -1,18 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.deepEnabled = void 0;
-var _deepRegistry = require("./core/deepRegistry");
-var _expandOffline = require("./core/parser/expandOffline");
-// Opt-in deep mode. Import once in your app entry to enable `<Skeleton deep>`:
-//
-//   import 'react-native-skelo/deep';
-//
-// This is the only module that pulls in react-reconciler, so apps that don't
-// use deep mode never bundle it. Requires `react-reconciler` to be installed.
-
-(0, _deepRegistry.setDeepExpander)(_expandOffline.expandToComponentNodes);
-const deepEnabled = exports.deepEnabled = true;
-//# sourceMappingURL=deep.js.map

package/lib/commonjs/deep.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_deepRegistry","require","_expandOffline","setDeepExpander","expandToComponentNodes","deepEnabled","exports"],"sourceRoot":"../../src","sources":["deep.ts"],"mappings":";;;;;;AAMA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,cAAA,GAAAD,OAAA;AAPA;AACA;AACA;AACA;AACA;AACA;;AAIA,IAAAE,6BAAe,EAACC,qCAAsB,CAAC;AAEhC,MAAMC,WAAW,GAAAC,OAAA,CAAAD,WAAA,GAAG,IAAI","ignoreList":[]}

package/lib/module/core/deepRegistry.js

@@ -1,11 +0,0 @@
-// Deep expansion is opt-in so the core bundle never depends on react-reconciler.
-// `react-native-skelo/deep` registers the expander; Skeleton reads it here.
-
-let expander = null;
-export function setDeepExpander(fn) {
-  expander = fn;
-}
-export function getDeepExpander() {
-  return expander;
-}
-//# sourceMappingURL=deepRegistry.js.map

package/lib/module/core/deepRegistry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["expander","setDeepExpander","fn","getDeepExpander"],"sourceRoot":"../../../src","sources":["core/deepRegistry.ts"],"mappings":"AAGA;AACA;;AAGA,IAAIA,QAA6B,GAAG,IAAI;AAExC,OAAO,SAASC,eAAeA,CAACC,EAAgB,EAAQ;EACtDF,QAAQ,GAAGE,EAAE;AACf;AAEA,OAAO,SAASC,eAAeA,CAAA,EAAwB;EACrD,OAAOH,QAAQ;AACjB","ignoreList":[]}

package/lib/module/deep.js

@@ -1,11 +0,0 @@
-// Opt-in deep mode. Import once in your app entry to enable `<Skeleton deep>`:
-//
-//   import 'react-native-skelo/deep';
-//
-// This is the only module that pulls in react-reconciler, so apps that don't
-// use deep mode never bundle it. Requires `react-reconciler` to be installed.
-import { setDeepExpander } from './core/deepRegistry';
-import { expandToComponentNodes } from './core/parser/expandOffline';
-setDeepExpander(expandToComponentNodes);
-export const deepEnabled = true;
-//# sourceMappingURL=deep.js.map

package/lib/module/deep.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["setDeepExpander","expandToComponentNodes","deepEnabled"],"sourceRoot":"../../src","sources":["deep.ts"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA,SAASA,eAAe,QAAQ,qBAAqB;AACrD,SAASC,sBAAsB,QAAQ,6BAA6B;AAEpED,eAAe,CAACC,sBAAsB,CAAC;AAEvC,OAAO,MAAMC,WAAW,GAAG,IAAI","ignoreList":[]}

package/lib/typescript/core/deepRegistry.d.ts

@@ -1,7 +0,0 @@
-import type { ReactElement } from 'react';
-import type { ComponentNode } from '../types';
-type DeepExpander = (element: ReactElement) => ComponentNode[] | null;
-export declare function setDeepExpander(fn: DeepExpander): void;
-export declare function getDeepExpander(): DeepExpander | null;
-export {};
-//# sourceMappingURL=deepRegistry.d.ts.map