[{"data":1,"prerenderedAt":5162},["ShallowReactive",2],{"\u002Fui\u002Fskeleton":3},{"id":4,"title":5,"body":6,"description":5155,"extension":5156,"meta":5157,"navigation":216,"order":67,"package":16,"path":5158,"seo":5159,"stem":5160,"__hash__":5161},"docs\u002Fui\u002Fskeleton.md","ASkeleton",{"type":7,"value":8,"toc":5116},"minimark",[9,17,28,31,34,39,42,47,122,142,146,166,173,247,251,300,311,320,324,443,447,450,561,564,568,593,627,665,668,756,760,763,769,814,849,855,860,863,866,877,994,998,1001,1008,1436,1477,1480,1549,1552,1669,1692,1696,1699,1710,1756,1767,1855,1880,1893,1896,1925,1946,1949,2221,2224,2320,2331,2389,2398,2401,2406,2689,2693,2746,2750,2753,2790,2806,2810,2813,2835,3134,3139,3142,3145,3361,3505,3510,3523,3590,3594,3600,3608,3757,3763,3769,3779,3871,3875,3878,3984,3988,4096,4099,4103,4106,4116,4120,4126,4240,4262,4375,4440,4444,4447,4490,4497,4501,4578,4588,4592,4639,4643,4646,4744,4748,4784,4793,4797,4800,4944,4948,4960,4968,4972,4991,5014,5044,5055,5077,5088,5104,5113],[10,11,13],"h1",{"id":12},"alikhalillla-skeleton",[14,15,16],"code",{},"@alikhalilll\u002Fa-skeleton",[18,19,20],"blockquote",{},[21,22,23,24,27],"p",{},"A self-generating skeleton loader for Vue 3 \u002F Nuxt 3+.\nThree rendering strategies (clone, mirror, structural) · pixel-identical computed-style snapshot ·\nper-line text geometry via ",[14,25,26],{},"Range"," API · 15 named variants · themeable via CSS variables · SSR-safe mirror mode.",[29,30],"demo-skeleton-clone",{},[32,33],"demo-skeleton-grid",{},[35,36,38],"h2",{"id":37},"setup","Setup",[40,41],"doc-install",{"pkg":16},[43,44,46],"h3",{"id":45},"nuxt-3-4","Nuxt 3 \u002F 4",[48,49,54],"pre",{"className":50,"code":51,"language":52,"meta":53,"style":53},"language-ts shiki shiki-themes github-light-default github-dark-default","\u002F\u002F nuxt.config.ts\nexport default defineNuxtConfig({\n  modules: ['@alikhalilll\u002Fa-skeleton\u002Fnuxt'],\n  css: ['@alikhalilll\u002Fa-skeleton\u002Fstyles.css'],\n});\n","ts","",[14,55,56,65,83,100,113],{"__ignoreMap":53},[57,58,61],"span",{"class":59,"line":60},"line",1,[57,62,64],{"class":63},"sU953","\u002F\u002F nuxt.config.ts\n",[57,66,68,72,75,79],{"class":59,"line":67},2,[57,69,71],{"class":70},"sjeE4","export",[57,73,74],{"class":70}," default",[57,76,78],{"class":77},"sbjLL"," defineNuxtConfig",[57,80,82],{"class":81},"sTDnQ","({\n",[57,84,86,90,94,97],{"class":59,"line":85},3,[57,87,89],{"class":88},"s4rv2","  modules: [",[57,91,93],{"class":92},"sSVrQ","'@alikhalilll\u002Fa-skeleton\u002Fnuxt'",[57,95,96],{"class":88},"]",[57,98,99],{"class":81},",\n",[57,101,103,106,109,111],{"class":59,"line":102},4,[57,104,105],{"class":88},"  css: [",[57,107,108],{"class":92},"'@alikhalilll\u002Fa-skeleton\u002Fstyles.css'",[57,110,96],{"class":88},[57,112,99],{"class":81},[57,114,116,119],{"class":59,"line":115},5,[57,117,118],{"class":81},"})",[57,120,121],{"class":88},";\n",[21,123,124,127,128,127,131,134,135,127,138,141],{},[14,125,126],{},"\u003CASkeleton>",", ",[14,129,130],{},"\u003CASkeletonLayer>",[14,132,133],{},"\u003CASkeletonBlock>",", and every variant primitive (",[14,136,137],{},"\u003CASkeletonCard>",[14,139,140],{},"\u003CASkeletonText>",", …) are auto-imported app-wide.",[43,143,145],{"id":144},"vue-vite","Vue + Vite",[48,147,149],{"className":50,"code":148,"language":52,"meta":53,"style":53},"\u002F\u002F main.ts\nimport '@alikhalilll\u002Fa-skeleton\u002Fstyles.css';\n",[14,150,151,156],{"__ignoreMap":53},[57,152,153],{"class":59,"line":60},[57,154,155],{"class":63},"\u002F\u002F main.ts\n",[57,157,158,161,164],{"class":59,"line":67},[57,159,160],{"class":70},"import",[57,162,163],{"class":92}," '@alikhalilll\u002Fa-skeleton\u002Fstyles.css'",[57,165,121],{"class":88},[21,167,168,169,172],{},"Optional auto-resolve via ",[14,170,171],{},"unplugin-vue-components",":",[48,174,176],{"className":50,"code":175,"language":52,"meta":53,"style":53},"\u002F\u002F vite.config.ts\nimport Components from 'unplugin-vue-components\u002Fvite';\nimport ASkeletonResolver from '@alikhalilll\u002Fa-skeleton\u002Fresolver';\n\nexport default { plugins: [Components({ resolvers: [ASkeletonResolver()] })] };\n",[14,177,178,183,198,212,218],{"__ignoreMap":53},[57,179,180],{"class":59,"line":60},[57,181,182],{"class":63},"\u002F\u002F vite.config.ts\n",[57,184,185,187,190,193,196],{"class":59,"line":67},[57,186,160],{"class":70},[57,188,189],{"class":88}," Components ",[57,191,192],{"class":70},"from",[57,194,195],{"class":92}," 'unplugin-vue-components\u002Fvite'",[57,197,121],{"class":88},[57,199,200,202,205,207,210],{"class":59,"line":85},[57,201,160],{"class":70},[57,203,204],{"class":88}," ASkeletonResolver ",[57,206,192],{"class":70},[57,208,209],{"class":92}," '@alikhalilll\u002Fa-skeleton\u002Fresolver'",[57,211,121],{"class":88},[57,213,214],{"class":59,"line":102},[57,215,217],{"emptyLinePlaceholder":216},true,"\n",[57,219,220,222,224,227,230,233,236,239,242,245],{"class":59,"line":115},[57,221,71],{"class":70},[57,223,74],{"class":70},[57,225,226],{"class":81}," { ",[57,228,229],{"class":88},"plugins: [",[57,231,232],{"class":77},"Components",[57,234,235],{"class":88},"({ resolvers: [",[57,237,238],{"class":77},"ASkeletonResolver",[57,240,241],{"class":88},"()] })] ",[57,243,244],{"class":81},"}",[57,246,121],{"class":88},[35,248,250],{"id":249},"quick-start","Quick start",[48,252,256],{"className":253,"code":254,"language":255,"meta":53,"style":53},"language-vue shiki shiki-themes github-light-default github-dark-default","\u003CASkeleton :loading=\"loading\">\n  \u003CSomePricingCard \u002F>\n\u003C\u002FASkeleton>\n","vue",[14,257,258,286,291],{"__ignoreMap":53},[57,259,260,263,266,269,273,276,279,281,283],{"class":59,"line":60},[57,261,262],{"class":88},"\u003C",[57,264,5],{"class":265},"sjgCt",[57,267,268],{"class":88}," :",[57,270,272],{"class":271},"sHrmB","loading",[57,274,275],{"class":88},"=",[57,277,278],{"class":88},"\"",[57,280,272],{"class":88},[57,282,278],{"class":88},[57,284,285],{"class":88},">\n",[57,287,288],{"class":59,"line":67},[57,289,290],{"class":88},"  \u003CSomePricingCard \u002F>\n",[57,292,293,296,298],{"class":59,"line":85},[57,294,295],{"class":88},"\u003C\u002F",[57,297,5],{"class":265},[57,299,285],{"class":88},[21,301,302,303,306,307,310],{},"That's the whole API for most cases — the demo at the top of this page is exactly that wrapper around a pricing card. ",[14,304,305],{},"mode=\"clone\""," is the default: the wrapper mounts the slot off-screen, snapshots every leaf's ",[14,308,309],{},"getComputedStyle()"," (per-edge borders, per-corner radii, background, shadow, opacity, filter, transform, typography), and replays the snapshot as positioned divs each carrying its captured inline style. Pixel-identical, client-side only.",[21,312,313,314,319],{},"Every layer underneath is also a public export — see the ",[315,316,318],"a",{"href":317},"#api-reference","API reference",".",[35,321,323],{"id":322},"why-this-component","Why this component",[325,326,327,335,358,364,373,379,396,410,419,427,437],"ul",{},[328,329,330,334],"li",{},[331,332,333],"strong",{},"Self-generating"," — wrap your real component and the engine derives the placeholder from the slot you're already rendering. No hand-drawn shimmer markup, no parallel \"loading state\" templates to maintain.",[328,336,337,340,341,343,344,346,347,350,351,354,355,357],{},[331,338,339],{},"Three rendering strategies, one wrapper"," — ",[14,342,305],{}," (default) snapshots ",[14,345,309],{}," for pixel-identical replay regardless of styling pipeline; ",[14,348,349],{},"mode=\"mirror\""," walks the vnode tree for SSR-safe placeholders; ",[14,352,353],{},"useSkeleton()"," + ",[14,356,130],{}," for structural \u002F normal-flow skeletons that reflow with their parent.",[328,359,360,363],{},[331,361,362],{},"Comprehensive surface capture"," — per-edge borders, per-corner radii, background colour + image, box-shadow, opacity, filter, transform, mix-blend-mode, typography — every visible CSS property carries through so the skeleton reads as the real element, not a generic shimmer.",[328,365,366,340,369,372],{},[331,367,368],{},"Per-line text geometry",[14,370,371],{},"Range.getClientRects()"," captures the exact rendered text rect of every line. Wrapped paragraphs, centred multi-line headings, and RTL last-line positions replay 1:1 — no heuristics.",[328,374,375,378],{},[331,376,377],{},"15 named variants"," — for the rare cases where auto-detect isn't the right fit (loading states without real content to wrap, very dense layouts, screens you'd rather author once).",[328,380,381,384,385,388,389,388,392,395],{},[331,382,383],{},"Bounded cost"," — every walker enforces ",[14,386,387],{},"maxDepth"," \u002F ",[14,390,391],{},"maxNodes",[14,393,394],{},"minSize",". A 5 000-row table will not lock up the main thread.",[328,397,398,401,402,405,406,409],{},[331,399,400],{},"Themeable via CSS variables"," — override ",[14,403,404],{},"--ak-skel-*"," on ",[14,407,408],{},":root",", a wrapper class, or inline.",[328,411,412,340,415,418],{},[331,413,414],{},"Empty-interpolation aware",[14,416,417],{},"\u003Ch3>{{ data?.name }}\u003C\u002Fh3>"," with null data still shimmers at the heading's natural rendered height.",[328,420,421,426],{},[331,422,423],{},[14,424,425],{},"prefers-reduced-motion"," disables animation automatically.",[328,428,429,432,433,436],{},[331,430,431],{},"SSR-safe (mirror)"," — no ",[14,434,435],{},"window"," access during the structural pass; hydration is clean.",[328,438,439,442],{},[331,440,441],{},"TypeScript-first"," — every prop, slot, type, and composable fully typed.",[35,444,446],{"id":445},"three-rendering-strategies","Three rendering strategies",[21,448,449],{},"Pick the one that matches how your styles get to the DOM:",[451,452,453,472],"table",{},[454,455,456],"thead",{},[457,458,459,463,466,469],"tr",{},[460,461,462],"th",{},"Strategy",[460,464,465],{},"Surface",[460,467,468],{},"How geometry is derived",[460,470,471],{},"Best when",[473,474,475,506,531],"tbody",{},[457,476,477,488,493,503],{},[478,479,480,483,484],"td",{},[331,481,482],{},"Clone"," ",[485,486,487],"em",{},"(default)",[478,489,490],{},[14,491,492],{},"\u003CASkeleton :loading>",[478,494,495,496,499,500,502],{},"Mounts the slot off-screen, snapshots every leaf's ",[331,497,498],{},"computed style"," via ",[14,501,309],{},", replays as positioned divs each carrying its captured inline CSS.",[478,504,505],{},"Styles come from any pipeline. Pixel-identical. Client-side only.",[457,507,508,513,518,528],{},[478,509,510],{},[331,511,512],{},"Mirror",[478,514,515],{},[14,516,517],{},"\u003CASkeleton mode=\"mirror\" :loading>",[478,519,520,521,524,525,319],{},"Walks the slot's ",[331,522,523],{},"vnode"," tree at render time. Preserves every tag and ",[14,526,527],{},"class",[478,529,530],{},"SSR-safe placeholders (no DOM read needed) or when the static class is enough.",[457,532,533,538,544,558],{},[478,534,535],{},[331,536,537],{},"Structural",[478,539,540,354,542],{},[14,541,353],{},[14,543,130],{},[478,545,546,547,550,551,554,555,319],{},"Walks the real ",[331,548,549],{},"DOM"," tree, preserves container layout, replaces leaves with ",[14,552,553],{},"\u003Cdiv class=\"a-skel\">"," in ",[331,556,557],{},"normal flow",[478,559,560],{},"The skeleton should reflow with its parent, or you're orchestrating cache + capture outside a wrapper instance.",[21,562,563],{},"All three share one cache module, one theming surface, and the same a11y baseline.",[43,565,567],{"id":566},"clone-the-default","Clone — the default",[21,569,570,571,574,575,578,579,581,582,585,586,588,589,592],{},"The slot mounts off-screen inside a ",[14,572,573],{},"visibility: hidden"," capture host. After mount, ",[14,576,577],{},"captureSnapshot()"," reads ",[14,580,309],{}," for every element — capturing the ",[331,583,584],{},"final"," background, per-edge border, per-corner radius, box-shadow, padding, opacity, filter, transform, typography — plus per-line text rects via ",[14,587,371],{},". ",[14,590,591],{},"\u003CASkeletonClone>"," then replays the snapshot as a tree of positioned divs each carrying its captured inline style.",[18,594,595],{},[21,596,597,600,601,604,605,607,608,611,612,614,615,619,620,624,625,319],{},[331,598,599],{},"Authoring tip."," Clone mode snapshots the slot ",[485,602,603],{},"as rendered during loading",". If the slot uses interpolations (",[14,606,417],{},") and your data isn't there yet, the snapshot captures empty text rects — the heading shimmers at its natural single line height, but a multi-line paragraph collapses to one bar. Either ensure data is present before the capture runs (start with ",[14,609,610],{},"loading: false",", let the snapshot land, then toggle), use ",[14,613,349],{}," (which doesn't measure — see ",[315,616,618],{"href":617},"#mirror-ssr-safe-vnode-walker","below","), or hand-craft the placeholder with ",[315,621,623],{"href":622},"#variant-primitives","variant primitives"," and ",[14,626,133],{},[48,628,630],{"className":253,"code":629,"language":255,"meta":53,"style":53},"\u003CASkeleton :loading=\"loading\">\n  \u003CSomeRichComponent \u002F>\n\u003C\u002FASkeleton>\n",[14,631,632,652,657],{"__ignoreMap":53},[57,633,634,636,638,640,642,644,646,648,650],{"class":59,"line":60},[57,635,262],{"class":88},[57,637,5],{"class":265},[57,639,268],{"class":88},[57,641,272],{"class":271},[57,643,275],{"class":88},[57,645,278],{"class":88},[57,647,272],{"class":88},[57,649,278],{"class":88},[57,651,285],{"class":88},[57,653,654],{"class":59,"line":67},[57,655,656],{"class":88},"  \u003CSomeRichComponent \u002F>\n",[57,658,659,661,663],{"class":59,"line":85},[57,660,295],{"class":88},[57,662,5],{"class":265},[57,664,285],{"class":88},[21,666,667],{},"The capture API is a public export — power-users can roll their own capture \u002F replay flow:",[48,669,671],{"className":50,"code":670,"language":52,"meta":53,"style":53},"import { captureSnapshot, type CaptureSnapshot } from '@alikhalilll\u002Fa-skeleton';\n\nconst snap: CaptureSnapshot = captureSnapshot(myRootEl, {\n  maxDepth: 12,\n  maxNodes: 800,\n  minSize: 4,\n});\n",[14,672,673,693,697,719,729,739,750],{"__ignoreMap":53},[57,674,675,677,680,683,686,688,691],{"class":59,"line":60},[57,676,160],{"class":70},[57,678,679],{"class":88}," { captureSnapshot, ",[57,681,682],{"class":70},"type",[57,684,685],{"class":88}," CaptureSnapshot } ",[57,687,192],{"class":70},[57,689,690],{"class":92}," '@alikhalilll\u002Fa-skeleton'",[57,692,121],{"class":88},[57,694,695],{"class":59,"line":67},[57,696,217],{"emptyLinePlaceholder":216},[57,698,699,702,705,707,710,713,716],{"class":59,"line":85},[57,700,701],{"class":70},"const",[57,703,704],{"class":271}," snap",[57,706,172],{"class":70},[57,708,709],{"class":81}," CaptureSnapshot",[57,711,712],{"class":70}," =",[57,714,715],{"class":77}," captureSnapshot",[57,717,718],{"class":88},"(myRootEl, {\n",[57,720,721,724,727],{"class":59,"line":102},[57,722,723],{"class":88},"  maxDepth: ",[57,725,726],{"class":271},"12",[57,728,99],{"class":88},[57,730,731,734,737],{"class":59,"line":115},[57,732,733],{"class":88},"  maxNodes: ",[57,735,736],{"class":271},"800",[57,738,99],{"class":88},[57,740,742,745,748],{"class":59,"line":741},6,[57,743,744],{"class":88},"  minSize: ",[57,746,747],{"class":271},"4",[57,749,99],{"class":88},[57,751,753],{"class":59,"line":752},7,[57,754,755],{"class":88},"});\n",[43,757,759],{"id":758},"mirror-ssr-safe-vnode-walker","Mirror — SSR-safe vnode walker",[761,762],"demo-skeleton-advanced",{},[21,764,765,766,768],{},"Switch to ",[14,767,349],{}," when you need the placeholder on the server, or when your styles already drive the surface correctly from class names alone:",[48,770,772],{"className":253,"code":771,"language":255,"meta":53,"style":53},"\u003CASkeleton mode=\"mirror\" :loading=\"loading\">\n  \u003CSomeRichComponent \u002F>\n\u003C\u002FASkeleton>\n",[14,773,774,802,806],{"__ignoreMap":53},[57,775,776,778,780,783,785,788,790,792,794,796,798,800],{"class":59,"line":60},[57,777,262],{"class":88},[57,779,5],{"class":265},[57,781,782],{"class":271}," mode",[57,784,275],{"class":88},[57,786,787],{"class":92},"\"mirror\"",[57,789,268],{"class":88},[57,791,272],{"class":271},[57,793,275],{"class":88},[57,795,278],{"class":88},[57,797,272],{"class":88},[57,799,278],{"class":88},[57,801,285],{"class":88},[57,803,804],{"class":59,"line":67},[57,805,656],{"class":88},[57,807,808,810,812],{"class":59,"line":85},[57,809,295],{"class":88},[57,811,5],{"class":265},[57,813,285],{"class":88},[21,815,816,819,820,822,823,826,827,830,831,834,835,127,838,127,841,844,845,848],{},[14,817,818],{},"buildStructuralSkeleton()"," walks the slot's vnode tree at render time, preserves every element with its real ",[14,821,527],{}," \u002F inline ",[14,824,825],{},"style",", and replaces text-bearing leaves with ",[14,828,829],{},"\u003Cspan class=\"a-skel-text-content\">"," (transparent text + skeleton background, exact rendered width via ",[14,832,833],{},"box-decoration-break: clone","). Atomic \u002F interactive tags (",[14,836,837],{},"\u003Cimg>",[14,839,840],{},"\u003Cbutton>",[14,842,843],{},"\u003Csvg>",") become ",[14,846,847],{},"\u003Cdiv class=\"a-skel-block\">"," sized from their original class.",[21,850,851,852,854],{},"Text-owner tags with empty content (",[14,853,417],{}," during loading) auto-shimmer at the heading's natural rendered height — the walker injects a placeholder text-content span so the bar's height tracks the tag's font-size \u002F line-height.",[856,857,859],"h4",{"id":858},"complex-hero","Complex hero",[861,862],"demo-skeleton-complex-hero",{},[21,864,865],{},"A landing-page hero — gradient background, decorative SVG circles, large heading with an accent span, paragraph, two CTA buttons, three icon + text feature rows, screenshot block. Every element is preserved with its real classes; only text, images, and icons get the shimmer treatment.",[21,867,868,869,872,873,876],{},"What ",[14,870,871],{},"walkDom"," captures per leaf to support cache-replay across reloads (mirror mode with ",[14,874,875],{},"persist: true","):",[451,878,879,892],{},[454,880,881],{},[457,882,883,886,889],{},[460,884,885],{},"Signal",[460,887,888],{},"Source",[460,890,891],{},"Effect",[473,893,894,908,928,945,959,971],{},[457,895,896,899,905],{},[478,897,898],{},"Background colour",[478,900,901,904],{},[14,902,903],{},"getComputedStyle().backgroundColor"," (skipped if transparent)",[478,906,907],{},"A white pricing card stays white. A coloured badge keeps its tint.",[457,909,910,913,925],{},[478,911,912],{},"Composite border",[478,914,915,354,918,354,921,924],{},[14,916,917],{},"borderTopWidth",[14,919,920],{},"borderTopStyle",[14,922,923],{},"borderTopColor"," (skipped if width \u003C 0.5)",[478,926,927],{},"Outlined buttons keep their ring.",[457,929,930,933,942],{},[478,931,932],{},"Box-shadow",[478,934,935,938,939],{},[14,936,937],{},"boxShadow"," verbatim if not ",[14,940,941],{},"none",[478,943,944],{},"Elevated cards keep their elevation.",[457,946,947,950,956],{},[478,948,949],{},"Opacity",[478,951,952,955],{},[14,953,954],{},"opacity"," when \u003C 1",[478,957,958],{},"Translucent chips replay as translucent.",[457,960,961,963,968],{},[478,962,368],{},[478,964,965],{},[14,966,967],{},"Range.selectNodeContents(el).getClientRects()",[478,969,970],{},"Each rendered line of text gets a bar at its exact left + width. Wrapped paragraphs, centred multi-line headings, and RTL last-line positions replay 1:1.",[457,972,973,976,981],{},[478,974,975],{},"Text-align (fallback)",[478,977,978],{},[14,979,980],{},"getComputedStyle().textAlign",[478,982,983,984,388,987,388,990,993],{},"When Range isn't usable, the synthesized last-line position honours ",[14,985,986],{},"center",[14,988,989],{},"right",[14,991,992],{},"end"," so RTL still looks right.",[43,995,997],{"id":996},"structural-normal-flow","Structural \u002F normal-flow",[999,1000],"demo-skeleton-use-skeleton",{},[21,1002,1003,1004,354,1006,172],{},"For cases where the wrapper isn't your unit of orchestration — caching shapes across instances, persisting between sessions, or wanting the skeleton to reflow with its parent — reach for ",[14,1005,353],{},[14,1007,130],{},[48,1009,1011],{"className":253,"code":1010,"language":255,"meta":53,"style":53},"\u003Cscript setup lang=\"ts\">\nimport { computed, ref } from 'vue';\nimport { useSkeleton } from '@alikhalilll\u002Fa-skeleton';\n\nconst props = defineProps\u003C{ userId: string }>();\nconst user = ref(null);\nconst loading = computed(() => user.value === null);\nconst containerRef = ref\u003CHTMLElement | null>(null);\n\nconst { shape, clear } = useSkeleton({\n  cacheKey: `user-card:${props.userId}`,\n  \u002F\u002F While loading, target is null → no capture. When real content mounts,\n  \u002F\u002F target returns the wrapper → ResizeObserver + capture.\n  target: () => (loading.value ? null : containerRef.value),\n  persist: true,\n});\n\nfetchUser(props.userId).then((u) => (user.value = u));\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv ref=\"containerRef\">\n    \u003CASkeletonLayer v-if=\"loading && shape\" :shape=\"shape\" \u002F>\n    \u003CColdStartFallback v-else-if=\"loading\" \u002F>\n    \u003CUserCard v-else :data=\"user\" \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[14,1012,1013,1033,1047,1060,1064,1090,1111,1140,1169,1174,1199,1220,1226,1232,1256,1267,1272,1277,1308,1317,1322,1332,1350,1378,1396,1417,1427],{"__ignoreMap":53},[57,1014,1015,1017,1020,1023,1026,1028,1031],{"class":59,"line":60},[57,1016,262],{"class":88},[57,1018,1019],{"class":265},"script",[57,1021,1022],{"class":271}," setup",[57,1024,1025],{"class":271}," lang",[57,1027,275],{"class":88},[57,1029,1030],{"class":92},"\"ts\"",[57,1032,285],{"class":88},[57,1034,1035,1037,1040,1042,1045],{"class":59,"line":67},[57,1036,160],{"class":70},[57,1038,1039],{"class":88}," { computed, ref } ",[57,1041,192],{"class":70},[57,1043,1044],{"class":92}," 'vue'",[57,1046,121],{"class":88},[57,1048,1049,1051,1054,1056,1058],{"class":59,"line":85},[57,1050,160],{"class":70},[57,1052,1053],{"class":88}," { useSkeleton } ",[57,1055,192],{"class":70},[57,1057,690],{"class":92},[57,1059,121],{"class":88},[57,1061,1062],{"class":59,"line":102},[57,1063,217],{"emptyLinePlaceholder":216},[57,1065,1066,1068,1071,1073,1076,1079,1082,1084,1087],{"class":59,"line":115},[57,1067,701],{"class":70},[57,1069,1070],{"class":271}," props",[57,1072,712],{"class":70},[57,1074,1075],{"class":77}," defineProps",[57,1077,1078],{"class":88},"\u003C{ ",[57,1080,1081],{"class":81},"userId",[57,1083,172],{"class":70},[57,1085,1086],{"class":271}," string",[57,1088,1089],{"class":88}," }>();\n",[57,1091,1092,1094,1097,1099,1102,1105,1108],{"class":59,"line":741},[57,1093,701],{"class":70},[57,1095,1096],{"class":271}," user",[57,1098,712],{"class":70},[57,1100,1101],{"class":77}," ref",[57,1103,1104],{"class":88},"(",[57,1106,1107],{"class":271},"null",[57,1109,1110],{"class":88},");\n",[57,1112,1113,1115,1118,1120,1123,1126,1129,1132,1135,1138],{"class":59,"line":752},[57,1114,701],{"class":70},[57,1116,1117],{"class":271}," loading",[57,1119,712],{"class":70},[57,1121,1122],{"class":77}," computed",[57,1124,1125],{"class":88},"(() ",[57,1127,1128],{"class":70},"=>",[57,1130,1131],{"class":88}," user.value ",[57,1133,1134],{"class":70},"===",[57,1136,1137],{"class":271}," null",[57,1139,1110],{"class":88},[57,1141,1143,1145,1148,1150,1152,1154,1157,1160,1162,1165,1167],{"class":59,"line":1142},8,[57,1144,701],{"class":70},[57,1146,1147],{"class":271}," containerRef",[57,1149,712],{"class":70},[57,1151,1101],{"class":77},[57,1153,262],{"class":88},[57,1155,1156],{"class":81},"HTMLElement",[57,1158,1159],{"class":70}," |",[57,1161,1137],{"class":271},[57,1163,1164],{"class":88},">(",[57,1166,1107],{"class":271},[57,1168,1110],{"class":88},[57,1170,1172],{"class":59,"line":1171},9,[57,1173,217],{"emptyLinePlaceholder":216},[57,1175,1177,1179,1181,1184,1186,1189,1192,1194,1197],{"class":59,"line":1176},10,[57,1178,701],{"class":70},[57,1180,226],{"class":88},[57,1182,1183],{"class":271},"shape",[57,1185,127],{"class":88},[57,1187,1188],{"class":271},"clear",[57,1190,1191],{"class":88}," } ",[57,1193,275],{"class":70},[57,1195,1196],{"class":77}," useSkeleton",[57,1198,82],{"class":88},[57,1200,1202,1205,1208,1211,1213,1215,1218],{"class":59,"line":1201},11,[57,1203,1204],{"class":88},"  cacheKey: ",[57,1206,1207],{"class":92},"`user-card:${",[57,1209,1210],{"class":88},"props",[57,1212,319],{"class":92},[57,1214,1081],{"class":88},[57,1216,1217],{"class":92},"}`",[57,1219,99],{"class":88},[57,1221,1223],{"class":59,"line":1222},12,[57,1224,1225],{"class":63},"  \u002F\u002F While loading, target is null → no capture. When real content mounts,\n",[57,1227,1229],{"class":59,"line":1228},13,[57,1230,1231],{"class":63},"  \u002F\u002F target returns the wrapper → ResizeObserver + capture.\n",[57,1233,1235,1238,1241,1243,1246,1249,1251,1253],{"class":59,"line":1234},14,[57,1236,1237],{"class":77},"  target",[57,1239,1240],{"class":88},": () ",[57,1242,1128],{"class":70},[57,1244,1245],{"class":88}," (loading.value ",[57,1247,1248],{"class":70},"?",[57,1250,1137],{"class":271},[57,1252,268],{"class":70},[57,1254,1255],{"class":88}," containerRef.value),\n",[57,1257,1259,1262,1265],{"class":59,"line":1258},15,[57,1260,1261],{"class":88},"  persist: ",[57,1263,1264],{"class":271},"true",[57,1266,99],{"class":88},[57,1268,1270],{"class":59,"line":1269},16,[57,1271,755],{"class":88},[57,1273,1275],{"class":59,"line":1274},17,[57,1276,217],{"emptyLinePlaceholder":216},[57,1278,1280,1283,1286,1289,1292,1295,1298,1300,1303,1305],{"class":59,"line":1279},18,[57,1281,1282],{"class":77},"fetchUser",[57,1284,1285],{"class":88},"(props.userId).",[57,1287,1288],{"class":77},"then",[57,1290,1291],{"class":88},"((",[57,1293,1294],{"class":81},"u",[57,1296,1297],{"class":88},") ",[57,1299,1128],{"class":70},[57,1301,1302],{"class":88}," (user.value ",[57,1304,275],{"class":70},[57,1306,1307],{"class":88}," u));\n",[57,1309,1311,1313,1315],{"class":59,"line":1310},19,[57,1312,295],{"class":88},[57,1314,1019],{"class":265},[57,1316,285],{"class":88},[57,1318,1320],{"class":59,"line":1319},20,[57,1321,217],{"emptyLinePlaceholder":216},[57,1323,1325,1327,1330],{"class":59,"line":1324},21,[57,1326,262],{"class":88},[57,1328,1329],{"class":265},"template",[57,1331,285],{"class":88},[57,1333,1335,1338,1341,1343,1345,1348],{"class":59,"line":1334},22,[57,1336,1337],{"class":88},"  \u003C",[57,1339,1340],{"class":265},"div",[57,1342,1101],{"class":271},[57,1344,275],{"class":88},[57,1346,1347],{"class":92},"\"containerRef\"",[57,1349,285],{"class":88},[57,1351,1353,1356,1359,1362,1364,1367,1370,1372,1375],{"class":59,"line":1352},23,[57,1354,1355],{"class":88},"    \u003C",[57,1357,1358],{"class":265},"ASkeletonLayer",[57,1360,1361],{"class":271}," v-if",[57,1363,275],{"class":88},[57,1365,1366],{"class":92},"\"loading && shape\"",[57,1368,1369],{"class":271}," :shape",[57,1371,275],{"class":88},[57,1373,1374],{"class":92},"\"shape\"",[57,1376,1377],{"class":88}," \u002F>\n",[57,1379,1381,1383,1386,1389,1391,1394],{"class":59,"line":1380},24,[57,1382,1355],{"class":88},[57,1384,1385],{"class":265},"ColdStartFallback",[57,1387,1388],{"class":271}," v-else-if",[57,1390,275],{"class":88},[57,1392,1393],{"class":92},"\"loading\"",[57,1395,1377],{"class":88},[57,1397,1399,1401,1404,1407,1410,1412,1415],{"class":59,"line":1398},25,[57,1400,1355],{"class":88},[57,1402,1403],{"class":265},"UserCard",[57,1405,1406],{"class":271}," v-else",[57,1408,1409],{"class":271}," :data",[57,1411,275],{"class":88},[57,1413,1414],{"class":92},"\"user\"",[57,1416,1377],{"class":88},[57,1418,1420,1423,1425],{"class":59,"line":1419},26,[57,1421,1422],{"class":88},"  \u003C\u002F",[57,1424,1340],{"class":265},[57,1426,285],{"class":88},[57,1428,1430,1432,1434],{"class":59,"line":1429},27,[57,1431,295],{"class":88},[57,1433,1329],{"class":265},[57,1435,285],{"class":88},[21,1437,1438,1441,1442,1444,1445,127,1448,127,1451,127,1454,127,1457,127,1460,1463,1464,388,1467,1470,1471,1473,1474,1476],{},[14,1439,1440],{},"walkStructural()"," produces a frozen tree where containers preserve their tag, original ",[14,1443,527],{},", and captured layout CSS (",[14,1446,1447],{},"display",[14,1449,1450],{},"flex-*",[14,1452,1453],{},"gap",[14,1455,1456],{},"padding",[14,1458,1459],{},"grid-*",[14,1461,1462],{},"box-sizing","), and leaves carry inline ",[14,1465,1466],{},"width",[14,1468,1469],{},"height"," + visual signals. ",[14,1472,130],{}," replays the tree in ",[331,1475,557],{}," — the skeleton lives inside its parent's layout instead of overlaying it with absolute coordinates, so it reflows on viewport resize and never collapses to a flat positioned grid.",[21,1478,1479],{},"Given real markup like:",[48,1481,1485],{"className":1482,"code":1483,"language":1484,"meta":53,"style":53},"language-html shiki shiki-themes github-light-default github-dark-default","\u003Cdiv class=\"flex flex-col gap-4 p-4\">\n  \u003Ch3>…\u003C\u002Fh3>\n  \u003Cp>…\u003C\u002Fp>\n  \u003Cbutton>…\u003C\u002Fbutton>\n\u003C\u002Fdiv>\n","html",[14,1486,1487,1503,1516,1528,1541],{"__ignoreMap":53},[57,1488,1489,1491,1493,1496,1498,1501],{"class":59,"line":60},[57,1490,262],{"class":88},[57,1492,1340],{"class":265},[57,1494,1495],{"class":271}," class",[57,1497,275],{"class":88},[57,1499,1500],{"class":92},"\"flex flex-col gap-4 p-4\"",[57,1502,285],{"class":88},[57,1504,1505,1507,1509,1512,1514],{"class":59,"line":67},[57,1506,1337],{"class":88},[57,1508,43],{"class":265},[57,1510,1511],{"class":88},">…\u003C\u002F",[57,1513,43],{"class":265},[57,1515,285],{"class":88},[57,1517,1518,1520,1522,1524,1526],{"class":59,"line":85},[57,1519,1337],{"class":88},[57,1521,21],{"class":265},[57,1523,1511],{"class":88},[57,1525,21],{"class":265},[57,1527,285],{"class":88},[57,1529,1530,1532,1535,1537,1539],{"class":59,"line":102},[57,1531,1337],{"class":88},[57,1533,1534],{"class":265},"button",[57,1536,1511],{"class":88},[57,1538,1534],{"class":265},[57,1540,285],{"class":88},[57,1542,1543,1545,1547],{"class":59,"line":115},[57,1544,295],{"class":88},[57,1546,1340],{"class":265},[57,1548,285],{"class":88},[21,1550,1551],{},"…the layer replays as:",[48,1553,1555],{"className":1482,"code":1554,"language":1484,"meta":53,"style":53},"\u003Cdiv\n  class=\"flex flex-col gap-4 p-4\"\n  style=\"display: flex; flex-direction: column; gap: 16px; padding: 16px; box-sizing: border-box\"\n>\n  \u003Cdiv class=\"a-skel\" style=\"width: 200px; height: 24px; …\" \u002F>\n  \u003Cdiv class=\"a-skel\" style=\"width: 280px; height: 16px; …\" \u002F>\n  \u003Cdiv class=\"a-skel\" style=\"width: 120px; height: 36px; …\" \u002F>\n\u003C\u002Fdiv>\n",[14,1556,1557,1564,1574,1584,1588,1615,1638,1661],{"__ignoreMap":53},[57,1558,1559,1561],{"class":59,"line":60},[57,1560,262],{"class":88},[57,1562,1563],{"class":265},"div\n",[57,1565,1566,1569,1571],{"class":59,"line":67},[57,1567,1568],{"class":271},"  class",[57,1570,275],{"class":88},[57,1572,1573],{"class":92},"\"flex flex-col gap-4 p-4\"\n",[57,1575,1576,1579,1581],{"class":59,"line":85},[57,1577,1578],{"class":271},"  style",[57,1580,275],{"class":88},[57,1582,1583],{"class":92},"\"display: flex; flex-direction: column; gap: 16px; padding: 16px; box-sizing: border-box\"\n",[57,1585,1586],{"class":59,"line":102},[57,1587,285],{"class":88},[57,1589,1590,1592,1594,1596,1598,1601,1604,1606,1609,1613],{"class":59,"line":115},[57,1591,1337],{"class":88},[57,1593,1340],{"class":265},[57,1595,1495],{"class":271},[57,1597,275],{"class":88},[57,1599,1600],{"class":92},"\"a-skel\"",[57,1602,1603],{"class":271}," style",[57,1605,275],{"class":88},[57,1607,1608],{"class":92},"\"width: 200px; height: 24px; …\"",[57,1610,1612],{"class":1611},"sZcZs"," \u002F",[57,1614,285],{"class":88},[57,1616,1617,1619,1621,1623,1625,1627,1629,1631,1634,1636],{"class":59,"line":741},[57,1618,1337],{"class":88},[57,1620,1340],{"class":265},[57,1622,1495],{"class":271},[57,1624,275],{"class":88},[57,1626,1600],{"class":92},[57,1628,1603],{"class":271},[57,1630,275],{"class":88},[57,1632,1633],{"class":92},"\"width: 280px; height: 16px; …\"",[57,1635,1612],{"class":1611},[57,1637,285],{"class":88},[57,1639,1640,1642,1644,1646,1648,1650,1652,1654,1657,1659],{"class":59,"line":752},[57,1641,1337],{"class":88},[57,1643,1340],{"class":265},[57,1645,1495],{"class":271},[57,1647,275],{"class":88},[57,1649,1600],{"class":92},[57,1651,1603],{"class":271},[57,1653,275],{"class":88},[57,1655,1656],{"class":92},"\"width: 120px; height: 36px; …\"",[57,1658,1612],{"class":1611},[57,1660,285],{"class":88},[57,1662,1663,1665,1667],{"class":59,"line":1142},[57,1664,295],{"class":88},[57,1666,1340],{"class":265},[57,1668,285],{"class":88},[21,1670,1671,1672,1675,1676,1679,1680,1683,1684,1687,1688,1691],{},"The structural cache uses its own ",[14,1673,1674],{},"localStorage"," namespace (",[14,1677,1678],{},"a-skeleton:s:"," prefix, schema ",[14,1681,1682],{},"v: 3","). Stale flat-shape entries (",[14,1685,1686],{},"v: 2",") and structural-shape entries cannot collide on the same ",[14,1689,1690],{},"cacheKey","; mismatched versions auto-purge on read.",[35,1693,1695],{"id":1694},"authoring-rule","Authoring rule",[1697,1698],"demo-skeleton-basic",{},[21,1700,1701,1702,1705,1706,1709],{},"Keep ",[331,1703,1704],{},"tags"," unconditional; gate per-leaf ",[331,1707,1708],{},"content"," via interpolation. Two safe patterns:",[1711,1712,1713,1734],"ol",{},[328,1714,1715,1718,1719,1722,1723,1725,1726,1729,1730,1733],{},[331,1716,1717],{},"Always render the same tag",", gate its content. ",[14,1720,1721],{},"\u003Cimg :src=\"user?.avatar\">"," renders an ",[14,1724,837],{}," in both states (walker treats it as atomic → sized shimmer block). ",[14,1727,1728],{},"\u003Ch3>{{ user?.name }}\u003C\u002Fh3>"," renders an empty ",[14,1731,1732],{},"\u003Ch3>"," during loading and the walker auto-injects a placeholder shimmer bar at the heading's natural width.",[328,1735,1736,1739,1740,388,1743,1746,1747,1752,1753,1755],{},[331,1737,1738],{},"Use explicit primitives"," with ",[14,1741,1742],{},"v-if",[14,1744,1745],{},"v-else"," (see ",[315,1748,1750],{"href":1749},"#askeletonblock",[14,1751,133],{}," and the ",[315,1754,623],{"href":622},") when the loading and loaded states genuinely have different markup.",[21,1757,1758,1759,1762,1763,1766],{},"The pattern to ",[331,1760,1761],{},"avoid"," is swapping whole branches (",[14,1764,1765],{},"\u003Cimg v-if>\u003Cdiv v-else>","). The walker sees one shape now and a different shape later — the skeleton can't predict the placeholder geometry.",[48,1768,1770],{"className":253,"code":1769,"language":255,"meta":53,"style":53},"\u003CASkeleton :loading=\"loading\">\n  \u003Cdiv class=\"flex items-start gap-4 p-4\">\n    \u003Cimg\n      :src=\"user?.avatar\"\n      :alt=\"user?.name ?? ''\"\n      class=\"size-16 shrink-0 rounded-full object-cover\"\n    \u002F>\n    \u003Cdiv class=\"flex-1\">\n      \u003Ch3 class=\"text-base font-semibold\">{{ user?.name }}\u003C\u002Fh3>\n      \u003Cp class=\"text-sm leading-relaxed\">{{ user?.bio }}\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002FASkeleton>\n",[14,1771,1772,1792,1797,1802,1807,1812,1817,1822,1827,1832,1837,1842,1847],{"__ignoreMap":53},[57,1773,1774,1776,1778,1780,1782,1784,1786,1788,1790],{"class":59,"line":60},[57,1775,262],{"class":88},[57,1777,5],{"class":265},[57,1779,268],{"class":88},[57,1781,272],{"class":271},[57,1783,275],{"class":88},[57,1785,278],{"class":88},[57,1787,272],{"class":88},[57,1789,278],{"class":88},[57,1791,285],{"class":88},[57,1793,1794],{"class":59,"line":67},[57,1795,1796],{"class":88},"  \u003Cdiv class=\"flex items-start gap-4 p-4\">\n",[57,1798,1799],{"class":59,"line":85},[57,1800,1801],{"class":88},"    \u003Cimg\n",[57,1803,1804],{"class":59,"line":102},[57,1805,1806],{"class":88},"      :src=\"user?.avatar\"\n",[57,1808,1809],{"class":59,"line":115},[57,1810,1811],{"class":88},"      :alt=\"user?.name ?? ''\"\n",[57,1813,1814],{"class":59,"line":741},[57,1815,1816],{"class":88},"      class=\"size-16 shrink-0 rounded-full object-cover\"\n",[57,1818,1819],{"class":59,"line":752},[57,1820,1821],{"class":88},"    \u002F>\n",[57,1823,1824],{"class":59,"line":1142},[57,1825,1826],{"class":88},"    \u003Cdiv class=\"flex-1\">\n",[57,1828,1829],{"class":59,"line":1171},[57,1830,1831],{"class":88},"      \u003Ch3 class=\"text-base font-semibold\">{{ user?.name }}\u003C\u002Fh3>\n",[57,1833,1834],{"class":59,"line":1176},[57,1835,1836],{"class":88},"      \u003Cp class=\"text-sm leading-relaxed\">{{ user?.bio }}\u003C\u002Fp>\n",[57,1838,1839],{"class":59,"line":1201},[57,1840,1841],{"class":88},"    \u003C\u002Fdiv>\n",[57,1843,1844],{"class":59,"line":1222},[57,1845,1846],{"class":88},"  \u003C\u002Fdiv>\n",[57,1848,1849,1851,1853],{"class":59,"line":1228},[57,1850,295],{"class":88},[57,1852,5],{"class":265},[57,1854,285],{"class":88},[18,1856,1857],{},[21,1858,1859,1862,1863,1865,1866,1868,1869,1872,1873,1876,1877,1879],{},[331,1860,1861],{},"Sequencing matters in clone mode."," The first snapshot is taken when the slot mounts. If ",[14,1864,272],{}," is ",[14,1867,1264],{}," at that point and your slot uses ",[14,1870,1871],{},"{{ user?.bio }}"," style interpolations, the captured geometry reflects the ",[331,1874,1875],{},"empty"," strings — a multi-line bio shows up as a single bar because that's literally all there is to measure. The demo above starts with the real profile already loaded so the snapshot captures the multi-line paragraph; toggling \"Show skeleton\" then replays that captured layout. For production code, either preload your data, render with a placeholder that hides under the real value, or use ",[14,1878,349],{}," (where the vnode walker emits per-tag placeholders without needing a measurement).",[35,1881,1883,1884,127,1887,127,1890],{"id":1882},"lists-grids-v-for-prototype-repeat","Lists & grids — ",[14,1885,1886],{},"v-for",[14,1888,1889],{},"#prototype",[14,1891,1892],{},"repeat",[21,1894,1895],{},"Lists of cards are the most common loading state, and two details make them work cleanly.",[21,1897,1898,1904,1905,1908,1909,1911,1912,1914,1915,1918,1919,1921,1922,1924],{},[331,1899,1900,1901,1903],{},"1. Always supply a ",[14,1902,1889],{}," when the default slot iterates."," The component does ",[331,1906,1907],{},"not"," auto-detect ",[14,1910,1886],{}," and pick the first sibling — heuristics over keyed siblings misfire on legitimate-but-similar markup, and you're the only one who knows authoritatively which element is the prototype. The ",[14,1913,1889],{}," slot gives the skeleton an explicit single-instance template to measure; it takes precedence over the default slot during loading and is never rendered when ",[14,1916,1917],{},"loading=false",". Without ",[14,1920,1889],{},", the default slot is used as the shape source verbatim — so an empty ",[14,1923,1886],{}," during the initial load produces a blank skeleton.",[21,1926,1927,1934,1935,127,1938,1941,1942,1945],{},[331,1928,1929,1930,1933],{},"2. ",[14,1931,1932],{},":repeat=\"N\""," × the prototype fills the grid."," The wrapper carries your layout class (",[14,1936,1937],{},"grid grid-cols-3 gap-4",[14,1939,1940],{},"flex flex-wrap",", …), and the prototype copies become direct grid\u002Fflex children. Set ",[14,1943,1944],{},":repeat"," to the expected item count so the loading state occupies the same visual area as the loaded state — no layout shift when data arrives.",[21,1947,1948],{},"The user's failing case (cards-with-switch-and-buttons in a responsive grid) now reads exactly like the loaded code:",[48,1950,1952],{"className":253,"code":1951,"language":255,"meta":53,"style":53},"\u003CASkeleton\n  :loading=\"loading\"\n  :repeat=\"6\"\n  class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4\"\n>\n  \u003C!-- Prototype: one card. Used as the skeleton shape while loading. -->\n  \u003Ctemplate #prototype>\n    \u003Carticle class=\"p-5 rounded-lg bg-white flex flex-col gap-3 ring-1 ring-gray-200\">\n      \u003Cdiv class=\"flex items-center justify-between\">\n        \u003Cp class=\"text-sm text-gray-500\">{{ t('admin.users.roles.list.users_count', { n: 0 }) }}\u003C\u002Fp>\n        \u003CUiSwitch :model-value=\"false\" \u002F>\n      \u003C\u002Fdiv>\n      \u003Ch3 class=\"text-lg text-gray-900 font-bold\">{{ t('admin.users.roles.placeholder') }}\u003C\u002Fh3>\n      \u003Cdiv class=\"pt-2 flex gap-2 items-center justify-end\">\n        \u003CUiButton type=\"button\" variant=\"outline\">{{ t('admin.users.roles.actions.view_users') }}\u003C\u002FUiButton>\n        \u003CUiButton type=\"button\" variant=\"ghost\">{{ t('admin.users.roles.actions.edit') }}\u003C\u002FUiButton>\n      \u003C\u002Fdiv>\n    \u003C\u002Farticle>\n  \u003C\u002Ftemplate>\n\n  \u003C!-- Real content. Rendered when loading=false. -->\n  \u003Carticle\n    v-for=\"role in roles\"\n    :key=\"role?.id\"\n    class=\"p-5 rounded-lg bg-white flex flex-col gap-3 ring-1 ring-gray-200\"\n  >\n    \u003Cdiv class=\"flex items-center justify-between\">\n      \u003Cp class=\"text-sm text-gray-500\">{{ t('admin.users.roles.list.users_count', { n: role.users_count ?? 0 }) }}\u003C\u002Fp>\n      \u003CUiSwitch\n        :model-value=\"Boolean(role.is_active)\"\n        @update:model-value=\"(v) => toggleStatus(role, v)\"\n      \u002F>\n    \u003C\u002Fdiv>\n    \u003Ch3 class=\"text-lg text-gray-900 font-bold\">{{ role.name }}\u003C\u002Fh3>\n    \u003Cdiv class=\"pt-2 flex gap-2 items-center justify-end\">\n      \u003CUiButton type=\"button\" variant=\"outline\" @click=\"goToRoleUsers(role)\">\n        {{ t('admin.users.roles.actions.view_users') }}\n      \u003C\u002FUiButton>\n      \u003CUiButton type=\"button\" variant=\"ghost\" @click=\"goToEdit(role)\">\n        \u003Ctemplate #suffix>\u003CIcon name=\"lucide:pencil\" class=\"size-4\" \u002F>\u003C\u002Ftemplate>\n        {{ t('admin.users.roles.actions.edit') }}\n      \u003C\u002FUiButton>\n    \u003C\u002Fdiv>\n  \u003C\u002Farticle>\n\u003C\u002FASkeleton>\n",[14,1953,1954,1961,1977,1992,2001,2005,2010,2015,2020,2025,2030,2035,2040,2045,2050,2055,2060,2064,2069,2074,2078,2083,2088,2093,2098,2103,2108,2113,2119,2125,2131,2137,2143,2148,2154,2160,2166,2172,2178,2184,2190,2196,2201,2206,2212],{"__ignoreMap":53},[57,1955,1956,1958],{"class":59,"line":60},[57,1957,262],{"class":88},[57,1959,1960],{"class":265},"ASkeleton\n",[57,1962,1963,1966,1968,1970,1972,1974],{"class":59,"line":67},[57,1964,1965],{"class":88},"  :",[57,1967,272],{"class":271},[57,1969,275],{"class":88},[57,1971,278],{"class":88},[57,1973,272],{"class":88},[57,1975,1976],{"class":88},"\"\n",[57,1978,1979,1981,1983,1985,1987,1990],{"class":59,"line":85},[57,1980,1965],{"class":88},[57,1982,1892],{"class":271},[57,1984,275],{"class":88},[57,1986,278],{"class":88},[57,1988,1989],{"class":271},"6",[57,1991,1976],{"class":88},[57,1993,1994,1996,1998],{"class":59,"line":102},[57,1995,1568],{"class":271},[57,1997,275],{"class":88},[57,1999,2000],{"class":92},"\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4\"\n",[57,2002,2003],{"class":59,"line":115},[57,2004,285],{"class":88},[57,2006,2007],{"class":59,"line":741},[57,2008,2009],{"class":88},"  \u003C!-- Prototype: one card. Used as the skeleton shape while loading. -->\n",[57,2011,2012],{"class":59,"line":752},[57,2013,2014],{"class":88},"  \u003Ctemplate #prototype>\n",[57,2016,2017],{"class":59,"line":1142},[57,2018,2019],{"class":88},"    \u003Carticle class=\"p-5 rounded-lg bg-white flex flex-col gap-3 ring-1 ring-gray-200\">\n",[57,2021,2022],{"class":59,"line":1171},[57,2023,2024],{"class":88},"      \u003Cdiv class=\"flex items-center justify-between\">\n",[57,2026,2027],{"class":59,"line":1176},[57,2028,2029],{"class":88},"        \u003Cp class=\"text-sm text-gray-500\">{{ t('admin.users.roles.list.users_count', { n: 0 }) }}\u003C\u002Fp>\n",[57,2031,2032],{"class":59,"line":1201},[57,2033,2034],{"class":88},"        \u003CUiSwitch :model-value=\"false\" \u002F>\n",[57,2036,2037],{"class":59,"line":1222},[57,2038,2039],{"class":88},"      \u003C\u002Fdiv>\n",[57,2041,2042],{"class":59,"line":1228},[57,2043,2044],{"class":88},"      \u003Ch3 class=\"text-lg text-gray-900 font-bold\">{{ t('admin.users.roles.placeholder') }}\u003C\u002Fh3>\n",[57,2046,2047],{"class":59,"line":1234},[57,2048,2049],{"class":88},"      \u003Cdiv class=\"pt-2 flex gap-2 items-center justify-end\">\n",[57,2051,2052],{"class":59,"line":1258},[57,2053,2054],{"class":88},"        \u003CUiButton type=\"button\" variant=\"outline\">{{ t('admin.users.roles.actions.view_users') }}\u003C\u002FUiButton>\n",[57,2056,2057],{"class":59,"line":1269},[57,2058,2059],{"class":88},"        \u003CUiButton type=\"button\" variant=\"ghost\">{{ t('admin.users.roles.actions.edit') }}\u003C\u002FUiButton>\n",[57,2061,2062],{"class":59,"line":1274},[57,2063,2039],{"class":88},[57,2065,2066],{"class":59,"line":1279},[57,2067,2068],{"class":88},"    \u003C\u002Farticle>\n",[57,2070,2071],{"class":59,"line":1310},[57,2072,2073],{"class":88},"  \u003C\u002Ftemplate>\n",[57,2075,2076],{"class":59,"line":1319},[57,2077,217],{"emptyLinePlaceholder":216},[57,2079,2080],{"class":59,"line":1324},[57,2081,2082],{"class":88},"  \u003C!-- Real content. Rendered when loading=false. -->\n",[57,2084,2085],{"class":59,"line":1334},[57,2086,2087],{"class":88},"  \u003Carticle\n",[57,2089,2090],{"class":59,"line":1352},[57,2091,2092],{"class":88},"    v-for=\"role in roles\"\n",[57,2094,2095],{"class":59,"line":1380},[57,2096,2097],{"class":88},"    :key=\"role?.id\"\n",[57,2099,2100],{"class":59,"line":1398},[57,2101,2102],{"class":88},"    class=\"p-5 rounded-lg bg-white flex flex-col gap-3 ring-1 ring-gray-200\"\n",[57,2104,2105],{"class":59,"line":1419},[57,2106,2107],{"class":88},"  >\n",[57,2109,2110],{"class":59,"line":1429},[57,2111,2112],{"class":88},"    \u003Cdiv class=\"flex items-center justify-between\">\n",[57,2114,2116],{"class":59,"line":2115},28,[57,2117,2118],{"class":88},"      \u003Cp class=\"text-sm text-gray-500\">{{ t('admin.users.roles.list.users_count', { n: role.users_count ?? 0 }) }}\u003C\u002Fp>\n",[57,2120,2122],{"class":59,"line":2121},29,[57,2123,2124],{"class":88},"      \u003CUiSwitch\n",[57,2126,2128],{"class":59,"line":2127},30,[57,2129,2130],{"class":88},"        :model-value=\"Boolean(role.is_active)\"\n",[57,2132,2134],{"class":59,"line":2133},31,[57,2135,2136],{"class":88},"        @update:model-value=\"(v) => toggleStatus(role, v)\"\n",[57,2138,2140],{"class":59,"line":2139},32,[57,2141,2142],{"class":88},"      \u002F>\n",[57,2144,2146],{"class":59,"line":2145},33,[57,2147,1841],{"class":88},[57,2149,2151],{"class":59,"line":2150},34,[57,2152,2153],{"class":88},"    \u003Ch3 class=\"text-lg text-gray-900 font-bold\">{{ role.name }}\u003C\u002Fh3>\n",[57,2155,2157],{"class":59,"line":2156},35,[57,2158,2159],{"class":88},"    \u003Cdiv class=\"pt-2 flex gap-2 items-center justify-end\">\n",[57,2161,2163],{"class":59,"line":2162},36,[57,2164,2165],{"class":88},"      \u003CUiButton type=\"button\" variant=\"outline\" @click=\"goToRoleUsers(role)\">\n",[57,2167,2169],{"class":59,"line":2168},37,[57,2170,2171],{"class":88},"        {{ t('admin.users.roles.actions.view_users') }}\n",[57,2173,2175],{"class":59,"line":2174},38,[57,2176,2177],{"class":88},"      \u003C\u002FUiButton>\n",[57,2179,2181],{"class":59,"line":2180},39,[57,2182,2183],{"class":88},"      \u003CUiButton type=\"button\" variant=\"ghost\" @click=\"goToEdit(role)\">\n",[57,2185,2187],{"class":59,"line":2186},40,[57,2188,2189],{"class":88},"        \u003Ctemplate #suffix>\u003CIcon name=\"lucide:pencil\" class=\"size-4\" \u002F>\u003C\u002Ftemplate>\n",[57,2191,2193],{"class":59,"line":2192},41,[57,2194,2195],{"class":88},"        {{ t('admin.users.roles.actions.edit') }}\n",[57,2197,2199],{"class":59,"line":2198},42,[57,2200,2177],{"class":88},[57,2202,2204],{"class":59,"line":2203},43,[57,2205,1841],{"class":88},[57,2207,2209],{"class":59,"line":2208},44,[57,2210,2211],{"class":88},"  \u003C\u002Farticle>\n",[57,2213,2215,2217,2219],{"class":59,"line":2214},45,[57,2216,295],{"class":88},[57,2218,5],{"class":265},[57,2220,285],{"class":88},[21,2222,2223],{},"What this gets you:",[325,2225,2226,2243,2256,2276,2300],{},[328,2227,2228,2231,2232,2235,2236,2238,2239,2242],{},[331,2229,2230],{},"No wrapper churn."," The ",[14,2233,2234],{},"class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4\""," lives on ",[14,2237,126],{}," itself, so the grid container is the same DOM element in both states. The ",[14,2240,2241],{},"lg:grid-cols-3"," breakpoints kick in identically while loading and after.",[328,2244,2245,2248,2249,2252,2253,2255],{},[331,2246,2247],{},"Six skeleton cards"," while loading, each shaped like one real card (",[14,2250,2251],{},":repeat=\"6\"","), laid out by the grid. When data arrives, the same grid populates with the real ",[14,2254,1886],{}," items.",[328,2257,2258,483,2261,127,2264,2267,2268,2271,2272,2275],{},[331,2259,2260],{},"Vue components inside the prototype work.",[14,2262,2263],{},"\u003CUiSwitch>",[14,2265,2266],{},"\u003CUiButton>",", and ",[14,2269,2270],{},"\u003CIcon>"," are walked into via their slot children — the button text shimmers as a text-bar inside a button-shaped wrapper, the switch becomes a switch-shaped block, the icon becomes an icon-sized block. Components that render a wrapper with sub-",[14,2273,2274],{},"minNodeSize"," children fall back to a single block at the component's own rect rather than disappearing.",[328,2277,2278,2281,2282,2284,2285,432,2288,2291,2292,2295,2296,2299],{},[331,2279,2280],{},"No skeleton classes leak when not loading."," With ",[14,2283,1917],{}," the wrapper carries only ",[14,2286,2287],{},"grid grid-cols-…",[14,2289,2290],{},"a-skeleton",", no inner ",[14,2293,2294],{},"__capture",", no ",[14,2297,2298],{},"aria-busy",". The DOM is exactly what you'd write by hand.",[328,2301,2302,2308,2309,2311,2312,2315,2316,2319],{},[331,2303,2304,2305,2307],{},"Empty ",[14,2306,527],{}," opt-out."," If you don't pass a ",[14,2310,527],{},", the wrapper switches to ",[14,2313,2314],{},"display: contents"," when not loading — invisible to ",[14,2317,2318],{},"parent > article"," selectors, so flex\u002Fgrid parents still target your real items.",[21,2321,2322,2327,2328,2330],{},[331,2323,2324,2325,1248],{},"When may you skip ",[14,2326,1889],{}," When the default slot has a single, static, representative element (not iterated with ",[14,2329,1886],{},"). In that case the default slot IS the shape:",[48,2332,2334],{"className":253,"code":2333,"language":255,"meta":53,"style":53},"\u003CASkeleton :loading=\"loading\" :repeat=\"3\" class=\"grid grid-cols-3 gap-4\">\n  \u003Carticle class=\"…\">…one static card…\u003C\u002Farticle>\n\u003C\u002FASkeleton>\n",[14,2335,2336,2376,2381],{"__ignoreMap":53},[57,2337,2338,2340,2342,2344,2346,2348,2350,2352,2354,2356,2358,2360,2362,2365,2367,2369,2371,2374],{"class":59,"line":60},[57,2339,262],{"class":88},[57,2341,5],{"class":265},[57,2343,268],{"class":88},[57,2345,272],{"class":271},[57,2347,275],{"class":88},[57,2349,278],{"class":88},[57,2351,272],{"class":88},[57,2353,278],{"class":88},[57,2355,268],{"class":88},[57,2357,1892],{"class":271},[57,2359,275],{"class":88},[57,2361,278],{"class":88},[57,2363,2364],{"class":271},"3",[57,2366,278],{"class":88},[57,2368,1495],{"class":271},[57,2370,275],{"class":88},[57,2372,2373],{"class":92},"\"grid grid-cols-3 gap-4\"",[57,2375,285],{"class":88},[57,2377,2378],{"class":59,"line":67},[57,2379,2380],{"class":88},"  \u003Carticle class=\"…\">…one static card…\u003C\u002Farticle>\n",[57,2382,2383,2385,2387],{"class":59,"line":85},[57,2384,295],{"class":88},[57,2386,5],{"class":265},[57,2388,285],{"class":88},[21,2390,2391,2392,2394,2395,2397],{},"The single article is used verbatim as the prototype and repeated three times. Anything iterated — ",[14,2393,1886],{},", async lists, conditional groups — should go through ",[14,2396,1889],{}," to keep the shape predictable.",[35,2399,318],{"id":2400},"api-reference",[43,2402,2404,1070],{"id":2403},"askeleton-props",[14,2405,126],{},[451,2407,2408,2424],{},[454,2409,2410],{},[457,2411,2412,2415,2418,2421],{},[460,2413,2414],{},"Prop",[460,2416,2417],{},"Type",[460,2419,2420],{},"Default",[460,2422,2423],{},"Description",[473,2425,2426,2446,2477,2498,2517,2545,2562,2584,2606,2629,2657],{},[457,2427,2428,2432,2437,2440],{},[478,2429,2430],{},[14,2431,272],{},[478,2433,2434],{},[14,2435,2436],{},"boolean",[478,2438,2439],{},"—",[478,2441,2442,2443,2445],{},"When ",[14,2444,1264],{},", show the skeleton.",[457,2447,2448,2453,2458,2463],{},[478,2449,2450],{},[14,2451,2452],{},"mode",[478,2454,2455],{},[14,2456,2457],{},"'clone' | 'mirror'",[478,2459,2460],{},[14,2461,2462],{},"'clone'",[478,2464,2465,2466,2469,2470,2472,2473,2476],{},"Rendering strategy. ",[14,2467,2468],{},"clone"," snapshots ",[14,2471,309],{},"; ",[14,2474,2475],{},"mirror"," walks the vnode tree (SSR-safe).",[457,2478,2479,2483,2488,2491],{},[478,2480,2481],{},[14,2482,1690],{},[478,2484,2485],{},[14,2486,2487],{},"string",[478,2489,2490],{},"auto, per-instance",[478,2492,2493,2494,2497],{},"Auto-generated as ",[14,2495,2496],{},"\u003Cslot-fingerprint>:\u003CuseId()>"," so each instance has its own slot. Pass explicitly to share a captured shape across instances or to differentiate prop-variant shapes from the same component.",[457,2499,2500,2504,2509,2514],{},[478,2501,2502],{},[14,2503,387],{},[478,2505,2506],{},[14,2507,2508],{},"number",[478,2510,2511],{},[14,2512,2513],{},"16",[478,2515,2516],{},"Max recursion depth when capturing.",[457,2518,2519,2523,2527,2532],{},[478,2520,2521],{},[14,2522,391],{},[478,2524,2525],{},[14,2526,2508],{},[478,2528,2529],{},[14,2530,2531],{},"600",[478,2533,2534,2535,2538,2539,2542,2543,319],{},"Hard cap on captured \u002F structural nodes. Walks bail beyond this with ",[14,2536,2537],{},"truncated: true"," and a one-time ",[14,2540,2541],{},"console.warn"," per ",[14,2544,1690],{},[457,2546,2547,2551,2555,2559],{},[478,2548,2549],{},[14,2550,2274],{},[478,2552,2553],{},[14,2554,2508],{},[478,2556,2557],{},[14,2558,747],{},[478,2560,2561],{},"Skip elements smaller than this many CSS pixels (either axis).",[457,2563,2564,2569,2573,2578],{},[478,2565,2566],{},[14,2567,2568],{},"persist",[478,2570,2571],{},[14,2572,2436],{},[478,2574,2575],{},[14,2576,2577],{},"false",[478,2579,2580,2581,2583],{},"Mirror captured shape to ",[14,2582,1674],{},". Schema-versioned; entries from older releases auto-purge on read.",[457,2585,2586,2591,2596,2601],{},[478,2587,2588],{},[14,2589,2590],{},"animation",[478,2592,2593],{},[14,2594,2595],{},"'shimmer' | 'pulse' | 'none'",[478,2597,2598],{},[14,2599,2600],{},"'shimmer'",[478,2602,2603,2604,426],{},"Animation variant. ",[14,2605,425],{},[457,2607,2608,2613,2618,2622],{},[478,2609,2610],{},[14,2611,2612],{},"fallback",[478,2614,2615],{},[14,2616,2617],{},"'shimmer' | 'block'",[478,2619,2620],{},[14,2621,2600],{},[478,2623,2624,2625,2628],{},"Default cache-miss UI when no ",[14,2626,2627],{},"#fallback"," slot is provided (mirror mode only).",[457,2630,2631,2635,2639,2644],{},[478,2632,2633],{},[14,2634,1892],{},[478,2636,2637],{},[14,2638,2508],{},[478,2640,2641],{},[14,2642,2643],{},"1",[478,2645,2646,2647,388,2650,2653,2654,2656],{},"Number of prototype copies to render while loading. Pair with a ",[14,2648,2649],{},"grid",[14,2651,2652],{},"flex"," class on ",[14,2655,126],{}," to fill the layout 1:1 with the eventual loaded content — no shift when data arrives.",[457,2658,2659,2663,2668,2670],{},[478,2660,2661],{},[14,2662,527],{},[478,2664,2665],{},[14,2666,2667],{},"HTMLAttributes['class']",[478,2669,2439],{},[478,2671,2672,2673,2676,2677,2679,2680,2682,2683,2685,2686,2688],{},"Class on the wrapper. Persists across ",[14,2674,2675],{},"loading=true"," ↔ ",[14,2678,2577],{}," so layout classes (",[14,2681,1937],{},", …) keep working in both states. When omitted and ",[14,2684,1917],{},", the wrapper falls back to ",[14,2687,2314],{}," so it's invisible to surrounding layout.",[43,2690,2692],{"id":2691},"slots","Slots",[451,2694,2695,2704],{},[454,2696,2697],{},[457,2698,2699,2702],{},[460,2700,2701],{},"Slot",[460,2703,2423],{},[473,2705,2706,2722,2737],{},[457,2707,2708,2713],{},[478,2709,2710],{},[14,2711,2712],{},"default",[478,2714,2715,2716,2718,2719,2721],{},"The real content. Rendered when ",[14,2717,272],{}," is false; the slot's first iteration is also used as the skeleton's shape source when no ",[14,2720,1889],{}," is provided.",[457,2723,2724,2729],{},[478,2725,2726],{},[14,2727,2728],{},"prototype",[478,2730,2731,2732,2734,2735,319],{},"Optional single-instance template used as the shape source while loading. Takes precedence over the default slot. Pair with ",[14,2733,1932],{}," when the default slot iterates with ",[14,2736,1886],{},[457,2738,2739,2743],{},[478,2740,2741],{},[14,2742,2612],{},[478,2744,2745],{},"Custom UI for cache misses (mirror mode). Defaults to a single full-width shimmer block.",[43,2747,2749],{"id":2748},"dom-escape-hatches","DOM escape hatches",[21,2751,2752],{},"Mark elements during the walk via data attributes — applies to all three strategies:",[451,2754,2755,2764],{},[454,2756,2757],{},[457,2758,2759,2762],{},[460,2760,2761],{},"Attribute",[460,2763,891],{},[473,2765,2766,2780],{},[457,2767,2768,2773],{},[478,2769,2770],{},[14,2771,2772],{},"data-skeleton-stop",[478,2774,2775,2776,388,2778,319],{},"Stop recursing into this element — render as a single block carrying its outer ",[14,2777,527],{},[14,2779,825],{},[457,2781,2782,2787],{},[478,2783,2784],{},[14,2785,2786],{},"data-skeleton-ignore",[478,2788,2789],{},"Skip the element entirely (no block emitted). Use for decorative chrome that should always render verbatim.",[21,2791,2792,2793,2795,2796,2799,2800,2802,2803,2805],{},"Skeleton-ise ",[331,2794,1708],{},", not ",[331,2797,2798],{},"chrome",". If a component's identity is its gradient background \u002F decorative SVGs, wrap only the inner content with ",[14,2801,126],{}," and let the container always render. Mark decorations with ",[14,2804,2786],{}," so the walker treats them as invisible.",[43,2807,2809],{"id":2808},"variant-primitives","Variant primitives",[2811,2812],"demo-skeleton-variants",{},[21,2814,2815,2816,127,2819,2821,2822,2824,2825,127,2828,2831,2832,319],{},"When auto-capture isn't the right fit, drop in a named variant. Each accepts ",[14,2817,2818],{},"animation=\"pulse | shimmer | wave | none\"",[14,2820,527],{},", and inline ",[14,2823,825],{},". Every variant ships ",[14,2826,2827],{},"role=\"status\"",[14,2829,2830],{},"aria-busy=\"true\"",", and a visually-hidden ",[14,2833,2834],{},"\u003Cspan class=\"a-skel-sr-only\">Loading…\u003C\u002Fspan>",[451,2836,2837,2850],{},[454,2838,2839],{},[457,2840,2841,2844,2847],{},[460,2842,2843],{},"Component",[460,2845,2846],{},"Maps to",[460,2848,2849],{},"Key props",[473,2851,2852,2868,2886,2903,2925,2945,2964,2980,2996,3016,3041,3062,3081,3099,3119],{},[457,2853,2854,2858,2861],{},[478,2855,2856],{},[14,2857,140],{},[478,2859,2860],{},"n stacked bars, last line shorter",[478,2862,2863,127,2866],{},[14,2864,2865],{},"lines",[14,2867,1466],{},[457,2869,2870,2875,2878],{},[478,2871,2872],{},[14,2873,2874],{},"\u003CASkeletonHeading>",[478,2876,2877],{},"one bar sized to heading level",[478,2879,2880,2883,2884],{},[14,2881,2882],{},"level"," (1–6), ",[14,2885,1466],{},[457,2887,2888,2893,2896],{},[478,2889,2890],{},[14,2891,2892],{},"\u003CASkeletonAvatar>",[478,2894,2895],{},"circle \u002F square \u002F rounded",[478,2897,2898,127,2901],{},[14,2899,2900],{},"size",[14,2902,1183],{},[457,2904,2905,2910,2913],{},[478,2906,2907],{},[14,2908,2909],{},"\u003CASkeletonImage>",[478,2911,2912],{},"aspect-ratio rect + image-icon placeholder",[478,2914,2915,127,2918,127,2920,127,2922],{},[14,2916,2917],{},"ratio",[14,2919,1466],{},[14,2921,1469],{},[14,2923,2924],{},"showIcon",[457,2926,2927,2932,2935],{},[478,2928,2929],{},[14,2930,2931],{},"\u003CASkeletonVideo>",[478,2933,2934],{},"rect + play-icon placeholder",[478,2936,2937,127,2939,127,2941,127,2943],{},[14,2938,2917],{},[14,2940,1466],{},[14,2942,1469],{},[14,2944,2924],{},[457,2946,2947,2952,2955],{},[478,2948,2949],{},[14,2950,2951],{},"\u003CASkeletonButton>",[478,2953,2954],{},"rounded rect, filled or outlined",[478,2956,2957,127,2959,127,2961],{},[14,2958,1466],{},[14,2960,1469],{},[14,2962,2963],{},"outlined",[457,2965,2966,2971,2974],{},[478,2967,2968],{},[14,2969,2970],{},"\u003CASkeletonInput>",[478,2972,2973],{},"bordered rect with caret bar inside",[478,2975,2976,127,2978],{},[14,2977,1466],{},[14,2979,1469],{},[457,2981,2982,2987,2990],{},[478,2983,2984],{},[14,2985,2986],{},"\u003CASkeletonChip>",[478,2988,2989],{},"small pill",[478,2991,2992,127,2994],{},[14,2993,1466],{},[14,2995,1469],{},[457,2997,2998,3003,3006],{},[478,2999,3000],{},[14,3001,3002],{},"\u003CASkeletonListItem>",[478,3004,3005],{},"avatar + n text lines + trailing slot",[478,3007,3008,127,3011,127,3013],{},[14,3009,3010],{},"avatar",[14,3012,2865],{},[14,3014,3015],{},"trailing",[457,3017,3018,3022,3025],{},[478,3019,3020],{},[14,3021,137],{},[478,3023,3024],{},"media + heading + paragraph + actions",[478,3026,3027,127,3030,127,3033,127,3035,127,3038],{},[14,3028,3029],{},"media",[14,3031,3032],{},"heading",[14,3034,2865],{},[14,3036,3037],{},"actions",[14,3039,3040],{},"footerAvatar",[457,3042,3043,3048,3051],{},[478,3044,3045],{},[14,3046,3047],{},"\u003CASkeletonTable>",[478,3049,3050],{},"header row + n × m body cells",[478,3052,3053,127,3056,127,3059],{},[14,3054,3055],{},"rows",[14,3057,3058],{},"columns",[14,3060,3061],{},"showHeader",[457,3063,3064,3069,3072],{},[478,3065,3066],{},[14,3067,3068],{},"\u003CASkeletonChart>",[478,3070,3071],{},"n vertical bars of varying heights",[478,3073,3074,127,3077,127,3079],{},[14,3075,3076],{},"bars",[14,3078,1469],{},[14,3080,3061],{},[457,3082,3083,3088,3091],{},[478,3084,3085],{},[14,3086,3087],{},"\u003CASkeletonForm>",[478,3089,3090],{},"label + input pairs + submit",[478,3092,3093,127,3096],{},[14,3094,3095],{},"fields",[14,3097,3098],{},"showSubmit",[457,3100,3101,3106,3109],{},[478,3102,3103],{},[14,3104,3105],{},"\u003CASkeletonArticle>",[478,3107,3108],{},"heading + media + n paragraphs",[478,3110,3111,127,3113,127,3116],{},[14,3112,3029],{},[14,3114,3115],{},"paragraphs",[14,3117,3118],{},"linesPerParagraph",[457,3120,3121,3126,3129],{},[478,3122,3123],{},[14,3124,3125],{},"\u003CASkeletonDivider>",[478,3127,3128],{},"thin shimmer rule",[478,3130,3131],{},[14,3132,3133],{},"thickness",[43,3135,3137],{"id":3136},"askeletonblock",[14,3138,133],{},[3140,3141],"demo-skeleton-block",{},[21,3143,3144],{},"Single-block primitive for hand-crafted skeletons. Flow-layout friendly — composes with flex, grid, stacks.",[48,3146,3148],{"className":253,"code":3147,"language":255,"meta":53,"style":53},"\u003Ctemplate>\n  \u003Cdiv v-if=\"loading\" class=\"flex items-start gap-4 p-4\">\n    \u003CASkeletonBlock type=\"circle\" :w=\"64\" :h=\"64\" \u002F>\n    \u003Cdiv class=\"flex-1 space-y-2\">\n      \u003CASkeletonBlock type=\"text\" :w=\"160\" :h=\"18\" \u002F>\n      \u003CASkeletonBlock type=\"text\" :w=\"100\" :h=\"12\" \u002F>\n      \u003CASkeletonBlock type=\"text\" :lines=\"3\" :h=\"14\" class=\"!mt-3\" \u002F>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n  \u003CUserCard v-else :data=\"user\" \u002F>\n\u003C\u002Ftemplate>\n",[14,3149,3150,3158,3179,3211,3226,3256,3284,3320,3329,3337,3353],{"__ignoreMap":53},[57,3151,3152,3154,3156],{"class":59,"line":60},[57,3153,262],{"class":88},[57,3155,1329],{"class":265},[57,3157,285],{"class":88},[57,3159,3160,3162,3164,3166,3168,3170,3172,3174,3177],{"class":59,"line":67},[57,3161,1337],{"class":88},[57,3163,1340],{"class":265},[57,3165,1361],{"class":271},[57,3167,275],{"class":88},[57,3169,1393],{"class":92},[57,3171,1495],{"class":271},[57,3173,275],{"class":88},[57,3175,3176],{"class":92},"\"flex items-start gap-4 p-4\"",[57,3178,285],{"class":88},[57,3180,3181,3183,3186,3189,3191,3194,3197,3199,3202,3205,3207,3209],{"class":59,"line":85},[57,3182,1355],{"class":88},[57,3184,3185],{"class":265},"ASkeletonBlock",[57,3187,3188],{"class":271}," type",[57,3190,275],{"class":88},[57,3192,3193],{"class":92},"\"circle\"",[57,3195,3196],{"class":271}," :w",[57,3198,275],{"class":88},[57,3200,3201],{"class":92},"\"64\"",[57,3203,3204],{"class":271}," :h",[57,3206,275],{"class":88},[57,3208,3201],{"class":92},[57,3210,1377],{"class":88},[57,3212,3213,3215,3217,3219,3221,3224],{"class":59,"line":102},[57,3214,1355],{"class":88},[57,3216,1340],{"class":265},[57,3218,1495],{"class":271},[57,3220,275],{"class":88},[57,3222,3223],{"class":92},"\"flex-1 space-y-2\"",[57,3225,285],{"class":88},[57,3227,3228,3231,3233,3235,3237,3240,3242,3244,3247,3249,3251,3254],{"class":59,"line":115},[57,3229,3230],{"class":88},"      \u003C",[57,3232,3185],{"class":265},[57,3234,3188],{"class":271},[57,3236,275],{"class":88},[57,3238,3239],{"class":92},"\"text\"",[57,3241,3196],{"class":271},[57,3243,275],{"class":88},[57,3245,3246],{"class":92},"\"160\"",[57,3248,3204],{"class":271},[57,3250,275],{"class":88},[57,3252,3253],{"class":92},"\"18\"",[57,3255,1377],{"class":88},[57,3257,3258,3260,3262,3264,3266,3268,3270,3272,3275,3277,3279,3282],{"class":59,"line":741},[57,3259,3230],{"class":88},[57,3261,3185],{"class":265},[57,3263,3188],{"class":271},[57,3265,275],{"class":88},[57,3267,3239],{"class":92},[57,3269,3196],{"class":271},[57,3271,275],{"class":88},[57,3273,3274],{"class":92},"\"100\"",[57,3276,3204],{"class":271},[57,3278,275],{"class":88},[57,3280,3281],{"class":92},"\"12\"",[57,3283,1377],{"class":88},[57,3285,3286,3288,3290,3292,3294,3296,3299,3301,3304,3306,3308,3311,3313,3315,3318],{"class":59,"line":752},[57,3287,3230],{"class":88},[57,3289,3185],{"class":265},[57,3291,3188],{"class":271},[57,3293,275],{"class":88},[57,3295,3239],{"class":92},[57,3297,3298],{"class":271}," :lines",[57,3300,275],{"class":88},[57,3302,3303],{"class":92},"\"3\"",[57,3305,3204],{"class":271},[57,3307,275],{"class":88},[57,3309,3310],{"class":92},"\"14\"",[57,3312,1495],{"class":271},[57,3314,275],{"class":88},[57,3316,3317],{"class":92},"\"!mt-3\"",[57,3319,1377],{"class":88},[57,3321,3322,3325,3327],{"class":59,"line":1142},[57,3323,3324],{"class":88},"    \u003C\u002F",[57,3326,1340],{"class":265},[57,3328,285],{"class":88},[57,3330,3331,3333,3335],{"class":59,"line":1171},[57,3332,1422],{"class":88},[57,3334,1340],{"class":265},[57,3336,285],{"class":88},[57,3338,3339,3341,3343,3345,3347,3349,3351],{"class":59,"line":1176},[57,3340,1337],{"class":88},[57,3342,1403],{"class":265},[57,3344,1406],{"class":271},[57,3346,1409],{"class":271},[57,3348,275],{"class":88},[57,3350,1414],{"class":92},[57,3352,1377],{"class":88},[57,3354,3355,3357,3359],{"class":59,"line":1201},[57,3356,295],{"class":88},[57,3358,1329],{"class":265},[57,3360,285],{"class":88},[451,3362,3363,3376],{},[454,3364,3365],{},[457,3366,3367,3369,3371,3373],{},[460,3368,2414],{},[460,3370,2417],{},[460,3372,2420],{},[460,3374,3375],{},"Notes",[473,3377,3378,3403,3420,3436,3452,3473,3490],{},[457,3379,3380,3384,3389,3394],{},[478,3381,3382],{},[14,3383,682],{},[478,3385,3386],{},[14,3387,3388],{},"'block' | 'text' | 'image' | 'circle'",[478,3390,3391],{},[14,3392,3393],{},"'block'",[478,3395,3396,3399,3400,319],{},[14,3397,3398],{},"circle"," defaults ",[14,3401,3402],{},"border-radius: 50%",[457,3404,3405,3410,3415,3417],{},[478,3406,3407],{},[14,3408,3409],{},"w",[478,3411,3412],{},[14,3413,3414],{},"number | string",[478,3416,2439],{},[478,3418,3419],{},"Width (number = px).",[457,3421,3422,3427,3431,3433],{},[478,3423,3424],{},[14,3425,3426],{},"h",[478,3428,3429],{},[14,3430,3414],{},[478,3432,2439],{},[478,3434,3435],{},"Height (number = px).",[457,3437,3438,3443,3447,3449],{},[478,3439,3440],{},[14,3441,3442],{},"radius",[478,3444,3445],{},[14,3446,3414],{},[478,3448,2439],{},[478,3450,3451],{},"Border radius (number = px).",[457,3453,3454,3458,3462,3466],{},[478,3455,3456],{},[14,3457,2865],{},[478,3459,3460],{},[14,3461,2508],{},[478,3463,3464],{},[14,3465,2643],{},[478,3467,3468,3469,3472],{},"For ",[14,3470,3471],{},"type='text'",", render N stacked bars; last is 70% width.",[457,3474,3475,3479,3483,3487],{},[478,3476,3477],{},[14,3478,2590],{},[478,3480,3481],{},[14,3482,2595],{},[478,3484,3485],{},[14,3486,2600],{},[478,3488,3489],{},"Animation variant.",[457,3491,3492,3496,3500,3502],{},[478,3493,3494],{},[14,3495,527],{},[478,3497,3498],{},[14,3499,2667],{},[478,3501,2439],{},[478,3503,3504],{},"Class on the root.",[43,3506,3508],{"id":3507},"askeletonlayer",[14,3509,130],{},[21,3511,3512,3513,3516,3517,3519,3520,3522],{},"Renders a ",[14,3514,3515],{},"StructuralShape"," (from ",[14,3518,353],{}," or ",[14,3521,1440],{},") in normal flow.",[451,3524,3525,3537],{},[454,3526,3527],{},[457,3528,3529,3531,3533,3535],{},[460,3530,2414],{},[460,3532,2417],{},[460,3534,2420],{},[460,3536,2423],{},[473,3538,3539,3559,3575],{},[457,3540,3541,3545,3550,3552],{},[478,3542,3543],{},[14,3544,1183],{},[478,3546,3547],{},[14,3548,3549],{},"StructuralShape | undefined",[478,3551,2439],{},[478,3553,3554,3555,3558],{},"Renders nothing when ",[14,3556,3557],{},"undefined",". The layer is a transparent shell — captured containers carry the layout.",[457,3560,3561,3565,3569,3573],{},[478,3562,3563],{},[14,3564,2590],{},[478,3566,3567],{},[14,3568,2595],{},[478,3570,3571],{},[14,3572,2600],{},[478,3574,3489],{},[457,3576,3577,3581,3585,3587],{},[478,3578,3579],{},[14,3580,527],{},[478,3582,3583],{},[14,3584,2667],{},[478,3586,2439],{},[478,3588,3589],{},"Class on the layer wrapper.",[43,3591,3593],{"id":3592},"composables","Composables",[856,3595,3597],{"id":3596},"useskeletonoptions-shape-capturenow-clear",[14,3598,3599],{},"useSkeleton(options) → { shape, captureNow, clear }",[21,3601,3602,3603,3605,3606,319],{},"Wires the DOM probe + structural cache + reactivity around a target element. The reactive ",[14,3604,1183],{}," feeds ",[14,3607,130],{},[451,3609,3610,3623],{},[454,3611,3612],{},[457,3613,3614,3617,3619,3621],{},[460,3615,3616],{},"Option",[460,3618,2417],{},[460,3620,2420],{},[460,3622,2423],{},[473,3624,3625,3640,3660,3678,3698,3717,3735],{},[457,3626,3627,3631,3635,3637],{},[478,3628,3629],{},[14,3630,1690],{},[478,3632,3633],{},[14,3634,2487],{},[478,3636,2439],{},[478,3638,3639],{},"Required. Identifier for the shape cache.",[457,3641,3642,3647,3652,3654],{},[478,3643,3644],{},[14,3645,3646],{},"target",[478,3648,3649],{},[14,3650,3651],{},"() => HTMLElement | null",[478,3653,2439],{},[478,3655,3656,3657,3659],{},"Getter for the element to measure. Return ",[14,3658,1107],{}," to disable capture.",[457,3661,3662,3666,3670,3674],{},[478,3663,3664],{},[14,3665,2568],{},[478,3667,3668],{},[14,3669,2436],{},[478,3671,3672],{},[14,3673,2577],{},[478,3675,2580,3676,319],{},[14,3677,1674],{},[457,3679,3680,3684,3688,3692],{},[478,3681,3682],{},[14,3683,387],{},[478,3685,3686],{},[14,3687,2508],{},[478,3689,3690],{},[14,3691,726],{},[478,3693,3694,3695,319],{},"Forwarded to ",[14,3696,3697],{},"walkStructural",[457,3699,3700,3704,3708,3713],{},[478,3701,3702],{},[14,3703,391],{},[478,3705,3706],{},[14,3707,2508],{},[478,3709,3710],{},[14,3711,3712],{},"500",[478,3714,3694,3715,319],{},[14,3716,3697],{},[457,3718,3719,3723,3727,3731],{},[478,3720,3721],{},[14,3722,394],{},[478,3724,3725],{},[14,3726,2508],{},[478,3728,3729],{},[14,3730,747],{},[478,3732,3694,3733,319],{},[14,3734,3697],{},[457,3736,3737,3742,3746,3751],{},[478,3738,3739],{},[14,3740,3741],{},"resizeDebounceMs",[478,3743,3744],{},[14,3745,2508],{},[478,3747,3748],{},[14,3749,3750],{},"150",[478,3752,3753,3756],{},[14,3754,3755],{},"ResizeObserver"," re-capture debounce.",[21,3758,3759,3760,319],{},"Returns ",[14,3761,3762],{},"{ shape: Readonly\u003CRef\u003CStructuralShape | undefined>>, captureNow: () => StructuralShape | undefined, clear: () => void }",[856,3764,3766],{"id":3765},"useshapeprobegettarget-options",[14,3767,3768],{},"useShapeProbe(getTarget, options)",[21,3770,3771,3772,3774,3775,3778],{},"Lower-level — ",[14,3773,3755],{}," + debounced capture without the cache. You manage persistence (Pinia, API, server-rendered geometry). The ",[14,3776,3777],{},"capture"," option swaps in any strategy:",[48,3780,3782],{"className":50,"code":3781,"language":52,"meta":53,"style":53},"import { useShapeProbe, walkStructural } from '@alikhalilll\u002Fa-skeleton';\n\nuseShapeProbe(() => containerRef.value, {\n  maxDepth: 12,\n  resizeDebounceMs: 200,\n  capture: walkStructural, \u002F\u002F default is walkDom (flat); pass walkStructural for the tree shape.\n  onCapture: (shape) => myStore.saveShape('user-card', shape),\n});\n",[14,3783,3784,3797,3801,3813,3821,3831,3839,3867],{"__ignoreMap":53},[57,3785,3786,3788,3791,3793,3795],{"class":59,"line":60},[57,3787,160],{"class":70},[57,3789,3790],{"class":88}," { useShapeProbe, walkStructural } ",[57,3792,192],{"class":70},[57,3794,690],{"class":92},[57,3796,121],{"class":88},[57,3798,3799],{"class":59,"line":67},[57,3800,217],{"emptyLinePlaceholder":216},[57,3802,3803,3806,3808,3810],{"class":59,"line":85},[57,3804,3805],{"class":77},"useShapeProbe",[57,3807,1125],{"class":88},[57,3809,1128],{"class":70},[57,3811,3812],{"class":88}," containerRef.value, {\n",[57,3814,3815,3817,3819],{"class":59,"line":102},[57,3816,723],{"class":88},[57,3818,726],{"class":271},[57,3820,99],{"class":88},[57,3822,3823,3826,3829],{"class":59,"line":115},[57,3824,3825],{"class":88},"  resizeDebounceMs: ",[57,3827,3828],{"class":271},"200",[57,3830,99],{"class":88},[57,3832,3833,3836],{"class":59,"line":741},[57,3834,3835],{"class":88},"  capture: walkStructural, ",[57,3837,3838],{"class":63},"\u002F\u002F default is walkDom (flat); pass walkStructural for the tree shape.\n",[57,3840,3841,3844,3847,3849,3851,3853,3856,3859,3861,3864],{"class":59,"line":752},[57,3842,3843],{"class":77},"  onCapture",[57,3845,3846],{"class":88},": (",[57,3848,1183],{"class":81},[57,3850,1297],{"class":88},[57,3852,1128],{"class":70},[57,3854,3855],{"class":88}," myStore.",[57,3857,3858],{"class":77},"saveShape",[57,3860,1104],{"class":88},[57,3862,3863],{"class":92},"'user-card'",[57,3865,3866],{"class":88},", shape),\n",[57,3868,3869],{"class":59,"line":1142},[57,3870,755],{"class":88},[43,3872,3874],{"id":3873},"pure-utilities","Pure utilities",[21,3876,3877],{},"When none of the components fit, drop down to the pure functions:",[451,3879,3880,3893],{},[454,3881,3882],{},[457,3883,3884,3887,3890],{},[460,3885,3886],{},"Symbol",[460,3888,3889],{},"Returns",[460,3891,3892],{},"Purpose",[473,3894,3895,3911,3926,3941,3956],{},[457,3896,3897,3902,3908],{},[478,3898,3899],{},[14,3900,3901],{},"walkDom(el, options)",[478,3903,3904,3907],{},[14,3905,3906],{},"CachedShape"," (flat)",[478,3909,3910],{},"One-shot synchronous capture — positioned-block model, root-relative absolute coords.",[457,3912,3913,3918,3923],{},[478,3914,3915],{},[14,3916,3917],{},"walkStructural(el, options)",[478,3919,3920,3922],{},[14,3921,3515],{}," (tree)",[478,3924,3925],{},"One-shot synchronous capture — preserves container layout, normal-flow replay.",[457,3927,3928,3933,3938],{},[478,3929,3930],{},[14,3931,3932],{},"captureSnapshot(el, options)",[478,3934,3935,3922],{},[14,3936,3937],{},"CaptureSnapshot",[478,3939,3940],{},"Comprehensive computed-style snapshot used by clone mode.",[457,3942,3943,3948,3953],{},[478,3944,3945],{},[14,3946,3947],{},"buildStructuralSkeleton(vnodes, options)",[478,3949,3950],{},[14,3951,3952],{},"VNode[]",[478,3954,3955],{},"Mirror-mode renderer for any vnode tree (e.g. inside a render-function component).",[457,3957,3958,3963,3967],{},[478,3959,3960],{},[14,3961,3962],{},"fingerprintSlot(vnodes)",[478,3964,3965],{},[14,3966,2487],{},[478,3968,3969,3970,3972,3973,127,3976,3979,3980,3983],{},"Slot-name fragment of the auto ",[14,3971,1690],{}," (",[14,3974,3975],{},"'UserCard'",[14,3977,3978],{},"'div'",", or ",[14,3981,3982],{},"'anonymous'",").",[43,3985,3987],{"id":3986},"cache-primitives","Cache primitives",[451,3989,3990,4001],{},[454,3991,3992],{},[457,3993,3994,3996,3999],{},[460,3995,3886],{},[460,3997,3998],{},"Namespace",[460,4000,3892],{},[473,4002,4003,4023,4036,4053,4070,4083],{},[457,4004,4005,4010,4020],{},[478,4006,4007],{},[14,4008,4009],{},"getCached(key, persist)",[478,4011,4012,4013,4016,4017,4019],{},"flat (",[14,4014,4015],{},"a-skeleton:"," prefix, ",[14,4018,1686],{},")",[478,4021,4022],{},"Lookup for the legacy flat-shape cache (mirror cache-replay path).",[457,4024,4025,4030,4033],{},[478,4026,4027],{},[14,4028,4029],{},"setCached(key, value, persist)",[478,4031,4032],{},"flat",[478,4034,4035],{},"Store a flat shape.",[457,4037,4038,4043,4050],{},[478,4039,4040],{},[14,4041,4042],{},"clearCached(key?)",[478,4044,4045,4046,4049],{},"flat ",[331,4047,4048],{},"and"," structural",[478,4051,4052],{},"Wipes both namespaces.",[457,4054,4055,4060,4067],{},[478,4056,4057],{},[14,4058,4059],{},"getCachedStructural(key, persist)",[478,4061,4062,4063,4016,4065,4019],{},"structural (",[14,4064,1678],{},[14,4066,1682],{},[478,4068,4069],{},"Lookup for the tree-shape cache.",[457,4071,4072,4077,4080],{},[478,4073,4074],{},[14,4075,4076],{},"setCachedStructural(key, value, persist)",[478,4078,4079],{},"structural",[478,4081,4082],{},"Store a tree shape.",[457,4084,4085,4090,4093],{},[478,4086,4087],{},[14,4088,4089],{},"clearCachedStructural(key?)",[478,4091,4092],{},"structural only",[478,4094,4095],{},"Wipes only the structural namespace.",[21,4097,4098],{},"Persisted entries carry a schema version. Mismatched versions auto-purge on read — upgrades can't replay wrong geometry from a previous version's cache.",[35,4100,4102],{"id":4101},"theming","Theming",[4104,4105],"demo-skeleton-themed",{},[21,4107,4108,4109,4111,4112,4115],{},"Light \u002F dark is driven entirely by the ",[14,4110,404],{}," tokens — set them to dark values under ",[14,4113,4114],{},".dark"," (or however your app gates dark mode) and everything follows.",[43,4117,4119],{"id":4118},"css-custom-properties","CSS custom properties",[21,4121,4122,4123,4125],{},"Set these on ",[14,4124,408],{}," (or any ancestor) to retint every primitive:",[451,4127,4128,4138],{},[454,4129,4130],{},[457,4131,4132,4135],{},[460,4133,4134],{},"Token",[460,4136,4137],{},"Used for",[473,4139,4140,4150,4160,4170,4180,4190,4200,4210,4220,4230],{},[457,4141,4142,4147],{},[478,4143,4144],{},[14,4145,4146],{},"--ak-skel-base",[478,4148,4149],{},"Block fill (also used by text bars and variant primitives).",[457,4151,4152,4157],{},[478,4153,4154],{},[14,4155,4156],{},"--ak-skel-base-soft",[478,4158,4159],{},"Secondary endpoint for variants that use a vertical gradient.",[457,4161,4162,4167],{},[478,4163,4164],{},[14,4165,4166],{},"--ak-skel-highlight",[478,4168,4169],{},"Shimmer \u002F wave sweep colour.",[457,4171,4172,4177],{},[478,4173,4174],{},[14,4175,4176],{},"--ak-skel-radius",[478,4178,4179],{},"Default block border radius.",[457,4181,4182,4187],{},[478,4183,4184],{},[14,4185,4186],{},"--ak-skel-radius-sm",[478,4188,4189],{},"Tighter radius for text bars, chips.",[457,4191,4192,4197],{},[478,4193,4194],{},[14,4195,4196],{},"--ak-skel-radius-lg",[478,4198,4199],{},"Wider radius for cards, images.",[457,4201,4202,4207],{},[478,4203,4204],{},[14,4205,4206],{},"--ak-skel-duration",[478,4208,4209],{},"Animation cycle length.",[457,4211,4212,4217],{},[478,4213,4214],{},[14,4215,4216],{},"--ak-skel-pulse-min",[478,4218,4219],{},"Opacity at the trough of the pulse cycle.",[457,4221,4222,4227],{},[478,4223,4224],{},[14,4225,4226],{},"--ak-skel-ring",[478,4228,4229],{},"Subtle 1-px inset ring colour.",[457,4231,4232,4237],{},[478,4233,4234],{},[14,4235,4236],{},"--ak-skel-icon",[478,4238,4239],{},"Placeholder icon colour (image \u002F video variants).",[21,4241,4242,4243,127,4246,127,4249,127,4252,127,4255,127,4258,4261],{},"Backward-compat aliases for v1 token names (",[14,4244,4245],{},"--ak-skeleton-block",[14,4247,4248],{},"--ak-skeleton-shimmer",[14,4250,4251],{},"--ak-skeleton-radius",[14,4253,4254],{},"--ak-skeleton-duration",[14,4256,4257],{},"--ak-skeleton-pulse-opacity",[14,4259,4260],{},"--ak-skeleton-ring",") are kept — existing consumer overrides continue to work.",[48,4263,4267],{"className":4264,"code":4265,"language":4266,"meta":53,"style":53},"language-css shiki shiki-themes github-light-default github-dark-default","\u002F* Per-tenant override — applies to anything inside .tenant-acme *\u002F\n.tenant-acme {\n  --ak-skel-base: hsl(220 30% 18%);\n  --ak-skel-highlight: hsl(220 60% 60% \u002F 0.35);\n  --ak-skel-radius: 0.5rem;\n  --ak-skel-duration: 2s;\n}\n","css",[14,4268,4269,4274,4282,4311,4340,4355,4370],{"__ignoreMap":53},[57,4270,4271],{"class":59,"line":60},[57,4272,4273],{"class":63},"\u002F* Per-tenant override — applies to anything inside .tenant-acme *\u002F\n",[57,4275,4276,4279],{"class":59,"line":67},[57,4277,4278],{"class":271},".tenant-acme",[57,4280,4281],{"class":88}," {\n",[57,4283,4284,4287,4290,4293,4295,4298,4301,4304,4307,4309],{"class":59,"line":85},[57,4285,4286],{"class":81},"  --ak-skel-base",[57,4288,4289],{"class":88},": ",[57,4291,4292],{"class":271},"hsl",[57,4294,1104],{"class":88},[57,4296,4297],{"class":271},"220",[57,4299,4300],{"class":271}," 30",[57,4302,4303],{"class":70},"%",[57,4305,4306],{"class":271}," 18",[57,4308,4303],{"class":70},[57,4310,1110],{"class":88},[57,4312,4313,4316,4318,4320,4322,4324,4327,4329,4331,4333,4335,4338],{"class":59,"line":102},[57,4314,4315],{"class":81},"  --ak-skel-highlight",[57,4317,4289],{"class":88},[57,4319,4292],{"class":271},[57,4321,1104],{"class":88},[57,4323,4297],{"class":271},[57,4325,4326],{"class":271}," 60",[57,4328,4303],{"class":70},[57,4330,4326],{"class":271},[57,4332,4303],{"class":70},[57,4334,388],{"class":88},[57,4336,4337],{"class":271},"0.35",[57,4339,1110],{"class":88},[57,4341,4342,4345,4347,4350,4353],{"class":59,"line":115},[57,4343,4344],{"class":81},"  --ak-skel-radius",[57,4346,4289],{"class":88},[57,4348,4349],{"class":271},"0.5",[57,4351,4352],{"class":70},"rem",[57,4354,121],{"class":88},[57,4356,4357,4360,4362,4365,4368],{"class":59,"line":741},[57,4358,4359],{"class":81},"  --ak-skel-duration",[57,4361,4289],{"class":88},[57,4363,4364],{"class":271},"2",[57,4366,4367],{"class":70},"s",[57,4369,121],{"class":88},[57,4371,4372],{"class":59,"line":752},[57,4373,4374],{"class":88},"}\n",[48,4376,4378],{"className":253,"code":4377,"language":255,"meta":53,"style":53},"\u003C!-- Or inline, scoped to one tree -->\n\u003CASkeleton :loading style=\"--ak-skel-base: hotpink; --ak-skel-radius: 9999px;\">\n  \u003CUserCard \u002F>\n\u003C\u002FASkeleton>\n",[14,4379,4380,4385,4427,4432],{"__ignoreMap":53},[57,4381,4382],{"class":59,"line":60},[57,4383,4384],{"class":63},"\u003C!-- Or inline, scoped to one tree -->\n",[57,4386,4387,4389,4391,4393,4395,4397,4399,4401,4403,4405,4408,4410,4412,4414,4417,4420,4423,4425],{"class":59,"line":67},[57,4388,262],{"class":88},[57,4390,5],{"class":265},[57,4392,268],{"class":88},[57,4394,272],{"class":271},[57,4396,1603],{"class":271},[57,4398,275],{"class":88},[57,4400,278],{"class":88},[57,4402,4146],{"class":81},[57,4404,4289],{"class":88},[57,4406,4407],{"class":271},"hotpink",[57,4409,2472],{"class":88},[57,4411,4176],{"class":81},[57,4413,4289],{"class":88},[57,4415,4416],{"class":271},"9999",[57,4418,4419],{"class":70},"px",[57,4421,4422],{"class":88},";",[57,4424,278],{"class":88},[57,4426,285],{"class":88},[57,4428,4429],{"class":59,"line":85},[57,4430,4431],{"class":88},"  \u003CUserCard \u002F>\n",[57,4433,4434,4436,4438],{"class":59,"line":102},[57,4435,295],{"class":88},[57,4437,5],{"class":265},[57,4439,285],{"class":88},[43,4441,4443],{"id":4442},"multi-tenant-dark-mode","Multi-tenant + dark mode",[21,4445,4446],{},"Three strategies, all built in:",[325,4448,4449,4468,4482],{},[328,4450,4451,4456,4457,4459,4460,4463,4464,4467],{},[331,4452,4453,4455],{},[14,4454,4114],{}," class scope"," — apply ",[14,4458,4114],{}," to any ancestor (Tailwind \u002F shadcn \u002F ",[14,4461,4462],{},"nuxt-color-mode"," convention). The package ships ",[14,4465,4466],{},":where(.dark) { --ak-skel-base: hsl(220 13% 22%) … }"," so dark tokens kick in automatically.",[328,4469,4470,4475,4476,388,4478,4481],{},[331,4471,4472],{},[14,4473,4474],{},"@media (prefers-color-scheme: dark)"," — falls back to OS preference when no explicit ",[14,4477,4114],{},[14,4479,4480],{},".light"," class is on an ancestor.",[328,4483,4484,4489],{},[331,4485,4486,4487,1495],{},"Explicit ",[14,4488,4480],{}," — wins back light tokens (consumer override).",[21,4491,4492,4493,4496],{},"Variant-specific overrides also work — e.g. ",[14,4494,4495],{},"\u003CASkeletonImage style=\"--ak-skel-base: hsl(200 50% 90%)\">"," retints one instance.",[35,4498,4500],{"id":4499},"animations","Animations",[451,4502,4503,4516],{},[454,4504,4505],{},[457,4506,4507,4510,4513],{},[460,4508,4509],{},"Value",[460,4511,4512],{},"What",[460,4514,4515],{},"Default?",[473,4517,4518,4534,4551,4567],{},[457,4519,4520,4525,4531],{},[478,4521,4522],{},[14,4523,4524],{},"shimmer",[478,4526,4527,4528],{},"gradient sweep ::after, contained per block via ",[14,4529,4530],{},"overflow: hidden",[478,4532,4533],{},"yes",[457,4535,4536,4541,4549],{},[478,4537,4538],{},[14,4539,4540],{},"pulse",[478,4542,4543,4544,4546,4547],{},"opacity 1 → ",[14,4545,4216],{}," → 1 over ",[14,4548,4206],{},[478,4550,2439],{},[457,4552,4553,4558,4565],{},[478,4554,4555],{},[14,4556,4557],{},"wave",[478,4559,4560,4561,4564],{},"gradient via ",[14,4562,4563],{},"background-position"," (sliding)",[478,4566,2439],{},[457,4568,4569,4573,4576],{},[478,4570,4571],{},[14,4572,941],{},[478,4574,4575],{},"static blocks",[478,4577,2439],{},[21,4579,4580,4583,4584,4587],{},[14,4581,4582],{},"prefers-reduced-motion: reduce"," disables every animation automatically (",[14,4585,4586],{},"animation: none !important"," + the shimmer pseudo-element drops to a static low-opacity overlay).",[35,4589,4591],{"id":4590},"accessibility","Accessibility",[325,4593,4594,4600,4605,4611,4617,4624,4634],{},[328,4595,4596,4597,4599],{},"Every wrapper \u002F layer \u002F variant root carries ",[14,4598,2827],{}," while loading.",[328,4601,4602,4604],{},[14,4603,2830],{}," mirrors the loading state.",[328,4606,4607,4610],{},[14,4608,4609],{},"aria-live=\"polite\""," so screen readers announce the loading state without interrupting the user.",[328,4612,4613,4614,4616],{},"A visually-hidden ",[14,4615,2834],{}," ships with every variant primitive.",[328,4618,4619,4620,4623],{},"Every emitted shimmer surface carries ",[14,4621,4622],{},"aria-hidden=\"true\""," — the placeholder is decorative; the announcement is the wrapper's job.",[328,4625,4626,4627,624,4630,4633],{},"Mirror-mode skeletons disable ",[14,4628,4629],{},"user-select",[14,4631,4632],{},"pointer-events"," on the slot tree so the placeholder can't be interacted with mid-load.",[328,4635,4636,4638],{},[14,4637,425],{}," strips animation.",[35,4640,4642],{"id":4641},"performance","Performance",[21,4644,4645],{},"Designed for components with hundreds of leaf elements — busy dashboards, long lists, dense forms.",[325,4647,4648,4676,4684,4695,4701,4714,4730],{},[328,4649,4650,4653,4654,127,4656,127,4658,4661,4662,4664,4665,4667,4668,4670,4671,2542,4673,4675],{},[331,4651,4652],{},"Walk budget"," — every walker (",[14,4655,871],{},[14,4657,3697],{},[14,4659,4660],{},"captureSnapshot",") enforces ",[14,4663,391],{}," (defaults 500 \u002F 500 \u002F 800) and reports ",[14,4666,2537],{},". A 5 000-row table will not lock up the main thread. ",[14,4669,126],{}," logs a one-time ",[14,4672,2541],{},[14,4674,1690],{}," whenever a capture truncates so missing nodes surface during development.",[328,4677,4678,340,4681,4683],{},[331,4679,4680],{},"Min-size filter",[14,4682,394],{}," (default 4 px) drops hairlines \u002F spacer dots.",[328,4685,4686,340,4689,354,4692,4694],{},[331,4687,4688],{},"One-layout reads",[14,4690,4691],{},"getBoundingClientRect()",[14,4693,309],{}," happen in a single top-down pass with no intervening writes. One layout up front, then cached values.",[328,4696,4697,4700],{},[331,4698,4699],{},"Allocation-free render"," — captured nodes carry frozen pre-computed styles.",[328,4702,4703,4706,4707,4710,4711,4713],{},[331,4704,4705],{},"Debounced re-capture"," — initial measurement via ",[14,4708,4709],{},"requestAnimationFrame","; subsequent ",[14,4712,3755],{}," callbacks debounced 150 ms.",[328,4715,4716,340,4719,4722,4723,354,4726,4729],{},[331,4717,4718],{},"CSS containment",[14,4720,4721],{},".a-skeleton[data-loading]"," uses ",[14,4724,4725],{},"overflow: clip",[14,4727,4728],{},"contain: paint",", so shadows \u002F filters \u002F transforms can't bleed outside the box.",[328,4731,4732,4735,4736,4739,4740,4743],{},[331,4733,4734],{},"Composited shimmer"," — only ",[14,4737,4738],{},"transform: translateX(...)"," changes each frame, with ",[14,4741,4742],{},"will-change: transform"," lifting blocks to their own compositor layer up front.",[35,4745,4747],{"id":4746},"ssr","SSR",[325,4749,4750,4760,4770],{},[328,4751,4752,4756,4757,4759],{},[331,4753,4754],{},[14,4755,349],{}," is fully SSR-safe — the walker runs on vnodes, no ",[14,4758,435],{}," access required.",[328,4761,4762,4766,4767,4769],{},[331,4763,4764],{},[14,4765,305],{}," is client-side only (needs ",[14,4768,309],{}," + a real DOM). The wrapper renders the slot's normal markup on the server; the snapshot + replay kick in on hydration.",[328,4771,4772,4776,4777,4780,4781,4783],{},[331,4773,4774],{},[14,4775,353],{}," runs in ",[14,4778,4779],{},"onMounted"," and bails out cleanly when ",[14,4782,435],{}," is undefined.",[21,4785,4786,4787,4789,4790,4792],{},"If you need a server-rendered placeholder before hydration finishes, use ",[14,4788,349],{}," or hand-craft with ",[14,4791,133],{}," \u002F variant primitives.",[35,4794,4796],{"id":4795},"typescript","TypeScript",[21,4798,4799],{},"Import the public types from the main entry:",[48,4801,4803],{"className":50,"code":4802,"language":52,"meta":53,"style":53},"import type {\n  ASkeletonProps,\n  ASkeletonSlots,\n  ASkeletonLayerProps,\n  ASkeletonBlockProps,\n  CachedShape,\n  ShapeNode,\n  ShapeNodeType,\n  StructuralShape,\n  StructuralNode,\n  ContainerNode,\n  LeafNode,\n  LeafKind,\n  CaptureSnapshot,\n  CapturedNode,\n  UseSkeletonOptions,\n  UseSkeletonReturn,\n  ShapeProbeOptions,\n  CaptureStrategy,\n  WalkOptions,\n  WalkStructuralOptions,\n  CaptureOptions,\n  BuildOptions,\n  SkeletonAnimation,\n  SkeletonFallback,\n} from '@alikhalilll\u002Fa-skeleton';\n",[14,4804,4805,4813,4818,4823,4828,4833,4838,4843,4848,4853,4858,4863,4868,4873,4878,4883,4888,4893,4898,4903,4908,4913,4918,4923,4928,4933],{"__ignoreMap":53},[57,4806,4807,4809,4811],{"class":59,"line":60},[57,4808,160],{"class":70},[57,4810,3188],{"class":70},[57,4812,4281],{"class":88},[57,4814,4815],{"class":59,"line":67},[57,4816,4817],{"class":88},"  ASkeletonProps,\n",[57,4819,4820],{"class":59,"line":85},[57,4821,4822],{"class":88},"  ASkeletonSlots,\n",[57,4824,4825],{"class":59,"line":102},[57,4826,4827],{"class":88},"  ASkeletonLayerProps,\n",[57,4829,4830],{"class":59,"line":115},[57,4831,4832],{"class":88},"  ASkeletonBlockProps,\n",[57,4834,4835],{"class":59,"line":741},[57,4836,4837],{"class":88},"  CachedShape,\n",[57,4839,4840],{"class":59,"line":752},[57,4841,4842],{"class":88},"  ShapeNode,\n",[57,4844,4845],{"class":59,"line":1142},[57,4846,4847],{"class":88},"  ShapeNodeType,\n",[57,4849,4850],{"class":59,"line":1171},[57,4851,4852],{"class":88},"  StructuralShape,\n",[57,4854,4855],{"class":59,"line":1176},[57,4856,4857],{"class":88},"  StructuralNode,\n",[57,4859,4860],{"class":59,"line":1201},[57,4861,4862],{"class":88},"  ContainerNode,\n",[57,4864,4865],{"class":59,"line":1222},[57,4866,4867],{"class":88},"  LeafNode,\n",[57,4869,4870],{"class":59,"line":1228},[57,4871,4872],{"class":88},"  LeafKind,\n",[57,4874,4875],{"class":59,"line":1234},[57,4876,4877],{"class":88},"  CaptureSnapshot,\n",[57,4879,4880],{"class":59,"line":1258},[57,4881,4882],{"class":88},"  CapturedNode,\n",[57,4884,4885],{"class":59,"line":1269},[57,4886,4887],{"class":88},"  UseSkeletonOptions,\n",[57,4889,4890],{"class":59,"line":1274},[57,4891,4892],{"class":88},"  UseSkeletonReturn,\n",[57,4894,4895],{"class":59,"line":1279},[57,4896,4897],{"class":88},"  ShapeProbeOptions,\n",[57,4899,4900],{"class":59,"line":1310},[57,4901,4902],{"class":88},"  CaptureStrategy,\n",[57,4904,4905],{"class":59,"line":1319},[57,4906,4907],{"class":88},"  WalkOptions,\n",[57,4909,4910],{"class":59,"line":1324},[57,4911,4912],{"class":88},"  WalkStructuralOptions,\n",[57,4914,4915],{"class":59,"line":1334},[57,4916,4917],{"class":88},"  CaptureOptions,\n",[57,4919,4920],{"class":59,"line":1352},[57,4921,4922],{"class":88},"  BuildOptions,\n",[57,4924,4925],{"class":59,"line":1380},[57,4926,4927],{"class":88},"  SkeletonAnimation,\n",[57,4929,4930],{"class":59,"line":1398},[57,4931,4932],{"class":88},"  SkeletonFallback,\n",[57,4934,4935,4938,4940,4942],{"class":59,"line":1419},[57,4936,4937],{"class":88},"} ",[57,4939,192],{"class":70},[57,4941,690],{"class":92},[57,4943,121],{"class":88},[35,4945,4947],{"id":4946},"browser-support","Browser support",[21,4949,4950,4951,4953,4954,4956,4957,4959],{},"Modern evergreen browsers — last two versions of Chrome, Edge, Firefox, Safari, and the matching mobile WebViews. Uses ",[14,4952,371],{}," (universal since 2017), ",[14,4955,3755],{}," (universal since 2020), and CSS ",[14,4958,4728],{}," (universal since 2022). No polyfills required.",[21,4961,4962,4964,4965,4967],{},[14,4963,4725],{}," falls back to ",[14,4966,4530],{}," on older browsers via the standard CSS cascade — no JavaScript fallback needed.",[35,4969,4971],{"id":4970},"troubleshooting","Troubleshooting",[21,4973,4974,4977,4978,4981,4982,4984,4985,4988,4989,319],{},[331,4975,4976],{},"The skeleton is blank.","\nMake sure your slot's tags are rendered unconditionally. If the slot is ",[14,4979,4980],{},"\u003Cdiv v-if=\"data\">…\u003C\u002Fdiv>",", the walker sees one comment during loading and falls back to a generic shimmer. Gate ",[331,4983,1708],{}," per leaf via ",[14,4986,4987],{},"{{ data?.field }}",", not the entire template on ",[14,4990,1742],{},[21,4992,4993,4999,5000,5003,5004,127,5007,127,5010,5013],{},[331,4994,4995,4996,4998],{},"An empty ",[14,4997,417],{}," doesn't shimmer.","\nThis was the v1 walker's behaviour. v2+ classifies empty text-owner tags (",[14,5001,5002],{},"\u003Ch1>","-",[14,5005,5006],{},"\u003Ch6>",[14,5008,5009],{},"\u003Cp>",[14,5011,5012],{},"\u003Cspan>",", …) as text bars rather than generic blocks, so the heading shimmers at its natural rendered height.",[21,5015,5016,5022,5023,5026,5027,5029,5030,5033,5034,5037,5038,5040,5041,5043],{},[331,5017,5018,5019,5021],{},"My ",[14,5020,840],{}," loses its background colour.","\nMirror mode keeps real ",[14,5024,5025],{},"bg-*"," classes — the engine detects an explicit background and skips the skeleton fallback. If your button has no ",[14,5028,5025],{}," class and no inline ",[14,5031,5032],{},"background",", the walker assumes you want the default skeleton fill. Either add ",[14,5035,5036],{},"bg-emerald-600"," (or whatever) explicitly, or wrap the inner text in ",[14,5039,133],{}," and let the real ",[14,5042,840],{}," render around it.",[21,5045,5046,5049,5050,354,5052,5054],{},[331,5047,5048],{},"The clone-mode replay drifts after a viewport resize.","\nClone mode captures absolute coordinates at the moment of snapshot. Resize-aware skeletons should use the structural strategy (",[14,5051,353],{},[14,5053,130],{},") — captured containers preserve their flex \u002F grid layout and reflow with the parent.",[21,5056,5057,5060,5061,5063,5064,5066,5067,5069,5070,5072,5073,5076],{},[331,5058,5059],{},"The structural-mode skeleton looks like a single block, not a tree.","\nThe cache may be stale from an older version. ",[14,5062,1674],{}," entries with schema version ",[14,5065,1686],{}," (from the ",[14,5068,871],{},"-flat-model) won't load as ",[14,5071,1682],{}," structural shapes. Call ",[14,5074,5075],{},"clearCachedStructural()"," once after upgrading, or wait for the auto-purge on next read.",[21,5078,5079,5082,5083,5085,5086,319],{},[331,5080,5081],{},"A decorative SVG \u002F background image renders as a giant skeleton block.","\nMark it with ",[14,5084,2786],{}," so the walker treats it as invisible. The slot's chrome (gradients, decorative shapes) should always render verbatim; the skeleton is for ",[331,5087,1708],{},[21,5089,5090,5093,5094,5096,5097,5099,5100,5103],{},[331,5091,5092],{},"The structural skeleton's flex \u002F grid layout breaks when rendered in a different CSS context.","\nContainers preserve both the original ",[14,5095,527],{}," (for utility CSS) and the resolved layout CSS as inline ",[14,5098,825],{},". If your styles aren't present at the mount point, the inline ",[14,5101,5102],{},"display: flex; flex-direction: column; gap: 16px;"," fallback still drives the layout.",[18,5105,5106],{},[21,5107,5108,5109,319],{},"Theming tokens, multi-tenant CSS, and theming gotchas — see the ",[315,5110,5112],{"href":5111},"\u002Fui","UI overview",[825,5114,5115],{},"html pre.shiki code .sU953, html code.shiki .sU953{--shiki-default:#6E7781;--shiki-dark:#8B949E}html pre.shiki code .sjeE4, html code.shiki .sjeE4{--shiki-default:#CF222E;--shiki-dark:#FF7B72}html pre.shiki code .sbjLL, html code.shiki .sbjLL{--shiki-default:#8250DF;--shiki-dark:#D2A8FF}html pre.shiki code .sTDnQ, html code.shiki .sTDnQ{--shiki-default:#953800;--shiki-dark:#FFA657}html pre.shiki code .s4rv2, html code.shiki .s4rv2{--shiki-default:#1F2328;--shiki-dark:#E6EDF3}html pre.shiki code .sSVrQ, html code.shiki .sSVrQ{--shiki-default:#0A3069;--shiki-dark:#A5D6FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sjgCt, html code.shiki .sjgCt{--shiki-default:#116329;--shiki-dark:#7EE787}html pre.shiki code .sHrmB, html code.shiki .sHrmB{--shiki-default:#0550AE;--shiki-dark:#79C0FF}html pre.shiki code .sZcZs, html code.shiki .sZcZs{--shiki-default:#82071E;--shiki-default-font-style:italic;--shiki-dark:#FFA198;--shiki-dark-font-style:italic}",{"title":53,"searchDepth":67,"depth":67,"links":5117},[5118,5122,5123,5124,5129,5130,5132,5144,5148,5149,5150,5151,5152,5153,5154],{"id":37,"depth":67,"text":38,"children":5119},[5120,5121],{"id":45,"depth":85,"text":46},{"id":144,"depth":85,"text":145},{"id":249,"depth":67,"text":250},{"id":322,"depth":67,"text":323},{"id":445,"depth":67,"text":446,"children":5125},[5126,5127,5128],{"id":566,"depth":85,"text":567},{"id":758,"depth":85,"text":759},{"id":996,"depth":85,"text":997},{"id":1694,"depth":67,"text":1695},{"id":1882,"depth":67,"text":5131},"Lists & grids — v-for, #prototype, repeat",{"id":2400,"depth":67,"text":318,"children":5133},[5134,5136,5137,5138,5139,5140,5141,5142,5143],{"id":2403,"depth":85,"text":5135},"\u003CASkeleton> props",{"id":2691,"depth":85,"text":2692},{"id":2748,"depth":85,"text":2749},{"id":2808,"depth":85,"text":2809},{"id":3136,"depth":85,"text":133},{"id":3507,"depth":85,"text":130},{"id":3592,"depth":85,"text":3593},{"id":3873,"depth":85,"text":3874},{"id":3986,"depth":85,"text":3987},{"id":4101,"depth":67,"text":4102,"children":5145},[5146,5147],{"id":4118,"depth":85,"text":4119},{"id":4442,"depth":85,"text":4443},{"id":4499,"depth":67,"text":4500},{"id":4590,"depth":67,"text":4591},{"id":4641,"depth":67,"text":4642},{"id":4746,"depth":67,"text":4747},{"id":4795,"depth":67,"text":4796},{"id":4946,"depth":67,"text":4947},{"id":4970,"depth":67,"text":4971},"A self-generating skeleton loader for Vue 3 \u002F Nuxt 3+. Three rendering strategies (clone, mirror, structural), comprehensive style capture, per-line text geometry, fifteen named variants, themeable via CSS variables.","md",{},"\u002Fui\u002Fskeleton",{"title":5,"description":5155},"ui\u002Fskeleton","EK-ryWc1YxpeY7xr3-Q7cfkJ1gpUeqGOkL4FqkAEfr0",1781619480473]