@0xgf/boneyard 1.0.0 → 1.0.1

package/bin/boneyard.mjs

@@ -133,6 +133,11 @@ console.log(`  Output:      ${outDir}\n`)
 const browser = await chromium.launch()
 const page = await browser.newPage()
 
+// Set build mode flag before any page loads so <Skeleton fixture={...}> renders mock content
+await page.addInitScript(() => {
+  window.__BONEYARD_BUILD = true
+})
+
 // { [skeletonName]: { breakpoints: { [width]: SkeletonResult } } }
 const collected = {}
 
@@ -148,19 +153,44 @@ for (const url of urls) {
       // networkidle can timeout on heavy pages — still try to capture
     }
 
-    // Wait for React to render and boneyard to snapshot
+    // Wait for React to render
     if (waitMs > 0) await page.waitForTimeout(waitMs)
 
-    // Read the global registry that <Skeleton name="..."> populates
+    // Find [data-boneyard] elements and extract bones using the real snapshotBones function
     const bones = await page.evaluate(() => {
-      return window.__BONEYARD_BONES ?? {}
+      const fn = window.__BONEYARD_SNAPSHOT
+      if (!fn) return {}
+
+      const elements = document.querySelectorAll('[data-boneyard]')
+      const results = {}
+
+      for (const el of elements) {
+        const name = el.getAttribute('data-boneyard')
+        if (!name) continue
+
+        // Read snapshotConfig from data attribute
+        const configStr = el.getAttribute('data-boneyard-config')
+        const config = configStr ? JSON.parse(configStr) : undefined
+
+        // Target the first rendered child (fixture content)
+        const target = el.firstElementChild?.firstElementChild
+        if (!target) continue
+
+        try {
+          results[name] = fn(target, name, config)
+        } catch {
+          // skip on error
+        }
+      }
+
+      return results
     })
 
     const names = Object.keys(bones)
 
     if (names.length === 0) {
-      console.warn(`    ⚠  No named <Skeleton name="..."> found at ${width}px`)
-      console.warn(`       Make sure your <Skeleton> has a name prop and loading=false`)
+      console.warn(`    ⚠  No <Skeleton name="..."> found at ${width}px`)
+      console.warn(`       Make sure your <Skeleton> has a name prop and a fixture prop`)
       continue
     }
 

package/dist/extract.js

@@ -10,7 +10,7 @@ const DEFAULT_LEAF_TAGS = new Set(['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'li'
 export function snapshotBones(el, name = 'component', config) {
     const rootRect = el.getBoundingClientRect();
     const bones = [];
-    const leafTags = config?.leafTags ? new Set(config.leafTags) : DEFAULT_LEAF_TAGS;
+    const leafTags = config?.leafTags ? new Set([...DEFAULT_LEAF_TAGS, ...config.leafTags]) : DEFAULT_LEAF_TAGS;
     const captureRoundedBorders = config?.captureRoundedBorders ?? true;
     const excludeTags = config?.excludeTags ? new Set(config.excludeTags) : null;
     const excludeSelectors = config?.excludeSelectors ?? null;
@@ -41,17 +41,18 @@ export function snapshotBones(el, name = 'component', config) {
         const hasBorder = captureRoundedBorders && borderTopWidth > 0 && style.borderTopColor !== 'rgba(0, 0, 0, 0)' && style.borderTopColor !== 'transparent';
         const hasBorderRadius = (parseFloat(style.borderTopLeftRadius) || 0) > 0;
         const hasVisualSurface = hasBg || hasBgImage || (hasBorder && hasBorderRadius);
+        const isTableNode = tag === 'tr' || tag === 'td' || tag === 'th' || tag === 'thead' || tag === 'tbody' || tag === 'table';
         if (isLeaf) {
             const rect = node.getBoundingClientRect();
             if (rect.width < 1 || rect.height < 1)
                 return;
-            const br = parseBorderRadius(style, node);
+            const br = isTableNode ? 0 : (parseBorderRadius(style, node) ?? 8);
             bones.push({
                 x: Math.round(rect.left - rootRect.left),
                 y: Math.round(rect.top - rootRect.top),
                 w: Math.round(rect.width),
                 h: Math.round(rect.height),
-                r: br ?? 8,
+                r: br,
             });
             return;
         }
@@ -60,13 +61,13 @@ export function snapshotBones(el, name = 'component', config) {
         if (hasVisualSurface) {
             const rect = node.getBoundingClientRect();
             if (rect.width >= 1 && rect.height >= 1) {
-                const br = parseBorderRadius(style, node);
+                const br = isTableNode ? 0 : (parseBorderRadius(style, node) ?? 8);
                 bones.push({
                     x: Math.round(rect.left - rootRect.left),
                     y: Math.round(rect.top - rootRect.top),
                     w: Math.round(rect.width),
                     h: Math.round(rect.height),
-                    r: br ?? 8,
+                    r: br,
                     c: true, // container bone — rendered at reduced opacity
                 });
             }
@@ -133,10 +134,14 @@ function extractNode(el) {
     const mar = extractSides(style, 'margin');
     if (mar)
         desc.margin = mar;
-    // Border radius
-    const br = parseBorderRadius(style, el);
-    if (br !== undefined)
-        desc.borderRadius = br;
+    // Border radius (skip table elements — they inherit from overflow:hidden parents)
+    const elTag = el.tagName.toLowerCase();
+    const isTableEl = elTag === 'tr' || elTag === 'td' || elTag === 'th' || elTag === 'thead' || elTag === 'tbody' || elTag === 'table';
+    if (!isTableEl) {
+        const br = parseBorderRadius(style, el);
+        if (br !== undefined)
+            desc.borderRadius = br;
+    }
     // Max width
     const maxW = parseFloat(style.maxWidth);
     if (maxW > 0 && isFinite(maxW))
@@ -345,10 +350,14 @@ function snapshotAsLeaf(el, style, desc) {
     const rect = el.getBoundingClientRect();
     desc.width = Math.round(rect.width);
     desc.height = Math.round(rect.height);
-    // Border radius
-    const br = parseBorderRadius(style, el);
-    if (br !== undefined)
-        desc.borderRadius = br;
+    // Border radius (skip table elements)
+    const leafTag = el.tagName.toLowerCase();
+    const isTableLeaf = leafTag === 'tr' || leafTag === 'td' || leafTag === 'th' || leafTag === 'thead' || leafTag === 'tbody' || leafTag === 'table';
+    if (!isTableLeaf) {
+        const br = parseBorderRadius(style, el);
+        if (br !== undefined)
+            desc.borderRadius = br;
+    }
     // If it has children, try to extract them — we just fix this node's own dimensions
     // so the layout engine treats it as a fixed-size container
     const children = [];

package/dist/react.d.ts

@@ -9,44 +9,20 @@ import type { SkeletonResult, ResponsiveBones, SnapshotConfig } from './types.js
  * ```ts
  * import './bones/registry'
  * ```
- *
- * Then every `<Skeleton name="blog-card">` automatically gets its bones — no
- * `initialBones` prop needed.
  */
 export declare function registerBones(map: Record<string, SkeletonResult | ResponsiveBones>): void;
 export interface SkeletonProps {
-    /** When true, shows the skeleton. When false, shows children and extracts layout. */
+    /** When true, shows the skeleton. When false, shows children. */
     loading: boolean;
-    /** Your component — rendered when not loading. The skeleton is extracted from it. */
+    /** Your component — rendered when not loading. */
     children: ReactNode;
     /**
-     * Name this skeleton. When provided:
-     * - After each snapshot, bones are registered to `window.__PRESKEL_BONES[name]`
-     * - The `boneyard build` CLI reads this registry to generate bones JSON files
-     *
-     * @example
-     * <Skeleton name="blog-card" loading={isLoading}>
-     *   <BlogCard />
-     * </Skeleton>
-     *
-     * Then run: npx boneyard capture http://localhost:3000 --out ./src/bones
-     * Which writes: ./src/bones/blog-card.bones.json
+     * Name this skeleton. Used by `npx boneyard build` to identify and capture bones.
+     * Also used to auto-resolve pre-generated bones from the registry.
      */
     name?: string;
     /**
-     * Pre-generated bones for zero first-load flash.
-     * Accepts a single `SkeletonResult` or a `ResponsiveBones` map (from `boneyard build`).
-     *
-     * - Single: used regardless of viewport width
-     * - Responsive: boneyard picks the nearest breakpoint match for the current container width
-     *
-     * After the first real render, live `snapshotBones` measurements replace the initial bones.
-     *
-     * @example
-     * import blogBones from './src/bones/blog-card.bones.json'
-     * <Skeleton loading={isLoading} initialBones={blogBones}>
-     *   <BlogCard />
-     * </Skeleton>
+     * Pre-generated bones. Accepts a single `SkeletonResult` or a `ResponsiveBones` map.
      */
     initialBones?: SkeletonResult | ResponsiveBones;
     /** Bone color (default: '#e0e0e0') */
@@ -56,52 +32,26 @@ export interface SkeletonProps {
     /** Additional className for the container */
     className?: string;
     /**
-     * Shown on the very first load if no cached bones and no initialBones.
-     * Unnecessary when initialBones is provided.
+     * Shown when loading is true and no bones are available.
      */
     fallback?: ReactNode;
     /**
-     * Controls how boneyard extracts bones from your component's DOM.
-     * Override the default extraction rules to match your design system.
-     *
-     * @example
-     * // Treat <Card> root divs as leaves, skip icons and footers
-     * snapshotConfig={{
-     *   leafTags: ['p', 'h1', 'h2', 'h3', 'li'],
-     *   excludeSelectors: ['.icon', '[data-no-skeleton]', 'footer'],
-     * }}
+     * Mock content rendered during `npx boneyard build` so the CLI can capture
+     * bone positions even when real data isn't available.
+     * Only rendered when the CLI sets `window.__BONEYARD_BUILD = true`.
+     */
+    fixture?: ReactNode;
+    /**
+     * Controls how `npx boneyard build` extracts bones from the fixture.
+     * Stored as a data attribute — the CLI reads it during capture.
      */
     snapshotConfig?: SnapshotConfig;
 }
 /**
  * Wrap any component to get automatic skeleton loading screens.
  *
- * How it works:
- * 1. When loading=false, your children render normally.
- *    After paint, boneyard snapshots the exact bone positions from the DOM.
- * 2. When loading=true, the cached bones are replayed as a skeleton overlay.
- * 3. On the very first load (no cache yet):
- *    - With `initialBones`: shows pre-generated bones immediately, no flash
- *    - Without: shows the `fallback` prop
- *
- * For zero first-load flash, run `npx boneyard capture` to generate initialBones.
- *
- * @example Basic
- * ```tsx
- * import { Skeleton } from '@0xgf/boneyard/react'
- *
- * <Skeleton name="blog-card" loading={isLoading}>
- *   <BlogCard data={data} />
- * </Skeleton>
- * ```
- *
- * @example With pre-generated responsive bones (zero flash)
- * ```tsx
- * import blogBones from './src/bones/blog-card.bones.json'
- *
- * <Skeleton name="blog-card" loading={isLoading} initialBones={blogBones}>
- *   <BlogCard data={data} />
- * </Skeleton>
- * ```
+ * 1. Run `npx boneyard build` — captures bone positions from your rendered UI
+ * 2. Import the generated registry in your app entry
+ * 3. `<Skeleton name="..." loading={isLoading}>` auto-resolves bones by name
  */
-export declare function Skeleton({ loading, children, name, initialBones, color, animate, className, fallback, snapshotConfig, }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
+export declare function Skeleton({ loading, children, name, initialBones, color, animate, className, fallback, fixture, snapshotConfig, }: SkeletonProps): import("react/jsx-runtime").JSX.Element;

package/dist/react.js

@@ -2,8 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState, useEffect } from 'react';
 import { snapshotBones } from './extract.js';
 // ── Bones registry ──────────────────────────────────────────────────────────
-// Module-level registry populated by registerBones() from the generated registry file.
-// This lets <Skeleton name="x"> auto-resolve bones without an explicit initialBones prop.
 const bonesRegistry = new Map();
 /**
  * Register pre-generated bones so `<Skeleton name="...">` can auto-resolve them.
@@ -14,15 +12,16 @@ const bonesRegistry = new Map();
  * ```ts
  * import './bones/registry'
  * ```
- *
- * Then every `<Skeleton name="blog-card">` automatically gets its bones — no
- * `initialBones` prop needed.
  */
 export function registerBones(map) {
     for (const [name, bones] of Object.entries(map)) {
         bonesRegistry.set(name, bones);
     }
 }
+// ── Expose snapshotBones for CLI build mode (module-level, no useEffect) ────
+if (typeof window !== 'undefined' && window.__BONEYARD_BUILD) {
+    window.__BONEYARD_SNAPSHOT = snapshotBones;
+}
 /** Pick the right SkeletonResult from a responsive set for the current width */
 function resolveResponsive(bones, width) {
     if (!('breakpoints' in bones))
@@ -30,7 +29,6 @@ function resolveResponsive(bones, width) {
     const bps = Object.keys(bones.breakpoints).map(Number).sort((a, b) => a - b);
     if (bps.length === 0)
         return null;
-    // Largest breakpoint that fits (same logic as CSS min-width media queries)
     const match = [...bps].reverse().find(bp => width >= bp) ?? bps[0];
     return bones.breakpoints[match] ?? null;
 }
@@ -47,39 +45,15 @@ function lightenHex(hex, amount) {
 /**
  * Wrap any component to get automatic skeleton loading screens.
  *
- * How it works:
- * 1. When loading=false, your children render normally.
- *    After paint, boneyard snapshots the exact bone positions from the DOM.
- * 2. When loading=true, the cached bones are replayed as a skeleton overlay.
- * 3. On the very first load (no cache yet):
- *    - With `initialBones`: shows pre-generated bones immediately, no flash
- *    - Without: shows the `fallback` prop
- *
- * For zero first-load flash, run `npx boneyard capture` to generate initialBones.
- *
- * @example Basic
- * ```tsx
- * import { Skeleton } from '@0xgf/boneyard/react'
- *
- * <Skeleton name="blog-card" loading={isLoading}>
- *   <BlogCard data={data} />
- * </Skeleton>
- * ```
- *
- * @example With pre-generated responsive bones (zero flash)
- * ```tsx
- * import blogBones from './src/bones/blog-card.bones.json'
- *
- * <Skeleton name="blog-card" loading={isLoading} initialBones={blogBones}>
- *   <BlogCard data={data} />
- * </Skeleton>
- * ```
+ * 1. Run `npx boneyard build` — captures bone positions from your rendered UI
+ * 2. Import the generated registry in your app entry
+ * 3. `<Skeleton name="..." loading={isLoading}>` auto-resolves bones by name
  */
-export function Skeleton({ loading, children, name, initialBones, color = '#e0e0e0', animate = true, className, fallback, snapshotConfig, }) {
+export function Skeleton({ loading, children, name, initialBones, color = '#e0e0e0', animate = true, className, fallback, fixture, snapshotConfig, }) {
     const containerRef = useRef(null);
-    const [cachedBones, setCachedBones] = useState(null);
     const [containerWidth, setContainerWidth] = useState(0);
-    // Track container width so responsive initialBones picks the right breakpoint
+    const isBuildMode = typeof window !== 'undefined' && window.__BONEYARD_BUILD === true;
+    // Track container width for responsive breakpoint selection
     useEffect(() => {
         const el = containerRef.current;
         if (!el)
@@ -91,55 +65,32 @@ export function Skeleton({ loading, children, name, initialBones, color = '#e0e0
         setContainerWidth(Math.round(el.getBoundingClientRect().width));
         return () => ro.disconnect();
     }, []);
-    // After every non-loading render, snapshot the DOM and update the cache
-    useEffect(() => {
-        if (loading || !containerRef.current)
-            return;
-        let raf1, raf2;
-        raf1 = requestAnimationFrame(() => {
-            raf2 = requestAnimationFrame(() => {
-                const el = containerRef.current;
-                if (!el)
-                    return;
-                const firstChild = el.firstElementChild;
-                if (!firstChild)
-                    return;
-                try {
-                    const result = snapshotBones(firstChild, name ?? 'component', snapshotConfig);
-                    setCachedBones(result);
-                    // Register to global so `boneyard build` CLI can read it
-                    if (name && typeof window !== 'undefined') {
-                        const w = window;
-                        w.__BONEYARD_BONES = w.__BONEYARD_BONES ?? {};
-                        w.__BONEYARD_BONES[name] = result;
-                    }
-                }
-                catch {
-                    // keep existing cache on error
-                }
-            });
-        });
-        return () => {
-            cancelAnimationFrame(raf1);
-            cancelAnimationFrame(raf2);
-        };
-    }, [loading, name]);
-    // Active bones: live cache > explicit initialBones > registry lookup
-    const effectiveInitialBones = initialBones ?? (name ? bonesRegistry.get(name) : undefined);
-    const resolved = !cachedBones && effectiveInitialBones && containerWidth > 0
-        ? resolveResponsive(effectiveInitialBones, containerWidth)
+    // Data attributes for CLI discovery
+    const dataAttrs = {};
+    if (name) {
+        dataAttrs['data-boneyard'] = name;
+        if (snapshotConfig) {
+            dataAttrs['data-boneyard-config'] = JSON.stringify(snapshotConfig);
+        }
+    }
+    // Build mode: render fixture so CLI can capture bones from it
+    if (isBuildMode && fixture) {
+        return (_jsx("div", { ref: containerRef, className: className, style: { position: 'relative' }, ...dataAttrs, children: _jsx("div", { children: fixture }) }));
+    }
+    // Resolve bones: explicit initialBones > registry lookup
+    const effectiveBones = initialBones ?? (name ? bonesRegistry.get(name) : undefined);
+    const activeBones = effectiveBones && containerWidth > 0
+        ? resolveResponsive(effectiveBones, containerWidth)
         : null;
-    const activeBones = cachedBones ?? resolved;
     const showSkeleton = loading && activeBones;
     const showFallback = loading && !activeBones;
-    return (_jsxs("div", { ref: containerRef, className: className, style: { position: 'relative' }, children: [_jsx("div", { style: showSkeleton ? { visibility: 'hidden' } : undefined, children: showFallback ? fallback : children }), showSkeleton && (_jsx("div", { style: { position: 'absolute', inset: 0 }, children: _jsxs("div", { style: { position: 'relative', width: '100%', height: activeBones.height }, children: [activeBones.bones.map((b, i) => (_jsx("div", { style: {
+    return (_jsxs("div", { ref: containerRef, className: className, style: { position: 'relative' }, ...dataAttrs, children: [_jsx("div", { style: showSkeleton ? { visibility: 'hidden' } : undefined, children: showFallback ? fallback : children }), showSkeleton && (_jsx("div", { style: { position: 'absolute', inset: 0 }, children: _jsxs("div", { style: { position: 'relative', width: '100%', height: activeBones.height }, children: [activeBones.bones.map((b, i) => (_jsx("div", { style: {
                                 position: 'absolute',
                                 left: b.x,
                                 top: b.y,
                                 width: b.w,
                                 height: b.h,
                                 borderRadius: typeof b.r === 'string' ? b.r : `${b.r}px`,
-                                // Container bones are rendered lighter so children stand out on top
                                 backgroundColor: b.c ? lightenHex(color, 0.45) : color,
                                 animation: animate ? 'boneyard-pulse 1.8s ease-in-out infinite' : undefined,
                             } }, i))), animate && (_jsx("style", { children: `@keyframes boneyard-pulse{0%,100%{background-color:${color}}50%{background-color:${lightenHex(color, 0.3)}}}` }))] }) }))] }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@0xgf/boneyard",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Pixel-perfect skeleton loading screens. Wrap your component in <Skeleton> and boneyard snapshots the real DOM layout — no manual descriptors, no configuration.",
   "type": "module",
   "main": "./dist/index.js",