veilkit 0.0.0-stage → 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +29 -0
- package/LICENSE +21 -0
- package/README.md +245 -2
- package/dist/angular/index.cjs +394 -0
- package/dist/angular/index.cjs.map +1 -0
- package/dist/angular/index.d.cts +78 -0
- package/dist/angular/index.d.ts +78 -0
- package/dist/angular/index.js +394 -0
- package/dist/angular/index.js.map +1 -0
- package/dist/cli/index.cjs +25 -0
- package/dist/cli/index.cjs.map +1 -0
- package/dist/cli/index.d.cts +1 -0
- package/dist/cli/index.d.ts +1 -0
- package/dist/cli/index.js +25 -0
- package/dist/cli/index.js.map +1 -0
- package/dist/controller-5OzP0U8X.d.cts +193 -0
- package/dist/controller-Co5bvnaB.d.ts +193 -0
- package/dist/element/index.cjs +395 -0
- package/dist/element/index.cjs.map +1 -0
- package/dist/element/index.d.cts +42 -0
- package/dist/element/index.d.ts +42 -0
- package/dist/element/index.js +395 -0
- package/dist/element/index.js.map +1 -0
- package/dist/index.cjs +394 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +209 -0
- package/dist/index.d.ts +209 -0
- package/dist/index.js +394 -0
- package/dist/index.js.map +1 -0
- package/dist/native/index.cjs +2 -0
- package/dist/native/index.cjs.map +1 -0
- package/dist/native/index.d.cts +48 -0
- package/dist/native/index.d.ts +48 -0
- package/dist/native/index.js +2 -0
- package/dist/native/index.js.map +1 -0
- package/dist/react/index.cjs +394 -0
- package/dist/react/index.cjs.map +1 -0
- package/dist/react/index.d.cts +99 -0
- package/dist/react/index.d.ts +99 -0
- package/dist/react/index.js +394 -0
- package/dist/react/index.js.map +1 -0
- package/dist/styles.css +377 -0
- package/dist/svelte/index.cjs +394 -0
- package/dist/svelte/index.cjs.map +1 -0
- package/dist/svelte/index.d.cts +41 -0
- package/dist/svelte/index.d.ts +41 -0
- package/dist/svelte/index.js +394 -0
- package/dist/svelte/index.js.map +1 -0
- package/dist/themes/index.cjs +2 -0
- package/dist/themes/index.cjs.map +1 -0
- package/dist/themes/index.d.cts +18 -0
- package/dist/themes/index.d.ts +18 -0
- package/dist/themes/index.js +2 -0
- package/dist/themes/index.js.map +1 -0
- package/dist/types-Ciu5e5xt.d.cts +159 -0
- package/dist/types-Ciu5e5xt.d.ts +159 -0
- package/dist/veilkit.min.js +393 -0
- package/dist/vue/index.cjs +394 -0
- package/dist/vue/index.cjs.map +1 -0
- package/dist/vue/index.d.cts +366 -0
- package/dist/vue/index.d.ts +366 -0
- package/dist/vue/index.js +394 -0
- package/dist/vue/index.js.map +1 -0
- package/package.json +238 -4
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import react__default, { ReactNode, ButtonHTMLAttributes } from 'react';
|
|
3
|
+
import { c as VeilGlobalConfig, V as VeilThemeName, C as CustomThemeInput, a as VeilAnimationName, S as SkeletonProps, A as AutoMeasureOptions, f as PresetProps, b as SpinnerProps, P as ProgressProps, O as OverlayProps, L as LoadingButtonProps, h as LazyImageProps } from '../types-Ciu5e5xt.js';
|
|
4
|
+
|
|
5
|
+
interface VeilContextValue extends VeilGlobalConfig {
|
|
6
|
+
theme?: VeilThemeName | CustomThemeInput;
|
|
7
|
+
animation?: VeilAnimationName;
|
|
8
|
+
}
|
|
9
|
+
interface VeilProviderProps extends VeilGlobalConfig {
|
|
10
|
+
children?: ReactNode;
|
|
11
|
+
}
|
|
12
|
+
declare function VeilProvider({ children, theme, animation, nonce, locale, labels, antiFlicker, }: VeilProviderProps): react.JSX.Element;
|
|
13
|
+
declare function useVeil(): VeilContextValue;
|
|
14
|
+
|
|
15
|
+
interface UseDelayedLoadingOptions {
|
|
16
|
+
delay?: number;
|
|
17
|
+
minVisible?: number;
|
|
18
|
+
}
|
|
19
|
+
/**
|
|
20
|
+
* Suppresses loading state if brief (delay) and prevents rapid flickering (minVisible)
|
|
21
|
+
*/
|
|
22
|
+
declare function useDelayedLoading(loading: boolean, options?: UseDelayedLoadingOptions): boolean;
|
|
23
|
+
/**
|
|
24
|
+
* Tracks promise execution and returns state + execute trigger
|
|
25
|
+
*/
|
|
26
|
+
declare function useLoading<T, Args extends any[]>(asyncFn: (...args: Args) => Promise<T>, options?: UseDelayedLoadingOptions): {
|
|
27
|
+
loading: boolean;
|
|
28
|
+
rawLoading: boolean;
|
|
29
|
+
data: T | null;
|
|
30
|
+
error: Error | null;
|
|
31
|
+
execute: (...args: Args) => Promise<T>;
|
|
32
|
+
};
|
|
33
|
+
/**
|
|
34
|
+
* Controls top progress bar from React
|
|
35
|
+
*/
|
|
36
|
+
declare function useProgress(): {
|
|
37
|
+
start: () => void;
|
|
38
|
+
set: (n: number) => void;
|
|
39
|
+
inc: (amount?: number) => void;
|
|
40
|
+
done: () => void;
|
|
41
|
+
fail: () => void;
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
interface ReactSkeletonProps extends SkeletonProps {
|
|
45
|
+
children?: ReactNode;
|
|
46
|
+
circle?: boolean;
|
|
47
|
+
}
|
|
48
|
+
declare function Skeleton({ type, circle, width, height, radius, count, gap, lines, lastLineWidth, animation, theme, direction, speed, className, style, ariaLabel, children, }: ReactSkeletonProps): react.JSX.Element;
|
|
49
|
+
interface VeilWrapperProps extends AutoMeasureOptions {
|
|
50
|
+
loading: boolean;
|
|
51
|
+
children: ReactNode;
|
|
52
|
+
skeletonProps?: SkeletonProps;
|
|
53
|
+
}
|
|
54
|
+
/**
|
|
55
|
+
* Auto-Measure wrapper component
|
|
56
|
+
* Wraps real content, measures layout upon loading, and reveals cleanly with no hydration mismatches
|
|
57
|
+
*/
|
|
58
|
+
declare function Veil({ loading, children, cacheKey, persistCache, ignoreSelector, observeResize, observeMutations, preserveBackground, reveal, revealDuration, revealEasing, delay, minVisible, skeletonProps, }: VeilWrapperProps): react.JSX.Element;
|
|
59
|
+
|
|
60
|
+
declare function SkeletonPreset(props: PresetProps): react.JSX.Element;
|
|
61
|
+
declare const SkeletonCard: (props: Omit<PresetProps, "name">) => react.JSX.Element;
|
|
62
|
+
declare const SkeletonProductCard: (props: Omit<PresetProps, "name">) => react.JSX.Element;
|
|
63
|
+
declare const SkeletonProductGrid: (props: Omit<PresetProps, "name">) => react.JSX.Element;
|
|
64
|
+
declare const SkeletonList: (props: Omit<PresetProps, "name">) => react.JSX.Element;
|
|
65
|
+
declare const SkeletonListItem: (props: Omit<PresetProps, "name">) => react.JSX.Element;
|
|
66
|
+
declare const SkeletonTable: (props: Omit<PresetProps, "name">) => react.JSX.Element;
|
|
67
|
+
declare const SkeletonProfile: (props: Omit<PresetProps, "name">) => react.JSX.Element;
|
|
68
|
+
declare const SkeletonFeedPost: (props: Omit<PresetProps, "name">) => react.JSX.Element;
|
|
69
|
+
declare const SkeletonArticle: (props: Omit<PresetProps, "name">) => react.JSX.Element;
|
|
70
|
+
declare const SkeletonDashboard: (props: Omit<PresetProps, "name">) => react.JSX.Element;
|
|
71
|
+
declare const SkeletonForm: (props: Omit<PresetProps, "name">) => react.JSX.Element;
|
|
72
|
+
declare const SkeletonNavbar: (props: Omit<PresetProps, "name">) => react.JSX.Element;
|
|
73
|
+
declare const SkeletonSidebar: (props: Omit<PresetProps, "name">) => react.JSX.Element;
|
|
74
|
+
|
|
75
|
+
declare function Spinner(props: SpinnerProps): react.JSX.Element;
|
|
76
|
+
|
|
77
|
+
declare function ProgressBar(props: ProgressProps): react.JSX.Element;
|
|
78
|
+
interface RouteProgressProps {
|
|
79
|
+
color?: string;
|
|
80
|
+
}
|
|
81
|
+
/**
|
|
82
|
+
* Route Progress Bar for Next.js and React SPA routers
|
|
83
|
+
*/
|
|
84
|
+
declare function RouteProgress({ color }: RouteProgressProps): null;
|
|
85
|
+
|
|
86
|
+
interface ReactOverlayProps extends OverlayProps {
|
|
87
|
+
children?: react__default.ReactNode;
|
|
88
|
+
}
|
|
89
|
+
declare function Overlay({ visible, blur, opacity, color, spinner, message, lockScroll, className, zIndex, children, }: ReactOverlayProps): react__default.JSX.Element;
|
|
90
|
+
|
|
91
|
+
interface ReactLoadingButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'>, LoadingButtonProps {
|
|
92
|
+
children?: ReactNode;
|
|
93
|
+
onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
|
|
94
|
+
}
|
|
95
|
+
declare function LoadingButton({ loading, spinner, spinnerPlacement, loadingText, disabled, children, className, onClick, ...rest }: ReactLoadingButtonProps): react.JSX.Element;
|
|
96
|
+
|
|
97
|
+
declare function LazyImage(props: LazyImageProps): react.JSX.Element;
|
|
98
|
+
|
|
99
|
+
export { LazyImage, LoadingButton, Overlay, ProgressBar, type ReactLoadingButtonProps, type ReactOverlayProps, type ReactSkeletonProps, RouteProgress, type RouteProgressProps, Skeleton, SkeletonArticle, SkeletonCard, SkeletonDashboard, SkeletonFeedPost, SkeletonForm, SkeletonList, SkeletonListItem, SkeletonNavbar, SkeletonPreset, SkeletonProductCard, SkeletonProductGrid, SkeletonProfile, SkeletonSidebar, SkeletonTable, Spinner, type UseDelayedLoadingOptions, Veil, VeilProvider, type VeilProviderProps, type VeilWrapperProps, useDelayedLoading, useLoading, useProgress, useVeil };
|
|
@@ -0,0 +1,394 @@
|
|
|
1
|
+
import {createContext,useEffect,useMemo,useContext,useState,useCallback,useRef}from'react';import {jsx,jsxs}from'react/jsx-runtime';var N={light:{base:"#e5e7eb",highlight:"rgba(255, 255, 255, 0.7)",radius:"6px",duration:"1.5s",easing:"cubic-bezier(0.4, 0, 0.2, 1)",border:"none",contrast:"#374151"},dark:{base:"#1f2937",highlight:"rgba(255, 255, 255, 0.12)",radius:"6px",duration:"1.5s",easing:"cubic-bezier(0.4, 0, 0.2, 1)",border:"none",contrast:"#f3f4f6"},auto:{base:"var(--veil-auto-base, #e5e7eb)",highlight:"var(--veil-auto-highlight, rgba(255, 255, 255, 0.7))",radius:"6px",duration:"1.5s",easing:"cubic-bezier(0.4, 0, 0.2, 1)",border:"none",contrast:"var(--veil-auto-contrast, #374151)"},glass:{base:"rgba(255, 255, 255, 0.08)",highlight:"rgba(255, 255, 255, 0.25)",radius:"12px",duration:"1.8s",easing:"cubic-bezier(0.25, 1, 0.5, 1)",blur:"12px",border:"1px solid rgba(255, 255, 255, 0.15)",glow:"inset 0 1px 1px 0 rgba(255, 255, 255, 0.25), 0 4px 16px 0 rgba(0, 0, 0, 0.12)",contrast:"#ffffff"},ios:{base:"rgba(120, 120, 128, 0.18)",highlight:"rgba(255, 255, 255, 0.45)",radius:"10px",duration:"1.4s",easing:"cubic-bezier(0.32, 0.72, 0, 1)",border:"none",contrast:"#1c1c1e"},material:{base:"#e7e0ec",highlight:"#f7f2fa",radius:"12px",duration:"1.6s",easing:"cubic-bezier(0.2, 0, 0, 1)",border:"none",contrast:"#1d1b20"},minimal:{base:"#f1f3f5",highlight:"#ffffff",radius:"4px",duration:"1.4s",easing:"ease-in-out",border:"none",contrast:"#212529"},mono:{base:"#e0e0e0",highlight:"#ffffff",radius:"0px",duration:"1.2s",easing:"linear",border:"1px solid #cccccc",contrast:"#000000"},neon:{base:"#0c0b16",highlight:"rgba(0, 240, 255, 0.5)",radius:"8px",duration:"1.6s",easing:"cubic-bezier(0.4, 0, 0.2, 1)",border:"1px solid rgba(0, 240, 255, 0.3)",glow:"0 0 12px rgba(0, 240, 255, 0.35)",contrast:"#00f0ff"},sunset:{base:"#fed7aa",highlight:"#fff7ed",radius:"8px",duration:"1.7s",easing:"cubic-bezier(0.4, 0, 0.2, 1)",border:"none",glow:"0 0 8px rgba(251, 146, 60, 0.25)",contrast:"#7c2d12"},ocean:{base:"#0f2937",highlight:"rgba(56, 189, 248, 0.45)",radius:"8px",duration:"1.7s",easing:"cubic-bezier(0.4, 0, 0.2, 1)",border:"1px solid rgba(56, 189, 248, 0.2)",glow:"0 0 10px rgba(56, 189, 248, 0.25)",contrast:"#38bdf8"}};function Q(){return ["@keyframes veil-shimmer-ltr{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}","@keyframes veil-shimmer-rtl{0%{transform:translateX(100%)}100%{transform:translateX(-100%)}}","@keyframes veil-shimmer-ttb{0%{transform:translateY(-100%)}100%{transform:translateY(100%)}}","@keyframes veil-shimmer-btt{0%{transform:translateY(100%)}100%{transform:translateY(-100%)}}","@keyframes veil-wave{0%{transform:translateX(-120%) scaleX(0.8);opacity:0.3}50%{opacity:0.95}100%{transform:translateX(120%) scaleX(1.2);opacity:0.3}}","@keyframes veil-pulse{0%,100%{opacity:1}50%{opacity:0.38}}","@keyframes veil-blink{0%,49%{opacity:1}50%,99%{opacity:0.2}100%{opacity:1}}","@keyframes veil-breathe{0%,100%{opacity:0.65;transform:scale(0.995)}50%{opacity:1;transform:scale(1.005)}}","@keyframes veil-glass-shine{0%{transform:translate3d(-150%,-150%,0) rotate(35deg);opacity:0.1}40%,60%{opacity:0.85}100%{transform:translate3d(200%,200%,0) rotate(35deg);opacity:0.1}}","@keyframes veil-gradient-flow{0%{transform:translateX(-66.6%)}100%{transform:translateX(0%)}}","@keyframes veil-aurora{0%{transform:translate3d(-20%,-15%,0) rotate(0deg) scale(1);opacity:0.5}50%{transform:translate3d(25%,20%,0) rotate(180deg) scale(1.25);opacity:0.85}100%{transform:translate3d(-20%,-15%,0) rotate(360deg) scale(1);opacity:0.5}}","@keyframes veil-scan-line{0%{transform:translateY(-100%);opacity:0.2}50%{opacity:1}100%{transform:translateY(300%);opacity:0.2}}","@keyframes veil-sparkle{0%,100%{opacity:0.2;transform:scale(0.98)}25%{opacity:0.8;transform:scale(1.02)}50%{opacity:0.3;transform:scale(0.99)}75%{opacity:0.95;transform:scale(1.01)}}","@keyframes veil-neon-glow{0%,100%{opacity:0.45;transform:scale(0.998)}50%{opacity:1;transform:scale(1.002)}}",'[data-veil-anim="stagger"]>*{animation-delay:calc(var(--veil-stagger-idx,0)*120ms)!important}'].join("")}var ee=false,te;function ie(t){te=t;}function Ee(){let t=N.light,e=N.dark;return `
|
|
2
|
+
/* === VEILKIT CORE STYLES === */
|
|
3
|
+
:root {
|
|
4
|
+
--veil-base: ${t.base};
|
|
5
|
+
--veil-highlight: ${t.highlight};
|
|
6
|
+
--veil-radius: ${t.radius};
|
|
7
|
+
--veil-duration: ${t.duration};
|
|
8
|
+
--veil-easing: ${t.easing};
|
|
9
|
+
--veil-direction: ltr;
|
|
10
|
+
--veil-border: none;
|
|
11
|
+
--veil-blur: none;
|
|
12
|
+
--veil-glow: none;
|
|
13
|
+
--veil-contrast: ${t.contrast};
|
|
14
|
+
|
|
15
|
+
--veil-auto-base: ${t.base};
|
|
16
|
+
--veil-auto-highlight: ${t.highlight};
|
|
17
|
+
--veil-auto-contrast: ${t.contrast};
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
@media (prefers-color-scheme: dark) {
|
|
21
|
+
:root {
|
|
22
|
+
--veil-auto-base: ${e.base};
|
|
23
|
+
--veil-auto-highlight: ${e.highlight};
|
|
24
|
+
--veil-auto-contrast: ${e.contrast};
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
/* === DARK THEME SELECTORS === */
|
|
29
|
+
[data-theme="dark"], .dark, [data-theme="dark"] .veil-skeleton {
|
|
30
|
+
--veil-base: ${e.base};
|
|
31
|
+
--veil-highlight: ${e.highlight};
|
|
32
|
+
--veil-contrast: ${e.contrast};
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
/* === THEME ATTRIBUTE CLASSES === */
|
|
36
|
+
${Object.entries(N).map(([i,r])=>`[data-veil-theme="${i}"]{--veil-base:${r.base};--veil-highlight:${r.highlight};--veil-radius:${r.radius};--veil-duration:${r.duration};--veil-easing:${r.easing};${r.border?`--veil-border:${r.border};`:""}${r.blur?`--veil-blur:${r.blur};`:""}${r.glow?`--veil-glow:${r.glow};`:""}--veil-contrast:${r.contrast};}`).join("")}
|
|
37
|
+
|
|
38
|
+
/* === BASE SKELETON ELEMENT === */
|
|
39
|
+
.veil-skeleton {
|
|
40
|
+
position: relative;
|
|
41
|
+
display: block;
|
|
42
|
+
box-sizing: border-box;
|
|
43
|
+
background-color: var(--veil-base, #e5e7eb);
|
|
44
|
+
border-radius: var(--veil-radius, 6px);
|
|
45
|
+
border: var(--veil-border, none);
|
|
46
|
+
box-shadow: var(--veil-glow, none);
|
|
47
|
+
overflow: hidden;
|
|
48
|
+
pointer-events: none;
|
|
49
|
+
user-select: none;
|
|
50
|
+
min-height: 12px;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
[data-veil-theme="glass"] .veil-skeleton,
|
|
54
|
+
.veil-skeleton[data-veil-theme="glass"] {
|
|
55
|
+
backdrop-filter: blur(var(--veil-blur, 12px));
|
|
56
|
+
-webkit-backdrop-filter: blur(var(--veil-blur, 12px));
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
/* === SHIMMER / ANIMATION OVERLAY === */
|
|
60
|
+
.veil-skeleton::after {
|
|
61
|
+
content: "";
|
|
62
|
+
position: absolute;
|
|
63
|
+
top: 0;
|
|
64
|
+
left: 0;
|
|
65
|
+
right: 0;
|
|
66
|
+
bottom: 0;
|
|
67
|
+
pointer-events: none;
|
|
68
|
+
will-change: transform, opacity;
|
|
69
|
+
background: linear-gradient(
|
|
70
|
+
90deg,
|
|
71
|
+
transparent 0%,
|
|
72
|
+
var(--veil-highlight, rgba(255, 255, 255, 0.7)) 50%,
|
|
73
|
+
transparent 100%
|
|
74
|
+
);
|
|
75
|
+
animation-duration: var(--veil-duration, 1.5s);
|
|
76
|
+
animation-timing-function: var(--veil-easing, cubic-bezier(0.4, 0, 0.2, 1));
|
|
77
|
+
animation-iteration-count: infinite;
|
|
78
|
+
animation-delay: var(--veil-sync-delay, 0s);
|
|
79
|
+
animation-play-state: var(--veil-play-state, running);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
/* Animation name mapping */
|
|
83
|
+
.veil-skeleton[data-veil-anim="shimmer"]::after,
|
|
84
|
+
.veil-skeleton:not([data-veil-anim])::after {
|
|
85
|
+
animation-name: veil-shimmer-ltr;
|
|
86
|
+
}
|
|
87
|
+
.veil-skeleton[data-veil-dir="rtl"]::after,
|
|
88
|
+
[dir="rtl"] .veil-skeleton[data-veil-anim="shimmer"]::after {
|
|
89
|
+
animation-name: veil-shimmer-rtl;
|
|
90
|
+
}
|
|
91
|
+
.veil-skeleton[data-veil-dir="ttb"]::after {
|
|
92
|
+
animation-name: veil-shimmer-ttb;
|
|
93
|
+
background: linear-gradient(180deg, transparent 0%, var(--veil-highlight, rgba(255,255,255,0.7)) 50%, transparent 100%);
|
|
94
|
+
}
|
|
95
|
+
.veil-skeleton[data-veil-dir="btt"]::after {
|
|
96
|
+
animation-name: veil-shimmer-btt;
|
|
97
|
+
background: linear-gradient(0deg, transparent 0%, var(--veil-highlight, rgba(255,255,255,0.7)) 50%, transparent 100%);
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.veil-skeleton[data-veil-anim="wave"]::after {
|
|
101
|
+
animation-name: veil-wave;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.veil-skeleton[data-veil-anim="pulse"]::after {
|
|
105
|
+
background: none;
|
|
106
|
+
}
|
|
107
|
+
.veil-skeleton[data-veil-anim="pulse"] {
|
|
108
|
+
animation: veil-pulse var(--veil-duration, 1.5s) var(--veil-easing, ease-in-out) infinite;
|
|
109
|
+
animation-delay: var(--veil-sync-delay, 0s);
|
|
110
|
+
animation-play-state: var(--veil-play-state, running);
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.veil-skeleton[data-veil-anim="blink"]::after {
|
|
114
|
+
background: none;
|
|
115
|
+
}
|
|
116
|
+
.veil-skeleton[data-veil-anim="blink"] {
|
|
117
|
+
animation: veil-blink var(--veil-duration, 1.2s) steps(2, start) infinite;
|
|
118
|
+
animation-delay: var(--veil-sync-delay, 0s);
|
|
119
|
+
animation-play-state: var(--veil-play-state, running);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.veil-skeleton[data-veil-anim="breathe"]::after {
|
|
123
|
+
background: none;
|
|
124
|
+
}
|
|
125
|
+
.veil-skeleton[data-veil-anim="breathe"] {
|
|
126
|
+
animation: veil-breathe var(--veil-duration, 2.2s) var(--veil-easing, ease-in-out) infinite;
|
|
127
|
+
animation-delay: var(--veil-sync-delay, 0s);
|
|
128
|
+
animation-play-state: var(--veil-play-state, running);
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.veil-skeleton[data-veil-anim="glass-shine"]::after {
|
|
132
|
+
animation-name: veil-glass-shine;
|
|
133
|
+
background: linear-gradient(
|
|
134
|
+
115deg,
|
|
135
|
+
transparent 20%,
|
|
136
|
+
var(--veil-highlight, rgba(255, 255, 255, 0.4)) 50%,
|
|
137
|
+
transparent 80%
|
|
138
|
+
);
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.veil-skeleton[data-veil-anim="gradient-flow"]::after {
|
|
142
|
+
width: 300%;
|
|
143
|
+
animation-name: veil-gradient-flow;
|
|
144
|
+
background: linear-gradient(
|
|
145
|
+
90deg,
|
|
146
|
+
var(--veil-base, #e5e7eb) 0%,
|
|
147
|
+
var(--veil-highlight, rgba(255, 255, 255, 0.8)) 30%,
|
|
148
|
+
var(--veil-base, #e5e7eb) 60%,
|
|
149
|
+
var(--veil-highlight, rgba(255, 255, 255, 0.8)) 100%
|
|
150
|
+
);
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.veil-skeleton[data-veil-anim="aurora"]::after {
|
|
154
|
+
width: 160%;
|
|
155
|
+
height: 160%;
|
|
156
|
+
animation-name: veil-aurora;
|
|
157
|
+
background: radial-gradient(
|
|
158
|
+
circle at 50% 50%,
|
|
159
|
+
rgba(56, 189, 248, 0.3) 0%,
|
|
160
|
+
rgba(168, 85, 247, 0.25) 45%,
|
|
161
|
+
rgba(236, 72, 153, 0.2) 75%,
|
|
162
|
+
transparent 100%
|
|
163
|
+
);
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.veil-skeleton[data-veil-anim="scan-line"]::after {
|
|
167
|
+
height: 30%;
|
|
168
|
+
animation-name: veil-scan-line;
|
|
169
|
+
background: linear-gradient(180deg, transparent, var(--veil-highlight, rgba(0, 240, 255, 0.8)), transparent);
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
.veil-skeleton[data-veil-anim="sparkle"]::after {
|
|
173
|
+
animation-name: veil-sparkle;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.veil-skeleton[data-veil-anim="neon-glow"] {
|
|
177
|
+
animation: veil-neon-glow var(--veil-duration, 1.6s) ease-in-out infinite;
|
|
178
|
+
animation-delay: var(--veil-sync-delay, 0s);
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
.veil-skeleton[data-veil-anim="none"]::after {
|
|
182
|
+
display: none !important;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
/* === PRIMITIVE VARIANTS === */
|
|
186
|
+
.veil-skeleton[data-veil-shape="line"] {
|
|
187
|
+
height: 1em;
|
|
188
|
+
margin: 0.35em 0;
|
|
189
|
+
border-radius: var(--veil-radius, 4px);
|
|
190
|
+
}
|
|
191
|
+
.veil-skeleton[data-veil-shape="circle"] {
|
|
192
|
+
border-radius: 50% !important;
|
|
193
|
+
aspect-ratio: 1 / 1;
|
|
194
|
+
}
|
|
195
|
+
.veil-skeleton[data-veil-shape="heading"] {
|
|
196
|
+
height: 1.8em;
|
|
197
|
+
margin: 0.5em 0;
|
|
198
|
+
border-radius: var(--veil-radius, 6px);
|
|
199
|
+
}
|
|
200
|
+
.veil-skeleton[data-veil-shape="button"] {
|
|
201
|
+
height: 2.5rem;
|
|
202
|
+
border-radius: var(--veil-radius, 8px);
|
|
203
|
+
}
|
|
204
|
+
.veil-skeleton[data-veil-shape="badge"] {
|
|
205
|
+
height: 1.35rem;
|
|
206
|
+
border-radius: 9999px;
|
|
207
|
+
display: inline-block;
|
|
208
|
+
}
|
|
209
|
+
.veil-skeleton[data-veil-shape="icon"] {
|
|
210
|
+
width: 1.5rem;
|
|
211
|
+
height: 1.5rem;
|
|
212
|
+
border-radius: var(--veil-radius, 6px);
|
|
213
|
+
display: inline-block;
|
|
214
|
+
}
|
|
215
|
+
.veil-skeleton[data-veil-shape="input"] {
|
|
216
|
+
height: 2.6rem;
|
|
217
|
+
border-radius: var(--veil-radius, 8px);
|
|
218
|
+
}
|
|
219
|
+
.veil-skeleton[data-veil-shape="divider"] {
|
|
220
|
+
height: 1px;
|
|
221
|
+
width: 100%;
|
|
222
|
+
margin: 1rem 0;
|
|
223
|
+
min-height: 1px;
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
/* Natural randomized last-line widths */
|
|
227
|
+
.veil-lines-group > .veil-skeleton:last-child {
|
|
228
|
+
width: var(--veil-last-width, 68%);
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
/* === ACCESSIBILITY === */
|
|
232
|
+
.veil-sr-only {
|
|
233
|
+
position: absolute !important;
|
|
234
|
+
width: 1px !important;
|
|
235
|
+
height: 1px !important;
|
|
236
|
+
padding: 0 !important;
|
|
237
|
+
margin: -1px !important;
|
|
238
|
+
overflow: hidden !important;
|
|
239
|
+
clip: rect(0, 0, 0, 0) !important;
|
|
240
|
+
white-space: nowrap !important;
|
|
241
|
+
border-width: 0 !important;
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
/* prefers-reduced-motion */
|
|
245
|
+
@media (prefers-reduced-motion: reduce) {
|
|
246
|
+
.veil-skeleton::after {
|
|
247
|
+
animation: none !important;
|
|
248
|
+
display: none !important;
|
|
249
|
+
}
|
|
250
|
+
.veil-skeleton {
|
|
251
|
+
animation: veil-pulse 3s ease-in-out infinite !important;
|
|
252
|
+
transform: none !important;
|
|
253
|
+
}
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
/* forced-colors */
|
|
257
|
+
@media (forced-colors: active) {
|
|
258
|
+
.veil-skeleton {
|
|
259
|
+
forced-color-adjust: none;
|
|
260
|
+
background-color: ButtonFace !important;
|
|
261
|
+
outline: 1px solid Highlight !important;
|
|
262
|
+
}
|
|
263
|
+
.veil-skeleton::after {
|
|
264
|
+
display: none !important;
|
|
265
|
+
}
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
/* Offscreen & Tab Hidden Pausing */
|
|
269
|
+
[data-veil-tab-hidden="true"] .veil-skeleton,
|
|
270
|
+
[data-veil-tab-hidden="true"] .veil-skeleton::after,
|
|
271
|
+
[data-veil-offscreen="true"],
|
|
272
|
+
[data-veil-offscreen="true"]::after {
|
|
273
|
+
animation-play-state: paused !important;
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
/* === REVEAL TRANSITIONS === */
|
|
277
|
+
.veil-revealing {
|
|
278
|
+
position: relative;
|
|
279
|
+
}
|
|
280
|
+
.veil-reveal-fade {
|
|
281
|
+
animation: veil-reveal-fade 350ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
|
282
|
+
}
|
|
283
|
+
.veil-reveal-blur-in {
|
|
284
|
+
animation: veil-reveal-blur 400ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
|
285
|
+
}
|
|
286
|
+
.veil-reveal-slide-up {
|
|
287
|
+
animation: veil-reveal-slide 400ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
|
288
|
+
}
|
|
289
|
+
.veil-reveal-scale {
|
|
290
|
+
animation: veil-reveal-scale 350ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
@keyframes veil-reveal-fade {
|
|
294
|
+
0% { opacity: 0; }
|
|
295
|
+
100% { opacity: 1; }
|
|
296
|
+
}
|
|
297
|
+
@keyframes veil-reveal-blur {
|
|
298
|
+
0% { opacity: 0; filter: blur(8px); }
|
|
299
|
+
100% { opacity: 1; filter: blur(0px); }
|
|
300
|
+
}
|
|
301
|
+
@keyframes veil-reveal-slide {
|
|
302
|
+
0% { opacity: 0; transform: translateY(12px); }
|
|
303
|
+
100% { opacity: 1; transform: translateY(0); }
|
|
304
|
+
}
|
|
305
|
+
@keyframes veil-reveal-scale {
|
|
306
|
+
0% { opacity: 0; transform: scale(0.96); }
|
|
307
|
+
100% { opacity: 1; transform: scale(1); }
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
/* === SPINNERS, PROGRESS, OVERLAY, BUTTON, LAZY IMAGE === */
|
|
311
|
+
.veil-spinner {
|
|
312
|
+
display: inline-block;
|
|
313
|
+
box-sizing: border-box;
|
|
314
|
+
vertical-align: middle;
|
|
315
|
+
}
|
|
316
|
+
.veil-overlay {
|
|
317
|
+
position: absolute;
|
|
318
|
+
inset: 0;
|
|
319
|
+
display: flex;
|
|
320
|
+
flex-direction: column;
|
|
321
|
+
align-items: center;
|
|
322
|
+
justify-content: center;
|
|
323
|
+
gap: 12px;
|
|
324
|
+
background-color: var(--veil-overlay-bg, rgba(255, 255, 255, 0.75));
|
|
325
|
+
backdrop-filter: blur(var(--veil-overlay-blur, 6px));
|
|
326
|
+
-webkit-backdrop-filter: blur(var(--veil-overlay-blur, 6px));
|
|
327
|
+
z-index: 100;
|
|
328
|
+
transition: opacity 250ms ease;
|
|
329
|
+
}
|
|
330
|
+
.veil-overlay-fullscreen {
|
|
331
|
+
position: fixed !important;
|
|
332
|
+
z-index: 999999 !important;
|
|
333
|
+
}
|
|
334
|
+
.veil-progress-bar {
|
|
335
|
+
position: fixed;
|
|
336
|
+
top: 0;
|
|
337
|
+
left: 0;
|
|
338
|
+
right: 0;
|
|
339
|
+
height: 3px;
|
|
340
|
+
z-index: 999999;
|
|
341
|
+
background: transparent;
|
|
342
|
+
pointer-events: none;
|
|
343
|
+
}
|
|
344
|
+
.veil-progress-inner {
|
|
345
|
+
height: 100%;
|
|
346
|
+
background: var(--veil-progress-color, #3b82f6);
|
|
347
|
+
box-shadow: 0 0 10px var(--veil-progress-color, #3b82f6), 0 0 5px var(--veil-progress-color, #3b82f6);
|
|
348
|
+
transition: width 200ms ease, opacity 350ms ease;
|
|
349
|
+
}
|
|
350
|
+
.veil-btn-loading {
|
|
351
|
+
position: relative;
|
|
352
|
+
pointer-events: none;
|
|
353
|
+
cursor: default;
|
|
354
|
+
}
|
|
355
|
+
.veil-btn-spinner-wrap {
|
|
356
|
+
display: inline-flex;
|
|
357
|
+
align-items: center;
|
|
358
|
+
justify-content: center;
|
|
359
|
+
margin-right: 8px;
|
|
360
|
+
}
|
|
361
|
+
.veil-lazy-img-wrap {
|
|
362
|
+
position: relative;
|
|
363
|
+
overflow: hidden;
|
|
364
|
+
display: inline-block;
|
|
365
|
+
}
|
|
366
|
+
.veil-lazy-img {
|
|
367
|
+
transition: opacity 350ms ease, filter 350ms ease;
|
|
368
|
+
}
|
|
369
|
+
.veil-lazy-img-loading {
|
|
370
|
+
opacity: 0;
|
|
371
|
+
filter: blur(10px);
|
|
372
|
+
}
|
|
373
|
+
.veil-lazy-img-loaded {
|
|
374
|
+
opacity: 1;
|
|
375
|
+
filter: blur(0px);
|
|
376
|
+
}
|
|
377
|
+
|
|
378
|
+
${Q()}
|
|
379
|
+
`}function h(t){if(ee||typeof document>"u")return;ee=true;let e=Ee(),i=t||te;if(typeof document.adoptedStyleSheets<"u"&&typeof CSSStyleSheet<"u"&&"replaceSync"in CSSStyleSheet.prototype&&!i)try{let s=new CSSStyleSheet;s.replaceSync(e),document.adoptedStyleSheets=[...document.adoptedStyleSheets,s];return}catch{}let r=document.createElement("style");r.id="veilkit-styles",i&&r.setAttribute("nonce",i),r.textContent=e,document.head.appendChild(r);}var Y={en:{loading:"Loading content, please wait\u2026",loaded:"Content loaded.",progress:"Loading progress",busy:"Busy"},es:{loading:"Cargando contenido, por favor espere\u2026",loaded:"Contenido cargado.",progress:"Progreso de carga",busy:"Ocupado"},fr:{loading:"Chargement du contenu, veuillez patienter\u2026",loaded:"Contenu charg\xE9.",progress:"Progression du chargement",busy:"Occup\xE9"},de:{loading:"Inhalt wird geladen, bitte warten\u2026",loaded:"Inhalt geladen.",progress:"Ladefortschritt",busy:"Besch\xE4ftigt"},ja:{loading:"\u30B3\u30F3\u30C6\u30F3\u30C4\u3092\u8AAD\u307F\u8FBC\u3093\u3067\u3044\u307E\u3059\u2026",loaded:"\u8AAD\u307F\u8FBC\u307F\u304C\u5B8C\u4E86\u3057\u307E\u3057\u305F\u3002",progress:"\u8AAD\u307F\u8FBC\u307F\u72B6\u6CC1",busy:"\u51E6\u7406\u4E2D"},zh:{loading:"\u6B63\u5728\u52A0\u8F7D\u5185\u5BB9\uFF0C\u8BF7\u7A0D\u5019\u2026",loaded:"\u5185\u5BB9\u52A0\u8F7D\u5B8C\u6210\u3002",progress:"\u52A0\u8F7D\u8FDB\u5EA6",busy:"\u5FD9\u788C\u4E2D"},ar:{loading:"\u062C\u0627\u0631\u064A \u062A\u062D\u0645\u064A\u0644 \u0627\u0644\u0645\u062D\u062A\u0648\u0649\u060C \u064A\u0631\u062C\u0649 \u0627\u0644\u0627\u0646\u062A\u0638\u0627\u0631\u2026",loaded:"\u062A\u0645 \u062A\u062D\u0645\u064A\u0644 \u0627\u0644\u0645\u062D\u062A\u0648\u0649.",progress:"\u062A\u0642\u062F\u0645 \u0627\u0644\u062A\u062D\u0645\u064A\u0644",busy:"\u0645\u0634\u063A\u0648\u0644"}},ne="en",W={};function re(t){ne=t;}function ae(t){Object.assign(W,t);}function Le(t){return W[t]?W[t]:(Y[ne]||Y.en)[t]||Y.en[t]||"Loading\u2026"}function se(t,e){t.setAttribute("aria-busy","true");let i=t.querySelector(".veil-sr-only");return i||(i=document.createElement("span"),i.className="veil-sr-only",i.setAttribute("role","status"),i.setAttribute("aria-live","polite"),t.appendChild(i)),i.textContent=e||Le("loading"),i}function le(t){t.removeAttribute("aria-busy");let e=t.querySelector(".veil-sr-only");e&&e.remove();}var oe=createContext({theme:"light",animation:"shimmer"});function ft({children:t,theme:e="light",animation:i="shimmer",nonce:r,locale:s,labels:a,antiFlicker:n}){useEffect(()=>{r&&ie(r),s&&re(s),a&&ae(a),h(r);},[r,s,a]);let l=useMemo(()=>({theme:e,animation:i,nonce:r,locale:s,labels:a,antiFlicker:n}),[e,i,r,s,a,n]);return jsx(oe.Provider,{value:l,children:t})}function $(){return useContext(oe)}var O=class{delay;minVisible;onShow;onHide;delayTimer=null;minVisibleTimer=null;shownTimestamp=null;isVisible=false;isPending=false;constructor(e={}){this.delay=e.delay!==void 0?e.delay:150,this.minVisible=e.minVisible!==void 0?e.minVisible:300,this.onShow=e.onShow,this.onHide=e.onHide;}start(){if(!(this.isPending||this.isVisible)){if(this.isPending=true,this.delay<=0){this.display();return}this.delayTimer=setTimeout(()=>{this.delayTimer=null,this.isPending&&this.display();},this.delay);}}display(){this.isPending=false,this.isVisible=true,this.shownTimestamp=Date.now(),this.onShow&&this.onShow();}finish(e){if(this.delayTimer){clearTimeout(this.delayTimer),this.delayTimer=null,this.isPending=false,e&&e();return}if(!this.isVisible){this.isPending=false,e&&e();return}let i=this.shownTimestamp?Date.now()-this.shownTimestamp:0,r=Math.max(0,this.minVisible-i);r<=0?(this.hide(),e&&e()):this.minVisibleTimer=setTimeout(()=>{this.minVisibleTimer=null,this.hide(),e&&e();},r);}hide(){this.isVisible=false,this.isPending=false,this.shownTimestamp=null,this.onHide&&this.onHide();}active(){return this.isVisible}destroy(){this.delayTimer&&clearTimeout(this.delayTimer),this.minVisibleTimer&&clearTimeout(this.minVisibleTimer),this.delayTimer=null,this.minVisibleTimer=null,this.isVisible=false,this.isPending=false;}};var _=class{el=null;innerEl=null;currentProgress=0;trickleTimer=null;status="idle";ensureDOM(){this.el||typeof document>"u"||(h(),this.el=document.createElement("div"),this.el.className="veil-progress-bar",this.el.setAttribute("role","progressbar"),this.el.setAttribute("aria-valuemin","0"),this.el.setAttribute("aria-valuemax","100"),this.el.setAttribute("aria-valuenow","0"),this.innerEl=document.createElement("div"),this.innerEl.className="veil-progress-inner",this.innerEl.style.width="0%",this.innerEl.style.opacity="1",this.el.appendChild(this.innerEl),document.body.appendChild(this.el));}start(){this.ensureDOM(),this.status!=="loading"&&(this.status="loading",this.currentProgress=0,this.set(.08),this.innerEl&&(this.innerEl.style.opacity="1",this.innerEl.style.backgroundColor="var(--veil-progress-color, #3b82f6)"),this.trickle());}set(e){this.ensureDOM(),this.currentProgress=Math.min(1,Math.max(0,e));let i=Math.round(this.currentProgress*100);this.innerEl&&(this.innerEl.style.width=`${i}%`),this.el&&this.el.setAttribute("aria-valuenow",String(i));}inc(e){let i=this.currentProgress;i>=1||(typeof e!="number"&&(i>=0&&i<.2?e=.1:i>=.2&&i<.5?e=.04:i>=.5&&i<.8?e=.02:i>=.8&&i<.99?e=.005:e=0),this.set(i+e));}trickle(){this.stopTrickle(),this.trickleTimer=setInterval(()=>{this.currentProgress<.95&&this.inc();},250);}stopTrickle(){this.trickleTimer&&(clearInterval(this.trickleTimer),this.trickleTimer=null);}done(){this.status!=="idle"&&(this.stopTrickle(),this.set(1),this.status="idle",setTimeout(()=>{this.innerEl&&(this.innerEl.style.opacity="0"),setTimeout(()=>{this.el&&(this.el.remove(),this.el=null,this.innerEl=null),this.currentProgress=0;},350);},200));}fail(){this.stopTrickle(),this.status="error",this.innerEl&&(this.innerEl.style.backgroundColor="#ef4444"),this.set(1),setTimeout(()=>this.done(),500);}},x=new _;function de(t={}){h();let e=!!t.circular,i=t.color||"var(--veil-progress-color, #3b82f6)",r=t.trackColor||"rgba(0, 0, 0, 0.08)";if(e){let l=t.size!==void 0?typeof t.size=="number"?`${t.size}px`:t.size:"48px",o=t.strokeWidth||4,c=document.createElement("div");c.className=`veil-progress-circular ${t.className||""}`.trim(),c.style.width=l,c.style.height=l,c.style.display="inline-flex",c.style.alignItems="center",c.style.justifyContent="center",c.style.position="relative";let m=document.createElementNS("http://www.w3.org/2000/svg","svg");m.setAttribute("viewBox","0 0 48 48"),m.style.width="100%",m.style.height="100%",m.style.transform="rotate(-90deg)";let p=document.createElementNS("http://www.w3.org/2000/svg","circle");p.setAttribute("cx","24"),p.setAttribute("cy","24"),p.setAttribute("r","20"),p.setAttribute("fill","none"),p.setAttribute("stroke",r),p.setAttribute("stroke-width",String(o));let u=document.createElementNS("http://www.w3.org/2000/svg","circle");u.setAttribute("cx","24"),u.setAttribute("cy","24"),u.setAttribute("r","20"),u.setAttribute("fill","none"),u.setAttribute("stroke",i),u.setAttribute("stroke-width",String(o)),u.setAttribute("stroke-linecap","round");let v=2*Math.PI*20;if(u.setAttribute("stroke-dasharray",String(v)),t.value!==void 0){let f=Math.min(100,Math.max(0,t.value)),b=v-f/100*v;u.setAttribute("stroke-dashoffset",String(b)),u.style.transition="stroke-dashoffset 300ms ease";}else u.setAttribute("stroke-dashoffset",String(v*.75)),m.style.animation="veil-spin 1200ms linear infinite";if(m.append(p,u),c.appendChild(m),t.showPercentage&&t.value!==void 0){let f=document.createElement("span");f.style.position="absolute",f.style.fontSize="11px",f.style.fontWeight="600",f.textContent=`${Math.round(t.value)}%`,c.appendChild(f);}return c}let s=t.height!==void 0?typeof t.height=="number"?`${t.height}px`:t.height:"4px",a=document.createElement("div");a.className=`veil-progress-linear ${t.className||""}`.trim(),a.setAttribute("role","progressbar"),a.style.width="100%",a.style.height=s,a.style.backgroundColor=r,a.style.borderRadius="9999px",a.style.overflow="hidden",a.style.position="relative";let n=document.createElement("div");if(n.style.height="100%",n.style.backgroundColor=i,n.style.borderRadius="9999px",t.value!==void 0){let l=Math.min(100,Math.max(0,t.value));a.setAttribute("aria-valuenow",String(l)),n.style.width=`${l}%`,n.style.transition="width 250ms ease";}else n.style.width="35%",n.style.animation="veil-progress-indeterminate 1400ms ease-in-out infinite";return a.appendChild(n),a}var F=class{activeIds=new Set;counter=0;listeners=new Set;start(e){let i=e||`req_${Date.now()}_${Math.random().toString(36).substring(2,7)}`;return this.activeIds.has(i)||(this.activeIds.add(i),this.counter++,this.notify()),i}stop(e){if(e)this.activeIds.has(e)&&(this.activeIds.delete(e),this.counter=Math.max(0,this.counter-1),this.notify());else if(this.counter>0){this.counter--;let i=this.activeIds.values().next().value;i&&this.activeIds.delete(i),this.notify();}}isLoading(){return this.counter>0}getCount(){return this.counter}subscribe(e){return this.listeners.add(e),e(this.isLoading(),this.counter),()=>{this.listeners.delete(e);}}reset(){this.activeIds.clear(),this.counter=0,this.notify();}notify(){let e=this.isLoading();for(let i of this.listeners)i(e,this.counter);}},X=new F;function U(t,e={}){let[i,r]=useState(false);return useEffect(()=>{let s=new O({delay:e.delay!==void 0?e.delay:150,minVisible:e.minVisible!==void 0?e.minVisible:300,onShow:()=>r(true),onHide:()=>r(false)});return t?s.start():s.finish(),()=>{s.destroy();}},[t,e.delay,e.minVisible]),i}function Lt(t,e={}){let[i,r]=useState(false),[s,a]=useState(null),[n,l]=useState(null),o=U(i,e),c=useCallback(async(...m)=>{r(true),l(null);let p=X.start();try{let u=await t(...m);return a(u),u}catch(u){throw l(u),u}finally{X.stop(p),r(false);}},[t]);return {loading:o,rawLoading:i,data:s,error:n,execute:c}}function Pt(){return {start:()=>x.start(),set:t=>x.set(t),inc:t=>x.inc(t),done:()=>x.done(),fail:()=>x.fail()}}var G=0;function Ve(){return G===0&&typeof performance<"u"&&(G=performance.now()),G}function E(t=1500){if(typeof performance>"u")return "0ms";let e=performance.now()-Ve();return `-${Math.round(e%t)}ms`}function I(t=1500){if(typeof t=="number")return t;if(!t)return 1500;let e=t.trim().toLowerCase();return e.endsWith("ms")?parseFloat(e)||1500:e.endsWith("s")?(parseFloat(e)||1.5)*1e3:parseFloat(e)||1500}var L=null,ce=new Set,me=false;function Ie(t){for(let e of t){let i=e.target;e.isIntersecting?(i.removeAttribute("data-veil-offscreen"),i.style.removeProperty("--veil-play-state")):(i.setAttribute("data-veil-offscreen","true"),i.style.setProperty("--veil-play-state","paused"));}}function ze(){me||typeof document>"u"||(me=true,document.addEventListener("visibilitychange",()=>{document.hidden?document.documentElement.setAttribute("data-veil-tab-hidden","true"):document.documentElement.removeAttribute("data-veil-tab-hidden");}));}function ue(t){return typeof window>"u"||typeof IntersectionObserver>"u"?()=>{}:(ze(),L||(L=new IntersectionObserver(Ie,{rootMargin:"100px 0px",threshold:0})),L.observe(t),ce.add(t),()=>{L&&t&&(L.unobserve(t),ce.delete(t));})}function d(t={}){h();let e=document.createElement("div");e.className=`veil-skeleton ${t.className||""}`.trim(),e.setAttribute("aria-hidden","true");let i=t.type||"rect";if(e.setAttribute("data-veil-shape",i),t.animation&&e.setAttribute("data-veil-anim",t.animation),t.direction&&e.setAttribute("data-veil-dir",t.direction),typeof t.theme=="string"&&e.setAttribute("data-veil-theme",t.theme),t.width!==void 0&&(e.style.width=typeof t.width=="number"?`${t.width}px`:t.width),t.height!==void 0&&(e.style.height=typeof t.height=="number"?`${t.height}px`:t.height),t.radius!==void 0&&(e.style.setProperty("--veil-radius",typeof t.radius=="number"?`${t.radius}px`:t.radius),e.style.borderRadius=typeof t.radius=="number"?`${t.radius}px`:t.radius),t.speed!==void 0){let r=I(t.speed);e.style.setProperty("--veil-duration",`${r}ms`),e.style.setProperty("--veil-sync-delay",E(r));}else e.style.setProperty("--veil-sync-delay",E(1500));if(t.style)for(let[r,s]of Object.entries(t.style))e.style[r]=s;return ue(e),e}function k(t=3,e={}){let i=document.createElement("div");i.className=`veil-lines-group ${e.className||""}`.trim(),i.setAttribute("aria-hidden","true");let r=e.gap!==void 0?typeof e.gap=="number"?`${e.gap}px`:e.gap:"0.45rem";i.style.display="flex",i.style.flexDirection="column",i.style.gap=r;let s=["100%","94%","88%","75%"],a=e.lastLineWidth!==void 0?typeof e.lastLineWidth=="number"?`${e.lastLineWidth}px`:e.lastLineWidth:"65%";for(let n=0;n<t;n++){let o=n===t-1?a:s[n%s.length]||"95%",c=d({...e,type:"line",width:o});c.style.setProperty("--veil-stagger-idx",String(n)),i.appendChild(c);}return i}function pe(t,e={}){let i=e.transition||"fade";if(i==="none"){e.onComplete&&e.onComplete();return}if(t.classList.add("veil-revealing"),i==="stagger-children"){let a=Array.from(t.children);a.forEach((l,o)=>{l.classList.add("veil-reveal-fade"),l.style.animationDelay=`${o*60}ms`,e.duration&&(l.style.animationDuration=`${e.duration}ms`);});let n=(e.duration||350)+a.length*60;setTimeout(()=>{t.classList.remove("veil-revealing"),a.forEach(l=>{l.classList.remove("veil-reveal-fade"),l.style.removeProperty("animation-delay"),l.style.removeProperty("animation-duration");}),e.onComplete&&e.onComplete();},n);return}let r=`veil-reveal-${i}`;t.classList.add(r),e.duration&&(t.style.animationDuration=`${e.duration}ms`),e.easing&&(t.style.animationTimingFunction=e.easing);let s=()=>{t.removeEventListener("animationend",s),t.classList.remove("veil-revealing",r),t.style.removeProperty("animation-duration"),t.style.removeProperty("animation-timing-function"),e.onComplete&&e.onComplete();};t.addEventListener("animationend",s);}var z=new Map;function He(t){if(z.has(t))return z.get(t);if(typeof window<"u"&&window.localStorage)try{let e=localStorage.getItem(`veil_cache_${t}`);if(e){let i=JSON.parse(e);return z.set(t,i),i}}catch{}return null}function De(t,e,i=false){if(z.set(t,e),i&&typeof window<"u"&&window.localStorage)try{localStorage.setItem(`veil_cache_${t}`,JSON.stringify(e));}catch{}}function Be(t,e){let i=t.getBoundingClientRect(),r=[];function s(n){if(n.hasAttribute("data-veil-ignore")||e&&n.matches(e))return false;let l=window.getComputedStyle(n);if(l.display==="none"||l.visibility==="hidden"||l.opacity==="0")return false;let o=n.tagName.toLowerCase();return ["img","svg","button","input","textarea","select"].includes(o)||n.hasAttribute("data-veil-shape")?true:Array.from(n.childNodes).some(m=>m.nodeType===Node.TEXT_NODE&&(m.textContent||"").trim().length>0)&&n.children.length===0}function a(n){if(n!==t&&s(n)){let o=n.getBoundingClientRect();if(o.width>2&&o.height>2){let m=window.getComputedStyle(n).borderRadius||"6px",p=n.getAttribute("data-veil-shape"),u="rect";p==="circle"||m==="50%"||m.includes("px")&&parseFloat(m)>=o.width/2?u="circle":(p==="line"||["p","span","h1","h2","h3","h4","h5","h6","a","label"].includes(n.tagName.toLowerCase()))&&(u="line"),r.push({x:Math.round(o.left-i.left),y:Math.round(o.top-i.top),width:Math.round(o.width),height:Math.round(o.height),radius:m,shape:u});}return}let l=Array.from(n.children);for(let o of l)o.hasAttribute("data-veil-ignore")||a(o);}return a(t),{width:Math.round(i.width),height:Math.round(i.height),boxes:r}}function he(t,e={},i={}){let r=document.createElement("div");if(r.className="veil-auto-overlay",r.setAttribute("aria-hidden","true"),r.style.position="absolute",r.style.top="0",r.style.left="0",r.style.width="100%",r.style.height="100%",r.style.pointerEvents="none",r.style.zIndex="5",!e.preserveBackground){let c=window.getComputedStyle(t);r.style.backgroundColor=c.backgroundColor!=="rgba(0, 0, 0, 0)"?c.backgroundColor:"transparent";}function s(c){r.innerHTML="";for(let m=0;m<c.boxes.length;m++){let p=c.boxes[m],u=d({...i,type:p.shape,radius:p.radius});u.style.position="absolute",u.style.left=`${p.x}px`,u.style.top=`${p.y}px`,u.style.width=`${p.width}px`,u.style.height=`${p.height}px`,u.style.setProperty("--veil-stagger-idx",String(m)),r.appendChild(u);}}function a(){let c=Be(t,e.ignoreSelector);c.boxes.length>0&&(s(c),e.cacheKey&&De(e.cacheKey,c,e.persistCache));}if(e.cacheKey){let c=He(e.cacheKey);c&&s(c);}window.getComputedStyle(t).position==="static"&&(t.style.position="relative"),t.appendChild(r),r.children.length===0&&a();let l=null,o=null;return e.observeResize!==false&&typeof ResizeObserver<"u"&&(l=new ResizeObserver(()=>a()),l.observe(t)),e.observeMutations!==false&&typeof MutationObserver<"u"&&(o=new MutationObserver(()=>a()),o.observe(t,{childList:true,subtree:true,attributes:false})),{overlay:r,refresh:a,destroy:()=>{l&&l.disconnect(),o&&o.disconnect(),e.reveal&&e.reveal!=="none"?pe(t,{transition:e.reveal,duration:e.revealDuration,easing:e.revealEasing,onComplete:()=>r.remove()}):r.remove();}}}function Ut({type:t="rect",circle:e,width:i,height:r,radius:s,count:a=1,gap:n="0.5rem",lines:l,lastLineWidth:o="65%",animation:c,theme:m,direction:p,speed:u,className:v="",style:f={},ariaLabel:b="Loading",children:B}){let A=$();useEffect(()=>{h(A.nonce);},[A.nonce]);let J=c||A.animation||"shimmer",M=m||A.theme||"light",ke=e?"circle":l?"line":t,Z=I(u||1500),Ce=typeof window<"u"?E(Z):"0s",w={...f,"--veil-sync-delay":Ce};if(u&&(w["--veil-duration"]=`${Z}ms`),i!==void 0&&(w.width=typeof i=="number"?`${i}px`:i),r!==void 0&&(w.height=typeof r=="number"?`${r}px`:r),s!==void 0){let T=typeof s=="number"?`${s}px`:s;w["--veil-radius"]=T,w.borderRadius=T;}e&&(w.borderRadius="50%",w.aspectRatio="1 / 1");let j=l||(a>1?a:1);if(j>1){let T=["100%","94%","88%","75%"],Se=typeof n=="number"?`${n}px`:n;return jsxs("div",{className:`veil-lines-group ${v}`.trim(),role:"status","aria-label":b,style:{display:"flex",flexDirection:"column",gap:Se},children:[jsx("span",{className:"veil-sr-only",children:b}),Array.from({length:j}).map((rt,R)=>{let Te=R===j-1?o:T[R%T.length]||"95%";return jsx("div",{className:"veil-skeleton","data-veil-shape":"line","data-veil-anim":J,"data-veil-theme":typeof M=="string"?M:void 0,"data-veil-dir":p,"aria-hidden":"true",style:{...w,width:Te,"--veil-stagger-idx":R}},R)})]})}return jsxs("div",{className:`veil-skeleton ${v}`.trim(),"data-veil-shape":ke,"data-veil-anim":J,"data-veil-theme":typeof M=="string"?M:void 0,"data-veil-dir":p,role:"status","aria-label":b,style:w,children:[jsx("span",{className:"veil-sr-only",children:b}),B]})}function Gt({loading:t,children:e,cacheKey:i,persistCache:r,ignoreSelector:s,observeResize:a=true,observeMutations:n=true,preserveBackground:l=true,reveal:o="fade",revealDuration:c=350,revealEasing:m,delay:p=150,minVisible:u=300,skeletonProps:v}){let f=useRef(null),b=U(t,{delay:p,minVisible:u});return useEffect(()=>{if(!b||!f.current)return;let B=he(f.current,{cacheKey:i,persistCache:r,ignoreSelector:s,observeResize:a,observeMutations:n,preserveBackground:l,reveal:o,revealDuration:c,revealEasing:m},v);return ()=>{B.destroy();}},[b,i,r,s,a,n,l,o,c,m,v]),jsx("div",{ref:f,className:"veil-measure-wrapper","aria-busy":b,style:{position:"relative"},children:e})}function S(t){let e=document.createElement("div");e.className=`veil-preset veil-preset-${t.name} ${t.className||""}`.trim(),e.setAttribute("aria-hidden","true"),e.style.width=t.width!==void 0?typeof t.width=="number"?`${t.width}px`:t.width:"100%",e.style.boxSizing="border-box";let i={animation:t.animation,theme:t.theme,direction:t.direction,speed:t.speed};switch(t.name){case "card":{e.style.display="flex",e.style.flexDirection="column",e.style.gap="12px",e.style.padding="16px",e.style.borderRadius="12px",e.style.border="1px solid rgba(0,0,0,0.08)";let r=d({...i,type:"rect",height:"180px",radius:"8px"}),s=d({...i,type:"heading",width:"70%",height:"24px"}),a=k(2,i),n=d({...i,type:"button",width:"110px",height:"36px"});e.append(r,s,a,n);break}case "product-card":{e.style.display="flex",e.style.flexDirection="column",e.style.gap="10px",e.style.padding="14px",e.style.borderRadius="12px",e.style.border="1px solid rgba(0,0,0,0.06)";let r=d({...i,type:"rect",height:"200px",radius:"10px"}),s=d({...i,type:"badge",width:"50px",height:"18px"}),a=d({...i,type:"line",width:"85%",height:"18px"}),n=d({...i,type:"line",width:"40%",height:"22px"}),l=d({...i,type:"button",width:"100%",height:"38px"});e.append(r,s,a,n,l);break}case "product-grid":{let r=t.items||4,s=t.columns||2;e.style.display="grid",e.style.gridTemplateColumns=`repeat(${s}, minmax(0, 1fr))`,e.style.gap="16px";for(let a=0;a<r;a++){let n=S({...t,name:"product-card"});n.style.setProperty("--veil-stagger-idx",String(a)),e.appendChild(n);}break}case "list-item":{e.style.display="flex",e.style.alignItems="center",e.style.gap="14px",e.style.padding="10px 0";let r=d({...i,type:"circle",width:"44px",height:"44px"}),s=document.createElement("div");s.style.flex="1",s.style.display="flex",s.style.flexDirection="column",s.style.gap="6px";let a=d({...i,type:"line",width:"55%",height:"16px"}),n=d({...i,type:"line",width:"35%",height:"12px"});s.append(a,n);let l=d({...i,type:"icon",width:"24px",height:"24px"});e.append(r,s,l);break}case "list":{let r=t.items||5;e.style.display="flex",e.style.flexDirection="column",e.style.gap="8px";for(let s=0;s<r;s++){let a=S({...t,name:"list-item"});a.style.setProperty("--veil-stagger-idx",String(s)),e.appendChild(a);}break}case "table":{e.style.display="flex",e.style.flexDirection="column",e.style.gap="10px",e.style.width="100%";let r=document.createElement("div");r.style.display="flex",r.style.gap="16px",r.style.paddingBottom="8px",r.style.borderBottom="2px solid rgba(0,0,0,0.06)";let s=t.columns||4;for(let n=0;n<s;n++){let l=d({...i,type:"line",width:`${100/s}%`,height:"20px"});r.appendChild(l);}e.appendChild(r);let a=t.items||5;for(let n=0;n<a;n++){let l=document.createElement("div");l.style.display="flex",l.style.gap="16px",l.style.padding="8px 0",l.style.borderBottom="1px solid rgba(0,0,0,0.04)";for(let o=0;o<s;o++){let c=d({...i,type:"line",width:`${100/s}%`,height:"14px"});l.appendChild(c);}l.style.setProperty("--veil-stagger-idx",String(n)),e.appendChild(l);}break}case "profile":{e.style.display="flex",e.style.flexDirection="column",e.style.alignItems="center",e.style.gap="12px",e.style.padding="24px",e.style.textAlign="center";let r=d({...i,type:"circle",width:"80px",height:"80px"}),s=d({...i,type:"heading",width:"160px",height:"22px"}),a=k(2,{...i,width:"240px"}),n=d({...i,type:"button",width:"120px",height:"36px"});e.append(r,s,a,n);break}case "profile-header":{e.style.display="flex",e.style.flexDirection="column",e.style.gap="16px";let r=d({...i,type:"rect",height:"140px",radius:"10px"}),s=document.createElement("div");s.style.display="flex",s.style.alignItems="flex-end",s.style.gap="16px",s.style.marginTop="-40px",s.style.paddingLeft="20px";let a=d({...i,type:"circle",width:"72px",height:"72px"});a.style.border="4px solid white";let n=document.createElement("div");n.style.display="flex",n.style.flexDirection="column",n.style.gap="6px",n.style.flex="1";let l=d({...i,type:"heading",width:"140px",height:"20px"}),o=d({...i,type:"line",width:"90px",height:"14px"});n.append(l,o),s.append(a,n);let c=k(2,i);e.append(r,s,c);break}case "feed-post":{e.style.display="flex",e.style.flexDirection="column",e.style.gap="12px",e.style.padding="16px",e.style.borderRadius="12px",e.style.border="1px solid rgba(0,0,0,0.06)";let r=document.createElement("div");r.style.display="flex",r.style.alignItems="center",r.style.gap="10px";let s=d({...i,type:"circle",width:"40px",height:"40px"}),a=document.createElement("div");a.style.display="flex",a.style.flexDirection="column",a.style.gap="4px",a.append(d({...i,type:"line",width:"110px",height:"14px"}),d({...i,type:"line",width:"60px",height:"10px"})),r.append(s,a);let n=k(3,i),l=d({...i,type:"rect",height:"180px",radius:"8px"}),o=document.createElement("div");o.style.display="flex",o.style.gap="24px",o.append(d({...i,type:"icon",width:"20px",height:"20px"}),d({...i,type:"icon",width:"20px",height:"20px"}),d({...i,type:"icon",width:"20px",height:"20px"})),e.append(r,n,l,o);break}case "article":{e.style.display="flex",e.style.flexDirection="column",e.style.gap="16px";let r=d({...i,type:"rect",height:"240px",radius:"10px"}),s=d({...i,type:"heading",width:"80%",height:"32px"}),a=d({...i,type:"line",width:"30%",height:"14px"}),n=k(4,i),l=k(3,i);e.append(r,s,a,n,l);break}case "comment-thread":{e.style.display="flex",e.style.flexDirection="column",e.style.gap="14px";let r=t.items||3;for(let s=0;s<r;s++){let a=S({...t,name:"list-item"});if(a.style.setProperty("--veil-stagger-idx",String(s)),e.appendChild(a),s===1){let n=S({...t,name:"list-item"});n.style.marginLeft="40px",e.appendChild(n);}}break}case "chat":{e.style.display="flex",e.style.flexDirection="column",e.style.gap="12px";let r=[{isSelf:false,width:"60%"},{isSelf:true,width:"45%"},{isSelf:false,width:"75%"},{isSelf:true,width:"50%"}];for(let s=0;s<r.length;s++){let a=r[s],n=document.createElement("div");n.style.display="flex",n.style.gap="8px",n.style.justifyContent=a.isSelf?"flex-end":"flex-start",a.isSelf||n.appendChild(d({...i,type:"circle",width:"28px",height:"28px"}));let l=d({...i,type:"rect",width:a.width,height:"36px",radius:"16px"});n.appendChild(l),n.style.setProperty("--veil-stagger-idx",String(s)),e.appendChild(n);}break}case "dashboard":{e.style.display="flex",e.style.flexDirection="column",e.style.gap="16px";let r=document.createElement("div");r.style.display="grid",r.style.gridTemplateColumns="repeat(auto-fit, minmax(180px, 1fr))",r.style.gap="12px";for(let l=0;l<4;l++){let o=document.createElement("div");o.style.padding="14px",o.style.borderRadius="10px",o.style.border="1px solid rgba(0,0,0,0.06)",o.style.display="flex",o.style.flexDirection="column",o.style.gap="8px",o.append(d({...i,type:"line",width:"50%",height:"14px"}),d({...i,type:"heading",width:"70%",height:"24px"})),r.appendChild(o);}let s=document.createElement("div");s.style.display="grid",s.style.gridTemplateColumns="repeat(auto-fit, minmax(280px, 1fr))",s.style.gap="16px";let a=d({...i,type:"rect",height:"220px",radius:"10px"}),n=d({...i,type:"rect",height:"220px",radius:"10px"});s.append(a,n),e.append(r,s);break}case "form":{e.style.display="flex",e.style.flexDirection="column",e.style.gap="16px",e.style.padding="20px",e.style.borderRadius="12px",e.style.border="1px solid rgba(0,0,0,0.06)";let r=d({...i,type:"heading",width:"40%",height:"26px"});e.appendChild(r);for(let a=0;a<3;a++){let n=document.createElement("div");n.style.display="flex",n.style.flexDirection="column",n.style.gap="6px",n.append(d({...i,type:"line",width:"25%",height:"12px"}),d({...i,type:"input",width:"100%",height:"40px"})),e.appendChild(n);}let s=d({...i,type:"button",width:"140px",height:"40px"});e.appendChild(s);break}case "media-card":{e.style.display="flex",e.style.flexDirection="column",e.style.gap="10px";let r=d({...i,type:"rect",height:"180px",radius:"10px"}),s=document.createElement("div");s.style.display="flex",s.style.gap="12px";let a=d({...i,type:"circle",width:"38px",height:"38px"}),n=document.createElement("div");n.style.flex="1",n.style.display="flex",n.style.flexDirection="column",n.style.gap="6px",n.append(d({...i,type:"line",width:"85%",height:"16px"}),d({...i,type:"line",width:"50%",height:"12px"})),s.append(a,n),e.append(r,s);break}case "navbar":{e.style.display="flex",e.style.alignItems="center",e.style.justifyContent="space-between",e.style.padding="12px 20px",e.style.borderBottom="1px solid rgba(0,0,0,0.06)";let r=d({...i,type:"rect",width:"100px",height:"28px",radius:"6px"}),s=document.createElement("div");s.style.display="flex",s.style.gap="20px";for(let n=0;n<4;n++)s.appendChild(d({...i,type:"line",width:"60px",height:"14px"}));let a=document.createElement("div");a.style.display="flex",a.style.alignItems="center",a.style.gap="12px",a.append(d({...i,type:"input",width:"140px",height:"32px"}),d({...i,type:"circle",width:"32px",height:"32px"})),e.append(r,s,a);break}case "sidebar":{e.style.display="flex",e.style.flexDirection="column",e.style.justifyContent="space-between",e.style.padding="20px 16px",e.style.width="220px",e.style.height="450px",e.style.borderRight="1px solid rgba(0,0,0,0.06)";let r=document.createElement("div");r.style.display="flex",r.style.flexDirection="column",r.style.gap="16px",r.appendChild(d({...i,type:"rect",width:"120px",height:"32px",radius:"6px"}));for(let a=0;a<5;a++){let n=document.createElement("div");n.style.display="flex",n.style.alignItems="center",n.style.gap="10px",n.append(d({...i,type:"icon",width:"20px",height:"20px"}),d({...i,type:"line",width:"90px",height:"14px"})),r.appendChild(n);}let s=document.createElement("div");s.style.display="flex",s.style.alignItems="center",s.style.gap="10px",s.append(d({...i,type:"circle",width:"36px",height:"36px"}),d({...i,type:"line",width:"80px",height:"14px"})),e.append(r,s);break}case "settings-page":{e.style.display="flex",e.style.flexDirection="column",e.style.gap="24px",e.style.padding="24px";let r=d({...i,type:"heading",width:"220px",height:"30px"});e.appendChild(r);for(let s=0;s<3;s++){let a=document.createElement("div");a.style.display="flex",a.style.alignItems="center",a.style.justifyContent="space-between",a.style.padding="14px 0",a.style.borderBottom="1px solid rgba(0,0,0,0.06)";let n=document.createElement("div");n.style.display="flex",n.style.flexDirection="column",n.style.gap="6px",n.append(d({...i,type:"line",width:"160px",height:"16px"}),d({...i,type:"line",width:"240px",height:"12px"}));let l=d({...i,type:"button",width:"50px",height:"28px",radius:"14px"});a.append(n,l),e.appendChild(a);}break}}return e}function g(t){let e=useRef(null),i=$();return useEffect(()=>{if(h(i.nonce),!e.current)return;let r=S({...t,animation:t.animation||i.animation,theme:t.theme||i.theme});e.current.innerHTML="",e.current.appendChild(r);},[t,i.animation,i.theme,i.nonce]),jsx("div",{ref:e,className:`veil-preset-react-wrap ${t.className||""}`.trim()})}var ni=t=>jsx(g,{...t,name:"card"}),ri=t=>jsx(g,{...t,name:"product-card"}),ai=t=>jsx(g,{...t,name:"product-grid"}),si=t=>jsx(g,{...t,name:"list"}),li=t=>jsx(g,{...t,name:"list-item"}),oi=t=>jsx(g,{...t,name:"table"}),di=t=>jsx(g,{...t,name:"profile"}),ci=t=>jsx(g,{...t,name:"feed-post"}),mi=t=>jsx(g,{...t,name:"article"}),ui=t=>jsx(g,{...t,name:"dashboard"}),pi=t=>jsx(g,{...t,name:"form"}),hi=t=>jsx(g,{...t,name:"navbar"}),yi=t=>jsx(g,{...t,name:"sidebar"});function C(t={}){h();let e=t.type||"ring",i=t.size!==void 0?typeof t.size=="number"?`${t.size}px`:t.size:"28px",r=t.color||"var(--veil-progress-color, #3b82f6)",s=t.secondaryColor||"rgba(0, 0, 0, 0.12)",a=document.createElement("div");switch(a.className=`veil-spinner veil-spinner-${e} ${t.className||""}`.trim(),a.setAttribute("role","status"),a.setAttribute("aria-label",t.label||"Loading"),a.style.width=i,a.style.height=i,a.style.display="inline-flex",a.style.alignItems="center",a.style.justifyContent="center",a.style.position="relative",e){case "ring":{let n=document.createElement("div");n.style.width="100%",n.style.height="100%",n.style.borderRadius="50%",n.style.border=`3px solid ${s}`,n.style.borderTopColor=r,n.style.animation="veil-spin 800ms linear infinite",n.style.boxSizing="border-box",a.appendChild(n);break}case "dual-ring":{let n=document.createElement("div");n.style.width="100%",n.style.height="100%",n.style.borderRadius="50%",n.style.border="3px solid transparent",n.style.borderTopColor=r,n.style.borderBottomColor=r,n.style.animation="veil-spin 900ms cubic-bezier(0.5, 0, 0.5, 1) infinite",n.style.boxSizing="border-box",a.appendChild(n);break}case "dots":{a.style.gap="4px";for(let n=0;n<3;n++){let l=document.createElement("div");l.style.width="28%",l.style.height="28%",l.style.borderRadius="50%",l.style.backgroundColor=r,l.style.animation="veil-dot-bounce 1200ms ease-in-out infinite",l.style.animationDelay=`${n*160}ms`,a.appendChild(l);}break}case "bars":{a.style.gap="3px";for(let n=0;n<4;n++){let l=document.createElement("div");l.style.width="18%",l.style.height="100%",l.style.borderRadius="2px",l.style.backgroundColor=r,l.style.animation="veil-bar-wave 1000ms ease-in-out infinite",l.style.animationDelay=`${n*140}ms`,a.appendChild(l);}break}case "pulse":{let n=document.createElement("div");n.style.width="100%",n.style.height="100%",n.style.borderRadius="50%",n.style.backgroundColor=r,n.style.animation="veil-pulse-scale 1200ms ease-out infinite",a.appendChild(n);break}case "orbit":{let n=document.createElement("div");n.style.width="30%",n.style.height="30%",n.style.borderRadius="50%",n.style.backgroundColor=r,n.style.position="absolute";let l=document.createElement("div");l.style.width="100%",l.style.height="100%",l.style.position="absolute",l.style.animation="veil-spin 1200ms linear infinite";let o=document.createElement("div");o.style.width="24%",o.style.height="24%",o.style.borderRadius="50%",o.style.backgroundColor=r,o.style.position="absolute",o.style.top="0",o.style.left="38%",l.appendChild(o),a.append(n,l);break}case "wave":{a.style.gap="4px";for(let n=0;n<5;n++){let l=document.createElement("div");l.style.width="12%",l.style.height="80%",l.style.borderRadius="3px",l.style.backgroundColor=r,l.style.animation="veil-wave-dance 1100ms ease-in-out infinite",l.style.animationDelay=`${n*110}ms`,a.appendChild(l);}break}case "bounce":{let n=document.createElement("div");n.style.width="60%",n.style.height="60%",n.style.borderRadius="50%",n.style.backgroundColor=r,n.style.animation="veil-bounce-ball 900ms cubic-bezier(0.28, 0.84, 0.42, 1) infinite",a.appendChild(n);break}case "ios-activity":{for(let n=0;n<12;n++){let l=document.createElement("div");l.style.position="absolute",l.style.width="8%",l.style.height="26%",l.style.backgroundColor=r,l.style.borderRadius="2px",l.style.transformOrigin="50% 190%",l.style.transform=`rotate(${n*30}deg) translateY(-90%)`,l.style.animation="veil-ios-fade 1000ms linear infinite",l.style.animationDelay=`-${(12-n)*(1e3/12)}ms`,a.appendChild(l);}break}case "glass-orb":{let n=document.createElement("div");n.style.width="100%",n.style.height="100%",n.style.borderRadius="50%",n.style.background=`radial-gradient(circle at 35% 35%, rgba(255,255,255,0.8), ${r} 70%)`,n.style.boxShadow=`0 4px 12px ${r}44, inset 0 2px 4px rgba(255,255,255,0.6)`,n.style.animation="veil-glass-orbit 1600ms ease-in-out infinite",a.appendChild(n);break}case "morph":{let n=document.createElement("div");n.style.width="80%",n.style.height="80%",n.style.backgroundColor=r,n.style.animation="veil-morph-shape 2000ms ease-in-out infinite",a.appendChild(n);break}case "progress-circle":{let n=document.createElementNS("http://www.w3.org/2000/svg","svg");n.setAttribute("viewBox","0 0 36 36"),n.style.width="100%",n.style.height="100%",n.style.transform="rotate(-90deg)";let l=document.createElementNS("http://www.w3.org/2000/svg","circle");l.setAttribute("cx","18"),l.setAttribute("cy","18"),l.setAttribute("r","14"),l.setAttribute("fill","none"),l.setAttribute("stroke",s),l.setAttribute("stroke-width","3");let o=document.createElementNS("http://www.w3.org/2000/svg","circle");o.setAttribute("cx","18"),o.setAttribute("cy","18"),o.setAttribute("r","14"),o.setAttribute("fill","none"),o.setAttribute("stroke",r),o.setAttribute("stroke-width","3"),o.setAttribute("stroke-dasharray","88"),o.setAttribute("stroke-dashoffset","25"),o.setAttribute("stroke-linecap","round"),o.style.animation="veil-spin 1200ms linear infinite",o.style.transformOrigin="50% 50%",n.append(l,o),a.appendChild(n);break}}return _e(),a}var ge=false;function _e(){if(ge||typeof document>"u")return;ge=true;let t=document.createElement("style");t.id="veilkit-spinner-keyframes",t.textContent=`
|
|
380
|
+
@keyframes veil-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
|
|
381
|
+
@keyframes veil-dot-bounce { 0%, 80%, 100% { transform: scale(0.4); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } }
|
|
382
|
+
@keyframes veil-bar-wave { 0%, 100% { transform: scaleY(0.3); opacity: 0.5; } 50% { transform: scaleY(1); opacity: 1; } }
|
|
383
|
+
@keyframes veil-pulse-scale { 0% { transform: scale(0.2); opacity: 1; } 100% { transform: scale(1.1); opacity: 0; } }
|
|
384
|
+
@keyframes veil-wave-dance { 0%, 100% { transform: scaleY(0.2); } 50% { transform: scaleY(1); } }
|
|
385
|
+
@keyframes veil-bounce-ball { 0%, 100% { transform: translateY(35%) scale(1.15, 0.75); } 50% { transform: translateY(-40%) scale(0.9, 1.1); } }
|
|
386
|
+
@keyframes veil-ios-fade { 0% { opacity: 1; } 100% { opacity: 0.15; } }
|
|
387
|
+
@keyframes veil-glass-orbit { 0%, 100% { transform: scale(0.9) rotate(0deg); } 50% { transform: scale(1.08) rotate(180deg); } }
|
|
388
|
+
@keyframes veil-morph-shape {
|
|
389
|
+
0%, 100% { border-radius: 50%; transform: rotate(0deg); }
|
|
390
|
+
33% { border-radius: 8px; transform: rotate(90deg); }
|
|
391
|
+
66% { border-radius: 20px; transform: rotate(180deg); }
|
|
392
|
+
}
|
|
393
|
+
`,document.head.appendChild(t);}function Ci(t){let e=useRef(null);return useEffect(()=>{if(h(),!e.current)return;let i=C(t);e.current.innerHTML="",e.current.appendChild(i);},[t.type,t.size,t.color,t.secondaryColor,t.speed,t.label]),jsx("div",{ref:e,className:`veil-spinner-wrap ${t.className||""}`.trim(),style:{display:"inline-flex",...t.style}})}function Ai(t){let e=useRef(null);return useEffect(()=>{if(h(),!e.current)return;let i=de(t);e.current.innerHTML="",e.current.appendChild(i);},[t.value,t.max,t.height,t.color,t.trackColor,t.circular,t.size,t.showPercentage]),jsx("div",{ref:e,className:`veil-progress-react ${t.className||""}`.trim()})}function Mi({color:t="#3b82f6"}){return useEffect(()=>{if(typeof window>"u")return;document.documentElement.style.setProperty("--veil-progress-color",t);let e=()=>{x.start();},i=()=>{x.start(),setTimeout(()=>x.done(),300);};return window.addEventListener("beforeunload",e),window.addEventListener("popstate",i),()=>{window.removeEventListener("beforeunload",e),window.removeEventListener("popstate",i);}},[t]),null}var P=new Map,q="",K=class{show(e,i={}){h();let r,s=!e;if(s?r=document.body:typeof e=="string"?(r=document.querySelector(e),r||(r=document.body)):r=e,P.has(r))return P.get(r);let a=document.createElement("div");if(a.className=`veil-overlay ${s?"veil-overlay-fullscreen":""} ${i.className||""}`.trim(),a.setAttribute("role","status"),i.color&&a.style.setProperty("--veil-overlay-bg",i.color),i.blur!==void 0){let n=typeof i.blur=="boolean"?i.blur?"8px":"0px":i.blur;a.style.setProperty("--veil-overlay-blur",n);}if(i.zIndex!==void 0&&(a.style.zIndex=String(i.zIndex)),i.spinner!==false){let n=typeof i.spinner=="string"?i.spinner:"ring",l=C({type:n,size:36});a.appendChild(l);}if(i.message){let n=document.createElement("span");n.className="veil-overlay-message",n.style.fontSize="14px",n.style.fontWeight="500",n.style.color="var(--veil-contrast, #1f2937)",n.textContent=i.message,a.appendChild(n);}return s||window.getComputedStyle(r).position==="static"&&(r.style.position="relative"),se(r,i.message),i.lockScroll&&s&&typeof document<"u"&&(q=document.body.style.overflow,document.body.style.overflow="hidden"),r.appendChild(a),P.set(r,a),a}hide(e){let i,r=!e;r?i=document.body:typeof e=="string"?(i=document.querySelector(e),i||(i=document.body)):i=e;let s=P.get(i);s&&(s.style.opacity="0",setTimeout(()=>{s.remove(),P.delete(i),le(i),r&&q!==void 0&&(document.body.style.overflow=q);},200));}},D=new K;function Bi({visible:t=false,blur:e=true,opacity:i,color:r,spinner:s=true,message:a,lockScroll:n=false,className:l="",zIndex:o,children:c}){let m=useRef(null);return useEffect(()=>{if(!m.current)return;let p=m.current;return t?D.show(p,{blur:e,opacity:i,color:r,spinner:s,message:a,lockScroll:n,className:l,zIndex:o}):D.hide(p),()=>{D.hide(p);}},[t,e,i,r,s,a,n,l,o]),jsx("div",{ref:m,className:"veil-overlay-target",style:{position:"relative",width:"100%",height:"100%"},children:c})}function be(t,e={}){h();let i="",r="",s=[],a=null,n=null;function l(o,c){if(o){if(!t.classList.contains("veil-btn-loading")){let m=t.getBoundingClientRect();if(i=t.style.width,r=t.style.height,m.width>0&&(t.style.width=`${m.width}px`),m.height>0&&(t.style.height=`${m.height}px`),t.classList.add("veil-btn-loading"),t.setAttribute("aria-disabled","true"),t.setAttribute("aria-busy","true"),e.spinnerPlacement==="replace"){s=Array.from(t.childNodes),t.innerHTML="";let p=C({type:e.spinner||"ring",size:18,color:"currentColor"});t.appendChild(p);}else {a=document.createElement("span"),a.className="veil-btn-spinner-wrap";let p=C({type:e.spinner||"ring",size:16,color:"currentColor"});a.appendChild(p),t.insertBefore(a,t.firstChild),(c||e.loadingText)&&(n=document.createTextNode(` ${c||e.loadingText}`),t.appendChild(n));}}}else if(t.classList.contains("veil-btn-loading"))if(t.classList.remove("veil-btn-loading"),t.removeAttribute("aria-disabled"),t.removeAttribute("aria-busy"),t.style.width=i,t.style.height=r,e.spinnerPlacement==="replace"){t.innerHTML="";for(let m of s)t.appendChild(m);s=[];}else a&&(a.remove(),a=null),n&&(n.remove(),n=null);}return e.loading&&l(true,e.loadingText),{setLoading:l,destroy:()=>l(false)}}function Ki({loading:t=false,spinner:e="ring",spinnerPlacement:i="start",loadingText:r,disabled:s,children:a,className:n="",onClick:l,...o}){let c=useRef(null),m=useRef(null);return useEffect(()=>{if(c.current)return m.current?m.current.setLoading(t,r):m.current=be(c.current,{loading:t,spinner:e,spinnerPlacement:i,loadingText:r}),()=>{m.current&&(m.current.destroy(),m.current=null);}},[t,e,i,r]),jsx("button",{ref:c,className:`veil-button ${n}`.trim(),disabled:s||t,onClick:t?void 0:l,...o,children:a})}function we(t){h();let e=document.createElement("div");if(e.className=`veil-lazy-img-wrap ${t.className||""}`.trim(),e.style.position="relative",e.style.display="inline-block",e.style.overflow="hidden",t.width&&(e.style.width=typeof t.width=="number"?`${t.width}px`:t.width),t.height&&(e.style.height=typeof t.height=="number"?`${t.height}px`:t.height),t.aspectRatio&&(e.style.aspectRatio=String(t.aspectRatio)),t.radius){let s=typeof t.radius=="number"?`${t.radius}px`:t.radius;e.style.borderRadius=s;}let i=d({animation:t.animation||"shimmer",theme:t.theme,width:"100%",height:"100%",radius:t.radius});i.style.position="absolute",i.style.inset="0",e.appendChild(i);let r=document.createElement("img");return r.alt=t.alt||"",r.className="veil-lazy-img veil-lazy-img-loading",r.style.width="100%",r.style.height="100%",r.style.objectFit="cover",r.style.display="block",r.onload=()=>{r.classList.remove("veil-lazy-img-loading"),r.classList.add("veil-lazy-img-loaded"),i.style.opacity="0",setTimeout(()=>{i.remove();},350),t.onLoad&&t.onLoad();},r.onerror=s=>{t.fallbackSrc&&r.src!==t.fallbackSrc?r.src=t.fallbackSrc:(i.remove(),e.style.backgroundColor="#fee2e2",e.style.display="flex",e.style.alignItems="center",e.style.justifyContent="center",e.textContent="\u26A0\uFE0F Image failed to load"),t.onError&&t.onError(s);},r.src=t.src,e.appendChild(r),e}function an(t){let e=useRef(null);return useEffect(()=>{if(!e.current)return;let i=we(t);e.current.innerHTML="",e.current.appendChild(i);},[t.src,t.alt,t.width,t.height,t.radius,t.aspectRatio]),jsx("div",{ref:e,className:`veil-lazy-image-host ${t.className||""}`.trim()})}export{an as LazyImage,Ki as LoadingButton,Bi as Overlay,Ai as ProgressBar,Mi as RouteProgress,Ut as Skeleton,mi as SkeletonArticle,ni as SkeletonCard,ui as SkeletonDashboard,ci as SkeletonFeedPost,pi as SkeletonForm,si as SkeletonList,li as SkeletonListItem,hi as SkeletonNavbar,g as SkeletonPreset,ri as SkeletonProductCard,ai as SkeletonProductGrid,di as SkeletonProfile,yi as SkeletonSidebar,oi as SkeletonTable,Ci as Spinner,Gt as Veil,ft as VeilProvider,U as useDelayedLoading,Lt as useLoading,Pt as useProgress,$ as useVeil};//# sourceMappingURL=index.js.map
|
|
394
|
+
//# sourceMappingURL=index.js.map
|