@alikhalilll/a-smart-skeleton 0.0.0-stage → 1.0.0

package/dist/_chunks/core.js

@@ -0,0 +1,2187 @@
+//#region src/core/constants.ts
+const ATTR_REVEAL = "ask-reveal";
+const ATTR_PANE = "ask-pane";
+const ATTR_LOADING = "ask-loading";
+const ATTR_GHOST = "ask-ghost";
+const ATTR_SNAPSHOT = "ask-snapshot";
+const ATTR_LAYER = "ask-layer";
+const ATTR_RECT = "ask-rect";
+const ATTR_BAR = "ask-bar";
+const ATTR_INACTIVE = "ask-inactive";
+const ATTR_EXITING = "ask-exiting";
+const ATTR_COVERED = "ask-covered";
+const ATTR_OWN = "ask-own";
+const ATTR_IGNORE = "ask-ignore";
+const ATTR_BLOCK = "ask-block";
+const GHOSTED = Symbol.for("a-smart-skeleton.ghost");
+const UNCOVER = Symbol.for("a-smart-skeleton.uncover");
+const ATTR_STATUS = "ask-status";
+const ATTR_XRAY = "ask-xray";
+const ATTR_DEBUG = "ask-debug";
+const BASE = "var(--ask-base, rgb(128 128 128 / 0.2))";
+const HIGHLIGHT = "var(--ask-highlight, rgb(255 255 255 / 0.12))";
+const FADE_DURATION = 200;
+const CASCADE_SPREAD = 320;
+const RESIZE_DURATION = 280;
+const IMAGE_TIMEOUT = 1e4;
+const DURATIONS = {
+	shimmer: {
+		slow: 4e3,
+		fast: 2e3
+	},
+	pulse: {
+		slow: 2400,
+		fast: 1200
+	}
+};
+const TEXT_TAGS = [
+	"a",
+	"b",
+	"code",
+	"dd",
+	"dt",
+	"em",
+	"h1",
+	"h2",
+	"h3",
+	"h4",
+	"h5",
+	"h6",
+	"i",
+	"label",
+	"li",
+	"p",
+	"small",
+	"span",
+	"strong",
+	"td",
+	"th",
+	"time"
+];
+const MEDIA_TAGS = [
+	"audio",
+	"canvas",
+	"embed",
+	"iframe",
+	"img",
+	"input",
+	"object",
+	"picture",
+	"select",
+	"svg",
+	"textarea",
+	"video"
+];
+//#endregion
+//#region src/core/styles.ts
+const media = MEDIA_TAGS.join(", ");
+/** The whole stylesheet, for rendering into a page yourself. */
+const SMART_SKELETON_CSS = `
+[${ATTR_REVEAL}] {
+  position: relative;
+}
+
+a-smart-skeleton-reveal,
+ask-reveal {
+  display: block;
+}
+
+a-smart-skeleton-reveal[loading]:not(:defined),
+ask-reveal[loading]:not(:defined) {
+  visibility: hidden;
+}
+
+[${ATTR_PANE}] {
+  display: block;
+}
+
+[${ATTR_LOADING}] {
+  position: relative;
+  -webkit-user-select: none;
+  user-select: none;
+  pointer-events: none;
+}
+
+[${ATTR_INACTIVE}] {
+  display: none !important;
+}
+
+[${ATTR_LAYER}] {
+  position: absolute;
+  inset: 0;
+  overflow: visible;
+}
+
+[${ATTR_BAR}] {
+  display: block;
+  background-color: ${BASE};
+  background-repeat: no-repeat;
+}
+
+/* Containers keep their surface; what they hold is drawn by bones, measured before the first paint */
+@scope ([${ATTR_LOADING}]) to ([${ATTR_OWN}], [${ATTR_LAYER}]) {
+  :scope,
+  :scope * {
+    color: transparent !important;
+    -webkit-text-fill-color: transparent !important;
+    text-shadow: none !important;
+    text-decoration-color: transparent !important;
+  }
+
+  :scope ::placeholder {
+    color: transparent !important;
+  }
+
+  /* A line to measure in empty text; content only, never a size, or a dot-sized span would grow round it */
+  :scope :is(${TEXT_TAGS.join(", ")}):empty:not(svg *)::before {
+    content: "000000";
+  }
+
+  /* Leaves are drawn by bones, so their own paint never shows; visibility, as measuring reads it */
+  :scope :is(:not(:has(*)), ${media}, [${ATTR_COVERED}], [${ATTR_BLOCK}]):not(svg *) {
+    visibility: hidden !important;
+  }
+
+  /* No script to measure: a bar struck through each line of text instead */
+  @media (scripting: none) {
+    :scope :not(:has(*)):not(svg *) {
+      visibility: visible !important;
+    }
+
+    :scope,
+    :scope * {
+      text-decoration: line-through ${BASE} !important;
+      text-decoration-thickness: 0.72em !important;
+      text-decoration-skip-ink: none !important;
+    }
+
+    :scope :is(${media}, [${ATTR_BLOCK}]):not(svg *) {
+      visibility: visible !important;
+      background: ${BASE} !important;
+    }
+
+    :scope svg * {
+      fill: transparent !important;
+      stroke: transparent !important;
+    }
+
+    :scope :is(img, video) {
+      object-position: -100vw 0;
+    }
+  }
+}
+
+/* Read by screen readers in the skeleton's place, never seen */
+[${ATTR_STATUS}] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+/* Debug x-ray: the ghost shown through its bones, to see what was measured */
+[${ATTR_XRAY}] [${ATTR_LOADING}] [${ATTR_GHOST}],
+[${ATTR_XRAY}] [${ATTR_LOADING}] [${ATTR_GHOST}] *:not(svg *) {
+  visibility: visible !important;
+  color: rgb(255 0 80 / 0.7) !important;
+  -webkit-text-fill-color: rgb(255 0 80 / 0.7) !important;
+}
+
+/* Lets addStyles see a stylesheet already on the page, from styles.css or a server render */
+:root {
+  --ask: 1;
+}`;
+let styleEl = null;
+let refCount = 0;
+let present;
+function addStyles() {
+	refCount++;
+	if (styleEl) return;
+	present ??= !!getComputedStyle(document.documentElement).getPropertyValue("--ask");
+	if (present) return;
+	styleEl = document.createElement("style");
+	styleEl.dataset.aSmartSkeleton = "true";
+	styleEl.textContent = SMART_SKELETON_CSS;
+	document.head.appendChild(styleEl);
+}
+function removeStyles() {
+	refCount--;
+	if (refCount > 0 || !styleEl) return;
+	styleEl.remove();
+	styleEl = null;
+}
+//#endregion
+//#region src/core/inline.generated.ts
+const INLINE_SCRIPT = "\"use strict\";(()=>{var B=\"ask-ghost\";var D=\"ask-layer\",L=\"ask-rect\";var R=\"ask-covered\",$=\"ask-own\",v=\"ask-ignore\",H=\"ask-block\",I=Symbol.for(\"a-smart-skeleton.ghost\"),G=Symbol.for(\"a-smart-skeleton.uncover\"),P=\"a-smart-skeleton.boot\";var W=\"var(--ask-base, rgb(128 128 128 / 0.2))\",z=\"var(--ask-highlight, rgb(255 255 255 / 0.12))\";var F={shimmer:{slow:4e3,fast:2e3},pulse:{slow:2400,fast:1200}},X=[\"a\",\"b\",\"code\",\"dd\",\"dt\",\"em\",\"h1\",\"h2\",\"h3\",\"h4\",\"h5\",\"h6\",\"i\",\"label\",\"li\",\"p\",\"small\",\"span\",\"strong\",\"td\",\"th\",\"time\"],U=[\"audio\",\"canvas\",\"embed\",\"iframe\",\"img\",\"input\",\"object\",\"picture\",\"select\",\"svg\",\"textarea\",\"video\"];var gt,V=()=>gt??(gt=/jsdom/.test(navigator.userAgent)?null:document.createElement(\"canvas\").getContext(\"2d\"));var J=(t,n)=>t?{left:Math.max(t.left,n.left),right:Math.min(t.right,n.right),top:Math.max(t.top,n.top),bottom:Math.min(t.bottom,n.bottom)}:n,A=t=>[[t.left,t.top],[t.right,t.top],[t.right,t.bottom],[t.left,t.bottom]],k=(t,n)=>Math.abs(t[0]-n[0])<1&&Math.abs(t[1]-n[1])<1;function Q(t,n){let e=Math.min(n.right-n.left,n.bottom-n.top),o=r=>r.endsWith(\"%\")?parseFloat(r)/100*e:parseFloat(r)||0;return[o(t.borderTopLeftRadius),o(t.borderTopRightRadius),o(t.borderBottomRightRadius),o(t.borderBottomLeftRadius)]}function bt(t,n,e){let o=J(t,n),r=Q(e,n),c=t?A(t):[],a=A(n),m=A(o).map((f,T)=>k(f,a[T])?r[T]:t&&k(f,c[T])?t.corners[T]:0),{left:s,right:i,top:l,bottom:h}=o;return{left:s,right:i,top:l,bottom:h,corners:m}}function Tt(t,n,e,o){if(!t)return e;let r=A(t),c=A(n).map((m,s)=>t.corners[s]>0&&k(m,r[s]));if(!c.some(Boolean))return e;let a=Q(o,n);return c.map((m,s)=>m?Math.max(a[s],t.corners[s]):a[s]).map(m=>`${m}px`).join(\" \")}var j=(t,n)=>{let e=J(n,t);return e.right-e.left>=2&&e.bottom-e.top>=2?e:null},q={top:\"ascender\",bottom:\"descender\"},C=new Map,tt=t=>[...t.getClientRects?.()??[]];function St(t){let n=`${t.fontStyle} ${t.fontWeight} ${t.fontSize} ${t.fontFamily}`;if(C.has(n))return C.get(n);let e=V(),o=null;if(e){e.font=n;let r=e.measureText(\"H\"),c=a=>e.measureText(a).actualBoundingBoxAscent;o={ascent:r.fontBoundingBoxAscent,descent:r.fontBoundingBoxDescent,ascender:c(\"bdfhkl\"),capHeight:r.actualBoundingBoxAscent,xHeight:c(\"xz\"),descender:e.measureText(\"gjpqy\").actualBoundingBoxDescent}}return C.set(n,o),o}var Y={ascender:\"ascender\",\"cap-height\":\"capHeight\",\"x-height\":\"xHeight\"},K=(t,n,e,o)=>{let r=t.getPropertyValue(n).trim();return e.includes(r)?r:o};function xt(t,n,e){let o=St(n);if(!o){let s=Math.min(e*.72,t.bottom-t.top),i=(t.top+t.bottom)/2;return{barTop:i-s/2,barBottom:i+s/2}}let r=K(n,\"--ask-text-top\",Object.keys(Y),q.top),c=K(n,\"--ask-text-bottom\",[\"baseline\",\"descender\"],q.bottom),a=o.ascent+o.descent,m=t.top+(t.bottom-t.top-a)/2+o.ascent;return{barTop:m-o[Y[r]],barBottom:m+(c===\"descender\"?o.descender:0)}}var Et=new Set(U),Rt=new Set(X),et=.4,At=/[,/]\\s*0\\)$/,y=(t,n)=>t!==\"\"&&t!==n,yt=[\"Top\",\"Right\",\"Bottom\",\"Left\"],Mt=t=>yt.every(n=>y(t[`border${n}Style`],\"none\")&&y(t[`border${n}Width`],\"0px\")),Ct=t=>{let[n=0,e=0,o=0,r=0]=(t.replace(/rgba?\\([^)]*\\)|#\\w+/g,\"\").match(/-?[\\d.]+px/g)??[]).map(parseFloat);return t.includes(\"inset\")&&!o&&!r&&n===0!=(e===0)&&Math.abs(n+e)<=2},kt=t=>y(t,\"none\")&&!t.split(/,(?![^(]*\\))/).every(Ct),Ot=t=>y(t.backgroundColor,\"transparent\")&&!At.test(t.backgroundColor)||y(t.backgroundImage,\"none\")||kt(t.boxShadow)||Mt(t),ot=t=>Et.has(t.localName),nt=t=>Rt.has(t.localName)&&!t.firstElementChild&&!t.textContent?.trim(),wt=t=>{let n=document.createTreeWalker(t,NodeFilter.SHOW_TEXT|NodeFilter.SHOW_ELEMENT),e=document.createRange(),o=[],r=0;for(;n.nextNode();){let i=n.currentNode;if(i.nodeType===Node.TEXT_NODE){let l=i.parentElement;if(!i.textContent?.trim()||!l)continue;r++;let h=l.getBoundingClientRect();if(h.width<=1||h.height<=1)continue;e.selectNodeContents(i),o.push(tt(e).filter(f=>f.width||f.height))}else nt(i)&&(r++,o.push([...i.getClientRects()]))}if(!o.some(i=>i.length))return r;let c=(parseFloat(getComputedStyle(t).fontSize)||16)*et,a=(i,l)=>Math.min(i.bottom,l.bottom)-Math.max(i.top,l.top)>=Math.min(i.height,l.height)/2&&Math.max(i.left,l.left)-Math.min(i.right,l.right)<=c,m=o.map((i,l)=>l),s=i=>m[i]===i?i:m[i]=s(m[i]);for(let i=0;i<o.length;i++)for(let l=i+1;l<o.length;l++)o[i].some(h=>o[l].some(f=>a(h,f)))&&(m[s(l)]=s(i));return new Set(o.map((i,l)=>s(l))).size},Nt=(t,n)=>t.hasAttribute(H)||ot(t)||Ot(n)&&wt(t)<=1;function _t(t,n){if(parseFloat(n.borderRadius)||!t.parentElement)return n.borderRadius||\"0px\";let e=t.parentElement,o=getComputedStyle(e),r=t.getBoundingClientRect(),c=e.getBoundingClientRect();return Math.abs(r.width-c.width)<1&&Math.abs(r.height-c.height)<1&&o.overflow!==\"visible\"?o.borderRadius:n.borderRadius||\"0px\"}function Z(t){t.sort((e,o)=>e.left-o.left);let n=[];for(let e of t){let o=n.find(r=>{let c=Math.min(r.bottom,e.bottom)-Math.max(r.top,e.top),a=Math.min(r.bottom-r.top,e.bottom-e.top),m=e.left-r.right;return c>=a/2&&m<=Math.max(r.fontSize,e.fontSize)*et});o?(o.left=Math.min(o.left,e.left),o.right=Math.max(o.right,e.right),o.top=Math.min(o.top,e.top),o.bottom=Math.max(o.bottom,e.bottom),o.fontSize=Math.max(o.fontSize,e.fontSize),o.barTop=Math.min(o.barTop,e.barTop),o.barBottom=Math.max(o.barBottom,e.barBottom)):n.push({...e})}return n.map(e=>{let o=e.barBottom-e.barTop;return{x:e.left,y:e.barTop,width:e.right-e.left,height:o,radius:e.radius||`${Math.round(o/3)}px`}})}function rt(t,n,{mark:e=!0,onCovered:o}={}){let r=n.getBoundingClientRect(),c=n.offsetWidth?r.width/n.offsetWidth:1,a=n.offsetHeight?r.height/n.offsetHeight:1,m=d=>({left:(d.left-r.left)/c,right:(d.right-r.left)/c,top:(d.top-r.top)/a,bottom:(d.bottom-r.top)/a}),s=[],i=[],l=new Set,h=document.createRange(),f=(d,g,b)=>{let u=j(d,b);if(!u)return;let p=parseFloat(g.fontSize)||16,M=m(u);i.push({...M,fontSize:p,...xt(M,g,p),radius:g.getPropertyValue(\"--ask-radius\").trim()})},T=(d,g)=>{let b=d.data.search(/\\S/);if(b<0||!d.parentElement)return;h.setStart(d,b),h.setEnd(d,d.data.trimEnd().length);let u=getComputedStyle(d.parentElement);for(let p of tt(h))f(p,u,g)},_=(d,g)=>{for(let b of d.childNodes){if(b.nodeType===Node.TEXT_NODE){T(b,g);continue}if(b.nodeType!==Node.ELEMENT_NODE)continue;let u=b;if(u.hasAttribute(v)||u.hasAttribute($))continue;let p=getComputedStyle(u);if(p.display===\"none\")continue;if(Nt(u,p)){let E=j(u.getBoundingClientRect(),g);if(E){let S=m(E);s.push({x:S.left,y:S.top,width:S.right-S.left,height:S.bottom-S.top,radius:Tt(g,E,_t(u,p),p)})}ot(u)||l.add(u);continue}if(nt(u)){for(let E of u.getClientRects())f(E,p,g);continue}let M=p.overflowX!==\"visible\"||p.overflowY!==\"visible\";_(u,M?bt(g,u.getBoundingClientRect(),p):g)}};if(_(t,null),o?.(l),!e)return[...s,...Z(i)];for(let d of t.querySelectorAll(`[${R}]`))l.has(d)||d.removeAttribute(R);for(let d of l)d.hasAttribute(R)||d.setAttribute(R,\"\");return[...s,...Z(i)]}var Bt=t=>typeof matchMedia<\"u\"&&matchMedia(t).matches,Dt=()=>typeof Element<\"u\"&&typeof Element.prototype.animate==\"function\",st=()=>!Dt()||Bt(\"(prefers-reduced-motion: reduce)\");var it=t=>t.getAnimations?.()??[];var Lt=.7,$t=1280,at=320,vt=2.5,Ht=.45,It=[\"shimmer\",\"group-shimmer\",\"pulse\",\"none\"];function mt(t){let n=getComputedStyle(t),e=(c,a,m)=>{let s=n.getPropertyValue(c).trim();return a.includes(s)?s:m},o=e(\"--ask-animation\",It,\"shimmer\"),r=e(\"--ask-speed\",[\"slow\",\"fast\"],\"slow\");return{animation:o,duration:F[o===\"pulse\"?\"pulse\":\"shimmer\"][r]}}var w=20,Gt=Math.sin(w*Math.PI/180),lt=Math.cos(w*Math.PI/180),Pt=Gt/lt;var Wt=`${90+w}deg`,O=.85,x=12,ct=t=>(1-Math.cos(Math.PI*t))/2;function zt(t){let n=t*vt,e=(r,c)=>`color-mix(in srgb, ${z} ${(c*100).toFixed(1)}%, transparent) ${(r*t).toFixed(2)}px`,o=[];for(let r=0;r<=x;r++)o.push(e(r/x*O,ct(r/x)));for(let r=1;r<=x;r++)o.push(e(O+r/x*(1-O),ct(1-r/x)));return{width:n/lt,image:`repeating-linear-gradient(${Wt}, ${o.join(\", \")}, transparent ${n.toFixed(2)}px)`}}function Ft(t,n,e=mt(t)){for(let f of it(t))f.cancel();if(t.style.backgroundImage=\"\",t.style.backgroundRepeat=\"\",st()||typeof t.animate!=\"function\"||e.animation===\"none\")return;let o={duration:e.duration,iterations:1/0};if(e.animation===\"pulse\"){t.animate([{opacity:1,easing:\"ease-in-out\"},{opacity:Ht,easing:\"ease-in-out\"},{opacity:1}],o).startTime=0;return}let r=t.getBoundingClientRect(),c=r.left+scrollX,a=e.animation===\"group-shimmer\"?n??{left:c,top:r.top,width:r.width,height:r.height}:{left:0,top:0,width:document.documentElement.clientWidth||innerWidth,height:innerHeight},m=Math.min(Math.max(a.width*.4,80),at),{width:s,image:i}=zt(m),l=c-a.left+(r.top-a.top)*Pt,h=e.duration*Lt/($t+at);t.style.backgroundImage=i,t.style.backgroundSize=`${s}px 100%`,t.style.backgroundRepeat=\"repeat-x\",t.animate([{backgroundPosition:`${-l}px 0`},{backgroundPosition:`${s-l}px 0`}],{duration:s*h,iterations:1/0}).startTime=0}var Xt=t=>t.shadowRoot??t.attachShadow({mode:\"open\"});function dt(t,n){let e=Xt(t),o=t.getBoundingClientRect(),r={left:o.left+scrollX,top:o.top,width:o.width,height:o.height},c=mt(t);for(n.forEach((a,m)=>{let s=e.children[m];s||(s=document.createElement(\"div\"),s.setAttribute(L,\"\"),s.style.cssText=`position:absolute;display:block;pointer-events:none;background-color:${W};background-repeat:no-repeat`,e.append(s)),Object.assign(s.style,{left:`${a.x}px`,top:`${a.y}px`,width:`${a.width}px`,height:`${a.height}px`,borderRadius:a.radius});let i=`${Math.round(r.left+a.x)}|${Math.round(a.y)}|${Math.round(a.height)}|${Math.round(r.left)}|${Math.round(r.width)}|${Math.round(r.height)}|${document.documentElement.clientWidth}|${c.animation}|${c.duration}`;s.dataset.motion!==i&&(s.dataset.motion=i,Ft(s,r,c))});e.children.length>n.length;)e.lastElementChild.remove()}var pt=t=>t.parentElement?`${pt(t.parentElement)} > :nth-child(${[...t.parentElement.children].indexOf(t)+1})`:\":root\";function N(t){let n=t?.previousElementSibling,e=n?.querySelector(`:scope > [${B}]`),o=n?.querySelector(`:scope > [${D}]`);if(!n||!e||!o)return;let r=typeof CSSStyleSheet==\"function\"&&\"replaceSync\"in CSSStyleSheet.prototype?new CSSStyleSheet:null;r&&(document.adoptedStyleSheets=[...document.adoptedStyleSheets,r],n[G]=()=>{document.adoptedStyleSheets=document.adoptedStyleSheets.filter(s=>s!==r)});let c=s=>r?.replaceSync(s.size?`${[...s].map(pt).join(\", \")} { visibility: hidden !important; }`:\"\"),a=()=>{if(!o.isConnected||n[I])return m.disconnect();e.getClientRects().length&&dt(o,rt(e,o,{mark:!1,onCovered:c}))},m=new ResizeObserver(a);m.observe(n),document.fonts?.ready.then(a)}var ht=self,ft=Symbol.for(P),ut=ht[ft];ht[ft]=N;Array.isArray(ut)&&ut.forEach(N);N(document.currentScript);})();";
+/** For every skeleton after a page's first: calls the boot INLINE_SCRIPT left on window. */
+const INLINE_STUB = "(s=>{let k=Symbol.for(\"a-smart-skeleton.boot\"),b=self[k];typeof b==\"function\"?b(s):(self[k]=b||[]).push(s)})(document.currentScript)";
+/** Either, as a whole element — for templates where a literal script tag would be read as the component's own. */
+const inlineScriptTag = (nonce, stub = false) => `<script${nonce ? ` nonce="${nonce.replace(/"/g, "&quot;")}"` : ""}>${stub ? INLINE_STUB : INLINE_SCRIPT}<\/script>`;
+//#endregion
+//#region src/core/theme.ts
+const DEFAULT_COLORS = {
+	light: {
+		base: "rgb(0 0 0 / 0.07)",
+		highlight: "rgb(255 255 255 / 0.6)"
+	},
+	dark: {
+		base: "rgb(255 255 255 / 0.08)",
+		highlight: "rgb(255 255 255 / 0.1)"
+	}
+};
+const DEFAULT_THEME = {
+	...DEFAULT_COLORS,
+	animation: "shimmer",
+	speed: "slow",
+	text: {
+		top: "ascender",
+		bottom: "descender"
+	}
+};
+const ANIMATION = new Set([
+	"shimmer",
+	"group-shimmer",
+	"pulse",
+	"none"
+]);
+const SPEED = new Set(["slow", "fast"]);
+const TEXT_TOP = new Set([
+	"ascender",
+	"cap-height",
+	"x-height"
+]);
+const TEXT_BOTTOM = new Set(["baseline", "descender"]);
+const LENGTH = /^[\d.\s,%()+\-*/a-z]+$/i;
+const safeLength = (value) => {
+	const trimmed = value.trim();
+	if (!trimmed || trimmed.length > 100) return null;
+	if (/[<>;}{"'`]/.test(trimmed)) return null;
+	return LENGTH.test(trimmed) ? trimmed : null;
+};
+const safeColor = (value) => {
+	const trimmed = value.trim();
+	if (!trimmed || trimmed.length > 200) return null;
+	if (/[;}<>]/.test(trimmed)) return null;
+	return trimmed;
+};
+/** A theme's custom properties for one set of colours, for a style attribute. */
+function themeVariables(theme = {}, mode = null) {
+	const variables = {};
+	const colors = mode && (theme[mode] ?? DEFAULT_COLORS[mode]);
+	if (colors) {
+		const base = safeColor(colors.base);
+		const highlight = safeColor(colors.highlight);
+		if (base) variables["--ask-base"] = base;
+		if (highlight) variables["--ask-highlight"] = highlight;
+	}
+	if (theme.radius) {
+		const radius = safeLength(theme.radius);
+		if (radius) variables["--ask-radius"] = radius;
+	}
+	if (theme.animation && ANIMATION.has(theme.animation)) variables["--ask-animation"] = theme.animation;
+	if (theme.speed && SPEED.has(theme.speed)) variables["--ask-speed"] = theme.speed;
+	if (theme.text?.top && TEXT_TOP.has(theme.text.top)) variables["--ask-text-top"] = theme.text.top;
+	if (theme.text?.bottom && TEXT_BOTTOM.has(theme.text.bottom)) variables["--ask-text-bottom"] = theme.text.bottom;
+	return variables;
+}
+const declarations = (variables) => Object.entries(variables).map(([name, value]) => `${name}: ${value};`).join(" ");
+/** CSS for a theme on `selector`; colours follow `mode`, and are left out when neither is given. */
+function skeletonCSS({ theme = {}, mode, text, selector = ":root" }) {
+	const resolved = {
+		...theme,
+		text: {
+			...theme.text,
+			...text
+		}
+	};
+	const colored = mode ?? (theme.light || theme.dark ? "system" : null);
+	const base = themeVariables(resolved, colored === "dark" ? "dark" : colored ? "light" : null);
+	const rules = [];
+	if (Object.keys(base).length) rules.push(`${selector} { ${declarations(base)} }`);
+	if (colored === "system") {
+		const dark = themeVariables({ dark: theme.dark }, "dark");
+		rules.push(`@media (prefers-color-scheme: dark) { ${selector} { ${declarations(dark)} } }`);
+	}
+	return rules.join("\n");
+}
+let themeEl = null;
+/** Sets a theme for the whole page, for setups without a provider. */
+function applyTheme(theme, mode, { nonce } = {}) {
+	themeEl ??= document.head.appendChild(document.createElement("style"));
+	if (nonce) themeEl.nonce = nonce;
+	themeEl.textContent = skeletonCSS({
+		theme,
+		mode
+	});
+}
+/** The same CSS as a whole element, for templates that can only render HTML strings. */
+const themeStyleTag = (config, nonce) => {
+	const css = skeletonCSS(config);
+	return css ? `<style${nonce ? ` nonce="${nonce.replace(/"/g, "&quot;")}"` : ""}>${css}</style>` : "";
+};
+//#endregion
+//#region src/core/debug.ts
+const entries = /* @__PURE__ */ new Map();
+let enabled;
+let host$1 = null;
+let frame = 0;
+function fromPage() {
+	try {
+		return new URLSearchParams(location.search).has("ask-debug") || localStorage.getItem("a-smart-skeleton:debug") === "1";
+	} catch {
+		return false;
+	}
+}
+const everywhere = () => enabled ??= typeof window !== "undefined" && fromPage();
+/** On with `?ask-debug`, `a-smart-skeleton:debug` = "1" in localStorage or `setDebug(true)`; for `element`, also inside `[ask-debug]`. */
+const debugging = (element) => everywhere() || !!element?.closest(`[ask-debug]`);
+function setDebug(on) {
+	enabled = on;
+	if (on) start();
+	else stop();
+}
+function reportLoading(reveal, source) {
+	if (!reveal || !debugging(reveal)) return;
+	entries.set(reveal, {
+		state: "loading",
+		source
+	});
+	show();
+}
+function reportReveal(reveal, moved) {
+	if (!reveal || !debugging(reveal)) return;
+	entries.set(reveal, {
+		...entries.get(reveal),
+		state: "shown",
+		moved
+	});
+	show();
+}
+function show() {
+	start();
+	cancelAnimationFrame(frame);
+	draw();
+}
+const PANEL_CSS = `
+:host { all: initial; }
+.box { position: fixed; box-sizing: border-box; border: 1px dashed; border-radius: 4px; }
+.label {
+  position: absolute; left: -1px; bottom: 100%; margin-bottom: 2px;
+  padding: 1px 6px; border-radius: 4px; white-space: nowrap;
+  font: 500 11px/16px ui-monospace, SFMono-Regular, Menlo, monospace; color: #fff;
+}
+.loading { border-color: #3b82f6; } .loading .label { background: #3b82f6; }
+.still { border-color: #22c55e; } .still .label { background: #16a34a; }
+.moved { border-color: #ef4444; border-style: solid; } .moved .label { background: #dc2626; }
+.panel {
+  position: fixed; right: 12px; bottom: 12px; display: flex; gap: 8px; align-items: center;
+  padding: 6px 10px; border-radius: 8px; background: #111; color: #fff; pointer-events: auto;
+  font: 500 12px/16px ui-sans-serif, system-ui, sans-serif; box-shadow: 0 4px 16px rgb(0 0 0 / 0.3);
+}
+.panel label { display: flex; gap: 4px; align-items: center; cursor: pointer; }
+`;
+function start() {
+	if (typeof document === "undefined") return;
+	if (!host$1?.isConnected) {
+		host$1 = document.createElement("div");
+		host$1.style.cssText = "position:fixed;inset:0;pointer-events:none;z-index:2147483647";
+		const shadow = host$1.attachShadow({ mode: "open" });
+		shadow.innerHTML = `<style>${PANEL_CSS}</style><div class="boxes"></div>`;
+		document.body.append(host$1);
+	}
+	const shadow = host$1.shadowRoot;
+	if (enabled && !shadow.querySelector(".panel")) {
+		const panel = document.createElement("div");
+		panel.className = "panel";
+		panel.innerHTML = `a-smart-skeleton debug <label><input type="checkbox" class="xray"> x-ray</label>`;
+		panel.querySelector(".xray").addEventListener("change", (event) => {
+			document.documentElement.toggleAttribute(ATTR_XRAY, event.target.checked);
+		});
+		shadow.append(panel);
+	}
+	if (!frame) frame = requestAnimationFrame(draw);
+}
+function stop() {
+	host$1?.shadowRoot?.querySelector(".panel")?.remove();
+	document.documentElement.removeAttribute(ATTR_XRAY);
+	if ([...entries.keys()].some((reveal) => debugging(reveal))) return;
+	cancelAnimationFrame(frame);
+	frame = 0;
+	host$1?.remove();
+	host$1 = null;
+}
+const describe = ({ state, source, moved }) => {
+	const from = source ? ` · ${source}` : "";
+	if (state === "loading") return {
+		kind: "loading",
+		text: `skeleton${from}`
+	};
+	if (!moved || moved.width === 0 && moved.height === 0) return {
+		kind: "still",
+		text: `✓ no movement${from}`
+	};
+	return {
+		kind: "moved",
+		text: `✗ moved ${moved.width}×${moved.height}px${from}`
+	};
+};
+function draw() {
+	frame = 0;
+	if (!host$1?.shadowRoot) return;
+	const boxes = host$1.shadowRoot.querySelector(".boxes");
+	for (const reveal of entries.keys()) if (!reveal.isConnected || !debugging(reveal)) entries.delete(reveal);
+	const items = [...entries];
+	while (boxes.children.length > items.length) boxes.lastElementChild.remove();
+	items.forEach(([reveal, entry], index) => {
+		let box = boxes.children[index];
+		if (!box) {
+			box = boxes.appendChild(document.createElement("div"));
+			box.innerHTML = `<span class="label"></span>`;
+		}
+		const rect = reveal.getBoundingClientRect();
+		const { kind, text } = describe(entry);
+		box.className = `box ${kind}`;
+		Object.assign(box.style, {
+			left: `${rect.left - 2}px`,
+			top: `${rect.top - 2}px`,
+			width: `${rect.width + 4}px`,
+			height: `${rect.height + 4}px`
+		});
+		box.firstElementChild.textContent = text;
+	});
+	if (enabled || entries.size) frame = requestAnimationFrame(draw);
+}
+//#endregion
+//#region src/core/canvas.ts
+let context;
+const textContext = () => context ??= /jsdom/.test(navigator.userAgent) ? null : document.createElement("canvas").getContext("2d");
+//#endregion
+//#region src/core/snapshot.ts
+const MEDIA$1 = new Set(MEDIA_TAGS);
+const REMOVED = "script, noscript, template, base, meta, link";
+const REPLACED = new Set([
+	"iframe",
+	"object",
+	"embed"
+]);
+const STRIPPED = new Set([
+	"src",
+	"srcset",
+	"sizes",
+	"poster",
+	"data",
+	"srcdoc",
+	"action",
+	"formaction",
+	"formtarget",
+	"background",
+	"ping",
+	"dynsrc",
+	"lowsrc",
+	"value",
+	"alt",
+	ATTR_COVERED
+]);
+const STYLE_UNSAFE = /url\s*\(\s*['"]?\s*(javascript|vbscript):|expression\s*\(|<|>/i;
+const fill = (value) => value.replace(/[A-Z]/g, "X").replace(/[a-z]/g, "x").replace(/\d/g, "0");
+function fillText(original, copy) {
+	const filled = fill(copy.data);
+	copy.data = filled;
+	const parent = original.parentElement;
+	const context = textContext();
+	if (!parent || !context || !filled.trim()) return;
+	const style = getComputedStyle(parent);
+	context.font = `${style.fontStyle} ${style.fontWeight} ${style.fontSize} ${style.fontFamily}`;
+	const shape = (value) => {
+		const collapsed = value.replace(/\s+/g, " ");
+		if (style.textTransform === "uppercase") return collapsed.toUpperCase();
+		if (style.textTransform === "lowercase") return collapsed.toLowerCase();
+		return collapsed;
+	};
+	const delta = (context.measureText(shape(original.data)).width - context.measureText(shape(filled)).width) / shape(filled).length;
+	if (Math.abs(delta) < .01) return;
+	const span = document.createElement("span");
+	span.style.letterSpacing = `${(parseFloat(style.letterSpacing) || 0) + delta}px`;
+	copy.replaceWith(span);
+	span.append(copy);
+}
+function sanitize(root) {
+	for (const element of root.querySelectorAll(REMOVED)) element.remove();
+	for (const element of root.querySelectorAll("*")) {
+		if (REPLACED.has(element.localName)) {
+			const stand = document.createElement("span");
+			stand.style.cssText = element.getAttribute("style") ?? "";
+			stand.style.display ||= "inline-block";
+			element.replaceWith(stand);
+			continue;
+		}
+		for (const { name, value } of [...element.attributes]) {
+			const lower = name.toLowerCase();
+			if (lower.startsWith("on") || STRIPPED.has(lower) || lower.endsWith("href") && /^\s*(javascript|vbscript|data):/i.test(value) || lower === "style" && STYLE_UNSAFE.test(value)) element.removeAttribute(name);
+		}
+		if (element.localName === "img") element.setAttribute("alt", "");
+	}
+	for (const source of root.querySelectorAll("video source, picture source")) source.remove();
+}
+/** The markup in `root`, safe to keep: no scripts, handlers or media sources; `filler` replaces its text too. */
+function serialize(root, filler) {
+	const clone = root.cloneNode(true);
+	const show = NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT;
+	const original = document.createTreeWalker(root, show);
+	const copy = document.createTreeWalker(clone, show);
+	const texts = [];
+	const media = [];
+	while (original.nextNode() && copy.nextNode()) {
+		const a = original.currentNode;
+		const b = copy.currentNode;
+		if (a.nodeType === Node.TEXT_NODE) {
+			if (filler) texts.push([a, b]);
+		} else if (MEDIA$1.has(a.localName) || REPLACED.has(a.localName)) media.push([a, b]);
+	}
+	for (const [a, b] of media) {
+		const rect = a.getBoundingClientRect();
+		b.style.boxSizing = "border-box";
+		b.style.width = `${rect.width}px`;
+		if (rect.width && rect.height) {
+			b.style.maxWidth = "100%";
+			b.style.height = "auto";
+			b.style.aspectRatio = `${rect.width} / ${rect.height}`;
+		} else b.style.height = `${rect.height}px`;
+	}
+	for (const [a, b] of texts) fillText(a, b);
+	sanitize(clone);
+	return clone.innerHTML;
+}
+function restore$1(html) {
+	const template = document.createElement("template");
+	template.innerHTML = html;
+	sanitize(template.content);
+	return template.content;
+}
+const signature = (element, depth) => [...element.children].map((child) => {
+	const classes = [...child.classList].sort().join(".");
+	const inner = depth > 1 && child.firstElementChild ? `(${signature(child, depth - 1)})` : "";
+	return `${child.localName}${classes ? `.${classes}` : ""}${inner}`;
+}).join(",");
+const hash = (value) => {
+	let h = 5381;
+	for (let i = 0; i < value.length; i++) h = h * 33 ^ value.charCodeAt(i);
+	return (h >>> 0).toString(36);
+};
+/** Identifies content by its page and the shape of its top two levels — the parts that rarely hang on data. */
+function autoKey(element) {
+	const shape = signature(element, 2);
+	return shape ? `${location.pathname}|${hash(shape)}` : null;
+}
+//#endregion
+//#region src/core/dev.ts
+let dev = false;
+try {
+	dev = process.env.NODE_ENV !== "production";
+} catch {
+	dev = false;
+}
+const isDev = dev;
+const warned = /* @__PURE__ */ new Set();
+function warnOnce(id, message) {
+	if (!isDev || warned.has(id)) return;
+	warned.add(id);
+	console.warn(`[a-smart-skeleton] ${message}`);
+}
+const URL_LIKE = /^(https?:|\/|data:|blob:)/;
+/**
+* Warns once per app if the page has a meta CSP that restricts inline scripts and
+* the consumer did not pass a nonce through the provider. Silent when CSP is absent
+* or when the loading pane isn't on the client yet — we can't read CSP headers from
+* script, so the meta-tag check is a best-effort signal to developers.
+*/
+function checkNonce(nonce) {
+	if (!isDev || typeof document === "undefined" || nonce) return;
+	const content = document.querySelector("meta[http-equiv=\"Content-Security-Policy\" i]")?.getAttribute("content") ?? "";
+	if (!/script-src/i.test(content)) return;
+	if (/'unsafe-inline'/.test(content) || /\*/.test(content)) return;
+	warnOnce("csp:missing-nonce", "ASmartSkeleton ships an inline boot script that measures the server-rendered skeleton before first paint. Your page has a Content-Security-Policy with script-src but no nonce was passed to <ASmartSkeletonProvider :nonce=\"…\">, so the browser will block it and first paint will be blank. Pass the same nonce you used for the response header.");
+}
+/** Same keys and lengths as `data`, with every string replaced by filler. */
+function sampleFrom(data) {
+	if (typeof data === "string") return URL_LIKE.test(data) ? "" : fill(data);
+	if (Array.isArray(data)) return data.map(sampleFrom);
+	if (data instanceof Date) return data;
+	if (data && typeof data === "object") return Object.fromEntries(Object.entries(data).map(([key, value]) => [key, sampleFrom(value)]));
+	return data;
+}
+//#endregion
+//#region src/core/measure.ts
+const intersect = (clip, rect) => clip ? {
+	left: Math.max(clip.left, rect.left),
+	right: Math.min(clip.right, rect.right),
+	top: Math.max(clip.top, rect.top),
+	bottom: Math.min(clip.bottom, rect.bottom)
+} : rect;
+const cornersOf = (rect) => [
+	[rect.left, rect.top],
+	[rect.right, rect.top],
+	[rect.right, rect.bottom],
+	[rect.left, rect.bottom]
+];
+const near = (a, b) => Math.abs(a[0] - b[0]) < 1 && Math.abs(a[1] - b[1]) < 1;
+function radiiOf(style, rect) {
+	const size = Math.min(rect.right - rect.left, rect.bottom - rect.top);
+	const px = (value) => value.endsWith("%") ? parseFloat(value) / 100 * size : parseFloat(value) || 0;
+	return [
+		px(style.borderTopLeftRadius),
+		px(style.borderTopRightRadius),
+		px(style.borderBottomRightRadius),
+		px(style.borderBottomLeftRadius)
+	];
+}
+function clipWithin(clip, rect, style) {
+	const box = intersect(clip, rect);
+	const own = radiiOf(style, rect);
+	const outer = clip ? cornersOf(clip) : [];
+	const ownCorners = cornersOf(rect);
+	const corners = cornersOf(box).map((corner, i) => near(corner, ownCorners[i]) ? own[i] : clip && near(corner, outer[i]) ? clip.corners[i] : 0);
+	const { left, right, top, bottom } = box;
+	return {
+		left,
+		right,
+		top,
+		bottom,
+		corners
+	};
+}
+function roundedBy(clip, box, own, style) {
+	if (!clip) return own;
+	const clipCorners = cornersOf(clip);
+	const touching = cornersOf(box).map((corner, i) => clip.corners[i] > 0 && near(corner, clipCorners[i]));
+	if (!touching.some(Boolean)) return own;
+	const mine = radiiOf(style, box);
+	return touching.map((touches, i) => touches ? Math.max(mine[i], clip.corners[i]) : mine[i]).map((r) => `${r}px`).join(" ");
+}
+const clipped = (rect, clip) => {
+	const box = intersect(clip, rect);
+	return box.right - box.left >= 2 && box.bottom - box.top >= 2 ? box : null;
+};
+const DEFAULT_TEXT = {
+	top: "ascender",
+	bottom: "descender"
+};
+const metricsByFont = /* @__PURE__ */ new Map();
+const lineRects = (range) => [...range.getClientRects?.() ?? []];
+function metricsOf(style) {
+	const font = `${style.fontStyle} ${style.fontWeight} ${style.fontSize} ${style.fontFamily}`;
+	if (metricsByFont.has(font)) return metricsByFont.get(font);
+	const context = textContext();
+	let metrics = null;
+	if (context) {
+		context.font = font;
+		const box = context.measureText("H");
+		const up = (text) => context.measureText(text).actualBoundingBoxAscent;
+		metrics = {
+			ascent: box.fontBoundingBoxAscent,
+			descent: box.fontBoundingBoxDescent,
+			ascender: up("bdfhkl"),
+			capHeight: box.actualBoundingBoxAscent,
+			xHeight: up("xz"),
+			descender: context.measureText("gjpqy").actualBoundingBoxDescent
+		};
+	}
+	metricsByFont.set(font, metrics);
+	return metrics;
+}
+const TOPS = {
+	ascender: "ascender",
+	"cap-height": "capHeight",
+	"x-height": "xHeight"
+};
+const rule = (style, name, allowed, fallback) => {
+	const value = style.getPropertyValue(name).trim();
+	return allowed.includes(value) ? value : fallback;
+};
+function barOf(rect, style, fontSize) {
+	const metrics = metricsOf(style);
+	if (!metrics) {
+		const height = Math.min(fontSize * .72, rect.bottom - rect.top);
+		const middle = (rect.top + rect.bottom) / 2;
+		return {
+			barTop: middle - height / 2,
+			barBottom: middle + height / 2
+		};
+	}
+	const top = rule(style, "--ask-text-top", Object.keys(TOPS), DEFAULT_TEXT.top);
+	const bottom = rule(style, "--ask-text-bottom", ["baseline", "descender"], DEFAULT_TEXT.bottom);
+	const box = metrics.ascent + metrics.descent;
+	const baseline = rect.top + (rect.bottom - rect.top - box) / 2 + metrics.ascent;
+	return {
+		barTop: baseline - metrics[TOPS[top]],
+		barBottom: baseline + (bottom === "descender" ? metrics.descender : 0)
+	};
+}
+const MEDIA = new Set(MEDIA_TAGS);
+const TEXT = new Set(TEXT_TAGS);
+const LINE_GAP = .4;
+const TRANSPARENT = /[,/]\s*0\)$/;
+const isSet = (value, none) => value !== "" && value !== none;
+const SIDES = [
+	"Top",
+	"Right",
+	"Bottom",
+	"Left"
+];
+const bordered = (style) => SIDES.every((side) => isSet(style[`border${side}Style`], "none") && isSet(style[`border${side}Width`], "0px"));
+const isRule = (shadow) => {
+	const [x = 0, y = 0, blur = 0, spread = 0] = (shadow.replace(/rgba?\([^)]*\)|#\w+/g, "").match(/-?[\d.]+px/g) ?? []).map(parseFloat);
+	return shadow.includes("inset") && !blur && !spread && x === 0 !== (y === 0) && Math.abs(x + y) <= 2;
+};
+const shadowPaints = (boxShadow) => isSet(boxShadow, "none") && !boxShadow.split(/,(?![^(]*\))/).every(isRule);
+const isPainted = (style) => isSet(style.backgroundColor, "transparent") && !TRANSPARENT.test(style.backgroundColor) || isSet(style.backgroundImage, "none") || shadowPaints(style.boxShadow) || bordered(style);
+const isMedia = (element) => MEDIA.has(element.localName);
+const isEmptyText = (element) => TEXT.has(element.localName) && !element.firstElementChild && !element.textContent?.trim();
+/** Labels inside: one per piece of text, however many lines it wraps to or nodes it's split into. */
+const countLabels = (element) => {
+	const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT);
+	const range = document.createRange();
+	const pieces = [];
+	let nodes = 0;
+	while (walker.nextNode()) {
+		const node = walker.currentNode;
+		if (node.nodeType === Node.TEXT_NODE) {
+			const parent = node.parentElement;
+			if (!node.textContent?.trim() || !parent) continue;
+			nodes++;
+			const box = parent.getBoundingClientRect();
+			if (box.width <= 1 || box.height <= 1) continue;
+			range.selectNodeContents(node);
+			pieces.push(lineRects(range).filter((r) => r.width || r.height));
+		} else if (isEmptyText(node)) {
+			nodes++;
+			pieces.push([...node.getClientRects()]);
+		}
+	}
+	if (!pieces.some((rects) => rects.length)) return nodes;
+	const reach = (parseFloat(getComputedStyle(element).fontSize) || 16) * LINE_GAP;
+	const beside = (a, b) => Math.min(a.bottom, b.bottom) - Math.max(a.top, b.top) >= Math.min(a.height, b.height) / 2 && Math.max(a.left, b.left) - Math.min(a.right, b.right) <= reach;
+	const label = pieces.map((_, i) => i);
+	const find = (i) => label[i] === i ? i : label[i] = find(label[i]);
+	for (let i = 0; i < pieces.length; i++) for (let j = i + 1; j < pieces.length; j++) if (pieces[i].some((a) => pieces[j].some((b) => beside(a, b)))) label[find(j)] = find(i);
+	return new Set(pieces.map((_, i) => find(i))).size;
+};
+const isBlock = (element, style) => element.hasAttribute("ask-block") || isMedia(element) || isPainted(style) && countLabels(element) <= 1;
+function radiusOf(element, style) {
+	if (parseFloat(style.borderRadius) || !element.parentElement) return style.borderRadius || "0px";
+	const parent = element.parentElement;
+	const parentStyle = getComputedStyle(parent);
+	const a = element.getBoundingClientRect();
+	const b = parent.getBoundingClientRect();
+	return Math.abs(a.width - b.width) < 1 && Math.abs(a.height - b.height) < 1 && parentStyle.overflow !== "visible" ? parentStyle.borderRadius : style.borderRadius || "0px";
+}
+function toBars(lines) {
+	lines.sort((a, b) => a.left - b.left);
+	const merged = [];
+	for (const line of lines) {
+		const last = merged.find((m) => {
+			const overlap = Math.min(m.bottom, line.bottom) - Math.max(m.top, line.top);
+			const shorter = Math.min(m.bottom - m.top, line.bottom - line.top);
+			const gap = line.left - m.right;
+			return overlap >= shorter / 2 && gap <= Math.max(m.fontSize, line.fontSize) * LINE_GAP;
+		});
+		if (last) {
+			last.left = Math.min(last.left, line.left);
+			last.right = Math.max(last.right, line.right);
+			last.top = Math.min(last.top, line.top);
+			last.bottom = Math.max(last.bottom, line.bottom);
+			last.fontSize = Math.max(last.fontSize, line.fontSize);
+			last.barTop = Math.min(last.barTop, line.barTop);
+			last.barBottom = Math.max(last.barBottom, line.barBottom);
+		} else merged.push({ ...line });
+	}
+	return merged.map((line) => {
+		const height = line.barBottom - line.barTop;
+		return {
+			x: line.left,
+			y: line.barTop,
+			width: line.right - line.left,
+			height,
+			radius: line.radius || `${Math.round(height / 3)}px`
+		};
+	});
+}
+/** Measures what `root` holds into rects relative to `layer`; without `mark`, `root` is left untouched. */
+function measureSkeleton(root, layer, { mark = true, onCovered } = {}) {
+	const origin = layer.getBoundingClientRect();
+	const scaleX = layer.offsetWidth ? origin.width / layer.offsetWidth : 1;
+	const scaleY = layer.offsetHeight ? origin.height / layer.offsetHeight : 1;
+	const local = (rect) => ({
+		left: (rect.left - origin.left) / scaleX,
+		right: (rect.right - origin.left) / scaleX,
+		top: (rect.top - origin.top) / scaleY,
+		bottom: (rect.bottom - origin.top) / scaleY
+	});
+	const blocks = [];
+	const lines = [];
+	const covered = /* @__PURE__ */ new Set();
+	const range = document.createRange();
+	const addLine = (rect, style, clip) => {
+		const box = clipped(rect, clip);
+		if (!box) return;
+		const fontSize = parseFloat(style.fontSize) || 16;
+		const line = local(box);
+		lines.push({
+			...line,
+			fontSize,
+			...barOf(line, style, fontSize),
+			radius: style.getPropertyValue("--ask-radius").trim()
+		});
+	};
+	const addText = (node, clip) => {
+		const start = node.data.search(/\S/);
+		if (start < 0 || !node.parentElement) return;
+		range.setStart(node, start);
+		range.setEnd(node, node.data.trimEnd().length);
+		const style = getComputedStyle(node.parentElement);
+		for (const rect of lineRects(range)) addLine(rect, style, clip);
+	};
+	const visit = (parent, clip) => {
+		for (const node of parent.childNodes) {
+			if (node.nodeType === Node.TEXT_NODE) {
+				addText(node, clip);
+				continue;
+			}
+			if (node.nodeType !== Node.ELEMENT_NODE) continue;
+			const element = node;
+			if (element.hasAttribute("ask-ignore") || element.hasAttribute("ask-own")) continue;
+			const style = getComputedStyle(element);
+			if (style.display === "none") continue;
+			if (isBlock(element, style)) {
+				const visible = clipped(element.getBoundingClientRect(), clip);
+				if (visible) {
+					const box = local(visible);
+					blocks.push({
+						x: box.left,
+						y: box.top,
+						width: box.right - box.left,
+						height: box.bottom - box.top,
+						radius: roundedBy(clip, visible, radiusOf(element, style), style)
+					});
+				}
+				if (!isMedia(element)) covered.add(element);
+				continue;
+			}
+			if (isEmptyText(element)) {
+				for (const rect of element.getClientRects()) addLine(rect, style, clip);
+				continue;
+			}
+			visit(element, style.overflowX !== "visible" || style.overflowY !== "visible" ? clipWithin(clip, element.getBoundingClientRect(), style) : clip);
+		}
+	};
+	visit(root, null);
+	onCovered?.(covered);
+	if (!mark) return [...blocks, ...toBars(lines)];
+	for (const element of root.querySelectorAll(`[${ATTR_COVERED}]`)) if (!covered.has(element)) element.removeAttribute(ATTR_COVERED);
+	for (const element of covered) if (!element.hasAttribute("ask-covered")) element.setAttribute(ATTR_COVERED, "");
+	return [...blocks, ...toBars(lines)];
+}
+//#endregion
+//#region src/core/motion.ts
+const prefers = (query) => typeof matchMedia !== "undefined" && matchMedia(query).matches;
+const canAnimate = () => typeof Element !== "undefined" && typeof Element.prototype.animate === "function";
+const prefersReducedMotion = () => !canAnimate() || prefers("(prefers-reduced-motion: reduce)");
+const prefersReducedTransparency = () => prefers("(prefers-reduced-transparency: reduce)");
+const animationsOf = (element) => element.getAnimations?.() ?? [];
+//#endregion
+//#region src/core/shimmer.ts
+const SWEEP = .7;
+const MAX_BAND = 320;
+const SPACING = 2.5;
+const PULSE_LOW = .45;
+const ANIMATIONS = [
+	"shimmer",
+	"group-shimmer",
+	"pulse",
+	"none"
+];
+/** The animation an element inherits from the theme: `--ask-animation` and `--ask-speed`. */
+function motionOf(element) {
+	const style = getComputedStyle(element);
+	const read = (name, allowed, fallback) => {
+		const value = style.getPropertyValue(name).trim();
+		return allowed.includes(value) ? value : fallback;
+	};
+	const animation = read("--ask-animation", ANIMATIONS, "shimmer");
+	const speed = read("--ask-speed", ["slow", "fast"], "slow");
+	return {
+		animation,
+		duration: DURATIONS[animation === "pulse" ? "pulse" : "shimmer"][speed]
+	};
+}
+const SLANT = 20;
+const SIN = Math.sin(SLANT * Math.PI / 180);
+const COS = Math.cos(SLANT * Math.PI / 180);
+const SLANT_TAN = SIN / COS;
+const SLANT_COS = COS;
+const SLANT_ANGLE = `110deg`;
+const PEAK = .85;
+const ease = (t) => (1 - Math.cos(Math.PI * t)) / 2;
+/** Highlights `SPACING` band-widths apart, in px from the box's corner, so every rect draws the same stream. */
+function highlights(band) {
+	const period = band * SPACING;
+	const stop = (at, alpha) => `color-mix(in srgb, ${HIGHLIGHT} ${(alpha * 100).toFixed(1)}%, transparent) ${(at * band).toFixed(2)}px`;
+	const stops = [];
+	for (let i = 0; i <= 12; i++) stops.push(stop(i / 12 * PEAK, ease(i / 12)));
+	for (let i = 1; i <= 12; i++) stops.push(stop(PEAK + i / 12 * (1 - PEAK), ease(1 - i / 12)));
+	return {
+		width: period / COS,
+		image: `repeating-linear-gradient(${SLANT_ANGLE}, ${stops.join(", ")}, transparent ${period.toFixed(2)}px)`
+	};
+}
+/** Animates `element` as its slice of one sweep, on the document clock, so however late it mounts it joins the sweep under way. */
+function shimmer(element, group, motion = motionOf(element)) {
+	for (const animation of animationsOf(element)) animation.cancel();
+	element.style.backgroundImage = "";
+	element.style.backgroundRepeat = "";
+	if (prefersReducedMotion() || typeof element.animate !== "function") return;
+	if (motion.animation === "none") return;
+	const timing = {
+		duration: motion.duration,
+		iterations: Infinity
+	};
+	if (motion.animation === "pulse") {
+		element.animate([
+			{
+				opacity: 1,
+				easing: "ease-in-out"
+			},
+			{
+				opacity: PULSE_LOW,
+				easing: "ease-in-out"
+			},
+			{ opacity: 1 }
+		], timing).startTime = 0;
+		return;
+	}
+	const rect = element.getBoundingClientRect();
+	const x = rect.left + scrollX;
+	const area = motion.animation === "group-shimmer" ? group ?? {
+		left: x,
+		top: rect.top,
+		width: rect.width,
+		height: rect.height
+	} : {
+		left: 0,
+		top: 0,
+		width: document.documentElement.clientWidth || innerWidth,
+		height: innerHeight
+	};
+	const { width: tile, image } = highlights(Math.min(Math.max(area.width * .4, 80), MAX_BAND));
+	const along = x - area.left + (rect.top - area.top) * SLANT_TAN;
+	const pace = motion.duration * SWEEP / 1600;
+	element.style.backgroundImage = image;
+	element.style.backgroundSize = `${tile}px 100%`;
+	element.style.backgroundRepeat = "repeat-x";
+	element.animate([{ backgroundPosition: `${-along}px 0` }, { backgroundPosition: `${tile - along}px 0` }], {
+		duration: tile * pace,
+		iterations: Infinity
+	}).startTime = 0;
+}
+/** ms per px of the band in `element`'s shimmer; null when it has no band. */
+function paceOf(element) {
+	if (prefersReducedMotion()) return null;
+	const motion = motionOf(element);
+	if (motion.animation !== "shimmer" && motion.animation !== "group-shimmer") return null;
+	return motion.duration * SWEEP / 1600;
+}
+const shadow = (layer) => layer.shadowRoot ?? layer.attachShadow({ mode: "open" });
+/** The rect elements drawn into `layer`. */
+const rectsOf = (layer) => layer.shadowRoot ? [...layer.shadowRoot.children] : [];
+/** Draws `rects` into `layer`, reusing the elements already there. */
+function drawSkeleton(layer, rects) {
+	const root = shadow(layer);
+	const rect = layer.getBoundingClientRect();
+	const group = {
+		left: rect.left + scrollX,
+		top: rect.top,
+		width: rect.width,
+		height: rect.height
+	};
+	const motion = motionOf(layer);
+	rects.forEach((part, index) => {
+		let element = root.children[index];
+		if (!element) {
+			element = document.createElement("div");
+			element.setAttribute(ATTR_RECT, "");
+			element.style.cssText = `position:absolute;display:block;pointer-events:none;background-color:${BASE};background-repeat:no-repeat`;
+			root.append(element);
+		}
+		Object.assign(element.style, {
+			left: `${part.x}px`,
+			top: `${part.y}px`,
+			width: `${part.width}px`,
+			height: `${part.height}px`,
+			borderRadius: part.radius
+		});
+		const key = `${Math.round(group.left + part.x)}|${Math.round(part.y)}|${Math.round(part.height)}|${Math.round(group.left)}|${Math.round(group.width)}|${Math.round(group.height)}|${document.documentElement.clientWidth}|${motion.animation}|${motion.duration}`;
+		if (element.dataset.motion !== key) {
+			element.dataset.motion = key;
+			shimmer(element, group, motion);
+		}
+	});
+	while (root.children.length > rects.length) root.lastElementChild.remove();
+}
+//#endregion
+//#region src/core/plan.ts
+const SKELETON_DELAY = 150;
+const QUICK_FADE = 120;
+const SMALL_HEIGHT = 72;
+const SMALL_PIECES = 3;
+const SECONDARY_DELAY = 60;
+const ACTIVE_WINDOW = 400;
+const MAX_DELAY = 1e3;
+const MAX_DURATION = 1e3;
+const ENTER = new Set([
+	"filter",
+	"transform",
+	"translate",
+	"scale",
+	"rotate",
+	"clipPath",
+	"easing",
+	"composite"
+]);
+let lastInput = -Infinity;
+let listening = false;
+function listen() {
+	if (listening || typeof addEventListener === "undefined") return;
+	listening = true;
+	for (const type of [
+		"wheel",
+		"touchmove",
+		"keydown"
+	]) addEventListener(type, () => lastInput = performance.now(), {
+		passive: true,
+		capture: true
+	});
+}
+const loading = /* @__PURE__ */ new WeakMap();
+/** Notes a skeleton going up in `reveal` — when, and whether it's a refetch over the data on screen. */
+function noteSkeleton(reveal, { served, refetch }) {
+	listen();
+	const since = loading.get(reveal)?.since ?? performance.now();
+	loading.set(reveal, {
+		since: served ? -Infinity : since,
+		refetch
+	});
+}
+function pieces(root) {
+	const found = [];
+	const visit = (element) => {
+		for (const child of element.children) {
+			const ownText = [...child.childNodes].some((node) => node.nodeType === Node.TEXT_NODE && node.textContent?.trim());
+			if (!child.firstElementChild || ownText || child.localName === "svg") found.push(child);
+			else visit(child);
+		}
+	};
+	visit(root);
+	return found;
+}
+function unitOf(piece, root) {
+	for (let element = piece; element && element !== root; element = element.parentElement) {
+		const parent = element.parentElement;
+		if (!parent) break;
+		if ([...parent.children].filter((sibling) => sibling.localName === element.localName && sibling.className === element.className).length >= 3) return element;
+	}
+	return piece;
+}
+const contains = (outer, inner) => {
+	const x = inner.left + inner.width / 2;
+	const y = inner.top + inner.height / 2;
+	return x >= outer.left && x <= outer.right && y >= outer.top && y <= outer.bottom;
+};
+/** The box a wipe crosses: the reveal, and any pane leaving it that stands taller or wider. */
+function revealBox(root) {
+	let { left, top, right, bottom } = root.getBoundingClientRect();
+	for (const pane of root.querySelectorAll(`:scope > [${ATTR_EXITING}]`)) {
+		const rect = pane.getBoundingClientRect();
+		left = Math.min(left, rect.left);
+		top = Math.min(top, rect.top);
+		right = Math.max(right, rect.right);
+		bottom = Math.max(bottom, rect.bottom);
+	}
+	return new DOMRect(left, top, right - left, bottom - top);
+}
+const clamp = (value, max) => Math.min(Math.max(value, 0), max);
+let batch = -Infinity;
+/** Times each piece of `content`, and each skeleton rect it replaces, by `order`. */
+function sequencePlan(content, root, order, spec, duration) {
+	const now = performance.now();
+	if (now - batch > 150) batch = now;
+	const late = now - batch;
+	const reveal = root.getBoundingClientRect();
+	const units = /* @__PURE__ */ new Map();
+	const found = /* @__PURE__ */ new Map();
+	const sizeOf = (element) => parseFloat(getComputedStyle(element).fontSize) || 16;
+	for (const piece of pieces(content)) {
+		const element = unitOf(piece, content);
+		let unit = units.get(element);
+		if (!unit) {
+			unit = {
+				rect: element.getBoundingClientRect(),
+				size: 0
+			};
+			units.set(element, unit);
+		}
+		const size = sizeOf(piece);
+		unit.size = Math.max(unit.size, size);
+		found.set(piece, {
+			unit,
+			size
+		});
+	}
+	const at = (piece) => {
+		const delay = order(piece);
+		return delay === null ? null : clamp(delay, MAX_DELAY) + Math.max(spec.delay ?? 0, 0);
+	};
+	return {
+		kind: "sequence",
+		duration,
+		enter: spec.enter,
+		pieceDelay: (element) => {
+			const piece = found.get(element);
+			if (!piece) return null;
+			return at({
+				rect: element.getBoundingClientRect(),
+				unit: piece.unit.rect,
+				secondary: piece.size < piece.unit.size,
+				reveal,
+				late
+			});
+		},
+		boneDelay: (rect) => {
+			const unit = [...units.values()].find((unit) => contains(unit.rect, rect));
+			return at({
+				rect,
+				unit: unit?.rect ?? null,
+				secondary: !!unit && rect.height < unit.size * .8,
+				reveal,
+				late
+			});
+		}
+	};
+}
+/** Keeps `enter` to what paints, warning in development about anything that would move the page. */
+function enterOf(enter, warn) {
+	if (!enter) return void 0;
+	const kept = {};
+	for (const [key, value] of Object.entries(enter)) if (ENTER.has(key)) kept[key] = value;
+	else if (key !== "opacity") warn(key);
+	return kept;
+}
+/** Decides how `content` replaces the skeleton in `root`, now that it has arrived. */
+function planReveal(content, root, reveal, warn = () => {}) {
+	const info = loading.get(root);
+	loading.delete(root);
+	let spec = reveal;
+	while (spec.choose) {
+		const { choose, ...rest } = spec;
+		spec = {
+			...rest,
+			...choose({
+				content,
+				reveal: root,
+				waited: info ? performance.now() - info.since : Infinity,
+				input: performance.now() - lastInput < ACTIVE_WINDOW,
+				refetch: !!info?.refetch,
+				height: content.getBoundingClientRect().height,
+				pieces: pieces(content).length
+			})
+		};
+	}
+	const duration = clamp(spec.duration ?? 200, MAX_DURATION);
+	spec = {
+		...spec,
+		delay: Math.min(spec.delay ?? 0, MAX_DELAY)
+	};
+	if (!duration) return { kind: "instant" };
+	const enter = enterOf(spec.enter, warn);
+	if (spec.wipe) {
+		const rect = revealBox(root);
+		if (rect.width * rect.height <= innerWidth * innerHeight * 1.5) return {
+			kind: "wipe",
+			wipe: spec.wipe,
+			start: performance.now() + (spec.delay ?? 0),
+			duration,
+			reveal: rect,
+			enter
+		};
+	} else if (typeof spec.order === "function") return sequencePlan(content, root, spec.order, {
+		...spec,
+		enter
+	}, duration);
+	return {
+		kind: "together",
+		delay: Math.max(spec.delay ?? 0, 0),
+		duration,
+		enter
+	};
+}
+/** `sequence`: each piece timed by its place in the reveal, top to bottom, then a little left to right. */
+const byPosition = ({ rect, reveal }) => {
+	const down = (rect.top - reveal.top) / Math.max(reveal.height, 1);
+	const across = (rect.left - reveal.left) / Math.max(reveal.width, 1);
+	return clamp(down * .8 + across * .2, 1) * 320;
+};
+const onScreen = (rect) => rect.bottom > 0 && rect.top < innerHeight;
+/** `smart`'s order: rows arrive whole, in page order, on screen only, main text first. */
+const byRow = ({ rect, unit, secondary, late }) => {
+	if (!unit) return onScreen(rect) ? 0 : null;
+	if (!onScreen(unit)) return null;
+	const at = clamp(unit.top / innerHeight, 1) * 320;
+	return Math.max(at - late, 0) + (secondary ? SECONDARY_DELAY : 0);
+};
+const instant = { duration: 0 };
+const together = { order: "together" };
+const sequence = { order: byPosition };
+/** The cases `smart` settles before looking at the content: instant, or a quick crossfade. */
+const quickly = (context) => context.input || context.waited < 150 ? instant : context.refetch ? {
+	order: "together",
+	duration: QUICK_FADE
+} : null;
+/** `together` for a small reveal, else `byRow`. */
+const byContent = (context) => context.height < SMALL_HEIGHT || context.pieces <= SMALL_PIECES ? together : { order: byRow };
+/** Picks for each reveal from how it loaded and what it holds, holding its skeleton back a moment. */
+const smart = {
+	hold: 150,
+	choose: (context) => quickly(context) ?? byContent(context)
+};
+//#endregion
+//#region src/core/shapes.ts
+const STORAGE_KEY = "a-smart-skeleton:shapes";
+const VERSION = 2;
+const MAX_SHAPES = 50;
+const MAX_LENGTH = 2e4;
+const session = /* @__PURE__ */ new Map();
+const shown = /* @__PURE__ */ new Map();
+/** Registers a save for content on screen under `key`; returns its unregister. */
+function trackShape(key, save) {
+	if (!shown.has(key)) shown.set(key, /* @__PURE__ */ new Set());
+	shown.get(key).add(save);
+	return () => shown.get(key)?.delete(save);
+}
+/** Saves every shown copy of `key` now, so a skeleton about to recall it gets the latest. */
+function flushShapes(key) {
+	for (const save of shown.get(key) ?? []) save();
+}
+function read() {
+	try {
+		const raw = JSON.parse(localStorage.getItem(STORAGE_KEY) ?? "null");
+		if (!raw || typeof raw !== "object" || raw.v !== VERSION) return Object.create(null);
+		const incoming = raw.shapes;
+		if (!incoming || typeof incoming !== "object") return Object.create(null);
+		const out = Object.create(null);
+		for (const key of Object.keys(incoming)) {
+			const value = incoming[key];
+			if (typeof value === "string") out[key] = value;
+		}
+		return out;
+	} catch {
+		return Object.create(null);
+	}
+}
+function write(shapes) {
+	try {
+		localStorage.setItem(STORAGE_KEY, JSON.stringify({
+			v: VERSION,
+			shapes
+		}));
+	} catch {}
+}
+function rememberShape(key, element) {
+	session.set(key, serialize(element, false));
+	const html = serialize(element, true);
+	if (html.length > MAX_LENGTH) return;
+	const shapes = read();
+	delete shapes[key];
+	shapes[key] = html;
+	const keys = Object.keys(shapes);
+	for (const stale of keys.slice(0, keys.length - MAX_SHAPES)) delete shapes[stale];
+	write(shapes);
+}
+function recallShape(key) {
+	return session.get(key) ?? read()[key] ?? null;
+}
+/** Forgets remembered shapes — call it on sign-out. */
+function forgetShapes({ persisted = true } = {}) {
+	session.clear();
+	if (!persisted) return;
+	try {
+		localStorage.removeItem(STORAGE_KEY);
+	} catch {}
+}
+//#endregion
+//#region src/core/ghost.ts
+const FALLBACK = [
+	100,
+	90,
+	60
+].map((width) => `<div ${ATTR_BLOCK} style="width:${width}%;height:0.75em;margin:0.5em 0;border-radius:0.25em"></div>`).join("");
+const served = new WeakSet(typeof document === "undefined" ? [] : document.querySelectorAll(`[${ATTR_LOADING}]`));
+const loadingSizes = /* @__PURE__ */ new WeakMap();
+/** The size a reveal's skeleton last measured at, taken once by whatever replaces it. */
+function takeLoadingSize(reveal) {
+	if (!reveal) return void 0;
+	const size = loadingSizes.get(reveal);
+	loadingSizes.delete(reveal);
+	return size;
+}
+function child(root, attribute) {
+	for (const element of root.children) if (element.hasAttribute(attribute)) return element;
+	const element = document.createElement("div");
+	element.setAttribute(attribute, "");
+	root.append(element);
+	return element;
+}
+const hasContent = (element) => !!element.firstElementChild || !!element.textContent?.trim();
+/** Draws a skeleton over content laid out unseen in `root`, so it takes exactly the content's space. */
+var Ghost = class {
+	root;
+	options;
+	ghost;
+	snapshot;
+	layer;
+	source = null;
+	hadContent = false;
+	frame = 0;
+	mutations;
+	resize;
+	constructor(root, options = {}) {
+		this.root = root;
+		this.options = options;
+		addStyles();
+		root[GHOSTED] = true;
+		root.setAttribute(ATTR_LOADING, "");
+		root.setAttribute("aria-hidden", "true");
+		root.inert = true;
+		this.ghost = child(root, ATTR_GHOST);
+		this.snapshot = child(root, ATTR_SNAPSHOT);
+		this.layer = child(root, ATTR_LAYER);
+		this.hadContent = hasContent(this.ghost);
+		this.note();
+		this.choose();
+		this.measure();
+		root[UNCOVER]?.();
+		this.mutations = new MutationObserver(this.schedule);
+		this.mutations.observe(this.ghost, {
+			childList: true,
+			subtree: true,
+			characterData: true,
+			attributes: true
+		});
+		this.resize = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(this.schedule);
+		this.resize?.observe(root);
+		root.addEventListener("load", this.schedule, true);
+		addEventListener("resize", this.schedule);
+		document.fonts?.ready.then(this.schedule);
+	}
+	/** Swaps in fresh options without tearing down the observers or stylesheet refcount. */
+	update(options = {}) {
+		this.options = options;
+		this.note();
+		this.choose();
+		this.measure();
+	}
+	note() {
+		const reveal = this.root.closest(`[${ATTR_REVEAL}]`);
+		if (!reveal) return;
+		noteSkeleton(reveal, {
+			served: served.has(this.root),
+			refetch: !!this.options.refetch && this.hadContent
+		});
+	}
+	schedule = () => {
+		if (this.root.closest(`[ask-exiting]`)) return;
+		cancelAnimationFrame(this.frame);
+		this.frame = requestAnimationFrame(() => {
+			const has = hasContent(this.ghost);
+			if (has !== this.hadContent) {
+				this.hadContent = has;
+				this.choose();
+			}
+			this.measure();
+		});
+	};
+	choose() {
+		let next = "fallback";
+		let html = null;
+		const settled = this.options.exact || served.has(this.root);
+		const own = !!this.ghost.querySelector(`[${ATTR_OWN}]`);
+		if ((settled || own) && this.hadContent) next = "ghost";
+		else {
+			const key = this.options.id ?? autoKey(this.ghost);
+			if (key) {
+				flushShapes(key);
+				html = recallShape(key);
+			}
+			if (html) next = "recall";
+			else if (this.hadContent) next = "ghost";
+		}
+		if (next !== this.source) if (next === "recall" && html) this.snapshot.replaceChildren(restore$1(html));
+		else if (next === "fallback") {
+			this.snapshot.innerHTML = FALLBACK;
+			warnOnce(`fallback:${this.options.id}`, `Nothing to draw a skeleton from${this.options.id ? ` for "${this.options.id}"` : ""}. Pass \`sample\` data, or an \`id\` so its shape is remembered after the first load. For a lone placeholder box, use \`SkeletonBox\`.`);
+		} else this.snapshot.replaceChildren();
+		this.ghost.toggleAttribute(ATTR_INACTIVE, next !== "ghost");
+		this.snapshot.toggleAttribute(ATTR_INACTIVE, next === "ghost");
+		this.source = next;
+		reportLoading(this.root.closest(`[${ATTR_REVEAL}]`), next === "recall" ? "remembered shape" : next === "fallback" ? "fallback" : this.options.exact ? "data" : served.has(this.root) ? "server render" : "sample");
+	}
+	measure() {
+		const active = this.source === "ghost" ? this.ghost : this.snapshot;
+		drawSkeleton(this.layer, measureSkeleton(active, this.layer));
+		const reveal = this.root.closest(`[${ATTR_REVEAL}]`);
+		if (reveal) loadingSizes.set(reveal, {
+			width: this.root.offsetWidth,
+			height: this.root.offsetHeight,
+			guessed: !(this.options.exact && this.source === "ghost"),
+			images: [...active.querySelectorAll("img")].map((image) => image.getBoundingClientRect().height)
+		});
+	}
+	destroy() {
+		cancelAnimationFrame(this.frame);
+		this.mutations.disconnect();
+		this.resize?.disconnect();
+		this.root.removeEventListener("load", this.schedule, true);
+		removeEventListener("resize", this.schedule);
+		removeStyles();
+	}
+};
+//#endregion
+//#region src/core/memory.ts
+const SAVE_DELAY = 250;
+const anonIds = /* @__PURE__ */ new WeakMap();
+let anonSeq = 0;
+const anonId = (element) => {
+	let id = anonIds.get(element);
+	if (!id) {
+		id = `anon:${++anonSeq}`;
+		anonIds.set(element, id);
+	}
+	return id;
+};
+/** Remembers the shape of shown content, so its next skeleton can be drawn from it. */
+var Memory = class {
+	element;
+	options;
+	key;
+	warnKey;
+	timer;
+	mutations;
+	resize;
+	untrack;
+	constructor(element, options = {}) {
+		this.element = element;
+		this.options = options;
+		this.key = options.id ?? autoKey(element);
+		this.warnKey = this.key ?? anonId(element);
+		this.untrack = this.key ? trackShape(this.key, () => this.save()) : () => {};
+		if (isDev || debugging(element)) this.check();
+		this.save();
+		this.mutations = new MutationObserver(this.schedule);
+		this.mutations.observe(element, {
+			childList: true,
+			subtree: true,
+			characterData: true
+		});
+		this.resize = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(this.schedule);
+		this.resize?.observe(element);
+		element.addEventListener("load", this.schedule, true);
+	}
+	schedule = () => {
+		clearTimeout(this.timer);
+		this.timer = setTimeout(() => this.save(), SAVE_DELAY);
+	};
+	save() {
+		clearTimeout(this.timer);
+		if (this.key && this.element.isConnected && this.element.offsetHeight) rememberShape(this.key, this.element);
+	}
+	check() {
+		const { data, id, rendered, sample } = this.options;
+		const name = id ? `<Skeleton id="${id}">` : "<Skeleton>";
+		const reveal = this.element.closest(`[${ATTR_REVEAL}]`);
+		const before = takeLoadingSize(reveal);
+		if (!before) return;
+		if (before.guessed && rendered && !sample && data != null) warnOnce(`sample:${this.warnKey}`, `${name} has no \`sample\`, so a first load guesses its shape${id ? "" : " and it can't be remembered"}. Pass this to make it exact:\n  sample={${JSON.stringify(sampleFrom(data))}}`);
+		const images = [...this.element.querySelectorAll("img")].filter((image) => !image.complete);
+		Promise.all(images.map((image) => new Promise((resolve) => {
+			image.addEventListener("load", resolve, { once: true });
+			image.addEventListener("error", resolve, { once: true });
+		}))).then(() => {
+			if (!this.element.isConnected) return;
+			const width = this.element.offsetWidth;
+			const height = this.element.offsetHeight;
+			reportReveal(reveal, {
+				width: width - before.width,
+				height: height - before.height
+			});
+			if (Math.abs(width - before.width) <= 1 && Math.abs(height - before.height) <= 1) return;
+			const unsized = [...this.element.querySelectorAll("img")].filter((image, i) => (before.images[i] ?? 0) < 1 && image.getBoundingClientRect().height >= 1).map((image) => image.currentSrc.split("/").pop() || "an image");
+			if (unsized.length) {
+				warnOnce(`unsized:${this.warnKey}`, `${name}'s skeleton had no room for ${unsized.length === 1 ? "an image" : `${unsized.length} images`} (${unsized.slice(0, 3).join(", ")}${unsized.length > 3 ? ", …" : ""}), so the layout jumped when they loaded. Give each \`width\` and \`height\` attributes, or an \`aspect-ratio\`, so its space is known before it loads.`);
+				return;
+			}
+			warnOnce(`jump:${this.warnKey}`, before.guessed ? `${name}'s skeleton was ${before.width}×${before.height}px but its content is ${width}×${height}px, so the layout jumped on reveal. ${rendered ? "Pass `sample` data shaped like the real thing" : "Pass an `id` so its shape is remembered"}, and give images a size.` : `${name}'s skeleton was drawn from the data on screen (${before.width}×${before.height}px), but the new data is ${width}×${height}px, so the layout jumped on reveal. When new data adds to what's shown — another page of a list — give the addition a reveal of its own.`);
+		});
+	}
+	destroy() {
+		this.save();
+		clearTimeout(this.timer);
+		this.mutations.disconnect();
+		this.resize?.disconnect();
+		this.element.removeEventListener("load", this.schedule, true);
+		this.untrack();
+	}
+};
+//#endregion
+//#region src/core/skeleton.ts
+const DEFAULT_SKELETON_BOX_OPTIONS = {
+	height: "1em",
+	width: "60%",
+	radius: "var(--ask-radius, 0.25em)"
+};
+const toCSS = (value) => typeof value === "number" ? `${value}px` : value;
+function skeletonBoxStyle({ height = DEFAULT_SKELETON_BOX_OPTIONS.height, width = DEFAULT_SKELETON_BOX_OPTIONS.width, radius = DEFAULT_SKELETON_BOX_OPTIONS.radius } = {}) {
+	return {
+		height: toCSS(height),
+		width: toCSS(width),
+		borderRadius: toCSS(radius)
+	};
+}
+/** A single bar, shimmering in step with every skeleton on the page once it is in the document. */
+function createSkeletonBox(options) {
+	addStyles();
+	const element = document.createElement("span");
+	element.setAttribute(ATTR_BAR, "");
+	Object.assign(element.style, skeletonBoxStyle(options));
+	requestAnimationFrame(() => {
+		if (element.isConnected) shimmer(element);
+	});
+	return element;
+}
+//#endregion
+//#region src/core/images.ts
+const noop$1 = () => {};
+const deferred = (image) => {
+	if (image.loading !== "lazy") return false;
+	const rect = image.getBoundingClientRect();
+	return rect.bottom < -innerHeight || rect.top > innerHeight * 2;
+};
+/** Images inside still on their way. */
+const pendingImages = (element) => [...element.querySelectorAll("img")].filter((image) => !image.complete && !deferred(image));
+/** Loaded and decoded, so its first frame on screen is the picture; failing counts, as nothing more is coming. */
+function imageReady(image) {
+	const loaded = image.complete ? Promise.resolve() : new Promise((resolve) => {
+		image.addEventListener("load", () => resolve(), { once: true });
+		image.addEventListener("error", () => resolve(), { once: true });
+	});
+	return Promise.race([loaded.then(() => image.decode?.()).then(noop$1, noop$1), new Promise((resolve) => setTimeout(resolve, IMAGE_TIMEOUT))]);
+}
+//#endregion
+//#region src/core/sweep.ts
+const WAVE_SPREAD = 360;
+const WAVE_PACE = 2;
+const FEATHER = 40;
+const PAD = FEATHER / SLANT_COS;
+const GLOSS = 320;
+const GLOSS_LAG = 120;
+const GLOSS_LIFT = .45;
+const uOf = (rect) => rect.left + rect.top * SLANT_TAN;
+const spanOf = (rect) => rect.width + rect.height * SLANT_TAN;
+const frontAt = (progress, reveal) => uOf(reveal) - PAD + (spanOf(reveal) + 2 * PAD) * progress;
+let wave = {
+	start: -Infinity,
+	origin: 0,
+	speed: 1
+};
+/** When the shared front reaches `reveal`, and how long it takes across — null without a shimmer to match. */
+function timing(reveal) {
+	const layer = reveal.querySelector(`:scope > [${ATTR_EXITING}] [${ATTR_LAYER}]`);
+	const pace = layer && paceOf(layer);
+	if (!pace) return null;
+	const rect = revealBox(reveal);
+	if (rect.width * rect.height > innerWidth * innerHeight * 1.5) return null;
+	const from = uOf(rect);
+	const to = from + spanOf(rect);
+	const now = performance.now();
+	const elapsed = now - wave.start;
+	if (!(elapsed <= 150 && (from - wave.origin) / wave.speed >= elapsed && (to - wave.origin) / wave.speed - elapsed <= 600)) wave = {
+		start: now,
+		origin: from,
+		speed: Math.max(WAVE_PACE / pace, (to - from) / WAVE_SPREAD)
+	};
+	const { start, origin, speed } = wave;
+	return {
+		delay: (from - PAD - origin) / speed - (now - start),
+		duration: (to - from + 2 * PAD) / speed
+	};
+}
+const stops = (incoming) => (progress, { rect, reveal }) => {
+	const at = (frontAt(progress, reveal) - uOf(rect)) * SLANT_COS;
+	return `linear-gradient(${SLANT_ANGLE}, ${Array.from({ length: 13 }, (_, i) => {
+		const shown = incoming ? 1 - ease(i / 12) : ease(i / 12);
+		const offset = -40 + 2 * FEATHER * i / 12;
+		return `rgb(0 0 0 / ${shown.toFixed(3)}) ${(at + offset).toFixed(2)}px`;
+	}).join(", ")})`;
+};
+const SVG = "http://www.w3.org/2000/svg";
+let host = null;
+let glosses = 0;
+function filterHost() {
+	if (!host?.isConnected) {
+		host = document.createElementNS(SVG, "svg");
+		host.setAttribute("aria-hidden", "true");
+		host.style.cssText = "position:absolute;width:0;height:0;overflow:hidden";
+		document.body.append(host);
+	}
+	return host;
+}
+const svg = (tag, attributes) => {
+	const node = document.createElementNS(SVG, tag);
+	for (const [name, value] of Object.entries(attributes)) node.setAttribute(name, String(value));
+	return node;
+};
+const gloss = (element, { rect, reveal, progress }) => {
+	if (prefersReducedTransparency()) return;
+	const from = uOf(rect);
+	const span = spanOf(rect);
+	const half = GLOSS / 2 / SLANT_COS;
+	const centre = () => frontAt(progress(), reveal) - from - GLOSS_LAG / SLANT_COS;
+	if (centre() - half > span) return;
+	const width = 2 * half + rect.height * SLANT_TAN;
+	const cx = width / 2;
+	const cy = rect.height / 2;
+	const dx = GLOSS / 2 * SLANT_COS;
+	const dy = GLOSS / 2 * SLANT_TAN * SLANT_COS;
+	const canvas = document.createElement("canvas");
+	canvas.width = Math.ceil(width);
+	canvas.height = Math.ceil(rect.height);
+	const context = canvas.getContext("2d");
+	if (!context) return;
+	const gradient = context.createLinearGradient(cx - dx, cy - dy, cx + dx, cy + dy);
+	for (let i = 0; i <= 12; i++) {
+		const t = i / 12;
+		gradient.addColorStop(t, `rgb(255 255 255 / ${ease(1 - Math.abs(t * 2 - 1)).toFixed(3)})`);
+	}
+	context.fillStyle = gradient;
+	context.fillRect(0, 0, canvas.width, canvas.height);
+	const id = `ask-gloss-${++glosses}`;
+	const filter = svg("filter", {
+		id,
+		"color-interpolation-filters": "sRGB",
+		primitiveUnits: "objectBoundingBox"
+	});
+	const lit = svg("feComponentTransfer", {
+		in: "SourceGraphic",
+		result: "lit"
+	});
+	for (const channel of [
+		"R",
+		"G",
+		"B"
+	]) lit.append(svg(`feFunc${channel}`, {
+		type: "linear",
+		slope: 1 - GLOSS_LIFT,
+		intercept: GLOSS_LIFT
+	}));
+	const image = svg("feImage", {
+		href: canvas.toDataURL(),
+		y: 0,
+		width: width / rect.width,
+		height: 1,
+		preserveAspectRatio: "none",
+		result: "band"
+	});
+	filter.append(lit, image, svg("feComposite", {
+		in: "lit",
+		in2: "band",
+		operator: "in",
+		result: "shine"
+	}), svg("feComposite", {
+		in: "shine",
+		in2: "SourceGraphic",
+		operator: "over"
+	}));
+	filterHost().append(filter);
+	element.style.filter = `url(#${id})`;
+	const tick = () => {
+		const at = centre();
+		if (at - half > span || !element.isConnected) {
+			if (element.style.filter.includes(id)) element.style.filter = "";
+			filter.remove();
+			return;
+		}
+		image.setAttribute("x", ((at - cx - cy * SLANT_TAN) / rect.width).toFixed(4));
+		requestAnimationFrame(tick);
+	};
+	tick();
+};
+const wipe$1 = {
+	mask: stops(true),
+	out: stops(false),
+	effect: gloss
+};
+/** `smart`, wiping content in behind one band of the shimmer. */
+const sweep = {
+	hold: 150,
+	choose: (context) => {
+		const quick = quickly(context);
+		if (quick) return quick;
+		const swept = timing(context.reveal);
+		return swept ? {
+			wipe: wipe$1,
+			...swept
+		} : byContent(context);
+	}
+};
+//#endregion
+//#region src/core/reveals.ts
+const NAMED = {
+	together,
+	sequence,
+	smart,
+	sweep
+};
+const revealSpec = (mode = "smart") => typeof mode === "string" ? NAMED[mode] : mode;
+/** Longest a pane can take to leave under `mode`, for a framework that has to know up front. */
+function exitDuration(mode) {
+	const spec = revealSpec(mode);
+	const hold = spec.hold ?? 0;
+	if (spec === together) return 200;
+	if (spec === sequence) return 520;
+	if (spec === smart) return hold + 320 + 200;
+	if (spec === sweep) return hold + 600 + 200;
+	if (spec.duration === 0) return 0;
+	return hold + (spec.choose ? MAX_DELAY : Math.min(Math.max(spec.delay ?? 0, 0), MAX_DELAY)) + MAX_DELAY + MAX_DURATION;
+}
+//#endregion
+//#region src/core/fade.ts
+const noop = () => {};
+const settle = (animation) => animation.finished.then(noop, noop);
+const plans = /* @__PURE__ */ new WeakMap();
+function appear(element, delay = 0, duration = 200, from = 0, enter) {
+	if (prefersReducedMotion()) return Promise.resolve();
+	return settle(element.animate([{
+		...enter,
+		opacity: from
+	}, { opacity: 1 }], {
+		duration,
+		delay,
+		easing: "ease",
+		fill: "backwards"
+	}));
+}
+const isSkeleton = (element) => !!element.querySelector(`[${ATTR_LAYER}], [${ATTR_GHOST}], :scope > [${ATTR_OWN}]`);
+const sameBox = (a, b) => Math.abs(a.left - b.left) < 2 && Math.abs(a.top - b.top) < 2 && Math.abs(a.width - b.width) < 2 && Math.abs(a.height - b.height) < 2;
+const standIns = /* @__PURE__ */ new WeakMap();
+function clearStandIns(root) {
+	for (const stand of standIns.get(root) ?? []) stand.remove();
+	standIns.delete(root);
+}
+function holdImages(element, root) {
+	const images = pendingImages(element);
+	const overSkeleton = [...root.children].some((pane) => pane !== element && pane.hasAttribute("ask-pane") && isSkeleton(pane));
+	if (!images.length || !overSkeleton) return;
+	for (const image of images) image.style.opacity = "0";
+	queueMicrotask(() => {
+		if (!element.isConnected) return;
+		const origin = root.getBoundingClientRect();
+		const bones = [...root.querySelectorAll(`:scope > [${ATTR_EXITING}] [${ATTR_LAYER}]`)].flatMap(rectsOf);
+		const stands = standIns.get(root) ?? /* @__PURE__ */ new Set();
+		standIns.set(root, stands);
+		for (const image of images) {
+			const rect = image.getBoundingClientRect();
+			const bone = bones.find((b) => sameBox(b.getBoundingClientRect(), rect));
+			const box = bone?.getBoundingClientRect() ?? rect;
+			const stand = document.createElement("div");
+			stand.setAttribute(ATTR_RECT, "");
+			Object.assign(stand.style, {
+				position: "absolute",
+				left: `${box.left - origin.left - root.clientLeft}px`,
+				top: `${box.top - origin.top - root.clientTop}px`,
+				width: `${box.width}px`,
+				height: `${box.height}px`,
+				borderRadius: bone?.style.borderRadius || getComputedStyle(image).borderRadius,
+				backgroundColor: BASE,
+				backgroundRepeat: "no-repeat",
+				pointerEvents: "none"
+			});
+			root.append(stand);
+			stands.add(stand);
+			if (bone) bone.style.visibility = "hidden";
+			shimmer(stand);
+			imageReady(image).then(() => {
+				if (!stands.has(stand)) return;
+				stands.delete(stand);
+				image.style.opacity = "";
+				appear(image);
+				if (prefersReducedMotion()) return stand.remove();
+				settle(stand.animate([{ opacity: 1 }, { opacity: 0 }], {
+					duration: 200,
+					easing: "ease",
+					fill: "forwards"
+				})).then(() => stand.remove());
+			});
+		}
+	});
+}
+function sequenceIn(element, plan) {
+	if (prefersReducedMotion()) return Promise.resolve();
+	return Promise.all(pieces(element).map((piece) => {
+		const delay = plan.pieceDelay(piece);
+		if (delay === null) return;
+		return appear(piece, delay, plan.duration, 0, plan.enter);
+	})).then(noop);
+}
+function clearExiting(root) {
+	for (const pane of root.querySelectorAll(`:scope > [${ATTR_EXITING}]`)) {
+		for (const animation of animationsOf(pane)) animation.finish();
+		pane.style.opacity = "0";
+	}
+}
+function takeOver(root) {
+	let from = 0;
+	for (const pane of root.querySelectorAll(`:scope > [${ATTR_EXITING}]`)) {
+		if (isSkeleton(pane)) continue;
+		from = Math.max(from, parseFloat(getComputedStyle(pane).opacity) || 0);
+		for (const animation of animationsOf(pane)) animation.finish();
+		pane.style.opacity = "0";
+	}
+	return from;
+}
+/** Brings a pane in: a skeleton after the reveal's `hold`, content as `reveal` plans; `initial` has nothing to replace. */
+function fadeIn(element, reveal = "smart", { initial = false } = {}) {
+	let arriving = arrivals.get(element);
+	if (!arriving) {
+		arriving = arrive(element, reveal, initial);
+		arrivals.set(element, arriving);
+	}
+	return arriving;
+}
+const arrivals = /* @__PURE__ */ new WeakMap();
+function arrive(element, reveal, initial) {
+	const root = element.parentElement;
+	const spec = revealSpec(reveal);
+	if (isSkeleton(element)) {
+		if (root) clearStandIns(root);
+		const hold = Math.max(spec.hold ?? 0, 0);
+		if (!hold) {
+			if (root) plans.delete(root);
+			return initial ? Promise.resolve() : appear(element);
+		}
+		if (root) plans.set(root, {
+			kind: "skeleton",
+			hold
+		});
+		if (initial) return Promise.resolve();
+		return appear(element, hold);
+	}
+	if (initial || !root) return Promise.resolve();
+	const from = takeOver(root);
+	if (from > .01) {
+		const duration = 200 * (1 - from);
+		plans.set(root, {
+			kind: "together",
+			delay: 0,
+			duration
+		});
+		return appear(element, 0, duration, from);
+	}
+	holdImages(element, root);
+	const plan = planReveal(element, root, spec, (key) => warnOnce(`enter:${key}`, `\`enter\` can't set \`${key}\`: only properties that change nothing's layout animate, so the reveal never moves the page.`));
+	plans.set(root, plan);
+	if (plan.kind === "instant") {
+		clearExiting(root);
+		return Promise.resolve();
+	}
+	if (plan.kind === "sequence") return sequenceIn(element, plan);
+	if (plan.kind === "wipe") return wipe(element, plan, true);
+	return appear(element, plan.delay, plan.duration, 0, plan.enter);
+}
+/** Measures `element` for `fadeOut`: before its replacement is inserted, or scroll anchoring moves the page. */
+function boxOf(element) {
+	const rect = element.getBoundingClientRect();
+	const parent = element.offsetParent ?? document.documentElement;
+	const origin = parent.getBoundingClientRect();
+	return {
+		top: rect.top - origin.top - parent.clientTop,
+		left: rect.left - origin.left - parent.clientLeft,
+		width: rect.width,
+		height: rect.height
+	};
+}
+function popOut(element, box = boxOf(element)) {
+	Object.assign(element.style, {
+		position: "absolute",
+		top: `${box.top}px`,
+		left: `${box.left}px`,
+		width: `${box.width}px`,
+		height: `${box.height}px`,
+		margin: "0",
+		boxSizing: "border-box",
+		pointerEvents: "none"
+	});
+	element.inert = true;
+	element.setAttribute(ATTR_EXITING, "");
+	return box;
+}
+const resizes = /* @__PURE__ */ new WeakMap();
+function resize(root, box) {
+	const incoming = root.querySelector(`:scope > [${ATTR_PANE}]:not([${ATTR_EXITING}])`);
+	if (!incoming) return;
+	const running = resizes.get(root);
+	const shown = root.getBoundingClientRect().height;
+	running?.animation.cancel();
+	const to = root.getBoundingClientRect().height;
+	const from = running ? shown : to - incoming.getBoundingClientRect().height + box.height;
+	if (Math.abs(from - to) < .5) {
+		if (running) restore(root, running);
+		return;
+	}
+	const { overflow, boxSizing } = running ?? root.style;
+	Object.assign(root.style, {
+		overflow: "clip",
+		boxSizing: "border-box"
+	});
+	const animation = root.animate([{ height: `${from}px` }, { height: `${to}px` }], {
+		duration: 280,
+		easing: "cubic-bezier(0.2, 0, 0, 1)"
+	});
+	const current = {
+		animation,
+		overflow,
+		boxSizing
+	};
+	resizes.set(root, current);
+	settle(animation).then(() => {
+		if (resizes.get(root) === current) restore(root, current);
+	});
+}
+function restore(root, { overflow, boxSizing }) {
+	resizes.delete(root);
+	Object.assign(root.style, {
+		overflow,
+		boxSizing
+	});
+}
+/** Resolves once `element` can be removed, leaving as the pane replacing it decides; its parent must be positioned. */
+function fadeOut(element, box) {
+	const opacity = parseFloat(getComputedStyle(element).opacity);
+	const from = Number.isNaN(opacity) ? 1 : opacity;
+	for (const animation of animationsOf(element)) animation.cancel();
+	clearMask(element);
+	element.style.filter = "";
+	const parent = element.parentElement;
+	if (parent && !isSkeleton(element)) clearStandIns(parent);
+	const stood = popOut(element, box);
+	const fade = (delay, duration) => {
+		if (!canAnimate()) {
+			element.style.opacity = "0";
+			return Promise.resolve();
+		}
+		return settle(element.animate([{ opacity: from }, { opacity: 0 }], {
+			duration: duration * from,
+			delay,
+			easing: "ease",
+			fill: "forwards"
+		}));
+	};
+	return Promise.resolve().then(() => {
+		const plan = parent && plans.get(parent);
+		const instant = prefersReducedMotion() || plan?.kind === "instant";
+		if (parent && !instant) resize(parent, stood);
+		if (plan?.kind === "skeleton") return fade(plan.hold, 200);
+		if (instant) {
+			element.style.opacity = "0";
+			return;
+		}
+		if (plan?.kind === "sequence" && isSkeleton(element)) return sequenceOut(element, plan);
+		if (plan?.kind === "wipe" && isSkeleton(element)) return wipe(element, plan, false);
+		if (plan?.kind === "together") return fade(plan.delay, plan.duration);
+		return fade(0, 200);
+	});
+}
+function sequenceOut(element, plan) {
+	for (const ghost of element.querySelectorAll(`[${ATTR_GHOST}], [${ATTR_SNAPSHOT}]`)) ghost.style.visibility = "hidden";
+	const own = [...element.querySelectorAll(`[${ATTR_GHOST}] [${ATTR_OWN}]`)].filter((part) => !part.parentElement?.closest(`[${ATTR_OWN}]`));
+	for (const part of own) part.style.visibility = "visible";
+	const bones = [...[...element.querySelectorAll(`[${ATTR_LAYER}]`)].flatMap(rectsOf), ...own];
+	return Promise.all(bones.map((bone) => {
+		const rect = bone.getBoundingClientRect();
+		const go = (delay) => settle(bone.animate([{ opacity: 1 }, { opacity: 0 }], {
+			duration: plan.duration,
+			delay,
+			easing: "ease",
+			fill: "forwards"
+		}));
+		const delay = plan.boneDelay(rect);
+		if (delay === null) {
+			bone.style.opacity = "0";
+			return;
+		}
+		return go(delay);
+	})).then(noop);
+}
+const STALL = 100;
+const fronts = /* @__PURE__ */ new WeakMap();
+function setMask(element, image) {
+	element.style.setProperty("mask-image", image);
+	element.style.setProperty("-webkit-mask-image", image);
+}
+function setInverseMask(element, image) {
+	setMask(element, `linear-gradient(#000 0 0), ${image}`);
+	element.style.setProperty("-webkit-mask-composite", "xor");
+	element.style.setProperty("mask-composite", "exclude");
+}
+function clearMask(element) {
+	fronts.get(element)?.();
+	for (const property of [
+		"mask-image",
+		"-webkit-mask-image",
+		"mask-composite",
+		"-webkit-mask-composite"
+	]) element.style.removeProperty(property);
+}
+function wipe(element, plan, incoming) {
+	const pane = {
+		rect: element.getBoundingClientRect(),
+		reveal: plan.reveal
+	};
+	const { mask, out } = plan.wipe;
+	const draw = (at) => {
+		if (incoming) setMask(element, mask(at, pane));
+		else if (out) setMask(element, out(at, pane));
+		else setInverseMask(element, mask(at, pane));
+	};
+	const progress = () => (performance.now() - plan.start) / plan.duration;
+	if (progress() >= 1) {
+		if (!incoming) element.style.opacity = "0";
+		return Promise.resolve();
+	}
+	if (incoming) {
+		plan.wipe.effect?.(element, {
+			...pane,
+			progress
+		});
+		if (plan.enter) element.animate([plan.enter, {}], {
+			duration: plan.duration,
+			delay: Math.max(plan.start - performance.now(), 0),
+			easing: "ease",
+			fill: "backwards"
+		});
+	}
+	return new Promise((resolve) => {
+		let frame = 0;
+		let last = performance.now();
+		let at = 0;
+		const tick = () => {
+			const now = performance.now();
+			if (now - last > STALL) plan.stalled = true;
+			last = now;
+			if (plan.stalled) return done(at);
+			at = Math.min(Math.max(progress(), 0), 1);
+			draw(at);
+			if (at < 1) frame = requestAnimationFrame(tick);
+			else done(null);
+		};
+		const done = (stalledAt = null) => {
+			cancelAnimationFrame(frame);
+			clearTimeout(deadline);
+			fronts.delete(element);
+			resolve(stalledAt);
+		};
+		const deadline = setTimeout(() => done(null), Math.max(plan.start + plan.duration - performance.now(), 0) + STALL);
+		fronts.set(element, done);
+		tick();
+	}).then((stalledAt) => {
+		clearMask(element);
+		if (stalledAt === null) {
+			if (!incoming) element.style.opacity = "0";
+			return;
+		}
+		const rest = 200 * (1 - stalledAt);
+		if (incoming) return appear(element, 0, rest, stalledAt);
+		return settle(element.animate([{ opacity: 1 - stalledAt }, { opacity: 0 }], {
+			duration: rest,
+			easing: "ease",
+			fill: "forwards"
+		})).then(() => {
+			element.style.opacity = "0";
+		});
+	});
+}
+//#endregion
+//#region src/core/reveal.ts
+/** Shows a skeleton of content while it loads, then crossfades to the content itself. */
+var Reveal = class {
+	element;
+	options;
+	current = null;
+	ghost = null;
+	memory = null;
+	arrival = Promise.resolve();
+	constructor(element, options = {}) {
+		this.element = element;
+		this.options = options;
+		addStyles();
+		element.setAttribute(ATTR_REVEAL, "");
+	}
+	/** Shows a skeleton measured from `content`, rendered from sample data, or else the shape last shown. */
+	load(content) {
+		const loading = document.createElement("div");
+		const ghost = document.createElement("div");
+		ghost.setAttribute(ATTR_GHOST, "");
+		if (content) ghost.append(content);
+		loading.append(ghost);
+		const pane = this.swap(loading);
+		if (this.options.label) {
+			const status = document.createElement("span");
+			status.setAttribute(ATTR_STATUS, "");
+			status.textContent = this.options.label;
+			pane.prepend(status);
+		}
+		this.element.setAttribute("aria-busy", "true");
+		this.ghost = new Ghost(loading, { id: this.options.id });
+		return pane;
+	}
+	show(content) {
+		const loading = this.element.getAttribute("aria-busy") === "true";
+		const pane = this.swap(content);
+		if (loading && this.options.onReveal) this.arrival.then(this.options.onReveal);
+		this.element.removeAttribute("aria-busy");
+		this.memory = new Memory(pane, { id: this.options.id });
+		return pane;
+	}
+	swap(content) {
+		this.memory?.destroy();
+		this.ghost?.destroy();
+		this.memory = this.ghost = null;
+		const pane = document.createElement("div");
+		pane.setAttribute(ATTR_PANE, "");
+		pane.append(content);
+		const previous = this.current;
+		this.current = pane;
+		if (previous) fadeOut(previous).then(() => previous.remove());
+		this.element.append(pane);
+		this.arrival = fadeIn(pane, this.options.reveal, { initial: !previous });
+		return pane;
+	}
+	destroy() {
+		this.memory?.destroy();
+		this.ghost?.destroy();
+		removeStyles();
+	}
+};
+//#endregion
+export { ATTR_LOADING as $, DEFAULT_TEXT as A, themeVariables as B, smart as C, rectsOf as D, motionOf as E, DEFAULT_COLORS as F, addStyles as G, INLINE_STUB as H, DEFAULT_THEME as I, ATTR_BLOCK as J, removeStyles as K, applyTheme as L, checkNonce as M, debugging as N, shimmer as O, setDebug as P, ATTR_LAYER as Q, skeletonCSS as R, sequence as S, drawSkeleton as T, inlineScriptTag as U, INLINE_SCRIPT as V, SMART_SKELETON_CSS as W, ATTR_GHOST as X, ATTR_DEBUG as Y, ATTR_IGNORE as Z, byPosition as _, exitDuration as a, ATTR_STATUS as at, planReveal as b, pendingImages as c, DURATIONS as ct, skeletonBoxStyle as d, RESIZE_DURATION as dt, ATTR_OWN as et, Memory as f, byContent as g, SKELETON_DELAY as h, fadeOut as i, ATTR_SNAPSHOT as it, measureSkeleton as j, prefersReducedMotion as k, DEFAULT_SKELETON_BOX_OPTIONS as l, FADE_DURATION as lt, forgetShapes as m, boxOf as n, ATTR_RECT as nt, sweep as o, ATTR_XRAY as ot, Ghost as p, ATTR_BAR as q, fadeIn as r, ATTR_REVEAL as rt, imageReady as s, CASCADE_SPREAD as st, Reveal as t, ATTR_PANE as tt, createSkeletonBox as u, IMAGE_TIMEOUT as ut, byRow as v, together as w, quickly as x, instant as y, themeStyleTag as z };
+
+//# sourceMappingURL=core.js.map