@designbasekorea/ui-wc 0.5.6 → 0.6.1

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

@@ -1,121 +1 @@
-import { drawFallingParticles, drawStars, drawParticles } from './renderers.js';
-import { toSpeedRate } from './lumina-utils.js';
-
-const CLASS = 'designbase-wc-animation-background';
-const FALLING_TYPES = ['snow', 'flowers', 'confetti'];
-function isFallingType(type) {
-    return FALLING_TYPES.includes(type);
-}
-class CanvasAnimationController {
-    constructor(container, options) {
-        this.raf = 0;
-        this.frameCount = 0;
-        this.mouse = { x: -9999, y: -9999 };
-        this.particlesRef = { current: [] };
-        this.starsRef = { current: [] };
-        this.fallingRef = { current: [] };
-        this.tick = () => {
-            const ctx = this.canvas.getContext('2d');
-            if (!ctx) {
-                this.raf = requestAnimationFrame(this.tick);
-                return;
-            }
-            const dpr = window.devicePixelRatio || 1;
-            const width = this.canvas.width / dpr;
-            const height = this.canvas.height / dpr;
-            const { type, colors, speed, particleCount, particleSize, starCount, starSize, clickable, wind, layerOpacity, } = this.options;
-            ctx.clearRect(0, 0, width, height);
-            const speedRate = toSpeedRate(speed);
-            const time = this.frameCount * speedRate;
-            this.frameCount += 1;
-            switch (type) {
-                case 'particles':
-                    drawParticles(ctx, width, height, this.particlesRef, {
-                        count: particleCount,
-                        colors,
-                        size: particleSize,
-                        speed,
-                        mouse: this.mouse,
-                        clickable,
-                        layerOpacity,
-                    });
-                    break;
-                case 'stars':
-                    drawStars(ctx, width, height, this.starsRef, {
-                        count: starCount,
-                        colors,
-                        size: starSize,
-                        time,
-                        layerOpacity,
-                        speedRate,
-                    });
-                    break;
-                case 'snow':
-                case 'flowers':
-                case 'confetti':
-                    if (isFallingType(type)) {
-                        drawFallingParticles(ctx, width, height, this.fallingRef, type, {
-                            count: particleCount,
-                            colors,
-                            size: particleSize,
-                            speed,
-                            wind,
-                            layerOpacity,
-                        });
-                    }
-                    break;
-            }
-            this.raf = requestAnimationFrame(this.tick);
-        };
-        this.container = container;
-        this.options = options;
-        this.canvas = document.createElement('canvas');
-        this.canvas.className = `${CLASS}__canvas`;
-        container.appendChild(this.canvas);
-        this.onResize = () => this.resize();
-        this.onMouseMove = (event) => {
-            if (this.options.type !== 'particles')
-                return;
-            const rect = this.container.getBoundingClientRect();
-            this.mouse = {
-                x: event.clientX - rect.left,
-                y: event.clientY - rect.top,
-            };
-        };
-        this.onMouseLeave = () => {
-            this.mouse = { x: -9999, y: -9999 };
-        };
-        container.addEventListener('mousemove', this.onMouseMove);
-        container.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(options) {
-        this.options = { ...this.options, ...options };
-    }
-    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 dpr = window.devicePixelRatio || 1;
-        const rect = this.container.getBoundingClientRect();
-        this.canvas.width = rect.width * dpr;
-        this.canvas.height = rect.height * dpr;
-        this.canvas.style.width = `${rect.width}px`;
-        this.canvas.style.height = `${rect.height}px`;
-        const ctx = this.canvas.getContext('2d');
-        if (ctx)
-            ctx.setTransform(dpr, 0, 0, dpr, 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

@@ -1,180 +1 @@
-import { GRAPHITE_PRESET_IDS } from './graphite-presets.js';
-
-const SPEED_MS_MIN = 500;
-const SPEED_MS_MAX = 12000;
-const SPEED_MS_BASE = 3000;
-const speedDisplay = {
-    min: 0.2,
-    max: 4,
-    step: 0.1,
-    fixed: 1,
-    fromAttr: (ms) => {
-        const clamped = Math.min(SPEED_MS_MAX, Math.max(SPEED_MS_MIN, ms));
-        return Math.round((clamped / SPEED_MS_BASE) * 10) / 10;
-    },
-    toAttr: (mult) => {
-        const clamped = Math.min(4, Math.max(0.2, mult));
-        return Math.round(clamped * SPEED_MS_BASE);
-    },
-};
-const PRESET_OPTIONS = [
-    '(none)',
-    'neon_dream',
-    'sunset_bliss',
-    'deep_ocean',
-    'forest_mist',
-    'northern_lights',
-    'monochrome_fog',
-    'cotton_candy',
-    'cyber_glitch',
-    'golden_hour',
-];
-const C = {
-    speed: {
-        attr: 'speed',
-        label: 'Speed (×)',
-        kind: 'range',
-        min: SPEED_MS_MIN,
-        max: SPEED_MS_MAX,
-        step: 100,
-        default: SPEED_MS_BASE,
-        display: speedDisplay,
-    },
-    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: 0.05, default: 1, fixed: 2 },
-    noise: { attr: 'noise', label: 'Noise', kind: 'range', min: 0, max: 0.4, step: 0.01, default: 0.05, fixed: 2 },
-    zoom: { attr: 'zoom', label: 'Zoom', kind: 'range', min: 0.5, max: 3, step: 0.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: 0.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: 0.5, max: 6, step: 0.5, default: 1.5, fixed: 1 },
-    wind: { attr: 'wind', label: 'Wind', kind: 'range', min: 0, max: 3, step: 0.1, default: 0.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: PRESET_OPTIONS, default: '(none)' },
-    showVignette: { attr: 'show-vignette', label: 'Vignette', kind: 'toggle', default: true },
-    shaderSpeed: { attr: 'shader-speed', label: 'Speed', kind: 'range', min: 0, max: 3, step: 0.01, default: 0.4, fixed: 2 },
-    shaderIntensity: { attr: 'shader-intensity', label: 'Intensity', kind: 'range', min: 0.1, max: 3, step: 0.01, default: 1.2, fixed: 2 },
-    grain: { attr: 'noise', label: 'Grain', kind: 'range', min: 0, max: 0.5, step: 0.01, default: 0.1, fixed: 2 },
-    scale: { attr: 'zoom', label: 'Scale', kind: 'range', min: 0.5, max: 5, step: 0.1, default: 1, fixed: 1 },
-    warp: { attr: 'warp', label: 'Warp', kind: 'range', min: 0, max: 2, step: 0.05, default: 1.4, fixed: 2 },
-    graphiteTheme: { attr: 'preset', label: 'Theme', kind: 'select', options: [...GRAPHITE_PRESET_IDS], default: 'graphite' },
-};
-function colors(defaults) {
-    return { attr: 'colors', label: 'Colors', kind: 'colors', default: defaults };
-}
-const TYPE_CONTROLS = {
-    particles: [C.particleCountParticles, C.particleSize, C.speed, C.opacity, colors(['#60a5fa', '#a78bfa', '#f472b6'])],
-    stars: [C.starCount, C.starSize, C.speed, C.opacity, colors(['#ffffff', '#e0e7ff', '#c7d2fe'])],
-    snow: [C.particleCount, C.particleSize, C.speed, C.wind, colors(['#ffffff', '#f0f9ff', '#e0f2fe'])],
-    flowers: [C.particleCount, C.particleSize, C.speed, C.wind, colors(['#ffb7c5', '#ff91a4', '#f8c8dc', '#ffc0cb'])],
-    confetti: [C.particleCount, C.particleSize, C.speed, C.wind, colors(['#f44336', '#e91e63', '#9c27b0', '#2196f3', '#4caf50', '#ffeb3b'])],
-    aurora: [C.intensity, C.blur, C.speed, C.theme, colors(['#4f46e5', '#ec4899', '#06b6d4', '#8b5cf6'])],
-    plasma: [C.speed, C.blur, C.noise, C.showVignette, C.preset, colors(['#7000FF', '#FF00AA', '#3300FF', '#FFCC00', '#00FFFF'])],
-    'mesh-flow': [C.speed, C.blur, C.noise, C.zoom, colors(['#4f46e5', '#ec4899', '#06b6d4', '#8b5cf6', '#22d3ee'])],
-    fluid: [C.speed, C.blur, C.noise, C.zoom, colors(['#001133', '#0044FF', '#00DDFF', '#00FFAA', '#000066'])],
-    radiant: [C.speed, C.blur, C.noise, C.zoom, colors(['#FF4E50', '#FC913A', '#F9D423', '#EDE574', '#E1F5C4'])],
-    ethereal: [C.speed, C.blur, C.noise, C.zoom, colors(['#7000FF', '#FF00AA', '#00FFFF', '#FFFFFF', '#3300FF'])],
-    graphite: [
-        C.shaderSpeed,
-        C.shaderIntensity,
-        C.grain,
-        C.scale,
-        C.warp,
-        C.graphiteTheme,
-        colors(['#000000', '#333333', '#b3b3b3']),
-    ],
-};
-function getControlsForType(type) {
-    return TYPE_CONTROLS[type] ?? TYPE_CONTROLS.graphite;
-}
-function getControlSliderBounds(control) {
-    if (control.display) {
-        return {
-            min: control.display.min,
-            max: control.display.max,
-            step: control.display.step,
-            fixed: control.display.fixed,
-        };
-    }
-    return {
-        min: control.min ?? 0,
-        max: control.max ?? 100,
-        step: control.step ?? 1,
-        fixed: control.fixed,
-    };
-}
-function controlAttrToSlider(control, attrValue) {
-    if (control.display)
-        return control.display.fromAttr(attrValue);
-    return attrValue;
-}
-function controlSliderToAttr(control, sliderValue) {
-    if (control.display)
-        return control.display.toAttr(sliderValue);
-    return sliderValue;
-}
-function readControlValue(el, control) {
-    const raw = el.getAttribute(control.attr);
-    if (control.kind === 'colors') {
-        if (!raw)
-            return [...control.default];
-        try {
-            const parsed = JSON.parse(raw);
-            return Array.isArray(parsed) && parsed.length ? [...parsed] : [...control.default];
-        }
-        catch {
-            const split = raw.split(',').map((c) => c.trim()).filter(Boolean);
-            return split.length ? split : [...control.default];
-        }
-    }
-    if (control.kind === 'toggle') {
-        if (raw === null)
-            return control.default;
-        return raw !== 'false';
-    }
-    if (control.kind === 'select') {
-        if (!raw)
-            return control.default;
-        return raw;
-    }
-    if (raw === null || raw === '')
-        return control.default;
-    const num = Number(raw);
-    return Number.isFinite(num) ? num : control.default;
-}
-function writeControlAttribute(el, control, value) {
-    if (control.kind === 'colors') {
-        el.setAttribute(control.attr, JSON.stringify(value));
-        return;
-    }
-    if (control.kind === 'toggle') {
-        el.setAttribute(control.attr, value ? 'true' : 'false');
-        return;
-    }
-    if (control.kind === 'select') {
-        if (value === '(none)')
-            el.removeAttribute(control.attr);
-        else
-            el.setAttribute(control.attr, String(value));
-        return;
-    }
-    el.setAttribute(control.attr, String(value));
-}
-function resetControlsToDefaults(el, controls) {
-    controls.forEach((control) => {
-        const value = control.default;
-        if (control.kind === 'select' && value === control.default) {
-            if (value === '(none)')
-                el.removeAttribute(control.attr);
-            else
-                writeControlAttribute(el, control, value);
-            return;
-        }
-        writeControlAttribute(el, control, Array.isArray(value) ? [...value] : value);
-    });
-}
-
-export { controlAttrToSlider, controlSliderToAttr, getControlSliderBounds, getControlsForType, readControlValue, resetControlsToDefaults, writeControlAttribute };
+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

@@ -1,196 +1 @@
-import { hexToRgb } from './lumina-utils.js';
-import { GRAPHITE_VS_SOURCE, GRAPHITE_FS_SOURCE } from './graphite-shader.js';
-
-const CLASS = 'designbase-wc-animation-background';
-const LERP = 0.05;
-function loadShader(gl, type, source) {
-    const shader = gl.createShader(type);
-    if (!shader)
-        return null;
-    gl.shaderSource(shader, source);
-    gl.compileShader(shader);
-    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
-        gl.deleteShader(shader);
-        return null;
-    }
-    return shader;
-}
-function lerp(a, b, t) {
-    return a + (b - a) * t;
-}
-function lerpRgb(current, target, t) {
-    return [
-        lerp(current[0], target[0], t),
-        lerp(current[1], target[1], t),
-        lerp(current[2], target[2], t),
-    ];
-}
-class GraphiteShaderController {
-    constructor(container, options) {
-        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 gl = this.gl;
-            const program = this.program;
-            const positionBuffer = this.positionBuffer;
-            if (!gl || !program || !positionBuffer)
-                return;
-            this.tickLerp();
-            const { width, height } = this.resizeCanvas();
-            if (width === 0 || height === 0) {
-                this.raf = requestAnimationFrame(this.render);
-                return;
-            }
-            gl.viewport(0, 0, width, height);
-            gl.useProgram(program);
-            const aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition');
-            const uResolution = gl.getUniformLocation(program, 'uResolution');
-            const uTime = gl.getUniformLocation(program, 'uTime');
-            const uSpeed = gl.getUniformLocation(program, 'uSpeed');
-            const uIntensity = gl.getUniformLocation(program, 'uIntensity');
-            const uGrain = gl.getUniformLocation(program, 'uGrain');
-            const uScale = gl.getUniformLocation(program, 'uScale');
-            const uWarp = gl.getUniformLocation(program, 'uWarp');
-            const uColor1 = gl.getUniformLocation(program, 'uColor1');
-            const uColor2 = gl.getUniformLocation(program, 'uColor2');
-            const uColor3 = gl.getUniformLocation(program, 'uColor3');
-            gl.enableVertexAttribArray(aVertexPosition);
-            gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
-            gl.vertexAttribPointer(aVertexPosition, 2, gl.FLOAT, false, 0, 0);
-            const elapsed = (performance.now() - this.startTime) / 1000;
-            if (uResolution)
-                gl.uniform2f(uResolution, width, height);
-            if (uTime)
-                gl.uniform1f(uTime, elapsed);
-            if (uSpeed)
-                gl.uniform1f(uSpeed, this.current.shaderSpeed);
-            if (uIntensity)
-                gl.uniform1f(uIntensity, this.current.shaderIntensity);
-            if (uGrain)
-                gl.uniform1f(uGrain, this.current.grain);
-            if (uScale)
-                gl.uniform1f(uScale, this.current.scale);
-            if (uWarp)
-                gl.uniform1f(uWarp, this.current.warp);
-            if (uColor1)
-                gl.uniform3fv(uColor1, this.current.color1);
-            if (uColor2)
-                gl.uniform3fv(uColor2, this.current.color2);
-            if (uColor3)
-                gl.uniform3fv(uColor3, this.current.color3);
-            gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
-            this.raf = requestAnimationFrame(this.render);
-        };
-        this.container = container;
-        this.options = options;
-        this.canvas = document.createElement('canvas');
-        this.canvas.className = `${CLASS}__shader-canvas`;
-        container.appendChild(this.canvas);
-        this.syncCurrentImmediate(options);
-        this.init();
-    }
-    updateOptions(options) {
-        this.options = { ...this.options, ...options };
-    }
-    syncCurrentImmediate(options) {
-        const [c1, c2, c3] = this.resolveColors(options.colors);
-        this.current = {
-            shaderSpeed: options.shaderSpeed,
-            shaderIntensity: options.shaderIntensity,
-            grain: options.grain,
-            scale: options.scale,
-            warp: options.warp,
-            color1: hexToRgb(c1),
-            color2: hexToRgb(c2),
-            color3: hexToRgb(c3),
-        };
-    }
-    resolveColors(colors) {
-        const c1 = colors[0] ?? '#000000';
-        const c2 = colors[1] ?? '#333333';
-        const c3 = colors[2] ?? '#b3b3b3';
-        return [c1, c2, c3];
-    }
-    resizeCanvas() {
-        const rect = this.container.getBoundingClientRect();
-        const dpr = window.devicePixelRatio || 1;
-        this.canvas.width = Math.max(1, rect.width * dpr);
-        this.canvas.height = Math.max(1, rect.height * dpr);
-        this.canvas.style.width = `${rect.width}px`;
-        this.canvas.style.height = `${rect.height}px`;
-        return { width: this.canvas.width, height: this.canvas.height };
-    }
-    init() {
-        const gl = this.canvas.getContext('webgl');
-        if (!gl)
-            return;
-        this.gl = gl;
-        const shaderProgram = gl.createProgram();
-        if (!shaderProgram)
-            return;
-        const vertexShader = loadShader(gl, gl.VERTEX_SHADER, GRAPHITE_VS_SOURCE);
-        const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, GRAPHITE_FS_SOURCE);
-        if (!vertexShader || !fragmentShader)
-            return;
-        gl.attachShader(shaderProgram, vertexShader);
-        gl.attachShader(shaderProgram, fragmentShader);
-        gl.linkProgram(shaderProgram);
-        if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS))
-            return;
-        this.program = shaderProgram;
-        this.vertexShader = vertexShader;
-        this.fragmentShader = fragmentShader;
-        const positionBuffer = gl.createBuffer();
-        if (!positionBuffer)
-            return;
-        this.positionBuffer = positionBuffer;
-        gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
-        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]), gl.STATIC_DRAW);
-        this.observer = new ResizeObserver(() => this.resizeCanvas());
-        this.observer.observe(this.container);
-        this.startTime = performance.now();
-        this.render();
-    }
-    tickLerp() {
-        const { colors, shaderSpeed, shaderIntensity, grain, scale, warp } = this.options;
-        const [c1, c2, c3] = this.resolveColors(colors);
-        const t1 = hexToRgb(c1);
-        const t2 = hexToRgb(c2);
-        const t3 = hexToRgb(c3);
-        this.current.shaderSpeed = lerp(this.current.shaderSpeed, shaderSpeed, LERP);
-        this.current.shaderIntensity = lerp(this.current.shaderIntensity, shaderIntensity, LERP);
-        this.current.grain = lerp(this.current.grain, grain, LERP);
-        this.current.scale = lerp(this.current.scale, scale, LERP);
-        this.current.warp = lerp(this.current.warp, warp, LERP);
-        this.current.color1 = lerpRgb(this.current.color1, t1, LERP);
-        this.current.color2 = lerpRgb(this.current.color2, t2, LERP);
-        this.current.color3 = lerpRgb(this.current.color3, t3, LERP);
-    }
-    destroy() {
-        cancelAnimationFrame(this.raf);
-        this.observer?.disconnect();
-        const gl = this.gl;
-        if (gl && this.program) {
-            if (this.vertexShader)
-                gl.deleteShader(this.vertexShader);
-            if (this.fragmentShader)
-                gl.deleteShader(this.fragmentShader);
-            if (this.positionBuffer)
-                gl.deleteBuffer(this.positionBuffer);
-            gl.deleteProgram(this.program);
-        }
-        this.canvas.remove();
-    }
-}
-
-export { GraphiteShaderController };
+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

@@ -1,42 +1 @@
-const GRAPHITE_PRESETS = {
-    graphite: {
-        id: 'graphite',
-        colors: ['#000000', '#333333', '#b3b3b3'],
-        scale: 1.0,
-    },
-    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.0,
-    },
-    sunset: {
-        id: 'sunset',
-        colors: ['#170500', '#7c2d12', '#f97316'],
-        scale: 3.0,
-    },
-    amethyst: {
-        id: 'amethyst',
-        colors: ['#0f051a', '#3b0764', '#a855f7'],
-        scale: 2.4,
-    },
-};
-const GRAPHITE_DEFAULT_COLORS = GRAPHITE_PRESETS.graphite.colors;
-const GRAPHITE_PRESET_IDS = Object.keys(GRAPHITE_PRESETS);
-function isGraphitePresetId(value) {
-    return Boolean(value && value in GRAPHITE_PRESETS);
-}
-function getGraphitePreset(id) {
-    return GRAPHITE_PRESETS[id];
-}
-
-export { GRAPHITE_DEFAULT_COLORS, GRAPHITE_PRESETS, GRAPHITE_PRESET_IDS, getGraphitePreset, isGraphitePresetId };
+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};