vlite3 1.1.6 → 1.1.8

package/components/MultiSelect/MultiSelect.vue.js

@@ -1,23 +1,25 @@
-import { defineComponent as P, ref as k, computed as d, watch as M, openBlock as r, createBlock as f, unref as h, withCtx as g, createCommentVNode as m, createElementVNode as y, withKeys as I, withModifiers as p, normalizeClass as c, createElementBlock as v, toDisplayString as $, Fragment as T, renderList as R, createVNode as L, createTextVNode as U } from "vue";
-import S from "../Icon.vue.js";
-import q from "../Dropdown/Dropdown.vue.js";
-import G from "../Dropdown/DropdownMenu.vue.js";
+import { defineComponent as F, ref as V, computed as s, watch as E, openBlock as r, createBlock as f, unref as y, withCtx as d, createSlots as U, renderSlot as b, normalizeProps as q, guardReactiveProps as G, createCommentVNode as v, createElementVNode as p, withKeys as I, withModifiers as w, normalizeClass as m, createElementBlock as g, toDisplayString as S, Fragment as T, renderList as J, createVNode as N, createTextVNode as Q } from "vue";
+import M from "../Icon.vue.js";
+import W from "../Dropdown/Dropdown.vue.js";
+import X from "../Dropdown/DropdownMenu.vue.js";
 import { $t as C } from "../../utils/i18n.js";
-import N from "../Badge.vue.js";
-import { useMultiSelectHydration as J } from "./composables/useMultiSelectHydration.js";
-const Q = ["tabindex", "data-testid"], W = {
+import L from "../Badge.vue.js";
+import { useMultiSelectHydration as Y } from "./composables/useMultiSelectHydration.js";
+const Z = ["tabindex", "data-testid"], _ = {
   key: 0,
   class: "text-muted-foreground pl-0.5 truncate"
-}, X = { class: "truncate min-w-0" }, Y = ["onClick"], Z = {
+}, ee = { class: "truncate min-w-0" }, te = ["onClick"], ae = {
   key: 0,
   class: "flex items-center gap-2 pl-2 shrink-0 text-muted-foreground"
-}, oe = /* @__PURE__ */ P({
+}, ue = /* @__PURE__ */ F({
   __name: "MultiSelect",
   props: {
     modelValue: { default: () => [] },
     options: { default: () => [] },
     placeholder: {},
     placeholderI18n: {},
+    emptyMessage: { default: "No options found" },
+    searchEmptyMessage: {},
     disabled: { type: Boolean, default: !1 },
     readonly: { type: Boolean, default: !1 },
     searchable: { type: Boolean, default: !0 },
@@ -36,168 +38,201 @@ const Q = ["tabindex", "data-testid"], W = {
   },
   emits: ["update:modelValue", "change", "load-more", "search"],
   setup(t, { emit: j }) {
-    const e = t, i = j, o = k(!1), D = d(() => {
-      if (e.placeholderI18n) return C(e.placeholderI18n);
-      if (e.placeholder) return e.placeholder;
-      const a = C("vlite.multiSelect.placeholder");
-      return a !== "vlite.multiSelect.placeholder" ? a : "Select items...";
-    }), x = d(() => e.options ? e.options.map((a) => typeof a == "string" || typeof a == "number" ? { label: String(a), value: String(a) } : a) : []), B = k(!1), w = k(!1);
-    M(
+    const a = t, i = j, o = V(!1), D = s(() => {
+      if (a.placeholderI18n) return C(a.placeholderI18n);
+      if (a.placeholder) return a.placeholder;
+      const e = C("vlite.multiSelect.placeholder");
+      return e !== "vlite.multiSelect.placeholder" ? e : "Select items...";
+    }), x = s(() => a.options ? a.options.map((e) => typeof e == "string" || typeof e == "number" ? { label: String(e), value: String(e) } : e) : []), B = V(!1), $ = V(!1);
+    E(
       x,
-      (a) => {
-        !B.value && a.length > 0 && (B.value = !0, setTimeout(() => {
-          w.value = !0, s.hydrateSelected(e.modelValue || []);
+      (e) => {
+        !B.value && e.length > 0 && (B.value = !0, setTimeout(() => {
+          $.value = !0, u.hydrateSelected(a.modelValue || []);
         }, 10));
       },
       { immediate: !0 }
     );
-    const V = d(() => {
-      const a = [...x.value], n = new Set(a.map((l) => l.value ?? l.label));
-      return s.selectedBuffer.value.forEach((l, u) => {
-        n.has(u) || (a.unshift(l), n.add(u));
-      }), a;
-    }), s = J({
-      fetchSelected: e.fetchSelected,
-      getValues: () => e.modelValue || [],
-      getOptions: () => V.value,
-      isInitialLoadDone: () => w.value
+    const k = s(() => {
+      const e = [...x.value], l = new Set(e.map((n) => n.value ?? n.label));
+      return u.selectedBuffer.value.forEach((n, c) => {
+        l.has(c) || (e.unshift(n), l.add(c));
+      }), e;
+    }), u = Y({
+      fetchSelected: a.fetchSelected,
+      getValues: () => a.modelValue || [],
+      getOptions: () => k.value,
+      isInitialLoadDone: () => $.value
     });
-    M(
-      () => e.modelValue,
-      (a) => {
-        w.value && s.hydrateSelected(a || []);
+    E(
+      () => a.modelValue,
+      (e) => {
+        $.value && u.hydrateSelected(e || []);
       },
       { deep: !0 }
     );
-    const b = d(() => V.value.filter((a) => {
-      const n = a.value ?? a.label;
-      return e.modelValue.includes(n);
-    })), E = d(() => b.value.slice(0, e.maxVisible)), O = d(() => b.value.length - e.maxVisible), H = (a) => {
-      if (e.disabled || e.readonly) return;
-      const n = a.value ?? a.label;
-      s.selectedBuffer.value.has(n) || s.selectedBuffer.value.set(n, a);
-      const l = [...e.modelValue], u = l.indexOf(n);
-      u === -1 ? l.push(n) : l.splice(u, 1), i("update:modelValue", l), i("change", l);
-    }, K = (a) => {
-      if (e.disabled || e.readonly) return;
-      const n = e.modelValue.filter((l) => l !== a);
-      i("update:modelValue", n), i("change", n);
-    }, A = () => {
-      e.disabled || e.readonly || (i("update:modelValue", []), i("change", []));
-    }, F = d(() => {
-      const a = e.rounded === "none" ? "rounded-none" : `rounded-${e.rounded}`, n = e.variant === "transparent" ? "px-2 py-0" : "px-3 py-1.5", l = e.variant === "transparent" ? "h-full min-h-[40px]" : "min-h-[40px]";
+    const h = s(() => k.value.filter((e) => {
+      const l = e.value ?? e.label;
+      return a.modelValue.includes(l);
+    })), P = s(() => h.value.slice(0, a.maxVisible)), O = s(() => h.value.length - a.maxVisible), H = (e) => {
+      if (a.disabled || a.readonly) return;
+      const l = e.value ?? e.label;
+      u.selectedBuffer.value.has(l) || u.selectedBuffer.value.set(l, e);
+      const n = [...a.modelValue], c = n.indexOf(l);
+      c === -1 ? n.push(l) : n.splice(c, 1), i("update:modelValue", n), i("change", n);
+    }, K = (e) => {
+      if (a.disabled || a.readonly) return;
+      const l = a.modelValue.filter((n) => n !== e);
+      i("update:modelValue", l), i("change", l);
+    }, R = () => {
+      a.disabled || a.readonly || (i("update:modelValue", []), i("change", []));
+    }, A = s(() => {
+      const e = a.rounded === "none" ? "rounded-none" : `rounded-${a.rounded}`, l = a.variant === "transparent" ? "px-2 py-0" : "px-3 py-1.5", n = a.variant === "transparent" ? "h-full min-h-[40px]" : "min-h-[40px]";
       return [
-        `flex items-center justify-between w-full ${n} ${l} ${a} border text-sm transition-colors outline-none`,
-        e.disabled ? "opacity-50 cursor-not-allowed bg-muted" : e.readonly ? `cursor-default ${e.variant === "transparent" || e.variant === "floating" ? "bg-transparent text-foreground" : "bg-background"}` : `cursor-pointer ${e.variant === "floating" || e.variant === "transparent" ? "bg-transparent text-foreground" : "bg-background hover:bg-gray-50/70"}`,
-        e.variant === "outline" || e.variant === "floating" ? "border-input focus-visible:ring-1 focus-visible:ring-primary" : e.variant === "transparent" ? "border-transparent" : "border-transparent bg-muted",
-        o.value && e.variant !== "transparent" ? "border-primary/20 ring-1 ring-primary/20" : ""
+        `flex items-center justify-between w-full ${l} ${n} ${e} border text-sm transition-colors outline-none`,
+        a.disabled ? "opacity-50 cursor-not-allowed bg-muted" : a.readonly ? `cursor-default ${a.variant === "transparent" || a.variant === "floating" ? "bg-transparent text-foreground" : "bg-background"}` : `cursor-pointer ${a.variant === "floating" || a.variant === "transparent" ? "bg-transparent text-foreground" : "bg-background hover:bg-gray-50/70"}`,
+        a.variant === "outline" || a.variant === "floating" ? "border-input focus-visible:ring-1 focus-visible:ring-primary" : a.variant === "transparent" ? "border-transparent" : "border-transparent bg-muted",
+        o.value && a.variant !== "transparent" ? "border-primary/20 ring-1 ring-primary/20" : ""
       ].join(" ");
-    }), z = d(() => e.size === "sm" ? "xs" : "sm");
-    return (a, n) => (r(), f(h(q), {
+    }), z = s(() => a.size === "sm" ? "xs" : "sm");
+    return (e, l) => (r(), f(y(W), {
       isOpen: o.value,
-      "onUpdate:isOpen": n[5] || (n[5] = (l) => o.value = l),
+      "onUpdate:isOpen": l[5] || (l[5] = (n) => o.value = n),
       "close-on-select": !1,
       selectable: !0,
+      searchable: !1,
+      remote: !1,
       disabled: t.disabled || t.readonly
     }, {
-      trigger: g(() => [
-        y("div", {
-          class: c(F.value),
+      trigger: d(() => [
+        p("div", {
+          class: m(A.value),
           tabindex: t.disabled || t.readonly ? -1 : 0,
           onKeydown: [
-            n[0] || (n[0] = I(p((l) => !(t.disabled || t.readonly) && (o.value = !o.value), ["prevent"]), ["enter"])),
-            n[1] || (n[1] = I(p((l) => !(t.disabled || t.readonly) && (o.value = !o.value), ["prevent"]), ["space"]))
+            l[0] || (l[0] = I(w((n) => !(t.disabled || t.readonly) && (o.value = !o.value), ["prevent"]), ["enter"])),
+            l[1] || (l[1] = I(w((n) => !(t.disabled || t.readonly) && (o.value = !o.value), ["prevent"]), ["space"]))
           ],
-          "data-testid": a.$attrs["data-testid"] || (a.$attrs.name ? `multiselect-${a.$attrs.name}` : "multiselect")
+          "data-testid": e.$attrs["data-testid"] || (e.$attrs.name ? `multiselect-${e.$attrs.name}` : "multiselect")
         }, [
-          y("div", {
-            class: c(["flex gap-1.5 items-center flex-1 min-w-0", [t.wrap ? "flex-wrap py-0.5" : "flex-nowrap overflow-hidden py-1"]])
+          p("div", {
+            class: m(["flex gap-1.5 items-center flex-1 min-w-0", [t.wrap ? "flex-wrap py-0.5" : "flex-nowrap overflow-hidden py-1"]])
           }, [
-            b.value.length === 0 ? (r(), v("span", W, $(D.value), 1)) : (r(), v(T, { key: 1 }, [
-              (r(!0), v(T, null, R(E.value, (l) => (r(), f(N, {
-                key: l.value,
+            h.value.length === 0 ? (r(), g("span", _, S(D.value), 1)) : (r(), g(T, { key: 1 }, [
+              (r(!0), g(T, null, J(P.value, (n) => (r(), f(L, {
+                key: n.value,
                 variant: t.variant === "transparent" ? "outline" : "secondary",
                 size: z.value,
                 rounded: t.rounded === "none" ? "sm" : "full",
-                class: c(["gap-1 pr-1 truncate min-w-0 shrink", [
+                class: m(["gap-1 pr-1 truncate min-w-0 shrink", [
                   t.wrap ? "max-w-[150px]" : "",
                   t.variant === "transparent" ? "border-transparent bg-muted/50 text-foreground font-medium shadow-none" : ""
                 ]])
               }, {
-                default: g(() => [
-                  y("span", X, $(l.labelI18n ? h(C)(l.labelI18n) : l.label), 1),
-                  t.disabled || t.readonly ? m("", !0) : (r(), v("button", {
+                default: d(() => [
+                  p("span", ee, S(n.labelI18n ? y(C)(n.labelI18n) : n.label), 1),
+                  t.disabled || t.readonly ? v("", !0) : (r(), g("button", {
                     key: 0,
                     type: "button",
-                    onClick: p((u) => K(l.value), ["stop"]),
-                    class: c([
+                    onClick: w((c) => K(n.value), ["stop"]),
+                    class: m([
                       "rounded transition-colors shrink-0 flex items-center justify-center p-px",
                       t.variant === "transparent" ? "text-muted-foreground hover:bg-black/10 hover:text-foreground" : "hover:bg-destructive/10 hover:text-destructive p-0.5 rounded-full"
                     ])
                   }, [
-                    L(S, {
+                    N(M, {
                       icon: "lucide:x",
                       class: "w-3 h-3"
                     })
-                  ], 10, Y))
+                  ], 10, te))
                 ]),
                 _: 2
               }, 1032, ["variant", "size", "rounded", "class"]))), 128)),
-              O.value > 0 ? (r(), f(N, {
+              O.value > 0 ? (r(), f(L, {
                 key: 0,
                 variant: t.variant === "transparent" ? "outline" : "secondary",
                 size: z.value,
                 rounded: t.rounded === "none" ? "sm" : "full",
-                class: c([
+                class: m([
                   "shrink-0",
                   t.variant === "transparent" ? "border-transparent bg-muted/50 text-muted-foreground font-medium shadow-none" : ""
                 ])
               }, {
-                default: g(() => [
-                  U(" +" + $(O.value), 1)
+                default: d(() => [
+                  Q(" +" + S(O.value), 1)
                 ]),
                 _: 1
-              }, 8, ["variant", "size", "rounded", "class"])) : m("", !0)
+              }, 8, ["variant", "size", "rounded", "class"])) : v("", !0)
             ], 64))
           ], 2),
-          t.showControls && !(t.disabled || t.readonly) ? (r(), v("div", Z, [
-            b.value.length > 0 && !(t.disabled || t.readonly) ? (r(), f(S, {
+          t.showControls && !(t.disabled || t.readonly) ? (r(), g("div", ae, [
+            h.value.length > 0 && !(t.disabled || t.readonly) ? (r(), f(M, {
               key: 0,
               icon: "lucide:x",
               class: "w-4 h-4 hover:text-foreground transition-colors",
-              onClick: p(A, ["stop"])
-            })) : m("", !0),
-            n[6] || (n[6] = y("div", { class: "w-px h-4 bg-border mx-0.5" }, null, -1)),
-            L(S, {
+              onClick: w(R, ["stop"])
+            })) : v("", !0),
+            l[6] || (l[6] = p("div", { class: "w-px h-4 bg-border mx-0.5" }, null, -1)),
+            N(M, {
               icon: "lucide:chevron-down",
-              class: c(["w-4 h-4 transition-transform duration-200", { "rotate-180": o.value }])
+              class: m(["w-4 h-4 transition-transform duration-200", { "rotate-180": o.value }])
             }, null, 8, ["class"])
-          ])) : m("", !0)
-        ], 42, Q)
+          ])) : v("", !0)
+        ], 42, Z)
       ]),
-      default: g(() => [
-        t.disabled || t.readonly ? m("", !0) : (r(), f(h(G), {
+      default: d(() => [
+        t.disabled || t.readonly ? v("", !0) : (r(), f(y(X), {
           key: 0,
           options: x.value,
-          cachedOptions: V.value,
+          cachedOptions: k.value,
           selected: t.modelValue,
+          emptyMessage: t.emptyMessage,
+          searchEmptyMessage: t.searchEmptyMessage,
           class: "min-w-[300px]",
-          loading: t.loading || h(s).isHydrating.value,
+          loading: t.loading || y(u).isHydrating.value,
           hasMore: t.hasMore,
           searchable: t.searchable,
           remote: t.remote,
           debounceTime: t.debounceTime,
           layout: t.layout,
           onSelect: H,
-          onClose: n[2] || (n[2] = (l) => o.value = !1),
-          onLoadMore: n[3] || (n[3] = (l) => a.$emit("load-more")),
-          onSearch: n[4] || (n[4] = (l) => a.$emit("search", l))
-        }, null, 8, ["options", "cachedOptions", "selected", "loading", "hasMore", "searchable", "remote", "debounceTime", "layout"]))
+          onClose: l[2] || (l[2] = (n) => o.value = !1),
+          onLoadMore: l[3] || (l[3] = (n) => e.$emit("load-more")),
+          onSearch: l[4] || (l[4] = (n) => e.$emit("search", n))
+        }, U({ _: 2 }, [
+          e.$slots.menu ? {
+            name: "menu",
+            fn: d(() => [
+              b(e.$slots, "menu")
+            ]),
+            key: "0"
+          } : void 0,
+          e.$slots.item ? {
+            name: "item",
+            fn: d((n) => [
+              b(e.$slots, "item", q(G(n)))
+            ]),
+            key: "1"
+          } : void 0,
+          e.$slots.header ? {
+            name: "header",
+            fn: d(() => [
+              b(e.$slots, "header")
+            ]),
+            key: "2"
+          } : void 0,
+          e.$slots.footer ? {
+            name: "footer",
+            fn: d(() => [
+              b(e.$slots, "footer")
+            ]),
+            key: "3"
+          } : void 0
+        ]), 1032, ["options", "cachedOptions", "selected", "emptyMessage", "searchEmptyMessage", "loading", "hasMore", "searchable", "remote", "debounceTime", "layout"]))
       ]),
-      _: 1
+      _: 3
     }, 8, ["isOpen", "disabled"]));
   }
 });
 export {
-  oe as default
+  ue as default
 };

package/components/NavbarCommandPalette.vue.js

@@ -3,7 +3,7 @@ import L from "./Icon.vue.js";
 import v from "./Modal.vue.js";
 import N from "./CommandPalette/CommandPaletteContent.vue.js";
 import { $t as U } from "../utils/i18n.js";
-/* empty css                                       */
+/* empty css                                      */
 const V = { class: "block truncate -text-fs-1.5" }, S = { class: "ml-auto inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded text-[10px] font-mono font-medium border border-border/80 bg-background text-muted-foreground ml-1" }, A = /* @__PURE__ */ x({
   __name: "NavbarCommandPalette",
   props: {

package/components/Skeleton/Skeleton.vue.d.ts

@@ -0,0 +1,30 @@
+import { SkeletonProps } from './types';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        fallback?(_: {}): any;
+        default?(_: {}): any;
+        default?(_: {}): any;
+        fixture?(_: {}): any;
+    };
+    refs: {
+        containerRef: HTMLDivElement;
+        fixtureRef: HTMLDivElement;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<SkeletonProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SkeletonProps> & Readonly<{}>, {
+    animate: import('./types').AnimationStyle;
+    auto: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    containerRef: HTMLDivElement;
+    fixtureRef: HTMLDivElement;
+}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/Skeleton/Skeleton.vue.js

@@ -0,0 +1,215 @@
+import { defineComponent as ue, ref as c, shallowRef as de, computed as a, watch as ce, nextTick as ve, onMounted as me, onUnmounted as fe, openBlock as l, createElementBlock as v, normalizeClass as ye, createElementVNode as H, normalizeStyle as k, renderSlot as M, createCommentVNode as m, Fragment as pe, renderList as ge, isMemoSame as he, setBlockTracking as f, createBlock as L, resolveDynamicComponent as N, withCtx as D, createTextVNode as P, toDisplayString as $, unref as z } from "vue";
+import { normalizeBone as J } from "./types.js";
+import { getRegisteredBones as be, resolveResponsive as ke, getGlobalConfig as $e } from "./shared.js";
+import { snapshotBones as we } from "./extract.js";
+const Be = ["data-boneyard"], Re = { style: { position: "relative", width: "100%", height: "100%" } }, Ce = "rgba(0, 0, 0, 0.03)", Ee = "rgba(255, 255, 255, 0.05)", Se = 0.4, xe = 1, Me = 1, Ae = 0.1, Q = "0, 0, 0", Z = "255, 255, 255", ee = "0.04", te = "0", He = /* @__PURE__ */ ue({
+  __name: "Skeleton",
+  props: {
+    loading: { type: Boolean },
+    name: {},
+    initialBones: {},
+    auto: { type: Boolean, default: !1 },
+    color: {},
+    darkColor: {},
+    animate: { type: [String, Boolean], default: "pulse" },
+    stagger: { type: [Number, Boolean] },
+    transition: { type: [Number, Boolean] },
+    class: {},
+    snapshotConfig: {}
+  },
+  setup(w) {
+    const n = w, s = c(null), A = c(null), y = c(0), B = c(0), p = c(!1), u = Math.random().toString(36).slice(2, 8), O = de(null), g = $e(), ne = a(() => n.animate ?? g.animate ?? "pulse"), h = a(() => {
+      const e = ne.value;
+      return e === !0 ? "pulse" : e === !1 ? "solid" : e;
+    }), G = a(
+      () => p.value ? n.darkColor ?? g.darkColor ?? Ee : n.color ?? g.color ?? Ce
+    ), Y = a(
+      () => O.value ?? n.initialBones ?? (n.name ? be(n.name) : void 0)
+    ), F = a(
+      () => typeof window < "u" ? window.innerWidth : y.value
+    ), r = a(
+      () => Y.value && (F.value > 0 || y.value > 0) ? ke(Y.value, F.value || y.value) : null
+    ), b = a(() => {
+      const e = n.stagger ?? g.stagger;
+      return e === !0 ? 80 : e === !1 || !e ? 0 : e;
+    }), R = a(() => {
+      const e = n.transition ?? g.transition;
+      return e === !0 ? 300 : e === !1 || !e ? 0 : e;
+    }), d = c(!1);
+    let C = null;
+    ce(
+      () => n.loading,
+      (e, t) => {
+        t && !e && R.value > 0 && r.value && (C && clearTimeout(C), d.value = !0, C = setTimeout(() => {
+          d.value = !1, C = null;
+        }, R.value)), e && n.auto && ae();
+      },
+      { immediate: !0 }
+    );
+    const K = a(() => (n.loading || d.value) && !!r.value), oe = a(
+      () => n.loading && !r.value && !d.value && !n.auto
+    ), W = a(
+      () => B.value > 0 ? B.value : r.value?.height ?? 0
+    ), q = a(() => r.value?.height ?? 0), U = a(
+      () => W.value > 0 && q.value > 0 ? W.value / q.value : 1
+    );
+    function ae() {
+      ve(() => {
+        requestAnimationFrame(() => {
+          A.value && (O.value = we(
+            A.value,
+            n.name || "auto-skeleton",
+            n.snapshotConfig
+          ));
+        });
+      });
+    }
+    function _() {
+      if (!(typeof window > "u"))
+        try {
+          p.value = document.documentElement.classList.contains("dark") || !!s.value?.closest(".dark");
+        } catch {
+          p.value = !1;
+        }
+    }
+    function ie(e) {
+      return typeof e == "number" ? `${e}px` : /^[0-9.]+(%|px|em|rem)?(\s+[0-9.]+(%|px|em|rem)?)*(\s*\/\s*[0-9.]+(%|px|em|rem)?(\s+[0-9.]+(%|px|em|rem)?)*)?$/.test(
+        e
+      ) ? e : "0px";
+    }
+    function le(e, t, o) {
+      const i = J(e), V = ie(i.r);
+      return {
+        position: "absolute",
+        left: `${i.x}%`,
+        top: `${i.y * t}px`,
+        width: `${i.w}%`,
+        height: `${i.h * t}px`,
+        borderRadius: V,
+        overflow: "hidden",
+        // Start invisible if staggering, otherwise visible
+        opacity: b.value > 0 ? 0 : 1,
+        animation: b.value > 0 ? `by-${u} 0.3s ease-out ${o * b.value}ms forwards` : "none"
+      };
+    }
+    function re(e, t) {
+      const o = J(e);
+      return {
+        width: "100%",
+        height: "100%",
+        backgroundColor: t,
+        opacity: o.c ? Se : xe,
+        position: "relative"
+      };
+    }
+    function se(e, t) {
+      if (t === "pulse")
+        return {
+          position: "absolute",
+          inset: 0,
+          backgroundColor: `rgba(${e ? Z : Q}, ${ee})`,
+          animation: `bp-${u} 1.8s ease-in-out infinite`
+        };
+      if (t === "shimmer") {
+        const o = e ? Z : Q;
+        return {
+          position: "absolute",
+          inset: 0,
+          background: `linear-gradient(90deg, rgba(${o}, ${te}) 0%, rgba(${o}, ${ee}) 50%, rgba(${o}, ${te}) 100%)`,
+          // Using transform: translateX entirely fixes the ugly snapping at 100%
+          animation: `bs-${u} 2.5s infinite ease-in-out`
+        };
+      }
+      return {};
+    }
+    let I = null, T = null, E = null, S = null;
+    return me(() => {
+      if (_(), s.value) {
+        const e = s.value.getBoundingClientRect();
+        y.value = Math.round(e.width), e.height > 0 && (B.value = Math.round(e.height));
+      }
+      S = window.matchMedia("(prefers-color-scheme: dark)"), E = () => _(), S.addEventListener("change", E), T = new MutationObserver(_), T.observe(document.documentElement, {
+        attributes: !0,
+        attributeFilter: ["class"]
+      }), I = new ResizeObserver((e) => {
+        const t = e[0]?.contentRect;
+        y.value = Math.round(t?.width ?? 0), t && t.height > 0 && (B.value = Math.round(t.height));
+      }), s.value && I.observe(s.value);
+    }), fe(() => {
+      S && E && S.removeEventListener("change", E), T?.disconnect(), I?.disconnect();
+    }), (e, t) => (l(), v("div", {
+      ref_key: "containerRef",
+      ref: s,
+      class: ye(n.class),
+      style: { position: "relative" },
+      "data-boneyard": w.name
+    }, [
+      H("div", {
+        "data-boneyard-content": "true",
+        style: k({ visibility: K.value && !d.value ? "hidden" : void 0 })
+      }, [
+        oe.value ? M(e.$slots, "fallback", { key: 0 }) : M(e.$slots, "default", { key: 1 })
+      ], 4),
+      w.loading && w.auto && !O.value ? (l(), v("div", {
+        key: 0,
+        "data-boneyard-fixture": "",
+        ref_key: "fixtureRef",
+        ref: A,
+        style: { position: "absolute", inset: "0", "z-index": "-1", opacity: "0.001", "pointer-events": "none" },
+        "aria-hidden": "true"
+      }, [
+        M(e.$slots, "fixture", {}, () => [
+          M(e.$slots, "default")
+        ])
+      ], 512)) : m("", !0),
+      K.value && r.value ? (l(), v("div", {
+        key: 1,
+        "data-boneyard-overlay": "true",
+        style: k(`position:absolute;inset:0;overflow:hidden;opacity:${d.value ? 0 : 1};${R.value > 0 ? `transition:opacity ${R.value}ms ease-out;` : ""}pointer-events:none;will-change:opacity;contain:strict;`)
+      }, [
+        H("div", Re, [
+          (l(!0), v(pe, null, ge(r.value.bones, (o, i, V, x) => {
+            const X = [o, U.value, G.value, h.value, p.value, b.value];
+            if (x && x.key === `${i}-${o.x ?? o[0]}` && he(x, X)) return x;
+            const j = (l(), v("div", {
+              key: `${i}-${o.x ?? o[0]}`,
+              "data-boneyard-bone": "true",
+              style: k(le(o, U.value, i))
+            }, [
+              H("div", {
+                style: k(re(o, G.value))
+              }, [
+                h.value !== "solid" ? (l(), v("div", {
+                  key: 0,
+                  style: k(se(p.value, h.value))
+                }, null, 4)) : m("", !0)
+              ], 4)
+            ], 4));
+            return j.memo = X, j;
+          }, t, 0), 128)),
+          t[2] || (f(-1, !0), (t[2] = h.value === "pulse" ? (l(), L(N("style"), { key: 0 }, {
+            default: D(() => [
+              P(" @keyframes bp-" + $(z(u)) + " { 0%, 100% { opacity: " + $(Ae) + "; } 50% { opacity: " + $(Me) + "; } } ", 1)
+            ]),
+            _: 1
+          })) : m("", !0)).cacheIndex = 2, f(1), t[2]),
+          t[3] || (f(-1, !0), (t[3] = h.value === "shimmer" ? (l(), L(N("style"), { key: 1 }, {
+            default: D(() => [
+              P(" @keyframes bs-" + $(z(u)) + " { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } ", 1)
+            ]),
+            _: 1
+          })) : m("", !0)).cacheIndex = 3, f(1), t[3]),
+          t[4] || (f(-1, !0), (t[4] = b.value > 0 ? (l(), L(N("style"), { key: 2 }, {
+            default: D(() => [
+              P(" @keyframes by-" + $(z(u)) + " { from { opacity: 0; } to { opacity: 1; } } ", 1)
+            ]),
+            _: 1
+          })) : m("", !0)).cacheIndex = 4, f(1), t[4])
+        ])
+      ], 4)) : m("", !0)
+    ], 10, Be));
+  }
+});
+export {
+  He as default
+};

package/components/Skeleton/Skeleton.vue2.js

@@ -0,0 +1,4 @@
+import f from "./Skeleton.vue.js";
+export {
+  f as default
+};

package/components/Skeleton/extract.d.ts

@@ -0,0 +1,5 @@
+import { SkeletonResult, SnapshotConfig } from './types';
+/**
+ * Snapshot the exact visual layout of a rendered DOM element as skeleton bones.
+ */
+export declare function snapshotBones(el: Element, name?: string, config?: SnapshotConfig): SkeletonResult;