@0xgf/boneyard 1.0.0 → 1.1.0

package/bin/boneyard.mjs

@@ -43,7 +43,7 @@ if (command !== 'build') {
 const urls = []
 // Auto-detect: prefer ./src/bones for projects with a src/ directory (Next.js, Vite, etc.)
 let outDir = existsSync(resolve(process.cwd(), 'src')) ? './src/bones' : './bones'
-let breakpoints = [375, 768, 1280]
+let breakpoints = null // null = auto-detect
 let waitMs = 800
 
 for (let i = 1; i < args.length; i++) {
@@ -58,6 +58,57 @@ for (let i = 1; i < args.length; i++) {
   }
 }
 
+// ── Auto-detect breakpoints from Tailwind ────────────────────────────────────
+
+/** Tailwind v4 default breakpoints */
+const TAILWIND_DEFAULTS = [640, 768, 1024, 1280, 1536]
+
+function detectTailwindBreakpoints() {
+  // Check for Tailwind v4 (CSS-based config)
+  const cssConfigPaths = [
+    'src/app/globals.css',
+    'src/globals.css',
+    'app/globals.css',
+    'styles/globals.css',
+    'src/index.css',
+    'index.css',
+  ]
+
+  for (const p of cssConfigPaths) {
+    const full = resolve(process.cwd(), p)
+    if (!existsSync(full)) continue
+    try {
+      const css = await import('fs').then(m => m.readFileSync(full, 'utf-8'))
+      if (css.includes('@import "tailwindcss"') || css.includes("@import 'tailwindcss'") || css.includes('@tailwind')) {
+        return TAILWIND_DEFAULTS
+      }
+    } catch {}
+  }
+
+  // Check for tailwind in package.json dependencies
+  try {
+    const pkgPath = resolve(process.cwd(), 'package.json')
+    if (existsSync(pkgPath)) {
+      const pkg = JSON.parse(await import('fs').then(m => m.readFileSync(pkgPath, 'utf-8')))
+      const allDeps = { ...pkg.dependencies, ...pkg.devDependencies }
+      if (allDeps['tailwindcss']) return TAILWIND_DEFAULTS
+    }
+  } catch {}
+
+  return null
+}
+
+if (!breakpoints) {
+  const tw = await detectTailwindBreakpoints()
+  if (tw) {
+    // Add mobile (375) as the smallest breakpoint since Tailwind's start at 640
+    breakpoints = [375, ...tw]
+    process.stdout.write(`  boneyard: detected Tailwind — using breakpoints: ${breakpoints.join(', ')}px\n`)
+  } else {
+    breakpoints = [375, 768, 1280]
+  }
+}
+
 // ── Auto-detect dev server ────────────────────────────────────────────────────
 
 /**
@@ -133,6 +184,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 +204,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.1.0",
   "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",