@auto-skeleton/react 0.0.2

package/dist/index.cjs

@@ -0,0 +1,189 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key2 of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key2) && key2 !== except)
+        __defProp(to, key2, { get: () => from[key2], enumerable: !(desc = __getOwnPropDesc(from, key2)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  AutoSkeleton: () => AutoSkeleton,
+  useAutoSkeleton: () => useAutoSkeleton
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/SkeletonOverlay.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function SkeletonOverlay({
+  bones,
+  animation,
+  debug
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "as-overlay", "aria-hidden": "true", children: bones.map((b, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "span",
+    {
+      className: `as-bone as-${animation}${debug ? " as-debug" : ""}`,
+      style: {
+        left: b.x,
+        top: b.y,
+        width: b.width,
+        height: b.height,
+        borderRadius: b.kind === "circle" ? "50%" : `${b.radius}px`
+      }
+    },
+    `${b.x}-${b.y}-${i}`
+  )) });
+}
+
+// src/useAutoSkeleton.ts
+var import_react = require("react");
+var import_core = require("@auto-skeleton/core");
+
+// src/cache.ts
+var memory = /* @__PURE__ */ new Map();
+function key(id) {
+  const bp = typeof window !== "undefined" ? window.innerWidth : 0;
+  return `${id}::${bp}`;
+}
+function getCachedBones(id) {
+  const k = key(id);
+  if (memory.has(k)) return memory.get(k) ?? null;
+  if (typeof window === "undefined") return null;
+  const raw = window.sessionStorage.getItem(`auto-skeleton:${k}`);
+  if (!raw) return null;
+  try {
+    const parsed = JSON.parse(raw);
+    if (!Array.isArray(parsed)) return null;
+    memory.set(k, parsed);
+    return parsed;
+  } catch {
+    return null;
+  }
+}
+function setCachedBones(id, bones, enabled = true) {
+  if (!enabled) return;
+  const k = key(id);
+  memory.set(k, bones);
+  if (typeof window === "undefined") return;
+  window.sessionStorage.setItem(`auto-skeleton:${k}`, JSON.stringify(bones));
+}
+function clearCachedBones(id) {
+  const k = key(id);
+  memory.delete(k);
+  if (typeof window === "undefined") return;
+  window.sessionStorage.removeItem(`auto-skeleton:${k}`);
+}
+
+// src/useAutoSkeleton.ts
+function useAutoSkeleton({
+  id,
+  loading,
+  options
+}) {
+  const rootRef = (0, import_react.useRef)(null);
+  const cacheEnabled = options?.cache ?? true;
+  const [bones, setBones] = (0, import_react.useState)(() => cacheEnabled ? getCachedBones(id) : null);
+  const scanTimerRef = (0, import_react.useRef)(null);
+  const runScan = (0, import_react.useCallback)(() => {
+    if (!rootRef.current) return;
+    const next = (0, import_core.scanBones)(rootRef.current, {
+      ignoreSelectors: options?.ignoreSelectors,
+      minSize: options?.minSize
+    });
+    setBones(next);
+    setCachedBones(id, next, cacheEnabled);
+  }, [id, options?.ignoreSelectors, options?.minSize, cacheEnabled]);
+  (0, import_react.useEffect)(() => {
+    if (!rootRef.current) return;
+    if (loading) return;
+    runScan();
+  }, [loading, runScan]);
+  (0, import_react.useEffect)(() => {
+    if (!cacheEnabled) clearCachedBones(id);
+  }, [id, cacheEnabled]);
+  (0, import_react.useEffect)(() => {
+    if (!rootRef.current) return;
+    if (loading) return;
+    if ((options?.watch ?? true) === false) return;
+    const debounceMs = options?.watchDebounceMs ?? 120;
+    const rootEl = rootRef.current;
+    const schedule = () => {
+      if (scanTimerRef.current !== null) window.clearTimeout(scanTimerRef.current);
+      scanTimerRef.current = window.setTimeout(() => {
+        runScan();
+      }, debounceMs);
+    };
+    if (typeof ResizeObserver === "undefined") {
+      window.addEventListener("resize", schedule);
+      return () => {
+        if (scanTimerRef.current !== null) {
+          window.clearTimeout(scanTimerRef.current);
+          scanTimerRef.current = null;
+        }
+        window.removeEventListener("resize", schedule);
+      };
+    }
+    const resizeObserver = new ResizeObserver(() => schedule());
+    const mutationObserver = new MutationObserver(() => schedule());
+    resizeObserver.observe(rootEl);
+    mutationObserver.observe(rootEl, {
+      childList: true,
+      subtree: true,
+      characterData: true,
+      attributes: true
+    });
+    window.addEventListener("resize", schedule);
+    return () => {
+      if (scanTimerRef.current !== null) {
+        window.clearTimeout(scanTimerRef.current);
+        scanTimerRef.current = null;
+      }
+      window.removeEventListener("resize", schedule);
+      mutationObserver.disconnect();
+      resizeObserver.disconnect();
+    };
+  }, [loading, runScan, options?.watch, options?.watchDebounceMs]);
+  const animation = options?.animation ?? "wave";
+  const debug = options?.debug ?? false;
+  const shouldShow = loading && !!bones && bones.length > 0;
+  return {
+    rootRef,
+    bones,
+    animation,
+    debug,
+    shouldShow
+  };
+}
+
+// src/AutoSkeleton.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function AutoSkeleton({ id, loading, children, className, options }) {
+  const { rootRef, bones, animation, debug, shouldShow } = useAutoSkeleton({
+    id,
+    loading,
+    options
+  });
+  const classes = ["as-root", className, shouldShow ? "as-loading" : ""].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { ref: rootRef, className: classes, children: [
+    children,
+    shouldShow && bones ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SkeletonOverlay, { bones, animation, debug }) : null
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AutoSkeleton,
+  useAutoSkeleton
+});

package/dist/index.css

@@ -0,0 +1,62 @@
+/* src/styles.css */
+:root {
+  --as-base: #e4e4e7;
+  --as-highlight: rgba(255, 255, 255, 0.9);
+  --as-debug: rgba(255, 99, 71, 0.45);
+}
+.as-root {
+  position: relative;
+}
+.as-root.as-loading > :not(.as-overlay) {
+  visibility: hidden;
+}
+.as-overlay {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 10;
+}
+.as-bone {
+  position: absolute;
+  background: var(--as-base);
+  overflow: hidden;
+}
+.as-bone.as-wave::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  transform: translateX(-100%);
+  background:
+    linear-gradient(
+      90deg,
+      transparent 0%,
+      var(--as-highlight) 45%,
+      transparent 100%);
+  animation: as-wave 1.2s infinite;
+}
+.as-bone.as-pulse {
+  animation: as-pulse 1.1s ease-in-out infinite;
+}
+.as-bone.as-debug {
+  outline: 1px dashed var(--as-debug);
+  outline-offset: -1px;
+}
+@keyframes as-wave {
+  100% {
+    transform: translateX(100%);
+  }
+}
+@keyframes as-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.55;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .as-bone.as-wave::after,
+  .as-bone.as-pulse {
+    animation: none;
+  }
+}

package/dist/index.d.mts

@@ -0,0 +1,38 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { ScanOptions, Bone } from '@auto-skeleton/core';
+
+type AutoSkeletonOptions = ScanOptions & {
+    animation?: "wave" | "pulse" | "none";
+    debug?: boolean;
+    /** Re-scan when layout/content mutates while not loading. */
+    watch?: boolean;
+    /** Debounce for watcher-driven re-scan. */
+    watchDebounceMs?: number;
+    /** Disable sessionStorage caching if needed. */
+    cache?: boolean;
+};
+type AutoSkeletonProps = {
+    id: string;
+    loading: boolean;
+    children: ReactNode;
+    className?: string;
+    options?: AutoSkeletonOptions;
+};
+
+declare function AutoSkeleton({ id, loading, children, className, options }: AutoSkeletonProps): react_jsx_runtime.JSX.Element;
+
+declare function useAutoSkeleton({ id, loading, options }: {
+    id: string;
+    loading: boolean;
+    options?: AutoSkeletonOptions;
+}): {
+    rootRef: react.RefObject<HTMLDivElement>;
+    bones: Bone[] | null;
+    animation: "wave" | "pulse" | "none";
+    debug: boolean;
+    shouldShow: boolean;
+};
+
+export { AutoSkeleton, type AutoSkeletonOptions, type AutoSkeletonProps, useAutoSkeleton };

package/dist/index.d.ts

@@ -0,0 +1,38 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { ScanOptions, Bone } from '@auto-skeleton/core';
+
+type AutoSkeletonOptions = ScanOptions & {
+    animation?: "wave" | "pulse" | "none";
+    debug?: boolean;
+    /** Re-scan when layout/content mutates while not loading. */
+    watch?: boolean;
+    /** Debounce for watcher-driven re-scan. */
+    watchDebounceMs?: number;
+    /** Disable sessionStorage caching if needed. */
+    cache?: boolean;
+};
+type AutoSkeletonProps = {
+    id: string;
+    loading: boolean;
+    children: ReactNode;
+    className?: string;
+    options?: AutoSkeletonOptions;
+};
+
+declare function AutoSkeleton({ id, loading, children, className, options }: AutoSkeletonProps): react_jsx_runtime.JSX.Element;
+
+declare function useAutoSkeleton({ id, loading, options }: {
+    id: string;
+    loading: boolean;
+    options?: AutoSkeletonOptions;
+}): {
+    rootRef: react.RefObject<HTMLDivElement>;
+    bones: Bone[] | null;
+    animation: "wave" | "pulse" | "none";
+    debug: boolean;
+    shouldShow: boolean;
+};
+
+export { AutoSkeleton, type AutoSkeletonOptions, type AutoSkeletonProps, useAutoSkeleton };

package/dist/index.js

@@ -0,0 +1,161 @@
+// src/SkeletonOverlay.tsx
+import { jsx } from "react/jsx-runtime";
+function SkeletonOverlay({
+  bones,
+  animation,
+  debug
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "as-overlay", "aria-hidden": "true", children: bones.map((b, i) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: `as-bone as-${animation}${debug ? " as-debug" : ""}`,
+      style: {
+        left: b.x,
+        top: b.y,
+        width: b.width,
+        height: b.height,
+        borderRadius: b.kind === "circle" ? "50%" : `${b.radius}px`
+      }
+    },
+    `${b.x}-${b.y}-${i}`
+  )) });
+}
+
+// src/useAutoSkeleton.ts
+import { useCallback, useEffect, useRef, useState } from "react";
+import { scanBones } from "@auto-skeleton/core";
+
+// src/cache.ts
+var memory = /* @__PURE__ */ new Map();
+function key(id) {
+  const bp = typeof window !== "undefined" ? window.innerWidth : 0;
+  return `${id}::${bp}`;
+}
+function getCachedBones(id) {
+  const k = key(id);
+  if (memory.has(k)) return memory.get(k) ?? null;
+  if (typeof window === "undefined") return null;
+  const raw = window.sessionStorage.getItem(`auto-skeleton:${k}`);
+  if (!raw) return null;
+  try {
+    const parsed = JSON.parse(raw);
+    if (!Array.isArray(parsed)) return null;
+    memory.set(k, parsed);
+    return parsed;
+  } catch {
+    return null;
+  }
+}
+function setCachedBones(id, bones, enabled = true) {
+  if (!enabled) return;
+  const k = key(id);
+  memory.set(k, bones);
+  if (typeof window === "undefined") return;
+  window.sessionStorage.setItem(`auto-skeleton:${k}`, JSON.stringify(bones));
+}
+function clearCachedBones(id) {
+  const k = key(id);
+  memory.delete(k);
+  if (typeof window === "undefined") return;
+  window.sessionStorage.removeItem(`auto-skeleton:${k}`);
+}
+
+// src/useAutoSkeleton.ts
+function useAutoSkeleton({
+  id,
+  loading,
+  options
+}) {
+  const rootRef = useRef(null);
+  const cacheEnabled = options?.cache ?? true;
+  const [bones, setBones] = useState(() => cacheEnabled ? getCachedBones(id) : null);
+  const scanTimerRef = useRef(null);
+  const runScan = useCallback(() => {
+    if (!rootRef.current) return;
+    const next = scanBones(rootRef.current, {
+      ignoreSelectors: options?.ignoreSelectors,
+      minSize: options?.minSize
+    });
+    setBones(next);
+    setCachedBones(id, next, cacheEnabled);
+  }, [id, options?.ignoreSelectors, options?.minSize, cacheEnabled]);
+  useEffect(() => {
+    if (!rootRef.current) return;
+    if (loading) return;
+    runScan();
+  }, [loading, runScan]);
+  useEffect(() => {
+    if (!cacheEnabled) clearCachedBones(id);
+  }, [id, cacheEnabled]);
+  useEffect(() => {
+    if (!rootRef.current) return;
+    if (loading) return;
+    if ((options?.watch ?? true) === false) return;
+    const debounceMs = options?.watchDebounceMs ?? 120;
+    const rootEl = rootRef.current;
+    const schedule = () => {
+      if (scanTimerRef.current !== null) window.clearTimeout(scanTimerRef.current);
+      scanTimerRef.current = window.setTimeout(() => {
+        runScan();
+      }, debounceMs);
+    };
+    if (typeof ResizeObserver === "undefined") {
+      window.addEventListener("resize", schedule);
+      return () => {
+        if (scanTimerRef.current !== null) {
+          window.clearTimeout(scanTimerRef.current);
+          scanTimerRef.current = null;
+        }
+        window.removeEventListener("resize", schedule);
+      };
+    }
+    const resizeObserver = new ResizeObserver(() => schedule());
+    const mutationObserver = new MutationObserver(() => schedule());
+    resizeObserver.observe(rootEl);
+    mutationObserver.observe(rootEl, {
+      childList: true,
+      subtree: true,
+      characterData: true,
+      attributes: true
+    });
+    window.addEventListener("resize", schedule);
+    return () => {
+      if (scanTimerRef.current !== null) {
+        window.clearTimeout(scanTimerRef.current);
+        scanTimerRef.current = null;
+      }
+      window.removeEventListener("resize", schedule);
+      mutationObserver.disconnect();
+      resizeObserver.disconnect();
+    };
+  }, [loading, runScan, options?.watch, options?.watchDebounceMs]);
+  const animation = options?.animation ?? "wave";
+  const debug = options?.debug ?? false;
+  const shouldShow = loading && !!bones && bones.length > 0;
+  return {
+    rootRef,
+    bones,
+    animation,
+    debug,
+    shouldShow
+  };
+}
+
+// src/AutoSkeleton.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function AutoSkeleton({ id, loading, children, className, options }) {
+  const { rootRef, bones, animation, debug, shouldShow } = useAutoSkeleton({
+    id,
+    loading,
+    options
+  });
+  const classes = ["as-root", className, shouldShow ? "as-loading" : ""].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { ref: rootRef, className: classes, children: [
+    children,
+    shouldShow && bones ? /* @__PURE__ */ jsx2(SkeletonOverlay, { bones, animation, debug }) : null
+  ] });
+}
+export {
+  AutoSkeleton,
+  useAutoSkeleton
+};

package/dist/styles.css

@@ -0,0 +1,67 @@
+:root {
+  --as-base: #e4e4e7;
+  --as-highlight: rgba(255, 255, 255, 0.9);
+  --as-debug: rgba(255, 99, 71, 0.45);
+}
+
+.as-root {
+  position: relative;
+}
+
+.as-root.as-loading > :not(.as-overlay) {
+  visibility: hidden;
+}
+
+.as-overlay {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 10;
+}
+
+.as-bone {
+  position: absolute;
+  background: var(--as-base);
+  overflow: hidden;
+}
+
+.as-bone.as-wave::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  transform: translateX(-100%);
+  background: linear-gradient(90deg, transparent 0%, var(--as-highlight) 45%, transparent 100%);
+  animation: as-wave 1.2s infinite;
+}
+
+.as-bone.as-pulse {
+  animation: as-pulse 1.1s ease-in-out infinite;
+}
+
+.as-bone.as-debug {
+  outline: 1px dashed var(--as-debug);
+  outline-offset: -1px;
+}
+
+@keyframes as-wave {
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes as-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.55;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .as-bone.as-wave::after,
+  .as-bone.as-pulse {
+    animation: none;
+  }
+}

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@auto-skeleton/react",
+  "version": "0.0.2",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "build": "tsup && cp src/styles.css dist/styles.css",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "@auto-skeleton/core": "0.0.2"
+  }
+}