@lukas_holdings/castdom 1.0.3 → 1.0.4

package/dist/cli.js

@@ -1,46 +1,577 @@
 #!/usr/bin/env node
-var V=(e=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(e,{get:(t,n)=>(typeof require<"u"?require:t)[n]}):e)(function(e){if(typeof require<"u")return require.apply(this,arguments);throw Error('Dynamic require of "'+e+'" is not supported')});import{resolve as S,join as ae}from"path";import{readFileSync as J,writeFileSync as H,mkdirSync as ce,existsSync as C}from"fs";var p={outDir:".castdom",breakpoints:[375,768,1280],color:"#e0e0e0",shimmerColor:"#f0f0f0",animationDuration:1500,contentAware:!0,minBoneSize:4,classPrefix:"castdom",inlineStyles:!1,ssr:!0},v={text:1,heading:2,image:3,avatar:4,button:5,input:6,icon:7,divider:8,block:0},W=Object.fromEntries(Object.entries(v).map(([e,t])=>[t,e]));var B=new Set(["A","ABBR","B","BDO","BR","CITE","CODE","DFN","EM","I","KBD","MARK","Q","S","SAMP","SMALL","SPAN","STRONG","SUB","SUP","TIME","U","VAR","WBR"]),E=new Set(["SCRIPT","STYLE","NOSCRIPT","TEMPLATE","SVG","CANVAS","VIDEO","AUDIO","IFRAME","OBJECT","EMBED"]);function T(e){let t=e.tagName;if(t==="IMG"||t==="PICTURE"){let c=e.getBoundingClientRect().width,r=e.getBoundingClientRect().height;return Math.min(c,r)/Math.max(c,r)>.85&&c<120?"avatar":"image"}if(t==="INPUT"||t==="TEXTAREA"||t==="SELECT")return"input";if(t==="BUTTON"||e.getAttribute("role")==="button")return"button";if(t==="HR")return"divider";if(/^H[1-6]$/.test(t))return"heading";if(t==="SVG"||t==="svg")return"icon";let n=getComputedStyle(e),o=parseInt(n.borderRadius,10),a=e.getBoundingClientRect();if(o>=a.width/2&&a.width<120&&a.width>16)return"avatar";if(e.childNodes.length>0){let c=Array.from(e.childNodes).some(r=>r.nodeType===Node.TEXT_NODE&&r.textContent?.trim());if(c&&B.has(t)||c&&t==="P")return"text"}return"block"}function A(e,t){if(t==="avatar")return 9999;if(t==="button"){let a=getComputedStyle(e);return Math.min(parseInt(a.borderRadius,10)||6,9999)}let n=getComputedStyle(e),o=parseInt(n.borderRadius,10);return isNaN(o)?0:Math.min(o,9999)}function N(e){let t=getComputedStyle(e);if(t.display==="none"||t.visibility==="hidden"||parseFloat(t.opacity)===0)return!1;let n=e.getBoundingClientRect();return n.width>0&&n.height>0}function R(e,t){let n=e.tagName;return!!(n==="IMG"||n==="PICTURE"||n==="INPUT"||n==="TEXTAREA"||n==="SELECT"||n==="BUTTON"||n==="HR"||n==="SVG"||n==="svg"||t&&Array.from(e.childNodes).every(a=>a.nodeType===Node.TEXT_NODE||B.has(a.tagName))&&e.textContent?.trim()||e.children.length===0)}function X(e,t={}){let n=t.contentAware??p.contentAware,o=t.minBoneSize??p.minBoneSize,a=e.getBoundingClientRect(),c=[];function r(i){if(!E.has(i.tagName)&&N(i)){if(R(i,n)){let l=i.getBoundingClientRect();if(l.width<o||l.height<o)return;let s=n?T(i):"block",u=A(i,s);c.push({x:Math.round((l.left-a.left)*2)/2,y:Math.round((l.top-a.top)*2)/2,w:Math.round(l.width*2)/2,h:Math.round(l.height*2)/2,r:u,kind:s});return}for(let l of i.children)r(l)}}return r(e),{viewport:window.innerWidth,containerWidth:Math.round(a.width*2)/2,containerHeight:Math.round(a.height*2)/2,bones:c}}function I(e,t={}){return`
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// src/cli.ts
+import { resolve, join } from "path";
+import { readFileSync, writeFileSync, mkdirSync, existsSync } from "fs";
+
+// src/core/types.ts
+var DEFAULTS = {
+  outDir: ".castdom",
+  breakpoints: [375, 768, 1280],
+  color: "#e0e0e0",
+  shimmerColor: "#f0f0f0",
+  animationDuration: 1500,
+  contentAware: true,
+  minBoneSize: 4,
+  classPrefix: "castdom",
+  inlineStyles: false,
+  ssr: true
+};
+var BONE_KIND_INDEX = {
+  text: 1,
+  heading: 2,
+  image: 3,
+  avatar: 4,
+  button: 5,
+  input: 6,
+  icon: 7,
+  divider: 8,
+  block: 0
+};
+var BONE_KIND_FROM_INDEX = Object.fromEntries(
+  Object.entries(BONE_KIND_INDEX).map(([k, v]) => [v, k])
+);
+
+// src/core/extractor.ts
+var INLINE_TAGS = /* @__PURE__ */ new Set([
+  "A",
+  "ABBR",
+  "B",
+  "BDO",
+  "BR",
+  "CITE",
+  "CODE",
+  "DFN",
+  "EM",
+  "I",
+  "KBD",
+  "MARK",
+  "Q",
+  "S",
+  "SAMP",
+  "SMALL",
+  "SPAN",
+  "STRONG",
+  "SUB",
+  "SUP",
+  "TIME",
+  "U",
+  "VAR",
+  "WBR"
+]);
+var SKIP_TAGS = /* @__PURE__ */ new Set([
+  "SCRIPT",
+  "STYLE",
+  "NOSCRIPT",
+  "TEMPLATE",
+  "SVG",
+  "CANVAS",
+  "VIDEO",
+  "AUDIO",
+  "IFRAME",
+  "OBJECT",
+  "EMBED"
+]);
+function detectKind(el) {
+  const tag = el.tagName;
+  if (tag === "IMG" || tag === "PICTURE") {
+    const w = el.getBoundingClientRect().width;
+    const h = el.getBoundingClientRect().height;
+    const ratio = Math.min(w, h) / Math.max(w, h);
+    if (ratio > 0.85 && w < 120) return "avatar";
+    return "image";
+  }
+  if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return "input";
+  if (tag === "BUTTON" || el.getAttribute("role") === "button") return "button";
+  if (tag === "HR") return "divider";
+  if (/^H[1-6]$/.test(tag)) return "heading";
+  if (tag === "SVG" || tag === "svg") return "icon";
+  const style = getComputedStyle(el);
+  const borderRadius = parseInt(style.borderRadius, 10);
+  const rect = el.getBoundingClientRect();
+  if (borderRadius >= rect.width / 2 && rect.width < 120 && rect.width > 16) {
+    return "avatar";
+  }
+  if (el.childNodes.length > 0) {
+    const hasDirectText = Array.from(el.childNodes).some(
+      (n) => n.nodeType === Node.TEXT_NODE && n.textContent?.trim()
+    );
+    if (hasDirectText && INLINE_TAGS.has(tag)) return "text";
+    if (hasDirectText && tag === "P") return "text";
+  }
+  return "block";
+}
+function computeRadius(el, kind) {
+  if (kind === "avatar") return 9999;
+  if (kind === "button") {
+    const style2 = getComputedStyle(el);
+    return Math.min(parseInt(style2.borderRadius, 10) || 6, 9999);
+  }
+  const style = getComputedStyle(el);
+  const r = parseInt(style.borderRadius, 10);
+  return isNaN(r) ? 0 : Math.min(r, 9999);
+}
+function isVisible(el) {
+  const style = getComputedStyle(el);
+  if (style.display === "none") return false;
+  if (style.visibility === "hidden") return false;
+  if (parseFloat(style.opacity) === 0) return false;
+  const rect = el.getBoundingClientRect();
+  return rect.width > 0 && rect.height > 0;
+}
+function isLeaf(el, contentAware) {
+  const tag = el.tagName;
+  if (tag === "IMG" || tag === "PICTURE" || tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT" || tag === "BUTTON" || tag === "HR" || tag === "SVG" || tag === "svg") {
+    return true;
+  }
+  if (contentAware) {
+    const hasOnlyText = Array.from(el.childNodes).every(
+      (n) => n.nodeType === Node.TEXT_NODE || INLINE_TAGS.has(n.tagName)
+    );
+    if (hasOnlyText && el.textContent?.trim()) return true;
+  }
+  if (el.children.length === 0) return true;
+  return false;
+}
+function extractBones(container, options = {}) {
+  const contentAware = options.contentAware ?? DEFAULTS.contentAware;
+  const minSize = options.minBoneSize ?? DEFAULTS.minBoneSize;
+  const containerRect = container.getBoundingClientRect();
+  const bones = [];
+  function walk(el) {
+    if (SKIP_TAGS.has(el.tagName)) return;
+    if (!isVisible(el)) return;
+    if (isLeaf(el, contentAware)) {
+      const rect = el.getBoundingClientRect();
+      if (rect.width < minSize || rect.height < minSize) return;
+      const kind = contentAware ? detectKind(el) : "block";
+      const r = computeRadius(el, kind);
+      bones.push({
+        x: Math.round((rect.left - containerRect.left) * 2) / 2,
+        y: Math.round((rect.top - containerRect.top) * 2) / 2,
+        w: Math.round(rect.width * 2) / 2,
+        h: Math.round(rect.height * 2) / 2,
+        r,
+        kind
+      });
+      return;
+    }
+    for (const child of el.children) {
+      walk(child);
+    }
+  }
+  walk(container);
+  return {
+    viewport: window.innerWidth,
+    containerWidth: Math.round(containerRect.width * 2) / 2,
+    containerHeight: Math.round(containerRect.height * 2) / 2,
+    bones
+  };
+}
+function getExtractorScript(selector, options = {}) {
+  return `
 (function() {
-  ${N.toString()}
-  ${R.toString()}
-  ${T.toString()}
-  ${A.toString()}
+  ${isVisible.toString()}
+  ${isLeaf.toString()}
+  ${detectKind.toString()}
+  ${computeRadius.toString()}
 
-  var INLINE_TAGS = new Set(${JSON.stringify([...B])});
-  var SKIP_TAGS = new Set(${JSON.stringify([...E])});
+  var INLINE_TAGS = new Set(${JSON.stringify([...INLINE_TAGS])});
+  var SKIP_TAGS = new Set(${JSON.stringify([...SKIP_TAGS])});
   var DEFAULTS = { contentAware: true, minBoneSize: 4 };
 
-  ${X.toString()}
+  ${extractBones.toString()}
 
-  var container = document.querySelector(${JSON.stringify(e)});
-  if (!container) throw new Error('CastDOM: Container not found: ' + ${JSON.stringify(e)});
-  return extractBones(container, ${JSON.stringify(t)});
+  var container = document.querySelector(${JSON.stringify(selector)});
+  if (!container) throw new Error('CastDOM: Container not found: ' + ${JSON.stringify(selector)});
+  return extractBones(container, ${JSON.stringify(options)});
 })()
-  `.trim()}async function q(){try{return await import("playwright")}catch{throw new Error(`CastDOM: Playwright is required for extraction. Install it with:
-  npm install -D playwright
-  npx playwright install chromium`)}}function Y(e){let t=JSON.stringify(e),n=0;for(let o=0;o<t.length;o++){let a=t.charCodeAt(o);n=(n<<5)-n+a|0}return Math.abs(n).toString(36).padStart(8,"0")}async function j(e){let t=await q(),n=e.breakpoints??p.breakpoints,o=e.headless??!0,a=e.timeout??3e4,c=e.targets.length*n.length,r=0,i=await t.chromium.launch({headless:o}),l=[];try{for(let s of e.targets){let u=s.route?`${e.baseURL}${s.route}`:e.baseURL,d=[];for(let h of n){r++,e.onProgress?.(`Extracting "${s.name}" at ${h}px`,r,c);let m=await i.newPage();try{await m.setViewportSize({width:h,height:900}),await m.goto(u,{waitUntil:"networkidle",timeout:a}),e.waitFor&&await m.waitForSelector(e.waitFor,{timeout:a}),await m.waitForSelector(s.selector,{timeout:a});let g=I(s.selector,{contentAware:e.contentAware??p.contentAware,minBoneSize:e.minBoneSize??p.minBoneSize}),x=await m.evaluate(g);d.push(x)}finally{await m.close()}}let b={name:s.name,hash:Y(d),breakpoints:d,extractedAt:Date.now()};l.push({target:s,skeleton:b})}}finally{await i.close()}return l}function F(e){let t=[...e.bones].sort((c,r)=>c.y-r.y||c.x-r.x),n=[],o=0,a=0;for(let c of t){let r=Math.round(c.x*2),i=Math.round(c.y*2),l=Math.round(c.w*2),s=Math.round(c.h*2),u=Math.round(c.r*2),d=v[c.kind??"block"];n.push(r-o,i-a,l,s,u,d),o=r,a=i}return{v:1,vw:e.viewport,c:[Math.round(e.containerWidth*2),Math.round(e.containerHeight*2)],d:n}}function L(e){let n=[...[e.v,e.vw,e.c[0],e.c[1]],e.d.length,...e.d],o=[];for(let a of n){let r=a>=0?a*2:-a*2-1;for(;r>=128;)o.push(r&127|128),r>>>=7;o.push(r&127)}return typeof Buffer<"u"?Buffer.from(new Uint8Array(o)).toString("base64"):btoa(String.fromCharCode(...o))}function z(e){return{color:e?.color??p.color,shimmerColor:e?.shimmerColor??p.shimmerColor,animationDuration:e?.animationDuration??p.animationDuration,classPrefix:e?.classPrefix??p.classPrefix,inlineStyles:e?.inlineStyles??p.inlineStyles}}function Q(e,t){let n=z(t),{classPrefix:o,color:a,shimmerColor:c,animationDuration:r}=n,i=[...e.breakpoints].sort((u,d)=>u.viewport-d.viewport),l=e.name,s=[];if(s.push(`.${o}-${l} .${o}-bone{position:absolute;background:linear-gradient(90deg,${a} 25%,${c} 50%,${a} 75%);background-size:200% 100%;animation:${o}-shimmer ${r}ms ease-in-out infinite}`),i.length>1)for(let u=0;u<i.length;u++){let d=i[u],b=i[u+1],h=i[u-1],m;if(u===0)m=`@media(max-width:${Math.floor((d.viewport+b.viewport)/2)-1}px)`;else if(u===i.length-1)m=`@media(min-width:${Math.floor((h.viewport+d.viewport)/2)}px)`;else{let g=Math.floor((h.viewport+d.viewport)/2),x=Math.floor((d.viewport+b.viewport)/2)-1;m=`@media(min-width:${g}px) and (max-width:${x}px)`}s.push(`${m}{.${o}-${l} .${o}-bp-${d.viewport}{display:block}}`)}else i.length===1&&s.push(`.${o}-${l} .${o}-bp-${i[0].viewport}{display:block}`);return s.join(`
-`)}function k(e,t){let n=z(t),o=[];o.push(`@keyframes ${n.classPrefix}-shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}`),o.push(`@media(prefers-reduced-motion:reduce){.${n.classPrefix}-bone{animation:none!important}}`);for(let a of e)o.push(Q(a,t));return o.join(`
-`)}function Z(e,t){return{...e,breakpoints:e.breakpoints.map(o=>{let a=[...o.bones],c=new Array(a.length).fill(!0);for(let r=0;r<a.length;r++)if(c[r])for(let i=r+1;i<a.length;i++){if(!c[i])continue;let l=a[r],s=a[i];s.x>=l.x-t&&s.y>=l.y-t&&s.x+s.w<=l.x+l.w+t&&s.y+s.h<=l.y+l.h+t&&(l.w*l.h>s.w*s.h*4||(c[i]=!1)),l.x>=s.x-t&&l.y>=s.y-t&&l.x+l.w<=s.x+s.w+t&&l.y+l.h<=s.y+s.h+t&&(s.w*s.h>l.w*l.h*4||(c[r]=!1))}return{...o,bones:a.filter((r,i)=>c[i])}})}}function ee(e){return{...e,breakpoints:e.breakpoints.map(t=>({...t,bones:t.bones.filter(n=>isFinite(n.x)&&isFinite(n.y)&&n.w>0&&n.h>0&&isFinite(n.r))}))}}function U(e,t={}){let n=t.dedupe??!0,o=t.overlapThreshold??2,a=t.compress??!0,c=t.generateTypes??!0,r=t.base64??!1,i=e.map(f=>f.skeleton);i=i.map(ee),n&&(i=i.map(f=>Z(f,o)));let s=JSON.stringify(i).length,u=s,d={};if(a||r)for(let f of i){let w=[],y=0;for(let $ of f.breakpoints){let M=F($);y+=JSON.stringify(M).length,r&&w.push(L(M))}u=y,r&&(d[f.name]=w)}let b=k(i),h;c&&(h=te(i));let m=i.reduce((f,w)=>f+w.breakpoints.reduce((y,$)=>y+$.bones.length,0),0),g=[...new Set(i.flatMap(f=>f.breakpoints.map(w=>w.viewport)))].sort((f,w)=>f-w),x={skeletonCount:i.length,totalBones:m,rawSize:s,compressedSize:u,compressionRatio:s>0?1-u/s:0,breakpoints:g};return{manifest:{version:1,generatedAt:Date.now(),skeletons:i},css:b,types:h,encoded:r?d:void 0,stats:x}}function te(e){return`// Auto-generated by CastDOM \u2014 do not edit
+  `.trim();
+}
+
+// src/build/snapshot.ts
+async function getPlaywright() {
+  try {
+    return await import("playwright");
+  } catch {
+    throw new Error(
+      "CastDOM: Playwright is required for extraction. Install it with:\n  npm install -D playwright\n  npx playwright install chromium"
+    );
+  }
+}
+function hashSkeleton(breakpoints) {
+  const str = JSON.stringify(breakpoints);
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    const chr = str.charCodeAt(i);
+    hash = (hash << 5) - hash + chr | 0;
+  }
+  return Math.abs(hash).toString(36).padStart(8, "0");
+}
+async function snapshot(options) {
+  const pw = await getPlaywright();
+  const breakpoints = options.breakpoints ?? DEFAULTS.breakpoints;
+  const headless = options.headless ?? true;
+  const timeout = options.timeout ?? 3e4;
+  const total = options.targets.length * breakpoints.length;
+  let current = 0;
+  const browser = await pw.chromium.launch({ headless });
+  const results = [];
+  try {
+    for (const target of options.targets) {
+      const url = target.route ? `${options.baseURL}${target.route}` : options.baseURL;
+      const breakpointData = [];
+      for (const vpWidth of breakpoints) {
+        current++;
+        options.onProgress?.(
+          `Extracting "${target.name}" at ${vpWidth}px`,
+          current,
+          total
+        );
+        const page = await browser.newPage();
+        try {
+          await page.setViewportSize({ width: vpWidth, height: 900 });
+          await page.goto(url, { waitUntil: "networkidle", timeout });
+          if (options.waitFor) {
+            await page.waitForSelector(options.waitFor, { timeout });
+          }
+          await page.waitForSelector(target.selector, { timeout });
+          const script = getExtractorScript(target.selector, {
+            contentAware: options.contentAware ?? DEFAULTS.contentAware,
+            minBoneSize: options.minBoneSize ?? DEFAULTS.minBoneSize
+          });
+          const data = await page.evaluate(script);
+          breakpointData.push(data);
+        } finally {
+          await page.close();
+        }
+      }
+      const skeleton = {
+        name: target.name,
+        hash: hashSkeleton(breakpointData),
+        breakpoints: breakpointData,
+        extractedAt: Date.now()
+      };
+      results.push({ target, skeleton });
+    }
+  } finally {
+    await browser.close();
+  }
+  return results;
+}
+
+// src/core/compress.ts
+function compressBones(bp) {
+  const sorted = [...bp.bones].sort((a, b) => a.y - b.y || a.x - b.x);
+  const data = [];
+  let prevX = 0;
+  let prevY = 0;
+  for (const bone of sorted) {
+    const x = Math.round(bone.x * 2);
+    const y = Math.round(bone.y * 2);
+    const w = Math.round(bone.w * 2);
+    const h = Math.round(bone.h * 2);
+    const r = Math.round(bone.r * 2);
+    const kind = BONE_KIND_INDEX[bone.kind ?? "block"];
+    data.push(x - prevX, y - prevY, w, h, r, kind);
+    prevX = x;
+    prevY = y;
+  }
+  return {
+    v: 1,
+    vw: bp.viewport,
+    c: [
+      Math.round(bp.containerWidth * 2),
+      Math.round(bp.containerHeight * 2)
+    ],
+    d: data
+  };
+}
+function encodeBonesToBase64(compressed) {
+  const header = [compressed.v, compressed.vw, compressed.c[0], compressed.c[1]];
+  const allNums = [...header, compressed.d.length, ...compressed.d];
+  const bytes = [];
+  for (const n of allNums) {
+    const z = n >= 0 ? n * 2 : -n * 2 - 1;
+    let val = z;
+    while (val >= 128) {
+      bytes.push(val & 127 | 128);
+      val >>>= 7;
+    }
+    bytes.push(val & 127);
+  }
+  if (typeof Buffer !== "undefined") {
+    return Buffer.from(new Uint8Array(bytes)).toString("base64");
+  }
+  return btoa(String.fromCharCode(...bytes));
+}
+
+// src/core/renderer.ts
+function resolveConfig(config) {
+  return {
+    color: config?.color ?? DEFAULTS.color,
+    shimmerColor: config?.shimmerColor ?? DEFAULTS.shimmerColor,
+    animationDuration: config?.animationDuration ?? DEFAULTS.animationDuration,
+    classPrefix: config?.classPrefix ?? DEFAULTS.classPrefix,
+    inlineStyles: config?.inlineStyles ?? DEFAULTS.inlineStyles
+  };
+}
+function generateCSS(skeleton, config) {
+  const cfg = resolveConfig(config);
+  const { classPrefix: p, color, shimmerColor, animationDuration } = cfg;
+  const breakpoints = [...skeleton.breakpoints].sort(
+    (a, b) => a.viewport - b.viewport
+  );
+  const name = skeleton.name;
+  const parts = [];
+  parts.push(
+    `.${p}-${name} .${p}-bone{position:absolute;background:linear-gradient(90deg,${color} 25%,${shimmerColor} 50%,${color} 75%);background-size:200% 100%;animation:${p}-shimmer ${animationDuration}ms ease-in-out infinite}`
+  );
+  if (breakpoints.length > 1) {
+    for (let i = 0; i < breakpoints.length; i++) {
+      const bp = breakpoints[i];
+      const next = breakpoints[i + 1];
+      const prev = breakpoints[i - 1];
+      let query;
+      if (i === 0) {
+        const max = Math.floor((bp.viewport + next.viewport) / 2) - 1;
+        query = `@media(max-width:${max}px)`;
+      } else if (i === breakpoints.length - 1) {
+        const min = Math.floor((prev.viewport + bp.viewport) / 2);
+        query = `@media(min-width:${min}px)`;
+      } else {
+        const min = Math.floor((prev.viewport + bp.viewport) / 2);
+        const max = Math.floor((bp.viewport + next.viewport) / 2) - 1;
+        query = `@media(min-width:${min}px) and (max-width:${max}px)`;
+      }
+      parts.push(
+        `${query}{.${p}-${name} .${p}-bp-${bp.viewport}{display:block}}`
+      );
+    }
+  } else if (breakpoints.length === 1) {
+    parts.push(
+      `.${p}-${name} .${p}-bp-${breakpoints[0].viewport}{display:block}`
+    );
+  }
+  return parts.join("\n");
+}
+function generateCriticalCSS(skeletons, config) {
+  const cfg = resolveConfig(config);
+  const parts = [];
+  parts.push(
+    `@keyframes ${cfg.classPrefix}-shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}`
+  );
+  parts.push(
+    `@media(prefers-reduced-motion:reduce){.${cfg.classPrefix}-bone{animation:none!important}}`
+  );
+  for (const skeleton of skeletons) {
+    parts.push(generateCSS(skeleton, config));
+  }
+  return parts.join("\n");
+}
+
+// src/build/compiler.ts
+function deduplicateBones(skeleton, threshold) {
+  const result = {
+    ...skeleton,
+    breakpoints: skeleton.breakpoints.map((bp) => {
+      const bones = [...bp.bones];
+      const keep = new Array(bones.length).fill(true);
+      for (let i = 0; i < bones.length; i++) {
+        if (!keep[i]) continue;
+        for (let j = i + 1; j < bones.length; j++) {
+          if (!keep[j]) continue;
+          const a = bones[i];
+          const b = bones[j];
+          if (b.x >= a.x - threshold && b.y >= a.y - threshold && b.x + b.w <= a.x + a.w + threshold && b.y + b.h <= a.y + a.h + threshold) {
+            if (a.w * a.h > b.w * b.h * 4) {
+            } else {
+              keep[j] = false;
+            }
+          }
+          if (a.x >= b.x - threshold && a.y >= b.y - threshold && a.x + a.w <= b.x + b.w + threshold && a.y + a.h <= b.y + b.h + threshold) {
+            if (b.w * b.h > a.w * a.h * 4) {
+            } else {
+              keep[i] = false;
+            }
+          }
+        }
+      }
+      return {
+        ...bp,
+        bones: bones.filter((_, i) => keep[i])
+      };
+    })
+  };
+  return result;
+}
+function validateSkeleton(skeleton) {
+  return {
+    ...skeleton,
+    breakpoints: skeleton.breakpoints.map((bp) => ({
+      ...bp,
+      bones: bp.bones.filter(
+        (bone) => isFinite(bone.x) && isFinite(bone.y) && bone.w > 0 && bone.h > 0 && isFinite(bone.r)
+      )
+    }))
+  };
+}
+function compile(results, options = {}) {
+  const dedupe = options.dedupe ?? true;
+  const overlapThreshold = options.overlapThreshold ?? 2;
+  const shouldCompress = options.compress ?? true;
+  const generateTypes = options.generateTypes ?? true;
+  const base64 = options.base64 ?? false;
+  let skeletons = results.map((r) => r.skeleton);
+  skeletons = skeletons.map(validateSkeleton);
+  if (dedupe) {
+    skeletons = skeletons.map((s) => deduplicateBones(s, overlapThreshold));
+  }
+  const rawJSON = JSON.stringify(skeletons);
+  const rawSize = rawJSON.length;
+  let compressedSize = rawSize;
+  const encoded = {};
+  if (shouldCompress || base64) {
+    for (const skeleton of skeletons) {
+      const encodedBPs = [];
+      let totalCompressed = 0;
+      for (const bp of skeleton.breakpoints) {
+        const compressed = compressBones(bp);
+        totalCompressed += JSON.stringify(compressed).length;
+        if (base64) {
+          encodedBPs.push(encodeBonesToBase64(compressed));
+        }
+      }
+      compressedSize = totalCompressed;
+      if (base64) {
+        encoded[skeleton.name] = encodedBPs;
+      }
+    }
+  }
+  const css = generateCriticalCSS(skeletons);
+  let types;
+  if (generateTypes) {
+    types = generateTypeDeclarations(skeletons);
+  }
+  const totalBones = skeletons.reduce(
+    (sum, s) => sum + s.breakpoints.reduce((bpSum, bp) => bpSum + bp.bones.length, 0),
+    0
+  );
+  const allBreakpoints = [
+    ...new Set(skeletons.flatMap((s) => s.breakpoints.map((bp) => bp.viewport)))
+  ].sort((a, b) => a - b);
+  const stats = {
+    skeletonCount: skeletons.length,
+    totalBones,
+    rawSize,
+    compressedSize,
+    compressionRatio: rawSize > 0 ? 1 - compressedSize / rawSize : 0,
+    breakpoints: allBreakpoints
+  };
+  return {
+    manifest: {
+      version: 1,
+      generatedAt: Date.now(),
+      skeletons
+    },
+    css,
+    types,
+    encoded: base64 ? encoded : void 0,
+    stats
+  };
+}
+function generateTypeDeclarations(skeletons) {
+  const names = skeletons.map((s) => `  | "${s.name}"`).join("\n");
+  return `// Auto-generated by CastDOM \u2014 do not edit
 // Regenerate with: npx castdom build
 
 export type CastDOMSkeletonName =
-${e.map(n=>`  | "${n.name}"`).join(`
-`)};
+${names};
 
-declare module "@lukas_holdings/castdom" {
+declare module "castdom" {
   interface CastDOMRegistry {
-${e.map(n=>`    "${n.name}": true;`).join(`
-`)}
+${skeletons.map((s) => `    "${s.name}": true;`).join("\n")}
   }
 }
-`}function K(e,t={}){let n=t.outDir??".castdom",o=t.splitFiles??!0,a=t.esm??!0,c=t.cjs??!1,r=[],i={version:1,generatedAt:Date.now(),skeletons:e};r.push({path:`${n}/manifest.json`,content:JSON.stringify(i,null,2)});let l=k(e,t.config);if(r.push({path:`${n}/castdom.css`,content:l}),a&&r.push({path:`${n}/index.js`,content:ne(e)}),c&&r.push({path:`${n}/index.cjs`,content:oe(e)}),r.push({path:`${n}/index.d.ts`,content:re(e)}),o)for(let s of e)r.push({path:`${n}/skeletons/${s.name}.json`,content:JSON.stringify(s,null,2)}),a&&r.push({path:`${n}/skeletons/${s.name}.js`,content:`export default ${JSON.stringify(s)};
-`});return r.push({path:`${n}/loader.js`,content:ie(e)}),r.push({path:`${n}/nextjs-loading.tsx`,content:se(e)}),r}function ne(e){let t=e.map(o=>`import ${_(o.name)} from "./skeletons/${o.name}.json" with { type: "json" };`).join(`
-`),n=e.map(o=>`  "${o.name}": ${_(o.name)},`).join(`
-`);return`// Auto-generated by CastDOM \u2014 do not edit
-${t}
+`;
+}
+
+// src/build/codegen.ts
+function generateFiles(skeletons, options = {}) {
+  const outDir = options.outDir ?? ".castdom";
+  const splitFiles = options.splitFiles ?? true;
+  const esm = options.esm ?? true;
+  const cjs = options.cjs ?? false;
+  const files = [];
+  const manifest = {
+    version: 1,
+    generatedAt: Date.now(),
+    skeletons
+  };
+  files.push({
+    path: `${outDir}/manifest.json`,
+    content: JSON.stringify(manifest, null, 2)
+  });
+  const css = generateCriticalCSS(skeletons, options.config);
+  files.push({
+    path: `${outDir}/castdom.css`,
+    content: css
+  });
+  if (esm) {
+    files.push({
+      path: `${outDir}/index.js`,
+      content: generateESMModule(skeletons)
+    });
+  }
+  if (cjs) {
+    files.push({
+      path: `${outDir}/index.cjs`,
+      content: generateCJSModule(skeletons)
+    });
+  }
+  files.push({
+    path: `${outDir}/index.d.ts`,
+    content: generateTypeDefs(skeletons)
+  });
+  if (splitFiles) {
+    for (const skeleton of skeletons) {
+      files.push({
+        path: `${outDir}/skeletons/${skeleton.name}.json`,
+        content: JSON.stringify(skeleton, null, 2)
+      });
+      if (esm) {
+        files.push({
+          path: `${outDir}/skeletons/${skeleton.name}.js`,
+          content: `export default ${JSON.stringify(skeleton)};
+`
+        });
+      }
+    }
+  }
+  files.push({
+    path: `${outDir}/loader.js`,
+    content: generateLoader(skeletons)
+  });
+  files.push({
+    path: `${outDir}/nextjs-loading.tsx`,
+    content: generateNextJSLoading(skeletons)
+  });
+  return files;
+}
+function generateESMModule(skeletons) {
+  const imports = skeletons.map((s) => `import ${safeName(s.name)} from "./skeletons/${s.name}.json" with { type: "json" };`).join("\n");
+  const exports = skeletons.map((s) => `  "${s.name}": ${safeName(s.name)},`).join("\n");
+  return `// Auto-generated by CastDOM \u2014 do not edit
+${imports}
 
 export const skeletons = {
-${n}
+${exports}
 };
 
 export const manifest = {
@@ -49,10 +580,13 @@ export const manifest = {
 };
 
 export default manifest;
-`}function oe(e){return`// Auto-generated by CastDOM \u2014 do not edit
+`;
+}
+function generateCJSModule(skeletons) {
+  return `// Auto-generated by CastDOM \u2014 do not edit
 "use strict";
 
-const manifest = ${JSON.stringify({version:1,skeletons:e},null,2)};
+const manifest = ${JSON.stringify({ version: 1, skeletons }, null, 2)};
 
 module.exports = manifest;
 module.exports.default = manifest;
@@ -60,12 +594,15 @@ module.exports.skeletons = manifest.skeletons.reduce((acc, s) => {
   acc[s.name] = s;
   return acc;
 }, {});
-`}function re(e){return`// Auto-generated by CastDOM \u2014 do not edit
-import type { SkeletonData } from "@lukas_holdings/castdom";
+`;
+}
+function generateTypeDefs(skeletons) {
+  const names = skeletons.map((s) => `  | "${s.name}"`).join("\n");
+  return `// Auto-generated by CastDOM \u2014 do not edit
+import type { SkeletonData } from "castdom";
 
 export type SkeletonName =
-${e.map(n=>`  | "${n.name}"`).join(`
-`)};
+${names};
 
 export declare const skeletons: Record<SkeletonName, SkeletonData>;
 
@@ -75,34 +612,48 @@ export declare const manifest: {
 };
 
 export default manifest;
-`}function ie(e){return`// Auto-generated by CastDOM \u2014 do not edit
+`;
+}
+function generateLoader(skeletons) {
+  return `// Auto-generated by CastDOM \u2014 do not edit
 // Import this file once at your app's entry point to register all skeletons.
 //
 // import ".castdom/loader.js";
 
-import { loadManifest } from "@lukas_holdings/castdom";
+import { loadManifest } from "castdom";
 import manifest from "./manifest.json" with { type: "json" };
 
 loadManifest(manifest);
-`}function se(e){return e.length===0?`export default function Loading() { return null; }
-`:`// Auto-generated by CastDOM \u2014 do not edit
+`;
+}
+function generateNextJSLoading(skeletons) {
+  if (skeletons.length === 0) return "export default function Loading() { return null; }\n";
+  const first = skeletons[0];
+  return `// Auto-generated by CastDOM \u2014 do not edit
 // Copy this to your app/loading.tsx or page-specific loading.tsx
 //
 // For multiple skeletons, use <CastDOM name="..."> directly.
 
-import { CastDOM, CastDOMStyle } from "@lukas_holdings/castdom/react";
+import { CastDOM, CastDOMStyle } from "castdom/react";
 
 export default function Loading() {
   return (
     <>
       <CastDOMStyle />
-      <CastDOM name="${e[0].name}" loading={true}>
+      <CastDOM name="${first.name}" loading={true}>
         {null}
       </CastDOM>
     </>
   );
 }
-`}function _(e){return e.replace(/[^a-zA-Z0-9_$]/g,"_")}var O=`
+`;
+}
+function safeName(name) {
+  return name.replace(/[^a-zA-Z0-9_$]/g, "_");
+}
+
+// src/cli.ts
+var HELP = `
 CastDOM \u2014 Pixel-perfect skeleton screens from your real DOM
 
 Usage:
@@ -121,15 +672,228 @@ Build options:
   --headless        Run browser in headless mode (default: true)
   --no-headless     Run browser with visible UI (for debugging)
   --verbose         Show detailed progress output
-`.trim(),G="1.0.0";function le(e){let t={command:e[0]??"build",url:"http://localhost:3000",configPath:"castdom.config.json",outDir:p.outDir,breakpoints:[...p.breakpoints],headless:!0,verbose:!1};for(let n=1;n<e.length;n++)switch(e[n]){case"--url":t.url=e[++n]??t.url;break;case"--config":t.configPath=e[++n]??t.configPath;break;case"--out":t.outDir=e[++n]??t.outDir;break;case"--breakpoints":t.breakpoints=(e[++n]??"").split(",").map(Number).filter(a=>a>0);break;case"--headless":t.headless=!0;break;case"--no-headless":t.headless=!1;break;case"--verbose":t.verbose=!0;break;case"--help":case"-h":console.log(O),process.exit(0);case"--version":case"-v":console.log(G),process.exit(0)}return t}function P(e){let t=S(e);if(!C(t))return{};try{let n=J(t,"utf-8");return JSON.parse(n)}catch{return console.error(`Failed to parse config: ${t}`),{}}}function D(e,...t){e&&console.log(...t)}async function ue(e){let t=P(e.configPath),n=S(t.outDir??e.outDir),o=t.breakpoints??e.breakpoints,a=t.devServer??e.url,c=t.targets??[];c.length===0&&(console.log("No targets configured. Scanning for [data-castdom] elements..."),c.push({name:"auto",selector:"[data-castdom]"})),console.log(`
-CastDOM Build`),console.log(`  Server:      ${a}`),console.log(`  Breakpoints: ${o.join(", ")}px`),console.log(`  Targets:     ${c.length}`),console.log(`  Output:      ${n}
-`);let r=Date.now(),i=await j({baseURL:a,targets:c,breakpoints:o,headless:e.headless,contentAware:t.contentAware??!0,minBoneSize:t.minBoneSize??p.minBoneSize,onProgress(m,g,x){D(e.verbose,`  [${g}/${x}] ${m}`)}}),l=Date.now()-r;D(e.verbose,`
-  Extraction: ${l}ms`);let s=Date.now(),u=U(i),d=Date.now()-s;D(e.verbose,`  Compilation: ${d}ms`);let b=K(u.manifest.skeletons,{outDir:n,config:t});for(let m of b){let g=m.path.substring(0,m.path.lastIndexOf("/"));ce(g,{recursive:!0}),H(m.path,m.content,"utf-8"),D(e.verbose,`  Written: ${m.path}`)}let h=Date.now()-r;console.log(`  Skeletons:   ${u.stats.skeletonCount}`),console.log(`  Bones:       ${u.stats.totalBones}`),console.log(`  Raw size:    ${(u.stats.rawSize/1024).toFixed(1)} KB`),console.log(`  Compressed:  ${(u.stats.compressedSize/1024).toFixed(1)} KB (${(u.stats.compressionRatio*100).toFixed(0)}% smaller)`),console.log(`  Files:       ${b.length}`),console.log(`  Total time:  ${h}ms`),console.log(`
+`.trim();
+var VERSION = "1.0.0";
+function parseArgs(args) {
+  const opts = {
+    command: args[0] ?? "build",
+    url: "http://localhost:3000",
+    configPath: "castdom.config.json",
+    outDir: DEFAULTS.outDir,
+    breakpoints: [...DEFAULTS.breakpoints],
+    headless: true,
+    verbose: false
+  };
+  for (let i = 1; i < args.length; i++) {
+    const arg = args[i];
+    switch (arg) {
+      case "--url":
+        opts.url = args[++i] ?? opts.url;
+        break;
+      case "--config":
+        opts.configPath = args[++i] ?? opts.configPath;
+        break;
+      case "--out":
+        opts.outDir = args[++i] ?? opts.outDir;
+        break;
+      case "--breakpoints":
+        opts.breakpoints = (args[++i] ?? "").split(",").map(Number).filter((n) => n > 0);
+        break;
+      case "--headless":
+        opts.headless = true;
+        break;
+      case "--no-headless":
+        opts.headless = false;
+        break;
+      case "--verbose":
+        opts.verbose = true;
+        break;
+      case "--help":
+      case "-h":
+        console.log(HELP);
+        process.exit(0);
+      case "--version":
+      case "-v":
+        console.log(VERSION);
+        process.exit(0);
+    }
+  }
+  return opts;
+}
+function loadConfig(configPath) {
+  const absPath = resolve(configPath);
+  if (!existsSync(absPath)) return {};
+  try {
+    const raw = readFileSync(absPath, "utf-8");
+    return JSON.parse(raw);
+  } catch (err) {
+    console.error(`Failed to parse config: ${absPath}`);
+    return {};
+  }
+}
+function log(verbose, ...args) {
+  if (verbose) console.log(...args);
+}
+async function cmdBuild(opts) {
+  const config = loadConfig(opts.configPath);
+  const outDir = resolve(config.outDir ?? opts.outDir);
+  const breakpoints = config.breakpoints ?? opts.breakpoints;
+  const url = config.devServer ?? opts.url;
+  const targets = config.targets ?? [];
+  if (targets.length === 0) {
+    console.log("No targets configured. Scanning for [data-castdom] elements...");
+    targets.push({
+      name: "auto",
+      selector: "[data-castdom]"
+    });
+  }
+  console.log(`
+CastDOM Build`);
+  console.log(`  Server:      ${url}`);
+  console.log(`  Breakpoints: ${breakpoints.join(", ")}px`);
+  console.log(`  Targets:     ${targets.length}`);
+  console.log(`  Output:      ${outDir}
+`);
+  const startTime = Date.now();
+  const results = await snapshot({
+    baseURL: url,
+    targets,
+    breakpoints,
+    headless: opts.headless,
+    contentAware: config.contentAware ?? true,
+    minBoneSize: config.minBoneSize ?? DEFAULTS.minBoneSize,
+    onProgress(message, current, total) {
+      log(opts.verbose, `  [${current}/${total}] ${message}`);
+    }
+  });
+  const extractTime = Date.now() - startTime;
+  log(opts.verbose, `
+  Extraction: ${extractTime}ms`);
+  const compileStart = Date.now();
+  const compiled = compile(results);
+  const compileTime = Date.now() - compileStart;
+  log(opts.verbose, `  Compilation: ${compileTime}ms`);
+  const files = generateFiles(compiled.manifest.skeletons, {
+    outDir,
+    config
+  });
+  for (const file of files) {
+    const dir = file.path.substring(0, file.path.lastIndexOf("/"));
+    mkdirSync(dir, { recursive: true });
+    writeFileSync(file.path, file.content, "utf-8");
+    log(opts.verbose, `  Written: ${file.path}`);
+  }
+  const totalTime = Date.now() - startTime;
+  console.log(`  Skeletons:   ${compiled.stats.skeletonCount}`);
+  console.log(`  Bones:       ${compiled.stats.totalBones}`);
+  console.log(`  Raw size:    ${(compiled.stats.rawSize / 1024).toFixed(1)} KB`);
+  console.log(
+    `  Compressed:  ${(compiled.stats.compressedSize / 1024).toFixed(1)} KB (${(compiled.stats.compressionRatio * 100).toFixed(0)}% smaller)`
+  );
+  console.log(`  Files:       ${files.length}`);
+  console.log(`  Total time:  ${totalTime}ms`);
+  console.log(`
 Done. Import the loader to register:
-`),console.log(`  import "${n}/loader.js";
-`)}function me(e){let t=S(e.configPath);if(C(t)){console.log(`Config already exists: ${t}`);return}H(t,JSON.stringify({devServer:"http://localhost:3000",outDir:".castdom",breakpoints:[375,768,1280],color:"#e0e0e0",shimmerColor:"#f0f0f0",animationDuration:1500,contentAware:!0,minBoneSize:4,targets:[{name:"example-card",selector:'[data-castdom="example-card"]',route:"/"}]},null,2)+`
-`,"utf-8"),console.log(`Created: ${t}`),console.log(`
-Edit the "targets" array to define your skeleton targets.`),console.log(`Then run: npx castdom build
-`)}function de(e){let t=P(e.configPath),n=S(t.outDir??e.outDir),o=ae(n,"manifest.json");if(!C(o)){console.log('No manifest found. Run "npx castdom build" first.');return}let c=JSON.parse(J(o,"utf-8")).skeletons??[];console.log(`
-CastDOM Skeletons (${c.length}):
-`);for(let r of c){let i=r.breakpoints.reduce((s,u)=>s+u.bones.length,0),l=r.breakpoints.map(s=>`${s.viewport}px`).join(", ");console.log(`  ${r.name}`),console.log(`    Bones: ${i}  |  Breakpoints: ${l}  |  Hash: ${r.hash}`)}console.log()}function pe(e){let t=P(e.configPath),n=S(t.outDir??e.outDir);if(!C(n)){console.log("Nothing to clean.");return}let{rmSync:o}=V("fs");o(n,{recursive:!0,force:!0}),console.log(`Removed: ${n}`)}async function fe(){let e=process.argv.slice(2);if(e.length===0||e[0]==="--help"||e[0]==="-h"){console.log(O);return}if(e[0]==="--version"||e[0]==="-v"){console.log(G);return}let t=le(e);switch(t.command){case"build":await ue(t);break;case"init":me(t);break;case"list":de(t);break;case"clean":pe(t);break;default:console.error(`Unknown command: ${t.command}`),console.log(O),process.exit(1)}}fe().catch(e=>{console.error("CastDOM error:",e.message??e),process.exit(1)});
+`);
+  console.log(`  import "${outDir}/loader.js";
+`);
+}
+function cmdInit(opts) {
+  const configPath = resolve(opts.configPath);
+  if (existsSync(configPath)) {
+    console.log(`Config already exists: ${configPath}`);
+    return;
+  }
+  const template = {
+    devServer: "http://localhost:3000",
+    outDir: ".castdom",
+    breakpoints: [375, 768, 1280],
+    color: "#e0e0e0",
+    shimmerColor: "#f0f0f0",
+    animationDuration: 1500,
+    contentAware: true,
+    minBoneSize: 4,
+    targets: [
+      {
+        name: "example-card",
+        selector: '[data-castdom="example-card"]',
+        route: "/"
+      }
+    ]
+  };
+  writeFileSync(configPath, JSON.stringify(template, null, 2) + "\n", "utf-8");
+  console.log(`Created: ${configPath}`);
+  console.log(`
+Edit the "targets" array to define your skeleton targets.`);
+  console.log(`Then run: npx castdom build
+`);
+}
+function cmdList(opts) {
+  const config = loadConfig(opts.configPath);
+  const outDir = resolve(config.outDir ?? opts.outDir);
+  const manifestPath = join(outDir, "manifest.json");
+  if (!existsSync(manifestPath)) {
+    console.log(`No manifest found. Run "npx castdom build" first.`);
+    return;
+  }
+  const manifest = JSON.parse(readFileSync(manifestPath, "utf-8"));
+  const skeletons = manifest.skeletons ?? [];
+  console.log(`
+CastDOM Skeletons (${skeletons.length}):
+`);
+  for (const s of skeletons) {
+    const boneCount = s.breakpoints.reduce(
+      (sum, bp) => sum + bp.bones.length,
+      0
+    );
+    const bps = s.breakpoints.map((bp) => `${bp.viewport}px`).join(", ");
+    console.log(`  ${s.name}`);
+    console.log(`    Bones: ${boneCount}  |  Breakpoints: ${bps}  |  Hash: ${s.hash}`);
+  }
+  console.log();
+}
+function cmdClean(opts) {
+  const config = loadConfig(opts.configPath);
+  const outDir = resolve(config.outDir ?? opts.outDir);
+  if (!existsSync(outDir)) {
+    console.log("Nothing to clean.");
+    return;
+  }
+  const { rmSync } = __require("fs");
+  rmSync(outDir, { recursive: true, force: true });
+  console.log(`Removed: ${outDir}`);
+}
+async function main() {
+  const args = process.argv.slice(2);
+  if (args.length === 0 || args[0] === "--help" || args[0] === "-h") {
+    console.log(HELP);
+    return;
+  }
+  if (args[0] === "--version" || args[0] === "-v") {
+    console.log(VERSION);
+    return;
+  }
+  const opts = parseArgs(args);
+  switch (opts.command) {
+    case "build":
+      await cmdBuild(opts);
+      break;
+    case "init":
+      cmdInit(opts);
+      break;
+    case "list":
+      cmdList(opts);
+      break;
+    case "clean":
+      cmdClean(opts);
+      break;
+    default:
+      console.error(`Unknown command: ${opts.command}`);
+      console.log(HELP);
+      process.exit(1);
+  }
+}
+main().catch((err) => {
+  console.error("CastDOM error:", err.message ?? err);
+  process.exit(1);
+});