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

package/dist/index.js

@@ -0,0 +1,441 @@
+import { $ as ATTR_LOADING, A as DEFAULT_TEXT, B as themeVariables, C as smart, D as rectsOf, E as motionOf, F as DEFAULT_COLORS, G as addStyles, H as INLINE_STUB, I as DEFAULT_THEME, J as ATTR_BLOCK, K as removeStyles, L as applyTheme, M as checkNonce, N as debugging, O as shimmer, P as setDebug, Q as ATTR_LAYER, R as skeletonCSS, S as sequence, T as drawSkeleton, U as inlineScriptTag, V as INLINE_SCRIPT, W as SMART_SKELETON_CSS, X as ATTR_GHOST, Y as ATTR_DEBUG, Z as ATTR_IGNORE, _ as byPosition, a as exitDuration, at as ATTR_STATUS, b as planReveal, c as pendingImages, ct as DURATIONS, d as skeletonBoxStyle, dt as RESIZE_DURATION, et as ATTR_OWN, f as Memory, g as byContent, h as SKELETON_DELAY, i as fadeOut, it as ATTR_SNAPSHOT, j as measureSkeleton, k as prefersReducedMotion, l as DEFAULT_SKELETON_BOX_OPTIONS, lt as FADE_DURATION, m as forgetShapes, n as boxOf, nt as ATTR_RECT, o as sweep, ot as ATTR_XRAY, p as Ghost, q as ATTR_BAR, r as fadeIn, rt as ATTR_REVEAL, s as imageReady, st as CASCADE_SPREAD, t as Reveal, tt as ATTR_PANE, u as createSkeletonBox, ut as IMAGE_TIMEOUT, v as byRow, w as together, x as quickly, y as instant, z as themeStyleTag } from "./_chunks/core.js";
+import { Fragment, Suspense, Transition, computed, createBlock, createCommentVNode, createElementBlock, defineComponent, getCurrentInstance, h, inject, mergeProps, onBeforeMount, onBeforeUnmount, onMounted, onUnmounted, openBlock, provide, ref, renderSlot, resolveDynamicComponent, toDisplayString, watch } from "vue";
+//#region src/composables/useSmartSkeleton.ts
+const SMART_SKELETON_CONFIG_KEY = Symbol("a-smart-skeleton");
+/** Per server render: whether the full inline script has gone out yet, so the skeletons after it send a stub. */
+const SMART_SKELETON_BOOT_KEY = Symbol("a-smart-skeleton.boot");
+/** The provider settings in scope for this component. Empty outside a provider. */
+const useSmartSkeleton = () => inject(SMART_SKELETON_CONFIG_KEY, {});
+/** Whether this skeleton should send the stub — claiming the full script if it's the first. */
+function claimStub() {
+	const boot = inject(SMART_SKELETON_BOOT_KEY, null);
+	const stub = !!boot?.sent;
+	if (boot) boot.sent = true;
+	return stub;
+}
+//#endregion
+//#region src/composables/useStyles.ts
+/** Adds the stylesheet on mount and removes it on unmount — reference counted, so siblings share one copy. */
+function useStyles() {
+	onBeforeMount(addStyles);
+	onUnmounted(removeStyles);
+}
+//#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/ASmartSkeleton.vue
+/**
+* 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.
+*/
+const Loading = defineComponent({
+	name: "ASmartSkeletonLoading",
+	props: {
+		id: String,
+		exact: Boolean,
+		refetch: Boolean,
+		label: String
+	},
+	setup(props, { slots }) {
+		const element = ref(null);
+		const config = useSmartSkeleton();
+		const script = claimStub() ? INLINE_STUB : INLINE_SCRIPT;
+		let ghost = 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());
+		});
+		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
+			})
+		];
+	}
+});
+const Content = defineComponent({
+	name: "ASmartSkeletonContent",
+	props: { memory: {
+		type: Object,
+		required: true
+	} },
+	setup(props, { slots }) {
+		const element = ref(null);
+		let memory = null;
+		onMounted(() => {
+			if (element.value) memory = new Memory(element.value, props.memory);
+		});
+		onBeforeUnmount(() => memory?.destroy());
+		return () => h("div", { ref: element }, slots.default?.());
+	}
+});
+var ASmartSkeleton_default = /* @__PURE__ */ export_helper_default(defineComponent({
+	name: "ASmartSkeleton",
+	props: {
+		/** Shows the skeleton, even over `data`. With `data`, it also shows while there is none. */
+		loading: {
+			type: Boolean,
+			default: void 0
+		},
+		/** Loading while `null` or `undefined`; handed to the default slot as `{ data }`. */
+		data: {
+			type: null,
+			required: false
+		},
+		/** Stands in for `data` to draw the skeleton before any has loaded. */
+		sample: {
+			type: null,
+			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,
+			required: false
+		},
+		/** Overrides the provider's reveal for this skeleton alone. */
+		reveal: [String, Object]
+	},
+	/** `reveal`: content has come in over a skeleton. */
+	emits: ["reveal"],
+	setup(props, { slots, emit }) {
+		const instance = getCurrentInstance();
+		const config = useSmartSkeleton();
+		let last = null;
+		let shown = null;
+		let from = 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) => driven ? value != null ? slots.default?.({ data: value }) : null : slots.default?.({ data: void 0 });
+			const loading = !!props.loading || driven && data == null && !props.error && !props.empty;
+			let key;
+			let content;
+			if (loading) {
+				const previous = last;
+				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 !== void 0
+				} }, () => 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 || void 0
+			}, [h(Transition, {
+				css: false,
+				appear: true,
+				onAppear: (el, done) => fadeIn(el, reveal, { initial: true }).then(done),
+				onEnter: (el, done) => fadeIn(el, reveal).then(() => {
+					done();
+					if (revealing) emit("reveal");
+				}),
+				onLeave: (el, done) => fadeOut(el).then(done)
+			}, () => h("div", {
+				key,
+				[ATTR_PANE]: ""
+			}, [content]))]);
+		};
+	}
+}), [["__file", "/Users/alikhalill/Desktop/my-projects/ali-nuxt-toolkit/packages/ui-components/ASmartSkeleton/src/components/ASmartSkeleton.vue"]]);
+//#endregion
+//#region src/components/ASmartSkeletonBox.vue
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+	name: "ASmartSkeletonBox",
+	__name: "ASmartSkeletonBox",
+	props: {
+		class: {
+			type: String,
+			required: false
+		},
+		style: {
+			type: Object,
+			required: false
+		},
+		height: {
+			type: [String, Number],
+			required: false
+		},
+		width: {
+			type: [String, Number],
+			required: false
+		},
+		radius: {
+			type: [String, Number],
+			required: false
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		__expose();
+		const props = __props;
+		const element = ref(null);
+		useStyles();
+		onMounted(() => {
+			if (element.value) shimmer(element.value);
+		});
+		const __returned__ = {
+			props,
+			element,
+			get skeletonBoxStyle() {
+				return skeletonBoxStyle;
+			},
+			get ATTR_BAR() {
+				return ATTR_BAR;
+			}
+		};
+		Object.defineProperty(__returned__, "__isScriptSetup", {
+			enumerable: false,
+			value: true
+		});
+		return __returned__;
+	}
+});
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+	return openBlock(), createElementBlock("span", mergeProps({ ref: "element" }, { [$setup.ATTR_BAR]: "" }, { style: $setup.skeletonBoxStyle($setup.props) }), null, 16);
+}
+var ASmartSkeletonBox_default = /* @__PURE__ */ export_helper_default(_sfc_main$2, [["render", _sfc_render$1], ["__file", "/Users/alikhalill/Desktop/my-projects/ali-nuxt-toolkit/packages/ui-components/ASmartSkeleton/src/components/ASmartSkeletonBox.vue"]]);
+//#endregion
+//#region src/components/ASmartSkeletonSuspense.vue
+const state = {
+	type: Object,
+	required: true
+};
+const Fallback = defineComponent({
+	name: "ASmartSkeletonFallback",
+	props: {
+		id: String,
+		label: String,
+		reveal: [String, Object],
+		state
+	},
+	setup(props, { slots }) {
+		const element = ref(null);
+		const config = useSmartSkeleton();
+		onMounted(() => {
+			const pane = element.value;
+			const reveal = pane?.parentElement;
+			if (!pane || !reveal) return;
+			props.state.waited = true;
+			fadeIn(pane, props.reveal ?? config.reveal, { initial: true });
+			reveal.setAttribute("aria-busy", "true");
+		});
+		onBeforeUnmount(() => {
+			const pane = element.value;
+			const reveal = pane?.parentElement;
+			if (!pane || !reveal) return;
+			reveal.removeAttribute("aria-busy");
+			const box = boxOf(pane);
+			const copy = pane.cloneNode(true);
+			props.state.exit = () => {
+				Object.assign(copy.style, {
+					position: "absolute",
+					top: `${box.top}px`,
+					left: `${box.left}px`,
+					width: `${box.width}px`
+				});
+				reveal.prepend(copy);
+				fadeOut(copy).then(() => copy.remove());
+			};
+		});
+		return () => h("div", {
+			ref: element,
+			[ATTR_PANE]: ""
+		}, h(Loading, {
+			id: props.id,
+			exact: false,
+			label: props.label
+		}, slots.default));
+	}
+});
+const BoundaryContent = defineComponent({
+	name: "ASmartSkeletonBoundaryContent",
+	props: {
+		id: String,
+		reveal: [String, Object],
+		state
+	},
+	emits: ["reveal"],
+	setup(props, { slots, emit }) {
+		const element = ref(null);
+		const config = useSmartSkeleton();
+		let memory = null;
+		onMounted(() => {
+			const pane = element.value;
+			if (!pane) return;
+			const waited = props.state.waited;
+			const arrival = fadeIn(pane, props.reveal ?? config.reveal, { initial: !waited });
+			if (waited) arrival.then(() => emit("reveal"));
+			props.state.exit?.();
+			props.state.exit = null;
+			memory = new Memory(pane, { id: props.id });
+		});
+		onBeforeUnmount(() => memory?.destroy());
+		return () => h("div", {
+			ref: element,
+			[ATTR_PANE]: ""
+		}, slots.default?.());
+	}
+});
+var ASmartSkeletonSuspense_default = /* @__PURE__ */ export_helper_default(defineComponent({
+	name: "ASmartSkeletonSuspense",
+	props: {
+		/** Remembers the shape under this key across visits. */
+		id: String,
+		/** Read to screen readers while suspended, in place of the skeleton. */
+		label: String,
+		/** Overrides the provider's reveal for this boundary alone. */
+		reveal: [String, Object]
+	},
+	/** `reveal`: content has come in over the skeleton. */
+	emits: ["reveal"],
+	setup(props, { slots, emit }) {
+		useStyles();
+		const shared = {
+			waited: false,
+			exit: null
+		};
+		return () => h("div", { [ATTR_REVEAL]: "" }, [h(Suspense, null, {
+			default: () => h(BoundaryContent, {
+				id: props.id,
+				reveal: props.reveal,
+				state: shared,
+				onReveal: () => emit("reveal")
+			}, slots.default),
+			fallback: () => h(Fallback, {
+				id: props.id,
+				label: props.label,
+				reveal: props.reveal,
+				state: shared
+			}, slots.skeleton)
+		})]);
+	}
+}), [["__file", "/Users/alikhalill/Desktop/my-projects/ali-nuxt-toolkit/packages/ui-components/ASmartSkeleton/src/components/ASmartSkeletonSuspense.vue"]]);
+//#endregion
+//#region src/components/ASmartSkeletonProvider.vue
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	name: "ASmartSkeletonProvider",
+	__name: "ASmartSkeletonProvider",
+	props: {
+		nonce: {
+			type: String,
+			required: false
+		},
+		theme: {
+			type: Object,
+			required: false
+		},
+		mode: {
+			type: String,
+			required: false
+		},
+		text: {
+			type: Object,
+			required: false
+		},
+		reveal: {
+			type: [String, Object],
+			required: false
+		},
+		debug: {
+			type: Boolean,
+			required: false
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		__expose();
+		const props = __props;
+		provide(SMART_SKELETON_CONFIG_KEY, props);
+		provide(SMART_SKELETON_BOOT_KEY, { sent: false });
+		watch(() => props.debug, (debug) => {
+			if (debug !== void 0 && typeof window !== "undefined") setDebug(debug);
+		}, { immediate: true });
+		const __returned__ = {
+			props,
+			css: computed(() => skeletonCSS(props))
+		};
+		Object.defineProperty(__returned__, "__isScriptSetup", {
+			enumerable: false,
+			value: true
+		});
+		return __returned__;
+	}
+});
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+	return openBlock(), createElementBlock(Fragment, null, [
+		createCommentVNode(" eslint-disable-next-line vue/no-v-text-v-html-on-component "),
+		$setup.css ? (openBlock(), createBlock(resolveDynamicComponent("style"), {
+			key: 0,
+			nonce: $props.nonce,
+			textContent: toDisplayString($setup.css)
+		}, null, 8, ["nonce", "textContent"])) : createCommentVNode("v-if", true),
+		renderSlot(_ctx.$slots, "default")
+	], 64);
+}
+var ASmartSkeletonProvider_default = /* @__PURE__ */ export_helper_default(_sfc_main, [["render", _sfc_render], ["__file", "/Users/alikhalill/Desktop/my-projects/ali-nuxt-toolkit/packages/ui-components/ASmartSkeleton/src/components/ASmartSkeletonProvider.vue"]]);
+//#endregion
+export { ASmartSkeleton_default as ASmartSkeleton, ASmartSkeletonBox_default as ASmartSkeletonBox, ASmartSkeletonProvider_default as ASmartSkeletonProvider, ASmartSkeletonSuspense_default as ASmartSkeletonSuspense, ATTR_BAR, ATTR_BLOCK, ATTR_DEBUG, ATTR_GHOST, ATTR_IGNORE, ATTR_LAYER, ATTR_LOADING, ATTR_OWN, ATTR_PANE, ATTR_RECT, ATTR_REVEAL, ATTR_SNAPSHOT, ATTR_STATUS, ATTR_XRAY, CASCADE_SPREAD, DEFAULT_COLORS, DEFAULT_SKELETON_BOX_OPTIONS, DEFAULT_TEXT, DEFAULT_THEME, DURATIONS, FADE_DURATION, Ghost, IMAGE_TIMEOUT, INLINE_SCRIPT, INLINE_STUB, Memory, RESIZE_DURATION, Reveal, SKELETON_DELAY, SMART_SKELETON_CSS, addStyles, applyTheme, boxOf, byContent, byPosition, byRow, checkNonce, createSkeletonBox, debugging, drawSkeleton, exitDuration, fadeIn, fadeOut, forgetShapes, imageReady, inlineScriptTag, instant, measureSkeleton, motionOf, pendingImages, planReveal, prefersReducedMotion, quickly, rectsOf, removeStyles, sequence, setDebug, shimmer, skeletonBoxStyle, skeletonCSS, smart, sweep, themeStyleTag, themeVariables, together, useSmartSkeleton, useStyles };
+
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../src/composables/useSmartSkeleton.ts","../src/composables/useStyles.ts","../src/components/ASmartSkeleton.vue","../src/components/ASmartSkeletonBox.vue","../src/components/ASmartSkeletonSuspense.vue","../src/components/ASmartSkeletonProvider.vue"],"sourcesContent":["import { inject, type InjectionKey } from 'vue';\nimport type { SmartSkeletonConfig } from '../types';\n\nexport const SMART_SKELETON_CONFIG_KEY: InjectionKey<SmartSkeletonConfig> =\n  Symbol('a-smart-skeleton');\n\n/** Per server render: whether the full inline script has gone out yet, so the skeletons after it send a stub. */\nexport const SMART_SKELETON_BOOT_KEY: InjectionKey<{ sent: boolean }> =\n  Symbol('a-smart-skeleton.boot');\n\n/** The provider settings in scope for this component. Empty outside a provider. */\nexport const useSmartSkeleton = (): SmartSkeletonConfig => inject(SMART_SKELETON_CONFIG_KEY, {});\n\n/** Whether this skeleton should send the stub — claiming the full script if it's the first. */\nexport function claimStub(): boolean {\n  const boot = inject(SMART_SKELETON_BOOT_KEY, null);\n  const stub = !!boot?.sent;\n  if (boot) boot.sent = true;\n  return stub;\n}\n","import { onBeforeMount, onUnmounted } from 'vue';\nimport { addStyles, removeStyles } from '../core';\n\n/** Adds the stylesheet on mount and removes it on unmount — reference counted, so siblings share one copy. */\nexport function useStyles(): void {\n  onBeforeMount(addStyles);\n  onUnmounted(removeStyles);\n}\n","<script lang=\"ts\">\nimport {\n  defineComponent,\n  getCurrentInstance,\n  h,\n  onBeforeUnmount,\n  onMounted,\n  ref,\n  Transition,\n  watch,\n  type PropType,\n  type VNodeChild,\n} from 'vue';\nimport {\n  ATTR_GHOST,\n  ATTR_LAYER,\n  ATTR_LOADING,\n  ATTR_OWN,\n  ATTR_PANE,\n  ATTR_REVEAL,\n  ATTR_SNAPSHOT,\n  ATTR_STATUS,\n  checkNonce,\n  fadeIn,\n  fadeOut,\n  Ghost,\n  INLINE_SCRIPT,\n  INLINE_STUB,\n  Memory,\n  type MemoryOptions,\n  type RevealMode,\n} from '../core';\nimport { claimStub, useSmartSkeleton } from '../composables/useSmartSkeleton';\nimport { useStyles } from '../composables/useStyles';\n\n/**\n * The measured loading pane. Internal — `<ASmartSkeleton>` renders it.\n *\n * The ghost is laid out but never seen; the layer holds bones in a shadow root,\n * so hydration never touches what was measured.\n */\nexport const Loading = defineComponent({\n  name: 'ASmartSkeletonLoading',\n  props: {\n    id: String,\n    exact: Boolean,\n    refetch: Boolean,\n    label: String,\n  },\n  setup(props, { slots }) {\n    const element = ref<HTMLElement | null>(null);\n    const config = useSmartSkeleton();\n    const script = claimStub() ? INLINE_STUB : INLINE_SCRIPT;\n    let ghost: Ghost | null = null;\n\n    const optionsOf = () => ({ id: props.id, exact: props.exact, refetch: props.refetch });\n    onMounted(() => {\n      checkNonce(config.nonce);\n      if (element.value) ghost = new Ghost(element.value, optionsOf());\n    });\n    // Options-only changes update the live ghost in place; the observers and shadow sheet\n    // outlive a prop flip, which happens every data arrival in data-driven mode.\n    watch(\n      () => [props.id, props.exact, props.refetch],\n      () => ghost?.update(optionsOf())\n    );\n    onBeforeUnmount(() => ghost?.destroy());\n\n    return () => [\n      props.label ? h('span', { [ATTR_STATUS]: '' }, props.label) : null,\n      h(\n        'div',\n        {\n          ref: element,\n          [ATTR_LOADING]: '',\n          'aria-hidden': 'true',\n          inert: '',\n        },\n        [\n          h('div', { [ATTR_GHOST]: '' }, slots.default?.()),\n          h('div', { [ATTR_SNAPSHOT]: '' }),\n          h('div', { [ATTR_LAYER]: '' }),\n        ]\n      ),\n      h('script', { nonce: config.nonce, innerHTML: script }),\n    ];\n  },\n});\n\nexport const Content = defineComponent({\n  name: 'ASmartSkeletonContent',\n  props: {\n    memory: { type: Object as PropType<MemoryOptions>, required: true },\n  },\n  setup(props, { slots }) {\n    const element = ref<HTMLElement | null>(null);\n    let memory: Memory | null = null;\n\n    onMounted(() => {\n      if (element.value) memory = new Memory(element.value, props.memory);\n    });\n    onBeforeUnmount(() => memory?.destroy());\n\n    return () => h('div', { ref: element }, slots.default?.());\n  },\n});\n\n/**\n * Shows a skeleton measured from the content it wraps, then reveals the content.\n *\n * ```vue\n * <ASmartSkeleton :data=\"user\" :sample=\"SAMPLE_USER\">\n *   <template #default=\"{ data }\">\n *     <UserCard :user=\"data\" />\n *   </template>\n * </ASmartSkeleton>\n * ```\n */\nexport default defineComponent({\n  name: 'ASmartSkeleton',\n  props: {\n    /** Shows the skeleton, even over `data`. With `data`, it also shows while there is none. */\n    loading: { type: Boolean, default: undefined },\n    /** Loading while `null` or `undefined`; handed to the default slot as `{ data }`. */\n    data: { type: null as unknown as PropType<unknown>, required: false },\n    /** Stands in for `data` to draw the skeleton before any has loaded. */\n    sample: { type: null as unknown as PropType<unknown>, required: false },\n    /** Remembers the shape under this key across visits. */\n    id: String,\n    /** Read to screen readers while loading, in place of the skeleton — \"Loading profile\". */\n    label: String,\n    empty: Boolean,\n    error: { type: null as unknown as PropType<unknown>, required: false },\n    /** Overrides the provider's reveal for this skeleton alone. */\n    reveal: [String, Object] as PropType<RevealMode>,\n  },\n  /** `reveal`: content has come in over a skeleton. */\n  emits: ['reveal'],\n  setup(props, { slots, emit }) {\n    const instance = getCurrentInstance();\n    const config = useSmartSkeleton();\n    let last: { id?: string; data: unknown } | null = null;\n    let shown: string | null = null;\n    let from: string | null = null;\n    useStyles();\n\n    return () => {\n      const driven = !!instance?.vnode.props && 'data' in instance.vnode.props;\n      const data = props.data;\n      if (data != null) last = { id: props.id, data };\n\n      const show = (value: unknown): VNodeChild =>\n        driven\n          ? value != null\n            ? slots.default?.({ data: value })\n            : null\n          : slots.default?.({ data: undefined });\n\n      const loading = !!props.loading || (driven && data == null && !props.error && !props.empty);\n\n      let key: string;\n      let content: VNodeChild;\n      if (loading) {\n        const previous = last as { id?: string; data: unknown } | null;\n        const real = data ?? (previous && previous.id === props.id ? previous.data : null);\n        key = 'skeleton';\n        content = slots.skeleton\n          ? h('div', { [ATTR_OWN]: '', 'aria-hidden': 'true' }, slots.skeleton())\n          : h(\n              Loading,\n              {\n                id: props.id,\n                exact: real != null,\n                refetch: data != null,\n                label: props.label,\n              },\n              () => show(real ?? props.sample)\n            );\n      } else if (props.error) {\n        key = 'error';\n        content = slots.error?.({ error: props.error });\n      } else if (props.empty) {\n        key = 'empty';\n        content = slots.empty?.() ?? show(data);\n      } else {\n        key = 'content';\n        content = h(\n          Content,\n          {\n            memory: {\n              id: props.id,\n              data,\n              rendered: driven,\n              sample: props.sample !== undefined,\n            },\n          },\n          () => show(data)\n        );\n      }\n\n      if (key !== shown) {\n        from = shown;\n        shown = key;\n      }\n      const revealing = key === 'content' && from === 'skeleton';\n\n      const reveal = props.reveal ?? config.reveal;\n      return h('div', { [ATTR_REVEAL]: '', 'aria-busy': loading || undefined }, [\n        h(\n          Transition,\n          {\n            css: false,\n            appear: true,\n            onAppear: (el, done) => fadeIn(el as HTMLElement, reveal, { initial: true }).then(done),\n            onEnter: (el, done) =>\n              fadeIn(el as HTMLElement, reveal).then(() => {\n                done();\n                if (revealing) emit('reveal');\n              }),\n            onLeave: (el, done) => fadeOut(el as HTMLElement).then(done),\n          },\n          () => h('div', { key, [ATTR_PANE]: '' }, [content])\n        ),\n      ]);\n    };\n  },\n});\n</script>\n","<script setup lang=\"ts\">\nimport { ref, onMounted } from 'vue';\nimport { shimmer, skeletonBoxStyle, ATTR_BAR } from '../core';\nimport { useStyles } from '../composables/useStyles';\nimport type { ASmartSkeletonBoxProps } from '../types';\n\ndefineOptions({\n  name: 'ASmartSkeletonBox',\n});\n\nconst props = defineProps<ASmartSkeletonBoxProps>();\n\nconst element = ref<HTMLElement | null>(null);\nuseStyles();\n\nonMounted(() => {\n  if (element.value) shimmer(element.value);\n});\n</script>\n\n<template>\n  <span ref=\"element\" v-bind=\"{ [ATTR_BAR]: '' }\" :style=\"skeletonBoxStyle(props)\" />\n</template>\n","<script lang=\"ts\">\nimport { defineComponent, h, onBeforeUnmount, onMounted, ref, Suspense, type PropType } from 'vue';\nimport { ATTR_PANE, ATTR_REVEAL, boxOf, fadeIn, fadeOut, Memory, type RevealMode } from '../core';\nimport { useSmartSkeleton } from '../composables/useSmartSkeleton';\nimport { useStyles } from '../composables/useStyles';\nimport { Loading } from './ASmartSkeleton.vue';\n\ntype State = { waited: boolean; exit: (() => void) | null };\nconst state = { type: Object as PropType<State>, required: true } as const;\n\nexport const Fallback = defineComponent({\n  name: 'ASmartSkeletonFallback',\n  props: { id: String, label: String, reveal: [String, Object] as PropType<RevealMode>, state },\n  setup(props, { slots }) {\n    const element = ref<HTMLElement | null>(null);\n    const config = useSmartSkeleton();\n\n    onMounted(() => {\n      const pane = element.value;\n      const reveal = pane?.parentElement;\n      if (!pane || !reveal) return;\n      // eslint-disable-next-line vue/no-mutating-props\n      props.state.waited = true;\n      fadeIn(pane, props.reveal ?? config.reveal, { initial: true });\n      reveal.setAttribute('aria-busy', 'true');\n    });\n\n    onBeforeUnmount(() => {\n      const pane = element.value;\n      const reveal = pane?.parentElement;\n      if (!pane || !reveal) return;\n      reveal.removeAttribute('aria-busy');\n\n      const box = boxOf(pane);\n      const copy = pane.cloneNode(true) as HTMLElement;\n      // eslint-disable-next-line vue/no-mutating-props\n      props.state.exit = () => {\n        Object.assign(copy.style, {\n          position: 'absolute',\n          top: `${box.top}px`,\n          left: `${box.left}px`,\n          width: `${box.width}px`,\n        });\n        reveal.prepend(copy);\n        fadeOut(copy).then(() => copy.remove());\n      };\n    });\n\n    return () =>\n      h(\n        'div',\n        { ref: element, [ATTR_PANE]: '' },\n        h(Loading, { id: props.id, exact: false, label: props.label }, slots.default)\n      );\n  },\n});\n\nexport const BoundaryContent = defineComponent({\n  name: 'ASmartSkeletonBoundaryContent',\n  props: { id: String, reveal: [String, Object] as PropType<RevealMode>, state },\n  emits: ['reveal'],\n  setup(props, { slots, emit }) {\n    const element = ref<HTMLElement | null>(null);\n    const config = useSmartSkeleton();\n    let memory: Memory | null = null;\n\n    onMounted(() => {\n      const pane = element.value;\n      if (!pane) return;\n      const waited = props.state.waited;\n      const arrival = fadeIn(pane, props.reveal ?? config.reveal, {\n        initial: !waited,\n      });\n      if (waited) arrival.then(() => emit('reveal'));\n\n      props.state.exit?.();\n      // eslint-disable-next-line vue/no-mutating-props\n      props.state.exit = null;\n      memory = new Memory(pane, { id: props.id });\n    });\n    onBeforeUnmount(() => memory?.destroy());\n\n    return () => h('div', { ref: element, [ATTR_PANE]: '' }, slots.default?.());\n  },\n});\n\n/**\n * A Suspense boundary whose fallback is a measured skeleton, crossfading into the content.\n *\n * ```vue\n * <ASmartSkeletonSuspense>\n *   <LoadedQuote />\n *   <template #skeleton><Quote :quote=\"SAMPLE_QUOTE\" /></template>\n * </ASmartSkeletonSuspense>\n * ```\n */\nexport default defineComponent({\n  name: 'ASmartSkeletonSuspense',\n  props: {\n    /** Remembers the shape under this key across visits. */\n    id: String,\n    /** Read to screen readers while suspended, in place of the skeleton. */\n    label: String,\n    /** Overrides the provider's reveal for this boundary alone. */\n    reveal: [String, Object] as PropType<RevealMode>,\n  },\n  /** `reveal`: content has come in over the skeleton. */\n  emits: ['reveal'],\n  setup(props, { slots, emit }) {\n    useStyles();\n    const shared: State = { waited: false, exit: null };\n\n    return () =>\n      h('div', { [ATTR_REVEAL]: '' }, [\n        h(Suspense, null, {\n          default: () =>\n            h(\n              BoundaryContent,\n              {\n                id: props.id,\n                reveal: props.reveal,\n                state: shared,\n                onReveal: () => emit('reveal'),\n              },\n              slots.default\n            ),\n          fallback: () =>\n            h(\n              Fallback,\n              {\n                id: props.id,\n                label: props.label,\n                reveal: props.reveal,\n                state: shared,\n              },\n              slots.skeleton\n            ),\n        }),\n      ]);\n  },\n});\n</script>\n","<script setup lang=\"ts\">\nimport { computed, provide, watch } from 'vue';\nimport { setDebug, skeletonCSS } from '../core';\nimport {\n  SMART_SKELETON_CONFIG_KEY,\n  SMART_SKELETON_BOOT_KEY,\n} from '../composables/useSmartSkeleton';\nimport type { ASmartSkeletonProviderProps } from '../types';\n\ndefineOptions({\n  name: 'ASmartSkeletonProvider',\n});\n\nconst props = defineProps<ASmartSkeletonProviderProps>();\n\nprovide(SMART_SKELETON_CONFIG_KEY, props);\nprovide(SMART_SKELETON_BOOT_KEY, { sent: false });\n\nwatch(\n  () => props.debug,\n  (debug) => {\n    if (debug !== undefined && typeof window !== 'undefined') setDebug(debug);\n  },\n  { immediate: true }\n);\n\nconst css = computed(() => skeletonCSS(props));\n</script>\n\n<template>\n  <!-- eslint-disable-next-line vue/no-v-text-v-html-on-component -->\n  <component :is=\"'style'\" v-if=\"css\" :nonce=\"nonce\" v-text=\"css\" />\n  <slot />\n</template>\n"],"mappings":"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"}

package/dist/nuxt/index.cjs

@@ -0,0 +1,36 @@
+let _nuxt_kit = require("@nuxt/kit");
+//#region src/nuxt/index.ts
+const COMPONENTS = {
+	ASmartSkeleton: "@alikhalilll/a-smart-skeleton",
+	ASmartSkeletonBox: "@alikhalilll/a-smart-skeleton",
+	ASmartSkeletonSuspense: "@alikhalilll/a-smart-skeleton",
+	ASmartSkeletonProvider: "@alikhalilll/a-smart-skeleton"
+};
+const STYLES = "@alikhalilll/a-smart-skeleton/styles.css";
+const module$1 = (0, _nuxt_kit.defineNuxtModule)({
+	meta: {
+		name: "@alikhalilll/a-smart-skeleton",
+		configKey: "aSmartSkeleton",
+		compatibility: { nuxt: ">=3.0.0" }
+	},
+	defaults: {
+		prefix: "",
+		styles: true
+	},
+	setup(opts, nuxt) {
+		const prefix = opts.prefix ?? "";
+		for (const [exportName, from] of Object.entries(COMPONENTS)) {
+			const baseName = exportName.startsWith("A") ? exportName.slice(1) : exportName;
+			(0, _nuxt_kit.addComponent)({
+				name: `${prefix}${prefix ? baseName : exportName}`,
+				export: exportName,
+				filePath: from
+			});
+		}
+		if (opts.styles !== false && !nuxt.options.css.includes(STYLES)) nuxt.options.css.push(STYLES);
+	}
+});
+//#endregion
+module.exports = module$1;
+
+//# sourceMappingURL=index.cjs.map

package/dist/nuxt/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["module"],"sources":["../../src/nuxt/index.ts"],"sourcesContent":["import { defineNuxtModule, addComponent } from '@nuxt/kit';\nimport type { NuxtModule } from '@nuxt/schema';\n\n/**\n * `@alikhalilll/a-smart-skeleton/nuxt` — registers the components for Nuxt\n * auto-import and adds the stylesheet to the app.\n *\n *   modules: ['@alikhalilll/a-smart-skeleton/nuxt'],\n *   aSmartSkeleton: { prefix: 'A', styles: true },\n *\n * Components registered natively:\n *   <ASmartSkeleton>           measured skeleton wrapper\n *   <ASmartSkeletonBox>        one shimmering bar\n *   <ASmartSkeletonSuspense>   Suspense boundary with a measured fallback\n *   <ASmartSkeletonProvider>   theme / nonce / reveal defaults\n *\n * The stylesheet is added to `nuxt.options.css` by default. It is also\n * injected at runtime, but shipping it in the page is what lets a\n * server-rendered skeleton be hidden before the first paint.\n */\n\nexport interface ModuleOptions {\n  /** Optional prefix prepended to the registered component name. */\n  prefix?: string;\n  /** Add `@alikhalilll/a-smart-skeleton/styles.css` to the Nuxt css array. Default `true`. */\n  styles?: boolean;\n}\n\nconst COMPONENTS: 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\nconst STYLES = '@alikhalilll/a-smart-skeleton/styles.css';\n\nconst module: NuxtModule<ModuleOptions> = defineNuxtModule<ModuleOptions>({\n  meta: {\n    name: '@alikhalilll/a-smart-skeleton',\n    configKey: 'aSmartSkeleton',\n    compatibility: { nuxt: '>=3.0.0' },\n  },\n  defaults: { prefix: '', styles: true },\n  setup(opts, nuxt) {\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    if (opts.styles !== false && !nuxt.options.css.includes(STYLES)) {\n      nuxt.options.css.push(STYLES);\n    }\n  },\n});\n\nexport default module;\n"],"mappings":";;AA4BA,MAAM,aAAqC;CACzC,gBAAgB;CAChB,mBAAmB;CACnB,wBAAwB;CACxB,wBAAwB;AAC1B;AAEA,MAAM,SAAS;AAEf,MAAMA,YAAAA,GAAAA,UAAAA,kBAAoE;CACxE,MAAM;EACJ,MAAM;EACN,WAAW;EACX,eAAe,EAAE,MAAM,UAAU;CACnC;CACA,UAAU;EAAE,QAAQ;EAAI,QAAQ;CAAK;CACrC,MAAM,MAAM,MAAM;EAChB,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,CAAA,GAAA,UAAA,cAAa;IAAE,MAAM,GADK,SAAS,SAAS,WAAW;IAClB,QAAQ;IAAY,UAAU;GAAK,CAAC;EAC3E;EAEA,IAAI,KAAK,WAAW,SAAS,CAAC,KAAK,QAAQ,IAAI,SAAS,MAAM,GAC5D,KAAK,QAAQ,IAAI,KAAK,MAAM;CAEhC;AACF,CAAC"}

package/dist/nuxt/index.d.cts

@@ -0,0 +1,30 @@
+import { NuxtModule } from "@nuxt/schema";
+
+//#region src/nuxt/index.d.ts
+/**
+ * `@alikhalilll/a-smart-skeleton/nuxt` — registers the components for Nuxt
+ * auto-import and adds the stylesheet to the app.
+ *
+ *   modules: ['@alikhalilll/a-smart-skeleton/nuxt'],
+ *   aSmartSkeleton: { prefix: 'A', styles: true },
+ *
+ * Components registered natively:
+ *   <ASmartSkeleton>           measured skeleton wrapper
+ *   <ASmartSkeletonBox>        one shimmering bar
+ *   <ASmartSkeletonSuspense>   Suspense boundary with a measured fallback
+ *   <ASmartSkeletonProvider>   theme / nonce / reveal defaults
+ *
+ * The stylesheet is added to `nuxt.options.css` by default. It is also
+ * injected at runtime, but shipping it in the page is what lets a
+ * server-rendered skeleton be hidden before the first paint.
+ */
+interface ModuleOptions {
+  /** Optional prefix prepended to the registered component name. */
+  prefix?: string;
+  /** Add `@alikhalilll/a-smart-skeleton/styles.css` to the Nuxt css array. Default `true`. */
+  styles?: boolean;
+}
+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,30 @@
+import { NuxtModule } from "@nuxt/schema";
+
+//#region src/nuxt/index.d.ts
+/**
+ * `@alikhalilll/a-smart-skeleton/nuxt` — registers the components for Nuxt
+ * auto-import and adds the stylesheet to the app.
+ *
+ *   modules: ['@alikhalilll/a-smart-skeleton/nuxt'],
+ *   aSmartSkeleton: { prefix: 'A', styles: true },
+ *
+ * Components registered natively:
+ *   <ASmartSkeleton>           measured skeleton wrapper
+ *   <ASmartSkeletonBox>        one shimmering bar
+ *   <ASmartSkeletonSuspense>   Suspense boundary with a measured fallback
+ *   <ASmartSkeletonProvider>   theme / nonce / reveal defaults
+ *
+ * The stylesheet is added to `nuxt.options.css` by default. It is also
+ * injected at runtime, but shipping it in the page is what lets a
+ * server-rendered skeleton be hidden before the first paint.
+ */
+interface ModuleOptions {
+  /** Optional prefix prepended to the registered component name. */
+  prefix?: string;
+  /** Add `@alikhalilll/a-smart-skeleton/styles.css` to the Nuxt css array. Default `true`. */
+  styles?: boolean;
+}
+declare const module: NuxtModule<ModuleOptions>;
+//#endregion
+export { ModuleOptions, module as default };
+//# sourceMappingURL=index.d.ts.map

package/dist/nuxt/index.js

@@ -0,0 +1,36 @@
+import { addComponent, defineNuxtModule } from "@nuxt/kit";
+//#region src/nuxt/index.ts
+const COMPONENTS = {
+	ASmartSkeleton: "@alikhalilll/a-smart-skeleton",
+	ASmartSkeletonBox: "@alikhalilll/a-smart-skeleton",
+	ASmartSkeletonSuspense: "@alikhalilll/a-smart-skeleton",
+	ASmartSkeletonProvider: "@alikhalilll/a-smart-skeleton"
+};
+const STYLES = "@alikhalilll/a-smart-skeleton/styles.css";
+const module = defineNuxtModule({
+	meta: {
+		name: "@alikhalilll/a-smart-skeleton",
+		configKey: "aSmartSkeleton",
+		compatibility: { nuxt: ">=3.0.0" }
+	},
+	defaults: {
+		prefix: "",
+		styles: true
+	},
+	setup(opts, nuxt) {
+		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
+			});
+		}
+		if (opts.styles !== false && !nuxt.options.css.includes(STYLES)) nuxt.options.css.push(STYLES);
+	}
+});
+//#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-smart-skeleton/nuxt` — registers the components for Nuxt\n * auto-import and adds the stylesheet to the app.\n *\n *   modules: ['@alikhalilll/a-smart-skeleton/nuxt'],\n *   aSmartSkeleton: { prefix: 'A', styles: true },\n *\n * Components registered natively:\n *   <ASmartSkeleton>           measured skeleton wrapper\n *   <ASmartSkeletonBox>        one shimmering bar\n *   <ASmartSkeletonSuspense>   Suspense boundary with a measured fallback\n *   <ASmartSkeletonProvider>   theme / nonce / reveal defaults\n *\n * The stylesheet is added to `nuxt.options.css` by default. It is also\n * injected at runtime, but shipping it in the page is what lets a\n * server-rendered skeleton be hidden before the first paint.\n */\n\nexport interface ModuleOptions {\n  /** Optional prefix prepended to the registered component name. */\n  prefix?: string;\n  /** Add `@alikhalilll/a-smart-skeleton/styles.css` to the Nuxt css array. Default `true`. */\n  styles?: boolean;\n}\n\nconst COMPONENTS: 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\nconst STYLES = '@alikhalilll/a-smart-skeleton/styles.css';\n\nconst module: NuxtModule<ModuleOptions> = defineNuxtModule<ModuleOptions>({\n  meta: {\n    name: '@alikhalilll/a-smart-skeleton',\n    configKey: 'aSmartSkeleton',\n    compatibility: { nuxt: '>=3.0.0' },\n  },\n  defaults: { prefix: '', styles: true },\n  setup(opts, nuxt) {\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    if (opts.styles !== false && !nuxt.options.css.includes(STYLES)) {\n      nuxt.options.css.push(STYLES);\n    }\n  },\n});\n\nexport default module;\n"],"mappings":";;AA4BA,MAAM,aAAqC;CACzC,gBAAgB;CAChB,mBAAmB;CACnB,wBAAwB;CACxB,wBAAwB;AAC1B;AAEA,MAAM,SAAS;AAEf,MAAM,SAAoC,iBAAgC;CACxE,MAAM;EACJ,MAAM;EACN,WAAW;EACX,eAAe,EAAE,MAAM,UAAU;CACnC;CACA,UAAU;EAAE,QAAQ;EAAI,QAAQ;CAAK;CACrC,MAAM,MAAM,MAAM;EAChB,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;EAEA,IAAI,KAAK,WAAW,SAAS,CAAC,KAAK,QAAQ,IAAI,SAAS,MAAM,GAC5D,KAAK,QAAQ,IAAI,KAAK,MAAM;CAEhC;AACF,CAAC"}

package/dist/resolver/index.cjs

@@ -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
+module.exports = ASmartSkeletonResolver;
+
+//# sourceMappingURL=index.cjs.map