@alikhalilll/a-skeleton 1.0.0 → 1.2.0

package/dist/index.js

@@ -1,4 +1,4 @@
-import { Comment, Fragment, Text, computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, h, normalizeClass, normalizeStyle, onBeforeUnmount, openBlock, ref, renderList, renderSlot, shallowRef, useSlots, watch } from "vue";
+import { Comment, Fragment, Text, cloneVNode, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, h, normalizeClass, normalizeStyle, onBeforeUnmount, openBlock, ref, renderList, renderSlot, shallowRef, useId, useSlots, watch } from "vue";
 //#region ../../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
 function r(e) {
 	var t, f, n = "";
@@ -3398,689 +3398,1118 @@ function cn(...inputs) {
 	return twMerge(clsx(inputs));
 }
 //#endregion
-//#region src/utils/walkDom.ts
-const DEFAULT_MAX_NODES$1 = 500;
-const DEFAULT_MIN_SIZE = 4;
-const LEAF_TAGS = new Set([
-	"IMG",
-	"SVG",
-	"CANVAS",
-	"VIDEO",
-	"INPUT",
-	"TEXTAREA",
-	"SELECT",
-	"BUTTON",
-	"PROGRESS",
-	"METER",
-	"HR"
+//#region src/utils/buildStructuralSkeleton.ts
+/**
+* Atomic tags — rendered as a single shimmer block. Their internal rendering
+* is opaque to vnode walking (no meaningful child structure for us to mirror).
+* Their own `class` + `style` are preserved so Tailwind utilities like
+* `size-16` and `rounded-full` still drive the dimensions.
+*
+* Note: `button`, `a`, `label` are deliberately NOT atomic — they're treated
+* as containers so their real `background-color` / `border` / shadow survive
+* (we add `.a-skel-block` to atomics, which paints a skeleton gradient that
+* would override Tailwind's `bg-emerald-600` and friends). Their text content
+* is recursed and replaced with a shimmer span inside the real button shape.
+*/
+const ATOMIC_TAGS$2 = new Set([
+	"img",
+	"svg",
+	"canvas",
+	"video",
+	"audio",
+	"input",
+	"textarea",
+	"select",
+	"progress",
+	"meter",
+	"hr",
+	"iframe",
+	"object",
+	"embed",
+	"picture"
 ]);
 /**
-* Walk `root`'s descendants and produce a list of shimmer blocks that mirror its
-* rendered layout. Coordinates are relative to `root`'s top-left so the result can
-* be replayed in any container of the same size.
+* SVG child tags that should never be walked by the structural skeleton —
+* SVG interior elements use a different coordinate space (`x`/`y` are
+* attributes, not CSS), so emitting `.a-skel-block` divs at their tag would
+* yield non-rendering elements. When we see one of these, the parent `<svg>`
+* has already been treated as an atomic block — we just return null/skip.
+*/
+const SVG_INTERIOR_TAGS = new Set([
+	"circle",
+	"rect",
+	"path",
+	"line",
+	"polyline",
+	"polygon",
+	"ellipse",
+	"g",
+	"defs",
+	"clippath",
+	"mask",
+	"pattern",
+	"lineargradient",
+	"radialgradient",
+	"stop",
+	"use",
+	"symbol",
+	"foreignobject",
+	"text",
+	"tspan",
+	"textpath",
+	"marker",
+	"filter",
+	"feblend",
+	"fecolormatrix",
+	"fegaussianblur",
+	"feoffset",
+	"fedropshadow",
+	"femerge",
+	"femergenode"
+]);
+/**
+* Table-structural tags — preserve them as-is. Their semantics (`display:
+* table-*`) are critical for layout, and replacing them with `<div>` would
+* break the grid. Children are recursed normally.
+*/
+const TABLE_TAGS = new Set([
+	"table",
+	"thead",
+	"tbody",
+	"tfoot",
+	"tr",
+	"td",
+	"th",
+	"caption",
+	"colgroup",
+	"col"
+]);
+/**
+* List-structural tags — `<ul>`, `<ol>`, `<li>`, `<dl>`, `<dt>`, `<dd>`.
+* Preserved as containers; `<li>` recurses into its text/children so each
+* list item gets the right shimmer treatment.
+*/
+const LIST_TAGS = new Set([
+	"ul",
+	"ol",
+	"li",
+	"dl",
+	"dt",
+	"dd"
+]);
+/**
+* Tags whose content is conventionally text. When the author writes
+* `<h3>{{ data?.name }}</h3>` and `data` is null during loading, the
+* interpolation produces no children — the walker would otherwise emit an
+* empty `<h3></h3>` and no skeleton bar shows. For these tags we emit a
+* synthetic placeholder text-content span so the bar renders at the tag's
+* natural rendered width (Tailwind sizing on the tag still drives height).
+*/
+const TEXT_OWNER_TAGS = new Set([
+	"h1",
+	"h2",
+	"h3",
+	"h4",
+	"h5",
+	"h6",
+	"p",
+	"span",
+	"a",
+	"em",
+	"strong",
+	"small",
+	"code",
+	"b",
+	"i",
+	"mark",
+	"label",
+	"caption",
+	"time",
+	"dt",
+	"dd",
+	"li",
+	"th",
+	"td",
+	"figcaption",
+	"blockquote",
+	"cite",
+	"q"
+]);
+/**
+* Non-breaking-space placeholder for empty text-owners. ~24 chars wide is
+* enough to read as "a line of text" in most fonts while still being short
+* enough that the rendered bar doesn't wrap in narrow containers.
+*/
+const TEXT_PLACEHOLDER = "\xA0".repeat(24);
+const DEFAULT_MAX_DEPTH$3 = 16;
+const DEFAULT_MAX_NODES$3 = 600;
+/**
+* Walk a slot's vnode tree and produce a **DOM-mirror skeleton**: every element
+* is preserved (same tag, same `class`, same inline `style`), and only the
+* content is replaced. The output is structurally identical to what the real
+* component would render — Tailwind utilities for layout, spacing, sizing,
+* backgrounds and shadows all carry through. The CSS does the work of making
+* it *look* like a skeleton.
 *
-* Performance:
-*   - `maxNodes` caps the walk so a 5000-row table doesn't lock up the main thread.
-*   - `minSize` filters out hairlines (1-2 px paddings, decorative dots) that
-*     inflate node count without adding visual signal.
-*   - All `getBoundingClientRect` / `getComputedStyle` reads happen in a single
-*     top-down pass with no intervening writes, so the browser does one layout
-*     up front and serves cached values from then on (no layout thrashing).
-*   - Each emitted `ShapeNode` has a frozen pre-computed `style` (and `lineStyles`
-*     for multi-line text) so the render path is allocation-free.
+* Replacement rules:
+* - **Raw text** (e.g. interpolations, static strings) is wrapped in
+*   `<span class="a-skel-text-content">…the real text…</span>`. The text is
+*   kept as the span's children so the inline layout reserves its real
+*   rendered width — but the glyphs are painted transparent and a skeleton
+*   gradient is painted in their place. Multi-line text wraps naturally,
+*   producing one shimmer rect per visual line at the exact rendered position.
+* - **Atomic / interactive tags** (`img`, `svg`, `button`, `input`, …) are
+*   replaced by a `<div class="a-skel-block">` carrying the original element's
+*   `class` and `style`, so dimensions and shapes (size, border-radius, etc.)
+*   still drive the layout.
+* - **Container elements** (`div`, `section`, `h1`, `p`, `a`, `span`, …) are
+*   preserved as the same tag with the same `class` and `style`; we recurse
+*   into their children.
+* - **Component vnodes** can't be introspected at render time, so we emit a
+*   single `<div class="a-skel-block">` carrying their outer `class` / `style`.
 */
-function walkDom(root, options) {
-	const maxNodes = options.maxNodes ?? DEFAULT_MAX_NODES$1;
-	const minSize = options.minSize ?? DEFAULT_MIN_SIZE;
-	const nodes = [];
-	const rootRect = root.getBoundingClientRect();
-	let truncated = false;
-	function visit(el, depth) {
-		if (nodes.length >= maxNodes) {
-			truncated = true;
+function buildStructuralSkeleton(vnodes, opts) {
+	const maxDepth = opts.maxDepth ?? DEFAULT_MAX_DEPTH$3;
+	const state = {
+		emitted: 0,
+		cap: opts.maxNodes ?? DEFAULT_MAX_NODES$3
+	};
+	const out = [];
+	walk(vnodes, opts, 0, maxDepth, state, out);
+	return out;
+}
+function walk(input, opts, depth, max, state, out) {
+	if (state.emitted >= state.cap) return;
+	if (input == null || typeof input === "boolean") return;
+	if (Array.isArray(input)) {
+		for (let i = 0; i < input.length; i++) {
+			if (state.emitted >= state.cap) return;
+			walk(input[i], opts, depth, max, state, out);
+		}
+		return;
+	}
+	if (typeof input === "string" || typeof input === "number") {
+		const str = String(input);
+		if (str.trim()) push(out, textContentSpan(str, opts.animationClass), state);
+		return;
+	}
+	const v = input;
+	const type = v.type;
+	if (type === Comment) return;
+	if (type === Text) {
+		const text = typeof v.children === "string" ? v.children : "";
+		if (text.trim()) push(out, textContentSpan(text, opts.animationClass), state);
+		return;
+	}
+	if (type === Fragment) {
+		walk(v.children, opts, depth, max, state, out);
+		return;
+	}
+	if (typeof type === "string") {
+		const tag = type.toLowerCase();
+		if (SVG_INTERIOR_TAGS.has(tag)) return;
+		const props = v.props ?? {};
+		if (props["data-skeleton-ignore"] !== void 0) {
+			push(out, cloneVNode(v), state);
 			return;
 		}
-		const html = el;
-		if (html.dataset?.skeletonIgnore !== void 0) return;
-		const cs = window.getComputedStyle(el);
-		if (cs.display === "none" || cs.visibility === "hidden" || cs.opacity === "0") return;
-		const rect = el.getBoundingClientRect();
-		if (rect.width < minSize || rect.height < minSize) return;
-		const tag = el.tagName.toUpperCase();
-		const isLeafTag = LEAF_TAGS.has(tag);
-		const hasStop = html.dataset?.skeletonStop !== void 0;
-		const childElements = [];
-		for (let i = 0; i < el.children.length; i++) {
-			const c = el.children[i];
-			if (c.dataset?.skeletonIgnore === void 0) childElements.push(c);
+		if (props["data-skeleton-stop"] !== void 0) {
+			push(out, h("div", {
+				class: [
+					"a-skel-block",
+					v.props?.class,
+					opts.animationClass
+				],
+				style: v.props?.style,
+				"aria-hidden": "true"
+			}), state);
+			return;
 		}
-		const hasOwnText = hasDirectTextContent(el);
-		const reachedDepth = depth >= options.maxDepth;
-		if (isLeafTag || hasStop || reachedDepth || childElements.length === 0) {
-			const node = elementToShape(tag, cs, rect, rootRect, hasOwnText);
-			if (node) nodes.push(node);
+		if (props["data-skeleton-text"] !== void 0) {
+			push(out, textContentSpan(" ", opts.animationClass), state);
 			return;
 		}
-		for (let i = 0; i < childElements.length; i++) {
-			if (nodes.length >= maxNodes) {
-				truncated = true;
-				return;
-			}
-			visit(childElements[i], depth + 1);
+		if (props["data-skeleton-block"] !== void 0) {
+			push(out, h("div", {
+				class: [
+					"a-skel-block",
+					v.props?.class,
+					opts.animationClass
+				],
+				style: v.props?.style,
+				"aria-hidden": "true"
+			}), state);
+			return;
 		}
+		push(out, transformElement(v, tag, opts, depth, max, state), state);
+		return;
 	}
-	for (let i = 0; i < root.children.length; i++) {
-		if (nodes.length >= maxNodes) {
-			truncated = true;
-			break;
-		}
-		visit(root.children[i], 1);
+	if (typeof type === "object" || typeof type === "function") push(out, h("div", {
+		class: [
+			"a-skel-block",
+			v.props?.class,
+			opts.animationClass
+		],
+		style: v.props?.style,
+		"aria-hidden": "true"
+	}), state);
+}
+function push(out, vn, state) {
+	if (state.emitted >= state.cap) return;
+	out.push(vn);
+	state.emitted++;
+}
+/**
+* Surface-bearing tags — when these are encountered without their own explicit
+* background, the skeleton paints the default fill so they still read as a
+* solid element (a button without `bg-*` shouldn't look invisible).
+*
+* Pure layout containers (`div`, `section`, `main`, `article`, `header`,
+* `footer`, `nav`, `aside`) deliberately don't get the fallback — they're
+* transparent in the real DOM and should stay that way in the skeleton.
+*/
+const SURFACE_TAGS = new Set([
+	"button",
+	"a",
+	"label",
+	"summary",
+	"fieldset",
+	"legend"
+]);
+function transformElement(v, tag, opts, depth, max, state) {
+	const cls = v.props?.class;
+	const styl = v.props?.style;
+	if (ATOMIC_TAGS$2.has(tag)) {
+		const dimStyle = atomicDimensionStyle(v.props);
+		return h("div", {
+			class: [
+				"a-skel-block",
+				cls,
+				opts.animationClass
+			],
+			style: dimStyle ? mergeStyle(dimStyle, styl) : styl,
+			"aria-hidden": "true"
+		});
 	}
-	return Object.freeze({
-		nodes: Object.freeze(nodes),
-		width: Math.round(rootRect.width),
-		height: Math.round(rootRect.height),
-		truncated
+	if (TABLE_TAGS.has(tag)) {
+		if (depth >= max) return h(tag, {
+			class: cls,
+			style: styl
+		});
+		const recursed = [];
+		walk(v.children, opts, depth + 1, max, state, recursed);
+		if (recursed.length === 0 && TEXT_OWNER_TAGS.has(tag)) return h(tag, {
+			class: cls,
+			style: styl
+		}, [textContentSpan(TEXT_PLACEHOLDER, opts.animationClass)]);
+		return h(tag, {
+			class: cls,
+			style: styl
+		}, recursed.length > 0 ? recursed : void 0);
+	}
+	if (LIST_TAGS.has(tag)) {
+		if (depth >= max) return h(tag, {
+			class: cls,
+			style: styl
+		});
+		const recursed = [];
+		walk(v.children, opts, depth + 1, max, state, recursed);
+		if (recursed.length === 0 && TEXT_OWNER_TAGS.has(tag)) return h(tag, {
+			class: cls,
+			style: styl
+		}, [textContentSpan(TEXT_PLACEHOLDER, opts.animationClass)]);
+		return h(tag, {
+			class: cls,
+			style: styl
+		}, recursed.length > 0 ? recursed : void 0);
+	}
+	if (depth >= max) return h("div", {
+		class: [
+			"a-skel-block",
+			cls,
+			opts.animationClass
+		],
+		style: styl,
+		"aria-hidden": "true"
+	});
+	const recursed = [];
+	walk(v.children, opts, depth + 1, max, state, recursed);
+	if (recursed.length === 0 && TEXT_OWNER_TAGS.has(tag)) return h(tag, {
+		class: cls,
+		style: styl
+	}, [textContentSpan(TEXT_PLACEHOLDER, opts.animationClass)]);
+	if (recursed.length === 0) return h(tag, {
+		class: cls,
+		style: styl
 	});
+	if (SURFACE_TAGS.has(tag) && !hasExplicitBackground(cls, styl)) return h(tag, {
+		class: [
+			"a-skel-block",
+			cls,
+			opts.animationClass
+		],
+		style: styl
+	}, recursed);
+	return cloneTag(tag, cls, styl, recursed);
 }
-function hasDirectTextContent(el) {
-	for (let i = 0; i < el.childNodes.length; i++) {
-		const node = el.childNodes[i];
-		if (node.nodeType === Node.TEXT_NODE && (node.textContent ?? "").trim().length > 0) return true;
+/**
+* Extract width/height from HTML attributes that affect layout (`<svg
+* width="408">`, `<img width="…" height="…">`) and project them into inline
+* style. Without this, replacing an attribute-sized atomic element with a
+* `<div>` would drop the size — divs don't honour those attributes.
+*/
+function atomicDimensionStyle(props) {
+	if (!props) return null;
+	const out = {};
+	const w = props.width;
+	const h = props.height;
+	if (w !== void 0 && w !== null && w !== "") out.width = typeof w === "number" ? `${w}px` : /^\d+$/.test(String(w)) ? `${w}px` : String(w);
+	if (h !== void 0 && h !== null && h !== "") out.height = typeof h === "number" ? `${h}px` : /^\d+$/.test(String(h)) ? `${h}px` : String(h);
+	return Object.keys(out).length > 0 ? out : null;
+}
+/**
+* Detect whether the element has an explicit background — either via a
+* Tailwind / DaisyUI / CSS-modules `bg-*` class or via an inline
+* `background` / `background-color` / `background-image` style. When false,
+* surface-bearing elements (button, a, label, …) fall back to the default
+* skeleton fill so they don't render as a transparent gap during loading.
+*/
+function hasExplicitBackground(cls, styl) {
+	if (hasBackgroundInStyle(styl)) return true;
+	if (hasBackgroundInClass(cls)) return true;
+	return false;
+}
+const BG_CLASS_RE = /(?:^|\s|:)bg-(?!skel)(?:\[|[a-z])/i;
+function hasBackgroundInClass(cls) {
+	if (cls == null || cls === false) return false;
+	if (typeof cls === "string") return BG_CLASS_RE.test(cls);
+	if (Array.isArray(cls)) {
+		for (const item of cls) if (hasBackgroundInClass(item)) return true;
+		return false;
+	}
+	if (typeof cls === "object") {
+		for (const k of Object.keys(cls)) if (cls[k] && BG_CLASS_RE.test(k)) return true;
 	}
 	return false;
 }
-function elementToShape(tag, cs, rect, origin, hasText) {
-	const x = Math.round(rect.left - origin.left);
-	const y = Math.round(rect.top - origin.top);
-	const w = Math.round(rect.width);
-	const h = Math.round(rect.height);
-	const radius = parseFloat(cs.borderRadius) || 0;
-	const minDim = Math.min(w, h);
-	const isCircle = radius >= minDim / 2 - 1 && Math.abs(w - h) <= 2 && minDim > 0;
-	let type;
-	let resolvedRadius = radius;
-	let lines;
-	let lineHeight;
-	if (tag === "IMG" || tag === "SVG" || tag === "VIDEO" || tag === "CANVAS") type = "image";
-	else if (isCircle) {
-		type = "circle";
-		resolvedRadius = Math.floor(minDim / 2);
-	} else if (hasText) {
-		type = "text";
-		lineHeight = Math.round(parseFloat(cs.lineHeight) || parseFloat(cs.fontSize) * 1.4 || 16);
-		lines = Math.max(1, Math.round(h / lineHeight));
-		resolvedRadius = Math.min(radius, 4);
-	} else type = "block";
-	return freezeShape({
-		type,
-		x,
-		y,
-		w,
-		h,
-		radius: resolvedRadius,
-		lines,
-		lineHeight
-	});
+function hasBackgroundInStyle(styl) {
+	if (!styl) return false;
+	if (typeof styl === "string") return /background(?:-color|-image)?\s*:/i.test(styl);
+	if (typeof styl === "object") {
+		const s = styl;
+		return "background" in s || "backgroundColor" in s || "backgroundImage" in s || "background-color" in s || "background-image" in s;
+	}
+	return false;
 }
-/**
-* Pre-compute (and freeze) the inline styles used at render time. Doing it once
-* here means rendering 500 blocks doesn't allocate 500 style objects per frame.
+function mergeStyle(a, b) {
+	if (!b) return a;
+	if (typeof b === "string") return `${Object.entries(a).map(([k, v]) => `${k}: ${v}`).join("; ")}; ${b}`;
+	return {
+		...a,
+		...b
+	};
+}
+function cloneTag(tag, cls, styl, children) {
+	return h(tag, {
+		class: cls,
+		style: styl
+	}, children);
+}
+function textContentSpan(text, animationClass) {
+	return h("span", {
+		class: ["a-skel-text-content", animationClass],
+		"aria-hidden": "true"
+	}, text);
+}
+//#endregion
+//#region src/components/StructuralSkeleton.ts
+/**
+* Renders a structural skeleton derived from a slot's vnode tree. Pure render
+* function — no template, no scoped styles — so the parent's class strings
+* pass through unchanged and Tailwind utilities continue to drive layout.
+*
+* `maxNodes` is forwarded to the walker; cap defaults to 300 (see
+* `buildStructuralSkeleton`). Beyond that the walk stops emitting and the cap
+* propagates back as a clipped tree, keeping first-paint bounded.
 */
-function freezeShape(node) {
-	const style = Object.freeze({
-		left: `${node.x}px`,
-		top: `${node.y}px`,
-		width: `${node.w}px`,
-		height: `${node.h}px`,
-		borderRadius: `${node.radius}px`
-	});
-	let lineStyles;
-	if (node.type === "text" && node.lines && node.lines > 1) {
-		const lh = node.lineHeight ?? Math.round(node.h / node.lines);
-		const barHeight = Math.max(8, Math.round(lh * .7));
-		const widthFull = `${node.w}px`;
-		const widthLast = `${Math.max(40, Math.round(node.w * .7))}px`;
-		const heightStr = `${barHeight}px`;
-		const radiusStr = `${node.radius}px`;
-		const arr = [];
-		for (let i = 1; i <= node.lines; i++) {
-			const isLast = i === node.lines;
-			arr.push(Object.freeze({
-				left: `${node.x}px`,
-				top: `${node.y + (i - 1) * lh}px`,
-				width: isLast ? widthLast : widthFull,
-				height: heightStr,
-				borderRadius: radiusStr
-			}));
+const StructuralSkeleton = defineComponent({
+	name: "StructuralSkeleton",
+	props: {
+		vnodes: {
+			type: Array,
+			required: true
+		},
+		animation: {
+			type: String,
+			default: null
+		},
+		maxDepth: {
+			type: Number,
+			default: 8
+		},
+		maxNodes: {
+			type: Number,
+			default: 300
 		}
-		lineStyles = Object.freeze(arr);
+	},
+	setup(props) {
+		return () => buildStructuralSkeleton(props.vnodes, {
+			animationClass: props.animation,
+			maxDepth: props.maxDepth,
+			maxNodes: props.maxNodes
+		});
 	}
-	return Object.freeze({
-		type: node.type,
+});
+//#endregion
+//#region src/components/icons.ts
+/**
+* Shared placeholder icon renderers for leaf nodes (image / video). Lives at
+* one site so both `CloneNode.ts` (clone mode) and `StructuralLayerNode.ts`
+* (Recipe 3 structural mode) render identical glyphs.
+*/
+function renderImageIcon() {
+	return h("svg", {
+		class: "a-skel-clone-icon",
+		viewBox: "0 0 24 24",
+		"aria-hidden": "true"
+	}, [h("path", {
+		d: "M19 5H5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2Zm-3.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM19 17H5l3.5-4.5 2.5 3 3.5-4.5L19 17Z",
+		fill: "currentColor"
+	})]);
+}
+function renderPlayIcon() {
+	return h("svg", {
+		class: "a-skel-clone-icon",
+		viewBox: "0 0 24 24",
+		"aria-hidden": "true"
+	}, [h("circle", {
+		cx: 12,
+		cy: 12,
+		r: 10,
+		stroke: "currentColor",
+		"stroke-width": 1.5,
+		fill: "none"
+	}), h("path", {
+		d: "M10 8l6 4-6 4V8Z",
+		fill: "currentColor"
+	})]);
+}
+//#endregion
+//#region src/components/CloneNode.ts
+/**
+* `CloneNode` — recursive renderer for one node of a `CaptureSnapshot`.
+*
+* Design:
+*   - **Strategy table by `CapturedNode.kind`**. Each kind ('container' |
+*     'text' | 'image' | 'video' | 'media' | 'block') has its own renderer
+*     function. Adding a new kind is one entry in `RENDERERS` — no edits
+*     elsewhere (Open/Closed).
+*   - **Pure render function**. No reactive state of its own; everything
+*     flows from props.
+*   - **Composition**: per-line text bars share the same shape as block
+*     leaves so there's no behaviour duplication.
+*/
+const RENDERERS$1 = {
+	container: renderContainer$1,
+	text: renderText,
+	image: (ctx) => renderLeafWithIcon$1(ctx, "image"),
+	video: (ctx) => renderLeafWithIcon$1(ctx, "video"),
+	media: (ctx) => renderLeaf(ctx),
+	block: (ctx) => renderLeaf(ctx)
+};
+/**
+* Container — positioned wrapper with captured background / border / shadow.
+* No `.a-skel` class so the surface shows through exactly as in the real DOM.
+* Recurse into children via the same `CloneNode`.
+*
+* `CapturedNode.{x,y}` is always root-relative, but children render inside
+* this container — itself `position: absolute`. If we hand children the
+* root-relative coords as-is, their `left` / `top` resolve against the
+* container (their new offset parent), doubling the offset. Pass a
+* `blockStyle` closure that subtracts this container's offset so each
+* descendant lands at its captured root-relative position regardless of
+* how deeply it's nested.
+*/
+function renderContainer$1(ctx) {
+	const { node } = ctx;
+	const childBlockStyle = (n) => ({
+		position: "absolute",
+		left: `${n.x - node.x}px`,
+		top: `${n.y - node.y}px`,
+		width: `${n.w}px`,
+		height: `${n.h}px`,
+		...n.style
+	});
+	return h("div", {
+		class: "a-skel-clone-container",
+		style: ctx.blockStyle(node),
+		"aria-hidden": "true"
+	}, (node.children ?? []).map((child) => h(CloneNode, {
+		node: child,
+		animClass: ctx.animClass,
+		blockStyle: childBlockStyle,
+		lineStyle: ctx.lineStyle
+	})));
+}
+/**
+* Text — container carrying captured background/border, with per-line
+* shimmer bars positioned absolutely inside. Each text line becomes one bar
+* at the exact rendered text rect (multi-line / wrapped / RTL all replay 1:1).
+*/
+function renderText(ctx) {
+	const { node, animClass } = ctx;
+	const lines = node.textLines ?? [{
 		x: node.x,
 		y: node.y,
 		w: node.w,
-		h: node.h,
-		radius: node.radius,
-		lines: node.lines,
-		lineHeight: node.lineHeight,
-		style,
-		lineStyles
+		h: node.h
+	}];
+	return h("div", {
+		class: "a-skel-clone-container a-skel-clone-text",
+		style: ctx.blockStyle(node),
+		"aria-hidden": "true"
+	}, lines.map((line) => h("div", {
+		class: ["a-skel-clone-textbar", animClass],
+		style: ctx.lineStyle({
+			x: line.x - node.x,
+			y: line.y - node.y,
+			w: line.w,
+			h: line.h
+		}, node.style)
+	})));
+}
+/** Plain shimmer leaf (block / media). */
+function renderLeaf(ctx) {
+	return h("div", {
+		class: ["a-skel a-skel-clone-leaf", ctx.animClass],
+		style: ctx.blockStyle(ctx.node),
+		"aria-hidden": "true"
 	});
 }
+/** Shimmer leaf with a centered placeholder icon (image / video). */
+function renderLeafWithIcon$1(ctx, kind) {
+	return h("div", {
+		class: ["a-skel a-skel-clone-leaf a-skel-clone-leaf--with-icon", ctx.animClass],
+		style: ctx.blockStyle(ctx.node),
+		"aria-hidden": "true"
+	}, [kind === "image" ? renderImageIcon() : renderPlayIcon()]);
+}
+const CloneNode = defineComponent({
+	name: "CloneNode",
+	props: {
+		node: {
+			type: Object,
+			required: true
+		},
+		animClass: {
+			type: [String, null],
+			default: null
+		},
+		blockStyle: {
+			type: Function,
+			required: true
+		},
+		lineStyle: {
+			type: Function,
+			required: true
+		}
+	},
+	setup(props) {
+		return () => {
+			const renderer = RENDERERS$1[props.node.kind];
+			return renderer({
+				node: props.node,
+				animClass: props.animClass,
+				blockStyle: props.blockStyle,
+				lineStyle: props.lineStyle
+			});
+		};
+	}
+});
 //#endregion
-//#region src/composables/useShapeProbe.ts
-const DEFAULT_RESIZE_DEBOUNCE_MS = 150;
-/**
-* Observe `getTarget()` and capture its rendered shape whenever the element
-* appears or resizes.
-*
-* Performance:
-*   - Initial capture runs via `requestAnimationFrame` so it sneaks into the
-*     first idle window after mount — no synchronous layout from inside the
-*     render queue.
-*   - Subsequent `ResizeObserver` callbacks are debounced (default 150 ms) so a
-*     drag-resize doesn't trigger a fresh DOM walk per frame.
-*   - `walkDom` itself enforces `maxNodes` so even a worst-case capture (10k
-*     descendants) returns in bounded time.
-*/
-function useShapeProbe(getTarget, options) {
-	let observer;
-	let frame;
-	let timer;
-	let hasCaptured = false;
-	const debounceMs = options.resizeDebounceMs ?? DEFAULT_RESIZE_DEBOUNCE_MS;
-	function cleanup() {
-		if (observer) {
-			observer.disconnect();
-			observer = void 0;
+//#region \0/plugin-vue/export-helper
+var export_helper_default = (sfc, props) => {
+	const target = sfc.__vccOpts || sfc;
+	for (const [key, val] of props) target[key] = val;
+	return target;
+};
+//#endregion
+//#region src/components/ASkeletonClone.vue
+const _sfc_main$18 = /* @__PURE__ */ defineComponent({
+	__name: "ASkeletonClone",
+	props: {
+		shape: {
+			type: Object,
+			required: true
+		},
+		animation: {
+			type: String,
+			required: false,
+			default: "pulse"
+		},
+		class: {
+			type: [
+				String,
+				Array,
+				Object
+			],
+			required: false
 		}
-		if (frame !== void 0) {
-			cancelAnimationFrame(frame);
-			frame = void 0;
+	},
+	setup(__props, { expose: __expose }) {
+		__expose();
+		const props = __props;
+		const animClass = computed(() => props.animation === "none" ? null : `a-skel-anim-${props.animation}`);
+		const layerStyle = computed(() => ({
+			position: "relative",
+			width: `${props.shape.width}px`,
+			height: `${props.shape.height}px`
+		}));
+		function blockStyle(n) {
+			return {
+				position: "absolute",
+				left: `${n.x}px`,
+				top: `${n.y}px`,
+				width: `${n.w}px`,
+				height: `${n.h}px`,
+				...n.style
+			};
 		}
-		if (timer !== void 0) {
-			clearTimeout(timer);
-			timer = void 0;
+		function lineStyle(line, parentStyle) {
+			const radius = parentStyle.borderTopLeftRadius ?? "var(--ak-skel-radius-sm)";
+			return {
+				position: "absolute",
+				left: `${line.x}px`,
+				top: `${line.y}px`,
+				width: `${line.w}px`,
+				height: `${line.h}px`,
+				backgroundColor: "var(--ak-skel-base)",
+				borderRadius: radius
+			};
 		}
-	}
-	function capture(el) {
-		const result = walkDom(el, {
-			maxDepth: options.maxDepth,
-			maxNodes: options.maxNodes,
-			minSize: options.minSize
+		const __returned__ = {
+			props,
+			animClass,
+			layerStyle,
+			blockStyle,
+			lineStyle,
+			get cn() {
+				return cn;
+			},
+			get CloneNode() {
+				return CloneNode;
+			}
+		};
+		Object.defineProperty(__returned__, "__isScriptSetup", {
+			enumerable: false,
+			value: true
 		});
-		if (result.width > 0 && result.height > 0 && result.nodes.length > 0) {
-			hasCaptured = true;
-			options.onCapture(result);
-		}
+		return __returned__;
 	}
-	function scheduleImmediate(el) {
-		if (frame !== void 0) cancelAnimationFrame(frame);
-		frame = requestAnimationFrame(() => {
-			frame = void 0;
-			capture(el);
-		});
+});
+function _sfc_render$18(_ctx, _cache, $props, $setup, $data, $options) {
+	return openBlock(), createElementBlock("div", {
+		class: normalizeClass($setup.cn("a-skeleton__clone", $setup.props.class)),
+		style: normalizeStyle($setup.layerStyle),
+		role: "status",
+		"aria-busy": "true",
+		"aria-live": "polite"
+	}, [(openBlock(true), createElementBlock(Fragment, null, renderList($setup.props.shape.nodes, (node, idx) => {
+		return openBlock(), createBlock($setup["CloneNode"], {
+			key: idx,
+			node,
+			"anim-class": $setup.animClass,
+			"block-style": $setup.blockStyle,
+			"line-style": $setup.lineStyle
+		}, null, 8, ["node", "anim-class"]);
+	}), 128)), _cache[0] || (_cache[0] = createElementVNode("span", { class: "a-skel-sr-only" }, "Loading…", -1))], 6);
+}
+var ASkeletonClone_default = /* @__PURE__ */ export_helper_default(_sfc_main$18, [
+	["render", _sfc_render$18],
+	["__scopeId", "data-v-1554ff36"],
+	["__file", "/Users/alikhalill/Desktop/my-projects/ali-nuxt-toolkit/packages/ui-components/ASkeleton/src/components/ASkeletonClone.vue"]
+]);
+//#endregion
+//#region src/utils/domRead.ts
+/**
+* Computed values that count as "default" and shouldn't be persisted. Stripped
+* before a captured `style` object lands on a node so a plain unstyled element
+* produces an empty style — keeps snapshots small and the rendered DOM clean.
+*/
+const SKIP_VALUES = new Set([
+	"none",
+	"normal",
+	"auto",
+	"0px",
+	"0",
+	"0 0",
+	"0% 0%",
+	"0px 0px",
+	"0deg",
+	"0s",
+	"visible",
+	"static",
+	"transparent",
+	"rgba(0, 0, 0, 0)",
+	"rgb(0, 0, 0, 0)",
+	"initial",
+	"inherit",
+	"unset",
+	"currentcolor"
+]);
+/**
+* Read the subset of `props` from `cs` and return a frozen camelCased style
+* map with the SKIP_VALUES entries omitted. `opacity: 1` is treated as default
+* (matches CSS' initial value).
+*/
+function readComputedStyles(cs, props) {
+	const out = {};
+	for (const prop of props) {
+		const val = cs.getPropertyValue(prop).trim();
+		if (!val) continue;
+		if (SKIP_VALUES.has(val.toLowerCase())) continue;
+		if (prop === "opacity" && (val === "1" || parseFloat(val) === 1)) continue;
+		out[camelCase(prop)] = val;
 	}
-	function scheduleDebounced(el) {
-		if (timer !== void 0) clearTimeout(timer);
-		timer = setTimeout(() => {
-			timer = void 0;
-			capture(el);
-		}, debounceMs);
+	return Object.freeze(out);
+}
+function camelCase(prop) {
+	return prop.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+}
+/** True when the element has at least one non-whitespace direct text-node child. */
+function hasDirectText(el) {
+	for (let i = 0; i < el.childNodes.length; i++) {
+		const node = el.childNodes[i];
+		if (node.nodeType === Node.TEXT_NODE && (node.textContent ?? "").trim().length > 0) return true;
 	}
-	watch(getTarget, (el) => {
-		cleanup();
-		hasCaptured = false;
-		if (!el || typeof window === "undefined") return;
-		scheduleImmediate(el);
-		if (typeof ResizeObserver !== "undefined") {
-			observer = new ResizeObserver(() => {
-				if (hasCaptured) scheduleDebounced(el);
-			});
-			observer.observe(el);
-		}
-	}, {
-		immediate: true,
-		flush: "post"
-	});
-	onBeforeUnmount(cleanup);
+	return false;
+}
+/** Element children, with `data-skeleton-ignore` descendants filtered out. */
+function collectVisibleChildren(el) {
+	const out = [];
+	for (let i = 0; i < el.children.length; i++) {
+		const c = el.children[i];
+		if (c.dataset?.skeletonIgnore !== void 0) continue;
+		out.push(c);
+	}
+	return out;
 }
-//#endregion
-//#region src/composables/useSkeletonCache.ts
-const memory = /* @__PURE__ */ new Map();
-const STORAGE_PREFIX = "a-skeleton:";
 /**
-* Lookup a captured shape by key. Reads in-memory first, then `localStorage` if
-* `persist` is enabled. SSR-safe — bypasses `window` access on the server.
-* Rehydrates pre-computed styles for shapes deserialized from older sessions
-* (Object.freeze + style/lineStyles don't survive `JSON.stringify` round-trip).
+* Per-line text rects via `Range.getClientRects()`. Returns one rect per visual
+* line — exact left/width for each line so wrapped paragraphs, RTL last-line
+* positions, centered headings replay 1:1 without heuristics. Returns
+* `undefined` if the element has no direct text or the Range API isn't usable.
+*
+* Two rects on the same baseline AND horizontally touching (gap ≤ 2 px) are
+* merged so inline spans on the same line collapse to one bar. Same-baseline
+* rects on different visual lines (rare; float-into-paragraph layouts) won't
+* touch horizontally and stay separate.
 */
-function getCached(key, persist) {
-	const hit = memory.get(key);
-	if (hit) return hit;
-	if (!persist || typeof window === "undefined") return void 0;
+function captureTextLines(el, origin) {
+	if (typeof document === "undefined" || typeof document.createRange !== "function") return void 0;
+	let range;
 	try {
-		const raw = window.localStorage.getItem(STORAGE_PREFIX + key);
-		if (!raw) return void 0;
-		const rehydrated = rehydrateShape(JSON.parse(raw));
-		memory.set(key, rehydrated);
-		return rehydrated;
+		range = document.createRange();
+		range.selectNodeContents(el);
 	} catch {
 		return;
 	}
-}
-/** Store a captured shape. `persist=true` mirrors to `localStorage`. */
-function setCached(key, value, persist) {
-	memory.set(key, value);
-	if (!persist || typeof window === "undefined") return;
-	try {
-		const lean = {
-			width: value.width,
-			height: value.height,
-			nodes: leanNodes(value.nodes)
-		};
-		window.localStorage.setItem(STORAGE_PREFIX + key, JSON.stringify(lean));
-	} catch {}
-}
-/** Drop a single entry (or all entries when no key). Exposed for tests + manual invalidation. */
-function clearCached(key) {
-	if (!key) {
-		memory.clear();
-		if (typeof window === "undefined") return;
-		try {
-			for (const k of Object.keys(window.localStorage)) if (k.startsWith(STORAGE_PREFIX)) window.localStorage.removeItem(k);
-		} catch {}
-		return;
-	}
-	memory.delete(key);
-	if (typeof window === "undefined") return;
-	try {
-		window.localStorage.removeItem(STORAGE_PREFIX + key);
-	} catch {}
-}
-/**
-* Rebuild `style` + `lineStyles` for nodes that lost them via serialization.
-* Walks the array in-place where possible and freezes the result so the render
-* path stays allocation-free.
-*/
-function rehydrateShape(shape) {
-	const nodes = shape.nodes.map((n) => n.style ? n : freezeNodeStyles(n));
-	return Object.freeze({
-		nodes: Object.freeze(nodes),
-		width: shape.width,
-		height: shape.height,
-		truncated: shape.truncated
-	});
-}
-function leanNodes(nodes) {
-	return nodes.map((n) => ({
-		type: n.type,
-		x: n.x,
-		y: n.y,
-		w: n.w,
-		h: n.h,
-		radius: n.radius,
-		lines: n.lines,
-		lineHeight: n.lineHeight
-	}));
-}
-function freezeNodeStyles(node) {
-	const style = Object.freeze({
-		left: `${node.x}px`,
-		top: `${node.y}px`,
-		width: `${node.w}px`,
-		height: `${node.h}px`,
-		borderRadius: `${node.radius}px`
-	});
-	let lineStyles;
-	if (node.type === "text" && node.lines && node.lines > 1) {
-		const lh = node.lineHeight ?? Math.round(node.h / node.lines);
-		const barHeight = Math.max(8, Math.round(lh * .7));
-		const widthFull = `${node.w}px`;
-		const widthLast = `${Math.max(40, Math.round(node.w * .7))}px`;
-		const heightStr = `${barHeight}px`;
-		const radiusStr = `${node.radius}px`;
-		const arr = [];
-		for (let i = 1; i <= node.lines; i++) {
-			const isLast = i === node.lines;
-			arr.push(Object.freeze({
-				left: `${node.x}px`,
-				top: `${node.y + (i - 1) * lh}px`,
-				width: isLast ? widthLast : widthFull,
-				height: heightStr,
-				borderRadius: radiusStr
-			}));
-		}
-		lineStyles = Object.freeze(arr);
-	}
-	return Object.freeze({
-		type: node.type,
-		x: node.x,
-		y: node.y,
-		w: node.w,
-		h: node.h,
-		radius: node.radius,
-		lines: node.lines,
-		lineHeight: node.lineHeight,
-		style,
-		lineStyles
-	});
-}
-//#endregion
-//#region src/utils/fingerprint.ts
-/**
-* Derive a default cache key from a slot's vnode tree. Returns the first
-* non-comment child's component name (or HTML tag). When the slot only contains
-* text / comments / unknown content, returns `'anonymous'` so the caller can
-* still cache, but with no useful identity — encourage an explicit `cacheKey`.
-*/
-function fingerprintSlot(vnodes) {
-	if (!vnodes) return "anonymous";
-	for (const vnode of vnodes) {
-		const tag = describeVNode(vnode);
-		if (tag) return tag;
-	}
-	return "anonymous";
-}
-function describeVNode(vnode) {
-	const t = vnode.type;
-	if (t === Comment || t === Text) return void 0;
-	if (t === Fragment) {
-		const children = vnode.children;
-		if (Array.isArray(children)) {
-			for (const child of children) if (child && typeof child === "object" && "type" in child) {
-				const found = describeVNode(child);
-				if (found) return found;
-			}
-		}
-		return;
-	}
-	if (typeof t === "string") return t;
-	if (typeof t === "object" && t !== null) {
-		const named = t.name ?? t.__name ?? t.displayName;
-		if (named) return named;
-	}
+	const rects = range.getClientRects();
+	if (!rects || rects.length === 0) return void 0;
+	const merged = [];
+	for (let i = 0; i < rects.length; i++) {
+		const r = rects[i];
+		if (r.width <= 0 || r.height <= 0) continue;
+		const lr = {
+			x: Math.round(r.left - origin.left),
+			y: Math.round(r.top - origin.top),
+			w: Math.round(r.width),
+			h: Math.round(r.height)
+		};
+		const last = merged[merged.length - 1];
+		if (last && Math.abs(last.y - lr.y) <= 1 && Math.abs(last.h - lr.h) <= 1 && Math.max(last.x, lr.x) - Math.min(last.x + last.w, lr.x + lr.w) <= 2) {
+			const leftEdge = Math.min(last.x, lr.x);
+			const rightEdge = Math.max(last.x + last.w, lr.x + lr.w);
+			last.x = leftEdge;
+			last.w = rightEdge - leftEdge;
+		} else merged.push(lr);
+	}
+	return merged.length > 0 ? merged : void 0;
 }
 //#endregion
-//#region src/utils/buildStructuralSkeleton.ts
+//#region src/utils/captureStyles.ts
 /**
-* Atomic HTML tags — rendered as a single skeleton block. Their own class/style
-* is preserved so Tailwind utilities (`size-16`, `rounded-full`, …) carry the
-* dimensions across without us needing to measure.
+* Comprehensive style-capture engine.
+*
+* Walks the slot's rendered DOM after mount and captures **every visible CSS
+* property** of every element it encounters, plus geometry, into a frozen
+* snapshot tree. The snapshot is replayed by `<ASkeletonClone>` as a tree
+* of positioned divs each carrying its captured inline style.
+*
+* Why this exists (vs the DOM-mirror walker in `buildStructuralSkeleton.ts`):
+*
+*   - DOM-mirror preserves the slot's vnode tree and inherits styling from the
+*     consumer's `class` / inline `style` attributes. That works for *static*
+*     styles, but it can't see styles applied via:
+*       - JavaScript-set inline style (refs, watchers, animation libs)
+*       - CSS-in-JS runtimes that hash class names per instance
+*       - DaisyUI / shadcn / custom CSS where the computed result differs
+*         from what the class string implies
+*       - Scoped styles compiled with content-hash data attributes
+*
+*   - `captureSnapshot` reads `getComputedStyle()` for each element — the
+*     **final** computed style after the cascade has resolved. Replaying that
+*     produces a pixel-identical surface no matter what styling system the
+*     consumer uses.
+*
+* Cost is bounded by the same `maxNodes` / `maxDepth` / `minSize` filters
+* as the legacy `walkDom` capture. The whole pass is a single top-down read
+* with no DOM writes between, so the browser does one layout up front.
 */
-const ATOMIC_TAGS = new Set([
+const DEFAULT_MAX_DEPTH$2 = 12;
+const DEFAULT_MAX_NODES$2 = 800;
+const DEFAULT_MIN_SIZE$2 = 4;
+/** Tags treated as atomic leaves — no recursion into their contents. */
+const ATOMIC_TAGS$1 = new Set([
 	"img",
 	"svg",
 	"canvas",
 	"video",
+	"audio",
 	"input",
 	"textarea",
 	"select",
-	"button",
 	"progress",
 	"meter",
-	"hr"
+	"hr",
+	"iframe",
+	"object",
+	"embed",
+	"picture",
+	"br"
 ]);
-/** Single-line text containers — produce one bar. */
-const HEADING_TAGS = new Set([
+/** Tags whose content is text — captured as text bars (per-line via Range). */
+const TEXT_OWNERS$1 = new Set([
+	"p",
 	"h1",
 	"h2",
 	"h3",
 	"h4",
 	"h5",
-	"h6"
-]);
-/** Multi-line text containers — produce N bars with a shortened last line. */
-const PARAGRAPH_TAGS = new Set(["p", "blockquote"]);
-/** Inline text — single bar, but inherits parent font sizing. */
-const INLINE_TEXT_TAGS = new Set([
+	"h6",
 	"span",
 	"a",
-	"small",
-	"strong",
 	"em",
+	"strong",
+	"small",
 	"code",
-	"time",
-	"label",
 	"b",
 	"i",
-	"mark"
+	"mark",
+	"label",
+	"caption",
+	"time",
+	"dt",
+	"dd",
+	"li",
+	"th",
+	"td",
+	"figcaption",
+	"blockquote",
+	"cite",
+	"q"
 ]);
-const DEFAULT_MAX_DEPTH = 8;
-const DEFAULT_MAX_NODES = 300;
 /**
-* Walk a slot's vnode tree and produce a skeleton that mirrors its rendered
-* structure: same wrapping tags, same `class` strings (so flex/grid/spacing/
-* sizing utilities still apply), but text/atomic leaves replaced with shimmer
-* blocks. The result renders correctly on the FIRST paint without any DOM
-* measurement, as long as the slot's template renders structure even when its
-* data is empty (use `v-if`/`v-else` to swap content, not to gate the wrapper).
+* Visual CSS properties read from `getComputedStyle()`. Property listed here
+* is included in the captured snapshot **only when its value differs from the
+* skip set** — so a plain unstyled `<div>` produces an empty style object.
 *
-* Performance: `maxNodes` caps the work. When the cap is hit we stop emitting
-* — the caller still gets a valid skeleton, just clipped at the budget. A 1000-
-* row list renders ~300 skeleton rows on first paint and then the measured cache
-* takes over for subsequent loads.
+* Listed in the order they're written into the snapshot's `style` object so
+* the replay is deterministic across captures.
 */
-function buildStructuralSkeleton(vnodes, opts) {
-	const maxDepth = opts.maxDepth ?? DEFAULT_MAX_DEPTH;
+const VISUAL_PROPS$1 = [
+	"padding-top",
+	"padding-right",
+	"padding-bottom",
+	"padding-left",
+	"border-top-width",
+	"border-right-width",
+	"border-bottom-width",
+	"border-left-width",
+	"border-top-style",
+	"border-right-style",
+	"border-bottom-style",
+	"border-left-style",
+	"border-top-color",
+	"border-right-color",
+	"border-bottom-color",
+	"border-left-color",
+	"border-top-left-radius",
+	"border-top-right-radius",
+	"border-bottom-right-radius",
+	"border-bottom-left-radius",
+	"background-color",
+	"background-image",
+	"background-position",
+	"background-size",
+	"background-repeat",
+	"background-origin",
+	"background-clip",
+	"box-shadow",
+	"opacity",
+	"filter",
+	"backdrop-filter",
+	"transform",
+	"transform-origin",
+	"mix-blend-mode",
+	"font-family",
+	"font-size",
+	"font-weight",
+	"font-style",
+	"line-height",
+	"letter-spacing",
+	"text-align",
+	"text-transform",
+	"text-decoration-line",
+	"text-decoration-color"
+];
+/**
+* Snapshot the rendered DOM under `root`, returning a frozen tree of every
+* visible element + its computed visual styles. Replaying the snapshot
+* produces a surface visually identical to `root`.
+*/
+function captureSnapshot(root, options = {}) {
+	const maxDepth = options.maxDepth ?? DEFAULT_MAX_DEPTH$2;
+	const maxNodes = options.maxNodes ?? DEFAULT_MAX_NODES$2;
+	const minSize = options.minSize ?? DEFAULT_MIN_SIZE$2;
+	const walkAtomic = options.walkAtomic ?? false;
+	const rootRect = root.getBoundingClientRect();
 	const state = {
-		emitted: 0,
-		cap: opts.maxNodes ?? DEFAULT_MAX_NODES
+		count: 0,
+		truncated: false
 	};
-	const out = [];
-	walk(vnodes, opts, 0, maxDepth, state, out);
-	return out;
-}
-function walk(input, opts, depth, max, state, out) {
-	if (state.emitted >= state.cap) return;
-	if (input == null || typeof input === "boolean") return;
-	if (Array.isArray(input)) {
-		for (let i = 0; i < input.length; i++) {
-			if (state.emitted >= state.cap) return;
-			walk(input[i], opts, depth, max, state, out);
+	const nodes = [];
+	for (let i = 0; i < root.children.length; i++) {
+		if (state.count >= maxNodes) {
+			state.truncated = true;
+			break;
 		}
-		return;
-	}
-	if (typeof input === "string" || typeof input === "number") {
-		if (String(input).trim()) push(out, textBar(opts.animationClass), state);
-		return;
-	}
-	const v = input;
-	const type = v.type;
-	if (type === Comment) return;
-	if (type === Text) {
-		if (typeof v.children === "string" ? v.children.trim() : "") push(out, textBar(opts.animationClass), state);
-		return;
-	}
-	if (type === Fragment) {
-		walk(v.children, opts, depth, max, state, out);
-		return;
-	}
-	if (typeof type === "string") {
-		push(out, transformElement(v, type.toLowerCase(), opts, depth, max, state), state);
-		return;
+		const node = capture$1(root.children[i], rootRect, 1, {
+			maxDepth,
+			maxNodes,
+			minSize,
+			walkAtomic,
+			state
+		});
+		if (node) nodes.push(node);
 	}
-	if (typeof type === "object" || typeof type === "function") push(out, h("div", {
-		class: [
-			"a-skel-block",
-			v.props?.class,
-			opts.animationClass
-		],
-		style: v.props?.style
-	}), state);
-}
-function push(out, vn, state) {
-	if (state.emitted >= state.cap) return;
-	out.push(vn);
-	state.emitted++;
-}
-function transformElement(v, tag, opts, depth, max, state) {
-	const cls = v.props?.class;
-	const styl = v.props?.style;
-	if (ATOMIC_TAGS.has(tag)) return h("div", {
-		class: [
-			"a-skel-block",
-			cls,
-			opts.animationClass
-		],
-		style: styl
+	return Object.freeze({
+		width: Math.round(rootRect.width),
+		height: Math.round(rootRect.height),
+		nodes: Object.freeze(nodes),
+		truncated: state.truncated,
+		capturedAt: Date.now()
 	});
-	if (HEADING_TAGS.has(tag)) return h(tag, {
-		class: cls,
-		style: styl
-	}, [textBar(opts.animationClass)]);
-	if (PARAGRAPH_TAGS.has(tag)) {
-		const children = v.children;
-		const recursedChildren = [];
-		walk(children, opts, depth + 1, max, state, recursedChildren);
-		if (recursedChildren.length > 0) return h(tag, {
-			class: cls,
-			style: styl
-		}, recursedChildren);
-		const lines = estimateLines(children, 3);
-		return h(tag, {
-			class: cls,
-			style: styl
-		}, multiLineBars(lines, opts.animationClass));
+}
+function capture$1(el, origin, depth, ctx) {
+	if (ctx.state.count >= ctx.maxNodes) {
+		ctx.state.truncated = true;
+		return null;
 	}
-	if (INLINE_TEXT_TAGS.has(tag)) {
-		const children = v.children;
-		const recursedChildren = [];
-		walk(children, opts, depth + 1, max, state, recursedChildren);
-		if (recursedChildren.length > 0) return h(tag, {
-			class: cls,
-			style: styl
-		}, recursedChildren);
-		return h(tag, {
-			class: cls,
-			style: styl
-		}, [textBar(opts.animationClass)]);
+	if (el.dataset?.skeletonIgnore !== void 0) return null;
+	const cs = window.getComputedStyle(el);
+	if (cs.display === "none" || cs.visibility === "hidden") return null;
+	const o = parseFloat(cs.opacity);
+	if (Number.isFinite(o) && o === 0) return null;
+	const rect = el.getBoundingClientRect();
+	const tag = el.tagName.toLowerCase();
+	const isTextOwnerTag = TEXT_OWNERS$1.has(tag);
+	let effectiveHeight = rect.height;
+	if (isTextOwnerTag && effectiveHeight < ctx.minSize) {
+		const lh = parseFloat(cs.lineHeight);
+		const fs = parseFloat(cs.fontSize);
+		if (Number.isFinite(lh) && lh > 0) effectiveHeight = lh;
+		else if (Number.isFinite(fs) && fs > 0) effectiveHeight = fs * 1.4;
 	}
-	if (depth >= max) return h("div", {
-		class: [
-			"a-skel-block",
-			cls,
-			opts.animationClass
-		],
-		style: styl
-	});
-	const recursed = [];
-	walk(v.children, opts, depth + 1, max, state, recursed);
-	if (recursed.length === 0) return h("div", {
-		class: [
-			"a-skel-block",
-			cls,
-			opts.animationClass
-		],
-		style: styl
-	});
-	return h(tag, {
-		class: cls,
-		style: styl
-	}, recursed);
-}
-function estimateLines(children, max) {
-	if (typeof children !== "string") return 1;
-	const len = children.trim().length;
-	if (len === 0) return 2;
-	if (len < 40) return 1;
-	if (len < 100) return 2;
-	return Math.min(max, 3);
-}
-function multiLineBars(lines, animationClass) {
-	const out = [];
-	for (let i = 0; i < lines; i++) out.push(textBar(animationClass, i === lines - 1 && lines > 1 ? .65 : 1));
-	return out;
-}
-const BAR_STYLE_FULL = Object.freeze({
-	display: "inline-block",
-	width: "100%",
-	height: "0.75em",
-	verticalAlign: "middle",
-	borderRadius: "4px"
-});
-const PARTIAL_BAR_CACHE = /* @__PURE__ */ new Map();
-function partialBarStyle(widthFraction) {
-	const key = Math.round(widthFraction * 10) / 10;
-	const hit = PARTIAL_BAR_CACHE.get(key);
-	if (hit) return hit;
-	const made = Object.freeze({
-		display: "inline-block",
-		width: `${Math.round(key * 100)}%`,
-		height: "0.75em",
-		verticalAlign: "middle",
-		borderRadius: "4px"
-	});
-	PARTIAL_BAR_CACHE.set(key, made);
-	return made;
-}
-function textBar(animationClass, widthFraction = 1) {
-	return h("span", {
-		class: [
-			"a-skel-block",
-			"a-skel-block--text",
-			animationClass
-		],
-		style: widthFraction === 1 ? BAR_STYLE_FULL : partialBarStyle(widthFraction)
+	if (rect.width < ctx.minSize || effectiveHeight < ctx.minSize) return null;
+	const x = Math.round(rect.left - origin.left);
+	const y = Math.round(rect.top - origin.top);
+	const w = Math.round(rect.width);
+	const h = Math.round(effectiveHeight);
+	const style = readComputedStyles(cs, VISUAL_PROPS$1);
+	const isAtomic = ATOMIC_TAGS$1.has(tag);
+	const hasOwnText = hasDirectText(el);
+	const childrenEls = collectVisibleChildren(el);
+	let kind;
+	if (tag === "img" || tag === "picture") kind = "image";
+	else if (tag === "video") kind = "video";
+	else if (isAtomic) kind = "media";
+	else if (childrenEls.length === 0 && (hasOwnText || isTextOwnerTag)) kind = "text";
+	else if (childrenEls.length === 0) kind = "block";
+	else kind = "container";
+	let textLines;
+	if (kind === "text") textLines = captureTextLines(el, origin);
+	let children;
+	if (kind === "container" && depth < ctx.maxDepth) {
+		children = [];
+		for (const c of childrenEls) {
+			if (ctx.state.count >= ctx.maxNodes) {
+				ctx.state.truncated = true;
+				break;
+			}
+			const childNode = capture$1(c, origin, depth + 1, ctx);
+			if (childNode) children.push(childNode);
+		}
+		if (children.length === 0) {
+			children = void 0;
+			kind = style && Object.keys(style).length > 0 ? "block" : "container";
+		}
+	} else if (kind === "container" && depth >= ctx.maxDepth || isAtomic && ctx.walkAtomic) kind = "block";
+	ctx.state.count++;
+	return Object.freeze({
+		tag,
+		x,
+		y,
+		w,
+		h,
+		style,
+		kind,
+		textLines: textLines ? Object.freeze(textLines) : void 0,
+		children: children ? Object.freeze(children) : void 0
 	});
 }
 //#endregion
-//#region src/components/StructuralSkeleton.ts
+//#region src/components/ASkeleton.vue
 /**
-* Renders a structural skeleton derived from a slot's vnode tree. Pure render
-* function — no template, no scoped styles — so the parent's class strings
-* pass through unchanged and Tailwind utilities continue to drive layout.
+* `<ASkeleton>` — the package's headline wrapper.
 *
-* `maxNodes` is forwarded to the walker; cap defaults to 300 (see
-* `buildStructuralSkeleton`). Beyond that the walk stops emitting and the cap
-* propagates back as a clipped tree, keeping first-paint bounded.
+* Two rendering strategies, selected via `mode`:
+*   - `mirror` (default): walks the slot's vnode tree (`buildStructuralSkeleton`)
+*     and preserves every element with its real `class` / inline `style`. Pure
+*     Vue, SSR-safe, no DOM read.
+*   - `clone`: mounts the slot off-screen once, snapshots every leaf's
+*     `getComputedStyle()` (`captureSnapshot`), then replays the snapshot via
+*     `<ASkeletonClone>` as positioned divs carrying every captured CSS
+*     property. Pixel-identical regardless of styling system.
+*
+* The strategies are exclusive — picking one decides the entire loading-state
+* render path. The wrapper itself only orchestrates: it doesn't decide
+* per-element treatment (that's the strategies' job). Single Responsibility:
+* orchestration + a11y + containment.
 */
-const StructuralSkeleton = defineComponent({
-	name: "StructuralSkeleton",
-	props: {
-		vnodes: {
-			type: Array,
-			required: true
-		},
-		animation: {
-			type: String,
-			default: null
-		},
-		maxDepth: {
-			type: Number,
-			default: 8
-		},
-		maxNodes: {
-			type: Number,
-			default: 300
-		}
-	},
-	setup(props) {
-		return () => buildStructuralSkeleton(props.vnodes, {
-			animationClass: props.animation,
-			maxDepth: props.maxDepth,
-			maxNodes: props.maxNodes
-		});
-	}
-});
-//#endregion
-//#region \0/plugin-vue/export-helper
-var export_helper_default = (sfc, props) => {
-	const target = sfc.__vccOpts || sfc;
-	for (const [key, val] of props) target[key] = val;
-	return target;
-};
-//#endregion
-//#region src/components/ASkeleton.vue
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const MAX_RETRY_ATTEMPTS = 5;
+const _sfc_main$17 = /* @__PURE__ */ defineComponent({
 	__name: "ASkeleton",
 	props: {
 		loading: {
 			type: Boolean,
 			required: true
 		},
+		mode: {
+			type: String,
+			required: false,
+			default: "clone"
+		},
 		cacheKey: {
 			type: String,
 			required: false
@@ -4088,12 +4517,12 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
 		maxDepth: {
 			type: Number,
 			required: false,
-			default: 6
+			default: 16
 		},
 		maxNodes: {
 			type: Number,
 			required: false,
-			default: 500
+			default: 600
 		},
 		minNodeSize: {
 			type: Number,
@@ -4131,54 +4560,91 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
 		__expose();
 		const props = __props;
 		const slots = useSlots();
-		const resolvedKey = computed(() => props.cacheKey ?? fingerprintSlot(slots.default?.()));
-		const cached = shallowRef(getCached(resolvedKey.value, props.persist));
-		watch(resolvedKey, (key) => {
-			cached.value = getCached(key, props.persist);
-		});
-		const wrapperRef = ref(null);
-		useShapeProbe(() => props.loading ? null : wrapperRef.value, {
-			maxDepth: props.maxDepth,
-			maxNodes: props.maxNodes,
-			minSize: props.minNodeSize,
-			onCapture: (shape) => {
-				setCached(resolvedKey.value, shape, props.persist);
-				cached.value = shape;
-			}
-		});
+		const instanceId = useId();
 		const animationClass = computed(() => props.animation === "none" ? null : `a-skel-block--anim-${props.animation}`);
-		const layerStyle = computed(() => cached.value ? {
-			width: `${cached.value.width}px`,
-			height: `${cached.value.height}px`
-		} : {});
-		const blockClassByType = computed(() => {
-			const anim = animationClass.value;
-			const suffix = anim ? ` ${anim}` : "";
-			return Object.freeze({
-				block: `a-skel-block a-skel-block--block${suffix}`,
-				text: `a-skel-block a-skel-block--text${suffix}`,
-				image: `a-skel-block a-skel-block--image${suffix}`,
-				circle: `a-skel-block a-skel-block--circle${suffix}`
+		const cloneAnimation = computed(() => props.animation);
+		const mirrorVNodes = computed(() => props.loading ? slots.default?.() ?? [] : []);
+		const hasContent = computed(() => mirrorVNodes.value.length > 0);
+		const captureRef = ref(null);
+		const snapshot = shallowRef(void 0);
+		const snapshotValid = computed(() => !!snapshot.value && snapshot.value.width > 0 && snapshot.value.height > 0);
+		const snapshotRenderable = computed(() => snapshotValid.value && snapshot.value.nodes.length > 0);
+		let captureFrame;
+		let retryAttempts = 0;
+		function takeSnapshot() {
+			if (captureFrame !== void 0) cancelAnimationFrame(captureFrame);
+			retryAttempts = 0;
+			scheduleCapture();
+		}
+		function scheduleCapture() {
+			captureFrame = requestAnimationFrame(() => {
+				captureFrame = requestAnimationFrame(() => {
+					captureFrame = void 0;
+					if (!captureRef.value) return;
+					const result = captureSnapshot(captureRef.value, {
+						maxDepth: props.maxDepth,
+						maxNodes: props.maxNodes,
+						minSize: props.minNodeSize
+					});
+					if (result.width > 0 && result.height > 0) {
+						snapshot.value = result;
+						return;
+					}
+					if (retryAttempts < MAX_RETRY_ATTEMPTS) {
+						retryAttempts++;
+						scheduleCapture();
+					}
+				});
 			});
+		}
+		watch(captureRef, (el) => {
+			if (props.mode !== "clone") return;
+			if (el) takeSnapshot();
+		}, { flush: "post" });
+		watch(() => props.mode, (mode) => {
+			if (mode === "clone" && captureRef.value) takeSnapshot();
+		});
+		watch(() => props.loading, (next, prev) => {
+			if (props.mode !== "clone") return;
+			if (next && !prev && captureRef.value) takeSnapshot();
+		});
+		onBeforeUnmount(() => {
+			if (captureFrame !== void 0) cancelAnimationFrame(captureFrame);
 		});
-		const structuralVNodes = computed(() => props.loading ? slots.default?.() ?? [] : []);
 		const __returned__ = {
 			props,
 			slots,
-			resolvedKey,
-			cached,
-			wrapperRef,
+			instanceId,
 			animationClass,
-			layerStyle,
-			blockClassByType,
-			structuralVNodes,
-			hasStructure: computed(() => structuralVNodes.value.length > 0),
+			cloneAnimation,
+			mirrorVNodes,
+			hasContent,
+			captureRef,
+			snapshot,
+			snapshotValid,
+			snapshotRenderable,
+			get captureFrame() {
+				return captureFrame;
+			},
+			set captureFrame(v) {
+				captureFrame = v;
+			},
+			get retryAttempts() {
+				return retryAttempts;
+			},
+			set retryAttempts(v) {
+				retryAttempts = v;
+			},
+			MAX_RETRY_ATTEMPTS,
+			takeSnapshot,
+			scheduleCapture,
 			get cn() {
 				return cn;
 			},
 			get StructuralSkeleton() {
 				return StructuralSkeleton;
-			}
+			},
+			ASkeletonClone: ASkeletonClone_default
 		};
 		Object.defineProperty(__returned__, "__isScriptSetup", {
 			enumerable: false,
@@ -4187,44 +4653,61 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
 		return __returned__;
 	}
 });
-const _hoisted_1 = ["data-loading"];
-const _hoisted_2 = {
-	class: "a-skeleton__structural",
-	role: "status",
-	"aria-live": "polite",
-	"aria-busy": "true"
+const _hoisted_1$5 = [
+	"data-loading",
+	"aria-busy",
+	"aria-live"
+];
+const _hoisted_2$1 = ["aria-hidden"];
+const _hoisted_3$1 = {
+	key: 0,
+	class: "a-skeleton__mirror a-skeleton__mirror--fallback"
 };
-const _hoisted_3 = {
-	class: "a-skeleton__fallback",
-	role: "status",
-	"aria-busy": "true"
+const _hoisted_4 = {
+	key: 1,
+	class: "a-skeleton__replay"
 };
-function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
+const _hoisted_5 = {
+	key: 0,
+	class: "a-skeleton__mirror"
+};
+const _hoisted_6 = {
+	key: 1,
+	class: "a-skeleton__fallback"
+};
+function _sfc_render$17(_ctx, _cache, $props, $setup, $data, $options) {
 	return openBlock(), createElementBlock("div", {
-		ref: "wrapperRef",
-		class: normalizeClass($setup.cn("a-skeleton", $setup.props.class)),
-		"data-loading": $setup.props.loading ? "" : void 0
-	}, [$setup.props.loading ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createCommentVNode(" Cache hit: pixel-aligned positioned blocks from a previous measurement.\n           Styles are pre-computed during capture so the loop below never calls\n           a function or allocates a style object per node. "), $setup.cached ? (openBlock(), createElementBlock("div", {
-		key: 0,
-		class: "a-skeleton__layer",
-		style: normalizeStyle($setup.layerStyle),
+		class: normalizeClass($setup.cn("a-skeleton", `a-skeleton--mode-${$setup.props.mode}`, $setup.props.class)),
+		"data-loading": $setup.props.loading ? "" : void 0,
 		role: "status",
-		"aria-live": "polite",
-		"aria-busy": "true"
-	}, [(openBlock(true), createElementBlock(Fragment, null, renderList($setup.cached.nodes, (node, idx) => {
-		return openBlock(), createElementBlock(Fragment, { key: idx }, [node.lineStyles ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(node.lineStyles, (lineStyle, i) => {
-			return openBlock(), createElementBlock("div", {
-				key: `${idx}-${i}`,
-				class: normalizeClass($setup.blockClassByType.text),
-				style: normalizeStyle(lineStyle)
-			}, null, 6);
-		}), 128)) : (openBlock(), createElementBlock("div", {
-			key: 1,
-			class: normalizeClass($setup.blockClassByType[node.type]),
-			style: normalizeStyle(node.style)
-		}, null, 6))], 64);
-	}), 128))], 4)) : $setup.hasStructure ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [createCommentVNode(" Cache miss + slot has structure: render a structural skeleton derived\n           from the slot's vnode tree. First paint already looks right. "), createElementVNode("div", _hoisted_2, [createVNode($setup["StructuralSkeleton"], {
-		vnodes: $setup.structuralVNodes,
+		"aria-busy": $setup.props.loading ? "true" : void 0,
+		"aria-live": $setup.props.loading ? "polite" : void 0
+	}, [$setup.props.mode === "clone" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+		createCommentVNode(" Off-screen capture mount: the slot is always rendered (so we have a\n           live target to snapshot from) but visually suppressed while the\n           skeleton is showing. `aria-hidden` keeps it out of AT trees too. "),
+		createElementVNode("div", {
+			ref: "captureRef",
+			class: normalizeClass(["a-skeleton__capture", $setup.props.loading ? "a-skeleton__capture--hidden" : null]),
+			"aria-hidden": $setup.props.loading ? "true" : void 0
+		}, [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 10, _hoisted_2$1),
+		createCommentVNode(" Mirror fallback — **always rendered as a backdrop** while loading,\n           regardless of snapshot state. The replay layer below sits on top of\n           it (higher z-index). If the snapshot turns out to be empty / zero-\n           sized / otherwise unrenderable, the mirror underneath still gives the\n           user a structural skeleton instead of a blank wrapper. "),
+		$setup.props.loading && $setup.hasContent ? (openBlock(), createElementBlock("div", _hoisted_3$1, [createVNode($setup["StructuralSkeleton"], {
+			vnodes: $setup.mirrorVNodes,
+			animation: $setup.animationClass,
+			"max-depth": $props.maxDepth,
+			"max-nodes": $props.maxNodes
+		}, null, 8, [
+			"vnodes",
+			"animation",
+			"max-depth",
+			"max-nodes"
+		])])) : createCommentVNode("v-if", true),
+		createCommentVNode(" Replay layer — wrapped in a positioning div whose scoped styles\n           are GUARANTEED to apply (a child-component root only inherits the\n           parent's scope when no inner div is present; placing the absolute-\n           positioning on a regular div in the parent template removes that\n           ambiguity). Gated on `snapshotValid` (width AND height > 0) AND\n           snapshot.nodes.length > 0 so an empty capture doesn't render a\n           transparent overlay that masks the mirror underneath. "),
+		$setup.props.loading && $setup.snapshotRenderable ? (openBlock(), createElementBlock("div", _hoisted_4, [createVNode($setup["ASkeletonClone"], {
+			shape: $setup.snapshot,
+			animation: $setup.cloneAnimation
+		}, null, 8, ["shape", "animation"])])) : createCommentVNode("v-if", true)
+	], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [$setup.props.loading ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [$setup.hasContent ? (openBlock(), createElementBlock("div", _hoisted_5, [createVNode($setup["StructuralSkeleton"], {
+		vnodes: $setup.mirrorVNodes,
 		animation: $setup.animationClass,
 		"max-depth": $props.maxDepth,
 		"max-nodes": $props.maxNodes
@@ -4233,16 +4716,153 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
 		"animation",
 		"max-depth",
 		"max-nodes"
-	])])], 2112)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [createCommentVNode(" Cache miss + nothing to walk: generic shimmer. "), createElementVNode("div", _hoisted_3, [renderSlot(_ctx.$slots, "fallback", {}, () => [createElementVNode("div", { class: normalizeClass(["a-skel-block a-skel-block--block a-skel-fallback-default", $setup.animationClass]) }, null, 2)], true)])], 2112))], 64)) : renderSlot(_ctx.$slots, "default", { key: 1 }, void 0, true)], 10, _hoisted_1);
+	])])) : (openBlock(), createElementBlock("div", _hoisted_6, [renderSlot(_ctx.$slots, "fallback", {}, () => [createElementVNode("div", { class: normalizeClass(["a-skel-block a-skel-block--block a-skel-fallback-default", $setup.animationClass]) }, null, 2)], true)]))], 64)) : renderSlot(_ctx.$slots, "default", { key: 1 }, void 0, true)], 64))], 10, _hoisted_1$5);
 }
-var ASkeleton_default = /* @__PURE__ */ export_helper_default(_sfc_main$2, [
-	["render", _sfc_render$2],
+var ASkeleton_default = /* @__PURE__ */ export_helper_default(_sfc_main$17, [
+	["render", _sfc_render$17],
 	["__scopeId", "data-v-16717541"],
 	["__file", "/Users/alikhalill/Desktop/my-projects/ali-nuxt-toolkit/packages/ui-components/ASkeleton/src/components/ASkeleton.vue"]
 ]);
 //#endregion
+//#region src/components/StructuralLayerNode.ts
+/**
+* `StructuralLayerNode` — recursive renderer for a `StructuralNode` from a
+* `StructuralShape` captured by `walkStructural`. Used internally by
+* `<ASkeletonLayer>`.
+*
+* Design:
+*   - **Strategy table** keyed by `node.kind` + `node.leafKind`. Each kind has
+*     its own renderer function. Adding a new kind is one entry in `RENDERERS`
+*     (Open/Closed) — no edits elsewhere.
+*   - **Pure render function**: no reactive state of its own; everything flows
+*     from props.
+*   - **Container preservation**: container nodes emit `<{node.tag}
+*     :class="node.className" :style="node.style">…children…</…>`. The
+*     captured `style` carries comprehensive layout + visual CSS so the
+*     skeleton reads correctly even when the consumer's stylesheet isn't
+*     loaded at the mount point.
+*   - **Leaves**: render `<div class="a-skel + originalClass" :style="style">`.
+*     The original `class` is preserved so utility-first CSS (`mt-4`,
+*     `flex-1`, `inline-block`, …) survives; the captured style carries the
+*     same layout + visual properties used on containers plus `width` +
+*     `height` so the placeholder claims the right space.
+*/
+const LEAF_RENDERERS = {
+	block: renderLeafBlock,
+	media: renderLeafBlock,
+	text: renderLeafText,
+	image: (node, animClass) => renderLeafWithIcon(node, animClass, "image")
+};
+function renderContainer(node, animClass) {
+	return h(node.tag, {
+		class: node.className || void 0,
+		style: node.style,
+		"aria-hidden": "true"
+	}, node.children.map((child) => h(StructuralLayerNode, {
+		node: child,
+		animClass
+	})));
+}
+/**
+* Build the leaf's `class` payload. Always includes `a-skel` (skeleton
+* surface) + the animation class; the original consumer class trails so it
+* survives the cascade alongside utility-first frameworks.
+*/
+function leafClass(node, animClass, extra) {
+	const classes = ["a-skel"];
+	if (extra) classes.push(extra);
+	if (animClass) classes.push(animClass);
+	if (node.className) classes.push(node.className);
+	return classes;
+}
+function renderLeafBlock(node, animClass) {
+	return h("div", {
+		class: leafClass(node, animClass),
+		style: node.style,
+		"aria-hidden": "true"
+	});
+}
+/**
+* Text leaf — host carries the captured layout + visual surface (including
+* the leaf's `width` / `height` so it claims the right space in its parent's
+* layout). Each captured per-line rect renders as one bar inside the host,
+* absolutely positioned at the captured rect (rects are leaf-relative; the
+* host's captured style includes `position: relative` via the `.a-skel-text-host`
+* default — see styles.src.css).
+*
+* When `textLines` is absent (Range API unusable), the leaf renders as a
+* single shimmer bar at the host's bounds — same as a leaf-block.
+*/
+function renderLeafText(node, animClass) {
+	const lines = node.textLines;
+	if (!lines || lines.length === 0) return h("div", {
+		class: leafClass(node, animClass, "a-skel--text"),
+		style: node.style,
+		"aria-hidden": "true"
+	});
+	return h("div", {
+		class: ["a-skel-text-host", node.className || void 0],
+		style: node.style,
+		"aria-hidden": "true"
+	}, lines.map((line) => h("div", {
+		class: [
+			"a-skel",
+			"a-skel--text-line",
+			animClass
+		],
+		style: {
+			position: "absolute",
+			left: `${line.x}px`,
+			top: `${line.y}px`,
+			width: `${line.w}px`,
+			height: `${line.h}px`
+		}
+	})));
+}
+function renderLeafWithIcon(node, animClass, kind) {
+	return h("div", {
+		class: leafClass(node, animClass, "a-skel--with-icon"),
+		style: node.style,
+		"aria-hidden": "true"
+	}, [kind === "image" ? renderImageIcon() : renderPlayIcon()]);
+}
+const RENDERERS = {
+	container: (ctx) => renderContainer(ctx.node, ctx.animClass),
+	leaf: (ctx) => {
+		const leaf = ctx.node;
+		return LEAF_RENDERERS[leaf.leafKind](leaf, ctx.animClass);
+	}
+};
+const StructuralLayerNode = defineComponent({
+	name: "StructuralLayerNode",
+	props: {
+		node: {
+			type: Object,
+			required: true
+		},
+		animClass: {
+			type: [String, null],
+			default: null
+		}
+	},
+	setup(props) {
+		return () => RENDERERS[props.node.kind]({
+			node: props.node,
+			animClass: props.animClass
+		});
+	}
+});
+//#endregion
 //#region src/components/ASkeletonLayer.vue
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+/**
+* `<ASkeletonLayer>` — replays a `StructuralShape` produced by
+* `walkStructural` / `useSkeleton()` as a tree of preserved containers +
+* a-skel leaf placeholders. The layer is a transparent shell with no
+* width / height / position constraints, so it drops into the consumer's
+* own container and lets the captured tree's flex/grid/spacing dictate
+* how the skeleton lays itself out.
+*/
+const _sfc_main$16 = /* @__PURE__ */ defineComponent({
 	__name: "ASkeletonLayer",
 	props: {
 		shape: {
@@ -4266,176 +4886,2366 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
 			skipCheck: true
 		}
 	},
+	setup(__props, { expose: __expose }) {
+		__expose();
+		const props = __props;
+		const __returned__ = {
+			props,
+			animationClass: computed(() => props.animation === "none" ? null : `a-skel-anim-${props.animation}`),
+			get cn() {
+				return cn;
+			},
+			get StructuralLayerNode() {
+				return StructuralLayerNode;
+			}
+		};
+		Object.defineProperty(__returned__, "__isScriptSetup", {
+			enumerable: false,
+			value: true
+		});
+		return __returned__;
+	}
+});
+function _sfc_render$16(_ctx, _cache, $props, $setup, $data, $options) {
+	return $props.shape ? (openBlock(), createElementBlock("div", {
+		key: 0,
+		class: normalizeClass($setup.cn("a-skeleton__layer", $setup.props.class)),
+		role: "status",
+		"aria-live": "polite",
+		"aria-busy": "true"
+	}, [(openBlock(true), createElementBlock(Fragment, null, renderList($props.shape.nodes, (node, idx) => {
+		return openBlock(), createBlock($setup["StructuralLayerNode"], {
+			key: idx,
+			node,
+			"anim-class": $setup.animationClass
+		}, null, 8, ["node", "anim-class"]);
+	}), 128)), _cache[0] || (_cache[0] = createElementVNode("span", { class: "a-skel-sr-only" }, "Loading…", -1))], 2)) : createCommentVNode("v-if", true);
+}
+var ASkeletonLayer_default = /* @__PURE__ */ export_helper_default(_sfc_main$16, [["render", _sfc_render$16], ["__file", "/Users/alikhalill/Desktop/my-projects/ali-nuxt-toolkit/packages/ui-components/ASkeleton/src/components/ASkeletonLayer.vue"]]);
+//#endregion
+//#region src/components/ASkeletonBlock.vue
+const _sfc_main$15 = /* @__PURE__ */ defineComponent({
+	__name: "ASkeletonBlock",
+	props: {
+		type: {
+			type: String,
+			required: false,
+			default: "block"
+		},
+		w: {
+			type: [Number, String],
+			required: false
+		},
+		h: {
+			type: [Number, String],
+			required: false
+		},
+		radius: {
+			type: [Number, String],
+			required: false
+		},
+		lines: {
+			type: Number,
+			required: false,
+			default: 1
+		},
+		animation: {
+			type: String,
+			required: false,
+			default: "shimmer"
+		},
+		class: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array
+			],
+			required: false,
+			skipCheck: true
+		}
+	},
 	setup(__props, { expose: __expose }) {
 		__expose();
 		const props = __props;
 		const animationClass = computed(() => props.animation === "none" ? null : `a-skel-block--anim-${props.animation}`);
+		const blockClass = computed(() => [
+			"a-skel-block",
+			`a-skel-block--${props.type}`,
+			animationClass.value
+		]);
+		function toLength(v) {
+			if (v === void 0) return void 0;
+			return typeof v === "number" ? `${v}px` : v;
+		}
+		const radiusValue = computed(() => props.type === "circle" && props.radius === void 0 ? "50%" : toLength(props.radius));
 		const __returned__ = {
 			props,
 			animationClass,
-			layerStyle: computed(() => props.shape ? {
-				width: `${props.shape.width}px`,
-				height: `${props.shape.height}px`
-			} : {}),
-			blockClassByType: computed(() => {
-				const anim = animationClass.value;
-				const suffix = anim ? ` ${anim}` : "";
-				return Object.freeze({
-					block: `a-skel-block a-skel-block--block${suffix}`,
-					text: `a-skel-block a-skel-block--text${suffix}`,
-					image: `a-skel-block a-skel-block--image${suffix}`,
-					circle: `a-skel-block a-skel-block--circle${suffix}`
-				});
-			}),
+			blockClass,
+			toLength,
+			radiusValue,
+			blockStyle: computed(() => ({
+				width: toLength(props.w),
+				height: toLength(props.h),
+				borderRadius: radiusValue.value
+			})),
+			isMultiLineText: computed(() => props.type === "text" && props.lines > 1),
 			get cn() {
 				return cn;
 			}
-		};
-		Object.defineProperty(__returned__, "__isScriptSetup", {
-			enumerable: false,
-			value: true
-		});
-		return __returned__;
+		};
+		Object.defineProperty(__returned__, "__isScriptSetup", {
+			enumerable: false,
+			value: true
+		});
+		return __returned__;
+	}
+});
+function _sfc_render$15(_ctx, _cache, $props, $setup, $data, $options) {
+	return $setup.isMultiLineText ? (openBlock(), createElementBlock("div", {
+		key: 0,
+		class: normalizeClass($setup.cn("a-skel-block-stack", $setup.props.class)),
+		role: "status",
+		"aria-busy": "true"
+	}, [(openBlock(true), createElementBlock(Fragment, null, renderList($setup.props.lines, (i) => {
+		return openBlock(), createElementBlock("div", {
+			key: i,
+			class: normalizeClass($setup.blockClass),
+			style: normalizeStyle({
+				height: $setup.blockStyle.height ?? "0.75em",
+				width: i === $setup.props.lines ? "70%" : "100%",
+				borderRadius: $setup.blockStyle.borderRadius ?? "4px"
+			})
+		}, null, 6);
+	}), 128))], 2)) : (openBlock(), createElementBlock("div", {
+		key: 1,
+		class: normalizeClass($setup.cn($setup.blockClass, $setup.props.class)),
+		style: normalizeStyle($setup.blockStyle),
+		role: "status",
+		"aria-busy": "true"
+	}, null, 6));
+}
+var ASkeletonBlock_default = /* @__PURE__ */ export_helper_default(_sfc_main$15, [
+	["render", _sfc_render$15],
+	["__scopeId", "data-v-bdfba69a"],
+	["__file", "/Users/alikhalill/Desktop/my-projects/ali-nuxt-toolkit/packages/ui-components/ASkeleton/src/components/ASkeletonBlock.vue"]
+]);
+//#endregion
+//#region src/components/variants/ASkeletonText.vue
+const _sfc_main$14 = /* @__PURE__ */ defineComponent({
+	__name: "ASkeletonText",
+	props: {
+		lines: {
+			type: Number,
+			required: false,
+			default: 1
+		},
+		width: {
+			type: [Number, String],
+			required: false
+		},
+		animation: {
+			type: String,
+			required: false,
+			default: "pulse"
+		},
+		class: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array
+			],
+			required: false,
+			skipCheck: true
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		__expose();
+		const props = __props;
+		const animClass = computed(() => props.animation === "none" ? null : `a-skel-anim-${props.animation}`);
+		const rootStyle = computed(() => props.width !== void 0 ? { width: typeof props.width === "number" ? `${props.width}px` : String(props.width) } : void 0);
+		function widthForLine(i) {
+			if (i === props.lines - 1 && props.lines > 1) return "65%";
+			const palette = [
+				"100%",
+				"92%",
+				"88%",
+				"95%"
+			];
+			return palette[i % palette.length];
+		}
+		const __returned__ = {
+			props,
+			animClass,
+			rootStyle,
+			widthForLine,
+			get cn() {
+				return cn;
+			}
+		};
+		Object.defineProperty(__returned__, "__isScriptSetup", {
+			enumerable: false,
+			value: true
+		});
+		return __returned__;
+	}
+});
+function _sfc_render$14(_ctx, _cache, $props, $setup, $data, $options) {
+	return openBlock(), createElementBlock("div", {
+		class: normalizeClass($setup.cn("a-skel-variants-text", $setup.props.class)),
+		style: normalizeStyle($setup.rootStyle),
+		role: "status",
+		"aria-live": "polite",
+		"aria-busy": "true"
+	}, [(openBlock(true), createElementBlock(Fragment, null, renderList($setup.props.lines, (i) => {
+		return openBlock(), createElementBlock("div", {
+			key: i,
+			class: normalizeClass($setup.cn("a-skel a-skel-variant-text", $setup.animClass)),
+			style: normalizeStyle({
+				width: $setup.widthForLine(i - 1),
+				marginTop: i > 1 ? "0.5em" : void 0
+			})
+		}, null, 6);
+	}), 128)), _cache[0] || (_cache[0] = createElementVNode("span", { class: "a-skel-sr-only" }, "Loading…", -1))], 6);
+}
+var ASkeletonText_default = /* @__PURE__ */ export_helper_default(_sfc_main$14, [["render", _sfc_render$14], ["__file", "/Users/alikhalill/Desktop/my-projects/ali-nuxt-toolkit/packages/ui-components/ASkeleton/src/components/variants/ASkeletonText.vue"]]);
+//#endregion
+//#region src/components/variants/ASkeletonHeading.vue
+const _sfc_main$13 = /* @__PURE__ */ defineComponent({
+	__name: "ASkeletonHeading",
+	props: {
+		level: {
+			type: Number,
+			required: false,
+			default: 2
+		},
+		width: {
+			type: [Number, String],
+			required: false
+		},
+		animation: {
+			type: String,
+			required: false,
+			default: "pulse"
+		},
+		class: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array
+			],
+			required: false,
+			skipCheck: true
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		__expose();
+		const props = __props;
+		const animClass = computed(() => props.animation === "none" ? null : `a-skel-anim-${props.animation}`);
+		const HEIGHT_BY_LEVEL = {
+			1: "2.25rem",
+			2: "1.75rem",
+			3: "1.5rem",
+			4: "1.25rem",
+			5: "1.125rem",
+			6: "1rem"
+		};
+		const __returned__ = {
+			props,
+			animClass,
+			HEIGHT_BY_LEVEL,
+			rootStyle: computed(() => ({
+				width: props.width !== void 0 ? typeof props.width === "number" ? `${props.width}px` : String(props.width) : "60%",
+				height: HEIGHT_BY_LEVEL[props.level]
+			})),
+			get cn() {
+				return cn;
+			}
+		};
+		Object.defineProperty(__returned__, "__isScriptSetup", {
+			enumerable: false,
+			value: true
+		});
+		return __returned__;
+	}
+});
+function _sfc_render$13(_ctx, _cache, $props, $setup, $data, $options) {
+	return openBlock(), createElementBlock("div", {
+		class: normalizeClass($setup.cn("a-skel a-skel-variant-heading", $setup.animClass, $setup.props.class)),
+		style: normalizeStyle($setup.rootStyle),
+		role: "status",
+		"aria-busy": "true"
+	}, [..._cache[0] || (_cache[0] = [createElementVNode("span", { class: "a-skel-sr-only" }, "Loading heading…", -1)])], 6);
+}
+var ASkeletonHeading_default = /* @__PURE__ */ export_helper_default(_sfc_main$13, [["render", _sfc_render$13], ["__file", "/Users/alikhalill/Desktop/my-projects/ali-nuxt-toolkit/packages/ui-components/ASkeleton/src/components/variants/ASkeletonHeading.vue"]]);
+//#endregion
+//#region src/components/variants/ASkeletonAvatar.vue
+const _sfc_main$12 = /* @__PURE__ */ defineComponent({
+	__name: "ASkeletonAvatar",
+	props: {
+		size: {
+			type: [Number, String],
+			required: false,
+			default: 48
+		},
+		shape: {
+			type: String,
+			required: false,
+			default: "circle"
+		},
+		animation: {
+			type: String,
+			required: false,
+			default: "pulse"
+		},
+		class: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array
+			],
+			required: false,
+			skipCheck: true
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		__expose();
+		const props = __props;
+		const __returned__ = {
+			props,
+			animClass: computed(() => props.animation === "none" ? null : `a-skel-anim-${props.animation}`),
+			sizeStyle: computed(() => {
+				const s = typeof props.size === "number" ? `${props.size}px` : String(props.size);
+				return {
+					width: s,
+					height: s,
+					borderRadius: props.shape === "circle" ? "9999px" : props.shape === "rounded" ? "var(--ak-skel-radius)" : "0"
+				};
+			}),
+			get cn() {
+				return cn;
+			}
+		};
+		Object.defineProperty(__returned__, "__isScriptSetup", {
+			enumerable: false,
+			value: true
+		});
+		return __returned__;
+	}
+});
+function _sfc_render$12(_ctx, _cache, $props, $setup, $data, $options) {
+	return openBlock(), createElementBlock("div", {
+		class: normalizeClass($setup.cn("a-skel a-skel-variant-avatar", $setup.animClass, $setup.props.class)),
+		style: normalizeStyle($setup.sizeStyle),
+		role: "status",
+		"aria-busy": "true"
+	}, [..._cache[0] || (_cache[0] = [createElementVNode("span", { class: "a-skel-sr-only" }, "Loading avatar…", -1)])], 6);
+}
+var ASkeletonAvatar_default = /* @__PURE__ */ export_helper_default(_sfc_main$12, [["render", _sfc_render$12], ["__file", "/Users/alikhalill/Desktop/my-projects/ali-nuxt-toolkit/packages/ui-components/ASkeleton/src/components/variants/ASkeletonAvatar.vue"]]);
+//#endregion
+//#region src/components/variants/ASkeletonImage.vue
+const _sfc_main$11 = /* @__PURE__ */ defineComponent({
+	__name: "ASkeletonImage",
+	props: {
+		ratio: {
+			type: String,
+			required: false,
+			default: "16 / 9"
+		},
+		width: {
+			type: [Number, String],
+			required: false
+		},
+		height: {
+			type: [Number, String],
+			required: false
+		},
+		showIcon: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		animation: {
+			type: String,
+			required: false,
+			default: "pulse"
+		},
+		class: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array
+			],
+			required: false,
+			skipCheck: true
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		__expose();
+		const props = __props;
+		const __returned__ = {
+			props,
+			animClass: computed(() => props.animation === "none" ? null : `a-skel-anim-${props.animation}`),
+			rootStyle: computed(() => {
+				const s = {};
+				if (props.ratio) s.aspectRatio = props.ratio;
+				if (props.width !== void 0) s.width = typeof props.width === "number" ? `${props.width}px` : String(props.width);
+				if (props.height !== void 0) s.height = typeof props.height === "number" ? `${props.height}px` : String(props.height);
+				return s;
+			}),
+			get cn() {
+				return cn;
+			}
+		};
+		Object.defineProperty(__returned__, "__isScriptSetup", {
+			enumerable: false,
+			value: true
+		});
+		return __returned__;
+	}
+});
+const _hoisted_1$4 = {
+	key: 0,
+	class: "size-10",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	"aria-hidden": "true"
+};
+function _sfc_render$11(_ctx, _cache, $props, $setup, $data, $options) {
+	return openBlock(), createElementBlock("div", {
+		class: normalizeClass($setup.cn("a-skel a-skel-variant-image", $setup.animClass, $setup.props.class)),
+		style: normalizeStyle($setup.rootStyle),
+		role: "status",
+		"aria-busy": "true"
+	}, [$setup.props.showIcon ? (openBlock(), createElementBlock("svg", _hoisted_1$4, [..._cache[0] || (_cache[0] = [createElementVNode("path", {
+		d: "M19 5H5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2Zm-3.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM19 17H5l3.5-4.5 2.5 3 3.5-4.5L19 17Z",
+		fill: "currentColor"
+	}, null, -1)])])) : createCommentVNode("v-if", true), _cache[1] || (_cache[1] = createElementVNode("span", { class: "a-skel-sr-only" }, "Loading image…", -1))], 6);
+}
+var ASkeletonImage_default = /* @__PURE__ */ export_helper_default(_sfc_main$11, [["render", _sfc_render$11], ["__file", "/Users/alikhalill/Desktop/my-projects/ali-nuxt-toolkit/packages/ui-components/ASkeleton/src/components/variants/ASkeletonImage.vue"]]);
+//#endregion
+//#region src/components/variants/ASkeletonVideo.vue
+const _sfc_main$10 = /* @__PURE__ */ defineComponent({
+	__name: "ASkeletonVideo",
+	props: {
+		ratio: {
+			type: String,
+			required: false,
+			default: "16 / 9"
+		},
+		width: {
+			type: [Number, String],
+			required: false
+		},
+		height: {
+			type: [Number, String],
+			required: false
+		},
+		showIcon: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		animation: {
+			type: String,
+			required: false,
+			default: "pulse"
+		},
+		class: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array
+			],
+			required: false,
+			skipCheck: true
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		__expose();
+		const props = __props;
+		const __returned__ = {
+			props,
+			animClass: computed(() => props.animation === "none" ? null : `a-skel-anim-${props.animation}`),
+			rootStyle: computed(() => {
+				const s = {};
+				if (props.ratio) s.aspectRatio = props.ratio;
+				if (props.width !== void 0) s.width = typeof props.width === "number" ? `${props.width}px` : String(props.width);
+				if (props.height !== void 0) s.height = typeof props.height === "number" ? `${props.height}px` : String(props.height);
+				return s;
+			}),
+			get cn() {
+				return cn;
+			}
+		};
+		Object.defineProperty(__returned__, "__isScriptSetup", {
+			enumerable: false,
+			value: true
+		});
+		return __returned__;
+	}
+});
+const _hoisted_1$3 = {
+	key: 0,
+	class: "size-12",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	"aria-hidden": "true"
+};
+function _sfc_render$10(_ctx, _cache, $props, $setup, $data, $options) {
+	return openBlock(), createElementBlock("div", {
+		class: normalizeClass($setup.cn("a-skel a-skel-variant-video", $setup.animClass, $setup.props.class)),
+		style: normalizeStyle($setup.rootStyle),
+		role: "status",
+		"aria-busy": "true"
+	}, [$setup.props.showIcon ? (openBlock(), createElementBlock("svg", _hoisted_1$3, [..._cache[0] || (_cache[0] = [createElementVNode("circle", {
+		cx: "12",
+		cy: "12",
+		r: "10",
+		stroke: "currentColor",
+		"stroke-width": "1.5"
+	}, null, -1), createElementVNode("path", {
+		d: "M10 8l6 4-6 4V8Z",
+		fill: "currentColor"
+	}, null, -1)])])) : createCommentVNode("v-if", true), _cache[1] || (_cache[1] = createElementVNode("span", { class: "a-skel-sr-only" }, "Loading video…", -1))], 6);
+}
+var ASkeletonVideo_default = /* @__PURE__ */ export_helper_default(_sfc_main$10, [["render", _sfc_render$10], ["__file", "/Users/alikhalill/Desktop/my-projects/ali-nuxt-toolkit/packages/ui-components/ASkeleton/src/components/variants/ASkeletonVideo.vue"]]);
+//#endregion
+//#region src/components/variants/ASkeletonButton.vue
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+	__name: "ASkeletonButton",
+	props: {
+		width: {
+			type: [Number, String],
+			required: false,
+			default: 120
+		},
+		height: {
+			type: [Number, String],
+			required: false,
+			default: 40
+		},
+		outlined: {
+			type: Boolean,
+			required: false
+		},
+		animation: {
+			type: String,
+			required: false,
+			default: "pulse"
+		},
+		class: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array
+			],
+			required: false,
+			skipCheck: true
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		__expose();
+		const props = __props;
+		const __returned__ = {
+			props,
+			animClass: computed(() => props.animation === "none" ? null : `a-skel-anim-${props.animation}`),
+			rootStyle: computed(() => ({
+				width: typeof props.width === "number" ? `${props.width}px` : String(props.width),
+				height: typeof props.height === "number" ? `${props.height}px` : String(props.height),
+				...props.outlined ? {
+					backgroundColor: "transparent",
+					border: "1px solid var(--ak-skel-ring)"
+				} : {}
+			})),
+			get cn() {
+				return cn;
+			}
+		};
+		Object.defineProperty(__returned__, "__isScriptSetup", {
+			enumerable: false,
+			value: true
+		});
+		return __returned__;
+	}
+});
+function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
+	return openBlock(), createElementBlock("div", {
+		class: normalizeClass($setup.cn("a-skel a-skel-variant-button", $setup.animClass, $setup.props.class)),
+		style: normalizeStyle($setup.rootStyle),
+		role: "status",
+		"aria-busy": "true"
+	}, [..._cache[0] || (_cache[0] = [createElementVNode("span", { class: "a-skel-sr-only" }, "Loading button…", -1)])], 6);
+}
+var ASkeletonButton_default = /* @__PURE__ */ export_helper_default(_sfc_main$9, [["render", _sfc_render$9], ["__file", "/Users/alikhalill/Desktop/my-projects/ali-nuxt-toolkit/packages/ui-components/ASkeleton/src/components/variants/ASkeletonButton.vue"]]);
+//#endregion
+//#region src/components/variants/ASkeletonInput.vue
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+	__name: "ASkeletonInput",
+	props: {
+		width: {
+			type: [Number, String],
+			required: false,
+			default: "100%"
+		},
+		height: {
+			type: [Number, String],
+			required: false,
+			default: 40
+		},
+		animation: {
+			type: String,
+			required: false,
+			default: "pulse"
+		},
+		class: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array
+			],
+			required: false,
+			skipCheck: true
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		__expose();
+		const props = __props;
+		const __returned__ = {
+			props,
+			animClass: computed(() => props.animation === "none" ? null : `a-skel-anim-${props.animation}`),
+			rootStyle: computed(() => ({
+				width: typeof props.width === "number" ? `${props.width}px` : String(props.width),
+				height: typeof props.height === "number" ? `${props.height}px` : String(props.height)
+			})),
+			get cn() {
+				return cn;
+			}
+		};
+		Object.defineProperty(__returned__, "__isScriptSetup", {
+			enumerable: false,
+			value: true
+		});
+		return __returned__;
+	}
+});
+function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
+	return openBlock(), createElementBlock("div", {
+		class: normalizeClass($setup.cn("a-skel a-skel-variant-input", $setup.animClass, $setup.props.class)),
+		style: normalizeStyle($setup.rootStyle),
+		role: "status",
+		"aria-busy": "true"
+	}, [..._cache[0] || (_cache[0] = [createElementVNode("span", { class: "a-skel-sr-only" }, "Loading input…", -1)])], 6);
+}
+var ASkeletonInput_default = /* @__PURE__ */ export_helper_default(_sfc_main$8, [["render", _sfc_render$8], ["__file", "/Users/alikhalill/Desktop/my-projects/ali-nuxt-toolkit/packages/ui-components/ASkeleton/src/components/variants/ASkeletonInput.vue"]]);
+//#endregion
+//#region src/components/variants/ASkeletonListItem.vue
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+	__name: "ASkeletonListItem",
+	props: {
+		avatar: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		lines: {
+			type: Number,
+			required: false,
+			default: 2
+		},
+		trailing: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		animation: {
+			type: String,
+			required: false,
+			default: "pulse"
+		},
+		class: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array
+			],
+			required: false,
+			skipCheck: true
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		__expose();
+		const props = __props;
+		const __returned__ = {
+			props,
+			animClass: computed(() => props.animation === "none" ? null : `a-skel-anim-${props.animation}`),
+			get cn() {
+				return cn;
+			},
+			ASkeletonAvatar: ASkeletonAvatar_default,
+			ASkeletonText: ASkeletonText_default
+		};
+		Object.defineProperty(__returned__, "__isScriptSetup", {
+			enumerable: false,
+			value: true
+		});
+		return __returned__;
+	}
+});
+const _hoisted_1$2 = { class: "a-skel-variant-list-item__body" };
+function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
+	return openBlock(), createElementBlock("div", {
+		class: normalizeClass($setup.cn("a-skel-variant-list-item", $setup.props.class)),
+		role: "status",
+		"aria-busy": "true"
+	}, [
+		$setup.props.avatar ? (openBlock(), createBlock($setup["ASkeletonAvatar"], {
+			key: 0,
+			size: 40,
+			animation: $setup.props.animation
+		}, null, 8, ["animation"])) : createCommentVNode("v-if", true),
+		createElementVNode("div", _hoisted_1$2, [createVNode($setup["ASkeletonText"], {
+			lines: $setup.props.lines,
+			animation: $setup.props.animation
+		}, null, 8, ["lines", "animation"])]),
+		$setup.props.trailing ? (openBlock(), createElementBlock("div", {
+			key: 1,
+			class: normalizeClass($setup.cn("a-skel a-skel-variant-button", $setup.animClass)),
+			style: {
+				width: "40px",
+				height: "24px"
+			}
+		}, null, 2)) : createCommentVNode("v-if", true),
+		_cache[0] || (_cache[0] = createElementVNode("span", { class: "a-skel-sr-only" }, "Loading list item…", -1))
+	], 2);
+}
+var ASkeletonListItem_default = /* @__PURE__ */ export_helper_default(_sfc_main$7, [["render", _sfc_render$7], ["__file", "/Users/alikhalill/Desktop/my-projects/ali-nuxt-toolkit/packages/ui-components/ASkeleton/src/components/variants/ASkeletonListItem.vue"]]);
+//#endregion
+//#region src/components/variants/ASkeletonCard.vue
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+	__name: "ASkeletonCard",
+	props: {
+		media: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		heading: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		lines: {
+			type: Number,
+			required: false,
+			default: 3
+		},
+		actions: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		footerAvatar: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		animation: {
+			type: String,
+			required: false,
+			default: "pulse"
+		},
+		class: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array
+			],
+			required: false,
+			skipCheck: true
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		__expose();
+		const __returned__ = {
+			get cn() {
+				return cn;
+			},
+			ASkeletonImage: ASkeletonImage_default,
+			ASkeletonHeading: ASkeletonHeading_default,
+			ASkeletonText: ASkeletonText_default,
+			ASkeletonButton: ASkeletonButton_default,
+			ASkeletonAvatar: ASkeletonAvatar_default
+		};
+		Object.defineProperty(__returned__, "__isScriptSetup", {
+			enumerable: false,
+			value: true
+		});
+		return __returned__;
+	}
+});
+const _hoisted_1$1 = {
+	key: 2,
+	class: "mt-2 flex gap-2"
+};
+const _hoisted_2 = {
+	key: 3,
+	class: "mt-3 flex items-center gap-3"
+};
+const _hoisted_3 = { style: { "flex": "1" } };
+function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
+	return openBlock(), createElementBlock("div", {
+		class: normalizeClass($setup.cn("a-skel-variant-card", _ctx.$props.class)),
+		role: "status",
+		"aria-busy": "true"
+	}, [
+		_ctx.$props.media ? (openBlock(), createBlock($setup["ASkeletonImage"], {
+			key: 0,
+			animation: _ctx.$props.animation
+		}, null, 8, ["animation"])) : createCommentVNode("v-if", true),
+		_ctx.$props.heading ? (openBlock(), createBlock($setup["ASkeletonHeading"], {
+			key: 1,
+			level: 3,
+			animation: _ctx.$props.animation
+		}, null, 8, ["animation"])) : createCommentVNode("v-if", true),
+		createVNode($setup["ASkeletonText"], {
+			lines: _ctx.$props.lines,
+			animation: _ctx.$props.animation
+		}, null, 8, ["lines", "animation"]),
+		_ctx.$props.actions ? (openBlock(), createElementBlock("div", _hoisted_1$1, [createVNode($setup["ASkeletonButton"], {
+			width: 96,
+			height: 36,
+			animation: _ctx.$props.animation
+		}, null, 8, ["animation"]), createVNode($setup["ASkeletonButton"], {
+			width: 96,
+			height: 36,
+			outlined: "",
+			animation: _ctx.$props.animation
+		}, null, 8, ["animation"])])) : createCommentVNode("v-if", true),
+		_ctx.$props.footerAvatar ? (openBlock(), createElementBlock("div", _hoisted_2, [createVNode($setup["ASkeletonAvatar"], {
+			size: 36,
+			animation: _ctx.$props.animation
+		}, null, 8, ["animation"]), createElementVNode("div", _hoisted_3, [createVNode($setup["ASkeletonText"], {
+			lines: 2,
+			animation: _ctx.$props.animation
+		}, null, 8, ["animation"])])])) : createCommentVNode("v-if", true),
+		_cache[0] || (_cache[0] = createElementVNode("span", { class: "a-skel-sr-only" }, "Loading card…", -1))
+	], 2);
+}
+var ASkeletonCard_default = /* @__PURE__ */ export_helper_default(_sfc_main$6, [["render", _sfc_render$6], ["__file", "/Users/alikhalill/Desktop/my-projects/ali-nuxt-toolkit/packages/ui-components/ASkeleton/src/components/variants/ASkeletonCard.vue"]]);
+//#endregion
+//#region src/components/variants/ASkeletonTable.vue
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+	__name: "ASkeletonTable",
+	props: {
+		rows: {
+			type: Number,
+			required: false,
+			default: 5
+		},
+		columns: {
+			type: Number,
+			required: false,
+			default: 4
+		},
+		showHeader: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		animation: {
+			type: String,
+			required: false,
+			default: "pulse"
+		},
+		class: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array
+			],
+			required: false,
+			skipCheck: true
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		__expose();
+		const props = __props;
+		const __returned__ = {
+			props,
+			animClass: computed(() => props.animation === "none" ? null : `a-skel-anim-${props.animation}`),
+			rowStyle: computed(() => ({ gridTemplateColumns: `repeat(${props.columns}, minmax(0, 1fr))` })),
+			get cn() {
+				return cn;
+			}
+		};
+		Object.defineProperty(__returned__, "__isScriptSetup", {
+			enumerable: false,
+			value: true
+		});
+		return __returned__;
+	}
+});
+function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
+	return openBlock(), createElementBlock("div", {
+		class: normalizeClass($setup.cn("a-skel-variant-table", $setup.props.class)),
+		role: "status",
+		"aria-busy": "true"
+	}, [
+		$setup.props.showHeader ? (openBlock(), createElementBlock("div", {
+			key: 0,
+			class: "a-skel-variant-table__row",
+			style: normalizeStyle($setup.rowStyle)
+		}, [(openBlock(true), createElementBlock(Fragment, null, renderList($setup.props.columns, (c) => {
+			return openBlock(), createElementBlock("div", {
+				key: `h-${c}`,
+				class: normalizeClass($setup.cn("a-skel a-skel-variant-heading", $setup.animClass)),
+				style: {
+					height: "1.5rem",
+					width: "70%"
+				}
+			}, null, 2);
+		}), 128))], 4)) : createCommentVNode("v-if", true),
+		(openBlock(true), createElementBlock(Fragment, null, renderList($setup.props.rows, (r) => {
+			return openBlock(), createElementBlock("div", {
+				key: r,
+				class: "a-skel-variant-table__row",
+				style: normalizeStyle($setup.rowStyle)
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList($setup.props.columns, (c) => {
+				return openBlock(), createElementBlock("div", {
+					key: `${r}-${c}`,
+					class: normalizeClass($setup.cn("a-skel a-skel-variant-text", $setup.animClass)),
+					style: normalizeStyle({ width: c === 1 ? "85%" : c === $setup.props.columns ? "50%" : "70%" })
+				}, null, 6);
+			}), 128))], 4);
+		}), 128)),
+		_cache[0] || (_cache[0] = createElementVNode("span", { class: "a-skel-sr-only" }, "Loading table…", -1))
+	], 2);
+}
+var ASkeletonTable_default = /* @__PURE__ */ export_helper_default(_sfc_main$5, [["render", _sfc_render$5], ["__file", "/Users/alikhalill/Desktop/my-projects/ali-nuxt-toolkit/packages/ui-components/ASkeleton/src/components/variants/ASkeletonTable.vue"]]);
+//#endregion
+//#region src/components/variants/ASkeletonChart.vue
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+	__name: "ASkeletonChart",
+	props: {
+		bars: {
+			type: Number,
+			required: false,
+			default: 7
+		},
+		height: {
+			type: [Number, String],
+			required: false,
+			default: "8rem"
+		},
+		showHeader: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		animation: {
+			type: String,
+			required: false,
+			default: "pulse"
+		},
+		class: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array
+			],
+			required: false,
+			skipCheck: true
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		__expose();
+		const props = __props;
+		const animClass = computed(() => props.animation === "none" ? null : `a-skel-anim-${props.animation}`);
+		const chartStyle = computed(() => ({ height: typeof props.height === "number" ? `${props.height}px` : String(props.height) }));
+		const HEIGHTS = [
+			62,
+			78,
+			45,
+			91,
+			68,
+			82,
+			55,
+			73,
+			39,
+			88,
+			60,
+			74
+		];
+		function barHeight(i) {
+			return `${HEIGHTS[i % HEIGHTS.length]}%`;
+		}
+		const __returned__ = {
+			props,
+			animClass,
+			chartStyle,
+			HEIGHTS,
+			barHeight,
+			get cn() {
+				return cn;
+			},
+			ASkeletonHeading: ASkeletonHeading_default,
+			ASkeletonText: ASkeletonText_default
+		};
+		Object.defineProperty(__returned__, "__isScriptSetup", {
+			enumerable: false,
+			value: true
+		});
+		return __returned__;
+	}
+});
+const _hoisted_1 = { style: { "margin-top": "0.4rem" } };
+function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
+	return openBlock(), createElementBlock("div", {
+		class: normalizeClass($setup.cn($setup.props.class)),
+		role: "status",
+		"aria-busy": "true"
+	}, [
+		$setup.props.showHeader ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createVNode($setup["ASkeletonHeading"], {
+			level: 4,
+			animation: $setup.props.animation,
+			width: "45%"
+		}, null, 8, ["animation"]), createElementVNode("div", _hoisted_1, [createVNode($setup["ASkeletonText"], {
+			lines: 1,
+			animation: $setup.props.animation,
+			width: "60%"
+		}, null, 8, ["animation"])])], 64)) : createCommentVNode("v-if", true),
+		createElementVNode("div", {
+			class: "a-skel-variant-chart",
+			style: normalizeStyle([$setup.chartStyle, { "margin-top": "1rem" }])
+		}, [(openBlock(true), createElementBlock(Fragment, null, renderList($setup.props.bars, (i) => {
+			return openBlock(), createElementBlock("div", {
+				key: i,
+				class: normalizeClass($setup.cn("a-skel a-skel-variant-chart__bar", $setup.animClass)),
+				style: normalizeStyle({ height: $setup.barHeight(i - 1) })
+			}, null, 6);
+		}), 128))], 4),
+		_cache[0] || (_cache[0] = createElementVNode("span", { class: "a-skel-sr-only" }, "Loading chart…", -1))
+	], 2);
+}
+var ASkeletonChart_default = /* @__PURE__ */ export_helper_default(_sfc_main$4, [["render", _sfc_render$4], ["__file", "/Users/alikhalill/Desktop/my-projects/ali-nuxt-toolkit/packages/ui-components/ASkeleton/src/components/variants/ASkeletonChart.vue"]]);
+//#endregion
+//#region src/components/variants/ASkeletonForm.vue
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+	__name: "ASkeletonForm",
+	props: {
+		fields: {
+			type: Number,
+			required: false,
+			default: 3
+		},
+		showSubmit: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		animation: {
+			type: String,
+			required: false,
+			default: "pulse"
+		},
+		class: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array
+			],
+			required: false,
+			skipCheck: true
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		__expose();
+		const __returned__ = {
+			get cn() {
+				return cn;
+			},
+			ASkeletonText: ASkeletonText_default,
+			ASkeletonInput: ASkeletonInput_default,
+			ASkeletonButton: ASkeletonButton_default
+		};
+		Object.defineProperty(__returned__, "__isScriptSetup", {
+			enumerable: false,
+			value: true
+		});
+		return __returned__;
+	}
+});
+function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
+	return openBlock(), createElementBlock("div", {
+		class: normalizeClass($setup.cn("flex flex-col gap-4", _ctx.$props.class)),
+		role: "status",
+		"aria-busy": "true"
+	}, [
+		(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.$props.fields, (i) => {
+			return openBlock(), createElementBlock("div", {
+				key: i,
+				class: "flex flex-col gap-2"
+			}, [createVNode($setup["ASkeletonText"], {
+				lines: 1,
+				width: "30%",
+				animation: _ctx.$props.animation
+			}, null, 8, ["animation"]), createVNode($setup["ASkeletonInput"], { animation: _ctx.$props.animation }, null, 8, ["animation"])]);
+		}), 128)),
+		_ctx.$props.showSubmit ? (openBlock(), createBlock($setup["ASkeletonButton"], {
+			key: 0,
+			width: 120,
+			height: 40,
+			animation: _ctx.$props.animation
+		}, null, 8, ["animation"])) : createCommentVNode("v-if", true),
+		_cache[0] || (_cache[0] = createElementVNode("span", { class: "a-skel-sr-only" }, "Loading form…", -1))
+	], 2);
+}
+var ASkeletonForm_default = /* @__PURE__ */ export_helper_default(_sfc_main$3, [["render", _sfc_render$3], ["__file", "/Users/alikhalill/Desktop/my-projects/ali-nuxt-toolkit/packages/ui-components/ASkeleton/src/components/variants/ASkeletonForm.vue"]]);
+//#endregion
+//#region src/components/variants/ASkeletonArticle.vue
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+	__name: "ASkeletonArticle",
+	props: {
+		media: {
+			type: Boolean,
+			required: false,
+			default: true
+		},
+		paragraphs: {
+			type: Number,
+			required: false,
+			default: 3
+		},
+		linesPerParagraph: {
+			type: Number,
+			required: false,
+			default: 4
+		},
+		animation: {
+			type: String,
+			required: false,
+			default: "pulse"
+		},
+		class: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array
+			],
+			required: false,
+			skipCheck: true
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		__expose();
+		const __returned__ = {
+			get cn() {
+				return cn;
+			},
+			ASkeletonHeading: ASkeletonHeading_default,
+			ASkeletonText: ASkeletonText_default,
+			ASkeletonImage: ASkeletonImage_default
+		};
+		Object.defineProperty(__returned__, "__isScriptSetup", {
+			enumerable: false,
+			value: true
+		});
+		return __returned__;
+	}
+});
+function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
+	return openBlock(), createElementBlock("article", {
+		class: normalizeClass($setup.cn("flex flex-col gap-4", _ctx.$props.class)),
+		role: "status",
+		"aria-busy": "true"
+	}, [
+		createVNode($setup["ASkeletonHeading"], {
+			level: 1,
+			animation: _ctx.$props.animation
+		}, null, 8, ["animation"]),
+		_ctx.$props.media ? (openBlock(), createBlock($setup["ASkeletonImage"], {
+			key: 0,
+			animation: _ctx.$props.animation
+		}, null, 8, ["animation"])) : createCommentVNode("v-if", true),
+		(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.$props.paragraphs, (i) => {
+			return openBlock(), createElementBlock("div", { key: i }, [createVNode($setup["ASkeletonText"], {
+				lines: _ctx.$props.linesPerParagraph,
+				animation: _ctx.$props.animation
+			}, null, 8, ["lines", "animation"])]);
+		}), 128)),
+		_cache[0] || (_cache[0] = createElementVNode("span", { class: "a-skel-sr-only" }, "Loading article…", -1))
+	], 2);
+}
+var ASkeletonArticle_default = /* @__PURE__ */ export_helper_default(_sfc_main$2, [["render", _sfc_render$2], ["__file", "/Users/alikhalill/Desktop/my-projects/ali-nuxt-toolkit/packages/ui-components/ASkeleton/src/components/variants/ASkeletonArticle.vue"]]);
+//#endregion
+//#region src/components/variants/ASkeletonDivider.vue
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+	__name: "ASkeletonDivider",
+	props: {
+		thickness: {
+			type: Number,
+			required: false,
+			default: 1
+		},
+		animation: {
+			type: String,
+			required: false,
+			default: "pulse"
+		},
+		class: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array
+			],
+			required: false,
+			skipCheck: true
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		__expose();
+		const props = __props;
+		const __returned__ = {
+			props,
+			animClass: computed(() => props.animation === "none" ? null : `a-skel-anim-${props.animation}`),
+			rootStyle: computed(() => ({
+				height: `${props.thickness}px`,
+				width: "100%"
+			})),
+			get cn() {
+				return cn;
+			}
+		};
+		Object.defineProperty(__returned__, "__isScriptSetup", {
+			enumerable: false,
+			value: true
+		});
+		return __returned__;
+	}
+});
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+	return openBlock(), createElementBlock("div", {
+		class: normalizeClass($setup.cn("a-skel", $setup.animClass, $setup.props.class)),
+		style: normalizeStyle($setup.rootStyle),
+		role: "separator",
+		"aria-hidden": "true"
+	}, null, 6);
+}
+var ASkeletonDivider_default = /* @__PURE__ */ export_helper_default(_sfc_main$1, [["render", _sfc_render$1], ["__file", "/Users/alikhalill/Desktop/my-projects/ali-nuxt-toolkit/packages/ui-components/ASkeleton/src/components/variants/ASkeletonDivider.vue"]]);
+//#endregion
+//#region src/components/variants/ASkeletonChip.vue
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	__name: "ASkeletonChip",
+	props: {
+		width: {
+			type: [Number, String],
+			required: false,
+			default: 80
+		},
+		height: {
+			type: [Number, String],
+			required: false,
+			default: 24
+		},
+		animation: {
+			type: String,
+			required: false,
+			default: "pulse"
+		},
+		class: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array
+			],
+			required: false,
+			skipCheck: true
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		__expose();
+		const props = __props;
+		const __returned__ = {
+			props,
+			animClass: computed(() => props.animation === "none" ? null : `a-skel-anim-${props.animation}`),
+			rootStyle: computed(() => ({
+				width: typeof props.width === "number" ? `${props.width}px` : String(props.width),
+				height: typeof props.height === "number" ? `${props.height}px` : String(props.height),
+				borderRadius: "9999px",
+				display: "inline-block"
+			})),
+			get cn() {
+				return cn;
+			}
+		};
+		Object.defineProperty(__returned__, "__isScriptSetup", {
+			enumerable: false,
+			value: true
+		});
+		return __returned__;
+	}
+});
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+	return openBlock(), createElementBlock("span", {
+		class: normalizeClass($setup.cn("a-skel", $setup.animClass, $setup.props.class)),
+		style: normalizeStyle($setup.rootStyle),
+		role: "status",
+		"aria-busy": "true"
+	}, null, 6);
+}
+var ASkeletonChip_default = /* @__PURE__ */ export_helper_default(_sfc_main, [["render", _sfc_render], ["__file", "/Users/alikhalill/Desktop/my-projects/ali-nuxt-toolkit/packages/ui-components/ASkeleton/src/components/variants/ASkeletonChip.vue"]]);
+//#endregion
+//#region src/utils/walkDom.ts
+const DEFAULT_MAX_NODES$1 = 500;
+const DEFAULT_MIN_SIZE$1 = 4;
+const LEAF_TAGS = new Set([
+	"IMG",
+	"SVG",
+	"CANVAS",
+	"VIDEO",
+	"INPUT",
+	"TEXTAREA",
+	"SELECT",
+	"BUTTON",
+	"PROGRESS",
+	"METER",
+	"HR"
+]);
+/**
+* Walk `root`'s descendants and produce a list of shimmer blocks that mirror its
+* rendered layout. Coordinates are relative to `root`'s top-left so the result can
+* be replayed in any container of the same size.
+*
+* Performance:
+*   - `maxNodes` caps the walk so a 5000-row table doesn't lock up the main thread.
+*   - `minSize` filters out hairlines (1-2 px paddings, decorative dots) that
+*     inflate node count without adding visual signal.
+*   - All `getBoundingClientRect` / `getComputedStyle` reads happen in a single
+*     top-down pass with no intervening writes, so the browser does one layout
+*     up front and serves cached values from then on (no layout thrashing).
+*   - Each emitted `ShapeNode` has a frozen pre-computed `style` (and `lineStyles`
+*     for multi-line text) so the render path is allocation-free.
+*/
+function walkDom(root, options) {
+	const maxNodes = options.maxNodes ?? DEFAULT_MAX_NODES$1;
+	const minSize = options.minSize ?? DEFAULT_MIN_SIZE$1;
+	const nodes = [];
+	const rootRect = root.getBoundingClientRect();
+	let truncated = false;
+	function visit(el, depth) {
+		if (nodes.length >= maxNodes) {
+			truncated = true;
+			return;
+		}
+		const html = el;
+		if (html.dataset?.skeletonIgnore !== void 0) return;
+		const cs = window.getComputedStyle(el);
+		if (cs.display === "none" || cs.visibility === "hidden" || cs.opacity === "0") return;
+		const rect = el.getBoundingClientRect();
+		if (rect.width < minSize || rect.height < minSize) return;
+		const tag = el.tagName.toUpperCase();
+		const isLeafTag = LEAF_TAGS.has(tag);
+		const hasStop = html.dataset?.skeletonStop !== void 0;
+		const childElements = [];
+		for (let i = 0; i < el.children.length; i++) {
+			const c = el.children[i];
+			if (c.dataset?.skeletonIgnore === void 0) childElements.push(c);
+		}
+		const hasOwnText = hasDirectTextContent(el);
+		const reachedDepth = depth >= options.maxDepth;
+		if (isLeafTag || hasStop || reachedDepth || childElements.length === 0) {
+			const node = elementToShape(el, tag, cs, rect, rootRect, hasOwnText);
+			if (node) nodes.push(node);
+			return;
+		}
+		const containerNode = containerSurfaceToShape(cs, rect, rootRect);
+		if (containerNode) nodes.push(containerNode);
+		for (let i = 0; i < childElements.length; i++) {
+			if (nodes.length >= maxNodes) {
+				truncated = true;
+				return;
+			}
+			visit(childElements[i], depth + 1);
+		}
+	}
+	for (let i = 0; i < root.children.length; i++) {
+		if (nodes.length >= maxNodes) {
+			truncated = true;
+			break;
+		}
+		visit(root.children[i], 1);
+	}
+	return Object.freeze({
+		nodes: Object.freeze(nodes),
+		width: Math.round(rootRect.width),
+		height: Math.round(rootRect.height),
+		truncated
+	});
+}
+function hasDirectTextContent(el) {
+	for (let i = 0; i < el.childNodes.length; i++) {
+		const node = el.childNodes[i];
+		if (node.nodeType === Node.TEXT_NODE && (node.textContent ?? "").trim().length > 0) return true;
+	}
+	return false;
+}
+/**
+* Emit a backing block for a container with its own visible surface — real
+* background, border, box-shadow, or non-full opacity. Geometry is the
+* container's exact bounding rect so the width / height / radius match the
+* real DOM 1:1. Returns `null` when the container has no visible surface
+* (a plain unstyled `<div>` is layout-only and shouldn't add a block).
+*/
+function containerSurfaceToShape(cs, rect, origin) {
+	const bg = readBackgroundColor(cs);
+	const border = readBorder(cs);
+	const boxShadow = readBoxShadow(cs);
+	const opacity = readOpacity(cs);
+	if (!bg && !border && !boxShadow && opacity === void 0) return null;
+	return freezeShape({
+		type: "block",
+		x: Math.round(rect.left - origin.left),
+		y: Math.round(rect.top - origin.top),
+		w: Math.round(rect.width),
+		h: Math.round(rect.height),
+		radius: parseFloat(cs.borderRadius) || 0,
+		bg,
+		border,
+		boxShadow,
+		opacity
+	});
+}
+function elementToShape(el, tag, cs, rect, origin, hasText) {
+	const x = Math.round(rect.left - origin.left);
+	const y = Math.round(rect.top - origin.top);
+	const w = Math.round(rect.width);
+	const h = Math.round(rect.height);
+	const radius = parseFloat(cs.borderRadius) || 0;
+	const minDim = Math.min(w, h);
+	const isCircle = radius >= minDim / 2 - 1 && Math.abs(w - h) <= 2 && minDim > 0;
+	let type;
+	let resolvedRadius = radius;
+	let lines;
+	let lineHeight;
+	let textRects;
+	let textAlign;
+	if (tag === "IMG" || tag === "SVG" || tag === "VIDEO" || tag === "CANVAS") type = "image";
+	else if (isCircle) {
+		type = "circle";
+		resolvedRadius = Math.floor(minDim / 2);
+	} else if (hasText) {
+		type = "text";
+		lineHeight = Math.round(parseFloat(cs.lineHeight) || parseFloat(cs.fontSize) * 1.4 || 16);
+		lines = Math.max(1, Math.round(h / lineHeight));
+		resolvedRadius = Math.min(radius, 4);
+		textAlign = readTextAlign(cs);
+		textRects = measureTextRects(el, origin);
+	} else type = "block";
+	const bg = readBackgroundColor(cs);
+	const border = readBorder(cs);
+	const boxShadow = readBoxShadow(cs);
+	const opacity = readOpacity(cs);
+	return freezeShape({
+		type,
+		x,
+		y,
+		w,
+		h,
+		radius: resolvedRadius,
+		lines,
+		lineHeight,
+		textRects,
+		bg,
+		border,
+		boxShadow,
+		opacity,
+		textAlign
+	});
+}
+/**
+* Per-line text rects via `Range.getClientRects()`. Returns one rect per visual
+* line of rendered text — exact left/width for each line so wrapped paragraphs,
+* RTL last-line position, centered headings all replay 1:1 without heuristics.
+* Returns `undefined` if the element has no direct text content or the Range
+* API isn't usable in this environment.
+*/
+function measureTextRects(el, origin) {
+	if (typeof document === "undefined" || typeof document.createRange !== "function") return void 0;
+	let range;
+	try {
+		range = document.createRange();
+		range.selectNodeContents(el);
+	} catch {
+		return;
+	}
+	const rects = range.getClientRects();
+	if (!rects || rects.length === 0) return void 0;
+	const merged = [];
+	for (let i = 0; i < rects.length; i++) {
+		const r = rects[i];
+		if (r.width <= 0 || r.height <= 0) continue;
+		const lr = {
+			x: Math.round(r.left - origin.left),
+			y: Math.round(r.top - origin.top),
+			w: Math.round(r.width),
+			h: Math.round(r.height)
+		};
+		const last = merged[merged.length - 1];
+		if (last && Math.abs(last.y - lr.y) <= 1 && Math.abs(last.h - lr.h) <= 1 && Math.max(last.x, lr.x) - Math.min(last.x + last.w, lr.x + lr.w) <= 2) {
+			const leftEdge = Math.min(last.x, lr.x);
+			const rightEdge = Math.max(last.x + last.w, lr.x + lr.w);
+			last.x = leftEdge;
+			last.w = rightEdge - leftEdge;
+		} else merged.push(lr);
+	}
+	return merged.length > 0 ? merged : void 0;
+}
+const TRANSPARENT_RE = /^(transparent|rgba?\([^)]*,\s*0(\.0+)?\s*\)|hsla?\([^)]*,\s*0%?\s*\))$/i;
+function readBackgroundColor(cs) {
+	const bg = cs.backgroundColor;
+	if (!bg || TRANSPARENT_RE.test(bg)) return void 0;
+	return bg;
+}
+function readBorder(cs) {
+	const width = parseFloat(cs.borderTopWidth) || 0;
+	if (width < .5) return void 0;
+	const style = cs.borderTopStyle;
+	if (!style || style === "none" || style === "hidden") return void 0;
+	const color = cs.borderTopColor;
+	if (!color || TRANSPARENT_RE.test(color)) return void 0;
+	return `${Math.round(width)}px ${style} ${color}`;
+}
+function readBoxShadow(cs) {
+	const sh = cs.boxShadow;
+	if (!sh || sh === "none") return void 0;
+	return sh;
+}
+function readOpacity(cs) {
+	const o = parseFloat(cs.opacity);
+	if (!Number.isFinite(o) || o >= 1) return void 0;
+	if (o <= 0) return void 0;
+	return Math.round(o * 100) / 100;
+}
+function readTextAlign(cs) {
+	const ta = cs.textAlign;
+	if (!ta) return void 0;
+	if (ta === "left" || ta === "right" || ta === "center" || ta === "justify" || ta === "start" || ta === "end") return ta;
+}
+/**
+* Pre-compute (and freeze) the inline styles used at render time. Doing it once
+* here means rendering 500 blocks doesn't allocate 500 style objects per frame.
+*
+* Captured visual signals (bg, border, shadow, opacity) are merged into the
+* frozen style so the replay carries the real DOM's surface — a white button
+* stays white, a ring-bordered button keeps its ring, a shadowed card keeps
+* its elevation.
+*/
+function freezeShape(node) {
+	const baseStyle = {
+		left: `${node.x}px`,
+		top: `${node.y}px`,
+		width: `${node.w}px`,
+		height: `${node.h}px`,
+		borderRadius: `${node.radius}px`
+	};
+	applyVisualSignals$1(baseStyle, node);
+	const style = Object.freeze(baseStyle);
+	let lineStyles;
+	if (node.type === "text" && node.textRects && node.textRects.length > 0) {
+		const radiusStr = `${node.radius}px`;
+		const arr = [];
+		for (const r of node.textRects) {
+			const lineStyle = {
+				left: `${r.x}px`,
+				top: `${r.y}px`,
+				width: `${r.w}px`,
+				height: `${r.h}px`,
+				borderRadius: radiusStr
+			};
+			applyVisualSignals$1(lineStyle, node);
+			arr.push(Object.freeze(lineStyle));
+		}
+		lineStyles = Object.freeze(arr);
+	} else if (node.type === "text" && node.lines && node.lines > 1) {
+		const lh = node.lineHeight ?? Math.round(node.h / node.lines);
+		const barHeight = Math.max(8, Math.round(lh * .7));
+		const widthFull = node.w;
+		const widthLast = Math.max(40, Math.round(node.w * .7));
+		const heightStr = `${barHeight}px`;
+		const radiusStr = `${node.radius}px`;
+		const arr = [];
+		for (let i = 1; i <= node.lines; i++) {
+			const isLast = i === node.lines;
+			const lineWidth = isLast ? widthLast : widthFull;
+			let leftX = node.x;
+			if (isLast && node.textAlign) {
+				const slack = widthFull - lineWidth;
+				if (node.textAlign === "center") leftX = node.x + Math.round(slack / 2);
+				else if (node.textAlign === "right" || node.textAlign === "end") leftX = node.x + slack;
+			}
+			const lineStyle = {
+				left: `${leftX}px`,
+				top: `${node.y + (i - 1) * lh}px`,
+				width: `${lineWidth}px`,
+				height: heightStr,
+				borderRadius: radiusStr
+			};
+			applyVisualSignals$1(lineStyle, node);
+			arr.push(Object.freeze(lineStyle));
+		}
+		lineStyles = Object.freeze(arr);
+	}
+	return Object.freeze({
+		type: node.type,
+		x: node.x,
+		y: node.y,
+		w: node.w,
+		h: node.h,
+		radius: node.radius,
+		lines: node.lines,
+		lineHeight: node.lineHeight,
+		textRects: node.textRects ? Object.freeze(node.textRects) : void 0,
+		bg: node.bg,
+		border: node.border,
+		boxShadow: node.boxShadow,
+		opacity: node.opacity,
+		textAlign: node.textAlign,
+		style,
+		lineStyles
+	});
+}
+/**
+* Merge captured surface signals into a style object in place. Each signal is
+* additive; `bg` uses `background` shorthand so it wipes the default linear
+* gradient on `.a-skel-block` cleanly.
+*/
+function applyVisualSignals$1(out, node) {
+	if (node.bg) out.background = node.bg;
+	if (node.border) out.border = node.border;
+	if (node.boxShadow) out.boxShadow = node.boxShadow;
+	if (node.opacity !== void 0) out.opacity = node.opacity;
+}
+//#endregion
+//#region src/composables/useShapeProbe.ts
+const DEFAULT_RESIZE_DEBOUNCE_MS = 150;
+/**
+* Observe `getTarget()` and capture its rendered shape whenever the element
+* appears or resizes.
+*
+* Performance:
+*   - Initial capture runs via `requestAnimationFrame` so it sneaks into the
+*     first idle window after mount — no synchronous layout from inside the
+*     render queue.
+*   - Subsequent `ResizeObserver` callbacks are debounced (default 150 ms) so a
+*     drag-resize doesn't trigger a fresh DOM walk per frame.
+*   - The capture strategy itself enforces `maxNodes` so even a worst-case
+*     capture (10k descendants) returns in bounded time.
+*/
+function useShapeProbe(getTarget, options) {
+	let observer;
+	let frame;
+	let timer;
+	let hasCaptured = false;
+	const debounceMs = options.resizeDebounceMs ?? DEFAULT_RESIZE_DEBOUNCE_MS;
+	const captureFn = options.capture ?? walkDom;
+	function cleanup() {
+		if (observer) {
+			observer.disconnect();
+			observer = void 0;
+		}
+		if (frame !== void 0) {
+			cancelAnimationFrame(frame);
+			frame = void 0;
+		}
+		if (timer !== void 0) {
+			clearTimeout(timer);
+			timer = void 0;
+		}
+	}
+	function capture(el) {
+		const result = captureFn(el, {
+			maxDepth: options.maxDepth,
+			maxNodes: options.maxNodes,
+			minSize: options.minSize
+		});
+		if (result.width > 0 && result.height > 0 && result.nodes.length > 0) {
+			hasCaptured = true;
+			options.onCapture(result);
+		}
+	}
+	function scheduleImmediate(el) {
+		if (frame !== void 0) cancelAnimationFrame(frame);
+		frame = requestAnimationFrame(() => {
+			frame = void 0;
+			capture(el);
+		});
+	}
+	function scheduleDebounced(el) {
+		if (timer !== void 0) clearTimeout(timer);
+		timer = setTimeout(() => {
+			timer = void 0;
+			capture(el);
+		}, debounceMs);
+	}
+	watch(getTarget, (el) => {
+		cleanup();
+		hasCaptured = false;
+		if (!el || typeof window === "undefined") return;
+		scheduleImmediate(el);
+		if (typeof ResizeObserver !== "undefined") {
+			observer = new ResizeObserver(() => {
+				if (hasCaptured) scheduleDebounced(el);
+			});
+			observer.observe(el);
+		}
+	}, {
+		immediate: true,
+		flush: "post"
+	});
+	onBeforeUnmount(cleanup);
+}
+//#endregion
+//#region src/composables/useSkeletonCache.ts
+const memory = /* @__PURE__ */ new Map();
+const STORAGE_PREFIX = "a-skeleton:";
+/**
+* Schema version for persisted flat `CachedShape` entries. Bump whenever the
+* `ShapeNode` / `CachedShape` field set changes so stale localStorage payloads
+* from older releases get dropped on read instead of rehydrating into a wrong
+* layout.
+*
+* v2 — added advanced surface signals (textRects, bg, border, boxShadow,
+*      opacity, textAlign).
+*/
+const SCHEMA_VERSION = 2;
+/**
+* Separate in-memory + localStorage namespace for the Recipe 3 structural
+* shape (`StructuralShape`, `v: 3`). Kept apart from the flat-shape cache so
+* the two pipelines can't collide on the same `cacheKey` — `<ASkeleton>`'s
+* legacy cache-replay path and Recipe 3 may both run on the same page with
+* the same key.
+*/
+const structuralMemory = /* @__PURE__ */ new Map();
+const STRUCTURAL_PREFIX = "a-skeleton:s:";
+const STRUCTURAL_SCHEMA_VERSION = 3;
+/**
+* Lookup a captured shape by key. Reads in-memory first, then `localStorage` if
+* `persist` is enabled. SSR-safe — bypasses `window` access on the server.
+* Rehydrates pre-computed styles for shapes deserialized from older sessions
+* (Object.freeze + style/lineStyles don't survive `JSON.stringify` round-trip).
+* Drops the entry if it was written by a different schema version.
+*/
+function getCached(key, persist) {
+	const hit = memory.get(key);
+	if (hit) return hit;
+	if (!persist || typeof window === "undefined") return void 0;
+	try {
+		const storageKey = STORAGE_PREFIX + key;
+		const raw = window.localStorage.getItem(storageKey);
+		if (!raw) return void 0;
+		const parsed = JSON.parse(raw);
+		if (parsed.v !== SCHEMA_VERSION) {
+			window.localStorage.removeItem(storageKey);
+			return;
+		}
+		const rehydrated = rehydrateShape(parsed);
+		memory.set(key, rehydrated);
+		return rehydrated;
+	} catch {
+		return;
+	}
+}
+/** Store a captured shape. `persist=true` mirrors to `localStorage`. */
+function setCached(key, value, persist) {
+	memory.set(key, value);
+	if (!persist || typeof window === "undefined") return;
+	try {
+		const lean = {
+			v: SCHEMA_VERSION,
+			width: value.width,
+			height: value.height,
+			nodes: leanNodes(value.nodes),
+			truncated: value.truncated
+		};
+		window.localStorage.setItem(STORAGE_PREFIX + key, JSON.stringify(lean));
+	} catch {}
+}
+/**
+* Drop a single entry (or all entries when no key) — wipes both the flat-shape
+* and the structural-shape namespaces. Exposed for tests + manual invalidation.
+*/
+function clearCached(key) {
+	if (!key) {
+		memory.clear();
+		structuralMemory.clear();
+		if (typeof window === "undefined") return;
+		try {
+			const ls = window.localStorage;
+			const stale = [];
+			for (let i = 0; i < ls.length; i++) {
+				const k = ls.key(i);
+				if (!k) continue;
+				if (k.startsWith(STORAGE_PREFIX) || k.startsWith(STRUCTURAL_PREFIX)) stale.push(k);
+			}
+			for (const k of stale) ls.removeItem(k);
+		} catch {}
+		return;
+	}
+	memory.delete(key);
+	structuralMemory.delete(key);
+	if (typeof window === "undefined") return;
+	try {
+		window.localStorage.removeItem(STORAGE_PREFIX + key);
+		window.localStorage.removeItem(STRUCTURAL_PREFIX + key);
+	} catch {}
+}
+/**
+* Drop a single structural-shape entry (or all when no key). Kept separate
+* from `clearCached` so callers that only manage structural shapes don't have
+* to reach across namespaces.
+*/
+function clearCachedStructural(key) {
+	if (!key) {
+		structuralMemory.clear();
+		if (typeof window === "undefined") return;
+		try {
+			const ls = window.localStorage;
+			const stale = [];
+			for (let i = 0; i < ls.length; i++) {
+				const k = ls.key(i);
+				if (k && k.startsWith(STRUCTURAL_PREFIX)) stale.push(k);
+			}
+			for (const k of stale) ls.removeItem(k);
+		} catch {}
+		return;
+	}
+	structuralMemory.delete(key);
+	if (typeof window === "undefined") return;
+	try {
+		window.localStorage.removeItem(STRUCTURAL_PREFIX + key);
+	} catch {}
+}
+/**
+* Lookup a structural shape by key. Reads in-memory first, then `localStorage`
+* when `persist` is enabled. Stale schema versions get purged on read.
+*/
+function getCachedStructural(key, persist) {
+	const hit = structuralMemory.get(key);
+	if (hit) return hit;
+	if (!persist || typeof window === "undefined") return void 0;
+	try {
+		const storageKey = STRUCTURAL_PREFIX + key;
+		const raw = window.localStorage.getItem(storageKey);
+		if (!raw) return void 0;
+		const parsed = JSON.parse(raw);
+		if (parsed.v !== STRUCTURAL_SCHEMA_VERSION) {
+			window.localStorage.removeItem(storageKey);
+			return;
+		}
+		const rehydrated = rehydrateStructuralShape(parsed);
+		structuralMemory.set(key, rehydrated);
+		return rehydrated;
+	} catch {
+		return;
+	}
+}
+/** Store a structural shape. `persist=true` mirrors to `localStorage`. */
+function setCachedStructural(key, value, persist) {
+	structuralMemory.set(key, value);
+	if (!persist || typeof window === "undefined") return;
+	try {
+		const payload = {
+			v: STRUCTURAL_SCHEMA_VERSION,
+			width: value.width,
+			height: value.height,
+			nodes: value.nodes.map(leanStructuralNode),
+			truncated: value.truncated,
+			capturedAt: value.capturedAt
+		};
+		window.localStorage.setItem(STRUCTURAL_PREFIX + key, JSON.stringify(payload));
+	} catch {}
+}
+function leanStructuralNode(node) {
+	if (node.kind === "container") return {
+		kind: "container",
+		tag: node.tag,
+		className: node.className,
+		style: node.style,
+		children: node.children.map(leanStructuralNode)
+	};
+	return {
+		kind: "leaf",
+		leafKind: node.leafKind,
+		className: node.className,
+		style: node.style,
+		textLines: node.textLines
+	};
+}
+function rehydrateStructuralShape(persisted) {
+	return Object.freeze({
+		v: STRUCTURAL_SCHEMA_VERSION,
+		width: persisted.width,
+		height: persisted.height,
+		nodes: Object.freeze(persisted.nodes.map(rehydrateStructuralNode)),
+		truncated: persisted.truncated,
+		capturedAt: persisted.capturedAt
+	});
+}
+function rehydrateStructuralNode(node) {
+	if (node.kind === "container") return Object.freeze({
+		kind: "container",
+		tag: node.tag,
+		className: node.className,
+		style: Object.freeze({ ...node.style }),
+		children: Object.freeze(node.children.map(rehydrateStructuralNode))
+	});
+	return Object.freeze({
+		kind: "leaf",
+		leafKind: node.leafKind,
+		className: node.className ?? "",
+		style: Object.freeze({ ...node.style }),
+		textLines: node.textLines ? Object.freeze([...node.textLines]) : void 0
+	});
+}
+/**
+* Rebuild `style` + `lineStyles` for nodes that lost them via serialization.
+* Walks the array in-place where possible and freezes the result so the render
+* path stays allocation-free.
+*/
+function rehydrateShape(shape) {
+	const nodes = shape.nodes.map((n) => freezeNodeStyles(n));
+	return Object.freeze({
+		nodes: Object.freeze(nodes),
+		width: shape.width,
+		height: shape.height,
+		truncated: shape.truncated
+	});
+}
+function leanNodes(nodes) {
+	return nodes.map((n) => ({
+		type: n.type,
+		x: n.x,
+		y: n.y,
+		w: n.w,
+		h: n.h,
+		radius: n.radius,
+		lines: n.lines,
+		lineHeight: n.lineHeight,
+		textRects: n.textRects ? n.textRects.map((r) => ({
+			x: r.x,
+			y: r.y,
+			w: r.w,
+			h: r.h
+		})) : void 0,
+		bg: n.bg,
+		border: n.border,
+		boxShadow: n.boxShadow,
+		opacity: n.opacity,
+		textAlign: n.textAlign
+	}));
+}
+function freezeNodeStyles(node) {
+	const baseStyle = {
+		left: `${node.x}px`,
+		top: `${node.y}px`,
+		width: `${node.w}px`,
+		height: `${node.h}px`,
+		borderRadius: `${node.radius}px`
+	};
+	applyVisualSignals(baseStyle, node);
+	const style = Object.freeze(baseStyle);
+	let lineStyles;
+	if (node.type === "text" && node.textRects && node.textRects.length > 0) {
+		const radiusStr = `${node.radius}px`;
+		const arr = [];
+		for (const r of node.textRects) {
+			const lineStyle = {
+				left: `${r.x}px`,
+				top: `${r.y}px`,
+				width: `${r.w}px`,
+				height: `${r.h}px`,
+				borderRadius: radiusStr
+			};
+			applyVisualSignals(lineStyle, node);
+			arr.push(Object.freeze(lineStyle));
+		}
+		lineStyles = Object.freeze(arr);
+	} else if (node.type === "text" && node.lines && node.lines > 1) {
+		const lh = node.lineHeight ?? Math.round(node.h / node.lines);
+		const barHeight = Math.max(8, Math.round(lh * .7));
+		const widthFull = node.w;
+		const widthLast = Math.max(40, Math.round(node.w * .7));
+		const heightStr = `${barHeight}px`;
+		const radiusStr = `${node.radius}px`;
+		const arr = [];
+		for (let i = 1; i <= node.lines; i++) {
+			const isLast = i === node.lines;
+			const lineWidth = isLast ? widthLast : widthFull;
+			let leftX = node.x;
+			if (isLast && node.textAlign) {
+				const slack = widthFull - lineWidth;
+				if (node.textAlign === "center") leftX = node.x + Math.round(slack / 2);
+				else if (node.textAlign === "right" || node.textAlign === "end") leftX = node.x + slack;
+			}
+			const lineStyle = {
+				left: `${leftX}px`,
+				top: `${node.y + (i - 1) * lh}px`,
+				width: `${lineWidth}px`,
+				height: heightStr,
+				borderRadius: radiusStr
+			};
+			applyVisualSignals(lineStyle, node);
+			arr.push(Object.freeze(lineStyle));
+		}
+		lineStyles = Object.freeze(arr);
 	}
-});
-function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
-	return $props.shape ? (openBlock(), createElementBlock("div", {
-		key: 0,
-		class: normalizeClass($setup.cn("a-skeleton__layer", $setup.props.class)),
-		style: normalizeStyle($setup.layerStyle),
-		role: "status",
-		"aria-live": "polite",
-		"aria-busy": "true"
-	}, [(openBlock(true), createElementBlock(Fragment, null, renderList($props.shape.nodes, (node, idx) => {
-		return openBlock(), createElementBlock(Fragment, { key: idx }, [node.lineStyles ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(node.lineStyles, (lineStyle, i) => {
-			return openBlock(), createElementBlock("div", {
-				key: `${idx}-${i}`,
-				class: normalizeClass($setup.blockClassByType.text),
-				style: normalizeStyle(lineStyle)
-			}, null, 6);
-		}), 128)) : (openBlock(), createElementBlock("div", {
-			key: 1,
-			class: normalizeClass($setup.blockClassByType[node.type]),
-			style: normalizeStyle(node.style)
-		}, null, 6))], 64);
-	}), 128))], 6)) : createCommentVNode("v-if", true);
+	return Object.freeze({
+		type: node.type,
+		x: node.x,
+		y: node.y,
+		w: node.w,
+		h: node.h,
+		radius: node.radius,
+		lines: node.lines,
+		lineHeight: node.lineHeight,
+		textRects: node.textRects ? Object.freeze(node.textRects) : void 0,
+		bg: node.bg,
+		border: node.border,
+		boxShadow: node.boxShadow,
+		opacity: node.opacity,
+		textAlign: node.textAlign,
+		style,
+		lineStyles
+	});
+}
+function applyVisualSignals(out, node) {
+	if (node.bg) out.background = node.bg;
+	if (node.border) out.border = node.border;
+	if (node.boxShadow) out.boxShadow = node.boxShadow;
+	if (node.opacity !== void 0) out.opacity = node.opacity;
 }
-var ASkeletonLayer_default = /* @__PURE__ */ export_helper_default(_sfc_main$1, [["render", _sfc_render$1], ["__file", "/Users/alikhalill/Desktop/my-projects/ali-nuxt-toolkit/packages/ui-components/ASkeleton/src/components/ASkeletonLayer.vue"]]);
 //#endregion
-//#region src/components/ASkeletonBlock.vue
-const _sfc_main = /* @__PURE__ */ defineComponent({
-	__name: "ASkeletonBlock",
-	props: {
-		type: {
-			type: String,
-			required: false,
-			default: "block"
-		},
-		w: {
-			type: [Number, String],
-			required: false
-		},
-		h: {
-			type: [Number, String],
-			required: false
-		},
-		radius: {
-			type: [Number, String],
-			required: false
-		},
-		lines: {
-			type: Number,
-			required: false,
-			default: 1
-		},
-		animation: {
-			type: String,
-			required: false,
-			default: "shimmer"
-		},
-		class: {
-			type: [
-				Boolean,
-				null,
-				String,
-				Object,
-				Array
-			],
-			required: false,
-			skipCheck: true
+//#region src/utils/walkStructural.ts
+const DEFAULT_MAX_DEPTH$1 = 12;
+const DEFAULT_MAX_NODES = 500;
+const DEFAULT_MIN_SIZE = 4;
+/** Tags treated as atomic leaves — never recursed into, rendered as one block. */
+const ATOMIC_TAGS = new Set([
+	"img",
+	"picture",
+	"svg",
+	"canvas",
+	"video",
+	"audio",
+	"input",
+	"textarea",
+	"select",
+	"button",
+	"progress",
+	"meter",
+	"hr",
+	"iframe",
+	"object",
+	"embed",
+	"br"
+]);
+/**
+* Tags whose content is conventionally text. When the author writes
+* `<h3>{{ data?.name }}</h3>` and `data` is null during loading, the
+* interpolation is empty and `hasDirectText` returns false — without this
+* fallback the element classifies as `leaf-block` (a generic shimmer rect)
+* instead of `leaf-text` (a shimmer text bar at the element's natural
+* rendered dimensions).
+*/
+const TEXT_OWNERS = new Set([
+	"h1",
+	"h2",
+	"h3",
+	"h4",
+	"h5",
+	"h6",
+	"p",
+	"span",
+	"a",
+	"em",
+	"strong",
+	"small",
+	"code",
+	"b",
+	"i",
+	"mark",
+	"label",
+	"caption",
+	"time",
+	"dt",
+	"dd",
+	"li",
+	"th",
+	"td",
+	"figcaption",
+	"blockquote",
+	"cite",
+	"q"
+]);
+/**
+* Layout-affecting CSS captured on **every** node. Includes display + box
+* model + flex + grid + positioning so any element type renders correctly
+* regardless of its role in the parent's layout (flex item, inline-block,
+* absolutely-positioned overlay, sticky bar, grid cell).
+*
+* Width / height are intentionally NOT here — containers get sized by their
+* children; leaves get explicit width / height from their `getBoundingClientRect`
+* in `emitLeaf` below.
+*/
+const LAYOUT_PROPS = [
+	"display",
+	"position",
+	"top",
+	"right",
+	"bottom",
+	"left",
+	"z-index",
+	"vertical-align",
+	"float",
+	"clear",
+	"box-sizing",
+	"margin-top",
+	"margin-right",
+	"margin-bottom",
+	"margin-left",
+	"padding-top",
+	"padding-right",
+	"padding-bottom",
+	"padding-left",
+	"flex",
+	"flex-direction",
+	"flex-wrap",
+	"flex-grow",
+	"flex-shrink",
+	"flex-basis",
+	"justify-content",
+	"align-items",
+	"align-content",
+	"align-self",
+	"justify-self",
+	"gap",
+	"row-gap",
+	"column-gap",
+	"order",
+	"grid-template-columns",
+	"grid-template-rows",
+	"grid-template-areas",
+	"grid-auto-flow",
+	"grid-auto-columns",
+	"grid-auto-rows",
+	"grid-column",
+	"grid-row",
+	"grid-area"
+];
+/**
+* Visual signals captured on **every** node. These give each rendered
+* placeholder the same surface identity the real element had — fill,
+* outline, elevation, transparency, transforms.
+*/
+const VISUAL_PROPS = [
+	"border-top-width",
+	"border-right-width",
+	"border-bottom-width",
+	"border-left-width",
+	"border-top-style",
+	"border-right-style",
+	"border-bottom-style",
+	"border-left-style",
+	"border-top-color",
+	"border-right-color",
+	"border-bottom-color",
+	"border-left-color",
+	"border-top-left-radius",
+	"border-top-right-radius",
+	"border-bottom-right-radius",
+	"border-bottom-left-radius",
+	"background-color",
+	"background-image",
+	"background-position",
+	"background-size",
+	"background-repeat",
+	"background-origin",
+	"background-clip",
+	"box-shadow",
+	"opacity",
+	"filter",
+	"backdrop-filter",
+	"transform",
+	"transform-origin",
+	"mix-blend-mode"
+];
+const ALL_PROPS = [...LAYOUT_PROPS, ...VISUAL_PROPS];
+/**
+* Walk `root`'s descendants and produce a frozen tree-shaped capture.
+* Direct children of `root` become top-level `nodes`; recursive children
+* live on their respective `ContainerNode`s.
+*/
+function walkStructural(root, options = {}) {
+	const maxDepth = options.maxDepth ?? DEFAULT_MAX_DEPTH$1;
+	const maxNodes = options.maxNodes ?? DEFAULT_MAX_NODES;
+	const minSize = options.minSize ?? DEFAULT_MIN_SIZE;
+	const rootRect = root.getBoundingClientRect();
+	const state = {
+		count: 0,
+		truncated: false
+	};
+	const ctx = {
+		maxDepth,
+		maxNodes,
+		minSize,
+		state
+	};
+	const nodes = [];
+	for (let i = 0; i < root.children.length; i++) {
+		if (state.count >= maxNodes) {
+			state.truncated = true;
+			break;
 		}
-	},
-	setup(__props, { expose: __expose }) {
-		__expose();
-		const props = __props;
-		const animationClass = computed(() => props.animation === "none" ? null : `a-skel-block--anim-${props.animation}`);
-		const blockClass = computed(() => [
-			"a-skel-block",
-			`a-skel-block--${props.type}`,
-			animationClass.value
-		]);
-		function toLength(v) {
-			if (v === void 0) return void 0;
-			return typeof v === "number" ? `${v}px` : v;
+		const node = capture(root.children[i], rootRect, 1, ctx);
+		if (node) nodes.push(node);
+	}
+	return Object.freeze({
+		width: Math.round(rootRect.width),
+		height: Math.round(rootRect.height),
+		nodes: Object.freeze(nodes),
+		truncated: state.truncated,
+		capturedAt: Date.now(),
+		v: 3
+	});
+}
+function capture(el, origin, depth, ctx) {
+	if (ctx.state.count >= ctx.maxNodes) {
+		ctx.state.truncated = true;
+		return null;
+	}
+	if (el.dataset?.skeletonIgnore !== void 0) return null;
+	const cs = window.getComputedStyle(el);
+	if (cs.display === "none" || cs.visibility === "hidden") return null;
+	const opacity = parseFloat(cs.opacity);
+	if (Number.isFinite(opacity) && opacity === 0) return null;
+	const rect = el.getBoundingClientRect();
+	const tag = el.tagName.toLowerCase();
+	const isTextOwner = TEXT_OWNERS.has(tag);
+	let effectiveHeight = rect.height;
+	if (isTextOwner && effectiveHeight < ctx.minSize) {
+		const lh = parseFloat(cs.lineHeight);
+		const fs = parseFloat(cs.fontSize);
+		if (Number.isFinite(lh) && lh > 0) effectiveHeight = lh;
+		else if (Number.isFinite(fs) && fs > 0) effectiveHeight = fs * 1.4;
+	}
+	if (rect.width < ctx.minSize || effectiveHeight < ctx.minSize) return null;
+	const hasStop = el.dataset?.skeletonStop !== void 0;
+	const isAtomic = ATOMIC_TAGS.has(tag);
+	const reachedDepth = depth >= ctx.maxDepth;
+	const childrenEls = collectVisibleChildren(el);
+	if (hasStop || isAtomic || reachedDepth || childrenEls.length === 0) return emitLeaf(el, tag, cs, rect, effectiveHeight, isAtomic, ctx);
+	const children = [];
+	for (const child of childrenEls) {
+		if (ctx.state.count >= ctx.maxNodes) {
+			ctx.state.truncated = true;
+			break;
 		}
-		const radiusValue = computed(() => props.type === "circle" && props.radius === void 0 ? "50%" : toLength(props.radius));
-		const __returned__ = {
-			props,
-			animationClass,
-			blockClass,
-			toLength,
-			radiusValue,
-			blockStyle: computed(() => ({
-				width: toLength(props.w),
-				height: toLength(props.h),
-				borderRadius: radiusValue.value
-			})),
-			isMultiLineText: computed(() => props.type === "text" && props.lines > 1),
-			get cn() {
-				return cn;
-			}
-		};
-		Object.defineProperty(__returned__, "__isScriptSetup", {
-			enumerable: false,
-			value: true
-		});
-		return __returned__;
+		const node = capture(child, origin, depth + 1, ctx);
+		if (node) children.push(node);
 	}
-});
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-	return $setup.isMultiLineText ? (openBlock(), createElementBlock("div", {
-		key: 0,
-		class: normalizeClass($setup.cn("a-skel-block-stack", $setup.props.class)),
-		role: "status",
-		"aria-busy": "true"
-	}, [(openBlock(true), createElementBlock(Fragment, null, renderList($setup.props.lines, (i) => {
-		return openBlock(), createElementBlock("div", {
-			key: i,
-			class: normalizeClass($setup.blockClass),
-			style: normalizeStyle({
-				height: $setup.blockStyle.height ?? "0.75em",
-				width: i === $setup.props.lines ? "70%" : "100%",
-				borderRadius: $setup.blockStyle.borderRadius ?? "4px"
-			})
-		}, null, 6);
-	}), 128))], 2)) : (openBlock(), createElementBlock("div", {
-		key: 1,
-		class: normalizeClass($setup.cn($setup.blockClass, $setup.props.class)),
-		style: normalizeStyle($setup.blockStyle),
-		role: "status",
-		"aria-busy": "true"
-	}, null, 6));
+	if (children.length === 0) return emitLeaf(el, tag, cs, rect, effectiveHeight, false, ctx);
+	ctx.state.count++;
+	const node = {
+		kind: "container",
+		tag,
+		className: el.getAttribute("class") ?? "",
+		style: readComputedStyles(cs, ALL_PROPS),
+		children: Object.freeze(children)
+	};
+	return Object.freeze(node);
+}
+function emitLeaf(el, tag, cs, rect, effectiveHeight, isAtomic, ctx) {
+	const w = Math.round(rect.width);
+	const h = Math.round(effectiveHeight);
+	const leafKind = classifyLeaf(tag, el, isAtomic);
+	const captured = { ...readComputedStyles(cs, ALL_PROPS) };
+	if (captured.display === "inline") captured.display = "inline-block";
+	const style = {
+		...captured,
+		width: `${w}px`,
+		height: `${h}px`
+	};
+	let textLines;
+	if (leafKind === "text") {
+		const rawLines = captureTextLines(el, rect);
+		if (rawLines && rawLines.length > 0) textLines = Object.freeze(rawLines.map((r) => ({
+			x: Math.max(0, r.x),
+			y: Math.max(0, r.y),
+			w: r.w,
+			h: r.h
+		})));
+	}
+	ctx.state.count++;
+	const node = {
+		kind: "leaf",
+		leafKind,
+		className: el.getAttribute("class") ?? "",
+		style: Object.freeze(style),
+		textLines
+	};
+	return Object.freeze(node);
+}
+function classifyLeaf(tag, el, isAtomic) {
+	if (tag === "img" || tag === "picture") return "image";
+	if (tag === "video") return "image";
+	if (isAtomic) return "media";
+	if (hasDirectText(el)) return "text";
+	if (TEXT_OWNERS.has(tag)) return "text";
+	return "block";
 }
-var ASkeletonBlock_default = /* @__PURE__ */ export_helper_default(_sfc_main, [
-	["render", _sfc_render],
-	["__scopeId", "data-v-bdfba69a"],
-	["__file", "/Users/alikhalill/Desktop/my-projects/ali-nuxt-toolkit/packages/ui-components/ASkeleton/src/components/ASkeletonBlock.vue"]
-]);
 //#endregion
 //#region src/composables/useSkeleton.ts
+const DEFAULT_MAX_DEPTH = 12;
 /**
-* High-level building block for custom skeleton UIs. Wires up the probe + cache
-* + reactivity so the consumer just renders something using the reactive shape:
+* High-level building block for Recipe 3 — wires the structural capture +
+* cache + reactivity around a target element. The reactive `shape` is fed to
+* `<ASkeletonLayer>` which renders it in normal flow inside the consumer's
+* container.
 *
 * ```ts
 * const containerRef = ref<HTMLElement | null>(null);
@@ -4452,13 +7262,14 @@ var ASkeletonBlock_default = /* @__PURE__ */ export_helper_default(_sfc_main, [
 * </div>
 * ```
 *
-* For more control, drop down to `useShapeProbe` + `getCached`/`setCached` and
-* compose your own.
+* For more control, drop down to `useShapeProbe` (pass `walkStructural` as the
+* capture strategy) + `getCachedStructural` / `setCachedStructural` and compose
+* your own orchestration.
 */
 function useSkeleton(options) {
 	const persist = options.persist ?? false;
-	const maxDepth = options.maxDepth ?? 6;
-	const shape = shallowRef(getCached(options.cacheKey, persist));
+	const maxDepth = options.maxDepth ?? DEFAULT_MAX_DEPTH;
+	const shape = shallowRef(getCachedStructural(options.cacheKey, persist));
 	if (options.target) {
 		const getTarget = options.target;
 		useShapeProbe(getTarget, {
@@ -4466,8 +7277,9 @@ function useSkeleton(options) {
 			maxNodes: options.maxNodes,
 			minSize: options.minSize,
 			resizeDebounceMs: options.resizeDebounceMs,
+			capture: walkStructural,
 			onCapture: (captured) => {
-				setCached(options.cacheKey, captured, persist);
+				setCachedStructural(options.cacheKey, captured, persist);
 				shape.value = captured;
 			}
 		});
@@ -4475,18 +7287,18 @@ function useSkeleton(options) {
 	function captureNow() {
 		const el = options.target?.();
 		if (!el || typeof window === "undefined") return void 0;
-		const captured = walkDom(el, {
+		const captured = walkStructural(el, {
 			maxDepth,
 			maxNodes: options.maxNodes,
 			minSize: options.minSize
 		});
 		if (captured.width <= 0 || captured.height <= 0 || captured.nodes.length === 0) return void 0;
-		setCached(options.cacheKey, captured, persist);
+		setCachedStructural(options.cacheKey, captured, persist);
 		shape.value = captured;
 		return captured;
 	}
 	function clear() {
-		clearCached(options.cacheKey);
+		clearCachedStructural(options.cacheKey);
 		shape.value = void 0;
 	}
 	return {
@@ -4496,6 +7308,41 @@ function useSkeleton(options) {
 	};
 }
 //#endregion
-export { ASkeleton_default as ASkeleton, ASkeletonBlock_default as ASkeletonBlock, ASkeletonLayer_default as ASkeletonLayer, StructuralSkeleton, buildStructuralSkeleton, clearCached, fingerprintSlot, getCached, setCached, useShapeProbe, useSkeleton, walkDom };
+//#region src/utils/fingerprint.ts
+/**
+* Derive a default cache key from a slot's vnode tree. Returns the first
+* non-comment child's component name (or HTML tag). When the slot only contains
+* text / comments / unknown content, returns `'anonymous'` so the caller can
+* still cache, but with no useful identity — encourage an explicit `cacheKey`.
+*/
+function fingerprintSlot(vnodes) {
+	if (!vnodes) return "anonymous";
+	for (const vnode of vnodes) {
+		const tag = describeVNode(vnode);
+		if (tag) return tag;
+	}
+	return "anonymous";
+}
+function describeVNode(vnode) {
+	const t = vnode.type;
+	if (t === Comment || t === Text) return void 0;
+	if (t === Fragment) {
+		const children = vnode.children;
+		if (Array.isArray(children)) {
+			for (const child of children) if (child && typeof child === "object" && "type" in child) {
+				const found = describeVNode(child);
+				if (found) return found;
+			}
+		}
+		return;
+	}
+	if (typeof t === "string") return t;
+	if (typeof t === "object" && t !== null) {
+		const named = t.name ?? t.__name ?? t.displayName;
+		if (named) return named;
+	}
+}
+//#endregion
+export { ASkeleton_default as ASkeleton, ASkeletonArticle_default as ASkeletonArticle, ASkeletonAvatar_default as ASkeletonAvatar, ASkeletonBlock_default as ASkeletonBlock, ASkeletonButton_default as ASkeletonButton, ASkeletonCard_default as ASkeletonCard, ASkeletonChart_default as ASkeletonChart, ASkeletonChip_default as ASkeletonChip, ASkeletonClone_default as ASkeletonClone, ASkeletonDivider_default as ASkeletonDivider, ASkeletonForm_default as ASkeletonForm, ASkeletonHeading_default as ASkeletonHeading, ASkeletonImage_default as ASkeletonImage, ASkeletonInput_default as ASkeletonInput, ASkeletonLayer_default as ASkeletonLayer, ASkeletonListItem_default as ASkeletonListItem, ASkeletonTable_default as ASkeletonTable, ASkeletonText_default as ASkeletonText, ASkeletonVideo_default as ASkeletonVideo, StructuralSkeleton, buildStructuralSkeleton, captureSnapshot, clearCached, clearCachedStructural, fingerprintSlot, getCached, getCachedStructural, setCached, setCachedStructural, useShapeProbe, useSkeleton, walkDom, walkStructural };
 
 //# sourceMappingURL=index.js.map