@tsogtoodev/shingen-metal 1.0.0 → 1.0.1

package/README.md

@@ -1,24 +1,24 @@
-# shingen-metal
+# @tsogtoodev/shingen-metal
 
-Animated WebGL "liquid metal" effect for Vue 3 — a port of [metal-fx](https://github.com/Jakubantalik/metal-fx) (React) by Jakub Antalik. Wrap a button, chip, or icon and it gets a real-time metal ring with optional proximity reflection on neighbouring elements.
+Animated WebGL "liquid metal" effect for Vue 3.
 
 ## Install
 
 ```bash
-npm install shingen-metal
+npm install @tsogtoodev/shingen-metal
 ```
 
 ## Quick start
 
 ```vue
 <script setup>
-import { MetalFx } from 'shingen-metal';
+import { ShingenMetal } from '@tsogtoodev/shingen-metal';
 </script>
 
 <template>
-  <MetalFx variant="button">
+  <ShingenMetal variant="button">
     <button class="upgrade-pill">Upgrade to Pro</button>
-  </MetalFx>
+  </ShingenMetal>
 </template>
 ```
 
@@ -27,13 +27,13 @@ The component wraps a single slotted host element, measures it, and paints an an
 ## Variants
 
 ```vue
-<MetalFx variant="button">  <!-- Pill silhouette, 1 px ring, scale 1.6 -->
+<ShingenMetal variant="button">  <!-- Pill silhouette, 1 px ring, scale 1.6 -->
   <button>Upgrade to Pro</button>
-</MetalFx>
+</ShingenMetal>
 
-<MetalFx variant="circle">  <!-- Compact circle, 2 px ring, scale 1.3 -->
+<ShingenMetal variant="circle">  <!-- Compact circle, 2 px ring, scale 1.3 -->
   <button>↑</button>
-</MetalFx>
+</ShingenMetal>
 ```
 
 ## Presets
@@ -41,17 +41,17 @@ The component wraps a single slotted host element, measures it, and paints an an
 Three bundled palettes, each with a tuned dark and light mode block:
 
 ```vue
-<MetalFx preset="chromatic" />  <!-- Iridescent rainbow (default) -->
-<MetalFx preset="silver" />     <!-- Cool steel -->
-<MetalFx preset="gold" />       <!-- Warm gold -->
+<ShingenMetal preset="chromatic" />  <!-- Iridescent rainbow (default) -->
+<ShingenMetal preset="silver" />     <!-- Cool steel -->
+<ShingenMetal preset="gold" />       <!-- Warm gold -->
 ```
 
 ## Theme
 
 ```vue
-<MetalFx theme="auto" />    <!-- Follows prefers-color-scheme (default) -->
-<MetalFx theme="dark" />    <!-- Pin to dark backgrounds -->
-<MetalFx theme="light" />   <!-- Pin to light backgrounds -->
+<ShingenMetal theme="auto" />    <!-- Follows prefers-color-scheme (default) -->
+<ShingenMetal theme="dark" />    <!-- Pin to dark backgrounds -->
+<ShingenMetal theme="light" />   <!-- Pin to light backgrounds -->
 ```
 
 `auto` reads the OS / browser theme on mount and subscribes to live changes via `matchMedia('(prefers-color-scheme: dark)')`, so the metal frame switches over instantly when the user toggles their system theme. SSR-safe — the initial render falls back to `dark` and rehydrates to the resolved theme on the client.
@@ -59,15 +59,15 @@ Three bundled palettes, each with a tuned dark and light mode block:
 If your app has its own theme toggle that doesn't follow the OS, drive `theme` from your app state instead:
 
 ```vue
-<MetalFx :theme="appTheme">...</MetalFx>
+<ShingenMetal :theme="appTheme">...</ShingenMetal>
 ```
 
 ## Strength
 
 ```vue
-<MetalFx :strength="0.7">  <!-- 70% effect intensity -->
+<ShingenMetal :strength="0.7">  <!-- 70% effect intensity -->
   <button>Upgrade to Pro</button>
-</MetalFx>
+</ShingenMetal>
 ```
 
 `strength` runs from `0` (invisible) to `1` (full, default). It scales the canvas and glow opacity without changing the underlying shader animation.
@@ -75,9 +75,9 @@ If your app has its own theme toggle that doesn't follow the OS, drive `theme` f
 ## Paused
 
 ```vue
-<MetalFx paused>
+<ShingenMetal paused>
   <button>Upgrade to Pro</button>
-</MetalFx>
+</ShingenMetal>
 ```
 
 Freezes the shader on its current frame. The metal silhouette stays visible.
@@ -89,16 +89,16 @@ Pass template refs to neighbouring elements and they receive a soft, mirrored re
 ```vue
 <script setup>
 import { ref } from 'vue';
-import { MetalFx } from 'shingen-metal';
+import { ShingenMetal } from '@tsogtoodev/shingen-metal';
 
 const chipRef = ref(null);
 </script>
 
 <template>
   <button ref="chipRef">Tools</button>
-  <MetalFx variant="circle" :reflection-targets="[chipRef]">
+  <ShingenMetal variant="circle" :reflection-targets="[chipRef]">
     <button aria-label="Send">↑</button>
-  </MetalFx>
+  </ShingenMetal>
 </template>
 ```
 
@@ -106,11 +106,11 @@ Reflections are skipped automatically when the resolved theme is `light` — no
 
 ## Performance
 
-- One shared WebGL context is reused across every mounted `<MetalFx>` on the page. The shader is compiled once.
+- One shared WebGL context is reused across every mounted `<ShingenMetal>` on the page. The shader is compiled once.
 - A single `requestAnimationFrame` loop drives every instance. Per-frame work for one mount: a `gl.drawArrays` plus N×`drawImage` copies (one per visible instance).
 - `IntersectionObserver` pauses per-instance copies when the host scrolls offscreen. When every instance is offscreen the GL render is skipped too.
 - `ResizeObserver` callbacks are debounced through RAF.
-- The GL context, program, and buffer are released when the last `<MetalFx>` unmounts.
+- The GL context, program, and buffer are released when the last `<ShingenMetal>` unmounts.
 
 ## Server-side rendering
 
@@ -118,38 +118,38 @@ The component renders a transparent placeholder during SSR and only mounts the W
 
 ## Sizing
 
-`MetalFx` does not force any dimensions onto the wrapped child — the wrapper sizes itself to whatever the child renders. Style your child the way you normally would (intrinsic content, CSS class, or inline style):
+`ShingenMetal` does not force any dimensions onto the wrapped child — the wrapper sizes itself to whatever the child renders. Style your child the way you normally would (intrinsic content, CSS class, or inline style):
 
 ```vue
 <!-- Pattern 1 (recommended): size the child. -->
-<MetalFx variant="circle">
+<ShingenMetal variant="circle">
   <button style="width: 36px; height: 36px" aria-label="Send">↑</button>
-</MetalFx>
+</ShingenMetal>
 
-<MetalFx>
+<ShingenMetal>
   <button class="rounded-full px-6 h-10">Upgrade to Pro</button>
-</MetalFx>
+</ShingenMetal>
 ```
 
 If you want a metal frame larger than the child (e.g. padding around an icon), size the wrapper instead and explicitly stretch the child to fill:
 
 ```vue
 <!-- Pattern 2: size the wrapper, child fills. -->
-<MetalFx style="width: 36px; height: 36px" variant="circle">
+<ShingenMetal style="width: 36px; height: 36px" variant="circle">
   <button style="width: 100%; height: 100%" aria-label="Send">↑</button>
-</MetalFx>
+</ShingenMetal>
 ```
 
 Both patterns work; pick whichever fits your layout. The wrapper is `display: inline-flex` so it lays out inline like a button.
 
 ## Custom border radius
 
-By default `MetalFx` reads the computed `border-radius` of the wrapped child each resize. Pass an explicit override when needed:
+By default `ShingenMetal` reads the computed `border-radius` of the wrapped child each resize. Pass an explicit override when needed:
 
 ```vue
-<MetalFx :border-radius="20">
+<ShingenMetal :border-radius="20">
   <button>Upgrade to Pro</button>
-</MetalFx>
+</ShingenMetal>
 ```
 
 ## Demo
@@ -161,4 +161,4 @@ npm run dev
 
 ## License
 
-MIT — port of [metal-fx](https://github.com/Jakubantalik/metal-fx) © [Jakub Antalik](https://github.com/Jakubantalik). See [LICENSE](./LICENSE).
+MIT - See [LICENSE](./LICENSE).

package/dist/index.cjs.js

@@ -1,7 +1,7 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const w=require("vue");function qe(e){let t=e.replace("#","");return t.length===3&&(t=t[0]+t[0]+t[1]+t[1]+t[2]+t[2]),[parseInt(t.slice(0,2),16)/255,parseInt(t.slice(2,4),16)/255,parseInt(t.slice(4,6),16)/255]}function ht(e,t,a){e/=255,t/=255,a/=255;const n=Math.max(e,t,a),o=Math.min(e,t,a),r=n-o;let s=0;const c=n===0?0:r/n;return r!==0&&(n===e?s=((t-a)/r+6)%6:n===t?s=(a-e)/r+2:s=(e-t)/r+4,s/=6),[s,c,n]}function pt(e,t,a){const n=Math.floor(e*6),o=e*6-n,r=a*(1-t),s=a*(1-o*t),c=a*(1-(1-o)*t);let l=0,d=0,f=0;switch(n%6){case 0:l=a,d=c,f=r;break;case 1:l=s,d=a,f=r;break;case 2:l=r,d=a,f=c;break;case 3:l=r,d=s,f=a;break;case 4:l=c,d=r,f=a;break;case 5:l=a,d=r,f=s;break}return[Math.round(l*255),Math.round(d*255),Math.round(f*255)]}const mt=66,gt=66,xt=1500,vt=1,Te=16,bt=16,wt=8,yt=96,_t=2,Mt={name:"chromatic",modes:{dark:{colors:["#000000","#aae8ff","#c5fe9e","#f7888d","#0d0d0d","#fffdc3","#007cff"],alphas:[1,1,1,1,1,1,1],direction:80,speed:1.2,intensity:2,scale:1.6,softness:.18,distortion:.3,complexity:.68,shape:1,blur:1,vignette:.26,vigOpacity:.6,shaderOpacity:1},light:{colors:["#ffffff","#ffffff","#ffffff","#ffb3b3","#adadad","#f5ff70","#007cff"],alphas:[1,1,1,1,1,1,1],direction:80,speed:1.2,intensity:2,scale:2.5,softness:.18,distortion:.3,complexity:.68,shape:1,blur:1,vignette:.24,vigOpacity:.16,shaderOpacity:1}}},St={name:"silver",modes:{dark:{colors:["#000000","#dedede","#747270","#e5e5e5","#0d0d0d","#ffffff","#e6e6e6"],alphas:[1,1,1,1,1,1,1],direction:80,speed:1.2,intensity:2,scale:2.5,softness:.18,distortion:.3,complexity:.68,shape:1,blur:1,vignette:.26,vigOpacity:.6,shaderOpacity:.88},light:{colors:["#f6f6f6","#ffffff","#ffffff","#f7f7f7","#c9c9c9","#d0d0d0","#d1d1d1"],alphas:[1,1,1,1,1,1,1],direction:80,speed:1.2,intensity:2,scale:2.5,softness:.18,distortion:.3,complexity:.68,shape:1,blur:1,vignette:.2,vigOpacity:.26,shaderOpacity:1}}},Rt={name:"gold",modes:{dark:{colors:["#000000","#ffffff","#ffffff","#f7d488","#0d0d0d","#fffdc3","#ffffff"],alphas:[1,1,1,1,1,1,1],direction:80,speed:1,intensity:2,scale:2.5,softness:.18,distortion:.3,complexity:.68,shape:1,blur:1,vignette:.26,vigOpacity:.6,shaderOpacity:.92},light:{colors:["#fff8e1","#fffbe0","#ffffff","#fff6d6","#d2c7a7","#dcd2bc","#f9f7e5"],alphas:[1,1,1,1,1,1,1],direction:80,speed:1.2,intensity:2,scale:2.5,softness:.18,distortion:.3,complexity:.68,shape:1,blur:1,vignette:.22,vigOpacity:.24,shaderOpacity:1}}},ve={chromatic:Mt,silver:St,gold:Rt},Tt=`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("vue");function Vt(t){let e=t.replace("#","");return e.length===3&&(e=e[0]+e[0]+e[1]+e[1]+e[2]+e[2]),[parseInt(e.slice(0,2),16)/255,parseInt(e.slice(2,4),16)/255,parseInt(e.slice(4,6),16)/255]}function pe(t,e,n){t/=255,e/=255,n/=255;const o=Math.max(t,e,n),a=Math.min(t,e,n),r=o-a;let s=0;const c=o===0?0:r/o;return r!==0&&(o===t?s=((e-n)/r+6)%6:o===e?s=(n-t)/r+2:s=(t-e)/r+4,s/=6),[s,c,o]}function he(t,e,n){const o=Math.floor(t*6),a=t*6-o,r=n*(1-e),s=n*(1-a*e),c=n*(1-(1-a)*e);let l=0,f=0,d=0;switch(o%6){case 0:l=n,f=c,d=r;break;case 1:l=s,f=n,d=r;break;case 2:l=r,f=n,d=c;break;case 3:l=r,f=s,d=n;break;case 4:l=c,f=r,d=n;break;case 5:l=n,f=r,d=s;break}return[Math.round(l*255),Math.round(f*255),Math.round(d*255)]}const me=66,ge=66,xe=1500,ve=1,At=16,_e=16,be=8,we=96,ye=2,Me={name:"chromatic",modes:{dark:{colors:["#000000","#aae8ff","#c5fe9e","#f7888d","#0d0d0d","#fffdc3","#007cff"],alphas:[1,1,1,1,1,1,1],direction:80,speed:1.2,intensity:2,scale:1.6,softness:.18,distortion:.3,complexity:.68,shape:1,blur:1,vignette:.26,vigOpacity:.6,shaderOpacity:1},light:{colors:["#ffffff","#ffffff","#ffffff","#ffb3b3","#adadad","#f5ff70","#007cff"],alphas:[1,1,1,1,1,1,1],direction:80,speed:1.2,intensity:2,scale:2.5,softness:.18,distortion:.3,complexity:.68,shape:1,blur:1,vignette:.24,vigOpacity:.16,shaderOpacity:1}}},Re={name:"silver",modes:{dark:{colors:["#000000","#dedede","#747270","#e5e5e5","#0d0d0d","#ffffff","#e6e6e6"],alphas:[1,1,1,1,1,1,1],direction:80,speed:1.2,intensity:2,scale:2.5,softness:.18,distortion:.3,complexity:.68,shape:1,blur:1,vignette:.26,vigOpacity:.6,shaderOpacity:.88},light:{colors:["#f6f6f6","#ffffff","#ffffff","#f7f7f7","#c9c9c9","#d0d0d0","#d1d1d1"],alphas:[1,1,1,1,1,1,1],direction:80,speed:1.2,intensity:2,scale:2.5,softness:.18,distortion:.3,complexity:.68,shape:1,blur:1,vignette:.2,vigOpacity:.26,shaderOpacity:1}}},Se={name:"gold",modes:{dark:{colors:["#000000","#ffffff","#ffffff","#f7d488","#0d0d0d","#fffdc3","#ffffff"],alphas:[1,1,1,1,1,1,1],direction:80,speed:1,intensity:2,scale:2.5,softness:.18,distortion:.3,complexity:.68,shape:1,blur:1,vignette:.26,vigOpacity:.6,shaderOpacity:.92},light:{colors:["#fff8e1","#fffbe0","#ffffff","#fff6d6","#d2c7a7","#dcd2bc","#f9f7e5"],alphas:[1,1,1,1,1,1,1],direction:80,speed:1.2,intensity:2,scale:2.5,softness:.18,distortion:.3,complexity:.68,shape:1,blur:1,vignette:.22,vigOpacity:.24,shaderOpacity:1}}},vt={chromatic:Me,silver:Re,gold:Se},Ae=`
   attribute vec2 a_position;
   void main() { gl_Position = vec4(a_position, 0.0, 1.0); }
-`,At=`
+`,Ce=`
   precision highp float;
 
   uniform vec2 u_resolution;
@@ -53,8 +53,6 @@
 
   float nfbm(vec2 p) { return fbm(p, 3.0 + u_complexity * 4.0); }
 
-  /* 5-stop palette used by effect 1 (Plasma) — direct port of \`palette\` from
-   * the canonical engine. Stops at t = 0, 0.25, 0.5, 0.75, 1.0. */
   vec3 palette(float t) {
     t = clamp(t, 0.0, 1.0);
     t = t * t * (3.0 - 2.0 * t);
@@ -69,10 +67,6 @@
             u_color4 * w4 + u_color5 * w5) / total;
   }
 
-  /* Per-pixel alpha that re-introduces transparency when the user dials any
-   * palette stop's alpha below 1. Same \`paletteAlpha\` from the canonical
-   * engine. With every preset shipping all-1 alphas, this returns ~1 for every
-   * pixel — but mirroring it keeps custom-preset behaviour identical. */
   float paletteAlpha(float t) {
     t = clamp(t, 0.0, 1.0);
     t = t * t * (3.0 - 2.0 * t);
@@ -100,8 +94,6 @@
     ) * str;
   }
 
-  /* Plasma: four sine bands warped by an FBM field, mapped through the
-   * 5-stop palette. Identical to effect 1 in the canonical engine. */
   vec3 computeEffect(vec2 uv, float aspect, float t, float dist, float cpx) {
     vec2 p = (uv - 0.5) * u_scale;
     p.x *= aspect;
@@ -123,15 +115,10 @@
   void main() {
     vec2 uv = gl_FragCoord.xy / u_resolution;
     float aspect = u_resolution.x / u_resolution.y;
-    float t = u_time;          // JS already multiplied u_time by preset.speed.
+    float t = u_time;
     float dist = u_distortion;
     float cpx = u_complexity;
 
-    /* 5-tap cross blur (center + cardinal offsets). The chromatic/silver/gold
-     * presets all ship with blur=1 so this path is always active. 5 taps
-     * instead of the canonical engine's 9 saves ~44% fragment work; the
-     * perceptual difference is nil because the output is already soft from
-     * the plasma's low spatial frequency and CSS blur on reflections. */
     vec3 col;
     if (u_blur < 0.01) {
       col = computeEffect(uv, aspect, t, dist, cpx);
@@ -144,13 +131,8 @@
       col += computeEffect(uv + vec2(0.0, -r),  aspect, t, dist, cpx) * 0.15;
     }
 
-    /* Gamma punch — adds the contrast pop that defines the chromatic
-     * highlights. From the canonical engine: \`col = pow(col, vec3(1.3))\`. */
     col = pow(col, vec3(1.3));
 
-    /* Vignette — soft edge darkening so corners read as recessed. The 40-px
-     * scale at the bottom of the formula is hard-coded in the canonical
-     * engine; we keep it for visual parity. */
     float edgeDist = min(min(uv.x, 1.0 - uv.x), min(uv.y, 1.0 - uv.y));
     float vigPx = 40.0 / min(u_resolution.x, u_resolution.y);
     float vigRange = vigPx * (1.0 + u_vignette * 3.0);
@@ -158,9 +140,6 @@
     vig = smoothstep(0.0, 1.0, vig);
     col *= mix(1.0, vig, u_vignette * u_vigOpacity);
 
-    /* Per-pixel alpha. With all-1 alphas the formula collapses to ~1 but the
-     * computation matches the canonical engine so custom presets behave the
-     * same. */
     float colorAlpha = (u_alpha1 + u_alpha2 + u_alpha3 + u_alpha4 + u_alpha5) / 5.0;
     if (colorAlpha < 0.999) {
       vec3 c1d = col - u_color1, c2d = col - u_color2, c3d = col - u_color3,
@@ -176,16 +155,13 @@
     }
     float alpha = colorAlpha;
 
-    /* Touch the unused-at-effect-1 uniforms so GL drivers that complain about
-     * declared-but-unread uniforms (some Mali / Adreno builds do) keep them
-     * live. The contribution is provably zero. */
     alpha += 0.0 * (u_softness + u_shape +
                     u_alpha6 + u_alpha7 +
                     u_color6.x + u_color7.x);
 
     gl_FragColor = vec4(col, alpha * u_shaderOpacity);
   }
-`;function Ae(e,t,a){const n=e.createShader(t);if(!n)throw new Error("metal-fx: gl.createShader returned null");if(e.shaderSource(n,a),e.compileShader(n),!e.getShaderParameter(n,e.COMPILE_STATUS)){const o=e.getShaderInfoLog(n);throw e.deleteShader(n),new Error(`metal-fx: shader compile failed: ${o??"(no info log)"}`)}return n}function Ct(e,t,a){const n=e.createProgram();if(!n)throw new Error("metal-fx: gl.createProgram returned null");if(e.attachShader(n,t),e.attachShader(n,a),e.linkProgram(n),!e.getProgramParameter(n,e.LINK_STATUS)){const o=e.getProgramInfoLog(n);throw e.deleteProgram(n),new Error(`metal-fx: program link failed: ${o??"(no info log)"}`)}return n}const Ye=140,je=40,Ke=1.6,Qe=1.3;let i=null,te=null;function kt(e){te=e}const Et=["u_resolution","u_time","u_color1","u_color2","u_color3","u_color4","u_color5","u_color6","u_color7","u_alpha1","u_alpha2","u_alpha3","u_alpha4","u_alpha5","u_alpha6","u_alpha7","u_intensity","u_scale","u_direction","u_softness","u_distortion","u_complexity","u_shape","u_vignette","u_vigOpacity","u_blur","u_shaderOpacity"];function Ce(e){e.enable(e.BLEND),e.blendFunc(e.SRC_ALPHA,e.ONE_MINUS_SRC_ALPHA);const t=Ae(e,e.VERTEX_SHADER,Tt),a=Ae(e,e.FRAGMENT_SHADER,At),n=Ct(e,t,a);e.useProgram(n);const o=e.createBuffer();if(!o)throw new Error("metal-fx: gl.createBuffer returned null");e.bindBuffer(e.ARRAY_BUFFER,o),e.bufferData(e.ARRAY_BUFFER,new Float32Array([-1,-1,1,-1,-1,1,-1,1,1,-1,1,1]),e.STATIC_DRAW);const r=e.getAttribLocation(n,"a_position");e.enableVertexAttribArray(r),e.vertexAttribPointer(r,2,e.FLOAT,!1,0,0);const s={};for(const c of Et)s[c]=e.getUniformLocation(n,c);return{program:n,buffer:o,uniforms:s}}function Je(){if(i)return i;const e=Math.min(_t,typeof window<"u"&&window.devicePixelRatio||1),t=Math.round(yt*e),a=typeof OffscreenCanvas<"u";let n,o;if(a)n=new OffscreenCanvas(t,t),o=n.getContext("webgl",{alpha:!0,premultipliedAlpha:!1,antialias:!1});else{const f=document.createElement("canvas");f.width=t,f.height=t,o=f.getContext("webgl",{alpha:!0,premultipliedAlpha:!1,antialias:!1,preserveDrawingBuffer:!0})??f.getContext("experimental-webgl"),n=f}if(!o)throw new Error("metal-fx: WebGL not supported");const{program:r,buffer:s,uniforms:c}=Ce(o),l=f=>{f.preventDefault(),i&&(i.contextLost=!0)},d=()=>{if(!i)return;const f=Ce(i.gl);i.program=f.program,i.buffer=f.buffer,i.uniforms=f.uniforms,i.presetDirty=!0,i.contextLost=!1,te==null||te()};return n.addEventListener("webglcontextlost",l,!1),n.addEventListener("webglcontextrestored",d,!1),i={glCanvas:n,gl:o,program:r,buffer:s,uniforms:c,preset:ve.chromatic.modes.dark,presetDirty:!0,contextLost:!1,useOffscreen:a,frameBitmap:null,startMs:performance.now(),pausedMs:0,pausedAtMs:null,rafId:0,dpr:e,instances:new Set,frameCount:0,glowQueue:[],glowIdx:0,glowSkip:0,glowPixels:new Uint8Array(t*t*4),glowPixelsW:t,glowPixelsH:t},i}function It(){var o;if(!i)return;const{gl:e,program:t,buffer:a,frameBitmap:n}=i;try{n==null||n.close(),e.deleteBuffer(a),e.deleteProgram(t),(o=e.getExtension("WEBGL_lose_context"))==null||o.loseContext()}catch{}i=null}let ke=0;function oe(){if(!i)return;const e=performance.now();if(e-ke<xt)return;ke=e;const{gl:t,glCanvas:a}=i,n=a.width,o=a.height;(i.glowPixelsW!==n||i.glowPixelsH!==o)&&(i.glowPixelsW=n,i.glowPixelsH=o,i.glowPixels=new Uint8Array(n*o*4)),t.readPixels(0,0,n,o,t.RGBA,t.UNSIGNED_BYTE,i.glowPixels)}const X={bx:0,by:0};function be(e,t,a){if(!i)return X.bx=0,X.by=0,X;const{glCanvas:n}=i,o=n.width,r=n.height,s=e.dpr,c=e.cssWidth*s,l=e.cssHeight*s,d=Ye*s,f=je*s;let g=c*(o/d)/e.shaderScale,u=l*(r/f)/e.shaderScale;g>o&&(g=o),u>r&&(u=r);const p=(o-g)/2,h=(r-u)/2,m=p+t/e.cssWidth*g,A=h+a/e.cssHeight*u;return X.bx=Math.round(m),X.by=Math.round(r-1-A),X}const G={r:0,g:0,b:0,lum:0,count:0};function Ze(e,t,a,n,o,r){const s=Math.max(1,r|0),c=Math.max(0,n-s),l=Math.min(t,n+s+1),d=Math.max(0,o-s),f=Math.min(a,o+s+1);G.r=0,G.g=0,G.b=0,G.lum=0,G.count=0;for(let g=d;g<f;g++){const u=g*t;for(let p=c;p<l;p++){const h=(u+p)*4;G.r+=e[h],G.g+=e[h+1],G.b+=e[h+2],G.lum+=(.2126*e[h]+.7152*e[h+1]+.0722*e[h+2])/255,G.count++}}return G}const C={r:255,g:255,b:255};function Ee(e,t,a,n){if(!i)return 0;oe();const o=be(e,t,a),r=Ze(i.glowPixels,i.glowPixelsW,i.glowPixelsH,o.bx,o.by,n);return r.count>0?r.lum/r.count:0}function Ot(e,t,a,n){if(!i)return C.r=255,C.g=255,C.b=255,C;oe();const o=be(e,t,a),r=Ze(i.glowPixels,i.glowPixelsW,i.glowPixelsH,o.bx,o.by,n);return r.count===0?(C.r=255,C.g=255,C.b=255,C):(C.r=r.r/r.count,C.g=r.g/r.count,C.b=r.b/r.count,C)}function Lt(e,t,a,n){if(!i)return C.r=255,C.g=255,C.b=255,C;oe();const o=be(e,t,a),{glowPixels:r,glowPixelsW:s,glowPixelsH:c}=i,l=Math.max(1,n|0),d=Math.max(0,o.bx-l),f=Math.min(s,o.bx+l+1),g=Math.max(0,o.by-l),u=Math.min(c,o.by+l+1);let p=-1;C.r=255,C.g=255,C.b=255;for(let h=g;h<u;h++){const m=h*s;for(let A=d;A<f;A++){const x=(m+A)*4,I=r[x],S=r[x+1],L=r[x+2],F=Math.max(I,S,L),_=Math.min(I,S,L),R=(F>0?(F-_)/F:0)*(.35+.65*(F/255));R>p&&(p=R,C.r=I,C.g=S,C.b=L)}}return C}kt(()=>{i&&i.instances.size>0&&i.pausedAtMs===null&&K()});typeof document<"u"&&document.addEventListener("visibilitychange",()=>{!i||i.pausedAtMs!==null||i.contextLost||(document.hidden?we():i.instances.size>0&&K())});function et(e){const t=Je(),a=e.hostCanvas.getContext("2d",{alpha:!0});if(!a)throw new Error("metal-fx: canvas 2D context unavailable");const n=e.scale??1,o={canvas:e.hostCanvas,ctx:a,cssWidth:e.cssWidth,cssHeight:e.cssHeight,cornerRadius:e.cornerRadius,kind:e.kind,ringCssPx:e.ringCssPx??(e.kind==="circle"?2:1)*n,shaderScale:e.shaderScale??(e.kind==="circle"?Qe:Ke)*n,opacityMul:e.opacityMul??1,visible:!0,paused:e.paused??!1,everCopied:!1,dpr:typeof window<"u"&&window.devicePixelRatio||1,scale:n,onAfterFrame:e.onAfterFrame,onFirstCopy:e.onFirstCopy};return nt(o),t.instances.add(o),t.rafId===0&&t.pausedAtMs===null&&K(),o}function tt(e){if(!i)return;i.instances.delete(e);const t=i.glowQueue.indexOf(e);t!==-1&&i.glowQueue.splice(t,1),i.instances.size===0&&(we(),It())}function Pt(e){i&&(i.glowQueue.includes(e)||i.glowQueue.push(e))}function Ft(e){if(!i)return;const t=i.glowQueue.indexOf(e);t!==-1&&i.glowQueue.splice(t,1)}function Y(e,t){let a=!1;t.cssWidth!==void 0&&t.cssWidth!==e.cssWidth&&(e.cssWidth=t.cssWidth,a=!0),t.cssHeight!==void 0&&t.cssHeight!==e.cssHeight&&(e.cssHeight=t.cssHeight,a=!0),t.cornerRadius!==void 0&&(e.cornerRadius=t.cornerRadius),t.scale!==void 0&&(e.scale=t.scale),t.kind!==void 0&&t.kind!==e.kind&&(e.kind=t.kind,t.shaderScale===void 0&&(e.shaderScale=(t.kind==="circle"?Qe:Ke)*e.scale),t.ringCssPx===void 0&&(e.ringCssPx=(t.kind==="circle"?2:1)*e.scale)),t.shaderScale!==void 0&&(e.shaderScale=t.shaderScale),t.ringCssPx!==void 0&&(e.ringCssPx=t.ringCssPx),t.opacityMul!==void 0&&(e.opacityMul=t.opacityMul),t.paused!==void 0&&t.paused!==e.paused&&(e.paused=t.paused,!t.paused&&i&&i.rafId===0&&i.pausedAtMs===null&&!i.contextLost&&K()),a&&nt(e)}function $t(e,t){e.visible=t,t&&i&&i.rafId===0&&i.pausedAtMs===null&&!i.contextLost&&K()}function at(e,t){const a=Je();a.preset=ve[e].modes[t],a.presetDirty=!0}function Ht(){!i||i.pausedAtMs!==null||(i.pausedAtMs=performance.now(),we())}function Nt(){!i||i.pausedAtMs===null||(i.pausedMs+=performance.now()-i.pausedAtMs,i.pausedAtMs=null,i.instances.size>0&&K())}let ge=null;function Gt(e){ge=e}function nt(e){e.dpr=typeof window<"u"&&window.devicePixelRatio||1;const t=Math.max(1,Math.round(e.cssWidth*e.dpr)),a=Math.max(1,Math.round(e.cssHeight*e.dpr));e.canvas.width!==t&&(e.canvas.width=t),e.canvas.height!==a&&(e.canvas.height=a)}function Wt(e){const{ctx:t,dpr:a,canvas:n}=e,o=e.ringCssPx*a,r=n.width,s=n.height,c=Math.max(0,(e.cornerRadius-e.ringCssPx)*a);t.save(),t.globalCompositeOperation="destination-out",t.fillStyle="#000",t.beginPath(),t.roundRect(o,o,r-2*o,s-2*o,c),t.fill(),t.restore()}function zt(e){var p;if(!i)return;const t=i.frameBitmap??i.glCanvas,a=e.dpr,n=e.canvas.width,o=e.canvas.height;if(n<1||o<1)return;const r=i.glCanvas.width,s=i.glCanvas.height,c=Ye*a,l=je*a;let d=n*(r/c)/e.shaderScale,f=o*(s/l)/e.shaderScale;d>r&&(d=r),f>s&&(f=s);const g=Math.max(0,(r-d)/2),u=Math.max(0,(s-f)/2);if(e.ctx.clearRect(0,0,n,o),e.opacityMul<1&&(e.ctx.globalAlpha=e.opacityMul),e.ctx.drawImage(t,g,u,d,f,0,0,n,o),e.opacityMul<1&&(e.ctx.globalAlpha=1),Wt(e),e.onFirstCopy){const h=e.onFirstCopy;e.onFirstCopy=void 0,h()}(p=e.onAfterFrame)==null||p.call(e)}function Bt(){if(!i)return;const{gl:e,uniforms:t,preset:a,glCanvas:n}=i;t.u_resolution&&e.uniform2f(t.u_resolution,n.width,n.height);for(let o=0;o<7;o++){const r=t[`u_color${o+1}`];if(r){const[c,l,d]=qe(a.colors[o]);e.uniform3f(r,c,l,d)}const s=t[`u_alpha${o+1}`];s&&e.uniform1f(s,a.alphas[o])}t.u_intensity&&e.uniform1f(t.u_intensity,a.intensity),t.u_scale&&e.uniform1f(t.u_scale,a.scale),t.u_direction&&e.uniform1f(t.u_direction,a.direction*Math.PI/180),t.u_softness&&e.uniform1f(t.u_softness,a.softness),t.u_distortion&&e.uniform1f(t.u_distortion,a.distortion),t.u_complexity&&e.uniform1f(t.u_complexity,a.complexity),t.u_shape&&e.uniform1f(t.u_shape,a.shape),t.u_vignette&&e.uniform1f(t.u_vignette,a.vignette),t.u_vigOpacity&&e.uniform1f(t.u_vigOpacity,a.vigOpacity),t.u_blur&&e.uniform1f(t.u_blur,a.blur),t.u_shaderOpacity&&e.uniform1f(t.u_shaderOpacity,a.shaderOpacity),i.presetDirty=!1}function Dt(e){if(!i)return;const{gl:t,uniforms:a,preset:n,glCanvas:o}=i,r=(e-i.startMs-i.pausedMs)/1e3*n.speed;t.viewport(0,0,o.width,o.height),t.clearColor(0,0,0,0),t.clear(t.COLOR_BUFFER_BIT),i.presetDirty&&Bt(),a.u_time&&t.uniform1f(a.u_time,r),t.drawArrays(t.TRIANGLES,0,6),i.frameCount++}let Ie=0;function ot(e){var a;if(!i)return;if(i.contextLost){i.rafId=0;return}let t=!1;for(const n of i.instances)if(n.visible&&(!n.paused||!n.everCopied)){t=!0;break}if(!t){i.rafId=0;return}if(i.rafId=requestAnimationFrame(ot),!(e-Ie<mt)){Ie=e,Dt(e),i.useOffscreen&&(i.glowQueue.length>0&&oe(),(a=i.frameBitmap)==null||a.close(),i.frameBitmap=i.glCanvas.transferToImageBitmap());for(const n of i.instances)n.visible&&(n.paused&&n.everCopied||(zt(n),n.everCopied=!0));if(ge&&i.glowQueue.length>0&&++i.glowSkip%vt===0){const n=i.glowQueue;i.glowIdx>=n.length&&(i.glowIdx=0);const o=n[i.glowIdx];o.visible&&!o.paused&&ge(o,e),i.glowIdx++}}}function K(){!i||i.rafId!==0||(i.rafId=requestAnimationFrame(ot))}function we(){i&&(i.rafId!==0&&cancelAnimationFrame(i.rafId),i.rafId=0)}const ae={linear:e=>e,smoothstep:e=>e*e*(3-2*e)};function V(e,t,a,n=ae.linear){return{from:e,to:t,dur:a,ease:n,startMs:-1,val:e,done:!1}}function q(e,t){e.startMs=t,e.val=e.from,e.done=!1}function Oe(e,t){if(e.done||e.startMs<0)return e.val;const a=Math.min(1,(t-e.startMs)/e.dur);return e.val=e.from+(e.to-e.from)*e.ease(a),a>=1&&(e.done=!0),e.val}const Ut=1.5,Z=1/3,Xt=4*Z,Vt=2*Z,qt=2*Z,Yt=1.35*Z,jt=13*Z;function ye(e,t,a){const n=Math.max(0,Math.min(a,Math.min(e,t)/2));return 2*Math.max(0,e-2*n)+2*Math.max(0,t-2*n)+2*Math.PI*n}function _e(e,t,a,n){return n==="circle"?2*Math.PI*Math.max(0,Math.min(a,Math.min(e,t)/2)):ye(e,t,a)}function J(e,t,a,n,o,r,s,c){const l=c||{x:0,y:0},d=Math.max(0,Math.min(n,Math.min(t,a)/2));if(s==="circle"){const x=2*Math.PI*d;if(x<=1e-4)return l.x=t*.5,l.y=a*.5,l;e=(e%x+x)%x;const I=-Math.PI/2+e/x*Math.PI*2,S=Math.max(0,d-o+r);return l.x=t*.5+S*Math.cos(I),l.y=a*.5+S*Math.sin(I),l}const f=Math.max(0,t-2*d),g=Math.max(0,a-2*d),u=Math.PI*d/2,p=2*(f+g)+4*u;e=(e%p+p)%p;const h=Math.max(0,d-o+r);let m=e;if(m<f)return l.x=d+m,l.y=o-r,l;if(m-=f,m<u){const x=-Math.PI/2+(u>0?m/u:0)*(Math.PI/2);return l.x=t-d+h*Math.cos(x),l.y=d+h*Math.sin(x),l}if(m-=u,m<g)return l.x=t-o+r,l.y=d+m,l;if(m-=g,m<u){const x=(u>0?m/u:0)*(Math.PI/2);return l.x=t-d+h*Math.cos(x),l.y=a-d+h*Math.sin(x),l}if(m-=u,m<f)return l.x=t-d-m,l.y=a-o+r,l;if(m-=f,m<u){const x=Math.PI/2+(u>0?m/u:0)*(Math.PI/2);return l.x=d+h*Math.cos(x),l.y=a-d+h*Math.sin(x),l}if(m-=u,m<g)return l.x=o-r,l.y=a-d-m,l;m-=g;const A=Math.PI+(u>0?m/u:0)*(Math.PI/2);return l.x=d+h*Math.cos(A),l.y=d+h*Math.sin(A),l}function Le(e,t){const a=e*2/t;let n="";for(let o=0;o<=t;o++){const r=-e+o*a;n+=(o===0?"M ":"L ")+r.toFixed(3)+" 0 "}return n}const de={x:0,y:0},fe={x:0,y:0};function Kt(e,t,a,n,o,r){return J(e-.1,t,a,n,o,0,r,de),J(e+.1,t,a,n,o,0,r,fe),Math.atan2(fe.y-de.y,fe.x-de.x)}function Pe(e,t,a){const n=Math.max(0,Math.min(1,(a-e)/(t-e)));return n*n*(3-2*n)}function Qt(e){const t=_e(e.width,e.height,e.cornerRadius,e.kind),a=Ut*(e.scale??1),n=[];for(let o=0;o<Te;o++){const r=o/Te*t,s=J(r,e.width,e.height,e.cornerRadius,a,0,e.kind);n.push({x:s.x,y:s.y,arc:r})}return n}function Jt(e,t){const{width:a,height:n,cornerRadius:o}=e,r=e.scale??1,s=e.kind==="circle"?2:1,c=Math.max(0,o-s),l=(-200*r).toFixed(0),d=l,f=(540*r).toFixed(0),g=(440*r).toFixed(0),u=`x="${l}" y="${d}" width="${f}" height="${g}"`,p=`${u} filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"`,h=A=>(A*r).toFixed(3),m=A=>(A*r).toFixed(3);return["<defs>",`<filter id="${t}_bXl" ${p}><feGaussianBlur stdDeviation="${m(8.4)}"/></filter>`,`<filter id="${t}_bLg" ${p}><feGaussianBlur stdDeviation="${m(4.8)}"/></filter>`,`<filter id="${t}_bMd" ${p}><feGaussianBlur stdDeviation="${m(2.1)}"/></filter>`,`<filter id="${t}_bSm" ${p}><feGaussianBlur stdDeviation="${m(.9)}"/></filter>`,`<filter id="${t}_ebO" ${p}><feGaussianBlur stdDeviation="${m(qt)}"/></filter>`,`<filter id="${t}_ebC" ${p}><feGaussianBlur stdDeviation="${m(Yt)}"/></filter>`,`<radialGradient id="${t}_fg" cx="0.5" cy="0.5" r="0.5"><stop offset="0" stop-color="white"/><stop offset="0.30" stop-color="white"/><stop offset="0.65" stop-color="#404040"/><stop offset="1" stop-color="black"/></radialGradient>`,`<mask id="${t}_fm" maskUnits="userSpaceOnUse" ${u}><rect ${u} fill="black"/><circle id="${t}_fc" cx="0" cy="0" r="${(jt*r).toFixed(3)}" fill="url(#${t}_fg)"/></mask>`,`<mask id="${t}_rm" maskUnits="userSpaceOnUse" ${u}><rect ${u} fill="#808080"/><rect x="0" y="0" width="${a}" height="${n}" rx="${o}" ry="${o}" fill="white"/><rect x="${s}" y="${s}" width="${a-s*2}" height="${n-s*2}" rx="${c}" ry="${c}" fill="black"/></mask>`,"</defs>",`<g id="${t}_h" mask="url(#${t}_rm)" opacity="0">`,`<rect ${u} fill="none" pointer-events="none"/>`,`<g id="${t}_hI" stroke="white">`,`<path id="${t}_pXl" stroke-width="${h(26.4)}" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.385" filter="url(#${t}_bXl)"/>`,`<path id="${t}_pLg" stroke-width="${h(15.6)}" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.595" filter="url(#${t}_bLg)"/>`,`<path id="${t}_pMd" stroke-width="${h(7.2)}" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.70" filter="url(#${t}_bMd)"/>`,`<path id="${t}_pSm" stroke-width="${h(3)}" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.70" filter="url(#${t}_bSm)"/>`,"</g></g>",`<g id="${t}_e" mask="url(#${t}_rm)" opacity="0">`,`<rect ${u} fill="none" pointer-events="none"/>`,`<g mask="url(#${t}_fm)">`,`<g id="${t}_eI" stroke="white">`,`<path id="${t}_eO" stroke-width="${h(Xt)}" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.85" filter="url(#${t}_ebO)"/>`,`<path id="${t}_eC" stroke-width="${h(Vt)}" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="1.0" filter="url(#${t}_ebC)"/>`,"</g></g></g>"].join("")}const Zt=.00875,Fe=.08,$e=.32,ea=.05,ta=3e3,He=.85,ee=.34,ue=1500,aa=15,na=.0075,oa=120,ra=1.5,ia=7.8,sa=9.13952,la=1,ca=1/3,da=.8,fa=3.51,Ne=2e3,he=400,ua=2.625,ha=1.008,pa=.31,rt=140,it=40,st=20;let ma=0;const z={x:0,y:0};function Ge(e,t){const a=`mfxg_${++ma}`,n=document.createElementNS("http://www.w3.org/2000/svg","svg");n.setAttribute("class","metal-fx-glow-svg"),n.setAttribute("preserveAspectRatio","none"),n.setAttribute("viewBox",`0 0 ${t.width} ${t.height}`),n.innerHTML=Jt(t,a),e.appendChild(n);const o=x=>n.querySelector(`#${a}_${x}`),r=o("h"),s=o("hI"),c=o("e"),l=o("eI"),d=o("fc"),f=_e(t.width,t.height,t.cornerRadius,t.kind)/ye(rt,it,st),g=Math.max(1,ia*f),u=Math.max(.6,sa*ca*f),p=Le(g,bt),h=Le(u,wt),m=[o("pXl"),o("pLg"),o("pMd"),o("pSm")],A=[o("eO"),o("eC")];for(const x of m)x.setAttribute("d",p);for(const x of A)x.setAttribute("d",h);return s.style.transformOrigin="0 0",l.style.transformOrigin="0 0",s.style.willChange="transform",l.style.willChange="transform",s.style.transition="transform 100ms linear",l.style.transition="transform 100ms linear",r.style.willChange="opacity",c.style.willChange="opacity",r.style.transition="opacity 100ms linear",c.style.transition="opacity 100ms linear",d.style.willChange="transform",{svg:n,haloGroup:r,haloInner:s,extraGroup:c,extraInner:l,fadeCircle:d,width:t.width,height:t.height,cornerRadius:t.cornerRadius,kind:t.kind,scale:t.scale??1,perim:Qt(t),currentIdx:0,appearedAt:0,glowOpacity:0,relocTween:null,relocNextIdx:-1,wanderS:0,wanderTargetS:0,wanderFrames:0,tintFrom:{r:255,g:255,b:255},tintTarget:{r:255,g:255,b:255},tintTween:null,tintHoldUntil:0,lastHaloStroke:"",lastExtraStroke:""}}function ga(e,t,a,n,o="dark"){var B;const{width:r,height:s,cornerRadius:c,perim:l}=e;if(l.length===0)return;const d=2;let f=-1,g=e.currentIdx,u=0;for(let E=0;E<l.length;E++){const P=l[E],N=Ee(t,P.x,P.y,d);N>f&&(f=N,g=E),E===e.currentIdx&&(u=N)}const p=e.appearedAt>0&&a-e.appearedAt<ta,h=ee+(He-ee)*Pe(Fe,$e,u),m=!p&&f-u>ea;if(!e.relocTween||e.relocTween.done)if(e.appearedAt===0)e.currentIdx=g,e.appearedAt=a,e.wanderS=0,e.wanderTargetS=0,e.wanderFrames=0,e.relocTween=V(0,h,ue,ae.smoothstep),q(e.relocTween,a);else if((B=e.relocTween)!=null&&B.done&&e.relocTween.to===0){e.currentIdx=e.relocNextIdx,e.appearedAt=a,e.wanderS=0,e.wanderTargetS=0,e.wanderFrames=0;const E=l[e.currentIdx],P=Ee(t,E.x,E.y,d),N=ee+(He-ee)*Pe(Fe,$e,P);e.relocTween=V(0,N,ue,ae.smoothstep),q(e.relocTween,a)}else m?(e.relocNextIdx=g,e.relocTween=V(e.glowOpacity,0,ue,ae.smoothstep),q(e.relocTween,a)):e.glowOpacity+=(h-e.glowOpacity)*Zt;e.relocTween&&(e.glowOpacity=Oe(e.relocTween,a)),e.glowOpacity=Math.max(0,Math.min(1,e.glowOpacity));const A=_e(r,s,c,e.kind)/ye(rt,it,st),x=aa*A;e.wanderFrames++>=oa&&(e.wanderTargetS=(Math.random()*2-1)*x,e.wanderFrames=0),e.wanderS+=(e.wanderTargetS-e.wanderS)*na;const I=l[e.currentIdx].arc+e.wanderS,S=ra*e.scale;J(I,r,s,c,S,0,e.kind,z);const L=z.x,F=z.y,_=Kt(I,r,s,c,S,e.kind),y=`translate(${L.toFixed(3)}px,${F.toFixed(3)}px) rotate(${_.toFixed(4)}rad)`;e.haloInner.style.transform=y;const R=la*A*e.scale;J(I,r,s,c,S,R,e.kind,z),e.extraInner.style.transform=`translate(${z.x.toFixed(3)}px,${z.y.toFixed(3)}px) rotate(${_.toFixed(4)}rad)`,e.fadeCircle.style.transform=`translate(${z.x.toFixed(3)}px,${z.y.toFixed(3)}px)`;const T=o==="light",v=T?Lt(t,L,F,d):Ot(t,L,F,d);e.tintTween?e.tintTween.done&&(T?(e.tintFrom={r:e.tintFrom.r+(e.tintTarget.r-e.tintFrom.r)*e.tintTween.val,g:e.tintFrom.g+(e.tintTarget.g-e.tintFrom.g)*e.tintTween.val,b:e.tintFrom.b+(e.tintTarget.b-e.tintFrom.b)*e.tintTween.val},e.tintTarget={...v},e.tintTween=V(0,1,he),q(e.tintTween,a)):a>=e.tintHoldUntil&&(e.tintFrom={...e.tintTarget},e.tintTarget={...v},e.tintTween=V(0,1,he),q(e.tintTween,a),e.tintHoldUntil=a+Ne)):(e.tintFrom={...v},e.tintTarget={...v},e.tintTween=V(0,1,he),q(e.tintTween,a),e.tintHoldUntil=T?0:a+Ne),Oe(e.tintTween,a);const b=e.tintTween.val;let $,O,M;if(T)$=Math.round(e.tintFrom.r+(e.tintTarget.r-e.tintFrom.r)*b),O=Math.round(e.tintFrom.g+(e.tintTarget.g-e.tintFrom.g)*b),M=Math.round(e.tintFrom.b+(e.tintTarget.b-e.tintFrom.b)*b);else{const E=e.tintFrom.r+(e.tintTarget.r-e.tintFrom.r)*b,P=e.tintFrom.g+(e.tintTarget.g-e.tintFrom.g)*b,N=e.tintFrom.b+(e.tintTarget.b-e.tintFrom.b)*b,W=Math.max(E,P,N)||1;$=Math.round(255*(E/W)),O=Math.round(255*(P/W)),M=Math.round(255*(N/W))}const k=`rgb(${$},${O},${M})`;if(k!==e.lastHaloStroke&&(e.lastHaloStroke=k,e.haloInner.style.stroke=k),T){const E=ht($,O,M),[P,N,W]=pt(E[0],Math.min(1,E[1]*ua),Math.max(pa,E[2]*ha)),D=`rgb(${P},${N},${W})`;D!==e.lastExtraStroke&&(e.lastExtraStroke=D,e.extraInner.style.stroke=D)}else e.lastExtraStroke!=="#ffffff"&&(e.lastExtraStroke="#ffffff",e.extraInner.style.stroke="#ffffff");const H=Math.max(0,Math.min(1,n));e.haloGroup.style.opacity=(e.glowOpacity*da*H).toFixed(3),e.extraGroup.style.opacity=Math.min(1,e.glowOpacity*fa*H).toFixed(3)}const xe=12,We=32,ze=1,Be=.55,xa=1,va=1,ba=.85,wa=0,ya=1.3,De=3.6,_a=.7,Ma=1,Sa=.52,Ra=1,Ta=.044,Aa=235,Ca=2.535,ka=.7,Ea=.5,Ia=new Set(["INPUT","TEXTAREA","SELECT","OPTION"]);function Oa(e,t){const a=Math.max(e.left-t.right,t.left-e.right,0),n=Math.max(e.top-t.bottom,t.top-e.bottom,0);return Math.sqrt(a*a+n*n)}function La(e,t,a,n){return!(Math.min(e.bottom,t.bottom)-Math.max(e.top,t.top)<a||Math.max(e.left-t.right,t.left-e.right,0)>n)}function Pa(e,t,a,n){return Math.min(e.right,t.right)-Math.max(e.left,t.left)<a?!1:Math.max(e.top-t.bottom,t.top-e.bottom,0)<=n}function U(e,t,a,n,o,r){const s=Math.max(0,Math.min(r,n*.5,o*.5)),c=e.roundRect;if(typeof c=="function"){c.call(e,t,a,n,o,s);return}e.moveTo(t+s,a),e.lineTo(t+n-s,a),e.quadraticCurveTo(t+n,a,t+n,a+s),e.lineTo(t+n,a+o-s),e.quadraticCurveTo(t+n,a+o,t+n-s,a+o),e.lineTo(t+s,a+o),e.quadraticCurveTo(t,a+o,t,a+o-s),e.lineTo(t,a+s),e.quadraticCurveTo(t,a,t+s,a)}function lt(e,t,a,n,o){if(!o.flipX&&!o.flipY){e.drawImage(t,0,0,a,n,o.x,o.y,o.w,o.h);return}e.save(),o.flipX&&(e.translate(o.x+o.w,0),e.scale(-1,1)),o.flipY&&(e.translate(0,o.y+o.h),e.scale(1,-1)),e.drawImage(t,0,0,a,n,o.flipX?0:o.x,o.flipY?0:o.y,o.w,o.h),e.restore()}const Fa=4;function $a(e,t,a,n,o,r,s){if(n<=2*s||o<=2*s){e.beginPath(),U(e,t,a,n,o,r),e.clip();return}e.beginPath(),U(e,t,a,n,o,r),U(e,t+s,a+s,n-2*s,o-2*s,Math.max(0,r-s)),e.clip("evenodd")}function Ha(e,t,a,n,o,r,s,c,l,d,f){const g=Math.max(1,Math.round((xe+Fa*3)*f));let u=Math.max(0,s),p=!0;for(let h=0;h<3&&u>1e-4;h++){const m=Math.min(1,u);e.save(),$a(e,d.x,d.y,d.w,d.h,d.r,g),e.globalCompositeOperation=p?"source-over":"lighter",p=!1,e.globalAlpha=m,lt(e,t,a,n,l),e.globalAlpha=1,e.globalCompositeOperation="destination-in",e.fillStyle=c,e.fillRect(0,0,o,r),e.restore(),u-=m}}function ct(e,t,a,n,o,r,s){const c=s|0;if(c<1||n<=2*c||o<=2*c){e.beginPath(),U(e,t,a,n,o,r),e.clip();return}e.beginPath(),U(e,t,a,n,o,r),U(e,t+c,a+c,n-2*c,o-2*c,Math.max(0,r-c)),e.clip("evenodd")}function Na(e,t,a,n,o,r,s,c,l,d,f,g){let u=c*f,p=!0;for(let h=0;h<3&&u>1e-4;h++){const m=Math.min(1,u);e.save(),ct(e,s.x,s.y,s.w,s.h,s.r,l),e.globalCompositeOperation=p?"source-over":"lighter",p=!1,e.globalAlpha=m,lt(e,t,a,n,g),e.globalAlpha=1,e.globalCompositeOperation="destination-in",e.fillStyle=d,e.fillRect(0,0,o,r),e.restore(),u-=m}}function Ga(e,t,a,n,o,r,s,c){const l=e.createLinearGradient(n,o,r,s);l.addColorStop(0,`rgba(255,255,255,${c.toFixed(3)})`),l.addColorStop(.5,`rgba(255,255,255,${(c*.45).toFixed(3)})`),l.addColorStop(1,"rgba(255,255,255,0)"),e.save(),ct(e,t.x,t.y,t.w,t.h,t.r,a),e.globalCompositeOperation="lighter",e.lineWidth=a*2,e.strokeStyle=l,e.beginPath(),U(e,t.x,t.y,t.w,t.h,t.r),e.stroke(),e.restore()}function dt(e){const t=getComputedStyle(e),a=[parseFloat(t.borderTopLeftRadius)||0,parseFloat(t.borderTopRightRadius)||0,parseFloat(t.borderBottomRightRadius)||0,parseFloat(t.borderBottomLeftRadius)||0].filter(n=>n>0);return a.length?Math.min.apply(null,a):0}function ft(e){const t=getComputedStyle(e),a=Math.max(parseFloat(t.borderTopWidth)||0,parseFloat(t.borderRightWidth)||0,parseFloat(t.borderBottomWidth)||0,parseFloat(t.borderLeftWidth)||0);let n=0,o=0;const r=t.boxShadow;if(r&&r!=="none"){const d=r.replace(/rgba?\([^)]*\)/g,u=>u.replace(/,/g,"\0")).split(/,\s*/);let f=1/0,g=1/0;for(const u of d){const p=u.match(/-?\d+(?:\.\d+)?px/g);if(!p||p.length<4)continue;const h=parseFloat(p[3]);h>0&&(/\binset\b/.test(u)?h<f&&(f=h):h<g&&(g=h))}Number.isFinite(f)&&(n=f),Number.isFinite(g)&&(o=g)}const s=Math.max(a,o);return{width:Math.max(a,n,o)||1,outerCssPx:s}}function Ue(e){e.cornerRadius=dt(e.el);const t=ft(e.el);e.hairlineWidth=t.width,e.hairlineOuterCssPx=t.outerCssPx}function Wa(e){typeof ResizeObserver<"u"&&(e.resizeObserver=new ResizeObserver(()=>Ue(e)),e.resizeObserver.observe(e.el)),typeof MutationObserver<"u"&&(e.mutationObserver=new MutationObserver(()=>Ue(e)),e.mutationObserver.observe(e.el,{attributes:!0,attributeFilter:["style","class"]}))}function za(e){var t,a;(t=e.resizeObserver)==null||t.disconnect(),e.resizeObserver=null,(a=e.mutationObserver)==null||a.disconnect(),e.mutationObserver=null}const j=new Set;function Ba(e,t,a){if(typeof document>"u"||Ia.has(e.tagName))return null;for(const p of j)if(p.el===e)return p;const n=document.createElement("div");n.setAttribute("data-metal-fx-reflection",""),n.setAttribute("aria-hidden","true");const o=document.createElement("canvas");o.className="metal-fx-reflection-canvas";const r=o.getContext("2d",{alpha:!0});if(!r)return null;const s=document.createElement("canvas");s.className="metal-fx-reflection-stroke-canvas";const c=s.getContext("2d",{alpha:!0});if(!c)return null;n.appendChild(o),n.appendChild(s);const l=getComputedStyle(e);let d=!1;l.position==="static"&&(e.style.position="relative",d=!0);let f=!1;l.isolation!=="isolate"&&(e.style.isolation="isolate",f=!0),e.setAttribute("data-metal-fx-reflect-host",""),e.insertBefore(n,e.firstChild);const g=ft(e),u={el:e,anchor:t,anchorEl:a,wrap:n,canvas:o,ctx:r,strokeCanvas:s,strokeCtx:c,cornerRadius:dt(e),hairlineWidth:g.width,hairlineOuterCssPx:g.outerCssPx,appliedPositionRelative:d,appliedIsolation:f,resizeObserver:null,mutationObserver:null};return Wa(u),j.add(u),u}function Da(e){for(const t of j)if(t.el===e){za(t),t.canvas.width=0,t.canvas.height=0,t.strokeCanvas.width=0,t.strokeCanvas.height=0,t.wrap.parentNode===t.el&&t.el.removeChild(t.wrap),t.el.removeAttribute("data-metal-fx-reflect-host"),t.appliedPositionRelative&&(t.el.style.position=""),t.appliedIsolation&&(t.el.style.isolation=""),j.delete(t);return}}function Ua(){if(j.size===0)return;const e=typeof window<"u"&&window.devicePixelRatio||1,t=new Map;for(const a of j){const n=a.el.getBoundingClientRect();let o=t.get(a.anchorEl);if(o||(o=a.anchorEl.getBoundingClientRect(),t.set(a.anchorEl,o)),n.width<1||n.height<1||o.width<1||o.height<1)continue;if(!La(o,n,ze,We)&&!Pa(o,n,ze,We)){a.canvas.width!==1&&(a.canvas.width=1,a.canvas.height=1),a.strokeCanvas.width!==1&&(a.strokeCanvas.width=1,a.strokeCanvas.height=1);continue}const r=a.anchor.canvas,s=r.width|0,c=r.height|0;if(s<4||c<4)continue;const l=(o.left+o.right)*.5,d=(o.top+o.bottom)*.5,f=(n.left+n.right)*.5,g=(n.top+n.bottom)*.5,u=l-f,p=d-g,h=Math.max(o.left-n.right,n.left-o.right,0),m=Math.max(o.top-n.bottom,n.top-o.bottom,0),A=h>=m,x=Oa(o,n);let I=1-Math.min(1,x/xe);I=I*I*(3-2*I);const S=Be+(xa-Be)*I,L=Math.min(De,S*ya*_a),F=a.anchor.scale??1,_=Math.max(Ma*F,a.hairlineWidth),y=Math.max(1,Math.round(_*e)),R=Math.max(1,Math.round(Math.max(Ra*F,a.hairlineWidth)*e)),T=a.hairlineOuterCssPx;a.wrap.style.inset=`${-T}px`,a.wrap.style.borderRadius=`${Math.max(0,a.cornerRadius)}px`;const v=Math.max(1,Math.round((n.width+T*2)*e)),b=Math.max(1,Math.round((n.height+T*2)*e));a.canvas.width!==v&&(a.canvas.width=v),a.canvas.height!==b&&(a.canvas.height=b),a.strokeCanvas.width!==v&&(a.strokeCanvas.width=v),a.strokeCanvas.height!==b&&(a.strokeCanvas.height=b);const $=a.ctx;$.setTransform(1,0,0,1,0,0),$.clearRect(0,0,v,b);const O=a.strokeCtx;O.setTransform(1,0,0,1,0,0),O.clearRect(0,0,v,b);const M=Math.min(xe*e,Math.max(v,b));let k,H,B,E;A?(k=u>0?v:0,B=u>0?v-M:M,H=b*.5,E=b*.5):(H=p>0?b:0,E=p>0?b-M:M,k=v*.5,B=v*.5);const P=$.createLinearGradient(k,H,B,E);P.addColorStop(0,`rgba(0,0,0,${va})`),P.addColorStop(.5,`rgba(0,0,0,${ba})`),P.addColorStop(1,`rgba(0,0,0,${wa})`);const N=s/e,W=Math.max(1,Math.round(Aa*Math.max(.1,N/140)*e));let D,re,ie,se,Me=!1,Se=!1;if(A){const Q=Math.max(o.top,n.top),ce=Math.min(o.bottom,n.bottom);Me=!0,D=u>0?v-W:0,re=Math.round((Q-n.top+T)*e),ie=W,se=Math.max(1,Math.round((ce-Q)*e))}else{const Q=Math.max(o.left,n.left),ce=Math.min(o.right,n.right);Se=!0,D=Math.round((Q-n.left+T)*e),re=p>0?b-W:0,ie=Math.max(1,Math.round((ce-Q)*e)),se=W}const Re={x:D,y:re,w:ie,h:se,flipX:Me,flipY:Se},le={x:0,y:0,w:v,h:b,r:Math.max(0,a.cornerRadius*e)},ut=Math.min(De,L*Ca*ka*Ea);Ha($,r,s,c,v,b,ut,P,Re,le,e),Na(O,r,s,c,v,b,le,L,y,P,Sa,Re),Ga(O,le,R,k,H,B,E,Math.min(.85,Ta*L)),$.globalCompositeOperation="source-over",O.globalCompositeOperation="source-over"}}let pe=!1,Xe=0;function Xa(){pe||(pe=!0,!(typeof requestAnimationFrame>"u")&&requestAnimationFrame(e=>{pe=!1,!(e-Xe<gt)&&(Xe=e,Ua())}))}const Ve="metal-fx-styles",Va=`
+`;function Ct(t,e,n){const o=t.createShader(e);if(!o)throw new Error("metal-fx: gl.createShader returned null");if(t.shaderSource(o,n),t.compileShader(o),!t.getShaderParameter(o,t.COMPILE_STATUS)){const a=t.getShaderInfoLog(o);throw t.deleteShader(o),new Error(`metal-fx: shader compile failed: ${a??"(no info log)"}`)}return o}function Te(t,e,n){const o=t.createProgram();if(!o)throw new Error("metal-fx: gl.createProgram returned null");if(t.attachShader(o,e),t.attachShader(o,n),t.linkProgram(o),!t.getProgramParameter(o,t.LINK_STATUS)){const a=t.getProgramInfoLog(o);throw t.deleteProgram(o),new Error(`metal-fx: program link failed: ${a??"(no info log)"}`)}return o}const Yt=140,jt=40,Kt=1.6,Qt=1.3;let i=null,et=null;function Ee(t){et=t}const ke=["u_resolution","u_time","u_color1","u_color2","u_color3","u_color4","u_color5","u_color6","u_color7","u_alpha1","u_alpha2","u_alpha3","u_alpha4","u_alpha5","u_alpha6","u_alpha7","u_intensity","u_scale","u_direction","u_softness","u_distortion","u_complexity","u_shape","u_vignette","u_vigOpacity","u_blur","u_shaderOpacity"];function Tt(t){t.enable(t.BLEND),t.blendFunc(t.SRC_ALPHA,t.ONE_MINUS_SRC_ALPHA);const e=Ct(t,t.VERTEX_SHADER,Ae),n=Ct(t,t.FRAGMENT_SHADER,Ce),o=Te(t,e,n);t.useProgram(o);const a=t.createBuffer();if(!a)throw new Error("metal-fx: gl.createBuffer returned null");t.bindBuffer(t.ARRAY_BUFFER,a),t.bufferData(t.ARRAY_BUFFER,new Float32Array([-1,-1,1,-1,-1,1,-1,1,1,-1,1,1]),t.STATIC_DRAW);const r=t.getAttribLocation(o,"a_position");t.enableVertexAttribArray(r),t.vertexAttribPointer(r,2,t.FLOAT,!1,0,0);const s={};for(const c of ke)s[c]=t.getUniformLocation(o,c);return{program:o,buffer:a,uniforms:s}}function Zt(){if(i)return i;const t=Math.min(ye,typeof window<"u"&&window.devicePixelRatio||1),e=Math.round(we*t),n=typeof OffscreenCanvas<"u";let o,a;if(n)o=new OffscreenCanvas(e,e),a=o.getContext("webgl",{alpha:!0,premultipliedAlpha:!1,antialias:!1});else{const d=document.createElement("canvas");d.width=e,d.height=e,a=d.getContext("webgl",{alpha:!0,premultipliedAlpha:!1,antialias:!1,preserveDrawingBuffer:!0})??d.getContext("experimental-webgl"),o=d}if(!a)throw new Error("metal-fx: WebGL not supported");const{program:r,buffer:s,uniforms:c}=Tt(a),l=d=>{d.preventDefault(),i&&(i.contextLost=!0)},f=()=>{if(!i)return;const d=Tt(i.gl);i.program=d.program,i.buffer=d.buffer,i.uniforms=d.uniforms,i.presetDirty=!0,i.contextLost=!1,et==null||et()};return o.addEventListener("webglcontextlost",l,!1),o.addEventListener("webglcontextrestored",f,!1),i={glCanvas:o,gl:a,program:r,buffer:s,uniforms:c,preset:vt.chromatic.modes.dark,presetDirty:!0,contextLost:!1,useOffscreen:n,frameBitmap:null,startMs:performance.now(),pausedMs:0,pausedAtMs:null,rafId:0,dpr:t,instances:new Set,frameCount:0,glowQueue:[],glowIdx:0,glowSkip:0,glowPixels:new Uint8Array(e*e*4),glowPixelsW:e,glowPixelsH:e},i}function Ie(){var a;if(!i)return;const{gl:t,program:e,buffer:n,frameBitmap:o}=i;try{o==null||o.close(),t.deleteBuffer(n),t.deleteProgram(e),(a=t.getExtension("WEBGL_lose_context"))==null||a.loseContext()}catch{}i=null}let Et=0;function at(){if(!i)return;const t=performance.now();if(t-Et<xe)return;Et=t;const{gl:e,glCanvas:n}=i,o=n.width,a=n.height;(i.glowPixelsW!==o||i.glowPixelsH!==a)&&(i.glowPixelsW=o,i.glowPixelsH=a,i.glowPixels=new Uint8Array(o*a*4)),e.readPixels(0,0,o,a,e.RGBA,e.UNSIGNED_BYTE,i.glowPixels)}const X={bx:0,by:0};function _t(t,e,n){if(!i)return X.bx=0,X.by=0,X;const{glCanvas:o}=i,a=o.width,r=o.height,s=t.dpr,c=t.cssWidth*s,l=t.cssHeight*s,f=Yt*s,d=jt*s;let g=c*(a/f)/t.shaderScale,u=l*(r/d)/t.shaderScale;g>a&&(g=a),u>r&&(u=r);const h=(a-g)/2,p=(r-u)/2,m=h+e/t.cssWidth*g,C=p+n/t.cssHeight*u;return X.bx=Math.round(m),X.by=Math.round(r-1-C),X}const W={r:0,g:0,b:0,lum:0,count:0};function Jt(t,e,n,o,a,r){const s=Math.max(1,r|0),c=Math.max(0,o-s),l=Math.min(e,o+s+1),f=Math.max(0,a-s),d=Math.min(n,a+s+1);W.r=0,W.g=0,W.b=0,W.lum=0,W.count=0;for(let g=f;g<d;g++){const u=g*e;for(let h=c;h<l;h++){const p=(u+h)*4;W.r+=t[p],W.g+=t[p+1],W.b+=t[p+2],W.lum+=(.2126*t[p]+.7152*t[p+1]+.0722*t[p+2])/255,W.count++}}return W}const T={r:255,g:255,b:255};function kt(t,e,n,o){if(!i)return 0;at();const a=_t(t,e,n),r=Jt(i.glowPixels,i.glowPixelsW,i.glowPixelsH,a.bx,a.by,o);return r.count>0?r.lum/r.count:0}function Oe(t,e,n,o){if(!i)return T.r=255,T.g=255,T.b=255,T;at();const a=_t(t,e,n),r=Jt(i.glowPixels,i.glowPixelsW,i.glowPixelsH,a.bx,a.by,o);return r.count===0?(T.r=255,T.g=255,T.b=255,T):(T.r=r.r/r.count,T.g=r.g/r.count,T.b=r.b/r.count,T)}function Le(t,e,n,o){if(!i)return T.r=255,T.g=255,T.b=255,T;at();const a=_t(t,e,n),{glowPixels:r,glowPixelsW:s,glowPixelsH:c}=i,l=Math.max(1,o|0),f=Math.max(0,a.bx-l),d=Math.min(s,a.bx+l+1),g=Math.max(0,a.by-l),u=Math.min(c,a.by+l+1);let h=-1;T.r=255,T.g=255,T.b=255;for(let p=g;p<u;p++){const m=p*s;for(let C=f;C<d;C++){const x=(m+C)*4,I=r[x],R=r[x+1],L=r[x+2],F=Math.max(I,R,L),y=Math.min(I,R,L),S=(F>0?(F-y)/F:0)*(.35+.65*(F/255));S>h&&(h=S,T.r=I,T.g=R,T.b=L)}}return T}Ee(()=>{i&&i.instances.size>0&&i.pausedAtMs===null&&K()});typeof document<"u"&&document.addEventListener("visibilitychange",()=>{!i||i.pausedAtMs!==null||i.contextLost||(document.hidden?bt():i.instances.size>0&&K())});function te(t){const e=Zt(),n=t.hostCanvas.getContext("2d",{alpha:!0});if(!n)throw new Error("metal-fx: canvas 2D context unavailable");const o=t.scale??1,a={canvas:t.hostCanvas,ctx:n,cssWidth:t.cssWidth,cssHeight:t.cssHeight,cornerRadius:t.cornerRadius,kind:t.kind,ringCssPx:t.ringCssPx??(t.kind==="circle"?2:1)*o,shaderScale:t.shaderScale??(t.kind==="circle"?Qt:Kt)*o,opacityMul:t.opacityMul??1,visible:!0,paused:t.paused??!1,everCopied:!1,dpr:typeof window<"u"&&window.devicePixelRatio||1,scale:o,onAfterFrame:t.onAfterFrame,onFirstCopy:t.onFirstCopy};return oe(a),e.instances.add(a),e.rafId===0&&e.pausedAtMs===null&&K(),a}function ee(t){if(!i)return;i.instances.delete(t);const e=i.glowQueue.indexOf(t);e!==-1&&i.glowQueue.splice(e,1),i.instances.size===0&&(bt(),Ie())}function Pe(t){i&&(i.glowQueue.includes(t)||i.glowQueue.push(t))}function Fe(t){if(!i)return;const e=i.glowQueue.indexOf(t);e!==-1&&i.glowQueue.splice(e,1)}function Y(t,e){let n=!1;e.cssWidth!==void 0&&e.cssWidth!==t.cssWidth&&(t.cssWidth=e.cssWidth,n=!0),e.cssHeight!==void 0&&e.cssHeight!==t.cssHeight&&(t.cssHeight=e.cssHeight,n=!0),e.cornerRadius!==void 0&&(t.cornerRadius=e.cornerRadius),e.scale!==void 0&&(t.scale=e.scale),e.kind!==void 0&&e.kind!==t.kind&&(t.kind=e.kind,e.shaderScale===void 0&&(t.shaderScale=(e.kind==="circle"?Qt:Kt)*t.scale),e.ringCssPx===void 0&&(t.ringCssPx=(e.kind==="circle"?2:1)*t.scale)),e.shaderScale!==void 0&&(t.shaderScale=e.shaderScale),e.ringCssPx!==void 0&&(t.ringCssPx=e.ringCssPx),e.opacityMul!==void 0&&(t.opacityMul=e.opacityMul),e.paused!==void 0&&e.paused!==t.paused&&(t.paused=e.paused,!e.paused&&i&&i.rafId===0&&i.pausedAtMs===null&&!i.contextLost&&K()),n&&oe(t)}function $e(t,e){t.visible=e,e&&i&&i.rafId===0&&i.pausedAtMs===null&&!i.contextLost&&K()}function ne(t,e){const n=Zt();n.preset=vt[t].modes[e],n.presetDirty=!0}function He(){!i||i.pausedAtMs!==null||(i.pausedAtMs=performance.now(),bt())}function Ne(){!i||i.pausedAtMs===null||(i.pausedMs+=performance.now()-i.pausedAtMs,i.pausedAtMs=null,i.instances.size>0&&K())}let gt=null;function We(t){gt=t}function oe(t){t.dpr=typeof window<"u"&&window.devicePixelRatio||1;const e=Math.max(1,Math.round(t.cssWidth*t.dpr)),n=Math.max(1,Math.round(t.cssHeight*t.dpr));t.canvas.width!==e&&(t.canvas.width=e),t.canvas.height!==n&&(t.canvas.height=n)}function Ge(t){const{ctx:e,dpr:n,canvas:o}=t,a=t.ringCssPx*n,r=o.width,s=o.height,c=Math.max(0,(t.cornerRadius-t.ringCssPx)*n);e.save(),e.globalCompositeOperation="destination-out",e.fillStyle="#000",e.beginPath(),e.roundRect(a,a,r-2*a,s-2*a,c),e.fill(),e.restore()}function De(t){var h;if(!i)return;const e=i.frameBitmap??i.glCanvas,n=t.dpr,o=t.canvas.width,a=t.canvas.height;if(o<1||a<1)return;const r=i.glCanvas.width,s=i.glCanvas.height,c=Yt*n,l=jt*n;let f=o*(r/c)/t.shaderScale,d=a*(s/l)/t.shaderScale;f>r&&(f=r),d>s&&(d=s);const g=Math.max(0,(r-f)/2),u=Math.max(0,(s-d)/2);if(t.ctx.clearRect(0,0,o,a),t.opacityMul<1&&(t.ctx.globalAlpha=t.opacityMul),t.ctx.drawImage(e,g,u,f,d,0,0,o,a),t.opacityMul<1&&(t.ctx.globalAlpha=1),Ge(t),t.onFirstCopy){const p=t.onFirstCopy;t.onFirstCopy=void 0,p()}(h=t.onAfterFrame)==null||h.call(t)}function Be(){if(!i)return;const{gl:t,uniforms:e,preset:n,glCanvas:o}=i;e.u_resolution&&t.uniform2f(e.u_resolution,o.width,o.height);for(let a=0;a<7;a++){const r=e[`u_color${a+1}`];if(r){const[c,l,f]=Vt(n.colors[a]);t.uniform3f(r,c,l,f)}const s=e[`u_alpha${a+1}`];s&&t.uniform1f(s,n.alphas[a])}e.u_intensity&&t.uniform1f(e.u_intensity,n.intensity),e.u_scale&&t.uniform1f(e.u_scale,n.scale),e.u_direction&&t.uniform1f(e.u_direction,n.direction*Math.PI/180),e.u_softness&&t.uniform1f(e.u_softness,n.softness),e.u_distortion&&t.uniform1f(e.u_distortion,n.distortion),e.u_complexity&&t.uniform1f(e.u_complexity,n.complexity),e.u_shape&&t.uniform1f(e.u_shape,n.shape),e.u_vignette&&t.uniform1f(e.u_vignette,n.vignette),e.u_vigOpacity&&t.uniform1f(e.u_vigOpacity,n.vigOpacity),e.u_blur&&t.uniform1f(e.u_blur,n.blur),e.u_shaderOpacity&&t.uniform1f(e.u_shaderOpacity,n.shaderOpacity),i.presetDirty=!1}function ze(t){if(!i)return;const{gl:e,uniforms:n,preset:o,glCanvas:a}=i,r=(t-i.startMs-i.pausedMs)/1e3*o.speed;e.viewport(0,0,a.width,a.height),e.clearColor(0,0,0,0),e.clear(e.COLOR_BUFFER_BIT),i.presetDirty&&Be(),n.u_time&&e.uniform1f(n.u_time,r),e.drawArrays(e.TRIANGLES,0,6),i.frameCount++}let It=0;function ae(t){var n;if(!i)return;if(i.contextLost){i.rafId=0;return}let e=!1;for(const o of i.instances)if(o.visible&&(!o.paused||!o.everCopied)){e=!0;break}if(!e){i.rafId=0;return}if(i.rafId=requestAnimationFrame(ae),!(t-It<me)){It=t,ze(t),i.useOffscreen&&(i.glowQueue.length>0&&at(),(n=i.frameBitmap)==null||n.close(),i.frameBitmap=i.glCanvas.transferToImageBitmap());for(const o of i.instances)o.visible&&(o.paused&&o.everCopied||(De(o),o.everCopied=!0));if(gt&&i.glowQueue.length>0&&++i.glowSkip%ve===0){const o=i.glowQueue;i.glowIdx>=o.length&&(i.glowIdx=0);const a=o[i.glowIdx];a.visible&&!a.paused&&gt(a,t),i.glowIdx++}}}function K(){!i||i.rafId!==0||(i.rafId=requestAnimationFrame(ae))}function bt(){i&&(i.rafId!==0&&cancelAnimationFrame(i.rafId),i.rafId=0)}const nt={linear:t=>t,smoothstep:t=>t*t*(3-2*t)};function q(t,e,n,o=nt.linear){return{from:t,to:e,dur:n,ease:o,startMs:-1,val:t,done:!1}}function V(t,e){t.startMs=e,t.val=t.from,t.done=!1}function Ot(t,e){if(t.done||t.startMs<0)return t.val;const n=Math.min(1,(e-t.startMs)/t.dur);return t.val=t.from+(t.to-t.from)*t.ease(n),n>=1&&(t.done=!0),t.val}const Ue=1.5,J=1/3,Xe=4*J,qe=2*J,Ve=2*J,Ye=1.35*J,je=13*J;function wt(t,e,n){const o=Math.max(0,Math.min(n,Math.min(t,e)/2));return 2*Math.max(0,t-2*o)+2*Math.max(0,e-2*o)+2*Math.PI*o}function yt(t,e,n,o){return o==="circle"?2*Math.PI*Math.max(0,Math.min(n,Math.min(t,e)/2)):wt(t,e,n)}function Z(t,e,n,o,a,r,s,c){const l=c||{x:0,y:0},f=Math.max(0,Math.min(o,Math.min(e,n)/2));if(s==="circle"){const x=2*Math.PI*f;if(x<=1e-4)return l.x=e*.5,l.y=n*.5,l;t=(t%x+x)%x;const I=-Math.PI/2+t/x*Math.PI*2,R=Math.max(0,f-a+r);return l.x=e*.5+R*Math.cos(I),l.y=n*.5+R*Math.sin(I),l}const d=Math.max(0,e-2*f),g=Math.max(0,n-2*f),u=Math.PI*f/2,h=2*(d+g)+4*u;t=(t%h+h)%h;const p=Math.max(0,f-a+r);let m=t;if(m<d)return l.x=f+m,l.y=a-r,l;if(m-=d,m<u){const x=-Math.PI/2+(u>0?m/u:0)*(Math.PI/2);return l.x=e-f+p*Math.cos(x),l.y=f+p*Math.sin(x),l}if(m-=u,m<g)return l.x=e-a+r,l.y=f+m,l;if(m-=g,m<u){const x=(u>0?m/u:0)*(Math.PI/2);return l.x=e-f+p*Math.cos(x),l.y=n-f+p*Math.sin(x),l}if(m-=u,m<d)return l.x=e-f-m,l.y=n-a+r,l;if(m-=d,m<u){const x=Math.PI/2+(u>0?m/u:0)*(Math.PI/2);return l.x=f+p*Math.cos(x),l.y=n-f+p*Math.sin(x),l}if(m-=u,m<g)return l.x=a-r,l.y=n-f-m,l;m-=g;const C=Math.PI+(u>0?m/u:0)*(Math.PI/2);return l.x=f+p*Math.cos(C),l.y=f+p*Math.sin(C),l}function Lt(t,e){const n=t*2/e;let o="";for(let a=0;a<=e;a++){const r=-t+a*n;o+=(a===0?"M ":"L ")+r.toFixed(3)+" 0 "}return o}const ft={x:0,y:0},dt={x:0,y:0};function Ke(t,e,n,o,a,r){return Z(t-.1,e,n,o,a,0,r,ft),Z(t+.1,e,n,o,a,0,r,dt),Math.atan2(dt.y-ft.y,dt.x-ft.x)}function Pt(t,e,n){const o=Math.max(0,Math.min(1,(n-t)/(e-t)));return o*o*(3-2*o)}function Qe(t){const e=yt(t.width,t.height,t.cornerRadius,t.kind),n=Ue*(t.scale??1),o=[];for(let a=0;a<At;a++){const r=a/At*e,s=Z(r,t.width,t.height,t.cornerRadius,n,0,t.kind);o.push({x:s.x,y:s.y,arc:r})}return o}function Ze(t,e){const{width:n,height:o,cornerRadius:a}=t,r=t.scale??1,s=t.kind==="circle"?2:1,c=Math.max(0,a-s),l=(-200*r).toFixed(0),f=l,d=(540*r).toFixed(0),g=(440*r).toFixed(0),u=`x="${l}" y="${f}" width="${d}" height="${g}"`,h=`${u} filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"`,p=C=>(C*r).toFixed(3),m=C=>(C*r).toFixed(3);return["<defs>",`<filter id="${e}_bXl" ${h}><feGaussianBlur stdDeviation="${m(8.4)}"/></filter>`,`<filter id="${e}_bLg" ${h}><feGaussianBlur stdDeviation="${m(4.8)}"/></filter>`,`<filter id="${e}_bMd" ${h}><feGaussianBlur stdDeviation="${m(2.1)}"/></filter>`,`<filter id="${e}_bSm" ${h}><feGaussianBlur stdDeviation="${m(.9)}"/></filter>`,`<filter id="${e}_ebO" ${h}><feGaussianBlur stdDeviation="${m(Ve)}"/></filter>`,`<filter id="${e}_ebC" ${h}><feGaussianBlur stdDeviation="${m(Ye)}"/></filter>`,`<radialGradient id="${e}_fg" cx="0.5" cy="0.5" r="0.5"><stop offset="0" stop-color="white"/><stop offset="0.30" stop-color="white"/><stop offset="0.65" stop-color="#404040"/><stop offset="1" stop-color="black"/></radialGradient>`,`<mask id="${e}_fm" maskUnits="userSpaceOnUse" ${u}><rect ${u} fill="black"/><circle id="${e}_fc" cx="0" cy="0" r="${(je*r).toFixed(3)}" fill="url(#${e}_fg)"/></mask>`,`<mask id="${e}_rm" maskUnits="userSpaceOnUse" ${u}><rect ${u} fill="#808080"/><rect x="0" y="0" width="${n}" height="${o}" rx="${a}" ry="${a}" fill="white"/><rect x="${s}" y="${s}" width="${n-s*2}" height="${o-s*2}" rx="${c}" ry="${c}" fill="black"/></mask>`,"</defs>",`<g id="${e}_h" mask="url(#${e}_rm)" opacity="0">`,`<rect ${u} fill="none" pointer-events="none"/>`,`<g id="${e}_hI" stroke="white">`,`<path id="${e}_pXl" stroke-width="${p(26.4)}" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.385" filter="url(#${e}_bXl)"/>`,`<path id="${e}_pLg" stroke-width="${p(15.6)}" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.595" filter="url(#${e}_bLg)"/>`,`<path id="${e}_pMd" stroke-width="${p(7.2)}" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.70" filter="url(#${e}_bMd)"/>`,`<path id="${e}_pSm" stroke-width="${p(3)}" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.70" filter="url(#${e}_bSm)"/>`,"</g></g>",`<g id="${e}_e" mask="url(#${e}_rm)" opacity="0">`,`<rect ${u} fill="none" pointer-events="none"/>`,`<g mask="url(#${e}_fm)">`,`<g id="${e}_eI" stroke="white">`,`<path id="${e}_eO" stroke-width="${p(Xe)}" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.85" filter="url(#${e}_ebO)"/>`,`<path id="${e}_eC" stroke-width="${p(qe)}" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="1.0" filter="url(#${e}_ebC)"/>`,"</g></g></g>"].join("")}const Je=.00875,Ft=.08,$t=.32,tn=.05,en=3e3,Ht=.85,tt=.34,ut=1500,nn=15,on=.0075,an=120,rn=1.5,sn=7.8,ln=9.13952,cn=1,fn=1/3,dn=.8,un=3.51,Nt=2e3,pt=400,pn=2.625,hn=1.008,mn=.31,re=140,ie=40,se=20;let gn=0;const D={x:0,y:0};function Wt(t,e){const n=`mfxg_${++gn}`,o=document.createElementNS("http://www.w3.org/2000/svg","svg");o.setAttribute("class","metal-fx-glow-svg"),o.setAttribute("preserveAspectRatio","none"),o.setAttribute("viewBox",`0 0 ${e.width} ${e.height}`),o.innerHTML=Ze(e,n),t.appendChild(o);const a=x=>o.querySelector(`#${n}_${x}`),r=a("h"),s=a("hI"),c=a("e"),l=a("eI"),f=a("fc"),d=yt(e.width,e.height,e.cornerRadius,e.kind)/wt(re,ie,se),g=Math.max(1,sn*d),u=Math.max(.6,ln*fn*d),h=Lt(g,_e),p=Lt(u,be),m=[a("pXl"),a("pLg"),a("pMd"),a("pSm")],C=[a("eO"),a("eC")];for(const x of m)x.setAttribute("d",h);for(const x of C)x.setAttribute("d",p);return s.style.transformOrigin="0 0",l.style.transformOrigin="0 0",s.style.willChange="transform",l.style.willChange="transform",s.style.transition="transform 100ms linear",l.style.transition="transform 100ms linear",r.style.willChange="opacity",c.style.willChange="opacity",r.style.transition="opacity 100ms linear",c.style.transition="opacity 100ms linear",f.style.willChange="transform",{svg:o,haloGroup:r,haloInner:s,extraGroup:c,extraInner:l,fadeCircle:f,width:e.width,height:e.height,cornerRadius:e.cornerRadius,kind:e.kind,scale:e.scale??1,perim:Qe(e),currentIdx:0,appearedAt:0,glowOpacity:0,relocTween:null,relocNextIdx:-1,wanderS:0,wanderTargetS:0,wanderFrames:0,tintFrom:{r:255,g:255,b:255},tintTarget:{r:255,g:255,b:255},tintTween:null,tintHoldUntil:0,lastHaloStroke:"",lastExtraStroke:""}}function xn(t,e,n,o,a="dark"){var B;const{width:r,height:s,cornerRadius:c,perim:l}=t;if(l.length===0)return;const f=2;let d=-1,g=t.currentIdx,u=0;for(let k=0;k<l.length;k++){const P=l[k],N=kt(e,P.x,P.y,f);N>d&&(d=N,g=k),k===t.currentIdx&&(u=N)}const h=t.appearedAt>0&&n-t.appearedAt<en,p=tt+(Ht-tt)*Pt(Ft,$t,u),m=!h&&d-u>tn;if(!t.relocTween||t.relocTween.done)if(t.appearedAt===0)t.currentIdx=g,t.appearedAt=n,t.wanderS=0,t.wanderTargetS=0,t.wanderFrames=0,t.relocTween=q(0,p,ut,nt.smoothstep),V(t.relocTween,n);else if((B=t.relocTween)!=null&&B.done&&t.relocTween.to===0){t.currentIdx=t.relocNextIdx,t.appearedAt=n,t.wanderS=0,t.wanderTargetS=0,t.wanderFrames=0;const k=l[t.currentIdx],P=kt(e,k.x,k.y,f),N=tt+(Ht-tt)*Pt(Ft,$t,P);t.relocTween=q(0,N,ut,nt.smoothstep),V(t.relocTween,n)}else m?(t.relocNextIdx=g,t.relocTween=q(t.glowOpacity,0,ut,nt.smoothstep),V(t.relocTween,n)):t.glowOpacity+=(p-t.glowOpacity)*Je;t.relocTween&&(t.glowOpacity=Ot(t.relocTween,n)),t.glowOpacity=Math.max(0,Math.min(1,t.glowOpacity));const C=yt(r,s,c,t.kind)/wt(re,ie,se),x=nn*C;t.wanderFrames++>=an&&(t.wanderTargetS=(Math.random()*2-1)*x,t.wanderFrames=0),t.wanderS+=(t.wanderTargetS-t.wanderS)*on;const I=l[t.currentIdx].arc+t.wanderS,R=rn*t.scale;Z(I,r,s,c,R,0,t.kind,D);const L=D.x,F=D.y,y=Ke(I,r,s,c,R,t.kind),w=`translate(${L.toFixed(3)}px,${F.toFixed(3)}px) rotate(${y.toFixed(4)}rad)`;t.haloInner.style.transform=w;const S=cn*C*t.scale;Z(I,r,s,c,R,S,t.kind,D),t.extraInner.style.transform=`translate(${D.x.toFixed(3)}px,${D.y.toFixed(3)}px) rotate(${y.toFixed(4)}rad)`,t.fadeCircle.style.transform=`translate(${D.x.toFixed(3)}px,${D.y.toFixed(3)}px)`;const A=a==="light",v=A?Le(e,L,F,f):Oe(e,L,F,f);t.tintTween?t.tintTween.done&&(A?(t.tintFrom={r:t.tintFrom.r+(t.tintTarget.r-t.tintFrom.r)*t.tintTween.val,g:t.tintFrom.g+(t.tintTarget.g-t.tintFrom.g)*t.tintTween.val,b:t.tintFrom.b+(t.tintTarget.b-t.tintFrom.b)*t.tintTween.val},t.tintTarget={...v},t.tintTween=q(0,1,pt),V(t.tintTween,n)):n>=t.tintHoldUntil&&(t.tintFrom={...t.tintTarget},t.tintTarget={...v},t.tintTween=q(0,1,pt),V(t.tintTween,n),t.tintHoldUntil=n+Nt)):(t.tintFrom={...v},t.tintTarget={...v},t.tintTween=q(0,1,pt),V(t.tintTween,n),t.tintHoldUntil=A?0:n+Nt),Ot(t.tintTween,n);const _=t.tintTween.val;let $,O,M;if(A)$=Math.round(t.tintFrom.r+(t.tintTarget.r-t.tintFrom.r)*_),O=Math.round(t.tintFrom.g+(t.tintTarget.g-t.tintFrom.g)*_),M=Math.round(t.tintFrom.b+(t.tintTarget.b-t.tintFrom.b)*_);else{const k=t.tintFrom.r+(t.tintTarget.r-t.tintFrom.r)*_,P=t.tintFrom.g+(t.tintTarget.g-t.tintFrom.g)*_,N=t.tintFrom.b+(t.tintTarget.b-t.tintFrom.b)*_,G=Math.max(k,P,N)||1;$=Math.round(255*(k/G)),O=Math.round(255*(P/G)),M=Math.round(255*(N/G))}const E=`rgb(${$},${O},${M})`;if(E!==t.lastHaloStroke&&(t.lastHaloStroke=E,t.haloInner.style.stroke=E),A){const k=pe($,O,M),[P,N,G]=he(k[0],Math.min(1,k[1]*pn),Math.max(mn,k[2]*hn)),z=`rgb(${P},${N},${G})`;z!==t.lastExtraStroke&&(t.lastExtraStroke=z,t.extraInner.style.stroke=z)}else t.lastExtraStroke!=="#ffffff"&&(t.lastExtraStroke="#ffffff",t.extraInner.style.stroke="#ffffff");const H=Math.max(0,Math.min(1,o));t.haloGroup.style.opacity=(t.glowOpacity*dn*H).toFixed(3),t.extraGroup.style.opacity=Math.min(1,t.glowOpacity*un*H).toFixed(3)}const xt=12,Gt=32,Dt=1,Bt=.55,vn=1,_n=1,bn=.85,wn=0,yn=1.3,zt=3.6,Mn=.7,Rn=1,Sn=.52,An=1,Cn=.044,Tn=235,En=2.535,kn=.7,In=.5,On=new Set(["INPUT","TEXTAREA","SELECT","OPTION"]);function Ln(t,e){const n=Math.max(t.left-e.right,e.left-t.right,0),o=Math.max(t.top-e.bottom,e.top-t.bottom,0);return Math.sqrt(n*n+o*o)}function Pn(t,e,n,o){return!(Math.min(t.bottom,e.bottom)-Math.max(t.top,e.top)<n||Math.max(t.left-e.right,e.left-t.right,0)>o)}function Fn(t,e,n,o){return Math.min(t.right,e.right)-Math.max(t.left,e.left)<n?!1:Math.max(t.top-e.bottom,e.top-t.bottom,0)<=o}function U(t,e,n,o,a,r){const s=Math.max(0,Math.min(r,o*.5,a*.5)),c=t.roundRect;if(typeof c=="function"){c.call(t,e,n,o,a,s);return}t.moveTo(e+s,n),t.lineTo(e+o-s,n),t.quadraticCurveTo(e+o,n,e+o,n+s),t.lineTo(e+o,n+a-s),t.quadraticCurveTo(e+o,n+a,e+o-s,n+a),t.lineTo(e+s,n+a),t.quadraticCurveTo(e,n+a,e,n+a-s),t.lineTo(e,n+s),t.quadraticCurveTo(e,n,e+s,n)}function le(t,e,n,o,a){if(!a.flipX&&!a.flipY){t.drawImage(e,0,0,n,o,a.x,a.y,a.w,a.h);return}t.save(),a.flipX&&(t.translate(a.x+a.w,0),t.scale(-1,1)),a.flipY&&(t.translate(0,a.y+a.h),t.scale(1,-1)),t.drawImage(e,0,0,n,o,a.flipX?0:a.x,a.flipY?0:a.y,a.w,a.h),t.restore()}const $n=4;function Hn(t,e,n,o,a,r,s){if(o<=2*s||a<=2*s){t.beginPath(),U(t,e,n,o,a,r),t.clip();return}t.beginPath(),U(t,e,n,o,a,r),U(t,e+s,n+s,o-2*s,a-2*s,Math.max(0,r-s)),t.clip("evenodd")}function Nn(t,e,n,o,a,r,s,c,l,f,d){const g=Math.max(1,Math.round((xt+$n*3)*d));let u=Math.max(0,s),h=!0;for(let p=0;p<3&&u>1e-4;p++){const m=Math.min(1,u);t.save(),Hn(t,f.x,f.y,f.w,f.h,f.r,g),t.globalCompositeOperation=h?"source-over":"lighter",h=!1,t.globalAlpha=m,le(t,e,n,o,l),t.globalAlpha=1,t.globalCompositeOperation="destination-in",t.fillStyle=c,t.fillRect(0,0,a,r),t.restore(),u-=m}}function ce(t,e,n,o,a,r,s){const c=s|0;if(c<1||o<=2*c||a<=2*c){t.beginPath(),U(t,e,n,o,a,r),t.clip();return}t.beginPath(),U(t,e,n,o,a,r),U(t,e+c,n+c,o-2*c,a-2*c,Math.max(0,r-c)),t.clip("evenodd")}function Wn(t,e,n,o,a,r,s,c,l,f,d,g){let u=c*d,h=!0;for(let p=0;p<3&&u>1e-4;p++){const m=Math.min(1,u);t.save(),ce(t,s.x,s.y,s.w,s.h,s.r,l),t.globalCompositeOperation=h?"source-over":"lighter",h=!1,t.globalAlpha=m,le(t,e,n,o,g),t.globalAlpha=1,t.globalCompositeOperation="destination-in",t.fillStyle=f,t.fillRect(0,0,a,r),t.restore(),u-=m}}function Gn(t,e,n,o,a,r,s,c){const l=t.createLinearGradient(o,a,r,s);l.addColorStop(0,`rgba(255,255,255,${c.toFixed(3)})`),l.addColorStop(.5,`rgba(255,255,255,${(c*.45).toFixed(3)})`),l.addColorStop(1,"rgba(255,255,255,0)"),t.save(),ce(t,e.x,e.y,e.w,e.h,e.r,n),t.globalCompositeOperation="lighter",t.lineWidth=n*2,t.strokeStyle=l,t.beginPath(),U(t,e.x,e.y,e.w,e.h,e.r),t.stroke(),t.restore()}function fe(t){const e=getComputedStyle(t),n=[parseFloat(e.borderTopLeftRadius)||0,parseFloat(e.borderTopRightRadius)||0,parseFloat(e.borderBottomRightRadius)||0,parseFloat(e.borderBottomLeftRadius)||0].filter(o=>o>0);return n.length?Math.min.apply(null,n):0}function de(t){const e=getComputedStyle(t),n=Math.max(parseFloat(e.borderTopWidth)||0,parseFloat(e.borderRightWidth)||0,parseFloat(e.borderBottomWidth)||0,parseFloat(e.borderLeftWidth)||0);let o=0,a=0;const r=e.boxShadow;if(r&&r!=="none"){const f=r.replace(/rgba?\([^)]*\)/g,u=>u.replace(/,/g,"\0")).split(/,\s*/);let d=1/0,g=1/0;for(const u of f){const h=u.match(/-?\d+(?:\.\d+)?px/g);if(!h||h.length<4)continue;const p=parseFloat(h[3]);p>0&&(/\binset\b/.test(u)?p<d&&(d=p):p<g&&(g=p))}Number.isFinite(d)&&(o=d),Number.isFinite(g)&&(a=g)}const s=Math.max(n,a);return{width:Math.max(n,o,a)||1,outerCssPx:s}}function Ut(t){t.cornerRadius=fe(t.el);const e=de(t.el);t.hairlineWidth=e.width,t.hairlineOuterCssPx=e.outerCssPx}function Dn(t){typeof ResizeObserver<"u"&&(t.resizeObserver=new ResizeObserver(()=>Ut(t)),t.resizeObserver.observe(t.el)),typeof MutationObserver<"u"&&(t.mutationObserver=new MutationObserver(()=>Ut(t)),t.mutationObserver.observe(t.el,{attributes:!0,attributeFilter:["style","class"]}))}function Bn(t){var e,n;(e=t.resizeObserver)==null||e.disconnect(),t.resizeObserver=null,(n=t.mutationObserver)==null||n.disconnect(),t.mutationObserver=null}const j=new Set;function zn(t,e,n){if(typeof document>"u"||On.has(t.tagName))return null;for(const h of j)if(h.el===t)return h;const o=document.createElement("div");o.setAttribute("data-metal-fx-reflection",""),o.setAttribute("aria-hidden","true");const a=document.createElement("canvas");a.className="metal-fx-reflection-canvas";const r=a.getContext("2d",{alpha:!0});if(!r)return null;const s=document.createElement("canvas");s.className="metal-fx-reflection-stroke-canvas";const c=s.getContext("2d",{alpha:!0});if(!c)return null;o.appendChild(a),o.appendChild(s);const l=getComputedStyle(t);let f=!1;l.position==="static"&&(t.style.position="relative",f=!0);let d=!1;l.isolation!=="isolate"&&(t.style.isolation="isolate",d=!0),t.setAttribute("data-metal-fx-reflect-host",""),t.insertBefore(o,t.firstChild);const g=de(t),u={el:t,anchor:e,anchorEl:n,wrap:o,canvas:a,ctx:r,strokeCanvas:s,strokeCtx:c,cornerRadius:fe(t),hairlineWidth:g.width,hairlineOuterCssPx:g.outerCssPx,appliedPositionRelative:f,appliedIsolation:d,resizeObserver:null,mutationObserver:null};return Dn(u),j.add(u),u}function Un(t){for(const e of j)if(e.el===t){Bn(e),e.canvas.width=0,e.canvas.height=0,e.strokeCanvas.width=0,e.strokeCanvas.height=0,e.wrap.parentNode===e.el&&e.el.removeChild(e.wrap),e.el.removeAttribute("data-metal-fx-reflect-host"),e.appliedPositionRelative&&(e.el.style.position=""),e.appliedIsolation&&(e.el.style.isolation=""),j.delete(e);return}}function Xn(){if(j.size===0)return;const t=typeof window<"u"&&window.devicePixelRatio||1,e=new Map;for(const n of j){const o=n.el.getBoundingClientRect();let a=e.get(n.anchorEl);if(a||(a=n.anchorEl.getBoundingClientRect(),e.set(n.anchorEl,a)),o.width<1||o.height<1||a.width<1||a.height<1)continue;if(!Pn(a,o,Dt,Gt)&&!Fn(a,o,Dt,Gt)){n.canvas.width!==1&&(n.canvas.width=1,n.canvas.height=1),n.strokeCanvas.width!==1&&(n.strokeCanvas.width=1,n.strokeCanvas.height=1);continue}const r=n.anchor.canvas,s=r.width|0,c=r.height|0;if(s<4||c<4)continue;const l=(a.left+a.right)*.5,f=(a.top+a.bottom)*.5,d=(o.left+o.right)*.5,g=(o.top+o.bottom)*.5,u=l-d,h=f-g,p=Math.max(a.left-o.right,o.left-a.right,0),m=Math.max(a.top-o.bottom,o.top-a.bottom,0),C=p>=m,x=Ln(a,o);let I=1-Math.min(1,x/xt);I=I*I*(3-2*I);const R=Bt+(vn-Bt)*I,L=Math.min(zt,R*yn*Mn),F=n.anchor.scale??1,y=Math.max(Rn*F,n.hairlineWidth),w=Math.max(1,Math.round(y*t)),S=Math.max(1,Math.round(Math.max(An*F,n.hairlineWidth)*t)),A=n.hairlineOuterCssPx;n.wrap.style.inset=`${-A}px`,n.wrap.style.borderRadius=`${Math.max(0,n.cornerRadius)}px`;const v=Math.max(1,Math.round((o.width+A*2)*t)),_=Math.max(1,Math.round((o.height+A*2)*t));n.canvas.width!==v&&(n.canvas.width=v),n.canvas.height!==_&&(n.canvas.height=_),n.strokeCanvas.width!==v&&(n.strokeCanvas.width=v),n.strokeCanvas.height!==_&&(n.strokeCanvas.height=_);const $=n.ctx;$.setTransform(1,0,0,1,0,0),$.clearRect(0,0,v,_);const O=n.strokeCtx;O.setTransform(1,0,0,1,0,0),O.clearRect(0,0,v,_);const M=Math.min(xt*t,Math.max(v,_));let E,H,B,k;C?(E=u>0?v:0,B=u>0?v-M:M,H=_*.5,k=_*.5):(H=h>0?_:0,k=h>0?_-M:M,E=v*.5,B=v*.5);const P=$.createLinearGradient(E,H,B,k);P.addColorStop(0,`rgba(0,0,0,${_n})`),P.addColorStop(.5,`rgba(0,0,0,${bn})`),P.addColorStop(1,`rgba(0,0,0,${wn})`);const N=s/t,G=Math.max(1,Math.round(Tn*Math.max(.1,N/140)*t));let z,rt,it,st,Mt=!1,Rt=!1;if(C){const Q=Math.max(a.top,o.top),ct=Math.min(a.bottom,o.bottom);Mt=!0,z=u>0?v-G:0,rt=Math.round((Q-o.top+A)*t),it=G,st=Math.max(1,Math.round((ct-Q)*t))}else{const Q=Math.max(a.left,o.left),ct=Math.min(a.right,o.right);Rt=!0,z=Math.round((Q-o.left+A)*t),rt=h>0?_-G:0,it=Math.max(1,Math.round((ct-Q)*t)),st=G}const St={x:z,y:rt,w:it,h:st,flipX:Mt,flipY:Rt},lt={x:0,y:0,w:v,h:_,r:Math.max(0,n.cornerRadius*t)},ue=Math.min(zt,L*En*kn*In);Nn($,r,s,c,v,_,ue,P,St,lt,t),Wn(O,r,s,c,v,_,lt,L,w,P,Sn,St),Gn(O,lt,S,E,H,B,k,Math.min(.85,Cn*L)),$.globalCompositeOperation="source-over",O.globalCompositeOperation="source-over"}}let ht=!1,Xt=0;function qn(){ht||(ht=!0,!(typeof requestAnimationFrame>"u")&&requestAnimationFrame(t=>{ht=!1,!(t-Xt<ge)&&(Xt=t,Xn())}))}const qt="metal-fx-styles",Vn=`
 .metal-fx-root {
   position: relative;
   display: inline-flex;
@@ -226,7 +202,6 @@
 .metal-fx-root[data-theme='light']::after {
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
 }
-/* Circle variant gets a thicker outer rim than the button variant. */
 .metal-fx-root[data-variant='circle']::after {
   box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.1);
 }
@@ -245,12 +220,6 @@
   border-radius: inherit;
 }
 
-/* The inner spacer — defines the inset geometry where the metal ring meets
-   the interior (3 px for Button, 1-2 px for Circle) and carries the Circle dark
-   hairline ('box-shadow: inset' rules below). Intentionally transparent so
-   the wrapper's background propagates through to the punched shader centre,
-   giving consumers a single surface tone to override. See "Single-surface
-   background" in the file header for the rationale. */
 .metal-fx-inner {
   position: absolute;
   inset: 3px;
@@ -275,41 +244,11 @@
   border-radius: var(--mfx-radius, 16px);
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
 }
-/* Circle-variant hairline alpha — light mode.
-   Source-of-truth: index.html L2261-2267. The 0.45-alpha black inset that
-   reads as a single-pixel frame against the dark interior is too heavy
-   on a #ffffff inner: it ends up looking like a hard 2-px black ring
-   against the iridescent shader. Suppressed entirely (alpha 0) — the
-   shader's own iridescent rim already defines the silhouette in light
-   mode, so an extra dark hairline only competes with it. The rule is
-   kept (rather than deleted) as a tunable hook in case a future variant
-   wants to re-introduce a soft edge. NOTE: we keep the dark-mode inset
-   and border-radius values because — unlike index.html — our renderer
-   does NOT overscan the canvas in light mode, so there is no 1-px gap
-   between inner element and shader to compensate for. */
 .metal-fx-root[data-theme='light'][data-variant='circle'][data-shape='pill'] .metal-fx-inner,
 .metal-fx-root[data-theme='light'][data-variant='circle'][data-shape='circle'] .metal-fx-inner {
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0);
 }
 
-/* ─── Combined glow SVG (z=3) ──────────────────────────────────────────────
-   Single SVG per instance that holds BOTH the wide-halo group
-   (#mfx_haloTravel) and the catch-light group (#mfx_extraTravel), exactly
-   mirroring canonical's _buildGlowSvgInner (index.html L8078). One
-   mix-blend-mode: screen lifts the combined composite onto the shader
-   ring; per-frame opacity attributes on each inner group still drive the
-   independent fade-in / fade-out cycles for the halo and the catch-light.
-
-   Why a single SVG: the circle variant anchors halo + catch-light at the same
-   perimeter point, so they overlap in the bright zone. Two separately-
-   screened SVGs would double-screen the overlap (A + B + C - AB - AC -
-   BC + ABC instead of A + B + C - AB - AC once both groups composite
-   in source-over inside one SVG and then screen against the host once).
-   That overlap looked muted versus canonical specifically on the circle
-   variant where both layers travel together.
-
-   Source-of-truth opacity: #btnGlowSvg drops to 0.7 in dark and 0.2746 in
-   light (index.html L632/L643). */
 .metal-fx-glow-svg {
   position: absolute;
   inset: 0;
@@ -321,28 +260,17 @@
   opacity: 0.7;
 }
 .metal-fx-root[data-theme='light'] .metal-fx-glow-svg {
-  /* Light-mode 1-px overscan mirrors .btn-glow-svg in metal.html so the
-     halo stays glued to the visible silhouette (the shader ring there sits
-     1 px outside the host's padding box). */
   inset: -1px;
   width: calc(100% + 2px);
   height: calc(100% + 2px);
   mix-blend-mode: multiply;
-  /* Source-of-truth: html[data-theme="light"] #btnGlowSvg { opacity: 0.2746 }
-     → −35 % from 0.4225 from the original 0.7 dark-mode opacity. */
   opacity: 0.2746;
   filter: saturate(5.355) brightness(0.78);
 }
-/* Circle light-mode small variants (e.g. 36×36 send button): the geometrically
-   shrunk halo loses density when multiplied against #ffffff. Mirror the
-   canonical override at index.html L2316 — bump saturation + drop brightness
-   so the small glow holds together visually. */
 .metal-fx-root[data-variant='circle'][data-shape='circle'][data-theme='light'] .metal-fx-glow-svg {
   filter: saturate(7.5) brightness(0.6);
 }
 
-/* The wrapped child — hoisted into z=5 so it sits above every overlay, with
-   normalized chrome so consumer button styles don't fight the metal frame. */
 .metal-fx-content {
   position: relative;
   z-index: 5;
@@ -360,30 +288,6 @@
   border: 0 !important;
   outline: 0 !important;
   box-shadow: none !important;
-  /* Sizing: we deliberately DO NOT force \`width: 100%; height: 100%\` on the
-     child here. That used to be the contract ("the wrapper is the visible
-     button surface; the child stretches to fill it"), but it created a cyclic
-     percentage dependency: the wrapper is \`inline-flex\` with no intrinsic
-     size, .metal-fx-content is \`width/height: 100%\` of the wrapper, and the
-     child was \`100%\` of .metal-fx-content. With nothing breaking the cycle,
-     icon-only / class-sized children collapsed.
-
-     The new contract: the child sizes itself (intrinsic content, CSS class,
-     or inline style — all work), and the wrapper's \`inline-flex\` wraps it
-     tightly. Consumers who want a metal frame BIGGER than the child (e.g.
-     padding around an icon) size <MetalFx style={{ width, height }}> AND
-     explicitly set width/height on the child to fill (or accept that the
-     child renders at its intrinsic size, centered).
-
-     Typography is intentionally NOT touched. We used to apply
-     \`color: inherit; font: inherit;\` here to "match" the wrapper, but
-     \`font: inherit\` is a shorthand that overrides font-family, font-size,
-     font-weight, AND line-height on the child — which (a) shrank the
-     button height (line-height changes propagate through the flex
-     content box) and (b) scaled em-based icons / font-icons inside the
-     child to whatever the wrapper inherited. The wrapper now stays out
-     of the child's typography entirely; consumers who want typographic
-     normalization can apply it themselves on the child element. */
 }
 
 [data-metal-fx-reflection] {
@@ -411,11 +315,7 @@
   display: block;
   filter: saturate(1.35) brightness(1.75);
 }
-/* Hosts that participate as reflection targets need positioning + isolation
-   so the wrap composites only against the host (not the parent stack). The
-   wrap injects these inline as well, but stating them here keeps reflections
-   working on hosts that already have other inline styles applied. */
 [data-metal-fx-reflect-host] {
   isolation: isolate;
 }
-`;let me=!1;function qa(){if(me||typeof document>"u")return;if(document.getElementById(Ve)){me=!0;return}const e=document.createElement("style");e.id=Ve,e.textContent=Va,document.head.appendChild(e),me=!0}const Ya=["data-variant","data-shape","data-theme","data-paused","data-normalize"];qa();const ja={position:"absolute",inset:"0",width:"100%",height:"100%"},Ka={position:"absolute",inset:"3px"},Qa={position:"absolute",inset:"0",pointerEvents:"none",zIndex:3,borderRadius:"inherit"},ne=new Map;Gt((e,t)=>{const a=ne.get(e);a&&ga(a.handles,e,t,e.opacityMul,a.themeRef.current)});function Ja(e){const t=c=>c!=="auto"?c:typeof window>"u"||!window.matchMedia||window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light",a=w.ref(t(e()));let n=null;const o=()=>{n&&(a.value=n.matches?"dark":"light")},r=()=>{n==null||n.removeEventListener("change",o),n=null},s=()=>{if(r(),e()!=="auto"){a.value=e();return}typeof window>"u"||!window.matchMedia||(n=window.matchMedia("(prefers-color-scheme: dark)"),o(),n.addEventListener("change",o))};return w.onMounted(s),w.watch(e,s),w.onBeforeUnmount(r),a}const Za=w.defineComponent({__name:"MetalFx",props:{variant:{default:"button"},preset:{default:"chromatic"},theme:{default:"auto"},strength:{default:1},paused:{type:Boolean,default:!1},borderRadius:{},normalizeHostStyles:{type:Boolean,default:!0},reflectionTargets:{},disableGlow:{type:Boolean,default:!1},shaderScale:{},ringCssPx:{},scale:{default:1}},setup(e,{expose:t}){const a=e,n=w.ref(null),o=w.ref(null),r=w.ref(null),s=w.ref(null);let c=null,l=null,d=0;const f=w.ref(!1),g=Ja(()=>a.theme),u={get current(){return g.value}},p=w.computed(()=>a.variant==="circle"?"circle":"pill"),h=w.computed(()=>!a.disableGlow);t({rootEl:n});const m=(_,y)=>{if(p.value==="circle")return Math.min(_,y)/2;const R=typeof a.borderRadius=="number"?a.borderRadius:(()=>{var v;const T=(v=s.value)==null?void 0:v.firstElementChild;if(T){const b=parseFloat(getComputedStyle(T).borderTopLeftRadius);if(Number.isFinite(b)&&b>0)return b}return d})();return Math.min(R,Math.min(_,y)/2)};w.watch([()=>a.preset,g],([_,y])=>{at(_,y)},{immediate:!0}),w.watch(()=>a.paused,_=>{c&&Y(c,{paused:_})}),w.watch([()=>a.shaderScale,()=>a.ringCssPx,()=>a.scale],([_,y,R])=>{if(!c)return;const T={};_!==void 0&&(T.shaderScale=_),y!==void 0&&(T.ringCssPx=y),R!==void 0&&(T.scale=R),Object.keys(T).length>0&&Y(c,T)});const A=()=>{c&&Y(c,{opacityMul:Math.max(0,Math.min(1,a.strength))})};w.watch([()=>a.strength,()=>a.variant],A);let x=null;const I=()=>{const _=o.value,y=n.value,R=r.value;if(!_||!y)return;{const M=getComputedStyle(y),k=parseFloat(M.borderTopLeftRadius);d=Number.isFinite(k)?k:0}const T=()=>{const M=y.getBoundingClientRect(),k=Math.max(1,Math.round(M.width)),H=Math.max(1,Math.round(M.height));return{cssWidth:k,cssHeight:H,cornerRadius:m(k,H)}},v=T();c=et({hostCanvas:_,cssWidth:v.cssWidth,cssHeight:v.cssHeight,cornerRadius:v.cornerRadius,kind:p.value,paused:a.paused,shaderScale:a.shaderScale,ringCssPx:a.ringCssPx,scale:a.scale,onFirstCopy:()=>{f.value=!0}}),y.style.setProperty("--mfx-radius",`${v.cornerRadius}px`),y.style.borderRadius=`${v.cornerRadius}px`,A(),R&&(l=Ge(R,{width:v.cssWidth,height:v.cssHeight,cornerRadius:v.cornerRadius,kind:p.value,scale:a.scale}));let b=0;const $=new ResizeObserver(()=>{b===0&&(b=requestAnimationFrame(()=>{b=0;const M=T(),k=c;k&&(Y(k,{cssWidth:M.cssWidth,cssHeight:M.cssHeight,cornerRadius:M.cornerRadius}),y.style.setProperty("--mfx-radius",`${M.cornerRadius}px`),y.style.borderRadius=`${M.cornerRadius}px`,R&&(R.innerHTML="",l=Ge(R,{width:M.cssWidth,height:M.cssHeight,cornerRadius:M.cornerRadius,kind:p.value,scale:a.scale}),k&&l&&ne.set(k,{handles:l,themeRef:u})))}))});$.observe(y);let O=null;typeof IntersectionObserver<"u"&&(O=new IntersectionObserver(M=>{const k=c;if(k)for(const H of M)$t(k,H.isIntersecting)},{rootMargin:"64px"}),O.observe(y)),c&&l&&(ne.set(c,{handles:l,themeRef:u}),Pt(c)),x=()=>{$.disconnect(),O==null||O.disconnect(),b!==0&&cancelAnimationFrame(b);const M=c;M&&(ne.delete(M),Ft(M),tt(M)),c=null,l=null,R&&(R.innerHTML="")}};let S=null;const L=()=>{S==null||S(),S=null;const _=c,y=n.value,R=a.reflectionTargets;if(!_||!y||!R||g.value!=="dark")return;_.onAfterFrame=Xa;const T=R.flatMap(v=>{const b=w.toValue(v);return b?[b]:[]});for(const v of T)Ba(v,_,y);S=()=>{_.onAfterFrame=void 0;for(const v of T)Da(v)}};w.onMounted(()=>{I(),w.nextTick(L)}),w.watch(p,()=>{x==null||x(),x=null,S==null||S(),S=null,I(),w.nextTick(L)},{flush:"post"}),w.watch([()=>a.reflectionTargets,g],()=>{L()},{flush:"post"}),w.onBeforeUnmount(()=>{S==null||S(),S=null,x==null||x(),x=null}),w.watch([()=>a.borderRadius,g,()=>a.variant],()=>{const _=n.value,y=c;if(!_||!y)return;const R=m(y.cssWidth,y.cssHeight);Y(y,{cornerRadius:R}),_.style.setProperty("--mfx-radius",`${R}px`),_.style.borderRadius=`${R}px`},{flush:"post"});const F=w.computed(()=>({"--mfx-strength":String(Math.min(1,Math.max(0,a.strength))),opacity:f.value?1:0,visibility:f.value?"visible":"hidden",transition:f.value?"opacity 0.15s ease-out":"none"}));return(_,y)=>(w.openBlock(),w.createElementBlock("div",{ref_key:"rootRef",ref:n,class:"metal-fx-root","data-variant":e.variant,"data-shape":p.value,"data-theme":w.unref(g),"data-paused":e.paused?"true":void 0,"data-normalize":e.normalizeHostStyles?"true":"false",style:w.normalizeStyle(F.value)},[w.createElementVNode("canvas",{ref_key:"canvasRef",ref:o,class:"metal-fx-canvas",style:ja},null,512),w.createElementVNode("div",{class:"metal-fx-inner","aria-hidden":"true",style:Ka}),w.createElementVNode("div",{ref_key:"glowHostRef",ref:r,"aria-hidden":"true",style:w.normalizeStyle([Qa,h.value?null:{display:"none"}])},null,4),w.createElementVNode("div",{ref_key:"contentRef",ref:s,class:"metal-fx-content"},[w.renderSlot(_.$slots,"default")],512)],12,Ya))}});exports.MetalFx=Za;exports.PRESETS=ve;exports.createInstance=et;exports.destroyInstance=tt;exports.hexToRgb=qe;exports.pauseShared=Ht;exports.resumeShared=Nt;exports.setSharedPreset=at;exports.updateInstance=Y;
+`;let mt=!1;function Yn(){if(mt||typeof document>"u")return;if(document.getElementById(qt)){mt=!0;return}const t=document.createElement("style");t.id=qt,t.textContent=Vn,document.head.appendChild(t),mt=!0}const jn=["data-variant","data-shape","data-theme","data-paused","data-normalize"];Yn();const Kn={position:"absolute",inset:"0",width:"100%",height:"100%"},Qn={position:"absolute",inset:"3px"},Zn={position:"absolute",inset:"0",pointerEvents:"none",zIndex:3,borderRadius:"inherit"},ot=new Map;We((t,e)=>{const n=ot.get(t);n&&xn(n.handles,t,e,t.opacityMul,n.themeRef.current)});function Jn(t){const e=c=>c!=="auto"?c:typeof window>"u"||!window.matchMedia||window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light",n=b.ref(e(t()));let o=null;const a=()=>{o&&(n.value=o.matches?"dark":"light")},r=()=>{o==null||o.removeEventListener("change",a),o=null},s=()=>{if(r(),t()!=="auto"){n.value=t();return}typeof window>"u"||!window.matchMedia||(o=window.matchMedia("(prefers-color-scheme: dark)"),a(),o.addEventListener("change",a))};return b.onMounted(s),b.watch(t,s),b.onBeforeUnmount(r),n}const to=b.defineComponent({__name:"ShingenMetal",props:{variant:{default:"button"},preset:{default:"chromatic"},theme:{default:"auto"},strength:{default:1},paused:{type:Boolean,default:!1},borderRadius:{},normalizeHostStyles:{type:Boolean,default:!0},reflectionTargets:{},disableGlow:{type:Boolean,default:!1},shaderScale:{},ringCssPx:{},scale:{default:1}},setup(t,{expose:e}){const n=t,o=b.ref(null),a=b.ref(null),r=b.ref(null),s=b.ref(null);let c=null,l=null,f=0;const d=b.ref(!1),g=Jn(()=>n.theme),u={get current(){return g.value}},h=b.computed(()=>n.variant==="circle"?"circle":"pill"),p=b.computed(()=>!n.disableGlow);e({rootEl:o});const m=(y,w)=>{if(h.value==="circle")return Math.min(y,w)/2;const S=typeof n.borderRadius=="number"?n.borderRadius:(()=>{var v;const A=(v=s.value)==null?void 0:v.firstElementChild;if(A){const _=parseFloat(getComputedStyle(A).borderTopLeftRadius);if(Number.isFinite(_)&&_>0)return _}return f})();return Math.min(S,Math.min(y,w)/2)};b.watch([()=>n.preset,g],([y,w])=>{ne(y,w)},{immediate:!0}),b.watch(()=>n.paused,y=>{c&&Y(c,{paused:y})}),b.watch([()=>n.shaderScale,()=>n.ringCssPx,()=>n.scale],([y,w,S])=>{if(!c)return;const A={};y!==void 0&&(A.shaderScale=y),w!==void 0&&(A.ringCssPx=w),S!==void 0&&(A.scale=S),Object.keys(A).length>0&&Y(c,A)});const C=()=>{c&&Y(c,{opacityMul:Math.max(0,Math.min(1,n.strength))})};b.watch([()=>n.strength,()=>n.variant],C);let x=null;const I=()=>{const y=a.value,w=o.value,S=r.value;if(!y||!w)return;{const M=getComputedStyle(w),E=parseFloat(M.borderTopLeftRadius);f=Number.isFinite(E)?E:0}const A=()=>{const M=w.getBoundingClientRect(),E=Math.max(1,Math.round(M.width)),H=Math.max(1,Math.round(M.height));return{cssWidth:E,cssHeight:H,cornerRadius:m(E,H)}},v=A();c=te({hostCanvas:y,cssWidth:v.cssWidth,cssHeight:v.cssHeight,cornerRadius:v.cornerRadius,kind:h.value,paused:n.paused,shaderScale:n.shaderScale,ringCssPx:n.ringCssPx,scale:n.scale,onFirstCopy:()=>{d.value=!0}}),w.style.setProperty("--mfx-radius",`${v.cornerRadius}px`),w.style.borderRadius=`${v.cornerRadius}px`,C(),S&&(l=Wt(S,{width:v.cssWidth,height:v.cssHeight,cornerRadius:v.cornerRadius,kind:h.value,scale:n.scale}));let _=0;const $=new ResizeObserver(()=>{_===0&&(_=requestAnimationFrame(()=>{_=0;const M=A(),E=c;E&&(Y(E,{cssWidth:M.cssWidth,cssHeight:M.cssHeight,cornerRadius:M.cornerRadius}),w.style.setProperty("--mfx-radius",`${M.cornerRadius}px`),w.style.borderRadius=`${M.cornerRadius}px`,S&&(S.innerHTML="",l=Wt(S,{width:M.cssWidth,height:M.cssHeight,cornerRadius:M.cornerRadius,kind:h.value,scale:n.scale}),E&&l&&ot.set(E,{handles:l,themeRef:u})))}))});$.observe(w);let O=null;typeof IntersectionObserver<"u"&&(O=new IntersectionObserver(M=>{const E=c;if(E)for(const H of M)$e(E,H.isIntersecting)},{rootMargin:"64px"}),O.observe(w)),c&&l&&(ot.set(c,{handles:l,themeRef:u}),Pe(c)),x=()=>{$.disconnect(),O==null||O.disconnect(),_!==0&&cancelAnimationFrame(_);const M=c;M&&(ot.delete(M),Fe(M),ee(M)),c=null,l=null,S&&(S.innerHTML="")}};let R=null;const L=()=>{R==null||R(),R=null;const y=c,w=o.value,S=n.reflectionTargets;if(!y||!w||!S||g.value!=="dark")return;y.onAfterFrame=qn;const A=S.flatMap(v=>{const _=b.toValue(v);return _?[_]:[]});for(const v of A)zn(v,y,w);R=()=>{y.onAfterFrame=void 0;for(const v of A)Un(v)}};b.onMounted(()=>{I(),b.nextTick(L)}),b.watch(h,()=>{x==null||x(),x=null,R==null||R(),R=null,I(),b.nextTick(L)},{flush:"post"}),b.watch([()=>n.reflectionTargets,g],()=>{L()},{flush:"post"}),b.onBeforeUnmount(()=>{R==null||R(),R=null,x==null||x(),x=null}),b.watch([()=>n.borderRadius,g,()=>n.variant],()=>{const y=o.value,w=c;if(!y||!w)return;const S=m(w.cssWidth,w.cssHeight);Y(w,{cornerRadius:S}),y.style.setProperty("--mfx-radius",`${S}px`),y.style.borderRadius=`${S}px`},{flush:"post"});const F=b.computed(()=>({"--mfx-strength":String(Math.min(1,Math.max(0,n.strength))),opacity:d.value?1:0,visibility:d.value?"visible":"hidden",transition:d.value?"opacity 0.15s ease-out":"none"}));return(y,w)=>(b.openBlock(),b.createElementBlock("div",{ref_key:"rootRef",ref:o,class:"metal-fx-root","data-variant":t.variant,"data-shape":h.value,"data-theme":b.unref(g),"data-paused":t.paused?"true":void 0,"data-normalize":t.normalizeHostStyles?"true":"false",style:b.normalizeStyle(F.value)},[b.createElementVNode("canvas",{ref_key:"canvasRef",ref:a,class:"metal-fx-canvas",style:Kn},null,512),b.createElementVNode("div",{class:"metal-fx-inner","aria-hidden":"true",style:Qn}),b.createElementVNode("div",{ref_key:"glowHostRef",ref:r,"aria-hidden":"true",style:b.normalizeStyle([Zn,p.value?null:{display:"none"}])},null,4),b.createElementVNode("div",{ref_key:"contentRef",ref:s,class:"metal-fx-content"},[b.renderSlot(y.$slots,"default")],512)],12,jn))}});exports.PRESETS=vt;exports.ShingenMetal=to;exports.createInstance=te;exports.destroyInstance=ee;exports.hexToRgb=Vt;exports.pauseShared=He;exports.resumeShared=Ne;exports.setSharedPreset=ne;exports.updateInstance=Y;