@alikhalilll/a-skeleton 1.0.0 → 1.1.0

package/dist/styles.css

@@ -1,5 +1,5 @@
 /*! 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}
+@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}.collapse{visibility:collapse}.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] {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alikhalilll/a-skeleton",
-  "version": "1.0.0",
+  "version": "1.1.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",

package/src/components/ASkeleton.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, shallowRef, useSlots, watch, type CSSProperties } from 'vue';
+import { computed, ref, shallowRef, useId, 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';
@@ -19,7 +19,18 @@ defineSlots<ASkeletonSlots>();
 
 const slots = useSlots();
 
-const resolvedKey = computed(() => props.cacheKey ?? fingerprintSlot(slots.default?.()));
+/* Per-instance suffix from Vue's useId() — deterministic across SSR/hydration
+ * and stable across re-renders, but distinct per <ASkeleton> instance. Two
+ * <ASkeleton><UserCard/></ASkeleton> on the same page therefore never collide
+ * on the auto-generated key. Pass an explicit `cacheKey` to share a shape
+ * across instances on purpose. */
+const instanceId = useId();
+
+const resolvedKey = computed(
+  () => props.cacheKey ?? `${fingerprintSlot(slots.default?.())}:${instanceId}`
+);
+
+const warnedKeys = new Set<string>();
 
 const cached = shallowRef<CachedShape | undefined>(getCached(resolvedKey.value, props.persist));
 
@@ -38,6 +49,14 @@ useShapeProbe(() => (props.loading ? null : wrapperRef.value), {
   onCapture: (shape) => {
     setCached(resolvedKey.value, shape, props.persist);
     cached.value = shape;
+    if (shape.truncated && !warnedKeys.has(resolvedKey.value)) {
+      warnedKeys.add(resolvedKey.value);
+      console.warn(
+        `[ASkeleton] Capture truncated at maxNodes=${props.maxNodes} for cacheKey="${resolvedKey.value}". ` +
+          `The replayed skeleton will be missing nodes. Raise \`max-nodes\` or mark dense subtrees with ` +
+          `\`data-skeleton-stop\` to collapse them into a single block.`
+      );
+    }
   },
 });
 

package/src/composables/useSkeletonCache.ts

@@ -4,21 +4,44 @@ import type { CachedShape, ShapeNode } from '../types';
 const memory = new Map<string, CachedShape>();
 const STORAGE_PREFIX = 'a-skeleton:';
 
+/**
+ * Schema version for persisted 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.
+ */
+const SCHEMA_VERSION = 1;
+
+interface PersistedShape {
+  v: number;
+  width: number;
+  height: number;
+  nodes: Partial<ShapeNode>[];
+  truncated?: boolean;
+}
+
 /**
  * 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.
  */
 export function getCached(key: string, persist: boolean): CachedShape | undefined {
   const hit = memory.get(key);
   if (hit) return hit;
   if (!persist || typeof window === 'undefined') return undefined;
   try {
-    const raw = window.localStorage.getItem(STORAGE_PREFIX + key);
+    const storageKey = STORAGE_PREFIX + key;
+    const raw = window.localStorage.getItem(storageKey);
     if (!raw) return undefined;
-    const parsed = JSON.parse(raw) as CachedShape;
-    const rehydrated = rehydrateShape(parsed);
+    const parsed = JSON.parse(raw) as Partial<PersistedShape>;
+    if (parsed.v !== SCHEMA_VERSION) {
+      /* Stale payload from a previous release — purge so the next capture
+       * writes a fresh entry instead of rehydrating into a wrong layout. */
+      window.localStorage.removeItem(storageKey);
+      return undefined;
+    }
+    const rehydrated = rehydrateShape(parsed as PersistedShape);
     memory.set(key, rehydrated);
     return rehydrated;
   } catch {
@@ -32,7 +55,13 @@ export function setCached(key: string, value: CachedShape, persist: boolean): vo
   if (!persist || typeof window === 'undefined') return;
   try {
     /* Only the geometry survives the round-trip; styles get rebuilt on read. */
-    const lean = { width: value.width, height: value.height, nodes: leanNodes(value.nodes) };
+    const lean: PersistedShape = {
+      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 {
     /* quota exceeded / disabled storage — silently degrade to in-memory only. */
@@ -67,8 +96,8 @@ export function clearCached(key?: string): void {
  * Walks the array in-place where possible and freezes the result so the render
  * path stays allocation-free.
  */
-function rehydrateShape(shape: CachedShape): CachedShape {
-  const nodes = shape.nodes.map((n) => (n.style ? n : freezeNodeStyles(n)));
+function rehydrateShape(shape: PersistedShape): CachedShape {
+  const nodes = shape.nodes.map((n) => freezeNodeStyles(n as ShapeNode));
   return Object.freeze({
     nodes: Object.freeze(nodes),
     width: shape.width,

package/src/types.ts

@@ -42,9 +42,12 @@ export interface ASkeletonProps {
   /** When true, render the captured skeleton (or `fallback` slot) instead of the default slot. */
   loading: boolean;
   /**
-   * Identifier used to look up + persist the captured shape. Falls back to the
-   * slot's first child component name, then `'anonymous'`. Pass explicitly when
-   * the same component renders different shapes depending on props.
+   * Identifier used to look up + persist the captured shape. Defaults to
+   * `"<slot-fingerprint>:<useId()>"` so every `<ASkeleton>` instance gets its
+   * own cache slot automatically — two `<ASkeleton><UserCard/></ASkeleton>` on
+   * the same page never collide. Pass explicitly when you *want* multiple
+   * instances to share a captured shape (e.g. a list of identical cards), or
+   * when one instance renders different shapes depending on a prop.
    */
   cacheKey?: string;
   /** Max recursion depth during shape capture. Default 6. */

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@alikhalilll/a-skeleton",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "js-types-syntax": "typescript",
   "description-markup": "markdown",
   "framework": "vue",
@@ -32,7 +32,7 @@
               "name": "cacheKey",
               "type": "string",
               "required": false,
-              "description": "Identifier used to look up + persist the captured shape. Falls back to the\nslot's first child component name, then `'anonymous'`. Pass explicitly when\nthe same component renders different shapes depending on props."
+              "description": "Identifier used to look up + persist the captured shape. Defaults to\n`\"<slot-fingerprint>:<useId()>\"` so every `<ASkeleton>` instance gets its\nown cache slot automatically — two `<ASkeleton><UserCard/></ASkeleton>` on\nthe same page never collide. Pass explicitly when you *want* multiple\ninstances to share a captured shape (e.g. a list of identical cards), or\nwhen one instance renders different shapes depending on a prop."
             },
             {
               "name": "class",