@theengineeringmind/auto-skeleton 0.1.0

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.cjs"}

package/dist/index.d.cts

@@ -0,0 +1,95 @@
+import { S as SkeletonBlock, a as SkeletonLayout, b as SkeletonTheme, R as RenderOptions, M as MeasureOptions, c as ResolvedMeasureOptions, C as Classification, B as BlockKind } from './cache-BEybr_z-.cjs';
+export { D as DEFAULT_MEASURE_OPTIONS, L as LayoutCache, d as STYLE_ID, e as autoskeletonCSS, f as defaultLayoutCache, g as ensureStyles, l as layoutCacheKey, m as measure, r as resolveMeasureOptions } from './cache-BEybr_z-.cjs';
+
+declare const CONTAINER_CLASS = "auto-skeleton";
+declare const BLOCK_CLASS = "auto-skeleton__block";
+declare const FADING_CLASS = "auto-skeleton--fading";
+/** Inline custom properties for a theme. Empty when nothing is set. */
+declare function themeStyle(theme?: SkeletonTheme): Record<string, string>;
+/** Inline style for the container. Shared by the DOM renderer and framework wrappers. */
+declare function containerStyle(layout: SkeletonLayout, theme?: SkeletonTheme): Record<string, string>;
+/** Inline style for one block. Shared by the DOM renderer and framework wrappers. */
+declare function blockStyle(block: SkeletonBlock): Record<string, string>;
+declare function blockClassName(block: SkeletonBlock): string;
+/** Replace the container's blocks with those from a new layout. */
+declare function updateSkeleton(container: HTMLElement, layout: SkeletonLayout, theme?: SkeletonTheme): void;
+/**
+ * Build a skeleton DOM element from a layout. The result is a `div` with
+ * `role="status"` and `aria-busy="true"` that you can insert anywhere.
+ */
+declare function renderSkeleton(layout: SkeletonLayout, options?: RenderOptions): HTMLElement;
+
+interface SkeletonHandle {
+    /** The skeleton element. Insert it wherever the content will appear. */
+    readonly element: HTMLElement;
+    /** The layout currently painted. */
+    readonly layout: SkeletonLayout;
+    /** Re-measure the source and repaint. Call after the container resizes. */
+    update(): SkeletonLayout;
+    /** Remove the element from the DOM. */
+    destroy(): void;
+}
+/**
+ * Measure `source` and return a live skeleton element for it. This is the
+ * one-call vanilla API; frameworks wrappers compose `measure` and
+ * `renderSkeleton` directly.
+ */
+declare function createSkeleton(source: Element, options?: MeasureOptions & RenderOptions): SkeletonHandle;
+
+declare const DATA_ATTRIBUTE = "data-auto-skeleton";
+declare function kindOf(element: Element): BlockKind;
+/**
+ * Decide how to treat an element. Order of precedence:
+ * 1. `options.classify` callback
+ * 2. `data-auto-skeleton="skip|block|descend"` attribute
+ * 3. Built-in rules (hidden, replaced/media, form controls, small decorated boxes)
+ */
+interface ClassifyContext {
+    /**
+     * The root passed to `measure`. Roots are often deliberately hidden (a
+     * clone used only for measurement), so hidden-ness is ignored for them.
+     */
+    root?: boolean;
+    /**
+     * Computed `visibility` of the parent. A child that merely inherits
+     * `hidden` from a hidden root is still measured; one that sets it itself
+     * is skipped.
+     */
+    parentVisibility?: string;
+}
+declare function classify(element: Element, window: Window, options: ResolvedMeasureOptions, context?: ClassifyContext): Classification;
+/** Read the element's border radius as a single CSS shorthand value. */
+declare function radiusOf(style: CSSStyleDeclaration): string;
+
+interface Rect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+/** Round to two decimals so layouts serialize cleanly and compare stably. */
+declare function round(n: number): number;
+/** Convert a viewport-relative DOMRect into coordinates relative to `origin`. */
+declare function toRelative(rect: DOMRectReadOnly, origin: {
+    left: number;
+    top: number;
+}): Rect;
+/** Shrink a rect vertically around its centre. */
+declare function scaleHeight(rect: Rect, scale: number): Rect;
+/** True when the two rects share at least half of the smaller one's vertical span. */
+declare function sameLine(a: Rect, b: Rect): boolean;
+/** Bounding box of two rects. */
+declare function union(a: Rect, b: Rect): Rect;
+/**
+ * Merge text fragments that sit on the same line and are horizontally close
+ * into a single bar. Fragments are first grouped by vertical overlap, then
+ * merged left to right when the gap between them is at most `gap`.
+ */
+declare function mergeLineRects(rects: readonly Rect[], gap: number): Rect[];
+/** Drop rects that are too small to matter or that fall entirely outside the bounds. */
+declare function isVisible(rect: Rect, bounds: {
+    width: number;
+    height: number;
+}, minSize: number): boolean;
+
+export { BLOCK_CLASS, BlockKind, CONTAINER_CLASS, Classification, type ClassifyContext, DATA_ATTRIBUTE, FADING_CLASS, MeasureOptions, type Rect, RenderOptions, ResolvedMeasureOptions, SkeletonBlock, type SkeletonHandle, SkeletonLayout, SkeletonTheme, blockClassName, blockStyle, classify, containerStyle, createSkeleton, isVisible, kindOf, mergeLineRects, radiusOf, renderSkeleton, round, sameLine, scaleHeight, themeStyle, toRelative, union, updateSkeleton };

package/dist/index.d.ts

@@ -0,0 +1,95 @@
+import { S as SkeletonBlock, a as SkeletonLayout, b as SkeletonTheme, R as RenderOptions, M as MeasureOptions, c as ResolvedMeasureOptions, C as Classification, B as BlockKind } from './cache-BEybr_z-.js';
+export { D as DEFAULT_MEASURE_OPTIONS, L as LayoutCache, d as STYLE_ID, e as autoskeletonCSS, f as defaultLayoutCache, g as ensureStyles, l as layoutCacheKey, m as measure, r as resolveMeasureOptions } from './cache-BEybr_z-.js';
+
+declare const CONTAINER_CLASS = "auto-skeleton";
+declare const BLOCK_CLASS = "auto-skeleton__block";
+declare const FADING_CLASS = "auto-skeleton--fading";
+/** Inline custom properties for a theme. Empty when nothing is set. */
+declare function themeStyle(theme?: SkeletonTheme): Record<string, string>;
+/** Inline style for the container. Shared by the DOM renderer and framework wrappers. */
+declare function containerStyle(layout: SkeletonLayout, theme?: SkeletonTheme): Record<string, string>;
+/** Inline style for one block. Shared by the DOM renderer and framework wrappers. */
+declare function blockStyle(block: SkeletonBlock): Record<string, string>;
+declare function blockClassName(block: SkeletonBlock): string;
+/** Replace the container's blocks with those from a new layout. */
+declare function updateSkeleton(container: HTMLElement, layout: SkeletonLayout, theme?: SkeletonTheme): void;
+/**
+ * Build a skeleton DOM element from a layout. The result is a `div` with
+ * `role="status"` and `aria-busy="true"` that you can insert anywhere.
+ */
+declare function renderSkeleton(layout: SkeletonLayout, options?: RenderOptions): HTMLElement;
+
+interface SkeletonHandle {
+    /** The skeleton element. Insert it wherever the content will appear. */
+    readonly element: HTMLElement;
+    /** The layout currently painted. */
+    readonly layout: SkeletonLayout;
+    /** Re-measure the source and repaint. Call after the container resizes. */
+    update(): SkeletonLayout;
+    /** Remove the element from the DOM. */
+    destroy(): void;
+}
+/**
+ * Measure `source` and return a live skeleton element for it. This is the
+ * one-call vanilla API; frameworks wrappers compose `measure` and
+ * `renderSkeleton` directly.
+ */
+declare function createSkeleton(source: Element, options?: MeasureOptions & RenderOptions): SkeletonHandle;
+
+declare const DATA_ATTRIBUTE = "data-auto-skeleton";
+declare function kindOf(element: Element): BlockKind;
+/**
+ * Decide how to treat an element. Order of precedence:
+ * 1. `options.classify` callback
+ * 2. `data-auto-skeleton="skip|block|descend"` attribute
+ * 3. Built-in rules (hidden, replaced/media, form controls, small decorated boxes)
+ */
+interface ClassifyContext {
+    /**
+     * The root passed to `measure`. Roots are often deliberately hidden (a
+     * clone used only for measurement), so hidden-ness is ignored for them.
+     */
+    root?: boolean;
+    /**
+     * Computed `visibility` of the parent. A child that merely inherits
+     * `hidden` from a hidden root is still measured; one that sets it itself
+     * is skipped.
+     */
+    parentVisibility?: string;
+}
+declare function classify(element: Element, window: Window, options: ResolvedMeasureOptions, context?: ClassifyContext): Classification;
+/** Read the element's border radius as a single CSS shorthand value. */
+declare function radiusOf(style: CSSStyleDeclaration): string;
+
+interface Rect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+/** Round to two decimals so layouts serialize cleanly and compare stably. */
+declare function round(n: number): number;
+/** Convert a viewport-relative DOMRect into coordinates relative to `origin`. */
+declare function toRelative(rect: DOMRectReadOnly, origin: {
+    left: number;
+    top: number;
+}): Rect;
+/** Shrink a rect vertically around its centre. */
+declare function scaleHeight(rect: Rect, scale: number): Rect;
+/** True when the two rects share at least half of the smaller one's vertical span. */
+declare function sameLine(a: Rect, b: Rect): boolean;
+/** Bounding box of two rects. */
+declare function union(a: Rect, b: Rect): Rect;
+/**
+ * Merge text fragments that sit on the same line and are horizontally close
+ * into a single bar. Fragments are first grouped by vertical overlap, then
+ * merged left to right when the gap between them is at most `gap`.
+ */
+declare function mergeLineRects(rects: readonly Rect[], gap: number): Rect[];
+/** Drop rects that are too small to matter or that fall entirely outside the bounds. */
+declare function isVisible(rect: Rect, bounds: {
+    width: number;
+    height: number;
+}, minSize: number): boolean;
+
+export { BLOCK_CLASS, BlockKind, CONTAINER_CLASS, Classification, type ClassifyContext, DATA_ATTRIBUTE, FADING_CLASS, MeasureOptions, type Rect, RenderOptions, ResolvedMeasureOptions, SkeletonBlock, type SkeletonHandle, SkeletonLayout, SkeletonTheme, blockClassName, blockStyle, classify, containerStyle, createSkeleton, isVisible, kindOf, mergeLineRects, radiusOf, renderSkeleton, round, sameLine, scaleHeight, themeStyle, toRelative, union, updateSkeleton };

package/dist/index.js

@@ -0,0 +1,3 @@
+export { BLOCK_CLASS, CONTAINER_CLASS, DATA_ATTRIBUTE, DEFAULT_MEASURE_OPTIONS, FADING_CLASS, LayoutCache, STYLE_ID, autoskeletonCSS, blockClassName, blockStyle, classify, containerStyle, createSkeleton, defaultLayoutCache, ensureStyles, isVisible, kindOf, layoutCacheKey, measure, mergeLineRects, radiusOf, renderSkeleton, resolveMeasureOptions, round, sameLine, scaleHeight, themeStyle, toRelative, union, updateSkeleton } from './chunk-VI2M6DZS.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}

package/dist/react.cjs

@@ -0,0 +1,244 @@
+'use client';
+'use strict';
+
+var chunkVTA53XYO_cjs = require('./chunk-VTA53XYO.cjs');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var AutoSkeletonContext = react.createContext({});
+AutoSkeletonContext.displayName = "AutoSkeletonContext";
+function AutoSkeletonProvider({ children, ...config }) {
+  const parent = react.useContext(AutoSkeletonContext);
+  const value = react.useMemo(() => mergeConfig(parent, config), [parent, config]);
+  return /* @__PURE__ */ jsxRuntime.jsx(AutoSkeletonContext.Provider, { value, children });
+}
+function useAutoSkeletonConfig() {
+  return react.useContext(AutoSkeletonContext);
+}
+function mergeConfig(base, override) {
+  const out = { ...base };
+  for (const key of Object.keys(override)) {
+    const value = override[key];
+    if (value !== void 0) out[key] = value;
+  }
+  if (base.layouts && override.layouts) out.layouts = { ...base.layouts, ...override.layouts };
+  return out;
+}
+var useIsomorphicLayoutEffect = typeof window === "undefined" ? react.useEffect : react.useLayoutEffect;
+var MEASURE_STYLE = {
+  position: "absolute",
+  top: 0,
+  left: 0,
+  width: "100%",
+  clipPath: "inset(50%)",
+  overflow: "hidden",
+  pointerEvents: "none",
+  userSelect: "none"
+};
+var OVERLAY_STYLE = { position: "absolute", top: 0, left: 0, right: 0 };
+function cx(...names) {
+  return names.filter(Boolean).join(" ");
+}
+var isDev = typeof process !== "undefined" && process.env?.["NODE_ENV"] !== "production";
+var AutoSkeleton = react.forwardRef(function AutoSkeleton2(props, ref) {
+  const context = useAutoSkeletonConfig();
+  const {
+    loading,
+    children,
+    placeholder,
+    layout: layoutProp,
+    cacheKey,
+    minHeight,
+    as: Tag = "div",
+    className,
+    style,
+    skeletonClassName,
+    onLayout,
+    ...ownConfig
+  } = props;
+  const config = mergeConfig(context, ownConfig);
+  const {
+    fadeDuration = 200,
+    animate = true,
+    label = "Loading",
+    injectStyles = true,
+    nonce,
+    cache = chunkVTA53XYO_cjs.defaultLayoutCache,
+    layouts,
+    onError,
+    color,
+    highlight,
+    duration,
+    fade,
+    textScale,
+    minSize,
+    maxBackgroundBlock,
+    mergeGap,
+    textRadius,
+    maxBlocks,
+    classify
+  } = config;
+  const wrapperRef = react.useRef(null);
+  react.useImperativeHandle(ref, () => wrapperRef.current, []);
+  const measureRef = react.useRef(null);
+  const [initialLayout] = react.useState(() => {
+    if (layoutProp) return layoutProp;
+    if (cacheKey === void 0) return null;
+    return layouts?.[cacheKey] ?? cache.latest(cacheKey) ?? null;
+  });
+  const [measured, setMeasured] = react.useState(null);
+  const layout = layoutProp ?? measured ?? initialLayout;
+  const [needsSource, setNeedsSource] = react.useState(initialLayout === null && layoutProp === void 0);
+  const [prevLoading, setPrevLoading] = react.useState(loading);
+  const [fading, setFading] = react.useState(false);
+  if (prevLoading !== loading) {
+    setPrevLoading(loading);
+    setFading(!loading && layout !== null && fadeDuration > 0);
+  }
+  react.useEffect(() => {
+    if (!fading) return;
+    const timer = setTimeout(() => setFading(false), fadeDuration);
+    return () => clearTimeout(timer);
+  }, [fading, fadeDuration]);
+  const measureOptions = react.useMemo(
+    () => ({ textScale, minSize, maxBackgroundBlock, mergeGap, textRadius, maxBlocks, classify }),
+    [textScale, minSize, maxBackgroundBlock, mergeGap, textRadius, maxBlocks, classify]
+  );
+  const theme = react.useMemo(
+    () => ({ color, highlight, duration, fade }),
+    [color, highlight, duration, fade]
+  );
+  const callbacks = react.useRef({ onLayout, onError });
+  react.useEffect(() => {
+    callbacks.current = { onLayout, onError };
+  }, [onLayout, onError]);
+  const layoutRef = react.useRef(null);
+  useIsomorphicLayoutEffect(() => {
+    layoutRef.current = layout;
+  });
+  const reported = react.useRef(null);
+  const report = react.useCallback((next) => {
+    if (reported.current === next) return;
+    reported.current = next;
+    callbacks.current.onLayout?.(next);
+  }, []);
+  const runMeasure = react.useCallback(() => {
+    const wrapper = wrapperRef.current;
+    if (!wrapper || layoutProp) return;
+    const width = wrapper.clientWidth;
+    const current = layoutRef.current;
+    if (current && Math.abs(current.width - width) <= 1) {
+      setNeedsSource(false);
+      report(current);
+      return;
+    }
+    const key = cacheKey === void 0 ? void 0 : chunkVTA53XYO_cjs.layoutCacheKey(cacheKey, width);
+    let next = key === void 0 ? void 0 : lookupLayout(cache, layouts, cacheKey, key, width);
+    if (!next) {
+      const source2 = measureRef.current;
+      if (!source2) {
+        setNeedsSource(true);
+        return;
+      }
+      try {
+        next = chunkVTA53XYO_cjs.measure(source2, measureOptions);
+      } catch (error) {
+        callbacks.current.onError?.(error);
+        if (isDev && !callbacks.current.onError) console.error("auto-skeleton: measurement failed", error);
+        return;
+      }
+      if (key !== void 0) cache.set(key, next);
+    }
+    setMeasured(next);
+    setNeedsSource(false);
+    report(next);
+  }, [cache, cacheKey, layoutProp, layouts, measureOptions, report]);
+  useIsomorphicLayoutEffect(() => {
+    if (!loading) return;
+    if (injectStyles) chunkVTA53XYO_cjs.ensureStyles(document, nonce);
+    if (layoutProp) {
+      report(layoutProp);
+      return;
+    }
+    const source2 = measureRef.current;
+    if (source2) source2.inert = true;
+    runMeasure();
+    const wrapper = wrapperRef.current;
+    if (!wrapper || typeof ResizeObserver === "undefined") return;
+    let frame = 0;
+    let lastWidth = wrapper.clientWidth;
+    const observer = new ResizeObserver(() => {
+      const width = wrapper.clientWidth;
+      if (width === lastWidth) return;
+      lastWidth = width;
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(runMeasure);
+    });
+    observer.observe(wrapper);
+    return () => {
+      observer.disconnect();
+      cancelAnimationFrame(frame);
+    };
+  }, [loading, needsSource, runMeasure, injectStyles, nonce, layoutProp, report]);
+  const source = placeholder === void 0 ? children : placeholder;
+  const mountSource = loading && needsSource && source != null;
+  const showSkeleton = loading || fading;
+  const state = loading ? "loading" : fading ? "fading" : "idle";
+  if (isDev && loading && layout === null && source == null && minHeight === void 0) {
+    console.warn(
+      "auto-skeleton: nothing to measure and no layout, cacheKey, or minHeight given; the skeleton will be empty."
+    );
+  }
+  const skeletonStyle = layout ? { ...chunkVTA53XYO_cjs.containerStyle(layout, theme), ...fading ? OVERLAY_STYLE : null } : { height: minHeight ?? 0 };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Tag,
+    {
+      ref: wrapperRef,
+      className,
+      style: { position: "relative", ...style },
+      "data-auto-skeleton-state": state,
+      children: [
+        mountSource ? /* @__PURE__ */ jsxRuntime.jsx("div", { ref: measureRef, "aria-hidden": true, style: MEASURE_STYLE, children: source }) : null,
+        showSkeleton ? /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cx(chunkVTA53XYO_cjs.CONTAINER_CLASS, fading && chunkVTA53XYO_cjs.FADING_CLASS, skeletonClassName),
+            role: "status",
+            "aria-busy": loading,
+            "aria-label": label,
+            "data-animate": String(animate),
+            style: skeletonStyle,
+            children: layout?.blocks.map((block, index) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkVTA53XYO_cjs.blockClassName(block), "aria-hidden": true, style: chunkVTA53XYO_cjs.blockStyle(block) }, index))
+          }
+        ) : null,
+        loading ? null : children
+      ]
+    }
+  );
+});
+function lookupLayout(cache, layouts, name, key, width) {
+  const cached = cache.get(key);
+  if (cached) return cached;
+  const provided = name === void 0 ? void 0 : layouts?.[name];
+  if (provided && Math.abs(provided.width - width) <= 1) return provided;
+  return void 0;
+}
+
+Object.defineProperty(exports, "LayoutCache", {
+  enumerable: true,
+  get: function () { return chunkVTA53XYO_cjs.LayoutCache; }
+});
+Object.defineProperty(exports, "autoskeletonCSS", {
+  enumerable: true,
+  get: function () { return chunkVTA53XYO_cjs.autoskeletonCSS; }
+});
+Object.defineProperty(exports, "measure", {
+  enumerable: true,
+  get: function () { return chunkVTA53XYO_cjs.measure; }
+});
+exports.AutoSkeleton = AutoSkeleton;
+exports.AutoSkeletonProvider = AutoSkeletonProvider;
+exports.mergeConfig = mergeConfig;
+exports.useAutoSkeletonConfig = useAutoSkeletonConfig;
+//# sourceMappingURL=react.cjs.map
+//# sourceMappingURL=react.cjs.map

package/dist/react.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/react/context.tsx","../src/react/AutoSkeleton.tsx"],"names":["createContext","useContext","useMemo","jsx","useEffect","useLayoutEffect","forwardRef","AutoSkeleton","defaultLayoutCache","useRef","useImperativeHandle","useState","useCallback","layoutCacheKey","source","measure","ensureStyles","containerStyle","jsxs","CONTAINER_CLASS","FADING_CLASS","blockClassName","blockStyle"],"mappings":"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","file":"react.cjs","sourcesContent":["import { createContext, useContext, useMemo, type ReactNode } from 'react';\nimport type { LayoutCache, MeasureOptions, SkeletonLayout, SkeletonTheme } from '../core';\n\n/**\n * Defaults shared by every `<AutoSkeleton>` below the provider. Any prop set\n * on an individual component wins over these.\n */\nexport interface AutoSkeletonConfig extends MeasureOptions, SkeletonTheme {\n  /** Run the shimmer animation. */\n  animate?: boolean;\n  /** Cross-fade duration in ms when content arrives. */\n  fadeDuration?: number;\n  /** Accessible label for loading regions. */\n  label?: string;\n  /** Inject the default stylesheet into the document. */\n  injectStyles?: boolean;\n  /** CSP nonce for the injected stylesheet. */\n  nonce?: string;\n  /** Cache instance for `cacheKey` lookups. */\n  cache?: LayoutCache;\n  /**\n   * Precomputed layouts keyed by `cacheKey`. Used on the very first render,\n   * including on the server, so skeletons stream down as real blocks with no\n   * layout shift and no client-side measurement. Generate them once with\n   * `measure()` in a browser (for example a Playwright script in CI) and\n   * ship the JSON.\n   */\n  layouts?: Readonly<Record<string, SkeletonLayout>>;\n  /** Called when measurement throws. The component falls back to `minHeight`. */\n  onError?: (error: unknown) => void;\n}\n\nconst AutoSkeletonContext = createContext<AutoSkeletonConfig>({});\nAutoSkeletonContext.displayName = 'AutoSkeletonContext';\n\nexport interface AutoSkeletonProviderProps extends AutoSkeletonConfig {\n  children?: ReactNode;\n}\n\n/**\n * Provide app-wide defaults (theme, cache, precomputed layouts, measure\n * options). Providers nest: inner values override outer ones per key.\n */\nexport function AutoSkeletonProvider({ children, ...config }: AutoSkeletonProviderProps): ReactNode {\n  const parent = useContext(AutoSkeletonContext);\n  const value = useMemo(() => mergeConfig(parent, config), [parent, config]);\n  return <AutoSkeletonContext.Provider value={value}>{children}</AutoSkeletonContext.Provider>;\n}\n\nexport function useAutoSkeletonConfig(): AutoSkeletonConfig {\n  return useContext(AutoSkeletonContext);\n}\n\n/** Merge two configs, ignoring `undefined` so an explicit prop never erases a default. */\nexport function mergeConfig(base: AutoSkeletonConfig, override: AutoSkeletonConfig): AutoSkeletonConfig {\n  const out: AutoSkeletonConfig = { ...base };\n  for (const key of Object.keys(override) as (keyof AutoSkeletonConfig)[]) {\n    const value = override[key];\n    if (value !== undefined) (out as Record<string, unknown>)[key] = value;\n  }\n  if (base.layouts && override.layouts) out.layouts = { ...base.layouts, ...override.layouts };\n  return out;\n}\n","import {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ElementType,\n  type ReactNode,\n} from 'react';\nimport {\n  CONTAINER_CLASS,\n  FADING_CLASS,\n  blockClassName,\n  blockStyle,\n  containerStyle,\n  defaultLayoutCache,\n  ensureStyles,\n  layoutCacheKey,\n  measure,\n  type MeasureOptions,\n  type SkeletonLayout,\n  type SkeletonTheme,\n} from '../core';\nimport { mergeConfig, useAutoSkeletonConfig, type AutoSkeletonConfig } from './context';\n\nconst useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;\n\nexport interface AutoSkeletonProps extends AutoSkeletonConfig {\n  /** Show the skeleton instead of `children`. */\n  loading: boolean;\n  /** The real content. Also used as the measurement source unless `placeholder` is set. */\n  children?: ReactNode;\n  /**\n   * What to measure while loading. Defaults to `children`. Pass a version\n   * rendered with sample data when `children` cannot render without data,\n   * or `null` to rely purely on `layout`, `cacheKey` and `minHeight`.\n   */\n  placeholder?: ReactNode;\n  /**\n   * A precomputed layout. Rendered as-is on the server and the client with\n   * no measurement at all. Takes precedence over `cacheKey` and `layouts`.\n   */\n  layout?: SkeletonLayout;\n  /**\n   * Reuse a layout across mounts and across `loading` cycles. Layouts are\n   * keyed by this name and the container width. A cached or provided layout\n   * for the name is painted on the first frame; the source is only mounted\n   * and measured when no layout exists for the current width.\n   */\n  cacheKey?: string;\n  /** Height used before the first measurement and during SSR without a layout. */\n  minHeight?: number | string;\n  /** Wrapper element type. Default `'div'`. */\n  as?: ElementType;\n  className?: string;\n  style?: CSSProperties;\n  /** Extra class names for the skeleton container. */\n  skeletonClassName?: string;\n  /** Called whenever a layout is measured, provided, or read from the cache. */\n  onLayout?: (layout: SkeletonLayout) => void;\n}\n\nconst MEASURE_STYLE: CSSProperties = {\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  width: '100%',\n  clipPath: 'inset(50%)',\n  overflow: 'hidden',\n  pointerEvents: 'none',\n  userSelect: 'none',\n};\n\nconst OVERLAY_STYLE: CSSProperties = { position: 'absolute', top: 0, left: 0, right: 0 };\n\nfunction cx(...names: (string | false | null | undefined)[]): string {\n  return names.filter(Boolean).join(' ');\n}\n\nconst isDev = typeof process !== 'undefined' && process.env?.['NODE_ENV'] !== 'production';\n\n/**\n * Wrap any content and get a pixel-accurate skeleton for it while `loading`\n * is true, with a cross-fade to the real content when it flips to false.\n */\nexport const AutoSkeleton = forwardRef<HTMLElement, AutoSkeletonProps>(function AutoSkeleton(props, ref) {\n  const context = useAutoSkeletonConfig();\n  const {\n    loading,\n    children,\n    placeholder,\n    layout: layoutProp,\n    cacheKey,\n    minHeight,\n    as: Tag = 'div',\n    className,\n    style,\n    skeletonClassName,\n    onLayout,\n    ...ownConfig\n  } = props;\n  const config = mergeConfig(context, ownConfig);\n  const {\n    fadeDuration = 200,\n    animate = true,\n    label = 'Loading',\n    injectStyles = true,\n    nonce,\n    cache = defaultLayoutCache,\n    layouts,\n    onError,\n    color,\n    highlight,\n    duration,\n    fade,\n    textScale,\n    minSize,\n    maxBackgroundBlock,\n    mergeGap,\n    textRadius,\n    maxBlocks,\n    classify,\n  } = config;\n\n  const wrapperRef = useRef<HTMLElement | null>(null);\n  useImperativeHandle(ref, () => wrapperRef.current as HTMLElement, []);\n  const measureRef = useRef<HTMLDivElement | null>(null);\n\n  // First-frame layout without touching the DOM: an explicit prop, a\n  // provided (server-shipped) layout, or the freshest cache entry for the key.\n  const [initialLayout] = useState<SkeletonLayout | null>(() => {\n    if (layoutProp) return layoutProp;\n    if (cacheKey === undefined) return null;\n    return layouts?.[cacheKey] ?? cache.latest(cacheKey) ?? null;\n  });\n  const [measured, setMeasured] = useState<SkeletonLayout | null>(null);\n  const layout = layoutProp ?? measured ?? initialLayout;\n\n  // The source is only mounted when there is nothing better to show, which\n  // keeps repeat loads free of any measurement or extra rendering.\n  const [needsSource, setNeedsSource] = useState(initialLayout === null && layoutProp === undefined);\n\n  const [prevLoading, setPrevLoading] = useState(loading);\n  const [fading, setFading] = useState(false);\n  if (prevLoading !== loading) {\n    setPrevLoading(loading);\n    setFading(!loading && layout !== null && fadeDuration > 0);\n  }\n  useEffect(() => {\n    if (!fading) return;\n    const timer = setTimeout(() => setFading(false), fadeDuration);\n    return () => clearTimeout(timer);\n  }, [fading, fadeDuration]);\n\n  const measureOptions = useMemo<MeasureOptions>(\n    () => ({ textScale, minSize, maxBackgroundBlock, mergeGap, textRadius, maxBlocks, classify }),\n    [textScale, minSize, maxBackgroundBlock, mergeGap, textRadius, maxBlocks, classify],\n  );\n  const theme = useMemo<SkeletonTheme>(\n    () => ({ color, highlight, duration, fade }),\n    [color, highlight, duration, fade],\n  );\n\n  const callbacks = useRef({ onLayout, onError });\n  useEffect(() => {\n    callbacks.current = { onLayout, onError };\n  }, [onLayout, onError]);\n  const layoutRef = useRef<SkeletonLayout | null>(null);\n  useIsomorphicLayoutEffect(() => {\n    layoutRef.current = layout;\n  });\n  const reported = useRef<SkeletonLayout | null>(null);\n  const report = useCallback((next: SkeletonLayout) => {\n    if (reported.current === next) return;\n    reported.current = next;\n    callbacks.current.onLayout?.(next);\n  }, []);\n\n  const runMeasure = useCallback(() => {\n    const wrapper = wrapperRef.current;\n    if (!wrapper || layoutProp) return;\n    const width = wrapper.clientWidth;\n\n    // Already have a layout for this width: nothing to do, and the source\n    // can go (or stay unmounted).\n    const current = layoutRef.current;\n    if (current && Math.abs(current.width - width) <= 1) {\n      setNeedsSource(false);\n      report(current);\n      return;\n    }\n\n    const key = cacheKey === undefined ? undefined : layoutCacheKey(cacheKey, width);\n    let next = key === undefined ? undefined : lookupLayout(cache, layouts, cacheKey, key, width);\n    if (!next) {\n      const source = measureRef.current;\n      if (!source) {\n        // Nothing to measure at this width. Ask for the source and try again\n        // once it has rendered.\n        setNeedsSource(true);\n        return;\n      }\n      try {\n        next = measure(source, measureOptions);\n      } catch (error) {\n        callbacks.current.onError?.(error);\n        if (isDev && !callbacks.current.onError) console.error('auto-skeleton: measurement failed', error);\n        return;\n      }\n      if (key !== undefined) cache.set(key, next);\n    }\n    setMeasured(next);\n    setNeedsSource(false);\n    report(next);\n  }, [cache, cacheKey, layoutProp, layouts, measureOptions, report]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (!loading) return;\n    if (injectStyles) ensureStyles(document, nonce);\n    if (layoutProp) {\n      report(layoutProp);\n      return;\n    }\n    const source = measureRef.current;\n    if (source) source.inert = true;\n    runMeasure();\n\n    const wrapper = wrapperRef.current;\n    if (!wrapper || typeof ResizeObserver === 'undefined') return;\n    let frame = 0;\n    let lastWidth = wrapper.clientWidth;\n    const observer = new ResizeObserver(() => {\n      const width = wrapper.clientWidth;\n      if (width === lastWidth) return;\n      lastWidth = width;\n      cancelAnimationFrame(frame);\n      frame = requestAnimationFrame(runMeasure);\n    });\n    observer.observe(wrapper);\n    return () => {\n      observer.disconnect();\n      cancelAnimationFrame(frame);\n    };\n  }, [loading, needsSource, runMeasure, injectStyles, nonce, layoutProp, report]);\n\n  const source = placeholder === undefined ? children : placeholder;\n  const mountSource = loading && needsSource && source != null;\n  const showSkeleton = loading || fading;\n  const state = loading ? 'loading' : fading ? 'fading' : 'idle';\n\n  if (isDev && loading && layout === null && source == null && minHeight === undefined) {\n    console.warn(\n      'auto-skeleton: nothing to measure and no layout, cacheKey, or minHeight given; the skeleton will be empty.',\n    );\n  }\n\n  const skeletonStyle: CSSProperties = layout\n    ? { ...(containerStyle(layout, theme) as CSSProperties), ...(fading ? OVERLAY_STYLE : null) }\n    : { height: minHeight ?? 0 };\n\n  return (\n    <Tag\n      ref={wrapperRef}\n      className={className}\n      style={{ position: 'relative', ...style }}\n      data-auto-skeleton-state={state}\n    >\n      {mountSource ? (\n        <div ref={measureRef} aria-hidden style={MEASURE_STYLE}>\n          {source}\n        </div>\n      ) : null}\n      {showSkeleton ? (\n        <div\n          className={cx(CONTAINER_CLASS, fading && FADING_CLASS, skeletonClassName)}\n          role=\"status\"\n          aria-busy={loading}\n          aria-label={label}\n          data-animate={String(animate)}\n          style={skeletonStyle}\n        >\n          {layout?.blocks.map((block, index) => (\n            <div key={index} className={blockClassName(block)} aria-hidden style={blockStyle(block)} />\n          ))}\n        </div>\n      ) : null}\n      {loading ? null : children}\n    </Tag>\n  );\n});\n\n/** Resolve a layout for a key at a width from the cache or provided layouts, without measuring. */\nfunction lookupLayout(\n  cache: NonNullable<AutoSkeletonConfig['cache']>,\n  layouts: AutoSkeletonConfig['layouts'],\n  name: string | undefined,\n  key: string,\n  width: number,\n): SkeletonLayout | undefined {\n  const cached = cache.get(key);\n  if (cached) return cached;\n  const provided = name === undefined ? undefined : layouts?.[name];\n  if (provided && Math.abs(provided.width - width) <= 1) return provided;\n  return undefined;\n}\n"]}

package/dist/react.d.cts

@@ -0,0 +1,86 @@
+import * as react from 'react';
+import { ReactNode, ElementType, CSSProperties } from 'react';
+import { M as MeasureOptions, b as SkeletonTheme, L as LayoutCache, a as SkeletonLayout } from './cache-BEybr_z-.cjs';
+export { B as BlockKind, C as Classification, S as SkeletonBlock, e as autoskeletonCSS, m as measure } from './cache-BEybr_z-.cjs';
+
+/**
+ * Defaults shared by every `<AutoSkeleton>` below the provider. Any prop set
+ * on an individual component wins over these.
+ */
+interface AutoSkeletonConfig extends MeasureOptions, SkeletonTheme {
+    /** Run the shimmer animation. */
+    animate?: boolean;
+    /** Cross-fade duration in ms when content arrives. */
+    fadeDuration?: number;
+    /** Accessible label for loading regions. */
+    label?: string;
+    /** Inject the default stylesheet into the document. */
+    injectStyles?: boolean;
+    /** CSP nonce for the injected stylesheet. */
+    nonce?: string;
+    /** Cache instance for `cacheKey` lookups. */
+    cache?: LayoutCache;
+    /**
+     * Precomputed layouts keyed by `cacheKey`. Used on the very first render,
+     * including on the server, so skeletons stream down as real blocks with no
+     * layout shift and no client-side measurement. Generate them once with
+     * `measure()` in a browser (for example a Playwright script in CI) and
+     * ship the JSON.
+     */
+    layouts?: Readonly<Record<string, SkeletonLayout>>;
+    /** Called when measurement throws. The component falls back to `minHeight`. */
+    onError?: (error: unknown) => void;
+}
+interface AutoSkeletonProviderProps extends AutoSkeletonConfig {
+    children?: ReactNode;
+}
+/**
+ * Provide app-wide defaults (theme, cache, precomputed layouts, measure
+ * options). Providers nest: inner values override outer ones per key.
+ */
+declare function AutoSkeletonProvider({ children, ...config }: AutoSkeletonProviderProps): ReactNode;
+declare function useAutoSkeletonConfig(): AutoSkeletonConfig;
+/** Merge two configs, ignoring `undefined` so an explicit prop never erases a default. */
+declare function mergeConfig(base: AutoSkeletonConfig, override: AutoSkeletonConfig): AutoSkeletonConfig;
+
+interface AutoSkeletonProps extends AutoSkeletonConfig {
+    /** Show the skeleton instead of `children`. */
+    loading: boolean;
+    /** The real content. Also used as the measurement source unless `placeholder` is set. */
+    children?: ReactNode;
+    /**
+     * What to measure while loading. Defaults to `children`. Pass a version
+     * rendered with sample data when `children` cannot render without data,
+     * or `null` to rely purely on `layout`, `cacheKey` and `minHeight`.
+     */
+    placeholder?: ReactNode;
+    /**
+     * A precomputed layout. Rendered as-is on the server and the client with
+     * no measurement at all. Takes precedence over `cacheKey` and `layouts`.
+     */
+    layout?: SkeletonLayout;
+    /**
+     * Reuse a layout across mounts and across `loading` cycles. Layouts are
+     * keyed by this name and the container width. A cached or provided layout
+     * for the name is painted on the first frame; the source is only mounted
+     * and measured when no layout exists for the current width.
+     */
+    cacheKey?: string;
+    /** Height used before the first measurement and during SSR without a layout. */
+    minHeight?: number | string;
+    /** Wrapper element type. Default `'div'`. */
+    as?: ElementType;
+    className?: string;
+    style?: CSSProperties;
+    /** Extra class names for the skeleton container. */
+    skeletonClassName?: string;
+    /** Called whenever a layout is measured, provided, or read from the cache. */
+    onLayout?: (layout: SkeletonLayout) => void;
+}
+/**
+ * Wrap any content and get a pixel-accurate skeleton for it while `loading`
+ * is true, with a cross-fade to the real content when it flips to false.
+ */
+declare const AutoSkeleton: react.ForwardRefExoticComponent<AutoSkeletonProps & react.RefAttributes<HTMLElement>>;
+
+export { AutoSkeleton, type AutoSkeletonConfig, type AutoSkeletonProps, AutoSkeletonProvider, type AutoSkeletonProviderProps, LayoutCache, MeasureOptions, SkeletonLayout, SkeletonTheme, mergeConfig, useAutoSkeletonConfig };