@tsogtoodev/shingen-metal 1.0.0

package/dist/index.es.js

@@ -0,0 +1,1605 @@
+import { defineComponent as gt, ref as Y, computed as ue, watch as z, onMounted as Qe, nextTick as Ce, onBeforeUnmount as Je, openBlock as xt, createElementBlock as vt, normalizeStyle as ke, unref as bt, createElementVNode as te, renderSlot as wt, toValue as yt } from "vue";
+function _t(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 Mt(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 St(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 Rt = 66, At = 66, Tt = 1500, Ct = 1, Ee = 16, kt = 16, Et = 8, Lt = 96, Ot = 2, It = {
+  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: 0.18,
+      distortion: 0.3,
+      complexity: 0.68,
+      shape: 1,
+      blur: 1,
+      vignette: 0.26,
+      vigOpacity: 0.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: 0.18,
+      distortion: 0.3,
+      complexity: 0.68,
+      shape: 1,
+      blur: 1,
+      vignette: 0.24,
+      vigOpacity: 0.16,
+      shaderOpacity: 1
+    }
+  }
+}, Pt = {
+  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: 0.18,
+      distortion: 0.3,
+      complexity: 0.68,
+      shape: 1,
+      blur: 1,
+      vignette: 0.26,
+      vigOpacity: 0.6,
+      shaderOpacity: 0.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: 0.18,
+      distortion: 0.3,
+      complexity: 0.68,
+      shape: 1,
+      blur: 1,
+      vignette: 0.2,
+      vigOpacity: 0.26,
+      shaderOpacity: 1
+    }
+  }
+}, Ft = {
+  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: 0.18,
+      distortion: 0.3,
+      complexity: 0.68,
+      shape: 1,
+      blur: 1,
+      vignette: 0.26,
+      vigOpacity: 0.6,
+      shaderOpacity: 0.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: 0.18,
+      distortion: 0.3,
+      complexity: 0.68,
+      shape: 1,
+      blur: 1,
+      vignette: 0.22,
+      vigOpacity: 0.24,
+      shaderOpacity: 1
+    }
+  }
+}, Ze = {
+  chromatic: It,
+  silver: Pt,
+  gold: Ft
+}, $t = (
+  /* glsl */
+  `
+  attribute vec2 a_position;
+  void main() { gl_Position = vec4(a_position, 0.0, 1.0); }
+`
+), Ht = (
+  /* glsl */
+  `
+  precision highp float;
+
+  uniform vec2 u_resolution;
+  uniform float u_time;
+  uniform vec3 u_color1, u_color2, u_color3, u_color4, u_color5, u_color6, u_color7;
+  uniform float u_alpha1, u_alpha2, u_alpha3, u_alpha4, u_alpha5, u_alpha6, u_alpha7;
+  uniform float u_intensity, u_scale, u_direction;
+  uniform float u_softness, u_distortion, u_complexity, u_shape;
+  uniform float u_vignette, u_vigOpacity, u_blur, u_shaderOpacity;
+
+  vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
+  vec2 mod289v2(vec2 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
+  vec3 permute(vec3 x) { return mod289((x * 34.0 + 1.0) * x); }
+
+  float snoise(vec2 v) {
+    const vec4 C = vec4(0.211324865405187, 0.366025403784439,
+                        -0.577350269189626, 0.024390243902439);
+    vec2 i = floor(v + dot(v, C.yy));
+    vec2 x0 = v - i + dot(i, C.xx);
+    vec2 i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
+    vec4 x12 = x0.xyxy + C.xxzz;
+    x12.xy -= i1;
+    i = mod289v2(i);
+    vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0)) + i.x + vec3(0.0, i1.x, 1.0));
+    vec3 m = max(0.5 - vec3(dot(x0, x0), dot(x12.xy, x12.xy), dot(x12.zw, x12.zw)), 0.0);
+    m = m * m; m = m * m;
+    vec3 x_ = 2.0 * fract(p * C.www) - 1.0;
+    vec3 h = abs(x_) - 0.5;
+    vec3 ox = floor(x_ + 0.5);
+    vec3 a0 = x_ - ox;
+    m *= 1.79284291400159 - 0.85373472095314 * (a0 * a0 + h * h);
+    vec3 g;
+    g.x = a0.x * x0.x + h.x * x0.y;
+    g.yz = a0.yz * x12.xz + h.yz * x12.yw;
+    return 130.0 * dot(m, g);
+  }
+
+  float fbm(vec2 p, float oct) {
+    float val = 0.0, amp = 0.5;
+    int n = int(oct);
+    for (int i = 0; i < 7; i++) {
+      if (i >= n) break;
+      val += amp * snoise(p);
+      p *= 2.0;
+      amp *= 0.5;
+    }
+    return val;
+  }
+
+  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);
+    float k = 64.0;
+    float w1 = u_alpha1 * exp(-k * t * t);
+    float w2 = u_alpha2 * exp(-k * (t - 0.25) * (t - 0.25));
+    float w3 = u_alpha3 * exp(-k * (t - 0.5)  * (t - 0.5));
+    float w4 = u_alpha4 * exp(-k * (t - 0.75) * (t - 0.75));
+    float w5 = u_alpha5 * exp(-k * (t - 1.0)  * (t - 1.0));
+    float total = w1 + w2 + w3 + w4 + w5 + 0.0001;
+    return (u_color1 * w1 + u_color2 * w2 + u_color3 * w3 +
+            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);
+    float k = 64.0;
+    float w1 = u_alpha1 * exp(-k * t * t);
+    float w2 = u_alpha2 * exp(-k * (t - 0.25) * (t - 0.25));
+    float w3 = u_alpha3 * exp(-k * (t - 0.5)  * (t - 0.5));
+    float w4 = u_alpha4 * exp(-k * (t - 0.75) * (t - 0.75));
+    float w5 = u_alpha5 * exp(-k * (t - 1.0)  * (t - 1.0));
+    float totalW = w1 + w2 + w3 + w4 + w5 + 0.0001;
+    float rawW = exp(-k * t * t)
+               + exp(-k * (t - 0.25) * (t - 0.25))
+               + exp(-k * (t - 0.5)  * (t - 0.5))
+               + exp(-k * (t - 0.75) * (t - 0.75))
+               + exp(-k * (t - 1.0)  * (t - 1.0))
+               + 0.0001;
+    return totalW / rawW;
+  }
+
+  vec2 warp(vec2 p, float t) {
+    float str = u_distortion * 2.0;
+    return vec2(
+      nfbm(p + vec2(t * 0.1, 0.0)),
+      nfbm(p + vec2(0.0, t * 0.12) + 5.0)
+    ) * 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;
+    p += vec2(cos(u_direction), sin(u_direction)) * t * 0.15;
+
+    float freq = 3.0 + cpx * 8.0;
+    float val = 0.0;
+    val += sin(p.x * freq + t);
+    val += sin(p.y * freq + t * 1.3);
+    val += sin((p.x + p.y) * freq * 0.7 + t * 0.7);
+    val += sin(length(p) * freq * 0.8 - t * 1.5);
+    vec2 w = warp(p, t);
+    val += (w.x + w.y) * dist;
+    val = val * 0.2 * u_intensity + 0.5;
+
+    return palette(clamp(val, 0.0, 1.0));
+  }
+
+  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 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);
+    } else {
+      float r = u_blur * 0.02;
+      col  = computeEffect(uv,                  aspect, t, dist, cpx) * 0.4;
+      col += computeEffect(uv + vec2( r, 0.0),  aspect, t, dist, cpx) * 0.15;
+      col += computeEffect(uv + vec2(-r, 0.0),  aspect, t, dist, cpx) * 0.15;
+      col += computeEffect(uv + vec2(0.0,  r),  aspect, t, dist, cpx) * 0.15;
+      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);
+    float vig = edgeDist * edgeDist / (vigRange * vigRange);
+    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,
+           c4d = col - u_color4, c5d = col - u_color5;
+      float prox1 = exp(-8.0 * dot(c1d, c1d));
+      float prox2 = exp(-8.0 * dot(c2d, c2d));
+      float prox3 = exp(-8.0 * dot(c3d, c3d));
+      float prox4 = exp(-8.0 * dot(c4d, c4d));
+      float prox5 = exp(-8.0 * dot(c5d, c5d));
+      float pTotal = prox1 + prox2 + prox3 + prox4 + prox5 + 0.0001;
+      colorAlpha = (prox1 * u_alpha1 + prox2 * u_alpha2 + prox3 * u_alpha3 +
+                    prox4 * u_alpha4 + prox5 * u_alpha5) / pTotal;
+    }
+    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 Le(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 Nt(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 et = 140, tt = 40, at = 1.6, nt = 1.3;
+let i = null, ne = null;
+function Gt(e) {
+  ne = e;
+}
+const Wt = [
+  "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 Oe(e) {
+  e.enable(e.BLEND), e.blendFunc(e.SRC_ALPHA, e.ONE_MINUS_SRC_ALPHA);
+  const t = Le(e, e.VERTEX_SHADER, $t), a = Le(e, e.FRAGMENT_SHADER, Ht), n = Nt(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 Wt) s[c] = e.getUniformLocation(n, c);
+  return { program: n, buffer: o, uniforms: s };
+}
+function ot() {
+  if (i) return i;
+  const e = Math.min(Ot, typeof window < "u" && window.devicePixelRatio || 1), t = Math.round(Lt * 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 } = Oe(o), l = (f) => {
+    f.preventDefault(), i && (i.contextLost = !0);
+  }, d = () => {
+    if (!i) return;
+    const f = Oe(i.gl);
+    i.program = f.program, i.buffer = f.buffer, i.uniforms = f.uniforms, i.presetDirty = !0, i.contextLost = !1, ne == null || ne();
+  };
+  return n.addEventListener("webglcontextlost", l, !1), n.addEventListener("webglcontextrestored", d, !1), i = {
+    glCanvas: n,
+    gl: o,
+    program: r,
+    buffer: s,
+    uniforms: c,
+    preset: Ze.chromatic.modes.dark,
+    presetDirty: !0,
+    contextLost: !1,
+    useOffscreen: a,
+    frameBitmap: null,
+    startMs: performance.now(),
+    pausedMs: 0,
+    pausedAtMs: null,
+    rafId: 0,
+    dpr: e,
+    instances: /* @__PURE__ */ new Set(),
+    frameCount: 0,
+    glowQueue: [],
+    glowIdx: 0,
+    glowSkip: 0,
+    glowPixels: new Uint8Array(t * t * 4),
+    glowPixelsW: t,
+    glowPixelsH: t
+  }, i;
+}
+function zt() {
+  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 Ie = 0;
+function ie() {
+  if (!i) return;
+  const e = performance.now();
+  if (e - Ie < Tt) return;
+  Ie = 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 ye(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 = et * s, f = tt * 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 N = { r: 0, g: 0, b: 0, lum: 0, count: 0 };
+function rt(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);
+  N.r = 0, N.g = 0, N.b = 0, N.lum = 0, N.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;
+      N.r += e[h], N.g += e[h + 1], N.b += e[h + 2], N.lum += (0.2126 * e[h] + 0.7152 * e[h + 1] + 0.0722 * e[h + 2]) / 255, N.count++;
+    }
+  }
+  return N;
+}
+const T = { r: 255, g: 255, b: 255 };
+function Pe(e, t, a, n) {
+  if (!i) return 0;
+  ie();
+  const o = ye(e, t, a), r = rt(i.glowPixels, i.glowPixelsW, i.glowPixelsH, o.bx, o.by, n);
+  return r.count > 0 ? r.lum / r.count : 0;
+}
+function Bt(e, t, a, n) {
+  if (!i)
+    return T.r = 255, T.g = 255, T.b = 255, T;
+  ie();
+  const o = ye(e, t, a), r = rt(i.glowPixels, i.glowPixelsW, i.glowPixelsH, o.bx, o.by, n);
+  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 Dt(e, t, a, n) {
+  if (!i)
+    return T.r = 255, T.g = 255, T.b = 255, T;
+  ie();
+  const o = ye(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;
+  T.r = 255, T.g = 255, T.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, E = r[x], M = r[x + 1], O = r[x + 2], P = Math.max(E, M, O), y = Math.min(E, M, O), S = (P > 0 ? (P - y) / P : 0) * (0.35 + 0.65 * (P / 255));
+      S > p && (p = S, T.r = E, T.g = M, T.b = O);
+    }
+  }
+  return T;
+}
+Gt(() => {
+  i && i.instances.size > 0 && i.pausedAtMs === null && K();
+});
+typeof document < "u" && document.addEventListener("visibilitychange", () => {
+  !i || i.pausedAtMs !== null || i.contextLost || (document.hidden ? _e() : i.instances.size > 0 && K());
+});
+function Ut(e) {
+  const t = ot(), 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" ? nt : at) * 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 it(o), t.instances.add(o), t.rafId === 0 && t.pausedAtMs === null && K(), o;
+}
+function Xt(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 && (_e(), zt());
+}
+function Vt(e) {
+  i && (i.glowQueue.includes(e) || i.glowQueue.push(e));
+}
+function qt(e) {
+  if (!i) return;
+  const t = i.glowQueue.indexOf(e);
+  t !== -1 && i.glowQueue.splice(t, 1);
+}
+function J(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" ? nt : at) * 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 && it(e);
+}
+function Yt(e, t) {
+  e.visible = t, t && i && i.rafId === 0 && i.pausedAtMs === null && !i.contextLost && K();
+}
+function jt(e, t) {
+  const a = ot();
+  a.preset = Ze[e].modes[t], a.presetDirty = !0;
+}
+function un() {
+  !i || i.pausedAtMs !== null || (i.pausedAtMs = performance.now(), _e());
+}
+function hn() {
+  !i || i.pausedAtMs === null || (i.pausedMs += performance.now() - i.pausedAtMs, i.pausedAtMs = null, i.instances.size > 0 && K());
+}
+let be = null;
+function Kt(e) {
+  be = e;
+}
+function it(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 Qt(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 Jt(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 = et * a, l = tt * 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), Qt(e), e.onFirstCopy) {
+    const h = e.onFirstCopy;
+    e.onFirstCopy = void 0, h();
+  }
+  (p = e.onAfterFrame) == null || p.call(e);
+}
+function Zt() {
+  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] = _t(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 ea(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 && Zt(), a.u_time && t.uniform1f(a.u_time, r), t.drawArrays(t.TRIANGLES, 0, 6), i.frameCount++;
+}
+let Fe = 0;
+function st(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(st), !(e - Fe < Rt)) {
+    Fe = e, ea(e), i.useOffscreen && (i.glowQueue.length > 0 && ie(), (a = i.frameBitmap) == null || a.close(), i.frameBitmap = i.glCanvas.transferToImageBitmap());
+    for (const n of i.instances)
+      n.visible && (n.paused && n.everCopied || (Jt(n), n.everCopied = !0));
+    if (be && i.glowQueue.length > 0 && ++i.glowSkip % Ct === 0) {
+      const n = i.glowQueue;
+      i.glowIdx >= n.length && (i.glowIdx = 0);
+      const o = n[i.glowIdx];
+      o.visible && !o.paused && be(o, e), i.glowIdx++;
+    }
+  }
+}
+function K() {
+  !i || i.rafId !== 0 || (i.rafId = requestAnimationFrame(st));
+}
+function _e() {
+  i && (i.rafId !== 0 && cancelAnimationFrame(i.rafId), i.rafId = 0);
+}
+const oe = {
+  linear: (e) => e,
+  smoothstep: (e) => e * e * (3 - 2 * e)
+};
+function V(e, t, a, n = oe.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 $e(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 ta = 1.5, ee = 1 / 3, aa = 4 * ee, na = 2 * ee, oa = 2 * ee, ra = 1.35 * ee, ia = 13 * ee;
+function Me(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 Se(e, t, a, n) {
+  return n === "circle" ? 2 * Math.PI * Math.max(0, Math.min(a, Math.min(e, t) / 2)) : Me(e, t, a);
+}
+function Z(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 * 0.5, l.y = a * 0.5, l;
+    e = (e % x + x) % x;
+    const E = -Math.PI / 2 + e / x * Math.PI * 2, M = Math.max(0, d - o + r);
+    return l.x = t * 0.5 + M * Math.cos(E), l.y = a * 0.5 + M * Math.sin(E), 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 He(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 he = { x: 0, y: 0 }, pe = { x: 0, y: 0 };
+function sa(e, t, a, n, o, r) {
+  return Z(e - 0.1, t, a, n, o, 0, r, he), Z(e + 0.1, t, a, n, o, 0, r, pe), Math.atan2(pe.y - he.y, pe.x - he.x);
+}
+function Ne(e, t, a) {
+  const n = Math.max(0, Math.min(1, (a - e) / (t - e)));
+  return n * n * (3 - 2 * n);
+}
+function la(e) {
+  const t = Se(e.width, e.height, e.cornerRadius, e.kind), a = ta * (e.scale ?? 1), n = [];
+  for (let o = 0; o < Ee; o++) {
+    const r = o / Ee * t, s = Z(r, e.width, e.height, e.cornerRadius, a, 0, e.kind);
+    n.push({ x: s.x, y: s.y, arc: r });
+  }
+  return n;
+}
+function ca(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(0.9)}"/></filter>`,
+    `<filter id="${t}_ebO" ${p}><feGaussianBlur stdDeviation="${m(oa)}"/></filter>`,
+    `<filter id="${t}_ebC" ${p}><feGaussianBlur stdDeviation="${m(ra)}"/></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="${(ia * 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>",
+    // Safari clips mask to the masked element's bbox; our horizontal strokes
+    // have zero height, so the mask becomes a sliver. These spacer rects
+    // inflate the bbox to the full filter region.
+    `<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(aa)}" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.85" filter="url(#${t}_ebO)"/>`,
+    `<path id="${t}_eC" stroke-width="${h(na)}" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="1.0" filter="url(#${t}_ebC)"/>`,
+    "</g></g></g>"
+  ].join("");
+}
+const da = 875e-5, Ge = 0.08, We = 0.32, fa = 0.05, ua = 3e3, ze = 0.85, ae = 0.34, me = 1500, ha = 15, pa = 75e-4, ma = 120, ga = 1.5, xa = 7.8, va = 9.13952, ba = 1, wa = 1 / 3, ya = 0.8, _a = 3.51, Be = 2e3, ge = 400, Ma = 2.625, Sa = 1.008, Ra = 0.31, lt = 140, ct = 40, dt = 20;
+let Aa = 0;
+const W = { x: 0, y: 0 };
+function De(e, t) {
+  const a = `mfxg_${++Aa}`, 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 = ca(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 = Se(t.width, t.height, t.cornerRadius, t.kind) / Me(lt, ct, dt), g = Math.max(1, xa * f), u = Math.max(0.6, va * wa * f), p = He(g, kt), h = He(u, Et), 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: la(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 Ta(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 k = 0; k < l.length; k++) {
+    const I = l[k], H = Pe(t, I.x, I.y, d);
+    H > f && (f = H, g = k), k === e.currentIdx && (u = H);
+  }
+  const p = e.appearedAt > 0 && a - e.appearedAt < ua, h = ae + (ze - ae) * Ne(Ge, We, u), m = !p && f - u > fa;
+  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, me, oe.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 k = l[e.currentIdx], I = Pe(t, k.x, k.y, d), H = ae + (ze - ae) * Ne(Ge, We, I);
+      e.relocTween = V(0, H, me, oe.smoothstep), q(e.relocTween, a);
+    } else m ? (e.relocNextIdx = g, e.relocTween = V(e.glowOpacity, 0, me, oe.smoothstep), q(e.relocTween, a)) : e.glowOpacity += (h - e.glowOpacity) * da;
+  e.relocTween && (e.glowOpacity = $e(e.relocTween, a)), e.glowOpacity = Math.max(0, Math.min(1, e.glowOpacity));
+  const A = Se(r, s, c, e.kind) / Me(lt, ct, dt), x = ha * A;
+  e.wanderFrames++ >= ma && (e.wanderTargetS = (Math.random() * 2 - 1) * x, e.wanderFrames = 0), e.wanderS += (e.wanderTargetS - e.wanderS) * pa;
+  const E = l[e.currentIdx].arc + e.wanderS, M = ga * e.scale;
+  Z(E, r, s, c, M, 0, e.kind, W);
+  const O = W.x, P = W.y, y = sa(E, r, s, c, M, e.kind), w = `translate(${O.toFixed(3)}px,${P.toFixed(3)}px) rotate(${y.toFixed(4)}rad)`;
+  e.haloInner.style.transform = w;
+  const S = ba * A * e.scale;
+  Z(E, r, s, c, M, S, e.kind, W), e.extraInner.style.transform = `translate(${W.x.toFixed(3)}px,${W.y.toFixed(3)}px) rotate(${y.toFixed(4)}rad)`, e.fadeCircle.style.transform = `translate(${W.x.toFixed(3)}px,${W.y.toFixed(3)}px)`;
+  const R = o === "light", v = R ? Dt(t, O, P, d) : Bt(t, O, P, d);
+  e.tintTween ? e.tintTween.done && (R ? (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, ge), q(e.tintTween, a)) : a >= e.tintHoldUntil && (e.tintFrom = { ...e.tintTarget }, e.tintTarget = { ...v }, e.tintTween = V(0, 1, ge), q(e.tintTween, a), e.tintHoldUntil = a + Be)) : (e.tintFrom = { ...v }, e.tintTarget = { ...v }, e.tintTween = V(0, 1, ge), q(e.tintTween, a), e.tintHoldUntil = R ? 0 : a + Be), $e(e.tintTween, a);
+  const b = e.tintTween.val;
+  let F, L, _;
+  if (R)
+    F = Math.round(e.tintFrom.r + (e.tintTarget.r - e.tintFrom.r) * b), L = Math.round(e.tintFrom.g + (e.tintTarget.g - e.tintFrom.g) * b), _ = Math.round(e.tintFrom.b + (e.tintTarget.b - e.tintFrom.b) * b);
+  else {
+    const k = e.tintFrom.r + (e.tintTarget.r - e.tintFrom.r) * b, I = e.tintFrom.g + (e.tintTarget.g - e.tintFrom.g) * b, H = e.tintFrom.b + (e.tintTarget.b - e.tintFrom.b) * b, G = Math.max(k, I, H) || 1;
+    F = Math.round(255 * (k / G)), L = Math.round(255 * (I / G)), _ = Math.round(255 * (H / G));
+  }
+  const C = `rgb(${F},${L},${_})`;
+  if (C !== e.lastHaloStroke && (e.lastHaloStroke = C, e.haloInner.style.stroke = C), R) {
+    const k = Mt(F, L, _), [I, H, G] = St(k[0], Math.min(1, k[1] * Ma), Math.max(Ra, k[2] * Sa)), D = `rgb(${I},${H},${G})`;
+    D !== e.lastExtraStroke && (e.lastExtraStroke = D, e.extraInner.style.stroke = D);
+  } else e.lastExtraStroke !== "#ffffff" && (e.lastExtraStroke = "#ffffff", e.extraInner.style.stroke = "#ffffff");
+  const $ = Math.max(0, Math.min(1, n));
+  e.haloGroup.style.opacity = (e.glowOpacity * ya * $).toFixed(3), e.extraGroup.style.opacity = Math.min(1, e.glowOpacity * _a * $).toFixed(3);
+}
+const we = 12, Ue = 32, Xe = 1, Ve = 0.55, Ca = 1, ka = 1, Ea = 0.85, La = 0, Oa = 1.3, qe = 3.6, Ia = 0.7, Pa = 1, Fa = 0.52, $a = 1, Ha = 0.044, Na = 235, Ga = 2.535, Wa = 0.7, za = 0.5, Ba = /* @__PURE__ */ new Set(["INPUT", "TEXTAREA", "SELECT", "OPTION"]);
+function Da(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 Ua(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 Xa(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 * 0.5, o * 0.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 ft(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 Va = 4;
+function qa(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 Ya(e, t, a, n, o, r, s, c, l, d, f) {
+  const g = Math.max(1, Math.round((we + Va * 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(), qa(e, d.x, d.y, d.w, d.h, d.r, g), e.globalCompositeOperation = p ? "source-over" : "lighter", p = !1, e.globalAlpha = m, ft(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 ut(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 ja(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(), ut(e, s.x, s.y, s.w, s.h, s.r, l), e.globalCompositeOperation = p ? "source-over" : "lighter", p = !1, e.globalAlpha = m, ft(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 Ka(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(0.5, `rgba(255,255,255,${(c * 0.45).toFixed(3)})`), l.addColorStop(1, "rgba(255,255,255,0)"), e.save(), ut(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 ht(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 pt(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 Ye(e) {
+  e.cornerRadius = ht(e.el);
+  const t = pt(e.el);
+  e.hairlineWidth = t.width, e.hairlineOuterCssPx = t.outerCssPx;
+}
+function Qa(e) {
+  typeof ResizeObserver < "u" && (e.resizeObserver = new ResizeObserver(() => Ye(e)), e.resizeObserver.observe(e.el)), typeof MutationObserver < "u" && (e.mutationObserver = new MutationObserver(() => Ye(e)), e.mutationObserver.observe(e.el, {
+    attributes: !0,
+    attributeFilter: ["style", "class"]
+  }));
+}
+function Ja(e) {
+  var t, a;
+  (t = e.resizeObserver) == null || t.disconnect(), e.resizeObserver = null, (a = e.mutationObserver) == null || a.disconnect(), e.mutationObserver = null;
+}
+const j = /* @__PURE__ */ new Set();
+function Za(e, t, a) {
+  if (typeof document > "u" || Ba.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 = pt(e), u = {
+    el: e,
+    anchor: t,
+    anchorEl: a,
+    wrap: n,
+    canvas: o,
+    ctx: r,
+    strokeCanvas: s,
+    strokeCtx: c,
+    cornerRadius: ht(e),
+    hairlineWidth: g.width,
+    hairlineOuterCssPx: g.outerCssPx,
+    appliedPositionRelative: d,
+    appliedIsolation: f,
+    resizeObserver: null,
+    mutationObserver: null
+  };
+  return Qa(u), j.add(u), u;
+}
+function en(e) {
+  for (const t of j)
+    if (t.el === e) {
+      Ja(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 tn() {
+  if (j.size === 0) return;
+  const e = typeof window < "u" && window.devicePixelRatio || 1, t = /* @__PURE__ */ 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 (!Ua(o, n, Xe, Ue) && !Xa(o, n, Xe, Ue)) {
+      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) * 0.5, d = (o.top + o.bottom) * 0.5, f = (n.left + n.right) * 0.5, g = (n.top + n.bottom) * 0.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 = Da(o, n);
+    let E = 1 - Math.min(1, x / we);
+    E = E * E * (3 - 2 * E);
+    const M = Ve + (Ca - Ve) * E, O = Math.min(
+      qe,
+      M * Oa * Ia
+    ), P = a.anchor.scale ?? 1, y = Math.max(Pa * P, a.hairlineWidth), w = Math.max(1, Math.round(y * e)), S = Math.max(
+      1,
+      Math.round(Math.max($a * P, a.hairlineWidth) * e)
+    ), R = a.hairlineOuterCssPx;
+    a.wrap.style.inset = `${-R}px`, a.wrap.style.borderRadius = `${Math.max(0, a.cornerRadius)}px`;
+    const v = Math.max(1, Math.round((n.width + R * 2) * e)), b = Math.max(1, Math.round((n.height + R * 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 F = a.ctx;
+    F.setTransform(1, 0, 0, 1, 0, 0), F.clearRect(0, 0, v, b);
+    const L = a.strokeCtx;
+    L.setTransform(1, 0, 0, 1, 0, 0), L.clearRect(0, 0, v, b);
+    const _ = Math.min(we * e, Math.max(v, b));
+    let C, $, B, k;
+    A ? (C = u > 0 ? v : 0, B = u > 0 ? v - _ : _, $ = b * 0.5, k = b * 0.5) : ($ = p > 0 ? b : 0, k = p > 0 ? b - _ : _, C = v * 0.5, B = v * 0.5);
+    const I = F.createLinearGradient(C, $, B, k);
+    I.addColorStop(0, `rgba(0,0,0,${ka})`), I.addColorStop(0.5, `rgba(0,0,0,${Ea})`), I.addColorStop(1, `rgba(0,0,0,${La})`);
+    const H = s / e, G = Math.max(1, Math.round(Na * Math.max(0.1, H / 140) * e));
+    let D, se, le, ce, Re = !1, Ae = !1;
+    if (A) {
+      const Q = Math.max(o.top, n.top), fe = Math.min(o.bottom, n.bottom);
+      Re = !0, D = u > 0 ? v - G : 0, se = Math.round((Q - n.top + R) * e), le = G, ce = Math.max(1, Math.round((fe - Q) * e));
+    } else {
+      const Q = Math.max(o.left, n.left), fe = Math.min(o.right, n.right);
+      Ae = !0, D = Math.round((Q - n.left + R) * e), se = p > 0 ? b - G : 0, le = Math.max(1, Math.round((fe - Q) * e)), ce = G;
+    }
+    const Te = { x: D, y: se, w: le, h: ce, flipX: Re, flipY: Ae }, de = { x: 0, y: 0, w: v, h: b, r: Math.max(0, a.cornerRadius * e) }, mt = Math.min(
+      qe,
+      O * Ga * Wa * za
+    );
+    Ya(F, r, s, c, v, b, mt, I, Te, de, e), ja(
+      L,
+      r,
+      s,
+      c,
+      v,
+      b,
+      de,
+      O,
+      w,
+      I,
+      Fa,
+      Te
+    ), Ka(
+      L,
+      de,
+      S,
+      C,
+      $,
+      B,
+      k,
+      Math.min(0.85, Ha * O)
+    ), F.globalCompositeOperation = "source-over", L.globalCompositeOperation = "source-over";
+  }
+}
+let xe = !1, je = 0;
+function an() {
+  xe || (xe = !0, !(typeof requestAnimationFrame > "u") && requestAnimationFrame((e) => {
+    xe = !1, !(e - je < At) && (je = e, tn());
+  }));
+}
+const Ke = "metal-fx-styles", nn = (
+  /* css */
+  `
+.metal-fx-root {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  isolation: isolate;
+  overflow: visible;
+  background: #272727;
+  color: #f8f8f8;
+}
+.metal-fx-root[data-theme='light'] {
+  background: #ffffff;
+  color: #1d1d1d;
+}
+
+.metal-fx-root::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  z-index: 2;
+  box-shadow: inset 0 0 50px 0 rgba(255, 255, 255, 0.02);
+}
+.metal-fx-root[data-theme='light']::before {
+  box-shadow: inset 0 0 50px 0 rgba(0, 0, 0, 0.02);
+}
+
+.metal-fx-root::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  z-index: 4;
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
+}
+.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);
+}
+.metal-fx-root[data-theme='light'][data-variant='circle']::after {
+  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.06);
+}
+
+.metal-fx-canvas {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  display: block;
+  z-index: 0;
+  pointer-events: none;
+  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;
+  border-radius: inherit;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.metal-fx-root[data-variant='button'][data-shape='pill'] .metal-fx-inner {
+  border-radius: calc(var(--mfx-radius, 20px) - 3px);
+}
+.metal-fx-root[data-variant='button'][data-shape='circle'] .metal-fx-inner {
+  border-radius: calc(var(--mfx-radius, 16px) - 3px);
+}
+.metal-fx-root[data-variant='circle'][data-shape='pill'] .metal-fx-inner {
+  inset: 0;
+  border-radius: var(--mfx-radius, 20px);
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
+}
+.metal-fx-root[data-variant='circle'][data-shape='circle'] .metal-fx-inner {
+  inset: 0;
+  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;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  z-index: 3;
+  pointer-events: none;
+  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;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  pointer-events: none;
+}
+.metal-fx-content > * {
+  pointer-events: auto;
+}
+.metal-fx-root[data-normalize='true'] .metal-fx-content > * {
+  background: transparent !important;
+  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] {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  border-radius: inherit;
+  overflow: hidden;
+  z-index: 0;
+  isolation: isolate;
+}
+.metal-fx-reflection-canvas {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  display: block;
+  filter: blur(4px) saturate(1.2) brightness(1.58);
+}
+.metal-fx-reflection-stroke-canvas {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  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 ve = !1;
+function on() {
+  if (ve || typeof document > "u") return;
+  if (document.getElementById(Ke)) {
+    ve = !0;
+    return;
+  }
+  const e = document.createElement("style");
+  e.id = Ke, e.textContent = nn, document.head.appendChild(e), ve = !0;
+}
+const rn = ["data-variant", "data-shape", "data-theme", "data-paused", "data-normalize"];
+on();
+const sn = { position: "absolute", inset: "0", width: "100%", height: "100%" }, ln = { position: "absolute", inset: "3px" }, cn = { position: "absolute", inset: "0", pointerEvents: "none", zIndex: 3, borderRadius: "inherit" }, re = /* @__PURE__ */ new Map();
+Kt((e, t) => {
+  const a = re.get(e);
+  a && Ta(a.handles, e, t, e.opacityMul, a.themeRef.current);
+});
+function dn(e) {
+  const a = Y(((c) => c !== "auto" ? c : typeof window > "u" || !window.matchMedia || window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light")(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 Qe(s), z(e, s), Je(r), a;
+}
+const pn = /* @__PURE__ */ gt({
+  __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 = Y(null), o = Y(null), r = Y(null), s = Y(null);
+    let c = null, l = null, d = 0;
+    const f = Y(!1), g = dn(() => a.theme), u = { get current() {
+      return g.value;
+    } }, p = ue(() => a.variant === "circle" ? "circle" : "pill"), h = ue(() => !a.disableGlow);
+    t({
+      /** The wrapper element, mirroring the React version's forwarded ref. */
+      rootEl: n
+    });
+    const m = (y, w) => {
+      if (p.value === "circle") return Math.min(y, w) / 2;
+      const S = typeof a.borderRadius == "number" ? a.borderRadius : (() => {
+        var v;
+        const R = (v = s.value) == null ? void 0 : v.firstElementChild;
+        if (R) {
+          const b = parseFloat(getComputedStyle(R).borderTopLeftRadius);
+          if (Number.isFinite(b) && b > 0) return b;
+        }
+        return d;
+      })();
+      return Math.min(S, Math.min(y, w) / 2);
+    };
+    z([() => a.preset, g], ([y, w]) => {
+      jt(y, w);
+    }, { immediate: !0 }), z(() => a.paused, (y) => {
+      c && J(c, { paused: y });
+    }), z([() => a.shaderScale, () => a.ringCssPx, () => a.scale], ([y, w, S]) => {
+      if (!c) return;
+      const R = {};
+      y !== void 0 && (R.shaderScale = y), w !== void 0 && (R.ringCssPx = w), S !== void 0 && (R.scale = S), Object.keys(R).length > 0 && J(c, R);
+    });
+    const A = () => {
+      c && J(c, { opacityMul: Math.max(0, Math.min(1, a.strength)) });
+    };
+    z([() => a.strength, () => a.variant], A);
+    let x = null;
+    const E = () => {
+      const y = o.value, w = n.value, S = r.value;
+      if (!y || !w) return;
+      {
+        const _ = getComputedStyle(w), C = parseFloat(_.borderTopLeftRadius);
+        d = Number.isFinite(C) ? C : 0;
+      }
+      const R = () => {
+        const _ = w.getBoundingClientRect(), C = Math.max(1, Math.round(_.width)), $ = Math.max(1, Math.round(_.height));
+        return { cssWidth: C, cssHeight: $, cornerRadius: m(C, $) };
+      }, v = R();
+      c = Ut({
+        hostCanvas: y,
+        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;
+        }
+      }), w.style.setProperty("--mfx-radius", `${v.cornerRadius}px`), w.style.borderRadius = `${v.cornerRadius}px`, A(), S && (l = De(S, {
+        width: v.cssWidth,
+        height: v.cssHeight,
+        cornerRadius: v.cornerRadius,
+        kind: p.value,
+        scale: a.scale
+      }));
+      let b = 0;
+      const F = new ResizeObserver(() => {
+        b === 0 && (b = requestAnimationFrame(() => {
+          b = 0;
+          const _ = R(), C = c;
+          C && (J(C, { cssWidth: _.cssWidth, cssHeight: _.cssHeight, cornerRadius: _.cornerRadius }), w.style.setProperty("--mfx-radius", `${_.cornerRadius}px`), w.style.borderRadius = `${_.cornerRadius}px`, S && (S.innerHTML = "", l = De(S, {
+            width: _.cssWidth,
+            height: _.cssHeight,
+            cornerRadius: _.cornerRadius,
+            kind: p.value,
+            scale: a.scale
+          }), C && l && re.set(C, { handles: l, themeRef: u })));
+        }));
+      });
+      F.observe(w);
+      let L = null;
+      typeof IntersectionObserver < "u" && (L = new IntersectionObserver(
+        (_) => {
+          const C = c;
+          if (C)
+            for (const $ of _) Yt(C, $.isIntersecting);
+        },
+        { rootMargin: "64px" }
+      ), L.observe(w)), c && l && (re.set(c, { handles: l, themeRef: u }), Vt(c)), x = () => {
+        F.disconnect(), L == null || L.disconnect(), b !== 0 && cancelAnimationFrame(b);
+        const _ = c;
+        _ && (re.delete(_), qt(_), Xt(_)), c = null, l = null, S && (S.innerHTML = "");
+      };
+    };
+    let M = null;
+    const O = () => {
+      M == null || M(), M = null;
+      const y = c, w = n.value, S = a.reflectionTargets;
+      if (!y || !w || !S || g.value !== "dark") return;
+      y.onAfterFrame = an;
+      const R = S.flatMap((v) => {
+        const b = yt(v);
+        return b ? [b] : [];
+      });
+      for (const v of R) Za(v, y, w);
+      M = () => {
+        y.onAfterFrame = void 0;
+        for (const v of R) en(v);
+      };
+    };
+    Qe(() => {
+      E(), Ce(O);
+    }), z(p, () => {
+      x == null || x(), x = null, M == null || M(), M = null, E(), Ce(O);
+    }, { flush: "post" }), z([() => a.reflectionTargets, g], () => {
+      O();
+    }, { flush: "post" }), Je(() => {
+      M == null || M(), M = null, x == null || x(), x = null;
+    }), z([() => a.borderRadius, g, () => a.variant], () => {
+      const y = n.value, w = c;
+      if (!y || !w) return;
+      const S = m(w.cssWidth, w.cssHeight);
+      J(w, { cornerRadius: S }), y.style.setProperty("--mfx-radius", `${S}px`), y.style.borderRadius = `${S}px`;
+    }, { flush: "post" });
+    const P = ue(() => ({
+      "--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) => (xt(), vt("div", {
+      ref_key: "rootRef",
+      ref: n,
+      class: "metal-fx-root",
+      "data-variant": e.variant,
+      "data-shape": p.value,
+      "data-theme": bt(g),
+      "data-paused": e.paused ? "true" : void 0,
+      "data-normalize": e.normalizeHostStyles ? "true" : "false",
+      style: ke(P.value)
+    }, [
+      te("canvas", {
+        ref_key: "canvasRef",
+        ref: o,
+        class: "metal-fx-canvas",
+        style: sn
+      }, null, 512),
+      te("div", {
+        class: "metal-fx-inner",
+        "aria-hidden": "true",
+        style: ln
+      }),
+      te("div", {
+        ref_key: "glowHostRef",
+        ref: r,
+        "aria-hidden": "true",
+        style: ke([cn, h.value ? null : { display: "none" }])
+      }, null, 4),
+      te("div", {
+        ref_key: "contentRef",
+        ref: s,
+        class: "metal-fx-content"
+      }, [
+        wt(y.$slots, "default")
+      ], 512)
+    ], 12, rn));
+  }
+});
+export {
+  pn as MetalFx,
+  Ze as PRESETS,
+  Ut as createInstance,
+  Xt as destroyInstance,
+  _t as hexToRgb,
+  un as pauseShared,
+  hn as resumeShared,
+  jt as setSharedPreset,
+  J as updateInstance
+};