vireglass 0.1.0 → 2.0.0

package/dist/dom.cjs

@@ -0,0 +1,2055 @@
+'use strict';
+
+// src/adaptation.ts
+var AMBIENT_STEP = 32;
+function ambientFrom(sample) {
+  const step = (v) => Math.round(Math.min(Math.max(v, 0), 1) * AMBIENT_STEP) / AMBIENT_STEP;
+  return [step(sample.r), step(sample.g), step(sample.b)];
+}
+var INK_LIGHT = 0.95;
+var INK_DARK = 0.08;
+function shouldInkBeLight(sample, wasLight) {
+  return decisiveLuma(sample) < (wasLight ? FLIP_LUMA : RETURN_LUMA);
+}
+var decisiveLuma = (sample) => sample.luma * 0.75 + (sample.hi ?? sample.luma) * 0.25;
+var FLIP_LUMA = 0.62;
+var RETURN_LUMA = 0.5;
+var CONFIRMATIONS = 3;
+
+// src/law.ts
+var RIM = {
+  /**
+   * The key-light lobe's exponent. Two opposing arcs come out of one expression, which is why
+   * they are opposed rather than placed: `pow(max(facing, 0), n) + 0.45 * pow(max(-facing, 0), n)`.
+   *
+   * MEASURED off two close-ups of real end caps, frames/crops/cap158-left and cap158-right. The
+   * bright arc's full width at half its peak is 53 degrees in the first and 30 in the second; this
+   * exponent's own width is `2·acos(0.5^(1/n))`, so they imply 6 and 20. It was 3, whose arc is 75
+   * degrees wide — broader than either measurement, and the error is in the same direction in both.
+   *
+   * 6 is the conservative end: it reproduces the wider crop exactly, and a broader arc is the more
+   * forgiving error. One exponent cannot serve both, and that is not noise — a specular lobe's
+   * width depends on the light's angular size as well as the surface, and those are two different
+   * scenes. The model has no term for the light's size.
+   */
+  lobeExponent: 6,
+  /** The far arc, weaker than the one facing the light (§2). */
+  opposingArc: 0.45,
+  /**
+   * The dark edge along the whole silhouette, as a multiplicative darkening. iOS 27 made it a
+   * layer of its own, and it does not rule out the highlight sitting on top of it (§2).
+   */
+  darkEdge: 0.22,
+  /** Width of the hairline, CSS px. "About a point, not a band and not a bevel" (§2). */
+  widthPx: 1
+};
+var BODY = {
+  /** Lightness ceiling for the body when legibility is loose. */
+  capLoose: 0.62,
+  /** …and when it is strict. The model is calibrated at these two, not in between (E-43). */
+  capTight: 0.38,
+  /** The two ends the body tints toward. Glass has no colour of its own (HIG "Color"). */
+  tintDark: 0.07,
+  tintLight: 0.94,
+  /** How far the backdrop's spread reaches past its mean when deciding what the ink needs. */
+  busyEdge: 0.75,
+  /** Fine texture the body has to stop being a window for. */
+  groundSpan: 0.06,
+  /** Where the tint flips direction, by the element's AVERAGE lightness — a local threshold cuts
+   *  a diagonal step across the body on a gradient. */
+  darkSideFrom: 0.42,
+  darkSideTo: 0.58,
+  /** Ceiling on any single demand, so one requirement cannot make the glass opaque on its own. */
+  maxDemand: 0.92
+};
+var SHADOW = {
+  /**
+   * Measured off reference frames 711–723: 4.0% over a flat light backdrop, 19.9% over text.
+   *
+   * REPRODUCED independently off frames/verify/m-707 and m-711 — the same capsule in the same scene
+   * at the same scale, once below the text over plain background and once scrolled up over it.
+   * Comparing the rows under the capsule against the same rows far to either side, so the
+   * background's own gradient cancels: 3.5% and 19.2%, peaking about 140 px below the capsule.
+   * Two passes, different frames and a different method, agreeing to within 0.7 of a point.
+   */
+  alphaFlat: 0.04,
+  alphaBusy: 0.199
+};
+var DISPERSION = {
+  /** Red bends less than the base index, blue more — and not symmetrically. */
+  redShift: -0.4,
+  blueShift: 0.6
+};
+var TOUCH = {
+  /**
+   * The element grows under pressure (M 3:51; HIG: interactive "expands").
+   *
+   * CHECKED, not measured: across frames/knob/switch-press, a 4x5 sheet of one switch being
+   * pressed, the control's extent runs 764 px in the three settled frames and 787 to 822 under the
+   * finger — 3 to 8 per cent. This value sits inside that, which is a consistency check and not a
+   * derivation: the measurement cannot separate the knob stretching from the track growing, and the
+   * settled frames agreeing to the pixel is the only part of it that is tight.
+   */
+  pressGrow: 0.06,
+  /** The ridge around the contact blob: material displaced from under the finger ends up
+   *  somewhere. Without it the shape balloons, and a dense medium does not do that. */
+  ridge: 0.42,
+  /** How far press pulls the field toward the finger. */
+  pressPull: 0.16,
+  /** Wavelength and decay of the ripple, as fractions of its span. Short and quick: in a dense
+   *  medium ripples are frequent and small; long shallow swells are water. */
+  waveLength: 0.17,
+  waveDecay: 0.7,
+  /** The ripple's span, as a multiple of the contact radius. It has to reach the far edge, or it
+   *  reads as jitter under the finger rather than a wave across the surface. */
+  waveSpan: 2,
+  /**
+   * Contact radius as a fraction of the element's half-size. UNMEASURED: §5 says the response has
+   * to be visible UNDER the finger, which is why the blob is wide, but gives no figure.
+   */
+  radiusOfHalfSize: 1.1,
+  /**
+   * Wave impulse as a fraction of the travel limit. UNMEASURED: the core carries the ripple's
+   * decay and frequency, but nothing says how hard a finger strikes it.
+   */
+  waveOfTravel: 0.18,
+  /** The lift-off ring is weaker than the one from touching down (§5). UNMEASURED ratio. */
+  releaseWave: 0.6,
+  /**
+   * How far a glow reaches past the element it started on, as a multiple of that element's
+   * half-size. UNMEASURED: §5 says the glow spreads "onto any Liquid Glass elements nearby" and
+   * names no distance. This is the reach at which a neighbour in a tab bar still lights and one
+   * across the screen does not.
+   */
+  glowReach: 3};
+var BEVEL = {
+  sphere: 0.94,
+  floor: 0.02,
+  slopeMax: 3.2
+};
+var EPSILON = 1e-5;
+var LENS = {
+  /** Same reason, for the profile's slope. */
+  slopeMax: 40,
+  /** Every thin film on glass sits around this index. */
+  filmIor: 1.35,
+  /** Reference channel wavelengths in nm — red, green, blue — for diffraction and interference. */
+  lambdaR: 610,
+  lambdaG: 550,
+  lambdaB: 460
+};
+var SHADOW_GAP = {
+  /** Fraction of the ambient hue the shadow carries. It has to stay a shadow, not a coloured blob. */
+  tint: 1
+};
+var SPECTRAL = {
+  /** How far into the bevel the fringes reach, as a fraction of it measured from the silhouette.
+   *  Diffraction is an EDGE effect; past this the bevel is plain glass. */
+  diffractionOnset: 0.45,
+  /**
+   * The same window for interference, which had none. §2 puts the iridescence on the opposing ARC —
+   * "the opposing arc carries an iridescent fringe" — and a fringe is a thing at an edge.
+   *
+   * Without it the term applies wherever the surface angle puts it, and across the inner bevel the
+   * angle barely changes, so a film that should read as a fringe reads as a flat colour filter.
+   * Measured on a 680x64 bar with the default preset: a multiplier of 1.68, 1.26, 0.05 held CONSTANT
+   * from a third of the way through the bevel to its inner edge — red boosted by two thirds and blue
+   * removed outright. UNMEASURED window; wider than diffraction's because interference reaches
+   * further in than the fringes do.
+   */
+  iridescenceOnset: 0.25,
+  /** Fringes across the bevel. Denser as the bevel sharpens, which is what the phase term does. */
+  diffractionFringes: 4,
+  /** The channel the hue is measured against, nm. Green is the eye's own reference. */
+  referenceLambda: 550
+};
+var ACCENT = {
+  /** The tone the colour takes over a dark backdrop and over a light one. "A range of tones mapped
+   *  to content brightness underneath", rather than one flat colour. */
+  deep: 0.88,
+  light: 1.08,
+  /** How much of the medium the colour occupies by default. Short of one, because the content has
+   *  to keep coming through: a fill "breaks the visual character of Liquid Glass" (@17:03). */
+  amount: 0.8
+};
+var ACCESSIBILITY = {
+  /** Frost floor under reduced transparency: the glass gets "frostier" (§9). */
+  frostMinDp: 14,
+  /**
+   * Body floor under reduced transparency. B @10:07 is the stricter statement of the two — a bar
+   * "gets a background when reduce transparency is enabled" — so this is a background, not a
+   * thicker haze. UNMEASURED: neither source gives a figure.
+   */
+  obscureMin: 0.82,
+  /** Under increased contrast the element is "predominantly black or white" (§9): the body goes to
+   *  whichever pole its ink already points at, at a density that leaves it reading as that pole. */
+  contrastDensity: 0.94,
+  /** …and separates from the backdrop on its own, whatever is behind it. */
+  contrastPresence: 0.5,
+  /**
+   * The contrasting border §9 asks for, in units of lightness away from the body's own pole. The
+   * rim stops taking its colour from the environment and takes it from the element instead — an
+   * ambient hairline is not a contrasting border. UNMEASURED.
+   */
+  contrastRim: 0.85,
+  /**
+   * Press that survives reduced motion. §9 "decreases the intensity of some effects and disables
+   * any elastic properties": the spring and the ripple are elastic and go to zero, the press is an
+   * ease that carries the element's light, so it is damped rather than removed — an element that
+   * stops answering a finger altogether is not reduced motion, it is no feedback. UNMEASURED.
+   */
+  stillPress: 0.6
+};
+var DERIVE = {
+  /** Physical 4% reflectance into the render's working range. UNMEASURED. */
+  fresnelGain: 17.5,
+  /** Schlick's exponent. A constant of the approximation, not a knob. */
+  fresnelExponent: 5,
+  /** The index at which ray bending is at full strength, measured from air. UNMEASURED. */
+  iorFullBend: 0.6,
+  /** Magnification behind a plane-parallel plate, per dp of thickness. UNMEASURED. */
+  magnifyPerDp: 6e-3,
+  /** In ordinary glasses the Abbe number falls as the index rises, so dispersion grows with it.
+   *  UNMEASURED slope. */
+  dispersionPerIor: 1.1,
+  /** Index spread between the red and blue channels. The physical value (~0.01 at an Abbe number
+   *  of 55) is at the threshold of visibility. UNMEASURED. */
+  iorSpreadPerDispersion: 0.045,
+  /** Ceiling on how much denser the bevel may read than the body. The rim's ray travels further
+   *  through the medium; past this the rim is milk rather than glass. UNMEASURED. */
+  edgeDensityMax: 4,
+  /**
+   * Frost ceiling, dp. Deliberately low: blur is a SUPPORTING device here, and past about a dozen
+   * dp letters under the glass stop being letters. Separating content from ink is the body's job.
+   *
+   * UNMEASURED, and an attempt is recorded here so the next one does not repeat it.
+   * frames/verify/m-711 has the same paragraph sharp beside the capsule and behind it, which looks
+   * like the measurement: match the blur that takes the sharp patch's detail down to the glassed
+   * one's. It gives 2 to 3 px at that frame's scale, and the figure is not trustworthy. Detail is
+   * lost to three things at once there — the frost, the magnification (`refractionScale` lowers the
+   * text's spatial frequency without blurring anything), and the body veiling its contrast — and
+   * the method cannot separate them. What it does bound is the total: the text behind the glass
+   * keeps 68% of the detail it has beside it.
+   *
+   * A clean measurement needs a frame where the glass does not magnify, or a feature of known size
+   * behind it to normalise the magnification out.
+   */
+  blurMaxDp: 12,
+  /** Highlight width from a smooth surface and from a fully rough one, as a specular exponent.
+   *  UNMEASURED. */
+  specularPowerSmooth: 160,
+  specularPowerRough: 8,
+  /** How much roughness damps the highlight's brightness. UNMEASURED. */
+  specularRoughDamping: 0.6,
+  /**
+   * The medium's own hue by density. Water absorbs red and skews cool, ordinary glass is nearly
+   * neutral with a faint green, dense high-index media skew warm. Glass has no colour of its own
+   * (HIG "Color"), so this is never set by hand — it is tied to the index.
+   */
+  hueCool: [0.86, 1, 1.08],
+  hueNeutral: [1, 1.02, 0.99],
+  hueWarm: [1.08, 1, 0.88],
+  /** The index range the hue sweeps across, and where it starts. UNMEASURED. */
+  hueFromIor: 1.2,
+  hueSpan: 0.55,
+  /** Body lightness follows reflectance: the denser the medium, the more of its surroundings it
+   *  returns. UNMEASURED base and slope. */
+  bodyLiftBase: 0.34,
+  bodyLiftPerF0: 2.4,
+  /**
+   * How far past the bevel the rim gathers its surroundings, as a multiple of the bevel. At a
+   * grazing angle the eye receives the vicinity rather than what is under the glass, and without
+   * this, glass on an empty black background has no source at all. UNMEASURED.
+   */
+  gatherPerBevel: 4,
+  /** Floor and ceiling on that radius, dp. Unbounded, a wide bevel gathers from fifty dp away and
+   *  a READABLE copy of the neighbourhood appears inside the glass — eight samples cannot blur a
+   *  disc that large (E-33, E-37). */
+  gatherMinDp: 4,
+  gatherMaxDp: 28,
+  /** The body's own density from absorption through its thickness. Small: the body only moves
+   *  toward the tint under the legibility requirement, otherwise it dims the content. UNMEASURED. */
+  bodyDensity: 0.05,
+  /**
+   * Rim light on the physical scale rather than the rim highlight's. `fresnelGain` saturates at one
+   * for dense media, and applying it here too would raise body lightness harder than the glass had
+   * just separated it from the ink — eating its own legibility work. UNMEASURED.
+   */
+  edgeLightGain: 6,
+  /**
+   * Iridescence rides the REFLECTED ray, so it is tied to Fresnel and has no knob of its own.
+   *
+   * MEASURED against how coloured a real rim is. In frames/crops the brightest rim pixels have a
+   * channel spread — (max − min) / max — of 13% in cap158-left and 20% in cap158-right, against
+   * their own backdrops' 14.6% and 14.3%. So the rim is no more coloured than the scene it stands
+   * in: §2's "iridescent fringe" adds a few points at most, and in one of the two crops it adds
+   * nothing measurable.
+   *
+   * At 1.6 this put ordinary glass at 0.945 iridescence and the spectral multiplier reached a 97%
+   * channel spread — red boosted by two thirds and blue removed. Rendered over a coloured page that
+   * is a neon tube around every control, which is what sent me to measure it.
+   */
+  iridescencePerFresnel: 0.042,
+  /** Edge diffraction shares dispersion's λ-dependence, at the stylised amplitude: at the physical
+   *  one the fringes are not visible at all. MEASURED with the same crops and the same target as
+   *  iridescence — on its own it was reaching a 93% channel spread. */
+  diffractionPerDispersion: 0.05,
+  /** Multiple internal reflection — the denser the medium, the more light it circulates and the
+   *  more it is tinted by its surroundings. UNMEASURED slope. */
+  colorPickupPerFresnel: 0.9,
+  /**
+   * The ceiling, which keeps it a medium rather than a fill.
+   *
+   * MEASURED, frames/concentric/shadow-zoom: the same sidebar twice, over a yellow cover and over a
+   * pink one, so the difference between the panels is the pickup with the sidebar's own colour
+   * subtracted out. Sampling a band of rows clear of the text, the bar's hue offset against the
+   * cover's own reaches 0.31 of it at the edge nearest the content in the yellow panel and 0.28 in
+   * the pink one. It was 0.42, which nothing measured.
+   *
+   * Reality is not uniform: the bleed falls to nothing about ninety pixels in, and both panels show
+   * the same falloff. The DOM path has one backdrop sample per element and cannot reproduce that,
+   * so it applies the ceiling across the whole body — right at the edge, too strong in the middle.
+   * That limit is in docs/dom.md rather than papered over with a lower number.
+   */
+  colorPickupMax: 0.3
+};
+var SIZE = {
+  /** Half-size at which bevel and thickness are specified as given; they grow as its square root
+   *  from there. UNMEASURED reference size. */
+  referenceDp: 24,
+  /** Floor and ceiling on that growth. UNMEASURED. */
+  gainMin: 0.8,
+  gainMax: 2.4,
+  /** A bevel wider than this fraction of the half-size breaks the SDF — the roundings converge in
+   *  the middle. A property of the geometry, not a taste. */
+  maxBevelFraction: 0.65
+};
+var SHADOW_DENSITY = {
+  /** Over a flat background. */
+  flat: 0.8,
+  /** How fast it rises with structure behind the element, and how far it may rise. */
+  busyGain: 6,
+  busyRise: 1.2,
+  /** Quantisation of the emitted value: a shadow that changes on every pixel of scroll re-lays-out
+   *  the native view every frame. */
+  step: 0.05
+};
+var SPRING = {
+  /** Stiffness and damping while the finger is down. UNMEASURED. */
+  holdStiffness: 260,
+  holdDamping: 46,
+  /** …and after it lifts. Stiffer, and damped hard: a dense medium snaps back without ringing. */
+  releaseStiffness: 420,
+  releaseDamping: 34,
+  /** Time constants for the press dent, in and out, seconds. UNMEASURED. */
+  pressAttack: 0.07,
+  pressRelease: 0.16,
+  /** How fast the touch point catches up to the finger. Not instant: an instant jump tears the
+   *  deformation, and on rapid taps that reads as jitter. */
+  pointFollow: 0.045,
+  /** …and how fast the element registers as being touched at all, which is what the glow rides. */
+  activeFollow: 0.09,
+  /** The ripple decays within a quarter second rather than oscillating: in a viscous medium ripples
+   *  are short and weak. UNMEASURED. */
+  waveDecay: 0.22,
+  waveTurnsPerSecond: 3,
+  /** Ceilings on the accumulated ripple, as multiples of a single impulse. Impulses add up rather
+   *  than restart — restarting cuts a running wave mid-period, which is what jolts on rapid taps. */
+  waveCapOnGrab: 1.6,
+  waveCapOnRelease: 2
+};
+var SCALE = {
+  /** Where on the scale the material stays exactly as it is by default. */
+  default: 0.35,
+  /** Body density at the fully tinted end: content under the glass has to be hidden. UNMEASURED. */
+  tintedDensity: 0.9
+};
+var SCROLL_EDGE = {
+  /** How far the content has to slide under the panel for the effect to fully engage, dp. */
+  engageDp: 24,
+  /** The blur the content dissolves into at the edge, dp. This is the effect itself — the content
+   *  goes out of focus into the background rather than being covered by anything. UNMEASURED. */
+  dissolveBlurDp: 10,
+  /**
+   * Over dark content the glass turns dark and 219 @9:33 switches the effect "to apply a subtle
+   * dimming instead". Dimming is a reduction in luminance: dark content under dark glass merges
+   * with it, and pushing the content down is what lets the glass sit above it. UNMEASURED.
+   */
+  dimAlpha: 0.1,
+  /** A pinned view under the panel (column headers) gets a flat band instead of a gradual fade
+   *  (219 @9:41) — "a stronger, more opaque boundary" (356 @12:12). UNMEASURED. */
+  hardBlurDp: 14,
+  hardAlpha: 0.18
+};
+
+// src/geometry.ts
+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 sizeDp = (g) => Math.sqrt(halfMinDp(g) * Math.max(Math.sqrt(g.width * g.height) / 2, 1));
+var sizeGain = (g) => {
+  const raw = Math.sqrt(sizeDp(g) / SIZE.referenceDp);
+  if (raw <= SIZE.gainMin) return SIZE.gainMin;
+  const span = SIZE.gainMax - SIZE.gainMin;
+  return SIZE.gainMin + span * (1 - Math.exp(-(raw - SIZE.gainMin) / span));
+};
+var MAX_BEVEL_FRACTION = SIZE.maxBevelFraction;
+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 shadowOpacity(busy) {
+  return SHADOW_DENSITY.flat + Math.min(Math.max(busy, 0) * SHADOW_DENSITY.busyGain, SHADOW_DENSITY.busyRise);
+}
+function shadowOpacityFrom(sample) {
+  return Math.round(shadowOpacity(sample.busy) / SHADOW_DENSITY.step) * SHADOW_DENSITY.step;
+}
+
+// src/sdf.ts
+var VG_TAU = 6.28318530718;
+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 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/dom/displacement.ts
+var SCALE_GAIN = 0.75;
+var MAX_STEP_PX = 0.09;
+var MAX_SCALE = 255 * MAX_STEP_PX;
+var BEVEL_SAMPLES = 8;
+function mapDensity(geometry, bevel, dpr) {
+  if (bevel <= 0) return dpr;
+  return Math.min(dpr, BEVEL_SAMPLES / bevel);
+}
+function encode(displacement, scale) {
+  const channel = Math.round(255 * (displacement / scale + 0.5));
+  return channel < 0 ? 0 : channel > 255 ? 255 : channel;
+}
+function bevelProfile(t) {
+  const raw = Math.min(t / Math.sqrt(Math.max(1 - t * t * BEVEL.sphere, BEVEL.floor)), BEVEL.slopeMax);
+  return raw / BEVEL.slopeMax;
+}
+function renderDisplacementPixels(optics, geometry, dpr, state = {}) {
+  const bevel = bevelDp(geometry, optics);
+  const density = mapDensity(geometry, bevel, dpr);
+  const width = Math.max(1, Math.round(geometry.width * density));
+  const height = Math.max(1, Math.round(geometry.height * density));
+  const rawScale = optics.refraction * thicknessDp(geometry, optics) * SCALE_GAIN;
+  const scale = Math.min(rawScale, MAX_SCALE);
+  const smoothing = state.smoothing ?? 0;
+  const data = new Uint8ClampedArray(width * height * 4);
+  const halfW = geometry.width / 2;
+  const halfH = geometry.height / 2;
+  for (let py = 0; py < height; py += 1) {
+    const y = (py + 0.5) / density - halfH;
+    for (let px = 0; px < width; px += 1) {
+      const x = (px + 0.5) / density - halfW;
+      const i = (py * width + px) * 4;
+      const [wx, wy] = state.touch ? touchWarp(x, y, state.touch) : [x, y];
+      const sd = sceneDistance(wx, wy, geometry.width, geometry.height, geometry.cornerRadius, smoothing, state.morph, state.morph2);
+      const t = Math.min(Math.max((sd + bevel) / bevel, 0), 1);
+      if (t <= 0 || scale <= 0) {
+        data[i] = 128;
+        data[i + 1] = 128;
+        data[i + 2] = 128;
+        data[i + 3] = 255;
+        continue;
+      }
+      const [gx, gy] = sceneGradient(wx, wy, geometry.width, geometry.height, geometry.cornerRadius, smoothing, state.morph, state.morph2);
+      const magnitude = bevelProfile(t) * (scale / 2);
+      const dx = -gx * magnitude;
+      const dy = -gy * magnitude;
+      data[i] = encode(dx, scale);
+      data[i + 1] = encode(dy, scale);
+      data[i + 2] = 128;
+      data[i + 3] = 255;
+    }
+  }
+  return { data, width, height, scale };
+}
+function hasCanvasSupport() {
+  return typeof document !== "undefined" && typeof document.createElement === "function";
+}
+function buildDisplacementMap(optics, geometry, dpr, state = {}) {
+  if (!hasCanvasSupport()) {
+    throw new Error("vireglass/dom: buildDisplacementMap requires a DOM (canvas)");
+  }
+  const { data, width, height, scale } = renderDisplacementPixels(optics, geometry, dpr, state);
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) throw new Error("vireglass/dom: 2D canvas context unavailable");
+  const imageData = ctx.createImageData(width, height);
+  imageData.data.set(data);
+  ctx.putImageData(imageData, 0, 0);
+  return { url: canvas.toDataURL("image/png"), width, height, scale };
+}
+
+// src/spectral.ts
+var TAU = 6.28318530718;
+var LAMBDA = [LENS.lambdaR, LENS.lambdaG, LENS.lambdaB];
+var clamp01 = (v) => v < 0 ? 0 : v > 1 ? 1 : v;
+function toHue(v) {
+  const mean = Math.max((v[0] + v[1] + v[2]) / 3, 1e-3);
+  return [v[0] / mean, v[1] / mean, v[2] / mean];
+}
+function rimSlopeCurve(x) {
+  const k = 1 - clamp01(x);
+  return k * k * k / Math.pow(Math.max(1 - k * k * k * k, 1e-5), 0.75);
+}
+function surfaceSlope(e, bevel, rim, thick) {
+  if (e >= bevel || bevel <= 0) return 0;
+  return Math.min((thick - rim) / bevel * rimSlopeCurve(e / bevel), LENS.slopeMax);
+}
+function surfaceCosine(slope) {
+  return 1 / Math.sqrt(1 + slope * slope);
+}
+function interference(cosI, filmNm) {
+  const sinT2 = (1 - cosI * cosI) / (LENS.filmIor * LENS.filmIor);
+  const cosT = Math.sqrt(Math.max(1 - sinT2, 0));
+  const opd = 2 * LENS.filmIor * filmNm * cosT;
+  return toHue([
+    0.5 + 0.5 * Math.cos(TAU * opd / LAMBDA[0] + Math.PI),
+    0.5 + 0.5 * Math.cos(TAU * opd / LAMBDA[1] + Math.PI),
+    0.5 + 0.5 * Math.cos(TAU * opd / LAMBDA[2] + Math.PI)
+  ]);
+}
+function diffraction(distFromEdge, bevel) {
+  const phase = TAU * SPECTRAL.diffractionFringes * distFromEdge / Math.max(bevel, 1);
+  const f = (lambda) => 0.5 + 0.5 * Math.cos(phase * SPECTRAL.referenceLambda / lambda);
+  return toHue([f(LAMBDA[0]), f(LAMBDA[1]), f(LAMBDA[2])]);
+}
+function smoothstep(edge0, edge1, x) {
+  const t = clamp01((x - edge0) / (edge1 - edge0));
+  return t * t * (3 - 2 * t);
+}
+function spectralHue(e, bevel, rim, thick, optics) {
+  let r = 1;
+  let g = 1;
+  let b = 1;
+  const t = 1 - clamp01(bevel > 0 ? e / bevel : 1);
+  if (optics.iridescence > 1e-3) {
+    const w = optics.iridescence * smoothstep(SPECTRAL.iridescenceOnset, 1, t);
+    if (w > 0) {
+      const cosI = clamp01(surfaceCosine(surfaceSlope(e, bevel, rim, thick)));
+      const i = interference(cosI, optics.film);
+      r += (i[0] - 1) * w;
+      g += (i[1] - 1) * w;
+      b += (i[2] - 1) * w;
+    }
+  }
+  if (optics.diffraction > 1e-3) {
+    const w = optics.diffraction * smoothstep(SPECTRAL.diffractionOnset, 1, t);
+    if (w > 0) {
+      const d = diffraction(e, bevel);
+      r += (d[0] - 1) * w;
+      g += (d[1] - 1) * w;
+      b += (d[2] - 1) * w;
+    }
+  }
+  return [r, g, b];
+}
+
+// src/dom/spectral-map.ts
+var HEADROOM = 2;
+var BEVEL_SAMPLES2 = 24;
+function mapDensity2(bevel, dpr) {
+  if (bevel <= 0) return dpr;
+  return Math.min(dpr, BEVEL_SAMPLES2 / bevel);
+}
+function renderSpectralPixels(optics, geometry, dpr) {
+  const bevel = bevelDp(geometry, optics);
+  const density = mapDensity2(bevel, dpr);
+  const width = Math.max(1, Math.round(geometry.width * density));
+  const height = Math.max(1, Math.round(geometry.height * density));
+  const rim = rimDp(geometry, optics);
+  const thick = thicknessDp(geometry, optics);
+  const data = new Uint8ClampedArray(width * height * 4);
+  const halfW = geometry.width / 2;
+  const halfH = geometry.height / 2;
+  const neutral = Math.round(1 / HEADROOM * 255);
+  for (let py = 0; py < height; py += 1) {
+    const y = (py + 0.5) / density - halfH;
+    for (let px = 0; px < width; px += 1) {
+      const x = (px + 0.5) / density - halfW;
+      const i = (py * width + px) * 4;
+      const sd = sdfRoundedRect(x, y, geometry.width, geometry.height, geometry.cornerRadius);
+      const e = Math.max(-sd, 0);
+      if (e >= bevel) {
+        data[i] = neutral;
+        data[i + 1] = neutral;
+        data[i + 2] = neutral;
+        data[i + 3] = 255;
+        continue;
+      }
+      const [r, g, b] = spectralHue(e, bevel, rim, thick, optics);
+      data[i] = Math.round(r / HEADROOM * 255);
+      data[i + 1] = Math.round(g / HEADROOM * 255);
+      data[i + 2] = Math.round(b / HEADROOM * 255);
+      data[i + 3] = 255;
+    }
+  }
+  return { data, width, height, headroom: HEADROOM };
+}
+function hasSpectralEdge(optics) {
+  return optics.iridescence > 1e-3 || optics.diffraction > 1e-3;
+}
+function buildSpectralMap(optics, geometry, dpr) {
+  if (typeof document === "undefined" || typeof document.createElement !== "function") {
+    throw new Error("vireglass/dom: buildSpectralMap requires a DOM (canvas)");
+  }
+  const { data, width, height, headroom } = renderSpectralPixels(optics, geometry, dpr);
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) throw new Error("vireglass/dom: 2D canvas context unavailable");
+  const image = ctx.createImageData(width, height);
+  image.data.set(data);
+  ctx.putImageData(image, 0, 0);
+  return { url: canvas.toDataURL("image/png"), width, height, headroom };
+}
+
+// src/dom/map-cache.ts
+var LIMIT = 24;
+var store = /* @__PURE__ */ new Map();
+function cached(key, build) {
+  const hit = store.get(key);
+  if (hit !== void 0) {
+    store.delete(key);
+    store.set(key, hit);
+    return hit;
+  }
+  const value = build();
+  store.set(key, value);
+  if (store.size > LIMIT) {
+    const oldest = store.keys().next();
+    if (!oldest.done) store.delete(oldest.value);
+  }
+  return value;
+}
+function clearMapCache() {
+  store.clear();
+}
+function mapCacheSize() {
+  return store.size;
+}
+
+// src/optics.ts
+var clamp = (v, lo, hi) => v < lo ? lo : v > hi ? hi : v;
+var clamp012 = (v) => clamp(v, 0, 1);
+var fresnelF0 = (ior) => ((ior - 1) / (ior + 1)) ** 2;
+var fresnelStrength = (ior) => clamp012(fresnelF0(ior) * DERIVE.fresnelGain);
+var FRESNEL_EXPONENT = DERIVE.fresnelExponent;
+var refractionStrength = (ior) => clamp012((ior - 1) / DERIVE.iorFullBend);
+var refractionScale = (ior, thicknessDp2) => 1 + DERIVE.magnifyPerDp * thicknessDp2 * (1 - 1 / Math.max(ior, 1));
+var dispersion = (ior) => clamp012((ior - 1) * DERIVE.dispersionPerIor);
+var iorSpread = (ior) => dispersion(ior) * DERIVE.iorSpreadPerDispersion;
+var absorption = (pathDp) => 1 - Math.exp(-0.017 * Math.max(pathDp, 0));
+var edgeDensity = (thicknessDp2, bevelDp2) => {
+  const body = absorption(thicknessDp2);
+  if (body <= 0) return 1;
+  return clamp(absorption(thicknessDp2 + bevelDp2) / body, 1, DERIVE.edgeDensityMax);
+};
+var blur = (roughness) => clamp012(roughness) * DERIVE.blurMaxDp;
+var specularPower = (roughness) => DERIVE.specularPowerSmooth - clamp012(roughness) * (DERIVE.specularPowerSmooth - DERIVE.specularPowerRough);
+var specularStrength = (ior, roughness) => clamp012(fresnelStrength(ior) * (1 - clamp012(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 = clamp012((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: clamp012(hue[0] * lift), g: clamp012(hue[1] * lift), b: clamp012(hue[2] * lift) };
+}
+var gatherRadius = (bevelDp2) => clamp(Math.max(bevelDp2, 1) * DERIVE.gatherPerBevel, DERIVE.gatherMinDp, DERIVE.gatherMaxDp);
+var bodyDensity = (thicknessDp2) => DERIVE.bodyDensity * absorption(thicknessDp2);
+var edgeLight = (ior) => clamp012(fresnelF0(ior) * DERIVE.edgeLightGain);
+var iridescence = (ior, filmNm) => filmNm <= 0 ? 0 : clamp012(fresnelStrength(ior) * DERIVE.iridescencePerFresnel);
+var diffraction2 = (ior) => clamp012(dispersion(ior) * DERIVE.diffractionPerDispersion);
+var colorPickup = (ior) => clamp(fresnelStrength(ior) * DERIVE.colorPickupPerFresnel, 0, DERIVE.colorPickupMax);
+
+// src/material.ts
+var MATERIAL_RANGES = {
+  ior: [1, 2],
+  thickness: [0, 60],
+  bevel: [0, 40],
+  roughness: [0, 1],
+  environment: [0, 1],
+  legibility: [0, 1],
+  dimming: [0, 0.5],
+  ink: [0, 1],
+  presence: [0, 0.6],
+  film: [0, 900]
+};
+var ADAPT_RADIUS = 22;
+var clamp2 = (v, lo, hi) => v < lo ? lo : v > hi ? hi : v;
+var VIREGLASS_MATERIAL_V5 = {
+  ior: 1.5,
+  thickness: 28,
+  bevel: 6,
+  roughness: 0.06,
+  environment: 0.27,
+  legibility: 0.26,
+  dimming: 0,
+  ink: 1,
+  presence: 0.05,
+  film: 340
+};
+var VIREGLASS_MATERIAL = VIREGLASS_MATERIAL_V5;
+function resolveMaterial(patch = {}) {
+  const m = { ...VIREGLASS_MATERIAL, ...patch };
+  const out = { ...m };
+  for (const key of Object.keys(MATERIAL_RANGES)) {
+    const [lo, hi] = MATERIAL_RANGES[key];
+    out[key] = clamp2(out[key], lo, hi);
+  }
+  return out;
+}
+function resolveOptics(patch = {}) {
+  const m = resolveMaterial(patch);
+  return {
+    blur: blur(m.roughness),
+    refraction: refractionStrength(m.ior),
+    refractionScale: refractionScale(m.ior, m.thickness),
+    bevelDp: m.bevel,
+    gatherRadiusDp: gatherRadius(m.bevel),
+    fresnel: fresnelStrength(m.ior),
+    fresnelPower: FRESNEL_EXPONENT,
+    specular: specularStrength(m.ior, m.roughness),
+    specularPower: specularPower(m.roughness),
+    dispersion: dispersion(m.ior),
+    tint: mediumTint(m.ior),
+    tintStrength: absorption(m.thickness),
+    edgeDensity: edgeDensity(m.thickness, m.bevel),
+    environment: m.environment,
+    legibility: m.legibility,
+    dimming: m.dimming,
+    ink: m.ink,
+    presence: m.presence,
+    adaptRadius: ADAPT_RADIUS,
+    bodyDensity: bodyDensity(m.thickness),
+    edgeLight: edgeLight(m.ior),
+    film: m.film,
+    iridescence: iridescence(m.ior, m.film),
+    diffraction: diffraction2(m.ior),
+    colorPickup: colorPickup(m.ior),
+    ior: m.ior,
+    thicknessDp: m.thickness,
+    iorSpread: iorSpread(m.ior)
+  };
+}
+var EFFECTS = [
+  "backdrop",
+  "blur",
+  "refraction",
+  "fresnel",
+  "bevel",
+  "specular",
+  "dispersion",
+  "tint",
+  "environment",
+  "legibility",
+  "interference",
+  "diffraction"
+];
+EFFECTS.reduce(
+  (acc, e) => ({ ...acc, [e]: true }),
+  {}
+);
+
+// src/dom/probe.ts
+var GRID_COLS = 5;
+var GRID_ROWS = 5;
+function parseColor(value) {
+  const match = /rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*(?:,\s*([\d.]+))?\s*\)/i.exec(value);
+  if (!match) return null;
+  const r = Number(match[1]);
+  const g = Number(match[2]);
+  const b = Number(match[3]);
+  const a = match[4] === void 0 ? 1 : Number(match[4]);
+  if (!Number.isFinite(r) || !Number.isFinite(g) || !Number.isFinite(b) || !Number.isFinite(a)) return null;
+  return { r, g, b, a };
+}
+function luma(r, g, b) {
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+function statsFromSamples(samples) {
+  const n = samples.length;
+  if (n === 0) return { luma: 0.5, busy: 0, lo: 0.5, hi: 0.5, r: 0.5, g: 0.5, b: 0.5 };
+  const lumas = [];
+  let sr = 0;
+  let sg = 0;
+  let sb = 0;
+  for (const s of samples) {
+    const r = s.r / 255;
+    const g = s.g / 255;
+    const b = s.b / 255;
+    lumas.push(luma(r, g, b));
+    sr += r;
+    sg += g;
+    sb += b;
+  }
+  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 = Math.min(busy / n * 2, 1);
+  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);
+  };
+  return {
+    luma: mean,
+    busy,
+    lo: percentile(0.1),
+    hi: percentile(0.9),
+    r: sr / n,
+    g: sg / n,
+    b: sb / n
+  };
+}
+function compositeLayers(layers) {
+  let r = 0;
+  let g = 0;
+  let b = 0;
+  let a = 0;
+  for (const layer of layers) {
+    const share = layer.a * (1 - a);
+    if (share <= 0) continue;
+    r += layer.r * share;
+    g += layer.g * share;
+    b += layer.b * share;
+    a += share;
+    if (a >= 0.999) break;
+  }
+  if (a <= 1e-3) return null;
+  return { r: r / a, g: g / a, b: b / a, a };
+}
+function sampleColorAt(el, x, y) {
+  const stack = document.elementsFromPoint(x, y);
+  const behind = stack.filter((node) => node !== el && !el.contains(node));
+  const layers = [];
+  for (const node of behind) {
+    const bg = parseColor(getComputedStyle(node).backgroundColor);
+    if (bg && bg.a > 1e-3) layers.push(bg);
+  }
+  const composited = compositeLayers(layers);
+  if (composited) return composited;
+  const topmost = behind[0];
+  if (!topmost) return null;
+  return parseColor(getComputedStyle(topmost).color);
+}
+function probeBackdrop(el, opts = {}) {
+  const cols = opts.cols ?? GRID_COLS;
+  const rows = opts.rows ?? GRID_ROWS;
+  const rect = el.getBoundingClientRect();
+  if (rect.width <= 0 || rect.height <= 0) return statsFromSamples([]);
+  const samples = [];
+  for (let j = 0; j < rows; j += 1) {
+    const y = rect.top + (j + 0.5) / rows * rect.height;
+    for (let i = 0; i < cols; i += 1) {
+      const x = rect.left + (i + 0.5) / cols * rect.width;
+      const color = sampleColorAt(el, x, y);
+      if (color) samples.push(color);
+    }
+  }
+  return statsFromSamples(samples);
+}
+
+// src/dom/support.ts
+var backdropFilterSupport = null;
+var svgBackdropFilterSupport = null;
+function probeProperty(property, value) {
+  if (typeof CSS === "undefined" || typeof CSS.supports !== "function") return false;
+  return CSS.supports(property, value);
+}
+function supportsBackdropFilter() {
+  if (backdropFilterSupport === null) {
+    backdropFilterSupport = probeProperty("backdrop-filter", "blur(1px)") || probeProperty("-webkit-backdrop-filter", "blur(1px)");
+  }
+  return backdropFilterSupport;
+}
+function supportsSvgBackdropFilter() {
+  if (svgBackdropFilterSupport === null) {
+    svgBackdropFilterSupport = probeProperty("backdrop-filter", "url(#vireglass-support-probe)");
+  }
+  return svgBackdropFilterSupport;
+}
+function resetSupportCache() {
+  backdropFilterSupport = null;
+  svgBackdropFilterSupport = null;
+}
+
+// src/shadow-tint.ts
+var LUMA = [0.2126, 0.7152, 0.0722];
+var luma2 = (c) => c[0] * LUMA[0] + c[1] * LUMA[1] + c[2] * LUMA[2];
+function shadowTint(ambient) {
+  const peak = Math.max(ambient[0], ambient[1], ambient[2], 1e-3);
+  const hue = [ambient[0] / peak, ambient[1] / peak, ambient[2] / peak];
+  const grey = luma2(hue);
+  const available = luma2(ambient);
+  return [(hue[0] - grey) * available, (hue[1] - grey) * available, (hue[2] - grey) * available];
+}
+
+// src/dom/shadow.ts
+var FLAT_DENSITY = shadowOpacity(0);
+var BUSY_DENSITY = shadowOpacity(1);
+function shadowAlphaFrom(sample) {
+  const t = (shadowOpacityFrom(sample) - FLAT_DENSITY) / (BUSY_DENSITY - FLAT_DENSITY);
+  const alpha = SHADOW.alphaFlat + t * (SHADOW.alphaBusy - SHADOW.alphaFlat);
+  return Math.min(Math.max(alpha, 0), 1);
+}
+var to255 = (v) => Math.round(Math.min(Math.max(v, 0), 1) * 255);
+function boxShadowCss(geometry, sample, appear = 1) {
+  const reach = shadowReachDp(geometry);
+  const present = appear < 0 ? 0 : appear > 1 ? 1 : appear;
+  const alpha = shadowAlphaFrom(sample) * present;
+  const ambient = "luma" in sample ? ambientFrom(sample) : null;
+  if (!ambient) return `0 0 ${reach.toFixed(1)}px rgba(0, 0, 0, ${alpha.toFixed(3)})`;
+  const [r, g, b] = shadowTint(ambient);
+  const spill = SHADOW_GAP.tint;
+  return `0 0 ${reach.toFixed(1)}px rgba(${to255(r * spill)}, ${to255(g * spill)}, ${to255(b * spill)}, ${alpha.toFixed(3)})`;
+}
+
+// src/dom/body.ts
+var {
+  capLoose: BODY_CAP_LOOSE,
+  capTight: BODY_CAP_TIGHT,
+  tintDark: TINT_DARK,
+  tintLight: TINT_LIGHT,
+  groundSpan: GROUND_SPAN,
+  busyEdge: BUSY_EDGE,
+  darkSideFrom: DARK_SIDE_FROM,
+  darkSideTo: DARK_SIDE_TO,
+  maxDemand: MAX_DEMAND
+} = BODY;
+var clamp3 = (v, lo, hi) => v < lo ? lo : v > hi ? hi : v;
+var mix = (a, b, t) => a + (b - a) * t;
+function smoothstep2(edge0, edge1, x) {
+  const t = clamp3((x - edge0) / (edge1 - edge0), 0, 1);
+  return t * t * (3 - 2 * t);
+}
+function resolveBody(optics, sample, ink) {
+  const strict = clamp3(optics.legibility * 2, 0, 1);
+  const capLight = mix(BODY_CAP_LOOSE, BODY_CAP_TIGHT, strict);
+  const floorDark = 1 - capLight;
+  const pol = clamp3(ink, 0, 1);
+  const demand = clamp3(optics.legibility * 4, 0, 1);
+  const mean = clamp3(sample.luma, 0, 1);
+  const busy = Math.max(sample.busy, 0);
+  const darkSide = smoothstep2(DARK_SIDE_FROM, DARK_SIDE_TO, mean);
+  const away = mix(TINT_LIGHT, TINT_DARK, darkSide);
+  const tintLuma = mix(away, mix(TINT_LIGHT, TINT_DARK, pol), demand);
+  const edge = busy * BUSY_EDGE;
+  const inkHi = Math.min(mean + edge, 1);
+  const inkLo = Math.max(mean - edge, 0);
+  const needForLight = inkHi > capLight ? clamp3((inkHi - capLight) / Math.max(inkHi - TINT_DARK, 1e-4), 0, MAX_DEMAND) : 0;
+  const needForDark = inkLo < floorDark ? clamp3((floorDark - inkLo) / Math.max(TINT_LIGHT - inkLo, 1e-4), 0, MAX_DEMAND) : 0;
+  const needForInk = mix(needForDark, needForLight, pol) * demand;
+  const ground = busy * optics.legibility * GROUND_SPAN;
+  return { density: Math.max(Math.max(optics.bodyDensity, ground), needForInk), tintLuma };
+}
+function withPresence(body, optics, sample) {
+  if (optics.presence <= 0) return body;
+  const mean = clamp3(sample.luma, 0, 1);
+  const lighter = mean < 0.5;
+  const target = lighter ? Math.min(mean + optics.presence, 1) : Math.max(mean - optics.presence, 0);
+  const separation = Math.abs(target - mean);
+  const reached = Math.abs(body.tintLuma - mean) * body.density;
+  if (reached >= separation) return body;
+  const needed = separation / Math.max(Math.abs((lighter ? TINT_LIGHT : TINT_DARK) - mean), 1e-4);
+  return {
+    density: Math.max(body.density, Math.min(needed, MAX_DEMAND)),
+    tintLuma: lighter ? Math.max(body.tintLuma, mean) : Math.min(body.tintLuma, mean)
+  };
+}
+
+// src/accessibility.ts
+var NO_ACCESSIBILITY = {
+  reduceTransparency: false,
+  increaseContrast: false,
+  reduceMotion: false
+};
+function applyAccessibility(optics, mods = NO_ACCESSIBILITY) {
+  if (!mods.reduceTransparency && !mods.increaseContrast) return optics;
+  const out = { ...optics };
+  if (mods.reduceTransparency) {
+    out.blur = Math.max(out.blur, ACCESSIBILITY.frostMinDp);
+    out.bodyDensity = Math.max(out.bodyDensity, ACCESSIBILITY.obscureMin);
+  }
+  if (mods.increaseContrast) {
+    out.bodyDensity = Math.max(out.bodyDensity, ACCESSIBILITY.contrastDensity);
+    out.presence = Math.max(out.presence, ACCESSIBILITY.contrastPresence);
+    out.legibility = 1;
+  }
+  return out;
+}
+function contrastRimLuma(tintLuma) {
+  const light = tintLuma < 0.5;
+  return light ? Math.min(tintLuma + ACCESSIBILITY.contrastRim, BODY.tintLight) : Math.max(tintLuma - ACCESSIBILITY.contrastRim, BODY.tintDark);
+}
+function elasticAllowed(mods = NO_ACCESSIBILITY) {
+  return !mods.reduceMotion;
+}
+
+// src/dom/preferences.ts
+var QUERIES = {
+  reduceTransparency: "(prefers-reduced-transparency: reduce)",
+  increaseContrast: "(prefers-contrast: more)",
+  reduceMotion: "(prefers-reduced-motion: reduce)"
+};
+function matches(query) {
+  if (typeof matchMedia !== "function") return false;
+  try {
+    return matchMedia(query).matches;
+  } catch {
+    return false;
+  }
+}
+function systemAccessibility() {
+  if (typeof matchMedia !== "function") return NO_ACCESSIBILITY;
+  return {
+    reduceTransparency: matches(QUERIES.reduceTransparency),
+    increaseContrast: matches(QUERIES.increaseContrast),
+    reduceMotion: matches(QUERIES.reduceMotion)
+  };
+}
+function watchAccessibility(onChange) {
+  if (typeof matchMedia !== "function") return () => {
+  };
+  const lists = [];
+  const handler = () => onChange(systemAccessibility());
+  for (const query of Object.values(QUERIES)) {
+    try {
+      const list = matchMedia(query);
+      list.addEventListener("change", handler);
+      lists.push(list);
+    } catch {
+    }
+  }
+  return () => {
+    for (const list of lists) list.removeEventListener("change", handler);
+  };
+}
+
+// src/glass-scale.ts
+var GLASS_SCALE_DEFAULT = SCALE.default;
+var clamp013 = (v) => v < 0 ? 0 : v > 1 ? 1 : v;
+function applyGlassScale(optics, scale) {
+  const s = clamp013(scale);
+  if (s === GLASS_SCALE_DEFAULT) return optics;
+  if (s < GLASS_SCALE_DEFAULT) {
+    const k2 = s / GLASS_SCALE_DEFAULT;
+    return { ...optics, legibility: optics.legibility * k2, dimming: optics.dimming * k2 };
+  }
+  const k = (s - GLASS_SCALE_DEFAULT) / (1 - GLASS_SCALE_DEFAULT);
+  return { ...optics, bodyDensity: Math.max(optics.bodyDensity, SCALE.tintedDensity * k) };
+}
+
+// src/appear.ts
+var clamp014 = (v) => v < 0 ? 0 : v > 1 ? 1 : v;
+function applyAppear(optics, t) {
+  const a = clamp014(t);
+  if (a === 1) return optics;
+  return {
+    ...optics,
+    refraction: optics.refraction * a,
+    blur: optics.blur * a,
+    bodyDensity: optics.bodyDensity * a,
+    dimming: optics.dimming * a,
+    edgeLight: optics.edgeLight * a,
+    // A floor on how far the element must stand out from its backdrop (§3). Left alone it holds
+    // the element visible at t = 0, which is the opposite of what materialising means.
+    presence: optics.presence * a,
+    // The spectral trio is lensing too — §1's "light bending and lensing" is not only the
+    // displacement. The fringe map and the per-channel split are drawn from these, and a filter
+    // graph that still paints them is an element that is not there but is casting a rainbow.
+    dispersion: optics.dispersion * a,
+    iridescence: optics.iridescence * a,
+    diffraction: optics.diffraction * a,
+    tintStrength: optics.tintStrength * a,
+    // Legibility is a REQUIREMENT, not an effect: an element still arriving has no ink on it yet,
+    // and holding a demand it cannot meet would darken the body exactly while it should be
+    // clearing. It fades with the rest.
+    legibility: optics.legibility * a
+  };
+}
+
+// src/accent.ts
+var clamp015 = (v) => v < 0 ? 0 : v > 1 ? 1 : v;
+function accentTone(color, backdropLuma) {
+  const k = ACCENT.deep + (ACCENT.light - ACCENT.deep) * clamp015(backdropLuma);
+  return [clamp015(color[0] * k), clamp015(color[1] * k), clamp015(color[2] * k)];
+}
+function accentAmount(accent) {
+  return clamp015(accent.amount ?? ACCENT.amount);
+}
+
+// src/concentric.ts
+function concentricRadius(outerRadius, inset, minimum = 0) {
+  return Math.max(outerRadius - inset, Math.max(minimum, 0));
+}
+
+// src/dom/rim.ts
+var { lobeExponent: LOBE_EXPONENT, opposingArc: OPPOSING_ARC, darkEdge: DARK_EDGE } = RIM;
+var STOPS = 48;
+function lightConicAngle(light) {
+  const [lx, ly] = light;
+  const deg = Math.atan2(lx, -ly) * 180 / Math.PI;
+  return (deg + 360) % 360;
+}
+function rimLobe(deltaDeg, specular) {
+  const facing = Math.cos(deltaDeg * Math.PI / 180);
+  const front = facing > 0 ? Math.pow(facing, LOBE_EXPONENT) : 0;
+  const back = facing < 0 ? Math.pow(-facing, LOBE_EXPONENT) : 0;
+  return specular * (front + OPPOSING_ARC * back);
+}
+var clamp016 = (v) => v < 0 ? 0 : v > 1 ? 1 : v;
+var to2552 = (v) => Math.round(clamp016(v) * 255);
+function rimGradientCss(optics, ambient, light, appear = 1) {
+  const present = clamp016(appear);
+  const start = lightConicAngle(light);
+  const [ar, ag, ab] = ambient;
+  const stops = [];
+  for (let i = 0; i <= STOPS; i += 1) {
+    const angle = i / STOPS * 360;
+    const key = rimLobe(angle, optics.specular);
+    const facing = Math.cos(angle * Math.PI / 180);
+    const fringe = facing < 0 ? optics.iridescence * OPPOSING_ARC : 0;
+    const lift = clamp016(key * optics.fresnel);
+    const r = ar + (1 - ar) * clamp016(lift + fringe);
+    const g = ag + (1 - ag) * lift;
+    const b = ab + (1 - ab) * clamp016(lift - fringe);
+    const alpha = clamp016(DARK_EDGE + lift * (1 - DARK_EDGE)) * present;
+    const colour = lift > 1e-3 ? `rgba(${to2552(r)},${to2552(g)},${to2552(b)},${alpha.toFixed(3)})` : `rgba(0,0,0,${alpha.toFixed(3)})`;
+    stops.push(`${colour} ${angle.toFixed(1)}deg`);
+  }
+  return `conic-gradient(from ${start.toFixed(1)}deg, ${stops.join(", ")})`;
+}
+var RIM_WIDTH_PX = RIM.widthPx;
+function contrastRimCss(bodyLuma, rimLuma) {
+  const v = to2552(rimLuma);
+  return `conic-gradient(rgb(${v},${v},${v}) 0deg, rgb(${v},${v},${v}) 360deg)`;
+}
+
+// src/dom/nesting.ts
+var WARNED = /* @__PURE__ */ new WeakSet();
+var GLASS_ATTR = "data-vireglass";
+function warnIfNested(el) {
+  if (WARNED.has(el)) return;
+  const outer = el.parentElement?.closest(`[${GLASS_ATTR}]`);
+  if (!outer) return;
+  WARNED.add(el);
+  const where = outer.tagName.toLowerCase() + (outer.id ? `#${outer.id}` : "");
+  console.warn(
+    `vireglass: glass inside glass \u2014 this element is a descendant of <${where}>, which is also glass. Its backdrop is the outer element's output, so the refraction is applied twice and the blurs multiply. Put the glass on one of the two.`
+  );
+}
+var REST_LIGHT = [-0.577, -0.817];
+
+// src/touch-response.ts
+function createDeform(options = {}) {
+  let elastic = options.elastic !== false;
+  let pressCeiling = elastic ? 1 : ACCESSIBILITY.stillPress;
+  let touchX = 0;
+  let touchY = 0;
+  let targetTouchX = 0;
+  let targetTouchY = 0;
+  let pullX = 0;
+  let pullY = 0;
+  let vx = 0;
+  let vy = 0;
+  let targetX = 0;
+  let targetY = 0;
+  let held = false;
+  let press = 0;
+  let active = 0;
+  let waveAmp = 0;
+  let wavePhase = 0;
+  function grab(x, y, waveStart) {
+    const atRest = idle();
+    held = true;
+    targetTouchX = x;
+    targetTouchY = y;
+    if (atRest) {
+      touchX = x;
+      touchY = y;
+    }
+    targetX = 0;
+    targetY = 0;
+    if (elastic) waveAmp = Math.min(waveAmp + waveStart, waveStart * SPRING.waveCapOnGrab);
+  }
+  function drag(dx, dy, limit) {
+    if (!held || !elastic) return;
+    const len = Math.hypot(dx, dy);
+    const scale = len > 1e-3 ? limit * Math.tanh(len / limit) / len : 0;
+    targetX = dx * scale;
+    targetY = dy * scale;
+  }
+  function release(waveStart) {
+    held = false;
+    targetX = 0;
+    targetY = 0;
+    if (elastic) waveAmp = Math.min(waveAmp + waveStart, waveStart * SPRING.waveCapOnRelease);
+  }
+  function integrate(dt) {
+    const k = held ? SPRING.holdStiffness : SPRING.releaseStiffness;
+    const c = held ? SPRING.holdDamping : SPRING.releaseDamping;
+    vx += (k * (targetX - pullX) - c * vx) * dt;
+    vy += (k * (targetY - pullY) - c * vy) * dt;
+    pullX += vx * dt;
+    pullY += vy * dt;
+    const pressTarget = held ? pressCeiling : 0;
+    const tau = held ? SPRING.pressAttack : SPRING.pressRelease;
+    press += (pressTarget - press) * (1 - Math.exp(-dt / tau));
+    active += (pressTarget - active) * (1 - Math.exp(-dt / SPRING.activeFollow));
+    const follow = 1 - Math.exp(-dt / SPRING.pointFollow);
+    touchX += (targetTouchX - touchX) * follow;
+    touchY += (targetTouchY - touchY) * follow;
+    wavePhase += dt * SPRING.waveTurnsPerSecond;
+    waveAmp *= Math.exp(-dt / SPRING.waveDecay);
+    if (waveAmp < 0.01) waveAmp = 0;
+  }
+  function step(dt) {
+    let rest = Math.min(Math.max(dt, 0), 0.25);
+    const h = 1 / 120;
+    while (rest > 1e-6) {
+      const slice = Math.min(h, rest);
+      integrate(slice);
+      rest -= slice;
+    }
+    if (idle()) {
+      pullX = 0;
+      pullY = 0;
+      vx = 0;
+      vy = 0;
+      press = 0;
+      active = 0;
+      wavePhase = 0;
+    }
+  }
+  function idle() {
+    return !held && Math.abs(pullX) < 0.05 && Math.abs(pullY) < 0.05 && Math.hypot(vx, vy) < 0.5 && press < 4e-3 && active < 4e-3 && waveAmp === 0;
+  }
+  function setElastic(on) {
+    if (on === elastic) return;
+    elastic = on;
+    pressCeiling = on ? 1 : ACCESSIBILITY.stillPress;
+    if (!on) {
+      pullX = 0;
+      pullY = 0;
+      vx = 0;
+      vy = 0;
+      targetX = 0;
+      targetY = 0;
+      waveAmp = 0;
+      wavePhase = 0;
+    }
+  }
+  function sample() {
+    return { touchX, touchY, pullX, pullY, press, active, waveAmp, wavePhase };
+  }
+  return { grab, drag, release, step, idle, sample, setElastic };
+}
+function raiseIntoGlass(press) {
+  const t = press < 0 ? 0 : press > 1 ? 1 : press;
+  return { glass: Math.pow(t, 0.6), solid: 1 - Math.pow(t, 1.4) };
+}
+
+// src/scroll-edge.ts
+function scrollEdgeStyle(inkLight, pinned = false) {
+  if (pinned) return "hard";
+  return inkLight ? "dim" : "dissolve";
+}
+var SCROLL_EDGE_ENGAGE_DP = SCROLL_EDGE.engageDp;
+function scrollEdgeStrength(side, scroll, maxScroll) {
+  const room = side === "top" ? scroll : maxScroll - scroll;
+  return Math.min(Math.max(room / SCROLL_EDGE_ENGAGE_DP, 0), 1);
+}
+
+// src/dom/scroll-edge.ts
+function paintFor(style, side) {
+  const direction = side === "top" ? "to top" : "to bottom";
+  if (style === "hard") {
+    return {
+      filter: `blur(${SCROLL_EDGE.hardBlurDp}px)`,
+      mask: "",
+      tone: `linear-gradient(${direction}, rgba(0,0,0,${SCROLL_EDGE.hardAlpha}) 0 100%)`
+    };
+  }
+  const ramp = `linear-gradient(${direction}, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%)`;
+  return {
+    filter: `blur(${SCROLL_EDGE.dissolveBlurDp}px)`,
+    mask: ramp,
+    tone: style === "dim" ? `linear-gradient(${direction}, rgba(0,0,0,${SCROLL_EDGE.dimAlpha}) 0%, rgba(0,0,0,0) 100%)` : "none"
+  };
+}
+function attachScrollEdge(scroller, edgeEl, opts = {}) {
+  const side = opts.side ?? "top";
+  let destroyed = false;
+  function update() {
+    if (destroyed) return;
+    const maxScroll = Math.max(scroller.scrollHeight - scroller.clientHeight, 0);
+    const strength = scrollEdgeStrength(side, scroller.scrollTop, maxScroll);
+    const inkLight = (opts.ink?.() ?? 1) > 0.5;
+    const style = scrollEdgeStyle(inkLight, opts.pinned);
+    const paint = paintFor(style, side);
+    edgeEl.style.setProperty("backdrop-filter", paint.filter);
+    edgeEl.style.setProperty("-webkit-backdrop-filter", paint.filter);
+    if (paint.mask) {
+      edgeEl.style.setProperty("mask-image", paint.mask);
+      edgeEl.style.setProperty("-webkit-mask-image", paint.mask);
+    } else {
+      edgeEl.style.removeProperty("mask-image");
+      edgeEl.style.removeProperty("-webkit-mask-image");
+    }
+    edgeEl.style.setProperty("background-image", paint.tone);
+    edgeEl.style.setProperty("opacity", strength.toFixed(3));
+  }
+  const onScroll = () => update();
+  scroller.addEventListener("scroll", onScroll, { passive: true });
+  update();
+  return {
+    update,
+    destroy() {
+      destroyed = true;
+      scroller.removeEventListener("scroll", onScroll);
+      edgeEl.style.removeProperty("backdrop-filter");
+      edgeEl.style.removeProperty("-webkit-backdrop-filter");
+      edgeEl.style.removeProperty("mask-image");
+      edgeEl.style.removeProperty("-webkit-mask-image");
+      edgeEl.style.removeProperty("background-image");
+      edgeEl.style.removeProperty("opacity");
+    }
+  };
+}
+
+// src/group-model.ts
+var SMOOTH = 0.25;
+var SETTLE = 1e-6;
+function fitLuma(members) {
+  const n = members.length;
+  let mx = 0;
+  let ml = 0;
+  for (const m of members) {
+    mx += m.x;
+    ml += m.sample.luma;
+  }
+  mx /= n;
+  ml /= n;
+  let sxx = 0;
+  let sxl = 0;
+  for (const m of members) {
+    const dx = m.x - mx;
+    sxx += dx * dx;
+    sxl += dx * m.sample.luma;
+  }
+  return { mx, ml, slope: sxx > 1e-6 ? sxl / sxx : 0 };
+}
+function aggregate(members) {
+  if (members.length === 0) return null;
+  const { mx, ml, slope } = fitLuma(members);
+  let busy = 0;
+  let lo = 1;
+  let hi = 0;
+  let base = 0;
+  let r = 0;
+  let g = 0;
+  let b = 0;
+  let legibility = 0;
+  for (const m of members) {
+    busy = Math.max(busy, m.sample.busy);
+    lo = Math.min(lo, m.sample.lo);
+    hi = Math.max(hi, m.sample.hi);
+    base = Math.max(base, m.sample.luma);
+    r += m.sample.r;
+    g += m.sample.g;
+    b += m.sample.b;
+    legibility = Math.max(legibility, m.legibility);
+  }
+  const k = members.length;
+  return {
+    plane: { mx, ml, slope, base, rest: [busy, lo, hi, r / k, g / k, b / k] },
+    // The polarity decision is one per group, by its AVERAGE lightness. Deciding on its own,
+    // each button used to end up a different color over a busy backdrop.
+    decision: { decisive: ml * 0.75 + hi * 0.25, legibility }
+  };
+}
+function smoothPlane(prev, next) {
+  if (!prev) return next;
+  const e = (was, now) => Math.abs(now - was) < SETTLE ? now : was + (now - was) * SMOOTH;
+  const ml = e(prev.ml, next.ml);
+  const slope = e(prev.slope, next.slope);
+  const base = e(prev.base, next.base);
+  const rest = next.rest.map((v, i) => e(prev.rest[i], v));
+  const same = next.mx === prev.mx && ml === prev.ml && slope === prev.slope && base === prev.base && rest.every((v, i) => v === prev.rest[i]);
+  return same ? prev : { mx: next.mx, ml, slope, base, rest };
+}
+function wantsPolarityChange(decision, polarity) {
+  return polarity === 1 ? decision.decisive >= FLIP_LUMA : decision.decisive < RETURN_LUMA;
+}
+function createGroupState(sink) {
+  const members = /* @__PURE__ */ new Map();
+  let plane = null;
+  let pending = 0;
+  let polarity = 1;
+  const measure = () => {
+    const next = aggregate([...members.values()]);
+    if (!next) {
+      pending = 0;
+      plane = null;
+      return null;
+    }
+    plane = smoothPlane(plane, next.plane);
+    return next.decision;
+  };
+  return {
+    report(id, x, y, sample, legibility) {
+      members.set(id, { x, y, sample, legibility });
+      const decision = measure();
+      if (!decision) return;
+      if (!wantsPolarityChange(decision, polarity)) {
+        pending = 0;
+        return;
+      }
+      pending += 1;
+      if (pending < CONFIRMATIONS) return;
+      pending = 0;
+      polarity = polarity === 1 ? 0 : 1;
+      sink.flip(polarity);
+    },
+    // Only recomputes the estimate: losing a member isn't a backdrop sample and can't count as a
+    // polarity confirmation — unmounting the group used to rack up CONFIRMATIONS instantly and
+    // trigger a recolor nobody was left to cancel.
+    release(id) {
+      if (members.delete(id)) measure();
+    },
+    plane: () => plane,
+    polarity: () => polarity,
+    confirmations: () => pending
+  };
+}
+
+// src/dom/group.ts
+function createGlassGroup(members, opts = {}) {
+  let polarity = 1;
+  let destroyed = false;
+  const state = createGroupState({
+    plane: () => {
+    },
+    flip: (next) => {
+      polarity = next;
+      for (const { handle } of members) handle.update();
+    }
+  });
+  function carryGlow(from, glow) {
+    members.forEach(({ el, handle }, index) => {
+      if (index === from) return;
+      if (!glow) {
+        handle.setNeighbourGlow(null);
+        return;
+      }
+      const rect = el.getBoundingClientRect();
+      const cx = rect.left + rect.width / 2;
+      const cy = rect.top + rect.height / 2;
+      const reach = Math.min(rect.width, rect.height) / 2 * TOUCH.glowReach;
+      const distance = Math.hypot(glow.pageX - cx, glow.pageY - cy);
+      const falloff = reach > 0 ? Math.max(0, 1 - distance / reach) : 0;
+      handle.setNeighbourGlow(falloff <= 0 ? null : { ...glow, strength: glow.strength * falloff });
+    });
+  }
+  function connect() {
+    members.forEach((entry, index) => {
+      entry.onGlow = (glow) => carryGlow(index, glow);
+    });
+  }
+  function update() {
+    if (destroyed) return;
+    const probe = opts.probe ?? probeBackdrop;
+    members.forEach(({ el, legibility }, index) => {
+      const rect = el.getBoundingClientRect();
+      if (rect.width <= 0 || rect.height <= 0) {
+        state.release(String(index));
+        return;
+      }
+      state.report(
+        String(index),
+        rect.left + rect.width / 2,
+        rect.top + rect.height / 2,
+        probe(el),
+        legibility ?? 0
+      );
+    });
+  }
+  connect();
+  update();
+  return {
+    update,
+    ink: () => polarity,
+    plane: () => state.plane(),
+    carryGlow,
+    destroy() {
+      destroyed = true;
+      carryGlow(-1, null);
+      members.forEach((_, index) => state.release(String(index)));
+    }
+  };
+}
+
+// src/dom/index.ts
+var SVG_NS = "http://www.w3.org/2000/svg";
+var FILTER_HOST_ATTR = "data-vireglass-filters";
+var filterCounter = 0;
+var attached = /* @__PURE__ */ new WeakMap();
+var TOUCH_RADIUS_FRACTION = TOUCH.radiusOfHalfSize;
+var WAVE_OF_TRAVEL = TOUCH.waveOfTravel;
+var RELEASE_WAVE = TOUCH.releaseWave;
+function waveImpulse(g) {
+  return halfMinDp(g) * MAX_STRETCH * WAVE_OF_TRAVEL;
+}
+var STYLE_ATTR = "data-vireglass-styles";
+function ensureRimStyles() {
+  if (document.querySelector(`style[${STYLE_ATTR}]`)) return;
+  const style = document.createElement("style");
+  style.setAttribute(STYLE_ATTR, "");
+  style.textContent = `[${GLASS_ATTR}]::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:var(--vireglass-rim-width,1px);background:var(--vireglass-rim,none);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}[${GLASS_ATTR}]::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:var(--vireglass-glow,none);opacity:var(--vireglass-glow-opacity,0)}`;
+  document.head.appendChild(style);
+}
+function getFilterHost() {
+  const existing = document.querySelector(`svg[${FILTER_HOST_ATTR}]`);
+  if (existing) return existing;
+  const svg = document.createElementNS(SVG_NS, "svg");
+  svg.setAttribute(FILTER_HOST_ATTR, "");
+  svg.setAttribute("width", "0");
+  svg.setAttribute("height", "0");
+  svg.setAttribute("aria-hidden", "true");
+  svg.style.position = "absolute";
+  svg.style.pointerEvents = "none";
+  svg.appendChild(document.createElementNS(SVG_NS, "defs"));
+  document.body.appendChild(svg);
+  return svg;
+}
+function buildFilterElement(id, mapUrl, optics, scale, spectral) {
+  const filter = document.createElementNS(SVG_NS, "filter");
+  filter.setAttribute("id", id);
+  filter.setAttribute("filterUnits", "objectBoundingBox");
+  filter.setAttribute("x", "0");
+  filter.setAttribute("y", "0");
+  filter.setAttribute("width", "1");
+  filter.setAttribute("height", "1");
+  filter.setAttribute("color-interpolation-filters", "sRGB");
+  const feImage = document.createElementNS(SVG_NS, "feImage");
+  feImage.setAttribute("href", mapUrl);
+  feImage.setAttribute("preserveAspectRatio", "none");
+  feImage.setAttribute("result", "map");
+  const feBlur = document.createElementNS(SVG_NS, "feGaussianBlur");
+  feBlur.setAttribute("in", "SourceGraphic");
+  feBlur.setAttribute("stdDeviation", String(Math.max(optics.blur, 0)));
+  feBlur.setAttribute("result", "blurred");
+  filter.append(feImage, feBlur);
+  const spread = optics.iorSpread;
+  if (spread > 1e-4) {
+    const base = refractionStrength(optics.ior);
+    const ratio = (shift) => base > 0 ? refractionStrength(optics.ior + shift) / base : 1;
+    const channels = [
+      ["dR", scale * ratio(DISPERSION.redShift * spread), "1 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0"],
+      ["dG", scale, "0 0 0 0 0  0 1 0 0 0  0 0 0 0 0  0 0 0 1 0"],
+      ["dB", scale * ratio(DISPERSION.blueShift * spread), "0 0 0 0 0  0 0 0 0 0  0 0 1 0 0  0 0 0 1 0"]
+    ];
+    for (const [name, chScale, matrix] of channels) {
+      const pass = document.createElementNS(SVG_NS, "feDisplacementMap");
+      pass.setAttribute("in", "blurred");
+      pass.setAttribute("in2", "map");
+      pass.setAttribute("scale", String(chScale));
+      pass.setAttribute("xChannelSelector", "R");
+      pass.setAttribute("yChannelSelector", "G");
+      pass.setAttribute("result", `${name}raw`);
+      const only = document.createElementNS(SVG_NS, "feColorMatrix");
+      only.setAttribute("in", `${name}raw`);
+      only.setAttribute("type", "matrix");
+      only.setAttribute("values", matrix);
+      only.setAttribute("result", name);
+      filter.append(pass, only);
+    }
+    const rg = document.createElementNS(SVG_NS, "feComposite");
+    rg.setAttribute("in", "dR");
+    rg.setAttribute("in2", "dG");
+    rg.setAttribute("operator", "arithmetic");
+    rg.setAttribute("k1", "0");
+    rg.setAttribute("k2", "1");
+    rg.setAttribute("k3", "1");
+    rg.setAttribute("k4", "0");
+    rg.setAttribute("result", "dRG");
+    const rgb = document.createElementNS(SVG_NS, "feComposite");
+    rgb.setAttribute("in", "dRG");
+    rgb.setAttribute("in2", "dB");
+    rgb.setAttribute("operator", "arithmetic");
+    rgb.setAttribute("k1", "0");
+    rgb.setAttribute("k2", "1");
+    rgb.setAttribute("k3", "1");
+    rgb.setAttribute("k4", "0");
+    rgb.setAttribute("result", "refracted");
+    filter.append(rg, rgb);
+    return withSpectral(filter, spectral);
+  }
+  const feDisplace = document.createElementNS(SVG_NS, "feDisplacementMap");
+  feDisplace.setAttribute("in", "blurred");
+  feDisplace.setAttribute("in2", "map");
+  feDisplace.setAttribute("scale", String(scale));
+  feDisplace.setAttribute("xChannelSelector", "R");
+  feDisplace.setAttribute("yChannelSelector", "G");
+  feDisplace.setAttribute("result", "refracted");
+  filter.append(feDisplace);
+  return withSpectral(filter, spectral);
+}
+function withSpectral(filter, spectral) {
+  if (!spectral) return filter;
+  const image = document.createElementNS(SVG_NS, "feImage");
+  image.setAttribute("href", spectral.url);
+  image.setAttribute("preserveAspectRatio", "none");
+  image.setAttribute("result", "hue");
+  const product = document.createElementNS(SVG_NS, "feComposite");
+  product.setAttribute("in", "refracted");
+  product.setAttribute("in2", "hue");
+  product.setAttribute("operator", "arithmetic");
+  product.setAttribute("k1", String(spectral.headroom));
+  product.setAttribute("k2", "0");
+  product.setAttribute("k3", "0");
+  product.setAttribute("k4", "0");
+  filter.append(image, product);
+  return filter;
+}
+function measureGeometry(el) {
+  const rect = el.getBoundingClientRect();
+  const radius = parseFloat(getComputedStyle(el).borderTopLeftRadius) || 0;
+  return roundedRectGeometry(rect.width, rect.height, radius);
+}
+function devicePixelRatio() {
+  return typeof window !== "undefined" && window.devicePixelRatio ? window.devicePixelRatio : 1;
+}
+function fallbackFilterCss(optics) {
+  const blurPx = Math.max(optics.blur, 1.5);
+  const saturate = 1 + optics.colorPickup;
+  return `blur(${blurPx}px) saturate(${saturate})`;
+}
+var to2553 = (v) => Math.round(Math.min(Math.max(v, 0), 1) * 255);
+function rgbCss(r, g, b) {
+  return `rgb(${to2553(r)} ${to2553(g)} ${to2553(b)})`;
+}
+function bodyCss(optics, sample, ink, accent) {
+  const body = withPresence(resolveBody(optics, sample, ink), optics, sample);
+  if (accent) {
+    const [r2, g2, b2] = accentTone(accent.color, sample.luma);
+    const amount = Math.max(accentAmount(accent), body.density);
+    return `rgba(${to2553(r2)}, ${to2553(g2)}, ${to2553(b2)}, ${amount.toFixed(3)})`;
+  }
+  const [r, g, b] = ambientFrom(sample);
+  const hue = (c) => body.tintLuma + (c - body.tintLuma) * optics.colorPickup;
+  return `rgba(${to2553(hue(r))}, ${to2553(hue(g))}, ${to2553(hue(b))}, ${body.density.toFixed(3)})`;
+}
+function attachGlass(el, opts = {}) {
+  if (typeof document === "undefined") {
+    throw new Error("vireglass/dom: attachGlass requires a browser DOM");
+  }
+  attached.get(el)?.destroy();
+  const id = `vireglass-filter-${filterCounter += 1}`;
+  const svgSupported = supportsSvgBackdropFilter();
+  let wasLight = (opts.material?.ink ?? VIREGLASS_MATERIAL.ink) > 0.5;
+  let filterEl = null;
+  let destroyed = false;
+  let mapKey = "";
+  let morph = null;
+  const onlyWhenTouched = opts.variant === "interactive";
+  let appear = onlyWhenTouched ? 0 : opts.appear ?? 1;
+  let accent = opts.accent;
+  let a11y = systemAccessibility();
+  const stopWatchingA11y = watchAccessibility((next) => {
+    a11y = next;
+    mapKey = "";
+    deform.setElastic(elasticAllowed(opts.accessibility ?? a11y));
+    apply();
+  });
+  warnIfNested(el);
+  ensureRimStyles();
+  el.setAttribute(GLASS_ATTR, "");
+  const positionWasStatic = getComputedStyle(el).position === "static";
+  if (positionWasStatic) el.style.setProperty("position", "relative");
+  function optics(patch) {
+    const base = resolveOptics(patch ?? opts.material);
+    const scaled = applyGlassScale(base, opts.scale ?? GLASS_SCALE_DEFAULT);
+    const settled = applyAccessibility(scaled, opts.accessibility ?? a11y);
+    return applyAppear(settled, appear);
+  }
+  function morphState() {
+    if (!morph) return {};
+    return { smoothing: morph.smoothing, morph: morph.shape, morph2: morph.shape2 };
+  }
+  function morphKey() {
+    if (!morph) return "0";
+    const part = (s) => s ? `${s.offsetX},${s.offsetY},${s.width},${s.height},${s.cornerRadius}` : "-";
+    return `${morph.smoothing}/${part(morph.shape)}/${part(morph.shape2)}`;
+  }
+  function apply() {
+    if (destroyed) return;
+    const geometry = opts.geometry ?? measureGeometry(el);
+    const opticsNow = optics();
+    const sample = opts.sample ?? probeBackdrop(el);
+    if (svgSupported) {
+      const key = `a${appear.toFixed(3)}|m${morphKey()}|${geometry.width}x${geometry.height}r${geometry.cornerRadius}@${devicePixelRatio()}:${opticsNow.refraction}:${opticsNow.refractionScale}:${opticsNow.bevelDp}:${opticsNow.blur}`;
+      if (key !== mapKey || !filterEl) {
+        const map = cached(`d|${key}`, () => buildDisplacementMap(opticsNow, geometry, devicePixelRatio(), morphState()));
+        const defs = getFilterHost().querySelector("defs");
+        const hue = hasSpectralEdge(opticsNow) ? cached(`h|${key}`, () => buildSpectralMap(opticsNow, geometry, devicePixelRatio())) : null;
+        const next = buildFilterElement(id, map.url, opticsNow, map.scale, hue);
+        if (filterEl?.parentNode) defs.replaceChild(next, filterEl);
+        else defs.appendChild(next);
+        filterEl = next;
+        mapKey = key;
+      }
+      el.style.setProperty("backdrop-filter", `url(#${id})`);
+      el.style.setProperty("-webkit-backdrop-filter", `url(#${id})`);
+    } else {
+      el.style.setProperty("backdrop-filter", fallbackFilterCss(opticsNow));
+      el.style.setProperty("-webkit-backdrop-filter", fallbackFilterCss(opticsNow));
+      el.style.backgroundColor = bodyCss(opticsNow, sample, wasLight ? 1 : 0, accent);
+    }
+    const light = shouldInkBeLight(sample, wasLight);
+    wasLight = light;
+    const [tr, tg, tb] = ambientFrom(sample);
+    el.style.setProperty("--vireglass-ink", light ? "1" : "0");
+    el.style.setProperty("--vireglass-tint", `${tr} ${tg} ${tb}`);
+    el.style.setProperty("--vireglass-body-density", String(opticsNow.bodyDensity));
+    const inkLevel = Math.round((light ? INK_LIGHT : INK_DARK) * 255);
+    el.style.setProperty("--vireglass-ink-color", `rgb(${inkLevel} ${inkLevel} ${inkLevel})`);
+    el.style.setProperty("--vireglass-tint-color", rgbCss(tr, tg, tb));
+    el.style.setProperty("--vireglass-body-color", bodyCss(opticsNow, sample, light ? 1 : 0, accent));
+    const pole = withPresence(resolveBody(opticsNow, sample, light ? 1 : 0), opticsNow, sample).tintLuma;
+    el.style.setProperty(
+      "--vireglass-rim",
+      (opts.accessibility ?? a11y).increaseContrast ? contrastRimCss(pole, contrastRimLuma(pole)) : rimGradientCss(opticsNow, [tr, tg, tb], opts.light ?? REST_LIGHT, appear)
+    );
+    el.style.setProperty("--vireglass-rim-width", `${RIM_WIDTH_PX}px`);
+    el.style.setProperty("--vireglass-radius", `${geometry.cornerRadius}px`);
+    el.style.setProperty("--vireglass-radius-min", `${concentricRadius(geometry.cornerRadius, geometry.cornerRadius, 0)}px`);
+    const shadow = boxShadowCss(geometry, sample, appear);
+    el.style.setProperty("--vireglass-shadow", shadow);
+    if (opts.shadow !== false) el.style.setProperty("box-shadow", shadow);
+  }
+  apply();
+  const deform = createDeform({ elastic: elasticAllowed(opts.accessibility ?? a11y) });
+  let frame = null;
+  let lastFrameAt = 0;
+  let interacting = false;
+  function localPoint(e) {
+    const rect = el.getBoundingClientRect();
+    return [e.clientX - rect.left - rect.width / 2, e.clientY - rect.top - rect.height / 2];
+  }
+  function paintInteraction(sampleOut) {
+    const geometry = opts.geometry ?? measureGeometry(el);
+    const base = optics();
+    const rise = raiseIntoGlass(sampleOut.press);
+    const risen = optics({ ...opts.material, roughness: (opts.material?.roughness ?? VIREGLASS_MATERIAL.roughness) * rise.solid });
+    const map = buildDisplacementMap(risen, geometry, interacting ? 1 : devicePixelRatio(), {
+      ...morphState(),
+      touch: {
+        x: sampleOut.touchX,
+        y: sampleOut.touchY,
+        pullX: sampleOut.pullX,
+        pullY: sampleOut.pullY,
+        press: sampleOut.press,
+        radius: halfMinDp(geometry) * TOUCH_RADIUS_FRACTION,
+        waveAmp: sampleOut.waveAmp,
+        wavePhase: sampleOut.wavePhase
+      }
+    });
+    if (filterEl) {
+      const feImage = filterEl.querySelector("feImage");
+      const feDisplace = filterEl.querySelector("feDisplacementMap");
+      feImage?.setAttribute("href", map.url);
+      feDisplace?.setAttribute("scale", String(map.scale));
+    }
+    mapKey = "";
+    paintGlow(sampleOut.touchX, sampleOut.touchY, sampleOut.active * base.edgeLight, geometry);
+    const rect = el.getBoundingClientRect();
+    opts.onGlow?.({
+      pageX: rect.left + rect.width / 2 + sampleOut.touchX,
+      pageY: rect.top + rect.height / 2 + sampleOut.touchY,
+      strength: sampleOut.active
+    });
+  }
+  function paintGlow(x, y, strength, geometry) {
+    if (strength <= 1e-3) {
+      el.style.setProperty("--vireglass-glow-opacity", "0");
+      return;
+    }
+    const [gr, gg, gb] = ambientFrom(opts.sample ?? probeBackdrop(el));
+    const cx = (x + geometry.width / 2) / geometry.width * 100;
+    const cy = (y + geometry.height / 2) / geometry.height * 100;
+    const reach = halfMinDp(geometry) * TOUCH_RADIUS_FRACTION;
+    el.style.setProperty(
+      "--vireglass-glow",
+      `radial-gradient(circle ${reach.toFixed(0)}px at ${cx.toFixed(1)}% ${cy.toFixed(1)}%, rgba(${to2553(gr)},${to2553(gg)},${to2553(gb)},1) 0%, rgba(${to2553(gr)},${to2553(gg)},${to2553(gb)},0) 100%)`
+    );
+    el.style.setProperty("--vireglass-glow-opacity", strength.toFixed(3));
+  }
+  function tick(now) {
+    if (destroyed) return;
+    const dt = lastFrameAt ? (now - lastFrameAt) / 1e3 : 1 / 60;
+    lastFrameAt = now;
+    deform.step(dt);
+    const s = deform.sample();
+    if (onlyWhenTouched) appear = s.active;
+    paintInteraction(s);
+    if (deform.idle()) {
+      interacting = false;
+      frame = null;
+      lastFrameAt = 0;
+      el.style.setProperty("--vireglass-glow-opacity", "0");
+      opts.onGlow?.(null);
+      apply();
+      return;
+    }
+    frame = requestAnimationFrame(tick);
+  }
+  function run() {
+    if (frame === null && !destroyed) frame = requestAnimationFrame(tick);
+  }
+  let grabX = 0;
+  let grabY = 0;
+  function onDown(e) {
+    const [x, y] = localPoint(e);
+    const geometry = opts.geometry ?? measureGeometry(el);
+    interacting = true;
+    grabX = x;
+    grabY = y;
+    el.setPointerCapture?.(e.pointerId);
+    deform.grab(x, y, waveImpulse(geometry));
+    run();
+  }
+  function onMove(e) {
+    if (!interacting) return;
+    const [x, y] = localPoint(e);
+    const geometry = opts.geometry ?? measureGeometry(el);
+    deform.drag(x - grabX, y - grabY, halfMinDp(geometry) * MAX_STRETCH);
+    run();
+  }
+  function onUp(e) {
+    if (!interacting) return;
+    const geometry = opts.geometry ?? measureGeometry(el);
+    if (e) el.releasePointerCapture?.(e.pointerId);
+    deform.release(waveImpulse(geometry) * RELEASE_WAVE);
+    run();
+  }
+  if (opts.interactive !== false) {
+    el.addEventListener("pointerdown", onDown);
+    el.addEventListener("pointermove", onMove);
+    el.addEventListener("pointerup", onUp);
+    el.addEventListener("pointercancel", onUp);
+    el.addEventListener("pointerleave", onUp);
+  }
+  let resizeObserver = null;
+  if (!opts.geometry && typeof ResizeObserver !== "undefined") {
+    resizeObserver = new ResizeObserver(() => apply());
+    resizeObserver.observe(el);
+  }
+  function destroy() {
+    destroyed = true;
+    stopWatchingA11y();
+    if (attached.get(el) === handle) attached.delete(el);
+    if (frame !== null) cancelAnimationFrame(frame);
+    frame = null;
+    el.removeEventListener("pointerdown", onDown);
+    el.removeEventListener("pointermove", onMove);
+    el.removeEventListener("pointerup", onUp);
+    el.removeEventListener("pointercancel", onUp);
+    el.removeEventListener("pointerleave", onUp);
+    el.style.removeProperty("--vireglass-glow");
+    el.style.removeProperty("--vireglass-glow-opacity");
+    resizeObserver?.disconnect();
+    resizeObserver = null;
+    if (filterEl?.parentNode) filterEl.parentNode.removeChild(filterEl);
+    filterEl = null;
+    mapKey = "";
+    el.style.removeProperty("backdrop-filter");
+    el.style.removeProperty("-webkit-backdrop-filter");
+    el.style.removeProperty("background-color");
+    el.style.removeProperty("--vireglass-ink");
+    el.style.removeProperty("--vireglass-tint");
+    el.style.removeProperty("--vireglass-body-density");
+    el.style.removeProperty("--vireglass-ink-color");
+    el.style.removeProperty("--vireglass-tint-color");
+    el.style.removeProperty("--vireglass-body-color");
+    el.style.removeProperty("--vireglass-rim");
+    el.style.removeProperty("--vireglass-rim-width");
+    el.style.removeProperty("--vireglass-shadow");
+    el.style.removeProperty("--vireglass-radius");
+    el.style.removeProperty("--vireglass-radius-min");
+    el.style.removeProperty("box-shadow");
+    el.removeAttribute(GLASS_ATTR);
+    if (positionWasStatic) el.style.removeProperty("position");
+  }
+  const handle = {
+    update: apply,
+    setAppear(t) {
+      const next = t < 0 ? 0 : t > 1 ? 1 : t;
+      if (next === appear) return;
+      appear = next;
+      apply();
+    },
+    setAccent(next) {
+      accent = next ?? void 0;
+      apply();
+    },
+    setNeighbourGlow(glow) {
+      if (destroyed || interacting) return;
+      const geometry = opts.geometry ?? measureGeometry(el);
+      if (!glow) {
+        paintGlow(0, 0, 0, geometry);
+        return;
+      }
+      const rect = el.getBoundingClientRect();
+      paintGlow(
+        glow.pageX - (rect.left + rect.width / 2),
+        glow.pageY - (rect.top + rect.height / 2),
+        glow.strength,
+        geometry
+      );
+    },
+    setMorph(next) {
+      morph = next && next.smoothing > 0 ? next : null;
+      mapKey = "";
+      apply();
+    },
+    destroy
+  };
+  attached.set(el, handle);
+  return handle;
+}
+
+exports.RIM_WIDTH_PX = RIM_WIDTH_PX;
+exports.attachGlass = attachGlass;
+exports.attachScrollEdge = attachScrollEdge;
+exports.boxShadowCss = boxShadowCss;
+exports.buildDisplacementMap = buildDisplacementMap;
+exports.buildSpectralMap = buildSpectralMap;
+exports.cached = cached;
+exports.clearMapCache = clearMapCache;
+exports.compositeLayers = compositeLayers;
+exports.contrastRimCss = contrastRimCss;
+exports.createGlassGroup = createGlassGroup;
+exports.hasSpectralEdge = hasSpectralEdge;
+exports.lightConicAngle = lightConicAngle;
+exports.mapCacheSize = mapCacheSize;
+exports.paintFor = paintFor;
+exports.parseColor = parseColor;
+exports.probeBackdrop = probeBackdrop;
+exports.renderDisplacementPixels = renderDisplacementPixels;
+exports.renderSpectralPixels = renderSpectralPixels;
+exports.resetSupportCache = resetSupportCache;
+exports.resolveBody = resolveBody;
+exports.rimGradientCss = rimGradientCss;
+exports.rimLobe = rimLobe;
+exports.shadowAlphaFrom = shadowAlphaFrom;
+exports.statsFromSamples = statsFromSamples;
+exports.supportsBackdropFilter = supportsBackdropFilter;
+exports.supportsSvgBackdropFilter = supportsSvgBackdropFilter;
+exports.systemAccessibility = systemAccessibility;
+exports.watchAccessibility = watchAccessibility;
+exports.withPresence = withPresence;
+//# sourceMappingURL=dom.cjs.map
+//# sourceMappingURL=dom.cjs.map