@designbasekorea/ui-wc 0.2.2 → 0.4.0

package/dist/esm/components/animation-background/canvas-controller.js

@@ -1 +1 @@
-import{drawFallingParticles as e,drawStars as t,drawParticles as s}from"./renderers.js";const i=["snow","flowers","confetti"];class CanvasAnimationController{constructor(n,a){this.options=a,this.raf=0,this.frameCount=0,this.mouse={x:-9999,y:-9999},this.particlesRef={current:[]},this.starsRef={current:[]},this.fallingRef={current:[]},this.tick=()=>{const n=this.canvas.getContext("2d");if(!n)return void(this.raf=requestAnimationFrame(this.tick));const a=window.devicePixelRatio||1,o=this.canvas.width/a,r=this.canvas.height/a,{type:c,colors:h,speed:l,particleCount:u,particleSize:v,starCount:m,starSize:d,clickable:f,wind:p,layerOpacity:w}=this.options;n.clearRect(0,0,o,r);const g=this.frameCount*(3e3/(l||3e3));switch(this.frameCount+=1,c){case"particles":s(n,o,r,this.particlesRef,{count:u,colors:h,size:v,mouse:this.mouse,clickable:f});break;case"stars":t(n,o,r,this.starsRef,{count:m,colors:h,size:d,time:g});break;case"snow":case"flowers":case"confetti":(function isFallingType(e){return i.includes(e)})(c)&&e(n,o,r,this.fallingRef,c,{count:u,colors:h,size:v,speed:l,wind:p,layerOpacity:w})}this.raf=requestAnimationFrame(this.tick)},this.container=n,this.canvas=document.createElement("canvas"),this.canvas.className="designbase-wc-animation-background__canvas",n.appendChild(this.canvas),this.onResize=()=>this.resize(),this.onMouseMove=e=>{if("particles"!==a.type)return;const t=n.getBoundingClientRect();this.mouse={x:e.clientX-t.left,y:e.clientY-t.top}},this.onMouseLeave=()=>{this.mouse={x:-9999,y:-9999}},n.addEventListener("mousemove",this.onMouseMove),n.addEventListener("mouseleave",this.onMouseLeave),window.addEventListener("resize",this.onResize),this.particlesRef.current=[],this.starsRef.current=[],this.fallingRef.current=[],this.frameCount=0,this.resize(),this.tick()}destroy(){cancelAnimationFrame(this.raf),this.container.removeEventListener("mousemove",this.onMouseMove),this.container.removeEventListener("mouseleave",this.onMouseLeave),window.removeEventListener("resize",this.onResize),this.canvas.remove()}resize(){const e=window.devicePixelRatio||1,t=this.container.getBoundingClientRect();this.canvas.width=t.width*e,this.canvas.height=t.height*e,this.canvas.style.width=`${t.width}px`,this.canvas.style.height=`${t.height}px`;const s=this.canvas.getContext("2d");s&&s.setTransform(e,0,0,e,0,0)}}export{CanvasAnimationController};
+import{drawFallingParticles as e,drawStars as t,drawParticles as s}from"./renderers.js";import{toSpeedRate as i}from"./lumina-utils.js";const n=["snow","flowers","confetti"];class CanvasAnimationController{constructor(o,a){this.raf=0,this.frameCount=0,this.mouse={x:-9999,y:-9999},this.particlesRef={current:[]},this.starsRef={current:[]},this.fallingRef={current:[]},this.tick=()=>{const o=this.canvas.getContext("2d");if(!o)return void(this.raf=requestAnimationFrame(this.tick));const a=window.devicePixelRatio||1,r=this.canvas.width/a,c=this.canvas.height/a,{type:h,colors:l,speed:u,particleCount:v,particleSize:m,starCount:d,starSize:p,clickable:f,wind:w,layerOpacity:R}=this.options;o.clearRect(0,0,r,c);const g=i(u),y=this.frameCount*g;switch(this.frameCount+=1,h){case"particles":s(o,r,c,this.particlesRef,{count:v,colors:l,size:m,speed:u,mouse:this.mouse,clickable:f,layerOpacity:R});break;case"stars":t(o,r,c,this.starsRef,{count:d,colors:l,size:p,time:y,layerOpacity:R,speedRate:g});break;case"snow":case"flowers":case"confetti":(function isFallingType(e){return n.includes(e)})(h)&&e(o,r,c,this.fallingRef,h,{count:v,colors:l,size:m,speed:u,wind:w,layerOpacity:R})}this.raf=requestAnimationFrame(this.tick)},this.container=o,this.options=a,this.canvas=document.createElement("canvas"),this.canvas.className="designbase-wc-animation-background__canvas",o.appendChild(this.canvas),this.onResize=()=>this.resize(),this.onMouseMove=e=>{if("particles"!==this.options.type)return;const t=this.container.getBoundingClientRect();this.mouse={x:e.clientX-t.left,y:e.clientY-t.top}},this.onMouseLeave=()=>{this.mouse={x:-9999,y:-9999}},o.addEventListener("mousemove",this.onMouseMove),o.addEventListener("mouseleave",this.onMouseLeave),window.addEventListener("resize",this.onResize),this.particlesRef.current=[],this.starsRef.current=[],this.fallingRef.current=[],this.frameCount=0,this.resize(),this.tick()}updateOptions(e){this.options={...this.options,...e}}destroy(){cancelAnimationFrame(this.raf),this.container.removeEventListener("mousemove",this.onMouseMove),this.container.removeEventListener("mouseleave",this.onMouseLeave),window.removeEventListener("resize",this.onResize),this.canvas.remove()}resize(){const e=window.devicePixelRatio||1,t=this.container.getBoundingClientRect();this.canvas.width=t.width*e,this.canvas.height=t.height*e,this.canvas.style.width=`${t.width}px`,this.canvas.style.height=`${t.height}px`;const s=this.canvas.getContext("2d");s&&s.setTransform(e,0,0,e,0,0)}}export{CanvasAnimationController};

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

@@ -0,0 +1 @@
+import{GRAPHITE_PRESET_IDS as e}from"./graphite-presets.js";const t=3e3,r={speed:{attr:"speed",label:"Speed (×)",kind:"range",min:500,max:12e3,step:100,default:t,display:{min:.2,max:4,step:.1,fixed:1,fromAttr:e=>{const r=Math.min(12e3,Math.max(500,e));return Math.round(r/t*10)/10},toAttr:e=>{const r=Math.min(4,Math.max(.2,e));return Math.round(r*t)}}},blur:{attr:"blur",label:"Blur",kind:"range",min:0,max:200,step:2,default:80},opacity:{attr:"opacity",label:"Opacity",kind:"range",min:0,max:1,step:.05,default:1,fixed:2},noise:{attr:"noise",label:"Noise",kind:"range",min:0,max:.4,step:.01,default:.05,fixed:2},zoom:{attr:"zoom",label:"Zoom",kind:"range",min:.5,max:3,step:.1,default:1,fixed:1},particleCount:{attr:"particle-count",label:"Particle Count",kind:"range",min:10,max:250,step:5,default:50},particleCountParticles:{attr:"particle-count",label:"Particle Count",kind:"range",min:10,max:250,step:5,default:15},particleSize:{attr:"particle-size",label:"Particle Size",kind:"range",min:1,max:10,step:.5,default:2,fixed:1},starCount:{attr:"star-count",label:"Star Count",kind:"range",min:20,max:500,step:10,default:100},starSize:{attr:"star-size",label:"Star Size",kind:"range",min:.5,max:6,step:.5,default:1.5,fixed:1},wind:{attr:"wind",label:"Wind",kind:"range",min:0,max:3,step:.1,default:.5,fixed:1},direction:{attr:"direction",label:"Direction",kind:"select",options:["left","right","up","down","diagonal","radial"],default:"left"},intensity:{attr:"intensity",label:"Intensity",kind:"select",options:["subtle","medium","vivid"],default:"subtle"},theme:{attr:"theme",label:"Theme",kind:"select",options:["dark","light"],default:"dark"},preset:{attr:"preset",label:"Preset",kind:"select",options:["(none)","neon_dream","sunset_bliss","deep_ocean","forest_mist","northern_lights","monochrome_fog","cotton_candy","cyber_glitch","golden_hour"],default:"(none)"},showVignette:{attr:"show-vignette",label:"Vignette",kind:"toggle",default:!0},shaderSpeed:{attr:"shader-speed",label:"Speed",kind:"range",min:0,max:3,step:.01,default:.4,fixed:2},shaderIntensity:{attr:"shader-intensity",label:"Intensity",kind:"range",min:.1,max:3,step:.01,default:1.2,fixed:2},grain:{attr:"noise",label:"Grain",kind:"range",min:0,max:.5,step:.01,default:.1,fixed:2},scale:{attr:"zoom",label:"Scale",kind:"range",min:.5,max:5,step:.1,default:1,fixed:1},warp:{attr:"warp",label:"Warp",kind:"range",min:0,max:2,step:.05,default:1.4,fixed:2},graphiteTheme:{attr:"preset",label:"Theme",kind:"select",options:[...e],default:"graphite"}};function colors(e){return{attr:"colors",label:"Colors",kind:"colors",default:e}}const a={particles:[r.particleCountParticles,r.particleSize,r.speed,r.opacity,colors(["#60a5fa","#a78bfa","#f472b6"])],stars:[r.starCount,r.starSize,r.speed,r.opacity,colors(["#ffffff","#e0e7ff","#c7d2fe"])],snow:[r.particleCount,r.particleSize,r.speed,r.wind,colors(["#ffffff","#f0f9ff","#e0f2fe"])],flowers:[r.particleCount,r.particleSize,r.speed,r.wind,colors(["#ffb7c5","#ff91a4","#f8c8dc","#ffc0cb"])],confetti:[r.particleCount,r.particleSize,r.speed,r.wind,colors(["#f44336","#e91e63","#9c27b0","#2196f3","#4caf50","#ffeb3b"])],aurora:[r.intensity,r.blur,r.speed,r.theme,colors(["#4f46e5","#ec4899","#06b6d4","#8b5cf6"])],plasma:[r.speed,r.blur,r.noise,r.showVignette,r.preset,colors(["#7000FF","#FF00AA","#3300FF","#FFCC00","#00FFFF"])],"mesh-flow":[r.speed,r.blur,r.noise,r.zoom,colors(["#4f46e5","#ec4899","#06b6d4","#8b5cf6","#22d3ee"])],fluid:[r.speed,r.blur,r.noise,r.zoom,colors(["#001133","#0044FF","#00DDFF","#00FFAA","#000066"])],radiant:[r.speed,r.blur,r.noise,r.zoom,colors(["#FF4E50","#FC913A","#F9D423","#EDE574","#E1F5C4"])],ethereal:[r.speed,r.blur,r.noise,r.zoom,colors(["#7000FF","#FF00AA","#00FFFF","#FFFFFF","#3300FF"])],graphite:[r.shaderSpeed,r.shaderIntensity,r.grain,r.scale,r.warp,r.graphiteTheme,colors(["#000000","#333333","#b3b3b3"])]};function getControlsForType(e){return a[e]??a.graphite}function getControlSliderBounds(e){return e.display?{min:e.display.min,max:e.display.max,step:e.display.step,fixed:e.display.fixed}:{min:e.min??0,max:e.max??100,step:e.step??1,fixed:e.fixed}}function controlAttrToSlider(e,t){return e.display?e.display.fromAttr(t):t}function controlSliderToAttr(e,t){return e.display?e.display.toAttr(t):t}function readControlValue(e,t){const r=e.getAttribute(t.attr);if("colors"===t.kind){if(!r)return[...t.default];try{const e=JSON.parse(r);return Array.isArray(e)&&e.length?[...e]:[...t.default]}catch{const e=r.split(",").map(e=>e.trim()).filter(Boolean);return e.length?e:[...t.default]}}if("toggle"===t.kind)return null===r?t.default:"false"!==r;if("select"===t.kind)return r||t.default;if(null===r||""===r)return t.default;const a=Number(r);return Number.isFinite(a)?a:t.default}function writeControlAttribute(e,t,r){"colors"!==t.kind?"toggle"!==t.kind?"select"!==t.kind?e.setAttribute(t.attr,String(r)):"(none)"===r?e.removeAttribute(t.attr):e.setAttribute(t.attr,String(r)):e.setAttribute(t.attr,r?"true":"false"):e.setAttribute(t.attr,JSON.stringify(r))}function resetControlsToDefaults(e,t){t.forEach(t=>{const r=t.default;"select"!==t.kind||r!==t.default?writeControlAttribute(e,t,Array.isArray(r)?[...r]:r):"(none)"===r?e.removeAttribute(t.attr):writeControlAttribute(e,t,r)})}export{controlAttrToSlider,controlSliderToAttr,getControlSliderBounds,getControlsForType,readControlValue,resetControlsToDefaults,writeControlAttribute};

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

@@ -0,0 +1 @@
+import{hexToRgb as r}from"./lumina-utils.js";import{GRAPHITE_VS_SOURCE as e,GRAPHITE_FS_SOURCE as t}from"./graphite-shader.js";const i=.05;function loadShader(r,e,t){const i=r.createShader(e);return i?(r.shaderSource(i,t),r.compileShader(i),r.getShaderParameter(i,r.COMPILE_STATUS)?i:(r.deleteShader(i),null)):null}function lerp(r,e,t){return r+(e-r)*t}function lerpRgb(r,e,t){return[lerp(r[0],e[0],t),lerp(r[1],e[1],t),lerp(r[2],e[2],t)]}class GraphiteShaderController{constructor(r,e){this.raf=0,this.startTime=performance.now(),this.current={shaderSpeed:0,shaderIntensity:0,grain:0,scale:0,warp:0,color1:[0,0,0],color2:[0,0,0],color3:[0,0,0]},this.render=()=>{const r=this.gl,e=this.program,t=this.positionBuffer;if(!r||!e||!t)return;this.tickLerp();const{width:i,height:n}=this.resizeCanvas();if(0===i||0===n)return void(this.raf=requestAnimationFrame(this.render));r.viewport(0,0,i,n),r.useProgram(e);const s=r.getAttribLocation(e,"aVertexPosition"),o=r.getUniformLocation(e,"uResolution"),a=r.getUniformLocation(e,"uTime"),h=r.getUniformLocation(e,"uSpeed"),c=r.getUniformLocation(e,"uIntensity"),u=r.getUniformLocation(e,"uGrain"),l=r.getUniformLocation(e,"uScale"),d=r.getUniformLocation(e,"uWarp"),f=r.getUniformLocation(e,"uColor1"),m=r.getUniformLocation(e,"uColor2"),p=r.getUniformLocation(e,"uColor3");r.enableVertexAttribArray(s),r.bindBuffer(r.ARRAY_BUFFER,t),r.vertexAttribPointer(s,2,r.FLOAT,!1,0,0);const g=(performance.now()-this.startTime)/1e3;o&&r.uniform2f(o,i,n),a&&r.uniform1f(a,g),h&&r.uniform1f(h,this.current.shaderSpeed),c&&r.uniform1f(c,this.current.shaderIntensity),u&&r.uniform1f(u,this.current.grain),l&&r.uniform1f(l,this.current.scale),d&&r.uniform1f(d,this.current.warp),f&&r.uniform3fv(f,this.current.color1),m&&r.uniform3fv(m,this.current.color2),p&&r.uniform3fv(p,this.current.color3),r.drawArrays(r.TRIANGLE_STRIP,0,4),this.raf=requestAnimationFrame(this.render)},this.container=r,this.options=e,this.canvas=document.createElement("canvas"),this.canvas.className="designbase-wc-animation-background__shader-canvas",r.appendChild(this.canvas),this.syncCurrentImmediate(e),this.init()}updateOptions(r){this.options={...this.options,...r}}syncCurrentImmediate(e){const[t,i,n]=this.resolveColors(e.colors);this.current={shaderSpeed:e.shaderSpeed,shaderIntensity:e.shaderIntensity,grain:e.grain,scale:e.scale,warp:e.warp,color1:r(t),color2:r(i),color3:r(n)}}resolveColors(r){return[r[0]??"#000000",r[1]??"#333333",r[2]??"#b3b3b3"]}resizeCanvas(){const r=this.container.getBoundingClientRect(),e=window.devicePixelRatio||1;return this.canvas.width=Math.max(1,r.width*e),this.canvas.height=Math.max(1,r.height*e),this.canvas.style.width=`${r.width}px`,this.canvas.style.height=`${r.height}px`,{width:this.canvas.width,height:this.canvas.height}}init(){const r=this.canvas.getContext("webgl");if(!r)return;this.gl=r;const i=r.createProgram();if(!i)return;const n=loadShader(r,r.VERTEX_SHADER,e),s=loadShader(r,r.FRAGMENT_SHADER,t);if(!n||!s)return;if(r.attachShader(i,n),r.attachShader(i,s),r.linkProgram(i),!r.getProgramParameter(i,r.LINK_STATUS))return;this.program=i,this.vertexShader=n,this.fragmentShader=s;const o=r.createBuffer();o&&(this.positionBuffer=o,r.bindBuffer(r.ARRAY_BUFFER,o),r.bufferData(r.ARRAY_BUFFER,new Float32Array([-1,-1,1,-1,-1,1,1,1]),r.STATIC_DRAW),this.observer=new ResizeObserver(()=>this.resizeCanvas()),this.observer.observe(this.container),this.startTime=performance.now(),this.render())}tickLerp(){const{colors:e,shaderSpeed:t,shaderIntensity:n,grain:s,scale:o,warp:a}=this.options,[h,c,u]=this.resolveColors(e),l=r(h),d=r(c),f=r(u);this.current.shaderSpeed=lerp(this.current.shaderSpeed,t,i),this.current.shaderIntensity=lerp(this.current.shaderIntensity,n,i),this.current.grain=lerp(this.current.grain,s,i),this.current.scale=lerp(this.current.scale,o,i),this.current.warp=lerp(this.current.warp,a,i),this.current.color1=lerpRgb(this.current.color1,l,i),this.current.color2=lerpRgb(this.current.color2,d,i),this.current.color3=lerpRgb(this.current.color3,f,i)}destroy(){cancelAnimationFrame(this.raf),this.observer?.disconnect();const r=this.gl;r&&this.program&&(this.vertexShader&&r.deleteShader(this.vertexShader),this.fragmentShader&&r.deleteShader(this.fragmentShader),this.positionBuffer&&r.deleteBuffer(this.positionBuffer),r.deleteProgram(this.program)),this.canvas.remove()}}export{GraphiteShaderController};

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

@@ -0,0 +1 @@
+const e={graphite:{id:"graphite",colors:["#000000","#333333","#b3b3b3"],scale:1},abyss:{id:"abyss",colors:["#020617","#0f172a","#3b82f6"],scale:2.2},cherry:{id:"cherry",colors:["#1a0505","#4a0b1c","#e11d48"],scale:2.8},forest:{id:"forest",colors:["#021207","#064e3b","#10b981"],scale:2},sunset:{id:"sunset",colors:["#170500","#7c2d12","#f97316"],scale:3},amethyst:{id:"amethyst",colors:["#0f051a","#3b0764","#a855f7"],scale:2.4}},s=e.graphite.colors,r=Object.keys(e);function isGraphitePresetId(s){return Boolean(s&&s in e)}function getGraphitePreset(s){return e[s]}export{s as GRAPHITE_DEFAULT_COLORS,e as GRAPHITE_PRESETS,r as GRAPHITE_PRESET_IDS,getGraphitePreset,isGraphitePresetId};

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

@@ -0,0 +1 @@
+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 +1 @@
-import{isLuminaType as e,FLUID_DEFAULT_COLORS as t,padColors as a,LUMINA_NOISE_SVG as r,LUMINA_ANIMATION_DURATION_SEC as n,toLuminaSpeed as i}from"./lumina-utils.js";import{getLuminaPresetColors as s}from"./lumina-presets.js";import{getFallingParticleDefaults as o}from"./particle-defaults.js";import{CanvasAnimationController as l}from"./canvas-controller.js";import{ShaderAnimationController as d}from"./shader-controller.js";const m="designbase-wc-animation-background";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){return{type:e.getAttribute("type")||"gradient",theme:"light"===e.getAttribute("theme")?"light":"dark",intensity:e.getAttribute("intensity")||"subtle",blur:Number(e.getAttribute("blur")||80),speed:Number(e.getAttribute("speed")||3e3),direction:e.getAttribute("direction")||"left",colors:parseColors(e.getAttribute("colors"),["#667eea","#764ba2","#f093fb"]),opacity:Number(e.getAttribute("opacity")||1),particleCount:Number(e.getAttribute("particle-count")||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),showGrid:e.hasAttribute("show-grid")&&"false"!==e.getAttribute("show-grid"),gridSize:Number(e.getAttribute("grid-size")||40),gridColor:e.getAttribute("grid-color")||void 0,gridOpacity:Number(e.getAttribute("grid-opacity")||.1),noise:Number(e.getAttribute("noise")||.05),showVignette:!e.hasAttribute("show-vignette")||"false"!==e.getAttribute("show-vignette"),preset:e.getAttribute("preset")||void 0,zoom:Number(e.getAttribute("zoom")||1),disabled:e.hasAttribute("disabled")&&"false"!==e.getAttribute("disabled")}}function createLuminaOverlays(e,t){const a=document.createDocumentFragment();if(e>0){const t=document.createElement("div");t.className=`${m}__lumina-noise`,t.style.backgroundImage=`url("${r}")`,t.style.opacity=String(e),a.appendChild(t)}if(t){const e=document.createElement("div");e.className=`${m}__lumina-vignette`,a.appendChild(e)}return a}function mountAnimationLayers(e,r){const u=function resolveColors(e){const{type:a,preset:r,colors:n}=e;if(r)return s(r);if("fluid"===a&&n.length<5)return t;if("snow"===a||"flowers"===a||"confetti"===a){const e=o(a);return 3===n.length&&"#667eea"===n[0]&&"#764ba2"===n[1]?e:n}return n}(r);let g={};if(r.disabled)return g;switch(r.type){case"particles":case"stars":case"snow":case"flowers":case"confetti":{const t=document.createElement("div");t.className=`${m}__canvas-layer`,e.appendChild(t);const a=new l(t,{type:r.type,colors:u,speed:r.speed,particleCount:r.particleCount,particleSize:r.particleSize,starCount:r.starCount,starSize:r.starSize,clickable:r.clickable,wind:r.wind,layerOpacity:r.opacity});g={destroy:()=>a.destroy()};break}case"aurora":e.appendChild(function createMeshAuroraLayer(e,t,a,r,n){const i=document.createElement("div");i.className=`${m}__aurora-mesh`;const s="subtle"===r?.3:"medium"===r?.6:.8,o=Math.max(5,t/1e3),l=e.length>=3?e:["#4f46e5","#ec4899","#06b6d4","#8b5cf6"],d="dark"===n?"screen":"multiply",u=`blur(${a}px)`,g=`${m}__aurora-blob`,p=[{backgroundColor:l[0],top:"-10%",left:"-10%",animationDuration:`${o}s`,animationDelay:"0s"},{backgroundColor:l[1],top:"-10%",right:"-10%",animationDuration:1.2*o+"s",animationDelay:"2s"},{backgroundColor:l[2],bottom:"-20%",left:"20%",animationDuration:1.5*o+"s",animationDelay:"4s"}];l[3]&&p.push({backgroundColor:l[3],bottom:"-10%",right:"-10%",animationDuration:1.1*o+"s",animationDelay:"1s"}),p.forEach(e=>{const t=document.createElement("div");t.className=g,Object.assign(t.style,{filter:u,opacity:String(s),mixBlendMode:d,...e}),i.appendChild(t)});const b=document.createElement("div");return b.className=`${m}__aurora-noise`,b.style.opacity="dark"===n?"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}(u,r.speed,r.blur,r.intensity,r.theme));break;case"plasma":e.appendChild(function createPlasmaLayer(e,t,r){const s=document.createElement("div");s.className=`${m}__plasma`;const o=Math.random().toString(36).slice(2,11),l=a(e),c=e=>l[e%l.length],d=i(t),u=n/d,g=document.createElement("style");g.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    }`,s.appendChild(g);const p=document.createElement("div");return p.className=`${m}__plasma-base`,p.style.backgroundColor=c(0),s.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} ${u}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} ${u}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} ${u}s infinite linear`,extraClass:`${m}__plasma-blob--exclusion`},{top:"40%",right:"20%",width:"40%",height:"40%",background:c(4),animation:`designbase-wc-plasma-move-3-${o} ${u}s infinite ease-in-out`,extraClass:`${m}__plasma-blob--accent`,filter:`blur(${r}px)`,opacity:"0.6"}].forEach(e=>{const t=document.createElement("div");t.className=`${m}__plasma-blob${e.extraClass?` ${e.extraClass}`:""}`,Object.assign(t.style,{filter:e.filter||`blur(${r}px)`,opacity:e.opacity||"0.9",...e}),s.appendChild(t)}),s}(u,r.speed,r.blur)),e.appendChild(createLuminaOverlays(r.noise,r.showVignette));break;case"mesh-flow":case"fluid":case"radiant":case"ethereal":{const t=document.createElement("div");t.className=`${m}__shader-layer`,e.appendChild(t);const a=new d(t,{variant:r.type,colors:u,speed:r.speed,blur:r.blur,noise:r.noise,zoom:r.zoom});e.appendChild(createLuminaOverlays(r.noise,r.showVignette)),g={destroy:()=>a.destroy()};break}case"gradient":e.appendChild(function createGradientLayer(e,t,a){const r=document.createDocumentFragment(),n=document.createElement("style");n.textContent="@keyframes designbase-wc-gradient-move {\n        0% { background-position: 0% 50%; }\n        50% { background-position: 100% 50%; }\n        100% { background-position: 0% 50%; }\n    }",r.appendChild(n);const i=document.createElement("div");i.className=`${m}__css-layer`;const s=(t.length>0?t:["#ccc"]).join(", ");let o="90deg",l="";switch(e){case"up":o="0deg";break;case"down":o="180deg";break;case"left":o="270deg";break;case"right":o="90deg";break;case"diagonal":o="45deg";break;case"radial":l=`radial-gradient(circle, ${s})`}l||(l=`linear-gradient(${o}, ${s})`);const d=`${Math.max(2,a/1e3)}s`;return i.style.backgroundImage=l,i.style.backgroundSize="200% 200%",i.style.animation=`designbase-wc-gradient-move ${d} ease infinite`,r.appendChild(i),r}(r.direction,u,r.speed))}return g}function applyContainerStyles(t,a){const r=e(a.type)?"#000000":"dark"===a.theme?"var(--db-surface-base, #0f172a)":"var(--db-surface-base, #ffffff)";t.style.position="relative",t.style.overflow="hidden","gradient"!==a.type?t.style.backgroundColor=r:t.style.backgroundColor=""}function getEffectiveGridColor(e){return e.gridColor??("dark"===e.theme?"#ffffff":"#000000")}export{m as ANIMATION_BACKGROUND_CLASS,applyContainerStyles,getEffectiveGridColor,mountAnimationLayers,parseAnimationBackgroundConfig};
+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}export{f as ANIMATION_BACKGROUND_CLASS,applyContainerStyles,mountAnimationLayers,parseAnimationBackgroundConfig,syncLuminaOverlays};

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

@@ -1 +1 @@
-const o="\n  attribute vec4 aVertexPosition;\n  void main() {\n    gl_Position = aVertexPosition;\n  }\n";function getLuminaFragmentShader(o){switch(o){case"mesh-flow":return"\n  precision highp float;\n  uniform vec2 uResolution;\n  uniform float uTime;\n  uniform vec3 uColors[5];\n  uniform float uSpeed;\n  uniform float uSoftness;\n  void main() {\n      vec2 uv = gl_FragCoord.xy / uResolution.xy;\n      float aspect = uResolution.x / uResolution.y;\n      vec2 p = uv;\n      p.x *= aspect;\n      float t = uTime * uSpeed * 0.1;\n      vec3 col = mix(uColors[0], uColors[4], uv.y * 0.6 + 0.2);\n      for(int i = 1; i < 4; i++) {\n          float fi = float(i);\n          float offset = fi * 4.0;\n          vec2 q = p;\n          q.x += sin(q.y * 1.5 + t + offset) * 0.2;\n          q.y += cos(q.x * 0.8 - t + offset) * 0.1;\n          float waveCenterY = 0.5 + 0.3 * sin(q.x * 1.0 + t * 0.8 + offset);\n          float thickness = 0.15 + 0.15 * sin(q.x * 2.5 + t * 1.2 + offset);\n          float w = thickness * (1.0 + uSoftness * 3.0);\n          float dist = abs(q.y - waveCenterY);\n          float blurAmount = 0.1 + uSoftness * 0.4;\n          float intensity = smoothstep(w + blurAmount, w - blurAmount, dist);\n          intensity *= 0.7;\n          vec3 bandColor = uColors[i];\n          bandColor = mix(bandColor, uColors[i+1], sin(p.x + t)*0.2 + 0.2);\n          col = mix(col, bandColor, intensity);\n      }\n      float noise = fract(sin(dot(gl_FragCoord.xy, vec2(12.9898, 78.233))) * 43758.5453);\n      col += (noise - 0.5) * 0.03;\n      gl_FragColor = vec4(col, 1.0);\n  }\n";case"radiant":return"\n  precision highp float;\n  uniform vec2 uResolution;\n  uniform float uTime;\n  uniform vec3 uColors[5];\n  uniform float uNoiseStrength;\n  uniform float uSoftness;\n  float random(vec2 st) {\n      return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453123);\n  }\n  void main() {\n    vec2 uv = gl_FragCoord.xy / uResolution.xy;\n    float aspect = uResolution.x / uResolution.y;\n    uv.x *= aspect;\n    float t = uTime * 0.15;\n    vec3 col = uColors[0];\n    for(int i = 1; i < 5; i++) {\n        float fi = float(i);\n        vec2 pos = vec2(\n            0.5 * aspect + 0.4 * sin(t * (0.5 + fi * 0.2) + fi * 1.5),\n            0.5 + 0.4 * cos(t * (0.4 + fi * 0.15) + fi)\n        );\n        float d = length(uv - pos);\n        float radius = 0.6 + uSoftness * 1.0;\n        float intensity = smoothstep(radius, 0.0, d);\n        col = mix(col, uColors[i], intensity * 0.7);\n    }\n    float grain = random(gl_FragCoord.xy + uTime);\n    col += (grain - 0.5) * uNoiseStrength;\n    gl_FragColor = vec4(col, 1.0);\n  }\n";case"ethereal":return"\n  precision highp float;\n  uniform vec2 uResolution;\n  uniform float uTime;\n  uniform vec3 uColors[5];\n  uniform float uNoiseStrength;\n  uniform float uSoftness;\n  float random (in vec2 st) {\n      return fract(sin(dot(st.xy, vec2(12.9898,78.233)))*43758.5453123);\n  }\n  float noise (in vec2 st) {\n      vec2 i = floor(st);\n      vec2 f = fract(st);\n      vec2 u = f*f*(3.0-2.0*f);\n      return mix( mix( random( i + vec2(0.0,0.0) ),\n                       random( i + vec2(1.0,0.0) ), u.x),\n                  mix( random( i + vec2(0.0,1.0) ),\n                       random( i + vec2(1.0,1.0) ), u.x), u.y);\n  }\n  #define OCTAVES 5\n  float fbm (in vec2 st) {\n      float value = 0.0;\n      float amplitude = 0.5;\n      for (int i = 0; i < OCTAVES; i++) {\n          value += amplitude * noise(st);\n          st *= 2.0;\n          amplitude *= 0.5;\n      }\n      return value;\n  }\n  void main() {\n      vec2 uv = gl_FragCoord.xy/uResolution.xy;\n      float aspect = uResolution.x/uResolution.y;\n      uv.x *= aspect;\n      float t = uTime * 0.05;\n      float scale = 5.0 - uSoftness * 3.0;\n      vec2 st = uv * scale;\n      vec2 q = vec2(0.);\n      q.x = fbm( st + 0.00*t );\n      q.y = fbm( st + vec2(1.0) );\n      vec2 r = vec2(0.);\n      r.x = fbm( st + 1.0*q + vec2(1.7,9.2)+ 0.15*t );\n      r.y = fbm( st + 1.0*q + vec2(8.3,2.8)+ 0.126*t );\n      float f = fbm(st + r);\n      vec3 color = mix(uColors[0], uColors[1], clamp((f*f)*4.0,0.0,1.0));\n      color = mix(color, uColors[2], clamp(length(q),0.0,1.0));\n      color = mix(color, uColors[3], clamp(length(r.x),0.0,1.0));\n      color = mix(color, uColors[4], clamp(r.y*r.y, 0.0, 1.0));\n      float grain = random(gl_FragCoord.xy + uTime);\n      color += (grain - 0.5) * uNoiseStrength;\n      gl_FragColor = vec4(color,1.0);\n  }\n";default:return"\n  precision highp float;\n  uniform vec2 uResolution;\n  uniform float uTime;\n  uniform vec3 uColors[5];\n  uniform float uNoiseStrength;\n  uniform float uSoftness;\n  uniform float uZoom;\n  float random(vec2 st) {\n      return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453123);\n  }\n  void main() {\n    vec2 uv = (gl_FragCoord.xy - 0.5 * uResolution.xy) / min(uResolution.y, uResolution.x);\n    float t = uTime * 0.2;\n    float scale = mix(1.8, 0.45, uSoftness) / max(0.25, uZoom);\n    vec2 p = uv * scale;\n    for(float i = 1.0; i <= 4.0; i++){\n        p.x += 0.6 / i * sin(i * 3.0 * p.y + t);\n        p.y += 0.6 / i * cos(i * 3.0 * p.x + t);\n    }\n    float w1 = 0.5 + 0.5 * sin(p.x + t);\n    float w2 = 0.5 + 0.5 * sin(p.y + t * 0.8);\n    float w3 = 0.5 + 0.5 * sin(p.x + p.y);\n    vec3 col = uColors[0];\n    col = mix(col, uColors[1], smoothstep(0.1, 0.9, w1));\n    col = mix(col, uColors[2], smoothstep(0.1, 0.9, w2));\n    col = mix(col, uColors[3], smoothstep(0.1, 0.9, w3));\n    float w4 = w1 * w2 * w3;\n    col = mix(col, uColors[4], w4);\n    float grain = random(gl_FragCoord.xy + uTime);\n    col += (grain - 0.5) * uNoiseStrength;\n    gl_FragColor = vec4(col, 1.0);\n  }\n"}}export{o as VS_SOURCE,getLuminaFragmentShader};
+const o="\n  attribute vec4 aVertexPosition;\n  void main() {\n    gl_Position = aVertexPosition;\n  }\n";function getLuminaFragmentShader(o){switch(o){case"mesh-flow":return"\n  precision highp float;\n  uniform vec2 uResolution;\n  uniform float uTime;\n  uniform vec3 uColors[5];\n  uniform float uSpeed;\n  uniform float uSoftness;\n  uniform float uZoom;\n  void main() {\n      vec2 uv = gl_FragCoord.xy / uResolution.xy;\n      float aspect = uResolution.x / uResolution.y;\n      vec2 p = (uv - 0.5) / max(0.25, uZoom) + 0.5;\n      p.x *= aspect;\n      float t = uTime * uSpeed * 0.1;\n      vec3 col = mix(uColors[0], uColors[4], uv.y * 0.6 + 0.2);\n      for(int i = 1; i < 4; i++) {\n          float fi = float(i);\n          float offset = fi * 4.0;\n          vec2 q = p;\n          q.x += sin(q.y * 1.5 + t + offset) * 0.2;\n          q.y += cos(q.x * 0.8 - t + offset) * 0.1;\n          float waveCenterY = 0.5 + 0.3 * sin(q.x * 1.0 + t * 0.8 + offset);\n          float thickness = 0.15 + 0.15 * sin(q.x * 2.5 + t * 1.2 + offset);\n          float w = thickness * (1.0 + uSoftness * 3.0);\n          float dist = abs(q.y - waveCenterY);\n          float blurAmount = 0.1 + uSoftness * 0.4;\n          float intensity = smoothstep(w + blurAmount, w - blurAmount, dist);\n          intensity *= 0.7;\n          vec3 bandColor = uColors[i];\n          bandColor = mix(bandColor, uColors[i+1], sin(p.x + t)*0.2 + 0.2);\n          col = mix(col, bandColor, intensity);\n      }\n      float noise = fract(sin(dot(gl_FragCoord.xy, vec2(12.9898, 78.233))) * 43758.5453);\n      col += (noise - 0.5) * 0.03;\n      gl_FragColor = vec4(col, 1.0);\n  }\n";case"radiant":return"\n  precision highp float;\n  uniform vec2 uResolution;\n  uniform float uTime;\n  uniform vec3 uColors[5];\n  uniform float uNoiseStrength;\n  uniform float uSoftness;\n  uniform float uZoom;\n  float random(vec2 st) {\n      return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453123);\n  }\n  void main() {\n    vec2 uv = gl_FragCoord.xy / uResolution.xy;\n    float aspect = uResolution.x / uResolution.y;\n    uv = (uv - 0.5) / max(0.25, uZoom) + 0.5;\n    uv.x *= aspect;\n    float t = uTime * 0.15;\n    vec3 col = uColors[0];\n    for(int i = 1; i < 5; i++) {\n        float fi = float(i);\n        vec2 pos = vec2(\n            0.5 * aspect + 0.4 * sin(t * (0.5 + fi * 0.2) + fi * 1.5),\n            0.5 + 0.4 * cos(t * (0.4 + fi * 0.15) + fi)\n        );\n        float d = length(uv - pos);\n        float radius = 0.6 + uSoftness * 1.0;\n        float intensity = smoothstep(radius, 0.0, d);\n        col = mix(col, uColors[i], intensity * 0.7);\n    }\n    float grain = random(gl_FragCoord.xy + uTime);\n    col += (grain - 0.5) * uNoiseStrength;\n    gl_FragColor = vec4(col, 1.0);\n  }\n";case"ethereal":return"\n  precision highp float;\n  uniform vec2 uResolution;\n  uniform float uTime;\n  uniform vec3 uColors[5];\n  uniform float uNoiseStrength;\n  uniform float uSoftness;\n  uniform float uZoom;\n  float random (in vec2 st) {\n      return fract(sin(dot(st.xy, vec2(12.9898,78.233)))*43758.5453123);\n  }\n  float noise (in vec2 st) {\n      vec2 i = floor(st);\n      vec2 f = fract(st);\n      vec2 u = f*f*(3.0-2.0*f);\n      return mix( mix( random( i + vec2(0.0,0.0) ),\n                       random( i + vec2(1.0,0.0) ), u.x),\n                  mix( random( i + vec2(0.0,1.0) ),\n                       random( i + vec2(1.0,1.0) ), u.x), u.y);\n  }\n  #define OCTAVES 5\n  float fbm (in vec2 st) {\n      float value = 0.0;\n      float amplitude = 0.5;\n      for (int i = 0; i < OCTAVES; i++) {\n          value += amplitude * noise(st);\n          st *= 2.0;\n          amplitude *= 0.5;\n      }\n      return value;\n  }\n  void main() {\n      vec2 uv = gl_FragCoord.xy/uResolution.xy;\n      float aspect = uResolution.x/uResolution.y;\n      uv = (uv - 0.5) / max(0.25, uZoom) + 0.5;\n      uv.x *= aspect;\n      float t = uTime * 0.8;\n      float scale = 5.0 - uSoftness * 3.0;\n      vec2 st = uv * scale;\n      vec2 q = vec2(0.);\n      q.x = fbm( st + 0.12*t );\n      q.y = fbm( st + vec2(1.0) + 0.10*t );\n      vec2 r = vec2(0.);\n      r.x = fbm( st + 1.0*q + vec2(1.7,9.2)+ 0.30*t );\n      r.y = fbm( st + 1.0*q + vec2(8.3,2.8)+ 0.26*t );\n      float f = fbm(st + r);\n      vec3 color = mix(uColors[0], uColors[1], clamp((f*f)*4.0,0.0,1.0));\n      color = mix(color, uColors[2], clamp(length(q),0.0,1.0));\n      color = mix(color, uColors[3], clamp(length(r.x),0.0,1.0));\n      color = mix(color, uColors[4], clamp(r.y*r.y, 0.0, 1.0));\n      float grain = random(gl_FragCoord.xy + uTime);\n      color += (grain - 0.5) * uNoiseStrength;\n      gl_FragColor = vec4(color,1.0);\n  }\n";default:return"\n  precision highp float;\n  uniform vec2 uResolution;\n  uniform float uTime;\n  uniform vec3 uColors[5];\n  uniform float uNoiseStrength;\n  uniform float uSoftness;\n  uniform float uZoom;\n  float random(vec2 st) {\n      return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453123);\n  }\n  void main() {\n    vec2 uv = (gl_FragCoord.xy - 0.5 * uResolution.xy) / min(uResolution.y, uResolution.x);\n    float t = uTime * 0.2;\n    float scale = mix(1.8, 0.45, uSoftness) / max(0.25, uZoom);\n    vec2 p = uv * scale;\n    for(float i = 1.0; i <= 4.0; i++){\n        p.x += 0.6 / i * sin(i * 3.0 * p.y + t);\n        p.y += 0.6 / i * cos(i * 3.0 * p.x + t);\n    }\n    float w1 = 0.5 + 0.5 * sin(p.x + t);\n    float w2 = 0.5 + 0.5 * sin(p.y + t * 0.8);\n    float w3 = 0.5 + 0.5 * sin(p.x + p.y);\n    vec3 col = uColors[0];\n    col = mix(col, uColors[1], smoothstep(0.1, 0.9, w1));\n    col = mix(col, uColors[2], smoothstep(0.1, 0.9, w2));\n    col = mix(col, uColors[3], smoothstep(0.1, 0.9, w3));\n    float w4 = w1 * w2 * w3;\n    col = mix(col, uColors[4], w4);\n    float grain = random(gl_FragCoord.xy + uTime);\n    col += (grain - 0.5) * uNoiseStrength;\n    gl_FragColor = vec4(col, 1.0);\n  }\n"}}export{o as VS_SOURCE,getLuminaFragmentShader};

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

@@ -1 +1 @@
-const e=60,t=["plasma","mesh-flow","fluid","radiant","ethereal"];function isLuminaType(e){return t.includes(e)}function toLuminaSpeed(e){return Math.max(.1,e/3e3)}function toLuminaSoftness(e){return Math.min(1,e/200)}function clampZoom(e){return Math.min(4,Math.max(.25,e))}function hexToRgb(e){const t=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);return t?[parseInt(t[1],16)/255,parseInt(t[2],16)/255,parseInt(t[3],16)/255]:[0,0,0]}function padColors(e,t=5){return 0===e.length?["#7000FF","#FF00AA","#3300FF","#FFCC00","#00FFFF"]:Array.from({length:t},(t,n)=>e[n%e.length])}const n=["#0d0221","#5b21b6","#db2777","#38bdf8","#e9d5ff"],i="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)' opacity='1'/%3E%3C/svg%3E";export{n as FLUID_DEFAULT_COLORS,e as LUMINA_ANIMATION_DURATION_SEC,t as LUMINA_ANIMATION_TYPES,i as LUMINA_NOISE_SVG,clampZoom,hexToRgb,isLuminaType,padColors,toLuminaSoftness,toLuminaSpeed};
+const t=60,e=["plasma","mesh-flow","fluid","radiant","ethereal"];function isLuminaType(t){return e.includes(t)}function toLuminaSpeed(t){return Math.max(.1,t/3e3)}function toSpeedRate(t){return Math.max(.1,t/3e3)}function toAnimationDurationSec(t,e=3,n=.75){const a=3e3*e/Math.max(500,t);return Math.max(n,a)}function toLuminaSoftness(t){return Math.min(1,t/200)}function clampZoom(t){return Math.min(4,Math.max(.25,t))}function hexToRgb(t){const e=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return e?[parseInt(e[1],16)/255,parseInt(e[2],16)/255,parseInt(e[3],16)/255]:[0,0,0]}function padColors(t,e=5){return 0===t.length?["#7000FF","#FF00AA","#3300FF","#FFCC00","#00FFFF"]:Array.from({length:e},(e,n)=>t[n%t.length])}const n=["#0d0221","#5b21b6","#db2777","#38bdf8","#e9d5ff"],a="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)' opacity='1'/%3E%3C/svg%3E";export{n as FLUID_DEFAULT_COLORS,t as LUMINA_ANIMATION_DURATION_SEC,e as LUMINA_ANIMATION_TYPES,a as LUMINA_NOISE_SVG,clampZoom,hexToRgb,isLuminaType,padColors,toAnimationDurationSec,toLuminaSoftness,toLuminaSpeed,toSpeedRate};

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

@@ -1 +1 @@
-function createFallingParticle(a,o,t,e=!1){return{x:Math.random()*a,y:e?Math.random()*o:-20,size:Math.random()*(t.maxSize-t.minSize)+t.minSize,speedX:(Math.random()-.5)*t.wind,speedY:Math.random()*(t.maxSpeedY-t.minSpeedY)+t.minSpeedY,opacity:.5*Math.random()+.3,rotation:Math.random()*Math.PI*2,rotationSpeed:.05*(Math.random()-.5),color:t.colors[Math.floor(Math.random()*t.colors.length)]}}const drawFallingParticles=(a,o,t,e,r,n)=>{const l=3e3/(n.speed||3e3),i=Math.max(1,.5*n.size),c={minSize:i,maxSize:Math.max(i+.5,1.5*n.size),minSpeedY:.4*l,maxSpeedY:1.2*l,wind:n.wind*l,colors:n.colors};e.current.length!==n.count&&(e.current=Array.from({length:n.count},()=>createFallingParticle(o,t,c,!0))),e.current.forEach(e=>{e.y+=e.speedY,e.x+=e.speedX+.5*Math.sin(e.y/50)*l,e.rotation+=e.rotationSpeed,e.y>t+20&&Object.assign(e,createFallingParticle(o,t,c)),e.x>o+20&&(e.x=-20),e.x<-20&&(e.x=o+20),a.save(),a.translate(e.x,e.y),a.rotate(e.rotation),a.fillStyle=e.color,a.globalAlpha=e.opacity*n.layerOpacity,function drawFallingParticleShape(a,o,t){return"snow"===o?(a.beginPath(),a.arc(0,0,t,0,2*Math.PI),void a.fill()):"flowers"===o?(a.beginPath(),a.moveTo(0,0),a.bezierCurveTo(t,-t,2*t,t,0,2*t),a.bezierCurveTo(2*-t,t,-t,-t,0,0),void a.fill()):void a.fillRect(-t/2,-t/2,t,t)}(a,r,e.size),a.restore()}),a.globalAlpha=1},drawParticles=(a,o,t,e,r)=>{e.current.length!==r.count&&(e.current=Array.from({length:r.count}).map(()=>({x:Math.random()*o,y:Math.random()*t,vx:1.5*(Math.random()-.5),vy:1.5*(Math.random()-.5),size:Math.random()*r.size+1,color:r.colors[Math.floor(Math.random()*r.colors.length)]})));const n=e.current;n.forEach((e,l)=>{if(e.x+=e.vx,e.y+=e.vy,(e.x<0||e.x>o)&&(e.vx*=-1),(e.y<0||e.y>t)&&(e.vy*=-1),r.clickable){const a=r.mouse.x-e.x,o=r.mouse.y-e.y,t=Math.sqrt(a*a+o*o);if(t<150){const r=(150-t)/150;e.vx+=a/t*r*.5,e.vy+=o/t*r*.5}const n=3,l=Math.sqrt(e.vx*e.vx+e.vy*e.vy);l>n&&(e.vx=e.vx/l*n,e.vy=e.vy/l*n)}a.beginPath(),a.arc(e.x,e.y,e.size,0,2*Math.PI),a.fillStyle=e.color,a.fill();for(let o=l+1;o<n.length;o++){const t=n[o],r=e.x-t.x,l=e.y-t.y,i=Math.sqrt(r*r+l*l);i<100&&(a.beginPath(),a.strokeStyle=e.color,a.globalAlpha=1-i/100,a.lineWidth=.5,a.moveTo(e.x,e.y),a.lineTo(t.x,t.y),a.stroke(),a.globalAlpha=1)}})},drawStars=(a,o,t,e,r)=>{e.current.length!==r.count&&(e.current=Array.from({length:r.count}).map(()=>({x:Math.random()*o,y:Math.random()*t,size:Math.random()*r.size,blinkSpeed:.05*Math.random()+.01,color:r.colors[Math.floor(Math.random()*r.colors.length)]}))),e.current.forEach(o=>{o.y-=.05,o.y<0&&(o.y=t);const e=.5+.5*Math.sin(r.time*o.blinkSpeed);a.beginPath(),a.arc(o.x,o.y,o.size,0,2*Math.PI),a.fillStyle=o.color,a.globalAlpha=e,a.fill(),a.globalAlpha=1})};export{drawFallingParticles,drawParticles,drawStars};
+import{toSpeedRate as a}from"./lumina-utils.js";function createFallingParticle(a,e,t,o=!1){return{x:Math.random()*a,y:o?Math.random()*e:-20,size:Math.random()*(t.maxSize-t.minSize)+t.minSize,speedX:(Math.random()-.5)*t.wind,speedY:Math.random()*(t.maxSpeedY-t.minSpeedY)+t.minSpeedY,opacity:.5*Math.random()+.3,rotation:Math.random()*Math.PI*2,rotationSpeed:.05*(Math.random()-.5),color:t.colors[Math.floor(Math.random()*t.colors.length)]}}const drawFallingParticles=(e,t,o,r,n,l)=>{const i=a(l.speed),c=Math.max(1,.5*l.size),s={minSize:c,maxSize:Math.max(c+.5,1.5*l.size),minSpeedY:.4*i,maxSpeedY:1.2*i,wind:l.wind*i,colors:l.colors},h=`${l.count}:${l.size}:${l.speed}:${l.wind}`;r.current.length===l.count&&r.spawnKey===h||(r.current=Array.from({length:l.count},()=>createFallingParticle(t,o,s,!0)),r.spawnKey=h),r.current.forEach(a=>{a.y+=a.speedY,a.x+=a.speedX+.5*Math.sin(a.y/50)*i,a.rotation+=a.rotationSpeed,a.y>o+20&&Object.assign(a,createFallingParticle(t,o,s)),a.x>t+20&&(a.x=-20),a.x<-20&&(a.x=t+20),e.save(),e.translate(a.x,a.y),e.rotate(a.rotation),e.fillStyle=a.color,e.globalAlpha=a.opacity*l.layerOpacity,function drawFallingParticleShape(a,e,t){return"snow"===e?(a.beginPath(),a.arc(0,0,t,0,2*Math.PI),void a.fill()):"flowers"===e?(a.beginPath(),a.moveTo(0,0),a.bezierCurveTo(t,-t,2*t,t,0,2*t),a.bezierCurveTo(2*-t,t,-t,-t,0,0),void a.fill()):void a.fillRect(-t/2,-t/2,t,t)}(e,n,a.size),e.restore()}),e.globalAlpha=1},drawParticles=(e,t,o,r,n)=>{const l=`${n.count}:${n.size}`;r.current.length===n.count&&r.spawnKey===l||(r.current=Array.from({length:n.count}).map(()=>({x:Math.random()*t,y:Math.random()*o,vx:1.5*(Math.random()-.5),vy:1.5*(Math.random()-.5),size:Math.random()*n.size+1,color:n.colors[Math.floor(Math.random()*n.colors.length)]})),r.spawnKey=l);const i=r.current,c=a(n.speed);i.forEach((a,r)=>{if(a.x+=a.vx*c,a.y+=a.vy*c,(a.x<0||a.x>t)&&(a.vx*=-1),(a.y<0||a.y>o)&&(a.vy*=-1),n.clickable){const e=n.mouse.x-a.x,t=n.mouse.y-a.y,o=Math.sqrt(e*e+t*t);if(o<150){const r=(150-o)/150;a.vx+=e/o*r*.5,a.vy+=t/o*r*.5}const r=3,l=Math.sqrt(a.vx*a.vx+a.vy*a.vy);l>r&&(a.vx=a.vx/l*r,a.vy=a.vy/l*r)}e.save(),e.globalAlpha=n.layerOpacity,e.beginPath(),e.arc(a.x,a.y,a.size,0,2*Math.PI),e.fillStyle=a.color,e.fill(),e.restore();for(let t=r+1;t<i.length;t++){const o=i[t],r=a.x-o.x,l=a.y-o.y,c=Math.sqrt(r*r+l*l);c<100&&(e.beginPath(),e.strokeStyle=a.color,e.globalAlpha=(1-c/100)*n.layerOpacity,e.lineWidth=.5,e.moveTo(a.x,a.y),e.lineTo(o.x,o.y),e.stroke(),e.globalAlpha=1)}})},drawStars=(a,e,t,o,r)=>{const n=`${r.count}:${r.size}`;o.current.length===r.count&&o.spawnKey===n||(o.current=Array.from({length:r.count}).map(()=>({x:Math.random()*e,y:Math.random()*t,size:Math.random()*r.size,blinkSpeed:.05*Math.random()+.01,color:r.colors[Math.floor(Math.random()*r.colors.length)]})),o.spawnKey=n),o.current.forEach(e=>{e.y-=.05*r.speedRate,e.y<0&&(e.y=t);const o=(.5+.5*Math.sin(r.time*e.blinkSpeed))*r.layerOpacity;a.beginPath(),a.arc(e.x,e.y,e.size,0,2*Math.PI),a.fillStyle=e.color,a.globalAlpha=o,a.fill(),a.globalAlpha=1})};export{drawFallingParticles,drawParticles,drawStars};

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

@@ -1 +1 @@
-import{padColors as t,hexToRgb as e,toLuminaSpeed as r,toLuminaSoftness as i,clampZoom as a}from"./lumina-utils.js";import{VS_SOURCE as n,getLuminaFragmentShader as o}from"./lumina-shaders.js";function loadShader(t,e,r){const i=t.createShader(e);return i?(t.shaderSource(i,r),t.compileShader(i),t.getShaderParameter(i,t.COMPILE_STATUS)?i:(t.deleteShader(i),null)):null}class ShaderAnimationController{constructor(n,o){this.options=o,this.raf=0,this.startTime=performance.now(),this.render=()=>{const n=this.gl,o=this.program,s=this.positionBuffer;if(!n||!o||!s)return;const{colors:h,speed:f,blur:c,noise:m,zoom:d,variant:u}=this.options,{width:l,height:g}=this.resizeCanvas();if(0===l||0===g)return void(this.raf=requestAnimationFrame(this.render));n.viewport(0,0,l,g),n.useProgram(o);const v=n.getAttribLocation(o,"aVertexPosition"),S=n.getUniformLocation(o,"uResolution"),A=n.getUniformLocation(o,"uTime"),p=n.getUniformLocation(o,"uColors"),w=n.getUniformLocation(o,"uSpeed"),R=n.getUniformLocation(o,"uSoftness"),b=n.getUniformLocation(o,"uNoiseStrength"),T=n.getUniformLocation(o,"uZoom");n.enableVertexAttribArray(v),n.bindBuffer(n.ARRAY_BUFFER,s),n.vertexAttribPointer(v,2,n.FLOAT,!1,0,0),n.uniform2f(S,l,g);const x=t(h),F=r(f),B=i(c),L=.6*F,P=a(d),U=(performance.now()-this.startTime)/1e3;"mesh-flow"===u?(A&&n.uniform1f(A,U),w&&n.uniform1f(w,L),R&&n.uniform1f(R,B)):(A&&n.uniform1f(A,U*F),R&&n.uniform1f(R,B),b&&n.uniform1f(b,m),"fluid"===u&&T&&n.uniform1f(T,P));const C=new Float32Array(15);for(let t=0;t<5;t++){const r=e(x[t]);C[3*t]=r[0],C[3*t+1]=r[1],C[3*t+2]=r[2]}p&&n.uniform3fv(p,C),n.drawArrays(n.TRIANGLE_STRIP,0,4),this.raf=requestAnimationFrame(this.render)},this.container=n,this.canvas=document.createElement("canvas"),this.canvas.className="designbase-wc-animation-background__shader-canvas",n.appendChild(this.canvas),this.init()}resizeCanvas(){const t=this.container.getBoundingClientRect(),e=window.devicePixelRatio||1;return this.canvas.width=Math.max(1,t.width*e),this.canvas.height=Math.max(1,t.height*e),this.canvas.style.width=`${t.width}px`,this.canvas.style.height=`${t.height}px`,{width:this.canvas.width,height:this.canvas.height}}init(){const t=this.canvas.getContext("webgl");if(!t)return;this.gl=t;const{variant:e}=this.options,r=o(e),i=t.createProgram();if(!i)return;const a=loadShader(t,t.VERTEX_SHADER,n),s=loadShader(t,t.FRAGMENT_SHADER,r);if(!a||!s)return;if(t.attachShader(i,a),t.attachShader(i,s),t.linkProgram(i),!t.getProgramParameter(i,t.LINK_STATUS))return;this.program=i,this.vertexShader=a,this.fragmentShader=s;const h=t.createBuffer();h&&(this.positionBuffer=h,t.bindBuffer(t.ARRAY_BUFFER,h),t.bufferData(t.ARRAY_BUFFER,new Float32Array([-1,-1,1,-1,-1,1,1,1]),t.STATIC_DRAW),this.observer=new ResizeObserver(()=>this.resizeCanvas()),this.observer.observe(this.container),this.startTime=performance.now(),this.render())}destroy(){cancelAnimationFrame(this.raf),this.observer?.disconnect();const t=this.gl;t&&this.program&&(this.vertexShader&&t.deleteShader(this.vertexShader),this.fragmentShader&&t.deleteShader(this.fragmentShader),this.positionBuffer&&t.deleteBuffer(this.positionBuffer),t.deleteProgram(this.program)),this.canvas.remove()}}export{ShaderAnimationController};
+import{padColors as t,hexToRgb as e,toLuminaSpeed as r,toLuminaSoftness as i,clampZoom as a}from"./lumina-utils.js";import{VS_SOURCE as n,getLuminaFragmentShader as o}from"./lumina-shaders.js";function loadShader(t,e,r){const i=t.createShader(e);return i?(t.shaderSource(i,r),t.compileShader(i),t.getShaderParameter(i,t.COMPILE_STATUS)?i:(t.deleteShader(i),null)):null}class ShaderAnimationController{constructor(n,o){this.raf=0,this.startTime=performance.now(),this.render=()=>{const n=this.gl,o=this.program,s=this.positionBuffer;if(!n||!o||!s)return;const{colors:h,speed:f,blur:c,noise:m,zoom:d,variant:u}=this.options,{width:l,height:g}=this.resizeCanvas();if(0===l||0===g)return void(this.raf=requestAnimationFrame(this.render));n.viewport(0,0,l,g),n.useProgram(o);const v=n.getAttribLocation(o,"aVertexPosition"),S=n.getUniformLocation(o,"uResolution"),p=n.getUniformLocation(o,"uTime"),A=n.getUniformLocation(o,"uColors"),w=n.getUniformLocation(o,"uSpeed"),R=n.getUniformLocation(o,"uSoftness"),b=n.getUniformLocation(o,"uNoiseStrength"),T=n.getUniformLocation(o,"uZoom");n.enableVertexAttribArray(v),n.bindBuffer(n.ARRAY_BUFFER,s),n.vertexAttribPointer(v,2,n.FLOAT,!1,0,0),n.uniform2f(S,l,g);const x=t(h),F=r(f),B=i(c),L=.6*F,P=a(d),U=(performance.now()-this.startTime)/1e3;"mesh-flow"===u?(p&&n.uniform1f(p,U),w&&n.uniform1f(w,L),R&&n.uniform1f(R,B),T&&n.uniform1f(T,P)):(p&&n.uniform1f(p,U*F),R&&n.uniform1f(R,B),b&&n.uniform1f(b,m),T&&n.uniform1f(T,P));const C=new Float32Array(15);for(let t=0;t<5;t++){const r=e(x[t]);C[3*t]=r[0],C[3*t+1]=r[1],C[3*t+2]=r[2]}A&&n.uniform3fv(A,C),n.drawArrays(n.TRIANGLE_STRIP,0,4),this.raf=requestAnimationFrame(this.render)},this.container=n,this.options=o,this.canvas=document.createElement("canvas"),this.canvas.className="designbase-wc-animation-background__shader-canvas",n.appendChild(this.canvas),this.init()}updateOptions(t){this.options={...this.options,...t}}resizeCanvas(){const t=this.container.getBoundingClientRect(),e=window.devicePixelRatio||1;return this.canvas.width=Math.max(1,t.width*e),this.canvas.height=Math.max(1,t.height*e),this.canvas.style.width=`${t.width}px`,this.canvas.style.height=`${t.height}px`,{width:this.canvas.width,height:this.canvas.height}}init(){const t=this.canvas.getContext("webgl");if(!t)return;this.gl=t;const{variant:e}=this.options,r=o(e),i=t.createProgram();if(!i)return;const a=loadShader(t,t.VERTEX_SHADER,n),s=loadShader(t,t.FRAGMENT_SHADER,r);if(!a||!s)return;if(t.attachShader(i,a),t.attachShader(i,s),t.linkProgram(i),!t.getProgramParameter(i,t.LINK_STATUS))return;this.program=i,this.vertexShader=a,this.fragmentShader=s;const h=t.createBuffer();h&&(this.positionBuffer=h,t.bindBuffer(t.ARRAY_BUFFER,h),t.bufferData(t.ARRAY_BUFFER,new Float32Array([-1,-1,1,-1,-1,1,1,1]),t.STATIC_DRAW),this.observer=new ResizeObserver(()=>this.resizeCanvas()),this.observer.observe(this.container),this.startTime=performance.now(),this.render())}destroy(){cancelAnimationFrame(this.raf),this.observer?.disconnect();const t=this.gl;t&&this.program&&(this.vertexShader&&t.deleteShader(this.vertexShader),this.fragmentShader&&t.deleteShader(this.fragmentShader),this.positionBuffer&&t.deleteBuffer(this.positionBuffer),t.deleteProgram(this.program)),this.canvas.remove()}}export{ShaderAnimationController};

package/dist/esm/components/db-accordion.d.ts

@@ -1,6 +1,8 @@
 interface AccordionItemConfig {
     id?: string;
     title: string;
+    /** 슬롯(content-N)이 없을 때 본문으로 렌더되는 텍스트 */
+    content?: string;
     disabled?: boolean;
     itemType?: 'icon' | 'number' | 'question' | 'none';
     icon?: string;

package/dist/esm/components/db-accordion.js

@@ -1 +1 @@
-import{createDbIcon as e}from"./db-icons.js";class DbAccordion extends HTMLElement{constructor(){super(...arguments),this.expanded=new Set,this.isRendering=!1,this.suppressExpandedAttrCallback=!1}static get observedAttributes(){return["items","variant","size","allow-multiple","expand-mode","expanded-items","default-item-type"]}get items(){try{const e=JSON.parse(this.getAttribute("items")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}set items(e){this.setAttribute("items","string"==typeof e?e:JSON.stringify(e))}get allowMultiple(){return this.hasAttribute("allow-multiple")}set allowMultiple(e){this.toggleAttribute("allow-multiple",e)}get expandedItems(){const e=(this.getAttribute("expanded-items")||"").trim();if(!e)return[];if("all"===e)return this.items.map((e,t)=>this.resolveItemKey(e,t));try{const t=JSON.parse(e);if(Array.isArray(t))return t.map(e=>String(e).trim()).filter(Boolean)}catch{}return e.split(",").map(e=>e.trim()).filter(Boolean)}set expandedItems(e){Array.isArray(e)?this.setAttribute("expanded-items",e.join(",")):this.setAttribute("expanded-items",e)}connectedCallback(){this.syncExpandedFromAttributes(),this.render(),this.childObserver=new MutationObserver(e=>{if(this.isRendering)return;e.some(e=>Array.from(e.addedNodes).some(e=>e instanceof HTMLElement&&e.hasAttribute("slot")))&&this.render()}),this.childObserver.observe(this,{childList:!0})}disconnectedCallback(){this.childObserver?.disconnect()}attributeChangedCallback(e){if(this.isConnected){if("expanded-items"===e){if(this.suppressExpandedAttrCallback)return;return this.syncExpandedFromAttributes(),void this.syncExpandedState()}return"expand-mode"===e||"allow-multiple"===e?(this.syncExpandedFromAttributes(),void this.syncExpandedState()):"items"===e?(this.syncExpandedFromAttributes(),void this.render()):void this.render()}}resolveItemKey(e,t){return e.id??String(t)}getExpandMode(){const e=this.getAttribute("expand-mode");return"single"===e||"multiple"===e||"all"===e?e:(this.hasAttribute("allow-multiple"),"multiple")}syncExpandedFromAttributes(){const e=this.items.map((e,t)=>this.resolveItemKey(e,t)),t=this.expandedItems,s=this.getExpandMode();t.length>0?this.expanded=new Set(t.filter(t=>e.includes(t))):this.expanded="all"!==s?new Set:new Set(e)}iconSize(e){return"s"===e?16:"l"===e?24:20}collectPanelContent(){const e=new Map,register=(t,s)=>{if(!(t instanceof HTMLElement)||"SLOT"===t.tagName)return;e.has(s)||e.set(s,[]);const i=e.get(s);i.includes(t)||i.push(t)};return Array.from(this.children).forEach(e=>{const t=e.getAttribute("slot")?.match(/^content-(\d+)$/);t&&register(e,Number(t[1]))}),this.querySelectorAll(":scope > .designbase-wc-accordion__item").forEach((e,t)=>{const s=e.querySelector(":scope > .designbase-wc-accordion__content > .designbase-wc-accordion__content-inner");s&&Array.from(s.children).forEach(e=>register(e,t))}),e}isItemExpanded(e,t){return this.expanded.has(this.resolveItemKey(e,t))}syncExpandedState(){const e=this.items;this.querySelectorAll(":scope > .designbase-wc-accordion__item").forEach((t,s)=>{const i=e[s];if(!i)return;const n=this.isItemExpanded(i,s);t.classList.toggle("designbase-wc-accordion__item--expanded",n),t.classList.toggle("designbase-wc-accordion__item--disabled",Boolean(i.disabled));const a=t.querySelector(".designbase-wc-accordion__trigger"),d=t.querySelector(".designbase-wc-accordion__content");a?.setAttribute("aria-expanded",String(n)),d?.setAttribute("aria-hidden",String(!n))})}render(){this.isRendering=!0;const t=this.collectPanelContent(),s=this.getAttribute("variant")||"default",i=this.getAttribute("size")||"m",n=this.getExpandMode(),a=this.getAttribute("default-item-type")||"none",d=this.items,r=this.iconSize(i);this.className=["designbase-wc-accordion",`designbase-wc-accordion--${s}`,`designbase-wc-accordion--${i}`,"multiple"===n&&"designbase-wc-accordion--multiple","single"===n&&"designbase-wc-accordion--single","all"===n&&"designbase-wc-accordion--all"].filter(Boolean).join(" "),this.setAttribute("role","region"),this.setAttribute("aria-label","아코디언"),this.querySelectorAll(":scope > .designbase-wc-accordion__item").forEach(e=>e.remove()),d.forEach((i,n)=>{const d=this.resolveItemKey(i,n),c=this.isItemExpanded(i,n),o=document.createElement("div");o.className=["designbase-wc-accordion__item",`designbase-wc-accordion__item--${s}`,c&&"designbase-wc-accordion__item--expanded",i.disabled&&"designbase-wc-accordion__item--disabled"].filter(Boolean).join(" "),o.dataset.itemKey=d;const l=document.createElement("button");l.type="button",l.className="designbase-wc-accordion__trigger",l.disabled=Boolean(i.disabled),l.setAttribute("aria-expanded",String(c)),l.setAttribute("aria-controls",`accordion-content-${d}`),l.addEventListener("click",()=>{i.disabled||this.toggle(d)});const m=i.itemType||a;if("number"===m){const e=document.createElement("div");e.className="designbase-wc-accordion__number",e.textContent=`${n+1}.`,l.append(e)}else if("question"===m){const e=document.createElement("div");e.className="designbase-wc-accordion__question",e.textContent="Q.",l.append(e)}else if("icon"===m&&i.icon){const t=document.createElement("div");t.className="designbase-wc-accordion__icon",t.append(e(i.icon,r)),l.append(t)}const p=document.createElement("span");p.className="designbase-wc-accordion__title",p.textContent=i.title;const h=document.createElement("div");h.className="designbase-wc-accordion__chevron",h.append(e("chevron-down",r)),l.append(p,h);const u=document.createElement("div");u.id=`accordion-content-${d}`,u.className="designbase-wc-accordion__content",u.setAttribute("aria-hidden",String(!c));const b=document.createElement("div");b.className="designbase-wc-accordion__content-inner",(t.get(n)||[]).forEach(e=>{e.removeAttribute("slot"),b.append(e)}),u.append(b),o.append(l,u),this.append(o)}),this.isRendering=!1}toggle(e){const t=this.getExpandMode();this.expanded.has(e)?this.expanded.delete(e):"single"===t?this.expanded=new Set([e]):this.expanded.add(e);const s=Array.from(this.expanded);this.syncExpandedState(),this.suppressExpandedAttrCallback=!0,this.expandedItems=s,this.suppressExpandedAttrCallback=!1,this.dispatchEvent(new CustomEvent("db-change",{detail:{expandedItems:s},bubbles:!0,composed:!0}))}}customElements.get("db-accordion")||customElements.define("db-accordion",DbAccordion);export{DbAccordion};
+import{createDbIcon as e}from"./db-icons.js";class DbAccordion extends HTMLElement{constructor(){super(...arguments),this.expanded=new Set,this.isRendering=!1,this.suppressExpandedAttrCallback=!1}static get observedAttributes(){return["items","variant","size","allow-multiple","expand-mode","expanded-items","default-item-type"]}get items(){try{const e=JSON.parse(this.getAttribute("items")||"[]");return Array.isArray(e)?e:[]}catch{return[]}}set items(e){this.setAttribute("items","string"==typeof e?e:JSON.stringify(e))}get allowMultiple(){return this.hasAttribute("allow-multiple")}set allowMultiple(e){this.toggleAttribute("allow-multiple",e)}get expandedItems(){const e=(this.getAttribute("expanded-items")||"").trim();if(!e)return[];if("all"===e)return this.items.map((e,t)=>this.resolveItemKey(e,t));try{const t=JSON.parse(e);if(Array.isArray(t))return t.map(e=>String(e).trim()).filter(Boolean)}catch{}return e.split(",").map(e=>e.trim()).filter(Boolean)}set expandedItems(e){Array.isArray(e)?this.setAttribute("expanded-items",e.join(",")):this.setAttribute("expanded-items",e)}connectedCallback(){this.syncExpandedFromAttributes(),this.render(),this.childObserver=new MutationObserver(e=>{if(this.isRendering)return;e.some(e=>Array.from(e.addedNodes).some(e=>e instanceof HTMLElement&&e.hasAttribute("slot")))&&this.render()}),this.childObserver.observe(this,{childList:!0})}disconnectedCallback(){this.childObserver?.disconnect()}attributeChangedCallback(e){if(this.isConnected){if("expanded-items"===e){if(this.suppressExpandedAttrCallback)return;return this.syncExpandedFromAttributes(),void this.syncExpandedState()}return"expand-mode"===e||"allow-multiple"===e?(this.syncExpandedFromAttributes(),void this.syncExpandedState()):"items"===e?(this.syncExpandedFromAttributes(),void this.render()):void this.render()}}resolveItemKey(e,t){return e.id??String(t)}getExpandMode(){const e=this.getAttribute("expand-mode");return"single"===e||"multiple"===e||"all"===e?e:(this.hasAttribute("allow-multiple"),"multiple")}syncExpandedFromAttributes(){const e=this.items.map((e,t)=>this.resolveItemKey(e,t)),t=this.expandedItems,n=this.getExpandMode();t.length>0?this.expanded=new Set(t.filter(t=>e.includes(t))):this.expanded="all"!==n?new Set:new Set(e)}iconSize(e){return"s"===e?16:"l"===e?24:20}collectPanelContent(){const e=new Map,register=(t,n)=>{if(!(t instanceof HTMLElement)||"SLOT"===t.tagName)return;e.has(n)||e.set(n,[]);const s=e.get(n);s.includes(t)||s.push(t)};return Array.from(this.children).forEach(e=>{const t=e.getAttribute("slot")?.match(/^content-(\d+)$/);t&&register(e,Number(t[1]))}),this.querySelectorAll(":scope > .designbase-wc-accordion__item").forEach((e,t)=>{const n=e.querySelector(":scope > .designbase-wc-accordion__content > .designbase-wc-accordion__content-inner");n&&Array.from(n.children).forEach(e=>register(e,t))}),e}isItemExpanded(e,t){return this.expanded.has(this.resolveItemKey(e,t))}syncExpandedState(){const e=this.items;this.querySelectorAll(":scope > .designbase-wc-accordion__item").forEach((t,n)=>{const s=e[n];if(!s)return;const i=this.isItemExpanded(s,n);t.classList.toggle("designbase-wc-accordion__item--expanded",i),t.classList.toggle("designbase-wc-accordion__item--disabled",Boolean(s.disabled));const a=t.querySelector(".designbase-wc-accordion__trigger"),d=t.querySelector(".designbase-wc-accordion__content");a?.setAttribute("aria-expanded",String(i)),d?.setAttribute("aria-hidden",String(!i))})}render(){this.isRendering=!0;const t=this.collectPanelContent(),n=this.getAttribute("variant")||"default",s=this.getAttribute("size")||"m",i=this.getExpandMode(),a=this.getAttribute("default-item-type")||"none",d=this.items,c=this.iconSize(s);this.className=["designbase-wc-accordion",`designbase-wc-accordion--${n}`,`designbase-wc-accordion--${s}`,"multiple"===i&&"designbase-wc-accordion--multiple","single"===i&&"designbase-wc-accordion--single","all"===i&&"designbase-wc-accordion--all"].filter(Boolean).join(" "),this.setAttribute("role","region"),this.setAttribute("aria-label","아코디언"),this.querySelectorAll(":scope > .designbase-wc-accordion__item").forEach(e=>e.remove()),d.forEach((s,i)=>{const d=this.resolveItemKey(s,i),r=this.isItemExpanded(s,i),o=document.createElement("div");o.className=["designbase-wc-accordion__item",`designbase-wc-accordion__item--${n}`,r&&"designbase-wc-accordion__item--expanded",s.disabled&&"designbase-wc-accordion__item--disabled"].filter(Boolean).join(" "),o.dataset.itemKey=d;const l=document.createElement("button");l.type="button",l.className="designbase-wc-accordion__trigger",l.disabled=Boolean(s.disabled),l.setAttribute("aria-expanded",String(r)),l.setAttribute("aria-controls",`accordion-content-${d}`),l.addEventListener("click",()=>{s.disabled||this.toggle(d)});const m=s.itemType||a;if("number"===m){const e=document.createElement("div");e.className="designbase-wc-accordion__number",e.textContent=`${i+1}.`,l.append(e)}else if("question"===m){const e=document.createElement("div");e.className="designbase-wc-accordion__question",e.textContent="Q.",l.append(e)}else if("icon"===m&&s.icon){const t=document.createElement("div");t.className="designbase-wc-accordion__icon",t.append(e(s.icon,c)),l.append(t)}const p=document.createElement("span");p.className="designbase-wc-accordion__title",p.textContent=s.title;const h=document.createElement("div");h.className="designbase-wc-accordion__chevron",h.append(e("chevron-down",c)),l.append(p,h);const u=document.createElement("div");u.id=`accordion-content-${d}`,u.className="designbase-wc-accordion__content",u.setAttribute("aria-hidden",String(!r));const b=document.createElement("div");b.className="designbase-wc-accordion__content-inner";const g=t.get(i)||[];if(g.length>0)g.forEach(e=>{e.removeAttribute("slot"),b.append(e)});else if(s.content){const e=document.createElement("p");e.className="designbase-wc-accordion__content-text",e.textContent=s.content,b.append(e)}u.append(b),o.append(l,u),this.append(o)}),this.isRendering=!1}toggle(e){const t=this.getExpandMode();this.expanded.has(e)?this.expanded.delete(e):"single"===t?this.expanded=new Set([e]):this.expanded.add(e);const n=Array.from(this.expanded);this.syncExpandedState(),this.suppressExpandedAttrCallback=!0,this.expandedItems=n,this.suppressExpandedAttrCallback=!1,this.dispatchEvent(new CustomEvent("db-change",{detail:{expandedItems:n},bubbles:!0,composed:!0}))}}customElements.get("db-accordion")||customElements.define("db-accordion",DbAccordion);export{DbAccordion};

package/dist/esm/components/db-ad-banner.d.ts

@@ -6,8 +6,16 @@ declare class DbAdBanner extends HTMLElement {
     private autoCloseTimer?;
     private rootEl?;
     private gradientEl?;
+    private animBgEl?;
+    private animBgInner?;
+    private gridBgEl?;
+    private gridBgInner?;
     private contentEl?;
+    private mainEl?;
+    private textEl?;
     private closeBtn?;
+    private imageEl?;
+    private linkEl?;
     private iconEl?;
     private labelEl?;
     private badgeEl?;
@@ -25,11 +33,28 @@ declare class DbAdBanner extends HTMLElement {
     private getBool;
     private getType;
     private getVariant;
+    private getSize;
+    private ctaButtonSize;
     private build;
     private handleClose;
     private stopAutoClose;
     private startAutoClose;
-    private renderGradientWrapper;
+    private getBackground;
+    private ensureAnimBg;
+    private ensureGridBg;
+    /** 이전 배경 모드의 백드롭 엘리먼트를 정리한다. */
+    private clearBackdrop;
+    private renderBackground;
+    /** 장식 아이콘은 card 타입에서만 사용한다. */
+    private syncIcon;
+    /** floating 타입에서만 텍스트 상단에 배지 칩을 노출한다. */
+    private syncBadge;
+    /** floating 타입에서 배너 이미지를 콘텐츠 상단(패딩 밖)에 렌더한다. */
+    private syncImage;
+    /** topbar 타입에서 href 가 있으면 전체를 덮는 링크 오버레이를 렌더한다. */
+    private syncLink;
+    /** show-countdown + end-date 가 있을 때만 카운트다운을 마운트한다. */
+    private syncCountdown;
     private updateUI;
 }
 declare global {

package/dist/esm/components/db-ad-banner.js

@@ -1 +1 @@
-import{createDbIcon as t}from"./db-icons.js";const e="designbase-wc-ad-banner",s={hero:"지금 바로 시작하세요",topbar:"🎉 신규 가입 시 10,000원 적립금 증정!",card:"프리미엄 멤버십",floating:"오늘만 특가!"},i={hero:"최대 50% 할인된 가격으로 프리미엄 서비스를 경험해보세요. 기간 한정 특별 혜택!",topbar:"오늘 하루만 특별 혜택",card:"무제한 서비스 이용권을 특별가에 만나보세요",floating:"장바구니에 담긴 상품 추가 20% 할인"},n={hero:"자세히 보기",topbar:"지금 가입하기",card:"알아보기",floating:"할인받기"},a={hero:"star",topbar:"trending-up",card:"star-filled",floating:"cart"},l={primary:"primary",secondary:"secondary",success:"success",warning:"warning",error:"error"};class DbAdBanner extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.visible=!0,this.progress=100}static get observedAttributes(){return["type","variant","title","subtitle","cta-text","auto-close","close-delay","use-random-gradient","gradient-scheme","gradient-tone","gradient-animated","countdown-end-date","show-countdown","open"]}connectedCallback(){this.style.display="block",this.built||(this.built=!0,this.build()),this.updateUI()}disconnectedCallback(){this.stopAutoClose()}attributeChangedCallback(t){this.built&&("open"===t&&(this.visible="false"!==this.getAttribute("open")),this.updateUI())}getBool(t,e=!1){if(!this.hasAttribute(t))return e;const s=this.getAttribute(t);return""===s||"true"===s}getType(){const t=this.getAttribute("type")||"hero";return["hero","topbar","card","floating"].includes(t)?t:"hero"}getVariant(){const t=this.getAttribute("variant")||"primary";return["primary","secondary","success","warning","error"].includes(t)?t:"primary"}build(){this.rootEl=document.createElement("div"),this.contentEl=document.createElement("div"),this.contentEl.className=`${e}__content`,this.closeBtn=document.createElement("button"),this.closeBtn.type="button",this.closeBtn.className=`${e}__close`,this.closeBtn.setAttribute("aria-label","닫기"),this.closeBtn.append(t("close",20)),this.closeBtn.addEventListener("click",()=>this.handleClose());const s=document.createElement("div");s.className=`${e}__main`,this.iconEl=document.createElement("div"),this.iconEl.className=`${e}__icon`,this.labelEl=document.createElement("span"),this.labelEl.className=`${e}__label`,this.labelEl.textContent="특별 이벤트",this.badgeEl=document.createElement("span"),this.badgeEl.className=`${e}__badge`,this.badgeEl.textContent="HOT DEAL",this.titleEl=document.createElement("h2"),this.titleEl.className=`${e}__title`,this.subtitleEl=document.createElement("p"),this.subtitleEl.className=`${e}__subtitle`;const i=document.createElement("div");i.className=`${e}__text`,this.countdownWrapEl=document.createElement("div"),this.countdownWrapEl.className=`${e}__countdown`,this.countdownEl=document.createElement("db-countdown"),this.countdownEl.setAttribute("size","s"),this.countdownEl.setAttribute("variant","compact"),this.countdownEl.setAttribute("show-labels","false"),this.countdownWrapEl.append(this.countdownEl),i.append(this.titleEl,this.subtitleEl,this.countdownWrapEl),this.actionsEl=document.createElement("div"),this.actionsEl.className=`${e}__actions`,this.ctaEl=document.createElement("db-button"),this.ctaEl.className=`${e}__cta`,this.ctaEl.setAttribute("variant","primary"),this.ctaEl.setAttribute("end-icon","arrow-right"),this.ctaEl.addEventListener("click",t=>{t.stopPropagation(),this.dispatchEvent(new CustomEvent("db-cta-click",{bubbles:!0,composed:!0}))}),this.actionsEl.append(this.ctaEl),s.append(this.iconEl,i,this.actionsEl),this.progressEl=document.createElement("div"),this.progressEl.className=`${e}__progress`,this.progressBarEl=document.createElement("div"),this.progressBarEl.className=`${e}__progress-bar`,this.progressEl.append(this.progressBarEl),this.contentEl.append(this.closeBtn,s,this.progressEl),this.rootEl.append(this.contentEl),this.append(this.rootEl)}handleClose(){this.visible=!1,this.hidden=!0,this.stopAutoClose(),this.dispatchEvent(new CustomEvent("db-close",{bubbles:!0,composed:!0}))}stopAutoClose(){this.autoCloseTimer&&(window.clearInterval(this.autoCloseTimer),this.autoCloseTimer=void 0)}startAutoClose(t){this.stopAutoClose(),this.progress=100,this.autoCloseTimer=window.setInterval(()=>{this.progress-=100/(t/100),this.progressBarEl&&(this.progressBarEl.style.width=`${Math.max(this.progress,0)}%`),this.progress<=0&&this.handleClose()},100)}renderGradientWrapper(t){this.rootEl&&this.contentEl&&(t?(this.gradientEl||(this.gradientEl=document.createElement("db-random-gradient"),this.gradientEl.className=`${e}__gradient-bg`,this.gradientEl.setAttribute("height","100%"),this.gradientEl.setAttribute("width","100%")),this.gradientEl.parentElement!==this.rootEl&&this.rootEl.replaceChildren(this.gradientEl),this.contentEl.parentElement!==this.gradientEl&&this.gradientEl.append(this.contentEl)):(this.gradientEl&&(this.gradientEl.remove(),this.gradientEl=void 0),this.contentEl.parentElement!==this.rootEl&&this.rootEl.replaceChildren(this.contentEl)))}updateUI(){if(!this.visible||"false"===this.getAttribute("open"))return void(this.hidden=!0);this.hidden=!1;const r=this.getType(),o=this.getVariant(),h=this.getAttribute("title")||s[r],d=this.getAttribute("subtitle")||i[r],c=this.getAttribute("cta-text")||n[r],E=this.getBool("auto-close"),u=Math.max(Number(this.getAttribute("close-delay")||5e3),1e3),b=this.getBool("use-random-gradient"),p=this.getAttribute("gradient-tone")||"vivid",g=!this.hasAttribute("gradient-animated")||"false"!==this.getAttribute("gradient-animated"),m=this.getBool("show-countdown"),A=this.getAttribute("countdown-end-date");this.rootEl&&(this.rootEl.className=[e,`${e}--type-${r}`,`${e}--variant-${o}`,E&&`${e}--auto-close`,b&&`${e}--with-gradient`,b&&"light"===p&&`${e}--gradient-light`].filter(Boolean).join(" ")),b&&this.gradientEl&&(this.gradientEl.setAttribute("scheme",this.getAttribute("gradient-scheme")||l[o]),this.gradientEl.setAttribute("tone",p),this.gradientEl.setAttribute("animated",g?"true":"false")),this.renderGradientWrapper(b),this.iconEl&&(this.iconEl.replaceChildren(t(a[r],"card"===r?32:"floating"===r?28:24)),this.labelEl&&this.iconEl.append(this.labelEl),this.badgeEl&&this.iconEl.append(this.badgeEl),this.labelEl&&(this.labelEl.hidden="topbar"!==r),this.badgeEl&&(this.badgeEl.hidden="floating"!==r)),this.titleEl&&(this.titleEl.textContent=h),this.subtitleEl&&(this.subtitleEl.textContent=d),this.countdownWrapEl&&this.countdownEl&&(this.countdownWrapEl.hidden=!(m&&A),m&&A&&this.countdownEl.setAttribute("end-date",A)),this.ctaEl&&(this.ctaEl.textContent=c,this.ctaEl.setAttribute("size","hero"===r?"l":"card"===r?"s":"m"),"floating"===r?this.ctaEl.setAttribute("full-width",""):this.ctaEl.removeAttribute("full-width")),this.progressEl&&(this.progressEl.hidden=!E),this.progressBarEl&&E&&(this.progressBarEl.style.width=`${this.progress}%`),this.stopAutoClose(),E&&this.startAutoClose(u)}}customElements.get("db-ad-banner")||customElements.define("db-ad-banner",DbAdBanner);export{DbAdBanner};
+import{createDbIcon as t}from"./db-icons.js";const e="designbase-wc-ad-banner",i={hero:"지금 바로 시작하세요",topbar:"🎉 신규 가입 시 10,000원 적립금 증정!",card:"프리미엄 멤버십",floating:"오늘만 특가!"},s={hero:"최대 50% 할인된 가격으로 프리미엄 서비스를 경험해보세요. 기간 한정 특별 혜택!",topbar:"오늘 하루만 특별 혜택",card:"무제한 서비스 이용권을 특별가에 만나보세요",floating:"장바구니에 담긴 상품 추가 20% 할인"},n={hero:"자세히 보기",topbar:"지금 가입하기",card:"알아보기",floating:"할인받기"},r="star-filled",a={primary:"primary",secondary:"secondary",success:"success",warning:"warning",error:"error"};class DbAdBanner extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.visible=!0,this.progress=100}static get observedAttributes(){return["type","variant","size","title","subtitle","cta-text","image","image-alt","href","target","auto-close","close-delay","background","animation-type","grid-type","use-random-gradient","gradient-scheme","gradient-tone","gradient-animated","countdown-end-date","show-countdown","open"]}connectedCallback(){this.style.display="block",this.built||(this.built=!0,this.build()),this.updateUI()}disconnectedCallback(){this.stopAutoClose()}attributeChangedCallback(t){this.built&&("open"===t&&(this.visible="false"!==this.getAttribute("open")),this.updateUI())}getBool(t,e=!1){if(!this.hasAttribute(t))return e;const i=this.getAttribute(t);return""===i||"true"===i}getType(){const t=this.getAttribute("type")||"hero";return["hero","topbar","card","floating"].includes(t)?t:"hero"}getVariant(){const t=this.getAttribute("variant")||"primary";return["primary","secondary","success","warning","error"].includes(t)?t:"primary"}getSize(){const t=this.getAttribute("size")||"m";return["s","m","l"].includes(t)?t:"m"}ctaButtonSize(t,e){return"card"===t?"s":"floating"===t?"s"===e?"s":"m":e}build(){this.rootEl=document.createElement("div"),this.contentEl=document.createElement("div"),this.contentEl.className=`${e}__content`,this.closeBtn=document.createElement("button"),this.closeBtn.type="button",this.closeBtn.className=`${e}__close`,this.closeBtn.setAttribute("aria-label","닫기"),this.closeBtn.append(t("close",16)),this.closeBtn.addEventListener("click",t=>{t.stopPropagation(),this.handleClose()}),this.imageEl=document.createElement("img"),this.imageEl.className=`${e}__image`,this.imageEl.loading="lazy";const i=document.createElement("div");i.className=`${e}__main`,this.mainEl=i,this.iconEl=document.createElement("div"),this.iconEl.className=`${e}__icon`,this.labelEl=document.createElement("span"),this.labelEl.className=`${e}__label`,this.labelEl.textContent="특별 이벤트",this.badgeEl=document.createElement("span"),this.badgeEl.className=`${e}__badge`,this.badgeEl.textContent="HOT DEAL",this.titleEl=document.createElement("h2"),this.titleEl.className=`${e}__title`,this.subtitleEl=document.createElement("p"),this.subtitleEl.className=`${e}__subtitle`;const s=document.createElement("div");s.className=`${e}__text`,this.textEl=s,this.countdownWrapEl=document.createElement("div"),this.countdownWrapEl.className=`${e}__countdown`,s.append(this.titleEl,this.subtitleEl),this.actionsEl=document.createElement("div"),this.actionsEl.className=`${e}__actions`,this.ctaEl=document.createElement("db-button"),this.ctaEl.className=`${e}__cta`,this.ctaEl.setAttribute("variant","primary"),this.ctaEl.setAttribute("end-icon","arrow-right"),this.ctaEl.addEventListener("click",t=>{t.stopPropagation(),this.dispatchEvent(new CustomEvent("db-cta-click",{bubbles:!0,composed:!0}))}),this.actionsEl.append(this.ctaEl),i.append(s,this.actionsEl),this.progressEl=document.createElement("div"),this.progressEl.className=`${e}__progress`,this.progressBarEl=document.createElement("div"),this.progressBarEl.className=`${e}__progress-bar`,this.progressEl.append(this.progressBarEl),this.contentEl.append(this.closeBtn,i,this.progressEl),this.rootEl.append(this.contentEl),this.append(this.rootEl),this.contentEl.addEventListener("click",t=>{"topbar"===this.getType()&&(t.target?.closest(`.${e}__close`)||this.dispatchEvent(new CustomEvent("db-cta-click",{bubbles:!0,composed:!0})))})}handleClose(){this.visible=!1,this.style.display="none",this.setAttribute("open","false"),this.stopAutoClose(),this.dispatchEvent(new CustomEvent("db-close",{bubbles:!0,composed:!0}))}stopAutoClose(){this.autoCloseTimer&&(window.clearInterval(this.autoCloseTimer),this.autoCloseTimer=void 0)}startAutoClose(t){this.stopAutoClose(),this.progress=100,this.autoCloseTimer=window.setInterval(()=>{this.progress-=100/(t/100),this.progressBarEl&&(this.progressBarEl.style.width=`${Math.max(this.progress,0)}%`),this.progress<=0&&this.handleClose()},100)}getBackground(){const t=this.getAttribute("background");return t&&["solid","gradient","animation","grid"].includes(t)?t:this.getBool("use-random-gradient")?"gradient":"solid"}ensureAnimBg(){if(!this.animBgEl){const t=document.createElement("div");t.className=`${e}__backdrop`;const i=document.createElement("db-animation-background");i.className=`${e}__anim-bg`,i.setAttribute("width","100%"),i.setAttribute("height","100%"),t.append(i),this.animBgEl=t,this.animBgInner=i}return this.animBgEl}ensureGridBg(){if(!this.gridBgEl){const t=document.createElement("div");t.className=`${e}__backdrop`;const i=document.createElement("db-grid-background");i.className=`${e}__grid-bg`,i.setAttribute("width","100%"),i.setAttribute("height","100%"),t.append(i),this.gridBgEl=t,this.gridBgInner=i}return this.gridBgEl}clearBackdrop(t){"gradient"!==t&&this.gradientEl&&(this.gradientEl.remove(),this.gradientEl=void 0),"animation"!==t&&this.animBgEl&&(this.animBgEl.remove(),this.animBgEl=void 0,this.animBgInner=void 0),"grid"!==t&&this.gridBgEl&&(this.gridBgEl.remove(),this.gridBgEl=void 0,this.gridBgInner=void 0)}renderBackground(t,i){if(!this.rootEl||!this.contentEl)return;if(this.clearBackdrop(t),"gradient"===t){this.gradientEl||(this.gradientEl=document.createElement("db-random-gradient"),this.gradientEl.className=`${e}__gradient-bg`,this.gradientEl.setAttribute("height","100%"),this.gradientEl.setAttribute("width","100%"));const t=this.getAttribute("gradient-tone")||"vivid",s=!this.hasAttribute("gradient-animated")||"false"!==this.getAttribute("gradient-animated");return this.gradientEl.setAttribute("scheme",this.getAttribute("gradient-scheme")||a[i]),this.gradientEl.setAttribute("tone",t),this.gradientEl.setAttribute("animated",s?"true":"false"),this.gradientEl.parentElement!==this.rootEl&&this.rootEl.replaceChildren(this.gradientEl),void(this.contentEl.parentElement!==this.gradientEl&&this.gradientEl.append(this.contentEl))}const s=[];if("animation"===t){const t=this.ensureAnimBg();this.animBgInner?.setAttribute("type",this.getAttribute("animation-type")||"graphite"),this.animBgInner?.setAttribute("theme","dark"),s.push(t)}else if("grid"===t){const t=this.ensureGridBg();this.gridBgInner?.setAttribute("type",this.getAttribute("grid-type")||"lines"),this.gridBgInner?.setAttribute("color","var(--db-text-inverse-primary)"),this.gridBgInner?.setAttribute("opacity","0.18"),this.gridBgInner?.setAttribute("fade","vignette"),this.gridBgInner?.setAttribute("animated",""),s.push(t)}const n=[...s,this.contentEl],r=Array.from(this.rootEl.children);r.length===n.length&&n.every((t,e)=>r[e]===t)||this.rootEl.replaceChildren(...n)}syncIcon(e){this.mainEl&&this.textEl&&this.iconEl&&("card"===e?(this.iconEl.replaceChildren(t(r,32)),this.iconEl.parentElement!==this.mainEl&&this.mainEl.insertBefore(this.iconEl,this.textEl)):this.iconEl.remove())}syncBadge(t){this.textEl&&this.badgeEl&&("floating"===t?this.badgeEl.parentElement!==this.textEl&&this.textEl.insertBefore(this.badgeEl,this.textEl.firstChild):this.badgeEl.remove())}syncImage(t,e){this.contentEl&&this.imageEl&&this.mainEl&&("floating"===t&&e?(this.imageEl.src=e,this.imageEl.alt=this.getAttribute("image-alt")||"",this.imageEl.parentElement!==this.contentEl&&this.contentEl.insertBefore(this.imageEl,this.mainEl)):this.imageEl.remove())}syncLink(t,i){if(!this.contentEl)return;if("topbar"!==t||!i)return void this.linkEl?.remove();this.linkEl||(this.linkEl=document.createElement("a"),this.linkEl.className=`${e}__link`),this.linkEl.setAttribute("href",i);const s=this.getAttribute("target");s?this.linkEl.setAttribute("target",s):this.linkEl.removeAttribute("target"),this.linkEl.setAttribute("aria-label",this.titleEl?.textContent||"배너 링크"),this.linkEl.parentElement!==this.contentEl&&this.contentEl.append(this.linkEl)}syncCountdown(t,e){this.textEl&&this.countdownWrapEl&&(t&&e?(this.countdownEl||(this.countdownEl=document.createElement("db-countdown"),this.countdownEl.setAttribute("size","s"),this.countdownEl.setAttribute("variant","compact"),this.countdownEl.setAttribute("show-labels","false"),this.countdownWrapEl.replaceChildren(this.countdownEl)),this.countdownEl.setAttribute("end-date",e),this.countdownWrapEl.parentElement!==this.textEl&&this.textEl.append(this.countdownWrapEl)):this.countdownWrapEl.remove())}updateUI(){if(!this.visible||"false"===this.getAttribute("open"))return void(this.style.display="none");this.style.display="block";const t=this.getType(),r=this.getVariant(),a=this.getSize(),l=this.getAttribute("title")||i[t],o=this.getAttribute("subtitle")||s[t],h=this.getAttribute("cta-text")||n[t],c=this.getBool("auto-close"),d=Math.max(Number(this.getAttribute("close-delay")||5e3),1e3),g=this.getBackground(),E=this.getAttribute("gradient-tone")||"vivid",u=this.getBool("show-countdown"),m=this.getAttribute("countdown-end-date");this.rootEl&&(this.rootEl.className=[e,`${e}--type-${t}`,`${e}--variant-${r}`,`${e}--size-${a}`,`${e}--bg-${g}`,c&&`${e}--auto-close`,"gradient"===g&&`${e}--with-gradient`,"gradient"===g&&"light"===E&&`${e}--gradient-light`].filter(Boolean).join(" ")),this.renderBackground(g,r),this.syncIcon(t),this.syncBadge(t),this.syncImage(t,this.getAttribute("image")),this.syncLink(t,this.getAttribute("href")),this.titleEl&&(this.titleEl.textContent=l),this.subtitleEl&&(this.subtitleEl.textContent=o),this.syncCountdown(u,m),this.actionsEl&&(this.actionsEl.hidden="topbar"===t),this.ctaEl&&(this.ctaEl.textContent=h,this.ctaEl.setAttribute("size",this.ctaButtonSize(t,a)),"floating"===t?this.ctaEl.setAttribute("full-width",""):this.ctaEl.removeAttribute("full-width")),this.progressEl&&(this.progressEl.hidden=!c),this.progressBarEl&&c&&(this.progressBarEl.style.width=`${this.progress}%`),this.stopAutoClose(),c&&this.startAutoClose(d)}}customElements.get("db-ad-banner")||customElements.define("db-ad-banner",DbAdBanner);export{DbAdBanner};

package/dist/esm/components/db-animation-background.d.ts

@@ -1,15 +1,36 @@
 declare class DbAnimationBackground extends HTMLElement {
     private layersEl?;
     private contentEl?;
+    private controlsRootEl?;
+    private panelEl?;
+    private panelOpen;
     private layerHandle?;
     private clickHandler?;
+    private mountedType?;
+    private controlInputs;
+    private syncingControls;
     static get observedAttributes(): string[];
     connectedCallback(): void;
     disconnectedCallback(): void;
-    attributeChangedCallback(): void;
-    private teardownLayers;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    private getBool;
     private getSizeStyle;
+    private getConfig;
+    private teardownLayers;
+    private remountLayers;
+    private canLiveUpdate;
+    private applyConfig;
+    private syncClickable;
     private render;
+    private ensureControlsShell;
+    private syncControlsVisibility;
+    private syncPanelState;
+    private createIconButton;
+    private rebuildControlInputs;
+    private createControlField;
+    private commitControlValue;
+    private syncControlInputs;
+    private renderColorInputs;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -1 +1 @@
-import{parseAnimationBackgroundConfig as t,applyContainerStyles as e,mountAnimationLayers as i,getEffectiveGridColor as s,ANIMATION_BACKGROUND_CLASS as n}from"./animation-background/layers.js";const a=n;class DbAnimationBackground extends HTMLElement{static get observedAttributes(){return["type","theme","intensity","blur","speed","direction","colors","width","height","border-radius","opacity","blend-mode","particle-count","particle-size","star-count","star-size","wind","clickable","disabled","show-grid","grid-size","grid-color","grid-opacity","noise","show-vignette","preset","zoom"]}connectedCallback(){this.style.display="block",this.render()}disconnectedCallback(){this.teardownLayers(),this.clickHandler&&(this.removeEventListener("click",this.clickHandler),this.clickHandler=void 0)}attributeChangedCallback(){this.isConnected&&this.render()}teardownLayers(){this.layerHandle?.destroy?.(),this.layerHandle=void 0,this.layersEl&&this.layersEl.replaceChildren()}getSizeStyle(t){if(!t)return;const e=Number(t);return Number.isFinite(e)?`${e}px`:t}render(){const n=t(this);this.className=[a,`${a}--${n.type}`,n.clickable&&!n.disabled&&`${a}--clickable`,n.disabled&&`${a}--disabled`].filter(Boolean).join(" "),e(this,n);const l=this.getSizeStyle(this.getAttribute("width")),r=this.getSizeStyle(this.getAttribute("height")),o=this.getSizeStyle(this.getAttribute("border-radius"));l&&(this.style.width=l),r&&(this.style.height=r),o&&(this.style.borderRadius=o),this.style.opacity=String(n.opacity);const d=this.getAttribute("blend-mode");if(d&&(this.style.mixBlendMode=d),!this.layersEl){this.layersEl=document.createElement("div"),this.layersEl.className=`${a}__layers`,Object.assign(this.layersEl.style,{position:"absolute",inset:"0",width:"100%",height:"100%",zIndex:"0"}),this.contentEl=document.createElement("div"),this.contentEl.className=`${a}__content`,Object.assign(this.contentEl.style,{position:"relative",zIndex:"10",width:"100%",height:"100%"});const t=document.createElement("slot");this.contentEl.appendChild(t),this.append(this.layersEl,this.contentEl)}this.teardownLayers();const c=this.querySelector(`.${a}__grid-overlay`);if(c?.remove(),this.layerHandle=i(this.layersEl,n),n.showGrid&&!n.disabled){const t=document.createElement("div");t.className=`${a}__grid-overlay`,Object.assign(t.style,{position:"absolute",inset:"0",width:"100%",height:"100%",pointerEvents:"none",zIndex:"1",backgroundImage:`linear-gradient(to right, ${s(n)} 1px, transparent 1px), linear-gradient(to bottom, ${s(n)} 1px, transparent 1px)`,backgroundSize:`${n.gridSize}px ${n.gridSize}px`,opacity:String(n.gridOpacity),maskImage:"linear-gradient(to bottom, black 0%, black 92%, transparent 100%)",WebkitMaskImage:"linear-gradient(to bottom, black 0%, black 92%, transparent 100%)"}),this.insertBefore(t,this.contentEl??null)}this.clickHandler&&(this.removeEventListener("click",this.clickHandler),this.clickHandler=void 0),n.clickable&&!n.disabled&&(this.clickHandler=()=>{this.dispatchEvent(new CustomEvent("db-click",{bubbles:!0,composed:!0}))},this.addEventListener("click",this.clickHandler))}}customElements.get("db-animation-background")||customElements.define("db-animation-background",DbAnimationBackground);export{DbAnimationBackground};
+import{parseAnimationBackgroundConfig as t,mountAnimationLayers as e,applyContainerStyles as s,syncLuminaOverlays as n,ANIMATION_BACKGROUND_CLASS as i}from"./animation-background/layers.js";import{getControlsForType as o,resetControlsToDefaults as l,getControlSliderBounds as r,controlSliderToAttr as a,writeControlAttribute as c,readControlValue as d,controlAttrToSlider as h}from"./animation-background/controls.js";import{isGraphitePresetId as u,getGraphitePreset as p}from"./animation-background/graphite-presets.js";import{createDbIcon as m}from"./db-icons.js";const b=i,g=["particles","stars","snow","flowers","confetti","mesh-flow","fluid","radiant","ethereal","graphite"],y=["mesh-flow","fluid","radiant","ethereal"];class DbAnimationBackground extends HTMLElement{constructor(){super(...arguments),this.panelOpen=!1,this.controlInputs=new Map,this.syncingControls=!1}static get observedAttributes(){return["type","theme","intensity","blur","speed","direction","colors","width","height","border-radius","opacity","blend-mode","particle-count","particle-size","star-count","star-size","wind","clickable","disabled","noise","show-vignette","preset","zoom","show-controls","shader-speed","shader-intensity","warp"]}connectedCallback(){this.style.display="block",this.render()}disconnectedCallback(){this.teardownLayers(),this.clickHandler&&(this.removeEventListener("click",this.clickHandler),this.clickHandler=void 0)}attributeChangedCallback(t,e,s){this.isConnected&&e!==s&&("show-controls"!==t?this.syncingControls||("type"===t&&this.getBool("show-controls",!1)&&this.rebuildControlInputs(),this.applyConfig(),this.getBool("show-controls",!1)&&this.syncControlInputs()):this.syncControlsVisibility())}getBool(t,e=!1){return this.hasAttribute(t)?"false"!==this.getAttribute(t):e}getSizeStyle(t){if(!t)return;const e=Number(t);return Number.isFinite(e)?`${e}px`:t}getConfig(){return t(this)}teardownLayers(){this.layerHandle?.destroy?.(),this.layerHandle=void 0,this.mountedType=void 0,this.layersEl&&this.layersEl.replaceChildren()}remountLayers(t){this.layersEl&&(this.teardownLayers(),this.layerHandle=e(this.layersEl,t),this.mountedType=t.type)}canLiveUpdate(t){return this.mountedType===t.type&&g.includes(t.type)&&"function"==typeof this.layerHandle?.update}applyConfig(){const t=this.getConfig();this.className=[b,`${b}--${t.type}`,t.clickable&&!t.disabled&&`${b}--clickable`,t.disabled&&`${b}--disabled`,this.getBool("show-controls",!1)&&`${b}--show-controls`].filter(Boolean).join(" "),s(this,t);const e=this.getSizeStyle(this.getAttribute("width")),i=this.getSizeStyle(this.getAttribute("height")),o=this.getSizeStyle(this.getAttribute("border-radius"));e&&(this.style.width=e),i&&(this.style.height=i),o&&(this.style.borderRadius=o),this.style.opacity="",this.layersEl&&(this.layersEl.style.opacity=String(t.opacity));const l=this.getAttribute("blend-mode");if(l&&(this.style.mixBlendMode=l),t.disabled)return this.teardownLayers(),void this.syncClickable(t);this.canLiveUpdate(t)?(this.layerHandle?.update?.(t),this.layersEl&&y.includes(t.type)&&n(this.layersEl,t.noise,t.showVignette)):this.remountLayers(t),this.syncClickable(t)}syncClickable(t){this.clickHandler&&(this.removeEventListener("click",this.clickHandler),this.clickHandler=void 0),t.clickable&&!t.disabled&&(this.clickHandler=()=>{this.dispatchEvent(new CustomEvent("db-click",{bubbles:!0,composed:!0}))},this.addEventListener("click",this.clickHandler))}render(){if(!this.layersEl){this.layersEl=document.createElement("div"),this.layersEl.className=`${b}__layers`,Object.assign(this.layersEl.style,{position:"absolute",inset:"0",width:"100%",height:"100%",zIndex:"0"}),this.contentEl=document.createElement("div"),this.contentEl.className=`${b}__content`,Object.assign(this.contentEl.style,{position:"relative",zIndex:"10",width:"100%",height:"100%"});const t=document.createElement("slot");this.contentEl.appendChild(t),this.append(this.layersEl,this.contentEl)}this.ensureControlsShell(),this.applyConfig(),this.syncControlsVisibility()}ensureControlsShell(){if(this.controlsRootEl)return;const t=document.createElement("div");t.className=`${b}__controls-root`,t.hidden=!0;const e=this.createIconButton("settings","컨트롤 열기",()=>{this.panelOpen=!this.panelOpen,this.syncPanelState()});e.setAttribute("variant","secondary"),e.className=`${b}__controls-gear`;const s=document.createElement("div");s.className=`${b}__controls-panel`,s.setAttribute("role","dialog"),s.hidden=!0,s.addEventListener("click",t=>t.stopPropagation());const n=document.createElement("div");n.className=`${b}__controls-head`;const i=document.createElement("span");i.className=`${b}__controls-title`,i.append(m("settings",14),document.createTextNode(" Controls"));const r=this.createIconButton("refresh","기본값으로 초기화",()=>{const t=this.getConfig(),e=o(t.type);if(this.syncingControls=!0,l(this,e),"graphite"===t.type){const t=p("graphite");this.setAttribute("zoom",String(t.scale)),this.setAttribute("colors",JSON.stringify(t.colors))}this.syncingControls=!1,this.applyConfig(),this.syncControlInputs()});r.className=`${b}__controls-icon-btn`,n.append(i,r),s.append(n),t.append(e,s),this.appendChild(t),this.controlsRootEl=t,this.panelEl=s}syncControlsVisibility(){if(!this.controlsRootEl)return;const t=this.getBool("show-controls",!1);this.controlsRootEl.hidden=!t,t?this.rebuildControlInputs():(this.panelOpen=!1,this.syncPanelState())}syncPanelState(){if(!this.controlsRootEl||!this.panelEl)return;const t=this.controlsRootEl.querySelector(`.${b}__controls-gear`);t&&(t.dataset.open=this.panelOpen?"true":"false",t.setAttribute("aria-expanded",this.panelOpen?"true":"false")),this.panelEl.hidden=!this.panelOpen}createIconButton(t,e,s){const n=document.createElement("db-button");return n.setAttribute("variant","tertiary"),n.setAttribute("size","s"),n.setAttribute("icon-only",""),n.setAttribute("start-icon",t),n.setAttribute("aria-label",e),n.addEventListener("click",t=>{t.stopPropagation(),s()}),n}rebuildControlInputs(){if(!this.panelEl)return;this.panelEl.querySelectorAll(`.${b}__controls-field`).forEach(t=>t.remove()),this.controlInputs.clear();const t=this.getConfig(),e=o(t.type),s=this.panelEl.querySelector(`.${b}__controls-title`);s&&(s.lastChild?.remove(),s.append(document.createTextNode(` ${t.type}`))),e.forEach(t=>{const e=this.createControlField(t);this.panelEl?.appendChild(e)}),this.syncControlInputs()}createControlField(t){const e=document.createElement("div");if(e.className=`${b}__controls-field`,e.dataset.attr=t.attr,"range"===t.kind){const s=r(t),n=document.createElement("db-range-slider");return n.className=`${b}__controls-range`,n.setAttribute("size","s"),n.setAttribute("full-width",""),n.setAttribute("show-label",""),n.setAttribute("label",t.label),n.setAttribute("show-value",""),n.setAttribute("value-position","top"),n.setAttribute("show-thumb-tooltip",""),n.setAttribute("min",String(s.min)),n.setAttribute("max",String(s.max)),n.setAttribute("step",String(s.step)),null!=s.fixed&&n.setAttribute("value-fixed",String(s.fixed)),n.addEventListener("db-change",e=>{const s=e.detail;null!=s.value&&this.commitControlValue(t,a(t,s.value))}),e.appendChild(n),this.controlInputs.set(t.attr,n),e}if("select"===t.kind){const s=document.createElement("div");s.className=`${b}__controls-label`,s.textContent=t.label;const n=t.options??[];if(n.length>4){const i=document.createElement("db-select");i.className=`${b}__controls-select`,i.setAttribute("size","s"),i.setAttribute("full-width",""),i.setAttribute("options",JSON.stringify(n.map(t=>({value:t,label:t})))),i.addEventListener("db-change",e=>{const s=e.detail;null!=s.value&&this.commitControlValue(t,s.value)}),e.append(s,i),this.controlInputs.set(t.attr,i)}else{const i=document.createElement("db-segment-control");i.className=`${b}__controls-seg`,i.setAttribute("size","s"),i.setAttribute("full-width",""),i.setAttribute("options",JSON.stringify(n.map(t=>({value:t,label:t})))),i.addEventListener("db-change",e=>{const s=e.detail;null!=s.value&&this.commitControlValue(t,s.value)}),e.append(s,i),this.controlInputs.set(t.attr,i)}return e}if("toggle"===t.kind){const s=document.createElement("div");s.className=`${b}__controls-toggle`;const n=document.createElement("span");n.textContent=t.label;const i=document.createElement("db-toggle");return i.setAttribute("size","s"),i.addEventListener("db-change",e=>{const s=e.detail;this.commitControlValue(t,Boolean(s.checked))}),s.append(n,i),e.appendChild(s),this.controlInputs.set(t.attr,i),e}const s=document.createElement("div");s.className=`${b}__controls-label`,s.textContent=t.label;const n=document.createElement("div");return n.className=`${b}__controls-colors`,e.append(s,n),this.controlInputs.set(t.attr,n),e}commitControlValue(t,e){if(this.syncingControls=!0,c(this,t,e),"preset"===t.attr&&"graphite"===this.getConfig().type&&"string"==typeof e&&u(e)){const t=p(e);this.setAttribute("zoom",String(t.scale)),this.setAttribute("colors",JSON.stringify(t.colors))}this.syncingControls=!1,this.applyConfig()}syncControlInputs(){o(this.getConfig().type).forEach(t=>{const e=d(this,t),s=this.controlInputs.get(t.attr);if(s)if("range"===t.kind&&function isRangeSlider(t){return"DB-RANGE-SLIDER"===t.tagName}(s)){const n=Number(e);s.setAttribute("value",String(h(t,n)))}else if("select"===t.kind)s.setAttribute("value",String(e));else if("toggle"===t.kind){Boolean(e)?s.setAttribute("checked",""):s.removeAttribute("checked")}else"colors"===t.kind&&this.renderColorInputs(s,t,e)})}renderColorInputs(t,e,s){const n=[...s];t.replaceChildren();const commitStructuralChange=s=>{this.commitControlValue(e,s),this.renderColorInputs(t,e,s)};if(n.forEach((s,i)=>{const o=document.createElement("div");o.className=`${b}__controls-color`;const l=document.createElement("db-color-picker");if(l.className=`${b}__controls-color-picker`,l.setAttribute("size","s"),l.setAttribute("full-width",""),l.setAttribute("show-alpha","false"),l.setAttribute("show-eyedropper","false"),l.setAttribute("value",s),l.addEventListener("db-change",t=>{const s=t.detail,o=s?.value;"string"==typeof o&&o&&(n[i]=o,this.commitControlValue(e,[...n]))}),o.appendChild(l),n.length>1){const t=this.createIconButton("trash","색상 제거",()=>{commitStructuralChange(n.filter((t,e)=>e!==i))});t.className=`${b}__controls-color-remove`,o.appendChild(t)}t.appendChild(o)}),n.length<8){const e=this.createIconButton("plus","색상 추가",()=>{commitStructuralChange([...n,n[n.length-1]??"#ffffff"])});e.className=`${b}__controls-color-add`,t.appendChild(e)}}}customElements.get("db-animation-background")||customElements.define("db-animation-background",DbAnimationBackground);export{DbAnimationBackground};

package/dist/esm/components/db-animation-text.d.ts

@@ -6,11 +6,18 @@ declare class DbAnimationText extends HTMLElement {
     private displayText;
     private isVisible;
     private isAnimating;
+    private wordEls;
+    private scrollHandler?;
+    private rafId?;
+    private rotateToken;
+    private rotateObserver?;
     static get observedAttributes(): string[];
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(): void;
     private getText;
+    private getRotateTexts;
+    private getLongestText;
     private getType;
     private getTrigger;
     private ensureStructure;
@@ -18,6 +25,10 @@ declare class DbAnimationText extends HTMLElement {
     private syncFromAttributes;
     private syncClasses;
     private setupTrigger;
+    private setupTextRotate;
+    private setupScrollFill;
+    private teardownScrollFill;
+    private updateScrollFill;
     private startAnimation;
     private startTyping;
     private startDecoding;

package/dist/esm/components/db-animation-text.js

@@ -1 +1 @@
-const t="designbase-wc-animation-text";class DbAnimationText extends HTMLElement{constructor(){super(...arguments),this.timers=[],this.displayText="",this.isVisible=!1,this.isAnimating=!1}static get observedAttributes(){return["text","trigger","type","speed","repeat","delay","direction","size","color","custom-color","weight","align","gradient-colors","wave-colors","glow-color","clickable","disabled"]}connectedCallback(){this.style.display="inline-block",this.ensureStructure(),this.syncFromAttributes(),this.setupTrigger()}disconnectedCallback(){this.clearTimers(),this.observer?.disconnect()}attributeChangedCallback(){this.isConnected&&(this.syncFromAttributes(),this.setupTrigger())}getText(){return this.getAttribute("text")||this.textContent?.trim()||""}getType(){const t=this.getAttribute("type")||"fade";return["typing","fade","slide","bounce","shake","glow","gradient","wave","flip","scale","decode"].includes(t)?t:"fade"}getTrigger(){const t=this.getAttribute("trigger")||"mount";return["mount","hover","click","in-view"].includes(t)?t:"mount"}ensureStructure(){this.ghostEl||(this.ghostEl=document.createElement("span"),this.ghostEl.setAttribute("aria-hidden","true"),this.ghostEl.style.visibility="hidden",this.ghostEl.style.pointerEvents="none",this.ghostEl.style.userSelect="none",this.layerEl=document.createElement("span"),this.layerEl.style.position="absolute",this.layerEl.style.top="0",this.layerEl.style.left="0",this.append(this.ghostEl,this.layerEl),this.addEventListener("mouseenter",()=>{"hover"!==this.getTrigger()||this.hasAttribute("disabled")||(this.isVisible=!0,this.startAnimation(),this.syncClasses())}),this.addEventListener("mouseleave",()=>{if("hover"!==this.getTrigger())return;this.isVisible=!1,this.isAnimating=!1,this.clearTimers();const t=this.getType();"typing"!==t&&"decode"!==t||(this.displayText=this.getText()),this.renderLayer(),this.syncClasses()}),this.addEventListener("click",()=>{if(!this.hasAttribute("disabled")){if("click"===this.getTrigger()){if(this.isVisible=!this.isVisible,this.isVisible)this.startAnimation();else{this.isAnimating=!1,this.clearTimers();const t=this.getType();"typing"!==t&&"decode"!==t||(this.displayText=this.getText()),this.renderLayer()}this.syncClasses()}this.hasAttribute("clickable")&&this.dispatchEvent(new CustomEvent("db-click",{bubbles:!0,composed:!0}))}}))}clearTimers(){this.timers.forEach(t=>window.clearInterval(t)),this.timers.forEach(t=>window.clearTimeout(t)),this.timers=[]}syncFromAttributes(){const e=this.getText(),i=this.getType(),s=this.getTrigger(),r=Number(this.getAttribute("speed")||1e3),n=Number(this.getAttribute("repeat")||1),h=this.getAttribute("custom-color"),l=(this.getAttribute("gradient-colors")||"#667eea,#764ba2").split(","),a=(this.getAttribute("wave-colors")||"#ff6b6b,#4ecdc4,#45b7d1,#96ceb4,#feca57").split(","),o=this.getAttribute("glow-color")||"#667eea";this.className=[t,"typing"!==i&&`${t}--${i}`,`${t}--${this.getAttribute("size")||"m"}`,`${t}--${this.getAttribute("color")||"primary"}`,`${t}--${this.getAttribute("weight")||"normal"}`,`${t}--${this.getAttribute("align")||"left"}`,`${t}--${this.getAttribute("direction")||"left"}`,this.isVisible&&`${t}--visible`,this.isAnimating&&`${t}--animating`,(this.hasAttribute("clickable")||"click"===s)&&`${t}--clickable`,this.hasAttribute("disabled")&&`${t}--disabled`].filter(Boolean).join(" "),this.style.setProperty("--db-animation-speed",`${Number.isFinite(r)?r:1e3}ms`),this.style.setProperty("--db-animation-iteration-count",0===n?"infinite":String(n)),h&&this.style.setProperty("--db-text-custom",h),this.style.setProperty("--db-wave-colors",a.join(", ")),this.style.setProperty("--db-glow-color",o),"gradient"===i&&l.length>=2?(this.style.background=`linear-gradient(45deg, ${l.join(", ")})`,this.style.backgroundSize="200% 200%",this.style.webkitBackgroundClip="text",this.style.webkitTextFillColor="transparent",this.style.backgroundClip="text"):(this.style.removeProperty("background"),this.style.removeProperty("background-size"),this.style.removeProperty("-webkit-background-clip"),this.style.removeProperty("-webkit-text-fill-color"),this.style.removeProperty("background-clip")),"typing"!==i&&"decode"!==i||"mount"!==s||this.isAnimating?this.isAnimating||(this.displayText=e):this.displayText="",this.ghostEl&&(this.ghostEl.textContent=e,this.ghostEl.style.whiteSpace="typing"===i?"pre-wrap":""),this.layerEl&&(this.layerEl.className=["typing"===i&&`${t}--typing`,this.isAnimating&&"typing"===i&&`${t}--animating`].filter(Boolean).join(" "),this.layerEl.style.width="typing"===i?"auto":"100%",this.layerEl.style.height="100%",this.layerEl.style.whiteSpace="typing"===i?"pre-wrap":""),this.renderLayer()}syncClasses(){this.classList.toggle(`${t}--visible`,this.isVisible),this.classList.toggle(`${t}--animating`,this.isAnimating)}setupTrigger(){this.clearTimers(),this.observer?.disconnect();const t=this.getTrigger(),e=Number(this.getAttribute("delay")||0);if("mount"===t){const t=window.setTimeout(()=>{this.isVisible=!0,this.syncClasses(),this.startAnimation()},e);return void this.timers.push(t)}"in-view"===t&&(this.observer=new IntersectionObserver(t=>{t[0]?.isIntersecting&&(window.setTimeout(()=>{this.isVisible=!0,this.syncClasses(),this.startAnimation()},e),this.observer?.disconnect())}),this.observer.observe(this))}startAnimation(){const t=this.getType(),e=this.getText();if(this.isAnimating=!0,this.syncClasses(),this.syncFromAttributes(),"typing"===t)return void this.startTyping(0);if("decode"===t)return void this.startDecoding(0);this.displayText=e,this.renderLayer();const i=Number(this.getAttribute("speed")||1e3),s=window.setTimeout(()=>{this.isAnimating=!1,this.syncClasses(),this.syncFromAttributes()},i);this.timers.push(s)}startTyping(t){const e=this.getText(),i=Number(this.getAttribute("speed")||1e3),s=Number(this.getAttribute("repeat")||1);this.displayText="",this.renderLayer();let r=0;const n=window.setInterval(()=>{if(r>=e.length)if(window.clearInterval(n),0===s||t<s-1){const e=window.setTimeout(()=>this.startTyping(t+1),500);this.timers.push(e)}else this.isAnimating=!1,this.syncClasses();else this.displayText=e.slice(0,r+1),this.renderLayer(),r+=1},Math.max(16,i/Math.max(e.length,1)));this.timers.push(n)}startDecoding(t){const e=this.getText(),i=Number(this.getAttribute("repeat")||1),s="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+";let r=0;const n=window.setInterval(()=>{if(this.displayText=e.split("").map((t,i)=>i<r?e[i]:s[Math.floor(74*Math.random())]||t).join(""),this.renderLayer(),r>=e.length)if(window.clearInterval(n),this.displayText=e,this.renderLayer(),0===i||t<i-1){const e=window.setTimeout(()=>this.startDecoding(t+1),500);this.timers.push(e)}else this.isAnimating=!1,this.syncClasses();r+=1/3},30);this.timers.push(n)}renderLayer(){if(!this.layerEl)return;const t=this.getType(),e=this.getText(),i=this.isVisible||this.isAnimating;"wave"!==t&&"shake"!==t||!i?this.layerEl.textContent=this.displayText||(i?e:""):this.layerEl.replaceChildren(...e.split("").map((t,e)=>{const i=document.createElement("span");return i.style.animationDelay=.05*e+"s",i.style.display="inline-block",i.textContent=" "===t?" ":t,i}))}}customElements.get("db-animation-text")||customElements.define("db-animation-text",DbAnimationText);export{DbAnimationText};
+const t="designbase-wc-animation-text";class DbAnimationText extends HTMLElement{constructor(){super(...arguments),this.timers=[],this.displayText="",this.isVisible=!1,this.isAnimating=!1,this.wordEls=[],this.rotateToken=0}static get observedAttributes(){return["text","texts","interval","trigger","type","speed","repeat","delay","direction","size","color","custom-color","weight","align","gradient-colors","wave-colors","glow-color","clickable","disabled"]}connectedCallback(){this.style.display="inline-block",this.ensureStructure(),this.syncFromAttributes(),this.setupTrigger()}disconnectedCallback(){this.clearTimers(),this.observer?.disconnect(),this.teardownScrollFill(),this.rotateObserver?.disconnect()}attributeChangedCallback(){this.isConnected&&(this.syncFromAttributes(),this.setupTrigger())}getText(){return this.getAttribute("text")||this.textContent?.trim()||""}getRotateTexts(){const t=this.getAttribute("texts");if(t){const e=t.split(",").map(t=>t.trim()).filter(Boolean);if(e.length)return e}const e=this.getText();return e?[e]:[]}getLongestText(){return this.getRotateTexts().reduce((t,e)=>e.length>t.length?e:t,"")}getType(){const t=this.getAttribute("type")||"fade";return["typing","fade","slide","bounce","shake","glow","gradient","wave","flip","scale","decode","roll","reveal","scroll-fill","text-rotate"].includes(t)?t:"fade"}getTrigger(){const t=this.getAttribute("trigger")||"mount";return["mount","hover","click","in-view"].includes(t)?t:"mount"}ensureStructure(){this.ghostEl||(this.ghostEl=document.createElement("span"),this.ghostEl.setAttribute("aria-hidden","true"),this.ghostEl.style.visibility="hidden",this.ghostEl.style.pointerEvents="none",this.ghostEl.style.userSelect="none",this.layerEl=document.createElement("span"),this.layerEl.style.position="absolute",this.layerEl.style.top="0",this.layerEl.style.left="0",this.append(this.ghostEl,this.layerEl),this.addEventListener("mouseenter",()=>{"hover"!==this.getTrigger()||this.hasAttribute("disabled")||"roll"!==this.getType()&&(this.isVisible=!0,this.startAnimation(),this.syncClasses())}),this.addEventListener("mouseleave",()=>{if("hover"!==this.getTrigger())return;if("roll"===this.getType())return;this.isVisible=!1,this.isAnimating=!1,this.clearTimers();const t=this.getType();"typing"!==t&&"decode"!==t||(this.displayText=this.getText()),this.renderLayer(),this.syncClasses()}),this.addEventListener("click",()=>{if(!this.hasAttribute("disabled")){if("click"===this.getTrigger()){if(this.isVisible=!this.isVisible,this.isVisible)this.startAnimation();else{this.isAnimating=!1,this.clearTimers();const t=this.getType();"typing"!==t&&"decode"!==t||(this.displayText=this.getText()),this.renderLayer()}this.syncClasses()}this.hasAttribute("clickable")&&this.dispatchEvent(new CustomEvent("db-click",{bubbles:!0,composed:!0}))}}))}clearTimers(){this.timers.forEach(t=>window.clearInterval(t)),this.timers.forEach(t=>window.clearTimeout(t)),this.timers=[]}syncFromAttributes(){const e=this.getText(),i=this.getType(),s=this.getTrigger(),r=Number(this.getAttribute("speed")||1e3),n=Number(this.getAttribute("repeat")||1),l=this.getAttribute("custom-color"),o=(this.getAttribute("gradient-colors")||"#667eea,#764ba2").split(","),a=(this.getAttribute("wave-colors")||"#ff6b6b,#4ecdc4,#45b7d1,#96ceb4,#feca57").split(","),h=this.getAttribute("glow-color")||"#667eea";this.className=[t,"typing"!==i&&`${t}--${i}`,`${t}--${this.getAttribute("size")||"m"}`,`${t}--${this.getAttribute("color")||"primary"}`,`${t}--${this.getAttribute("weight")||"normal"}`,`${t}--${this.getAttribute("align")||"left"}`,`${t}--${this.getAttribute("direction")||"left"}`,this.isVisible&&`${t}--visible`,this.isAnimating&&`${t}--animating`,(this.hasAttribute("clickable")||"click"===s)&&`${t}--clickable`,this.hasAttribute("disabled")&&`${t}--disabled`].filter(Boolean).join(" "),this.style.setProperty("--db-animation-speed",`${Number.isFinite(r)?r:1e3}ms`),this.style.setProperty("--db-animation-iteration-count",0===n?"infinite":String(n)),l&&this.style.setProperty("--db-text-custom",l),this.style.setProperty("--db-wave-colors",a.join(", ")),this.style.setProperty("--db-glow-color",h),this.style.removeProperty("background"),this.style.removeProperty("background-size"),this.style.removeProperty("-webkit-background-clip"),this.style.removeProperty("-webkit-text-fill-color"),this.style.removeProperty("background-clip"),this.layerEl&&("gradient"===i&&o.length>=2?this.layerEl.style.backgroundImage=`linear-gradient(45deg, ${o.join(", ")})`:this.layerEl.style.removeProperty("background-image")),"typing"!==i&&"decode"!==i||"mount"!==s||this.isAnimating?this.isAnimating||(this.displayText=e):this.displayText="";const c="typing"===i||"decode"===i||"roll"===i||"text-rotate"===i,d="roll"===i||"text-rotate"===i?"nowrap":c?"pre-wrap":"";this.ghostEl&&(c?(this.ghostEl.textContent="text-rotate"===i?this.getLongestText():e,this.ghostEl.style.display="inline-block",this.ghostEl.style.whiteSpace=d,this.ghostEl.style.paddingRight="typing"===i?"0.25em":""):(this.ghostEl.textContent="",this.ghostEl.style.display="none")),this.layerEl&&(this.layerEl.className=[`${t}__layer`,"typing"===i&&`${t}--typing`,this.isAnimating&&"typing"===i&&`${t}--animating`].filter(Boolean).join(" "),c?(this.layerEl.style.position="absolute",this.layerEl.style.top="0",this.layerEl.style.left="0",this.layerEl.style.width="100%",this.layerEl.style.height="100%",this.layerEl.style.whiteSpace=d):(this.layerEl.style.position="static",this.layerEl.style.removeProperty("top"),this.layerEl.style.removeProperty("left"),this.layerEl.style.width="auto",this.layerEl.style.height="auto",this.layerEl.style.whiteSpace="")),this.renderLayer()}syncClasses(){this.classList.toggle(`${t}--visible`,this.isVisible),this.classList.toggle(`${t}--animating`,this.isAnimating)}setupTrigger(){this.clearTimers(),this.observer?.disconnect(),this.teardownScrollFill(),this.rotateObserver?.disconnect(),this.rotateObserver=void 0,this.rotateToken++;const t=this.getTrigger(),e=Number(this.getAttribute("delay")||0);if("scroll-fill"!==this.getType())if("text-rotate"!==this.getType()){if("mount"===t){const t=window.setTimeout(()=>{this.isVisible=!0,this.syncClasses(),this.startAnimation()},e);return void this.timers.push(t)}"in-view"===t&&(this.observer=new IntersectionObserver(t=>{t[0]?.isIntersecting&&(window.setTimeout(()=>{this.isVisible=!0,this.syncClasses(),this.startAnimation()},e),this.observer?.disconnect())}),this.observer.observe(this))}else this.setupTextRotate();else this.setupScrollFill()}setupTextRotate(){if(this.getRotateTexts().length<=1)return;const e=++this.rotateToken,start=()=>{if(e!==this.rotateToken||!this.isConnected||"text-rotate"!==this.getType())return;const i=this.layerEl?.querySelector(`.${t}__rotate-track`);if(!i||!i.firstElementChild)return;const s=Array.from(i.children),r=Number(this.getAttribute("speed")||500),n=Math.max(r+200,Number(this.getAttribute("interval")||2e3));let l=0;const apply=t=>{const e=s[0].getBoundingClientRect().height;if(!e)return;const n="cubic-bezier(0.22, 1, 0.36, 1)";var o;i.style.transition=t?`transform ${r}ms ${n}`:"none",i.style.transform=`translateY(-${l*e}px)`,this.style.transition=t?`width ${r}ms ${n}`:"none",this.style.width=`${o=l,s[o].getBoundingClientRect().width}px`};apply(!1);const o=window.setInterval(()=>{if(l+=1,apply(!0),l===s.length-1){const t=window.setTimeout(()=>{l=0,apply(!1)},r);this.timers.push(t)}},n);this.timers.push(o),this.rotateObserver?.disconnect();let a=!0;const h=new ResizeObserver(()=>{a?a=!1:apply(!1)});h.observe(s[0]),this.rotateObserver=h};"undefined"!=typeof document&&document.fonts?document.fonts.ready.then(()=>window.requestAnimationFrame(start)):window.requestAnimationFrame(start)}setupScrollFill(){this.scrollHandler=()=>{null==this.rafId&&(this.rafId=window.requestAnimationFrame(()=>{this.rafId=void 0,this.updateScrollFill()}))},window.addEventListener("scroll",this.scrollHandler,{passive:!0}),window.addEventListener("resize",this.scrollHandler,{passive:!0}),this.updateScrollFill()}teardownScrollFill(){this.scrollHandler&&(window.removeEventListener("scroll",this.scrollHandler),window.removeEventListener("resize",this.scrollHandler),this.scrollHandler=void 0),null!=this.rafId&&(window.cancelAnimationFrame(this.rafId),this.rafId=void 0)}updateScrollFill(){if("scroll-fill"!==this.getType()||0===this.wordEls.length)return;const clamp=t=>Math.max(0,Math.min(1,t)),t=this.getBoundingClientRect(),e=window.innerHeight||document.documentElement.clientHeight,i=.85*e,s=.35*e,r=clamp((i-t.top)/(i-s||1)),n=this.wordEls.length;this.wordEls.forEach((t,e)=>{const i=clamp((r*(n+4)-e)/4);t.style.opacity=String(.18+(1-.18)*i)})}startAnimation(){const t=this.getType(),e=this.getText();if(this.isAnimating=!0,this.syncClasses(),this.syncFromAttributes(),"typing"===t)return void this.startTyping(0);if("decode"===t)return void this.startDecoding(0);if("reveal"===t||"scroll-fill"===t||"roll"===t)return this.displayText=e,"roll"!==t&&this.renderLayer(),this.isAnimating=!1,void this.syncClasses();this.displayText=e,this.renderLayer();const i=Number(this.getAttribute("speed")||1e3),s=window.setTimeout(()=>{this.isAnimating=!1,this.syncClasses(),this.syncFromAttributes()},i);this.timers.push(s)}startTyping(t){const e=this.getText(),i=Number(this.getAttribute("speed")||1e3),s=Number(this.getAttribute("repeat")||1);this.displayText="",this.renderLayer();let r=0;const n=window.setInterval(()=>{if(r>=e.length)if(window.clearInterval(n),0===s||t<s-1){const e=window.setTimeout(()=>this.startTyping(t+1),500);this.timers.push(e)}else this.isAnimating=!1,this.syncClasses();else this.displayText=e.slice(0,r+1),this.renderLayer(),r+=1},Math.max(16,i/Math.max(e.length,1)));this.timers.push(n)}startDecoding(t){const e=this.getText(),i=Number(this.getAttribute("repeat")||1),s="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+";let r=0;const n=window.setInterval(()=>{if(this.displayText=e.split("").map((t,i)=>i<r?e[i]:s[Math.floor(74*Math.random())]||t).join(""),this.renderLayer(),r>=e.length)if(window.clearInterval(n),this.displayText=e,this.renderLayer(),0===i||t<i-1){const e=window.setTimeout(()=>this.startDecoding(t+1),500);this.timers.push(e)}else this.isAnimating=!1,this.syncClasses();r+=1/3},30);this.timers.push(n)}renderLayer(){if(!this.layerEl)return;const e=this.getType(),i=this.getText(),s=this.isVisible||this.isAnimating;if("reveal"===e||"scroll-fill"===e){this.wordEls=[];const s=document.createDocumentFragment(),r=i.split(/(\s+)/);let n=0;for(const i of r){if(""===i)continue;if(/^\s+$/.test(i)){s.appendChild(document.createTextNode(i));continue}const r=document.createElement("span");r.className=`${t}__word`,r.textContent=i,"reveal"===e&&(r.style.animationDelay=.06*n+"s"),this.wordEls.push(r),s.appendChild(r),n+=1}return this.layerEl.replaceChildren(s),void("scroll-fill"===e&&this.updateScrollFill())}if("text-rotate"===e){const e=this.getRotateTexts(),s=e.length?e:[i],r=document.createElement("span");r.className=`${t}__rotate-track`;const build=e=>{const i=document.createElement("span");return i.className=`${t}__rotate-item`,i.textContent=e,i};return s.forEach(t=>r.appendChild(build(t))),s.length>1&&r.appendChild(build(s[0])),void this.layerEl.replaceChildren(r)}if("roll"===e){const e=document.createElement("span");e.className=`${t}__roll-track`;const s=document.createElement("span");s.className=`${t}__roll-item`,s.textContent=i;const r=s.cloneNode(!0);return e.append(s,r),void this.layerEl.replaceChildren(e)}if("typing"!==e)"wave"!==e&&"shake"!==e||!s?this.layerEl.textContent=this.displayText||(s?i:""):this.layerEl.replaceChildren(...i.split("").map((t,e)=>{const i=document.createElement("span");return i.style.animationDelay=.05*e+"s",i.style.display="inline-block",i.textContent=" "===t?" ":t,i}));else if(this.layerEl.textContent=this.displayText,this.isAnimating){const e=document.createElement("span");e.className=`${t}__caret`,e.setAttribute("aria-hidden","true"),this.layerEl.appendChild(e)}}}customElements.get("db-animation-text")||customElements.define("db-animation-text",DbAnimationText);export{DbAnimationText};

package/dist/esm/components/db-breadcrumbs.d.ts

@@ -1,3 +1,11 @@
+interface BreadcrumbMenuItem {
+    id?: string;
+    label: string;
+    href?: string;
+    active?: boolean;
+    disabled?: boolean;
+    icon?: string;
+}
 interface BreadcrumbItem {
     id?: string;
     label: string;
@@ -5,14 +13,35 @@ interface BreadcrumbItem {
     active?: boolean;
     disabled?: boolean;
     icon?: string;
+    menu?: BreadcrumbMenuItem[];
 }
 declare class DbBreadcrumbs extends HTMLElement {
     static get observedAttributes(): string[];
+    private openMenuId;
+    private onDocumentMouseDown;
+    private onDocumentKeyDown;
     get items(): BreadcrumbItem[] | string;
     set items(value: BreadcrumbItem[] | string);
     connectedCallback(): void;
+    disconnectedCallback(): void;
     attributeChangedCallback(): void;
+    private get menuDropdown();
+    private get maxLabelLength();
+    private get resolvedVariant();
+    private itemId;
+    private menuItemId;
     private visibleItems;
+    private shouldUseDropdown;
+    private closeMenu;
+    private openMenu;
+    private toggleMenu;
+    private addGlobalListeners;
+    private removeGlobalListeners;
+    private updateDropdownStates;
+    private createLabel;
+    private createMenuItem;
+    private createDropdownItem;
+    private createStandardItem;
     private render;
 }
 declare global {