vireglass 3.1.1 → 3.2.1

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,8 +1,8 @@
 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 { LENS, BODY, RIM, TOUCH, SHADOW, SHADOW_GAP, MEDIUM, SCROLL_EDGE, BEVEL, SPECTRAL, DISPERSION } from './chunk-CPSIY2DZ.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, DISPERSION, SPECTRAL } from './chunk-CPSIY2DZ.js';
 
 // src/dom/displacement.ts
 var SCALE_GAIN = 0.75;
@@ -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);
@@ -151,6 +153,18 @@ function mapDensity2(bevel, dpr) {
   if (bevel <= 0) return dpr;
   return Math.min(dpr, BEVEL_SAMPLES2 / bevel);
 }
+var DEPTH_STEPS = 2048;
+function hueAlongDepth(bevel, rim, thick, optics) {
+  const table = new Float64Array((DEPTH_STEPS + 1) * 3);
+  for (let k = 0; k <= DEPTH_STEPS; k += 1) {
+    const s = k / DEPTH_STEPS;
+    const [r, g, b] = spectralHue(s * s * bevel, bevel, rim, thick, optics);
+    table[k * 3] = r;
+    table[k * 3 + 1] = g;
+    table[k * 3 + 2] = b;
+  }
+  return table;
+}
 function renderSpectralPixels(optics, geometry, dpr) {
   const bevel = bevelDp(geometry, optics);
   const density = mapDensity2(bevel, dpr);
@@ -162,24 +176,28 @@ function renderSpectralPixels(optics, geometry, dpr) {
   const halfW = geometry.width / 2;
   const halfH = geometry.height / 2;
   const neutral = Math.round(1 / HEADROOM * 255);
+  const table = hueAlongDepth(bevel, rim, thick, optics);
+  const toByte = 255 / HEADROOM;
+  new Uint32Array(data.buffer).fill(new Uint32Array(new Uint8ClampedArray([neutral, neutral, neutral, 255]).buffer)[0]);
+  const corner = Math.max(geometry.cornerRadius, bevel);
   for (let py = 0; py < height; py += 1) {
     const y = (py + 0.5) / density - halfH;
+    const ay = Math.abs(y);
+    const plain = Math.max(ay <= halfH - bevel ? halfW - corner : -1, ay <= halfH - corner ? halfW - bevel : -1);
     for (let px = 0; px < width; px += 1) {
       const x = (px + 0.5) / density - halfW;
+      if (Math.abs(x) <= plain) continue;
       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);
+      if (e >= bevel) continue;
+      const u = Math.sqrt(e / bevel) * DEPTH_STEPS;
+      const k = Math.min(Math.floor(u), DEPTH_STEPS - 1);
+      const f = u - k;
+      const at = k * 3;
+      data[i] = Math.round((table[at] + (table[at + 3] - table[at]) * f) * toByte);
+      data[i + 1] = Math.round((table[at + 1] + (table[at + 4] - table[at + 1]) * f) * toByte);
+      data[i + 2] = Math.round((table[at + 2] + (table[at + 5] - table[at + 2]) * f) * toByte);
       data[i + 3] = 255;
     }
   }
@@ -799,6 +817,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 +905,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 +963,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 +1026,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 +1074,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 +1096,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}:${full.thicknessDp}:${full.film}:${full.iridescence}:${full.diffraction}`;
       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 +1116,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 +1333,6 @@ function attachGlass(el, opts = {}) {
       if (next === appear) return;
       appear = next;
       apply();
-      if (interim) requestInterimMap();
     },
     setAccent(next) {
       accent = next ?? void 0;
@@ -1342,6 +1382,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