@designbasekorea/ui-wc 0.5.6 → 0.6.0

package/dist/esm/components/animation-background/graphite-shader.js

@@ -1,111 +1 @@
-const GRAPHITE_VS_SOURCE = `
-  attribute vec4 aVertexPosition;
-  void main() {
-    gl_Position = aVertexPosition;
-  }
-`;
-const GRAPHITE_FS_SOURCE = `
-  precision highp float;
-  uniform vec2 uResolution;
-  uniform float uTime;
-  uniform float uSpeed;
-  uniform float uIntensity;
-  uniform float uGrain;
-  uniform float uScale;
-  uniform float uWarp;
-  uniform vec3 uColor1;
-  uniform vec3 uColor2;
-  uniform vec3 uColor3;
-
-  vec4 permute(vec4 x){return mod(((x*34.0)+1.0)*x, 289.0);}
-  vec4 taylorInvSqrt(vec4 r){return 1.79284291400159 - 0.85373472095314 * r;}
-  vec3 fade(vec3 t) {return t*t*t*(t*(t*6.0-15.0)+10.0);}
-
-  float cnoise(vec3 P){
-    vec3 Pi0 = floor(P);
-    vec3 Pi1 = Pi0 + vec3(1.0);
-    Pi0 = mod(Pi0, 289.0);
-    Pi1 = mod(Pi1, 289.0);
-    vec3 Pf0 = fract(P);
-    vec3 Pf1 = Pf0 - vec3(1.0);
-    vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
-    vec4 iy = vec4(Pi0.yy, Pi1.yy);
-    vec4 iz0 = Pi0.zzzz;
-    vec4 iz1 = Pi1.zzzz;
-
-    vec4 ixy = permute(permute(ix) + iy);
-    vec4 ixy0 = permute(ixy + iz0);
-    vec4 ixy1 = permute(ixy + iz1);
-
-    vec4 gx0 = ixy0 / 7.0;
-    vec4 gy0 = fract(floor(gx0) / 7.0) - 0.5;
-    gx0 = fract(gx0);
-    vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);
-    vec4 sz0 = step(gz0, vec4(0.0));
-    gx0 -= sz0 * (step(0.0, gx0) - 0.5);
-    gy0 -= sz0 * (step(0.0, gy0) - 0.5);
-
-    vec4 gx1 = ixy1 / 7.0;
-    vec4 gy1 = fract(floor(gx1) / 7.0) - 0.5;
-    gx1 = fract(gx1);
-    vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);
-    vec4 sz1 = step(gz1, vec4(0.0));
-    gx1 -= sz1 * (step(0.0, gx1) - 0.5);
-    gy1 -= sz1 * (step(0.0, gy1) - 0.5);
-
-    vec3 g000 = vec3(gx0.x,gy0.x,gz0.x);
-    vec3 g100 = vec3(gx0.y,gy0.y,gz0.y);
-    vec3 g010 = vec3(gx0.z,gy0.z,gz0.z);
-    vec3 g110 = vec3(gx0.w,gy0.w,gz0.w);
-    vec3 g001 = vec3(gx1.x,gy1.x,gz1.x);
-    vec3 g101 = vec3(gx1.y,gy1.y,gz1.y);
-    vec3 g011 = vec3(gx1.z,gy1.z,gz1.z);
-    vec3 g111 = vec3(gx1.w,gy1.w,gz1.w);
-
-    vec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));
-    g000 *= norm0.x;
-    g010 *= norm0.y;
-    g100 *= norm0.z;
-    g110 *= norm0.w;
-    vec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));
-    g001 *= norm1.x;
-    g011 *= norm1.y;
-    g101 *= norm1.z;
-    g111 *= norm1.w;
-
-    float n000 = dot(g000, Pf0);
-    float n100 = dot(g100, vec3(Pf1.x, Pf0.yz));
-    float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));
-    float n110 = dot(g110, vec3(Pf1.xy, Pf0.z));
-    float n001 = dot(g001, vec3(Pf0.xy, Pf1.z));
-    float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));
-    float n011 = dot(g011, vec3(Pf0.x, Pf1.yz));
-    float n111 = dot(g111, Pf1);
-
-    vec3 fade_xyz = fade(Pf0);
-    vec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);
-    vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);
-    float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x);
-    return 2.2 * n_xyz;
-  }
-
-  void main() {
-    vec2 p = gl_FragCoord.xy / uResolution.xy;
-    float base = p.x * 0.5 + p.y * 0.5;
-
-    float n = cnoise(vec3(p * uScale, uTime * uSpeed)) * 0.5 + 0.5;
-    float n2 = cnoise(vec3(p * (uScale * 1.5) - (n * uWarp), uTime * (uSpeed * 1.2))) * 0.5 + 0.5;
-
-    float mask = (base * 0.2 + n * 0.5 + n2 * 0.3) * uIntensity;
-
-    vec3 color = mix(uColor1, uColor2, smoothstep(0.1, 0.6, mask));
-    color = mix(color, uColor3, smoothstep(0.5, 0.9, mask));
-
-    float grain = fract(sin(dot(p + fract(uTime), vec2(12.9898, 78.233))) * 43758.5453);
-    color += (grain - 0.5) * uGrain;
-
-    gl_FragColor = vec4(color, 1.0);
-  }
-`;
-
-export { GRAPHITE_FS_SOURCE, GRAPHITE_VS_SOURCE };
+const n="\n  attribute vec4 aVertexPosition;\n  void main() {\n    gl_Position = aVertexPosition;\n  }\n",e="\n  precision highp float;\n  uniform vec2 uResolution;\n  uniform float uTime;\n  uniform float uSpeed;\n  uniform float uIntensity;\n  uniform float uGrain;\n  uniform float uScale;\n  uniform float uWarp;\n  uniform vec3 uColor1;\n  uniform vec3 uColor2;\n  uniform vec3 uColor3;\n\n  vec4 permute(vec4 x){return mod(((x*34.0)+1.0)*x, 289.0);}\n  vec4 taylorInvSqrt(vec4 r){return 1.79284291400159 - 0.85373472095314 * r;}\n  vec3 fade(vec3 t) {return t*t*t*(t*(t*6.0-15.0)+10.0);}\n\n  float cnoise(vec3 P){\n    vec3 Pi0 = floor(P);\n    vec3 Pi1 = Pi0 + vec3(1.0);\n    Pi0 = mod(Pi0, 289.0);\n    Pi1 = mod(Pi1, 289.0);\n    vec3 Pf0 = fract(P);\n    vec3 Pf1 = Pf0 - vec3(1.0);\n    vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);\n    vec4 iy = vec4(Pi0.yy, Pi1.yy);\n    vec4 iz0 = Pi0.zzzz;\n    vec4 iz1 = Pi1.zzzz;\n\n    vec4 ixy = permute(permute(ix) + iy);\n    vec4 ixy0 = permute(ixy + iz0);\n    vec4 ixy1 = permute(ixy + iz1);\n\n    vec4 gx0 = ixy0 / 7.0;\n    vec4 gy0 = fract(floor(gx0) / 7.0) - 0.5;\n    gx0 = fract(gx0);\n    vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);\n    vec4 sz0 = step(gz0, vec4(0.0));\n    gx0 -= sz0 * (step(0.0, gx0) - 0.5);\n    gy0 -= sz0 * (step(0.0, gy0) - 0.5);\n\n    vec4 gx1 = ixy1 / 7.0;\n    vec4 gy1 = fract(floor(gx1) / 7.0) - 0.5;\n    gx1 = fract(gx1);\n    vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);\n    vec4 sz1 = step(gz1, vec4(0.0));\n    gx1 -= sz1 * (step(0.0, gx1) - 0.5);\n    gy1 -= sz1 * (step(0.0, gy1) - 0.5);\n\n    vec3 g000 = vec3(gx0.x,gy0.x,gz0.x);\n    vec3 g100 = vec3(gx0.y,gy0.y,gz0.y);\n    vec3 g010 = vec3(gx0.z,gy0.z,gz0.z);\n    vec3 g110 = vec3(gx0.w,gy0.w,gz0.w);\n    vec3 g001 = vec3(gx1.x,gy1.x,gz1.x);\n    vec3 g101 = vec3(gx1.y,gy1.y,gz1.y);\n    vec3 g011 = vec3(gx1.z,gy1.z,gz1.z);\n    vec3 g111 = vec3(gx1.w,gy1.w,gz1.w);\n\n    vec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));\n    g000 *= norm0.x;\n    g010 *= norm0.y;\n    g100 *= norm0.z;\n    g110 *= norm0.w;\n    vec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));\n    g001 *= norm1.x;\n    g011 *= norm1.y;\n    g101 *= norm1.z;\n    g111 *= norm1.w;\n\n    float n000 = dot(g000, Pf0);\n    float n100 = dot(g100, vec3(Pf1.x, Pf0.yz));\n    float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));\n    float n110 = dot(g110, vec3(Pf1.xy, Pf0.z));\n    float n001 = dot(g001, vec3(Pf0.xy, Pf1.z));\n    float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));\n    float n011 = dot(g011, vec3(Pf0.x, Pf1.yz));\n    float n111 = dot(g111, Pf1);\n\n    vec3 fade_xyz = fade(Pf0);\n    vec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);\n    vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);\n    float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x);\n    return 2.2 * n_xyz;\n  }\n\n  void main() {\n    vec2 p = gl_FragCoord.xy / uResolution.xy;\n    float base = p.x * 0.5 + p.y * 0.5;\n\n    float n = cnoise(vec3(p * uScale, uTime * uSpeed)) * 0.5 + 0.5;\n    float n2 = cnoise(vec3(p * (uScale * 1.5) - (n * uWarp), uTime * (uSpeed * 1.2))) * 0.5 + 0.5;\n\n    float mask = (base * 0.2 + n * 0.5 + n2 * 0.3) * uIntensity;\n\n    vec3 color = mix(uColor1, uColor2, smoothstep(0.1, 0.6, mask));\n    color = mix(color, uColor3, smoothstep(0.5, 0.9, mask));\n\n    float grain = fract(sin(dot(p + fract(uTime), vec2(12.9898, 78.233))) * 43758.5453);\n    color += (grain - 0.5) * uGrain;\n\n    gl_FragColor = vec4(color, 1.0);\n  }\n";export{e as GRAPHITE_FS_SOURCE,n as GRAPHITE_VS_SOURCE};

package/dist/esm/components/animation-background/layers.js

@@ -1,369 +1 @@
-import { LUMINA_NOISE_SVG, isLuminaType, FLUID_DEFAULT_COLORS, padColors, toAnimationDurationSec, LUMINA_ANIMATION_DURATION_SEC, toLuminaSpeed } from './lumina-utils.js';
-import { getLuminaPresetColors } from './lumina-presets.js';
-import { getGraphitePreset, GRAPHITE_DEFAULT_COLORS, isGraphitePresetId } from './graphite-presets.js';
-import { getFallingParticleDefaults } from './particle-defaults.js';
-import { CanvasAnimationController } from './canvas-controller.js';
-import { ShaderAnimationController } from './shader-controller.js';
-import { GraphiteShaderController } from './graphite-controller.js';
-
-const CLASS = 'designbase-wc-animation-background';
-const DEFAULT_ANIMATION_TYPE = 'graphite';
-const ANIMATION_TYPES = new Set([
-    'particles',
-    'stars',
-    'snow',
-    'flowers',
-    'confetti',
-    'aurora',
-    'plasma',
-    'mesh-flow',
-    'fluid',
-    'radiant',
-    'ethereal',
-    'graphite',
-]);
-function normalizeAnimationType(raw) {
-    if (!raw || raw === 'gradient')
-        return DEFAULT_ANIMATION_TYPE;
-    return ANIMATION_TYPES.has(raw)
-        ? raw
-        : DEFAULT_ANIMATION_TYPE;
-}
-function parseColors(raw, fallback) {
-    if (!raw)
-        return fallback;
-    try {
-        const parsed = JSON.parse(raw);
-        return Array.isArray(parsed) && parsed.length ? parsed : fallback;
-    }
-    catch {
-        return raw.split(',').map((c) => c.trim()).filter(Boolean);
-    }
-}
-function parseAnimationBackgroundConfig(el) {
-    const type = normalizeAnimationType(el.getAttribute('type'));
-    const theme = el.getAttribute('theme') === 'light' ? 'light' : 'dark';
-    const intensity = (el.getAttribute('intensity') || 'subtle');
-    const defaultColors = ['#667eea', '#764ba2', '#f093fb'];
-    const presetAttr = el.getAttribute('preset') || undefined;
-    const zoomAttr = el.getAttribute('zoom');
-    const isGraphite = type === 'graphite';
-    let zoom = Number(zoomAttr || 1);
-    if (isGraphite && zoomAttr === null) {
-        const presetId = isGraphitePresetId(presetAttr) ? presetAttr : 'graphite';
-        zoom = getGraphitePreset(presetId).scale;
-    }
-    return {
-        type,
-        theme,
-        intensity,
-        blur: Number(el.getAttribute('blur') || 80),
-        speed: Number(el.getAttribute('speed') || 3000),
-        direction: (el.getAttribute('direction') || 'left'),
-        colors: parseColors(el.getAttribute('colors'), isGraphite ? [...GRAPHITE_DEFAULT_COLORS] : defaultColors),
-        opacity: Number(el.getAttribute('opacity') || 1),
-        particleCount: Number(el.getAttribute('particle-count') || (type === 'particles' ? 15 : 50)),
-        particleSize: Number(el.getAttribute('particle-size') || 2),
-        starCount: Number(el.getAttribute('star-count') || 100),
-        starSize: Number(el.getAttribute('star-size') || 1.5),
-        clickable: el.hasAttribute('clickable') && el.getAttribute('clickable') !== 'false',
-        wind: Number(el.getAttribute('wind') || 0.5),
-        noise: Number(el.getAttribute('noise') ?? (isGraphite ? 0.1 : 0.05)),
-        showVignette: !el.hasAttribute('show-vignette') || el.getAttribute('show-vignette') !== 'false',
-        preset: (presetAttr || (isGraphite ? 'graphite' : undefined)),
-        zoom,
-        shaderSpeed: Number(el.getAttribute('shader-speed') || 0.4),
-        shaderIntensity: Number(el.getAttribute('shader-intensity') || 1.2),
-        warp: Number(el.getAttribute('warp') || 1.4),
-        disabled: el.hasAttribute('disabled') && el.getAttribute('disabled') !== 'false',
-    };
-}
-function resolveColors(config) {
-    const { type, preset, colors } = config;
-    if (type === 'graphite') {
-        if (preset && isGraphitePresetId(preset))
-            return [...getGraphitePreset(preset).colors];
-        if (colors.length >= 3)
-            return colors.slice(0, 3);
-        return [...GRAPHITE_DEFAULT_COLORS];
-    }
-    if (preset && !isGraphitePresetId(preset))
-        return getLuminaPresetColors(preset);
-    if (type === 'fluid' && colors.length < 5)
-        return FLUID_DEFAULT_COLORS;
-    if (type === 'snow' || type === 'flowers' || type === 'confetti') {
-        const defaults = getFallingParticleDefaults(type);
-        const isGenericDefault = colors.length === 3 && colors[0] === '#667eea' && colors[1] === '#764ba2';
-        return isGenericDefault ? defaults : colors;
-    }
-    return colors;
-}
-function createMeshAuroraLayer(colors, speed, blur, intensity, theme) {
-    const root = document.createElement('div');
-    root.className = `${CLASS}__aurora-mesh`;
-    const baseOpacity = intensity === 'subtle' ? 0.3 : intensity === 'medium' ? 0.6 : 0.8;
-    const duration = toAnimationDurationSec(speed, 5, 1.25);
-    const palette = colors.length >= 3 ? colors : ['#4f46e5', '#ec4899', '#06b6d4', '#8b5cf6'];
-    const blendMode = theme === 'dark' ? 'screen' : 'multiply';
-    const filterStyle = `blur(${blur}px)`;
-    const blobClass = `${CLASS}__aurora-blob`;
-    const blobs = [
-        { backgroundColor: palette[0], top: '-10%', left: '-10%', animationDuration: `${duration}s`, animationDelay: '0s' },
-        { backgroundColor: palette[1], top: '-10%', right: '-10%', animationDuration: `${duration * 1.2}s`, animationDelay: '2s' },
-        { backgroundColor: palette[2], bottom: '-20%', left: '20%', animationDuration: `${duration * 1.5}s`, animationDelay: '4s' },
-    ];
-    if (palette[3]) {
-        blobs.push({
-            backgroundColor: palette[3],
-            bottom: '-10%',
-            right: '-10%',
-            animationDuration: `${duration * 1.1}s`,
-            animationDelay: '1s',
-        });
-    }
-    blobs.forEach((style) => {
-        const blob = document.createElement('div');
-        blob.className = blobClass;
-        Object.assign(blob.style, {
-            filter: filterStyle,
-            opacity: String(baseOpacity),
-            mixBlendMode: blendMode,
-            ...style,
-        });
-        root.appendChild(blob);
-    });
-    const noise = document.createElement('div');
-    noise.className = `${CLASS}__aurora-noise`;
-    noise.style.opacity = theme === 'dark' ? '0.03' : '0.05';
-    noise.style.backgroundImage = `url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")`;
-    root.appendChild(noise);
-    return root;
-}
-function createPlasmaLayer(colors, speed, blur) {
-    const root = document.createElement('div');
-    root.className = `${CLASS}__plasma`;
-    const animId = Math.random().toString(36).slice(2, 11);
-    const palette = padColors(colors);
-    const c = (idx) => palette[idx % palette.length];
-    const luminaSpeed = toLuminaSpeed(speed);
-    const duration = LUMINA_ANIMATION_DURATION_SEC / luminaSpeed;
-    const style = document.createElement('style');
-    style.textContent = `
-    @keyframes designbase-wc-plasma-move-1-${animId} {
-      0% { transform: translate(0, 0) rotate(0deg) scale(1); }
-      25% { transform: translate(10%, 10%) rotate(90deg) scale(1.2); }
-      50% { transform: translate(0, 20%) rotate(180deg) scale(1); }
-      75% { transform: translate(-10%, 10%) rotate(270deg) scale(0.9); }
-      100% { transform: translate(0, 0) rotate(360deg) scale(1); }
-    }
-    @keyframes designbase-wc-plasma-move-2-${animId} {
-      0% { transform: translate(0, 0) rotate(0deg) scale(1.2); }
-      33% { transform: translate(-20%, 0) rotate(120deg) scale(1); }
-      66% { transform: translate(20%, -10%) rotate(240deg) scale(0.8); }
-      100% { transform: translate(0, 0) rotate(360deg) scale(1.2); }
-    }
-    @keyframes designbase-wc-plasma-move-3-${animId} {
-      0% { transform: translate(0, 0) scale(0.8); }
-      50% { transform: translate(15%, -15%) scale(1.4); }
-      100% { transform: translate(0, 0) scale(0.8); }
-    }
-    @keyframes designbase-wc-plasma-rotate-${animId} {
-      0% { transform: rotate(0deg) scale(1.5); }
-      50% { transform: rotate(180deg) scale(2.0); }
-      100% { transform: rotate(360deg) scale(1.5); }
-    }`;
-    root.appendChild(style);
-    const base = document.createElement('div');
-    base.className = `${CLASS}__plasma-base`;
-    base.style.backgroundColor = c(0);
-    root.appendChild(base);
-    const blobDefs = [
-        { top: '-10%', left: '-10%', width: '70%', height: '70%', background: `radial-gradient(circle, ${c(1)} 0%, transparent 70%)`, animation: `designbase-wc-plasma-move-1-${animId} ${duration}s infinite linear` },
-        { bottom: '-20%', right: '-10%', width: '80%', height: '80%', background: `radial-gradient(circle, ${c(2)} 0%, transparent 70%)`, animation: `designbase-wc-plasma-move-2-${animId} ${duration}s infinite linear` },
-        { top: '20%', left: '20%', width: '60%', height: '60%', background: `radial-gradient(circle, ${c(3)} 0%, transparent 70%)`, animation: `designbase-wc-plasma-rotate-${animId} ${duration}s infinite linear`, extraClass: `${CLASS}__plasma-blob--exclusion` },
-        { top: '40%', right: '20%', width: '40%', height: '40%', background: c(4), animation: `designbase-wc-plasma-move-3-${animId} ${duration}s infinite ease-in-out`, extraClass: `${CLASS}__plasma-blob--accent`, filter: `blur(${blur}px)`, opacity: '0.6' },
-    ];
-    blobDefs.forEach((def) => {
-        const blob = document.createElement('div');
-        blob.className = `${CLASS}__plasma-blob${def.extraClass ? ` ${def.extraClass}` : ''}`;
-        Object.assign(blob.style, {
-            filter: def.filter || `blur(${blur}px)`,
-            opacity: def.opacity || '0.9',
-            ...def,
-        });
-        root.appendChild(blob);
-    });
-    return root;
-}
-function createLuminaOverlays(noise, showVignette) {
-    const fragment = document.createDocumentFragment();
-    if (noise > 0) {
-        const noiseEl = document.createElement('div');
-        noiseEl.className = `${CLASS}__lumina-noise`;
-        noiseEl.style.backgroundImage = `url("${LUMINA_NOISE_SVG}")`;
-        noiseEl.style.opacity = String(noise);
-        fragment.appendChild(noiseEl);
-    }
-    if (showVignette) {
-        const vignette = document.createElement('div');
-        vignette.className = `${CLASS}__lumina-vignette`;
-        fragment.appendChild(vignette);
-    }
-    return fragment;
-}
-function syncLuminaOverlays(layersEl, noise, showVignette) {
-    let noiseEl = layersEl.querySelector(`.${CLASS}__lumina-noise`);
-    let vignetteEl = layersEl.querySelector(`.${CLASS}__lumina-vignette`);
-    if (noise > 0) {
-        if (!noiseEl) {
-            noiseEl = document.createElement('div');
-            noiseEl.className = `${CLASS}__lumina-noise`;
-            noiseEl.style.backgroundImage = `url("${LUMINA_NOISE_SVG}")`;
-            noiseEl.style.mixBlendMode = 'overlay';
-            layersEl.appendChild(noiseEl);
-        }
-        noiseEl.style.opacity = String(noise);
-    }
-    else {
-        noiseEl?.remove();
-    }
-    if (showVignette) {
-        if (!vignetteEl) {
-            vignetteEl = document.createElement('div');
-            vignetteEl.className = `${CLASS}__lumina-vignette`;
-            layersEl.appendChild(vignetteEl);
-        }
-    }
-    else {
-        vignetteEl?.remove();
-    }
-}
-function mountAnimationLayers(layersEl, config) {
-    const resolvedColors = resolveColors(config);
-    let handle = {};
-    if (config.disabled)
-        return handle;
-    switch (config.type) {
-        case 'particles':
-        case 'stars':
-        case 'snow':
-        case 'flowers':
-        case 'confetti': {
-            const container = document.createElement('div');
-            container.className = `${CLASS}__canvas-layer`;
-            layersEl.appendChild(container);
-            const controller = new CanvasAnimationController(container, {
-                type: config.type,
-                colors: resolvedColors,
-                speed: config.speed,
-                particleCount: config.particleCount,
-                particleSize: config.particleSize,
-                starCount: config.starCount,
-                starSize: config.starSize,
-                clickable: config.clickable,
-                wind: config.wind,
-                layerOpacity: config.opacity,
-            });
-            handle = {
-                destroy: () => controller.destroy(),
-                update: (next) => {
-                    const nextColors = resolveColors(next);
-                    controller.updateOptions({
-                        colors: nextColors,
-                        speed: next.speed,
-                        particleCount: next.particleCount,
-                        particleSize: next.particleSize,
-                        starCount: next.starCount,
-                        starSize: next.starSize,
-                        clickable: next.clickable,
-                        wind: next.wind,
-                        layerOpacity: next.opacity,
-                    });
-                },
-            };
-            break;
-        }
-        case 'aurora':
-            layersEl.appendChild(createMeshAuroraLayer(resolvedColors, config.speed, config.blur, config.intensity, config.theme));
-            break;
-        case 'plasma':
-            layersEl.appendChild(createPlasmaLayer(resolvedColors, config.speed, config.blur));
-            layersEl.appendChild(createLuminaOverlays(config.noise, config.showVignette));
-            break;
-        case 'mesh-flow':
-        case 'fluid':
-        case 'radiant':
-        case 'ethereal': {
-            const shaderContainer = document.createElement('div');
-            shaderContainer.className = `${CLASS}__shader-layer`;
-            layersEl.appendChild(shaderContainer);
-            const controller = new ShaderAnimationController(shaderContainer, {
-                variant: config.type,
-                colors: resolvedColors,
-                speed: config.speed,
-                blur: config.blur,
-                noise: config.noise,
-                zoom: config.zoom,
-            });
-            layersEl.appendChild(createLuminaOverlays(config.noise, config.showVignette));
-            handle = {
-                destroy: () => controller.destroy(),
-                update: (next) => {
-                    const nextColors = resolveColors(next);
-                    controller.updateOptions({
-                        colors: nextColors,
-                        speed: next.speed,
-                        blur: next.blur,
-                        noise: next.noise,
-                        zoom: next.zoom,
-                    });
-                },
-            };
-            break;
-        }
-        case 'graphite': {
-            const shaderContainer = document.createElement('div');
-            shaderContainer.className = `${CLASS}__shader-layer`;
-            layersEl.appendChild(shaderContainer);
-            const controller = new GraphiteShaderController(shaderContainer, {
-                colors: resolvedColors,
-                shaderSpeed: config.shaderSpeed,
-                shaderIntensity: config.shaderIntensity,
-                grain: config.noise,
-                scale: config.zoom,
-                warp: config.warp,
-            });
-            handle = {
-                destroy: () => controller.destroy(),
-                update: (next) => {
-                    const nextColors = resolveColors(next);
-                    controller.updateOptions({
-                        colors: nextColors,
-                        shaderSpeed: next.shaderSpeed,
-                        shaderIntensity: next.shaderIntensity,
-                        grain: next.noise,
-                        scale: next.zoom,
-                        warp: next.warp,
-                    });
-                },
-            };
-            break;
-        }
-    }
-    return handle;
-}
-function applyContainerStyles(host, config) {
-    const isLumina = isLuminaType(config.type);
-    const isGraphite = config.type === 'graphite';
-    const backgroundColor = isLumina || isGraphite
-        ? '#000000'
-        : config.theme === 'dark'
-            ? 'var(--db-surface-base, #0f172a)'
-            : 'var(--db-surface-base, #ffffff)';
-    host.style.position = 'relative';
-    host.style.overflow = 'hidden';
-    host.style.backgroundColor = backgroundColor;
-    host.style.border = 'none';
-}
-
-export { CLASS as ANIMATION_BACKGROUND_CLASS, applyContainerStyles, mountAnimationLayers, parseAnimationBackgroundConfig, syncLuminaOverlays };
+import{LUMINA_NOISE_SVG as e,isLuminaType as t,FLUID_DEFAULT_COLORS as a,padColors as r,toAnimationDurationSec as n,LUMINA_ANIMATION_DURATION_SEC as s,toLuminaSpeed as i}from"./lumina-utils.js";import{getLuminaPresetColors as o}from"./lumina-presets.js";import{getGraphitePreset as l,GRAPHITE_DEFAULT_COLORS as d,isGraphitePresetId as m}from"./graphite-presets.js";import{getFallingParticleDefaults as u}from"./particle-defaults.js";import{CanvasAnimationController as p}from"./canvas-controller.js";import{ShaderAnimationController as g}from"./shader-controller.js";import{GraphiteShaderController as b}from"./graphite-controller.js";const f="designbase-wc-animation-background",h="graphite",y=new Set(["particles","stars","snow","flowers","confetti","aurora","plasma","mesh-flow","fluid","radiant","ethereal","graphite"]);function parseColors(e,t){if(!e)return t;try{const a=JSON.parse(e);return Array.isArray(a)&&a.length?a:t}catch{return e.split(",").map(e=>e.trim()).filter(Boolean)}}function parseAnimationBackgroundConfig(e){const t=function normalizeAnimationType(e){return e&&"gradient"!==e&&y.has(e)?e:h}(e.getAttribute("type")),a="light"===e.getAttribute("theme")?"light":"dark",r=e.getAttribute("intensity")||"subtle",n=e.getAttribute("preset")||void 0,s=e.getAttribute("zoom"),i="graphite"===t;let o=Number(s||1);if(i&&null===s){const e=m(n)?n:"graphite";o=l(e).scale}return{type:t,theme:a,intensity:r,blur:Number(e.getAttribute("blur")||80),speed:Number(e.getAttribute("speed")||3e3),direction:e.getAttribute("direction")||"left",colors:parseColors(e.getAttribute("colors"),i?[...d]:["#667eea","#764ba2","#f093fb"]),opacity:Number(e.getAttribute("opacity")||1),particleCount:Number(e.getAttribute("particle-count")||("particles"===t?15:50)),particleSize:Number(e.getAttribute("particle-size")||2),starCount:Number(e.getAttribute("star-count")||100),starSize:Number(e.getAttribute("star-size")||1.5),clickable:e.hasAttribute("clickable")&&"false"!==e.getAttribute("clickable"),wind:Number(e.getAttribute("wind")||.5),noise:Number(e.getAttribute("noise")??(i?.1:.05)),showVignette:!e.hasAttribute("show-vignette")||"false"!==e.getAttribute("show-vignette"),preset:n||(i?"graphite":void 0),zoom:o,shaderSpeed:Number(e.getAttribute("shader-speed")||.4),shaderIntensity:Number(e.getAttribute("shader-intensity")||1.2),warp:Number(e.getAttribute("warp")||1.4),disabled:e.hasAttribute("disabled")&&"false"!==e.getAttribute("disabled")}}function resolveColors(e){const{type:t,preset:r,colors:n}=e;if("graphite"===t)return r&&m(r)?[...l(r).colors]:n.length>=3?n.slice(0,3):[...d];if(r&&!m(r))return o(r);if("fluid"===t&&n.length<5)return a;if("snow"===t||"flowers"===t||"confetti"===t){const e=u(t);return 3===n.length&&"#667eea"===n[0]&&"#764ba2"===n[1]?e:n}return n}function createLuminaOverlays(t,a){const r=document.createDocumentFragment();if(t>0){const a=document.createElement("div");a.className=`${f}__lumina-noise`,a.style.backgroundImage=`url("${e}")`,a.style.opacity=String(t),r.appendChild(a)}if(a){const e=document.createElement("div");e.className=`${f}__lumina-vignette`,r.appendChild(e)}return r}function syncLuminaOverlays(t,a,r){let n=t.querySelector(`.${f}__lumina-noise`),s=t.querySelector(`.${f}__lumina-vignette`);a>0?(n||(n=document.createElement("div"),n.className=`${f}__lumina-noise`,n.style.backgroundImage=`url("${e}")`,n.style.mixBlendMode="overlay",t.appendChild(n)),n.style.opacity=String(a)):n?.remove(),r?s||(s=document.createElement("div"),s.className=`${f}__lumina-vignette`,t.appendChild(s)):s?.remove()}function mountAnimationLayers(e,t){const a=resolveColors(t);let o={};if(t.disabled)return o;switch(t.type){case"particles":case"stars":case"snow":case"flowers":case"confetti":{const r=document.createElement("div");r.className=`${f}__canvas-layer`,e.appendChild(r);const n=new p(r,{type:t.type,colors:a,speed:t.speed,particleCount:t.particleCount,particleSize:t.particleSize,starCount:t.starCount,starSize:t.starSize,clickable:t.clickable,wind:t.wind,layerOpacity:t.opacity});o={destroy:()=>n.destroy(),update:e=>{const t=resolveColors(e);n.updateOptions({colors:t,speed:e.speed,particleCount:e.particleCount,particleSize:e.particleSize,starCount:e.starCount,starSize:e.starSize,clickable:e.clickable,wind:e.wind,layerOpacity:e.opacity})}};break}case"aurora":e.appendChild(function createMeshAuroraLayer(e,t,a,r,s){const i=document.createElement("div");i.className=`${f}__aurora-mesh`;const o="subtle"===r?.3:"medium"===r?.6:.8,l=n(t,5,1.25),d=e.length>=3?e:["#4f46e5","#ec4899","#06b6d4","#8b5cf6"],m="dark"===s?"screen":"multiply",u=`blur(${a}px)`,p=`${f}__aurora-blob`,g=[{backgroundColor:d[0],top:"-10%",left:"-10%",animationDuration:`${l}s`,animationDelay:"0s"},{backgroundColor:d[1],top:"-10%",right:"-10%",animationDuration:1.2*l+"s",animationDelay:"2s"},{backgroundColor:d[2],bottom:"-20%",left:"20%",animationDuration:1.5*l+"s",animationDelay:"4s"}];d[3]&&g.push({backgroundColor:d[3],bottom:"-10%",right:"-10%",animationDuration:1.1*l+"s",animationDelay:"1s"}),g.forEach(e=>{const t=document.createElement("div");t.className=p,Object.assign(t.style,{filter:u,opacity:String(o),mixBlendMode:m,...e}),i.appendChild(t)});const b=document.createElement("div");return b.className=`${f}__aurora-noise`,b.style.opacity="dark"===s?"0.03":"0.05",b.style.backgroundImage="url(\"data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E\")",i.appendChild(b),i}(a,t.speed,t.blur,t.intensity,t.theme));break;case"plasma":e.appendChild(function createPlasmaLayer(e,t,a){const n=document.createElement("div");n.className=`${f}__plasma`;const o=Math.random().toString(36).slice(2,11),l=r(e),c=e=>l[e%l.length],d=i(t),m=s/d,u=document.createElement("style");u.textContent=`\n    @keyframes designbase-wc-plasma-move-1-${o} {\n      0% { transform: translate(0, 0) rotate(0deg) scale(1); }\n      25% { transform: translate(10%, 10%) rotate(90deg) scale(1.2); }\n      50% { transform: translate(0, 20%) rotate(180deg) scale(1); }\n      75% { transform: translate(-10%, 10%) rotate(270deg) scale(0.9); }\n      100% { transform: translate(0, 0) rotate(360deg) scale(1); }\n    }\n    @keyframes designbase-wc-plasma-move-2-${o} {\n      0% { transform: translate(0, 0) rotate(0deg) scale(1.2); }\n      33% { transform: translate(-20%, 0) rotate(120deg) scale(1); }\n      66% { transform: translate(20%, -10%) rotate(240deg) scale(0.8); }\n      100% { transform: translate(0, 0) rotate(360deg) scale(1.2); }\n    }\n    @keyframes designbase-wc-plasma-move-3-${o} {\n      0% { transform: translate(0, 0) scale(0.8); }\n      50% { transform: translate(15%, -15%) scale(1.4); }\n      100% { transform: translate(0, 0) scale(0.8); }\n    }\n    @keyframes designbase-wc-plasma-rotate-${o} {\n      0% { transform: rotate(0deg) scale(1.5); }\n      50% { transform: rotate(180deg) scale(2.0); }\n      100% { transform: rotate(360deg) scale(1.5); }\n    }`,n.appendChild(u);const p=document.createElement("div");return p.className=`${f}__plasma-base`,p.style.backgroundColor=c(0),n.appendChild(p),[{top:"-10%",left:"-10%",width:"70%",height:"70%",background:`radial-gradient(circle, ${c(1)} 0%, transparent 70%)`,animation:`designbase-wc-plasma-move-1-${o} ${m}s infinite linear`},{bottom:"-20%",right:"-10%",width:"80%",height:"80%",background:`radial-gradient(circle, ${c(2)} 0%, transparent 70%)`,animation:`designbase-wc-plasma-move-2-${o} ${m}s infinite linear`},{top:"20%",left:"20%",width:"60%",height:"60%",background:`radial-gradient(circle, ${c(3)} 0%, transparent 70%)`,animation:`designbase-wc-plasma-rotate-${o} ${m}s infinite linear`,extraClass:`${f}__plasma-blob--exclusion`},{top:"40%",right:"20%",width:"40%",height:"40%",background:c(4),animation:`designbase-wc-plasma-move-3-${o} ${m}s infinite ease-in-out`,extraClass:`${f}__plasma-blob--accent`,filter:`blur(${a}px)`,opacity:"0.6"}].forEach(e=>{const t=document.createElement("div");t.className=`${f}__plasma-blob${e.extraClass?` ${e.extraClass}`:""}`,Object.assign(t.style,{filter:e.filter||`blur(${a}px)`,opacity:e.opacity||"0.9",...e}),n.appendChild(t)}),n}(a,t.speed,t.blur)),e.appendChild(createLuminaOverlays(t.noise,t.showVignette));break;case"mesh-flow":case"fluid":case"radiant":case"ethereal":{const r=document.createElement("div");r.className=`${f}__shader-layer`,e.appendChild(r);const n=new g(r,{variant:t.type,colors:a,speed:t.speed,blur:t.blur,noise:t.noise,zoom:t.zoom});e.appendChild(createLuminaOverlays(t.noise,t.showVignette)),o={destroy:()=>n.destroy(),update:e=>{const t=resolveColors(e);n.updateOptions({colors:t,speed:e.speed,blur:e.blur,noise:e.noise,zoom:e.zoom})}};break}case"graphite":{const r=document.createElement("div");r.className=`${f}__shader-layer`,e.appendChild(r);const n=new b(r,{colors:a,shaderSpeed:t.shaderSpeed,shaderIntensity:t.shaderIntensity,grain:t.noise,scale:t.zoom,warp:t.warp});o={destroy:()=>n.destroy(),update:e=>{const t=resolveColors(e);n.updateOptions({colors:t,shaderSpeed:e.shaderSpeed,shaderIntensity:e.shaderIntensity,grain:e.noise,scale:e.zoom,warp:e.warp})}};break}}return o}function applyContainerStyles(e,a){const r=t(a.type),n="graphite"===a.type,s=r||n?"#000000":"dark"===a.theme?"var(--db-surface-base, #0f172a)":"var(--db-surface-base, #ffffff)";e.style.position="relative",e.style.overflow="hidden",e.style.backgroundColor=s,e.style.border="none"}export{f as ANIMATION_BACKGROUND_CLASS,applyContainerStyles,mountAnimationLayers,parseAnimationBackgroundConfig,syncLuminaOverlays};

package/dist/esm/components/animation-background/lumina-presets.js

@@ -1,53 +1 @@
-const LUMINA_COLOR_PRESETS = [
-    {
-        id: 'neon_dream',
-        name: 'Neon Dream',
-        colors: ['#7000FF', '#FF00AA', '#3300FF', '#FFCC00', '#00FFFF'],
-    },
-    {
-        id: 'sunset_bliss',
-        name: 'Sunset Bliss',
-        colors: ['#FF9900', '#FF00CC', '#6600FF', '#FF5500', '#220055'],
-    },
-    {
-        id: 'deep_ocean',
-        name: 'Deep Ocean',
-        colors: ['#001133', '#0044FF', '#00DDFF', '#00FFAA', '#000066'],
-    },
-    {
-        id: 'forest_mist',
-        name: 'Forest Mist',
-        colors: ['#002200', '#00FF44', '#AAFF00', '#006622', '#CCFFCC'],
-    },
-    {
-        id: 'northern_lights',
-        name: 'Northern Lights',
-        colors: ['#000000', '#00FF99', '#AA00FF', '#0044FF', '#FFFFFF'],
-    },
-    {
-        id: 'monochrome_fog',
-        name: 'Monochrome Fog',
-        colors: ['#000000', '#333333', '#888888', '#CCCCCC', '#FFFFFF'],
-    },
-    {
-        id: 'cotton_candy',
-        name: 'Cotton Candy',
-        colors: ['#FFC0CB', '#87CEFA', '#E0FFFF', '#DDA0DD', '#FF69B4'],
-    },
-    {
-        id: 'cyber_glitch',
-        name: 'Cyber Glitch',
-        colors: ['#1A1A1D', '#C3073F', '#6F2232', '#950740', '#4E4E50'],
-    },
-    {
-        id: 'golden_hour',
-        name: 'Golden Hour',
-        colors: ['#FF4E50', '#FC913A', '#F9D423', '#EDE574', '#E1F5C4'],
-    },
-];
-function getLuminaPresetColors(presetId) {
-    const preset = LUMINA_COLOR_PRESETS.find((p) => p.id === presetId);
-    return preset?.colors ?? LUMINA_COLOR_PRESETS[0].colors;
-}
-
-export { LUMINA_COLOR_PRESETS, getLuminaPresetColors };
+const F=[{id:"neon_dream",name:"Neon Dream",colors:["#7000FF","#FF00AA","#3300FF","#FFCC00","#00FFFF"]},{id:"sunset_bliss",name:"Sunset Bliss",colors:["#FF9900","#FF00CC","#6600FF","#FF5500","#220055"]},{id:"deep_ocean",name:"Deep Ocean",colors:["#001133","#0044FF","#00DDFF","#00FFAA","#000066"]},{id:"forest_mist",name:"Forest Mist",colors:["#002200","#00FF44","#AAFF00","#006622","#CCFFCC"]},{id:"northern_lights",name:"Northern Lights",colors:["#000000","#00FF99","#AA00FF","#0044FF","#FFFFFF"]},{id:"monochrome_fog",name:"Monochrome Fog",colors:["#000000","#333333","#888888","#CCCCCC","#FFFFFF"]},{id:"cotton_candy",name:"Cotton Candy",colors:["#FFC0CB","#87CEFA","#E0FFFF","#DDA0DD","#FF69B4"]},{id:"cyber_glitch",name:"Cyber Glitch",colors:["#1A1A1D","#C3073F","#6F2232","#950740","#4E4E50"]},{id:"golden_hour",name:"Golden Hour",colors:["#FF4E50","#FC913A","#F9D423","#EDE574","#E1F5C4"]}];function getLuminaPresetColors(o){const e=F.find(F=>F.id===o);return e?.colors??F[0].colors}export{F as LUMINA_COLOR_PRESETS,getLuminaPresetColors};