@lukas_holdings/castdom 1.0.0

package/dist/cli.js

@@ -0,0 +1,135 @@
+#!/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 _,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`
+(function() {
+  ${N.toString()}
+  ${R.toString()}
+  ${T.toString()}
+  ${A.toString()}
+
+  var INLINE_TAGS = new Set(${JSON.stringify([...B])});
+  var SKIP_TAGS = new Set(${JSON.stringify([...E])});
+  var DEFAULTS = { contentAware: true, minBoneSize: 4 };
+
+  ${X.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)});
+})()
+  `.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
+// Regenerate with: npx castdom build
+
+export type CastDOMSkeletonName =
+${e.map(n=>`  | "${n.name}"`).join(`
+`)};
+
+declare module "castdom" {
+  interface CastDOMRegistry {
+${e.map(n=>`    "${n.name}": true;`).join(`
+`)}
+  }
+}
+`}function J(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 ${K(o.name)} from "./skeletons/${o.name}.json" with { type: "json" };`).join(`
+`),n=e.map(o=>`  "${o.name}": ${K(o.name)},`).join(`
+`);return`// Auto-generated by CastDOM \u2014 do not edit
+${t}
+
+export const skeletons = {
+${n}
+};
+
+export const manifest = {
+  version: 1,
+  skeletons: Object.values(skeletons),
+};
+
+export default manifest;
+`}function oe(e){return`// Auto-generated by CastDOM \u2014 do not edit
+"use strict";
+
+const manifest = ${JSON.stringify({version:1,skeletons:e},null,2)};
+
+module.exports = manifest;
+module.exports.default = manifest;
+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 "castdom";
+
+export type SkeletonName =
+${e.map(n=>`  | "${n.name}"`).join(`
+`)};
+
+export declare const skeletons: Record<SkeletonName, SkeletonData>;
+
+export declare const manifest: {
+  version: number;
+  skeletons: SkeletonData[];
+};
+
+export default manifest;
+`}function ie(e){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 "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
+// Copy this to your app/loading.tsx or page-specific loading.tsx
+//
+// For multiple skeletons, use <CastDOM name="..."> directly.
+
+import { CastDOM, CastDOMStyle } from "castdom/react";
+
+export default function Loading() {
+  return (
+    <>
+      <CastDOMStyle />
+      <CastDOM name="${e[0].name}" loading={true}>
+        {null}
+      </CastDOM>
+    </>
+  );
+}
+`}function K(e){return e.replace(/[^a-zA-Z0-9_$]/g,"_")}var O=`
+CastDOM \u2014 Pixel-perfect skeleton screens from your real DOM
+
+Usage:
+  castdom build [options]    Extract skeletons and generate files
+  castdom init               Create a castdom.config.json template
+  castdom list               List skeletons in the manifest
+  castdom clean              Remove generated output directory
+  castdom --help             Show this help message
+  castdom --version          Show version
+
+Build options:
+  --url <url>       Dev server URL (default: http://localhost:3000)
+  --config <path>   Config file path (default: castdom.config.json)
+  --out <dir>       Output directory (default: .castdom)
+  --breakpoints     Comma-separated breakpoints (default: 375,768,1280)
+  --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=_(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=J(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(`
+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(_(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)});

package/dist/index.cjs

@@ -0,0 +1,540 @@
+'use strict';
+
+var chunkORY4OMZ5_cjs = require('./chunk-ORY4OMZ5.cjs');
+var chunkYDT4TPB7_cjs = require('./chunk-YDT4TPB7.cjs');
+var chunkXS5HAU5E_cjs = require('./chunk-XS5HAU5E.cjs');
+var chunkJRQ6EVQP_cjs = require('./chunk-JRQ6EVQP.cjs');
+
+// 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 = chunkJRQ6EVQP_cjs.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 decompressBones(compressed) {
+  const bones = [];
+  const d = compressed.d;
+  let prevX = 0;
+  let prevY = 0;
+  for (let i = 0; i < d.length; i += 6) {
+    const dx = d[i];
+    const dy = d[i + 1];
+    const w = d[i + 2];
+    const h = d[i + 3];
+    const r = d[i + 4];
+    const kindIdx = d[i + 5];
+    prevX += dx;
+    prevY += dy;
+    bones.push({
+      x: prevX / 2,
+      y: prevY / 2,
+      w: w / 2,
+      h: h / 2,
+      r: r / 2,
+      kind: chunkJRQ6EVQP_cjs.BONE_KIND_FROM_INDEX[kindIdx] ?? "block"
+    });
+  }
+  return {
+    viewport: compressed.vw,
+    containerWidth: compressed.c[0] / 2,
+    containerHeight: compressed.c[1] / 2,
+    bones
+  };
+}
+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));
+}
+function decodeBonesToBase64(b64) {
+  let bytes;
+  if (typeof Buffer !== "undefined") {
+    bytes = Buffer.from(b64, "base64");
+  } else {
+    const raw = atob(b64);
+    bytes = new Uint8Array(raw.length);
+    for (let i = 0; i < raw.length; i++) bytes[i] = raw.charCodeAt(i);
+  }
+  const nums = [];
+  let pos = 0;
+  while (pos < bytes.length) {
+    let val = 0;
+    let shift = 0;
+    let b;
+    do {
+      b = bytes[pos++];
+      val |= (b & 127) << shift;
+      shift += 7;
+    } while (b & 128);
+    nums.push(val & 1 ? -(val >>> 1) - 1 : val >>> 1);
+  }
+  const v = nums[0];
+  const vw = nums[1];
+  const c = [nums[2], nums[3]];
+  const dLen = nums[4];
+  const d = nums.slice(5, 5 + dLen);
+  return { v, vw, c, d };
+}
+
+// src/core/animation.ts
+function generateKeyframes(config) {
+  const type = config?.type ?? "shimmer";
+  const prefix = config?.classPrefix ?? chunkJRQ6EVQP_cjs.DEFAULTS.classPrefix;
+  config?.duration ?? chunkJRQ6EVQP_cjs.DEFAULTS.animationDuration;
+  switch (type) {
+    case "shimmer":
+      return `@keyframes ${prefix}-shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}`;
+    case "pulse":
+      return `@keyframes ${prefix}-pulse{0%,100%{opacity:1}50%{opacity:0.4}}`;
+    case "wave":
+      return `@keyframes ${prefix}-wave{0%{opacity:0.4}50%{opacity:1}100%{opacity:0.4}}`;
+    case "none":
+      return "";
+  }
+}
+function generateBoneAnimation(config) {
+  const type = config?.type ?? "shimmer";
+  const prefix = config?.classPrefix ?? chunkJRQ6EVQP_cjs.DEFAULTS.classPrefix;
+  const duration = config?.duration ?? chunkJRQ6EVQP_cjs.DEFAULTS.animationDuration;
+  const color = config?.color ?? chunkJRQ6EVQP_cjs.DEFAULTS.color;
+  const shimmerColor = config?.shimmerColor ?? chunkJRQ6EVQP_cjs.DEFAULTS.shimmerColor;
+  switch (type) {
+    case "shimmer":
+      return `background:linear-gradient(90deg,${color} 25%,${shimmerColor} 50%,${color} 75%);background-size:200% 100%;animation:${prefix}-shimmer ${duration}ms ease-in-out infinite`;
+    case "pulse":
+      return `background:${color};animation:${prefix}-pulse ${duration}ms ease-in-out infinite`;
+    case "wave":
+      return `background:${color};animation:${prefix}-wave ${duration}ms ease-in-out infinite`;
+    case "none":
+      return `background:${color}`;
+  }
+}
+function generateStaggerCSS(skeletonName, boneCount, config) {
+  const prefix = config?.classPrefix ?? chunkJRQ6EVQP_cjs.DEFAULTS.classPrefix;
+  const stagger = config?.stagger ?? 50;
+  const rules = [];
+  for (let i = 0; i < boneCount; i++) {
+    rules.push(
+      `.${prefix}-${skeletonName} .${prefix}-bone:nth-child(${i + 1}){animation-delay:${i * stagger}ms}`
+    );
+  }
+  return rules.join("");
+}
+function generateAnimationCSS(skeletonName, boneCount, config) {
+  const prefix = config?.classPrefix ?? chunkJRQ6EVQP_cjs.DEFAULTS.classPrefix;
+  const type = config?.type ?? "shimmer";
+  const parts = [];
+  const kf = generateKeyframes(config);
+  if (kf) parts.push(kf);
+  const anim = generateBoneAnimation(config);
+  parts.push(`.${prefix}-${skeletonName} .${prefix}-bone{position:absolute;${anim}}`);
+  if (type === "wave") {
+    parts.push(generateStaggerCSS(skeletonName, boneCount, config));
+  }
+  parts.push(
+    `@media(prefers-reduced-motion:reduce){.${prefix}-${skeletonName} .${prefix}-bone{animation:none!important}}`
+  );
+  return parts.join("\n");
+}
+
+// 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 ?? chunkJRQ6EVQP_cjs.DEFAULTS.contentAware;
+  const minSize = options.minBoneSize ?? chunkJRQ6EVQP_cjs.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() {
+  ${isVisible.toString()}
+  ${isLeaf.toString()}
+  ${detectKind.toString()}
+  ${computeRadius.toString()}
+
+  var INLINE_TAGS = new Set(${JSON.stringify([...INLINE_TAGS])});
+  var SKIP_TAGS = new Set(${JSON.stringify([...SKIP_TAGS])});
+  var DEFAULTS = { contentAware: true, minBoneSize: 4 };
+
+  ${extractBones.toString()}
+
+  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();
+}
+
+// src/components/vanilla.ts
+var ACTIVE_ATTR = "data-castdom-active";
+var SKELETON_ATTR = "data-castdom-skeleton";
+function createCastDOM(config) {
+  let styleEl = null;
+  let cssInjected = false;
+  const activeContainers = /* @__PURE__ */ new Set();
+  function ensureCSS() {
+    if (cssInjected || typeof document === "undefined") return;
+    styleEl = document.createElement("style");
+    styleEl.setAttribute("data-castdom", "critical");
+    styleEl.textContent = [
+      `@keyframes castdom-shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}`,
+      `@keyframes castdom-pulse{0%,100%{opacity:1}50%{opacity:0.4}}`,
+      `@keyframes castdom-wave{0%{opacity:0.4}50%{opacity:1}100%{opacity:0.4}}`,
+      `@media(prefers-reduced-motion:reduce){.castdom-bone{animation:none!important}}`
+    ].join("");
+    document.head.appendChild(styleEl);
+    cssInjected = true;
+  }
+  return {
+    loadManifest(manifest) {
+      chunkYDT4TPB7_cjs.loadManifest(manifest);
+    },
+    register(data) {
+      chunkYDT4TPB7_cjs.register(data);
+    },
+    show(name, container) {
+      const entry = chunkYDT4TPB7_cjs.get(name);
+      if (!entry) {
+        console.warn(`CastDOM: Skeleton "${name}" not found in registry`);
+        return;
+      }
+      ensureCSS();
+      if (!container.hasAttribute(ACTIVE_ATTR)) {
+        container.setAttribute(ACTIVE_ATTR, "true");
+        for (const child of Array.from(container.children)) {
+          if (!child.hasAttribute(SKELETON_ATTR)) {
+            child.style.display = "none";
+          }
+        }
+      }
+      const vw = typeof window !== "undefined" ? window.innerWidth : 1280;
+      const bp = chunkORY4OMZ5_cjs.selectBreakpoint(entry.data, vw);
+      if (!bp) return;
+      const skeletonDiv = document.createElement("div");
+      skeletonDiv.setAttribute(SKELETON_ATTR, name);
+      skeletonDiv.innerHTML = chunkXS5HAU5E_cjs.renderStandalone(entry.data, config);
+      container.appendChild(skeletonDiv);
+      activeContainers.add(container);
+    },
+    hide(name, container) {
+      const skeleton = container.querySelector(`[${SKELETON_ATTR}="${name}"]`);
+      if (skeleton) skeleton.remove();
+      container.removeAttribute(ACTIVE_ATTR);
+      for (const child of Array.from(container.children)) {
+        if (!child.hasAttribute(SKELETON_ATTR)) {
+          child.style.display = "";
+        }
+      }
+      activeContainers.delete(container);
+    },
+    toggle(name, container, loading) {
+      if (loading) {
+        this.show(name, container);
+      } else {
+        this.hide(name, container);
+      }
+    },
+    html(name, viewportWidth) {
+      const entry = chunkYDT4TPB7_cjs.get(name);
+      if (!entry) return "";
+      return chunkXS5HAU5E_cjs.renderStandalone(entry.data, config);
+    },
+    css() {
+      return chunkXS5HAU5E_cjs.generateCriticalCSS(
+        Array.from(activeContainers).map((c) => {
+          const name = c.querySelector(`[${SKELETON_ATTR}]`)?.getAttribute(SKELETON_ATTR);
+          return name ? chunkYDT4TPB7_cjs.get(name)?.data : void 0;
+        }).filter(Boolean),
+        config
+      );
+    },
+    injectCSS() {
+      ensureCSS();
+    },
+    destroy() {
+      for (const container of activeContainers) {
+        const skeletons = container.querySelectorAll(`[${SKELETON_ATTR}]`);
+        for (const s of skeletons) s.remove();
+        container.removeAttribute(ACTIVE_ATTR);
+        for (const child of Array.from(container.children)) {
+          child.style.display = "";
+        }
+      }
+      activeContainers.clear();
+      if (styleEl) {
+        styleEl.remove();
+        styleEl = null;
+        cssInjected = false;
+      }
+    }
+  };
+}
+
+Object.defineProperty(exports, "diffBreakpoints", {
+  enumerable: true,
+  get: function () { return chunkORY4OMZ5_cjs.diffBreakpoints; }
+});
+Object.defineProperty(exports, "getStaleBreakpoints", {
+  enumerable: true,
+  get: function () { return chunkORY4OMZ5_cjs.getStaleBreakpoints; }
+});
+Object.defineProperty(exports, "interpolateBones", {
+  enumerable: true,
+  get: function () { return chunkORY4OMZ5_cjs.interpolateBones; }
+});
+Object.defineProperty(exports, "selectBreakpoint", {
+  enumerable: true,
+  get: function () { return chunkORY4OMZ5_cjs.selectBreakpoint; }
+});
+Object.defineProperty(exports, "validateBreakpoints", {
+  enumerable: true,
+  get: function () { return chunkORY4OMZ5_cjs.validateBreakpoints; }
+});
+Object.defineProperty(exports, "clear", {
+  enumerable: true,
+  get: function () { return chunkYDT4TPB7_cjs.clear; }
+});
+Object.defineProperty(exports, "configure", {
+  enumerable: true,
+  get: function () { return chunkYDT4TPB7_cjs.configure; }
+});
+Object.defineProperty(exports, "get", {
+  enumerable: true,
+  get: function () { return chunkYDT4TPB7_cjs.get; }
+});
+Object.defineProperty(exports, "getAllCSS", {
+  enumerable: true,
+  get: function () { return chunkYDT4TPB7_cjs.getAllCSS; }
+});
+Object.defineProperty(exports, "has", {
+  enumerable: true,
+  get: function () { return chunkYDT4TPB7_cjs.has; }
+});
+Object.defineProperty(exports, "loadManifest", {
+  enumerable: true,
+  get: function () { return chunkYDT4TPB7_cjs.loadManifest; }
+});
+Object.defineProperty(exports, "names", {
+  enumerable: true,
+  get: function () { return chunkYDT4TPB7_cjs.names; }
+});
+Object.defineProperty(exports, "register", {
+  enumerable: true,
+  get: function () { return chunkYDT4TPB7_cjs.register; }
+});
+Object.defineProperty(exports, "registerAll", {
+  enumerable: true,
+  get: function () { return chunkYDT4TPB7_cjs.registerAll; }
+});
+Object.defineProperty(exports, "remove", {
+  enumerable: true,
+  get: function () { return chunkYDT4TPB7_cjs.remove; }
+});
+Object.defineProperty(exports, "generateCSS", {
+  enumerable: true,
+  get: function () { return chunkXS5HAU5E_cjs.generateCSS; }
+});
+Object.defineProperty(exports, "generateCriticalCSS", {
+  enumerable: true,
+  get: function () { return chunkXS5HAU5E_cjs.generateCriticalCSS; }
+});
+Object.defineProperty(exports, "renderBonesHTML", {
+  enumerable: true,
+  get: function () { return chunkXS5HAU5E_cjs.renderBonesHTML; }
+});
+Object.defineProperty(exports, "renderResponsiveHTML", {
+  enumerable: true,
+  get: function () { return chunkXS5HAU5E_cjs.renderResponsiveHTML; }
+});
+Object.defineProperty(exports, "renderStandalone", {
+  enumerable: true,
+  get: function () { return chunkXS5HAU5E_cjs.renderStandalone; }
+});
+Object.defineProperty(exports, "BONE_KIND_FROM_INDEX", {
+  enumerable: true,
+  get: function () { return chunkJRQ6EVQP_cjs.BONE_KIND_FROM_INDEX; }
+});
+Object.defineProperty(exports, "BONE_KIND_INDEX", {
+  enumerable: true,
+  get: function () { return chunkJRQ6EVQP_cjs.BONE_KIND_INDEX; }
+});
+Object.defineProperty(exports, "DEFAULTS", {
+  enumerable: true,
+  get: function () { return chunkJRQ6EVQP_cjs.DEFAULTS; }
+});
+exports.compressBones = compressBones;
+exports.createCastDOM = createCastDOM;
+exports.decodeBonesToBase64 = decodeBonesToBase64;
+exports.decompressBones = decompressBones;
+exports.encodeBonesToBase64 = encodeBonesToBase64;
+exports.extractBones = extractBones;
+exports.generateAnimationCSS = generateAnimationCSS;
+exports.generateBoneAnimation = generateBoneAnimation;
+exports.generateKeyframes = generateKeyframes;
+exports.generateStaggerCSS = generateStaggerCSS;
+exports.getExtractorScript = getExtractorScript;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map