@designbasekorea/ui-wc 0.5.6 → 0.6.0

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

@@ -1,909 +1 @@
-const CLASS = 'designbase-wc-grid-background';
-const MAX_DPR = 2;
-/** trace 이동 기준 속도(px/s). animation-speed로 배율 조정 */
-const TRACE_BASE_SPEED = 88;
-/** trace-length 미지정 시 기본 세그먼트 길이(px) */
-const TRACE_DEFAULT_LENGTH = 28;
-/**
- * db-grid-background — 캔버스 기반 그리드 배경.
- *
- * 패턴은 항상 중앙을 기준으로 대칭 배치되며(가장자리 라인 없음),
- * 단독 배경으로도, 다른 배경 위 데코 레이어(overlay)로도 쓸 수 있다.
- * interactive/animate 로 마우스 인터랙션과 앰비언트 애니메이션을 켤 수 있다.
- *
- * @example
- *   <db-grid-background type="lines" size="32" fade="all"
- *     interactive animate height="240"></db-grid-background>
- */
-class DbGridBackground extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        this.lastTime = 0;
-        this.lastPointerMove = 0;
-        this.bandAngle = Math.random() * Math.PI * 2;
-        this.pointer = { x: 0, y: 0, strength: 0, inside: false };
-        this.cssW = 0;
-        this.cssH = 0;
-        this.tracePulses = [];
-        this.traceSpawnAccumulator = 0;
-        this.onThemeMediaChange = () => this.scheduleDraw();
-        this.onPointerMove = (e) => this.handlePointerMove(e);
-    }
-    static get observedAttributes() {
-        return [
-            'type',
-            'size',
-            'thickness',
-            'color',
-            'theme',
-            'opacity',
-            'fade',
-            'fade-size',
-            'background',
-            'overlay',
-            'interactive',
-            'interaction',
-            'interaction-color',
-            'interaction-radius',
-            'cross-size',
-            'cross-style',
-            'lines-layout',
-            'guide-inset',
-            'guide-edges',
-            'guide-x',
-            'guide-y',
-            'guide-span-x',
-            'guide-span-y',
-            'animated',
-            'animation-style',
-            'animation-speed',
-            'trace-length',
-            'trace-direction',
-            'width',
-            'height',
-            'border-radius',
-        ];
-    }
-    connectedCallback() {
-        this.ensureCanvas();
-        this.applyHostStyles();
-        this.startObserving();
-        this.observeDocumentTheme();
-        this.bindPointer();
-        this.measure();
-        this.scheduleDraw();
-    }
-    disconnectedCallback() {
-        this.ro?.disconnect();
-        this.ro = undefined;
-        this.themeObserver?.disconnect();
-        this.themeObserver = undefined;
-        window.removeEventListener('pointermove', this.onPointerMove);
-        this.themeMedia?.removeEventListener('change', this.onThemeMediaChange);
-        this.themeMedia = undefined;
-        if (this.rafId != null)
-            cancelAnimationFrame(this.rafId);
-        this.rafId = undefined;
-    }
-    attributeChangedCallback() {
-        if (!this.isConnected)
-            return;
-        this.applyHostStyles();
-        this.bindPointer();
-        this.measure();
-        this.scheduleDraw();
-    }
-    /* --------------------------------------------------------------------- */
-    /*  Attr helpers                                                         */
-    /* --------------------------------------------------------------------- */
-    getBool(name) {
-        return this.hasAttribute(name) && this.getAttribute(name) !== 'false';
-    }
-    getNumber(name, fallback) {
-        const raw = this.getAttribute(name);
-        if (raw === null || raw === '')
-            return fallback;
-        const n = Number(raw);
-        return Number.isFinite(n) ? n : fallback;
-    }
-    getSizeStyle(value) {
-        if (!value)
-            return undefined;
-        const num = Number(value);
-        return Number.isFinite(num) ? `${num}px` : value;
-    }
-    getColorProbe() {
-        if (!this.colorProbe) {
-            const probe = document.createElement('span');
-            probe.setAttribute('aria-hidden', 'true');
-            Object.assign(probe.style, {
-                position: 'absolute',
-                width: '0',
-                height: '0',
-                overflow: 'hidden',
-                visibility: 'hidden',
-                pointerEvents: 'none',
-            });
-            this.appendChild(probe);
-            this.colorProbe = probe;
-        }
-        return this.colorProbe;
-    }
-    resolveCssColor(input) {
-        if (!input.includes('var(') && !input.startsWith('color-mix'))
-            return input;
-        const probe = this.getColorProbe();
-        probe.style.color = input;
-        const resolved = getComputedStyle(probe).color;
-        return resolved && resolved !== 'rgba(0, 0, 0, 0)' ? resolved : input;
-    }
-    isDarkContext() {
-        const theme = this.getAttribute('theme');
-        if (theme === 'dark')
-            return true;
-        if (theme === 'light')
-            return false;
-        const root = document.documentElement;
-        const colorMode = root.getAttribute('data-color-mode');
-        if (colorMode === 'dark')
-            return true;
-        if (colorMode === 'light')
-            return false;
-        const rootTheme = root.getAttribute('data-theme');
-        if (rootTheme === 'dark')
-            return true;
-        if (rootTheme === 'light')
-            return false;
-        return window.matchMedia('(prefers-color-scheme: dark)').matches;
-    }
-    resolveThemeColor(explicit, cssVarName, fallbackLight, fallbackDark) {
-        if (explicit)
-            return this.resolveCssColor(explicit);
-        const probe = this.getColorProbe();
-        const dark = this.isDarkContext();
-        probe.style.color = `var(${cssVarName}, ${dark ? fallbackDark : fallbackLight})`;
-        const resolved = getComputedStyle(probe).color;
-        if (resolved && resolved !== 'rgba(0, 0, 0, 0)')
-            return resolved;
-        return dark ? fallbackDark : fallbackLight;
-    }
-    effectiveOpacity() {
-        const raw = this.getAttribute('opacity');
-        if (raw !== null && raw !== '') {
-            return this.getNumber('opacity', 0.05);
-        }
-        return this.isDarkContext() ? 0.1 : 0.05;
-    }
-    effectiveColor() {
-        const explicit = this.getAttribute('color');
-        if (explicit)
-            return this.resolveCssColor(explicit);
-        return this.isDarkContext() ? '#ffffff' : '#000000';
-    }
-    effectiveInterColor() {
-        const explicit = this.getAttribute('interaction-color');
-        if (explicit)
-            return this.resolveCssColor(explicit);
-        return this.effectiveColor();
-    }
-    traceDrawColor(cfg) {
-        return this.hasAttribute('interaction-color') ? cfg.interColor : cfg.color;
-    }
-    traceDrawOpacity(cfg) {
-        const base = cfg.opacity;
-        if (this.hasAttribute('interaction-color')) {
-            return Math.min(1, base + 0.2);
-        }
-        return Math.min(1, base * 3);
-    }
-    parseColorRgb(color) {
-        const resolved = this.resolveCssColor(color);
-        const rgb = resolved.match(/rgba?\(\s*(\d+)[,\s]+(\d+)[,\s]+(\d+)/);
-        if (rgb)
-            return [Number(rgb[1]), Number(rgb[2]), Number(rgb[3])];
-        return this.isDarkContext() ? [255, 255, 255] : [0, 0, 0];
-    }
-    crossArm(size, thickness, crossSize) {
-        if (crossSize > 0) {
-            if (crossSize <= 1)
-                return size * crossSize;
-            return crossSize;
-        }
-        return Math.min(size * 0.32, 8 + thickness * 1.5);
-    }
-    interactionMode() {
-        const explicit = this.getAttribute('interaction');
-        if (explicit === 'glow' || explicit === 'magnet' || explicit === 'rotate' || explicit === 'none') {
-            return explicit;
-        }
-        if (!this.getBool('interactive'))
-            return 'none';
-        const type = this.getAttribute('type') || 'lines';
-        if (type === 'dots')
-            return 'magnet';
-        if (type === 'cross')
-            return 'rotate';
-        return 'glow';
-    }
-    animationStyle() {
-        const raw = this.getAttribute('animation-style') || 'band';
-        if (raw === 'trace' || raw === 'both')
-            return raw;
-        return 'band';
-    }
-    traceDirection() {
-        const raw = this.getAttribute('trace-direction') || 'both';
-        if (raw === 'vertical' || raw === 'horizontal')
-            return raw;
-        return 'both';
-    }
-    linesLayout() {
-        const raw = this.getAttribute('lines-layout') || 'grid';
-        if (raw === 'frame' || raw === 'center')
-            return raw;
-        return 'grid';
-    }
-    crossStyle() {
-        const raw = this.getAttribute('cross-style') || 'plus';
-        return raw === 'line' ? 'line' : 'plus';
-    }
-    parseGuideEdges(raw) {
-        const parts = (raw || 'top,right,bottom,left')
-            .split(',')
-            .map((part) => part.trim().toLowerCase())
-            .filter(Boolean);
-        return new Set(parts);
-    }
-    guideFraction(name, fallback) {
-        const raw = this.getAttribute(name);
-        if (raw === null || raw === '')
-            return fallback;
-        const n = Number(raw);
-        if (!Number.isFinite(n))
-            return fallback;
-        return Math.min(1, Math.max(0, n));
-    }
-    isGridLines(cfg) {
-        return cfg.type === 'lines' && cfg.linesLayout === 'grid';
-    }
-    isTraceableLines(cfg) {
-        return cfg.type === 'lines' && (cfg.linesLayout === 'grid' || cfg.linesLayout === 'frame');
-    }
-    get cfg() {
-        return {
-            type: (this.getAttribute('type') || 'lines'),
-            linesLayout: this.linesLayout(),
-            crossStyle: this.crossStyle(),
-            size: Math.max(4, this.getNumber('size', 32)),
-            thickness: Math.max(0.5, this.getNumber('thickness', 1)),
-            color: this.effectiveColor(),
-            opacity: this.effectiveOpacity(),
-            fade: (this.getAttribute('fade') || 'none'),
-            fadeSize: this.getNumber('fade-size', 0.22),
-            interaction: this.interactionMode(),
-            interColor: this.effectiveInterColor(),
-            interRadius: Math.max(20, this.getNumber('interaction-radius', 130)),
-            crossSize: this.getNumber('cross-size', 0),
-            guideInset: Math.max(0, this.getNumber('guide-inset', 16)),
-            guideEdges: this.parseGuideEdges(this.getAttribute('guide-edges')),
-            guideX: this.guideFraction('guide-x', 0.5),
-            guideY: this.guideFraction('guide-y', 0.5),
-            guideSpanX: Math.max(0, this.getNumber('guide-span-x', 0)),
-            guideSpanY: Math.max(0, this.getNumber('guide-span-y', 0)),
-            animate: this.getBool('animated'),
-            animSpeed: this.getNumber('animation-speed', 1),
-            animationStyle: this.animationStyle(),
-            traceLength: this.getNumber('trace-length', 0),
-            traceDirection: this.traceDirection(),
-        };
-    }
-    /* --------------------------------------------------------------------- */
-    /*  Setup                                                                */
-    /* --------------------------------------------------------------------- */
-    ensureCanvas() {
-        if (this.canvas)
-            return;
-        const canvas = document.createElement('canvas');
-        Object.assign(canvas.style, {
-            display: 'block',
-            width: '100%',
-            height: '100%',
-            pointerEvents: 'none',
-        });
-        this.appendChild(canvas);
-        this.canvas = canvas;
-        this.ctx = canvas.getContext('2d') ?? undefined;
-        this.hlCanvas = document.createElement('canvas');
-        this.maskCanvas = document.createElement('canvas');
-    }
-    applyHostStyles() {
-        const overlay = this.getBool('overlay');
-        this.className = [CLASS, `${CLASS}--${this.getAttribute('type') || 'lines'}`, overlay && `${CLASS}--overlay`]
-            .filter(Boolean)
-            .join(' ');
-        this.style.display = 'block';
-        this.style.boxSizing = 'border-box';
-        // interactive 여도 canvas 는 pointer-events:none, 좌표는 window 에서 계산 → 하위 상호작용 방해 없음
-        this.style.pointerEvents = 'none';
-        const bg = this.getAttribute('background');
-        this.style.backgroundColor = bg ? this.resolveCssColor(bg) : 'transparent';
-        if (overlay) {
-            this.style.position = 'absolute';
-            this.style.inset = '0';
-            this.style.width = '100%';
-            this.style.height = '100%';
-            if (!this.style.zIndex)
-                this.style.zIndex = '1';
-        }
-        else {
-            if (this.style.position === 'absolute' || !this.style.position)
-                this.style.position = 'relative';
-            const width = this.getSizeStyle(this.getAttribute('width'));
-            const height = this.getSizeStyle(this.getAttribute('height'));
-            if (width)
-                this.style.width = width;
-            if (height)
-                this.style.height = height;
-        }
-        const borderRadius = this.getSizeStyle(this.getAttribute('border-radius'));
-        this.style.borderRadius = borderRadius || '';
-        if (this.canvas)
-            this.canvas.style.borderRadius = borderRadius || '';
-    }
-    startObserving() {
-        if (this.ro)
-            return;
-        this.ro = new ResizeObserver(() => {
-            this.measure();
-            this.scheduleDraw();
-        });
-        this.ro.observe(this);
-    }
-    observeDocumentTheme() {
-        if (this.themeObserver)
-            return;
-        if (typeof MutationObserver === 'undefined')
-            return;
-        this.themeObserver = new MutationObserver(() => this.scheduleDraw());
-        this.themeObserver.observe(document.documentElement, {
-            attributes: true,
-            attributeFilter: ['data-theme', 'data-color-mode', 'class'],
-        });
-    }
-    bindPointer() {
-        window.removeEventListener('pointermove', this.onPointerMove);
-        this.themeMedia?.removeEventListener('change', this.onThemeMediaChange);
-        if (!this.themeMedia) {
-            this.themeMedia = window.matchMedia('(prefers-color-scheme: dark)');
-        }
-        this.themeMedia.addEventListener('change', this.onThemeMediaChange);
-        if (this.interactionMode() !== 'none') {
-            window.addEventListener('pointermove', this.onPointerMove, { passive: true });
-        }
-        else {
-            this.pointer.strength = 0;
-            this.pointer.inside = false;
-        }
-    }
-    handlePointerMove(e) {
-        if (!this.canvas)
-            return;
-        const rect = this.canvas.getBoundingClientRect();
-        const x = e.clientX - rect.left;
-        const y = e.clientY - rect.top;
-        const pad = this.cfg.interRadius;
-        const inside = x >= -pad && x <= rect.width + pad && y >= -pad && y <= rect.height + pad;
-        this.pointer.x = x;
-        this.pointer.y = y;
-        this.pointer.inside = inside;
-        if (inside) {
-            this.pointer.strength = 1;
-            this.lastPointerMove = performance.now();
-            this.ensureLoop();
-        }
-    }
-    measure() {
-        if (!this.canvas || !this.ctx)
-            return;
-        const rect = this.getBoundingClientRect();
-        const w = Math.max(1, Math.round(rect.width));
-        const h = Math.max(1, Math.round(rect.height));
-        this.cssW = w;
-        this.cssH = h;
-        this.tracePulses = [];
-        this.traceSpawnAccumulator = 0;
-        const dpr = Math.min(MAX_DPR, window.devicePixelRatio || 1);
-        [this.canvas, this.hlCanvas, this.maskCanvas].forEach((c) => {
-            if (!c)
-                return;
-            c.width = Math.round(w * dpr);
-            c.height = Math.round(h * dpr);
-        });
-    }
-    /* --------------------------------------------------------------------- */
-    /*  Geometry                                                             */
-    /* --------------------------------------------------------------------- */
-    /** 중앙을 기준으로 대칭 배치되며 (0, extent) 내부 좌표만 반환 → 가장자리 라인 없음 */
-    axis(extent, step) {
-        const center = extent / 2;
-        const positions = [];
-        const kMin = Math.ceil((0 - center) / step);
-        const kMax = Math.floor((extent - center) / step);
-        for (let k = kMin; k <= kMax; k++) {
-            const p = center + k * step;
-            if (p > 0.75 && p < extent - 0.75)
-                positions.push(p);
-        }
-        return positions;
-    }
-    /* --------------------------------------------------------------------- */
-    /*  Draw                                                                 */
-    /* --------------------------------------------------------------------- */
-    scheduleDraw() {
-        const cfg = this.cfg;
-        // 즉시 1회 동기 렌더 → rAF 지연(백그라운드 탭 등)에도 첫 프레임 보장
-        this.drawFrame(performance.now(), 0);
-        if (cfg.animate || this.pointer.strength > 0.001) {
-            this.ensureLoop();
-        }
-        else if (this.rafId != null) {
-            cancelAnimationFrame(this.rafId);
-            this.rafId = undefined;
-        }
-    }
-    ensureLoop() {
-        if (this.rafId != null)
-            return;
-        this.lastTime = performance.now();
-        const tick = (now) => {
-            const dt = Math.min(0.05, (now - this.lastTime) / 1000);
-            this.lastTime = now;
-            // 포인터 비활성 시 강도 감쇠
-            if (this.interactionMode() !== 'none') {
-                if (now - this.lastPointerMove > 90) {
-                    this.pointer.strength = Math.max(0, this.pointer.strength - dt * 2.2);
-                }
-            }
-            else {
-                this.pointer.strength = 0;
-            }
-            this.drawFrame(now, dt);
-            const cfg = this.cfg;
-            if (cfg.animate || this.pointer.strength > 0.001) {
-                this.rafId = requestAnimationFrame(tick);
-            }
-            else {
-                this.rafId = undefined;
-                this.drawFrame(now, dt); // 최종 정적 프레임
-            }
-        };
-        this.rafId = requestAnimationFrame(tick);
-    }
-    drawFrame(now, dt) {
-        const ctx = this.ctx;
-        if (!ctx || !this.canvas)
-            return;
-        const { cssW: W, cssH: H } = this;
-        if (W <= 0 || H <= 0)
-            return;
-        const cfg = this.cfg;
-        const dpr = Math.min(MAX_DPR, window.devicePixelRatio || 1);
-        const time = now / 1000;
-        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
-        ctx.clearRect(0, 0, W, H);
-        // 1) 베이스 그리드
-        this.drawPattern(ctx, W, H, cfg, cfg.color, cfg.opacity, time);
-        // 2) trace 애니메이션 — 그리드/프레임 선을 따라 짧은 세그먼트 이동
-        if (cfg.animate && this.isTraceableLines(cfg) && (cfg.animationStyle === 'trace' || cfg.animationStyle === 'both')) {
-            this.drawTraceHighlight(ctx, W, H, cfg, dt);
-        }
-        // 3) 하이라이트(글로우/밴드) 레이어
-        const wantBandHighlight = (cfg.interaction === 'glow' && this.pointer.strength > 0.001) ||
-            (cfg.animate &&
-                cfg.animationStyle !== 'trace' &&
-                (this.isGridLines(cfg) || cfg.type === 'diagonal'));
-        if (wantBandHighlight && this.hlCanvas && this.maskCanvas) {
-            const hl = this.hlCanvas.getContext('2d');
-            const mask = this.maskCanvas.getContext('2d');
-            if (hl && mask) {
-                // 2a) 하이라이트 색으로 동일 패턴
-                hl.setTransform(dpr, 0, 0, dpr, 0, 0);
-                hl.clearRect(0, 0, W, H);
-                this.drawPattern(hl, W, H, cfg, cfg.interColor, Math.min(1, cfg.opacity + 0.4), time);
-                // 2b) 에너지 필드 마스크
-                this.buildEnergyMask(mask, W, H, dpr, cfg, time);
-                // 2c) 하이라이트 ∩ 에너지
-                hl.setTransform(1, 0, 0, 1, 0, 0);
-                hl.globalCompositeOperation = 'destination-in';
-                hl.drawImage(this.maskCanvas, 0, 0);
-                hl.globalCompositeOperation = 'source-over';
-                // 2d) 가산 합성
-                ctx.setTransform(1, 0, 0, 1, 0, 0);
-                ctx.globalCompositeOperation = 'lighter';
-                ctx.drawImage(this.hlCanvas, 0, 0);
-                ctx.globalCompositeOperation = 'source-over';
-                ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
-            }
-        }
-        // 4) 페이드 마스크
-        this.applyFade(ctx, W, H, cfg);
-    }
-    easeInOutCubic(t) {
-        const x = Math.min(1, Math.max(0, t));
-        return x < 0.5 ? 4 * x * x * x : 1 - (-2 * x + 2) ** 3 / 2;
-    }
-    traceSegmentLength(cfg) {
-        if (cfg.traceLength > 0)
-            return cfg.traceLength;
-        return TRACE_DEFAULT_LENGTH;
-    }
-    pulseHead(pulse, travel) {
-        const eased = this.easeInOutCubic(pulse.progress);
-        return -pulse.length + eased * (travel + pulse.length * 2);
-    }
-    updateTracePulses(W, H, cfg, dt) {
-        const segLen = this.traceSegmentLength(cfg);
-        const maxActive = Math.min(6, Math.max(2, Math.floor((W * H) / (cfg.size * cfg.size * 180))));
-        const spawnGap = (0.38 + Math.random() * 0.52) / Math.max(0.25, cfg.animSpeed);
-        this.traceSpawnAccumulator += dt;
-        while (this.traceSpawnAccumulator >= spawnGap && this.tracePulses.length < maxActive) {
-            this.traceSpawnAccumulator -= spawnGap;
-            this.spawnTracePulse(W, H, cfg, segLen);
-            if (Math.random() > 0.45)
-                break;
-        }
-        this.tracePulses = this.tracePulses.filter((pulse) => {
-            pulse.progress += dt / pulse.duration;
-            if (pulse.progress < 0.1)
-                pulse.alpha = pulse.progress / 0.1;
-            else if (pulse.progress > 0.9)
-                pulse.alpha = (1 - pulse.progress) / 0.1;
-            else
-                pulse.alpha = 1;
-            return pulse.progress < 1 && pulse.alpha > 0.02;
-        });
-    }
-    traceLinePositions(W, H, cfg) {
-        if (cfg.linesLayout === 'frame') {
-            const inset = Math.min(cfg.guideInset, W / 2 - 1, H / 2 - 1);
-            const edges = cfg.guideEdges;
-            const xs = [];
-            const ys = [];
-            if (edges.has('left'))
-                xs.push(inset);
-            if (edges.has('right'))
-                xs.push(W - inset);
-            if (edges.has('top'))
-                ys.push(inset);
-            if (edges.has('bottom'))
-                ys.push(H - inset);
-            return { xs, ys };
-        }
-        return { xs: this.axis(W, cfg.size), ys: this.axis(H, cfg.size) };
-    }
-    spawnTracePulse(W, H, cfg, segLen) {
-        const { xs, ys } = this.traceLinePositions(W, H, cfg);
-        const allowV = cfg.traceDirection !== 'horizontal' && xs.length > 0;
-        const allowH = cfg.traceDirection !== 'vertical' && ys.length > 0;
-        if (!allowV && !allowH)
-            return;
-        let axis;
-        if (allowV && allowH)
-            axis = Math.random() < 0.5 ? 'v' : 'h';
-        else
-            axis = allowV ? 'v' : 'h';
-        const travel = axis === 'v' ? H : W;
-        const length = segLen;
-        const distance = travel + length * 2;
-        const duration = distance / (TRACE_BASE_SPEED * Math.max(0.25, cfg.animSpeed));
-        const pulse = {
-            axis,
-            linePos: axis === 'v' ? xs[Math.floor(Math.random() * xs.length)] : ys[Math.floor(Math.random() * ys.length)],
-            progress: 0,
-            length,
-            duration,
-            alpha: 0,
-        };
-        this.tracePulses.push(pulse);
-    }
-    drawTracePulseSegment(ctx, pulse, W, H, cfg) {
-        const [r, g, b] = this.parseColorRgb(this.traceDrawColor(cfg));
-        const coreAlpha = Math.min(1, this.traceDrawOpacity(cfg) * pulse.alpha);
-        const travel = pulse.axis === 'v' ? H : W;
-        const head = this.pulseHead(pulse, travel);
-        let x0;
-        let y0;
-        let x1;
-        let y1;
-        if (pulse.axis === 'v') {
-            x0 = x1 = pulse.linePos;
-            y1 = Math.min(H, head);
-            y0 = Math.max(0, head - pulse.length);
-        }
-        else {
-            y0 = y1 = pulse.linePos;
-            x1 = Math.min(W, head);
-            x0 = Math.max(0, head - pulse.length);
-        }
-        if (Math.abs(x1 - x0) < 0.5 && Math.abs(y1 - y0) < 0.5)
-            return;
-        const grad = ctx.createLinearGradient(x0, y0, x1, y1);
-        grad.addColorStop(0, `rgba(${r},${g},${b},0)`);
-        grad.addColorStop(0.18, `rgba(${r},${g},${b},${coreAlpha * 0.2})`);
-        grad.addColorStop(0.5, `rgba(${r},${g},${b},${coreAlpha})`);
-        grad.addColorStop(0.82, `rgba(${r},${g},${b},${coreAlpha * 0.2})`);
-        grad.addColorStop(1, `rgba(${r},${g},${b},0)`);
-        ctx.save();
-        ctx.strokeStyle = grad;
-        ctx.lineCap = 'round';
-        ctx.globalAlpha = pulse.alpha;
-        ctx.shadowColor = `rgba(${r},${g},${b},${coreAlpha * 0.9})`;
-        ctx.shadowBlur = 12 + cfg.thickness * 5;
-        ctx.lineWidth = Math.max(1.1, cfg.thickness + 0.6);
-        ctx.beginPath();
-        ctx.moveTo(x0, y0);
-        ctx.lineTo(x1, y1);
-        ctx.stroke();
-        ctx.shadowBlur = 0;
-        ctx.lineWidth = Math.max(0.6, cfg.thickness * 0.35);
-        ctx.globalAlpha = Math.min(1, pulse.alpha * 1.1);
-        ctx.stroke();
-        ctx.restore();
-    }
-    drawTraceHighlight(ctx, W, H, cfg, dt) {
-        this.updateTracePulses(W, H, cfg, dt);
-        ctx.save();
-        ctx.globalCompositeOperation = 'lighter';
-        this.tracePulses.forEach((pulse) => this.drawTracePulseSegment(ctx, pulse, W, H, cfg));
-        ctx.restore();
-    }
-    drawPattern(ctx, W, H, cfg, color, alpha, time) {
-        const { type, size, thickness } = cfg;
-        ctx.save();
-        ctx.globalAlpha = alpha;
-        ctx.strokeStyle = color;
-        ctx.fillStyle = color;
-        ctx.lineWidth = thickness;
-        ctx.lineCap = 'round';
-        if (type === 'lines') {
-            if (cfg.linesLayout === 'frame') {
-                this.drawFrameGuides(ctx, W, H, cfg);
-            }
-            else if (cfg.linesLayout === 'center') {
-                this.drawCenterGuides(ctx, W, H, cfg);
-            }
-            else {
-                this.drawGridLines(ctx, W, H, cfg.size);
-            }
-        }
-        else if (type === 'dots') {
-            const xs = this.axis(W, size);
-            const ys = this.axis(H, size);
-            const baseR = Math.max(0.75, thickness);
-            const magnet = cfg.interaction === 'magnet' && this.pointer.strength > 0.001;
-            const pr = this.pointer;
-            const rInf = cfg.interRadius;
-            xs.forEach((x, ix) => {
-                ys.forEach((y, iy) => {
-                    let cx = x;
-                    let cy = y;
-                    let r = baseR;
-                    if (magnet && pr.inside) {
-                        const dx = pr.x - x;
-                        const dy = pr.y - y;
-                        const d = Math.hypot(dx, dy);
-                        if (d < rInf) {
-                            const t = (1 - d / rInf) * pr.strength;
-                            r = baseR * (1 + t * 1.6);
-                            cx += (dx / (d || 1)) * t * size * 0.28;
-                            cy += (dy / (d || 1)) * t * size * 0.28;
-                        }
-                    }
-                    if (cfg.animate) {
-                        const tw = 0.75 + 0.25 * Math.sin(time * 2 * cfg.animSpeed + (ix + iy) * 0.9);
-                        r *= tw;
-                    }
-                    ctx.beginPath();
-                    ctx.arc(cx, cy, r, 0, Math.PI * 2);
-                    ctx.fill();
-                });
-            });
-        }
-        else if (type === 'cross') {
-            const xs = this.axis(W, size);
-            const ys = this.axis(H, size);
-            const arm = this.crossArm(size, thickness, cfg.crossSize);
-            const rotate = cfg.interaction === 'rotate' && this.pointer.strength > 0.001;
-            const pr = this.pointer;
-            xs.forEach((x) => {
-                ys.forEach((y) => {
-                    ctx.save();
-                    ctx.translate(x, y);
-                    if (rotate && pr.inside && pr.strength > 0.01) {
-                        const dx = pr.x - x;
-                        const dy = pr.y - y;
-                        ctx.rotate(Math.atan2(dy, dx));
-                    }
-                    ctx.beginPath();
-                    if (cfg.crossStyle === 'line') {
-                        ctx.moveTo(-arm, 0);
-                        ctx.lineTo(arm, 0);
-                    }
-                    else {
-                        ctx.moveTo(-arm, 0);
-                        ctx.lineTo(arm, 0);
-                        ctx.moveTo(0, -arm);
-                        ctx.lineTo(0, arm);
-                    }
-                    ctx.stroke();
-                    ctx.restore();
-                });
-            });
-        }
-        else {
-            // diagonal — 중앙 기준 45° 크로스해치
-            ctx.save();
-            ctx.beginPath();
-            ctx.rect(0, 0, W, H);
-            ctx.clip();
-            ctx.translate(W / 2, H / 2);
-            ctx.rotate(Math.PI / 4);
-            const R = Math.hypot(W, H);
-            ctx.beginPath();
-            for (let p = -R; p <= R; p += size) {
-                ctx.moveTo(p, -R);
-                ctx.lineTo(p, R);
-                ctx.moveTo(-R, p);
-                ctx.lineTo(R, p);
-            }
-            ctx.stroke();
-            ctx.restore();
-        }
-        ctx.restore();
-    }
-    drawGridLines(ctx, W, H, size) {
-        const xs = this.axis(W, size);
-        const ys = this.axis(H, size);
-        ctx.beginPath();
-        xs.forEach((x) => {
-            ctx.moveTo(x, 0);
-            ctx.lineTo(x, H);
-        });
-        ys.forEach((y) => {
-            ctx.moveTo(0, y);
-            ctx.lineTo(W, y);
-        });
-        ctx.stroke();
-    }
-    drawFrameGuides(ctx, W, H, cfg) {
-        const inset = Math.min(cfg.guideInset, W / 2 - 1, H / 2 - 1);
-        const edges = cfg.guideEdges;
-        ctx.beginPath();
-        if (edges.has('top')) {
-            ctx.moveTo(0, inset);
-            ctx.lineTo(W, inset);
-        }
-        if (edges.has('bottom')) {
-            ctx.moveTo(0, H - inset);
-            ctx.lineTo(W, H - inset);
-        }
-        if (edges.has('left')) {
-            ctx.moveTo(inset, 0);
-            ctx.lineTo(inset, H);
-        }
-        if (edges.has('right')) {
-            ctx.moveTo(W - inset, 0);
-            ctx.lineTo(W - inset, H);
-        }
-        ctx.stroke();
-    }
-    drawCenterGuides(ctx, W, H, cfg) {
-        const cx = W * cfg.guideX;
-        const cy = H * cfg.guideY;
-        const spanX = cfg.guideSpanX > 0 ? cfg.guideSpanX : W;
-        const spanY = cfg.guideSpanY > 0 ? cfg.guideSpanY : H;
-        ctx.beginPath();
-        ctx.moveTo(cx - spanX / 2, cy);
-        ctx.lineTo(cx + spanX / 2, cy);
-        ctx.moveTo(cx, cy - spanY / 2);
-        ctx.lineTo(cx, cy + spanY / 2);
-        ctx.stroke();
-    }
-    buildEnergyMask(mask, W, H, dpr, cfg, time) {
-        mask.setTransform(dpr, 0, 0, dpr, 0, 0);
-        mask.clearRect(0, 0, W, H);
-        mask.globalCompositeOperation = 'lighter';
-        // 포인터 방사형
-        if (cfg.interaction === 'glow' && this.pointer.strength > 0.001 && this.pointer.inside) {
-            const r = cfg.interRadius;
-            const g = mask.createRadialGradient(this.pointer.x, this.pointer.y, 0, this.pointer.x, this.pointer.y, r);
-            g.addColorStop(0, `rgba(255,255,255,${0.9 * this.pointer.strength})`);
-            g.addColorStop(1, 'rgba(255,255,255,0)');
-            mask.fillStyle = g;
-            mask.fillRect(0, 0, W, H);
-        }
-        // 이동하는 밝은 밴드
-        if (cfg.animate && cfg.animationStyle !== 'trace') {
-            mask.save();
-            mask.translate(W / 2, H / 2);
-            mask.rotate(this.bandAngle);
-            const span = Math.hypot(W, H);
-            const bandW = Math.max(60, span * 0.18);
-            const travel = span + bandW;
-            const pos = ((time * 90 * cfg.animSpeed) % (travel * 2)) - travel;
-            const grad = mask.createLinearGradient(pos - bandW, 0, pos + bandW, 0);
-            grad.addColorStop(0, 'rgba(255,255,255,0)');
-            grad.addColorStop(0.5, 'rgba(255,255,255,0.55)');
-            grad.addColorStop(1, 'rgba(255,255,255,0)');
-            mask.fillStyle = grad;
-            mask.fillRect(-span, -span, span * 2, span * 2);
-            mask.restore();
-        }
-        mask.globalCompositeOperation = 'source-over';
-    }
-    applyFade(ctx, W, H, cfg) {
-        const fade = cfg.fade;
-        if (fade === 'none')
-            return;
-        const frac = cfg.fadeSize;
-        const pxX = frac > 1 ? frac : Math.max(8, W * frac);
-        const pxY = frac > 1 ? frac : Math.max(8, H * frac);
-        ctx.save();
-        ctx.globalCompositeOperation = 'destination-in';
-        const edge = (dir) => {
-            let g;
-            if (dir === 'top') {
-                g = ctx.createLinearGradient(0, 0, 0, pxY);
-                g.addColorStop(0, 'rgba(0,0,0,0)');
-                g.addColorStop(1, 'rgba(0,0,0,1)');
-            }
-            else if (dir === 'bottom') {
-                g = ctx.createLinearGradient(0, H - pxY, 0, H);
-                g.addColorStop(0, 'rgba(0,0,0,1)');
-                g.addColorStop(1, 'rgba(0,0,0,0)');
-            }
-            else if (dir === 'left') {
-                g = ctx.createLinearGradient(0, 0, pxX, 0);
-                g.addColorStop(0, 'rgba(0,0,0,0)');
-                g.addColorStop(1, 'rgba(0,0,0,1)');
-            }
-            else {
-                g = ctx.createLinearGradient(W - pxX, 0, W, 0);
-                g.addColorStop(0, 'rgba(0,0,0,1)');
-                g.addColorStop(1, 'rgba(0,0,0,0)');
-            }
-            // 여러 방향은 교집합(destination-in 연쇄) → 각 변이 개별적으로 페이드
-            ctx.fillStyle = g;
-            ctx.fillRect(0, 0, W, H);
-        };
-        if (fade === 'vignette') {
-            const g = ctx.createRadialGradient(W / 2, H / 2, Math.min(W, H) * 0.2, W / 2, H / 2, Math.hypot(W, H) / 2);
-            g.addColorStop(0, 'rgba(0,0,0,1)');
-            g.addColorStop(1, 'rgba(0,0,0,0)');
-            ctx.fillStyle = g;
-            ctx.fillRect(0, 0, W, H);
-        }
-        else {
-            const edges = fade === 'top'
-                ? ['top']
-                : fade === 'bottom'
-                    ? ['bottom']
-                    : fade === 'left'
-                        ? ['left']
-                        : fade === 'right'
-                            ? ['right']
-                            : fade === 'vertical'
-                                ? ['top', 'bottom']
-                                : fade === 'horizontal'
-                                    ? ['left', 'right']
-                                    : ['top', 'bottom', 'left', 'right']; // all
-            edges.forEach(edge);
-        }
-        ctx.restore();
-    }
-}
-if (!customElements.get('db-grid-background')) {
-    customElements.define('db-grid-background', DbGridBackground);
-}
-
-export { DbGridBackground };
+const t="designbase-wc-grid-background";class DbGridBackground extends HTMLElement{constructor(){super(...arguments),this.lastTime=0,this.lastPointerMove=0,this.bandAngle=Math.random()*Math.PI*2,this.pointer={x:0,y:0,strength:0,inside:!1},this.cssW=0,this.cssH=0,this.tracePulses=[],this.traceSpawnAccumulator=0,this.onThemeMediaChange=()=>this.scheduleDraw(),this.onPointerMove=t=>this.handlePointerMove(t)}static get observedAttributes(){return["type","size","thickness","color","theme","opacity","fade","fade-size","background","overlay","interactive","interaction","interaction-color","interaction-radius","cross-size","cross-style","lines-layout","guide-inset","guide-edges","guide-x","guide-y","guide-span-x","guide-span-y","animated","animation-style","animation-speed","trace-length","trace-direction","width","height","border-radius"]}connectedCallback(){this.ensureCanvas(),this.applyHostStyles(),this.startObserving(),this.observeDocumentTheme(),this.bindPointer(),this.measure(),this.scheduleDraw()}disconnectedCallback(){this.ro?.disconnect(),this.ro=void 0,this.themeObserver?.disconnect(),this.themeObserver=void 0,window.removeEventListener("pointermove",this.onPointerMove),this.themeMedia?.removeEventListener("change",this.onThemeMediaChange),this.themeMedia=void 0,null!=this.rafId&&cancelAnimationFrame(this.rafId),this.rafId=void 0}attributeChangedCallback(){this.isConnected&&(this.applyHostStyles(),this.bindPointer(),this.measure(),this.scheduleDraw())}getBool(t){return this.hasAttribute(t)&&"false"!==this.getAttribute(t)}getNumber(t,e){const i=this.getAttribute(t);if(null===i||""===i)return e;const s=Number(i);return Number.isFinite(s)?s:e}getSizeStyle(t){if(!t)return;const e=Number(t);return Number.isFinite(e)?`${e}px`:t}getColorProbe(){if(!this.colorProbe){const t=document.createElement("span");t.setAttribute("aria-hidden","true"),Object.assign(t.style,{position:"absolute",width:"0",height:"0",overflow:"hidden",visibility:"hidden",pointerEvents:"none"}),this.appendChild(t),this.colorProbe=t}return this.colorProbe}resolveCssColor(t){if(!t.includes("var(")&&!t.startsWith("color-mix"))return t;const e=this.getColorProbe();e.style.color=t;const i=getComputedStyle(e).color;return i&&"rgba(0, 0, 0, 0)"!==i?i:t}isDarkContext(){const t=this.getAttribute("theme");if("dark"===t)return!0;if("light"===t)return!1;const e=document.documentElement,i=e.getAttribute("data-color-mode");if("dark"===i)return!0;if("light"===i)return!1;const s=e.getAttribute("data-theme");return"dark"===s||"light"!==s&&window.matchMedia("(prefers-color-scheme: dark)").matches}resolveThemeColor(t,e,i,s){if(t)return this.resolveCssColor(t);const r=this.getColorProbe(),a=this.isDarkContext();r.style.color=`var(${e}, ${a?s:i})`;const o=getComputedStyle(r).color;return o&&"rgba(0, 0, 0, 0)"!==o?o:a?s:i}effectiveOpacity(){const t=this.getAttribute("opacity");return null!==t&&""!==t?this.getNumber("opacity",.05):this.isDarkContext()?.1:.05}effectiveColor(){const t=this.getAttribute("color");return t?this.resolveCssColor(t):this.isDarkContext()?"#ffffff":"#000000"}effectiveInterColor(){const t=this.getAttribute("interaction-color");return t?this.resolveCssColor(t):this.effectiveColor()}traceDrawColor(t){return this.hasAttribute("interaction-color")?t.interColor:t.color}traceDrawOpacity(t){const e=t.opacity;return this.hasAttribute("interaction-color")?Math.min(1,e+.2):Math.min(1,3*e)}parseColorRgb(t){const e=this.resolveCssColor(t).match(/rgba?\(\s*(\d+)[,\s]+(\d+)[,\s]+(\d+)/);return e?[Number(e[1]),Number(e[2]),Number(e[3])]:this.isDarkContext()?[255,255,255]:[0,0,0]}crossArm(t,e,i){return i>0?i<=1?t*i:i:Math.min(.32*t,8+1.5*e)}interactionMode(){const t=this.getAttribute("interaction");if("glow"===t||"magnet"===t||"rotate"===t||"none"===t)return t;if(!this.getBool("interactive"))return"none";const e=this.getAttribute("type")||"lines";return"dots"===e?"magnet":"cross"===e?"rotate":"glow"}animationStyle(){const t=this.getAttribute("animation-style")||"band";return"trace"===t||"both"===t?t:"band"}traceDirection(){const t=this.getAttribute("trace-direction")||"both";return"vertical"===t||"horizontal"===t?t:"both"}linesLayout(){const t=this.getAttribute("lines-layout")||"grid";return"frame"===t||"center"===t?t:"grid"}crossStyle(){return"line"===(this.getAttribute("cross-style")||"plus")?"line":"plus"}parseGuideEdges(t){const e=(t||"top,right,bottom,left").split(",").map(t=>t.trim().toLowerCase()).filter(Boolean);return new Set(e)}guideFraction(t,e){const i=this.getAttribute(t);if(null===i||""===i)return e;const s=Number(i);return Number.isFinite(s)?Math.min(1,Math.max(0,s)):e}isGridLines(t){return"lines"===t.type&&"grid"===t.linesLayout}isTraceableLines(t){return"lines"===t.type&&("grid"===t.linesLayout||"frame"===t.linesLayout)}get cfg(){return{type:this.getAttribute("type")||"lines",linesLayout:this.linesLayout(),crossStyle:this.crossStyle(),size:Math.max(4,this.getNumber("size",32)),thickness:Math.max(.5,this.getNumber("thickness",1)),color:this.effectiveColor(),opacity:this.effectiveOpacity(),fade:this.getAttribute("fade")||"none",fadeSize:this.getNumber("fade-size",.22),interaction:this.interactionMode(),interColor:this.effectiveInterColor(),interRadius:Math.max(20,this.getNumber("interaction-radius",130)),crossSize:this.getNumber("cross-size",0),guideInset:Math.max(0,this.getNumber("guide-inset",16)),guideEdges:this.parseGuideEdges(this.getAttribute("guide-edges")),guideX:this.guideFraction("guide-x",.5),guideY:this.guideFraction("guide-y",.5),guideSpanX:Math.max(0,this.getNumber("guide-span-x",0)),guideSpanY:Math.max(0,this.getNumber("guide-span-y",0)),animate:this.getBool("animated"),animSpeed:this.getNumber("animation-speed",1),animationStyle:this.animationStyle(),traceLength:this.getNumber("trace-length",0),traceDirection:this.traceDirection()}}ensureCanvas(){if(this.canvas)return;const t=document.createElement("canvas");Object.assign(t.style,{display:"block",width:"100%",height:"100%",pointerEvents:"none"}),this.appendChild(t),this.canvas=t,this.ctx=t.getContext("2d")??void 0,this.hlCanvas=document.createElement("canvas"),this.maskCanvas=document.createElement("canvas")}applyHostStyles(){const e=this.getBool("overlay");this.className=[t,`${t}--${this.getAttribute("type")||"lines"}`,e&&`${t}--overlay`].filter(Boolean).join(" "),this.style.display="block",this.style.boxSizing="border-box",this.style.pointerEvents="none";const i=this.getAttribute("background");if(this.style.backgroundColor=i?this.resolveCssColor(i):"transparent",e)this.style.position="absolute",this.style.inset="0",this.style.width="100%",this.style.height="100%",this.style.zIndex||(this.style.zIndex="1");else{"absolute"!==this.style.position&&this.style.position||(this.style.position="relative");const t=this.getSizeStyle(this.getAttribute("width")),e=this.getSizeStyle(this.getAttribute("height"));t&&(this.style.width=t),e&&(this.style.height=e)}const s=this.getSizeStyle(this.getAttribute("border-radius"));this.style.borderRadius=s||"",this.canvas&&(this.canvas.style.borderRadius=s||"")}startObserving(){this.ro||(this.ro=new ResizeObserver(()=>{this.measure(),this.scheduleDraw()}),this.ro.observe(this))}observeDocumentTheme(){this.themeObserver||"undefined"!=typeof MutationObserver&&(this.themeObserver=new MutationObserver(()=>this.scheduleDraw()),this.themeObserver.observe(document.documentElement,{attributes:!0,attributeFilter:["data-theme","data-color-mode","class"]}))}bindPointer(){window.removeEventListener("pointermove",this.onPointerMove),this.themeMedia?.removeEventListener("change",this.onThemeMediaChange),this.themeMedia||(this.themeMedia=window.matchMedia("(prefers-color-scheme: dark)")),this.themeMedia.addEventListener("change",this.onThemeMediaChange),"none"!==this.interactionMode()?window.addEventListener("pointermove",this.onPointerMove,{passive:!0}):(this.pointer.strength=0,this.pointer.inside=!1)}handlePointerMove(t){if(!this.canvas)return;const e=this.canvas.getBoundingClientRect(),i=t.clientX-e.left,s=t.clientY-e.top,r=this.cfg.interRadius,a=i>=-r&&i<=e.width+r&&s>=-r&&s<=e.height+r;this.pointer.x=i,this.pointer.y=s,this.pointer.inside=a,a&&(this.pointer.strength=1,this.lastPointerMove=performance.now(),this.ensureLoop())}measure(){if(!this.canvas||!this.ctx)return;const t=this.getBoundingClientRect(),e=Math.max(1,Math.round(t.width)),i=Math.max(1,Math.round(t.height));this.cssW=e,this.cssH=i,this.tracePulses=[],this.traceSpawnAccumulator=0;const s=Math.min(2,window.devicePixelRatio||1);[this.canvas,this.hlCanvas,this.maskCanvas].forEach(t=>{t&&(t.width=Math.round(e*s),t.height=Math.round(i*s))})}axis(t,e){const i=t/2,s=[],r=Math.ceil((0-i)/e),a=Math.floor((t-i)/e);for(let o=r;o<=a;o++){const r=i+o*e;r>.75&&r<t-.75&&s.push(r)}return s}scheduleDraw(){const t=this.cfg;this.drawFrame(performance.now(),0),t.animate||this.pointer.strength>.001?this.ensureLoop():null!=this.rafId&&(cancelAnimationFrame(this.rafId),this.rafId=void 0)}ensureLoop(){if(null!=this.rafId)return;this.lastTime=performance.now();const tick=t=>{const e=Math.min(.05,(t-this.lastTime)/1e3);this.lastTime=t,"none"!==this.interactionMode()?t-this.lastPointerMove>90&&(this.pointer.strength=Math.max(0,this.pointer.strength-2.2*e)):this.pointer.strength=0,this.drawFrame(t,e);this.cfg.animate||this.pointer.strength>.001?this.rafId=requestAnimationFrame(tick):(this.rafId=void 0,this.drawFrame(t,e))};this.rafId=requestAnimationFrame(tick)}drawFrame(t,e){const i=this.ctx;if(!i||!this.canvas)return;const{cssW:s,cssH:r}=this;if(s<=0||r<=0)return;const a=this.cfg,o=Math.min(2,window.devicePixelRatio||1),n=t/1e3;i.setTransform(o,0,0,o,0,0),i.clearRect(0,0,s,r),this.drawPattern(i,s,r,a,a.color,a.opacity,n),a.animate&&this.isTraceableLines(a)&&("trace"===a.animationStyle||"both"===a.animationStyle)&&this.drawTraceHighlight(i,s,r,a,e);if(("glow"===a.interaction&&this.pointer.strength>.001||a.animate&&"trace"!==a.animationStyle&&(this.isGridLines(a)||"diagonal"===a.type))&&this.hlCanvas&&this.maskCanvas){const t=this.hlCanvas.getContext("2d"),e=this.maskCanvas.getContext("2d");t&&e&&(t.setTransform(o,0,0,o,0,0),t.clearRect(0,0,s,r),this.drawPattern(t,s,r,a,a.interColor,Math.min(1,a.opacity+.4),n),this.buildEnergyMask(e,s,r,o,a,n),t.setTransform(1,0,0,1,0,0),t.globalCompositeOperation="destination-in",t.drawImage(this.maskCanvas,0,0),t.globalCompositeOperation="source-over",i.setTransform(1,0,0,1,0,0),i.globalCompositeOperation="lighter",i.drawImage(this.hlCanvas,0,0),i.globalCompositeOperation="source-over",i.setTransform(o,0,0,o,0,0))}this.applyFade(i,s,r,a)}easeInOutCubic(t){const e=Math.min(1,Math.max(0,t));return e<.5?4*e*e*e:1-(-2*e+2)**3/2}traceSegmentLength(t){return t.traceLength>0?t.traceLength:28}pulseHead(t,e){const i=this.easeInOutCubic(t.progress);return-t.length+i*(e+2*t.length)}updateTracePulses(t,e,i,s){const r=this.traceSegmentLength(i),a=Math.min(6,Math.max(2,Math.floor(t*e/(i.size*i.size*180)))),o=(.38+.52*Math.random())/Math.max(.25,i.animSpeed);for(this.traceSpawnAccumulator+=s;this.traceSpawnAccumulator>=o&&this.tracePulses.length<a&&(this.traceSpawnAccumulator-=o,this.spawnTracePulse(t,e,i,r),!(Math.random()>.45)););this.tracePulses=this.tracePulses.filter(t=>(t.progress+=s/t.duration,t.progress<.1?t.alpha=t.progress/.1:t.progress>.9?t.alpha=(1-t.progress)/.1:t.alpha=1,t.progress<1&&t.alpha>.02))}traceLinePositions(t,e,i){if("frame"===i.linesLayout){const s=Math.min(i.guideInset,t/2-1,e/2-1),r=i.guideEdges,a=[],o=[];return r.has("left")&&a.push(s),r.has("right")&&a.push(t-s),r.has("top")&&o.push(s),r.has("bottom")&&o.push(e-s),{xs:a,ys:o}}return{xs:this.axis(t,i.size),ys:this.axis(e,i.size)}}spawnTracePulse(t,e,i,s){const{xs:r,ys:a}=this.traceLinePositions(t,e,i),o="horizontal"!==i.traceDirection&&r.length>0,n="vertical"!==i.traceDirection&&a.length>0;if(!o&&!n)return;let h;h=o&&n?Math.random()<.5?"v":"h":o?"v":"h";const l=s,c=(("v"===h?e:t)+2*l)/(88*Math.max(.25,i.animSpeed)),d={axis:h,linePos:"v"===h?r[Math.floor(Math.random()*r.length)]:a[Math.floor(Math.random()*a.length)],progress:0,length:l,duration:c,alpha:0};this.tracePulses.push(d)}drawTracePulseSegment(t,e,i,s,r){const[a,o,n]=this.parseColorRgb(this.traceDrawColor(r)),h=Math.min(1,this.traceDrawOpacity(r)*e.alpha),l="v"===e.axis?s:i,c=this.pulseHead(e,l);let d,u,g,m;if("v"===e.axis?(d=g=e.linePos,m=Math.min(s,c),u=Math.max(0,c-e.length)):(u=m=e.linePos,g=Math.min(i,c),d=Math.max(0,c-e.length)),Math.abs(g-d)<.5&&Math.abs(m-u)<.5)return;const p=t.createLinearGradient(d,u,g,m);p.addColorStop(0,`rgba(${a},${o},${n},0)`),p.addColorStop(.18,`rgba(${a},${o},${n},${.2*h})`),p.addColorStop(.5,`rgba(${a},${o},${n},${h})`),p.addColorStop(.82,`rgba(${a},${o},${n},${.2*h})`),p.addColorStop(1,`rgba(${a},${o},${n},0)`),t.save(),t.strokeStyle=p,t.lineCap="round",t.globalAlpha=e.alpha,t.shadowColor=`rgba(${a},${o},${n},${.9*h})`,t.shadowBlur=12+5*r.thickness,t.lineWidth=Math.max(1.1,r.thickness+.6),t.beginPath(),t.moveTo(d,u),t.lineTo(g,m),t.stroke(),t.shadowBlur=0,t.lineWidth=Math.max(.6,.35*r.thickness),t.globalAlpha=Math.min(1,1.1*e.alpha),t.stroke(),t.restore()}drawTraceHighlight(t,e,i,s,r){this.updateTracePulses(e,i,s,r),t.save(),t.globalCompositeOperation="lighter",this.tracePulses.forEach(r=>this.drawTracePulseSegment(t,r,e,i,s)),t.restore()}drawPattern(t,e,i,s,r,a,o){const{type:n,size:h,thickness:l}=s;if(t.save(),t.globalAlpha=a,t.strokeStyle=r,t.fillStyle=r,t.lineWidth=l,t.lineCap="round","lines"===n)"frame"===s.linesLayout?this.drawFrameGuides(t,e,i,s):"center"===s.linesLayout?this.drawCenterGuides(t,e,i,s):this.drawGridLines(t,e,i,s.size);else if("dots"===n){const r=this.axis(e,h),a=this.axis(i,h),n=Math.max(.75,l),c="magnet"===s.interaction&&this.pointer.strength>.001,d=this.pointer,u=s.interRadius;r.forEach((e,i)=>{a.forEach((r,a)=>{let l=e,g=r,m=n;if(c&&d.inside){const t=d.x-e,i=d.y-r,s=Math.hypot(t,i);if(s<u){const e=(1-s/u)*d.strength;m=n*(1+1.6*e),l+=t/(s||1)*e*h*.28,g+=i/(s||1)*e*h*.28}}if(s.animate){m*=.75+.25*Math.sin(2*o*s.animSpeed+.9*(i+a))}t.beginPath(),t.arc(l,g,m,0,2*Math.PI),t.fill()})})}else if("cross"===n){const r=this.axis(e,h),a=this.axis(i,h),o=this.crossArm(h,l,s.crossSize),n="rotate"===s.interaction&&this.pointer.strength>.001,c=this.pointer;r.forEach(e=>{a.forEach(i=>{if(t.save(),t.translate(e,i),n&&c.inside&&c.strength>.01){const s=c.x-e,r=c.y-i;t.rotate(Math.atan2(r,s))}t.beginPath(),"line"===s.crossStyle?(t.moveTo(-o,0),t.lineTo(o,0)):(t.moveTo(-o,0),t.lineTo(o,0),t.moveTo(0,-o),t.lineTo(0,o)),t.stroke(),t.restore()})})}else{t.save(),t.beginPath(),t.rect(0,0,e,i),t.clip(),t.translate(e/2,i/2),t.rotate(Math.PI/4);const s=Math.hypot(e,i);t.beginPath();for(let e=-s;e<=s;e+=h)t.moveTo(e,-s),t.lineTo(e,s),t.moveTo(-s,e),t.lineTo(s,e);t.stroke(),t.restore()}t.restore()}drawGridLines(t,e,i,s){const r=this.axis(e,s),a=this.axis(i,s);t.beginPath(),r.forEach(e=>{t.moveTo(e,0),t.lineTo(e,i)}),a.forEach(i=>{t.moveTo(0,i),t.lineTo(e,i)}),t.stroke()}drawFrameGuides(t,e,i,s){const r=Math.min(s.guideInset,e/2-1,i/2-1),a=s.guideEdges;t.beginPath(),a.has("top")&&(t.moveTo(0,r),t.lineTo(e,r)),a.has("bottom")&&(t.moveTo(0,i-r),t.lineTo(e,i-r)),a.has("left")&&(t.moveTo(r,0),t.lineTo(r,i)),a.has("right")&&(t.moveTo(e-r,0),t.lineTo(e-r,i)),t.stroke()}drawCenterGuides(t,e,i,s){const r=e*s.guideX,a=i*s.guideY,o=s.guideSpanX>0?s.guideSpanX:e,n=s.guideSpanY>0?s.guideSpanY:i;t.beginPath(),t.moveTo(r-o/2,a),t.lineTo(r+o/2,a),t.moveTo(r,a-n/2),t.lineTo(r,a+n/2),t.stroke()}buildEnergyMask(t,e,i,s,r,a){if(t.setTransform(s,0,0,s,0,0),t.clearRect(0,0,e,i),t.globalCompositeOperation="lighter","glow"===r.interaction&&this.pointer.strength>.001&&this.pointer.inside){const s=r.interRadius,a=t.createRadialGradient(this.pointer.x,this.pointer.y,0,this.pointer.x,this.pointer.y,s);a.addColorStop(0,`rgba(255,255,255,${.9*this.pointer.strength})`),a.addColorStop(1,"rgba(255,255,255,0)"),t.fillStyle=a,t.fillRect(0,0,e,i)}if(r.animate&&"trace"!==r.animationStyle){t.save(),t.translate(e/2,i/2),t.rotate(this.bandAngle);const s=Math.hypot(e,i),o=Math.max(60,.18*s),n=s+o,h=90*a*r.animSpeed%(2*n)-n,l=t.createLinearGradient(h-o,0,h+o,0);l.addColorStop(0,"rgba(255,255,255,0)"),l.addColorStop(.5,"rgba(255,255,255,0.55)"),l.addColorStop(1,"rgba(255,255,255,0)"),t.fillStyle=l,t.fillRect(-s,-s,2*s,2*s),t.restore()}t.globalCompositeOperation="source-over"}applyFade(t,e,i,s){const r=s.fade;if("none"===r)return;const a=s.fadeSize,o=a>1?a:Math.max(8,e*a),n=a>1?a:Math.max(8,i*a);t.save(),t.globalCompositeOperation="destination-in";const edge=s=>{let r;"top"===s?(r=t.createLinearGradient(0,0,0,n),r.addColorStop(0,"rgba(0,0,0,0)"),r.addColorStop(1,"rgba(0,0,0,1)")):"bottom"===s?(r=t.createLinearGradient(0,i-n,0,i),r.addColorStop(0,"rgba(0,0,0,1)"),r.addColorStop(1,"rgba(0,0,0,0)")):"left"===s?(r=t.createLinearGradient(0,0,o,0),r.addColorStop(0,"rgba(0,0,0,0)"),r.addColorStop(1,"rgba(0,0,0,1)")):(r=t.createLinearGradient(e-o,0,e,0),r.addColorStop(0,"rgba(0,0,0,1)"),r.addColorStop(1,"rgba(0,0,0,0)")),t.fillStyle=r,t.fillRect(0,0,e,i)};if("vignette"===r){const s=t.createRadialGradient(e/2,i/2,.2*Math.min(e,i),e/2,i/2,Math.hypot(e,i)/2);s.addColorStop(0,"rgba(0,0,0,1)"),s.addColorStop(1,"rgba(0,0,0,0)"),t.fillStyle=s,t.fillRect(0,0,e,i)}else{("top"===r?["top"]:"bottom"===r?["bottom"]:"left"===r?["left"]:"right"===r?["right"]:"vertical"===r?["top","bottom"]:"horizontal"===r?["left","right"]:["top","bottom","left","right"]).forEach(edge)}t.restore()}}customElements.get("db-grid-background")||customElements.define("db-grid-background",DbGridBackground);export{DbGridBackground};