vireglass 2.0.0 → 2.2.0

package/dist/web/index.js

@@ -1,7 +1,7 @@
-import { toGLSL, SURFACE_SHADER } from '../chunk-JF3FK254.js';
-import { LENS_SHADER, toLensProps, toSurfaceUniforms, toDeviceSurfaceUniforms, DYNAMIC_UNIFORMS, ICON_UNIFORMS, OVERLAY_UNIFORMS } from '../chunk-IQOBZGCF.js';
-import { lensPadDp, surfacePadDp, shadowOpacity } from '../chunk-P2ZOODXD.js';
-import '../chunk-TTOKBARR.js';
+import { toGLSL, SURFACE_SHADER } from '../chunk-2XJJO7SC.js';
+import { LENS_SHADER, toLensProps, toSurfaceUniforms, toDeviceSurfaceUniforms, DYNAMIC_UNIFORMS, ICON_UNIFORMS, OVERLAY_UNIFORMS } from '../chunk-H5QTBF67.js';
+import { lensPadDp, surfacePadDp, shadowOpacity } from '../chunk-SLRPHDV7.js';
+import '../chunk-MMPK6DCK.js';
 
 // src/web/gl.ts
 var FULLSCREEN_TRIANGLE_VERTEX_SOURCE = `#version 300 es

package/docs/law.md

@@ -1,6 +1,6 @@
 # The law
 
-`src/law.ts` holds every calibrated number in the material — 120 of them, in 20 groups —
+`src/law.ts` holds every calibrated number in the material — 121 of them, in 20 groups —
 and nothing else in the source is allowed to hold one. Renderers, shaders and helpers read from
 it; the shader templates interpolate it into their GLSL and AGSL, so the same constant reaches
 the web, Android and the DOM path without being copied.
@@ -42,7 +42,7 @@ It checks three things, and reports a fourth:
 - and it names every unmeasured value, every run — and fails if this page or the README states a
   different number, because a count written out in prose goes stale the moment a value is added.
 
-Today that last line reads **42 of 120**. That is the real state of the model, and it is meant to
+Today that last line reads **43 of 121**. That is the real state of the model, and it is meant to
 be uncomfortable. It was 9 until the constants hiding inside `optics.ts`, `geometry.ts` and
 `touch-response.ts` were brought in — the number did not get worse, the instrument got honest.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vireglass",
-  "version": "2.0.0",
+  "version": "2.2.0",
   "description": "A physically-derived liquid glass material for interfaces. One material model, three render targets: WebGL2, live DOM, and Android AGSL.",
   "license": "Apache-2.0",
   "author": "Danil Kotlaev",
@@ -94,7 +94,8 @@
     "measure:dom": "node scripts/measure-dom.mjs",
     "prepare": "tsup",
     "check:package": "node scripts/check-package.mjs",
-    "check:readme": "node scripts/check-readme.mjs"
+    "check:readme": "node scripts/check-readme.mjs",
+    "check:agsl": "tsx scripts/check-agsl.mjs"
   },
   "peerDependencies": {
     "@shopify/react-native-skia": ">=2.0.0",
@@ -129,20 +130,21 @@
     }
   },
   "devDependencies": {
+    "@shopify/react-native-skia": "2.6.2",
     "@types/node": "^22.10.0",
     "@types/react": "^19.0.0",
+    "canvaskit-wasm": "^0.42.0",
     "esbuild": "^0.28.2",
-    "playwright": "^1.62.1",
-    "tsup": "^8.5.0",
-    "tsx": "^4.23.13",
-    "typescript": "^5.8.3",
-    "vitest": "^4.1.11",
-    "@shopify/react-native-skia": "2.6.2",
     "expo": "~57.0.18",
     "expo-blur": "~57.0.2",
     "expo-sensors": "~57.0.2",
+    "playwright": "^1.62.1",
     "react": "19.2.3",
     "react-native": "0.86.2",
-    "react-native-reanimated": "4.5.1"
+    "react-native-reanimated": "4.5.1",
+    "tsup": "^8.5.0",
+    "tsx": "^4.23.13",
+    "typescript": "^5.8.3",
+    "vitest": "^4.1.11"
   }
 }

package/src/dom/body.ts

@@ -78,21 +78,36 @@ export function resolveBody(optics: VireGlassOptics, sample: BodyBackdrop, ink:
 
 /**
  * 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.
  */
 export function withPresence(body: GlassBody, optics: VireGlassOptics, sample: BodyBackdrop): GlassBody {
   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);
+  // Whichever side the body is already on; with nothing to go on, the side with more room.
+  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,
   };
 }

package/src/dom/displacement.ts

@@ -73,6 +73,9 @@ export 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[];
 };
 
 /**
@@ -97,6 +100,8 @@ export function renderDisplacementPixels(
   const rawScale = optics.refraction * thicknessDp(geometry, optics) * SCALE_GAIN;
   const scale = Math.min(rawScale, MAX_SCALE);
   const smoothing = state.smoothing ?? 0;
+  // One list, whichever way the caller expressed it.
+  const shapes: (MorphShape | undefined)[] = [state.morph, state.morph2, ...(state.morphs ?? [])];
 
   const data = new Uint8ClampedArray(width * height * 4);
   const halfW = geometry.width / 2;
@@ -109,7 +114,7 @@ export function renderDisplacementPixels(
       const i = (py * width + px) * 4;
       // Warp the FIELD first, then read the scene at the warped point — the shader's own order.
       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;
@@ -118,7 +123,7 @@ export function renderDisplacementPixels(
         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);
       // The rim reaches half the scale: the encoding can only span ±scale/2, so the derived
       // displacement is expressed as a fraction of that half-range.
       const magnitude = bevelProfile(t) * (scale / 2);

package/src/dom/index.ts

@@ -78,8 +78,30 @@ const STYLE_ATTR = 'data-vireglass-styles';
  * The mask pair is what makes it a ring rather than a fill: the same box painted twice, once
  * clipped to the content box, composited so only the padding band survives.
  */
-function ensureRimStyles(): void {
-  if (document.querySelector(`style[${STYLE_ATTR}]`)) return;
+/**
+ * Where the filter and the rim styles go.
+ *
+ * `backdrop-filter: url(#id)` resolves the reference in the element's OWN tree. From inside a
+ * shadow root, a filter parked on the page is not found — and the failure is silent, because the
+ * reference is valid CSS: the element gets no backdrop at all, not even the blur fallback. A
+ * widget in a shadow root (which is how you survive a page full of global `!important`) came out
+ * with no material whatsoever.
+ *
+ * So the host is the element's own root node, which is the shadow root when there is one and the
+ * document otherwise. Nothing to configure and nothing to get wrong.
+ */
+function hostFor(el: Element): Document | ShadowRoot {
+  const root = el.getRootNode();
+  return root instanceof ShadowRoot ? root : el.ownerDocument ?? document;
+}
+
+/** A shadow root has no `<head>`; a style element goes straight into it. */
+function styleParent(host: Document | ShadowRoot): Node {
+  return host instanceof ShadowRoot ? host : host.head;
+}
+
+function ensureRimStyles(host: Document | ShadowRoot): void {
+  if (host.querySelector(`style[${STYLE_ATTR}]`)) return;
   const style = document.createElement('style');
   style.setAttribute(STYLE_ATTR, '');
   style.textContent =
@@ -87,11 +109,11 @@ function ensureRimStyles(): void {
     // The touch glow (§5) lights the material from the point of contact. Below the content, above
     // the refraction — it is light inside the glass, not a film over the label.
     `[${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(): SVGSVGElement {
-  const existing = document.querySelector<SVGSVGElement>(`svg[${FILTER_HOST_ATTR}]`);
+function getFilterHost(host: Document | ShadowRoot): SVGSVGElement {
+  const existing = host.querySelector<SVGSVGElement>(`svg[${FILTER_HOST_ATTR}]`);
   if (existing) return existing;
   const svg = document.createElementNS(SVG_NS, 'svg');
   svg.setAttribute(FILTER_HOST_ATTR, '');
@@ -101,7 +123,8 @@ function getFilterHost(): SVGSVGElement {
   svg.style.position = 'absolute';
   svg.style.pointerEvents = 'none';
   svg.appendChild(document.createElementNS(SVG_NS, 'defs'));
-  document.body.appendChild(svg);
+  // A shadow root takes the svg directly; a document takes it on the body.
+  (host instanceof ShadowRoot ? host : host.body).appendChild(svg);
   return svg;
 }
 
@@ -165,6 +188,9 @@ function buildFilterElement(
       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');
@@ -344,6 +370,14 @@ export 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[];
 };
 
 export type GlassHandle = {
@@ -395,7 +429,9 @@ export function attachGlass(el: HTMLElement, opts: AttachGlassOptions = {}): Gla
 
   warnIfNested(el);
 
-  ensureRimStyles();
+  // The element's own tree: a shadow root when it is in one, the document otherwise.
+  const host = hostFor(el);
+  ensureRimStyles(host);
   el.setAttribute(GLASS_ATTR, '');
   // `inset: 0` on the rim needs a positioned ancestor. Only taken over when the host left it at
   // the initial value, and put back on destroy.
@@ -419,7 +455,7 @@ export function attachGlass(el: HTMLElement, opts: AttachGlassOptions = {}): Gla
 
   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(): string {
@@ -443,7 +479,7 @@ export function attachGlass(el: HTMLElement, opts: AttachGlassOptions = {}): Gla
       if (key !== mapKey || !filterEl) {
         // Keyed by exactly what the maps are functions of, which is exactly the cache key above.
         const map = cached(`d|${key}`, () => buildDisplacementMap(opticsNow, geometry, devicePixelRatio(), morphState()));
-        const defs = getFilterHost().querySelector('defs') as SVGDefsElement;
+        const defs = getFilterHost(host).querySelector('defs') as SVGDefsElement;
         const hue = hasSpectralEdge(opticsNow)
           ? cached(`h|${key}`, () => buildSpectralMap(opticsNow, geometry, devicePixelRatio()))
           : null;
@@ -543,9 +579,14 @@ export function attachGlass(el: HTMLElement, opts: AttachGlassOptions = {}): Gla
     });
     if (filterEl) {
       const feImage = filterEl.querySelector('feImage');
-      const feDisplace = filterEl.querySelector('feDisplacementMap');
       feImage?.setAttribute('href', map.url);
-      feDisplace?.setAttribute('scale', String(map.scale));
+      // ВСЕ проходы, а не первый. При дисперсии их три, с разными масштабами, и querySelector
+      // возвращал только красный: под пальцем он получал неразделённый масштаб, а зелёный с синим
+      // оставались на том, что был при подключении. Цветной край переставал следовать за пальцем.
+      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 = '';
 

package/src/dom/probe.ts

@@ -126,11 +126,35 @@ function sampleColorAt(el: HTMLElement, x: number, y: number): RgbColor | null {
   }
   const composited = compositeLayers(layers);
   if (composited) return composited;
-  const topmost = behind[0];
-  if (!topmost) return null;
-  return parseColor(getComputedStyle(topmost).color);
+  return canvasColor(el);
 }
 
+/**
+ * The page's own background — the floor everything else is composited over.
+ *
+ * Reached whenever nothing in the stack is opaque, which is not an edge case: CSS propagates the
+ * body's background to the CANVAS, so `getComputedStyle` reports `<html>` and often `<body>` as
+ * transparent on a perfectly ordinary white page. Any element past the end of the body's box —
+ * a widget pinned to a corner, say — sees a stack of nothing.
+ *
+ * This used to fall back to the topmost element's `color`, which is its TEXT colour: a white page
+ * with black text read as black, and the material dressed itself for a dark backdrop over a light
+ * one. The propagation rule says where to look instead — the root element's background, then the
+ * body's, then the user agent's white.
+ */
+function canvasColor(el: HTMLElement): RgbColor | null {
+  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 > 0.001) return bg.a >= 0.999 ? bg : compositeLayers([bg, WHITE]);
+  }
+  return WHITE;
+}
+
+/** What a browser paints the canvas when nobody says otherwise. */
+const WHITE: RgbColor = { r: 255, g: 255, b: 255, a: 1 };
+
 export type ProbeOptions = {
   /** Grid density override — wider for a hero element, narrower for a tight control. */
   cols?: number;

package/src/law.ts

@@ -60,6 +60,13 @@ export const BODY = {
   darkSideTo: 0.58,
   /** Ceiling on any single demand, so one requirement cannot make the glass opaque on its own. */
   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,
 } as const;
 
 /** Shadow (§4). The density law lives in `geometry.ts`; these are its measured ends. */

package/src/sdf.ts

@@ -227,8 +227,14 @@ export type MorphShape = {
   cornerRadius: number;
 };
 
-/** Mirrors the scene distance: one shape, smoothly unioned with up to two neighbours when
- *  `smoothing` is positive. §5's merging and splitting are this union opening and closing. */
+/**
+ * Mirrors the scene distance: one shape, smoothly unioned with any number of neighbours when
+ * `smoothing` is positive. §5's merging and splitting are this union opening and closing.
+ *
+ * A fold, not a pair. The count used to be in the ARGUMENT NAMES — `b` and `c`, and a fourth
+ * shape would have been `d` — which is not a limit the material has. Several independent elements
+ * flowing into one whole is the behaviour; how many of them there happen to be is the host's.
+ */
 export function sceneDistance(
   x: number,
   y: number,
@@ -236,20 +242,22 @@ export function sceneDistance(
   h: number,
   r: number,
   smoothing = 0,
-  b?: MorphShape,
-  c?: MorphShape,
+  ...shapes: (MorphShape | undefined)[]
 ): number {
-  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);
+  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;
 }
 
-/** Mirrors `vgSceneNormal`: normals blend with the same weight that blends the distances, which
- *  the shader derives rather than approximates. */
+/**
+ * Mirrors `vgSceneNormal`: normals blend with the same weight that blends the distances, which the
+ * shader derives rather than approximates. The same fold as `sceneDistance`, carrying the running
+ * distance alongside the running normal because each step's weight is measured against it.
+ */
 export function sceneGradient(
   x: number,
   y: number,
@@ -257,31 +265,31 @@ export function sceneGradient(
   h: number,
   r: number,
   smoothing = 0,
-  b?: MorphShape,
-  c?: MorphShape,
+  ...shapes: (MorphShape | undefined)[]
 ): [number, number] {
-  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;
+  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;
+    }
   }
-  // The shader's `+ float2(${EPSILON}, ${EPSILON})` before normalising, and it is not decoration: where two
-  // shapes meet head-on their normals cancel exactly and the blend lands on zero.
+  // With nothing blended in, the base gradient is already a unit vector and is returned untouched —
+  // the shader takes the same early exit (`if (k <= 0.0) return na;`), and nudging it here instead
+  // would put the two renderers a rounding step apart on every flat edge in the material.
+  if (!blended) return [gx, gy];
+  // The shader's `+ float2(${EPSILON}, ${EPSILON})` before normalising, and it is not decoration:
+  // where two shapes meet head-on their normals cancel exactly and the blend lands on zero.
   gx += EPSILON;
   gy += EPSILON;
   const len = Math.hypot(gx, gy) || 1;