@alikhalilll/a-skeleton 1.0.0

package/dist/nuxt/index.d.cts

@@ -0,0 +1,25 @@
+import { NuxtModule } from "@nuxt/schema";
+
+//#region src/nuxt/index.d.ts
+/**
+ * `@alikhalilll/a-skeleton/nuxt` — registers the skeleton components for Nuxt
+ * auto-import. The auto-imported names are the package's native names:
+ *
+ *   <ASkeleton :loading>…</ASkeleton>     <!-- slot wrapper, two-layer flow -->
+ *   <ASkeletonLayer :shape="…" />          <!-- replay a CachedShape directly -->
+ *   <ASkeletonBlock type="circle" w="64" h="64" />  <!-- hand-crafted skeleton primitive -->
+ *
+ *   modules: ['@alikhalilll/a-skeleton/nuxt'],
+ *   aSkeleton: { prefix: 'A' },   // optional
+ *
+ * Styles are not auto-injected; add `'@alikhalilll/a-skeleton/styles.css'` to
+ * your Nuxt `css` array.
+ */
+interface ModuleOptions {
+  /** Optional prefix prepended to the registered component name. */
+  prefix?: string;
+}
+declare const module: NuxtModule<ModuleOptions>;
+//#endregion
+export { ModuleOptions, module as default };
+//# sourceMappingURL=index.d.cts.map

package/dist/nuxt/index.d.ts

@@ -0,0 +1,25 @@
+import { NuxtModule } from "@nuxt/schema";
+
+//#region src/nuxt/index.d.ts
+/**
+ * `@alikhalilll/a-skeleton/nuxt` — registers the skeleton components for Nuxt
+ * auto-import. The auto-imported names are the package's native names:
+ *
+ *   <ASkeleton :loading>…</ASkeleton>     <!-- slot wrapper, two-layer flow -->
+ *   <ASkeletonLayer :shape="…" />          <!-- replay a CachedShape directly -->
+ *   <ASkeletonBlock type="circle" w="64" h="64" />  <!-- hand-crafted skeleton primitive -->
+ *
+ *   modules: ['@alikhalilll/a-skeleton/nuxt'],
+ *   aSkeleton: { prefix: 'A' },   // optional
+ *
+ * Styles are not auto-injected; add `'@alikhalilll/a-skeleton/styles.css'` to
+ * your Nuxt `css` array.
+ */
+interface ModuleOptions {
+  /** Optional prefix prepended to the registered component name. */
+  prefix?: string;
+}
+declare const module: NuxtModule<ModuleOptions>;
+//#endregion
+export { ModuleOptions, module as default };
+//# sourceMappingURL=index.d.ts.map

package/dist/nuxt/index.js

@@ -0,0 +1,30 @@
+import { addComponent, defineNuxtModule } from "@nuxt/kit";
+//#region src/nuxt/index.ts
+const COMPONENTS = {
+	ASkeleton: "@alikhalilll/a-skeleton",
+	ASkeletonLayer: "@alikhalilll/a-skeleton",
+	ASkeletonBlock: "@alikhalilll/a-skeleton"
+};
+const module = defineNuxtModule({
+	meta: {
+		name: "@alikhalilll/a-skeleton",
+		configKey: "aSkeleton",
+		compatibility: { nuxt: ">=3.0.0" }
+	},
+	defaults: { prefix: "" },
+	setup(opts) {
+		const prefix = opts.prefix ?? "";
+		for (const [exportName, from] of Object.entries(COMPONENTS)) {
+			const baseName = exportName.startsWith("A") ? exportName.slice(1) : exportName;
+			addComponent({
+				name: `${prefix}${prefix ? baseName : exportName}`,
+				export: exportName,
+				filePath: from
+			});
+		}
+	}
+});
+//#endregion
+export { module as default };
+
+//# sourceMappingURL=index.js.map

package/dist/nuxt/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/nuxt/index.ts"],"sourcesContent":["import { defineNuxtModule, addComponent } from '@nuxt/kit';\nimport type { NuxtModule } from '@nuxt/schema';\n\n/**\n * `@alikhalilll/a-skeleton/nuxt` — registers the skeleton components for Nuxt\n * auto-import. The auto-imported names are the package's native names:\n *\n *   <ASkeleton :loading>…</ASkeleton>     <!-- slot wrapper, two-layer flow -->\n *   <ASkeletonLayer :shape=\"…\" />          <!-- replay a CachedShape directly -->\n *   <ASkeletonBlock type=\"circle\" w=\"64\" h=\"64\" />  <!-- hand-crafted skeleton primitive -->\n *\n *   modules: ['@alikhalilll/a-skeleton/nuxt'],\n *   aSkeleton: { prefix: 'A' },   // optional\n *\n * Styles are not auto-injected; add `'@alikhalilll/a-skeleton/styles.css'` to\n * your Nuxt `css` array.\n */\n\nexport interface ModuleOptions {\n  /** Optional prefix prepended to the registered component name. */\n  prefix?: string;\n}\n\nconst COMPONENTS: Record<string, string> = {\n  ASkeleton: '@alikhalilll/a-skeleton',\n  ASkeletonLayer: '@alikhalilll/a-skeleton',\n  ASkeletonBlock: '@alikhalilll/a-skeleton',\n};\n\nconst module: NuxtModule<ModuleOptions> = defineNuxtModule<ModuleOptions>({\n  meta: {\n    name: '@alikhalilll/a-skeleton',\n    configKey: 'aSkeleton',\n    compatibility: { nuxt: '>=3.0.0' },\n  },\n  defaults: { prefix: '' },\n  setup(opts) {\n    const prefix = opts.prefix ?? '';\n    for (const [exportName, from] of Object.entries(COMPONENTS)) {\n      const baseName = exportName.startsWith('A') ? exportName.slice(1) : exportName;\n      const registeredName = `${prefix}${prefix ? baseName : exportName}`;\n      addComponent({ name: registeredName, export: exportName, filePath: from });\n    }\n  },\n});\n\nexport default module;\n"],"mappings":";;AAuBA,MAAM,aAAqC;CACzC,WAAW;CACX,gBAAgB;CAChB,gBAAgB;AAClB;AAEA,MAAM,SAAoC,iBAAgC;CACxE,MAAM;EACJ,MAAM;EACN,WAAW;EACX,eAAe,EAAE,MAAM,UAAU;CACnC;CACA,UAAU,EAAE,QAAQ,GAAG;CACvB,MAAM,MAAM;EACV,MAAM,SAAS,KAAK,UAAU;EAC9B,KAAK,MAAM,CAAC,YAAY,SAAS,OAAO,QAAQ,UAAU,GAAG;GAC3D,MAAM,WAAW,WAAW,WAAW,GAAG,IAAI,WAAW,MAAM,CAAC,IAAI;GAEpE,aAAa;IAAE,MAAM,GADK,SAAS,SAAS,WAAW;IAClB,QAAQ;IAAY,UAAU;GAAK,CAAC;EAC3E;CACF;AACF,CAAC"}

package/dist/resolver/index.cjs

@@ -0,0 +1,25 @@
+//#region src/resolver/index.ts
+const COMPONENT_TO_ENTRY = {
+	ASkeleton: "@alikhalilll/a-skeleton",
+	ASkeletonLayer: "@alikhalilll/a-skeleton",
+	ASkeletonBlock: "@alikhalilll/a-skeleton"
+};
+function ASkeletonResolver(opts = {}) {
+	const prefix = opts.prefix ?? "";
+	return {
+		type: "component",
+		resolve(name) {
+			const bare = prefix && name.startsWith(prefix) ? name.slice(prefix.length) : name;
+			const from = COMPONENT_TO_ENTRY[bare];
+			if (!from) return;
+			return {
+				name: bare,
+				from
+			};
+		}
+	};
+}
+//#endregion
+module.exports = ASkeletonResolver;
+
+//# sourceMappingURL=index.cjs.map

package/dist/resolver/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":[],"sources":["../../src/resolver/index.ts"],"sourcesContent":["import type { ComponentResolver } from 'unplugin-vue-components';\n\n/**\n * `@alikhalilll/a-skeleton/resolver` — auto-import resolver for non-Nuxt\n * Vite/Webpack consumers via `unplugin-vue-components`.\n *\n *   import Components from 'unplugin-vue-components/vite';\n *   import ASkeletonResolver from '@alikhalilll/a-skeleton/resolver';\n *   export default { plugins: [Components({ resolvers: [ASkeletonResolver()] })] };\n *\n * Registers `<ASkeleton>`, `<ASkeletonLayer>`, `<ASkeletonBlock>`.\n */\n\nexport interface ResolverOptions {\n  /** Optional prefix the consumer uses (e.g. `'A'`). Defaults to the native `A*` names. */\n  prefix?: string;\n}\n\nconst COMPONENT_TO_ENTRY: Record<string, string> = {\n  ASkeleton: '@alikhalilll/a-skeleton',\n  ASkeletonLayer: '@alikhalilll/a-skeleton',\n  ASkeletonBlock: '@alikhalilll/a-skeleton',\n};\n\nexport default function ASkeletonResolver(opts: ResolverOptions = {}): ComponentResolver {\n  const prefix = opts.prefix ?? '';\n  return {\n    type: 'component',\n    resolve(name) {\n      const bare = prefix && name.startsWith(prefix) ? name.slice(prefix.length) : name;\n      const from = COMPONENT_TO_ENTRY[bare];\n      if (!from) return;\n      return { name: bare, from };\n    },\n  };\n}\n"],"mappings":";AAkBA,MAAM,qBAA6C;CACjD,WAAW;CACX,gBAAgB;CAChB,gBAAgB;AAClB;AAEA,SAAwB,kBAAkB,OAAwB,CAAC,GAAsB;CACvF,MAAM,SAAS,KAAK,UAAU;CAC9B,OAAO;EACL,MAAM;EACN,QAAQ,MAAM;GACZ,MAAM,OAAO,UAAU,KAAK,WAAW,MAAM,IAAI,KAAK,MAAM,OAAO,MAAM,IAAI;GAC7E,MAAM,OAAO,mBAAmB;GAChC,IAAI,CAAC,MAAM;GACX,OAAO;IAAE,MAAM;IAAM;GAAK;EAC5B;CACF;AACF"}

package/dist/resolver/index.d.cts

@@ -0,0 +1,21 @@
+import { ComponentResolver } from "unplugin-vue-components";
+
+//#region src/resolver/index.d.ts
+/**
+ * `@alikhalilll/a-skeleton/resolver` — auto-import resolver for non-Nuxt
+ * Vite/Webpack consumers via `unplugin-vue-components`.
+ *
+ *   import Components from 'unplugin-vue-components/vite';
+ *   import ASkeletonResolver from '@alikhalilll/a-skeleton/resolver';
+ *   export default { plugins: [Components({ resolvers: [ASkeletonResolver()] })] };
+ *
+ * Registers `<ASkeleton>`, `<ASkeletonLayer>`, `<ASkeletonBlock>`.
+ */
+interface ResolverOptions {
+  /** Optional prefix the consumer uses (e.g. `'A'`). Defaults to the native `A*` names. */
+  prefix?: string;
+}
+declare function ASkeletonResolver(opts?: ResolverOptions): ComponentResolver;
+//#endregion
+export { ResolverOptions, ASkeletonResolver as default };
+//# sourceMappingURL=index.d.cts.map

package/dist/resolver/index.d.ts

@@ -0,0 +1,21 @@
+import { ComponentResolver } from "unplugin-vue-components";
+
+//#region src/resolver/index.d.ts
+/**
+ * `@alikhalilll/a-skeleton/resolver` — auto-import resolver for non-Nuxt
+ * Vite/Webpack consumers via `unplugin-vue-components`.
+ *
+ *   import Components from 'unplugin-vue-components/vite';
+ *   import ASkeletonResolver from '@alikhalilll/a-skeleton/resolver';
+ *   export default { plugins: [Components({ resolvers: [ASkeletonResolver()] })] };
+ *
+ * Registers `<ASkeleton>`, `<ASkeletonLayer>`, `<ASkeletonBlock>`.
+ */
+interface ResolverOptions {
+  /** Optional prefix the consumer uses (e.g. `'A'`). Defaults to the native `A*` names. */
+  prefix?: string;
+}
+declare function ASkeletonResolver(opts?: ResolverOptions): ComponentResolver;
+//#endregion
+export { ResolverOptions, ASkeletonResolver as default };
+//# sourceMappingURL=index.d.ts.map

package/dist/resolver/index.js

@@ -0,0 +1,25 @@
+//#region src/resolver/index.ts
+const COMPONENT_TO_ENTRY = {
+	ASkeleton: "@alikhalilll/a-skeleton",
+	ASkeletonLayer: "@alikhalilll/a-skeleton",
+	ASkeletonBlock: "@alikhalilll/a-skeleton"
+};
+function ASkeletonResolver(opts = {}) {
+	const prefix = opts.prefix ?? "";
+	return {
+		type: "component",
+		resolve(name) {
+			const bare = prefix && name.startsWith(prefix) ? name.slice(prefix.length) : name;
+			const from = COMPONENT_TO_ENTRY[bare];
+			if (!from) return;
+			return {
+				name: bare,
+				from
+			};
+		}
+	};
+}
+//#endregion
+export { ASkeletonResolver as default };
+
+//# sourceMappingURL=index.js.map

package/dist/resolver/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/resolver/index.ts"],"sourcesContent":["import type { ComponentResolver } from 'unplugin-vue-components';\n\n/**\n * `@alikhalilll/a-skeleton/resolver` — auto-import resolver for non-Nuxt\n * Vite/Webpack consumers via `unplugin-vue-components`.\n *\n *   import Components from 'unplugin-vue-components/vite';\n *   import ASkeletonResolver from '@alikhalilll/a-skeleton/resolver';\n *   export default { plugins: [Components({ resolvers: [ASkeletonResolver()] })] };\n *\n * Registers `<ASkeleton>`, `<ASkeletonLayer>`, `<ASkeletonBlock>`.\n */\n\nexport interface ResolverOptions {\n  /** Optional prefix the consumer uses (e.g. `'A'`). Defaults to the native `A*` names. */\n  prefix?: string;\n}\n\nconst COMPONENT_TO_ENTRY: Record<string, string> = {\n  ASkeleton: '@alikhalilll/a-skeleton',\n  ASkeletonLayer: '@alikhalilll/a-skeleton',\n  ASkeletonBlock: '@alikhalilll/a-skeleton',\n};\n\nexport default function ASkeletonResolver(opts: ResolverOptions = {}): ComponentResolver {\n  const prefix = opts.prefix ?? '';\n  return {\n    type: 'component',\n    resolve(name) {\n      const bare = prefix && name.startsWith(prefix) ? name.slice(prefix.length) : name;\n      const from = COMPONENT_TO_ENTRY[bare];\n      if (!from) return;\n      return { name: bare, from };\n    },\n  };\n}\n"],"mappings":";AAkBA,MAAM,qBAA6C;CACjD,WAAW;CACX,gBAAgB;CAChB,gBAAgB;AAClB;AAEA,SAAwB,kBAAkB,OAAwB,CAAC,GAAsB;CACvF,MAAM,SAAS,KAAK,UAAU;CAC9B,OAAO;EACL,MAAM;EACN,QAAQ,MAAM;GACZ,MAAM,OAAO,UAAU,KAAK,WAAW,MAAM,IAAI,KAAK,MAAM,OAAO,MAAM,IAAI;GAC7E,MAAM,OAAO,mBAAmB;GAChC,IAAI,CAAC,MAAM;GACX,OAAO;IAAE,MAAM;IAAM;GAAK;EAC5B;CACF;AACF"}

package/dist/styles.css

@@ -0,0 +1,35 @@
+/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}:root,.light{--ak-ui-background:0 0% 100%;--ak-ui-foreground:240 10% 3.9%;--ak-ui-card:0 0% 100%;--ak-ui-card-foreground:240 10% 3.9%;--ak-ui-popover:0 0% 100%;--ak-ui-popover-foreground:240 10% 3.9%;--ak-ui-primary:240 5.9% 10%;--ak-ui-primary-foreground:0 0% 98%;--ak-ui-secondary:240 4.8% 95.9%;--ak-ui-secondary-foreground:240 5.9% 10%;--ak-ui-muted:240 4.8% 95.9%;--ak-ui-muted-foreground:240 3.8% 46.1%;--ak-ui-accent:240 4.8% 95.9%;--ak-ui-accent-foreground:240 5.9% 10%;--ak-ui-destructive:0 84.2% 60.2%;--ak-ui-destructive-foreground:0 0% 98%;--ak-ui-border:240 5.9% 90%;--ak-ui-input:240 5.9% 90%;--ak-ui-ring:240 5.9% 10%;--ak-ui-radius:.5rem}.dark{--ak-ui-background:240 10% 3.9%;--ak-ui-foreground:0 0% 98%;--ak-ui-card:240 10% 3.9%;--ak-ui-card-foreground:0 0% 98%;--ak-ui-popover:240 10% 3.9%;--ak-ui-popover-foreground:0 0% 98%;--ak-ui-primary:0 0% 98%;--ak-ui-primary-foreground:240 5.9% 10%;--ak-ui-secondary:240 3.7% 15.9%;--ak-ui-secondary-foreground:0 0% 98%;--ak-ui-muted:240 3.7% 15.9%;--ak-ui-muted-foreground:240 5% 64.9%;--ak-ui-accent:240 3.7% 15.9%;--ak-ui-accent-foreground:0 0% 98%;--ak-ui-destructive:0 62.8% 30.6%;--ak-ui-destructive-foreground:0 0% 98%;--ak-ui-border:240 3.7% 15.9%;--ak-ui-input:240 3.7% 15.9%;--ak-ui-ring:240 4.9% 83.9%}:root,:host{--spacing:.25rem}.relative{position:relative}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.\!mt-3{margin-top:calc(var(--spacing) * 3)!important}.block{display:block}.flex{display:flex}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.table{display:table}.size-16{width:calc(var(--spacing) * 16);height:calc(var(--spacing) * 16)}.flex-1{flex:1}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.resize{resize:both}.items-start{align-items:flex-start}.gap-4{gap:calc(var(--spacing) * 4)}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))}.rounded-full{border-radius:3.40282e38px}.border{border-style:var(--tw-border-style);border-width:1px}.p-4{padding:calc(var(--spacing) * 4)}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}:root{--ak-skeleton-block:hsl(var(--ak-ui-muted) / .55);--ak-skeleton-block-soft:hsl(var(--ak-ui-muted) / .32);--ak-skeleton-shimmer:hsl(var(--ak-ui-foreground) / .08);--ak-skeleton-radius:.375rem;--ak-skeleton-duration:1.6s;--ak-skeleton-pulse-opacity:.48;--ak-skeleton-shimmer-angle:110deg;--ak-skeleton-ring:hsl(var(--ak-ui-foreground) / .04)}.light{--ak-skeleton-shimmer:#ffffffd9;--ak-skeleton-ring:#0000000d}.a-skel-block{background-image:linear-gradient(180deg, var(--ak-skeleton-block) 0%, var(--ak-skeleton-block-soft) 100%);background-color:var(--ak-skeleton-block);border-radius:var(--ak-skeleton-radius);box-shadow:inset 0 0 0 1px var(--ak-skeleton-ring);isolation:isolate;position:relative;overflow:hidden}.a-skel-block--anim-shimmer:after{content:"";background-image:linear-gradient(var(--ak-skeleton-shimmer-angle), transparent 30%, var(--ak-skeleton-shimmer) 50%, transparent 70%);will-change:transform;animation:a-skel-shimmer var(--ak-skeleton-duration) cubic-bezier(.42, 0, .58, 1) infinite;z-index:1;position:absolute;inset:0 -25%;transform:translate(-110%)}.a-skel-block--anim-pulse{animation:a-skel-pulse var(--ak-skeleton-duration) cubic-bezier(.42, 0, .58, 1) infinite;will-change:opacity}@keyframes a-skel-shimmer{0%{transform:translate(-110%)}to{transform:translate(110%)}}@keyframes a-skel-pulse{0%,to{opacity:1}50%{opacity:var(--ak-skeleton-pulse-opacity)}}@media (prefers-reduced-motion:reduce){.a-skel-block--anim-shimmer:after,.a-skel-block--anim-pulse{will-change:auto;animation:none}.a-skel-block--anim-shimmer:after{opacity:.5;transform:translate(0)}}.a-skeleton__layer{contain:layout style paint;content-visibility:auto;position:relative}.a-skeleton__layer>.a-skel-block{contain:strict;position:absolute}.a-skel-block--text{border-radius:calc(var(--ak-skeleton-radius) * .6)}.a-skel-block--circle{background-image:radial-gradient(circle at 35% 30%, var(--ak-skeleton-block) 0%, var(--ak-skeleton-block-soft) 100%)}.a-skel-block--image{background-image:linear-gradient(160deg, var(--ak-skeleton-block) 0%, var(--ak-skeleton-block-soft) 60%, var(--ak-skeleton-block) 100%)}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}
+/* --- bundled SFC styles --- */
+
+.a-skeleton[data-v-16717541] {
+  display: block;
+  position: relative;
+}
+
+/* `.a-skeleton__layer` + `.a-skeleton__layer > .a-skel-block` layout/containment
+ * live in `styles.src.css` so they're shared with the public `<ASkeletonLayer>`
+ * component. */
+.a-skeleton__structural[data-v-16717541] * {
+  /* Disable text caret/selection on the structural copy so it doesn't look
+   * interactive. Layout (flex/grid/spacing/sizing) flows through unchanged. */
+  user-select: none;
+  pointer-events: none;
+}
+.a-skeleton__structural[data-v-16717541] button,
+.a-skeleton__structural[data-v-16717541] input,
+.a-skeleton__structural[data-v-16717541] a {
+  cursor: default;
+}
+.a-skeleton__fallback[data-v-16717541] .a-skel-fallback-default {
+  width: 100%;
+  height: 4rem;
+  border-radius: 0.5rem;
+}
+
+.a-skel-block-stack[data-v-bdfba69a] {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  width: 100%;
+}

package/package.json

@@ -0,0 +1,120 @@
+{
+  "name": "@alikhalilll/a-skeleton",
+  "version": "1.0.0",
+  "description": "Self-generating Vue 3 / Nuxt 3+ skeleton loader. First paint mirrors the slot's HTML structure; second load replays a pixel-aligned shape captured from the real DOM. Themeable via CSS vars. Part of the @alikhalilll/a-* toolkit.",
+  "license": "MIT",
+  "author": "alikhalilll",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/alikhalilll/ali-nuxt-toolkit.git",
+    "directory": "packages/ui-components/ASkeleton"
+  },
+  "homepage": "https://alikhalilll.github.io/ali-nuxt-toolkit/ui",
+  "bugs": {
+    "url": "https://github.com/alikhalilll/ali-nuxt-toolkit/issues"
+  },
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "nuxt",
+    "skeleton",
+    "loader",
+    "shimmer",
+    "placeholder",
+    "auto",
+    "headless"
+  ],
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./nuxt": {
+      "import": {
+        "types": "./dist/nuxt/index.d.ts",
+        "default": "./dist/nuxt/index.js"
+      },
+      "require": {
+        "types": "./dist/nuxt/index.d.cts",
+        "default": "./dist/nuxt/index.cjs"
+      }
+    },
+    "./resolver": {
+      "import": {
+        "types": "./dist/resolver/index.d.ts",
+        "default": "./dist/resolver/index.js"
+      },
+      "require": {
+        "types": "./dist/resolver/index.d.cts",
+        "default": "./dist/resolver/index.cjs"
+      }
+    },
+    "./styles.css": "./dist/styles.css",
+    "./package.json": "./package.json"
+  },
+  "types": "./dist/index.d.ts",
+  "web-types": "./web-types.json",
+  "files": [
+    "dist",
+    "src",
+    "web-types.json",
+    "README.md",
+    "LICENSE"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "peerDependencies": {
+    "@nuxt/kit": "^3.0.0 || ^4.0.0",
+    "@vueuse/core": "^14.0.0",
+    "unplugin-vue-components": "^28.0.0 || ^29.0.0 || ^30.0.0 || ^31.0.0 || ^32.0.0",
+    "vue": "^3.5.0"
+  },
+  "peerDependenciesMeta": {
+    "@nuxt/kit": {
+      "optional": true
+    },
+    "unplugin-vue-components": {
+      "optional": true
+    }
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@nuxt/kit": "^4.4.2",
+    "@nuxt/schema": "^4.4.2",
+    "@tailwindcss/cli": "^4.0.0",
+    "@tsdown/css": "0.22.0",
+    "@types/node": "^22.13.0",
+    "@vueuse/core": "^14.0.0",
+    "rimraf": "^6.0.1",
+    "tailwindcss": "^4.0.0",
+    "tsdown": "0.22.0",
+    "typescript": "^5.9.2",
+    "unplugin-vue": "7.2.0",
+    "unplugin-vue-components": "^32.1.0",
+    "vue": "^3.5.0",
+    "vue-tsc": "^3.2.4",
+    "@alikhalilll/a-ui-base": "1.0.0"
+  },
+  "scripts": {
+    "clean": "rimraf dist web-types.json",
+    "build": "tsx ../../../scripts/build/run-component-build.ts",
+    "typecheck": "vue-tsc --noEmit -p tsconfig.json",
+    "validate-dist": "tsx ../../../scripts/validate/dist-validate.ts --pkg a-skeleton",
+    "validate-consumer": "tsx ../../../scripts/validate/consumer-validate.ts --pkg a-skeleton",
+    "validate": "pnpm build && pnpm validate-dist && pnpm validate-consumer"
+  }
+}

package/src/components/ASkeleton.vue

@@ -0,0 +1,167 @@
+<script setup lang="ts">
+import { computed, ref, shallowRef, useSlots, watch, type CSSProperties } from 'vue';
+import { cn } from '@alikhalilll/a-ui-base';
+import type { ASkeletonProps, ASkeletonSlots, CachedShape, ShapeNodeType } from '../types';
+import { useShapeProbe } from '../composables/useShapeProbe';
+import { getCached, setCached } from '../composables/useSkeletonCache';
+import { fingerprintSlot } from '../utils/fingerprint';
+import { StructuralSkeleton } from './StructuralSkeleton';
+
+const props = withDefaults(defineProps<ASkeletonProps>(), {
+  maxDepth: 6,
+  maxNodes: 500,
+  minNodeSize: 4,
+  persist: false,
+  animation: 'shimmer',
+  fallback: 'shimmer',
+});
+defineSlots<ASkeletonSlots>();
+
+const slots = useSlots();
+
+const resolvedKey = computed(() => props.cacheKey ?? fingerprintSlot(slots.default?.()));
+
+const cached = shallowRef<CachedShape | undefined>(getCached(resolvedKey.value, props.persist));
+
+watch(resolvedKey, (key) => {
+  cached.value = getCached(key, props.persist);
+});
+
+const wrapperRef = ref<HTMLElement | null>(null);
+
+/* Probe runs whenever the real content is mounted (loading=false). The getter
+ * returns null during loading so the watch tears down its ResizeObserver. */
+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 animationClass = computed(() =>
+  props.animation === 'none' ? null : `a-skel-block--anim-${props.animation}`
+);
+
+const layerStyle = computed<CSSProperties>(() =>
+  cached.value ? { width: `${cached.value.width}px`, height: `${cached.value.height}px` } : {}
+);
+
+/* Pre-join the per-type class strings once per animation value so the render
+ * loop doesn't allocate a new `[a, b, c]` array per node per frame — meaningful
+ * when a cache holds hundreds of nodes. */
+const blockClassByType = computed<Readonly<Record<ShapeNodeType, string>>>(() => {
+  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}`,
+  });
+});
+
+/* Cache-miss fallback path: walk the slot's vnodes synchronously so the FIRST
+ * paint already shows a skeleton that mirrors the component's HTML structure
+ * (same tags, classes, hierarchy → same flex/grid/spacing/sizing utilities
+ * still apply). If the slot is empty / only renders comments (e.g. the user
+ * gates the whole template on `v-if="data"`), we get an empty array back and
+ * fall through to the generic shimmer block. */
+const structuralVNodes = computed(() => (props.loading ? (slots.default?.() ?? []) : []));
+const hasStructure = computed(() => structuralVNodes.value.length > 0);
+</script>
+
+<template>
+  <div
+    ref="wrapperRef"
+    :class="cn('a-skeleton', props.class)"
+    :data-loading="props.loading ? '' : undefined"
+  >
+    <template v-if="props.loading">
+      <!-- Cache hit: pixel-aligned positioned blocks from a previous measurement.
+           Styles are pre-computed during capture so the loop below never calls
+           a function or allocates a style object per node. -->
+      <div
+        v-if="cached"
+        class="a-skeleton__layer"
+        :style="layerStyle"
+        role="status"
+        aria-live="polite"
+        aria-busy="true"
+      >
+        <template v-for="(node, idx) in cached.nodes" :key="idx">
+          <template v-if="node.lineStyles">
+            <div
+              v-for="(lineStyle, i) in node.lineStyles"
+              :key="`${idx}-${i}`"
+              :class="blockClassByType.text"
+              :style="lineStyle"
+            />
+          </template>
+          <div v-else :class="blockClassByType[node.type]" :style="node.style" />
+        </template>
+      </div>
+
+      <!-- Cache miss + slot has structure: render a structural skeleton derived
+           from the slot's vnode tree. First paint already looks right. -->
+      <div
+        v-else-if="hasStructure"
+        class="a-skeleton__structural"
+        role="status"
+        aria-live="polite"
+        aria-busy="true"
+      >
+        <StructuralSkeleton
+          :vnodes="structuralVNodes"
+          :animation="animationClass"
+          :max-depth="maxDepth"
+          :max-nodes="maxNodes"
+        />
+      </div>
+
+      <!-- Cache miss + nothing to walk: generic shimmer. -->
+      <div v-else class="a-skeleton__fallback" role="status" aria-busy="true">
+        <slot name="fallback">
+          <div
+            class="a-skel-block a-skel-block--block a-skel-fallback-default"
+            :class="animationClass"
+          />
+        </slot>
+      </div>
+    </template>
+
+    <slot v-else />
+  </div>
+</template>
+
+<style scoped>
+.a-skeleton {
+  display: block;
+  position: relative;
+}
+
+/* `.a-skeleton__layer` + `.a-skeleton__layer > .a-skel-block` layout/containment
+ * live in `styles.src.css` so they're shared with the public `<ASkeletonLayer>`
+ * component. */
+
+.a-skeleton__structural :deep(*) {
+  /* Disable text caret/selection on the structural copy so it doesn't look
+   * interactive. Layout (flex/grid/spacing/sizing) flows through unchanged. */
+  user-select: none;
+  pointer-events: none;
+}
+
+.a-skeleton__structural :deep(button),
+.a-skeleton__structural :deep(input),
+.a-skeleton__structural :deep(a) {
+  cursor: default;
+}
+
+.a-skeleton__fallback :deep(.a-skel-fallback-default) {
+  width: 100%;
+  height: 4rem;
+  border-radius: 0.5rem;
+}
+</style>

package/src/components/ASkeletonBlock.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { computed, type CSSProperties } from 'vue';
+import { cn } from '@alikhalilll/a-ui-base';
+import type { ASkeletonBlockProps } from '../types';
+
+const props = withDefaults(defineProps<ASkeletonBlockProps>(), {
+  type: 'block',
+  animation: 'shimmer',
+  lines: 1,
+});
+
+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: number | string | undefined): string | undefined {
+  if (v === undefined) return undefined;
+  return typeof v === 'number' ? `${v}px` : v;
+}
+
+const radiusValue = computed(() =>
+  props.type === 'circle' && props.radius === undefined ? '50%' : toLength(props.radius)
+);
+
+const blockStyle = computed<CSSProperties>(() => ({
+  width: toLength(props.w),
+  height: toLength(props.h),
+  borderRadius: radiusValue.value,
+}));
+
+const isMultiLineText = computed(() => props.type === 'text' && props.lines > 1);
+</script>
+
+<template>
+  <div
+    v-if="isMultiLineText"
+    :class="cn('a-skel-block-stack', props.class)"
+    role="status"
+    aria-busy="true"
+  >
+    <div
+      v-for="i in props.lines"
+      :key="i"
+      :class="blockClass"
+      :style="{
+        height: blockStyle.height ?? '0.75em',
+        width: i === props.lines ? '70%' : '100%',
+        borderRadius: blockStyle.borderRadius ?? '4px',
+      }"
+    />
+  </div>
+  <div
+    v-else
+    :class="cn(blockClass, props.class)"
+    :style="blockStyle"
+    role="status"
+    aria-busy="true"
+  />
+</template>
+
+<style scoped>
+.a-skel-block-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  width: 100%;
+}
+</style>

package/src/components/ASkeletonLayer.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { computed, type CSSProperties } from 'vue';
+import { cn } from '@alikhalilll/a-ui-base';
+import type { ASkeletonLayerProps, ShapeNodeType } from '../types';
+
+const props = withDefaults(defineProps<ASkeletonLayerProps>(), {
+  animation: 'shimmer',
+});
+
+const animationClass = computed(() =>
+  props.animation === 'none' ? null : `a-skel-block--anim-${props.animation}`
+);
+
+const layerStyle = computed<CSSProperties>(() =>
+  props.shape ? { width: `${props.shape.width}px`, height: `${props.shape.height}px` } : {}
+);
+
+/* Pre-joined per-type class strings — see ASkeleton.vue for the rationale. */
+const blockClassByType = computed<Readonly<Record<ShapeNodeType, string>>>(() => {
+  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}`,
+  });
+});
+</script>
+
+<template>
+  <div
+    v-if="shape"
+    :class="cn('a-skeleton__layer', props.class)"
+    :style="layerStyle"
+    role="status"
+    aria-live="polite"
+    aria-busy="true"
+  >
+    <template v-for="(node, idx) in shape.nodes" :key="idx">
+      <template v-if="node.lineStyles">
+        <div
+          v-for="(lineStyle, i) in node.lineStyles"
+          :key="`${idx}-${i}`"
+          :class="blockClassByType.text"
+          :style="lineStyle"
+        />
+      </template>
+      <div v-else :class="blockClassByType[node.type]" :style="node.style" />
+    </template>
+  </div>
+</template>