@cruxgarden/plasma-ui 0.1.1

package/dist/index.js

@@ -0,0 +1,1522 @@
+// src/PlasmaProvider.tsx
+import { createContext, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+
+// src/shaders.ts
+var DEFAULT_MAX_SHAPES = 16;
+var MAX_PULSES = 4;
+var vert = `#version 300 es
+in vec2 p; void main(){ gl_Position = vec4(p, 0., 1.); }`;
+function makeShaders(MAX_SHAPES) {
+  const common = `
+precision highp float;
+uniform vec2 uRes; uniform float uScale, uTime, uGoo, uEnergy, uLight, uMouseAmt, uDropR, uAmbient, uScroll, uVisc, uFlow;
+uniform vec2 uMouse;
+uniform vec4 uP[${MAX_SHAPES}]; uniform vec4 uR[${MAX_SHAPES}]; uniform float uF[${MAX_SHAPES}]; uniform vec4 uT[${MAX_SHAPES}]; uniform float uFr[${MAX_SHAPES}]; uniform float uEl[${MAX_SHAPES}]; uniform float uSolo[${MAX_SHAPES}];
+uniform int uCount;
+uniform vec4 uRip[${MAX_PULSES}];
+uniform vec3 uA, uB, uC;
+
+float hash(vec2 p){ p = fract(p*vec2(123.34,456.21)); p += dot(p,p+45.32); return fract(p.x*p.y); }
+float noise(vec2 p){
+  vec2 i=floor(p), f=fract(p); f=f*f*(3.-2.*f);
+  return mix(mix(hash(i),hash(i+vec2(1,0)),f.x), mix(hash(i+vec2(0,1)),hash(i+vec2(1,1)),f.x), f.y);
+}
+float fbm(vec2 p){ float v=0., a=.5; for(int i=0;i<4;i++){ v+=a*noise(p); p=p*2.03+vec2(1.7,9.2); a*=.5; } return v; }
+float smin(float a, float b, float k){ float h=max(k-abs(a-b),0.)/k; return min(a,b)-h*h*k*.25; }
+
+// Rounded box distance plus its outward direction.
+// r holds per-corner radii (top-right, bottom-right, top-left, bottom-left), y pointing down.
+// The last component is 1 near a squared-off corner (one that sits against a neighbor),
+// where blending would otherwise raise a bump at the seam.
+vec4 sdBoxG(vec2 p, vec2 b, vec4 rc, float rmax){
+  float r = p.x > 0. ? (p.y > 0. ? rc.y : rc.x) : (p.y > 0. ? rc.w : rc.z);
+  vec2 q = abs(p) - b + r;
+  vec2 mq = max(q, 0.);
+  float lo = length(mq);
+  vec2 g = lo > 0. ? mq / lo : (q.x > q.y ? vec2(1., 0.) : vec2(0., 1.));
+  float sharp = (mq.x > 0. && mq.y > 0.) ? 1. - smoothstep(0., rmax * .35 + .01, r) : 0.;
+  return vec4(lo + min(max(q.x, q.y), 0.) - r, g * sign(p + 1e-5), sharp);
+}
+
+float scene(vec2 p){
+  float d = 1e4;      // fusing surfaces, blended
+  float ds = 1e4;     // solo surfaces (fuse={false}), hard union only
+  vec2 g = vec2(0.);
+  float sh = 0.;
+  for(int i=0;i<uCount;i++){
+    float f = uF[i];
+    if(f < .005) continue;
+    vec2 c = uP[i].xy; vec2 h = uP[i].zw * f;
+    float rmax = max(max(uR[i].x, uR[i].y), max(uR[i].z, uR[i].w));
+    vec4 bx = sdBoxG(p-c, h, min(uR[i], vec4(min(h.x, h.y))), rmax);
+    if(uSolo[i] > .5){ ds = min(ds, bx.x); continue; }
+    if(d > 1e3){ d = bx.x; g = bx.yz; sh = bx.w; continue; }
+    // Blend only where surfaces face different ways (corners, gaps, steps);
+    // edges that face the same way stay perfectly straight.
+    float k = uGoo * clamp((1. - dot(g, bx.yz)) / .8, 0., 1.) * (1. - sh) * (1. - bx.w);
+    float nd = k < .5 ? min(d, bx.x) : smin(d, bx.x, k);
+    if(bx.x < d){ g = bx.yz; sh = bx.w; }
+    d = nd;
+  }
+  d = min(d, ds);
+  if(uAmbient > .5){
+    float t = uTime*.4;
+    vec2 home = vec2(uRes.x*.88, uRes.y*.74);
+    d = smin(d, length(p - home - vec2(cos(t),sin(t*1.3))*70.) - 38., uGoo);
+    d = smin(d, length(p - home - vec2(cos(t*1.7+2.),sin(t*.9+1.))*90.) - 26., uGoo);
+    d = smin(d, length(p - home - vec2(sin(t*.7),cos(t*1.1))*40.) - 20., uGoo);
+  }
+  if(uDropR > 0.){
+    d = smin(d, length(p-uMouse) - uDropR*uMouseAmt, 18.);
+    float md = length(p-uMouse);
+    d -= 3. * uMouseAmt * exp(-md*md/4000.);
+  }
+  for(int i=0;i<${MAX_PULSES};i++){
+    float age = uTime - uRip[i].z;
+    if(age < 0. || age > 3.) continue;
+    float ring = length(p-uRip[i].xy) - age*mix(680., 330., uVisc);
+    d -= uRip[i].w * mix(5., 2., uVisc) * exp(-ring*ring/900.) * exp(-age*mix(.8, 2.6, uVisc));
+  }
+  // slow ripple along the outline
+  if(uFlow > 0.) d += uFlow * 5. * (noise(p/70. + vec2(uTime*.23, -uTime*.17)) - .5) * mix(1.4, .6, uVisc);
+  return d;
+}
+vec2 fragPos(){ return vec2(gl_FragCoord.x, uRes.y*uScale - gl_FragCoord.y) / uScale; }
+`;
+  const maskFrag = `#version 300 es
+${common}
+out vec4 o;
+void main(){ o = vec4(smoothstep(1.5, -1.5, scene(fragPos()))); }`;
+  const tintFrag = `#version 300 es
+${common}
+layout(location = 0) out vec4 o;
+layout(location = 1) out vec4 o2;
+void main(){
+  vec2 p = fragPos();
+  float m = smoothstep(1.5, -1.5, scene(p));
+  vec4 acc = vec4(0.); float fr = 0.; float el = 0.; float wsum = 0.;
+  for(int i=0;i<uCount;i++){
+    if(uF[i] < .005) continue;
+    vec2 h = uP[i].zw * uF[i];
+    float rmax = max(max(uR[i].x, uR[i].y), max(uR[i].z, uR[i].w));
+    float d = sdBoxG(p - uP[i].xy, h, min(uR[i], vec4(min(h.x, h.y))), rmax).x;
+    float w = exp(-max(d, 0.) / 18.) * (1. + smoothstep(0., -24., d) * 4.);
+    acc += uT[i] * w; fr += uFr[i] * w; el += uEl[i] * w; wsum += w;
+  }
+  vec4 t = wsum > 0. ? acc / wsum : vec4(0.);
+  o = vec4(t.rgb * m, t.a * m);
+  o2 = vec4((wsum > 0. ? fr / wsum : 0.) * m, (wsum > 0. ? el / wsum : 0.) * m, 0., 1.);
+}`;
+  const blurFrag = `#version 300 es
+precision highp float;
+uniform sampler2D uTex; uniform vec2 uDir, uOut;
+out vec4 o;
+void main(){
+  vec2 ts = vec2(textureSize(uTex, 0));
+  vec2 uv = gl_FragCoord.xy / uOut;
+  vec2 st = uDir / ts;
+  vec4 s = texture(uTex, uv) * .1964825501511404;
+  s += (texture(uTex, uv + st*1.411764705882353) + texture(uTex, uv - st*1.411764705882353)) * .2969069646728344;
+  s += (texture(uTex, uv + st*3.2941176470588234) + texture(uTex, uv - st*3.2941176470588234)) * .09447039785044732;
+  s += (texture(uTex, uv + st*5.176470588235294) + texture(uTex, uv - st*5.176470588235294)) * .010381362401148057;
+  o = s;
+}`;
+  const bgFrag = `#version 300 es
+${common}
+uniform sampler2D uImg;
+uniform vec2 uImgRes;
+uniform float uHasImg;
+uniform vec3 uBgColor;
+uniform float uBgSolid;
+out vec4 o;
+vec3 bg(vec2 p){
+  p.y += uScroll;
+  vec2 q = p/520.;
+  float t = uTime*.035;
+  vec2 w = vec2(fbm(q+t), fbm(q+vec2(5.2,1.3)-t));
+  float n = fbm(q*1.4 + w*1.8 + t*.6);
+  vec3 col = mix(uA, uB, smoothstep(.25,.75,n));
+  col = mix(col, uC, smoothstep(.55,.9, w.x*n*1.6));
+  float lines = abs(fract(n*14.)-.5);
+  col += (1.-smoothstep(0.,.06,lines)) * .07 * (0.6+uEnergy);
+  vec2 v = (p - vec2(0., uScroll))/uRes - .5;
+  col *= .55 + .45*smoothstep(1.2,.2,length(v));
+  return mix(col, mix(vec3(.90,.93,.95), col, .42), uLight);
+}
+void main(){
+  vec2 p = fragPos();
+  vec2 bp = p;
+  for(int i=0;i<${MAX_PULSES};i++){
+    float age = uTime - uRip[i].z;
+    if(age < 0. || age > 3.) continue;
+    vec2 dir = normalize(p-uRip[i].xy+.001);
+    float ring = length(p-uRip[i].xy) - age*mix(680., 330., uVisc);
+    bp -= dir * uRip[i].w * mix(18., 9., uVisc) * exp(-ring*ring/2500.) * exp(-age*mix(.7, 2.2, uVisc));
+  }
+  if (uBgSolid > .5) {
+    // solid color background: subtle luminance drift so refraction stays visible
+    float shade = (fbm(p*.0012 + vec2(uTime*.02, -uTime*.015)) - .5) * .10
+                + (fbm(p*.004 + 7.3) - .5) * .04
+                + length(bp - p) * .004;
+    o = vec4(uBgColor * (1. + shade), 1.);
+    return;
+  }
+  if (uHasImg > .5) {
+    // image background: slow swirl plus the pulse warp above
+    vec2 q = bp;
+    q += (vec2(sin(q.y*.006 + uTime*.22), cos(q.x*.005 + uTime*.17)) * 7.
+        + vec2(fbm(q*.004 + uTime*.05) - .5, fbm(q*.004 + 31.7 - uTime*.04) - .5) * 22.)
+        * (.5 + uFlow*.5);
+    // cover-fit the image to the canvas
+    float sc = max(uRes.x / uImgRes.x, uRes.y / uImgRes.y);
+    vec2 uv = (q - .5*uRes) / (uImgRes * sc) + .5;
+    o = vec4(texture(uImg, clamp(uv, 0., 1.)).rgb, 1.);
+    return;
+  }
+  o = vec4(bg(bp), 1.);
+}`;
+  const compFrag = `#version 300 es
+${common}
+uniform sampler2D uH, uS, uTint, uBg, uBgM, uBgH, uFrost;
+uniform float uRefract, uDisp, uRim, uRimMode, uRimWidth, uSpec, uHair;
+uniform vec3 uRimColor;
+out vec4 o;
+
+vec3 pal(float t){ return .5 + .5*cos(6.2831*(t + vec3(0., .33, .67))); }
+float H(vec2 uv){ return texture(uH, uv).r; }
+vec2 uvAt(vec2 q){ return vec2(q.x, uRes.y - q.y) / uRes; }
+// background seen through glass with frost f: sharp, then medium, then heavy blur
+vec3 seen(vec2 q, float f){
+  vec2 u = uvAt(q);
+  vec3 sharp = texture(uBg, u).rgb;
+  if(f < .002) return sharp;
+  vec3 soft = mix(texture(uBgM, u).rgb, texture(uBgH, u).rgb, smoothstep(.45, 1., f));
+  return mix(sharp, soft, smoothstep(0., .45, f));
+}
+// B-spline bicubic from four bilinear taps keeps curved outlines round.
+float S(vec2 uv){
+  vec2 ts = vec2(textureSize(uS, 0));
+  vec2 st = uv*ts - .5;
+  vec2 i = floor(st), f = st - i;
+  vec2 f2 = f*f, f3 = f2*f;
+  vec2 w0 = (1. - 3.*f + 3.*f2 - f3)/6.;
+  vec2 w1 = (4. - 6.*f2 + 3.*f3)/6.;
+  vec2 w2 = (1. + 3.*f + 3.*f2 - 3.*f3)/6.;
+  vec2 w3 = f3/6.;
+  vec2 g0 = w0 + w1, g1 = w2 + w3;
+  vec2 h0 = (w1/g0 - 1. + i + .5)/ts;
+  vec2 h1 = (w3/g1 + 1. + i + .5)/ts;
+  return g0.y*(g0.x*texture(uS, vec2(h0.x,h0.y)).r + g1.x*texture(uS, vec2(h1.x,h0.y)).r)
+       + g1.y*(g0.x*texture(uS, vec2(h0.x,h1.y)).r + g1.x*texture(uS, vec2(h1.x,h1.y)).r);
+}
+
+void main(){
+  vec2 p = fragPos();
+  vec2 uv = gl_FragCoord.xy / (uRes*uScale);
+  vec2 tx = 1. / vec2(textureSize(uS, 0));
+  float cssPerTexel = uRes.x / float(textureSize(uS, 0).x);
+
+  float s = S(uv);
+  vec2 gs = vec2(S(uv+vec2(tx.x,0.)) - S(uv-vec2(tx.x,0.)), S(uv+vec2(0.,tx.y)) - S(uv-vec2(0.,tx.y))) / (2.*cssPerTexel);
+  float sd = clamp((s - .5) / max(length(gs), 1e-3), -60., 60.);
+
+  vec3 back = texture(uBg, uv).rgb;
+  float grain = 1.;
+
+  // shadow: offset and strength follow the surface's elevation
+  float msk = max(texture(uS, uv).r, 1e-3);
+  float elHere = clamp(texture(uFrost, uv).g / msk, 0., 1.);
+  float elCast = clamp(texture(uFrost, uv - vec2(0., 20. / uRes.y)).g / max(texture(uS, uv - vec2(0., 20. / uRes.y)).r, 1e-3), 0., 1.);
+  float el = max(elHere, elCast);
+  float hs = H(uv + vec2(0., (4. + el * 28.) / uRes.y));
+  float shStr = .5 * smoothstep(0., .12, el) * clamp(el + .35, 0., 1.);
+  vec3 col = back * (1. - shStr*smoothstep(.02, .55, hs)*(1.-uLight*.6));
+  float hHere = H(uv);
+  col += pal(uTime*.03 + p.x/1400.) * .06 * smoothstep(.0, .45, hHere) * (1.+uEnergy);
+
+  if(sd > -2.){
+    vec2 th = 2. / vec2(textureSize(uH, 0));
+    vec2 g = vec2(H(uv+vec2(th.x,0.)) - H(uv-vec2(th.x,0.)), H(uv+vec2(0.,th.y)) - H(uv-vec2(0.,th.y)));
+    g.y = -g.y;
+    float slope = clamp(length(g) / .16, 0., 1.);
+    vec2 n = -g / (length(g) + 1e-4);
+    float bevel = 1. - smoothstep(.42, .97, hHere);
+    float depth = 1. - bevel;
+    float lift = sqrt(1. - bevel*bevel);
+
+    vec2 off = -n * pow(bevel, 2.2) * 50. * slope * uRefract;
+    float disp = (.16 + uEnergy*.1) * uDisp;
+    float fr = clamp(texture(uFrost, uv).r / msk, 0., 1.);
+    vec3 refr = vec3(
+      seen(p + off*(1.+disp), fr).r,
+      seen(p + off, fr).g,
+      seen(p + off*(1.-disp), fr).b
+    );
+    refr = mix(refr, vec3(dot(refr, vec3(.333))), .18) * mix(1.08, .9, uLight) + .03*(1.-uLight);
+    // frosted glass: milkier and a little brighter
+    refr = mix(refr, mix(refr, vec3(dot(refr, vec3(.333))), .25) * mix(1.12, .97, uLight) + mix(.05, .03, uLight), fr);
+    float hl = 1. - .55*uLight;
+
+    // tint: un-premultiply by the equally blurred silhouette
+    vec4 tn = texture(uTint, uv);
+    vec3 tcol = clamp(tn.rgb / msk, 0., 1.);
+    float talpha = clamp(tn.a / msk, 0., 1.);
+    // a little of the background shows through partial tints; full opacity is a flat color
+    refr = mix(refr, tcol * mix(1., .92, uLight) + refr * .08 * (1. - talpha), talpha);
+
+    vec2 L = normalize(uMouse - p + vec2(0., -200.));
+    float spec = pow(max(dot(n, L), 0.), 26.) * pow(bevel, 2.) * slope;
+    float fres = pow(bevel, 5. / max(uRimWidth, .05)) * slope;
+    // rim color: 0 iridescent, 1 solid color, 2 each surface's tint
+    vec3 rimCol = pal(dot(n, L)*.35*slope + depth*.8 + uTime*.04 + uEnergy*.3);
+    float facing = .75 + .5 * max(dot(n, L), 0.) * slope;
+    if (uRimMode > .5 && uRimMode < 1.5) rimCol = uRimColor * facing * 1.4;
+    else if (uRimMode > 1.5) rimCol = tcol * facing * 1.4;
+
+    vec3 glass = refr;
+    glass += rimCol * fres * .45 * hl * uRim;
+    glass += vec3(1.) * spec * .75 * hl * uSpec;
+    // faint shimmer across the body; fades out as the tint becomes opaque
+    glass += pal(uTime*.04 + p.y/900. + uEnergy*.3) * .05 * lift * (1.+uEnergy*2.) * hl * (1. - talpha);
+    vec3 hairCol = uRimMode > .5 ? mix(vec3(1.), rimCol / 1.4, .6) : vec3(.9,.95,1.);
+    glass += hairCol * (1.-smoothstep(0., 1.6, abs(sd - .7))) * .4 * hl * uHair;
+
+    float a = smoothstep(-.8, .8, sd);
+    col = mix(col, glass, a);
+    grain = 1. - a;   // grain is background-only; panels stay clean
+  }
+  col += (hash(p + uTime) - .5) * .025 * grain;
+  o = vec4(col, 1.);
+}`;
+  return { maskFrag, tintFrag, blurFrag, bgFrag, compFrag };
+}
+
+// src/moods.ts
+var moods = {
+  tidal: { colors: ["#04111c", "#0f4c5c", "#6a5acd"], blend: 40, spring: { stiffness: 170, damping: 16 } },
+  aurora: { colors: ["#050b12", "#0f5e46", "#b04bd6"], blend: 40, spring: { stiffness: 120, damping: 11 } },
+  ember: { colors: ["#12060a", "#6b1a2a", "#e39a3b"], blend: 40, spring: { stiffness: 260, damping: 20 } }
+};
+function resolveMood(mood) {
+  return typeof mood === "string" ? moods[mood] ?? moods.tidal : mood;
+}
+function hexToRgb(hex) {
+  const h = hex.replace("#", "");
+  const n = h.length === 3 ? h.split("").map((c) => c + c).join("") : h;
+  return [0, 2, 4].map((i) => parseInt(n.slice(i, i + 2), 16) / 255);
+}
+
+// src/renderer.ts
+var UNIFORMS = [
+  "uRes",
+  "uScale",
+  "uTime",
+  "uGoo",
+  "uEnergy",
+  "uLight",
+  "uMouseAmt",
+  "uDropR",
+  "uAmbient",
+  "uScroll",
+  "uMouse",
+  "uP",
+  "uR",
+  "uF",
+  "uT",
+  "uFr",
+  "uEl",
+  "uSolo",
+  "uTint",
+  "uImg",
+  "uImgRes",
+  "uHasImg",
+  "uBgColor",
+  "uBgSolid",
+  "uBg",
+  "uBgM",
+  "uBgH",
+  "uFrost",
+  "uOut",
+  "uCount",
+  "uRip",
+  "uA",
+  "uB",
+  "uC",
+  "uH",
+  "uS",
+  "uTex",
+  "uDir",
+  "uVisc",
+  "uFlow",
+  "uRefract",
+  "uDisp",
+  "uRim",
+  "uRimMode",
+  "uRimColor",
+  "uRimWidth",
+  "uSpec",
+  "uHair"
+];
+var MASK_SCALE = 0.5;
+function elementBox(el) {
+  const r = el.getBoundingClientRect();
+  const w = el.offsetWidth, h = el.offsetHeight;
+  return { l: r.left + (r.width - w) / 2, t: r.top + (r.height - h) / 2, w, h };
+}
+var near = (d) => d <= 0 ? 1 : d >= 6 ? 0 : 1 - d / 6 * (d / 6) * (3 - 2 * d / 6);
+function cornerRadii(a, radius, all, self) {
+  const aR = a.l + a.w, aB = a.t + a.h;
+  const corners = [[1, -1], [1, 1], [-1, -1], [-1, 1]];
+  return corners.map(([sx, sy]) => {
+    let f = 0;
+    for (let j = 0; j < all.length && f < 1; j++) {
+      if (j === self) continue;
+      const b = all[j], bR = b.l + b.w, bB = b.t + b.h;
+      const beyondX = (sx > 0 ? bR > aR + 1 : b.l < a.l - 1) && (sy < 0 ? bB > a.t + 1 : b.t < aB - 1);
+      if (beyondX) {
+        const touch = near(sx > 0 ? b.l - aR : a.l - bR);
+        const cover = near(sy < 0 ? b.t - a.t : aB - bB);
+        f = Math.max(f, touch * cover);
+      }
+      const beyondY = (sy < 0 ? b.t < a.t - 1 : bB > aB + 1) && (sx > 0 ? b.l < aR - 1 : bR > a.l + 1);
+      if (beyondY) {
+        const touch = near(sy < 0 ? a.t - bB : b.t - aB);
+        const cover = near(sx > 0 ? aR - bR : b.l - a.l);
+        f = Math.max(f, touch * cover);
+      }
+    }
+    return radius * (1 - f);
+  });
+}
+function parseCssColor(src) {
+  if (typeof document === "undefined") return null;
+  const ctx = parseCssColor._c ?? (parseCssColor._c = document.createElement("canvas").getContext("2d"));
+  if (!ctx) return null;
+  ctx.fillStyle = "#010203";
+  ctx.fillStyle = src;
+  const a = ctx.fillStyle;
+  ctx.fillStyle = "#040506";
+  ctx.fillStyle = src;
+  const b = ctx.fillStyle;
+  if (a !== b) return null;
+  const m = /^#([0-9a-f]{6})$/i.exec(a);
+  if (m) return [0, 2, 4].map((i) => parseInt(m[1].slice(i, i + 2), 16) / 255);
+  const r = /^rgba?\(([\d.]+),\s*([\d.]+),\s*([\d.]+)/.exec(a);
+  if (r) return [+r[1] / 255, +r[2] / 255, +r[3] / 255];
+  return null;
+}
+var PlasmaRenderer = class _PlasmaRenderer {
+  constructor(canvas, gl, settings) {
+    this.imgTex = null;
+    this.imgRes = [1, 1];
+    this.imgSrc = null;
+    this.bgColor = null;
+    this.srcEl = null;
+    this.recs = /* @__PURE__ */ new Map();
+    this.nextId = 1;
+    this.raf = 0;
+    this.last = 0;
+    this.time = 0;
+    this.dpr = 1;
+    this.energy = 0;
+    this.mouse = { x: 0, y: 0, tx: 0, ty: 0, amt: 0, target: 0 };
+    this.pulses = Array.from({ length: MAX_PULSES }, () => [0, 0, -99, 0]);
+    this.pulseIdx = 0;
+    this.colors = [[0, 0, 0], [0, 0, 0], [0, 0, 0]];
+    this.colorTarget = [[0, 0, 0], [0, 0, 0], [0, 0, 0]];
+    this.blend = 40;
+    this.lightQuery = typeof matchMedia !== "undefined" ? matchMedia("(prefers-color-scheme: light)") : null;
+    this.tintCache = /* @__PURE__ */ new Map();
+    this.RP = new Float32Array(MAX_PULSES * 4);
+    this.onPointer = (e) => {
+      this.mouse.tx = e.clientX;
+      this.mouse.ty = e.clientY;
+      this.mouse.target = 1;
+    };
+    this.onLeave = () => {
+      this.mouse.target = 0;
+    };
+    this.resize = () => {
+      const gl = this.gl;
+      this.dpr = Math.min(devicePixelRatio || 1, this.settings.quality);
+      this.canvas.width = Math.max(1, Math.round(innerWidth * this.dpr));
+      this.canvas.height = Math.max(1, Math.round(innerHeight * this.dpr));
+      const w = Math.max(1, Math.round(this.canvas.width * MASK_SCALE));
+      const h = Math.max(1, Math.round(this.canvas.height * MASK_SCALE));
+      const size = (t, tw, th) => {
+        t.w = tw;
+        t.h = th;
+        gl.bindTexture(gl.TEXTURE_2D, t.tex);
+        if (this.floatOK) gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA16F, tw, th, 0, gl.RGBA, gl.HALF_FLOAT, null);
+        else gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA8, tw, th, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, t.fb);
+        gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, t.tex, 0);
+      };
+      [this.rtA, this.rtB, this.rtC, this.rtT, this.rtFr, this.rtBgM, this.rtBgH].forEach((t) => size(t, w, h));
+      size(this.rtBg, this.canvas.width, this.canvas.height);
+      gl.bindFramebuffer(gl.FRAMEBUFFER, this.mrtFb);
+      gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.rtT.tex, 0);
+      gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT1, gl.TEXTURE_2D, this.rtFr.tex, 0);
+      gl.drawBuffers([gl.COLOR_ATTACHMENT0, gl.COLOR_ATTACHMENT1]);
+      gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    };
+    this.frame = (now2) => {
+      this.raf = requestAnimationFrame(this.frame);
+      const dt = this.last ? Math.min((now2 - this.last) / 1e3, 0.05) : 0.016;
+      this.last = now2;
+      const s = this.settings;
+      this.time += dt * (s.reducedMotion ? 0.4 : 1);
+      const m = this.mouse;
+      m.x += (m.tx - m.x) * 0.18;
+      m.y += (m.ty - m.y) * 0.18;
+      m.amt += (m.target - m.amt) * Math.min(1, dt * 4);
+      const ce = 1 - Math.exp(-dt * 2);
+      this.colors.forEach((c, i) => c.forEach((v2, j) => {
+        c[j] = v2 + (this.colorTarget[i][j] - v2) * ce;
+      }));
+      this.blend += (s.blend - this.blend) * ce;
+      this.energy *= Math.exp(-dt * 1.2);
+      const vw = innerWidth, vh = innerHeight;
+      const list = [];
+      this.recs.forEach((r) => {
+        if (!r.el.isConnected) return;
+        if (!s.reducedMotion) {
+          r.formV += (170 * (1 - r.form) - 12 * r.formV) * dt;
+          r.form += r.formV * dt;
+        } else r.form = 1;
+        const b = elementBox(r.el);
+        r.box = b;
+        if (b.w === 0 || b.l > vw + 80 || b.t > vh + 80 || b.l + b.w < -80 || b.t + b.h < -80) {
+          r.sp.live = false;
+          return;
+        }
+        list.push(r);
+      });
+      const boxes = list.map((r) => this.layoutBoxOf(r));
+      const joinGap = Math.max(1.5, this.blend * 0.5);
+      list.forEach((r, i) => {
+        const a = boxes[i];
+        const sides = { top: false, right: false, bottom: false, left: false };
+        const iSolo = list[i].fuse === false;
+        boxes.forEach((b, j) => {
+          if (j === i || iSolo || list[j].fuse === false) return;
+          const overX = b.l < a.l + a.w - 1 && b.l + b.w > a.l + 1;
+          const overY = b.t < a.t + a.h - 1 && b.t + b.h > a.t + 1;
+          if (overX) {
+            if (a.t - (b.t + b.h) < joinGap && b.t < a.t) sides.top = true;
+            if (b.t - (a.t + a.h) < joinGap && b.t + b.h > a.t + a.h) sides.bottom = true;
+          }
+          if (overY) {
+            if (a.l - (b.l + b.w) < joinGap && b.l < a.l) sides.left = true;
+            if (b.l - (a.l + a.w) < joinGap && b.l + b.w > a.l + a.w) sides.right = true;
+          }
+        });
+        const joined = sides.top || sides.right || sides.bottom || sides.left;
+        if (joined !== r.joined) {
+          r.joined = joined;
+          r.onJoin?.(joined);
+        }
+        const key = `${+sides.top}${+sides.right}${+sides.bottom}${+sides.left}`;
+        if (key !== r.sidesKey) {
+          r.sidesKey = key;
+          r.onSides?.(sides);
+        }
+        let tx = 0, ty = 0;
+        if (r.lean > 0 && !joined && !r.dragging && !s.reducedMotion) {
+          const dx = m.tx - (a.l + a.w / 2), dy = m.ty - (a.t + a.h / 2);
+          const pull = Math.exp(-(dx * dx + dy * dy) / 12e4) * r.lean * m.amt;
+          const len = Math.hypot(dx, dy) || 1;
+          tx = dx / len * pull;
+          ty = dy / len * pull;
+        }
+        const le = 1 - Math.exp(-dt * 3);
+        r.lx += (tx - r.lx) * le;
+        r.ly += (ty - r.ly) * le;
+        r.el.style.translate = `${r.lx.toFixed(2)}px ${r.ly.toFixed(2)}px`;
+        const u = (this.time - r.pulseAt) / 0.36;
+        if (r.pulseAt >= 0 && u >= 0 && u <= 1 && !s.reducedMotion) r.el.style.scale = String(1 + 0.04 * r.pulseS * Math.sin(Math.PI * u));
+        else if (r.el.style.scale) r.el.style.scale = "";
+      });
+      const v = Math.min(Math.max(s.viscosity, 0), 1);
+      const st = Math.max(s.stretch, 0);
+      const stiff = (900 - 810 * v) / Math.max(st * st, 1e-4);
+      const zeta = 0.28 + 0.87 * v;
+      const damp = 2 * zeta * Math.sqrt(stiff);
+      const sx = scrollX, sy = scrollY;
+      const steps = Math.max(1, Math.ceil(dt * 120));
+      const h = dt / steps;
+      list.forEach((r) => {
+        const rr = r.el.getBoundingClientRect();
+        const tgt = [rr.left + sx, rr.top + sy, rr.right + sx, rr.bottom + sy];
+        const sp = r.sp;
+        if (!sp.live || st < 0.01 || s.reducedMotion) {
+          sp.e = tgt.slice();
+          sp.v = [0, 0, 0, 0];
+          sp.live = true;
+        } else {
+          for (let k = 0; k < steps; k++) for (let j = 0; j < 4; j++) {
+            sp.v[j] += (stiff * (tgt[j] - sp.e[j]) - damp * sp.v[j]) * h;
+            sp.e[j] += sp.v[j] * h;
+          }
+          for (let j = 0; j < 4; j++) if (Math.abs(tgt[j] - sp.e[j]) < 0.02 && Math.abs(sp.v[j]) < 0.05) {
+            sp.e[j] = tgt[j];
+            sp.v[j] = 0;
+          }
+        }
+        const l = Math.min(tgt[0], sp.e[0]) - sx, t = Math.min(tgt[1], sp.e[1]) - sy;
+        const rgt = Math.max(tgt[2], sp.e[2]) - sx, btm = Math.max(tgt[3], sp.e[3]) - sy;
+        r.drawn = { l, t, w: rgt - l, h: btm - t };
+      });
+      this.draw(list.slice(0, this.max));
+    };
+    this.canvas = canvas;
+    this.gl = gl;
+    this.settings = settings;
+    this.max = Math.max(1, Math.round(settings.maxSurfaces || DEFAULT_MAX_SHAPES));
+    this.P = new Float32Array(this.max * 4);
+    this.R = new Float32Array(this.max * 4);
+    this.F = new Float32Array(this.max);
+    this.T = new Float32Array(this.max * 4);
+    this.FR = new Float32Array(this.max);
+    this.EL = new Float32Array(this.max);
+    this.SOLO = new Float32Array(this.max);
+    this.floatOK = !!gl.getExtension("EXT_color_buffer_float");
+    const sh = makeShaders(this.max);
+    this.progs = { bg: this.program(sh.bgFrag), mask: this.program(sh.maskFrag), tint: this.program(sh.tintFrag), blur: this.program(sh.blurFrag), comp: this.program(sh.compFrag) };
+    const buf = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, buf);
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
+    gl.enableVertexAttribArray(0);
+    gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+    this.rtA = this.target();
+    this.rtB = this.target();
+    this.rtC = this.target();
+    this.rtT = this.target();
+    this.rtFr = this.target();
+    this.rtBg = this.target();
+    this.rtBgM = this.target();
+    this.rtBgH = this.target();
+    this.mrtFb = gl.createFramebuffer();
+    this.configure(settings, true);
+    this.mouse.x = this.mouse.tx = innerWidth / 2;
+    this.mouse.y = this.mouse.ty = innerHeight / 2;
+    addEventListener("resize", this.resize);
+    addEventListener("pointermove", this.onPointer, { passive: true });
+    document.addEventListener("pointerleave", this.onLeave);
+    this.resize();
+    this.raf = requestAnimationFrame(this.frame);
+  }
+  /** Returns null when WebGL2 is unavailable. */
+  static create(canvas, settings) {
+    const gl = canvas.getContext("webgl2", { antialias: false, premultipliedAlpha: false });
+    if (!gl) return null;
+    try {
+      return new _PlasmaRenderer(canvas, gl, settings);
+    } catch (e) {
+      console.error("[plasma-ui]", e);
+      return null;
+    }
+  }
+  loadBackground(src) {
+    if (src === this.imgSrc) return;
+    this.imgSrc = src;
+    const gl = this.gl;
+    const clearTex = () => {
+      if (this.imgTex) {
+        gl.deleteTexture(this.imgTex);
+        this.imgTex = null;
+      }
+    };
+    this.bgColor = null;
+    this.srcEl = null;
+    if (!src) {
+      clearTex();
+      return;
+    }
+    if (typeof src !== "string") {
+      clearTex();
+      const tex = gl.createTexture();
+      gl.bindTexture(gl.TEXTURE_2D, tex);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+      this.imgTex = tex;
+      const up = (source, w, h) => {
+        if (!w || !h) return;
+        gl.bindTexture(gl.TEXTURE_2D, this.imgTex);
+        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA8, gl.RGBA, gl.UNSIGNED_BYTE, source);
+        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+        this.imgRes = [w, h];
+      };
+      if (src instanceof HTMLCanvasElement || typeof HTMLVideoElement !== "undefined" && src instanceof HTMLVideoElement) {
+        this.srcEl = src;
+      } else if (typeof ImageBitmap !== "undefined" && src instanceof ImageBitmap) {
+        up(src, src.width, src.height);
+      } else {
+        const img2 = src;
+        if (img2.complete && img2.naturalWidth) up(img2, img2.naturalWidth, img2.naturalHeight);
+        else img2.addEventListener("load", () => {
+          if (this.imgSrc === src) up(img2, img2.naturalWidth, img2.naturalHeight);
+        }, { once: true });
+      }
+      return;
+    }
+    const rgb = parseCssColor(src);
+    if (rgb) {
+      this.bgColor = rgb;
+      clearTex();
+      return;
+    }
+    const img = new Image();
+    img.crossOrigin = "anonymous";
+    img.onload = () => {
+      if (this.imgSrc !== src) return;
+      const tex = gl.createTexture();
+      gl.bindTexture(gl.TEXTURE_2D, tex);
+      gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
+      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA8, gl.RGBA, gl.UNSIGNED_BYTE, img);
+      gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+      if (this.imgTex) gl.deleteTexture(this.imgTex);
+      this.imgTex = tex;
+      this.imgRes = [img.naturalWidth, img.naturalHeight];
+    };
+    img.src = src;
+  }
+  configure(s, immediate = false) {
+    const qualityChanged = s.quality !== this.settings.quality;
+    this.settings = s;
+    this.loadBackground(s.background ?? null);
+    this.colorTarget = s.colors.map(hexToRgb);
+    if (immediate) {
+      this.colors = this.colorTarget.map((c) => [...c]);
+      this.blend = s.blend;
+    }
+    if (qualityChanged) this.resize();
+  }
+  register(el, o, onJoin, onSides) {
+    const id = this.nextId++;
+    const rec = {
+      id,
+      el,
+      ...o,
+      form: this.settings.reducedMotion ? 1 : 0,
+      formV: 0,
+      removing: false,
+      lx: 0,
+      ly: 0,
+      joined: false,
+      dragging: false,
+      layoutBox: null,
+      pulseAt: -1,
+      pulseS: 0,
+      box: null,
+      onJoin,
+      onSides,
+      sidesKey: "",
+      sp: { e: [0, 0, 0, 0], v: [0, 0, 0, 0], live: false },
+      drawn: null,
+      elevNow: -1
+    };
+    this.recs.set(id, rec);
+    return {
+      id,
+      update: (p) => Object.assign(rec, p),
+      setLayoutBox: (fn) => {
+        rec.layoutBox = fn;
+      },
+      setDragging: (on) => {
+        rec.dragging = on;
+      },
+      leanOffset: () => ({ x: rec.lx, y: rec.ly }),
+      isJoined: () => rec.joined,
+      remove: () => {
+        el.style.translate = "";
+        el.style.scale = "";
+        this.recs.delete(id);
+      }
+    };
+  }
+  /** Layout boxes of all shapes (lean removed; animating draggables report their destination). */
+  layoutBoxes(excludeId, fusingOnly = false) {
+    const out = [];
+    this.recs.forEach((r) => {
+      if (r.id === excludeId) return;
+      if (fusingOnly && r.fuse === false) return;
+      out.push(this.layoutBoxOf(r));
+    });
+    return out;
+  }
+  layoutBoxOf(r) {
+    if (r.layoutBox) return r.layoutBox();
+    const b = elementBox(r.el);
+    return { l: b.l - r.lx, t: b.t - r.ly, w: b.w, h: b.h };
+  }
+  /** Send a pulse through the material from a viewport point. */
+  pulse(x, y, strength = 1) {
+    this.pulses[this.pulseIdx] = [x, y, this.time, strength];
+    this.pulseIdx = (this.pulseIdx + 1) % MAX_PULSES;
+    this.recs.forEach((r) => {
+      const b = elementBox(r.el);
+      const dist = Math.hypot(b.l + b.w / 2 - x, b.t + b.h / 2 - y);
+      r.pulseAt = this.time + dist / 520;
+      r.pulseS = strength;
+    });
+    this.bump(0.9 * strength);
+  }
+  /** Raise the material's energy (brightens contours and color); it decays on its own. */
+  bump(e) {
+    this.energy = Math.max(this.energy, Math.min(e, 1));
+  }
+  destroy() {
+    cancelAnimationFrame(this.raf);
+    removeEventListener("resize", this.resize);
+    removeEventListener("pointermove", this.onPointer);
+    document.removeEventListener("pointerleave", this.onLeave);
+    this.recs.forEach((r) => {
+      r.el.style.translate = "";
+      r.el.style.scale = "";
+    });
+    this.recs.clear();
+    this.gl.getExtension("WEBGL_lose_context")?.loseContext();
+  }
+  isLight() {
+    const t = this.settings.theme;
+    if (t !== "auto") return t === "light";
+    const attr = document.documentElement.dataset.theme;
+    if (attr === "light" || attr === "dark") return attr === "light";
+    return !!this.lightQuery?.matches;
+  }
+  draw(list) {
+    const gl = this.gl, s = this.settings;
+    const drawn = list.map((r) => r.drawn ?? elementBox(r.el));
+    list.forEach((r, i) => {
+      const b = drawn[i];
+      this.P.set([b.l + b.w / 2, b.t + b.h / 2, b.w / 2, b.h / 2], i * 4);
+      const squareAgainst = r.fuse === false ? [] : drawn.filter((_, j) => j !== i && list[j].fuse !== false);
+      this.R.set(cornerRadii(b, r.radius, squareAgainst, -1), i * 4);
+      this.F[i] = Math.max(0, r.form);
+      const [tr, tg, tb] = this.rgb(r.tint ?? s.tint);
+      this.T.set([tr, tg, tb, Math.min(Math.max(r.opacity ?? s.opacity, 0), 1)], i * 4);
+      this.FR[i] = Math.min(Math.max(r.frost ?? s.frost, 0), 1);
+      const base = Math.min(Math.max(r.elevation ?? s.elevation, 0), 1);
+      const target = r.dragging ? Math.min(base + 0.35, 1) : base;
+      r.elevNow = r.elevNow < 0 ? target : r.elevNow + (target - r.elevNow) * 0.12;
+      this.EL[i] = r.elevNow;
+      this.SOLO[i] = r.fuse === false ? 1 : 0;
+    });
+    this.pulses.forEach((p, i) => this.RP.set(p, i * 4));
+    const light = this.isLight() ? 1 : 0;
+    const setCommon = (u, scale) => {
+      gl.uniform2f(u.uRes, innerWidth, innerHeight);
+      gl.uniform1f(u.uScale, scale);
+      gl.uniform1f(u.uTime, this.time);
+      gl.uniform1f(u.uGoo, this.blend);
+      gl.uniform1f(u.uEnergy, this.energy);
+      gl.uniform1f(u.uLight, light);
+      gl.uniform1f(u.uMouseAmt, this.mouse.amt);
+      gl.uniform1f(u.uDropR, s.pointerDrop ? 15 : 0);
+      gl.uniform1f(u.uAmbient, s.ambientDrops ? 1 : 0);
+      gl.uniform1f(u.uScroll, scrollY * 0.25);
+      gl.uniform1f(u.uVisc, Math.min(Math.max(s.viscosity, 0), 1));
+      gl.uniform1f(u.uFlow, Math.max(s.flow, 0));
+      gl.uniform2f(u.uMouse, this.mouse.x, this.mouse.y);
+      gl.uniform4fv(u.uP, this.P);
+      gl.uniform4fv(u.uR, this.R);
+      gl.uniform1fv(u.uF, this.F);
+      gl.uniform4fv(u.uT, this.T);
+      gl.uniform1fv(u.uFr, this.FR);
+      gl.uniform1fv(u.uEl, this.EL);
+      gl.uniform1fv(u.uSolo, this.SOLO);
+      gl.uniform1i(u.uCount, list.length);
+      gl.uniform4fv(u.uRip, this.RP);
+      gl.uniform3fv(u.uA, this.colors[0]);
+      gl.uniform3fv(u.uB, this.colors[1]);
+      gl.uniform3fv(u.uC, this.colors[2]);
+    };
+    const bl = this.progs.blur;
+    const pass = (src, dst, dx, dy) => {
+      gl.bindFramebuffer(gl.FRAMEBUFFER, dst.fb);
+      gl.bindTexture(gl.TEXTURE_2D, src.tex);
+      gl.uniform2f(bl.u.uDir, dx, dy);
+      gl.uniform2f(bl.u.uOut, dst.w, dst.h);
+      gl.drawArrays(gl.TRIANGLES, 0, 3);
+    };
+    const k = this.dpr / 1.25;
+    gl.bindFramebuffer(gl.FRAMEBUFFER, this.rtBg.fb);
+    gl.viewport(0, 0, this.rtBg.w, this.rtBg.h);
+    gl.useProgram(this.progs.bg.pr);
+    setCommon(this.progs.bg.u, this.dpr);
+    gl.activeTexture(gl.TEXTURE7);
+    if (this.srcEl && this.imgTex) {
+      const el = this.srcEl;
+      const ready = el instanceof HTMLCanvasElement ? el.width > 0 : el.readyState >= 2;
+      if (ready) {
+        const w = el instanceof HTMLCanvasElement ? el.width : el.videoWidth;
+        const h = el instanceof HTMLCanvasElement ? el.height : el.videoHeight;
+        gl.bindTexture(gl.TEXTURE_2D, this.imgTex);
+        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA8, gl.RGBA, gl.UNSIGNED_BYTE, el);
+        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+        this.imgRes = [w, h];
+      }
+    }
+    gl.bindTexture(gl.TEXTURE_2D, this.imgTex);
+    gl.uniform1i(this.progs.bg.u.uImg, 7);
+    gl.uniform2f(this.progs.bg.u.uImgRes, this.imgRes[0], this.imgRes[1]);
+    gl.uniform1f(this.progs.bg.u.uHasImg, this.imgTex ? 1 : 0);
+    const bc = this.bgColor;
+    gl.uniform3f(this.progs.bg.u.uBgColor, bc?.[0] ?? 0, bc?.[1] ?? 0, bc?.[2] ?? 0);
+    gl.uniform1f(this.progs.bg.u.uBgSolid, bc ? 1 : 0);
+    gl.drawArrays(gl.TRIANGLES, 0, 3);
+    gl.activeTexture(gl.TEXTURE0);
+    gl.viewport(0, 0, this.rtA.w, this.rtA.h);
+    gl.useProgram(bl.pr);
+    gl.uniform1i(bl.u.uTex, 0);
+    gl.activeTexture(gl.TEXTURE0);
+    if (list.some((_, i) => this.FR[i] > 2e-3)) {
+      pass(this.rtBg, this.rtBgM, 1.5 * k, 0);
+      pass(this.rtBgM, this.rtB, 0, 2.5 * k);
+      pass(this.rtB, this.rtBgM, 2.5 * k, 0);
+      pass(this.rtBgM, this.rtB, 0, 2.5 * k);
+      pass(this.rtB, this.rtBgM, 2.5 * k, 0);
+      pass(this.rtBgM, this.rtB, 0, 2.5 * k);
+      pass(this.rtB, this.rtBgM, 0, 0);
+      pass(this.rtBgM, this.rtB, 5 * k, 0);
+      pass(this.rtB, this.rtBgH, 0, 5 * k);
+      pass(this.rtBgH, this.rtB, 5 * k, 0);
+      pass(this.rtB, this.rtBgH, 0, 5 * k);
+      pass(this.rtBgH, this.rtB, 5 * k, 0);
+      pass(this.rtB, this.rtBgH, 0, 5 * k);
+    }
+    gl.bindFramebuffer(gl.FRAMEBUFFER, this.rtA.fb);
+    gl.viewport(0, 0, this.rtA.w, this.rtA.h);
+    gl.useProgram(this.progs.mask.pr);
+    setCommon(this.progs.mask.u, this.dpr * MASK_SCALE);
+    gl.drawArrays(gl.TRIANGLES, 0, 3);
+    gl.bindFramebuffer(gl.FRAMEBUFFER, this.mrtFb);
+    gl.useProgram(this.progs.tint.pr);
+    setCommon(this.progs.tint.u, this.dpr * MASK_SCALE);
+    gl.drawArrays(gl.TRIANGLES, 0, 3);
+    gl.useProgram(bl.pr);
+    gl.uniform1i(bl.u.uTex, 0);
+    gl.activeTexture(gl.TEXTURE0);
+    const so = 1.4 * k * s.smoothness;
+    for (let n = 0; n < 3; n++) {
+      pass(this.rtA, this.rtB, so, 0);
+      pass(this.rtB, this.rtA, 0, so);
+    }
+    for (let n = 0; n < 3; n++) {
+      pass(this.rtT, this.rtB, so, 0);
+      pass(this.rtB, this.rtT, 0, so);
+    }
+    for (let n = 0; n < 3; n++) {
+      pass(this.rtFr, this.rtB, so, 0);
+      pass(this.rtB, this.rtFr, 0, so);
+    }
+    pass(this.rtA, this.rtB, 2 * k, 0);
+    pass(this.rtB, this.rtC, 0, 2 * k);
+    for (let n = 0; n < 3; n++) {
+      pass(this.rtC, this.rtB, 2 * k, 0);
+      pass(this.rtB, this.rtC, 0, 2 * k);
+    }
+    const c = this.progs.comp;
+    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    gl.viewport(0, 0, this.canvas.width, this.canvas.height);
+    gl.useProgram(c.pr);
+    setCommon(c.u, this.dpr);
+    gl.uniform1f(c.u.uRefract, s.refraction);
+    gl.uniform1f(c.u.uDisp, s.dispersion);
+    gl.uniform1f(c.u.uRim, s.rim);
+    const mode = s.rimColor === "iridescent" ? 0 : s.rimColor === "tint" ? 2 : 1;
+    gl.uniform1f(c.u.uRimMode, mode);
+    gl.uniform3fv(c.u.uRimColor, mode === 1 ? this.rgb(s.rimColor) : [1, 1, 1]);
+    gl.uniform1f(c.u.uRimWidth, s.rimWidth);
+    gl.uniform1f(c.u.uSpec, s.highlight);
+    gl.uniform1f(c.u.uHair, s.edgeLine);
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, this.rtC.tex);
+    gl.activeTexture(gl.TEXTURE1);
+    gl.bindTexture(gl.TEXTURE_2D, this.rtA.tex);
+    gl.activeTexture(gl.TEXTURE2);
+    gl.bindTexture(gl.TEXTURE_2D, this.rtT.tex);
+    gl.activeTexture(gl.TEXTURE3);
+    gl.bindTexture(gl.TEXTURE_2D, this.rtBg.tex);
+    gl.activeTexture(gl.TEXTURE4);
+    gl.bindTexture(gl.TEXTURE_2D, this.rtBgM.tex);
+    gl.activeTexture(gl.TEXTURE5);
+    gl.bindTexture(gl.TEXTURE_2D, this.rtBgH.tex);
+    gl.activeTexture(gl.TEXTURE6);
+    gl.bindTexture(gl.TEXTURE_2D, this.rtFr.tex);
+    gl.uniform1i(c.u.uBg, 3);
+    gl.uniform1i(c.u.uBgM, 4);
+    gl.uniform1i(c.u.uBgH, 5);
+    gl.uniform1i(c.u.uFrost, 6);
+    gl.uniform1i(c.u.uH, 0);
+    gl.uniform1i(c.u.uS, 1);
+    gl.uniform1i(c.u.uTint, 2);
+    gl.drawArrays(gl.TRIANGLES, 0, 3);
+    gl.activeTexture(gl.TEXTURE0);
+  }
+  rgb(hex) {
+    let c = this.tintCache.get(hex);
+    if (!c) {
+      c = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(hex) ? hexToRgb(hex) : [1, 1, 1];
+      this.tintCache.set(hex, c);
+    }
+    return c;
+  }
+  program(fsrc) {
+    const gl = this.gl;
+    const compile = (type, src) => {
+      const sh = gl.createShader(type);
+      gl.shaderSource(sh, src);
+      gl.compileShader(sh);
+      if (!gl.getShaderParameter(sh, gl.COMPILE_STATUS)) throw new Error(gl.getShaderInfoLog(sh) || "shader compile failed");
+      return sh;
+    };
+    const pr = gl.createProgram();
+    gl.attachShader(pr, compile(gl.VERTEX_SHADER, vert));
+    gl.attachShader(pr, compile(gl.FRAGMENT_SHADER, fsrc));
+    gl.bindAttribLocation(pr, 0, "p");
+    gl.linkProgram(pr);
+    if (!gl.getProgramParameter(pr, gl.LINK_STATUS)) throw new Error(gl.getProgramInfoLog(pr) || "program link failed");
+    const u = {};
+    UNIFORMS.forEach((n) => {
+      u[n] = gl.getUniformLocation(pr, n);
+    });
+    return { pr, u };
+  }
+  target() {
+    const gl = this.gl;
+    const tex = gl.createTexture();
+    gl.bindTexture(gl.TEXTURE_2D, tex);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    return { tex, fb: gl.createFramebuffer(), w: 0, h: 0 };
+  }
+};
+
+// src/PlasmaProvider.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var noop = () => {
+};
+var PlasmaContext = createContext({
+  renderer: null,
+  tint: "#ffffff",
+  opacity: 0,
+  frost: 0,
+  radius: 26,
+  supported: false,
+  grid: 24,
+  magnet: 40,
+  spring: { stiffness: 170, damping: 16 },
+  reducedMotion: false,
+  pulse: noop,
+  bump: noop
+});
+var usePlasma = () => useContext(PlasmaContext);
+var FALLBACK_CSS = `
+.plasma-glass{box-sizing:border-box}
+.plasma-fallback{
+  background:linear-gradient(160deg,rgb(255 255 255/.14),rgb(255 255 255/.05));
+  -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
+  border:1px solid rgb(255 255 255/.22);
+  box-shadow:inset 0 1px 0 rgb(255 255 255/.25),0 20px 40px -20px rgb(0 0 0/.5);
+}
+.plasma-glass[data-plasma-draggable]{touch-action:none;cursor:grab}
+.plasma-glass[data-plasma-dragging]{cursor:grabbing;user-select:none}
+`;
+function useReducedMotion() {
+  const [reduced, setReduced] = useState(false);
+  useEffect(() => {
+    const q = matchMedia("(prefers-reduced-motion: reduce)");
+    const on = () => setReduced(q.matches);
+    on();
+    q.addEventListener("change", on);
+    return () => q.removeEventListener("change", on);
+  }, []);
+  return reduced;
+}
+function PlasmaProvider({
+  children,
+  mood = "tidal",
+  theme = "auto",
+  blend,
+  refraction = 1,
+  dispersion = 1,
+  rim = 1,
+  smoothness = 1,
+  background,
+  radius = 26,
+  tint = "#ffffff",
+  opacity = 0,
+  frost = 0,
+  elevation = 0.35,
+  viscosity = 0.5,
+  stretch = 1,
+  flow = 0,
+  rimColor = "iridescent",
+  rimWidth = 1,
+  highlight = 1,
+  edgeLine = 1,
+  pointerDrop = true,
+  ambientDrops = false,
+  grid = 24,
+  magnet = 40,
+  quality = 1.25,
+  maxSurfaces = 16,
+  zIndex = -1
+}) {
+  const canvasRef = useRef(null);
+  const [renderer, setRenderer] = useState(null);
+  const [supported, setSupported] = useState(true);
+  const reducedMotion = useReducedMotion();
+  const m = resolveMood(mood);
+  const settings = {
+    colors: m.colors,
+    blend: blend ?? m.blend,
+    refraction,
+    dispersion,
+    rim,
+    smoothness,
+    pointerDrop: pointerDrop && !reducedMotion,
+    ambientDrops,
+    theme,
+    quality,
+    reducedMotion,
+    tint,
+    opacity,
+    rimColor,
+    rimWidth,
+    highlight,
+    edgeLine,
+    viscosity,
+    stretch,
+    flow,
+    frost,
+    elevation,
+    maxSurfaces,
+    background: background ?? null
+  };
+  const settingsRef = useRef(settings);
+  settingsRef.current = settings;
+  useLayoutEffect(() => {
+    const r = PlasmaRenderer.create(canvasRef.current, settingsRef.current);
+    if (!r) {
+      setSupported(false);
+      return;
+    }
+    setRenderer(r);
+    return () => {
+      r.destroy();
+      setRenderer(null);
+    };
+  }, []);
+  useEffect(() => {
+    renderer?.configure(settings);
+  }, [
+    renderer,
+    m.colors.join(),
+    settings.blend,
+    refraction,
+    dispersion,
+    rim,
+    smoothness,
+    settings.pointerDrop,
+    ambientDrops,
+    theme,
+    quality,
+    reducedMotion,
+    tint,
+    opacity,
+    rimColor,
+    rimWidth,
+    highlight,
+    edgeLine,
+    viscosity,
+    stretch,
+    flow,
+    frost,
+    elevation,
+    background
+  ]);
+  const vis = Math.min(Math.max(viscosity, 0), 1);
+  const stiffK = vis < 0.5 ? 1.6 - 1.2 * vis : 1 - 1.1 * (vis - 0.5);
+  const dampK = vis < 0.5 ? 0.6 + 0.8 * vis : 1 + 1.6 * (vis - 0.5);
+  const spring = { stiffness: m.spring.stiffness * stiffK, damping: m.spring.damping * dampK * Math.sqrt(stiffK) };
+  const value = useMemo(() => ({
+    renderer,
+    tint,
+    opacity,
+    frost,
+    radius,
+    supported,
+    grid,
+    magnet,
+    spring,
+    reducedMotion,
+    pulse: (x, y, s) => renderer?.pulse(x, y, s),
+    bump: (e) => renderer?.bump(e)
+  }), [renderer, tint, opacity, frost, radius, supported, grid, magnet, spring.stiffness, spring.damping, reducedMotion]);
+  return /* @__PURE__ */ jsxs(PlasmaContext.Provider, { value, children: [
+    /* @__PURE__ */ jsx("style", { children: FALLBACK_CSS }),
+    /* @__PURE__ */ jsx(
+      "canvas",
+      {
+        ref: canvasRef,
+        "aria-hidden": "true",
+        style: {
+          position: "fixed",
+          inset: 0,
+          width: "100%",
+          height: "100%",
+          zIndex,
+          pointerEvents: "none",
+          display: supported ? "block" : "none"
+        }
+      }
+    ),
+    children
+  ] });
+}
+
+// src/Plasma.tsx
+import { forwardRef, useCallback, useEffect as useEffect2, useLayoutEffect as useLayoutEffect2, useRef as useRef2, useState as useState2 } from "react";
+
+// src/spring.ts
+var now = () => typeof performance !== "undefined" ? performance.now() : Date.now();
+function springValue(initial) {
+  let v = initial;
+  const hist = [[0, initial]];
+  const subs = /* @__PURE__ */ new Set();
+  return {
+    get: () => v,
+    set(next) {
+      if (next === v) return;
+      v = next;
+      const t = now();
+      const last = hist[hist.length - 1];
+      if (t - last[0] < 1) last[1] = next;
+      else {
+        hist.push([t, next]);
+        if (hist.length > 6) hist.shift();
+      }
+      subs.forEach((fn) => fn(v));
+    },
+    on(fn) {
+      subs.add(fn);
+      return () => subs.delete(fn);
+    },
+    getVelocity() {
+      const t = now();
+      const newest = hist[hist.length - 1];
+      if (t - newest[0] > 100) return 0;
+      for (let i = 0; i < hist.length - 1; i++) {
+        const [rt, rv] = hist[i];
+        if (newest[0] - rt <= 100) {
+          const dt = newest[0] - rt;
+          return dt >= 4 ? (newest[1] - rv) / dt * 1e3 : 0;
+        }
+      }
+      return 0;
+    }
+  };
+}
+function animateSpring(value, to, o) {
+  let x = value.get();
+  let vel = o.velocity ?? 0;
+  let raf = 0;
+  let last = now();
+  const tick = () => {
+    const t = now();
+    const dt = Math.min((t - last) / 1e3, 0.05);
+    last = t;
+    const steps = Math.max(1, Math.ceil(dt * 240));
+    const h = dt / steps;
+    for (let i = 0; i < steps; i++) {
+      vel += (o.stiffness * (to - x) - o.damping * vel) * h;
+      x += vel * h;
+    }
+    if (Math.abs(vel) < 1 && Math.abs(to - x) < 0.05) {
+      value.set(to);
+      return;
+    }
+    value.set(x);
+    raf = requestAnimationFrame(tick);
+  };
+  raf = requestAnimationFrame(tick);
+  return { stop: () => cancelAnimationFrame(raf) };
+}
+
+// src/snap.ts
+function snapBox(b, others, o) {
+  const { grid, magnet, bounds } = o;
+  const inset = o.inset ?? 0;
+  const pick = (cur, cands) => {
+    let best = null, bd = magnet;
+    for (const v of cands) {
+      const d = Math.abs(v - cur);
+      if (d < bd) {
+        bd = d;
+        best = v;
+      }
+    }
+    return best;
+  };
+  const nearX = (n) => b.t < n.t + n.h + magnet && b.t + b.h > n.t - magnet;
+  const nearY = (n) => b.l < n.l + n.w + magnet && b.l + b.w > n.l - magnet;
+  let l = pick(b.l, others.flatMap((n) => nearX(n) ? [n.l, n.l + n.w - b.w, n.l + n.w, n.l - b.w] : []));
+  let t = pick(b.t, others.flatMap((n) => nearY(n) ? [n.t, n.t + n.h - b.h, n.t + n.h, n.t - b.h] : []));
+  if (l === null) l = grid > 0 ? bounds.l + Math.round((b.l - bounds.l) / grid) * grid : b.l;
+  if (t === null) t = grid > 0 ? bounds.t + Math.round((b.t - bounds.t) / grid) * grid : b.t;
+  for (const n of others) {
+    const ox = Math.min(l + b.w, n.l + n.w) - Math.max(l, n.l);
+    const oy = Math.min(t + b.h, n.t + n.h) - Math.max(t, n.t);
+    if (ox > 2 && oy > 2) {
+      if (ox < oy) l = l + b.w / 2 < n.l + n.w / 2 ? n.l - b.w : n.l + n.w;
+      else t = t + b.h / 2 < n.t + n.h / 2 ? n.t - b.h : n.t + n.h;
+    }
+  }
+  const clamp = (v, lo, hi) => Math.min(Math.max(v, lo), Math.max(lo, hi));
+  return {
+    l: clamp(l, bounds.l + inset, bounds.l + bounds.w - b.w - inset),
+    t: clamp(t, bounds.t + inset, bounds.t + bounds.h - b.h - inset)
+  };
+}
+function boxGap(a, b) {
+  const gx = Math.max(a.l - (b.l + b.w), b.l - (a.l + a.w));
+  const gy = Math.max(a.t - (b.t + b.h), b.t - (a.t + a.h));
+  return Math.max(gx, gy);
+}
+
+// src/Plasma.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var NO_DRAG = "button,a,input,textarea,select,label,[contenteditable],[data-plasma-nodrag]";
+function fallbackTint(hex, a) {
+  if (!(a > 0) || !/^#([0-9a-f]{6})$/i.test(hex)) return null;
+  const n = parseInt(hex.slice(1), 16);
+  return { backgroundColor: `rgb(${n >> 16} ${n >> 8 & 255} ${n & 255} / ${Math.min(a, 1) * 0.85})` };
+}
+function assignRef(ref, v) {
+  if (typeof ref === "function") ref(v);
+  else if (ref) ref.current = v;
+}
+var Plasma = forwardRef(function Plasma2({
+  as: Comp = "div",
+  radius,
+  lean = 10,
+  tint,
+  opacity,
+  frost,
+  elevation,
+  fuse,
+  padding,
+  draggable = false,
+  snap = true,
+  bounds,
+  offset,
+  defaultOffset,
+  onDragStart,
+  onDragEnd,
+  onJoinChange,
+  className,
+  style,
+  children,
+  onPointerDown,
+  onKeyDown,
+  tabIndex,
+  ...rest
+}, ref) {
+  const plasma = usePlasma();
+  const r = radius ?? plasma.radius;
+  const el = useRef2(null);
+  const handle = useRef2(null);
+  const [x] = useState2(() => springValue(offset?.x ?? defaultOffset?.x ?? 0));
+  const [y] = useState2(() => springValue(offset?.y ?? defaultOffset?.y ?? 0));
+  const dest = useRef2({ x: x.get(), y: y.get() });
+  const anims = useRef2([]);
+  const [dragging, setDragging] = useState2(false);
+  const positioned = draggable || !!offset || !!defaultOffset;
+  const joinCb = useRef2(onJoinChange);
+  joinCb.current = onJoinChange;
+  const [sides, setSides] = useState2({ top: false, right: false, bottom: false, left: false });
+  const plasmaRef = useRef2(plasma);
+  plasmaRef.current = plasma;
+  const setRef = useCallback((node) => {
+    el.current = node;
+    assignRef(ref, node);
+  }, [ref]);
+  useLayoutEffect2(() => {
+    const node = el.current, ren = plasma.renderer;
+    if (!node || !ren) return;
+    const h = ren.register(node, { radius: r, lean: lean || 0, tint: tint ?? null, opacity: opacity ?? null, frost: frost ?? null, elevation: elevation ?? null, fuse }, (j) => joinCb.current?.(j), setSides);
+    if (positioned) {
+      h.setLayoutBox(() => {
+        const rect = node.getBoundingClientRect();
+        const w = node.offsetWidth, hh = node.offsetHeight;
+        const lo = h.leanOffset();
+        return {
+          l: rect.left + (rect.width - w) / 2 - lo.x - x.get() + dest.current.x,
+          t: rect.top + (rect.height - hh) / 2 - lo.y - y.get() + dest.current.y,
+          w,
+          h: hh
+        };
+      });
+    }
+    handle.current = h;
+    return () => {
+      h.remove();
+      handle.current = null;
+    };
+  }, [plasma.renderer, positioned]);
+  useEffect2(() => {
+    handle.current?.update({ radius: r, lean: lean || 0, tint: tint ?? null, opacity: opacity ?? null, frost: frost ?? null, elevation: elevation ?? null, fuse });
+  }, [r, lean, tint, opacity, frost, elevation, fuse]);
+  useLayoutEffect2(() => {
+    const node = el.current;
+    if (!node || !positioned) return;
+    const apply = () => {
+      node.style.transform = `translate3d(${x.get()}px, ${y.get()}px, 0)`;
+    };
+    apply();
+    const a = x.on(apply), b = y.on(apply);
+    return () => {
+      a();
+      b();
+    };
+  }, [positioned]);
+  const springTo = useCallback((tx, ty, vx = 0, vy = 0) => {
+    dest.current = { x: tx, y: ty };
+    anims.current.forEach((a) => a.stop());
+    const { spring, reducedMotion } = plasmaRef.current;
+    if (reducedMotion) {
+      x.set(tx);
+      y.set(ty);
+      anims.current = [];
+      return;
+    }
+    const opts = { stiffness: spring.stiffness, damping: spring.damping };
+    anims.current = [animateSpring(x, tx, { ...opts, velocity: vx }), animateSpring(y, ty, { ...opts, velocity: vy })];
+  }, []);
+  useEffect2(() => {
+    if (!offset) return;
+    if (offset.x === dest.current.x && offset.y === dest.current.y) return;
+    springTo(offset.x, offset.y);
+  }, [offset?.x, offset?.y]);
+  useEffect2(() => () => anims.current.forEach((a) => a.stop()), []);
+  const boundsBox = () => {
+    const b = bounds?.current?.getBoundingClientRect();
+    return b ? { l: b.left, t: b.top, w: b.width, h: b.height } : { l: 0, t: 0, w: innerWidth, h: innerHeight };
+  };
+  const settle = (proposed, vx = 0, vy = 0) => {
+    const node = el.current, h = handle.current;
+    const { grid, magnet, renderer } = plasmaRef.current;
+    let target = proposed;
+    if (snap && h && renderer) {
+      const rect = node.getBoundingClientRect();
+      const w = node.offsetWidth, hh = node.offsetHeight;
+      const lo = h.leanOffset();
+      const baseL = rect.left + (rect.width - w) / 2 - lo.x - x.get();
+      const baseT = rect.top + (rect.height - hh) / 2 - lo.y - y.get();
+      const s = snapBox(
+        { l: baseL + proposed.x, t: baseT + proposed.y, w, h: hh },
+        renderer.layoutBoxes(h.id, true),
+        { grid, magnet, bounds: boundsBox(), inset: bounds ? 0 : 8 }
+      );
+      target = { x: s.l - baseL, y: s.t - baseT };
+    }
+    springTo(target.x, target.y, vx, vy);
+    onDragEnd?.(target);
+  };
+  const handlePointerDown = (e) => {
+    onPointerDown?.(e);
+    if (!draggable || e.defaultPrevented || e.button !== 0) return;
+    if (e.target.closest(NO_DRAG)) return;
+    const node = el.current;
+    node.setPointerCapture(e.pointerId);
+    anims.current.forEach((a) => a.stop());
+    const start = { px: e.clientX, py: e.clientY, x: x.get(), y: y.get() };
+    const bb = boundsBox();
+    const rect = node.getBoundingClientRect();
+    const lo = handle.current?.leanOffset() ?? { x: 0, y: 0 };
+    const baseL = rect.left + (rect.width - node.offsetWidth) / 2 - lo.x - start.x;
+    const baseT = rect.top + (rect.height - node.offsetHeight) / 2 - lo.y - start.y;
+    const minX = bb.l - baseL, maxX = bb.l + bb.w - node.offsetWidth - baseL;
+    const minY = bb.t - baseT, maxY = bb.t + bb.h - node.offsetHeight - baseT;
+    const clamp = (v, a, b) => Math.min(Math.max(v, a), Math.max(a, b));
+    handle.current?.setDragging(true);
+    setDragging(true);
+    onDragStart?.();
+    const move = (ev) => {
+      x.set(clamp(start.x + ev.clientX - start.px, minX - 40, maxX + 40));
+      y.set(clamp(start.y + ev.clientY - start.py, minY - 40, maxY + 40));
+      dest.current = { x: x.get(), y: y.get() };
+      plasmaRef.current.bump(Math.hypot(x.getVelocity(), y.getVelocity()) / 1800);
+    };
+    const up = () => {
+      node.removeEventListener("pointermove", move);
+      node.removeEventListener("pointerup", up);
+      node.removeEventListener("pointercancel", up);
+      handle.current?.setDragging(false);
+      setDragging(false);
+      const vx = x.getVelocity(), vy = y.getVelocity();
+      settle({ x: x.get() + vx * 0.15, y: y.get() + vy * 0.15 }, vx, vy);
+    };
+    node.addEventListener("pointermove", move);
+    node.addEventListener("pointerup", up);
+    node.addEventListener("pointercancel", up);
+  };
+  const handleKeyDown = (e) => {
+    onKeyDown?.(e);
+    if (!draggable || e.defaultPrevented || e.target !== el.current) return;
+    const step = plasmaRef.current.grid || 24;
+    const d = { ArrowLeft: [-step, 0], ArrowRight: [step, 0], ArrowUp: [0, -step], ArrowDown: [0, step] }[e.key];
+    if (!d) return;
+    e.preventDefault();
+    settle({ x: dest.current.x + d[0], y: dest.current.y + d[1] });
+  };
+  const classes = ["plasma-glass", plasma.supported ? "" : "plasma-fallback", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx2(
+    Comp,
+    {
+      ref: setRef,
+      className: classes,
+      style: {
+        borderRadius: r,
+        ...padding != null && {
+          padding: `${sides.top ? padding / 2 : padding}px ${sides.right ? padding / 2 : padding}px ${sides.bottom ? padding / 2 : padding}px ${sides.left ? padding / 2 : padding}px`,
+          transition: "padding 250ms ease"
+        },
+        ...plasma.supported ? null : fallbackTint(tint ?? plasma.tint, opacity ?? plasma.opacity),
+        ...style
+      },
+      "data-plasma-draggable": draggable || void 0,
+      "data-plasma-dragging": dragging || void 0,
+      tabIndex: tabIndex ?? (draggable ? 0 : void 0),
+      onPointerDown: handlePointerDown,
+      onKeyDown: handleKeyDown,
+      ...rest,
+      children
+    }
+  );
+});
+export {
+  DEFAULT_MAX_SHAPES,
+  Plasma,
+  PlasmaProvider,
+  PlasmaRenderer,
+  boxGap,
+  makeShaders,
+  moods,
+  resolveMood,
+  snapBox,
+  usePlasma
+};