vireglass 2.3.1 → 3.0.1

package/dist/dom.cjs

@@ -41,7 +41,41 @@ var RIM = {
    */
   darkEdge: 0.22,
   /** Width of the hairline, CSS px. "About a point, not a band and not a bevel" (§2). */
-  widthPx: 1
+  widthPx: 1,
+  /**
+   * How strongly the line is drawn, by the lightness around the element. The rim is a reflection
+   * of the surroundings, so it is faint over a dark one and plain over a bright one, not white at
+   * full strength everywhere (§2, §6).
+   *
+   * MEASURED off the controls of A 2:17 (over dark video), M 2:52 (over sky) and A 2:18 (over
+   * grass), as the brightest rim bin's OKLab lightness over the surround's: 0.24 to 0.27 over dark,
+   * 0.25 over sky, 0.37 over grass. Through the DOM path onto the same backdrops these land within
+   * 0.08 of the smooth rows (docs/dom.md); a line white at full strength reads 0.70 to 0.80 over the
+   * dark frames.
+   */
+  strengthDark: 0.37,
+  strengthLight: 0.95,
+  /**
+   * The surround lightness between which the strength moves from one to the other. UNMEASURED: the
+   * two ends are, and the controls in between were not looked for.
+   */
+  ambientFrom: 0.15,
+  ambientTo: 0.45,
+  /**
+   * The share of the peak that the line keeps along the whole contour, away from the key light.
+   * MEASURED: the reference line goes all the way round. Its dimmest bin sits 0.06 to 0.12 of
+   * lightness over the surround on the dark frames, against a peak of 0.24 to 0.27 (A 2:17).
+   */
+  contour: 0.3,
+  /** How far the line's colour is lifted from the surroundings' toward white. UNMEASURED: the
+   *  lens always had 0.75 here, and this is that figure with a name. */
+  whiteShare: 0.75,
+  /**
+   * The reflectance (`fresnelStrength`) at which the line is drawn at the strengths above: that
+   * of ordinary glass, index 1.5. A denser medium does not draw it brighter than they say; a
+   * thinner one draws it fainter. UNMEASURED.
+   */
+  reflectanceRef: 0.7
 };
 var BODY = {
   /** Lightness ceiling for the body when legibility is loose. */
@@ -55,10 +89,14 @@ var BODY = {
   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,
+  /**
+   * The spread under the element at which the ink's legibility requirement starts to bind, and the
+   * spread where it binds fully. Over a flat backdrop polarity flips before the ink drowns, so
+   * the body does not darken under a light glyph there; over texture it does. UNMEASURED: the
+   * reference shows a lighter body under a white glyph over sky, nothing about texture.
+   */
+  inkBusyFrom: 0.02,
+  inkBusyTo: 0.12,
   /** Ceiling on any single demand, so one requirement cannot make the glass opaque on its own. */
   maxDemand: 0.92,
   /**
@@ -67,7 +105,13 @@ var BODY = {
    * separation is the ceiling, and glass at `maxDemand` has stopped being a window. Better to
    * separate as far as transparency allows and no further. UNMEASURED.
    */
-  presenceDemand: 0.5
+  presenceDemand: 0.5,
+  /**
+   * The density at which the body is wholly the ink's own pole. Between `presenceDemand` and this
+   * the body moves from the light a thin body carries to the pole: a density no presence floor
+   * reaches is one the ink's legibility, or a system setting, has asked for. UNMEASURED.
+   */
+  inkPoleTo: 0.8
 };
 var SHADOW = {
   /**
@@ -135,6 +179,21 @@ var BEVEL = {
   slopeMax: 3.2
 };
 var EPSILON = 1e-5;
+var MEDIUM = {
+  /** The lightness content under the glass is pulled toward, and how hard. The medium both removes
+   *  light and mixes scattered light back in: over a light backdrop the body darkens, over a dark
+   *  one it lightens. A layer that only ADDED light pushed the body the wrong way over light
+   *  backdrops (M 2:35). */
+  luma: 0.4,
+  pull: 0.07,
+  /** Ambient light reaching the body on top of that pull. */
+  ambientSpill: 0.01,
+  /** Glass concentrates light: the body is a touch lighter than what lies beneath it (M 2:29). */
+  concentrate: 0.01,
+  /** Scattered light on a frosted element is an ADDITION over the backdrop, not a fraction of the
+   *  way to the tint — a fraction goes to zero once the backdrop reaches the tint's lightness and
+   *  darkens past it (docs/benchmarks.md). */
+  matteLift: 0.1};
 var LENS = {
   /** Same reason, for the profile's slope. */
   slopeMax: 40,
@@ -1028,8 +1087,10 @@ var {
   tintLight: TINT_LIGHT,
   groundSpan: GROUND_SPAN,
   busyEdge: BUSY_EDGE,
-  darkSideFrom: DARK_SIDE_FROM,
-  darkSideTo: DARK_SIDE_TO,
+  inkBusyFrom: INK_BUSY_FROM,
+  inkBusyTo: INK_BUSY_TO,
+  inkPoleTo: INK_POLE_TO,
+  presenceDemand: PRESENCE_DEMAND,
   maxDemand: MAX_DEMAND
 } = BODY;
 var clamp3 = (v, lo, hi) => v < lo ? lo : v > hi ? hi : v;
@@ -1038,6 +1099,10 @@ function smoothstep2(edge0, edge1, x) {
   const t = clamp3((x - edge0) / (edge1 - edge0), 0, 1);
   return t * t * (3 - 2 * t);
 }
+function tintFor(density, need, pole) {
+  const asked = Math.max(clamp3(need / Math.max(density, 1e-4), 0, 1), smoothstep2(PRESENCE_DEMAND, INK_POLE_TO, density));
+  return mix(TINT_LIGHT, pole, asked);
+}
 function resolveBody(optics, sample, ink) {
   const strict = clamp3(optics.legibility * 2, 0, 1);
   const capLight = mix(BODY_CAP_LOOSE, BODY_CAP_TIGHT, strict);
@@ -1046,33 +1111,45 @@ function resolveBody(optics, sample, ink) {
   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 pole = mix(TINT_LIGHT, TINT_DARK, pol);
   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 structured = smoothstep2(INK_BUSY_FROM, INK_BUSY_TO, busy);
+  const needForInk = mix(needForDark, needForLight, pol) * demand * structured;
   const ground = busy * optics.legibility * GROUND_SPAN;
-  return { density: Math.max(Math.max(optics.bodyDensity, ground), needForInk), tintLuma };
+  const density = Math.max(Math.max(optics.bodyDensity, ground), needForInk);
+  return { density, tintLuma: tintFor(density, needForInk, pole), need: needForInk, pole };
 }
-function withPresence(body, optics, sample) {
+function withPresence(body, optics, _sample) {
   if (optics.presence <= 0) return body;
-  const mean = clamp3(sample.luma, 0, 1);
-  const above = Math.abs(body.tintLuma - mean) > 1e-4 ? body.tintLuma > mean : mean < 0.5;
-  const pole = above ? TINT_LIGHT : TINT_DARK;
-  const separation = Math.min(optics.presence, Math.abs(pole - mean));
-  const reached = Math.abs(body.tintLuma - mean) * body.density;
-  if (reached >= separation) return body;
-  const needed = separation / Math.max(Math.abs(pole - mean), 1e-4);
-  return {
-    density: Math.max(body.density, Math.min(needed, BODY.presenceDemand)),
-    // Left where the tint law put it, unless it landed exactly on the backdrop — which is the
-    // case that used to be created here rather than avoided.
-    tintLuma: Math.abs(body.tintLuma - mean) > 1e-4 ? body.tintLuma : pole
+  const density = Math.max(body.density, Math.min(optics.presence / TINT_LIGHT, PRESENCE_DEMAND));
+  return { ...body, density, tintLuma: tintFor(density, body.need, body.pole) };
+}
+function hueOf(c) {
+  const l = 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
+  if (l < 0.02) return [1, 1, 1];
+  return [clamp3(c[0] / l, 0, 2), clamp3(c[1] / l, 0, 2), clamp3(c[2] / l, 0, 2)];
+}
+function bodyLayer(optics, sample, ink, ambient, appear = 1) {
+  const a = clamp3(appear, 0, 1);
+  const body = withPresence(resolveBody(optics, sample, ink), optics);
+  const hue = hueOf(ambient);
+  const pickup = clamp3(optics.colorPickup, 0, 1);
+  const density = clamp3(body.density * a, 0, 1);
+  const matte = optics.legibility * MEDIUM.matteLift * a;
+  const pull = MEDIUM.pull * a;
+  const spill = optics.edgeLight * MEDIUM.ambientSpill * a;
+  const lift = MEDIUM.concentrate * a;
+  const alpha = 1 - (1 - lift) * (1 - pull) * (1 - density);
+  const channel = (i) => {
+    const tintHue = mix(1, hue[i], pickup);
+    const added = (1 - pull) * (density * tintHue * body.tintLuma + matte * tintHue) + pull * hue[i] * MEDIUM.luma + ambient[i] * spill;
+    return alpha > 1e-6 ? clamp3(((1 - lift) * added + lift) / alpha, 0, 1) : 0;
   };
+  return { r: channel(0), g: channel(1), b: channel(2), alpha };
 }
 
 // src/accessibility.ts
@@ -1202,7 +1279,14 @@ function concentricRadius(outerRadius, inset, minimum = 0) {
 }
 
 // src/dom/rim.ts
-var { lobeExponent: LOBE_EXPONENT, opposingArc: OPPOSING_ARC, darkEdge: DARK_EDGE } = RIM;
+var {
+  lobeExponent: LOBE_EXPONENT,
+  opposingArc: OPPOSING_ARC,
+  darkEdge: DARK_EDGE,
+  contour: CONTOUR,
+  whiteShare: WHITE_SHARE,
+  reflectanceRef: REFLECTANCE_REF
+} = RIM;
 var STOPS = 48;
 function lightConicAngle(light) {
   const [lx, ly] = light;
@@ -1217,30 +1301,48 @@ function rimLobe(deltaDeg, specular) {
 }
 var clamp016 = (v) => v < 0 ? 0 : v > 1 ? 1 : v;
 var to2552 = (v) => Math.round(clamp016(v) * 255);
+var mixTo = (a, b, t) => a + (b - a) * t;
+function smoothstep3(edge0, edge1, x) {
+  const t = clamp016((x - edge0) / (edge1 - edge0));
+  return t * t * (3 - 2 * t);
+}
+function ambientLuma(ambient) {
+  return 0.2126 * ambient[0] + 0.7152 * ambient[1] + 0.0722 * ambient[2];
+}
+function rimStrength(luma3) {
+  return mixTo(RIM.strengthDark, RIM.strengthLight, smoothstep3(RIM.ambientFrom, RIM.ambientTo, luma3));
+}
+function rimLineAlpha(deltaDeg, optics, luma3) {
+  const reflect = Math.min(optics.fresnel / REFLECTANCE_REF, 1);
+  const damping = optics.fresnel > 0 ? optics.specular / optics.fresnel : 0;
+  const lobe = rimLobe(deltaDeg, damping);
+  return clamp016(rimStrength(luma3) * reflect * (CONTOUR + (1 - CONTOUR) * lobe));
+}
 function rimGradientCss(optics, ambient, light, appear = 1) {
   const present = clamp016(appear);
   const start = lightConicAngle(light);
   const [ar, ag, ab] = ambient;
-  const stops = [];
+  const luma3 = ambientLuma(ambient);
+  const line = [];
   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`);
+    const r = ar + (1 - ar) * clamp016(WHITE_SHARE + fringe);
+    const g = ag + (1 - ag) * WHITE_SHARE;
+    const b = ab + (1 - ab) * clamp016(WHITE_SHARE - fringe);
+    const alpha = rimLineAlpha(angle, optics, luma3) * present;
+    line.push(`rgba(${to2552(r)},${to2552(g)},${to2552(b)},${alpha.toFixed(3)}) ${angle.toFixed(1)}deg`);
   }
-  return `conic-gradient(from ${start.toFixed(1)}deg, ${stops.join(", ")})`;
+  const dark = `rgba(0,0,0,${(DARK_EDGE * present).toFixed(3)})`;
+  return `conic-gradient(from ${start.toFixed(1)}deg, ${line.join(", ")}), conic-gradient(${dark} 0deg, ${dark} 360deg)`;
 }
 var RIM_WIDTH_PX = RIM.widthPx;
-function contrastRimCss(bodyLuma, rimLuma) {
+function contrastRimCss(bodyLuma, rimLuma, appear = 1) {
   const v = to2552(rimLuma);
-  return `conic-gradient(rgb(${v},${v},${v}) 0deg, rgb(${v},${v},${v}) 360deg)`;
+  const present = clamp016(appear);
+  const colour = present >= 1 ? `rgb(${v},${v},${v})` : `rgba(${v},${v},${v},${present.toFixed(3)})`;
+  return `conic-gradient(${colour} 0deg, ${colour} 360deg)`;
 }
 
 // src/dom/nesting.ts
@@ -1256,6 +1358,15 @@ function warnIfNested(el) {
     `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.`
   );
 }
+
+// src/dom/style-hold.ts
+function holdProperty(style, name) {
+  const saved = style.getPropertyValue(name);
+  return () => {
+    if (saved) style.setProperty(name, saved);
+    else style.removeProperty(name);
+  };
+}
 var REST_LIGHT = [-0.577, -0.817];
 
 // src/touch-response.ts
@@ -1755,16 +1866,16 @@ 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);
+function bodyCss(optics, sample, ink, accent, appear) {
   if (accent) {
-    const [r2, g2, b2] = accentTone(accent.color, sample.luma);
+    const settled = applyAppear(optics, appear);
+    const body = withPresence(resolveBody(settled, sample, ink), settled);
+    const [r, g, b] = accentTone(accent.color, sample.luma);
     const amount = Math.max(accentAmount(accent), body.density);
-    return `rgba(${to2553(r2)}, ${to2553(g2)}, ${to2553(b2)}, ${amount.toFixed(3)})`;
+    return `rgba(${to2553(r)}, ${to2553(g)}, ${to2553(b)}, ${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)})`;
+  const layer = bodyLayer(optics, sample, ink, ambientFrom(sample), appear);
+  return `rgba(${to2553(layer.r)}, ${to2553(layer.g)}, ${to2553(layer.b)}, ${layer.alpha.toFixed(3)})`;
 }
 function attachGlass(el, opts = {}) {
   if (typeof document === "undefined") {
@@ -1781,6 +1892,7 @@ function attachGlass(el, opts = {}) {
   const onlyWhenTouched = opts.variant === "interactive";
   let appear = onlyWhenTouched ? 0 : opts.appear ?? 1;
   let accent = opts.accent;
+  let supplied = opts.sample;
   let a11y = systemAccessibility();
   const stopWatchingA11y = watchAccessibility((next) => {
     a11y = next;
@@ -1792,13 +1904,16 @@ function attachGlass(el, opts = {}) {
   const host = hostFor(el);
   ensureRimStyles(host);
   el.setAttribute(GLASS_ATTR, "");
+  const restoreBackground = holdProperty(el.style, "background-color");
   const positionWasStatic = getComputedStyle(el).position === "static";
   if (positionWasStatic) el.style.setProperty("position", "relative");
-  function optics(patch) {
+  function settledOptics(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);
+    return applyAccessibility(scaled, opts.accessibility ?? a11y);
+  }
+  function optics(patch) {
+    return applyAppear(settledOptics(patch), appear);
   }
   function morphState() {
     if (!morph) return {};
@@ -1813,7 +1928,10 @@ function attachGlass(el, opts = {}) {
     if (destroyed) return;
     const geometry = opts.geometry ?? measureGeometry(el);
     const opticsNow = optics();
-    const sample = opts.sample ?? probeBackdrop(el);
+    const sample = supplied ?? probeBackdrop(el);
+    const light = shouldInkBeLight(sample, wasLight);
+    wasLight = light;
+    const body = opts.body === false ? null : bodyCss(settledOptics(), sample, light ? 1 : 0, accent, appear);
     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) {
@@ -1831,10 +1949,8 @@ function attachGlass(el, opts = {}) {
     } 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;
+    if (body) el.style.backgroundColor = body;
     const [tr, tg, tb] = ambientFrom(sample);
     el.style.setProperty("--vireglass-ink", light ? "1" : "0");
     el.style.setProperty("--vireglass-tint", `${tr} ${tg} ${tb}`);
@@ -1842,11 +1958,14 @@ function attachGlass(el, opts = {}) {
     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-body-color",
+      body ?? bodyCss(settledOptics(), sample, light ? 1 : 0, accent, appear)
+    );
+    const pole = withPresence(resolveBody(opticsNow, sample, light ? 1 : 0), opticsNow).tintLuma;
     el.style.setProperty(
       "--vireglass-rim",
-      (opts.accessibility ?? a11y).increaseContrast ? contrastRimCss(pole, contrastRimLuma(pole)) : rimGradientCss(opticsNow, [tr, tg, tb], opts.light ?? REST_LIGHT, appear)
+      (opts.accessibility ?? a11y).increaseContrast ? contrastRimCss(pole, contrastRimLuma(pole), appear) : 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`);
@@ -1904,7 +2023,7 @@ function attachGlass(el, opts = {}) {
       el.style.setProperty("--vireglass-glow-opacity", "0");
       return;
     }
-    const [gr, gg, gb] = ambientFrom(opts.sample ?? probeBackdrop(el));
+    const [gr, gg, gb] = ambientFrom(supplied ?? 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;
@@ -1994,7 +2113,7 @@ function attachGlass(el, opts = {}) {
     mapKey = "";
     el.style.removeProperty("backdrop-filter");
     el.style.removeProperty("-webkit-backdrop-filter");
-    el.style.removeProperty("background-color");
+    if (opts.body !== false) restoreBackground();
     el.style.removeProperty("--vireglass-ink");
     el.style.removeProperty("--vireglass-tint");
     el.style.removeProperty("--vireglass-body-density");
@@ -2042,6 +2161,10 @@ function attachGlass(el, opts = {}) {
       mapKey = "";
       apply();
     },
+    setSample(next) {
+      supplied = next ?? void 0;
+      apply();
+    },
     destroy
   };
   attached.set(el, handle);
@@ -2049,8 +2172,10 @@ function attachGlass(el, opts = {}) {
 }
 
 exports.RIM_WIDTH_PX = RIM_WIDTH_PX;
+exports.ambientLuma = ambientLuma;
 exports.attachGlass = attachGlass;
 exports.attachScrollEdge = attachScrollEdge;
+exports.bodyLayer = bodyLayer;
 exports.boxShadowCss = boxShadowCss;
 exports.buildDisplacementMap = buildDisplacementMap;
 exports.buildSpectralMap = buildSpectralMap;
@@ -2070,7 +2195,9 @@ exports.renderSpectralPixels = renderSpectralPixels;
 exports.resetSupportCache = resetSupportCache;
 exports.resolveBody = resolveBody;
 exports.rimGradientCss = rimGradientCss;
+exports.rimLineAlpha = rimLineAlpha;
 exports.rimLobe = rimLobe;
+exports.rimStrength = rimStrength;
 exports.shadowAlphaFrom = shadowAlphaFrom;
 exports.statsFromSamples = statsFromSamples;
 exports.supportsBackdropFilter = supportsBackdropFilter;