vireglass 2.1.0 → 2.2.0

package/dist/dom.d.cts

@@ -160,9 +160,21 @@ type GlassBody = {
 declare function resolveBody(optics: VireGlassOptics, sample: BodyBackdrop, ink: number): GlassBody;
 /**
  * PRESENCE (§3): over a uniform backdrop there is nothing to refract and the glass honestly
- * disappears — right for a piece of background, wrong for a control. The sign comes from the
- * BACKDROP, not from ink polarity: lighter over dark, darker over light. It is a minimum, not an
- * addition, so a body that is already dense enough is left alone.
+ * disappears — right for a piece of background, wrong for a control. It is a MINIMUM, not an
+ * addition, so a body that already stands apart is left alone.
+ *
+ * The direction is the body's own. The previous version decided "lighter over dark, darker over
+ * light" from the backdrop alone, and then, when the body disagreed, clamped `tintLuma` to the
+ * backdrop's mean — the one value that separates from nothing. Light ink over a dark backdrop puts
+ * the body at 0.07 against a backdrop of 0.12: already separating, downward, and the clamp pulled
+ * it back onto the backdrop. Measured on the default material at presence 0.08: exactly 0.0000 at
+ * backdrops of 0.12, 0.20 and 0.35.
+ *
+ * What the demand is DIVIDED by is deliberately the distance to the tint's pole rather than to the
+ * body's own tint. Dividing by the latter is arithmetically tighter and asks for far more density
+ * wherever the two are close — enough to drive it to the ceiling over a dark backdrop and stop the
+ * glass being a window at all, which check:optics says plainly. Presence is a floor on visibility,
+ * not a licence to go opaque.
  */
 declare function withPresence(body: GlassBody, optics: VireGlassOptics, sample: BodyBackdrop): GlassBody;
 

package/dist/dom.d.ts

@@ -160,9 +160,21 @@ type GlassBody = {
 declare function resolveBody(optics: VireGlassOptics, sample: BodyBackdrop, ink: number): GlassBody;
 /**
  * PRESENCE (§3): over a uniform backdrop there is nothing to refract and the glass honestly
- * disappears — right for a piece of background, wrong for a control. The sign comes from the
- * BACKDROP, not from ink polarity: lighter over dark, darker over light. It is a minimum, not an
- * addition, so a body that is already dense enough is left alone.
+ * disappears — right for a piece of background, wrong for a control. It is a MINIMUM, not an
+ * addition, so a body that already stands apart is left alone.
+ *
+ * The direction is the body's own. The previous version decided "lighter over dark, darker over
+ * light" from the backdrop alone, and then, when the body disagreed, clamped `tintLuma` to the
+ * backdrop's mean — the one value that separates from nothing. Light ink over a dark backdrop puts
+ * the body at 0.07 against a backdrop of 0.12: already separating, downward, and the clamp pulled
+ * it back onto the backdrop. Measured on the default material at presence 0.08: exactly 0.0000 at
+ * backdrops of 0.12, 0.20 and 0.35.
+ *
+ * What the demand is DIVIDED by is deliberately the distance to the tint's pole rather than to the
+ * body's own tint. Dividing by the latter is arithmetically tighter and asks for far more density
+ * wherever the two are close — enough to drive it to the ceiling over a dark backdrop and stop the
+ * glass being a window at all, which check:optics says plainly. Presence is a floor on visibility,
+ * not a licence to go opaque.
  */
 declare function withPresence(body: GlassBody, optics: VireGlassOptics, sample: BodyBackdrop): GlassBody;
 

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-3PGYF2NK.js';
+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 { ambientFrom, shouldInkBeLight, INK_LIGHT, INK_DARK } from './chunk-JNRZNMJJ.js';
-import { touchWarp, sceneDistance, sceneGradient, sdfRoundedRect, VIREGLASS_MATERIAL, REST_LIGHT, resolveOptics, refractionStrength } from './chunk-FL5UZPY5.js';
-import { shadowOpacity, bevelDp, thicknessDp, rimDp, shadowOpacityFrom, shadowReachDp, halfMinDp, MAX_STRETCH, roundedRectGeometry } from './chunk-P2ZOODXD.js';
-import { LENS, BODY, RIM, TOUCH, SHADOW, SHADOW_GAP, SCROLL_EDGE, BEVEL, SPECTRAL, DISPERSION } from './chunk-TTOKBARR.js';
+import { touchWarp, sceneDistance, sceneGradient, sdfRoundedRect, VIREGLASS_MATERIAL, REST_LIGHT, resolveOptics, refractionStrength } from './chunk-H5QTBF67.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';
 
 // src/dom/displacement.ts
 var SCALE_GAIN = 0.75;
@@ -311,10 +311,18 @@ function sampleColorAt(el, x, y) {
   }
   const composited = compositeLayers(layers);
   if (composited) return composited;
-  const topmost = behind[0];
-  if (!topmost) return null;
-  return parseColor(getComputedStyle(topmost).color);
+  return canvasColor(el);
 }
+function canvasColor(el) {
+  const doc = el.ownerDocument;
+  for (const node of [doc.documentElement, doc.body]) {
+    if (!node) continue;
+    const bg = parseColor(getComputedStyle(node).backgroundColor);
+    if (bg && bg.a > 1e-3) return bg.a >= 0.999 ? bg : compositeLayers([bg, WHITE]);
+  }
+  return WHITE;
+}
+var WHITE = { r: 255, g: 255, b: 255, a: 1 };
 function probeBackdrop(el, opts = {}) {
   const cols = opts.cols ?? GRID_COLS;
   const rows = opts.rows ?? GRID_ROWS;
@@ -417,15 +425,17 @@ function resolveBody(optics, sample, ink) {
 function withPresence(body, optics, sample) {
   if (optics.presence <= 0) return body;
   const mean = clamp(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 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((lighter ? TINT_LIGHT : TINT_DARK) - mean), 1e-4);
+  const needed = separation / Math.max(Math.abs(pole - 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)
+    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
   };
 }
 
@@ -660,15 +670,22 @@ 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;
+function hostFor(el) {
+  const root = el.getRootNode();
+  return root instanceof ShadowRoot ? root : el.ownerDocument ?? document;
+}
+function styleParent(host) {
+  return host instanceof ShadowRoot ? host : host.head;
+}
+function ensureRimStyles(host) {
+  if (host.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);
+  styleParent(host).appendChild(style);
 }
-function getFilterHost() {
-  const existing = document.querySelector(`svg[${FILTER_HOST_ATTR}]`);
+function getFilterHost(host) {
+  const existing = host.querySelector(`svg[${FILTER_HOST_ATTR}]`);
   if (existing) return existing;
   const svg = document.createElementNS(SVG_NS, "svg");
   svg.setAttribute(FILTER_HOST_ATTR, "");
@@ -678,7 +695,7 @@ function getFilterHost() {
   svg.style.position = "absolute";
   svg.style.pointerEvents = "none";
   svg.appendChild(document.createElementNS(SVG_NS, "defs"));
-  document.body.appendChild(svg);
+  (host instanceof ShadowRoot ? host : host.body).appendChild(svg);
   return svg;
 }
 function buildFilterElement(id, mapUrl, optics, scale, spectral) {
@@ -716,6 +733,7 @@ function buildFilterElement(id, mapUrl, optics, scale, spectral) {
       pass.setAttribute("xChannelSelector", "R");
       pass.setAttribute("yChannelSelector", "G");
       pass.setAttribute("result", `${name}raw`);
+      pass.setAttribute("data-vireglass-ratio", String(scale > 0 ? chScale / scale : 1));
       const only = document.createElementNS(SVG_NS, "feColorMatrix");
       only.setAttribute("in", `${name}raw`);
       only.setAttribute("type", "matrix");
@@ -822,7 +840,8 @@ function attachGlass(el, opts = {}) {
     apply();
   });
   warnIfNested(el);
-  ensureRimStyles();
+  const host = hostFor(el);
+  ensureRimStyles(host);
   el.setAttribute(GLASS_ATTR, "");
   const positionWasStatic = getComputedStyle(el).position === "static";
   if (positionWasStatic) el.style.setProperty("position", "relative");
@@ -850,7 +869,7 @@ function attachGlass(el, opts = {}) {
       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 defs = getFilterHost(host).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);
@@ -916,9 +935,11 @@ function attachGlass(el, opts = {}) {
     });
     if (filterEl) {
       const feImage = filterEl.querySelector("feImage");
-      const feDisplace = filterEl.querySelector("feDisplacementMap");
       feImage?.setAttribute("href", map.url);
-      feDisplace?.setAttribute("scale", String(map.scale));
+      for (const pass of filterEl.querySelectorAll("feDisplacementMap")) {
+        const ratio = Number(pass.getAttribute("data-vireglass-ratio") ?? 1);
+        pass.setAttribute("scale", String(map.scale * (Number.isFinite(ratio) ? ratio : 1)));
+      }
     }
     mapKey = "";
     paintGlow(sampleOut.touchX, sampleOut.touchY, sampleOut.active * base.edgeLight, geometry);