vireglass 0.1.0

package/dist/web/index.cjs

@@ -0,0 +1,1990 @@
+'use strict';
+
+// src/geometry.ts
+var halfMinDp = (g) => Math.max(Math.min(g.width, g.height) / 2, 1);
+var MAX_STRETCH = 0.34;
+var SIZE_REF_DP = 24;
+var sizeGain = (g) => Math.min(Math.max(Math.sqrt(halfMinDp(g) / SIZE_REF_DP), 0.8), 2.4);
+var MAX_BEVEL_FRACTION = 0.65;
+var bevelFraction = (g, o) => Math.min(MAX_BEVEL_FRACTION, o.bevelDp * sizeGain(g) / halfMinDp(g));
+var bevelDp = (g, o) => Math.max(bevelFraction(g, o) * halfMinDp(g), 1);
+var thicknessDp = (g, o) => o.thicknessDp * sizeGain(g);
+var RIM_FRACTION = 0.85;
+var rimDp = (g, o) => thicknessDp(g, o) * RIM_FRACTION;
+var shadowReachDp = (g) => Math.min(Math.max(halfMinDp(g) * 0.65, 6), 36);
+function morphReachDp(g, morph) {
+  if (!morph || morph.smoothing <= 0) return 0;
+  return Math.max(
+    0,
+    Math.abs(morph.offsetX) + morph.width / 2 - g.width / 2,
+    Math.abs(morph.offsetY) + morph.height / 2 - g.height / 2
+  );
+}
+var PAD_STEP = 8;
+var quantise = (v) => Math.ceil(v / PAD_STEP) * PAD_STEP;
+function lensPadDp(g, o, morph, dragLimit = 0) {
+  const sampling = Math.max(o.blur, o.gatherRadiusDp);
+  const stretch = halfMinDp(g) * MAX_STRETCH;
+  return quantise(sampling + dragLimit + stretch + morphReachDp(g, morph) + 2);
+}
+function surfacePadDp(g, dragLimit = 0, morph) {
+  return quantise(shadowReachDp(g) * 1.2 + dragLimit + morphReachDp(g, morph) + 2);
+}
+var SHADOW_FLAT = 0.8;
+var SHADOW_BUSY_GAIN = 6;
+var SHADOW_BUSY_RISE = 1.2;
+function shadowOpacity(busy) {
+  return SHADOW_FLAT + Math.min(Math.max(busy, 0) * SHADOW_BUSY_GAIN, SHADOW_BUSY_RISE);
+}
+
+// src/sdf.ts
+var VG_SDF = `
+float vgRoundRect(float2 p, float2 halfSize, float corner) {
+  float2 q = abs(p) - halfSize + corner;
+  return min(max(q.x, q.y), 0.0) + length(max(q, float2(0.0))) - corner;
+}
+
+float vgSmin(float a, float b, float k) {
+  float h = clamp(0.5 + 0.5 * (b - a) / k, 0.0, 1.0);
+  return mix(b, a, h) - k * h * (1.0 - h);
+}
+
+// A scene is a single shape, and when k > 0 a smooth union with one or two neighbors. A third
+// shape exists to break the control into pieces (docs/reference.md \xA75): there are two bridges
+// there. It's turned off with a zero size, not its own k: the fused body shares one bridge.
+float vgScene(float2 p, float2 halfSize, float corner,
+              float2 offsetB, float2 halfB, float cornerB, float k,
+              float2 offsetC, float2 halfC, float cornerC) {
+  float a = vgRoundRect(p, halfSize, corner);
+  if (k <= 0.0) { return a; }
+  float ab = vgSmin(a, vgRoundRect(p - offsetB, halfB, cornerB), k);
+  if (halfC.x <= 0.0) { return ab; }
+  return vgSmin(ab, vgRoundRect(p - offsetC, halfC, cornerC), k);
+}
+
+// Response to a finger. It's the FIELD around the touch point that deforms, not the shape's
+// bounding box: scaling width to pull the right edge would also pull the left one \u2014 liquid
+// doesn't behave that way. Here the displacement falls off with distance from the finger, so the
+// far edge stays put.
+//
+// The order of the terms matters: drag shifts the field, press pulls it toward the finger, the
+// wave rides on top of the already-shifted field \u2014 otherwise the ripple decouples from the
+// deformation and lives a life of its own.
+float2 vgTouchWarp(float2 p, float2 touch, float2 pull, float press, float radius,
+                   float waveAmp, float wavePhase) {
+  if (radius <= 0.0) { return p; }
+  // Under the finger the whole element grows (M 3:51; HIG: interactive "expands").
+  p /= 1.0 + 0.06 * press;
+  float2 d = p - touch;
+  float r = length(d);
+
+  // The finger is a BLOB, not a point, but not a hard stamp either: a wide peak, soft edges. A
+  // flat plateau with a sharp cutoff at the edge shifts the region as a block, and a straight
+  // line under the glass breaks into a step \u2014 the deformation reads as rectangular even though
+  // the finger is round. A double smoothstep gives the same contact width without that step.
+  //
+  // The influence cuts off at the radius rather than fading into an infinite tail like a
+  // Gaussian: with a tail the deformation spreads into a "rubber mattress" bulge.
+  float k = clamp((radius - r) / radius, 0.0, 1.0);
+  float s = k * k * (3.0 - 2.0 * k);
+  float core = s * s * (3.0 - 2.0 * s);
+  // A ring around the blob: material displaced from under the finger has to end up somewhere.
+  // Without this ridge the shape just balloons, and a dense medium doesn't behave that way.
+  float rim = k * k * (1.0 - k) * 4.0;
+
+  float2 q = p - pull * (core - 0.42 * rim);
+  q -= d * (press * 0.16 * core);
+
+  // The wave has its own scale, twice the drag radius: the ripple has to reach the far edge,
+  // otherwise it reads as jitter under the finger rather than a wave across the surface. The
+  // wavelength is short: in a dense medium ripples are frequent and small, long shallow swells
+  // are water.
+  if (waveAmp > 0.0 && r > 0.0001) {
+    float span = radius * 2.0;
+    float ring = sin(r / (span * 0.17) - wavePhase * 6.2831853) * exp(-r / (span * 0.7));
+    q -= (d / r) * ring * waveAmp;
+  }
+  return q;
+}
+
+// Analytical normal of a single shape: radial on the rounded part, axis-aligned on the straight
+// segments.
+float2 vgRoundRectNormal(float2 p, float2 halfSize, float corner) {
+  float2 q = abs(p) - halfSize + corner;
+  float2 g = (q.x > 0.0 && q.y > 0.0)
+    ? normalize(max(q, float2(0.0001)))
+    : (q.x > q.y ? float2(1.0, 0.0) : float2(0.0, 1.0));
+  return g * sign(p);
+}
+
+// Normal of the union \u2014 ANALYTICAL, no more finite differences here.
+//
+// Derivation: smin has two terms, mix(b,a,h) and \u2212k\xB7h\xB7(1\u2212h). Their derivatives with respect to h
+// contain a factor of (1\u22122h) with opposite signs and cancel exactly, because h is linear in
+// (b\u2212a)/k. What's left is mix(\u2207b, \u2207a, h) \u2014 that is, the two shapes' normals, blended with the
+// same weight that blends the distances themselves.
+//
+// The previous version took four ADDITIONAL scene evaluations per pixel (each one \u2014 two shapes
+// plus smin) and was still an approximation. Here there are two shapes, exactly.
+float2 vgSceneNormal(float2 p, float2 halfSize, float corner,
+                     float2 offsetB, float2 halfB, float cornerB, float k,
+                     float2 offsetC, float2 halfC, float cornerC) {
+  float2 na = vgRoundRectNormal(p, halfSize, corner);
+  if (k <= 0.0) { return na; }
+  float2 q = p - offsetB;
+  float a = vgRoundRect(p, halfSize, corner);
+  float b = vgRoundRect(q, halfB, cornerB);
+  float h = clamp(0.5 + 0.5 * (b - a) / k, 0.0, 1.0);
+  float2 nab = normalize(mix(vgRoundRectNormal(q, halfB, cornerB), na, h) + float2(1e-5, 1e-5));
+  if (halfC.x <= 0.0) { return nab; }
+  // Same derivation as for the pair: normals blend with the same weight as the distances.
+  float2 qc = p - offsetC;
+  float ab = vgSmin(a, b, k);
+  float c = vgRoundRect(qc, halfC, cornerC);
+  float hc = clamp(0.5 + 0.5 * (c - ab) / k, 0.0, 1.0);
+  return normalize(mix(vgRoundRectNormal(qc, halfC, cornerC), nab, hc) + float2(1e-5, 1e-5));
+}
+
+// Position within the bevel: 0 is the flat middle, 1 is the very edge. This one value feeds the
+// mask, thickness, refraction, aberrations and the width of the light rim.
+float vgBevelT(float sd, float bevel) {
+  return clamp((sd + bevel) / bevel, 0.0, 1.0);
+}
+
+// Slope of the bevel profile \u2014 spherical: t / sqrt(1 - t\xB2), like a spherical cap. The previous t\xB2
+// kept the slope near zero through almost the whole bevel and then shot up right at the edge, so
+// all the optics bunched into a narrow ring and the element read as a PUCK \u2014 a flat top and a
+// wall around the rim. Here curvature is spread across the bevel, and the rim stops being a line.
+//
+// This still doesn't control the field of view: only the bevel bends, the middle stays flat,
+// otherwise the surface reads as a soap bubble.
+float vgBevelSlope(float t) {
+  return min(t * inversesqrt(max(1.0 - t * t * 0.94, 0.02)), 3.2);
+}
+
+// PROGRESS FRACTION. Progress is an active state turned into a FIELD: to the left of the boundary
+// the element is active, to the right it stays regular glass, and the boundary moves. A negative
+// value turns the field off entirely \u2014 zero is taken by the start of the track and can't also
+// mean off.
+//
+// The boundary is SOFT. A hard seam reads as two different materials glued together rather than
+// two states of one; the transition width is a fraction of the half-width, so it doesn't read as
+// a thread on a large element and doesn't swallow a small one whole.
+float vgProgress(float2 p, float2 halfSize, float progress) {
+  if (progress < 0.0) { return 0.0; }
+  float edge = mix(-halfSize.x, halfSize.x, clamp(progress, 0.0, 1.0));
+  float soft = max(halfSize.x * 0.05, 1.0);
+  return 1.0 - smoothstep(edge - soft, edge + soft, p.x);
+}
+`;
+var VG_FALLOFF = 2.6;
+
+// src/lens-shader.ts
+var LENS_SHADER = `
+uniform shader content;
+
+// Known only to the view itself: its own size and its own place on screen.
+uniform float2 u_center;
+uniform float  u_reach;
+uniform float2 u_contentMin;
+uniform float2 u_contentMax;
+// Backdrop estimate UNDER the glass from the native probe: lightness, variegation and average
+// color, already smoothed over time. Negative lightness means the probe hasn't reported yet \u2014
+// fall back to our own samples.
+uniform float  u_probeLuma;
+uniform float  u_probeBusy;
+// The endpoints of the lightness range under the glass: right at a black/white border the
+// average reads as a gray that says "everything's fine," while the ink drowns over the light
+// half.
+uniform float2 u_probeRange;
+// Slope of lightness across the surface, fraction per half-size: tinting is a gradient \u2014 one
+// density per element wouldn't separate the ink from both halves of the backdrop.
+uniform float2 u_probeSlope;
+uniform float3 u_probe;
+
+// Material \u2014 over the shared channel from JS, already in device pixels.
+uniform float2 u_halfSize;
+uniform float  u_corner;
+uniform float  u_bevel;
+uniform float  u_thick;
+uniform float  u_rim;
+uniform float  u_ior;
+uniform float  u_iorSpread;
+uniform float2 u_light;
+uniform float  u_appear;
+uniform float4 u_accent;
+uniform float  u_frost;
+uniform float  u_ink;
+uniform float  u_legibility;
+uniform float  u_dim;
+uniform float  u_presence;
+uniform float  u_progress;
+uniform float  u_adaptRadius;
+uniform float  u_bodyDensity;
+uniform float  u_edgeLight;
+uniform float  u_fresnel;
+uniform float  u_specular;
+uniform float  u_reflectReach;
+uniform float  u_film;
+uniform float  u_iridescence;
+uniform float  u_diffraction;
+uniform float  u_colorPickup;
+uniform float2 u_morphOffset;
+uniform float2 u_morphHalf;
+uniform float  u_morphCorner;
+uniform float  u_morphK;
+uniform float2 u_morph2Offset;
+uniform float2 u_morph2Half;
+uniform float  u_morph2Corner;
+uniform float  u_debug;
+uniform float2 u_touch;
+uniform float2 u_pull;
+uniform float  u_touchPress;
+uniform float  u_touchRadius;
+uniform float2 u_wave;
+
+${VG_SDF}
+
+// Sample count for the disc gather: fewer than this reads as a staircase of copies at a sharp edge.
+const int   VG_FROST_TAPS = 20;
+// The sample count grows with the disc's area: estimator noise is the spread under the glass
+// divided by the square root of the sample count. The ceiling is cost: texture sampling is the
+// most expensive thing here.
+const int   VG_FROST_TAPS_MAX = 64;
+// The radius correction for backdrop compression at the rim is capped: at the silhouette it goes
+// to infinity.
+const float VG_FOOTPRINT_MAX = 1.8;
+const float VG_TAU = 6.28318530718;
+// Ceiling on body lightness under light ink (and the mirrored floor under dark ink). This is a
+// ceiling, not a difference: "0.14 darker than white" is a lightness of 0.86, at which white text
+// is invisible.
+const float VG_BODY_CAP_LOOSE = 0.62;
+const float VG_BODY_CAP_TIGHT = 0.38;
+// Tint lightness in both directions: real glass is never coal-black or paper-white.
+const float VG_TINT_DARK = 0.07;
+const float VG_TINT_LIGHT = 0.94;
+// Reference channel wavelengths, nm \u2014 for diffraction and interference.
+const float3 VG_LAMBDA = float3(610.0, 550.0, 460.0);
+// Film index of refraction: every thin film on glass sits around this value.
+const float VG_FILM_IOR = 1.35;
+// Ceiling on the profile's slope right at the silhouette: it goes to infinity there.
+const float VG_SLOPE_MAX = 40.0;
+// Fraction of the gather radius that scattering reaches over a busy backdrop under ink (M 11:47).
+// Set against the reference: there, structure under the capsule fades by a factor of 9-10, not
+// thirty.
+const float VG_SCATTER_MAX = 0.20;
+const float VG_SCATTER_BASE = 0.1;
+// The response to structure under the glass saturates early: what competes with the ink isn't
+// the area of foreign text but the mere fact that it's there (a line under a tile gives a busy
+// of about 0.12).
+const float VG_STRUCTURE_GAIN = 20.0;
+// How much denser the body with ink gets over a BUSY backdrop than over a calm one. There's no
+// flat floor here: legibility picks up its own targeted requirement further down, and base
+// frosting comes from VG_MATTE_LIFT.
+const float VG_GROUND_SPAN = 0.06;
+// Scattered light on a frosted element is an ADDITION on top of the backdrop, not a fraction of
+// the way to the tint: the fraction goes to zero once the canvas reaches the tint's lightness,
+// and darkens past it (docs/benchmarks.md).
+const float VG_MATTE_LIFT = 0.10;
+// The fraction of backdrop spread that survives through to the body past scattering: the
+// legibility requirement is computed from this edge, not from the spot's average lightness.
+const float VG_BUSY_EDGE = 0.75;
+// Light concentration: the body is a touch lighter than what's beneath it (M 2:29).
+const float VG_CONCENTRATE = 0.01;
+// The lightness the medium pulls content under the glass toward, and the strength of that pull.
+// The medium both removes light and mixes in scattered light: over a light backdrop the body
+// darkens, over a dark one it lightens.
+const float VG_MEDIUM_LUMA = 0.40;
+const float VG_MEDIUM_PULL = 0.07;
+// How much ambient light reaches the body on top of the pull.
+const float VG_AMBIENT_SPILL = 0.01;
+
+float vgLuma(float3 c) { return dot(c, float3(0.2126, 0.7152, 0.0722)); }
+
+// Un-premultiply into ordinary color. One division, done in float: near zero, half's step is too
+// coarse, and several divisions in a row raise noise.
+float3 vgUnpack(half4 c) {
+  float a = float(c.a);
+  return a > 0.004 ? float3(c.rgb) / a : float3(0.0);
+}
+
+// The capture ends at the screen edge: samples are clamped to the rectangle where content
+// actually exists, otherwise full-width glass picked up a band of emptiness along its edges.
+float2 vgInContent(float2 q) { return clamp(q, u_contentMin, u_contentMax); }
+
+// Hue without lightness. Below the threshold the color has no hue, and the division blows up.
+float3 vgHue(float3 c) {
+  float l = vgLuma(c);
+  if (l < 0.02) { return float3(1.0); }
+  return clamp(c / l, float3(0.0), float3(2.0));
+}
+
+// Edge profile \u2014 a convex squircle: x = 0 at the silhouette, 1 where the rounding turns flat.
+float vgRimQ(float x) {
+  float k = 1.0 - x;
+  return sqrt(sqrt(max(1.0 - k * k * k * k, 0.0)));
+}
+
+float vgRimQd(float x) {
+  float k = 1.0 - x;
+  return k * k * k / pow(max(1.0 - k * k * k * k, 1e-5), 0.75);
+}
+
+// Glass height above the content at distance e from the silhouette.
+float vgHeight(float e, float w) {
+  return mix(u_rim, u_thick, vgRimQ(clamp(e / w, 0.0, 1.0)));
+}
+
+// Slope of the top face at the same point: the derivative of height with respect to distance
+// from the silhouette.
+float vgSlope(float e, float w) {
+  if (e >= w) { return 0.0; }
+  return min((u_thick - u_rim) / w * vgRimQd(clamp(e / w, 0.0, 1.0)), VG_SLOPE_MAX);
+}
+
+// Where a ray falling from above lands on a face with normal N: Snell's law refraction, then a
+// path of length z through the medium to the content. The convex face bends the ray toward the
+// normal \u2014 that is, inward relative to the shape.
+float2 vgShift(float3 N, float z, float ior) {
+  float3 T = refract(float3(0.0, 0.0, -1.0), N, 1.0 / ior);
+  return z * T.xy / max(-T.z, 0.05);
+}
+
+// Thin-film interference: optical path difference 2\xB7n\xB7d\xB7cos\u03B8t, each channel with its own \u03BB.
+// Returns a hue normalized to its own average \u2014 it colors, but doesn't lighten.
+float3 vgInterference(float cosI) {
+  float sinT2 = (1.0 - cosI * cosI) / (VG_FILM_IOR * VG_FILM_IOR);
+  float cosT = sqrt(max(1.0 - sinT2, 0.0));
+  float opd = 2.0 * VG_FILM_IOR * u_film * cosT;
+  float3 i = 0.5 + 0.5 * cos(VG_TAU * opd / VG_LAMBDA + 3.14159265);
+  return i / max((i.r + i.g + i.b) / 3.0, 0.001);
+}
+
+// Edge diffraction: fringes get denser the sharper the bevel. Also a hue, not a brightness.
+float3 vgDiffraction(float distFromEdge, float bevel) {
+  float phase = VG_TAU * 4.0 * distFromEdge / max(bevel, 1.0);
+  float3 d = 0.5 + 0.5 * cos(phase * (550.0 / VG_LAMBDA));
+  return d / max((d.r + d.g + d.b) / 3.0, 0.001);
+}
+
+float vgHash(float2 p) {
+  return fract(sin(dot(p, float2(12.9898, 78.233))) * 43758.5453);
+}
+
+// Soft compression instead of a hard clamp: over a white backdrop, additions used to knock a
+// channel to one, and the glass turned into a flat blob with no detail.
+float3 vgSoftClip(float3 c) {
+  float3 over = max(c - 0.86, float3(0.0));
+  return min(c, float3(0.86)) + over * 0.14 / (0.14 + over);
+}
+
+// Our own blur: the capture is left clean, the shader does the blurring \u2014 averaging in float
+// smooths banding on its own and adds no noise of its own. A golden-angle spiral, rotated to its
+// own angle at every pixel: with a shared angle, neighboring pixels took the same samples, and
+// texture under the glass read in clumps. Accumulated premultiplied \u2014 one shared un-premultiply
+// at the end.
+float4 vgGather(float2 q, float radius, float2 seed) {
+  float4 acc = float4(content.eval(vgInContent(q)));
+  if (radius <= 0.25) { return acc; }
+  if (radius < 4.0) {
+    float r = radius * 0.7;
+    acc += float4(content.eval(vgInContent(q + float2(r, 0.0))))
+      + float4(content.eval(vgInContent(q - float2(r, 0.0))))
+      + float4(content.eval(vgInContent(q + float2(0.0, r))))
+      + float4(content.eval(vgInContent(q - float2(0.0, r))));
+    return acc * 0.2;
+  }
+  float ca = cos(2.39996323);
+  float sa = sin(2.39996323);
+  float a0 = vgHash(seed) * 6.28318530718;
+  float2 dir = float2(cos(a0), sin(a0));
+  float wide = radius * 0.5;
+  int taps = int(clamp(float(VG_FROST_TAPS) * wide * wide, float(VG_FROST_TAPS), float(VG_FROST_TAPS_MAX)));
+  for (int i = 1; i <= VG_FROST_TAPS_MAX; i++) {
+    if (i > taps) { break; }
+    dir = float2(dir.x * ca - dir.y * sa, dir.x * sa + dir.y * ca);
+    float r = radius * sqrt(float(i) / float(taps));
+    acc += float4(content.eval(vgInContent(q + dir * r)));
+  }
+  return acc / float(taps + 1);
+}
+
+half4 main(float2 xy) {
+  float2 p = vgTouchWarp(xy - u_center, u_touch, u_pull, u_touchPress, u_touchRadius, u_wave.x, u_wave.y);
+  float sd = vgScene(p, u_halfSize, u_corner, u_morphOffset, u_morphHalf, u_morphCorner, u_morphK,
+                u_morph2Offset, u_morph2Half, u_morph2Corner);
+  // There's nothing outside the glass \u2014 except the light it spills onto the backdrop under the
+  // finger (M 3:38): the same concentrated ambient as inside, so no white halo appears over a
+  // dark backdrop.
+  if (sd > 1.0) {
+    float spill = u_touchPress * exp(-sd / max(min(u_halfSize.x, u_halfSize.y) * 0.5, 4.0)) * 0.5 * u_appear;
+    if (spill < 0.004) { return half4(0.0); }
+    float3 lit = clamp((u_probeLuma >= 0.0 ? u_probe : float3(0.35)) * 1.6 + float3(0.1), float3(0.0), float3(1.0));
+    return half4(half3(lit * spill), half(spill));
+  }
+
+  float bevel = max(u_bevel, 1.0);
+  float e = max(-sd, 0.0);
+  // 0 in the flat middle, 1 at the silhouette.
+  float t = 1.0 - clamp(e / bevel, 0.0, 1.0);
+  float2 n = vgSceneNormal(p, u_halfSize, u_corner, u_morphOffset, u_morphHalf, u_morphCorner, u_morphK,
+                u_morph2Offset, u_morph2Half, u_morph2Corner);
+
+  // "backdrop" mode hands back the content as-is \u2014 a reference point for comparing the optics.
+  float on = u_debug > 5.5 && u_debug < 6.5 ? 0.0 : 1.0;
+  float lens = on * u_appear;
+
+  float z = vgHeight(e, bevel);
+  float slope = vgSlope(e, bevel);
+  float3 N = normalize(float3(n * slope, 1.0));
+  float2 shift = vgShift(N, z, u_ior) * lens;
+  float2 s = u_center + p + shift;
+
+  // The area the lens gathers into one pixel: a one-pixel step inward on screen, measured
+  // against the sampling step. At the silhouette it's large \u2014 a stripe of backdrop is compressed
+  // into a line there, and a point sample gives grain.
+  float e1 = e + 1.0;
+  float3 N1 = normalize(float3(n * vgSlope(e1, bevel), 1.0));
+  float2 shift1 = vgShift(N1, vgHeight(e1, bevel), u_ior) * lens;
+  float footprint = length(shift1 - shift - n);
+  float spread = max(footprint - 1.0, 0.0) * 0.5 * on;
+
+  // Dispersion: the same ray with each channel's own index. Blue bends more than red.
+  float2 dR = vgShift(N, z, u_ior - 0.4 * u_iorSpread) * lens - shift;
+  float2 dB = vgShift(N, z, u_ior + 0.6 * u_iorSpread) * lens - shift;
+  float chroma = length(dB - dR);
+
+  float3 rgb;
+  float srcA;
+
+  if (chroma + spread < 0.25) {
+    // In the flat body all the samples would land at the same point, and the body is almost the
+    // whole area of the glass.
+    half4 c = content.eval(vgInContent(s));
+    srcA = float(c.a);
+    rgb = srcA > 0.004 ? float3(c.rgb) / srcA : float3(0.0);
+  } else {
+    // Accumulate premultiplied and divide once per pair: channels from different points with
+    // different alpha would otherwise produce a colored fringe at content edges that isn't
+    // really there.
+    float2 ev = n * spread;
+    half4 c0 = content.eval(vgInContent(s + dR - ev));
+    half4 c1 = content.eval(vgInContent(s + dR + ev));
+    half4 c2 = content.eval(vgInContent(s - ev));
+    half4 c3 = content.eval(vgInContent(s + ev));
+    half4 c4 = content.eval(vgInContent(s + dB - ev));
+    half4 c5 = content.eval(vgInContent(s + dB + ev));
+
+    float aR = float(c0.a + c1.a) * 0.5;
+    float aG = float(c2.a + c3.a) * 0.5;
+    float aB = float(c4.a + c5.a) * 0.5;
+    rgb = float3(
+      aR > 0.004 ? float(c0.r + c1.r) * 0.5 / aR : 0.0,
+      aG > 0.004 ? float(c2.g + c3.g) * 0.5 / aG : 0.0,
+      aB > 0.004 ? float(c4.b + c5.b) * 0.5 / aB : 0.0);
+    srcA = (aR + aG + aB) / 3.0;
+  }
+
+  // "backdrop" mode checks the CAPTURE, not a simplified version of the optics. What follows are
+  // layers that aren't tied to the lens (body, medium, scattering), and they used to conflate
+  // "did the pixels arrive" with "how did we process them." Here the element must DISAPPEAR: a
+  // visible silhouette means a capture loss.
+  if (u_debug > 5.5 && u_debug < 6.5) {
+    float bypass = srcA * (1.0 - smoothstep(-1.0, 1.0, sd));
+    return half4(half3(clamp(rgb, float3(0.0), float3(1.0)) * bypass), half(bypass));
+  }
+
+  // The transparent variant's dimming layer holds legibility instead of the body. A
+  // multiplication, not a tint: the content has to stay visible, just quieter.
+  rgb *= 1.0 - u_dim * u_appear;
+
+  // REFLECTION. Fresnel from the face's actual slope: at the silhouette the view is grazing and
+  // reflection is nearly total, which is why the rim reads as a thin line on its own. What's
+  // reflected is the element's surroundings and the key light.
+  float cosT = clamp(N.z, 0.0, 1.0);
+  float f0 = (u_ior - 1.0) / (u_ior + 1.0);
+  f0 *= f0;
+  float fres = (f0 + (1.0 - f0) * pow(1.0 - cosT, 5.0)) * u_fresnel * lens;
+
+  float lineW = clamp(min(u_halfSize.x, u_halfSize.y) * 0.03, 1.5, 5.0);
+  float3 refl;
+  if (e < lineW * 2.0 || fres > 0.01) {
+    float2 around = u_center + p + n * (u_reflectReach * mix(0.35, 1.0, clamp(slope / 3.2, 0.0, 1.0)));
+    // Two rings of eight samples total: a single offset sample is an undistorted COPY of
+    // neighboring content inside the glass (docs/material-lab.md E-33).
+    float p1 = u_reflectReach * 0.75;
+    float p2 = u_reflectReach * 0.4;
+    float d = 0.7071;
+    float4 rsum = float4(content.eval(vgInContent(around + float2(p1, 0.0))))
+      + float4(content.eval(vgInContent(around - float2(p1, 0.0))))
+      + float4(content.eval(vgInContent(around + float2(0.0, p1))))
+      + float4(content.eval(vgInContent(around - float2(0.0, p1))))
+      + float4(content.eval(vgInContent(around + float2(p2, p2) * d)))
+      + float4(content.eval(vgInContent(around + float2(-p2, p2) * d)))
+      + float4(content.eval(vgInContent(around + float2(p2, -p2) * d)))
+      + float4(content.eval(vgInContent(around + float2(-p2, -p2) * d)));
+    float ra = rsum.a * 0.125;
+    refl = ra > 0.004 ? rsum.rgb * 0.125 / ra : float3(0.0);
+  } else {
+    refl = u_probeLuma >= 0.0 ? u_probe : rgb;
+  }
+
+  // Light reaching the body is the same across the whole element: blending with the surroundings
+  // over the bevel's band used to paint a ring-shaped seam on the body.
+  float3 ambient = u_probeLuma >= 0.0 ? u_probe : rgb;
+
+  // Light comes from wherever the surroundings are brighter (M 11:04): the lightness slope under
+  // the element pulls the key light toward itself, and over a flat backdrop it stays at rest.
+  float2 bright = u_probeLuma >= 0.0 ? u_probeSlope : float2(0.0);
+  float brightLen = length(bright);
+  float2 L = normalize(mix(u_light, bright / max(brightLen, 1e-4), smoothstep(0.03, 0.2, brightLen)) + float2(1e-5));
+  // The key light's reflection uses the face's actual normal: at the flat top it points straight
+  // up, and there's nothing there for direction to depend on. Using the SDF normal instead
+  // painted the body as a cone.
+  float facing = dot(N.xy, L);
+  float key = u_specular * (pow(max(facing, 0.0), 3.0) + 0.45 * pow(max(-facing, 0.0), 3.0));
+  float rimFacing = dot(n, L);
+  float rimKey = u_specular * (pow(max(rimFacing, 0.0), 3.0) + 0.45 * pow(max(-rimFacing, 0.0), 3.0));
+  // Wherever the key light doesn't fall, the face reflects its shaded surroundings \u2014 hence the
+  // dark outline.
+  float3 env = refl * (0.55 + 0.45 * min(key, 1.0)) + float3(1.2 * key);
+
+  // Interference and diffraction live in the reflected ray at a grazing angle \u2014 a single hue
+  // multiplier applied to the reflection, no extra samples.
+  float3 spectral = float3(1.0);
+  if (u_iridescence > 0.001) {
+    spectral *= mix(float3(1.0), vgInterference(cosT), u_iridescence);
+  }
+  if (u_diffraction > 0.001) {
+    float w = u_diffraction * smoothstep(0.45, 1.0, t);
+    spectral *= mix(float3(1.0), vgDiffraction(e, bevel), w);
+  }
+
+  // The BACKDROP ESTIMATE arrives from the probe as one value per surface: computing it here
+  // from samples isn't an option \u2014 a kink in density used to turn the estimate's discreteness
+  // into ghost copies of text.
+  float3 wide;
+  float busy;
+  if (u_probeLuma >= 0.0) {
+    wide = u_probe;
+    busy = u_probeBusy;
+  } else {
+    // The probe hasn't reported yet (first frames) \u2014 fall back to our own samples.
+    float2 wx = float2(u_adaptRadius, 0.0);
+    float2 wy = float2(0.0, u_adaptRadius);
+    float3 w0 = vgUnpack(content.eval(vgInContent(s + wx)));
+    float3 w1 = vgUnpack(content.eval(vgInContent(s - wx)));
+    float3 w2 = vgUnpack(content.eval(vgInContent(s + wy)));
+    float3 w3 = vgUnpack(content.eval(vgInContent(s - wy)));
+    wide = (w0 + w1 + w2 + w3) * 0.25;
+    float lw = vgLuma(wide);
+    // The same statistic the probe uses (twice the mean deviation): both blur and the ink's
+    // contrast margin depend on it, and the two paths' scales must not diverge.
+    busy = clamp(0.5 * (abs(vgLuma(w0) - lw) + abs(vgLuma(w1) - lw)
+      + abs(vgLuma(w2) - lw) + abs(vgLuma(w3) - lw)), 0.0, 1.0);
+  }
+  // Lightness AT THIS SPOT on the surface: the probe's plane, clamped to the measured range.
+  float2 nrm = p / max(u_halfSize, float2(1.0));
+  float local = u_probeLuma >= 0.0
+    ? clamp(u_probeLuma + dot(u_probeSlope, nrm), u_probeRange.x, u_probeRange.y)
+    : vgLuma(wide);
+  float mean = u_probeLuma >= 0.0 ? u_probeLuma : vgLuma(wide);
+
+  // SCATTERING. Regular mutes foreign structure under its own ink with blur, not a fill (M
+  // 11:47): text under a capsule turns into blotches. Uniform across the whole lens; the radius
+  // is measured in backdrop space \u2014 the lens compresses it at the silhouette.
+  float structure = 1.0 - exp(-busy * VG_STRUCTURE_GAIN);
+  // Under ink, Regular always scatters the backdrop; over a busy one, more strongly.
+  float adaptBlur = max(
+    (structure * VG_SCATTER_MAX + VG_SCATTER_BASE) * u_legibility * u_adaptRadius
+      * min(max(footprint, 1.0), VG_FOOTPRINT_MAX),
+    u_frost) * u_appear;
+  if (adaptBlur > 0.5) {
+    float reach = max(u_reach - length(p), 1.0);
+    float4 g = vgGather(s, min(adaptBlur, reach), xy);
+    float ga = g.a;
+    float3 blurred = ga > 0.004 ? g.rgb / ga : float3(0.0);
+    rgb = mix(rgb, blurred, smoothstep(0.5, 2.0, adaptBlur));
+  }
+
+  // AFTER scattering, not before: scattering is a property of TRANSMITTED light and replaces rgb
+  // wholesale, so doing it the other way around erased the reflection over the whole element
+  // (issue #106).
+  rgb = mix(rgb, env * spectral, fres);
+
+  // BODY. Tint and dynamic range under the glass compress just enough for ink over it to stay
+  // legible (M 6:42). u_ink is ink POLARITY (1 light, 0 dark): the requirements are computed at
+  // the two ends and blended by it, otherwise the glass dips toward the middle during a recolor.
+  float strict = clamp(u_legibility * 2.0, 0.0, 1.0);
+  float capLight = mix(VG_BODY_CAP_LOOSE, VG_BODY_CAP_TIGHT, strict);
+  float floorDark = 1.0 - capLight;
+  float pol = clamp(u_ink, 0.0, 1.0);
+  // The requirement fades together with legibility: an element with no ink is promised
+  // transparent glass by the model.
+  float demand = clamp(u_legibility * 4.0, 0.0, 1.0);
+
+  // Where there's no ink, the glass tints away from the backdrop. The direction is chosen by the
+  // average lightness under the element, not the local spot's lightness: otherwise on a gradient
+  // the threshold cuts across the body as a diagonal step.
+  float darkSide = smoothstep(0.42, 0.58, mean);
+  float away = mix(VG_TINT_LIGHT, VG_TINT_DARK, darkSide);
+  float tintLuma = mix(away, mix(VG_TINT_LIGHT, VG_TINT_DARK, pol), demand);
+
+  // How much medium it takes to push lightness under the ink past the threshold \u2014 locally.
+  // Computed from whichever edge of the backdrop's spread is closer to the ink: a light ink
+  // drowns in a light spot right beneath it, and the spot's average lightness knows nothing
+  // about that spot.
+  float edge = busy * VG_BUSY_EDGE;
+  float inkHi = min(local + edge, 1.0);
+  float inkLo = max(local - edge, 0.0);
+  float needForLight = inkHi > capLight
+    ? clamp((inkHi - capLight) / max(inkHi - VG_TINT_DARK, 1e-4), 0.0, 0.92)
+    : 0.0;
+  float needForDark = inkLo < floorDark
+    ? clamp((floorDark - inkLo) / max(VG_TINT_LIGHT - inkLo, 1e-4), 0.0, 0.92)
+    : 0.0;
+  float needForInk = mix(needForDark, needForLight, pol) * demand;
+
+  float ground = structure * u_legibility * VG_GROUND_SPAN;
+  float density = max(max(u_bodyDensity, ground), needForInk);
+
+  // Glass has no color of its own \u2014 only the color of what's beneath it (HIG "Color").
+  float3 tintHue = mix(float3(1.0), vgHue(wide * 0.5 + ambient * 0.5), u_colorPickup);
+  // The element appears by the lens and body building up, not by fading in (M 2:55): at
+  // u_appear = 0 it's indistinguishable from the backdrop beneath it.
+  rgb = mix(rgb, tintHue * tintLuma, density * u_appear);
+  rgb += tintHue * (u_legibility * VG_MATTE_LIFT * u_appear);
+
+  // TINTING \u2014 colored glass, not a fill (M 16:31, 17:03): the backdrop's lightness drives the
+  // tone \u2014 deeper over dark, lighter over light \u2014 and the content's texture still shows through
+  // the color.
+  if (u_accent.a > 0.0) {
+    float3 tone = u_accent.rgb * mix(0.88, 1.08, local);
+    float3 through = tone * (0.85 + 0.3 * vgLuma(rgb));
+    rgb = mix(rgb, clamp(through, float3(0.0), float3(1.0)), u_accent.a * u_appear);
+  }
+
+  // CONTRAST COMPRESSION. The medium removes some light and mixes in scattered light, so content
+  // under the glass moves toward the middle rather than simply getting lighter (M 2:35). The
+  // previous layer only added light and, over a light backdrop, pushed the body the opposite way
+  // from the reference.
+  rgb = mix(rgb, vgHue(ambient) * VG_MEDIUM_LUMA, VG_MEDIUM_PULL * u_appear);
+  // Ambient light reaches the body the same way across the whole element.
+  rgb += ambient * u_edgeLight * VG_AMBIENT_SPILL * u_appear;
+  // Glass concentrates light; the played portion is the segment where there's more of it.
+  float glow = VG_CONCENTRATE + 0.08 * vgProgress(p, u_halfSize, u_progress);
+  rgb += (1.0 - rgb) * glow * lens;
+
+  // Under the finger and during morphing, glass concentrates light into a spot (M 4:56, 5:11).
+  // This is a CONCENTRATION of the surroundings, not the glass's own whiteness: over a dark
+  // backdrop the element lightens but never turns white, and ink over it stays legible.
+  if (u_touchPress > 0.001) {
+    float2 fromTouch = p - u_touch;
+    float spotR = max(min(u_halfSize.x, u_halfSize.y) * 1.2, 1.0);
+    float spot = u_touchPress * (0.3 + 0.55 * exp(-dot(fromTouch, fromTouch) / (spotR * spotR)));
+    rgb = mix(rgb, clamp(ambient * 1.6 + float3(0.1), float3(0.0), float3(1.0)), spot * lens);
+  }
+
+  // RIM LIGHT \u2014 a separate layer, a line about 1 pt wide along the silhouette (M 2:36, 11:04):
+  // brighter where the face faces the key light, weaker opposite it; where no light falls, a
+  // dark outline. This line is what holds the element's presence, not a fill on the body: over a
+  // flat backdrop a control is visible along its whole silhouette because of it.
+  float line = (1.0 - smoothstep(0.0, lineW, e)) * lens;
+  float outline = (1.0 - smoothstep(0.0, lineW * 0.6, e)) * lens;
+  float lit = clamp(max(rimKey * 1.4, u_presence * 2.0), 0.0, 1.0);
+  // The dark rim is its own layer around the whole silhouette, and the highlight sits ON TOP of
+  // it (iOS 27). While the outline used to fade via a (1 \u2212 lit) multiplier, the silhouette read
+  // as a single arc: highlight OR shadow.
+  rgb *= 1.0 - 0.22 * outline;
+  rgb = mix(rgb, mix(refl, float3(1.0), 0.75), line * lit);
+
+  if (u_debug > 9.5 && u_debug < 10.5) { rgb = spectral * 0.5; }
+  if (u_debug > 10.5 && u_debug < 11.5) { rgb = float3(density, needForInk, structure); }
+  // WHAT THE PROBE SAID ABOUT THE BACKDROP \u2014 three values that drive all the tinting: the
+  // average lightness under the element, the vertical lightness slope, and the lightness AT THIS
+  // SPOT. The slope is shown offset and squeezed by half: it's signed and rarely exceeds a
+  // magnitude of one half.
+  if (u_debug > 11.5) { rgb = float3(max(u_probeLuma, 0.0), 0.5 + u_probeSlope.y * 0.5, local); }
+
+  rgb = vgSoftClip(rgb);
+
+  // Sample alpha has to survive to the result: un-premultiplying color by its original alpha and
+  // then returning it with a different one (the shape mask) would make a transparent backdrop
+  // opaque and blow it out.
+  float alpha = srcA * (1.0 - smoothstep(-1.0, 1.0, sd));
+  return half4(half3(clamp(rgb, float3(0.0), float3(1.0)) * alpha), half(alpha));
+}
+`;
+var EFFECTS = [
+  "backdrop",
+  "blur",
+  "refraction",
+  "fresnel",
+  "bevel",
+  "specular",
+  "dispersion",
+  "tint",
+  "environment",
+  "legibility",
+  "interference",
+  "diffraction"
+];
+EFFECTS.reduce(
+  (acc, e) => ({ ...acc, [e]: true }),
+  {}
+);
+var DEBUG_MODES = [
+  "normal",
+  "sdf",
+  "mask",
+  "edge",
+  "fresnel",
+  "refraction",
+  "backdrop",
+  "specular",
+  "dispersion",
+  "normals",
+  "spectral",
+  "adapt",
+  "probe"
+];
+function debugIndex(mode) {
+  return DEBUG_MODES.indexOf(mode);
+}
+
+// src/adapters.ts
+var NO_TOUCH = {
+  x: 0,
+  y: 0,
+  pullX: 0,
+  pullY: 0,
+  press: 0,
+  radius: 0,
+  waveAmp: 0,
+  wavePhase: 0
+};
+var NO_MORPH = { offsetX: 0, offsetY: 0, width: 0, height: 0, cornerRadius: 0, smoothing: 0 };
+var NO_PROGRESS = -1;
+var ACCENT_AMOUNT = 0.8;
+var NO_ACCENT = [0, 0, 0, 0];
+var shapes = /* @__PURE__ */ new Map();
+function channel(entries) {
+  const uniformValues = [];
+  let shape = shapes.get(entries.length);
+  let same = shape !== void 0;
+  for (let i = 0; i < entries.length; i += 1) {
+    const [name, value] = entries[i];
+    const v = typeof value === "number" ? [value] : value;
+    if (same && (shape.names[i] !== name || shape.sizes[i] !== v.length)) same = false;
+    for (const x of v) uniformValues.push(x);
+  }
+  if (!same) {
+    shape = {
+      names: entries.map((e) => e[0]),
+      sizes: entries.map((e) => typeof e[1] === "number" ? 1 : e[1].length)
+    };
+    shapes.set(entries.length, shape);
+  }
+  return { uniformNames: shape.names, uniformSizes: shape.sizes, uniformValues };
+}
+function toLensProps(optics, geometry, density, options = {}) {
+  const morph = options.morph ?? NO_MORPH;
+  const morph2 = options.morph2 ?? NO_MORPH;
+  const touch = options.touch ?? NO_TOUCH;
+  const g = options.groupProbe;
+  const group = g && g.length >= 9 ? [
+    ["u_probeLuma", g[0]],
+    ["u_probeBusy", g[1]],
+    ["u_probeRange", [g[2], g[3]]],
+    ["u_probeSlope", [g[4], g[5]]],
+    ["u_probe", [g[6], g[7], g[8]]]
+  ] : [];
+  const d = density;
+  const halfW = geometry.width * d / 2;
+  const halfH = geometry.height * d / 2;
+  const halfMin = Math.min(halfW, halfH);
+  return {
+    shaderSource: LENS_SHADER,
+    glassWidth: geometry.width,
+    glassHeight: geometry.height,
+    ...channel([
+      ["u_halfSize", [halfW, halfH]],
+      ["u_corner", Math.min(geometry.cornerRadius * d, halfMin)],
+      ["u_bevel", Math.max(bevelDp(geometry, optics) * d, 1)],
+      ["u_thick", thicknessDp(geometry, optics) * d],
+      ["u_rim", rimDp(geometry, optics) * d],
+      ["u_ior", optics.ior],
+      ["u_iorSpread", optics.iorSpread],
+      ["u_light", options.light ?? REST_LIGHT],
+      ["u_appear", options.appear ?? 1],
+      ["u_accent", options.accent ? [...options.accent.color, options.accent.amount ?? ACCENT_AMOUNT] : NO_ACCENT],
+      // Haze from surface roughness. Lives in the same disc-gather pass as adaptive scattering,
+      // and fades out toward the bevel: that's a different job there — bending the ray and
+      // splitting it.
+      ["u_frost", optics.blur * d],
+      ["u_ink", optics.ink],
+      ["u_legibility", optics.legibility],
+      ["u_dim", optics.dimming],
+      ["u_presence", optics.presence],
+      ["u_adaptRadius", optics.adaptRadius * d],
+      ["u_bodyDensity", optics.bodyDensity],
+      ["u_edgeLight", optics.edgeLight],
+      ["u_fresnel", optics.fresnel],
+      ["u_specular", optics.specular],
+      // The rim gathers light from the element's vicinity — this is a radius around the shape,
+      // not its bevel.
+      ["u_reflectReach", optics.gatherRadiusDp * d],
+      ["u_film", optics.film],
+      ["u_iridescence", optics.iridescence],
+      ["u_diffraction", optics.diffraction],
+      ["u_colorPickup", optics.colorPickup],
+      ["u_morphOffset", [morph.offsetX * d, morph.offsetY * d]],
+      ["u_morphHalf", [morph.width * d / 2, morph.height * d / 2]],
+      ["u_morphCorner", morph.cornerRadius * d],
+      ["u_morphK", morph.smoothing * d],
+      ["u_morph2Offset", [morph2.offsetX * d, morph2.offsetY * d]],
+      ["u_morph2Half", [morph2.width * d / 2, morph2.height * d / 2]],
+      ["u_morph2Corner", morph2.cornerRadius * d],
+      ["u_touch", [touch.x * d, touch.y * d]],
+      ["u_pull", [touch.pullX * d, touch.pullY * d]],
+      ["u_touchPress", touch.press],
+      ["u_touchRadius", touch.radius * d],
+      ["u_wave", [touch.waveAmp * d, touch.wavePhase]],
+      ["u_progress", options.progress ?? NO_PROGRESS],
+      ["u_debug", debugIndex(options.debug ?? "normal")],
+      ...group
+    ])
+  };
+}
+function toSurfaceUniforms(optics, geometry, options = {}) {
+  const morph = options.morph ?? NO_MORPH;
+  const morph2 = options.morph2 ?? NO_MORPH;
+  const touch = options.touch ?? NO_TOUCH;
+  const pad = surfacePadDp(geometry, options.dragLimit ?? 0, morph);
+  return {
+    u_center: [geometry.width / 2 + pad, geometry.height / 2 + pad],
+    u_halfSize: [geometry.width / 2, geometry.height / 2],
+    u_corner: Math.min(geometry.cornerRadius, halfMinDp(geometry)),
+    u_bevel: bevelDp(geometry, optics),
+    u_thickness: bevelFraction(geometry, optics),
+    u_morphOffset: [morph.offsetX, morph.offsetY],
+    u_morphHalf: [morph.width / 2, morph.height / 2],
+    u_morphCorner: morph.cornerRadius,
+    u_morphK: morph.smoothing,
+    u_morph2Offset: [morph2.offsetX, morph2.offsetY],
+    u_morph2Half: [morph2.width / 2, morph2.height / 2],
+    u_morph2Corner: morph2.cornerRadius,
+    u_edgeDensity: optics.edgeDensity,
+    u_dispersion: optics.dispersion,
+    u_refraction: optics.refraction,
+    // Tint density is suppressed when the lens is drawing the body: painting it twice would
+    // double the fill, and adaptation is impossible on the surface anyway — it can't see the
+    // backdrop. The color itself stays: it drives absorption at the rim.
+    u_tint: [
+      optics.tint.r,
+      optics.tint.g,
+      optics.tint.b,
+      options.bodyInLens ? 0 : optics.tintStrength
+    ],
+    u_shadow: options.shadow ?? 1,
+    // Neutral by default: without an ambient sample, the shadow stays exactly as it was.
+    u_ambient: options.ambient ?? [0, 0, 0],
+    u_shadowReach: shadowReachDp(geometry),
+    u_touch: [touch.x, touch.y],
+    u_pull: [touch.pullX, touch.pullY],
+    u_touchPress: touch.press,
+    u_touchRadius: touch.radius,
+    u_wave: [touch.waveAmp, touch.wavePhase],
+    u_presence: optics.presence,
+    u_progress: options.progress ?? NO_PROGRESS,
+    u_appear: options.appear ?? 1,
+    // Zero by default: buttons sink in, the way every element behaved before this rule existed.
+    u_lift: options.lift ?? 0,
+    u_debug: debugIndex(options.debug ?? "normal")
+  };
+}
+var SURFACE_LENGTH_UNIFORMS = [
+  "u_halfSize",
+  "u_corner",
+  "u_bevel",
+  "u_morphOffset",
+  "u_morphHalf",
+  "u_morphCorner",
+  "u_morphK",
+  "u_morph2Offset",
+  "u_morph2Half",
+  "u_morph2Corner",
+  "u_shadowReach",
+  "u_touch",
+  "u_pull",
+  "u_touchRadius"
+  // `satisfies`, not just `as const`: otherwise a typo in the name compiles silently and makes it
+  // to runtime — the field with the garbage name gets NaN, and the real one is left un-multiplied.
+];
+function toDeviceSurfaceUniforms(raw, density) {
+  const scaled = { ...raw };
+  for (const key of SURFACE_LENGTH_UNIFORMS) {
+    const value = scaled[key];
+    scaled[key] = Array.isArray(value) ? value.map((v) => v * density) : value * density;
+  }
+  scaled.u_wave = [raw.u_wave[0] * density, raw.u_wave[1]];
+  return scaled;
+}
+var REST_LIGHT = [-0.577, -0.817];
+var DYNAMIC_UNIFORMS = ["u_press", "u_active"];
+var ICON_UNIFORMS = ["u_iconOn", "u_iconScale", "u_inkIdle", "u_inkActive"];
+var OVERLAY_UNIFORMS = ["u_overlayOn"];
+
+// src/surface-shader.ts
+var SURFACE_SHADER = `
+uniform shader u_icon;
+/** App-colored content ON the glass \u2014 cover art, a thumbnail. A separate layer from the ink
+ *  mask: that one is single-channel and colored by polarity, this one carries its own color
+ *  as-is. */
+uniform shader u_overlay;
+
+uniform float2 u_center;
+uniform float2 u_halfSize;
+uniform float  u_corner;
+uniform float  u_bevel;
+uniform float  u_thickness;
+uniform float2 u_morphOffset;
+uniform float2 u_morphHalf;
+uniform float  u_morphCorner;
+uniform float  u_morphK;
+uniform float2 u_morph2Offset;
+uniform float2 u_morph2Half;
+uniform float  u_morph2Corner;
+
+uniform float  u_press;
+uniform float  u_active;
+/* 0 \u2014 the element sinks in under the finger, 1 \u2014 it rises into glass (reference \xA75). */
+uniform float  u_lift;
+
+uniform float  u_edgeDensity;
+uniform float  u_dispersion;
+uniform float  u_refraction;
+uniform float4 u_tint;
+uniform float  u_shadow;
+uniform float  u_shadowReach;
+uniform float3 u_ambient;
+uniform float  u_presence;
+uniform float  u_progress;
+uniform float  u_appear;
+uniform float  u_debug;
+
+uniform float  u_iconOn;
+uniform float  u_overlayOn;
+uniform float  u_iconScale;
+uniform float4 u_inkIdle;
+uniform float4 u_inkActive;
+uniform float2 u_touch;
+uniform float2 u_pull;
+uniform float  u_touchPress;
+uniform float  u_touchRadius;
+uniform float2 u_wave;
+
+${VG_SDF}
+
+const float VG_FALLOFF = ${VG_FALLOFF};
+
+// Tint density in the flat middle; at the bevel it's multiplied by u_edgeDensity.
+const float VG_BODY_DENSITY = 0.19;
+/* Fraction of the ambient hue in the shadow. The shadow has to stay a shadow, not a colored
+ *  blob. */
+const float VG_SHADOW_TINT = 1.0;
+// How much weaker the shadow is right at the outline than under the middle of the gap, and what
+// fraction of the offset it takes to reach full depth. In the reference the shadow's minimum
+// sits below the rim, not right at it.
+const float VG_GAP_LIGHT = 0.76;
+const float VG_GAP_REACH = 0.20;
+/* Depth of the ink beneath the surface, dp. The normal displaces it by exactly this much right
+ *  at the rim. */
+const float VG_INK_DEPTH = 4.0;
+/* Ink defocus under the finger (reference \xA76): a glyph loses its edge and drowns in milk. Given
+ * as a FRACTION of the touch blob, not a number: the blob already arrives in device units, so
+ * the radius automatically follows both screen density and the element's size. At rest it's
+ * zero, and the sample stays a single one. */
+const float VG_INK_DEFOCUS = 0.08;
+
+half4 vgPack(half3 c, float a) { return half4(c * half(a), half(a)); }
+
+// What bleeds into the shadow is the COLOR of the surroundings, not its brightness: the hue's own
+// lightness is subtracted out of it, otherwise the shadow pales and loses depth instead of
+// warming up. Strength is set by how much light there is around: over a nearly black backdrop
+// there's nothing to bleed into the shadow.
+float3 vgShadowTint(float3 ambient) {
+  float peak = max(max(ambient.r, ambient.g), max(ambient.b, 0.001));
+  float3 hue = ambient / peak;
+  float lumaWeights = dot(ambient, float3(0.2126, 0.7152, 0.0722));
+  return (hue - dot(hue, float3(0.2126, 0.7152, 0.0722))) * lumaWeights;
+}
+
+half3 vgHeat(float v) {
+  float x = clamp(v, 0.0, 1.0);
+  return half3(half(clamp(x * 2.2 - 0.2, 0.0, 1.0)),
+               half(clamp(1.0 - abs(x - 0.5) * 2.2, 0.0, 1.0)),
+               half(clamp(1.2 - x * 2.4, 0.0, 1.0)));
+}
+
+half4 main(float2 xy) {
+  float2 p = vgTouchWarp(xy - u_center, u_touch, u_pull, u_touchPress, u_touchRadius, u_wave.x, u_wave.y);
+
+  // Inverse deformation: stretch A along the pull vector, compression 1/sqrt(A) across it. This
+  // exact law mirrors the transform of the live backdrop under the canvas, otherwise the two
+  // would drift apart. There's NO motion geometry here \u2014 no pull, no press-driven bulge. All of
+  // that is done by a single wrapper transform, the same one that carries the native lens: the
+  // shader doesn't touch it, and two pipelines driving one motion would drift apart by a frame,
+  // making the layers visible as separate.
+
+  float halfMin = max(min(u_halfSize.x, u_halfSize.y), 1.0);
+  float bevel = max(u_bevel, 1.0);
+
+  float sd = vgScene(p, u_halfSize, u_corner, u_morphOffset, u_morphHalf, u_morphCorner, u_morphK,
+                u_morph2Offset, u_morph2Half, u_morph2Corner);
+  float t = vgBevelT(sd, bevel);
+  float2 n = vgSceneNormal(p, u_halfSize, u_corner, u_morphOffset, u_morphHalf, u_morphCorner, u_morphK,
+                u_morph2Offset, u_morph2Half, u_morph2Corner);
+  float3 N = normalize(float3(n * vgBevelSlope(t), 1.0));
+
+  // Progress is an active state turned into a field: the played fraction shines and glows
+  // exactly as much as an active element shines whole. This does NOT touch ink: recoloring text
+  // as the track advances would mean changing it mid-word.
+  float lit = max(u_active, vgProgress(p, u_halfSize, u_progress));
+
+  // The highlight and the rim are computed by the lens: reflection is a function of the
+  // surroundings, and only the lens can see them.
+
+  if (u_debug > 0.5) {
+    float inMask = 1.0 - smoothstep(-1.0, 1.0, sd);
+    if (u_debug < 1.5) {
+      float band = abs(fract(sd / (halfMin * 0.22)) - 0.5) * 2.0;
+      half3 c = sd < 0.0 ? half3(0.20, 0.62, 1.0) : half3(1.0, 0.42, 0.22);
+      return vgPack(c * half(0.25 + band * 0.75), 1.0);
+    }
+    if (u_debug < 2.5) { return vgPack(half3(1.0), inMask); }
+    if (u_debug < 3.5) { return vgPack(vgHeat(t), inMask); }
+    // Fresnel now lives in the lens; here we show its SHAPE \u2014 how grazing the view is.
+    if (u_debug < 4.5) { return vgPack(vgHeat(1.0 - clamp(N.z, 0.0, 1.0)), inMask); }
+    if (u_debug < 5.5) {
+      float push = pow(t, VG_FALLOFF) * u_refraction;
+      return vgPack(vgHeat(push), inMask);
+    }
+    if (u_debug < 6.5) { return half4(0.0); }
+    if (u_debug < 7.5) { return half4(0.0); }
+    // Dispersion is computed by the lens; here is the field it grows along.
+    if (u_debug < 8.5) { return vgPack(vgHeat(u_dispersion * t * t), inMask); }
+    if (u_debug < 9.5) { return vgPack(half3(N * 0.5 + 0.5), inMask); }
+    // spectral and adapt are shown by the LENS \u2014 the surface has to get out of the way.
+    return half4(0.0);
+  }
+
+  // The shadow and the halo live OUTSIDE the shape: inside, their place is taken by the glass
+  // itself. Separation from the content rests entirely on the shadow \u2014 without it the surface
+  // would sit ON the picture, not above it. The shadow only lives at the rim and outside it: at
+  // sd < \u22121 the outside multiplier is already zero. Computing it deep inside the shape would be
+  // a wasted FULL SDF evaluation for every such pixel, and the body covers almost the whole
+  // area. The branch here is on the coordinate, but only the threads right at the rim actually
+  // diverge.
+  float shade = 0.0;
+  float halo = 0.0;
+  if (sd > -1.0) {
+    float outside = smoothstep(-1.0, 1.0, sd);
+    // Under the finger a button moves TOWARD the backdrop, and the shadow tightens: it's exactly
+    // the gap between the two. A control rising into glass (a switch knob, a slider handle \u2014
+    // reference \xA75) moves AWAY from it, and then the shadow spreads out instead. Only the app
+    // knows which one applies, so the direction arrives as a fraction: 0 is sinking in, the way
+    // every element behaved before this rule existed.
+    float reach = u_shadowReach * (1.0 + mix(-0.25, 0.55, u_lift) * u_press);
+    // The shadow is soft and wide, shifted downward (M 11:58): it's what holds the element's
+    // separation from the content.
+    float sdDrop = vgScene(p - float2(0.0, reach * 0.35), u_halfSize, u_corner,
+                           u_morphOffset, u_morphHalf, u_morphCorner, u_morphK,
+                u_morph2Offset, u_morph2Half, u_morph2Corner);
+    float amb = 1.0 - smoothstep(-reach * 0.3, reach, sdDrop);
+    // THE GAP UNDER A RAISED ELEMENT IS LIT: right at the outline the shadow is WEAKER than
+    // further down. Otherwise the minimum sits right against the silhouette \u2014 both parts of the
+    // shadow are monotonic in distance.
+    float gap = smoothstep(0.0, max(reach * VG_GAP_REACH, 1.0), max(sd, 0.0));
+    shade = amb * amb * 0.13 * mix(VG_GAP_LIGHT, 1.0, gap) * outside * u_shadow * u_appear;
+    halo = 1.0 - smoothstep(0.0, reach * 0.30, max(sd, 0.0));
+    halo = halo * halo * lit * 0.10 * outside * u_appear;
+  }
+
+  if (sd > 1.0) {
+    // Ambient light bleeds into the shadow (219 @8:22): it isn't a black hole, it's tinted by
+    // whatever lies nearby. Otherwise an element over colored content would hang over a gray
+    // blob.
+    half3 spill = max(half3(half(halo)) + half3(vgShadowTint(u_ambient)) * half(VG_SHADOW_TINT * shade * (1.0 - halo)), half3(0.0));
+    return half4(spill, half(halo + shade * (1.0 - halo)));
+  }
+
+  float density = u_tint.w;
+  float inner = clamp(-sd / halfMin, 0.0, 1.0);
+  half3 col = half3(u_tint.rgb);
+
+  // The tint is LIGHT and weak, not dark: dark glass over dark content disappears, and has to be
+  // held together with a heavy rim \u2014 which makes the surface read as a chrome bead. Tint density
+  // at the bevel is a separate value: physically the bevel bends light harder, but it doesn't
+  // get hazier. Coupled together, the two produced a milky ring around the whole outline.
+  float body = mix(VG_BODY_DENSITY, VG_BODY_DENSITY * u_edgeDensity, smoothstep(0.10, 0.62, t)) * density;
+  float vignette = smoothstep(0.15, 1.0, inner) * 0.19 * density;
+  // There's NO density boost on press here. It was meant as "the element stands out more under
+  // the finger," but it pulls the body toward the tint, and the tint depends on polarity: over a
+  // light backdrop (dark polarity) press ended up DARKENING the element. Presence is shown
+  // instead by the vgTouchWarp field's deformation and the highlight blooming below \u2014 neither
+  // cares about the sign of polarity.
+  float a = max(body, vignette);
+
+  // Active state does NOT touch the body's color. Mixing in a fixed gray here flipped the
+  // effect's sign depending on the backdrop: over dark the element lightened, over light it
+  // darkened, for the exact same state. Active state is shown instead by the highlight and rim
+  // lighting above: neither cares about the backdrop.
+
+  // THE ICON SITS BENEATH THE SURFACE, it isn't stuck on top of it: it used to be mixed in last,
+  // over the highlight, and read as a flat sticker on volumetric glass. At the rim the normal
+  // displaces it, like everything seen through the glass, while the highlight sits ON TOP \u2014 it
+  // lives on the surface itself.
+  //
+  // There is NO shadow under the icon here. It used to be made from the difference of two offset
+  // mask samples and produced a second outline along the edge \u2014 the icon's borders looked
+  // ragged.
+  // THE INK'S SHIFT IS SET BY ITS OWN DEPTH, NOT BY BEVEL WIDTH. The ink sits right at the
+  // surface, and it's displaced by exactly the thin layer of glass above it \u2014 not by how wide a
+  // bevel this particular piece of glass happens to have. It used to be a fraction of the bevel:
+  // on thin glass the shift came out to 4 dp and everything lined up, but on thick glass it was
+  // 8, and cover art inset from the edge by 6 stretched toward the rim and spilled past its
+  // bounds. The ceiling is absolute: ink has one depth regardless of the glass.
+  float2 inkShift = n * (min(u_bevel * 0.5, VG_INK_DEPTH) * t);
+  float2 inkUv = u_center + p - inkShift;
+
+  // INK LOSES SHARPNESS UNDER THE FINGER (reference \xA76): in the reference, a glyph under
+  // pressure drowns in milk rather than simply getting lighter. This branch is uniform across
+  // the whole element: press arrives as a uniform, so defocus costs nothing while the element
+  // isn't being touched.
+  float defocus = VG_INK_DEFOCUS * u_touchRadius * u_touchPress;
+  float2 inkDx = float2(defocus, 0.0);
+  float2 inkDy = float2(0.0, defocus);
+
+  half4 ink;
+  half4 over;
+  if (defocus > 0.01) {
+    // A cross around the center with double weight in the middle: the ink mask is
+    // high-contrast, and four samples are enough for a stroke to stop holding its edge.
+    ink = (u_icon.eval((inkUv - inkDx) * u_iconScale)
+         + u_icon.eval((inkUv + inkDx) * u_iconScale)
+         + u_icon.eval((inkUv - inkDy) * u_iconScale)
+         + u_icon.eval((inkUv + inkDy) * u_iconScale)
+         + u_icon.eval(inkUv * u_iconScale) * 2.0) * half(u_iconOn / 6.0);
+    // Colored content lives in the same plane as the ink and blurs together with it: different
+    // sharpness for two layers in one plane would read as a defect, not a press.
+    over = (u_overlay.eval((inkUv - inkDx) * u_iconScale)
+          + u_overlay.eval((inkUv + inkDx) * u_iconScale)
+          + u_overlay.eval((inkUv - inkDy) * u_iconScale)
+          + u_overlay.eval((inkUv + inkDy) * u_iconScale)
+          + u_overlay.eval(inkUv * u_iconScale) * 2.0) * half(u_overlayOn * u_appear / 6.0);
+  } else {
+    ink = u_icon.eval(inkUv * u_iconScale) * half(u_iconOn);
+    over = u_overlay.eval(inkUv * u_iconScale) * half(u_overlayOn * u_appear);
+  }
+
+  // The backing under the ink is held by the LENS (body density from the probe), not the
+  // surface: legibility is a property of the material, and computing it here a second time
+  // would give two different answers to one question.
+
+  // Layers are composited premultiplied-over: in straight alpha, a nearly transparent dark body
+  // used to pull the color of semi-transparent ink and the finger's light toward itself \u2014 letter
+  // edges grayed out, pressing darkened things.
+  half3 pm = col * half(a);
+  half inkA = ink.g * half(mix(0.82, 1.0, u_active) * u_appear);
+  half3 inkCol = mix(half3(u_inkIdle.rgb), half3(u_inkActive.rgb), half(u_active));
+  pm = pm * (1.0 - inkA) + inkCol * inkA;
+  a = a + float(inkA) * (1.0 - a);
+
+  // COLORED CONTENT LIVES IN THE SAME PLACE AS THE INK \u2014 inside the material, at the same
+  // coordinate. Otherwise deformation would carry them apart: on press, the title and artist
+  // name would shake together with the surface while the cover art stayed put, because it used
+  // to be a separate layer on top of the glass. Polarity doesn't touch it \u2014 it has its own
+  // color, and there's nothing to swap it for.
+  pm = pm * (1.0 - over.a) + over.rgb * over.a;
+  a = a + float(over.a) * (1.0 - a);
+
+  // Light from the finger is gathered by the LENS: it's a concentration of the surroundings, not
+  // the glass's own whiteness. The surface is left with only what the glass spills outward \u2014 the
+  // halo above.
+
+  float mask = 1.0 - smoothstep(-1.0, 1.0, sd);
+  pm = clamp(pm, half3(0.0), half3(1.0)) * half(mask);
+  a *= mask;
+  pm = max(pm + half3(vgShadowTint(u_ambient)) * half(VG_SHADOW_TINT * shade * (1.0 - a)), half3(0.0));
+  return half4(pm, half(a + shade * (1.0 - a)));
+}
+`;
+
+// src/targets/glsl.ts
+function sizeUniformName(sampler) {
+  return sampler.startsWith("u_") ? `${sampler}Size` : `u_${sampler}Size`;
+}
+function convertVecTypes(src) {
+  return src.replace(/\bfloat([234])\b/g, "vec$1");
+}
+function convertHalfTypes(src) {
+  return src.replace(/\bhalf([234])\b/g, "vec$1").replace(/\bhalf\b/g, "float");
+}
+function convertShaderUniforms(src) {
+  return src.replace(/uniform\s+shader\s+(\w+)\s*;/g, (_match, name) => {
+    return `uniform sampler2D ${name};
+uniform vec2 ${sizeUniformName(name)};`;
+  });
+}
+function convertEvalCalls(src) {
+  const samplers = /* @__PURE__ */ new Set();
+  const declRe = /uniform\s+sampler2D\s+(\w+)\s*;/g;
+  for (let m = declRe.exec(src); m; m = declRe.exec(src)) samplers.add(m[1]);
+  if (samplers.size === 0) return src;
+  const callRe = /(\w+)\.eval\(/g;
+  let out = "";
+  let cursor = 0;
+  for (let m = callRe.exec(src); m; m = callRe.exec(src)) {
+    const name = m[1];
+    if (!samplers.has(name)) continue;
+    const argStart = m.index + m[0].length;
+    let depth = 1;
+    let i = argStart;
+    while (i < src.length && depth > 0) {
+      if (src[i] === "(") depth += 1;
+      else if (src[i] === ")") depth -= 1;
+      i += 1;
+    }
+    const args = src.slice(argStart, i - 1);
+    out += src.slice(cursor, m.index);
+    out += `texture(${name}, (${args}) / ${sizeUniformName(name)})`;
+    cursor = i;
+    callRe.lastIndex = i;
+  }
+  out += src.slice(cursor);
+  return out;
+}
+function convertReturns(mainBody) {
+  return mainBody.replace(/\breturn\s+([^;]+);/g, "fragColor = $1; return;");
+}
+var ENTRY_RE = /half4\s+main\s*\(\s*float2\s+(\w+)\s*\)\s*\{/;
+function convertEntryPoint(src) {
+  const match = ENTRY_RE.exec(src);
+  if (!match) {
+    throw new Error('vireglass/targets/glsl: entry point "half4 main(float2 xy)" not found');
+  }
+  const bodyStart = match.index + match[0].length;
+  let depth = 1;
+  let i = bodyStart;
+  while (i < src.length && depth > 0) {
+    if (src[i] === "{") depth += 1;
+    else if (src[i] === "}") depth -= 1;
+    i += 1;
+  }
+  const bodyEnd = i - 1;
+  const param = match[1];
+  const body = convertReturns(src.slice(bodyStart, bodyEnd));
+  const head = src.slice(0, match.index);
+  const tail = src.slice(i);
+  return `${head}void main() {
+  vec2 ${param} = vec2(gl_FragCoord.x, u_resolution.y - gl_FragCoord.y);
+${body}}${tail}`;
+}
+function addPrologue(src) {
+  return "#version 300 es\nprecision highp float;\n\nout vec4 fragColor;\nuniform vec2 u_resolution;\n\n" + src;
+}
+function toGLSL(shaderSource) {
+  let out = shaderSource;
+  out = convertEntryPoint(out);
+  out = convertShaderUniforms(out);
+  out = convertEvalCalls(out);
+  out = convertVecTypes(out);
+  out = convertHalfTypes(out);
+  out = addPrologue(out);
+  return out;
+}
+
+// src/web/gl.ts
+var FULLSCREEN_TRIANGLE_VERTEX_SOURCE = `#version 300 es
+const vec2 VG_POS[3] = vec2[3](vec2(-1.0, -1.0), vec2(3.0, -1.0), vec2(-1.0, 3.0));
+void main() {
+  gl_Position = vec4(VG_POS[gl_VertexID], 0.0, 1.0);
+}
+`;
+function compileShader(gl, type, source) {
+  const shader = gl.createShader(type);
+  if (!shader) throw new Error("vireglass/web: gl.createShader returned null");
+  gl.shaderSource(shader, source);
+  gl.compileShader(shader);
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    const log = gl.getShaderInfoLog(shader) ?? "(no log)";
+    gl.deleteShader(shader);
+    throw new Error(`vireglass/web: shader failed to compile:
+${log}`);
+  }
+  return shader;
+}
+function createProgram(gl, vertexSource, fragmentSource) {
+  const vertex = compileShader(gl, gl.VERTEX_SHADER, vertexSource);
+  const fragment = compileShader(gl, gl.FRAGMENT_SHADER, fragmentSource);
+  const program = gl.createProgram();
+  if (!program) throw new Error("vireglass/web: gl.createProgram returned null");
+  gl.attachShader(program, vertex);
+  gl.attachShader(program, fragment);
+  gl.linkProgram(program);
+  gl.deleteShader(vertex);
+  gl.deleteShader(fragment);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    const log = gl.getProgramInfoLog(program) ?? "(no log)";
+    gl.deleteProgram(program);
+    throw new Error(`vireglass/web: program failed to link:
+${log}`);
+  }
+  return program;
+}
+function drawFullscreenTriangle(gl) {
+  gl.drawArrays(gl.TRIANGLES, 0, 3);
+}
+function createTexture(gl, options) {
+  const texture = gl.createTexture();
+  if (!texture) throw new Error("vireglass/web: gl.createTexture returned null");
+  const internalFormat = options.internalFormat ?? gl.RGBA8;
+  const format = options.format ?? gl.RGBA;
+  const type = options.type ?? gl.UNSIGNED_BYTE;
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+  gl.texImage2D(
+    gl.TEXTURE_2D,
+    0,
+    internalFormat,
+    options.width,
+    options.height,
+    0,
+    format,
+    type,
+    null
+  );
+  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);
+  gl.bindTexture(gl.TEXTURE_2D, null);
+  return texture;
+}
+function createFramebuffer(gl, texture) {
+  const fbo = gl.createFramebuffer();
+  if (!fbo) throw new Error("vireglass/web: gl.createFramebuffer returned null");
+  gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
+  gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
+  const status = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
+  gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+  if (status !== gl.FRAMEBUFFER_COMPLETE) {
+    throw new Error(`vireglass/web: FBO incomplete, status ${status}`);
+  }
+  return fbo;
+}
+function bindTextureAt(gl, unit, texture, program, uniformName) {
+  gl.activeTexture(gl.TEXTURE0 + unit);
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+  const loc = gl.getUniformLocation(program, uniformName);
+  gl.uniform1i(loc, unit);
+}
+
+// src/web/probe.ts
+var PROBE_GRID_WIDTH = 48;
+var PROBE_GRID_HEIGHT = 96;
+var DOWNSAMPLE_FRAGMENT_SOURCE = `#version 300 es
+precision highp float;
+out vec4 fragColor;
+uniform sampler2D u_content;
+uniform vec2 u_contentSize;
+uniform vec2 u_gridSize;
+
+// Cell \u2192 content UV mapping. Does NOT correspond to the canvas's visible top/bottom \u2014 this is an
+// internal pass, its buffer is never displayed, only read back on the CPU with the same formula
+// (see rectStats below). It doesn't need to match the blit pass's orientation.
+void main() {
+  vec2 uv = gl_FragCoord.xy / u_gridSize;
+  vec3 sum = vec3(0.0);
+  const int N = 5;
+  vec2 block = u_contentSize / u_gridSize;
+  vec2 origin = uv * u_contentSize;
+  for (int y = 0; y < N; y++) {
+    for (int x = 0; x < N; x++) {
+      vec2 p = origin + (vec2(float(x), float(y)) + 0.5) * (block / float(N));
+      sum += texture(u_content, p / u_contentSize).rgb;
+    }
+  }
+  fragColor = vec4(sum / float(N * N), 1.0);
+}
+`;
+function pickDownsampleFormat(gl) {
+  const hasFloat = gl.getExtension("EXT_color_buffer_float") !== null;
+  return hasFloat ? { internalFormat: gl.RGBA32F, type: gl.FLOAT, floatPrecision: true } : { internalFormat: gl.RGBA8, type: gl.UNSIGNED_BYTE, floatPrecision: false };
+}
+function luma(r, g, b) {
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+function rectStats(buffer, floatPrecision, gridW, gridH, contentWidth, contentHeight, rect) {
+  const x0 = rect.centerX - rect.halfWidth;
+  const x1 = rect.centerX + rect.halfWidth;
+  const y0 = rect.centerY - rect.halfHeight;
+  const y1 = rect.centerY + rect.halfHeight;
+  const lumas = [];
+  const nx = [];
+  const ny = [];
+  let sr = 0;
+  let sg = 0;
+  let sb = 0;
+  const norm = floatPrecision ? 1 : 255;
+  for (let row = 0; row < gridH; row++) {
+    const cy = (row + 0.5) / gridH * contentHeight;
+    if (cy < y0 || cy > y1) continue;
+    for (let col = 0; col < gridW; col++) {
+      const cx = (col + 0.5) / gridW * contentWidth;
+      if (cx < x0 || cx > x1) continue;
+      const i = (row * gridW + col) * 4;
+      const r = buffer[i] / norm;
+      const g = buffer[i + 1] / norm;
+      const b = buffer[i + 2] / norm;
+      lumas.push(luma(r, g, b));
+      nx.push((cx - rect.centerX) / Math.max(rect.halfWidth, 1));
+      ny.push((cy - rect.centerY) / Math.max(rect.halfHeight, 1));
+      sr += r;
+      sg += g;
+      sb += b;
+    }
+  }
+  const n = lumas.length;
+  if (n === 0) return null;
+  let mean = 0;
+  for (const v of lumas) mean += v;
+  mean /= n;
+  let busy = 0;
+  for (const v of lumas) busy += Math.abs(v - mean);
+  busy = busy / n * 2;
+  const sorted = [...lumas].sort((a, b) => a - b);
+  const percentile = (p) => {
+    const idx = p * (n - 1);
+    const lo = Math.floor(idx);
+    const hi = Math.ceil(idx);
+    return sorted[lo] + (sorted[hi] - sorted[lo]) * (idx - lo);
+  };
+  const slope = (xs) => {
+    let mx = 0;
+    for (const v of xs) mx += v;
+    mx /= n;
+    let sxx = 0;
+    let sxl = 0;
+    for (let i = 0; i < n; i++) {
+      const dx = xs[i] - mx;
+      sxx += dx * dx;
+      sxl += dx * (lumas[i] - mean);
+    }
+    return sxx > 1e-6 ? sxl / sxx : 0;
+  };
+  return {
+    luma: mean,
+    busy: Math.min(busy, 1),
+    lo: percentile(0.1),
+    hi: percentile(0.9),
+    slopeX: slope(nx),
+    slopeY: slope(ny),
+    r: sr / n,
+    g: sg / n,
+    b: sb / n
+  };
+}
+function createProbe(gl, vertexSource) {
+  const program = createProgram(gl, vertexSource, DOWNSAMPLE_FRAGMENT_SOURCE);
+  const format = pickDownsampleFormat(gl);
+  const texture = gl.createTexture();
+  if (!texture) throw new Error("vireglass/web/probe: gl.createTexture returned null");
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+  gl.texImage2D(
+    gl.TEXTURE_2D,
+    0,
+    format.internalFormat,
+    PROBE_GRID_WIDTH,
+    PROBE_GRID_HEIGHT,
+    0,
+    gl.RGBA,
+    format.type,
+    null
+  );
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+  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);
+  gl.bindTexture(gl.TEXTURE_2D, null);
+  const fbo = createFramebuffer(gl, texture);
+  const byteSize = PROBE_GRID_WIDTH * PROBE_GRID_HEIGHT * 4 * (format.floatPrecision ? 4 : 1);
+  const slots = [0, 1].map(() => {
+    const buffer = gl.createBuffer();
+    if (!buffer) throw new Error("vireglass/web/probe: gl.createBuffer returned null");
+    gl.bindBuffer(gl.PIXEL_PACK_BUFFER, buffer);
+    gl.bufferData(gl.PIXEL_PACK_BUFFER, byteSize, gl.STREAM_READ);
+    gl.bindBuffer(gl.PIXEL_PACK_BUFFER, null);
+    return { buffer, sync: null, pending: false };
+  });
+  let cursor = 0;
+  let latestRaw = null;
+  const contentLoc = gl.getUniformLocation(program, "u_content");
+  const contentSizeLoc = gl.getUniformLocation(program, "u_contentSize");
+  const gridSizeLoc = gl.getUniformLocation(program, "u_gridSize");
+  function pollReady(slot) {
+    if (!slot.pending || !slot.sync) return;
+    const status = gl.clientWaitSync(slot.sync, gl.SYNC_FLUSH_COMMANDS_BIT, 0);
+    if (status === gl.TIMEOUT_EXPIRED || status === gl.WAIT_FAILED) return;
+    gl.deleteSync(slot.sync);
+    slot.sync = null;
+    slot.pending = false;
+    gl.bindBuffer(gl.PIXEL_PACK_BUFFER, slot.buffer);
+    const out = format.floatPrecision ? new Float32Array(PROBE_GRID_WIDTH * PROBE_GRID_HEIGHT * 4) : new Uint8Array(PROBE_GRID_WIDTH * PROBE_GRID_HEIGHT * 4);
+    gl.getBufferSubData(gl.PIXEL_PACK_BUFFER, 0, out);
+    gl.bindBuffer(gl.PIXEL_PACK_BUFFER, null);
+    latestRaw = out;
+  }
+  function sample(contentTexture, contentWidth, contentHeight, rect) {
+    for (const slot2 of slots) pollReady(slot2);
+    gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
+    gl.viewport(0, 0, PROBE_GRID_WIDTH, PROBE_GRID_HEIGHT);
+    gl.useProgram(program);
+    bindTextureAt(gl, 0, contentTexture, program, "u_content");
+    gl.uniform1i(contentLoc, 0);
+    gl.uniform2f(contentSizeLoc, contentWidth, contentHeight);
+    gl.uniform2f(gridSizeLoc, PROBE_GRID_WIDTH, PROBE_GRID_HEIGHT);
+    gl.disable(gl.BLEND);
+    drawFullscreenTriangle(gl);
+    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    const slot = slots[cursor];
+    cursor = (cursor + 1) % slots.length;
+    if (!slot.pending) {
+      gl.bindFramebuffer(gl.READ_FRAMEBUFFER, fbo);
+      gl.bindBuffer(gl.PIXEL_PACK_BUFFER, slot.buffer);
+      gl.readPixels(0, 0, PROBE_GRID_WIDTH, PROBE_GRID_HEIGHT, gl.RGBA, format.type, 0);
+      gl.bindBuffer(gl.PIXEL_PACK_BUFFER, null);
+      gl.bindFramebuffer(gl.READ_FRAMEBUFFER, null);
+      slot.sync = gl.fenceSync(gl.SYNC_GPU_COMMANDS_COMPLETE, 0);
+      slot.pending = true;
+    }
+    return statsFor(contentWidth, contentHeight, rect);
+  }
+  function statsFor(contentWidth, contentHeight, rect) {
+    if (!latestRaw) return null;
+    return rectStats(
+      latestRaw,
+      format.floatPrecision,
+      PROBE_GRID_WIDTH,
+      PROBE_GRID_HEIGHT,
+      contentWidth,
+      contentHeight,
+      rect
+    );
+  }
+  function destroy() {
+    for (const slot of slots) {
+      if (slot.sync) gl.deleteSync(slot.sync);
+      gl.deleteBuffer(slot.buffer);
+    }
+    gl.deleteFramebuffer(fbo);
+    gl.deleteTexture(texture);
+    gl.deleteProgram(program);
+  }
+  return { sample, statsFor, destroy };
+}
+
+// src/web/renderer.ts
+var BLIT_FRAGMENT_SOURCE = `#version 300 es
+precision highp float;
+out vec4 fragColor;
+uniform sampler2D u_content;
+uniform vec2 u_resolution;
+void main() {
+  // The same Y flip the transpiler does for the lens/surface (targets/glsl.ts): content is
+  // uploaded from the 2D canvas WITHOUT flipping, so its V=0 is the scene's top row. This keeps
+  // the same order here, otherwise the backdrop and what the lens refracts through it drift
+  // apart vertically.
+  vec2 uv = gl_FragCoord.xy / u_resolution;
+  uv.y = 1.0 - uv.y;
+  fragColor = texture(u_content, uv);
+}
+`;
+function locationCache(gl, program) {
+  const cache = /* @__PURE__ */ new Map();
+  return (name) => {
+    let loc = cache.get(name);
+    if (loc === void 0) {
+      loc = gl.getUniformLocation(program, name);
+      cache.set(name, loc);
+    }
+    return loc;
+  };
+}
+function setUniform(gl, loc, value) {
+  if (!loc) return;
+  if (typeof value === "number") {
+    gl.uniform1f(loc, value);
+    return;
+  }
+  switch (value.length) {
+    case 1:
+      gl.uniform1f(loc, value[0]);
+      break;
+    case 2:
+      gl.uniform2f(loc, value[0], value[1]);
+      break;
+    case 3:
+      gl.uniform3f(loc, value[0], value[1], value[2]);
+      break;
+    case 4:
+      gl.uniform4f(loc, value[0], value[1], value[2], value[3]);
+      break;
+    default:
+      throw new Error(`vireglass/web: unsupported uniform size (${value.length})`);
+  }
+}
+function applyChannel(gl, get, names, sizes, values) {
+  let cursor = 0;
+  for (let i = 0; i < names.length; i += 1) {
+    const size = sizes[i];
+    setUniform(gl, get(names[i]), values.slice(cursor, cursor + size));
+    cursor += size;
+  }
+}
+function applyObject(gl, get, values) {
+  for (const name of Object.keys(values)) setUniform(gl, get(name), values[name]);
+}
+function createVireGlassRenderer(canvas) {
+  const context = canvas.getContext("webgl2", {
+    preserveDrawingBuffer: true,
+    alpha: false,
+    antialias: false
+  });
+  if (!context) throw new Error("vireglass/web: WebGL2 unavailable");
+  const gl = context;
+  const blitProgram = createProgram(gl, FULLSCREEN_TRIANGLE_VERTEX_SOURCE, BLIT_FRAGMENT_SOURCE);
+  const lensProgram = createProgram(gl, FULLSCREEN_TRIANGLE_VERTEX_SOURCE, toGLSL(LENS_SHADER));
+  const surfaceProgram = createProgram(
+    gl,
+    FULLSCREEN_TRIANGLE_VERTEX_SOURCE,
+    toGLSL(SURFACE_SHADER)
+  );
+  const probe = createProbe(gl, FULLSCREEN_TRIANGLE_VERTEX_SOURCE);
+  const blitLoc = locationCache(gl, blitProgram);
+  const lensLoc = locationCache(gl, lensProgram);
+  const surfaceLoc = locationCache(gl, surfaceProgram);
+  let width = canvas.width;
+  let height = canvas.height;
+  let sceneCanvas = document.createElement("canvas");
+  let sceneCtx = sceneCanvas.getContext("2d");
+  if (!sceneCtx) throw new Error("vireglass/web: scene 2D context unavailable");
+  const settled = /* @__PURE__ */ new Map();
+  const SETTLE = 0.12;
+  function settleStats(index, fresh) {
+    const prev = settled.get(index);
+    if (!prev) {
+      settled.set(index, fresh);
+      return fresh;
+    }
+    const mix = (a, b) => a + (b - a) * SETTLE;
+    const next = {
+      luma: mix(prev.luma, fresh.luma),
+      busy: mix(prev.busy, fresh.busy),
+      lo: mix(prev.lo, fresh.lo),
+      hi: mix(prev.hi, fresh.hi),
+      slopeX: mix(prev.slopeX, fresh.slopeX),
+      slopeY: mix(prev.slopeY, fresh.slopeY),
+      r: mix(prev.r, fresh.r),
+      g: mix(prev.g, fresh.g),
+      b: mix(prev.b, fresh.b)
+    };
+    settled.set(index, next);
+    return next;
+  }
+  let contentTexture = createTexture(gl, {
+    width: Math.max(width, 1),
+    height: Math.max(height, 1)
+  });
+  const iconTexture = createTexture(gl, { width: 1, height: 1 });
+  const colorTexture = createTexture(gl, { width: 1, height: 1 });
+  gl.bindTexture(gl.TEXTURE_2D, iconTexture);
+  gl.texSubImage2D(
+    gl.TEXTURE_2D,
+    0,
+    0,
+    0,
+    1,
+    1,
+    gl.RGBA,
+    gl.UNSIGNED_BYTE,
+    new Uint8Array([0, 0, 0, 0])
+  );
+  gl.bindTexture(gl.TEXTURE_2D, null);
+  function resize(widthPx, heightPx) {
+    width = Math.max(1, Math.round(widthPx));
+    height = Math.max(1, Math.round(heightPx));
+    canvas.width = width;
+    canvas.height = height;
+    gl.viewport(0, 0, width, height);
+    sceneCanvas = document.createElement("canvas");
+    sceneCanvas.width = width;
+    sceneCanvas.height = height;
+    sceneCtx = sceneCanvas.getContext("2d");
+    if (!sceneCtx) throw new Error("vireglass/web: scene 2D context unavailable");
+    gl.deleteTexture(contentTexture);
+    contentTexture = createTexture(gl, { width, height });
+  }
+  function render(options) {
+    if (!sceneCtx) throw new Error("vireglass/web: renderer not initialized (resize was never called)");
+    sceneCtx.clearRect(0, 0, width, height);
+    options.scene(sceneCtx, width, height, options.offsetX ?? 0, options.offsetY ?? 0, options.density);
+    gl.bindTexture(gl.TEXTURE_2D, contentTexture);
+    gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, gl.RGBA, gl.UNSIGNED_BYTE, sceneCanvas);
+    gl.bindTexture(gl.TEXTURE_2D, null);
+    if (options.colorLayer) {
+      gl.bindTexture(gl.TEXTURE_2D, colorTexture);
+      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, options.colorLayer);
+    }
+    if (options.iconMask) {
+      gl.bindTexture(gl.TEXTURE_2D, iconTexture);
+      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, options.iconMask);
+      gl.bindTexture(gl.TEXTURE_2D, null);
+    }
+    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    gl.viewport(0, 0, width, height);
+    gl.disable(gl.BLEND);
+    gl.disable(gl.SCISSOR_TEST);
+    gl.useProgram(blitProgram);
+    bindTextureAt(gl, 0, contentTexture, blitProgram, "u_content");
+    setUniform(gl, blitLoc("u_resolution"), [width, height]);
+    drawFullscreenTriangle(gl);
+    const probes = [];
+    for (let index = 0; index < options.pieces.length; index += 1) {
+      const piece = options.pieces[index];
+      const halfWidth = piece.geometry.width * options.density / 2;
+      const halfHeight = piece.geometry.height * options.density / 2;
+      const rect = {
+        centerX: piece.centerX,
+        centerY: piece.centerY,
+        halfWidth,
+        halfHeight
+      };
+      const fresh = index === 0 ? probe.sample(contentTexture, width, height, rect) : probe.statsFor(width, height, rect);
+      const stats = fresh ? settleStats(index, fresh) : null;
+      probes.push(stats);
+      gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+      gl.viewport(0, 0, width, height);
+      gl.enable(gl.BLEND);
+      gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+      const reachOf = (m) => m ? Math.hypot(m.offsetX, m.offsetY) + Math.max(m.width, m.height) / 2 + m.smoothing : 0;
+      const morphReach = Math.max(reachOf(piece.morph), reachOf(piece.morph2));
+      const touchReach = piece.touch ? Math.hypot(piece.touch.pullX, piece.touch.pullY) + piece.touch.waveAmp * 2 + Math.max(piece.geometry.width, piece.geometry.height) * 0.05 * piece.touch.press : 0;
+      const padPx = (lensPadDp(piece.geometry, piece.optics) + surfacePadDp(piece.geometry, 0) + morphReach + touchReach) * options.density;
+      const left = Math.max(0, Math.floor(piece.centerX - halfWidth - padPx));
+      const right = Math.min(width, Math.ceil(piece.centerX + halfWidth + padPx));
+      const top = Math.max(0, Math.floor(height - (piece.centerY + halfHeight + padPx)));
+      const bottom = Math.min(height, Math.ceil(height - (piece.centerY - halfHeight - padPx)));
+      gl.enable(gl.SCISSOR_TEST);
+      gl.scissor(left, top, Math.max(0, right - left), Math.max(0, bottom - top));
+      gl.useProgram(lensProgram);
+      bindTextureAt(gl, 0, contentTexture, lensProgram, "content");
+      setUniform(gl, lensLoc("u_contentSize"), [width, height]);
+      setUniform(gl, lensLoc("u_resolution"), [width, height]);
+      setUniform(gl, lensLoc("u_center"), [piece.centerX, piece.centerY]);
+      setUniform(gl, lensLoc("u_reach"), Math.max(width, height));
+      setUniform(gl, lensLoc("u_contentMin"), [1, 1]);
+      setUniform(gl, lensLoc("u_contentMax"), [width - 1, height - 1]);
+      if (stats) {
+        setUniform(gl, lensLoc("u_probeLuma"), stats.luma);
+        setUniform(gl, lensLoc("u_probeBusy"), stats.busy);
+        setUniform(gl, lensLoc("u_probeRange"), [stats.lo, stats.hi]);
+        setUniform(gl, lensLoc("u_probeSlope"), [stats.slopeX, stats.slopeY]);
+        setUniform(gl, lensLoc("u_probe"), [stats.r, stats.g, stats.b]);
+      } else {
+        setUniform(gl, lensLoc("u_probeLuma"), -1);
+      }
+      const lens = toLensProps(piece.optics, piece.geometry, options.density, {
+        debug: options.debug,
+        morph: piece.morph,
+        morph2: piece.morph2,
+        touch: piece.touch,
+        progress: piece.progress,
+        light: piece.light,
+        appear: piece.appear,
+        accent: piece.accent
+      });
+      applyChannel(gl, lensLoc, lens.uniformNames, lens.uniformSizes, lens.uniformValues);
+      drawFullscreenTriangle(gl);
+      gl.useProgram(surfaceProgram);
+      const rawSurface = toSurfaceUniforms(piece.optics, piece.geometry, {
+        debug: options.debug,
+        morph: piece.morph,
+        morph2: piece.morph2,
+        bodyInLens: true,
+        touch: piece.touch,
+        progress: piece.progress,
+        // The shadow is denser over text, weaker over a flat backdrop (M 11:47). The rule lives
+        // in the core: while it lived here, Android didn't have it at all.
+        shadow: stats ? shadowOpacity(stats.busy) : 1,
+        // The probe has already computed the ambient color — the shadow gets it for free. Taken
+        // as-is: `settleStats` has already smoothed it, and rounding would bring back exactly the
+        // steps the smoothing was written to remove.
+        ambient: stats ? [stats.r, stats.g, stats.b] : void 0,
+        appear: piece.appear,
+        lift: piece.lift
+      });
+      applyObject(gl, surfaceLoc, {
+        ...toDeviceSurfaceUniforms(rawSurface, options.density),
+        u_center: [piece.centerX, piece.centerY]
+      });
+      setUniform(gl, surfaceLoc(DYNAMIC_UNIFORMS[0]), piece.press ?? 0);
+      setUniform(gl, surfaceLoc(DYNAMIC_UNIFORMS[1]), piece.active ?? 0);
+      const hasIcon = Boolean(piece.icon && options.iconMask);
+      setUniform(gl, surfaceLoc(ICON_UNIFORMS[0]), hasIcon ? 1 : 0);
+      setUniform(gl, surfaceLoc(ICON_UNIFORMS[1]), 1);
+      setUniform(gl, surfaceLoc(ICON_UNIFORMS[2]), piece.inkIdle ?? [1, 1, 1, 1]);
+      setUniform(gl, surfaceLoc(ICON_UNIFORMS[3]), piece.inkActive ?? [1, 1, 1, 1]);
+      bindTextureAt(gl, 1, iconTexture, surfaceProgram, "u_icon");
+      setUniform(gl, surfaceLoc("u_iconSize"), hasIcon ? [width, height] : [1, 1]);
+      const hasColor = Boolean(piece.overlay && options.colorLayer);
+      setUniform(gl, surfaceLoc(OVERLAY_UNIFORMS[0]), hasColor ? 1 : 0);
+      bindTextureAt(gl, 2, colorTexture, surfaceProgram, "u_overlay");
+      setUniform(gl, surfaceLoc("u_overlaySize"), hasColor ? [width, height] : [1, 1]);
+      setUniform(gl, surfaceLoc("u_resolution"), [width, height]);
+      drawFullscreenTriangle(gl);
+    }
+    gl.disable(gl.SCISSOR_TEST);
+    return { probes };
+  }
+  function destroy() {
+    probe.destroy();
+    gl.deleteProgram(blitProgram);
+    gl.deleteProgram(lensProgram);
+    gl.deleteProgram(surfaceProgram);
+    gl.deleteTexture(contentTexture);
+    gl.deleteTexture(iconTexture);
+    gl.deleteTexture(colorTexture);
+  }
+  return { resize, render, destroy };
+}
+var REFERENCE_SCENE_WIDTH = 336;
+var REFERENCE_SCENE_HEIGHT = 252;
+var REFERENCE_SURROUND = "#3c1f4a";
+var refGray = (level) => {
+  const v = Math.round(Math.min(Math.max(level, 0), 1) * 255).toString(16).padStart(2, "0");
+  return `#${v}${v}${v}`;
+};
+var refCheckerCells = (layer, widthDp, heightDp) => {
+  const cells = [];
+  const lo = layer.level - layer.amp;
+  const hi = layer.level + layer.amp;
+  let seed = 1;
+  for (let y = 0; y < heightDp; y += layer.cellDp) {
+    for (let x = 0; x < widthDp; x += layer.cellDp) {
+      seed = seed * 1103515245 + 12345 & 2147483647;
+      cells.push({ xDp: x, yDp: y, level: (seed >> 16) % 2 ? hi : lo });
+    }
+  }
+  return cells;
+};
+var refGradientSteps = (layer) => Array.from(
+  { length: layer.steps },
+  (_, i) => layer.from + (layer.to - layer.from) * i / Math.max(layer.steps - 1, 1)
+);
+
+// src/web/reference-draw.ts
+function drawLayer(ctx, layer, x, y, w, h, d) {
+  switch (layer.kind) {
+    case "flat": {
+      ctx.fillStyle = refGray(layer.level);
+      ctx.fillRect(x, y, w, h);
+      return;
+    }
+    case "stripes": {
+      ctx.fillStyle = refGray(layer.level);
+      ctx.fillRect(x, y, w, h);
+      ctx.fillStyle = refGray(layer.other);
+      for (let at = 0; at < w; at += layer.periodDp * d) {
+        ctx.fillRect(x + at, y, layer.widthDp * d, h);
+      }
+      return;
+    }
+    case "checker": {
+      for (const cell of refCheckerCells(layer, w / d, h / d)) {
+        ctx.fillStyle = refGray(cell.level);
+        ctx.fillRect(x + cell.xDp * d, y + cell.yDp * d, layer.cellDp * d + 1, layer.cellDp * d + 1);
+      }
+      return;
+    }
+    case "step": {
+      ctx.fillStyle = refGray(layer.left);
+      ctx.fillRect(x, y, w / 2, h);
+      ctx.fillStyle = refGray(layer.right);
+      ctx.fillRect(x + w / 2, y, w - w / 2, h);
+      return;
+    }
+    case "bar": {
+      ctx.fillStyle = refGray(layer.level);
+      ctx.fillRect(x, y, w, h);
+      const t = layer.thicknessDp * d;
+      ctx.fillStyle = refGray(layer.barLevel);
+      ctx.fillRect(x, y + Math.round((h - t) / 2), w, t);
+      return;
+    }
+    case "grid": {
+      ctx.fillStyle = refGray(layer.level);
+      ctx.fillRect(x, y, w, h);
+      const thin = 1;
+      const step = layer.stepDp * d;
+      ctx.fillStyle = refGray(layer.lineLevel);
+      for (let at = 0; at <= w; at += step) ctx.fillRect(x + Math.round(at), y, thin, h);
+      for (let at = 0; at <= h; at += step) ctx.fillRect(x, y + Math.round(at), w, thin);
+      return;
+    }
+    case "gradient": {
+      const steps = refGradientSteps(layer);
+      const band = h / steps.length;
+      for (let i = 0; i < steps.length; i += 1) {
+        ctx.fillStyle = refGray(steps[i]);
+        ctx.fillRect(x, y + Math.round(i * band), w, Math.ceil(band) + 1);
+      }
+      return;
+    }
+  }
+}
+function drawReferenceScene(ctx, scene, width, height, options) {
+  const d = options.density;
+  const bands = scene.bands(options.level ?? scene.level);
+  const fill = options.fit !== "band";
+  let x;
+  let y;
+  let w;
+  let scale;
+  if (fill) {
+    x = 0;
+    y = 0;
+    w = width;
+    scale = height / (REFERENCE_SCENE_HEIGHT * d);
+  } else {
+    ctx.fillStyle = REFERENCE_SURROUND;
+    ctx.fillRect(0, 0, width, height);
+    w = Math.round(REFERENCE_SCENE_WIDTH * d);
+    x = Math.round((width - w) / 2);
+    y = Math.round((height - REFERENCE_SCENE_HEIGHT * d) / 2);
+    scale = 1;
+  }
+  for (const band of bands) {
+    const h = Math.round(band.heightDp * d * scale);
+    drawLayer(ctx, band.layer, x, y, w, h, d);
+    y += h;
+  }
+}
+
+exports.PROBE_GRID_HEIGHT = PROBE_GRID_HEIGHT;
+exports.PROBE_GRID_WIDTH = PROBE_GRID_WIDTH;
+exports.createProbe = createProbe;
+exports.createVireGlassRenderer = createVireGlassRenderer;
+exports.drawReferenceScene = drawReferenceScene;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map