vireglass 2.0.0 → 2.2.0

package/dist/dom.d.cts

@@ -1,7 +1,7 @@
 import { B as BackdropSample } from './adaptation-BSbbdExK.cjs';
 import { V as VireGlassGeometry } from './geometry-RhKd7CM5.cjs';
 import { V as VireGlassOptics, a as VireGlassMaterial } from './material-CnUmdKg1.cjs';
-import { T as TouchWarp, M as MorphShape, V as VireGlassAccessibility, S as ScrollEdgeStyle, G as GroupPlane } from './group-model-8u4GKrUu.cjs';
+import { T as TouchWarp, M as MorphShape, V as VireGlassAccessibility, S as ScrollEdgeStyle, G as GroupPlane } from './group-model-DwtixGhG.cjs';
 import { V as VireGlassAccent } from './adapters-DugC6Qri.cjs';
 
 /** Any `backdrop-filter` at all (e.g. `blur()`) — the fallback path's own requirement. */
@@ -67,6 +67,9 @@ type DisplacementState = {
     smoothing?: number;
     morph?: MorphShape;
     morph2?: MorphShape;
+    /** Any number of shapes flowing into this one. `morph`/`morph2` are the first two, kept so a
+     *  caller that only ever had two does not have to change. */
+    morphs?: readonly MorphShape[];
 };
 /**
  * The raw pixel buffer, with no canvas involved — the part actually worth unit-testing.
@@ -157,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;
 
@@ -321,6 +336,14 @@ type GlassMorph = {
     smoothing: number;
     shape?: MorphShape;
     shape2?: MorphShape;
+    /**
+     * Any number of shapes flowing into this one. Several independent elements becoming one whole is
+     * the behaviour; how many of them there are is the host's business, and it used to be the
+     * material's — the count lived in the field NAMES, so a fourth element had nowhere to go.
+     *
+     * `shape` and `shape2` still work and come first.
+     */
+    shapes?: readonly MorphShape[];
 };
 type GlassHandle = {
     update(): void;

package/dist/dom.d.ts

@@ -1,7 +1,7 @@
 import { B as BackdropSample } from './adaptation-BSbbdExK.js';
 import { V as VireGlassGeometry } from './geometry-GvXtt-_S.js';
 import { V as VireGlassOptics, a as VireGlassMaterial } from './material-CnUmdKg1.js';
-import { T as TouchWarp, M as MorphShape, V as VireGlassAccessibility, S as ScrollEdgeStyle, G as GroupPlane } from './group-model-vYSmEVia.js';
+import { T as TouchWarp, M as MorphShape, V as VireGlassAccessibility, S as ScrollEdgeStyle, G as GroupPlane } from './group-model-z4N27qsC.js';
 import { V as VireGlassAccent } from './adapters-BfeAopGO.js';
 
 /** Any `backdrop-filter` at all (e.g. `blur()`) — the fallback path's own requirement. */
@@ -67,6 +67,9 @@ type DisplacementState = {
     smoothing?: number;
     morph?: MorphShape;
     morph2?: MorphShape;
+    /** Any number of shapes flowing into this one. `morph`/`morph2` are the first two, kept so a
+     *  caller that only ever had two does not have to change. */
+    morphs?: readonly MorphShape[];
 };
 /**
  * The raw pixel buffer, with no canvas involved — the part actually worth unit-testing.
@@ -157,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;
 
@@ -321,6 +336,14 @@ type GlassMorph = {
     smoothing: number;
     shape?: MorphShape;
     shape2?: MorphShape;
+    /**
+     * Any number of shapes flowing into this one. Several independent elements becoming one whole is
+     * the behaviour; how many of them there are is the host's business, and it used to be the
+     * material's — the count lived in the field NAMES, so a fourth element had nowhere to go.
+     *
+     * `shape` and `shape2` still work and come first.
+     */
+    shapes?: readonly MorphShape[];
 };
 type GlassHandle = {
     update(): void;

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-IQOBZGCF.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;
@@ -29,6 +29,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;
@@ -38,7 +39,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;
@@ -47,7 +48,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;
@@ -310,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;
@@ -416,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
   };
 }
 
@@ -659,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, "");
@@ -677,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) {
@@ -715,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");
@@ -821,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");
@@ -833,7 +853,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";
@@ -849,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);
@@ -915,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);