@designbasekorea/ui-wc 0.5.3 → 0.5.6

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

@@ -1 +1,486 @@
-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};
+import { parseAnimationBackgroundConfig, mountAnimationLayers, applyContainerStyles, syncLuminaOverlays, ANIMATION_BACKGROUND_CLASS as CLASS$1 } from './animation-background/layers.js';
+import { getControlsForType, resetControlsToDefaults, getControlSliderBounds, controlSliderToAttr, writeControlAttribute, readControlValue, controlAttrToSlider } from './animation-background/controls.js';
+import { isGraphitePresetId, getGraphitePreset } from './animation-background/graphite-presets.js';
+import { createDbIcon } from './db-icons.js';
+
+const CLASS = CLASS$1;
+const LIVE_UPDATE_TYPES = [
+    'particles',
+    'stars',
+    'snow',
+    'flowers',
+    'confetti',
+    'mesh-flow',
+    'fluid',
+    'radiant',
+    'ethereal',
+    'graphite',
+];
+const LUMINA_SHADER_TYPES = ['mesh-flow', 'fluid', 'radiant', 'ethereal'];
+function isRangeSlider(el) {
+    return el.tagName === 'DB-RANGE-SLIDER';
+}
+class DbAnimationBackground extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.panelOpen = false;
+        this.controlInputs = new Map();
+        this.syncingControls = false;
+    }
+    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();
+        if (this.clickHandler) {
+            this.removeEventListener('click', this.clickHandler);
+            this.clickHandler = undefined;
+        }
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (!this.isConnected || oldValue === newValue)
+            return;
+        if (name === 'show-controls') {
+            this.syncControlsVisibility();
+            return;
+        }
+        if (this.syncingControls)
+            return;
+        if (name === 'type' && this.getBool('show-controls', false)) {
+            this.rebuildControlInputs();
+        }
+        this.applyConfig();
+        if (this.getBool('show-controls', false)) {
+            this.syncControlInputs();
+        }
+    }
+    getBool(name, fallback = false) {
+        if (!this.hasAttribute(name))
+            return fallback;
+        return this.getAttribute(name) !== 'false';
+    }
+    getSizeStyle(value) {
+        if (!value)
+            return undefined;
+        const num = Number(value);
+        return Number.isFinite(num) ? `${num}px` : value;
+    }
+    getConfig() {
+        return parseAnimationBackgroundConfig(this);
+    }
+    teardownLayers() {
+        this.layerHandle?.destroy?.();
+        this.layerHandle = undefined;
+        this.mountedType = undefined;
+        if (this.layersEl) {
+            this.layersEl.replaceChildren();
+        }
+    }
+    remountLayers(config) {
+        if (!this.layersEl)
+            return;
+        this.teardownLayers();
+        this.layerHandle = mountAnimationLayers(this.layersEl, config);
+        this.mountedType = config.type;
+    }
+    canLiveUpdate(config) {
+        return (this.mountedType === config.type &&
+            LIVE_UPDATE_TYPES.includes(config.type) &&
+            typeof this.layerHandle?.update === 'function');
+    }
+    applyConfig() {
+        const config = this.getConfig();
+        this.className = [
+            CLASS,
+            `${CLASS}--${config.type}`,
+            config.clickable && !config.disabled && `${CLASS}--clickable`,
+            config.disabled && `${CLASS}--disabled`,
+            this.getBool('show-controls', false) && `${CLASS}--show-controls`,
+        ]
+            .filter(Boolean)
+            .join(' ');
+        applyContainerStyles(this, config);
+        const width = this.getSizeStyle(this.getAttribute('width'));
+        const height = this.getSizeStyle(this.getAttribute('height'));
+        const borderRadius = this.getSizeStyle(this.getAttribute('border-radius'));
+        if (width)
+            this.style.width = width;
+        if (height)
+            this.style.height = height;
+        this.style.borderRadius = borderRadius || '0';
+        this.style.border = 'none';
+        this.style.opacity = '';
+        if (this.layersEl) {
+            this.layersEl.style.opacity = String(config.opacity);
+        }
+        const blendMode = this.getAttribute('blend-mode');
+        if (blendMode)
+            this.style.mixBlendMode = blendMode;
+        if (config.disabled) {
+            this.teardownLayers();
+            this.syncClickable(config);
+            return;
+        }
+        if (this.canLiveUpdate(config)) {
+            this.layerHandle?.update?.(config);
+            if (this.layersEl && LUMINA_SHADER_TYPES.includes(config.type)) {
+                syncLuminaOverlays(this.layersEl, config.noise, config.showVignette);
+            }
+        }
+        else {
+            this.remountLayers(config);
+        }
+        this.syncClickable(config);
+    }
+    syncClickable(config) {
+        if (this.clickHandler) {
+            this.removeEventListener('click', this.clickHandler);
+            this.clickHandler = undefined;
+        }
+        if (config.clickable && !config.disabled) {
+            this.clickHandler = () => {
+                this.dispatchEvent(new CustomEvent('db-click', { bubbles: true, composed: true }));
+            };
+            this.addEventListener('click', this.clickHandler);
+        }
+    }
+    render() {
+        if (!this.layersEl) {
+            this.layersEl = document.createElement('div');
+            this.layersEl.className = `${CLASS}__layers`;
+            Object.assign(this.layersEl.style, {
+                position: 'absolute',
+                inset: '0',
+                width: '100%',
+                height: '100%',
+                zIndex: '0',
+            });
+            this.contentEl = document.createElement('div');
+            this.contentEl.className = `${CLASS}__content`;
+            Object.assign(this.contentEl.style, {
+                position: 'relative',
+                zIndex: '10',
+                width: '100%',
+                height: '100%',
+            });
+            const slot = document.createElement('slot');
+            this.contentEl.appendChild(slot);
+            this.append(this.layersEl, this.contentEl);
+        }
+        this.ensureControlsShell();
+        this.applyConfig();
+        this.syncControlsVisibility();
+    }
+    ensureControlsShell() {
+        if (this.controlsRootEl)
+            return;
+        const root = document.createElement('div');
+        root.className = `${CLASS}__controls-root`;
+        root.hidden = true;
+        const gear = this.createIconButton('settings', '컨트롤 열기', () => {
+            this.panelOpen = !this.panelOpen;
+            this.syncPanelState();
+        });
+        gear.setAttribute('variant', 'secondary');
+        gear.className = `${CLASS}__controls-gear`;
+        const panel = document.createElement('div');
+        panel.className = `${CLASS}__controls-panel`;
+        panel.setAttribute('role', 'dialog');
+        panel.hidden = true;
+        panel.addEventListener('click', (event) => event.stopPropagation());
+        const head = document.createElement('div');
+        head.className = `${CLASS}__controls-head`;
+        const title = document.createElement('span');
+        title.className = `${CLASS}__controls-title`;
+        title.append(createDbIcon('settings', 14), document.createTextNode(' Controls'));
+        const resetBtn = this.createIconButton('refresh', '기본값으로 초기화', () => {
+            const config = this.getConfig();
+            const controls = getControlsForType(config.type);
+            this.syncingControls = true;
+            resetControlsToDefaults(this, controls);
+            if (config.type === 'graphite') {
+                const preset = getGraphitePreset('graphite');
+                this.setAttribute('zoom', String(preset.scale));
+                this.setAttribute('colors', JSON.stringify(preset.colors));
+            }
+            this.syncingControls = false;
+            this.applyConfig();
+            this.syncControlInputs();
+        });
+        resetBtn.className = `${CLASS}__controls-icon-btn`;
+        head.append(title, resetBtn);
+        panel.append(head);
+        root.append(gear, panel);
+        this.appendChild(root);
+        this.controlsRootEl = root;
+        this.panelEl = panel;
+    }
+    syncControlsVisibility() {
+        if (!this.controlsRootEl)
+            return;
+        const visible = this.getBool('show-controls', false);
+        this.controlsRootEl.hidden = !visible;
+        if (!visible) {
+            this.panelOpen = false;
+            this.syncPanelState();
+        }
+        else {
+            this.rebuildControlInputs();
+        }
+    }
+    syncPanelState() {
+        if (!this.controlsRootEl || !this.panelEl)
+            return;
+        const gear = this.controlsRootEl.querySelector(`.${CLASS}__controls-gear`);
+        if (gear) {
+            gear.dataset.open = this.panelOpen ? 'true' : 'false';
+            gear.setAttribute('aria-expanded', this.panelOpen ? 'true' : 'false');
+        }
+        this.panelEl.hidden = !this.panelOpen;
+    }
+    createIconButton(icon, label, onClick) {
+        const btn = document.createElement('db-button');
+        btn.setAttribute('variant', 'tertiary');
+        btn.setAttribute('size', 's');
+        btn.setAttribute('icon-only', '');
+        btn.setAttribute('start-icon', icon);
+        btn.setAttribute('aria-label', label);
+        btn.addEventListener('click', (event) => {
+            event.stopPropagation();
+            onClick();
+        });
+        return btn;
+    }
+    rebuildControlInputs() {
+        if (!this.panelEl)
+            return;
+        this.panelEl.querySelectorAll(`.${CLASS}__controls-field`).forEach((node) => node.remove());
+        this.controlInputs.clear();
+        const config = this.getConfig();
+        const controls = getControlsForType(config.type);
+        const title = this.panelEl.querySelector(`.${CLASS}__controls-title`);
+        if (title) {
+            title.lastChild?.remove();
+            title.append(document.createTextNode(` ${config.type}`));
+        }
+        controls.forEach((control) => {
+            const field = this.createControlField(control);
+            this.panelEl?.appendChild(field);
+        });
+        this.syncControlInputs();
+    }
+    createControlField(control) {
+        const field = document.createElement('div');
+        field.className = `${CLASS}__controls-field`;
+        field.dataset.attr = control.attr;
+        if (control.kind === 'range') {
+            const bounds = getControlSliderBounds(control);
+            const slider = document.createElement('db-range-slider');
+            slider.className = `${CLASS}__controls-range`;
+            slider.setAttribute('size', 's');
+            slider.setAttribute('full-width', '');
+            slider.setAttribute('show-label', '');
+            slider.setAttribute('label', control.label);
+            slider.setAttribute('show-value', '');
+            slider.setAttribute('value-position', 'top');
+            slider.setAttribute('show-thumb-tooltip', '');
+            slider.setAttribute('min', String(bounds.min));
+            slider.setAttribute('max', String(bounds.max));
+            slider.setAttribute('step', String(bounds.step));
+            if (bounds.fixed != null)
+                slider.setAttribute('value-fixed', String(bounds.fixed));
+            slider.addEventListener('db-change', (event) => {
+                const detail = event.detail;
+                if (detail.value == null)
+                    return;
+                this.commitControlValue(control, controlSliderToAttr(control, detail.value));
+            });
+            field.appendChild(slider);
+            this.controlInputs.set(control.attr, slider);
+            return field;
+        }
+        if (control.kind === 'select') {
+            const labelRow = document.createElement('div');
+            labelRow.className = `${CLASS}__controls-label`;
+            labelRow.textContent = control.label;
+            const options = control.options ?? [];
+            if (options.length > 4) {
+                const select = document.createElement('db-select');
+                select.className = `${CLASS}__controls-select`;
+                select.setAttribute('size', 's');
+                select.setAttribute('full-width', '');
+                select.setAttribute('options', JSON.stringify(options.map((opt) => ({ value: opt, label: opt }))));
+                select.addEventListener('db-change', (event) => {
+                    const detail = event.detail;
+                    if (detail.value == null)
+                        return;
+                    this.commitControlValue(control, detail.value);
+                });
+                field.append(labelRow, select);
+                this.controlInputs.set(control.attr, select);
+            }
+            else {
+                const seg = document.createElement('db-segment-control');
+                seg.className = `${CLASS}__controls-seg`;
+                seg.setAttribute('size', 's');
+                seg.setAttribute('full-width', '');
+                seg.setAttribute('options', JSON.stringify(options.map((opt) => ({ value: opt, label: opt }))));
+                seg.addEventListener('db-change', (event) => {
+                    const detail = event.detail;
+                    if (detail.value == null)
+                        return;
+                    this.commitControlValue(control, detail.value);
+                });
+                field.append(labelRow, seg);
+                this.controlInputs.set(control.attr, seg);
+            }
+            return field;
+        }
+        if (control.kind === 'toggle') {
+            const row = document.createElement('div');
+            row.className = `${CLASS}__controls-toggle`;
+            const name = document.createElement('span');
+            name.textContent = control.label;
+            const toggle = document.createElement('db-toggle');
+            toggle.setAttribute('size', 's');
+            toggle.addEventListener('db-change', (event) => {
+                const detail = event.detail;
+                this.commitControlValue(control, Boolean(detail.checked));
+            });
+            row.append(name, toggle);
+            field.appendChild(row);
+            this.controlInputs.set(control.attr, toggle);
+            return field;
+        }
+        const labelRow = document.createElement('div');
+        labelRow.className = `${CLASS}__controls-label`;
+        labelRow.textContent = control.label;
+        const colorsWrap = document.createElement('div');
+        colorsWrap.className = `${CLASS}__controls-colors`;
+        field.append(labelRow, colorsWrap);
+        this.controlInputs.set(control.attr, colorsWrap);
+        return field;
+    }
+    commitControlValue(control, value) {
+        this.syncingControls = true;
+        writeControlAttribute(this, control, value);
+        if (control.attr === 'preset' &&
+            this.getConfig().type === 'graphite' &&
+            typeof value === 'string' &&
+            isGraphitePresetId(value)) {
+            const preset = getGraphitePreset(value);
+            this.setAttribute('zoom', String(preset.scale));
+            this.setAttribute('colors', JSON.stringify(preset.colors));
+        }
+        this.syncingControls = false;
+        this.applyConfig();
+    }
+    syncControlInputs() {
+        const controls = getControlsForType(this.getConfig().type);
+        controls.forEach((control) => {
+            const value = readControlValue(this, control);
+            const input = this.controlInputs.get(control.attr);
+            if (!input)
+                return;
+            if (control.kind === 'range' && isRangeSlider(input)) {
+                const num = Number(value);
+                input.setAttribute('value', String(controlAttrToSlider(control, num)));
+            }
+            else if (control.kind === 'select') {
+                input.setAttribute('value', String(value));
+            }
+            else if (control.kind === 'toggle') {
+                const on = Boolean(value);
+                if (on)
+                    input.setAttribute('checked', '');
+                else
+                    input.removeAttribute('checked');
+            }
+            else if (control.kind === 'colors') {
+                this.renderColorInputs(input, control, value);
+            }
+        });
+    }
+    renderColorInputs(container, control, list) {
+        // 로컬 사본으로 관리: 색상 값 변경은 in-place 커밋(드롭다운 유지),
+        // 추가/삭제 등 구조 변경 시에만 다시 렌더링한다.
+        const colors = [...list];
+        container.replaceChildren();
+        const commitStructuralChange = (next) => {
+            this.commitControlValue(control, next);
+            this.renderColorInputs(container, control, next);
+        };
+        colors.forEach((hex, index) => {
+            const row = document.createElement('div');
+            row.className = `${CLASS}__controls-color`;
+            const picker = document.createElement('db-color-picker');
+            picker.className = `${CLASS}__controls-color-picker`;
+            picker.setAttribute('size', 's');
+            picker.setAttribute('full-width', '');
+            picker.setAttribute('show-alpha', 'false');
+            picker.setAttribute('show-eyedropper', 'false');
+            picker.setAttribute('value', hex);
+            picker.addEventListener('db-change', (event) => {
+                const detail = event.detail;
+                const value = detail?.value;
+                if (typeof value !== 'string' || !value)
+                    return;
+                colors[index] = value;
+                this.commitControlValue(control, [...colors]);
+            });
+            row.appendChild(picker);
+            if (colors.length > 1) {
+                const remove = this.createIconButton('trash', '색상 제거', () => {
+                    commitStructuralChange(colors.filter((_, idx) => idx !== index));
+                });
+                remove.className = `${CLASS}__controls-color-remove`;
+                row.appendChild(remove);
+            }
+            container.appendChild(row);
+        });
+        if (colors.length < 8) {
+            const add = this.createIconButton('plus', '색상 추가', () => {
+                commitStructuralChange([...colors, colors[colors.length - 1] ?? '#ffffff']);
+            });
+            add.className = `${CLASS}__controls-color-add`;
+            container.appendChild(add);
+        }
+    }
+}
+if (!customElements.get('db-animation-background')) {
+    customElements.define('db-animation-background', DbAnimationBackground);
+}
+
+export { DbAnimationBackground };