vireglass 0.1.0 → 2.0.0

package/dist/{chunk-HF2AWZEZ.js → chunk-IQOBZGCF.js}

@@ -1,51 +1,42 @@
+import { bevelDp, thicknessDp, rimDp, surfacePadDp, shadowReachDp, bevelFraction, halfMinDp } from './chunk-P2ZOODXD.js';
+import { DERIVE, TOUCH, EPSILON, BEVEL, LENS, BODY, MEDIUM, SPECTRAL, DISPERSION, RIM, ACCENT, MORPH } from './chunk-TTOKBARR.js';
+
 // src/optics.ts
 var clamp = (v, lo, hi) => v < lo ? lo : v > hi ? hi : v;
 var clamp01 = (v) => clamp(v, 0, 1);
 var fresnelF0 = (ior) => ((ior - 1) / (ior + 1)) ** 2;
-var FRESNEL_GAIN = 17.5;
-var fresnelStrength = (ior) => clamp01(fresnelF0(ior) * FRESNEL_GAIN);
-var FRESNEL_EXPONENT = 5;
-var refractionStrength = (ior) => clamp01((ior - 1) / 0.6);
-var MAGNIFY_PER_DP = 6e-3;
-var refractionScale = (ior, thicknessDp2) => 1 + MAGNIFY_PER_DP * thicknessDp2 * (1 - 1 / Math.max(ior, 1));
-var DISPERSION_PER_IOR = 1.1;
-var dispersion = (ior) => clamp01((ior - 1) * DISPERSION_PER_IOR);
-var IOR_SPREAD_PER_DISPERSION = 0.045;
-var iorSpread = (ior) => dispersion(ior) * IOR_SPREAD_PER_DISPERSION;
-var absorption = (pathDp) => 1 - Math.exp(-0.017 * Math.max(pathDp, 0));
+var fresnelStrength = (ior) => clamp01(fresnelF0(ior) * DERIVE.fresnelGain);
+var FRESNEL_EXPONENT = DERIVE.fresnelExponent;
+var refractionStrength = (ior) => clamp01((ior - 1) / DERIVE.iorFullBend);
+var refractionScale = (ior, thicknessDp2) => 1 + DERIVE.magnifyPerDp * thicknessDp2 * (1 - 1 / Math.max(ior, 1));
+var dispersion = (ior) => clamp01((ior - 1) * DERIVE.dispersionPerIor);
+var iorSpread = (ior) => dispersion(ior) * DERIVE.iorSpreadPerDispersion;
+var absorption = (pathDp) => 1 - Math.exp(-DERIVE.absorbPerDp * Math.max(pathDp, 0));
 var edgeDensity = (thicknessDp2, bevelDp2) => {
   const body = absorption(thicknessDp2);
   if (body <= 0) return 1;
-  return clamp(absorption(thicknessDp2 + bevelDp2) / body, 1, 4);
+  return clamp(absorption(thicknessDp2 + bevelDp2) / body, 1, DERIVE.edgeDensityMax);
 };
-var BLUR_MAX = 12;
-var blur = (roughness) => clamp01(roughness) * BLUR_MAX;
-var specularPower = (roughness) => 160 - clamp01(roughness) * 152;
-var specularStrength = (ior, roughness) => clamp01(fresnelStrength(ior) * (1 - clamp01(roughness) * 0.6));
-var COOL = { r: 0.86, g: 1, b: 1.08 };
-var NEUTRAL = { r: 1, g: 1.02, b: 0.99 };
-var WARM = { r: 1.08, g: 1, b: 0.88 };
-var mixHue = (a, b, t) => ({
-  r: a.r + (b.r - a.r) * t,
-  g: a.g + (b.g - a.g) * t,
-  b: a.b + (b.b - a.b) * t
-});
+var blur = (roughness) => clamp01(roughness) * DERIVE.blurMaxDp;
+var specularPower = (roughness) => DERIVE.specularPowerSmooth - clamp01(roughness) * (DERIVE.specularPowerSmooth - DERIVE.specularPowerRough);
+var specularStrength = (ior, roughness) => clamp01(fresnelStrength(ior) * (1 - clamp01(roughness) * DERIVE.specularRoughDamping));
+var mixHue = (a, b, t) => [
+  a[0] + (b[0] - a[0]) * t,
+  a[1] + (b[1] - a[1]) * t,
+  a[2] + (b[2] - a[2]) * t
+];
 function mediumTint(ior) {
-  const t = clamp01((ior - 1.2) / 0.55);
-  const hue = t < 0.5 ? mixHue(COOL, NEUTRAL, t * 2) : mixHue(NEUTRAL, WARM, (t - 0.5) * 2);
-  const lift = 0.34 + fresnelF0(ior) * 2.4;
-  return { r: clamp01(hue.r * lift), g: clamp01(hue.g * lift), b: clamp01(hue.b * lift) };
+  const t = clamp01((ior - DERIVE.hueFromIor) / DERIVE.hueSpan);
+  const hue = t < 0.5 ? mixHue(DERIVE.hueCool, DERIVE.hueNeutral, t * 2) : mixHue(DERIVE.hueNeutral, DERIVE.hueWarm, (t - 0.5) * 2);
+  const lift = DERIVE.bodyLiftBase + fresnelF0(ior) * DERIVE.bodyLiftPerF0;
+  return { r: clamp01(hue[0] * lift), g: clamp01(hue[1] * lift), b: clamp01(hue[2] * lift) };
 }
-var GATHER_PER_BEVEL = 4;
-var GATHER_MAX = 28;
-var gatherRadius = (bevelDp2) => clamp(Math.max(bevelDp2, 1) * GATHER_PER_BEVEL, 4, GATHER_MAX);
-var BODY_DENSITY = 0.05;
-var bodyDensity = (thicknessDp2) => BODY_DENSITY * absorption(thicknessDp2);
-var EDGE_LIGHT_GAIN = 6;
-var edgeLight = (ior) => clamp01(fresnelF0(ior) * EDGE_LIGHT_GAIN);
-var iridescence = (ior, filmNm) => filmNm <= 0 ? 0 : clamp01(fresnelStrength(ior) * 1.6);
-var diffraction = (ior) => clamp01(dispersion(ior) * 0.5);
-var colorPickup = (ior) => clamp(fresnelStrength(ior) * 0.9, 0, 0.42);
+var gatherRadius = (bevelDp2) => clamp(Math.max(bevelDp2, 1) * DERIVE.gatherPerBevel, DERIVE.gatherMinDp, DERIVE.gatherMaxDp);
+var bodyDensity = (thicknessDp2) => DERIVE.bodyDensity * absorption(thicknessDp2);
+var edgeLight = (ior) => clamp01(fresnelF0(ior) * DERIVE.edgeLightGain);
+var iridescence = (ior, filmNm) => filmNm <= 0 ? 0 : clamp01(fresnelStrength(ior) * DERIVE.iridescencePerFresnel);
+var diffraction = (ior) => clamp01(dispersion(ior) * DERIVE.diffractionPerDispersion);
+var colorPickup = (ior) => clamp(fresnelStrength(ior) * DERIVE.colorPickupPerFresnel, 0, DERIVE.colorPickupMax);
 
 // src/material.ts
 var MATERIAL_RANGES = {
@@ -335,59 +326,8 @@ function debugIndex(mode) {
   return DEBUG_MODES.indexOf(mode);
 }
 
-// src/geometry.ts
-var circleGeometry = (size) => ({
-  width: size,
-  height: size,
-  cornerRadius: size / 2
-});
-var capsuleGeometry = (width, height) => ({
-  width,
-  height,
-  cornerRadius: Math.min(width, height) / 2
-});
-var roundedRectGeometry = (width, height, cornerRadius) => ({ width, height, cornerRadius });
-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;
-var SHADOW_STEP = 0.05;
-function shadowOpacity(busy) {
-  return SHADOW_FLAT + Math.min(Math.max(busy, 0) * SHADOW_BUSY_GAIN, SHADOW_BUSY_RISE);
-}
-function shadowOpacityFrom(sample) {
-  return Math.round(shadowOpacity(sample.busy) / SHADOW_STEP) * SHADOW_STEP;
-}
-
 // src/sdf.ts
+var VG_TAU = 6.28318530718;
 var VG_SDF = `
 float vgRoundRect(float2 p, float2 halfSize, float corner) {
   float2 q = abs(p) - halfSize + corner;
@@ -424,7 +364,7 @@ float2 vgTouchWarp(float2 p, float2 touch, float2 pull, float press, float radiu
                    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;
+  p /= 1.0 + ${TOUCH.pressGrow} * press;
   float2 d = p - touch;
   float r = length(d);
 
@@ -442,16 +382,16 @@ float2 vgTouchWarp(float2 p, float2 touch, float2 pull, float press, float radiu
   // 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);
+  float2 q = p - pull * (core - ${TOUCH.ridge} * rim);
+  q -= d * (press * ${TOUCH.pressPull} * 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));
+    float span = radius * ${TOUCH.waveSpan}.0;
+    float ring = sin(r / (span * ${TOUCH.waveLength}) - wavePhase * ${VG_TAU}) * exp(-r / (span * ${TOUCH.waveDecay}));
     q -= (d / r) * ring * waveAmp;
   }
   return q;
@@ -485,14 +425,14 @@ float2 vgSceneNormal(float2 p, float2 halfSize, float corner,
   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));
+  float2 nab = normalize(mix(vgRoundRectNormal(q, halfB, cornerB), na, h) + float2(${EPSILON}, ${EPSILON}));
   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));
+  return normalize(mix(vgRoundRectNormal(qc, halfC, cornerC), nab, hc) + float2(${EPSILON}, ${EPSILON}));
 }
 
 // Position within the bevel: 0 is the flat middle, 1 is the very edge. This one value feeds the
@@ -509,7 +449,7 @@ float vgBevelT(float sd, float bevel) {
 // 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);
+  return min(t * inversesqrt(max(1.0 - t * t * ${BEVEL.sphere}, ${BEVEL.floor})), ${BEVEL.slopeMax});
 }
 
 // PROGRESS FRACTION. Progress is an active state turned into a FIELD: to the left of the boundary
@@ -528,6 +468,97 @@ float vgProgress(float2 p, float2 halfSize, float progress) {
 }
 `;
 var VG_FALLOFF = 2.6;
+function sdfRoundedRect(x, y, w, h, r) {
+  const qx = Math.abs(x) - w / 2 + r;
+  const qy = Math.abs(y) - h / 2 + r;
+  return Math.min(Math.max(qx, qy), 0) + Math.hypot(Math.max(qx, 0), Math.max(qy, 0)) - r;
+}
+function sdfRoundedRectGradient(x, y, w, h, r) {
+  const qx = Math.abs(x) - w / 2 + r;
+  const qy = Math.abs(y) - h / 2 + r;
+  let gx;
+  let gy;
+  if (qx > 0 && qy > 0) {
+    const cx = Math.max(qx, 1e-4);
+    const cy = Math.max(qy, 1e-4);
+    const len = Math.hypot(cx, cy);
+    gx = cx / len;
+    gy = cy / len;
+  } else if (qx > qy) {
+    gx = 1;
+    gy = 0;
+  } else {
+    gx = 0;
+    gy = 1;
+  }
+  return [gx * Math.sign(x), gy * Math.sign(y)];
+}
+function smin(a, b, k) {
+  const h = Math.min(Math.max(0.5 + 0.5 * (b - a) / k, 0), 1);
+  return b + (a - b) * h - k * h * (1 - h);
+}
+function neckToBridge(gap) {
+  return gap > 0 ? gap * 2 : 0;
+}
+function sceneDistance(x, y, w, h, r, smoothing = 0, b, c) {
+  const a = sdfRoundedRect(x, y, w, h, r);
+  if (smoothing <= 0 || !b || b.width <= 0) return a;
+  const db = sdfRoundedRect(x - b.offsetX, y - b.offsetY, b.width, b.height, b.cornerRadius);
+  const ab = smin(a, db, smoothing);
+  if (!c || c.width <= 0) return ab;
+  const dc = sdfRoundedRect(x - c.offsetX, y - c.offsetY, c.width, c.height, c.cornerRadius);
+  return smin(ab, dc, smoothing);
+}
+function sceneGradient(x, y, w, h, r, smoothing = 0, b, c) {
+  const na = sdfRoundedRectGradient(x, y, w, h, r);
+  if (smoothing <= 0 || !b || b.width <= 0) return na;
+  const bx = x - b.offsetX;
+  const by = y - b.offsetY;
+  const da = sdfRoundedRect(x, y, w, h, r);
+  const db = sdfRoundedRect(bx, by, b.width, b.height, b.cornerRadius);
+  const hb = Math.min(Math.max(0.5 + 0.5 * (db - da) / smoothing, 0), 1);
+  const nb = sdfRoundedRectGradient(bx, by, b.width, b.height, b.cornerRadius);
+  let gx = nb[0] + (na[0] - nb[0]) * hb;
+  let gy = nb[1] + (na[1] - nb[1]) * hb;
+  if (c && c.width > 0) {
+    const cx = x - c.offsetX;
+    const cy = y - c.offsetY;
+    const dab = smin(da, db, smoothing);
+    const dc = sdfRoundedRect(cx, cy, c.width, c.height, c.cornerRadius);
+    const hc = Math.min(Math.max(0.5 + 0.5 * (dc - dab) / smoothing, 0), 1);
+    const nc = sdfRoundedRectGradient(cx, cy, c.width, c.height, c.cornerRadius);
+    gx = nc[0] + (gx - nc[0]) * hc;
+    gy = nc[1] + (gy - nc[1]) * hc;
+  }
+  gx += EPSILON;
+  gy += EPSILON;
+  const len = Math.hypot(gx, gy) || 1;
+  return [gx / len, gy / len];
+}
+function touchWarp(x, y, t) {
+  if (t.radius <= 0) return [x, y];
+  const grow = 1 + TOUCH.pressGrow * t.press;
+  let px = x / grow;
+  let py = y / grow;
+  const dx = px - t.x;
+  const dy = py - t.y;
+  const r = Math.hypot(dx, dy);
+  const k = Math.min(Math.max((t.radius - r) / t.radius, 0), 1);
+  const s = k * k * (3 - 2 * k);
+  const core = s * s * (3 - 2 * s);
+  const rim = k * k * (1 - k) * 4;
+  px -= t.pullX * (core - TOUCH.ridge * rim);
+  py -= t.pullY * (core - TOUCH.ridge * rim);
+  px -= dx * (t.press * TOUCH.pressPull * core);
+  py -= dy * (t.press * TOUCH.pressPull * core);
+  if (t.waveAmp > 0 && r > 1e-4) {
+    const span = t.radius * TOUCH.waveSpan;
+    const ring = Math.sin(r / (span * TOUCH.waveLength) - t.wavePhase * VG_TAU) * Math.exp(-r / (span * TOUCH.waveDecay));
+    px -= dx / r * ring * t.waveAmp;
+    py -= dy / r * ring * t.waveAmp;
+  }
+  return [px, py];
+}
 
 // src/lens-shader.ts
 var LENS_SHADER = `
@@ -603,51 +634,51 @@ const int   VG_FROST_TAPS = 20;
 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_FOOTPRINT_MAX = ${LENS.footprintMax};
 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;
+const float VG_BODY_CAP_LOOSE = ${BODY.capLoose};
+const float VG_BODY_CAP_TIGHT = ${BODY.capTight};
 // 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;
+const float VG_TINT_DARK = ${BODY.tintDark};
+const float VG_TINT_LIGHT = ${BODY.tintLight};
 // Reference channel wavelengths, nm \u2014 for diffraction and interference.
-const float3 VG_LAMBDA = float3(610.0, 550.0, 460.0);
+const float3 VG_LAMBDA = float3(${LENS.lambdaR}.0, ${LENS.lambdaG}.0, ${LENS.lambdaB}.0);
 // Film index of refraction: every thin film on glass sits around this value.
-const float VG_FILM_IOR = 1.35;
+const float VG_FILM_IOR = ${LENS.filmIor};
 // Ceiling on the profile's slope right at the silhouette: it goes to infinity there.
-const float VG_SLOPE_MAX = 40.0;
+const float VG_SLOPE_MAX = ${LENS.slopeMax}.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;
+const float VG_SCATTER_MAX = ${MEDIUM.scatterMax};
+const float VG_SCATTER_BASE = ${MEDIUM.scatterBase};
 // 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;
+const float VG_STRUCTURE_GAIN = ${MEDIUM.structureGain}.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;
+const float VG_GROUND_SPAN = ${BODY.groundSpan};
 // 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;
+const float VG_MATTE_LIFT = ${MEDIUM.matteLift};
 // 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;
+const float VG_BUSY_EDGE = ${BODY.busyEdge};
 // Light concentration: the body is a touch lighter than what's beneath it (M 2:29).
-const float VG_CONCENTRATE = 0.01;
+const float VG_CONCENTRATE = ${MEDIUM.concentrate};
 // 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;
+const float VG_MEDIUM_LUMA = ${MEDIUM.luma};
+const float VG_MEDIUM_PULL = ${MEDIUM.pull};
 // How much ambient light reaches the body on top of the pull.
-const float VG_AMBIENT_SPILL = 0.01;
+const float VG_AMBIENT_SPILL = ${MEDIUM.ambientSpill};
 
 float vgLuma(float3 c) { return dot(c, float3(0.2126, 0.7152, 0.0722)); }
 
@@ -712,8 +743,8 @@ float3 vgInterference(float cosI) {
 
 // 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));
+  float phase = VG_TAU * ${SPECTRAL.diffractionFringes}.0 * distFromEdge / max(bevel, 1.0);
+  float3 d = 0.5 + 0.5 * cos(phase * (${SPECTRAL.referenceLambda}.0 / VG_LAMBDA));
   return d / max((d.r + d.g + d.b) / 3.0, 0.001);
 }
 
@@ -800,8 +831,8 @@ half4 main(float2 xy) {
   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;
+  float2 dR = vgShift(N, z, u_ior + ${DISPERSION.redShift} * u_iorSpread) * lens - shift;
+  float2 dB = vgShift(N, z, u_ior + ${DISPERSION.blueShift} * u_iorSpread) * lens - shift;
   float chroma = length(dB - dR);
 
   float3 rgb;
@@ -892,9 +923,9 @@ half4 main(float2 xy) {
   // 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 key = u_specular * (pow(max(facing, 0.0), ${RIM.lobeExponent}.0) + ${RIM.opposingArc} * pow(max(-facing, 0.0), ${RIM.lobeExponent}.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));
+  float rimKey = u_specular * (pow(max(rimFacing, 0.0), ${RIM.lobeExponent}.0) + ${RIM.opposingArc} * pow(max(-rimFacing, 0.0), ${RIM.lobeExponent}.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);
@@ -906,7 +937,7 @@ half4 main(float2 xy) {
     spectral *= mix(float3(1.0), vgInterference(cosT), u_iridescence);
   }
   if (u_diffraction > 0.001) {
-    float w = u_diffraction * smoothstep(0.45, 1.0, t);
+    float w = u_diffraction * smoothstep(${SPECTRAL.diffractionOnset}, 1.0, t);
     spectral *= mix(float3(1.0), vgDiffraction(e, bevel), w);
   }
 
@@ -976,7 +1007,7 @@ half4 main(float2 xy) {
   // 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 darkSide = smoothstep(${BODY.darkSideFrom}, ${BODY.darkSideTo}, mean);
   float away = mix(VG_TINT_LIGHT, VG_TINT_DARK, darkSide);
   float tintLuma = mix(away, mix(VG_TINT_LIGHT, VG_TINT_DARK, pol), demand);
 
@@ -988,16 +1019,38 @@ half4 main(float2 xy) {
   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)
+    ? clamp((inkHi - capLight) / max(inkHi - VG_TINT_DARK, 1e-4), 0.0, ${BODY.maxDemand})
     : 0.0;
   float needForDark = inkLo < floorDark
-    ? clamp((floorDark - inkLo) / max(VG_TINT_LIGHT - inkLo, 1e-4), 0.0, 0.92)
+    ? clamp((floorDark - inkLo) / max(VG_TINT_LIGHT - inkLo, 1e-4), 0.0, ${BODY.maxDemand})
     : 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);
 
+  // PRESENCE (\xA73). Over a uniform backdrop there is nothing to refract, and an element that is
+  // only a rim honestly disappears \u2014 right for a piece of background, wrong for a control.
+  //
+  // This used to live on the rim line alone, as lit = max(rimKey, u_presence x 2), while the
+  // DOM path has always implemented it as a floor on the BODY. Two renderers, one field, two
+  // meanings. Measured on Apple's own control over a flat page (frames/verify/m-707), the body
+  // carries 16 levels of separation there and the rim 11.6 \u2014 so the body is where it belongs,
+  // and the rim's reading was the wrong one.
+  // The separation asked for is capped by the range that is left: over a backdrop at 0.96 there
+  // is no room to go 0.05 lighter. And what it is DIVIDED by is the distance to the tint's own
+  // end, not to the tint the body currently sits at \u2014 dividing by the latter explodes wherever
+  // the two are close, which is how the first version of this drove density to its ceiling at
+  // both extremes and took the window down to 7%.
+  bool lighter = local < 0.5;
+  float target = lighter ? min(local + u_presence, 1.0) : max(local - u_presence, 0.0);
+  float separation = abs(target - local);
+  float reached = abs(tintLuma - local) * density;
+  if (u_presence > 0.0 && reached < separation) {
+    float toEnd = abs((lighter ? VG_TINT_LIGHT : VG_TINT_DARK) - local);
+    density = max(density, min(separation / max(toEnd, 1e-4), ${BODY.maxDemand}));
+  }
+
   // 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
@@ -1009,7 +1062,7 @@ half4 main(float2 xy) {
   // 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 tone = u_accent.rgb * mix(${ACCENT.deep}, ${ACCENT.light}, 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);
   }
@@ -1045,7 +1098,7 @@ half4 main(float2 xy) {
   // 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 *= 1.0 - ${RIM.darkEdge} * 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; }
@@ -1066,395 +1119,6 @@ half4 main(float2 xy) {
 }
 `;
 
-// 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/reference-scene.ts
-var REFERENCE_SHAPES = {
-  circle: circleGeometry(120),
-  capsule: capsuleGeometry(300, 110),
-  tile: roundedRectGeometry(220, 120, 32)
-};
-var REFERENCE_SCENE_WIDTH = 336;
-var REFERENCE_SCENE_HEIGHT = 252;
-var REFERENCE_SURROUND = "#3c1f4a";
-var REFERENCE_PIECE_AT = {
-  xDp: REFERENCE_SCENE_WIDTH / 2,
-  yDp: REFERENCE_SCENE_HEIGHT / 2
-};
-var whole = (layer) => [
-  { heightDp: REFERENCE_SCENE_HEIGHT, layer }
-];
-var stripeLevel = (level) => level < 0.5 ? level + 0.22 : level - 0.22;
-var REFERENCE_SCENES = [
-  {
-    name: "flat",
-    what: "the body standing off the backdrop: the element must be visible over a flat canvas",
-    level: 0.5,
-    bands: (level) => whole({ kind: "flat", level })
-  },
-  {
-    name: "stripes",
-    what: "the window: the brightness range inside the element is a noticeable fraction of the range outside it",
-    level: 0.5,
-    bands: (level) => whole({ kind: "stripes", level, other: stripeLevel(level), periodDp: 24, widthDp: 10 })
-  },
-  {
-    name: "busy",
-    what: "ink against content: both the ink and whatever is under the glass have to live over a busy cover",
-    level: 0.5,
-    bands: (level) => whole({ kind: "checker", level, amp: 0.28, cellDp: 16 })
-  },
-  {
-    name: "bar",
-    what: "the rim gathers content: at the silhouette the lens bulges out whatever sits behind it",
-    level: 0.93,
-    bands: (level) => whole({ kind: "bar", level, barLevel: 0.12, thicknessDp: 20 })
-  },
-  {
-    name: "steps",
-    what: "the body profile at five levels at once \u2014 platforms are compared against it",
-    level: 0.5,
-    bands: () => [
-      { heightDp: 36, layer: { kind: "flat", level: 0.1 } },
-      { heightDp: 36, layer: { kind: "flat", level: 0.3 } },
-      { heightDp: 36, layer: { kind: "flat", level: 0.5 } },
-      { heightDp: 36, layer: { kind: "flat", level: 0.69 } },
-      { heightDp: 36, layer: { kind: "flat", level: 0.9 } },
-      { heightDp: 36, layer: { kind: "step", left: 0.05, right: 0.28 } },
-      { heightDp: 36, layer: { kind: "bar", level: 0.92, barLevel: 0.12, thicknessDp: 6 } }
-    ]
-  },
-  {
-    name: "edge",
-    what: "tint at a hard break: one half under the glass is black, the other white",
-    level: 0.5,
-    bands: () => whole({ kind: "step", left: 0.03, right: 0.95 })
-  },
-  {
-    name: "gradient",
-    what: "ink polarity: where the automatic switch flips the ink from light to dark",
-    level: 0.5,
-    bands: () => whole({ kind: "gradient", from: 0.04, to: 0.96, steps: 28 })
-  },
-  {
-    name: "grid",
-    what: "lens distortion: drift, tearing and jitter of a straight line show up immediately (by eye, not by number)",
-    level: 0.91,
-    measurable: false,
-    bands: (level) => whole({ kind: "grid", level, lineLevel: level > 0.5 ? level - 0.14 : level + 0.14, stepDp: 12 })
-  }
-];
-var referenceScene = (name) => {
-  const scene = REFERENCE_SCENES.find((s) => s.name === name);
-  if (!scene) throw new Error(`vireglass: no reference canvas "${name}"`);
-  return scene;
-};
-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/adapters.ts
 var NO_TOUCH = {
   x: 0,
@@ -1468,7 +1132,7 @@ var NO_TOUCH = {
 };
 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 ACCENT_AMOUNT = ACCENT.amount;
 var NO_ACCENT = [0, 0, 0, 0];
 var lensMagnify = (o) => 1 + (o.refractionScale - 1) * o.refraction;
 var shapes = /* @__PURE__ */ new Map();
@@ -1638,7 +1302,13 @@ 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"];
-var MORPH_NECK = 0.35;
+function neckFor(half, aw, ah, bw, bh, offsetX, offsetY) {
+  const gx = Math.abs(offsetX) - (aw + bw) / 2;
+  const gy = Math.abs(offsetY) - (ah + bh) / 2;
+  const gap = Math.hypot(Math.max(gx, 0), Math.max(gy, 0));
+  const widest = Math.min(aw, ah, bw, bh);
+  return Math.min(Math.max(half * MORPH.neck, neckToBridge(gap) * MORPH.fuse), widest);
+}
 function morphBetween(a, b, offsetX, offsetY, t) {
   if (t <= 0) return void 0;
   const half = Math.min(halfMinDp(a), halfMinDp(b));
@@ -1648,94 +1318,28 @@ function morphBetween(a, b, offsetX, offsetY, t) {
     width: b.width,
     height: b.height,
     cornerRadius: b.cornerRadius,
-    smoothing: half * MORPH_NECK * Math.min(t, 1)
+    smoothing: neckFor(half, a.width, a.height, b.width, b.height, offsetX, offsetY) * Math.min(t, 1)
   };
 }
-
-// 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;
+function morphOutOf(source, target, offsetX, offsetY, t) {
+  if (t <= 0) return void 0;
+  const k = Math.min(t, 1);
+  const width = source.width + (target.width - source.width) * k;
+  const height = source.height + (target.height - source.height) * k;
+  const cornerRadius = source.cornerRadius + (target.cornerRadius - source.cornerRadius) * k;
+  const half = Math.min(halfMinDp(source), Math.min(width, height) / 2);
+  return {
+    offsetX: offsetX * k,
+    offsetY: offsetY * k,
+    width,
+    height,
+    cornerRadius,
+    // The lobe travels as it grows, so the span changes every frame and the neck is measured
+    // against where the lobe actually is, not against where it will end up.
+    smoothing: neckFor(half, source.width, source.height, width, height, offsetX * k, offsetY * k)
+  };
 }
 
-export { ACCENT_AMOUNT, ADAPT_RADIUS, ALL_EFFECTS_ON, DEBUG_MODES, DYNAMIC_UNIFORMS, EFFECTS, FRESNEL_EXPONENT, ICON_UNIFORMS, LEGACY_NAMES, LEGACY_OPTICS, LENS_SHADER, MATERIAL_PRESETS, MATERIAL_RANGES, MAX_BEVEL_FRACTION, MAX_STRETCH, OVERLAY_UNIFORMS, PRESET_NAMES, PRODUCT_DIM, REFERENCE_PIECE_AT, REFERENCE_SCENES, REFERENCE_SCENE_HEIGHT, REFERENCE_SCENE_WIDTH, REFERENCE_SHAPES, REFERENCE_SURROUND, REST_LIGHT, RIM_FRACTION, SURFACE_LENGTH_UNIFORMS, SURFACE_SHADER, VG_FALLOFF, VG_SDF, VIREGLASS_CLEAR_MATERIAL, VIREGLASS_CONTROL_MATERIAL, VIREGLASS_LYRICS_MATERIAL, VIREGLASS_MATERIAL, VIREGLASS_MATERIAL_V4, VIREGLASS_MATERIAL_V5, VIREGLASS_SHEET_MATERIAL, absorption, activeMaterial, addPrologue, applyToggles, bevelDp, bevelFraction, blur, bodyDensity, capsuleGeometry, circleGeometry, colorPickup, convertEntryPoint, convertEvalCalls, convertHalfTypes, convertReturns, convertShaderUniforms, convertVecTypes, debugIndex, diffraction, dispersion, edgeDensity, edgeLight, fresnelF0, fresnelStrength, gatherRadius, halfMinDp, iorSpread, iridescence, lensMagnify, lensPadDp, materialForInk, mediumTint, morphBetween, morphReachDp, refCheckerCells, refGradientSteps, refGray, referenceScene, refractionScale, refractionStrength, resolveMaterial, resolveOptics, rimDp, roundedRectGeometry, shadowOpacity, shadowOpacityFrom, shadowReachDp, sizeGain, specularPower, specularStrength, surfacePadDp, thicknessDp, toDeviceSurfaceUniforms, toGLSL, toLensProps, toSurfaceUniforms };
-//# sourceMappingURL=chunk-HF2AWZEZ.js.map
-//# sourceMappingURL=chunk-HF2AWZEZ.js.map
+export { ACCENT_AMOUNT, ADAPT_RADIUS, ALL_EFFECTS_ON, DEBUG_MODES, DYNAMIC_UNIFORMS, EFFECTS, FRESNEL_EXPONENT, ICON_UNIFORMS, LEGACY_NAMES, LEGACY_OPTICS, LENS_SHADER, MATERIAL_PRESETS, MATERIAL_RANGES, OVERLAY_UNIFORMS, PRESET_NAMES, PRODUCT_DIM, REST_LIGHT, SURFACE_LENGTH_UNIFORMS, VG_FALLOFF, VG_SDF, VIREGLASS_CLEAR_MATERIAL, VIREGLASS_CONTROL_MATERIAL, VIREGLASS_LYRICS_MATERIAL, VIREGLASS_MATERIAL, VIREGLASS_MATERIAL_V4, VIREGLASS_MATERIAL_V5, VIREGLASS_SHEET_MATERIAL, absorption, activeMaterial, applyToggles, blur, bodyDensity, colorPickup, debugIndex, diffraction, dispersion, edgeDensity, edgeLight, fresnelF0, fresnelStrength, gatherRadius, iorSpread, iridescence, lensMagnify, materialForInk, mediumTint, morphBetween, morphOutOf, neckToBridge, refractionScale, refractionStrength, resolveMaterial, resolveOptics, sceneDistance, sceneGradient, sdfRoundedRect, sdfRoundedRectGradient, smin, specularPower, specularStrength, toDeviceSurfaceUniforms, toLensProps, toSurfaceUniforms, touchWarp };
+//# sourceMappingURL=chunk-IQOBZGCF.js.map
+//# sourceMappingURL=chunk-IQOBZGCF.js.map