react-native-skelo 0.0.1 → 0.0.2

package/lib/commonjs/plugins/ImagePlugin.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","e","__esModule","default","ImagePlugin","exports","name","component","Image","version","strategy","props","context","primitives","config","style","flatStyle","Array","isArray","Object","assign","width","height","borderRadius","isCircle","createElement","Circle","size","animation","baseColor","highlightColor","duration","metadata","description","author"],"sourceRoot":"../../../src","sources":["plugins/ImagePlugin.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAAqC,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAIrC;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMG,WAAuC,GAAAC,OAAA,CAAAD,WAAA,GAAG;EACrDE,IAAI,EAAE,OAAO;EACbC,SAAS,EAAEC,kBAAK;EAChBC,OAAO,EAAE,OAAO;EAEhBC,QAAQ,EAAEA,CAACC,KAAK,EAAEC,OAAO,KAAK;IAC5B,MAAM;MAAEC,UAAU;MAAEC;IAAO,CAAC,GAAGF,OAAO;IACtC,MAAMG,KAAK,GAAGJ,KAAK,CAACI,KAAK,IAAI,CAAC,CAAC;IAC/B,MAAMC,SAAS,GAAGC,KAAK,CAACC,OAAO,CAACH,KAAK,CAAC,GAAGI,MAAM,CAACC,MAAM,CAAC,CAAC,CAAC,EAAE,GAAGL,KAAK,CAAC,GAAGA,KAAK;IAE5E,MAAMM,KAAK,GAAGL,SAAS,CAACK,KAAK,IAAI,GAAG;IACpC,MAAMC,MAAM,GAAGN,SAAS,CAACM,MAAM,IAAI,GAAG;IACtC,MAAMC,YAAY,GAAGP,SAAS,CAACO,YAAY,IAAI,CAAC;;IAEhD;IACA,MAAMC,QAAQ,GACZ,OAAOH,KAAK,KAAK,QAAQ,IACzB,OAAOC,MAAM,KAAK,QAAQ,IAC1BD,KAAK,KAAKC,MAAM,IAChBC,YAAY,KAAKF,KAAK,GAAG,CAAC;IAE5B,IAAIG,QAAQ,EAAE;MACZ,oBACE3B,MAAA,CAAAM,OAAA,CAAAsB,aAAA,CAACZ,UAAU,CAACa,MAAM;QAChBC,IAAI,EAAEN,KAAgB;QACtBO,SAAS,EAAEd,MAAM,CAACc,SAAU;QAC5BC,SAAS,EAAEf,MAAM,CAACe,SAAU;QAC5BC,cAAc,EAAEhB,MAAM,CAACgB,cAAe;QACtCC,QAAQ,EAAEjB,MAAM,CAACiB,QAAS;QAC1BhB,KAAK,EAAEC;MAAU,CAClB,CAAC;IAEN;IAEA,oBACEnB,MAAA,CAAAM,OAAA,CAAAsB,aAAA,CAACZ,UAAU,CAACL,KAAK;MACfa,KAAK,EAAEA,KAAM;MACbC,MAAM,EAAEA,MAAO;MACfC,YAAY,EAAEA,YAAuB;MACrCK,SAAS,EAAEd,MAAM,CAACc,SAAU;MAC5BC,SAAS,EAAEf,MAAM,CAACe,SAAU;MAC5BC,cAAc,EAAEhB,MAAM,CAACgB,cAAe;MACtCC,QAAQ,EAAEjB,MAAM,CAACiB,QAAS;MAC1BhB,KAAK,EAAEC;IAAU,CAClB,CAAC;EAEN,CAAC;EAEDgB,QAAQ,EAAE;IACRC,WAAW,EAAE,oDAAoD;IACjEC,MAAM,EAAE;EACV;AACF,CAAC","ignoreList":[]}

package/lib/commonjs/plugins/TextPlugin.js

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TextPlugin = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * Built-in plugin for React Native Text component
+ *
+ * Renders Text as SkeletonText with:
+ * - Estimated line count from text content
+ * - Font size from style
+ * - Line height from style
+ */
+const TextPlugin = exports.TextPlugin = {
+  name: 'Text',
+  component: _reactNative.Text,
+  version: '1.0.0',
+  strategy: (props, context) => {
+    const {
+      primitives,
+      config
+    } = context;
+    const style = props.style || {};
+    const flatStyle = Array.isArray(style) ? Object.assign({}, ...style) : style;
+    const fontSize = flatStyle.fontSize ?? 14;
+    const lineHeight = flatStyle.lineHeight ?? fontSize * 1.4;
+
+    // Estimate number of lines from text content
+    const textContent = props.children;
+    const estimatedLines = estimateTextLines(textContent);
+    return /*#__PURE__*/_react.default.createElement(primitives.Text, {
+      lines: estimatedLines,
+      fontSize: fontSize,
+      lineHeight: lineHeight,
+      width: flatStyle.width ?? '100%',
+      animation: config.animation,
+      baseColor: config.baseColor,
+      highlightColor: config.highlightColor,
+      duration: config.duration,
+      style: flatStyle
+    });
+  },
+  metadata: {
+    description: 'Automatic skeleton generation for Text components',
+    author: 'Skelo'
+  }
+};
+
+/**
+ * Estimate number of lines from text content
+ */
+function estimateTextLines(children) {
+  if (!children) return 1;
+  if (typeof children === 'string' || typeof children === 'number') {
+    const text = String(children);
+    const avgCharsPerLine = 40;
+    const estimatedLines = Math.ceil(text.length / avgCharsPerLine);
+    return Math.max(1, Math.min(estimatedLines, 5)); // Cap at 5 lines
+  }
+  if (Array.isArray(children)) {
+    // Multiple text nodes - count as separate lines
+    return Math.min(children.length, 5);
+  }
+  return 1;
+}
+//# sourceMappingURL=TextPlugin.js.map

package/lib/commonjs/plugins/TextPlugin.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","e","__esModule","default","TextPlugin","exports","name","component","Text","version","strategy","props","context","primitives","config","style","flatStyle","Array","isArray","Object","assign","fontSize","lineHeight","textContent","children","estimatedLines","estimateTextLines","createElement","lines","width","animation","baseColor","highlightColor","duration","metadata","description","author","text","String","avgCharsPerLine","Math","ceil","length","max","min"],"sourceRoot":"../../../src","sources":["plugins/TextPlugin.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAAoC,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAIpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMG,UAAqC,GAAAC,OAAA,CAAAD,UAAA,GAAG;EACnDE,IAAI,EAAE,MAAM;EACZC,SAAS,EAAEC,iBAAI;EACfC,OAAO,EAAE,OAAO;EAEhBC,QAAQ,EAAEA,CAACC,KAAK,EAAEC,OAAO,KAAK;IAC5B,MAAM;MAAEC,UAAU;MAAEC;IAAO,CAAC,GAAGF,OAAO;IACtC,MAAMG,KAAK,GAAGJ,KAAK,CAACI,KAAK,IAAI,CAAC,CAAC;IAC/B,MAAMC,SAAS,GAAGC,KAAK,CAACC,OAAO,CAACH,KAAK,CAAC,GAAGI,MAAM,CAACC,MAAM,CAAC,CAAC,CAAC,EAAE,GAAGL,KAAK,CAAC,GAAGA,KAAK;IAE5E,MAAMM,QAAQ,GAAGL,SAAS,CAACK,QAAQ,IAAI,EAAE;IACzC,MAAMC,UAAU,GAAGN,SAAS,CAACM,UAAU,IAAID,QAAQ,GAAG,GAAG;;IAEzD;IACA,MAAME,WAAW,GAAGZ,KAAK,CAACa,QAAQ;IAClC,MAAMC,cAAc,GAAGC,iBAAiB,CAACH,WAAW,CAAC;IAErD,oBACE1B,MAAA,CAAAM,OAAA,CAAAwB,aAAA,CAACd,UAAU,CAACL,IAAI;MACdoB,KAAK,EAAEH,cAAe;MACtBJ,QAAQ,EAAEA,QAAS;MACnBC,UAAU,EAAEA,UAAW;MACvBO,KAAK,EAAEb,SAAS,CAACa,KAAK,IAAI,MAAO;MACjCC,SAAS,EAAEhB,MAAM,CAACgB,SAAU;MAC5BC,SAAS,EAAEjB,MAAM,CAACiB,SAAU;MAC5BC,cAAc,EAAElB,MAAM,CAACkB,cAAe;MACtCC,QAAQ,EAAEnB,MAAM,CAACmB,QAAS;MAC1BlB,KAAK,EAAEC;IAAU,CAClB,CAAC;EAEN,CAAC;EAEDkB,QAAQ,EAAE;IACRC,WAAW,EAAE,mDAAmD;IAChEC,MAAM,EAAE;EACV;AACF,CAAC;;AAED;AACA;AACA;AACA,SAASV,iBAAiBA,CAACF,QAAa,EAAU;EAChD,IAAI,CAACA,QAAQ,EAAE,OAAO,CAAC;EAEvB,IAAI,OAAOA,QAAQ,KAAK,QAAQ,IAAI,OAAOA,QAAQ,KAAK,QAAQ,EAAE;IAChE,MAAMa,IAAI,GAAGC,MAAM,CAACd,QAAQ,CAAC;IAC7B,MAAMe,eAAe,GAAG,EAAE;IAC1B,MAAMd,cAAc,GAAGe,IAAI,CAACC,IAAI,CAACJ,IAAI,CAACK,MAAM,GAAGH,eAAe,CAAC;IAC/D,OAAOC,IAAI,CAACG,GAAG,CAAC,CAAC,EAAEH,IAAI,CAACI,GAAG,CAACnB,cAAc,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;EACnD;EAEA,IAAIR,KAAK,CAACC,OAAO,CAACM,QAAQ,CAAC,EAAE;IAC3B;IACA,OAAOgB,IAAI,CAACI,GAAG,CAACpB,QAAQ,CAACkB,MAAM,EAAE,CAAC,CAAC;EACrC;EAEA,OAAO,CAAC;AACV","ignoreList":[]}

package/lib/commonjs/plugins/ViewPlugin.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ViewPlugin = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * Built-in plugin for React Native View component
+ *
+ * Renders View as:
+ * - SkeletonBox if has explicit width/height
+ * - Container with parsed children otherwise
+ */
+const ViewPlugin = exports.ViewPlugin = {
+  name: 'View',
+  component: _reactNative.View,
+  version: '1.0.0',
+  strategy: (props, context) => {
+    const {
+      primitives,
+      parseChildren,
+      config
+    } = context;
+    const style = props.style || {};
+    const flatStyle = Array.isArray(style) ? Object.assign({}, ...style) : style;
+    const width = flatStyle.width;
+    const height = flatStyle.height;
+    const borderRadius = flatStyle.borderRadius ?? config.borderRadius;
+
+    // If View has explicit dimensions, render as box
+    if (width && height) {
+      return /*#__PURE__*/_react.default.createElement(primitives.Box, {
+        width: width,
+        height: height,
+        borderRadius: borderRadius,
+        animation: config.animation,
+        baseColor: config.baseColor,
+        highlightColor: config.highlightColor,
+        duration: config.duration,
+        style: flatStyle
+      });
+    }
+
+    // If View has children, render as container
+    if (props.children) {
+      return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+        style: flatStyle
+      }, parseChildren(props.children));
+    }
+
+    // Empty View - render as small placeholder
+    return /*#__PURE__*/_react.default.createElement(primitives.Box, {
+      width: width ?? 100,
+      height: height ?? 20,
+      borderRadius: borderRadius,
+      animation: config.animation,
+      baseColor: config.baseColor,
+      highlightColor: config.highlightColor,
+      duration: config.duration,
+      style: flatStyle
+    });
+  },
+  metadata: {
+    description: 'Automatic skeleton generation for View components',
+    author: 'Skelo'
+  }
+};
+//# sourceMappingURL=ViewPlugin.js.map

package/lib/commonjs/plugins/ViewPlugin.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","e","__esModule","default","ViewPlugin","exports","name","component","View","version","strategy","props","context","primitives","parseChildren","config","style","flatStyle","Array","isArray","Object","assign","width","height","borderRadius","createElement","Box","animation","baseColor","highlightColor","duration","children","metadata","description","author"],"sourceRoot":"../../../src","sources":["plugins/ViewPlugin.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAAoC,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAIpC;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMG,UAAqC,GAAAC,OAAA,CAAAD,UAAA,GAAG;EACnDE,IAAI,EAAE,MAAM;EACZC,SAAS,EAAEC,iBAAI;EACfC,OAAO,EAAE,OAAO;EAEhBC,QAAQ,EAAEA,CAACC,KAAK,EAAEC,OAAO,KAAK;IAC5B,MAAM;MAAEC,UAAU;MAAEC,aAAa;MAAEC;IAAO,CAAC,GAAGH,OAAO;IACrD,MAAMI,KAAK,GAAGL,KAAK,CAACK,KAAK,IAAI,CAAC,CAAC;IAC/B,MAAMC,SAAS,GAAGC,KAAK,CAACC,OAAO,CAACH,KAAK,CAAC,GAAGI,MAAM,CAACC,MAAM,CAAC,CAAC,CAAC,EAAE,GAAGL,KAAK,CAAC,GAAGA,KAAK;IAE5E,MAAMM,KAAK,GAAGL,SAAS,CAACK,KAAK;IAC7B,MAAMC,MAAM,GAAGN,SAAS,CAACM,MAAM;IAC/B,MAAMC,YAAY,GAAGP,SAAS,CAACO,YAAY,IAAIT,MAAM,CAACS,YAAY;;IAElE;IACA,IAAIF,KAAK,IAAIC,MAAM,EAAE;MACnB,oBACE1B,MAAA,CAAAM,OAAA,CAAAsB,aAAA,CAACZ,UAAU,CAACa,GAAG;QACbJ,KAAK,EAAEA,KAAM;QACbC,MAAM,EAAEA,MAAO;QACfC,YAAY,EAAEA,YAAa;QAC3BG,SAAS,EAAEZ,MAAM,CAACY,SAAU;QAC5BC,SAAS,EAAEb,MAAM,CAACa,SAAU;QAC5BC,cAAc,EAAEd,MAAM,CAACc,cAAe;QACtCC,QAAQ,EAAEf,MAAM,CAACe,QAAS;QAC1Bd,KAAK,EAAEC;MAAU,CAClB,CAAC;IAEN;;IAEA;IACA,IAAIN,KAAK,CAACoB,QAAQ,EAAE;MAClB,oBAAOlC,MAAA,CAAAM,OAAA,CAAAsB,aAAA,CAACzB,YAAA,CAAAQ,IAAI;QAACQ,KAAK,EAAEC;MAAU,GAAEH,aAAa,CAACH,KAAK,CAACoB,QAAQ,CAAQ,CAAC;IACvE;;IAEA;IACA,oBACElC,MAAA,CAAAM,OAAA,CAAAsB,aAAA,CAACZ,UAAU,CAACa,GAAG;MACbJ,KAAK,EAAEA,KAAK,IAAI,GAAI;MACpBC,MAAM,EAAEA,MAAM,IAAI,EAAG;MACrBC,YAAY,EAAEA,YAAa;MAC3BG,SAAS,EAAEZ,MAAM,CAACY,SAAU;MAC5BC,SAAS,EAAEb,MAAM,CAACa,SAAU;MAC5BC,cAAc,EAAEd,MAAM,CAACc,cAAe;MACtCC,QAAQ,EAAEf,MAAM,CAACe,QAAS;MAC1Bd,KAAK,EAAEC;IAAU,CAClB,CAAC;EAEN,CAAC;EAEDe,QAAQ,EAAE;IACRC,WAAW,EAAE,mDAAmD;IAChEC,MAAM,EAAE;EACV;AACF,CAAC","ignoreList":[]}

package/lib/commonjs/plugins/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ImagePlugin", {
+  enumerable: true,
+  get: function () {
+    return _ImagePlugin.ImagePlugin;
+  }
+});
+Object.defineProperty(exports, "TextPlugin", {
+  enumerable: true,
+  get: function () {
+    return _TextPlugin.TextPlugin;
+  }
+});
+Object.defineProperty(exports, "ViewPlugin", {
+  enumerable: true,
+  get: function () {
+    return _ViewPlugin.ViewPlugin;
+  }
+});
+var _ViewPlugin = require("./ViewPlugin");
+var _TextPlugin = require("./TextPlugin");
+var _ImagePlugin = require("./ImagePlugin");
+//# sourceMappingURL=index.js.map

package/lib/commonjs/plugins/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_ViewPlugin","require","_TextPlugin","_ImagePlugin"],"sourceRoot":"../../../src","sources":["plugins/index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,WAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AACA,IAAAE,YAAA,GAAAF,OAAA","ignoreList":[]}

package/lib/commonjs/types/index.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=index.js.map

package/lib/commonjs/types/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../src","sources":["types/index.ts"],"mappings":"","ignoreList":[]}

package/lib/commonjs/types/plugin.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=plugin.js.map

package/lib/commonjs/types/plugin.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../src","sources":["types/plugin.ts"],"mappings":"","ignoreList":[]}

package/lib/commonjs/types/skeleton.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=skeleton.js.map

package/lib/commonjs/types/skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../src","sources":["types/skeleton.ts"],"mappings":"","ignoreList":[]}

package/lib/commonjs/utils/componentUtils.js

@@ -0,0 +1,138 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.flattenChildren = flattenChildren;
+exports.getComponentName = getComponentName;
+exports.isFragment = isFragment;
+exports.isTouchableComponent = isTouchableComponent;
+Object.defineProperty(exports, "isValidElement", {
+  enumerable: true,
+  get: function () {
+    return _react.isValidElement;
+  }
+});
+exports.randomWidth = randomWidth;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+// Re-exported so consumers can access it from the skelo utils surface
+
+/**
+ * Reference map of React Native host components to their canonical names.
+ *
+ * Modern RN components (View/Text/Image/...) are `forwardRef`/`memo` objects,
+ * not plain functions or strings, so name/displayName sniffing is unreliable.
+ * Identifying them by reference is exact. This works across the library/app
+ * module boundary because Metro resolves a single `react-native` instance.
+ */
+const RN_COMPONENT_NAMES = new Map([[_reactNative.View, 'View'], [_reactNative.Text, 'Text'], [_reactNative.Image, 'Image'], [_reactNative.ImageBackground, 'ImageBackground'], [_reactNative.ScrollView, 'ScrollView'], [_reactNative.SafeAreaView, 'SafeAreaView'], [_reactNative.FlatList, 'FlatList'], [_reactNative.SectionList, 'SectionList'], [_reactNative.VirtualizedList, 'VirtualizedList'], [_reactNative.TouchableOpacity, 'TouchableOpacity'], [_reactNative.TouchableHighlight, 'TouchableHighlight'], [_reactNative.TouchableWithoutFeedback, 'TouchableWithoutFeedback'], [_reactNative.Pressable, 'Pressable'], [_reactNative.KeyboardAvoidingView, 'KeyboardAvoidingView']]);
+
+/**
+ * Get component display name or type name
+ *
+ * @param element - React element
+ * @returns Component name as string
+ */
+function getComponentName(element) {
+  const type = element.type;
+  if (type === _react.default.Fragment) {
+    return 'Fragment';
+  }
+
+  // Exact identification of RN host components (forwardRef/memo objects).
+  const mapped = RN_COMPONENT_NAMES.get(type);
+  if (mapped) {
+    return mapped;
+  }
+
+  // Intrinsic host string (e.g. web/DOM or raw native tags).
+  if (typeof type === 'string') {
+    return type;
+  }
+
+  // Plain function/class components.
+  if (typeof type === 'function') {
+    const fn = type;
+    return fn.displayName || fn.name || 'Anonymous';
+  }
+
+  // forwardRef / memo wrappers: unwrap to find a usable name.
+  if (typeof type === 'object' && type !== null) {
+    const obj = type;
+    if (obj.displayName) {
+      return obj.displayName;
+    }
+    if (obj.render) {
+      return obj.render.displayName || obj.render.name || 'Anonymous';
+    }
+    // memo(Component) nests the real component under `.type`.
+    if (obj.type) {
+      return getComponentName({
+        type: obj.type
+      });
+    }
+    return 'Anonymous';
+  }
+  return 'Unknown';
+}
+
+/**
+ * Check if element is a React Fragment
+ *
+ * @param element - React element
+ * @returns True if element is a Fragment
+ */
+function isFragment(element) {
+  return element.type === _react.default.Fragment;
+}
+
+/**
+ * Flatten children, handling Fragments recursively
+ *
+ * @param children - React children
+ * @returns Flattened array of children
+ */
+function flattenChildren(children) {
+  const result = [];
+  _react.default.Children.forEach(children, child => {
+    if (! /*#__PURE__*/(0, _react.isValidElement)(child)) {
+      result.push(child);
+      return;
+    }
+    if (isFragment(child)) {
+      // Recursively flatten fragment children
+      const fragmentChildren = flattenChildren(child.props.children);
+      result.push(...fragmentChildren);
+    } else {
+      result.push(child);
+    }
+  });
+  return result;
+}
+
+/**
+ * Check if component is a touchable component
+ *
+ * @param element - React element
+ * @returns True if component is touchable
+ */
+function isTouchableComponent(element) {
+  const name = getComponentName(element);
+  const touchableTypes = ['TouchableOpacity', 'TouchableHighlight', 'TouchableWithoutFeedback', 'TouchableNativeFeedback', 'Pressable'];
+  return touchableTypes.includes(name);
+}
+
+/**
+ * Generate random width percentage for natural skeleton look
+ *
+ * @param min - Minimum percentage (0-100)
+ * @param max - Maximum percentage (0-100)
+ * @returns Random percentage as string (e.g., "75%")
+ */
+function randomWidth(min = 60, max = 90) {
+  const random = Math.floor(Math.random() * (max - min + 1)) + min;
+  return `${random}%`;
+}
+//# sourceMappingURL=componentUtils.js.map

package/lib/commonjs/utils/componentUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","RN_COMPONENT_NAMES","Map","View","Text","Image","ImageBackground","ScrollView","SafeAreaView","FlatList","SectionList","VirtualizedList","TouchableOpacity","TouchableHighlight","TouchableWithoutFeedback","Pressable","KeyboardAvoidingView","getComponentName","element","type","React","Fragment","mapped","fn","displayName","name","obj","render","isFragment","flattenChildren","children","result","Children","forEach","child","isValidElement","push","fragmentChildren","props","isTouchableComponent","touchableTypes","includes","randomWidth","min","max","random","Math","floor"],"sourceRoot":"../../../src","sources":["utils/componentUtils.ts"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/utils/index.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "extractDimensions", {
+  enumerable: true,
+  get: function () {
+    return _styleUtils.extractDimensions;
+  }
+});
+Object.defineProperty(exports, "flattenChildren", {
+  enumerable: true,
+  get: function () {
+    return _componentUtils.flattenChildren;
+  }
+});
+Object.defineProperty(exports, "getComponentName", {
+  enumerable: true,
+  get: function () {
+    return _componentUtils.getComponentName;
+  }
+});
+Object.defineProperty(exports, "isFragment", {
+  enumerable: true,
+  get: function () {
+    return _componentUtils.isFragment;
+  }
+});
+Object.defineProperty(exports, "isPercentage", {
+  enumerable: true,
+  get: function () {
+    return _styleUtils.isPercentage;
+  }
+});
+Object.defineProperty(exports, "isTouchableComponent", {
+  enumerable: true,
+  get: function () {
+    return _componentUtils.isTouchableComponent;
+  }
+});
+Object.defineProperty(exports, "percentageToNumber", {
+  enumerable: true,
+  get: function () {
+    return _styleUtils.percentageToNumber;
+  }
+});
+Object.defineProperty(exports, "randomWidth", {
+  enumerable: true,
+  get: function () {
+    return _componentUtils.randomWidth;
+  }
+});
+Object.defineProperty(exports, "resolveStyle", {
+  enumerable: true,
+  get: function () {
+    return _styleUtils.resolveStyle;
+  }
+});
+var _styleUtils = require("./styleUtils");
+var _componentUtils = require("./componentUtils");
+//# sourceMappingURL=index.js.map

package/lib/commonjs/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_styleUtils","require","_componentUtils"],"sourceRoot":"../../../src","sources":["utils/index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,WAAA,GAAAC,OAAA;AAEA,IAAAC,eAAA,GAAAD,OAAA","ignoreList":[]}

package/lib/commonjs/utils/styleUtils.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.extractDimensions = extractDimensions;
+exports.hasExplicitSize = hasExplicitSize;
+exports.isPercentage = isPercentage;
+exports.percentageToNumber = percentageToNumber;
+exports.resolveStyle = resolveStyle;
+var _reactNative = require("react-native");
+/**
+ * Flatten and resolve styles from React Native style prop
+ *
+ * @param style - Style prop (can be object, array, or StyleSheet reference)
+ * @returns Flattened style object
+ */
+function resolveStyle(style) {
+  if (!style) {
+    return {};
+  }
+  try {
+    const flattened = _reactNative.StyleSheet.flatten(style);
+    return flattened;
+  } catch (error) {
+    // Handle invalid styles gracefully
+    if (__DEV__) {
+      console.warn('[Skelo] Failed to resolve style:', error);
+    }
+    return {};
+  }
+}
+
+/**
+ * Extract dimensions from resolved style
+ *
+ * @param style - Resolved style object
+ * @returns Object with width and height (if present)
+ */
+function extractDimensions(style) {
+  return {
+    width: style.width,
+    height: style.height
+  };
+}
+
+/**
+ * Check if a resolved style declares both an explicit width and height
+ *
+ * @param style - Resolved style object
+ * @returns True if both width and height are defined
+ */
+function hasExplicitSize(style) {
+  return style.width !== undefined && style.height !== undefined;
+}
+
+/**
+ * Check if a value is a percentage string
+ *
+ * @param value - Value to check
+ * @returns True if value is a percentage string
+ */
+function isPercentage(value) {
+  return typeof value === 'string' && value.includes('%');
+}
+
+/**
+ * Convert percentage to number (strips %)
+ *
+ * @param value - Percentage string (e.g., "50%")
+ * @returns Number without % sign
+ */
+function percentageToNumber(value) {
+  return parseFloat(value.replace('%', ''));
+}
+//# sourceMappingURL=styleUtils.js.map

package/lib/commonjs/utils/styleUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_reactNative","require","resolveStyle","style","flattened","StyleSheet","flatten","error","__DEV__","console","warn","extractDimensions","width","height","hasExplicitSize","undefined","isPercentage","value","includes","percentageToNumber","parseFloat","replace"],"sourceRoot":"../../../src","sources":["utils/styleUtils.ts"],"mappings":";;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AAIA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,YAAYA,CAACC,KAAU,EAAiB;EACtD,IAAI,CAACA,KAAK,EAAE;IACV,OAAO,CAAC,CAAC;EACX;EAEA,IAAI;IACF,MAAMC,SAAS,GAAGC,uBAAU,CAACC,OAAO,CAACH,KAAK,CAAC;IAC3C,OAAOC,SAAS;EAClB,CAAC,CAAC,OAAOG,KAAK,EAAE;IACd;IACA,IAAIC,OAAO,EAAE;MACXC,OAAO,CAACC,IAAI,CAAC,kCAAkC,EAAEH,KAAK,CAAC;IACzD;IACA,OAAO,CAAC,CAAC;EACX;AACF;;AAEA;AACA;AACA;AACA;AACA;AACA;AACO,SAASI,iBAAiBA,CAACR,KAAoB,EAGpD;EACA,OAAO;IACLS,KAAK,EAAET,KAAK,CAACS,KAAK;IAClBC,MAAM,EAAEV,KAAK,CAACU;EAChB,CAAC;AACH;;AAEA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,eAAeA,CAACX,KAAoB,EAAW;EAC7D,OAAOA,KAAK,CAACS,KAAK,KAAKG,SAAS,IAAIZ,KAAK,CAACU,MAAM,KAAKE,SAAS;AAChE;;AAEA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,YAAYA,CAACC,KAAU,EAAW;EAChD,OAAO,OAAOA,KAAK,KAAK,QAAQ,IAAIA,KAAK,CAACC,QAAQ,CAAC,GAAG,CAAC;AACzD;;AAEA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,kBAAkBA,CAACF,KAAa,EAAU;EACxD,OAAOG,UAAU,CAACH,KAAK,CAACI,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;AAC3C","ignoreList":[]}

package/lib/module/Skelo.js

@@ -0,0 +1,98 @@
+import React from 'react';
+import { registry } from './core/registry';
+import { StyleSkeleton } from './core/generator/StyleSkeleton';
+import { DEFAULT_CONFIG } from './constants/defaults';
+
+/**
+ * Global Skelo API for plugin management
+ *
+ * @example
+ * ```tsx
+ * import { Skelo } from 'react-native-skelo';
+ * import { Avatar } from 'my-ui-library';
+ *
+ * Skelo.register({
+ *   name: 'Avatar',
+ *   component: Avatar,
+ *   strategy: (props, { primitives }) => {
+ *     return <primitives.Circle size={props.size || 40} />;
+ *   },
+ * });
+ * ```
+ */
+export const Skelo = {
+  /**
+   * Register a plugin
+   *
+   * @param plugin - Plugin configuration
+   */
+  register(plugin) {
+    registry.register(plugin);
+  },
+  /**
+   * Unregister a plugin
+   *
+   * @param component - Component type to unregister
+   */
+  unregister(component) {
+    registry.unregister(component);
+  },
+  /**
+   * Get plugin for component
+   *
+   * @param component - Component type
+   * @returns Plugin or undefined
+   */
+  getPlugin(component) {
+    return registry.getPlugin(component);
+  },
+  /**
+   * Check if plugin exists
+   *
+   * @param component - Component type
+   * @returns True if plugin is registered
+   */
+  hasPlugin(component) {
+    return registry.hasPlugin(component);
+  },
+  /**
+   * Get all plugins
+   *
+   * @returns Array of all registered plugins
+   */
+  getAllPlugins() {
+    return registry.getAllPlugins();
+  },
+  /**
+   * Clear all plugins (useful for testing)
+   */
+  clearPlugins() {
+    registry.clear();
+  },
+  /**
+   * Generate a skeleton element directly from a set of styles.
+   *
+   * @param styles - A `StyleSheet.create` object or an array of styles
+   * @param config - Optional animation/color overrides
+   * @returns A skeleton React element
+   *
+   * @example
+   * ```tsx
+   * {loading ? Skelo.fromStyles(styles) : <Screen />}
+   * ```
+   */
+  fromStyles(styles, config = {}) {
+    return /*#__PURE__*/React.createElement(StyleSkeleton, {
+      styles,
+      config: {
+        ...DEFAULT_CONFIG,
+        ...config
+      }
+    });
+  },
+  /**
+   * Library version
+   */
+  version: '0.1.0'
+};
+//# sourceMappingURL=Skelo.js.map

package/lib/module/Skelo.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","registry","StyleSkeleton","DEFAULT_CONFIG","Skelo","register","plugin","unregister","component","getPlugin","hasPlugin","getAllPlugins","clearPlugins","clear","fromStyles","styles","config","createElement","version"],"sourceRoot":"../../src","sources":["Skelo.ts"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAGzB,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,aAAa,QAAyB,gCAAgC;AAC/E,SAASC,cAAc,QAAQ,sBAAsB;;AAErD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,KAAK,GAAG;EACnB;AACF;AACA;AACA;AACA;EACEC,QAAQA,CAAUC,MAAyB,EAAQ;IACjDL,QAAQ,CAACI,QAAQ,CAACC,MAAM,CAAC;EAC3B,CAAC;EAED;AACF;AACA;AACA;AACA;EACEC,UAAUA,CAACC,SAAwB,EAAQ;IACzCP,QAAQ,CAACM,UAAU,CAACC,SAAS,CAAC;EAChC,CAAC;EAED;AACF;AACA;AACA;AACA;AACA;EACEC,SAASA,CAACD,SAAwB,EAA8B;IAC9D,OAAOP,QAAQ,CAACQ,SAAS,CAACD,SAAS,CAAC;EACtC,CAAC;EAED;AACF;AACA;AACA;AACA;AACA;EACEE,SAASA,CAACF,SAAwB,EAAW;IAC3C,OAAOP,QAAQ,CAACS,SAAS,CAACF,SAAS,CAAC;EACtC,CAAC;EAED;AACF;AACA;AACA;AACA;EACEG,aAAaA,CAAA,EAAqB;IAChC,OAAOV,QAAQ,CAACU,aAAa,CAAC,CAAC;EACjC,CAAC;EAED;AACF;AACA;EACEC,YAAYA,CAAA,EAAS;IACnBX,QAAQ,CAACY,KAAK,CAAC,CAAC;EAClB,CAAC;EAED;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACEC,UAAUA,CAACC,MAAkB,EAAEC,MAA+B,GAAG,CAAC,CAAC,EAAgB;IACjF,oBAAOhB,KAAK,CAACiB,aAAa,CAACf,aAAa,EAAE;MACxCa,MAAM;MACNC,MAAM,EAAE;QAAE,GAAGb,cAAc;QAAE,GAAGa;MAAO;IACzC,CAAC,CAAC;EACJ,CAAC;EAED;AACF;AACA;EACEE,OAAO,EAAE;AACX,CAAC","ignoreList":[]}