glass-pulse-fx 0.1.0

package/dist/core.cjs

@@ -0,0 +1,1371 @@
+'use strict';
+
+// src/engine/perf.ts
+var GL_SIZE = 384;
+var DPR = typeof window !== "undefined" ? Math.min(2, window.devicePixelRatio || 1) : 1;
+var DEFAULT_FPS = 30;
+function frameMsForFps(fps = DEFAULT_FPS) {
+  return 1e3 / fps;
+}
+var CROP_W = 140;
+var CROP_H = 40;
+var MIN_SAMPLE_SPAN = 0.9;
+var SHADER_SCALE = {
+  pill: 1.6,
+  circle: 1.3,
+  rect: 1.7,
+  tag: 1.25,
+  card: 2.4,
+  icon: 1.15
+};
+var BLOOM_MAX = 240;
+
+// src/engine/color.ts
+var HEX = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i;
+function isHexColor(c) {
+  return HEX.test(c.trim());
+}
+function expand(h) {
+  let s = h.slice(1);
+  if (s.length === 3) s = s[0] + s[0] + s[1] + s[1] + s[2] + s[2];
+  return parseInt(s, 16);
+}
+function hexToRgb(h) {
+  const n = expand(h);
+  return [(n >> 16 & 255) / 255, (n >> 8 & 255) / 255, (n & 255) / 255];
+}
+function hexToRgba(h, a) {
+  const n = expand(h);
+  return `rgba(${n >> 16 & 255},${n >> 8 & 255},${n & 255},${a})`;
+}
+function withAlpha(color, a) {
+  return isHexColor(color) ? hexToRgba(color, a) : color;
+}
+function parseColor(c) {
+  const s = c.trim();
+  if (isHexColor(s)) {
+    const n = expand(s);
+    return { r: n >> 16 & 255, g: n >> 8 & 255, b: n & 255, a: 1 };
+  }
+  const m = s.match(/^rgba?\(([^)]+)\)$/i);
+  if (!m) return { r: 0, g: 0, b: 0, a: 0 };
+  const parts = m[1].split(/[,/]/).map((p) => parseFloat(p.trim()));
+  return { r: parts[0] || 0, g: parts[1] || 0, b: parts[2] || 0, a: parts[3] == null ? 1 : parts[3] };
+}
+function compositeOver(fg, bg) {
+  const a = fg.a + bg.a * (1 - fg.a);
+  if (a === 0) return { r: 0, g: 0, b: 0, a: 0 };
+  return {
+    r: (fg.r * fg.a + bg.r * bg.a * (1 - fg.a)) / a,
+    g: (fg.g * fg.a + bg.g * bg.a * (1 - fg.a)) / a,
+    b: (fg.b * fg.a + bg.b * bg.a * (1 - fg.a)) / a,
+    a
+  };
+}
+function rgbToHex(c) {
+  const h = (n) => Math.max(0, Math.min(255, Math.round(n))).toString(16).padStart(2, "0");
+  return `#${h(c.r)}${h(c.g)}${h(c.b)}`;
+}
+
+// src/engine/effects/common.ts
+var VERT = `attribute vec2 a_position; void main(){ gl_Position = vec4(a_position,0.0,1.0); }`;
+var COMMON_GLSL = `
+precision highp float;
+uniform vec2 u_resolution;
+uniform float u_time;
+uniform vec3 u_color1,u_color2,u_color3,u_color4,u_color5;
+uniform float u_count,u_speed,u_scale,u_bright;
+
+vec3 paneColor(int i){
+  if(i<=0) return u_color1;
+  else if(i==1) return u_color2;
+  else if(i==2) return u_color3;
+  else if(i==3) return u_color4;
+  return u_color5;
+}
+`;
+var COMMON_UNIFORMS = [
+  "u_resolution",
+  "u_time",
+  "u_color1",
+  "u_color2",
+  "u_color3",
+  "u_color4",
+  "u_color5",
+  "u_count",
+  "u_speed",
+  "u_scale",
+  "u_bright"
+];
+function uploadCommon(gl, U, p) {
+  for (let i = 0; i < 5; i++) {
+    const c = hexToRgb(p.colors[i] ?? "#000000");
+    gl.uniform3f(U[`u_color${i + 1}`], c[0], c[1], c[2]);
+  }
+  gl.uniform1f(U.u_count, Math.min(5, Math.max(1, p.colors.length)));
+  gl.uniform1f(U.u_speed, p.speed);
+  gl.uniform1f(U.u_scale, p.scale);
+  gl.uniform1f(U.u_bright, p.bright);
+}
+
+// src/engine/effects/panes.ts
+var WARP_N = 24;
+var VELOCITY_PRESETS = [
+  { label: "Uniform", curve: [1, 1, 0.33, 1, 0.67, 1] },
+  { label: "Ease out", curve: [0.8, 0.35, 0.33, 0.72, 0.67, 0.45] },
+  { label: "Ease out+", curve: [1, 0.15, 0.25, 0.55, 0.6, 0.2] },
+  { label: "Ease in", curve: [0.35, 0.8, 0.33, 0.45, 0.67, 0.72] },
+  { label: "Slow middle", curve: [1, 1, 0.33, 0.35, 0.67, 0.35] },
+  { label: "Fast middle", curve: [0.45, 0.45, 0.33, 1, 0.67, 1] }
+];
+var lutKey = -1;
+var lut = new Float32Array(WARP_N);
+function warpLUT(p) {
+  const key = VELOCITY_PRESETS[Math.round(p.velocity)] ? Math.round(p.velocity) : 0;
+  if (key === lutKey) return lut;
+  lutKey = key;
+  const [a, b, c0x, c0y, c1x, c1y] = VELOCITY_PRESETS[key].curve;
+  const bx = (t) => {
+    const it = 1 - t;
+    return 3 * it * it * t * c0x + 3 * it * t * t * c1x + t * t * t;
+  };
+  const by = (t) => {
+    const it = 1 - t;
+    return it * it * it * a + 3 * it * it * t * c0y + 3 * it * t * t * c1y + t * t * t * b;
+  };
+  const bdx = (t) => {
+    const it = 1 - t;
+    return 3 * it * it * c0x + 6 * it * t * (c1x - c0x) + 3 * t * t * (1 - c1x);
+  };
+  const clamp01 = (v) => v < 0 ? 0 : v > 1 ? 1 : v;
+  const speed = (s) => {
+    let t = clamp01(s);
+    for (let i = 0; i < 6; i++) {
+      const d = bdx(t);
+      if (Math.abs(d) < 1e-5) break;
+      t = clamp01(t - (bx(t) - s) / d);
+    }
+    return Math.max(by(t), 0.05);
+  };
+  const M = 128;
+  const cum = new Float64Array(M + 1);
+  let prev = 1 / speed(0);
+  for (let i = 1; i <= M; i++) {
+    const cur = 1 / speed(i / M);
+    cum[i] = cum[i - 1] + (prev + cur) * 0.5 / M;
+    prev = cur;
+  }
+  const total = cum[M] || 1;
+  for (let j = 0; j < WARP_N; j++) {
+    const fi = j / (WARP_N - 1) * M;
+    const i0 = Math.min(M - 1, Math.floor(fi));
+    lut[j] = (cum[i0] + (cum[i0 + 1] - cum[i0]) * (fi - i0)) / total;
+  }
+  return lut;
+}
+var FRAG = COMMON_GLSL + `
+uniform float u_angle, u_rampIn, u_rampOut, u_interval, u_motion;
+// Precomputed position-remap (the integral of 1/speed) as a 24-point lookup table. The
+// velocity curve is the same for every pixel and only changes when the handles move, so
+// the CPU bakes this once per change \u2014 the shader just reads it (no per-pixel solve).
+uniform float u_warp[24];
+uniform vec3 u_color;   // colorSpread (along), colorSkew (perpendicular), colorDrift (time)
+
+// smooth cyclic gradient through the palette stops (u_count = colors.length)
+vec3 paletteSmooth(float gc){
+  int count = int(u_count + 0.5);
+  float x = fract(gc) * float(count);
+  float fi = floor(x);
+  int i0 = int(fi);
+  int i1 = i0 + 1; if(i1 >= count) i1 = 0;
+  return mix(paneColor(i0), paneColor(i1), x - fi);
+}
+
+float sampleWarp(float s){
+  float fi = clamp(s, 0.0, 1.0) * 23.0;
+  float i0 = floor(fi);
+  float fr = fi - i0;
+  int idx = int(i0);
+  float lo = u_warp[0];
+  float hi = u_warp[23];
+  for(int k = 0; k < 24; k++){          // constant-index read (portable on WebGL1)
+    if(k == idx) lo = u_warp[k];
+    if(k == idx + 1) hi = u_warp[k];
+  }
+  return mix(lo, hi, fr);
+}
+
+void main(){
+  vec2 uv = gl_FragCoord.xy / u_resolution;
+  vec2 p = uv - 0.5;
+  vec2 dir = vec2(cos(u_angle), sin(u_angle));
+
+  // The pane is always one unit wide; interval expands the pane+gap cycle instead of
+  // stealing width from the pane. So increasing interval adds transparent space after
+  // each pane while the pane's ramp/hold/ramp shape stays the same.
+  float interval = clamp(u_interval, 0.0, 0.95);
+  float gap = interval / max(1.0 - interval, 0.05);
+  float cycle = 1.0 + gap;
+
+  // Radial/orbit need no aspect correction here: the EffectDef declares 'isotropic'
+  // sampling for those modes, so the compositor crops an aspect-true window and
+  // field-space circles/angles render screen-true on every shape.
+
+  // band position along the mode's 1D coordinate, remapped through the velocity warp,
+  // plus the colour-field coords: ca along the motion, cp perpendicular to it
+  float pos; float ca; float cp;
+  if(u_motion < 1.5){
+    float u = dot(p, dir);
+    float s = (u_motion > 0.5) ? clamp(abs(u) * 2.0, 0.0, 1.0) : clamp(u + 0.5, 0.0, 1.0);
+    float w01 = sampleWarp(s);
+    pos = ((u_motion > 0.5) ? w01 * 0.5 : w01 - 0.5) * u_scale - u_time * u_speed;
+    ca = u + 0.5;
+    cp = dot(p, vec2(-dir.y, dir.x)) + 0.5;
+  } else if(u_motion < 2.5){
+    float r = length(p) * 2.0;
+    pos = sampleWarp(clamp(r, 0.0, 1.0)) * 0.5 * u_scale - u_time * u_speed;
+    ca = r;
+    cp = fract((atan(p.y, p.x) - u_angle) / 6.2831853);
+  } else {
+    float theta = fract((atan(p.y, p.x) - u_angle) / 6.2831853);
+    float spokes = max(1.0, floor(u_scale + 0.5)); // whole cycles -> no seam at the wrap
+    pos = sampleWarp(theta) * spokes * cycle - u_time * u_speed;
+    ca = theta;
+    cp = length(p) * 2.0;
+  }
+
+  // color field \u2014 sampled independently of the band index, so colour can vary within and
+  // across a band: along the motion (spread), perpendicular (skew), and over time (drift)
+  vec3 c = paletteSmooth(ca * u_color.x + cp * u_color.y + u_time * u_color.z);
+
+  float f = mod(pos, cycle);
+  float ri = clamp(u_rampIn, 0.001, 1.0);
+  float ro = clamp(u_rampOut, 0.001, 1.0);
+  float env = 0.0;
+  if(f < 1.0){
+    env = smoothstep(0.0, ri, f) * (1.0 - smoothstep(1.0 - ro, 1.0, f));
+  }
+  gl_FragColor = vec4(c * u_bright, env);
+}`;
+var DEFAULT_PANE_COLORS = ["#FF2D9B", "#7A5CFF", "#19C3FF", "#15E6A4", "#FFD23F"];
+var dark = {
+  colors: [...DEFAULT_PANE_COLORS],
+  speed: 0.25,
+  scale: 1.6,
+  bright: 1,
+  colorSpread: 2,
+  colorSkew: 0,
+  colorDrift: 0,
+  velocity: 1,
+  // Ease out
+  rampIn: 0.25,
+  rampOut: 0.5,
+  interval: 0.4,
+  angle: 0,
+  motion: 0
+};
+var light = {
+  colors: [...DEFAULT_PANE_COLORS],
+  speed: 0.25,
+  scale: 1.6,
+  bright: 1,
+  colorSpread: 2,
+  colorSkew: 0,
+  colorDrift: 0,
+  velocity: 1,
+  // Ease out
+  rampIn: 0.25,
+  rampOut: 0.5,
+  interval: 0.4,
+  angle: 0,
+  motion: 0
+};
+var panes = {
+  id: "panes",
+  label: "Panes",
+  frag: FRAG,
+  uniforms: [
+    ...COMMON_UNIFORMS,
+    "u_angle",
+    "u_warp[0]",
+    "u_color",
+    "u_rampIn",
+    "u_rampOut",
+    "u_interval",
+    "u_motion"
+  ],
+  defaults: { dark, light },
+  upload(gl, U, p) {
+    uploadCommon(gl, U, p);
+    gl.uniform1f(U.u_angle, p.angle * Math.PI / 180);
+    gl.uniform1fv(U["u_warp[0]"], warpLUT(p));
+    const motion = Math.round(p.motion);
+    const spread = motion === 3 ? Math.round(p.colorSpread) : p.colorSpread;
+    const skew = motion === 2 ? Math.round(p.colorSkew) : p.colorSkew;
+    gl.uniform3f(U.u_color, spread, skew, p.colorDrift);
+    gl.uniform1f(U.u_rampIn, p.rampIn);
+    gl.uniform1f(U.u_rampOut, p.rampOut);
+    gl.uniform1f(U.u_interval, p.interval);
+    gl.uniform1f(U.u_motion, p.motion);
+  },
+  // radial/orbit draw circles and angles — crop aspect-true so they render screen-true
+  sampling(p) {
+    return Math.round(p.motion) >= 2 ? "isotropic" : "banded";
+  },
+  controls: [
+    { kind: "colors", label: "Palette" },
+    { kind: "slider", key: "colorSpread", label: "Color spread", min: 0, max: 6, step: 0.1 },
+    { kind: "slider", key: "colorSkew", label: "Color skew", min: 0, max: 6, step: 0.1 },
+    { kind: "slider", key: "colorDrift", label: "Color drift", min: -1, max: 1, step: 0.01 },
+    {
+      kind: "select",
+      key: "motion",
+      label: "Motion",
+      options: [
+        { label: "Linear", value: 0 },
+        { label: "Center", value: 1 },
+        { label: "Radial", value: 2 },
+        { label: "Orbit", value: 3 }
+      ]
+    },
+    { kind: "slider", key: "speed", label: "Speed", min: -2, max: 2, step: 0.01 },
+    {
+      kind: "select",
+      key: "velocity",
+      label: "Velocity",
+      options: VELOCITY_PRESETS.map((v, i) => ({ label: v.label, value: i }))
+    },
+    { kind: "slider", key: "scale", label: "Band density", min: 0.1, max: 4, step: 0.05 },
+    { kind: "slider", key: "interval", label: "Interval", min: 0, max: 0.9, step: 0.02 },
+    { kind: "slider", key: "rampIn", label: "Ramp out", min: 0.01, max: 1, step: 0.02 },
+    { kind: "slider", key: "rampOut", label: "Ramp in", min: 0.01, max: 1, step: 0.02 },
+    { kind: "slider", key: "angle", label: "Angle", min: 0, max: 360, step: 1, unit: "\xB0" },
+    { kind: "slider", key: "bright", label: "Brightness", min: 0, max: 2, step: 0.05 }
+  ]
+};
+
+// src/engine/effects/index.ts
+var EFFECTS = { panes };
+var EFFECT_IDS = Object.keys(EFFECTS);
+function mergeEffectParams(base, patch) {
+  if (!patch) return { ...base, colors: [...base.colors] };
+  return {
+    ...base,
+    ...patch,
+    colors: patch.colors ? [...patch.colors] : [...base.colors]
+  };
+}
+
+// src/engine/renderer/context.ts
+var shared = null;
+var refs = 0;
+function acquireRenderer() {
+  refs++;
+  if (!shared) shared = createSharedRenderer();
+  return shared;
+}
+function releaseRenderer() {
+  refs = Math.max(0, refs - 1);
+  if (refs === 0 && shared) {
+    shared.destroy();
+    shared = null;
+  }
+}
+function compile(gl, type, src) {
+  const s = gl.createShader(type);
+  gl.shaderSource(s, src);
+  gl.compileShader(s);
+  if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) {
+    const log = gl.getShaderInfoLog(s);
+    gl.deleteShader(s);
+    throw new Error("glass-pulse-fx: shader compile failed: " + log);
+  }
+  return s;
+}
+function createSharedRenderer() {
+  const glCanvas = document.createElement("canvas");
+  glCanvas.width = Math.round(GL_SIZE * DPR);
+  glCanvas.height = Math.round(GL_SIZE * DPR);
+  const gl = glCanvas.getContext("webgl", {
+    alpha: true,
+    premultipliedAlpha: false,
+    antialias: false,
+    preserveDrawingBuffer: true
+  });
+  if (!gl) throw new Error("glass-pulse-fx: WebGL not available");
+  let compiled = {};
+  let vbuf = null;
+  let lost = false;
+  function build() {
+    gl.disable(gl.BLEND);
+    vbuf = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, vbuf);
+    gl.bufferData(
+      gl.ARRAY_BUFFER,
+      new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),
+      gl.STATIC_DRAW
+    );
+    compiled = {};
+    const vert = compile(gl, gl.VERTEX_SHADER, VERT);
+    for (const id of EFFECT_IDS) {
+      const def = EFFECTS[id];
+      const program = gl.createProgram();
+      gl.attachShader(program, vert);
+      gl.attachShader(program, compile(gl, gl.FRAGMENT_SHADER, def.frag));
+      gl.linkProgram(program);
+      if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+        throw new Error(`glass-pulse-fx: link failed (${id}): ` + gl.getProgramInfoLog(program));
+      }
+      const U = {};
+      for (const n of def.uniforms) U[n] = gl.getUniformLocation(program, n);
+      compiled[id] = { program, U, posLoc: gl.getAttribLocation(program, "a_position"), def };
+    }
+  }
+  build();
+  const onLost = (e) => {
+    e.preventDefault();
+    lost = true;
+  };
+  const onRestored = () => {
+    lost = false;
+    build();
+  };
+  glCanvas.addEventListener("webglcontextlost", onLost);
+  glCanvas.addEventListener("webglcontextrestored", onRestored);
+  return {
+    glCanvas,
+    get available() {
+      return !lost;
+    },
+    renderEffect(effectId, params, timeSec) {
+      if (lost) return;
+      const ce = compiled[effectId];
+      if (!ce) return;
+      gl.useProgram(ce.program);
+      gl.bindBuffer(gl.ARRAY_BUFFER, vbuf);
+      gl.enableVertexAttribArray(ce.posLoc);
+      gl.vertexAttribPointer(ce.posLoc, 2, gl.FLOAT, false, 0, 0);
+      gl.uniform2f(ce.U.u_resolution, glCanvas.width, glCanvas.height);
+      gl.uniform1f(ce.U.u_time, timeSec);
+      ce.def.upload(gl, ce.U, params);
+      gl.viewport(0, 0, glCanvas.width, glCanvas.height);
+      gl.clearColor(0, 0, 0, 0);
+      gl.clear(gl.COLOR_BUFFER_BIT);
+      gl.drawArrays(gl.TRIANGLES, 0, 6);
+    },
+    destroy() {
+      glCanvas.removeEventListener("webglcontextlost", onLost);
+      glCanvas.removeEventListener("webglcontextrestored", onRestored);
+      gl.getExtension("WEBGL_lose_context")?.loseContext();
+    }
+  };
+}
+
+// src/engine/renderer/loop.ts
+var registry = /* @__PURE__ */ new Set();
+var renderer = null;
+var rafId = 0;
+var dirty = false;
+var clockSec = 0;
+var lastClockMs = 0;
+var motionAllowed = true;
+var hidden = false;
+var gatesBound = false;
+var motionMql = null;
+function advanceClock(now, animate) {
+  if (animate) {
+    if (lastClockMs) clockSec += (now - lastClockMs) / 1e3;
+    lastClockMs = now;
+  } else {
+    lastClockMs = 0;
+  }
+  return clockSec;
+}
+function markDirty() {
+  dirty = true;
+}
+function addRuntime(rt, r) {
+  renderer = r;
+  registry.add(rt);
+  rt.needsPaint = true;
+  dirty = true;
+  ensureLoop();
+}
+function removeRuntime(rt) {
+  registry.delete(rt);
+  if (registry.size === 0) stopLoop();
+}
+function shouldAnimate() {
+  if (!motionAllowed || hidden) return false;
+  for (const rt of registry) if (rt.visible && !rt.paused) return true;
+  return false;
+}
+function ensureLoop() {
+  if (rafId) return;
+  bindGates();
+  rafId = requestAnimationFrame(tick);
+}
+function stopLoop() {
+  if (rafId) cancelAnimationFrame(rafId);
+  rafId = 0;
+  lastClockMs = 0;
+  unbindGates();
+}
+function tick(now) {
+  rafId = requestAnimationFrame(tick);
+  const animate = shouldAnimate();
+  const t = advanceClock(now, animate);
+  let anyNeedsPaint = false;
+  let anyDue = false;
+  for (const rt of registry) {
+    if (rt.needsPaint) anyNeedsPaint = true;
+    if (animate && rt.visible && !rt.paused && (rt.lastPaintMs === 0 || now - rt.lastPaintMs >= rt.frameMs)) {
+      anyDue = true;
+    }
+    if (anyNeedsPaint && anyDue) {
+      break;
+    }
+  }
+  if (!anyDue && !dirty && !anyNeedsPaint) return;
+  const groups = /* @__PURE__ */ new Map();
+  for (const rt of registry) {
+    if (!rt.visible) continue;
+    const due = rt.needsPaint || animate && !rt.paused && (rt.lastPaintMs === 0 || now - rt.lastPaintMs >= rt.frameMs);
+    if (!due) continue;
+    let g = groups.get(rt.key);
+    if (!g) groups.set(rt.key, g = []);
+    g.push(rt);
+  }
+  if (!groups.size) {
+    dirty = false;
+    return;
+  }
+  for (const group of groups.values()) {
+    if (renderer) {
+      renderer.renderEffect(group[0].effectId, group[0].params, t);
+    }
+    for (const rt of group) {
+      rt.paint();
+      rt.needsPaint = false;
+      if (animate && !rt.paused) rt.lastPaintMs = now;
+    }
+  }
+  dirty = false;
+}
+function onMotion() {
+  motionAllowed = !(motionMql && motionMql.matches);
+  dirty = true;
+}
+function onVisibility() {
+  hidden = document.hidden;
+  if (hidden) {
+    lastClockMs = 0;
+  } else {
+    for (const rt of registry) rt.lastPaintMs = 0;
+  }
+  dirty = true;
+}
+function bindGates() {
+  if (gatesBound || typeof window === "undefined") return;
+  gatesBound = true;
+  motionMql = window.matchMedia("(prefers-reduced-motion: reduce)");
+  motionAllowed = !motionMql.matches;
+  motionMql.addEventListener("change", onMotion);
+  hidden = document.hidden;
+  document.addEventListener("visibilitychange", onVisibility);
+}
+function unbindGates() {
+  if (!gatesBound) return;
+  gatesBound = false;
+  motionMql?.removeEventListener("change", onMotion);
+  document.removeEventListener("visibilitychange", onVisibility);
+  motionMql = null;
+}
+
+// src/styles.ts
+var PREFIX = "gpfx";
+var CLASS = {
+  bloomOut: `${PREFIX}-bloom-out`,
+  bloomIn: `${PREFIX}-bloom-in`,
+  surfaceClip: `${PREFIX}-surface-clip`,
+  base: `${PREFIX}-base`,
+  shader: `${PREFIX}-shader`,
+  frost: `${PREFIX}-frost`,
+  rim: `${PREFIX}-rim`,
+  coreClip: `${PREFIX}-core-clip`,
+  core: `${PREFIX}-core`,
+  border: `${PREFIX}-border`
+};
+var STRUCT = {
+  bloomOut: { position: "absolute", pointerEvents: "none", zIndex: "0" },
+  bloomIn: { position: "absolute", pointerEvents: "none", zIndex: "1" },
+  surfaceClip: {
+    position: "absolute",
+    inset: "0",
+    pointerEvents: "none",
+    zIndex: "2",
+    overflow: "hidden"
+  },
+  base: { position: "absolute", inset: "0", pointerEvents: "none", zIndex: "0" },
+  shader: {
+    position: "absolute",
+    inset: "0",
+    width: "100%",
+    height: "100%",
+    pointerEvents: "none",
+    zIndex: "1"
+  },
+  frost: { position: "absolute", inset: "0", pointerEvents: "none", zIndex: "2" },
+  rim: {
+    position: "absolute",
+    inset: "0",
+    width: "100%",
+    height: "100%",
+    pointerEvents: "none",
+    zIndex: "3"
+  },
+  coreClip: {
+    position: "absolute",
+    inset: "0",
+    pointerEvents: "none",
+    zIndex: "3",
+    overflow: "hidden"
+  },
+  core: { position: "absolute" },
+  border: { position: "absolute", inset: "0", pointerEvents: "none", zIndex: "5" }
+};
+function assign(el, s) {
+  Object.assign(el.style, s);
+}
+
+// src/engine/renderer/compositor.ts
+var supportsBackdrop = typeof CSS !== "undefined" && typeof CSS.supports === "function" && (CSS.supports("backdrop-filter", "blur(1px)") || CSS.supports("-webkit-backdrop-filter", "blur(1px)"));
+var supportsMask = typeof CSS !== "undefined" && typeof CSS.supports === "function" && (CSS.supports("mask-image", "linear-gradient(#000, #000)") || CSS.supports("-webkit-mask-image", "linear-gradient(#000, #000)"));
+var MASK_AA_SCALE = 2;
+var RIM_AA_SCALE = 2;
+function mk(tag, key) {
+  const e = document.createElement(tag);
+  e.className = CLASS[key];
+  assign(e, STRUCT[key]);
+  return e;
+}
+function svgMaskUrl(width, height, body) {
+  const rasterW = Math.max(1, Math.ceil(width * DPR * MASK_AA_SCALE));
+  const rasterH = Math.max(1, Math.ceil(height * DPR * MASK_AA_SCALE));
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${rasterW}" height="${rasterH}" viewBox="0 0 ${width} ${height}" preserveAspectRatio="none" shape-rendering="geometricPrecision">${body}</svg>`;
+  return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
+}
+function roundedRectMaskUrl(width, height, radius, inset = 0) {
+  const x = Math.max(0, inset);
+  const y = Math.max(0, inset);
+  const w = Math.max(1, width - x * 2);
+  const h = Math.max(1, height - y * 2);
+  const r = Math.max(0, radius - inset);
+  return svgMaskUrl(width, height, `<rect x="${x}" y="${y}" width="${w}" height="${h}" rx="${r}" ry="${r}" fill="white"/>`);
+}
+function applyMask(el, mask) {
+  const webkitStyle = el.style;
+  el.style.maskImage = mask;
+  el.style.maskSize = "100% 100%";
+  el.style.maskRepeat = "no-repeat";
+  webkitStyle.webkitMaskImage = mask;
+  webkitStyle.webkitMaskSize = "100% 100%";
+  webkitStyle.webkitMaskRepeat = "no-repeat";
+}
+function clearMask(el) {
+  const webkitStyle = el.style;
+  el.style.maskImage = "";
+  el.style.maskSize = "";
+  el.style.maskRepeat = "";
+  webkitStyle.webkitMaskImage = "";
+  webkitStyle.webkitMaskSize = "";
+  webkitStyle.webkitMaskRepeat = "";
+}
+function bloomEnabled(size, level) {
+  return size > 0 && level > 0;
+}
+function createCompositor(el, kind, opts = {}) {
+  const degraded = !!opts.degraded;
+  let bloomClip = !!opts.bloomClip;
+  const shaderScale = SHADER_SCALE[kind];
+  const cs = getComputedStyle(el);
+  if (cs.position === "static") el.style.position = "relative";
+  el.style.isolation = "isolate";
+  const surfaceClip = mk("div", "surfaceClip");
+  const base = mk("div", "base");
+  const frost = mk("div", "frost");
+  const coreClip = mk("div", "coreClip");
+  const core = mk("div", "core");
+  coreClip.appendChild(core);
+  const border = mk("div", "border");
+  let plasma = null;
+  let pctx = null;
+  let rim = null;
+  let rctx = null;
+  let bIn = null;
+  let bOut = null;
+  const nodes = [];
+  surfaceClip.appendChild(base);
+  if (!degraded) {
+    const bloomOut = mk("canvas", "bloomOut");
+    const bloomIn = mk("canvas", "bloomIn");
+    plasma = mk("canvas", "shader");
+    rim = mk("canvas", "rim");
+    pctx = plasma.getContext("2d");
+    rctx = rim.getContext("2d");
+    bOut = { el: bloomOut, ctx: bloomOut.getContext("2d"), spread: 0, scale: 1, blur: 0, enabled: false };
+    bIn = { el: bloomIn, ctx: bloomIn.getContext("2d"), spread: 0, scale: 1, blur: 0, enabled: false };
+    surfaceClip.appendChild(plasma);
+    nodes.push(bloomOut, bloomIn);
+  }
+  surfaceClip.append(frost, coreClip);
+  nodes.push(surfaceClip);
+  if (rim) nodes.push(rim);
+  nodes.push(border);
+  const first = el.firstChild;
+  for (const n of nodes) el.insertBefore(n, first);
+  let cssW = 1;
+  let cssH = 1;
+  let exactW = 1;
+  let exactH = 1;
+  let layerX = 0;
+  let layerY = 0;
+  let cornerRadius = 0;
+  let settings = null;
+  let fill = "#000000";
+  let borderCfg = null;
+  let isotropic = false;
+  function clampRadius(value) {
+    const min = Math.min(cssW, cssH);
+    return Math.max(0, Math.min(value, min / 2));
+  }
+  function radiusFromCssToken(token, percentBasis) {
+    const value = parseFloat(token);
+    if (Number.isNaN(value)) return null;
+    return token.trim().endsWith("%") ? percentBasis * value / 100 : value;
+  }
+  function radiusFromCssValue(value) {
+    const trimmed = value.trim();
+    if (!trimmed || trimmed === "0px") return 0;
+    const [horizontalPart, verticalPart = horizontalPart] = trimmed.split("/").map((part) => part.trim());
+    const horizontal = horizontalPart.split(/\s+/)[0];
+    const vertical = verticalPart.split(/\s+/)[0];
+    const rx = radiusFromCssToken(horizontal, cssW);
+    const ry = radiusFromCssToken(vertical, cssH);
+    if (rx == null && ry == null) return null;
+    if (rx == null) return ry;
+    if (ry == null) return rx;
+    return Math.min(rx, ry);
+  }
+  function resolveRadius() {
+    const min = Math.min(cssW, cssH);
+    const r = opts.radius;
+    if (r != null) {
+      if (typeof r === "number") return clampRadius(r);
+      const s = r.trim();
+      if (s === "50%") return min / 2;
+      if (s.endsWith("%")) {
+        const pct = parseFloat(s);
+        return Number.isNaN(pct) ? 0 : clampRadius(min * pct / 100);
+      }
+      const px = parseFloat(s);
+      if (!Number.isNaN(px)) return clampRadius(px);
+    }
+    if (kind === "circle") return min / 2;
+    return clampRadius(radiusFromCssValue(getComputedStyle(el).borderRadius) ?? 0);
+  }
+  function maxLayerInset() {
+    return Math.max(0, Math.min(cssW, cssH) / 2 - 0.5);
+  }
+  function clampLayerInset(value) {
+    return Math.min(Math.max(0, value), maxLayerInset());
+  }
+  function frostInset() {
+    return settings ? clampLayerInset(settings.frostInset ?? 0) : 0;
+  }
+  function shaderInset() {
+    return settings ? clampLayerInset(settings.shaderInset ?? 0) : 0;
+  }
+  function rimVisible() {
+    return !!rim && supportsMask && frostInset() > shaderInset();
+  }
+  function mainShaderInset() {
+    return rimVisible() ? frostInset() : shaderInset();
+  }
+  function layerRect(inset, scaleX, scaleY, ox = 0, oy = 0) {
+    const i = clampLayerInset(inset);
+    return {
+      x: ox + i * scaleX,
+      y: oy + i * scaleY,
+      width: Math.max(1, (cssW - i * 2) * scaleX),
+      height: Math.max(1, (cssH - i * 2) * scaleY),
+      radius: Math.max(0, cornerRadius - i) * Math.min(scaleX, scaleY)
+    };
+  }
+  function addRoundedRect(ctx, rect) {
+    ctx.roundRect(rect.x, rect.y, rect.width, rect.height, rect.radius);
+  }
+  function bloomClipPath(sp) {
+    return bloomClip ? `inset(${sp - layerY}px ${sp + layerX}px ${sp + layerY}px ${sp - layerX}px round ${cornerRadius}px)` : "none";
+  }
+  function layoutBloom(b, cfg) {
+    const { size, level } = cfg;
+    b.enabled = bloomEnabled(size, level);
+    if (!b.enabled) {
+      assign(b.el, {
+        display: "none",
+        filter: "none",
+        opacity: "0"
+      });
+      b.el.width = 1;
+      b.el.height = 1;
+      b.spread = 0;
+      b.scale = 1;
+      b.blur = 0;
+      return;
+    }
+    const spread = Math.ceil(size * 2.2) + 5;
+    const cw = cssW + spread * 2;
+    const ch = cssH + spread * 2;
+    assign(b.el, {
+      display: "block",
+      left: layerX - spread + "px",
+      top: layerY - spread + "px",
+      width: cw + "px",
+      height: ch + "px",
+      filter: `blur(${size}px)`,
+      opacity: String(level)
+    });
+    const scale = Math.min(DPR, BLOOM_MAX / Math.max(cw, ch));
+    b.el.width = Math.max(1, Math.round(cw * scale));
+    b.el.height = Math.max(1, Math.round(ch * scale));
+    b.spread = spread;
+    b.scale = scale;
+    b.blur = size;
+    b.el.style.clipPath = bloomClipPath(spread);
+  }
+  function applyGlassStyle() {
+    if (!settings) return;
+    frost.style.background = withAlpha(fill, settings.frost);
+    const fi = frostInset();
+    if (plasma) {
+      plasma.style.inset = "0";
+      plasma.style.borderRadius = "0";
+      clearMask(plasma);
+    }
+    if (fi <= 0) {
+      frost.style.inset = "0";
+      frost.style.borderRadius = "0";
+      clearMask(frost);
+      if (rim) {
+        rim.style.display = "none";
+        clearMask(rim);
+      }
+    } else if (supportsMask) {
+      frost.style.inset = "0";
+      frost.style.borderRadius = "0";
+      const innerMask = roundedRectMaskUrl(exactW, exactH, cornerRadius, fi);
+      applyMask(frost, innerMask);
+      if (rim) {
+        rim.style.display = rimVisible() ? "block" : "none";
+        clearMask(rim);
+      }
+    } else {
+      frost.style.inset = fi + "px";
+      clearMask(frost);
+      if (rim) {
+        rim.style.display = "none";
+        clearMask(rim);
+      }
+      frost.style.borderRadius = Math.max(0, cornerRadius - fi) + "px";
+    }
+    if (supportsBackdrop && !degraded) {
+      const shouldFilter = settings.bgBlur > 0 || Math.abs(settings.saturate - 1) > 1e-3;
+      const bf = shouldFilter ? `saturate(${settings.saturate}) blur(${settings.bgBlur}px)` : "none";
+      frost.style.backdropFilter = bf;
+      frost.style.webkitBackdropFilter = bf;
+    }
+    const k = settings.coreProportional ? Math.min(cssW, cssH) / 52 : 1;
+    const inset = settings.coreInset * k;
+    core.style.inset = inset + "px";
+    core.style.borderRadius = Math.max(0, cornerRadius - inset) + "px";
+    core.style.background = fill;
+    core.style.filter = `blur(${settings.coreBlur * k}px)`;
+    core.style.opacity = String(settings.coreOpacity);
+  }
+  function applyBorder() {
+    if (!borderCfg) return;
+    border.style.borderRadius = cornerRadius + "px";
+    border.style.boxSizing = "border-box";
+    border.style.border = `${borderCfg.width}px solid ${withAlpha(
+      borderCfg.color,
+      borderCfg.opacity
+    )}`;
+  }
+  function applySurfaceClip() {
+    if (!supportsMask) {
+      surfaceClip.style.overflow = "hidden";
+      surfaceClip.style.borderRadius = cornerRadius + "px";
+      return;
+    }
+    const mask = roundedRectMaskUrl(exactW, exactH, cornerRadius);
+    const webkitStyle = surfaceClip.style;
+    surfaceClip.style.overflow = "visible";
+    surfaceClip.style.borderRadius = "0";
+    surfaceClip.style.maskImage = mask;
+    surfaceClip.style.maskSize = "100% 100%";
+    surfaceClip.style.maskRepeat = "no-repeat";
+    webkitStyle.webkitMaskImage = mask;
+    webkitStyle.webkitMaskSize = "100% 100%";
+    webkitStyle.webkitMaskRepeat = "no-repeat";
+  }
+  function measure() {
+    const r = el.getBoundingClientRect();
+    const mcs = getComputedStyle(el);
+    const borderL = parseFloat(mcs.borderLeftWidth) || 0;
+    const borderT = parseFloat(mcs.borderTopWidth) || 0;
+    const snappedLeft = Math.round(r.left * DPR) / DPR;
+    const snappedTop = Math.round(r.top * DPR) / DPR;
+    const snappedRight = Math.round(r.right * DPR) / DPR;
+    const snappedBottom = Math.round(r.bottom * DPR) / DPR;
+    layerX = snappedLeft - r.left - borderL;
+    layerY = snappedTop - r.top - borderT;
+    exactW = Math.max(1, snappedRight - snappedLeft);
+    exactH = Math.max(1, snappedBottom - snappedTop);
+    cssW = exactW;
+    cssH = exactH;
+    cornerRadius = resolveRadius();
+    if (opts.radius != null) el.style.borderRadius = cornerRadius + "px";
+    assign(surfaceClip, {
+      inset: "auto",
+      left: layerX + "px",
+      top: layerY + "px",
+      width: exactW + "px",
+      height: exactH + "px"
+    });
+    assign(border, {
+      inset: "auto",
+      left: layerX + "px",
+      top: layerY + "px",
+      width: exactW + "px",
+      height: exactH + "px"
+    });
+    if (rim) {
+      assign(rim, {
+        inset: "auto",
+        left: layerX + "px",
+        top: layerY + "px",
+        width: exactW + "px",
+        height: exactH + "px"
+      });
+    }
+    if (plasma) {
+      plasma.width = Math.round(exactW * DPR);
+      plasma.height = Math.round(exactH * DPR);
+    }
+    if (rim) {
+      rim.width = Math.round(exactW * DPR * RIM_AA_SCALE);
+      rim.height = Math.round(exactH * DPR * RIM_AA_SCALE);
+    }
+    applySurfaceClip();
+    if (!settings) return;
+    if (bOut) layoutBloom(bOut, settings.outerBloom);
+    if (bIn) layoutBloom(bIn, settings.innerBloom);
+    applyGlassStyle();
+    applyBorder();
+  }
+  function cropForSize(glCanvas, targetW, targetH) {
+    const cw = glCanvas.width;
+    const ch = glCanvas.height;
+    const safeW = Math.max(1, targetW);
+    const safeH = Math.max(1, targetH);
+    if (isotropic) {
+      let srcW2 = cw;
+      let srcH2 = cw * safeH / safeW;
+      if (srcH2 > ch) {
+        srcW2 = ch * safeW / safeH;
+        srcH2 = ch;
+      }
+      return { sx: (cw - srcW2) / 2, sy: (ch - srcH2) / 2, srcW: srcW2, srcH: srcH2 };
+    }
+    const sampleW = Math.max(safeW, CROP_W * shaderScale * MIN_SAMPLE_SPAN);
+    const sampleH = Math.max(safeH, CROP_H * shaderScale * MIN_SAMPLE_SPAN);
+    let srcW = sampleW * cw / CROP_W / shaderScale;
+    let srcH = sampleH * ch / CROP_H / shaderScale;
+    if (srcW > cw) srcW = cw;
+    if (srcH > ch) srcH = ch;
+    return { sx: Math.max(0, (cw - srcW) / 2), sy: Math.max(0, (ch - srcH) / 2), srcW, srcH };
+  }
+  function bloomSourceInset(b) {
+    if (!settings) return 0;
+    if (b.blur <= 0) return 0;
+    const rim2 = settings.coreInset + Math.max(settings.coreBlur, b.blur) * 0.5;
+    const sourceInset = Math.max(2, b.blur, rim2);
+    const source = layerRect(shaderInset(), 1, 1);
+    const maxInset = Math.max(0, Math.min(source.width, source.height) / 2 - 0.5);
+    return Math.min(sourceInset, maxInset);
+  }
+  function attenuateBloomCorners(ctx, b, x, y, w, h, radius) {
+    const min = Math.min(w, h);
+    if (b.blur <= 0) return;
+    if (radius <= 0 || radius >= min / 2 - 0.5) return;
+    const zone = Math.min(min / 2, radius + b.blur * b.scale * 1.25);
+    const amount = Math.min(0.55, 0.14 + b.blur / 45);
+    ctx.globalCompositeOperation = "destination-out";
+    for (const [cx, cy] of [[x, y], [x + w, y], [x, y + h], [x + w, y + h]]) {
+      const g = ctx.createRadialGradient(cx, cy, 0, cx, cy, zone);
+      g.addColorStop(0, `rgba(0, 0, 0, ${amount})`);
+      g.addColorStop(1, "rgba(0, 0, 0, 0)");
+      ctx.fillStyle = g;
+      ctx.fillRect(cx - zone, cy - zone, zone * 2, zone * 2);
+    }
+  }
+  function drawShaderField(ctx, crop, glCanvas, rect) {
+    ctx.drawImage(glCanvas, crop.sx, crop.sy, crop.srcW, crop.srcH, rect.x, rect.y, rect.width, rect.height);
+  }
+  function paintBloom(b, crop, glCanvas) {
+    if (!b.enabled) return;
+    const ctx = b.ctx;
+    const s = b.scale;
+    const sp = b.spread;
+    ctx.clearRect(0, 0, b.el.width, b.el.height);
+    const sourceInset = bloomSourceInset(b);
+    if (sourceInset <= 0) return;
+    const outer = layerRect(shaderInset(), s, s, sp * s, sp * s);
+    ctx.save();
+    ctx.beginPath();
+    addRoundedRect(ctx, outer);
+    ctx.clip();
+    drawShaderField(ctx, crop, glCanvas, outer);
+    const inset = sourceInset * s;
+    const inner = {
+      x: outer.x + inset,
+      y: outer.y + inset,
+      width: outer.width - inset * 2,
+      height: outer.height - inset * 2,
+      radius: Math.max(0, outer.radius - inset)
+    };
+    if (inner.width > 0 && inner.height > 0) {
+      ctx.globalCompositeOperation = "destination-out";
+      ctx.beginPath();
+      addRoundedRect(ctx, inner);
+      ctx.fill();
+    }
+    attenuateBloomCorners(ctx, b, outer.x, outer.y, outer.width, outer.height, outer.radius);
+    ctx.restore();
+  }
+  function paintMainShader(crop, glCanvas) {
+    if (!plasma || !pctx) return;
+    const dw = plasma.width;
+    const dh = plasma.height;
+    if (dw < 1 || dh < 1) return;
+    const sx = dw / exactW;
+    const sy = dh / exactH;
+    const source = layerRect(shaderInset(), sx, sy);
+    const visible = layerRect(mainShaderInset(), sx, sy);
+    pctx.clearRect(0, 0, dw, dh);
+    pctx.save();
+    pctx.beginPath();
+    addRoundedRect(pctx, visible);
+    pctx.clip();
+    drawShaderField(pctx, crop, glCanvas, source);
+    pctx.restore();
+  }
+  function paintRim(crop, glCanvas) {
+    if (!rim || !rctx || !settings) return;
+    const dw = rim.width;
+    const dh = rim.height;
+    if (dw < 1 || dh < 1) return;
+    rctx.clearRect(0, 0, dw, dh);
+    if (rim.style.display === "none" || !rimVisible()) return;
+    const sx = dw / exactW;
+    const sy = dh / exactH;
+    const outer = layerRect(shaderInset(), sx, sy);
+    const inner = layerRect(frostInset(), sx, sy);
+    rctx.save();
+    rctx.imageSmoothingEnabled = true;
+    rctx.imageSmoothingQuality = "high";
+    rctx.beginPath();
+    addRoundedRect(rctx, outer);
+    addRoundedRect(rctx, inner);
+    rctx.clip("evenodd");
+    drawShaderField(rctx, crop, glCanvas, outer);
+    rctx.restore();
+  }
+  function paint(glCanvas) {
+    if (!plasma || !pctx) return;
+    const source = layerRect(shaderInset(), 1, 1);
+    const crop = cropForSize(glCanvas, source.width, source.height);
+    if (bOut?.enabled) paintBloom(bOut, crop, glCanvas);
+    if (bIn?.enabled) paintBloom(bIn, crop, glCanvas);
+    paintMainShader(crop, glCanvas);
+    paintRim(crop, glCanvas);
+  }
+  return {
+    measure,
+    applyStyle(s, f, b) {
+      settings = s;
+      fill = f;
+      borderCfg = b;
+      measure();
+    },
+    setSampling(v) {
+      isotropic = v;
+    },
+    setBloomClip(v) {
+      bloomClip = v;
+      if (bOut?.enabled) bOut.el.style.clipPath = bloomClipPath(bOut.spread);
+      if (bIn?.enabled) bIn.el.style.clipPath = bloomClipPath(bIn.spread);
+    },
+    paint,
+    destroy() {
+      for (const n of nodes) n.remove();
+    }
+  };
+}
+
+// src/engine/settings.ts
+var DEFAULT_SETTINGS = {
+  dark: {
+    bgBlur: 6,
+    frost: 0.66,
+    frostInset: 0,
+    shaderInset: 0,
+    coreInset: 8,
+    coreBlur: 8,
+    coreOpacity: 1,
+    coreProportional: false,
+    saturate: 1.3,
+    innerBloom: { size: 2, level: 1 },
+    outerBloom: { size: 16, level: 0.45 }
+  },
+  light: {
+    bgBlur: 6,
+    frost: 0.42,
+    frostInset: 0,
+    shaderInset: 0,
+    coreInset: 8,
+    coreBlur: 8,
+    coreOpacity: 1,
+    coreProportional: false,
+    saturate: 1.55,
+    innerBloom: { size: 2, level: 1 },
+    outerBloom: { size: 18, level: 0.5 }
+  }
+};
+var DEFAULT_BORDER = {
+  dark: { width: 1, opacity: 0.3, color: "#808080" },
+  // hsl(0 0% 50%)
+  light: { width: 1, opacity: 0.3, color: "#6A6A72" }
+};
+function mergeBorder(base, patch) {
+  return patch ? { ...base, ...patch } : { ...base };
+}
+var DEFAULT_FILL = {
+  dark: "#0D0D12",
+  light: "#EEF0F3"
+};
+function mergeSettings(base, patch) {
+  if (!patch) {
+    return {
+      ...base,
+      innerBloom: { ...base.innerBloom },
+      outerBloom: { ...base.outerBloom }
+    };
+  }
+  return {
+    ...base,
+    ...patch,
+    innerBloom: { ...base.innerBloom, ...patch.innerBloom },
+    outerBloom: { ...base.outerBloom, ...patch.outerBloom }
+  };
+}
+
+// src/core.ts
+var keyFor = (id, params) => id + ":" + JSON.stringify(params);
+function inferKind(el, radius) {
+  if (radius === "50%") return "circle";
+  const br = getComputedStyle(el).borderRadius;
+  if (br && br.includes("%") && parseFloat(br) >= 50) return "circle";
+  return "rect";
+}
+function backdropOf(el) {
+  const layers = [];
+  for (let n = el.parentElement; n; n = n.parentElement) {
+    const c = parseColor(getComputedStyle(n).backgroundColor);
+    if (c.a > 0) layers.push(c);
+    if (c.a >= 1) break;
+  }
+  let out = layers.length && layers[layers.length - 1].a >= 1 ? layers.pop() : { r: 0, g: 0, b: 0, a: 1 };
+  for (let i = layers.length - 1; i >= 0; i--) out = compositeOver(layers[i], out);
+  return out;
+}
+function readHostFill(el) {
+  const own = parseColor(getComputedStyle(el).backgroundColor);
+  if (own.a <= 0) return null;
+  if (own.a >= 1) return rgbToHex(own);
+  return rgbToHex(compositeOver(own, backdropOf(el)));
+}
+function combinePatches(a, b) {
+  if (!a || !b) return a ?? b;
+  const out = { ...a, ...b };
+  if (a.innerBloom && b.innerBloom) out.innerBloom = { ...a.innerBloom, ...b.innerBloom };
+  if (a.outerBloom && b.outerBloom) out.outerBloom = { ...a.outerBloom, ...b.outerBloom };
+  return out;
+}
+function createGlass(target, opts = {}) {
+  const preset = opts.preset;
+  let theme = opts.theme ?? "dark";
+  let effect = opts.effect ?? preset?.effect ?? "panes";
+  let userParams = {};
+  function rememberParams(patch) {
+    if (!patch) return;
+    userParams = { ...userParams, ...patch };
+    if (patch.colors) userParams.colors = [...patch.colors];
+  }
+  rememberParams(preset?.effectParams);
+  rememberParams(opts.effectParams);
+  let params = mergeEffectParams(EFFECTS[effect].defaults[theme], userParams);
+  const fillPinned = opts.fill != null;
+  let fill = opts.fill ?? readHostFill(target) ?? DEFAULT_FILL[theme];
+  const basePatch = combinePatches(preset?.settings, opts.settings);
+  let settings = mergeSettings(DEFAULT_SETTINGS[theme], basePatch);
+  const noRim = { width: 0, opacity: 0, color: "transparent" };
+  let borderPatch = { ...opts.border };
+  let border = opts.border ? mergeBorder(DEFAULT_BORDER[theme], borderPatch) : noRim;
+  const kind = opts.kind ?? inferKind(target, opts.radius);
+  let renderer2 = null;
+  let degraded = false;
+  try {
+    renderer2 = acquireRenderer();
+  } catch {
+    degraded = true;
+  }
+  const comp = createCompositor(target, kind, {
+    radius: opts.radius,
+    degraded,
+    bloomClip: opts.bloomClip
+  });
+  comp.setSampling(EFFECTS[effect].sampling?.(params) === "isotropic");
+  comp.applyStyle(settings, fill, border);
+  const rt = {
+    key: keyFor(effect, params),
+    effectId: effect,
+    params,
+    frameMs: frameMsForFps(opts.fps),
+    lastPaintMs: 0,
+    paused: opts.paused ?? false,
+    visible: true,
+    needsPaint: true,
+    paint() {
+      if (renderer2) comp.paint(renderer2.glCanvas);
+    }
+  };
+  let ro = null;
+  let io = null;
+  if (!degraded && renderer2) {
+    addRuntime(rt, renderer2);
+    let rafScheduled = false;
+    ro = new ResizeObserver(() => {
+      if (rafScheduled) return;
+      rafScheduled = true;
+      requestAnimationFrame(() => {
+        rafScheduled = false;
+        comp.measure();
+        rt.needsPaint = true;
+        markDirty();
+      });
+    });
+    ro.observe(target);
+    io = new IntersectionObserver((entries) => {
+      for (const e of entries) rt.visible = e.isIntersecting;
+      markDirty();
+    });
+    io.observe(target);
+  }
+  function restyle() {
+    comp.applyStyle(settings, fill, border);
+    rt.needsPaint = true;
+    markDirty();
+  }
+  function syncEffect() {
+    rt.effectId = effect;
+    rt.params = params;
+    rt.key = keyFor(effect, params);
+    comp.setSampling(EFFECTS[effect].sampling?.(params) === "isotropic");
+    rt.needsPaint = true;
+    markDirty();
+  }
+  function setRuntimeFps(fps) {
+    rt.frameMs = frameMsForFps(fps);
+    rt.lastPaintMs = 0;
+    rt.needsPaint = true;
+    markDirty();
+  }
+  return {
+    update(patch) {
+      settings = mergeSettings(settings, patch);
+      restyle();
+    },
+    setEffect(id) {
+      effect = id;
+      userParams = {};
+      params = mergeEffectParams(EFFECTS[id].defaults[theme]);
+      syncEffect();
+    },
+    setEffectParams(patch) {
+      rememberParams(patch);
+      params = mergeEffectParams(params, patch);
+      syncEffect();
+    },
+    setTheme(t) {
+      theme = t;
+      settings = mergeSettings(DEFAULT_SETTINGS[theme], basePatch);
+      if (!fillPinned) fill = readHostFill(target) ?? DEFAULT_FILL[theme];
+      border = opts.border ? mergeBorder(DEFAULT_BORDER[theme], borderPatch) : noRim;
+      params = mergeEffectParams(EFFECTS[effect].defaults[theme], userParams);
+      syncEffect();
+      restyle();
+    },
+    setFill(color) {
+      fill = color;
+      restyle();
+    },
+    setBorder(patch) {
+      borderPatch = { ...borderPatch, ...patch };
+      border = mergeBorder(border, patch);
+      restyle();
+    },
+    setFps(fps) {
+      setRuntimeFps(fps);
+    },
+    setBloomClip(clip) {
+      comp.setBloomClip(clip);
+    },
+    setPaused(paused) {
+      rt.paused = paused;
+      rt.needsPaint = true;
+      markDirty();
+    },
+    destroy() {
+      ro?.disconnect();
+      io?.disconnect();
+      removeRuntime(rt);
+      comp.destroy();
+      if (!degraded) releaseRenderer();
+    }
+  };
+}
+
+exports.DEFAULT_BORDER = DEFAULT_BORDER;
+exports.DEFAULT_FILL = DEFAULT_FILL;
+exports.DEFAULT_SETTINGS = DEFAULT_SETTINGS;
+exports.EFFECTS = EFFECTS;
+exports.EFFECT_IDS = EFFECT_IDS;
+exports.VELOCITY_PRESETS = VELOCITY_PRESETS;
+exports.createGlass = createGlass;
+exports.mergeBorder = mergeBorder;
+exports.mergeEffectParams = mergeEffectParams;
+exports.mergeSettings = mergeSettings;
+//# sourceMappingURL=core.cjs.map
+//# sourceMappingURL=core.cjs.map