auto-skeleton-react 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 auto-skeleton-react contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,130 @@
+# auto-skeleton-react
+
+Auto-generate skeleton loading screens from your existing React DOM structure. Zero manual skeleton creation for 70-80% of use cases.
+
+## Installation
+
+```bash
+npm install auto-skeleton-react
+```
+
+## Usage
+
+```tsx
+import { AutoSkeleton } from 'auto-skeleton-react';
+
+function MyComponent() {
+  const [loading, setLoading] = useState(true);
+
+  return (
+    <AutoSkeleton loading={loading}>
+      <UserProfile />
+    </AutoSkeleton>
+  );
+}
+```
+
+## How It Works
+
+1. When `loading={true}`, the component renders children invisibly
+2. DOM is traversed and measured (dimensions, styles, attributes)
+3. Heuristics classify elements as text, image, icon, button, input, or container
+4. Skeleton blocks are rendered matching the original layout
+5. When `loading={false}`, the real content fades in
+
+## Features
+
+- **Zero manual work** — wraps any React component, no separate skeleton needed
+- **Layout preservation** — maintains flexbox, grid, margins, padding, gaps
+- **Multi-line text** — auto-detects line count from element height
+- **Table support** — preserves table structure (thead, tbody, tr, td)
+- **Opt-out mechanism** — `data-no-skeleton` or `.no-skeleton` keeps elements visible during loading
+- **Smooth transitions** — crossfade between skeleton and content
+- **Configurable** — animation, colors, border radius, depth limits
+
+## Configuration
+
+```tsx
+<AutoSkeleton
+  loading={loading}
+  config={{
+    animation: 'pulse',      // 'pulse' | 'shimmer' | 'none'
+    baseColor: '#e0e0e0',
+    borderRadius: 4,
+    minTextHeight: 12,
+    maxDepth: 10,
+  }}
+>
+  <MyComponent />
+</AutoSkeleton>
+```
+
+## Opt-Out (No Skeleton)
+
+Keep specific elements visible during loading:
+
+```tsx
+{/* Using data attribute */}
+<div data-no-skeleton>
+  <span>Always visible during loading</span>
+</div>
+
+{/* Using class name */}
+<button className="no-skeleton">Cancel</button>
+```
+
+## Escape Hatches
+
+```tsx
+{/* Force a specific skeleton type */}
+<img data-skeleton-role="image" />
+<span data-skeleton-role="text" />
+
+{/* Ignore specific elements */}
+<div data-skeleton-ignore>
+  <SensitiveComponent />
+</div>
+```
+
+## Architecture
+
+- **Leaf-only replacement** — preserves container structure, replaces only visual leaves
+- **Wrapper + content pattern** — wrapper keeps spacing, inner div gets skeleton styling
+- **Score-based inference** — extensible heuristics avoid brittle if/else chains
+- **requestAnimationFrame** — ensures DOM is painted before measurement
+
+## Project Structure
+
+```
+src/
+├── AutoSkeleton.tsx       # Main component
+├── dom-traverser.ts       # DOM measurement logic
+├── role-inferencer.ts     # Heuristic-based classification
+├── skeleton-renderer.tsx  # Skeleton block renderer
+├── types.ts               # TypeScript interfaces
+└── index.ts               # Public API exports
+```
+
+## Known Limitations
+
+- Client-side measurement only (expects hydration flash in SSR)
+- Heuristics may misclassify custom components
+- Not suitable for virtualized lists (>500 nodes)
+- Performance cost on every loading transition
+- Cannot predict dynamic text length
+
+## When to Use
+
+- Standard CRUD forms, dashboards, profile pages
+- Prototyping and MVPs
+- Reducing 70-80% of manual skeleton work
+
+## When Not to Use
+
+- Highly custom, pixel-perfect designs
+- Virtualized tables or infinite scrollers
+- Performance-critical views with frequent loading
+
+## License
+
+MIT

package/dist/AutoSkeleton.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { SkeletonConfig } from './types';
+interface AutoSkeletonProps {
+    loading: boolean;
+    children: React.ReactNode;
+    config?: Partial<SkeletonConfig>;
+}
+export declare function AutoSkeleton({ loading, children, config: userConfig, }: AutoSkeletonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/auto-skeleton-react.js

@@ -0,0 +1,578 @@
+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) {
+  var r;
+  return e ? (r = e.hasAttribute) != null && r.call(e, "data-no-skeleton") ? !0 : ce(e.parentElement) : !1;
+}
+function he(e, r, i = 0) {
+  if (i > r.maxDepth) return null;
+  if (ce(e)) {
+    const c = e.getBoundingClientRect(), l = window.getComputedStyle(e), o = {};
+    for (const g of e.attributes)
+      o[g.name] = g.value;
+    return {
+      rect: c,
+      style: l,
+      tagName: e.tagName,
+      textContent: e.textContent,
+      attributes: o,
+      children: [],
+      passthrough: !0,
+      passthroughHtml: e.outerHTML
+    };
+  }
+  for (const c of r.ignoreSelectors)
+    if (e.matches(c)) return null;
+  const t = e.getBoundingClientRect(), s = window.getComputedStyle(e), y = e.tagName === "IMG", n = y ? e : null, S = n == null ? void 0 : n.getAttribute("src"), m = (n == null ? void 0 : n.src) || "", f = (n == null ? void 0 : n.naturalWidth) === 0 || (n == null ? void 0 : n.naturalHeight) === 0, a = !S || S === "", w = m === window.location.href || m.endsWith("/"), R = y && (a || w || f);
+  let v = t;
+  if (R && n) {
+    let c = 0, l = 0;
+    const o = e.parentElement, g = 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");
+      x = d.width - H - L;
+    }
+    const b = n.style.width, C = n.style.height;
+    if (C && !C.includes("%")) {
+      const d = parseFloat(C);
+      !isNaN(d) && d > 0 && (l = d);
+    }
+    if (l === 0) {
+      const d = parseFloat(s.height);
+      !isNaN(d) && d > 50 && (l = d);
+    }
+    if (b)
+      if (b.includes("%")) {
+        const d = parseFloat(b) / 100;
+        !isNaN(d) && x > 0 && (c = x * d);
+      } else {
+        const d = parseFloat(b);
+        !isNaN(d) && d > 0 && (c = d);
+      }
+    if (c === 0 && x > 0 && (c = x), c === 0) {
+      const d = n.getAttribute("width");
+      d && (c = parseFloat(d));
+    }
+    if (l === 0) {
+      const d = n.getAttribute("height");
+      d && (l = parseFloat(d));
+    }
+    c > 0 && l > 0 && (v = {
+      x: t.x,
+      y: t.y,
+      width: c,
+      height: l,
+      top: t.top,
+      right: t.right,
+      bottom: t.bottom,
+      left: t.left,
+      toJSON: t.toJSON.bind(t)
+    });
+  }
+  if (v.width === 0 || v.height === 0 || s.display === "none" || s.visibility === "hidden")
+    return null;
+  const k = {};
+  for (const c of e.attributes)
+    k[c.name] = c.value;
+  const A = [];
+  for (const c of e.children)
+    if (c instanceof HTMLElement) {
+      const l = he(c, r, i + 1);
+      l && A.push(l);
+    }
+  return {
+    rect: v,
+    style: s,
+    tagName: e.tagName,
+    textContent: e.textContent,
+    attributes: k,
+    children: A
+  };
+}
+const pe = ["TABLE", "THEAD", "TBODY", "TFOOT", "TR"], ge = ["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 (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];
+    if ((S = f.textContent) != null && S.trim() && f.children.length === 0) return !0;
+  }
+  return t.length > 1 || (m = s.display) != null && m.match(/flex|grid/) ? !1 : t.length === 0;
+}
+function B(e, r) {
+  var c;
+  if (e.passthrough)
+    return {
+      type: "passthrough",
+      rect: {
+        x: e.rect.x,
+        y: e.rect.y,
+        width: e.rect.width,
+        height: e.rect.height
+      },
+      passthrough: !0,
+      passthroughHtml: e.passthroughHtml
+    };
+  const { rect: i, style: t, tagName: s, textContent: y, attributes: n, children: S } = e, m = n["data-skeleton-role"];
+  if (m) {
+    const l = m;
+    let o = 1;
+    if (l === "text") {
+      const g = parseFloat(t.lineHeight), x = parseFloat(t.fontSize), b = g || x * 1.2;
+      b > 0 && i.height > b && (o = Math.ceil(i.height / b));
+    }
+    return {
+      type: l,
+      rect: {
+        x: i.x,
+        y: i.y,
+        width: i.width,
+        height: i.height
+      },
+      borderRadius: parseFloat(t.borderRadius) || r.borderRadius,
+      lines: l === "text" ? o : void 0,
+      preservedStyles: {
+        display: t.display,
+        margin: t.margin,
+        padding: t.padding,
+        lineHeight: t.lineHeight,
+        flex: t.flex,
+        flexGrow: t.flexGrow,
+        flexShrink: t.flexShrink,
+        flexBasis: t.flexBasis,
+        alignSelf: t.alignSelf,
+        justifySelf: t.justifySelf,
+        gridColumn: t.gridColumn,
+        gridRow: t.gridRow,
+        gridArea: t.gridArea,
+        verticalAlign: t.verticalAlign
+      }
+    };
+  }
+  if (pe.includes(s)) {
+    const l = S.map((o) => B(o, r)).filter((o) => o.type !== "skip");
+    return {
+      type: s.toLowerCase(),
+      tagName: s,
+      rect: {
+        x: i.x,
+        y: i.y,
+        width: i.width,
+        height: i.height
+      },
+      children: l,
+      preservedStyles: {
+        display: t.display,
+        margin: t.margin,
+        padding: t.padding,
+        border: t.border,
+        borderBottom: t.borderBottom,
+        backgroundColor: t.backgroundColor,
+        width: t.width,
+        borderCollapse: t.borderCollapse,
+        tableLayout: t.tableLayout
+      }
+    };
+  }
+  if (ge.includes(s)) {
+    const l = S.map((o) => B(o, r)).filter((o) => o.type !== "skip");
+    return {
+      type: s.toLowerCase(),
+      tagName: s,
+      rect: {
+        x: i.x,
+        y: i.y,
+        width: i.width,
+        height: i.height
+      },
+      children: l,
+      preservedStyles: {
+        display: t.display,
+        margin: t.margin,
+        padding: t.padding,
+        border: t.border,
+        borderBottom: t.borderBottom,
+        backgroundColor: t.backgroundColor,
+        textAlign: t.textAlign,
+        verticalAlign: t.verticalAlign,
+        width: t.width
+      }
+    };
+  }
+  if (!me(e)) {
+    const l = S.map((o) => B(o, r)).filter((o) => o.type !== "skip");
+    return {
+      type: "container",
+      rect: {
+        x: i.x,
+        y: i.y,
+        width: i.width,
+        height: i.height
+      },
+      display: t.display,
+      gap: t.gap,
+      borderRadius: parseFloat(t.borderRadius) || 0,
+      children: l,
+      preservedStyles: {
+        display: t.display,
+        margin: t.margin,
+        padding: t.padding,
+        border: t.border,
+        boxSizing: t.boxSizing,
+        justifyContent: t.justifyContent,
+        alignItems: t.alignItems,
+        flexDirection: t.flexDirection,
+        minHeight: t.minHeight,
+        gridTemplateColumns: t.gridTemplateColumns,
+        gridTemplateRows: t.gridTemplateRows
+      }
+    };
+  }
+  const f = i.width * i.height, a = {
+    text: 0,
+    image: 0,
+    icon: 0,
+    button: 0,
+    input: 0,
+    container: 0,
+    skip: 0
+  };
+  y && y.trim().length > 0 && (a.text += 40), i.height < r.minTextHeight * 3 && i.height >= r.minTextHeight && (a.text += 30), s.match(/^(P|SPAN|H[1-6]|LABEL|A|DIV)$/) && (a.text += 20);
+  const w = parseFloat(t.fontSize);
+  w > 0 && w < 100 && (a.text += 20), s === "IMG" && (a.image += 100), n.role === "img" && (a.image += 60), t.backgroundImage !== "none" && (a.image += 50), f > r.minImageSize ** 2 && (a.image += 30), s === "SVG" && (a.icon += 70);
+  const R = i.width / i.height;
+  f < r.iconMaxSize ** 2 && R > 0.8 && R < 1.2 && (a.icon += 40), s === "BUTTON" && (a.button += 80), n.role === "button" && (a.button += 60), t.cursor === "pointer" && f < 2e4 && (a.button += 30), s.match(/^(INPUT|TEXTAREA|SELECT)$/) && (a.input += 80), n.contenteditable && (a.input += 50), S.length > 1 && (a.container += 50), (c = t.display) != null && c.match(/flex|grid/) && (a.container += 30), f < 100 && (a.skip += 50), (i.height < 5 || i.width < 5) && (a.skip += 40);
+  const v = Object.entries(a).filter(
+    ([l]) => l !== "container"
+  ).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));
+  }
+  return {
+    type: k,
+    rect: {
+      x: i.x,
+      y: i.y,
+      width: i.width,
+      height: i.height
+    },
+    borderRadius: parseFloat(t.borderRadius) || r.borderRadius,
+    lines: k === "text" ? A : void 0,
+    preservedStyles: {
+      display: t.display,
+      margin: t.margin,
+      padding: t.padding,
+      lineHeight: t.lineHeight,
+      flex: t.flex,
+      flexGrow: t.flexGrow,
+      flexShrink: t.flexShrink,
+      flexBasis: t.flexBasis,
+      alignSelf: t.alignSelf,
+      justifySelf: t.justifySelf,
+      gridColumn: t.gridColumn,
+      gridRow: t.gridRow,
+      gridArea: t.gridArea,
+      verticalAlign: t.verticalAlign
+    }
+  };
+}
+function be({
+  blueprint: e,
+  baseColor: r,
+  highlightColor: i,
+  animation: t
+}) {
+  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;
+  if (e.type === "passthrough")
+    return e.passthroughHtml ? /* @__PURE__ */ p(
+      "div",
+      {
+        style: { display: "contents" },
+        dangerouslySetInnerHTML: { __html: e.passthroughHtml }
+      },
+      s
+    ) : null;
+  if (e.type === "skip") return null;
+  if (e.type === "table")
+    return /* @__PURE__ */ p(
+      "table",
+      {
+        style: {
+          width: ((a = e.preservedStyles) == null ? void 0 : a.width) || "100%",
+          borderCollapse: (w = e.preservedStyles) == null ? void 0 : w.borderCollapse,
+          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)
+        )
+      },
+      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)
+    ) }, 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)
+    ) }, 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)
+    ) }, s);
+  if (e.type === "th" || e.type === "td") {
+    const h = e.type, u = {
+      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,
+      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: {
+      width: "80%",
+      height: 16,
+      borderRadius: 4,
+      backgroundColor: r,
+      animation: t === "pulse" ? "skeleton-pulse 2s ease-in-out infinite" : void 0
+    } }) }, 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";
+    return /* @__PURE__ */ p(
+      "div",
+      {
+        style: {
+          display: e.display || "block",
+          gap: e.gap,
+          width: e.rect.width,
+          // Don't set fixed height - let container size naturally from children
+          // 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,
+          borderRadius: e.borderRadius,
+          justifyContent: (G = e.preservedStyles) == null ? void 0 : G.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
+        },
+        children: e.children.map(
+          (N, I) => T(N, r, i, t, I)
+        )
+      },
+      s
+    );
+  }
+  if (e.type === "image") {
+    const h = {
+      width: e.rect.width,
+      height: e.rect.height,
+      borderRadius: e.borderRadius,
+      backgroundColor: r,
+      display: "block",
+      boxSizing: "border-box",
+      margin: (O = e.preservedStyles) == null ? void 0 : O.margin
+    };
+    return t === "pulse" && (h.animation = "skeleton-pulse 2s ease-in-out infinite"), /* @__PURE__ */ p("div", { style: h, className: "skeleton-image" }, s);
+  }
+  if (e.type === "button" || e.type === "input") {
+    const h = {
+      // Lock exact dimensions
+      width: e.rect.width,
+      height: e.rect.height,
+      minWidth: e.rect.width,
+      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,
+      flexShrink: 0,
+      // Prevent flex compression
+      flexBasis: (U = e.preservedStyles) == null ? void 0 : U.flexBasis,
+      alignSelf: ($ = e.preservedStyles) == null ? void 0 : $.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,
+      // Visual
+      borderRadius: e.borderRadius,
+      backgroundColor: r,
+      // Preserve inline nature
+      display: "inline-block",
+      verticalAlign: ((Y = e.preservedStyles) == null ? void 0 : Y.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,
+    // 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,
+    // 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 = {
+    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"
+  };
+  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;
+    return /* @__PURE__ */ p(
+      "div",
+      {
+        style: {
+          ...n,
+          display: "flex",
+          flexDirection: "column",
+          gap: h > u ? h - u : 4
+        },
+        children: Array.from({ length: e.lines }).map((F, N) => /* @__PURE__ */ p(
+          "div",
+          {
+            style: {
+              ...m,
+              height: u,
+              width: N === e.lines - 1 ? e.rect.width * 0.7 : e.rect.width
+              // Last line shorter
+            },
+            className: `skeleton-${e.type}`
+          },
+          N
+        ))
+      },
+      s
+    );
+  }
+  const f = `skeleton-${e.type}`;
+  return /* @__PURE__ */ p("div", { style: n, children: /* @__PURE__ */ p("div", { style: m, className: f }) }, s);
+}
+const ve = {
+  animation: "pulse",
+  baseColor: "#e0e0e0",
+  highlightColor: "#f5f5f5",
+  borderRadius: 4,
+  minTextHeight: 12,
+  minImageSize: 32,
+  iconMaxSize: 48,
+  maxDepth: 10,
+  ignoreSelectors: [".no-skeleton", "[data-skeleton-ignore]"]
+};
+function ke({
+  loading: e,
+  children: r,
+  config: i
+}) {
+  const t = fe(
+    () => ({ ...ve, ...i }),
+    [i]
+  ), s = ye(null), [y, n] = Se(null);
+  return de(() => {
+    if (!e || !s.current)
+      return;
+    const f = requestAnimationFrame(() => {
+      if (s.current)
+        try {
+          const a = he(s.current, t);
+          if (a) {
+            const w = B(a, t);
+            n(w);
+          }
+        } catch (a) {
+          console.error("AutoSkeleton measurement failed:", a), n(null);
+        }
+    });
+    return () => cancelAnimationFrame(f);
+  }, [e, t]), de(() => {
+    if (e) return;
+    const f = setTimeout(() => {
+      n(null);
+    }, 300);
+    return () => clearTimeout(f);
+  }, [e]), /* @__PURE__ */ ue("div", { style: { position: "relative" }, children: [
+    /* @__PURE__ */ p("style", { children: `
+        @keyframes skeleton-pulse {
+          0%, 100% { opacity: 1; }
+          50% { opacity: 0.5; }
+        }
+        .auto-skeleton-fade {
+          transition: opacity 0.3s ease-out;
+        }
+      ` }),
+    /* @__PURE__ */ p(
+      "div",
+      {
+        className: "auto-skeleton-fade",
+        style: { opacity: e && y !== null ? 0 : 1 },
+        children: r
+      }
+    ),
+    (e || y !== null) && y && /* @__PURE__ */ p(
+      "div",
+      {
+        className: "auto-skeleton-fade",
+        style: {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          opacity: e ? 1 : 0,
+          pointerEvents: e ? "auto" : "none"
+        },
+        children: /* @__PURE__ */ p(
+          be,
+          {
+            blueprint: y,
+            baseColor: t.baseColor,
+            highlightColor: t.highlightColor,
+            animation: t.animation
+          }
+        )
+      }
+    ),
+    e && /* @__PURE__ */ p(
+      "div",
+      {
+        ref: s,
+        style: {
+          opacity: 0,
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          pointerEvents: "none",
+          zIndex: -1
+        },
+        children: r
+      }
+    )
+  ] });
+}
+export {
+  ke as AutoSkeleton
+};

package/dist/dom-traverser.d.ts

@@ -0,0 +1,2 @@
+import type { ElementMeasurement, SkeletonConfig } from './types';
+export declare function traverseAndMeasure(element: HTMLElement, config: SkeletonConfig, depth?: number): ElementMeasurement | null;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { AutoSkeleton } from './AutoSkeleton';
+export type { SkeletonConfig, SkeletonNode } from './types';

package/dist/role-inferencer.d.ts

@@ -0,0 +1,2 @@
+import type { ElementMeasurement, SkeletonConfig, SkeletonNode } from './types';
+export declare function inferSkeletonNode(measurement: ElementMeasurement, config: SkeletonConfig): SkeletonNode;

package/dist/skeleton-renderer.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { SkeletonNode } from './types';
+interface SkeletonRendererProps {
+    blueprint: SkeletonNode;
+    baseColor: string;
+    highlightColor: string;
+    animation: 'pulse' | 'shimmer' | 'none';
+}
+export declare function SkeletonRenderer({ blueprint, baseColor, highlightColor, animation, }: SkeletonRendererProps): React.ReactNode;
+export {};

package/dist/types.d.ts

@@ -0,0 +1,68 @@
+export interface SkeletonConfig {
+    animation: 'pulse' | 'shimmer' | 'none';
+    baseColor: string;
+    highlightColor: string;
+    borderRadius: number;
+    minTextHeight: number;
+    minImageSize: number;
+    iconMaxSize: number;
+    maxDepth: number;
+    ignoreSelectors: string[];
+}
+export interface ElementMeasurement {
+    rect: DOMRect;
+    style: CSSStyleDeclaration;
+    tagName: string;
+    textContent: string | null;
+    attributes: Record<string, string>;
+    children: ElementMeasurement[];
+    passthrough?: boolean;
+    passthroughHtml?: string;
+}
+export interface SkeletonNode {
+    type: 'text' | 'image' | 'icon' | 'button' | 'input' | 'container' | 'skip' | 'passthrough' | 'table' | 'thead' | 'tbody' | 'tr' | 'th' | 'td';
+    rect: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    borderRadius?: number;
+    display?: string;
+    gap?: string;
+    children?: SkeletonNode[];
+    passthrough?: boolean;
+    passthroughHtml?: string;
+    preservedStyles?: {
+        display: string;
+        margin: string;
+        padding: string;
+        border?: string;
+        boxSizing?: string;
+        lineHeight?: string;
+        flex?: string;
+        flexGrow?: string;
+        flexShrink?: string;
+        flexBasis?: string;
+        alignSelf?: string;
+        justifySelf?: string;
+        justifyContent?: string;
+        alignItems?: string;
+        flexDirection?: string;
+        minHeight?: string;
+        gridTemplateColumns?: string;
+        gridTemplateRows?: string;
+        gridColumn?: string;
+        gridRow?: string;
+        gridArea?: string;
+        verticalAlign?: string;
+        width?: string;
+        textAlign?: string;
+        backgroundColor?: string;
+        borderBottom?: string;
+        borderCollapse?: string;
+        tableLayout?: string;
+    };
+    lines?: number;
+    tagName?: string;
+}

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "auto-skeleton-react",
+  "version": "1.0.0",
+  "description": "Auto-generate skeleton loading screens from your existing React DOM structure",
+  "type": "module",
+  "main": "dist/auto-skeleton-react.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/auto-skeleton-react.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build && tsc -p tsconfig.lib.json",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "react",
+    "skeleton",
+    "loading",
+    "auto-skeleton",
+    "placeholder",
+    "skeleton-screen",
+    "loading-state"
+  ],
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^25.2.3",
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.8"
+  }
+}