@0xgf/boneyard 1.0.1 → 1.2.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 ────────────────────────────────────────────────────
 
 /**

package/dist/index.d.ts

@@ -30,8 +30,7 @@ export { fromElement } from './extract.js';
 export { extractResponsive } from './responsive.js';
 /**
  * Compute skeleton bone positions from a descriptor at a given width.
- * Uses @chenglou/pretext for text measurement — no DOM needed.
- * Ideal for SSR or workers where `snapshotBones` isn't available.
+ * No DOM needed — works in SSR, workers, and edge functions.
  */
 export { computeLayout } from './layout.js';
 /**

package/dist/index.js

@@ -32,8 +32,7 @@ export { fromElement } from './extract.js';
 export { extractResponsive } from './responsive.js';
 /**
  * Compute skeleton bone positions from a descriptor at a given width.
- * Uses @chenglou/pretext for text measurement — no DOM needed.
- * Ideal for SSR or workers where `snapshotBones` isn't available.
+ * No DOM needed — works in SSR, workers, and edge functions.
  */
 export { computeLayout } from './layout.js';
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@0xgf/boneyard",
-  "version": "1.0.1",
+  "version": "1.2.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",