@designbasekorea/ui-wc 0.5.3 → 0.5.6

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

@@ -1 +1,909 @@
-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};
+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 };