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

package/dist/_chunks/index.d.ts

@@ -0,0 +1,431 @@
+//#region src/core/constants.d.ts
+declare const ATTR_REVEAL = "ask-reveal";
+declare const ATTR_PANE = "ask-pane";
+declare const ATTR_LOADING = "ask-loading";
+declare const ATTR_GHOST = "ask-ghost";
+declare const ATTR_SNAPSHOT = "ask-snapshot";
+declare const ATTR_LAYER = "ask-layer";
+declare const ATTR_RECT = "ask-rect";
+declare const ATTR_BAR = "ask-bar";
+declare const ATTR_OWN = "ask-own";
+declare const ATTR_IGNORE = "ask-ignore";
+declare const ATTR_BLOCK = "ask-block";
+declare const ATTR_STATUS = "ask-status";
+declare const ATTR_XRAY = "ask-xray";
+declare const ATTR_DEBUG = "ask-debug";
+declare const FADE_DURATION = 200;
+declare const CASCADE_SPREAD = 320;
+declare const RESIZE_DURATION = 280;
+declare const IMAGE_TIMEOUT = 10000;
+declare const DURATIONS: {
+  readonly shimmer: {
+    readonly slow: 4000;
+    readonly fast: 2000;
+  };
+  readonly pulse: {
+    readonly slow: 2400;
+    readonly fast: 1200;
+  };
+};
+//#endregion
+//#region src/core/styles.d.ts
+/** The whole stylesheet, for rendering into a page yourself. */
+declare const SMART_SKELETON_CSS: string;
+declare function addStyles(): void;
+declare function removeStyles(): void;
+//#endregion
+//#region src/core/inline.generated.d.ts
+declare const INLINE_SCRIPT = "\"use strict\";(()=>{var H=\"ask-ghost\";var G=\"ask-layer\",M=\"ask-rect\";var A=\"ask-covered\",P=\"ask-own\",W=\"ask-ignore\",F=\"ask-block\",z=Symbol.for(\"a-smart-skeleton.ghost\"),U=Symbol.for(\"a-smart-skeleton.uncover\"),X=\"a-smart-skeleton.boot\";var j=\"var(--ask-highlight, rgb(255 255 255 / 0.12))\";var V={shimmer:{slow:4e3,fast:2e3},pulse:{slow:2400,fast:1200}},q=[\"a\",\"b\",\"code\",\"dd\",\"dt\",\"em\",\"h1\",\"h2\",\"h3\",\"h4\",\"h5\",\"h6\",\"i\",\"label\",\"li\",\"p\",\"small\",\"span\",\"strong\",\"td\",\"th\",\"time\"],Y=[\"audio\",\"canvas\",\"embed\",\"iframe\",\"img\",\"input\",\"object\",\"picture\",\"select\",\"svg\",\"textarea\",\"video\"];var Et,K=()=>Et??(Et=/jsdom/.test(navigator.userAgent)?null:document.createElement(\"canvas\").getContext(\"2d\"));var nt=(t,e)=>t?{left:Math.max(t.left,e.left),right:Math.min(t.right,e.right),top:Math.max(t.top,e.top),bottom:Math.min(t.bottom,e.bottom)}:e,k=t=>[[t.left,t.top],[t.right,t.top],[t.right,t.bottom],[t.left,t.bottom]],$=(t,e)=>Math.abs(t[0]-e[0])<1&&Math.abs(t[1]-e[1])<1;function rt(t,e){let r=Math.min(e.right-e.left,e.bottom-e.top),o=n=>n.endsWith(\"%\")?parseFloat(n)/100*r:parseFloat(n)||0;return[o(t.borderTopLeftRadius),o(t.borderTopRightRadius),o(t.borderBottomRightRadius),o(t.borderBottomLeftRadius)]}function At(t,e,r){let o=nt(t,e),n=rt(r,e),c=t?k(t):[],i=k(e),l=k(o).map((b,R)=>$(b,i[R])?n[R]:t&&$(b,c[R])?t.corners[R]:0),{left:s,right:a,top:d,bottom:h}=o;return{left:s,right:a,top:d,bottom:h,corners:l}}function Z(t,e,r,o){if(!t)return r;let n=k(t),c=k(e).map((l,s)=>t.corners[s]>0&&$(l,n[s]));if(!c.some(Boolean))return r;let i=rt(o,e);return c.map((l,s)=>l?Math.max(i[s],t.corners[s]):i[s]).map(l=>`${l}px`).join(\" \")}var O=(t,e)=>{let r=nt(e,t);return r.right-r.left>=2&&r.bottom-r.top>=2?r:null},J={top:\"ascender\",bottom:\"descender\"},w=new Map,st=t=>[...t.getClientRects?.()??[]];function kt(t){let e=`${t.fontStyle} ${t.fontWeight} ${t.fontSize} ${t.fontFamily}`;if(w.has(e))return w.get(e);let r=K(),o=null;if(r){r.font=e;let n=r.measureText(\"H\"),c=i=>r.measureText(i).actualBoundingBoxAscent;o={ascent:n.fontBoundingBoxAscent,descent:n.fontBoundingBoxDescent,ascender:c(\"bdfhkl\"),capHeight:n.actualBoundingBoxAscent,xHeight:c(\"xz\"),descender:r.measureText(\"gjpqy\").actualBoundingBoxDescent}}return w.set(e,o),o}var Q={ascender:\"ascender\",\"cap-height\":\"capHeight\",\"x-height\":\"xHeight\"},tt=(t,e,r,o)=>{let n=t.getPropertyValue(e).trim();return r.includes(n)?n:o};function Ct(t,e,r){let o=kt(e);if(!o){let s=Math.min(r*.72,t.bottom-t.top),a=(t.top+t.bottom)/2;return{barTop:a-s/2,barBottom:a+s/2}}let n=tt(e,\"--ask-text-top\",Object.keys(Q),J.top),c=tt(e,\"--ask-text-bottom\",[\"baseline\",\"descender\"],J.bottom),i=o.ascent+o.descent,l=t.top+(t.bottom-t.top-i)/2+o.ascent;return{barTop:l-o[Q[n]],barBottom:l+(c===\"descender\"?o.descender:0)}}var Mt=new Set(Y),Ot=new Set(q),it=.4,at=/[,/]\\s*0\\)$/,g=(t,e)=>t!==\"\"&&t!==e,N=[\"Top\",\"Right\",\"Bottom\",\"Left\"],wt=t=>N.every(e=>g(t[`border${e}Style`],\"none\")&&g(t[`border${e}Width`],\"0px\")),$t=t=>N.some(e=>g(t[`border${e}Style`],\"none\")&&g(t[`border${e}Width`],\"0px\")),Bt=t=>{let[e=0,r=0,o=0,n=0]=(t.replace(/rgba?\\([^)]*\\)|#\\w+/g,\"\").match(/-?[\\d.]+px/g)??[]).map(parseFloat);return t.includes(\"inset\")&&!o&&!n&&e===0!=(r===0)&&Math.abs(e+r)<=2},ct=t=>g(t,\"none\")&&!t.split(/,(?![^(]*\\))/).every(Bt);function Nt(t){let e=[],r=0,o=0;for(let n=0;n<t.length;n++){let c=t[n];c===\"(\"?r++:c===\")\"?r--:c===\",\"&&r===0&&(e.push(t.slice(o,n)),o=n+1)}return e.push(t.slice(o)),e.map(n=>n.trim()).filter(n=>n&&!n.startsWith(\"url(\")).join(\", \")}var dt=t=>g(t.backgroundColor,\"transparent\")&&!at.test(t.backgroundColor)||g(t.backgroundImage,\"none\")||ct(t.boxShadow)||wt(t);function _t(t){let e={},r=t.backgroundColor;g(r,\"transparent\")&&!at.test(r)&&(e.background=r);let o=t.backgroundImage;if(g(o,\"none\")){let n=Nt(o);n&&(e.background=e.background?`${n}, ${e.background}`:n)}for(let n of N){let c=t[`border${n}Width`],i=t[`border${n}Style`],l=t[`border${n}Color`];if(g(i,\"none\")&&g(c,\"0px\")&&parseFloat(c)>0){let s=`border${n}`;e[s]=`${c} ${i} ${l}`}}return ct(t.boxShadow)&&(e.boxShadow=t.boxShadow),Object.keys(e).length?e:void 0}var B=t=>Mt.has(t.localName),lt=t=>Ot.has(t.localName)&&!t.firstElementChild&&!t.textContent?.trim(),Dt=t=>{let e=document.createTreeWalker(t,NodeFilter.SHOW_TEXT|NodeFilter.SHOW_ELEMENT),r=document.createRange(),o=[],n=0;for(;e.nextNode();){let a=e.currentNode;if(a.nodeType===Node.TEXT_NODE){let d=a.parentElement;if(!a.textContent?.trim()||!d)continue;n++;let h=d.getBoundingClientRect();if(h.width<=1||h.height<=1)continue;r.selectNodeContents(a),o.push(st(r).filter(b=>b.width||b.height))}else lt(a)&&(n++,o.push([...a.getClientRects()]))}if(!o.some(a=>a.length))return n;let c=(parseFloat(getComputedStyle(t).fontSize)||16)*it,i=(a,d)=>Math.min(a.bottom,d.bottom)-Math.max(a.top,d.top)>=Math.min(a.height,d.height)/2&&Math.max(a.left,d.left)-Math.min(a.right,d.right)<=c,l=o.map((a,d)=>d),s=a=>l[a]===a?a:l[a]=s(l[a]);for(let a=0;a<o.length;a++)for(let d=a+1;d<o.length;d++)o[a].some(h=>o[d].some(b=>i(h,b)))&&(l[s(d)]=s(a));return new Set(o.map((a,d)=>s(d))).size},Lt=(t,e)=>t.hasAttribute(F)||B(t)||dt(e)&&Dt(t)<=1;function et(t,e){if(parseFloat(e.borderRadius)||!t.parentElement)return e.borderRadius||\"0px\";let r=t.parentElement,o=getComputedStyle(r),n=t.getBoundingClientRect(),c=r.getBoundingClientRect();return Math.abs(n.width-c.width)<1&&Math.abs(n.height-c.height)<1&&o.overflow!==\"visible\"?o.borderRadius:e.borderRadius||\"0px\"}function ot(t){t.sort((r,o)=>r.left-o.left);let e=[];for(let r of t){let o=e.find(n=>{let c=Math.min(n.bottom,r.bottom)-Math.max(n.top,r.top),i=Math.min(n.bottom-n.top,r.bottom-r.top),l=r.left-n.right;return c>=i/2&&l<=Math.max(n.fontSize,r.fontSize)*it});o?(o.left=Math.min(o.left,r.left),o.right=Math.max(o.right,r.right),o.top=Math.min(o.top,r.top),o.bottom=Math.max(o.bottom,r.bottom),o.fontSize=Math.max(o.fontSize,r.fontSize),o.barTop=Math.min(o.barTop,r.barTop),o.barBottom=Math.max(o.barBottom,r.barBottom)):e.push({...r})}return e.map(r=>{let o=r.barBottom-r.barTop;return{type:\"text\",x:r.left,y:r.barTop,width:r.right-r.left,height:o,radius:r.radius||`${Math.round(o/3)}px`}})}function mt(t,e,{mark:r=!0,onCovered:o}={}){let n=e.getBoundingClientRect(),c=e.offsetWidth?n.width/e.offsetWidth:1,i=e.offsetHeight?n.height/e.offsetHeight:1,l=m=>({left:(m.left-n.left)/c,right:(m.right-n.left)/c,top:(m.top-n.top)/i,bottom:(m.bottom-n.top)/i}),s=[],a=[],d=new Set,h=document.createRange(),b=(m,f,T)=>{let u=O(m,T);if(!u)return;let p=parseFloat(f.fontSize)||16,C=l(u);a.push({...C,fontSize:p,...Ct(C,f,p),radius:f.getPropertyValue(\"--ask-radius\").trim()})},R=(m,f)=>{let T=m.data.search(/\\S/);if(T<0||!m.parentElement)return;h.setStart(m,T),h.setEnd(m,m.data.trimEnd().length);let u=getComputedStyle(m.parentElement);for(let p of st(h))b(p,u,f)},I=(m,f)=>{for(let T of m.childNodes){if(T.nodeType===Node.TEXT_NODE){R(T,f);continue}if(T.nodeType!==Node.ELEMENT_NODE)continue;let u=T;if(u.hasAttribute(W)||u.hasAttribute(P))continue;let p=getComputedStyle(u);if(p.display===\"none\")continue;if(Lt(u,p)){let x=O(u.getBoundingClientRect(),f);if(x){let S=l(x);s.push({type:B(u)?\"media\":\"box\",x:S.left,y:S.top,width:S.right-S.left,height:S.bottom-S.top,radius:Z(f,x,et(u,p),p)})}B(u)||d.add(u);continue}if(lt(u)){for(let x of u.getClientRects())b(x,p,f);continue}if(dt(p)||$t(p)){let x=_t(p);if(x){let S=O(u.getBoundingClientRect(),f);if(S){let y=l(S);s.push({type:\"chrome\",x:y.left,y:y.top,width:y.right-y.left,height:y.bottom-y.top,radius:Z(f,S,et(u,p),p),chrome:x})}}}let C=p.overflowX!==\"visible\"||p.overflowY!==\"visible\";I(u,C?At(f,u.getBoundingClientRect(),p):f)}};if(I(t,null),o?.(d),!r)return[...s,...ot(a)];for(let m of t.querySelectorAll(`[${A}]`))d.has(m)||m.removeAttribute(A);for(let m of d)m.hasAttribute(A)||m.setAttribute(A,\"\");return[...s,...ot(a)]}var vt=t=>typeof matchMedia<\"u\"&&matchMedia(t).matches,It=()=>typeof Element<\"u\"&&typeof Element.prototype.animate==\"function\",ut=()=>!It()||vt(\"(prefers-reduced-motion: reduce)\");var _=t=>t.getAnimations?.()??[];var Ht=.7,Gt=1280,pt=320,Pt=2.5,Wt=.45,Ft=[\"shimmer\",\"group-shimmer\",\"pulse\",\"none\"];function bt(t){let e=getComputedStyle(t),r=(c,i,l)=>{let s=e.getPropertyValue(c).trim();return i.includes(s)?s:l},o=r(\"--ask-animation\",Ft,\"shimmer\"),n=r(\"--ask-speed\",[\"slow\",\"fast\"],\"slow\");return{animation:o,duration:V[o===\"pulse\"?\"pulse\":\"shimmer\"][n]}}var L=20,zt=Math.sin(L*Math.PI/180),gt=Math.cos(L*Math.PI/180),Ut=zt/gt;var Xt=`${90+L}deg`,D=.85,E=12,ht=t=>(1-Math.cos(Math.PI*t))/2;function jt(t){let e=t*Pt,r=(n,c)=>`color-mix(in srgb, ${j} ${(c*100).toFixed(1)}%, transparent) ${(n*t).toFixed(2)}px`,o=[];for(let n=0;n<=E;n++)o.push(r(n/E*D,ht(n/E)));for(let n=1;n<=E;n++)o.push(r(D+n/E*(1-D),ht(1-n/E)));return{width:e/gt,image:`repeating-linear-gradient(${Xt}, ${o.join(\", \")}, transparent ${e.toFixed(2)}px)`}}function Vt(t,e,r=bt(t)){for(let b of _(t))b.cancel();if(t.style.backgroundImage=\"\",t.style.backgroundRepeat=\"\",ut()||typeof t.animate!=\"function\"||r.animation===\"none\")return;let o={duration:r.duration,iterations:1/0};if(r.animation===\"pulse\"){t.animate([{opacity:1,easing:\"ease-in-out\"},{opacity:Wt,easing:\"ease-in-out\"},{opacity:1}],o).startTime=0;return}let n=t.getBoundingClientRect(),c=n.left+scrollX,i=r.animation===\"group-shimmer\"?e??{left:c,top:n.top,width:n.width,height:n.height}:{left:0,top:0,width:document.documentElement.clientWidth||innerWidth,height:innerHeight},l=Math.min(Math.max(i.width*.4,80),pt),{width:s,image:a}=jt(l),d=c-i.left+(n.top-i.top)*Ut,h=r.duration*Ht/(Gt+pt);t.style.backgroundImage=a,t.style.backgroundSize=`${s}px 100%`,t.style.backgroundRepeat=\"repeat-x\",t.animate([{backgroundPosition:`${-d}px 0`},{backgroundPosition:`${s-d}px 0`}],{duration:s*h,iterations:1/0}).startTime=0}var qt=t=>[...t.querySelectorAll(`:scope > [${M}]`)],ft=4,Yt=t=>t.replace(/(\\d+(?:\\.\\d+)?)px/g,(e,r)=>{let o=parseFloat(r);return Number.isFinite(o)&&o<ft?`${ft}px`:`${o}px`});function St(t,e){let r=qt(t),o=t.getBoundingClientRect(),n={left:o.left+scrollX,top:o.top,width:o.width,height:o.height},c=bt(t);e.forEach((i,l)=>{let s=r[l];if(s||(s=document.createElement(\"div\"),s.style.cssText=\"position:absolute;display:block;pointer-events:none;background-repeat:no-repeat\",t.append(s)),s.setAttribute(M,i.type),Object.assign(s.style,{left:`${i.x}px`,top:`${i.y}px`,width:`${i.width}px`,height:`${i.height}px`,borderRadius:i.type===\"chrome\"?i.radius:Yt(i.radius)}),i.type===\"chrome\"){for(let h of _(s))h.cancel();s.style.backgroundImage=\"\",s.style.backgroundSize=\"\",s.style.backgroundRepeat=\"\";let d=i.chrome;s.style.background=d?.background??\"\",s.style.borderTop=d?.borderTop??\"\",s.style.borderRight=d?.borderRight??\"\",s.style.borderBottom=d?.borderBottom??\"\",s.style.borderLeft=d?.borderLeft??\"\",s.style.boxShadow=d?.boxShadow??\"\",s.dataset.motion=\"chrome\";return}s.dataset.motion===\"chrome\"&&(s.style.background=\"\",s.style.borderTop=\"\",s.style.borderRight=\"\",s.style.borderBottom=\"\",s.style.borderLeft=\"\",s.style.boxShadow=\"\");let a=`${Math.round(n.left+i.x)}|${Math.round(i.y)}|${Math.round(i.height)}|${Math.round(n.left)}|${Math.round(n.width)}|${Math.round(n.height)}|${document.documentElement.clientWidth}|${c.animation}|${c.duration}`;s.dataset.motion!==a&&(s.dataset.motion=a,Vt(s,n,c))});for(let i=r.length-1;i>=e.length;i--)r[i].remove()}var xt=t=>t.parentElement?`${xt(t.parentElement)} > :nth-child(${[...t.parentElement.children].indexOf(t)+1})`:\":root\";function v(t){let e=t?.previousElementSibling,r=e?.querySelector(`:scope > [${H}]`),o=e?.querySelector(`:scope > [${G}]`);if(!e||!r||!o)return;let n=typeof CSSStyleSheet==\"function\"&&\"replaceSync\"in CSSStyleSheet.prototype?new CSSStyleSheet:null;n&&(document.adoptedStyleSheets=[...document.adoptedStyleSheets,n],e[U]=()=>{document.adoptedStyleSheets=document.adoptedStyleSheets.filter(s=>s!==n)});let c=s=>n?.replaceSync(s.size?`${[...s].map(xt).join(\", \")} { visibility: hidden !important; }`:\"\"),i=()=>{if(!o.isConnected||e[z])return l.disconnect();r.getClientRects().length&&St(o,mt(r,o,{mark:!1,onCovered:c}))},l=new ResizeObserver(i);l.observe(e),document.fonts?.ready.then(i)}var Rt=self,yt=Symbol.for(X),Tt=Rt[yt];Rt[yt]=v;Array.isArray(Tt)&&Tt.forEach(v);v(document.currentScript);})();";
+/** For every skeleton after a page's first: calls the boot INLINE_SCRIPT left on window. */
+declare 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. */
+declare const inlineScriptTag: (nonce?: string, stub?: boolean) => string;
+//#endregion
+//#region src/core/measure.d.ts
+/** Captured paint from a container — background / borders / box-shadow — reproduced on
+ *  the chrome bone so the outline survives shape recall from storage, SSR pre-paint, and
+ *  any path where the real DOM isn't visible under the layer. */
+type SkeletonChrome = {
+  background?: string;
+  borderTop?: string;
+  borderRight?: string;
+  borderBottom?: string;
+  borderLeft?: string;
+  boxShadow?: string;
+};
+/** A box to draw, relative to the layer it was measured against. */
+type SkeletonRect = {
+  /** Which kind of leaf this bone stands in for — exposed as `[ask-rect="<type>"]` so
+   *  consumers can style text / media / box / chrome bones differently in their own CSS. */
+  type: 'text' | 'media' | 'box' | 'chrome';
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  radius: string; /** Present on `type === 'chrome'` bones — the container's own paint, captured verbatim from `getComputedStyle`. */
+  chrome?: SkeletonChrome;
+};
+/** The font line each line of text is drawn from. */
+type TextTop = 'ascender' | 'cap-height' | 'x-height';
+/** The font line each line of text is drawn down to. */
+type TextBottom = 'baseline' | 'descender';
+declare const DEFAULT_TEXT: {
+  readonly top: "ascender";
+  readonly bottom: "descender";
+};
+/** Measures what `root` holds into rects relative to `layer`; without `mark`, `root` is left untouched. */
+declare function measureSkeleton(root: HTMLElement, layer: HTMLElement, {
+  mark,
+  onCovered
+}?: {
+  mark?: boolean; /** What's drawn as one block, its own paint to hide — for a caller that can't mark it. */
+  onCovered?: (covered: Set<Element>) => void;
+}): SkeletonRect[];
+//#endregion
+//#region src/core/theme.d.ts
+type SkeletonColors = {
+  /** The skeleton's fill. */base: string; /** The shimmer sweeping across it. */
+  highlight: string;
+};
+/** `shimmer` sweeps the whole page, `group-shimmer` each skeleton, `pulse` fades; all hold still under reduced motion. */
+type SkeletonAnimation = 'shimmer' | 'group-shimmer' | 'pulse' | 'none';
+/** How quickly the animation loops — each animation has its own slow and fast. */
+type SkeletonSpeed = 'slow' | 'fast';
+/** How much of each line of text is drawn: from the font's `top` line down to its `bottom` line. */
+type SkeletonText = {
+  top?: TextTop;
+  bottom?: TextBottom;
+};
+/** `system` follows `prefers-color-scheme`; the others pin one set of colours. */
+type SkeletonMode = 'light' | 'dark' | 'system';
+type SkeletonTheme = {
+  light?: SkeletonColors;
+  dark?: SkeletonColors; /** How round each line of text, and any other single bar, is drawn — any CSS length; `999px` for pills. Images and chips keep their own. */
+  radius?: string;
+  animation?: SkeletonAnimation;
+  speed?: SkeletonSpeed;
+  text?: SkeletonText;
+};
+declare const DEFAULT_COLORS: {
+  light: SkeletonColors;
+  dark: SkeletonColors;
+};
+declare const DEFAULT_THEME: {
+  readonly animation: "shimmer";
+  readonly speed: "slow";
+  readonly text: {
+    readonly top: "ascender";
+    readonly bottom: "descender";
+  };
+  readonly light: SkeletonColors;
+  readonly dark: SkeletonColors;
+};
+/** A theme's custom properties for one set of colours, for a style attribute. */
+declare function themeVariables(theme?: SkeletonTheme, mode?: 'light' | 'dark' | null): Record<string, string>;
+/** CSS for a theme on `selector`; colours follow `mode`, and are left out when neither is given. */
+declare function skeletonCSS({
+  theme,
+  mode,
+  text,
+  selector
+}: {
+  theme?: SkeletonTheme;
+  mode?: SkeletonMode;
+  text?: SkeletonText;
+  selector?: string;
+}): string;
+/** Sets a theme for the whole page, for setups without a provider. */
+declare function applyTheme(theme?: SkeletonTheme, mode?: SkeletonMode, {
+  nonce
+}?: {
+  nonce?: string;
+}): void;
+/** The same CSS as a whole element, for templates that can only render HTML strings. */
+declare const themeStyleTag: (config: {
+  theme?: SkeletonTheme;
+  mode?: SkeletonMode;
+  text?: SkeletonText;
+}, nonce?: string) => string;
+//#endregion
+//#region src/core/debug.d.ts
+/** On with `?ask-debug`, `a-smart-skeleton:debug` = "1" in localStorage or `setDebug(true)`; for `element`, also inside `[ask-debug]`. */
+declare const debugging: (element?: Element | null) => boolean;
+declare function setDebug(on: boolean): void;
+//#endregion
+//#region src/core/dev.d.ts
+/**
+ * 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.
+ */
+declare function checkNonce(nonce: string | undefined): void;
+//#endregion
+//#region src/core/shimmer.d.ts
+type Motion = {
+  animation: SkeletonAnimation;
+  duration: number;
+};
+/** The animation an element inherits from the theme: `--ask-animation` and `--ask-speed`. */
+declare function motionOf(element: Element): Motion;
+type Span = {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+};
+/** Animates `element` as its slice of one sweep, on the document clock, so however late it mounts it joins the sweep under way. */
+declare function shimmer(element: HTMLElement, group?: Span, motion?: Motion): void;
+/** The rect elements drawn into `layer`. */
+declare const rectsOf: (layer: Element) => HTMLElement[];
+/** Draws `rects` into `layer`, reusing the elements already there.
+ *
+ * Bones live in the light DOM (not a shadow root) so a consumer's stylesheet
+ * can reach them — selectors like `[ask-rect="text"]`, `[ask-rect="media"]`,
+ * `[ask-rect="box"]`, or the `--ask-base` / `--ask-highlight` custom
+ * properties — and theme the skeleton with the consumer's own tokens rather
+ * than plugin defaults. Positioning (x/y/width/height/radius) stays inline
+ * because it is per-bone; fill colour comes from the stylesheet.
+ *
+ * Added after mount, so Vue/React hydration never sees them.
+ */
+declare function drawSkeleton(layer: HTMLElement, rects: SkeletonRect[]): void;
+//#endregion
+//#region src/core/ghost.d.ts
+type GhostOptions = {
+  /** Remembers the shape under this key; without it, one is derived from the markup. */id?: string; /** The ghost was rendered from real data, so it beats any remembered shape. */
+  exact?: boolean; /** Its data is still set: a refetch over what's on screen, not a new load. */
+  refetch?: boolean;
+};
+/** Draws a skeleton over content laid out unseen in `root`, so it takes exactly the content's space. */
+declare class Ghost {
+  private root;
+  private options;
+  private ghost;
+  private snapshot;
+  private layer;
+  private source;
+  private hadContent;
+  private frame;
+  private mutations;
+  private resize;
+  constructor(root: HTMLElement, options?: GhostOptions);
+  /** Swaps in fresh options without tearing down the observers or stylesheet refcount. */
+  update(options?: GhostOptions): void;
+  private note;
+  private schedule;
+  private choose;
+  private measure;
+  destroy(): void;
+}
+//#endregion
+//#region src/core/memory.d.ts
+type MemoryOptions = {
+  id?: string; /** What the content was rendered from, for the `sample` dev hint. */
+  data?: unknown; /** The content is rendered from data by a function, which only `sample` or an `id` can stand in for. */
+  rendered?: boolean; /** A `sample` was passed. */
+  sample?: boolean;
+};
+/** Remembers the shape of shown content, so its next skeleton can be drawn from it. */
+declare class Memory {
+  private element;
+  private options;
+  private key;
+  private warnKey;
+  private timer;
+  private mutations;
+  private resize;
+  private untrack;
+  constructor(element: HTMLElement, options?: MemoryOptions);
+  private schedule;
+  save(): void;
+  private check;
+  destroy(): void;
+}
+//#endregion
+//#region src/core/shapes.d.ts
+/** Forgets remembered shapes — call it on sign-out. */
+declare function forgetShapes({
+  persisted
+}?: {
+  persisted?: boolean | undefined;
+}): void;
+//#endregion
+//#region src/core/skeleton.d.ts
+type Length = string | number;
+type SkeletonBoxOptions = {
+  height?: Length;
+  width?: Length;
+  radius?: Length;
+};
+declare const DEFAULT_SKELETON_BOX_OPTIONS: {
+  height: string;
+  width: string;
+  radius: string;
+};
+declare function skeletonBoxStyle({
+  height,
+  width,
+  radius
+}?: SkeletonBoxOptions): {
+  height: string;
+  width: string;
+  borderRadius: string;
+};
+/** A single bar, shimmering in step with every skeleton on the page once it is in the document. */
+declare function createSkeletonBox(options?: SkeletonBoxOptions): HTMLSpanElement;
+//#endregion
+//#region src/core/motion.d.ts
+declare const prefersReducedMotion: () => boolean;
+//#endregion
+//#region src/core/plan.d.ts
+/** Where one piece of a reveal sits: a piece of content arriving, or a rect of the skeleton leaving. */
+type Piece = {
+  rect: DOMRect; /** Its row or card: the nearest ancestor with two or more siblings like it. Null for a rect outside any. */
+  unit: DOMRect | null; /** Smaller text than the largest in its unit. */
+  secondary: boolean; /** The whole reveal. */
+  reveal: DOMRect; /** ms since the first of the reveals landing alongside this one. */
+  late: number;
+};
+/** What a reveal knows as its content lands, for `choose`. */
+type RevealContext = {
+  content: HTMLElement;
+  reveal: HTMLElement; /** ms the skeleton was up; Infinity when it was server-rendered or there was none. */
+  waited: number; /** Someone scrolled or typed in the last 400ms. */
+  input: boolean; /** The skeleton was drawn from the data on screen. */
+  refetch: boolean;
+  height: number; /** How many pieces the content arrives in. */
+  pieces: number;
+};
+/** One pane under a wipe: `rect` is its own box, `reveal` the box the front crosses, both in viewport px. */
+type WipePane = {
+  rect: DOMRect;
+  reveal: DOMRect;
+};
+/** A front crossing the whole reveal, as a mask drawn each frame. */
+type Wipe = {
+  /** The incoming pane's `mask-image` at `progress`, 0 to 1. */mask: (progress: number, pane: WipePane) => string; /** The outgoing pane's; the inverse of `mask` when left out. */
+  out?: (progress: number, pane: WipePane) => string; /** Runs once on the incoming pane; `progress` keeps counting past 1. */
+  effect?: (element: HTMLElement, front: WipePane & {
+    progress: () => number;
+  }) => void;
+};
+/** How content replaces its skeleton; what `choose` returns as content lands wins over the fields beside it. */
+type RevealSpec = {
+  order?: 'together' | ((piece: Piece) => number | null); /** Where each piece starts from, on top of the fade: `{ filter: "blur(6px)" }`. */
+  enter?: Keyframe;
+  wipe?: Wipe;
+  delay?: number; /** 0 is instant. */
+  duration?: number; /** ms a skeleton waits before it shows, so data that beats it never shows one. */
+  hold?: number;
+  choose?: (context: RevealContext) => RevealSpec;
+};
+/** A built-in reveal by name, or one of your own. */
+type RevealMode = 'together' | 'sequence' | 'smart' | 'sweep' | 'instant' | RevealSpec;
+declare const SKELETON_DELAY = 150;
+type SequencePlan = {
+  kind: 'sequence'; /** When a piece of content appears; null to appear at once. */
+  pieceDelay: (piece: Element) => number | null; /** When a skeleton rect at `rect` goes; null to go at once. */
+  boneDelay: (rect: DOMRect) => number | null;
+  duration: number;
+  enter?: Keyframe;
+};
+type WipePlan = {
+  kind: 'wipe';
+  wipe: Wipe; /** performance.now() at progress 0. */
+  start: number;
+  duration: number;
+  reveal: DOMRect;
+  enter?: Keyframe; /** Set when frames drop mid-wipe: both panes finish as a crossfade instead. */
+  stalled?: boolean;
+};
+type Plan = {
+  kind: 'instant';
+} | {
+  kind: 'together';
+  delay: number;
+  duration: number;
+  enter?: Keyframe;
+} | SequencePlan | WipePlan;
+/** Decides how `content` replaces the skeleton in `root`, now that it has arrived. */
+declare function planReveal(content: HTMLElement, root: HTMLElement, reveal: RevealSpec, warn?: (key: string) => void): Plan;
+/** `sequence`: each piece timed by its place in the reveal, top to bottom, then a little left to right. */
+declare const byPosition: ({
+  rect,
+  reveal
+}: Piece) => number;
+/** `smart`'s order: rows arrive whole, in page order, on screen only, main text first. */
+declare const byRow: ({
+  rect,
+  unit,
+  secondary,
+  late
+}: Piece) => number | null;
+declare const instant: RevealSpec;
+declare const together: RevealSpec;
+declare const sequence: RevealSpec;
+/** The cases `smart` settles before looking at the content: instant, or a quick crossfade. */
+declare const quickly: (context: RevealContext) => RevealSpec | null;
+/** `together` for a small reveal, else `byRow`. */
+declare const byContent: (context: RevealContext) => RevealSpec;
+/** Picks for each reveal from how it loaded and what it holds, holding its skeleton back a moment. */
+declare const smart: RevealSpec;
+//#endregion
+//#region src/core/fade.d.ts
+/** Brings a pane in: a skeleton after the reveal's `hold`, content as `reveal` plans; `initial` has nothing to replace. */
+declare function fadeIn(element: HTMLElement, reveal?: RevealMode, {
+  initial
+}?: {
+  initial?: boolean | undefined;
+}): Promise<void>;
+/** Where a pane stands within its reveal — what it's pinned to when it pops out. */
+type PaneBox = {
+  top: number;
+  left: number;
+  width: number;
+  height: number;
+};
+/** Measures `element` for `fadeOut`: before its replacement is inserted, or scroll anchoring moves the page. */
+declare function boxOf(element: HTMLElement): PaneBox;
+/** Resolves once `element` can be removed, leaving as the pane replacing it decides; its parent must be positioned. */
+declare function fadeOut(element: HTMLElement, box?: PaneBox): Promise<void>;
+//#endregion
+//#region src/core/sweep.d.ts
+/** `smart`, wiping content in behind one band of the shimmer. */
+declare const sweep: RevealSpec;
+//#endregion
+//#region src/core/reveals.d.ts
+/** Longest a pane can take to leave under `mode`, for a framework that has to know up front. */
+declare function exitDuration(mode?: RevealMode): number;
+//#endregion
+//#region src/core/images.d.ts
+/** Images inside still on their way. */
+declare const pendingImages: (element: Element) => HTMLImageElement[];
+/** Loaded and decoded, so its first frame on screen is the picture; failing counts, as nothing more is coming. */
+declare function imageReady(image: HTMLImageElement): Promise<void>;
+//#endregion
+//#region src/core/reveal.d.ts
+type RevealOptions = {
+  /** Remembers the shape under this key; without it, one is derived from the markup. */id?: string; /** How content replaces its skeleton: `smart` (the default), `together`, `sequence`, `sweep`, or a `RevealSpec` of your own. */
+  reveal?: RevealMode; /** Read to screen readers while loading, in place of the skeleton — "Loading profile". */
+  label?: string; /** Called once content has come in over a skeleton. */
+  onReveal?: () => void;
+};
+/** Shows a skeleton of content while it loads, then crossfades to the content itself. */
+declare class Reveal {
+  private element;
+  private options;
+  private current;
+  private ghost;
+  private memory;
+  private arrival;
+  constructor(element: HTMLElement, options?: RevealOptions);
+  /** Shows a skeleton measured from `content`, rendered from sample data, or else the shape last shown. */
+  load(content?: Node | string): HTMLElement;
+  show(content: Node | string): HTMLElement;
+  private swap;
+  destroy(): void;
+}
+//#endregion
+export { skeletonCSS as $, createSkeletonBox as A, FADE_DURATION as At, shimmer as B, quickly as C, ATTR_RECT as Ct, prefersReducedMotion as D, ATTR_XRAY as Dt, together as E, ATTR_STATUS as Et, Ghost as F, DEFAULT_THEME as G, debugging as H, GhostOptions as I, SkeletonMode as J, SkeletonAnimation as K, drawSkeleton as L, forgetShapes as M, RESIZE_DURATION as Mt, Memory as N, DEFAULT_SKELETON_BOX_OPTIONS as O, CASCADE_SPREAD as Ot, MemoryOptions as P, applyTheme as Q, motionOf as R, planReveal as S, ATTR_PANE as St, smart as T, ATTR_SNAPSHOT as Tt, setDebug as U, checkNonce as V, DEFAULT_COLORS as W, SkeletonText as X, SkeletonSpeed as Y, SkeletonTheme as Z, WipePane as _, ATTR_GHOST as _t, exitDuration as a, TextBottom as at, byRow as b, ATTR_LOADING as bt, boxOf as c, INLINE_SCRIPT as ct, Piece as d, SMART_SKELETON_CSS as dt, themeStyleTag as et, RevealContext as f, addStyles as ft, Wipe as g, ATTR_DEBUG as gt, SKELETON_DELAY as h, ATTR_BLOCK as ht, pendingImages as i, SkeletonRect as it, skeletonBoxStyle as j, IMAGE_TIMEOUT as jt, SkeletonBoxOptions as k, DURATIONS as kt, fadeIn as l, INLINE_STUB as lt, RevealSpec as m, ATTR_BAR as mt, RevealOptions as n, DEFAULT_TEXT as nt, sweep as o, TextTop as ot, RevealMode as p, removeStyles as pt, SkeletonColors as q, imageReady as r, SkeletonChrome as rt, PaneBox as s, measureSkeleton as st, Reveal as t, themeVariables as tt, fadeOut as u, inlineScriptTag as ut, byContent as v, ATTR_IGNORE as vt, sequence as w, ATTR_REVEAL as wt, instant as x, ATTR_OWN as xt, byPosition as y, ATTR_LAYER as yt, rectsOf as z };
+//# sourceMappingURL=index.d.ts.map

package/dist/core/index.cjs

@@ -0,0 +1,67 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_core = require("../_chunks/core.js");
+exports.ATTR_BAR = require_core.ATTR_BAR;
+exports.ATTR_BLOCK = require_core.ATTR_BLOCK;
+exports.ATTR_DEBUG = require_core.ATTR_DEBUG;
+exports.ATTR_GHOST = require_core.ATTR_GHOST;
+exports.ATTR_IGNORE = require_core.ATTR_IGNORE;
+exports.ATTR_LAYER = require_core.ATTR_LAYER;
+exports.ATTR_LOADING = require_core.ATTR_LOADING;
+exports.ATTR_OWN = require_core.ATTR_OWN;
+exports.ATTR_PANE = require_core.ATTR_PANE;
+exports.ATTR_RECT = require_core.ATTR_RECT;
+exports.ATTR_REVEAL = require_core.ATTR_REVEAL;
+exports.ATTR_SNAPSHOT = require_core.ATTR_SNAPSHOT;
+exports.ATTR_STATUS = require_core.ATTR_STATUS;
+exports.ATTR_XRAY = require_core.ATTR_XRAY;
+exports.CASCADE_SPREAD = require_core.CASCADE_SPREAD;
+exports.DEFAULT_COLORS = require_core.DEFAULT_COLORS;
+exports.DEFAULT_SKELETON_BOX_OPTIONS = require_core.DEFAULT_SKELETON_BOX_OPTIONS;
+exports.DEFAULT_TEXT = require_core.DEFAULT_TEXT;
+exports.DEFAULT_THEME = require_core.DEFAULT_THEME;
+exports.DURATIONS = require_core.DURATIONS;
+exports.FADE_DURATION = require_core.FADE_DURATION;
+exports.Ghost = require_core.Ghost;
+exports.IMAGE_TIMEOUT = require_core.IMAGE_TIMEOUT;
+exports.INLINE_SCRIPT = require_core.INLINE_SCRIPT;
+exports.INLINE_STUB = require_core.INLINE_STUB;
+exports.Memory = require_core.Memory;
+exports.RESIZE_DURATION = require_core.RESIZE_DURATION;
+exports.Reveal = require_core.Reveal;
+exports.SKELETON_DELAY = require_core.SKELETON_DELAY;
+exports.SMART_SKELETON_CSS = require_core.SMART_SKELETON_CSS;
+exports.addStyles = require_core.addStyles;
+exports.applyTheme = require_core.applyTheme;
+exports.boxOf = require_core.boxOf;
+exports.byContent = require_core.byContent;
+exports.byPosition = require_core.byPosition;
+exports.byRow = require_core.byRow;
+exports.checkNonce = require_core.checkNonce;
+exports.createSkeletonBox = require_core.createSkeletonBox;
+exports.debugging = require_core.debugging;
+exports.drawSkeleton = require_core.drawSkeleton;
+exports.exitDuration = require_core.exitDuration;
+exports.fadeIn = require_core.fadeIn;
+exports.fadeOut = require_core.fadeOut;
+exports.forgetShapes = require_core.forgetShapes;
+exports.imageReady = require_core.imageReady;
+exports.inlineScriptTag = require_core.inlineScriptTag;
+exports.instant = require_core.instant;
+exports.measureSkeleton = require_core.measureSkeleton;
+exports.motionOf = require_core.motionOf;
+exports.pendingImages = require_core.pendingImages;
+exports.planReveal = require_core.planReveal;
+exports.prefersReducedMotion = require_core.prefersReducedMotion;
+exports.quickly = require_core.quickly;
+exports.rectsOf = require_core.rectsOf;
+exports.removeStyles = require_core.removeStyles;
+exports.sequence = require_core.sequence;
+exports.setDebug = require_core.setDebug;
+exports.shimmer = require_core.shimmer;
+exports.skeletonBoxStyle = require_core.skeletonBoxStyle;
+exports.skeletonCSS = require_core.skeletonCSS;
+exports.smart = require_core.smart;
+exports.sweep = require_core.sweep;
+exports.themeStyleTag = require_core.themeStyleTag;
+exports.themeVariables = require_core.themeVariables;
+exports.together = require_core.together;

package/dist/core/index.d.cts

@@ -0,0 +1,2 @@
+import { $ as skeletonCSS, A as createSkeletonBox, At as FADE_DURATION, B as shimmer, C as quickly, Ct as ATTR_RECT, D as prefersReducedMotion, Dt as ATTR_XRAY, E as together, Et as ATTR_STATUS, F as Ghost, G as DEFAULT_THEME, H as debugging, I as GhostOptions, J as SkeletonMode, K as SkeletonAnimation, L as drawSkeleton, M as forgetShapes, Mt as RESIZE_DURATION, N as Memory, O as DEFAULT_SKELETON_BOX_OPTIONS, Ot as CASCADE_SPREAD, P as MemoryOptions, Q as applyTheme, R as motionOf, S as planReveal, St as ATTR_PANE, T as smart, Tt as ATTR_SNAPSHOT, U as setDebug, V as checkNonce, W as DEFAULT_COLORS, X as SkeletonText, Y as SkeletonSpeed, Z as SkeletonTheme, _ as WipePane, _t as ATTR_GHOST, a as exitDuration, at as TextBottom, b as byRow, bt as ATTR_LOADING, c as boxOf, ct as INLINE_SCRIPT, d as Piece, dt as SMART_SKELETON_CSS, et as themeStyleTag, f as RevealContext, ft as addStyles, g as Wipe, gt as ATTR_DEBUG, h as SKELETON_DELAY, ht as ATTR_BLOCK, i as pendingImages, it as SkeletonRect, j as skeletonBoxStyle, jt as IMAGE_TIMEOUT, k as SkeletonBoxOptions, kt as DURATIONS, l as fadeIn, lt as INLINE_STUB, m as RevealSpec, mt as ATTR_BAR, n as RevealOptions, nt as DEFAULT_TEXT, o as sweep, ot as TextTop, p as RevealMode, pt as removeStyles, q as SkeletonColors, r as imageReady, rt as SkeletonChrome, s as PaneBox, st as measureSkeleton, t as Reveal, tt as themeVariables, u as fadeOut, ut as inlineScriptTag, v as byContent, vt as ATTR_IGNORE, w as sequence, wt as ATTR_REVEAL, x as instant, xt as ATTR_OWN, y as byPosition, yt as ATTR_LAYER, z as rectsOf } from "../_chunks/index.js";
+export { ATTR_BAR, ATTR_BLOCK, ATTR_DEBUG, ATTR_GHOST, ATTR_IGNORE, ATTR_LAYER, ATTR_LOADING, ATTR_OWN, ATTR_PANE, ATTR_RECT, ATTR_REVEAL, ATTR_SNAPSHOT, ATTR_STATUS, ATTR_XRAY, CASCADE_SPREAD, DEFAULT_COLORS, DEFAULT_SKELETON_BOX_OPTIONS, DEFAULT_TEXT, DEFAULT_THEME, DURATIONS, FADE_DURATION, Ghost, type GhostOptions, IMAGE_TIMEOUT, INLINE_SCRIPT, INLINE_STUB, Memory, type MemoryOptions, type PaneBox, type Piece, RESIZE_DURATION, Reveal, type RevealContext, type RevealMode, type RevealOptions, type RevealSpec, SKELETON_DELAY, SMART_SKELETON_CSS, type SkeletonAnimation, type SkeletonBoxOptions, type SkeletonChrome, type SkeletonColors, type SkeletonMode, type SkeletonRect, type SkeletonSpeed, type SkeletonText, type SkeletonTheme, type TextBottom, type TextTop, type Wipe, type WipePane, addStyles, applyTheme, boxOf, byContent, byPosition, byRow, checkNonce, createSkeletonBox, debugging, drawSkeleton, exitDuration, fadeIn, fadeOut, forgetShapes, imageReady, inlineScriptTag, instant, measureSkeleton, motionOf, pendingImages, planReveal, prefersReducedMotion, quickly, rectsOf, removeStyles, sequence, setDebug, shimmer, skeletonBoxStyle, skeletonCSS, smart, sweep, themeStyleTag, themeVariables, together };

package/dist/core/index.d.ts

@@ -0,0 +1,2 @@
+import { $ as skeletonCSS, A as createSkeletonBox, At as FADE_DURATION, B as shimmer, C as quickly, Ct as ATTR_RECT, D as prefersReducedMotion, Dt as ATTR_XRAY, E as together, Et as ATTR_STATUS, F as Ghost, G as DEFAULT_THEME, H as debugging, I as GhostOptions, J as SkeletonMode, K as SkeletonAnimation, L as drawSkeleton, M as forgetShapes, Mt as RESIZE_DURATION, N as Memory, O as DEFAULT_SKELETON_BOX_OPTIONS, Ot as CASCADE_SPREAD, P as MemoryOptions, Q as applyTheme, R as motionOf, S as planReveal, St as ATTR_PANE, T as smart, Tt as ATTR_SNAPSHOT, U as setDebug, V as checkNonce, W as DEFAULT_COLORS, X as SkeletonText, Y as SkeletonSpeed, Z as SkeletonTheme, _ as WipePane, _t as ATTR_GHOST, a as exitDuration, at as TextBottom, b as byRow, bt as ATTR_LOADING, c as boxOf, ct as INLINE_SCRIPT, d as Piece, dt as SMART_SKELETON_CSS, et as themeStyleTag, f as RevealContext, ft as addStyles, g as Wipe, gt as ATTR_DEBUG, h as SKELETON_DELAY, ht as ATTR_BLOCK, i as pendingImages, it as SkeletonRect, j as skeletonBoxStyle, jt as IMAGE_TIMEOUT, k as SkeletonBoxOptions, kt as DURATIONS, l as fadeIn, lt as INLINE_STUB, m as RevealSpec, mt as ATTR_BAR, n as RevealOptions, nt as DEFAULT_TEXT, o as sweep, ot as TextTop, p as RevealMode, pt as removeStyles, q as SkeletonColors, r as imageReady, rt as SkeletonChrome, s as PaneBox, st as measureSkeleton, t as Reveal, tt as themeVariables, u as fadeOut, ut as inlineScriptTag, v as byContent, vt as ATTR_IGNORE, w as sequence, wt as ATTR_REVEAL, x as instant, xt as ATTR_OWN, y as byPosition, yt as ATTR_LAYER, z as rectsOf } from "../_chunks/index.js";
+export { ATTR_BAR, ATTR_BLOCK, ATTR_DEBUG, ATTR_GHOST, ATTR_IGNORE, ATTR_LAYER, ATTR_LOADING, ATTR_OWN, ATTR_PANE, ATTR_RECT, ATTR_REVEAL, ATTR_SNAPSHOT, ATTR_STATUS, ATTR_XRAY, CASCADE_SPREAD, DEFAULT_COLORS, DEFAULT_SKELETON_BOX_OPTIONS, DEFAULT_TEXT, DEFAULT_THEME, DURATIONS, FADE_DURATION, Ghost, type GhostOptions, IMAGE_TIMEOUT, INLINE_SCRIPT, INLINE_STUB, Memory, type MemoryOptions, type PaneBox, type Piece, RESIZE_DURATION, Reveal, type RevealContext, type RevealMode, type RevealOptions, type RevealSpec, SKELETON_DELAY, SMART_SKELETON_CSS, type SkeletonAnimation, type SkeletonBoxOptions, type SkeletonChrome, type SkeletonColors, type SkeletonMode, type SkeletonRect, type SkeletonSpeed, type SkeletonText, type SkeletonTheme, type TextBottom, type TextTop, type Wipe, type WipePane, addStyles, applyTheme, boxOf, byContent, byPosition, byRow, checkNonce, createSkeletonBox, debugging, drawSkeleton, exitDuration, fadeIn, fadeOut, forgetShapes, imageReady, inlineScriptTag, instant, measureSkeleton, motionOf, pendingImages, planReveal, prefersReducedMotion, quickly, rectsOf, removeStyles, sequence, setDebug, shimmer, skeletonBoxStyle, skeletonCSS, smart, sweep, themeStyleTag, themeVariables, together };

package/dist/core/index.js

@@ -0,0 +1,2 @@
+import { $ as ATTR_LOADING, A as DEFAULT_TEXT, B as themeVariables, C as smart, D as rectsOf, E as motionOf, F as DEFAULT_COLORS, G as addStyles, H as INLINE_STUB, I as DEFAULT_THEME, J as ATTR_BLOCK, K as removeStyles, L as applyTheme, M as checkNonce, N as debugging, O as shimmer, P as setDebug, Q as ATTR_LAYER, R as skeletonCSS, S as sequence, T as drawSkeleton, U as inlineScriptTag, V as INLINE_SCRIPT, W as SMART_SKELETON_CSS, X as ATTR_GHOST, Y as ATTR_DEBUG, Z as ATTR_IGNORE, _ as byPosition, a as exitDuration, at as ATTR_STATUS, b as planReveal, c as pendingImages, ct as DURATIONS, d as skeletonBoxStyle, dt as RESIZE_DURATION, et as ATTR_OWN, f as Memory, g as byContent, h as SKELETON_DELAY, i as fadeOut, it as ATTR_SNAPSHOT, j as measureSkeleton, k as prefersReducedMotion, l as DEFAULT_SKELETON_BOX_OPTIONS, lt as FADE_DURATION, m as forgetShapes, n as boxOf, nt as ATTR_RECT, o as sweep, ot as ATTR_XRAY, p as Ghost, q as ATTR_BAR, r as fadeIn, rt as ATTR_REVEAL, s as imageReady, st as CASCADE_SPREAD, t as Reveal, tt as ATTR_PANE, u as createSkeletonBox, ut as IMAGE_TIMEOUT, v as byRow, w as together, x as quickly, y as instant, z as themeStyleTag } from "../_chunks/core.js";
+export { ATTR_BAR, ATTR_BLOCK, ATTR_DEBUG, ATTR_GHOST, ATTR_IGNORE, ATTR_LAYER, ATTR_LOADING, ATTR_OWN, ATTR_PANE, ATTR_RECT, ATTR_REVEAL, ATTR_SNAPSHOT, ATTR_STATUS, ATTR_XRAY, CASCADE_SPREAD, DEFAULT_COLORS, DEFAULT_SKELETON_BOX_OPTIONS, DEFAULT_TEXT, DEFAULT_THEME, DURATIONS, FADE_DURATION, Ghost, IMAGE_TIMEOUT, INLINE_SCRIPT, INLINE_STUB, Memory, RESIZE_DURATION, Reveal, SKELETON_DELAY, SMART_SKELETON_CSS, addStyles, applyTheme, boxOf, byContent, byPosition, byRow, checkNonce, createSkeletonBox, debugging, drawSkeleton, exitDuration, fadeIn, fadeOut, forgetShapes, imageReady, inlineScriptTag, instant, measureSkeleton, motionOf, pendingImages, planReveal, prefersReducedMotion, quickly, rectsOf, removeStyles, sequence, setDebug, shimmer, skeletonBoxStyle, skeletonCSS, smart, sweep, themeStyleTag, themeVariables, together };

package/dist/element/index.cjs

@@ -0,0 +1,47 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_core = require("../_chunks/core.js");
+//#region src/element/index.ts
+const Base = typeof HTMLElement === "undefined" ? class {} : HTMLElement;
+/** A reveal in plain HTML: its children start as a skeleton with `loading`, as content without. */
+var ASmartSkeletonReveal = class extends Base {
+	reveal = null;
+	started = false;
+	connectedCallback() {
+		if (this.started) return;
+		this.started = true;
+		const content = document.createDocumentFragment();
+		content.append(...this.childNodes);
+		this.reveal = new require_core.Reveal(this, {
+			id: this.id || void 0,
+			reveal: this.getAttribute("reveal") ?? void 0,
+			label: this.getAttribute("label") ?? void 0,
+			onReveal: () => this.dispatchEvent(new Event("reveal"))
+		});
+		if (this.hasAttribute("loading")) this.reveal.load(content);
+		else this.reveal.show(content);
+	}
+	disconnectedCallback() {
+		queueMicrotask(() => {
+			if (this.isConnected) return;
+			this.reveal?.destroy();
+			this.reveal = null;
+		});
+	}
+	/** Shows a skeleton measured from `content`, rendered from sample data, or else the shape last shown. */
+	load(content) {
+		this.setAttribute("loading", "");
+		this.reveal?.load(content);
+	}
+	show(content) {
+		this.removeAttribute("loading");
+		this.reveal?.show(content);
+	}
+};
+if (typeof customElements !== "undefined" && !customElements.get("a-smart-skeleton-reveal")) {
+	customElements.define("a-smart-skeleton-reveal", ASmartSkeletonReveal);
+	if (!customElements.get("ask-reveal")) customElements.define("ask-reveal", class extends ASmartSkeletonReveal {});
+}
+//#endregion
+exports.ASmartSkeletonReveal = ASmartSkeletonReveal;
+
+//# sourceMappingURL=index.cjs.map

package/dist/element/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["Reveal"],"sources":["../../src/element/index.ts"],"sourcesContent":["import { Reveal, type RevealMode } from '../core';\n\n// Importable on a server, where there's no HTMLElement to extend\nconst Base = typeof HTMLElement === 'undefined' ? (class {} as typeof HTMLElement) : HTMLElement;\n\n/** A reveal in plain HTML: its children start as a skeleton with `loading`, as content without. */\nexport class ASmartSkeletonReveal extends Base {\n  private reveal: Reveal | null = null;\n  private started = false;\n\n  connectedCallback() {\n    if (this.started) return;\n    this.started = true;\n    const content = document.createDocumentFragment();\n    content.append(...this.childNodes);\n    this.reveal = new Reveal(this, {\n      id: this.id || undefined,\n      reveal: (this.getAttribute('reveal') as RevealMode | null) ?? undefined,\n      label: this.getAttribute('label') ?? undefined,\n      onReveal: () => this.dispatchEvent(new Event('reveal')),\n    });\n    if (this.hasAttribute('loading')) this.reveal.load(content);\n    else this.reveal.show(content);\n  }\n\n  disconnectedCallback() {\n    // A move reconnects within the task; only a removal stays out\n    queueMicrotask(() => {\n      if (this.isConnected) return;\n      this.reveal?.destroy();\n      this.reveal = null;\n    });\n  }\n\n  /** Shows a skeleton measured from `content`, rendered from sample data, or else the shape last shown. */\n  load(content?: Node | string) {\n    this.setAttribute('loading', '');\n    this.reveal?.load(content);\n  }\n\n  show(content: Node | string) {\n    this.removeAttribute('loading');\n    this.reveal?.show(content);\n  }\n}\n\nif (typeof customElements !== 'undefined' && !customElements.get('a-smart-skeleton-reveal')) {\n  customElements.define('a-smart-skeleton-reveal', ASmartSkeletonReveal);\n  if (!customElements.get('ask-reveal')) {\n    customElements.define('ask-reveal', class extends ASmartSkeletonReveal {});\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'a-smart-skeleton-reveal': ASmartSkeletonReveal;\n    'ask-reveal': ASmartSkeletonReveal;\n  }\n}\n"],"mappings":";;;AAGA,MAAM,OAAO,OAAO,gBAAgB,cAAe,MAAM,CAAC,IAA2B;;AAGrF,IAAa,uBAAb,cAA0C,KAAK;CAC7C,SAAgC;CAChC,UAAkB;CAElB,oBAAoB;EAClB,IAAI,KAAK,SAAS;EAClB,KAAK,UAAU;EACf,MAAM,UAAU,SAAS,uBAAuB;EAChD,QAAQ,OAAO,GAAG,KAAK,UAAU;EACjC,KAAK,SAAS,IAAIA,aAAAA,OAAO,MAAM;GAC7B,IAAI,KAAK,MAAM,KAAA;GACf,QAAS,KAAK,aAAa,QAAQ,KAA2B,KAAA;GAC9D,OAAO,KAAK,aAAa,OAAO,KAAK,KAAA;GACrC,gBAAgB,KAAK,cAAc,IAAI,MAAM,QAAQ,CAAC;EACxD,CAAC;EACD,IAAI,KAAK,aAAa,SAAS,GAAG,KAAK,OAAO,KAAK,OAAO;OACrD,KAAK,OAAO,KAAK,OAAO;CAC/B;CAEA,uBAAuB;EAErB,qBAAqB;GACnB,IAAI,KAAK,aAAa;GACtB,KAAK,QAAQ,QAAQ;GACrB,KAAK,SAAS;EAChB,CAAC;CACH;;CAGA,KAAK,SAAyB;EAC5B,KAAK,aAAa,WAAW,EAAE;EAC/B,KAAK,QAAQ,KAAK,OAAO;CAC3B;CAEA,KAAK,SAAwB;EAC3B,KAAK,gBAAgB,SAAS;EAC9B,KAAK,QAAQ,KAAK,OAAO;CAC3B;AACF;AAEA,IAAI,OAAO,mBAAmB,eAAe,CAAC,eAAe,IAAI,yBAAyB,GAAG;CAC3F,eAAe,OAAO,2BAA2B,oBAAoB;CACrE,IAAI,CAAC,eAAe,IAAI,YAAY,GAClC,eAAe,OAAO,cAAc,cAAc,qBAAqB,CAAC,CAAC;AAE7E"}

package/dist/element/index.d.cts

@@ -0,0 +1,24 @@
+//#region src/element/index.d.ts
+declare const Base: {
+  new (): HTMLElement;
+  prototype: HTMLElement;
+};
+/** A reveal in plain HTML: its children start as a skeleton with `loading`, as content without. */
+declare class ASmartSkeletonReveal extends Base {
+  private reveal;
+  private started;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  /** Shows a skeleton measured from `content`, rendered from sample data, or else the shape last shown. */
+  load(content?: Node | string): void;
+  show(content: Node | string): void;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    'a-smart-skeleton-reveal': ASmartSkeletonReveal;
+    'ask-reveal': ASmartSkeletonReveal;
+  }
+}
+//#endregion
+export { ASmartSkeletonReveal };
+//# sourceMappingURL=index.d.cts.map

package/dist/element/index.d.ts

@@ -0,0 +1,24 @@
+//#region src/element/index.d.ts
+declare const Base: {
+  new (): HTMLElement;
+  prototype: HTMLElement;
+};
+/** A reveal in plain HTML: its children start as a skeleton with `loading`, as content without. */
+declare class ASmartSkeletonReveal extends Base {
+  private reveal;
+  private started;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  /** Shows a skeleton measured from `content`, rendered from sample data, or else the shape last shown. */
+  load(content?: Node | string): void;
+  show(content: Node | string): void;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    'a-smart-skeleton-reveal': ASmartSkeletonReveal;
+    'ask-reveal': ASmartSkeletonReveal;
+  }
+}
+//#endregion
+export { ASmartSkeletonReveal };
+//# sourceMappingURL=index.d.ts.map