vireglass 3.1.1 → 3.2.0

package/dist/dom.d.cts

@@ -73,6 +73,11 @@ type DisplacementState = {
      *  caller that only ever had two does not have to change. */
     morphs?: readonly MorphShape[];
 };
+/**
+ * The `feDisplacementMap` scale for these optics. The map's pixels are a fraction of it and do not
+ * depend on it, so a change of strength alone, such as appear, is this attribute and not a bake.
+ */
+declare function displacementScale(optics: VireGlassOptics, geometry: VireGlassGeometry): number;
 /**
  * The raw pixel buffer, with no canvas involved — the part actually worth unit-testing.
  * `buildDisplacementMap` below is a thin DOM wrapper around this.
@@ -437,4 +442,4 @@ type GlassHandle = {
 };
 declare function attachGlass(el: HTMLElement, opts?: AttachGlassOptions): GlassHandle;
 
-export { type AttachGlassOptions, type BodyBackdrop, type BodyLayer, type DisplacementMap, type DisplacementState, type EdgePaint, type GlassBody, type GlassGroupHandle, type GlassGroupOptions, type GlassHandle, type GlassMorph, type GroupEntry, type ProbeOptions, RIM_WIDTH_PX, type RenderStats, type RgbColor, type RimAmbient, type ScrollEdgeHandle, type ScrollEdgeOptions, type SpectralMap, ambientLuma, attachGlass, attachScrollEdge, bodyLayer, boxShadowCss, buildDisplacementMap, buildSpectralMap, cached, clearMapCache, compositeLayers, contrastRimCss, createGlassGroup, hasSpectralEdge, lightConicAngle, mapCacheSize, paintFor, parseColor, probeBackdrop, renderDisplacementPixels, renderSpectralPixels, renderStats, resetRenderStats, resetSupportCache, resolveBody, rimGradientCss, rimLineAlpha, rimLobe, rimStrength, shadowAlphaFrom, statsFromSamples, supportsBackdropFilter, supportsSvgBackdropFilter, systemAccessibility, watchAccessibility, withPresence };
+export { type AttachGlassOptions, type BodyBackdrop, type BodyLayer, type DisplacementMap, type DisplacementState, type EdgePaint, type GlassBody, type GlassGroupHandle, type GlassGroupOptions, type GlassHandle, type GlassMorph, type GroupEntry, type ProbeOptions, RIM_WIDTH_PX, type RenderStats, type RgbColor, type RimAmbient, type ScrollEdgeHandle, type ScrollEdgeOptions, type SpectralMap, ambientLuma, attachGlass, attachScrollEdge, bodyLayer, boxShadowCss, buildDisplacementMap, buildSpectralMap, cached, clearMapCache, compositeLayers, contrastRimCss, createGlassGroup, displacementScale, hasSpectralEdge, lightConicAngle, mapCacheSize, paintFor, parseColor, probeBackdrop, renderDisplacementPixels, renderSpectralPixels, renderStats, resetRenderStats, resetSupportCache, resolveBody, rimGradientCss, rimLineAlpha, rimLobe, rimStrength, shadowAlphaFrom, statsFromSamples, supportsBackdropFilter, supportsSvgBackdropFilter, systemAccessibility, watchAccessibility, withPresence };

package/dist/dom.d.ts

@@ -73,6 +73,11 @@ type DisplacementState = {
      *  caller that only ever had two does not have to change. */
     morphs?: readonly MorphShape[];
 };
+/**
+ * The `feDisplacementMap` scale for these optics. The map's pixels are a fraction of it and do not
+ * depend on it, so a change of strength alone, such as appear, is this attribute and not a bake.
+ */
+declare function displacementScale(optics: VireGlassOptics, geometry: VireGlassGeometry): number;
 /**
  * The raw pixel buffer, with no canvas involved — the part actually worth unit-testing.
  * `buildDisplacementMap` below is a thin DOM wrapper around this.
@@ -437,4 +442,4 @@ type GlassHandle = {
 };
 declare function attachGlass(el: HTMLElement, opts?: AttachGlassOptions): GlassHandle;
 
-export { type AttachGlassOptions, type BodyBackdrop, type BodyLayer, type DisplacementMap, type DisplacementState, type EdgePaint, type GlassBody, type GlassGroupHandle, type GlassGroupOptions, type GlassHandle, type GlassMorph, type GroupEntry, type ProbeOptions, RIM_WIDTH_PX, type RenderStats, type RgbColor, type RimAmbient, type ScrollEdgeHandle, type ScrollEdgeOptions, type SpectralMap, ambientLuma, attachGlass, attachScrollEdge, bodyLayer, boxShadowCss, buildDisplacementMap, buildSpectralMap, cached, clearMapCache, compositeLayers, contrastRimCss, createGlassGroup, hasSpectralEdge, lightConicAngle, mapCacheSize, paintFor, parseColor, probeBackdrop, renderDisplacementPixels, renderSpectralPixels, renderStats, resetRenderStats, resetSupportCache, resolveBody, rimGradientCss, rimLineAlpha, rimLobe, rimStrength, shadowAlphaFrom, statsFromSamples, supportsBackdropFilter, supportsSvgBackdropFilter, systemAccessibility, watchAccessibility, withPresence };
+export { type AttachGlassOptions, type BodyBackdrop, type BodyLayer, type DisplacementMap, type DisplacementState, type EdgePaint, type GlassBody, type GlassGroupHandle, type GlassGroupOptions, type GlassHandle, type GlassMorph, type GroupEntry, type ProbeOptions, RIM_WIDTH_PX, type RenderStats, type RgbColor, type RimAmbient, type ScrollEdgeHandle, type ScrollEdgeOptions, type SpectralMap, ambientLuma, attachGlass, attachScrollEdge, bodyLayer, boxShadowCss, buildDisplacementMap, buildSpectralMap, cached, clearMapCache, compositeLayers, contrastRimCss, createGlassGroup, displacementScale, hasSpectralEdge, lightConicAngle, mapCacheSize, paintFor, parseColor, probeBackdrop, renderDisplacementPixels, renderSpectralPixels, renderStats, resetRenderStats, resetSupportCache, resolveBody, rimGradientCss, rimLineAlpha, rimLobe, rimStrength, shadowAlphaFrom, statsFromSamples, supportsBackdropFilter, supportsSvgBackdropFilter, systemAccessibility, watchAccessibility, withPresence };

package/dist/dom.js

@@ -1,7 +1,7 @@
 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-YAN2OK4H.js';
-import { shadowOpacity, bevelDp, thicknessDp, rimDp, shadowOpacityFrom, shadowReachDp, halfMinDp, MAX_STRETCH, roundedRectGeometry } from './chunk-Z4FKYY47.js';
+import { shadowOpacity, thicknessDp, bevelDp, 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
@@ -21,13 +21,15 @@ 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 displacementScale(optics, geometry) {
+  return Math.min(optics.refraction * thicknessDp(geometry, optics) * SCALE_GAIN, MAX_SCALE);
+}
 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 scale = displacementScale(optics, geometry);
   const smoothing = state.smoothing ?? 0;
   const shapes = [state.morph, state.morph2, ...state.morphs ?? []];
   const data = new Uint8ClampedArray(width * height * 4);
@@ -799,6 +801,9 @@ function getFilterHost(host) {
   (host instanceof ShadowRoot ? host : host.body).appendChild(svg);
   return svg;
 }
+function writeAttr(node, name, value) {
+  if (node.getAttribute(name) !== value) node.setAttribute(name, value);
+}
 function buildFilterElement(id, mapUrl, optics, scale, spectral) {
   const filter = document.createElementNS(SVG_NS, "filter");
   filter.setAttribute("id", id);
@@ -884,6 +889,7 @@ function withSpectral(filter, spectral) {
   product.setAttribute("in2", "hue");
   product.setAttribute("operator", "arithmetic");
   product.setAttribute("k1", String(spectral.headroom));
+  product.setAttribute("data-vireglass-headroom", String(spectral.headroom));
   product.setAttribute("k2", "0");
   product.setAttribute("k3", "0");
   product.setAttribute("k4", "0");
@@ -941,6 +947,7 @@ function attachGlass(el, opts = {}) {
   let filterEl = null;
   let destroyed = false;
   let mapKey = "";
+  let shownGeometry = null;
   let interim = false;
   let settling = false;
   let lastSample = null;
@@ -1003,31 +1010,46 @@ function attachGlass(el, opts = {}) {
     settling = true;
     apply();
   }
-  function retarget(f, map, hue) {
+  function retarget(f, map, hue, geometry) {
     const images = f.querySelectorAll("feImage");
     images[0]?.setAttribute("href", map.url);
     if (hue) images[1]?.setAttribute("href", hue.url);
+    shownGeometry = geometry;
+    present(f);
+  }
+  function present(f) {
+    if (!shownGeometry) return;
+    const o = optics();
+    const scale = displacementScale(o, shownGeometry);
     for (const pass of f.querySelectorAll("feDisplacementMap")) {
       const ratio = Number(pass.getAttribute("data-vireglass-ratio") ?? 1);
-      pass.setAttribute("scale", String(map.scale * (Number.isFinite(ratio) ? ratio : 1)));
+      writeAttr(pass, "scale", String(scale * (Number.isFinite(ratio) ? ratio : 1)));
+    }
+    const frost = f.querySelector("feGaussianBlur");
+    if (frost) writeAttr(frost, "stdDeviation", String(Math.max(o.blur, 0)));
+    const hue = f.querySelector('feComposite[in2="hue"]');
+    if (hue) {
+      const headroom = Number(hue.getAttribute("data-vireglass-headroom") ?? 1);
+      writeAttr(hue, "k1", String(headroom * appear));
+      writeAttr(hue, "k2", String(1 - appear));
     }
   }
   function requestInterimMap() {
     if (!svgSupported || !filterEl || destroyed) return;
     const geometry = opts.geometry ?? measureGeometry(el);
     if (isEmpty(geometry)) return;
-    const opticsNow = optics();
+    const full = settledOptics();
     const key = interimKey(
       geometry.width,
       geometry.height,
       geometry.cornerRadius,
       JSON.stringify([morph?.smoothing, morph?.shape, morph?.shape2, morph?.shapes]),
-      `a${appear.toFixed(3)}:${opticsNow.refraction}:${opticsNow.refractionScale}:${opticsNow.bevelDp}`
+      `${full.refraction}:${full.refractionScale}:${full.bevelDp}`
     );
     let rec = interimMaps.get(key);
     if (!rec) {
       bump("reducedBakes");
-      rec = { map: buildDisplacementMap(opticsNow, geometry, Math.min(1, devicePixelRatio()), morphState()), ready: false };
+      rec = { map: buildDisplacementMap(full, geometry, Math.min(1, devicePixelRatio()), morphState()), ready: false, geometry };
       interimMaps.set(key, rec);
     }
     const mine = seq += 1;
@@ -1036,7 +1058,7 @@ function attachGlass(el, opts = {}) {
     const show = () => {
       if (destroyed || filterEl !== forFilter || mine <= shownSeq) return;
       shownSeq = mine;
-      retarget(forFilter, record.map, null);
+      retarget(forFilter, record.map, null, record.geometry);
     };
     if (record.ready) {
       show();
@@ -1058,17 +1080,18 @@ function attachGlass(el, opts = {}) {
     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}`;
+      const full = settledOptics();
+      const key = `m${morphKey()}|${geometry.width}x${geometry.height}r${geometry.cornerRadius}@${devicePixelRatio()}:${full.refraction}:${full.refractionScale}:${full.bevelDp}:${full.blur}`;
       if (interim && filterEl) ; else if (isEmpty(geometry)) ; else if (key !== mapKey || !filterEl) {
         const map = cached(`d|${key}`, () => {
           bump("fullBakes");
-          return buildDisplacementMap(opticsNow, geometry, devicePixelRatio(), morphState());
+          return buildDisplacementMap(full, geometry, devicePixelRatio(), morphState());
         });
-        const hue = hasSpectralEdge(opticsNow) ? cached(`h|${key}`, () => {
+        const hue = hasSpectralEdge(full) ? cached(`h|${key}`, () => {
           bump("fullBakes");
-          return buildSpectralMap(opticsNow, geometry, devicePixelRatio());
+          return buildSpectralMap(full, geometry, devicePixelRatio());
         }) : null;
-        const signature = filterSignature(opticsNow.blur, opticsNow.ior, opticsNow.iorSpread, !!hue);
+        const signature = filterSignature(full.blur, full.ior, full.iorSpread, !!hue);
         if (settling && filterEl?.getAttribute("data-vireglass-signature") === signature) {
           settling = false;
           const mine = seq += 1;
@@ -1077,21 +1100,23 @@ function attachGlass(el, opts = {}) {
           void Promise.all([decoded(map.url), hue ? decoded(hue.url) : void 0]).then(() => {
             if (destroyed || filterEl !== forFilter || mapKey !== forKey || mine <= shownSeq) return;
             shownSeq = mine;
-            retarget(forFilter, map, hue);
+            retarget(forFilter, map, hue, geometry);
           });
         } else {
           settling = false;
           invalidate();
           const defs = getFilterHost(host).querySelector("defs");
-          const next = buildFilterElement(id, map.url, opticsNow, map.scale, hue);
+          const next = buildFilterElement(id, map.url, full, map.scale, hue);
           next.setAttribute("data-vireglass-signature", signature);
           if (filterEl?.parentNode) defs.replaceChild(next, filterEl);
           else defs.appendChild(next);
           bump("filterSwaps");
           filterEl = next;
+          shownGeometry = geometry;
         }
         mapKey = key;
       }
+      if (filterEl) present(filterEl);
       el.style.setProperty("backdrop-filter", `url(#${id})`);
       el.style.setProperty("-webkit-backdrop-filter", `url(#${id})`);
     } else {
@@ -1292,7 +1317,6 @@ function attachGlass(el, opts = {}) {
       if (next === appear) return;
       appear = next;
       apply();
-      if (interim) requestInterimMap();
     },
     setAccent(next) {
       accent = next ?? void 0;
@@ -1342,6 +1366,6 @@ function attachGlass(el, opts = {}) {
   return handle;
 }
 
-export { RIM_WIDTH_PX, ambientLuma, attachGlass, attachScrollEdge, bodyLayer, boxShadowCss, buildDisplacementMap, buildSpectralMap, cached, clearMapCache, compositeLayers, contrastRimCss, createGlassGroup, hasSpectralEdge, lightConicAngle, mapCacheSize, paintFor, parseColor, probeBackdrop, renderDisplacementPixels, renderSpectralPixels, renderStats, resetRenderStats, resetSupportCache, resolveBody, rimGradientCss, rimLineAlpha, rimLobe, rimStrength, shadowAlphaFrom, statsFromSamples, supportsBackdropFilter, supportsSvgBackdropFilter, systemAccessibility, watchAccessibility, withPresence };
+export { RIM_WIDTH_PX, ambientLuma, attachGlass, attachScrollEdge, bodyLayer, boxShadowCss, buildDisplacementMap, buildSpectralMap, cached, clearMapCache, compositeLayers, contrastRimCss, createGlassGroup, displacementScale, hasSpectralEdge, lightConicAngle, mapCacheSize, paintFor, parseColor, probeBackdrop, renderDisplacementPixels, renderSpectralPixels, renderStats, resetRenderStats, resetSupportCache, resolveBody, rimGradientCss, rimLineAlpha, rimLobe, rimStrength, shadowAlphaFrom, statsFromSamples, supportsBackdropFilter, supportsSvgBackdropFilter, systemAccessibility, watchAccessibility, withPresence };
 //# sourceMappingURL=dom.js.map
 //# sourceMappingURL=dom.js.map