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

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-smart-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 ASmartSkeletonResolver from '@alikhalilll/a-smart-skeleton/resolver';\n *   export default { plugins: [Components({ resolvers: [ASmartSkeletonResolver()] })] };\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  ASmartSkeleton: '@alikhalilll/a-smart-skeleton',\n  ASmartSkeletonBox: '@alikhalilll/a-smart-skeleton',\n  ASmartSkeletonSuspense: '@alikhalilll/a-smart-skeleton',\n  ASmartSkeletonProvider: '@alikhalilll/a-smart-skeleton',\n};\n\nexport default function ASmartSkeletonResolver(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":";AAgBA,MAAM,qBAA6C;CACjD,gBAAgB;CAChB,mBAAmB;CACnB,wBAAwB;CACxB,wBAAwB;AAC1B;AAEA,SAAwB,uBAAuB,OAAwB,CAAC,GAAsB;CAC5F,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,19 @@
+import { ComponentResolver } from "unplugin-vue-components";
+
+//#region src/resolver/index.d.ts
+/**
+ * `@alikhalilll/a-smart-skeleton/resolver` — auto-import resolver for non-Nuxt
+ * Vite / Webpack consumers via `unplugin-vue-components`.
+ *
+ *   import Components from 'unplugin-vue-components/vite';
+ *   import ASmartSkeletonResolver from '@alikhalilll/a-smart-skeleton/resolver';
+ *   export default { plugins: [Components({ resolvers: [ASmartSkeletonResolver()] })] };
+ */
+interface ResolverOptions {
+  /** Optional prefix the consumer uses (e.g. `'A'`). Defaults to the native `A*` names. */
+  prefix?: string;
+}
+declare function ASmartSkeletonResolver(opts?: ResolverOptions): ComponentResolver;
+//#endregion
+export { ResolverOptions, ASmartSkeletonResolver as default };
+//# sourceMappingURL=index.d.cts.map

package/dist/resolver/index.d.ts

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

package/dist/resolver/index.js

@@ -0,0 +1,26 @@
+//#region src/resolver/index.ts
+const COMPONENT_TO_ENTRY = {
+	ASmartSkeleton: "@alikhalilll/a-smart-skeleton",
+	ASmartSkeletonBox: "@alikhalilll/a-smart-skeleton",
+	ASmartSkeletonSuspense: "@alikhalilll/a-smart-skeleton",
+	ASmartSkeletonProvider: "@alikhalilll/a-smart-skeleton"
+};
+function ASmartSkeletonResolver(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 { ASmartSkeletonResolver 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-smart-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 ASmartSkeletonResolver from '@alikhalilll/a-smart-skeleton/resolver';\n *   export default { plugins: [Components({ resolvers: [ASmartSkeletonResolver()] })] };\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  ASmartSkeleton: '@alikhalilll/a-smart-skeleton',\n  ASmartSkeletonBox: '@alikhalilll/a-smart-skeleton',\n  ASmartSkeletonSuspense: '@alikhalilll/a-smart-skeleton',\n  ASmartSkeletonProvider: '@alikhalilll/a-smart-skeleton',\n};\n\nexport default function ASmartSkeletonResolver(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":";AAgBA,MAAM,qBAA6C;CACjD,gBAAgB;CAChB,mBAAmB;CACnB,wBAAwB;CACxB,wBAAwB;AAC1B;AAEA,SAAwB,uBAAuB,OAAwB,CAAC,GAAsB;CAC5F,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,136 @@
+[ask-reveal] {
+  position: relative;
+}
+
+a-smart-skeleton-reveal,
+ask-reveal {
+  display: block;
+}
+
+a-smart-skeleton-reveal[loading]:not(:defined),
+ask-reveal[loading]:not(:defined) {
+  visibility: hidden;
+}
+
+[ask-pane] {
+  display: block;
+}
+
+[ask-loading] {
+  position: relative;
+  -webkit-user-select: none;
+  user-select: none;
+  pointer-events: none;
+}
+
+[ask-inactive] {
+  display: none !important;
+}
+
+[ask-layer] {
+  position: absolute;
+  inset: 0;
+  overflow: visible;
+}
+
+[ask-bar] {
+  display: block;
+  background-color: var(--ask-base, rgb(128 128 128 / 0.2));
+  background-repeat: no-repeat;
+}
+
+/*
+ * Bones drawn by `drawSkeleton` live in the light DOM (no shadow root), so a
+ * consumer can target them with their own stylesheet. Positioning stays inline
+ * (per-bone), but the fill colour reads from a CSS custom property so the
+ * consumer's theme flows through — set `--ask-base` on any ancestor to
+ * recolour every bone inside it, or use the type modifier to style text / media
+ * / box bones separately.
+ *
+ * Chrome bones are excluded: they reproduce the consumer's own container paint
+ * (background, border, shadow) that `captureChrome` snapshotted, so they must
+ * NOT get a generic fill underneath. Without the `:not()`, a bordered-only
+ * container (e.g. a footer with `border-t`) would show as a solid filled
+ * rectangle instead of just its captured divider.
+ */
+[ask-rect]:not([ask-rect="chrome"]) {
+  background-color: var(--ask-base, var(--ask-block, var(--ak-skeleton-block, rgb(128 128 128 / 0.2))));
+  background-repeat: no-repeat;
+}
+
+/* Containers keep their surface; what they hold is drawn by bones, measured before the first paint */
+@scope ([ask-loading]) to ([ask-own], [ask-layer]) {
+  :scope,
+  :scope * {
+    color: transparent !important;
+    -webkit-text-fill-color: transparent !important;
+    text-shadow: none !important;
+    text-decoration-color: transparent !important;
+  }
+
+  :scope ::placeholder {
+    color: transparent !important;
+  }
+
+  /* A line to measure in empty text; content only, never a size, or a dot-sized span would grow round it */
+  :scope :is(a, b, code, dd, dt, em, h1, h2, h3, h4, h5, h6, i, label, li, p, small, span, strong, td, th, time):empty:not(svg *)::before {
+    content: "000000";
+  }
+
+  /* Leaves are drawn by bones, so their own paint never shows; visibility, as measuring reads it */
+  :scope :is(:not(:has(*)), audio, canvas, embed, iframe, img, input, object, picture, select, svg, textarea, video, [ask-covered], [ask-block]):not(svg *) {
+    visibility: hidden !important;
+  }
+
+  /* No script to measure: a bar struck through each line of text instead */
+  @media (scripting: none) {
+    :scope :not(:has(*)):not(svg *) {
+      visibility: visible !important;
+    }
+
+    :scope,
+    :scope * {
+      text-decoration: line-through var(--ask-base, rgb(128 128 128 / 0.2)) !important;
+      text-decoration-thickness: 0.72em !important;
+      text-decoration-skip-ink: none !important;
+    }
+
+    :scope :is(audio, canvas, embed, iframe, img, input, object, picture, select, svg, textarea, video, [ask-block]):not(svg *) {
+      visibility: visible !important;
+      background: var(--ask-base, rgb(128 128 128 / 0.2)) !important;
+    }
+
+    :scope svg * {
+      fill: transparent !important;
+      stroke: transparent !important;
+    }
+
+    :scope :is(img, video) {
+      object-position: -100vw 0;
+    }
+  }
+}
+
+/* Read by screen readers in the skeleton's place, never seen */
+[ask-status] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+/* Debug x-ray: the ghost shown through its bones, to see what was measured */
+[ask-xray] [ask-loading] [ask-ghost],
+[ask-xray] [ask-loading] [ask-ghost] *:not(svg *) {
+  visibility: visible !important;
+  color: rgb(255 0 80 / 0.7) !important;
+  -webkit-text-fill-color: rgb(255 0 80 / 0.7) !important;
+}
+
+/* Lets addStyles see a stylesheet already on the page, from styles.css or a server render */
+:root {
+  --ask: 1;
+}

package/package.json

@@ -1,6 +1,147 @@
 {
   "name": "@alikhalilll/a-smart-skeleton",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "2.0.0",
+  "description": "Smart, measured skeleton loaders for Vue 3 / Nuxt 3+. Lays the real content out unseen, draws a skeleton from its geometry, then reveals it with smart, sequence, sweep or together animations.",
+  "license": "MIT",
+  "author": "alikhalilll",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/alikhalilll/ali-nuxt-toolkit.git",
+    "directory": "packages/ui-components/ASmartSkeleton"
+  },
+  "homepage": "https://alikhalilll.github.io/ali-nuxt-toolkit/ui/smart-skeleton",
+  "bugs": {
+    "url": "https://github.com/alikhalilll/ali-nuxt-toolkit/issues"
+  },
+  "type": "module",
+  "sideEffects": [
+    "**/*.css",
+    "./dist/element/*"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "nuxt",
+    "skeleton",
+    "loader",
+    "shimmer",
+    "placeholder",
+    "suspense",
+    "ssr",
+    "headless",
+    "web-components"
+  ],
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./core": {
+      "import": {
+        "types": "./dist/core/index.d.ts",
+        "default": "./dist/core/index.js"
+      },
+      "require": {
+        "types": "./dist/core/index.d.cts",
+        "default": "./dist/core/index.cjs"
+      }
+    },
+    "./element": {
+      "import": {
+        "types": "./dist/element/index.d.ts",
+        "default": "./dist/element/index.js"
+      },
+      "require": {
+        "types": "./dist/element/index.d.cts",
+        "default": "./dist/element/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
+    }
+  },
+  "devDependencies": {
+    "@nuxt/kit": "^4.4.2",
+    "@nuxt/schema": "^4.4.2",
+    "@tailwindcss/cli": "^4.0.0",
+    "@types/node": "^22.13.0",
+    "@vueuse/core": "^14.0.0",
+    "esbuild": "^0.27.7",
+    "happy-dom": "^20.12.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",
+    "vitest": "^4.1.11",
+    "vue": "^3.5.0",
+    "vue-tsc": "^3.2.4",
+    "@alikhalilll/a-ui-base": "1.0.0"
+  },
+  "scripts": {
+    "clean": "rimraf dist web-types.json",
+    "build": "node scripts/build-inline.mjs && tsx ../../../scripts/build/run-component-build.ts && node scripts/build-css.mjs",
+    "dev": "node scripts/build-inline.mjs && tsdown --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "vue-tsc --noEmit -p tsconfig.json",
+    "validate-dist": "tsx ../../../scripts/validate/dist-validate.ts --pkg a-smart-skeleton",
+    "validate-consumer": "tsx ../../../scripts/validate/consumer-validate.ts --pkg a-smart-skeleton",
+    "validate": "pnpm build && pnpm validate-dist && pnpm validate-consumer"
+  }
 }

package/src/components/ASmartSkeleton.vue

@@ -0,0 +1,228 @@
+<script lang="ts">
+import {
+  defineComponent,
+  getCurrentInstance,
+  h,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  Transition,
+  watch,
+  type PropType,
+  type VNodeChild,
+} from 'vue';
+import {
+  ATTR_GHOST,
+  ATTR_LAYER,
+  ATTR_LOADING,
+  ATTR_OWN,
+  ATTR_PANE,
+  ATTR_REVEAL,
+  ATTR_SNAPSHOT,
+  ATTR_STATUS,
+  checkNonce,
+  fadeIn,
+  fadeOut,
+  Ghost,
+  INLINE_SCRIPT,
+  INLINE_STUB,
+  Memory,
+  type MemoryOptions,
+  type RevealMode,
+} from '../core';
+import { claimStub, useSmartSkeleton } from '../composables/useSmartSkeleton';
+import { useStyles } from '../composables/useStyles';
+
+/**
+ * The measured loading pane. Internal — `<ASmartSkeleton>` renders it.
+ *
+ * The ghost is laid out but never seen; the layer holds bones in a shadow root,
+ * so hydration never touches what was measured.
+ */
+export const Loading = defineComponent({
+  name: 'ASmartSkeletonLoading',
+  props: {
+    id: String,
+    exact: Boolean,
+    refetch: Boolean,
+    label: String,
+  },
+  setup(props, { slots }) {
+    const element = ref<HTMLElement | null>(null);
+    const config = useSmartSkeleton();
+    const script = claimStub() ? INLINE_STUB : INLINE_SCRIPT;
+    let ghost: Ghost | null = null;
+
+    const optionsOf = () => ({ id: props.id, exact: props.exact, refetch: props.refetch });
+    onMounted(() => {
+      checkNonce(config.nonce);
+      if (element.value) ghost = new Ghost(element.value, optionsOf());
+    });
+    // Options-only changes update the live ghost in place; the observers and shadow sheet
+    // outlive a prop flip, which happens every data arrival in data-driven mode.
+    watch(
+      () => [props.id, props.exact, props.refetch],
+      () => ghost?.update(optionsOf())
+    );
+    onBeforeUnmount(() => ghost?.destroy());
+
+    return () => [
+      props.label ? h('span', { [ATTR_STATUS]: '' }, props.label) : null,
+      h(
+        'div',
+        {
+          ref: element,
+          [ATTR_LOADING]: '',
+          'aria-hidden': 'true',
+          inert: '',
+        },
+        [
+          h('div', { [ATTR_GHOST]: '' }, slots.default?.()),
+          h('div', { [ATTR_SNAPSHOT]: '' }),
+          h('div', { [ATTR_LAYER]: '' }),
+        ]
+      ),
+      h('script', { nonce: config.nonce, innerHTML: script }),
+    ];
+  },
+});
+
+export const Content = defineComponent({
+  name: 'ASmartSkeletonContent',
+  props: {
+    memory: { type: Object as PropType<MemoryOptions>, required: true },
+  },
+  setup(props, { slots }) {
+    const element = ref<HTMLElement | null>(null);
+    let memory: Memory | null = null;
+
+    onMounted(() => {
+      if (element.value) memory = new Memory(element.value, props.memory);
+    });
+    onBeforeUnmount(() => memory?.destroy());
+
+    return () => h('div', { ref: element }, slots.default?.());
+  },
+});
+
+/**
+ * Shows a skeleton measured from the content it wraps, then reveals the content.
+ *
+ * ```vue
+ * <ASmartSkeleton :data="user" :sample="SAMPLE_USER">
+ *   <template #default="{ data }">
+ *     <UserCard :user="data" />
+ *   </template>
+ * </ASmartSkeleton>
+ * ```
+ */
+export default defineComponent({
+  name: 'ASmartSkeleton',
+  props: {
+    /** Shows the skeleton, even over `data`. With `data`, it also shows while there is none. */
+    loading: { type: Boolean, default: undefined },
+    /** Loading while `null` or `undefined`; handed to the default slot as `{ data }`. */
+    data: { type: null as unknown as PropType<unknown>, required: false },
+    /** Stands in for `data` to draw the skeleton before any has loaded. */
+    sample: { type: null as unknown as PropType<unknown>, required: false },
+    /** Remembers the shape under this key across visits. */
+    id: String,
+    /** Read to screen readers while loading, in place of the skeleton — "Loading profile". */
+    label: String,
+    empty: Boolean,
+    error: { type: null as unknown as PropType<unknown>, required: false },
+    /** Overrides the provider's reveal for this skeleton alone. */
+    reveal: [String, Object] as PropType<RevealMode>,
+  },
+  /** `reveal`: content has come in over a skeleton. */
+  emits: ['reveal'],
+  setup(props, { slots, emit }) {
+    const instance = getCurrentInstance();
+    const config = useSmartSkeleton();
+    let last: { id?: string; data: unknown } | null = null;
+    let shown: string | null = null;
+    let from: string | null = null;
+    useStyles();
+
+    return () => {
+      const driven = !!instance?.vnode.props && 'data' in instance.vnode.props;
+      const data = props.data;
+      if (data != null) last = { id: props.id, data };
+
+      const show = (value: unknown): VNodeChild =>
+        driven
+          ? value != null
+            ? slots.default?.({ data: value })
+            : null
+          : slots.default?.({ data: undefined });
+
+      const loading = !!props.loading || (driven && data == null && !props.error && !props.empty);
+
+      let key: string;
+      let content: VNodeChild;
+      if (loading) {
+        const previous = last as { id?: string; data: unknown } | null;
+        const real = data ?? (previous && previous.id === props.id ? previous.data : null);
+        key = 'skeleton';
+        content = slots.skeleton
+          ? h('div', { [ATTR_OWN]: '', 'aria-hidden': 'true' }, slots.skeleton())
+          : h(
+              Loading,
+              {
+                id: props.id,
+                exact: real != null,
+                refetch: data != null,
+                label: props.label,
+              },
+              () => show(real ?? props.sample)
+            );
+      } else if (props.error) {
+        key = 'error';
+        content = slots.error?.({ error: props.error });
+      } else if (props.empty) {
+        key = 'empty';
+        content = slots.empty?.() ?? show(data);
+      } else {
+        key = 'content';
+        content = h(
+          Content,
+          {
+            memory: {
+              id: props.id,
+              data,
+              rendered: driven,
+              sample: props.sample !== undefined,
+            },
+          },
+          () => show(data)
+        );
+      }
+
+      if (key !== shown) {
+        from = shown;
+        shown = key;
+      }
+      const revealing = key === 'content' && from === 'skeleton';
+
+      const reveal = props.reveal ?? config.reveal;
+      return h('div', { [ATTR_REVEAL]: '', 'aria-busy': loading || undefined }, [
+        h(
+          Transition,
+          {
+            css: false,
+            appear: true,
+            onAppear: (el, done) => fadeIn(el as HTMLElement, reveal, { initial: true }).then(done),
+            onEnter: (el, done) =>
+              fadeIn(el as HTMLElement, reveal).then(() => {
+                done();
+                if (revealing) emit('reveal');
+              }),
+            onLeave: (el, done) => fadeOut(el as HTMLElement).then(done),
+          },
+          () => h('div', { key, [ATTR_PANE]: '' }, [content])
+        ),
+      ]);
+    };
+  },
+});
+</script>

package/src/components/ASmartSkeletonBox.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { shimmer, skeletonBoxStyle, ATTR_BAR } from '../core';
+import { useStyles } from '../composables/useStyles';
+import type { ASmartSkeletonBoxProps } from '../types';
+
+defineOptions({
+  name: 'ASmartSkeletonBox',
+});
+
+const props = defineProps<ASmartSkeletonBoxProps>();
+
+const element = ref<HTMLElement | null>(null);
+useStyles();
+
+onMounted(() => {
+  if (element.value) shimmer(element.value);
+});
+</script>
+
+<template>
+  <span ref="element" v-bind="{ [ATTR_BAR]: '' }" :style="skeletonBoxStyle(props)" />
+</template>

package/src/components/ASmartSkeletonProvider.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { computed, provide, watch } from 'vue';
+import { setDebug, skeletonCSS } from '../core';
+import {
+  SMART_SKELETON_CONFIG_KEY,
+  SMART_SKELETON_BOOT_KEY,
+} from '../composables/useSmartSkeleton';
+import type { ASmartSkeletonProviderProps } from '../types';
+
+defineOptions({
+  name: 'ASmartSkeletonProvider',
+});
+
+const props = defineProps<ASmartSkeletonProviderProps>();
+
+provide(SMART_SKELETON_CONFIG_KEY, props);
+provide(SMART_SKELETON_BOOT_KEY, { sent: false });
+
+watch(
+  () => props.debug,
+  (debug) => {
+    if (debug !== undefined && typeof window !== 'undefined') setDebug(debug);
+  },
+  { immediate: true }
+);
+
+const css = computed(() => skeletonCSS(props));
+</script>
+
+<template>
+  <!-- eslint-disable-next-line vue/no-v-text-v-html-on-component -->
+  <component :is="'style'" v-if="css" :nonce="nonce" v-text="css" />
+  <slot />
+</template>