auto-skeleton-react 1.0.1 → 1.0.2

package/dist/auto-skeleton-react.js

@@ -1,15 +1,15 @@
-import { jsx as p, jsxs as ue } from "react/jsx-runtime";
-import { useMemo as fe, useRef as ye, useState as Se, useLayoutEffect as de } from "react";
-function ce(e) {
+import { jsx as p, jsxs as ge } from "react/jsx-runtime";
+import { useMemo as fe, useRef as ye, useState as Se, useLayoutEffect as oe } from "react";
+function de(e) {
   var r;
-  return e ? (r = e.hasAttribute) != null && r.call(e, "data-no-skeleton") ? !0 : ce(e.parentElement) : !1;
+  return e ? (r = e.hasAttribute) != null && r.call(e, "data-no-skeleton") ? !0 : de(e.parentElement) : !1;
 }
-function he(e, r, i = 0) {
+function ce(e, r, i = 0) {
   if (i > r.maxDepth) return null;
-  if (ce(e)) {
+  if (de(e)) {
     const c = e.getBoundingClientRect(), l = window.getComputedStyle(e), o = {};
-    for (const g of e.attributes)
-      o[g.name] = g.value;
+    for (const u of e.attributes)
+      o[u.name] = u.value;
     return {
       rect: c,
       style: l,
@@ -27,10 +27,10 @@ function he(e, r, i = 0) {
   let v = t;
   if (R && n) {
     let c = 0, l = 0;
-    const o = e.parentElement, g = o ? window.getComputedStyle(o) : null;
+    const o = e.parentElement, u = o ? window.getComputedStyle(o) : null;
     let x = 0;
     if (o) {
-      const d = o.getBoundingClientRect(), H = parseFloat((g == null ? void 0 : g.paddingLeft) || "0"), L = parseFloat((g == null ? void 0 : g.paddingRight) || "0");
+      const d = o.getBoundingClientRect(), H = parseFloat((u == null ? void 0 : u.paddingLeft) || "0"), L = parseFloat((u == null ? void 0 : u.paddingRight) || "0");
       x = d.width - H - L;
     }
     const b = n.style.width, C = n.style.height;
@@ -78,7 +78,7 @@ function he(e, r, i = 0) {
   const A = [];
   for (const c of e.children)
     if (c instanceof HTMLElement) {
-      const l = he(c, r, i + 1);
+      const l = ce(c, r, i + 1);
       l && A.push(l);
     }
   return {
@@ -90,11 +90,11 @@ function he(e, r, i = 0) {
     children: A
   };
 }
-const pe = ["TABLE", "THEAD", "TBODY", "TFOOT", "TR"], ge = ["TH", "TD"];
+const he = ["TABLE", "THEAD", "TBODY", "TFOOT", "TR"], pe = ["TH", "TD"];
 function me(e) {
   var S, m;
   const { tagName: r, textContent: i, children: t, style: s, rect: y } = e;
-  if (y.width * y.height < 100 || pe.includes(r) || ge.includes(r)) return !1;
+  if (y.width * y.height < 100 || he.includes(r) || pe.includes(r)) return !1;
   if (r.match(/^(IMG|BUTTON|INPUT|TEXTAREA|SELECT|SVG)$/) || i != null && i.trim() && t.length === 0) return !0;
   if (t.length === 1 && (i != null && i.trim())) {
     const f = t[0];
@@ -121,7 +121,7 @@ function B(e, r) {
     const l = m;
     let o = 1;
     if (l === "text") {
-      const g = parseFloat(t.lineHeight), x = parseFloat(t.fontSize), b = g || x * 1.2;
+      const u = parseFloat(t.lineHeight), x = parseFloat(t.fontSize), b = u || x * 1.2;
       b > 0 && i.height > b && (o = Math.ceil(i.height / b));
     }
     return {
@@ -152,7 +152,7 @@ function B(e, r) {
       }
     };
   }
-  if (pe.includes(s)) {
+  if (he.includes(s)) {
     const l = S.map((o) => B(o, r)).filter((o) => o.type !== "skip");
     return {
       type: s.toLowerCase(),
@@ -177,7 +177,7 @@ function B(e, r) {
       }
     };
   }
-  if (ge.includes(s)) {
+  if (pe.includes(s)) {
     const l = S.map((o) => B(o, r)).filter((o) => o.type !== "skip");
     return {
       type: s.toLowerCase(),
@@ -250,8 +250,8 @@ function B(e, r) {
   ).reduce((l, o) => o[1] > l[1] ? o : l), k = v[1] > 30 ? v[0] : "text";
   let A = 1;
   if (k === "text") {
-    const l = parseFloat(t.lineHeight), o = parseFloat(t.fontSize), g = l || o * 1.2;
-    g > 0 && i.height > g && (A = Math.ceil(i.height / g));
+    const l = parseFloat(t.lineHeight), o = parseFloat(t.fontSize), u = l || o * 1.2;
+    u > 0 && i.height > u && (A = Math.ceil(i.height / u));
   }
   return {
     type: k,
@@ -290,7 +290,7 @@ function be({
   return T(e, r, i, t);
 }
 function T(e, r, i, t, s) {
-  var a, w, R, v, k, A, c, l, o, g, x, b, C, d, H, L, G, z, E, j, D, M, O, W, _, P, U, $, V, J, X, q, Y, K, Q, Z, ee, te, ie, re, se, le, ne, ae, oe;
+  var a, w, R, v, k, A, c, l, o, u, x, b, C, d, H, L, I, z, G, E, j, D, M, O, W, _, P, U, V, $, J, X, q, Y, K, Q, Z, ee, te, ie, re, se, le, ne, ae;
   if (e.type === "passthrough")
     return e.passthroughHtml ? /* @__PURE__ */ p(
       "div",
@@ -311,35 +311,35 @@ function T(e, r, i, t, s) {
           tableLayout: (R = e.preservedStyles) == null ? void 0 : R.tableLayout
         },
         children: (v = e.children) == null ? void 0 : v.map(
-          (h, u) => T(h, r, i, t, u)
+          (h, g) => T(h, r, i, t, g)
         )
       },
       s
     );
   if (e.type === "thead")
     return /* @__PURE__ */ p("thead", { children: (k = e.children) == null ? void 0 : k.map(
-      (h, u) => T(h, r, i, t, u)
+      (h, g) => T(h, r, i, t, g)
     ) }, s);
   if (e.type === "tbody")
     return /* @__PURE__ */ p("tbody", { children: (A = e.children) == null ? void 0 : A.map(
-      (h, u) => T(h, r, i, t, u)
+      (h, g) => T(h, r, i, t, g)
     ) }, s);
   if (e.type === "tr")
     return /* @__PURE__ */ p("tr", { children: (c = e.children) == null ? void 0 : c.map(
-      (h, u) => T(h, r, i, t, u)
+      (h, g) => T(h, r, i, t, g)
     ) }, s);
   if (e.type === "th" || e.type === "td") {
-    const h = e.type, u = {
+    const h = e.type, g = {
       padding: (l = e.preservedStyles) == null ? void 0 : l.padding,
       borderBottom: (o = e.preservedStyles) == null ? void 0 : o.borderBottom,
-      backgroundColor: (g = e.preservedStyles) == null ? void 0 : g.backgroundColor,
+      backgroundColor: (u = e.preservedStyles) == null ? void 0 : u.backgroundColor,
       textAlign: (x = e.preservedStyles) == null ? void 0 : x.textAlign,
       verticalAlign: (b = e.preservedStyles) == null ? void 0 : b.verticalAlign,
       width: (C = e.preservedStyles) == null ? void 0 : C.width
     };
-    return e.children && e.children.length > 0 ? /* @__PURE__ */ p(h, { style: u, children: e.children.map(
-      (N, I) => T(N, r, i, t, I)
-    ) }, s) : /* @__PURE__ */ p(h, { style: u, children: /* @__PURE__ */ p("div", { style: {
+    return e.children && e.children.length > 0 ? /* @__PURE__ */ p(h, { style: g, children: e.children.map(
+      (N, ue) => T(N, r, i, t, ue)
+    ) }, s) : /* @__PURE__ */ p(h, { style: g, children: /* @__PURE__ */ p("div", { style: {
       width: "80%",
       height: 16,
       borderRadius: 4,
@@ -348,7 +348,7 @@ function T(e, r, i, t, s) {
     } }) }, s);
   }
   if (e.type === "container" && e.children && e.children.length > 0) {
-    const h = ((d = e.preservedStyles) == null ? void 0 : d.border) || "", u = h && !h.includes("0px") && !h.startsWith("none"), F = e.display === "grid";
+    const h = ((d = e.preservedStyles) == null ? void 0 : d.border) || "", g = h && !h.includes("0px") && !h.startsWith("none");
     return /* @__PURE__ */ p(
       "div",
       {
@@ -360,19 +360,19 @@ function T(e, r, i, t, s) {
           // This avoids issues with incorrect height measurement from alt text
           boxSizing: "border-box",
           padding: (H = e.preservedStyles) == null ? void 0 : H.padding,
-          border: u ? (L = e.preservedStyles) == null ? void 0 : L.border : void 0,
+          border: g ? (L = e.preservedStyles) == null ? void 0 : L.border : void 0,
           borderRadius: e.borderRadius,
-          justifyContent: (G = e.preservedStyles) == null ? void 0 : G.justifyContent,
+          justifyContent: (I = e.preservedStyles) == null ? void 0 : I.justifyContent,
           alignItems: (z = e.preservedStyles) == null ? void 0 : z.alignItems,
-          flexDirection: (E = e.preservedStyles) == null ? void 0 : E.flexDirection,
-          minHeight: (j = e.preservedStyles) == null ? void 0 : j.minHeight,
-          // For grid: use auto columns to let children size naturally
-          // For non-grid: use measured template
-          gridTemplateColumns: F ? `repeat(${e.children.length}, 1fr)` : (D = e.preservedStyles) == null ? void 0 : D.gridTemplateColumns,
-          gridTemplateRows: (M = e.preservedStyles) == null ? void 0 : M.gridTemplateRows
+          flexDirection: (G = e.preservedStyles) == null ? void 0 : G.flexDirection,
+          minHeight: (E = e.preservedStyles) == null ? void 0 : E.minHeight,
+          // Preserve measured grid template so responsive breakpoints (e.g. md:grid-cols-*)
+          // are kept exactly during skeleton rendering.
+          gridTemplateColumns: (j = e.preservedStyles) == null ? void 0 : j.gridTemplateColumns,
+          gridTemplateRows: (D = e.preservedStyles) == null ? void 0 : D.gridTemplateRows
         },
         children: e.children.map(
-          (N, I) => T(N, r, i, t, I)
+          (F, N) => T(F, r, i, t, N)
         )
       },
       s
@@ -386,7 +386,7 @@ function T(e, r, i, t, s) {
       backgroundColor: r,
       display: "block",
       boxSizing: "border-box",
-      margin: (O = e.preservedStyles) == null ? void 0 : O.margin
+      margin: (M = e.preservedStyles) == null ? void 0 : M.margin
     };
     return t === "pulse" && (h.animation = "skeleton-pulse 2s ease-in-out infinite"), /* @__PURE__ */ p("div", { style: h, className: "skeleton-image" }, s);
   }
@@ -399,50 +399,50 @@ function T(e, r, i, t, s) {
       minHeight: e.rect.height,
       boxSizing: "border-box",
       // Preserve flex-item properties
-      margin: (W = e.preservedStyles) == null ? void 0 : W.margin,
-      flex: (_ = e.preservedStyles) == null ? void 0 : _.flex,
-      flexGrow: (P = e.preservedStyles) != null && P.flexGrow ? Number(e.preservedStyles.flexGrow) : void 0,
+      margin: (O = e.preservedStyles) == null ? void 0 : O.margin,
+      flex: (W = e.preservedStyles) == null ? void 0 : W.flex,
+      flexGrow: (_ = e.preservedStyles) != null && _.flexGrow ? Number(e.preservedStyles.flexGrow) : void 0,
       flexShrink: 0,
       // Prevent flex compression
-      flexBasis: (U = e.preservedStyles) == null ? void 0 : U.flexBasis,
-      alignSelf: ($ = e.preservedStyles) == null ? void 0 : $.alignSelf,
+      flexBasis: (P = e.preservedStyles) == null ? void 0 : P.flexBasis,
+      alignSelf: (U = e.preservedStyles) == null ? void 0 : U.alignSelf,
       justifySelf: (V = e.preservedStyles) == null ? void 0 : V.justifySelf,
       // Grid properties
-      gridColumn: (J = e.preservedStyles) == null ? void 0 : J.gridColumn,
-      gridRow: (X = e.preservedStyles) == null ? void 0 : X.gridRow,
-      gridArea: (q = e.preservedStyles) == null ? void 0 : q.gridArea,
+      gridColumn: ($ = e.preservedStyles) == null ? void 0 : $.gridColumn,
+      gridRow: (J = e.preservedStyles) == null ? void 0 : J.gridRow,
+      gridArea: (X = e.preservedStyles) == null ? void 0 : X.gridArea,
       // Visual
       borderRadius: e.borderRadius,
       backgroundColor: r,
       // Preserve inline nature
       display: "inline-block",
-      verticalAlign: ((Y = e.preservedStyles) == null ? void 0 : Y.verticalAlign) || "middle"
+      verticalAlign: ((q = e.preservedStyles) == null ? void 0 : q.verticalAlign) || "middle"
     };
     return t === "pulse" && (h.animation = "skeleton-pulse 2s ease-in-out infinite"), /* @__PURE__ */ p("div", { style: h, className: `skeleton-${e.type}` }, s);
   }
   const n = {
     // Only margin for spacing between siblings
-    margin: (K = e.preservedStyles) == null ? void 0 : K.margin,
+    margin: (Y = e.preservedStyles) == null ? void 0 : Y.margin,
     // Flex-item properties
-    flex: (Q = e.preservedStyles) == null ? void 0 : Q.flex,
-    flexGrow: (Z = e.preservedStyles) != null && Z.flexGrow ? Number(e.preservedStyles.flexGrow) : void 0,
-    flexShrink: (ee = e.preservedStyles) != null && ee.flexShrink ? Number(e.preservedStyles.flexShrink) : void 0,
-    flexBasis: (te = e.preservedStyles) == null ? void 0 : te.flexBasis,
-    alignSelf: (ie = e.preservedStyles) == null ? void 0 : ie.alignSelf,
+    flex: (K = e.preservedStyles) == null ? void 0 : K.flex,
+    flexGrow: (Q = e.preservedStyles) != null && Q.flexGrow ? Number(e.preservedStyles.flexGrow) : void 0,
+    flexShrink: (Z = e.preservedStyles) != null && Z.flexShrink ? Number(e.preservedStyles.flexShrink) : void 0,
+    flexBasis: (ee = e.preservedStyles) == null ? void 0 : ee.flexBasis,
+    alignSelf: (te = e.preservedStyles) == null ? void 0 : te.alignSelf,
     // Grid-item properties
-    gridColumn: (re = e.preservedStyles) == null ? void 0 : re.gridColumn,
-    gridRow: (se = e.preservedStyles) == null ? void 0 : se.gridRow,
-    gridArea: (le = e.preservedStyles) == null ? void 0 : le.gridArea
-  }, S = ((ne = e.preservedStyles) == null ? void 0 : ne.display) === "inline" ? "inline-block" : "block", m = {
+    gridColumn: (ie = e.preservedStyles) == null ? void 0 : ie.gridColumn,
+    gridRow: (re = e.preservedStyles) == null ? void 0 : re.gridRow,
+    gridArea: (se = e.preservedStyles) == null ? void 0 : se.gridArea
+  }, S = ((le = e.preservedStyles) == null ? void 0 : le.display) === "inline" ? "inline-block" : "block", m = {
     width: e.rect.width,
     height: e.rect.height,
     borderRadius: e.borderRadius,
     backgroundColor: r,
     display: S,
-    verticalAlign: ((ae = e.preservedStyles) == null ? void 0 : ae.verticalAlign) || "middle"
+    verticalAlign: ((ne = e.preservedStyles) == null ? void 0 : ne.verticalAlign) || "middle"
   };
   if (t === "pulse" && (m.animation = "skeleton-pulse 2s ease-in-out infinite"), e.type === "text" && e.lines && e.lines > 1) {
-    const h = parseFloat(((oe = e.preservedStyles) == null ? void 0 : oe.lineHeight) || "1.2"), u = e.rect.height / e.lines;
+    const h = parseFloat(((ae = e.preservedStyles) == null ? void 0 : ae.lineHeight) || "1.2"), g = e.rect.height / e.lines;
     return /* @__PURE__ */ p(
       "div",
       {
@@ -450,14 +450,14 @@ function T(e, r, i, t, s) {
           ...n,
           display: "flex",
           flexDirection: "column",
-          gap: h > u ? h - u : 4
+          gap: h > g ? h - g : 4
         },
         children: Array.from({ length: e.lines }).map((F, N) => /* @__PURE__ */ p(
           "div",
           {
             style: {
               ...m,
-              height: u,
+              height: g,
               width: N === e.lines - 1 ? e.rect.width * 0.7 : e.rect.width
               // Last line shorter
             },
@@ -492,13 +492,13 @@ function ke({
     () => ({ ...ve, ...i }),
     [i]
   ), s = ye(null), [y, n] = Se(null);
-  return de(() => {
+  return oe(() => {
     if (!e || !s.current)
       return;
     const f = requestAnimationFrame(() => {
       if (s.current)
         try {
-          const a = he(s.current, t);
+          const a = ce(s.current, t);
           if (a) {
             const w = B(a, t);
             n(w);
@@ -508,13 +508,13 @@ function ke({
         }
     });
     return () => cancelAnimationFrame(f);
-  }, [e, t]), de(() => {
+  }, [e, t]), oe(() => {
     if (e) return;
     const f = setTimeout(() => {
       n(null);
     }, 300);
     return () => clearTimeout(f);
-  }, [e]), /* @__PURE__ */ ue("div", { style: { position: "relative" }, children: [
+  }, [e]), /* @__PURE__ */ ge("div", { style: { position: "relative" }, children: [
     /* @__PURE__ */ p("style", { children: `
         @keyframes skeleton-pulse {
           0%, 100% { opacity: 1; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "auto-skeleton-react",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Auto-generate skeleton loading screens from your existing React DOM structure",
   "type": "module",
   "main": "dist/auto-skeleton-react.js",