vireglass 2.3.1 → 3.0.1

package/dist/dom.js

@@ -1,8 +1,8 @@
-import { shadowTint, NO_ACCESSIBILITY, createGroupState, createDeform, elasticAllowed, contrastRimLuma, concentricRadius, scrollEdgeStrength, scrollEdgeStyle, applyGlassScale, GLASS_SCALE_DEFAULT, applyAccessibility, applyAppear, accentTone, accentAmount, raiseIntoGlass } from './chunk-CTTZNZFV.js';
+import { shadowTint, NO_ACCESSIBILITY, createGroupState, createDeform, elasticAllowed, contrastRimLuma, concentricRadius, scrollEdgeStrength, scrollEdgeStyle, applyAppear, accentTone, accentAmount, applyGlassScale, GLASS_SCALE_DEFAULT, applyAccessibility, raiseIntoGlass } from './chunk-VLDD655U.js';
 import { ambientFrom, shouldInkBeLight, INK_LIGHT, INK_DARK } from './chunk-JNRZNMJJ.js';
-import { touchWarp, sceneDistance, sceneGradient, sdfRoundedRect, VIREGLASS_MATERIAL, REST_LIGHT, resolveOptics, refractionStrength } from './chunk-V47YU75P.js';
-import { shadowOpacity, bevelDp, thicknessDp, rimDp, shadowOpacityFrom, shadowReachDp, halfMinDp, MAX_STRETCH, roundedRectGeometry } from './chunk-SLRPHDV7.js';
-import { LENS, BODY, RIM, TOUCH, SHADOW, SHADOW_GAP, SCROLL_EDGE, BEVEL, SPECTRAL, DISPERSION } from './chunk-MMPK6DCK.js';
+import { touchWarp, sceneDistance, sceneGradient, sdfRoundedRect, VIREGLASS_MATERIAL, REST_LIGHT, resolveOptics, refractionStrength } from './chunk-YAN2OK4H.js';
+import { shadowOpacity, bevelDp, thicknessDp, rimDp, shadowOpacityFrom, shadowReachDp, halfMinDp, MAX_STRETCH, roundedRectGeometry } from './chunk-Z4FKYY47.js';
+import { LENS, BODY, RIM, TOUCH, SHADOW, SHADOW_GAP, MEDIUM, SCROLL_EDGE, BEVEL, SPECTRAL, DISPERSION } from './chunk-CPSIY2DZ.js';
 
 // src/dom/displacement.ts
 var SCALE_GAIN = 0.75;
@@ -392,8 +392,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 clamp = (v, lo, hi) => v < lo ? lo : v > hi ? hi : v;
@@ -402,6 +404,10 @@ function smoothstep2(edge0, edge1, x) {
   const t = clamp((x - edge0) / (edge1 - edge0), 0, 1);
   return t * t * (3 - 2 * t);
 }
+function tintFor(density, need, pole) {
+  const asked = Math.max(clamp(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 = clamp(optics.legibility * 2, 0, 1);
   const capLight = mix(BODY_CAP_LOOSE, BODY_CAP_TIGHT, strict);
@@ -410,33 +416,45 @@ function resolveBody(optics, sample, ink) {
   const demand = clamp(optics.legibility * 4, 0, 1);
   const mean = clamp(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 ? clamp((inkHi - capLight) / Math.max(inkHi - TINT_DARK, 1e-4), 0, MAX_DEMAND) : 0;
   const needForDark = inkLo < floorDark ? clamp((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 = clamp(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 [clamp(c[0] / l, 0, 2), clamp(c[1] / l, 0, 2), clamp(c[2] / l, 0, 2)];
+}
+function bodyLayer(optics, sample, ink, ambient, appear = 1) {
+  const a = clamp(appear, 0, 1);
+  const body = withPresence(resolveBody(optics, sample, ink), optics);
+  const hue = hueOf(ambient);
+  const pickup = clamp(optics.colorPickup, 0, 1);
+  const density = clamp(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 ? clamp(((1 - lift) * added + lift) / alpha, 0, 1) : 0;
   };
+  return { r: channel(0), g: channel(1), b: channel(2), alpha };
 }
 
 // src/dom/preferences.ts
@@ -480,7 +498,14 @@ function watchAccessibility(onChange) {
 }
 
 // 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;
@@ -495,30 +520,48 @@ function rimLobe(deltaDeg, specular) {
 }
 var clamp012 = (v) => v < 0 ? 0 : v > 1 ? 1 : v;
 var to2552 = (v) => Math.round(clamp012(v) * 255);
+var mixTo = (a, b, t) => a + (b - a) * t;
+function smoothstep3(edge0, edge1, x) {
+  const t = clamp012((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(luma2) {
+  return mixTo(RIM.strengthDark, RIM.strengthLight, smoothstep3(RIM.ambientFrom, RIM.ambientTo, luma2));
+}
+function rimLineAlpha(deltaDeg, optics, luma2) {
+  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 clamp012(rimStrength(luma2) * reflect * (CONTOUR + (1 - CONTOUR) * lobe));
+}
 function rimGradientCss(optics, ambient, light, appear = 1) {
   const present = clamp012(appear);
   const start = lightConicAngle(light);
   const [ar, ag, ab] = ambient;
-  const stops = [];
+  const luma2 = 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 = clamp012(key * optics.fresnel);
-    const r = ar + (1 - ar) * clamp012(lift + fringe);
-    const g = ag + (1 - ag) * lift;
-    const b = ab + (1 - ab) * clamp012(lift - fringe);
-    const alpha = clamp012(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) * clamp012(WHITE_SHARE + fringe);
+    const g = ag + (1 - ag) * WHITE_SHARE;
+    const b = ab + (1 - ab) * clamp012(WHITE_SHARE - fringe);
+    const alpha = rimLineAlpha(angle, optics, luma2) * 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 = clamp012(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
@@ -535,6 +578,15 @@ function warnIfNested(el) {
   );
 }
 
+// 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);
+  };
+}
+
 // src/dom/scroll-edge.ts
 function paintFor(style, side) {
   const direction = side === "top" ? "to top" : "to bottom";
@@ -806,16 +858,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") {
@@ -832,6 +884,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;
@@ -843,13 +896,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 {};
@@ -864,7 +920,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) {
@@ -882,10 +941,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}`);
@@ -893,11 +950,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`);
@@ -955,7 +1015,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;
@@ -1045,7 +1105,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");
@@ -1093,12 +1153,16 @@ function attachGlass(el, opts = {}) {
       mapKey = "";
       apply();
     },
+    setSample(next) {
+      supplied = next ?? void 0;
+      apply();
+    },
     destroy
   };
   attached.set(el, handle);
   return handle;
 }
 
-export { RIM_WIDTH_PX, attachGlass, attachScrollEdge, boxShadowCss, buildDisplacementMap, buildSpectralMap, cached, clearMapCache, compositeLayers, contrastRimCss, createGlassGroup, hasSpectralEdge, lightConicAngle, mapCacheSize, paintFor, parseColor, probeBackdrop, renderDisplacementPixels, renderSpectralPixels, resetSupportCache, resolveBody, rimGradientCss, rimLobe, shadowAlphaFrom, statsFromSamples, supportsBackdropFilter, supportsSvgBackdropFilter, systemAccessibility, watchAccessibility, withPresence };
+export { RIM_WIDTH_PX, ambientLuma, attachGlass, attachScrollEdge, bodyLayer, boxShadowCss, buildDisplacementMap, buildSpectralMap, cached, clearMapCache, compositeLayers, contrastRimCss, createGlassGroup, hasSpectralEdge, lightConicAngle, mapCacheSize, paintFor, parseColor, probeBackdrop, renderDisplacementPixels, renderSpectralPixels, resetSupportCache, resolveBody, rimGradientCss, rimLineAlpha, rimLobe, rimStrength, shadowAlphaFrom, statsFromSamples, supportsBackdropFilter, supportsSvgBackdropFilter, systemAccessibility, watchAccessibility, withPresence };
 //# sourceMappingURL=dom.js.map
 //# sourceMappingURL=dom.js.map