vireglass 2.0.0 → 2.2.0

package/dist/dom.cjs

@@ -60,7 +60,14 @@ var BODY = {
   darkSideFrom: 0.42,
   darkSideTo: 0.58,
   /** Ceiling on any single demand, so one requirement cannot make the glass opaque on its own. */
-  maxDemand: 0.92
+  maxDemand: 0.92,
+  /**
+   * And a tighter one for presence specifically. It is a FLOOR on visibility, not a licence to go
+   * opaque: wherever the body's tint sits close to the backdrop, the density that would deliver the
+   * 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
 };
 var SHADOW = {
   /**
@@ -438,36 +445,34 @@ function smin(a, b, k) {
   const h = Math.min(Math.max(0.5 + 0.5 * (b - a) / k, 0), 1);
   return b + (a - b) * h - k * h * (1 - h);
 }
-function sceneDistance(x, y, w, h, r, smoothing = 0, b, c) {
-  const a = sdfRoundedRect(x, y, w, h, r);
-  if (smoothing <= 0 || !b || b.width <= 0) return a;
-  const db = sdfRoundedRect(x - b.offsetX, y - b.offsetY, b.width, b.height, b.cornerRadius);
-  const ab = smin(a, db, smoothing);
-  if (!c || c.width <= 0) return ab;
-  const dc = sdfRoundedRect(x - c.offsetX, y - c.offsetY, c.width, c.height, c.cornerRadius);
-  return smin(ab, dc, smoothing);
-}
-function sceneGradient(x, y, w, h, r, smoothing = 0, b, c) {
-  const na = sdfRoundedRectGradient(x, y, w, h, r);
-  if (smoothing <= 0 || !b || b.width <= 0) return na;
-  const bx = x - b.offsetX;
-  const by = y - b.offsetY;
-  const da = sdfRoundedRect(x, y, w, h, r);
-  const db = sdfRoundedRect(bx, by, b.width, b.height, b.cornerRadius);
-  const hb = Math.min(Math.max(0.5 + 0.5 * (db - da) / smoothing, 0), 1);
-  const nb = sdfRoundedRectGradient(bx, by, b.width, b.height, b.cornerRadius);
-  let gx = nb[0] + (na[0] - nb[0]) * hb;
-  let gy = nb[1] + (na[1] - nb[1]) * hb;
-  if (c && c.width > 0) {
-    const cx = x - c.offsetX;
-    const cy = y - c.offsetY;
-    const dab = smin(da, db, smoothing);
-    const dc = sdfRoundedRect(cx, cy, c.width, c.height, c.cornerRadius);
-    const hc = Math.min(Math.max(0.5 + 0.5 * (dc - dab) / smoothing, 0), 1);
-    const nc = sdfRoundedRectGradient(cx, cy, c.width, c.height, c.cornerRadius);
-    gx = nc[0] + (gx - nc[0]) * hc;
-    gy = nc[1] + (gy - nc[1]) * hc;
+function sceneDistance(x, y, w, h, r, smoothing = 0, ...shapes) {
+  let d = sdfRoundedRect(x, y, w, h, r);
+  if (smoothing <= 0) return d;
+  for (const s of shapes) {
+    if (!s || s.width <= 0) continue;
+    d = smin(d, sdfRoundedRect(x - s.offsetX, y - s.offsetY, s.width, s.height, s.cornerRadius), smoothing);
   }
+  return d;
+}
+function sceneGradient(x, y, w, h, r, smoothing = 0, ...shapes) {
+  let d = sdfRoundedRect(x, y, w, h, r);
+  let [gx, gy] = sdfRoundedRectGradient(x, y, w, h, r);
+  let blended = false;
+  if (smoothing > 0) {
+    for (const s of shapes) {
+      if (!s || s.width <= 0) continue;
+      const sx = x - s.offsetX;
+      const sy = y - s.offsetY;
+      const ds = sdfRoundedRect(sx, sy, s.width, s.height, s.cornerRadius);
+      const weight = Math.min(Math.max(0.5 + 0.5 * (ds - d) / smoothing, 0), 1);
+      const [nx, ny] = sdfRoundedRectGradient(sx, sy, s.width, s.height, s.cornerRadius);
+      gx = nx + (gx - nx) * weight;
+      gy = ny + (gy - ny) * weight;
+      d = smin(d, ds, smoothing);
+      blended = true;
+    }
+  }
+  if (!blended) return [gx, gy];
   gx += EPSILON;
   gy += EPSILON;
   const len = Math.hypot(gx, gy) || 1;
@@ -523,6 +528,7 @@ function renderDisplacementPixels(optics, geometry, dpr, state = {}) {
   const rawScale = optics.refraction * thicknessDp(geometry, optics) * SCALE_GAIN;
   const scale = Math.min(rawScale, MAX_SCALE);
   const smoothing = state.smoothing ?? 0;
+  const shapes = [state.morph, state.morph2, ...state.morphs ?? []];
   const data = new Uint8ClampedArray(width * height * 4);
   const halfW = geometry.width / 2;
   const halfH = geometry.height / 2;
@@ -532,7 +538,7 @@ function renderDisplacementPixels(optics, geometry, dpr, state = {}) {
       const x = (px + 0.5) / density - halfW;
       const i = (py * width + px) * 4;
       const [wx, wy] = state.touch ? touchWarp(x, y, state.touch) : [x, y];
-      const sd = sceneDistance(wx, wy, geometry.width, geometry.height, geometry.cornerRadius, smoothing, state.morph, state.morph2);
+      const sd = sceneDistance(wx, wy, geometry.width, geometry.height, geometry.cornerRadius, smoothing, ...shapes);
       const t = Math.min(Math.max((sd + bevel) / bevel, 0), 1);
       if (t <= 0 || scale <= 0) {
         data[i] = 128;
@@ -541,7 +547,7 @@ function renderDisplacementPixels(optics, geometry, dpr, state = {}) {
         data[i + 3] = 255;
         continue;
       }
-      const [gx, gy] = sceneGradient(wx, wy, geometry.width, geometry.height, geometry.cornerRadius, smoothing, state.morph, state.morph2);
+      const [gx, gy] = sceneGradient(wx, wy, geometry.width, geometry.height, geometry.cornerRadius, smoothing, ...shapes);
       const magnitude = bevelProfile(t) * (scale / 2);
       const dx = -gx * magnitude;
       const dy = -gy * magnitude;
@@ -930,10 +936,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;
@@ -1047,15 +1061,17 @@ function resolveBody(optics, sample, ink) {
 function withPresence(body, optics, sample) {
   if (optics.presence <= 0) return body;
   const mean = clamp3(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
   };
 }
 
@@ -1603,15 +1619,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, "");
@@ -1621,7 +1644,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) {
@@ -1659,6 +1682,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");
@@ -1765,7 +1789,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");
@@ -1777,7 +1802,7 @@ function attachGlass(el, opts = {}) {
   }
   function morphState() {
     if (!morph) return {};
-    return { smoothing: morph.smoothing, morph: morph.shape, morph2: morph.shape2 };
+    return { smoothing: morph.smoothing, morph: morph.shape, morph2: morph.shape2, morphs: morph.shapes };
   }
   function morphKey() {
     if (!morph) return "0";
@@ -1793,7 +1818,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);
@@ -1859,9 +1884,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);