@vitreajs/vitrea 0.15.0 → 0.16.0

package/dist/{dist-PT4PUS4K.js → dist-C43H3RKY.js}

@@ -1,4 +1,4 @@
-import { DEFAULT_GROUP_UNION, LowPassHysteresisDriver, WGSL_RSUPN, WGSL_RSUP, resolveFromChannels, resolveConcentric, governorFieldParams, fieldParams, DEFAULT_MOTION_PROFILE } from './chunk-WM2DV3ZD.js';
+import { DEFAULT_GROUP_UNION, LowPassHysteresisDriver, WGSL_RSUPN, WGSL_RSUP, resolveFromChannels, resolveConcentric, governorFieldParams, fieldParams, DEFAULT_MOTION_PROFILE } from './chunk-IOTISK2R.js';
 
 // ../renderer-webgpu/dist/wgsl/analysis.js
 var ANALYSIS_WORKGROUP = 64;
@@ -1212,6 +1212,12 @@ function withMaterialOverrides(base, patch) {
     tintShadeDark: patch.tintShadeDark ?? base.tintShadeDark,
     tintShadeLight: patch.tintShadeLight ?? base.tintShadeLight,
     tintShadeStrength: patch.tintShadeStrength ?? base.tintShadeStrength,
+    ...(patch.tintChromaScale ?? base.tintChromaScale ?? 1) === 1 ? {} : {
+      tintChromaScale: patch.tintChromaScale ?? base.tintChromaScale
+    },
+    ...(patch.tintShadeCollapseRetention ?? base.tintShadeCollapseRetention ?? 0) === 0 ? {} : {
+      tintShadeCollapseRetention: patch.tintShadeCollapseRetention ?? base.tintShadeCollapseRetention
+    },
     backdropToneMax: patch.backdropToneMax ?? base.backdropToneMax,
     backdropToneLow: patch.backdropToneLow ?? base.backdropToneLow,
     backdropToneHigh: patch.backdropToneHigh ?? base.backdropToneHigh,
@@ -1300,7 +1306,15 @@ function tintShade(materialLuminance, grip, profile = DEFAULT_MATERIAL_PROFILE)
 }
 function tintShadeLayer(seed, materialLuminance, grip, profile = DEFAULT_MATERIAL_PROFILE) {
   const shade = tintShade(materialLuminance, grip, profile);
-  return [seed[0] * shade, seed[1] * shade, seed[2] * shade];
+  const chroma = Math.min(1, Math.max(0, profile.tintChromaScale ?? 1));
+  if (chroma === 1)
+    return [seed[0] * shade, seed[1] * shade, seed[2] * shade];
+  const neutral = Math.max(...seed);
+  return [
+    (neutral + (seed[0] - neutral) * chroma) * shade,
+    (neutral + (seed[1] - neutral) * chroma) * shade,
+    (neutral + (seed[2] - neutral) * chroma) * shade
+  ];
 }
 function tintedMaterialColour(material, tint, grip, profile = DEFAULT_MATERIAL_PROFILE) {
   if (tint === void 0 || tint.strength <= 0)
@@ -2498,9 +2512,17 @@ var poolKey = {
   backdropHeavy: (sourceId) => `backdrop:${sourceId}:heavy`,
   backdropHeavyScratch: (sourceId) => `backdrop:${sourceId}:heavy-scratch`,
   backdropUpload: (sourceId) => `backdrop:${sourceId}:upload`,
-  groupField: (groupId) => `group:${groupId}:field`,
-  groupAux: (groupId) => `group:${groupId}:aux`,
-  groupAux2: (groupId) => `group:${groupId}:aux2`
+  /*
+   * The four field targets. Their key is a group's RESOURCE identity — the id
+   * qualified by the plane it draws on (`groupResourceId`) — and not the group
+   * id, because one group can draw on two planes in one frame and each plane's
+   * field is its own size.
+   */
+  groupField: (resourceId) => `group:${resourceId}:field`,
+  groupAux: (resourceId) => `group:${resourceId}:aux`,
+  groupAux2: (resourceId) => `group:${resourceId}:aux2`,
+  /** The surface's presence per pixel (W27d) — the field pass's fourth target. */
+  groupPresence: (resourceId) => `group:${resourceId}:presence`
 };
 
 // ../renderer-webgpu/dist/gpu-context.js
@@ -2589,12 +2611,32 @@ var IDLE_CHANNELS = {
   glow: 0,
   sweep: 0,
   shimmer: 0,
-  lensStrength: 1
+  lensStrength: 1,
+  // 1 rather than 0, for `lensStrength`'s reason: a surface nobody is driving is
+  // a surface that is fully there, and 0 is a distinct claim a driver can make.
+  materialization: 1
 };
 
 // ../renderer-webgpu/dist/instances.js
 var INSTANCE_FLOATS = 18;
 var INSTANCE_BYTES = INSTANCE_FLOATS * 4;
+var LENS_STRENGTH_MAX = 4;
+function boundedLensStrength(strength) {
+  if (Number.isNaN(strength))
+    return IDLE_CHANNELS.lensStrength;
+  return Math.min(LENS_STRENGTH_MAX, Math.max(0, strength));
+}
+function boundedMaterialization(value) {
+  if (Number.isNaN(value))
+    return IDLE_CHANNELS.materialization;
+  return Math.min(1, Math.max(0, value));
+}
+function drawsMaterial(surface) {
+  if (surface.fieldReferenceOnly === true)
+    return false;
+  const presence = surface.channels?.materialization ?? IDLE_CHANNELS.materialization;
+  return boundedMaterialization(presence) > 0;
+}
 var channelsOf = (input) => ({
   ...IDLE_CHANNELS,
   ...input.channels
@@ -2643,7 +2685,7 @@ function resolveSurfaces(group, family, profile = DEFAULT_MATERIAL_PROFILE, poli
     return shape;
   };
   const paramsFor = (shape) => family === "rsup" ? governorFieldParams(shape) : fieldParams(shape);
-  return group.surfaces.filter((surface) => surface.fieldReferenceOnly !== true).map((surface) => {
+  return group.surfaces.filter(drawsMaterial).map((surface) => {
     const channels = channelsOf(surface);
     const shape = resolveShapeOf(surface);
     const fieldSource = surface.concentricOf === void 0 ? shape : resolveShapeOf(byId.get(surface.concentricOf.nodeId));
@@ -2660,6 +2702,7 @@ function resolveSurfaces(group, family, profile = DEFAULT_MATERIAL_PROFILE, poli
       spanPx,
       lensDepthPx: lensDepthPx(shape.channels.thickness, spanPx, profile, profile.refractionScale[accessibilityRefractionCap(policy)]),
       sizeThickness: thickness,
+      materialization: boundedMaterialization(channels.materialization),
       tintStrength: Math.min(1, Math.max(0, surface.tint?.strength ?? 0))
     };
   });
@@ -2723,10 +2766,10 @@ function packInstances(surfaces, origin, into) {
     data[o + 11] = s.shape.channels.thickness;
     data[o + 12] = s.channels.press;
     data[o + 13] = s.channels.glow;
-    data[o + 14] = Math.max(s.shape.channels.thickness, 0) * Math.min(1, Math.max(0, s.channels.lensStrength));
+    data[o + 14] = Math.max(s.shape.channels.thickness, 0) * boundedLensStrength(s.channels.lensStrength);
     data[o + 15] = s.tintStrength;
     data[o + 16] = s.spanPx;
-    data[o + 17] = 0;
+    data[o + 17] = s.materialization;
   }
   return { data, count: surfaces.length };
 }
@@ -3004,7 +3047,7 @@ var WGSL_INSTANCE_STRUCT = `struct Instance {
   lensThick : f32,  // 56  authored thickness in CSS px times the lensStrength channel (W12 G2): both depths are evaluated from it per pixel
   tintK  : f32,     // 60  author tint strength, 0..1 \u2014 the seed itself is a group uniform
   span   : f32,     // 64  the surface's shorter extent, CSS px \u2014 the size law's input, both curves (W11c)
-  _pad   : f32,     // 68  stride padding: vec2f aligns the struct to 8, so 72 is the next legal size
+  mat    : f32,     // 68  presence, 0..1 (W27d): the slot the 8-byte alignment already required
 };`;
 var WGSL_FIELD_SAMPLE = `struct FieldSample {
   d : f32,
@@ -3214,6 +3257,17 @@ var WGSL_FIELD_PASS = `struct FieldUniforms {
 // two merged members share one oval there \u2014 a value nothing measured either.
 // For a concentric child the box is the parent's (the child is the parent's
 // level set), which is the same centre and a slightly larger oval.
+//
+// 'presence' (W27d) is the fourth target and carries one number: the surface's
+// materialization, blended through the union on the same weight as everything
+// else. It is a target of its own rather than a component of one of the three
+// above because all three are full \u2014 the field carries the distance, the normal
+// and the coverage, 'aux' the four optical scalars, 'aux2' the surface's own box
+// \u2014 and repurposing a component would mean re-deriving a value the fragment
+// stages read, which is how a golden moves for a reason nobody named. It is
+// r16float rather than the working rgba16float for the same honesty: one scalar
+// costs one channel, and a wave that needs a second widens the format in the one
+// place it is declared ('passes.ts').
 
 @group(0) @binding(0) var<uniform> fu : FieldUniforms;
 @group(0) @binding(1) var<storage, read> instances : array<Instance>;
@@ -3223,6 +3277,7 @@ struct Member {
   g    : vec2f,
   aux  : vec4f,
   aux2 : vec4f,
+  mat  : f32,
 };
 
 fn eval_instance(i : u32, p : vec2f) -> Member {
@@ -3239,6 +3294,7 @@ fn eval_instance(i : u32, p : vec2f) -> Member {
   // The pixel relative to the surface's centre, and the half-extents: what the
   // oval's gradient needs, written here where the group-local position is exact.
   m.aux2 = vec4f(p - s.centre, s.half);
+  m.mat = s.mat;
   return m;
 }
 
@@ -3246,6 +3302,7 @@ struct FieldOut {
   @location(0) field : vec4f,
   @location(1) aux   : vec4f,
   @location(2) aux2  : vec4f,
+  @location(3) presence : vec4f,
 };
 
 @fragment
@@ -3264,6 +3321,10 @@ fn fs_field(in : FullscreenOut) -> FieldOut {
     out.field = vec4f(65000.0, 0.0, -1.0, 0.0);
     out.aux = vec4f(0.0);
     out.aux2 = vec4f(0.0);
+    // The idle, not zero: no surface here means nothing to be absent, and a
+    // reader that walks off the instances (the outer shadow's offset read) must
+    // not find a material it has to fade.
+    out.presence = vec4f(1.0, 0.0, 0.0, 0.0);
     return out;
   }
 
@@ -3277,6 +3338,7 @@ fn fs_field(in : FullscreenOut) -> FieldOut {
     acc.g = mix(s.g, acc.g, h);
     acc.aux = mix(s.aux, acc.aux, h);
     acc.aux2 = mix(s.aux2, acc.aux2, h);
+    acc.mat = mix(s.mat, acc.mat, h);
     nearest = min(nearest, s.d);
   }
   // One clamp at the end of the fold, so |union - min| <= maxBulge holds for any
@@ -3290,6 +3352,7 @@ fn fs_field(in : FullscreenOut) -> FieldOut {
   out.field = vec4f(acc.d, normal.x, normal.y, coverage);
   out.aux = acc.aux;
   out.aux2 = acc.aux2;
+  out.presence = vec4f(acc.mat, 0.0, 0.0, 0.0);
   return out;
 }`;
 function fieldPassSource(family) {
@@ -3349,6 +3412,10 @@ var WGSL_HIGHLIGHT_PASS = `struct HighlightUniforms {
 @group(0) @binding(1) var fieldTexture : texture_2d<f32>;
 @group(0) @binding(2) var auxTexture : texture_2d<f32>;
 @group(0) @binding(3) var fieldSampler : sampler;
+/// The surface's presence per pixel (W27d) \u2014 the field pass's fourth target,
+/// bound here for the same reason the optics pass binds it: a highlight is the
+/// material catching light, and a material that is not there catches none.
+@group(0) @binding(4) var presenceTexture : texture_2d<f32>;
 
 const TAU = 6.283185307179586;
 
@@ -3367,14 +3434,18 @@ fn fs_highlight(in : FullscreenOut) -> @location(0) vec4f {
   let fieldUv = in.uv * hu.fieldFit.xy + hu.fieldFit.zw;
   var field : vec4f;
   var aux : vec4f;
+  var presence : vec4f;
   if (hu.flags.z > 0.5) {
     field = textureSampleLevel(fieldTexture, fieldSampler, fieldUv, 0.0);
     aux = textureSampleLevel(auxTexture, fieldSampler, fieldUv, 0.0);
+    presence = textureSampleLevel(presenceTexture, fieldSampler, fieldUv, 0.0);
   } else {
     let texel = vec2i(fieldUv * hu.flags.xy);
     field = textureLoad(fieldTexture, texel, 0);
     aux = textureLoad(auxTexture, texel, 0);
+    presence = textureLoad(presenceTexture, texel, 0);
   }
+  let mat = clamp(presence.x, 0.0, 1.0);
   let d = field.x;
   let normal = field.yz;
   let coverage = field.w;
@@ -3432,7 +3503,15 @@ fn fs_highlight(in : FullscreenOut) -> @location(0) vec4f {
     toneAdapt = clamp(hu.toneAdapt.w, 0.0, 1.0) * (1.0 - toneT * toneT * (3.0 - 2.0 * toneT));
   }
 
-  let intensity = clamp(sweep + press, 0.0, 1.0) * coverage * (1.0 - toneAdapt);
+  /*
+   * The presence (W27d) fades both lights on one factor, exactly as the collapse
+   * above fades them: the sweep is the material's own rim catching a travelling
+   * light and the glow is the material lit from a press, so neither survives a
+   * surface that is not there. It is applied to the composed intensity rather
+   * than to each term, because a highlight that fades on two statements of one
+   * rule is a highlight that will one day fade on one of them.
+   */
+  let intensity = clamp(sweep + press, 0.0, 1.0) * coverage * (1.0 - toneAdapt) * mat;
   if (intensity <= 0.0) {
     return vec4f(0.0);
   }
@@ -3460,9 +3539,8 @@ var WGSL_OPTICS_PASS = `struct OpticsUniforms {
   /// accessibility fold \u2014 the refraction ladder read at the preference's cap,
   /// which every facet's span-dependent rise is multiplied by (W11c)
   tone : vec4f,
-  /// rimWidthPx, rimAlpha; (z) and (w) carried specularPower and specularGain
-  /// until W24 retired the one-sided specular from the rim (claims 5.108
-  /// section 1) and are written but unread
+  /// rimWidthPx, rimAlpha; the slots retired by W24 now carry W27c's
+  /// tintChromaScale (z) and tintShadeCollapseRetention (w).
   rim : vec4f,
   /// light direction, unit (xy), shadowDepth (z), shadowAlpha (w)
   light : vec4f,
@@ -3578,7 +3656,9 @@ var WGSL_OPTICS_PASS = `struct OpticsUniforms {
   /// carries a heavy texture, 0 where it does not. The WIDTH is not here: the
   /// pyramid blurred it into 'backdropHeavy' before any group was drawn, so all
   /// this pass decides is which of two textures the deep sample comes from.
-  /// (y) (z) (w) free.
+  /// (y) is the DOM material mode (0 off, 1 unknown tone, 2 measured tone);
+  /// (z) and (w) carry its reference level and minimum tint contrast.
+  /// Texture draws keep those lanes zero, so their input bytes do not move.
   heavyTap : vec4f,
 };
 
@@ -3598,6 +3678,11 @@ var WGSL_OPTICS_PASS = `struct OpticsUniforms {
 /// from. Bound at every draw; read only where 'heavyTap.x' says there is one.
 @group(0) @binding(8) var backdropHeavy : texture_2d<f32>;
 
+/// The surface's PRESENCE per pixel (W27d; contract X6): the 'materialization'
+/// channel, unioned in the field pass like every other per-surface scalar. One
+/// channel, in the field pass's fourth target \u2014 see 'wgsl/field.ts'.
+@group(0) @binding(9) var presenceTexture : texture_2d<f32>;
+
 /// One encoded sRGB channel from a linear one \u2014 the space the backdrop tone
 /// response's anchors live in (W9). Mirrors material.ts's 'linearToSrgbChannel'.
 fn srgb_encode(c : f32) -> f32 {
@@ -3672,6 +3757,12 @@ struct ShadowSample {
   alpha : f32,
   falloff : f32,
   castSpanCss : f32,
+  /// The presence of the surface that CAST the shadow (W27d), read at the offset
+  /// position beside its span. A shadow belongs to the surface above it, so it
+  /// fades with that surface's materialization and not with the one under this
+  /// pixel \u2014 which is a real difference wherever a dissolving surface's shadow
+  /// falls across a present one.
+  castMat : f32,
 };
 
 /// The composite's peak linear occlusion above the knee, at a casting span \u2014
@@ -3702,6 +3793,7 @@ fn outer_shadow(uv : vec2f, upsampled : f32, fieldSize : vec2f) -> ShadowSample
   out.alpha = 0.0;
   out.falloff = 0.0;
   out.castSpanCss = 0.0;
+  out.castMat = 1.0;
   if (ou.shadow.x <= 0.0 && ou.shadowThick.x <= 0.0) {
     return out;
   }
@@ -3729,14 +3821,18 @@ fn outer_shadow(uv : vec2f, upsampled : f32, fieldSize : vec2f) -> ShadowSample
   let shadowUv = clamp(vec2f(uv.x, shiftedY), vec2f(0.0), vec2f(1.0));
   var shadowField : vec4f;
   var shadowAux : vec4f;
+  var shadowPresence : vec4f;
   if (upsampled > 0.5) {
     shadowField = textureSampleLevel(fieldTexture, fieldSampler, shadowUv, 0.0);
     shadowAux = textureSampleLevel(auxTexture, fieldSampler, shadowUv, 0.0);
+    shadowPresence = textureSampleLevel(presenceTexture, fieldSampler, shadowUv, 0.0);
   } else {
     let texel = clamp(vec2i(shadowUv * fieldSize), vec2i(0), vec2i(fieldSize) - vec2i(1));
     shadowField = textureLoad(fieldTexture, texel, 0);
     shadowAux = textureLoad(auxTexture, texel, 0);
+    shadowPresence = textureLoad(presenceTexture, texel, 0);
   }
+  let castMat = clamp(shadowPresence.x, 0.0, 1.0);
 
   // The size law reaches the amplitude and nothing else \u2014 the reference's three
   // lengths are span-invariant across 32\u2026160 px. Every span-keyed quantity here
@@ -3766,9 +3862,12 @@ fn outer_shadow(uv : vec2f, upsampled : f32, fieldSize : vec2f) -> ShadowSample
   // LINEAR light; then the one conversion to the canvas's compositing space,
   // which is where the black term is actually composited.
   let occ = clamp(regime + ou.shadowSize.x * sizeK * (1.0 - regime), 0.0, 1.0);
-  out.alpha = 1.0 - pow(1.0 - occ, 1.0 / 2.4);
+  // Times the casting surface's presence (W27d): a material that is not there
+  // occludes nothing. At presence 1 this is the alpha the bed measures.
+  out.alpha = (1.0 - pow(1.0 - occ, 1.0 / 2.4)) * castMat;
   out.falloff = outer_shadow_falloff(shadowField.x + clampedOffCss - ou.shadow.z, ou.shadow.y);
   out.castSpanCss = shadowAux.z;
+  out.castMat = castMat;
   return out;
 }
 
@@ -3788,7 +3887,8 @@ fn outer_shadow(uv : vec2f, upsampled : f32, fieldSize : vec2f) -> ShadowSample
 /// zero where the group has no backdrop to copy \u2014 so 'dark-solid', 'impulse',
 /// every thin cell and every unsampled group stay byte-for-byte what they were.
 fn outer_shadow_lift(viewport01 : vec2f, shadow : ShadowSample) -> vec3f {
-  if (ou.flags.x <= 0.5 || ou.shadowLift.x <= 0.0 || shadow.falloff <= 0.0) {
+  if ((ou.flags.x <= 0.5 && ou.heavyTap.y < 1.5) ||
+      ou.shadowLift.x <= 0.0 || shadow.falloff <= 0.0) {
     return vec3f(0.0);
   }
   // Written out rather than through WGSL's 'smoothstep', which is undefined
@@ -3804,13 +3904,53 @@ fn outer_shadow_lift(viewport01 : vec2f, shadow : ShadowSample) -> vec3f {
   if (rise <= 0.0) {
     return vec3f(0.0);
   }
+  if (ou.flags.x <= 0.5) {
+    // A DOM page has no exterior texture: this is the law at the stated tone,
+    // not a claim to reproduce the colour or structure beyond the silhouette.
+    return ou.toneColour.rgb * (ou.shadowLift.x * rise * shadow.falloff);
+  }
   let uv = clamp(viewport01 * ou.fit.xy + ou.fit.zw, vec2f(0.0), vec2f(1.0));
   let chainSample = textureSampleLevel(backdropChain, backdropSampler, uv, ou.shadowLift.w);
   // Premultiplied linear in, straight colour out \u2014 the same unpremultiply the
   // body's own samples take, for the same reason: a partially transparent
   // backdrop must not darken what the material adds back.
   let v = chainSample.rgb / max(chainSample.a, 1e-6);
-  return v * (ou.shadowLift.x * rise * shadow.falloff);
+  // The black term's presence, on the shadow's second term: the two are one
+  // shadow with one falloff (W14 G0), so one channel fades both.
+  return v * (ou.shadowLift.x * rise * shadow.falloff * shadow.castMat);
+}
+
+/// The DOM branch is the per-pixel mirror of platform-web's materialAtBackdrop.
+/// It evaluates the linear response, collapse, paint and rim at the stated tone,
+/// then solves the encoded layer the browser composites. A union's span stays
+/// per pixel, and the conversion reference never enables an unknown tone.
+fn dom_material_backdrop() -> vec3f {
+  if (ou.heavyTap.y > 1.5) { return ou.toneColour.rgb; }
+  return vec3f(ou.heavyTap.z);
+}
+
+/// The cssTintAlpha secant, at the actual tone rather than before the response.
+fn dom_material_alpha(composite : vec3f, backdrop : vec3f, alpha : f32) -> f32 {
+  if (alpha <= 1e-6) { return 0.0; }
+  let weights = vec3f(0.2126, 0.7152, 0.0722);
+  let neutral = max((composite - backdrop * (1.0 - alpha)) / alpha, vec3f(0.0));
+  let b = srgb_encode(dot(backdrop, weights));
+  let span = srgb_encode(dot(neutral, weights)) - b;
+  if (abs(span) < ou.heavyTap.w) { return alpha; }
+  return clamp((srgb_encode(dot(composite, weights)) - b) / span, 0.0, 1.0);
+}
+
+/// The final encoded solve, including paint and contour light. The least opacity
+/// needed to keep every channel in gamut is an algebraic constraint, not a fit.
+/// At the reference B this returns E(C) exactly after browser source-over; away
+/// from B the scalar layer cannot reproduce the sampled path's local structure.
+fn dom_material_output(encodedComposite : vec3f, encodedBackdrop : vec3f, alpha : f32) -> vec4f {
+  let c = clamp(encodedComposite, vec3f(0.0), vec3f(1.0));
+  let b = clamp(encodedBackdrop, vec3f(0.0), vec3f(1.0));
+  let need = select((b - c) / max(b, vec3f(1e-6)),
+    (c - b) / max(vec3f(1.0) - b, vec3f(1e-6)), c >= b);
+  let a = clamp(max(alpha, max(need.x, max(need.y, need.z))), 0.0, 1.0);
+  return vec4f(clamp(c - b * (1.0 - a), vec3f(0.0), vec3f(a)), a);
 }
 
 @fragment
@@ -3823,20 +3963,48 @@ fn fs_optics(in : FullscreenOut) -> @location(0) vec4f {
   var field : vec4f;
   var aux : vec4f;
   var aux2 : vec4f;
+  var presence : vec4f;
   if (ou.flags.w > 0.5) {
     field = textureSampleLevel(fieldTexture, fieldSampler, in.uv, 0.0);
     aux = textureSampleLevel(auxTexture, fieldSampler, in.uv, 0.0);
     aux2 = textureSampleLevel(aux2Texture, fieldSampler, in.uv, 0.0);
+    presence = textureSampleLevel(presenceTexture, fieldSampler, in.uv, 0.0);
   } else {
     let texel = vec2i(in.uv * ou.flags.yz);
     field = textureLoad(fieldTexture, texel, 0);
     aux = textureLoad(auxTexture, texel, 0);
     aux2 = textureLoad(aux2Texture, texel, 0);
+    presence = textureLoad(presenceTexture, texel, 0);
   }
 
   let d = field.x;
   let normal = field.yz;
   let coverage = field.w;
+  /*
+   * The surface's PRESENCE at this pixel (W27d; contract X6) \u2014 the
+   * 'materialization' channel, 1 on a surface nobody is driving.
+   *
+   * It multiplies every term the material ADDS to what is behind it: the lens's
+   * depth and magnitude, the body's mix away from the unblurred backdrop, the
+   * material's own alpha, the author tint's coverage, the inner shadow, the rim,
+   * the outer shadow and the highlight pass's light. It does NOT multiply the
+   * coverage: a presence spent there would be a crossfade of the whole composite,
+   * which is the alpha Apple's rule rules out ("prefer setting the effect
+   * property over the alpha") and which the runtime cannot afford either \u2014 the
+   * host that wrote it would form a Backdrop Root and lose the group's sampling.
+   *
+   * Not to be confused with 'present' below, which is what survives the backdrop
+   * COLLAPSE. The two multiply many of the same terms and mean different things:
+   * one is the author's presence, the other is the material having taken its
+   * backdrop's tone. Both are one multiplication by one on the resting bed.
+   *
+   * The channel is strictly ABOVE zero here. Exactly 0 is 'Glass.identity' and is
+   * resolved on the CPU by dropping the member before this pass ever runs
+   * ('instances.ts'), so a surface that is not there has no silhouette to draw a
+   * faded material into and no shape to union with its neighbours. What this
+   * shader owns is the continuum between the endpoints.
+   */
+  let mat = clamp(presence.x, 0.0, 1.0);
 
   /*
    * The outer shadow (W8) sits UNDER the material, so it is resolved before the
@@ -3892,7 +4060,13 @@ fn fs_optics(in : FullscreenOut) -> @location(0) vec4f {
   // Per-pixel, unioned through the field pass. See the module note. 'aux.x' is
   // the authored thickness times the lensStrength channel (W12 G2); the lens's
   // depth and the inner shadow's are both evaluated from it and the span below.
-  let lensThick = max(aux.x, 0.0);
+  //
+  // Times the presence (W27d), because this is the one number Apple's own
+  // description of materializing names \u2014 "by gradually modulating the light
+  // bending and lensing" \u2014 and both depths are functions of it, so the lens
+  // shallows and weakens together and the inner shadow's depth follows the same
+  // channel rather than a second statement of it.
+  let lensThick = max(aux.x, 0.0) * mat;
   // The thickness curve off the span of whichever surface owns this pixel
   // (W11c). 'sizeK' is the thickness factor, 0..1: zero on anything at or below
   // the profile's 'sizeSpanMin', saturated at 'sizeSpanMax', folded under the
@@ -4070,6 +4244,8 @@ fn fs_optics(in : FullscreenOut) -> @location(0) vec4f {
   let scatterLod = clamp(ou.size.w + log2(max(gainEff, 1e-4)), 0.0, ou.lens.w);
 
   var backdrop = vec3f(0.0);
+  let domMaterial = ou.heavyTap.y > 0.5;
+  if (domMaterial) { backdrop = dom_material_backdrop(); }
   if (ou.flags.x > 0.5) {
     // Both components at the refracted position (W11c G2): the band and the
     // interior are one body, and the displacement alone is the lens.
@@ -4105,6 +4281,26 @@ fn fs_optics(in : FullscreenOut) -> @location(0) vec4f {
     // the glass.
     let scatterColour = scatterSample.rgb / max(scatterSample.a, 1e-6);
     backdrop = mix(bodySample.rgb / max(bodySample.a, 1e-6), scatterColour, kScatter);
+    /*
+     * The body's own half of the presence (W27d): a material at half presence
+     * shows half the BLUR, not half the surface. What a surface at presence 0
+     * stands over is the page as it is, so the two components' composite lerps
+     * back to the unblurred backdrop \u2014 the chain's own level 0, which is the
+     * texture before any of the pyramid's widths were applied.
+     *
+     * Read at 'refractedUv' rather than at this pixel's own position: the lens is
+     * scaled by the same channel, so the sample walks back to the pixel as the
+     * presence falls and arrives exactly there at 0. One uv, one read, and no
+     * discontinuity between the two ends.
+     *
+     * The branch is what keeps the resting material byte-identical \u2014 at presence
+     * 1 the extra tap is not taken at all \u2014 and it is also what keeps a present
+     * surface from paying for a channel it is not using.
+     */
+    if (mat < 1.0) {
+      let sharpSample = textureSampleLevel(backdropChain, backdropSampler, refractedUv, 0.0);
+      backdrop = mix(sharpSample.rgb / max(sharpSample.a, 1e-6), backdrop, mat);
+    }
   }
 
   // Adaptive tint. 'adapt.w' is the strength the accessibility policy and the
@@ -4255,7 +4451,7 @@ fn fs_optics(in : FullscreenOut) -> @location(0) vec4f {
    * There the CSS tier's own 'backdrop-filter' is what carries the transmission.
    */
   var toneTarget = ou.toneColour.rgb;
-  if (ou.flags.x > 0.5) {
+  if (ou.flags.x > 0.5 || domMaterial) {
     toneTarget = mix(toneTarget, backdrop, clamp(ou.toneRowThick.w, 0.0, 1.0));
   }
 
@@ -4273,7 +4469,15 @@ fn fs_optics(in : FullscreenOut) -> @location(0) vec4f {
   // opaque" is a statement about how much material there is), and the backdrop
   // adaptation moved it above. The author's colour never touches it \u2014 but not
   // for the reason the composition contract first gave (claims \xA75.36).
-  var colour = mix(backdrop, adapted, adaptedAlpha);
+  /*
+   * The material's alpha, times the presence (W27d) \u2014 and applied HERE rather
+   * than to 'adaptedAlpha' above, which is load-bearing: that alpha is the
+   * divisor the collapse's own composite is un-premultiplied by, so scaling it
+   * there would move the adapted COLOUR as well as the amount of it. Presence is
+   * how much of the material is there, not what the material is.
+   */
+  let presentAlpha = adaptedAlpha * mat;
+  var colour = mix(backdrop, adapted, presentAlpha);
   /*
    * How much of this pixel the SURFACE owns, as the canvas will composite it.
    *
@@ -4295,10 +4499,41 @@ fn fs_optics(in : FullscreenOut) -> @location(0) vec4f {
    * in encoded sRGB, so the alpha is the CSS tier's, not the linear profile's.
    */
   var bodyAlpha = 1.0;
-  if (ou.flags.x <= 0.5) {
+  var domAlpha = 1.0;
+  if (domMaterial) {
+    // The collapse transmits k*c of the DOM proxy as well. Solve the secant
+    // after the linear material, never feed its encoded alpha back into R.
+    /*
+     * Times the presence (W27d), on the same factor 'presentAlpha' carries into
+     * 'colour' just above \u2014 this branch's body is a SOLVED layer rather than a
+     * composite, so the secant's own input is where the channel reaches it.
+     *
+     * It has to be here rather than on the result. The secant divides the
+     * composite by this alpha to recover the material's own neutral, so scaling
+     * both together leaves that neutral (and the span it spans) at exactly what
+     * presence 1 solves, and only the returned coverage travels. Left unscaled,
+     * the neutral would walk toward the backdrop as the surface thins, the span
+     * would fall under 'heavyTap.w', and the guard would hand back the FULL
+     * alpha \u2014 a flat tone painted over a page the surface has left.
+     *
+     * At presence 1 the factor is exactly 1.0 and the expression is bit-identical
+     * to the resting one; at 0 the secant's own '<= 1e-6' guard returns 0.
+     */
+    let transmission = toneAdapt * clamp(ou.toneRowThick.w, 0.0, 1.0);
+    domAlpha = dom_material_alpha(colour, backdrop,
+      clamp(adaptedAlpha - transmission, 0.0, 1.0) * mat);
+  } else if (ou.flags.x <= 0.5) {
     colour = adapted;
-    bodyAlpha = adaptedAlpha;
+    bodyAlpha = presentAlpha;
   }
+  /*
+   * One gap this tier cannot close from here, named rather than left to be
+   * discovered (W27d): on an unsampled group the blurred backdrop is a DOM proxy
+   * beneath this canvas, so the body's mix toward the unblurred backdrop above
+   * has no texture to mix with. A layer that fades to alpha 0 there reveals the
+   * PROXY's blur rather than the page \u2014 presence takes the tint, the rim and the
+   * shadows out, and the blur is the host's to fade with it.
+   */
 
   // The author tint (W10). 'aux.w' is the per-pixel strength, unioned in the
   // field pass, so a toolbar can carry one tinted control among plain ones; the
@@ -4360,16 +4595,40 @@ fn fs_optics(in : FullscreenOut) -> @location(0) vec4f {
    * reach painted pixels only (W23 S10).
    */
   var rimTintColour = vec3f(1.0);
-  if (aux.w > 0.0) {
+  /*
+   * The author tint's coverage at this pixel, times the presence (W27d). The
+   * paint is part of the material and not a thing painted onto the page, so a
+   * dissolving surface takes its colour with it \u2014 at presence 0 the pixel is the
+   * backdrop and not a flat orange over it. At presence 1 this is
+   * 'clamp(aux.w, 0, 1)' exactly, which is what the tint's own law was fitted on.
+   */
+  let tintK = clamp(aux.w, 0.0, 1.0) * mat;
+  if (tintK > 0.0) {
     // The untinted material's luminance at this pixel. Over a backdrop that is
     // the composite; as a layer it is the layer over the tone the host measured
     // for the group \u2014 zero where nothing was measured, the same reference-level
     // convention the CSS tier's 'materialLuminance' takes (within its 0.02).
     let u = bodyAlpha * dot(colour, vec3f(0.2126, 0.7152, 0.0722)) + (1.0 - bodyAlpha) * ou.toneColour.w;
-    let grip = clamp(ou.seed.w, 0.0, 1.0) * clamp(ou.tone.z, 0.0, 1.0) * (1.0 - toneAdapt);
+    let grip = clamp(ou.seed.w, 0.0, 1.0) * clamp(ou.tone.z, 0.0, 1.0) *
+      (1.0 - toneAdapt * (1.0 - clamp(ou.rim.w, 0.0, 1.0)));
     let shade = mix(1.0, clamp(mix(ou.tone.x, ou.tone.y, clamp(u, 0.0, 1.0)), 0.0, 1.0), grip);
-    let layer = ou.seed.rgb * shade;
-    let s = clamp(aux.w, 0.0, 1.0);
+    // The identity branch preserves the active seed's arithmetic bit for bit.
+    var seed = ou.seed.rgb;
+    if (ou.rim.z < 1.0) {
+      let neutral = max(seed.r, max(seed.g, seed.b));
+      seed = mix(vec3f(neutral), seed, clamp(ou.rim.z, 0.0, 1.0));
+    }
+    let layer = seed * shade;
+    /*
+     * The recede's chroma collapse (W27c) shapes WHAT the paint is; presence
+     * (W27d) is how much of it is there. They compose on this one strength and
+     * each reaches it once: the collapse through 'seed', the presence through
+     * 'tintK'. 's' is the coverage every consumer below reads \u2014 the rim's tint
+     * mix, the encoded fold, and the DOM branch's own alpha \u2014 so folding the
+     * presence in here is what keeps it from being applied twice downstream.
+     */
+    let s = tintK;
+    if (domMaterial) { domAlpha = 1.0 - (1.0 - s) * (1.0 - domAlpha); }
     let layerLuma = max(dot(layer, vec3f(0.2126, 0.7152, 0.0722)), 0.05);
     rimTintColour = mix(vec3f(1.0), layer / layerLuma, clamp(ou.rimLaw.w, 0.0, 1.0) * s);
     let encodedMaterial = linear_to_srgb(clamp(colour, vec3f(0.0), vec3f(1.0)));
@@ -4412,7 +4671,11 @@ fn fs_optics(in : FullscreenOut) -> @location(0) vec4f {
   // A multiplicative occlusion of the whole composite. As a layer that is the
   // colour scaled and the alpha raised \u2014 (k\xB7a\xB7c, 1 \u2212 k\xB7(1 \u2212 a)) composites to
   // k times what (a\xB7c, a) would \u2014 and at bodyAlpha 1 it is the plain product.
-  let shadowKeep = 1.0 - shadowProfile * shadowDepth * ou.light.w * present;
+  // Times the presence (W27d) on the AMPLITUDE, beside the depth the same channel
+  // already shallowed through 'lensThick': the occlusion is the material's own,
+  // and a material that is half there occludes half as much of what is behind it.
+  let shadowKeep = 1.0 - shadowProfile * shadowDepth * ou.light.w * present * mat;
+  if (domMaterial) { domAlpha = 1.0 - shadowKeep * (1.0 - domAlpha); }
   let shadowedAlpha = 1.0 - shadowKeep * (1.0 - bodyAlpha);
   colour = colour * (shadowKeep * bodyAlpha / max(shadowedAlpha, 1e-6));
   bodyAlpha = shadowedAlpha;
@@ -4464,7 +4727,7 @@ fn fs_optics(in : FullscreenOut) -> @location(0) vec4f {
   let rimLuma = materialAlpha * dot(materialColour, vec3f(0.2126, 0.7152, 0.0722))
     + (1.0 - materialAlpha) * ou.toneColour.w;
   let rimAmplitude = ou.rim.y + ou.rimLaw.x * rimLuma;
-  let rimCollapsed = mix(ou.rimLaw.y, ou.rimLaw.z, clamp(aux.w, 0.0, 1.0));
+  let rimCollapsed = mix(ou.rimLaw.y, ou.rimLaw.z, tintK);
   /*
    * The lit edge (W24; claims \xA75.107) \u2014 the directional factor the whole rim is
    * multiplied by, symmetric about 'rimLit.xy'.
@@ -4524,10 +4787,15 @@ fn fs_optics(in : FullscreenOut) -> @location(0) vec4f {
    */
   let alongSide = clamp((rel.x / halfExt.x) * (rel.y / halfExt.y), -1.0, 1.0);
   let alongFactor = max(1.0 + ou.rimLit.w * sizeThick * alongSide, 0.0);
-  let rim = rw * lit * alongFactor * (rimAmplitude * present + rimCollapsed * toneAdapt);
+  // The whole rim \u2014 both the appearance's own and the one the collapse keeps \u2014
+  // times the presence (W27d). The rim is the mark that says a surface is HERE,
+  // which is the first thing a surface that is not there stops saying; the same
+  // argument the collapse's 'present' makes, from the author's side.
+  let rim = rw * lit * alongFactor * (rimAmplitude * present + rimCollapsed * toneAdapt) * mat;
   let rimLight = rim * rimTintColour;
-  if (ou.flags.x > 0.5) {
+  if (ou.flags.x > 0.5 || domMaterial) {
     colour = colour + rimLight;
+    if (domMaterial) { domAlpha = clamp(domAlpha + rim, 0.0, 1.0); }
   } else {
     // Added light has no premultiplied form of its own \u2014 a canvas colour may
     // not exceed its alpha \u2014 so the layer carries the light in its opacity:
@@ -4555,6 +4823,17 @@ fn fs_optics(in : FullscreenOut) -> @location(0) vec4f {
   // translucent surface shows the page through it, not its own shadow. (With
   // an opaque body the two are the same quantity, which is how the shadow was
   // first written and why the difference only surfaced with the layer form.)
+  if (domMaterial) {
+    // Coverage precedes the gamut solve. The sampled rim may exceed white
+    // before antialiasing; clipping it first would dim the half-covered edge.
+    // Include the exterior shadow in the same target so its light and opacity
+    // remain one valid premultiplied layer at that edge too.
+    let b = linear_to_srgb(backdrop);
+    let compositeEncoded = linear_to_srgb(max(colour, vec3f(0.0))) * coverage
+      + (b * (1.0 - shadowAlpha) + liftEncoded) * (1.0 - coverage);
+    let alpha = domAlpha * coverage + shadowAlpha * (1.0 - coverage);
+    return dom_material_output(compositeEncoded, b, alpha);
+  }
   let body = encode_output(max(colour, vec3f(0.0)), coverage * bodyAlpha);
   return vec4f(
     body.rgb + liftEncoded * (1.0 - coverage),
@@ -4647,10 +4926,12 @@ function allShaderSource() {
 
 // ../renderer-webgpu/dist/passes.js
 var fieldUsage = () => GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING;
+var PRESENCE_TEXTURE_FORMAT = "r16float";
 var PREMULTIPLIED_OVER = {
   color: { srcFactor: "one", dstFactor: "one-minus-src-alpha", operation: "add" },
   alpha: { srcFactor: "one", dstFactor: "one-minus-src-alpha", operation: "add" }
 };
+var groupResourceId = (plane, groupId) => plane === "" ? groupId : `${plane}/${groupId}`;
 function createPassRunner(context) {
   const { device, pool, cache } = context;
   const uniforms = /* @__PURE__ */ new Map();
@@ -4690,7 +4971,8 @@ function createPassRunner(context) {
         targets: [
           { format: WORKING_TEXTURE_FORMAT },
           { format: WORKING_TEXTURE_FORMAT },
-          { format: WORKING_TEXTURE_FORMAT }
+          { format: WORKING_TEXTURE_FORMAT },
+          { format: PRESENCE_TEXTURE_FORMAT }
         ]
       },
       primitive: { topology: "triangle-list" }
@@ -4741,28 +5023,35 @@ function createPassRunner(context) {
       const rectHeight = Math.max(1, Math.round(args.rectDevice.height));
       const width = Math.max(1, Math.round(args.rectDevice.width * args.renderScale));
       const height = Math.max(1, Math.round(args.rectDevice.height * args.renderScale));
-      const field = pool.acquire(poolKey.groupField(args.groupId), {
+      const field = pool.acquire(poolKey.groupField(args.resourceId), {
         width,
         height,
         format: WORKING_TEXTURE_FORMAT,
         usage: fieldUsage(),
-        label: `vitrea:group:${args.groupId}:field`
+        label: `vitrea:group:${args.resourceId}:field`
       });
-      const aux = pool.acquire(poolKey.groupAux(args.groupId), {
+      const aux = pool.acquire(poolKey.groupAux(args.resourceId), {
         width,
         height,
         format: WORKING_TEXTURE_FORMAT,
         usage: fieldUsage(),
-        label: `vitrea:group:${args.groupId}:aux`
+        label: `vitrea:group:${args.resourceId}:aux`
       });
-      const aux2 = pool.acquire(poolKey.groupAux2(args.groupId), {
+      const aux2 = pool.acquire(poolKey.groupAux2(args.resourceId), {
         width,
         height,
         format: WORKING_TEXTURE_FORMAT,
         usage: fieldUsage(),
-        label: `vitrea:group:${args.groupId}:aux2`
+        label: `vitrea:group:${args.resourceId}:aux2`
+      });
+      const presence = pool.acquire(poolKey.groupPresence(args.resourceId), {
+        width,
+        height,
+        format: PRESENCE_TEXTURE_FORMAT,
+        usage: fieldUsage(),
+        label: `vitrea:group:${args.resourceId}:presence`
       });
-      const slot = uniformSlot(`field:${args.groupId}`, 12);
+      const slot = uniformSlot(`field:${args.resourceId}`, 12);
       slot.data[0] = rectWidth;
       slot.data[1] = rectHeight;
       slot.data[2] = args.cssPerDevice;
@@ -4776,12 +5065,12 @@ function createPassRunner(context) {
       slot.data[11] = 0;
       new Uint32Array(slot.data.buffer, slot.data.byteOffset + 32, 1)[0] = args.instanceCount;
       slot.write();
-      const instances = storageSlot(args.groupId);
+      const instances = storageSlot(args.resourceId);
       instances.ensure(Math.max(args.instanceCount, 1) * INSTANCE_BYTES);
       instances.write(args.instances, Math.max(args.instanceCount, 1) * (INSTANCE_BYTES / 4));
       const pipeline = fieldPipeline(args.family);
       const pass = encoder.beginRenderPass({
-        label: `vitrea:pass:field:${args.groupId}`,
+        label: `vitrea:pass:field:${args.resourceId}`,
         ...timed(PASS_LABEL.field),
         colorAttachments: [
           {
@@ -4801,6 +5090,15 @@ function createPassRunner(context) {
             loadOp: "clear",
             storeOp: "store",
             clearValue: { r: 0, g: 0, b: 0, a: 0 }
+          },
+          {
+            view: presence.createView(),
+            loadOp: "clear",
+            // Cleared to the IDLE presence rather than to zero: a texel the
+            // fullscreen triangle never wrote must not read as a material that
+            // has been asked to disappear.
+            storeOp: "store",
+            clearValue: { r: 1, g: 0, b: 0, a: 0 }
           }
         ]
       });
@@ -4818,13 +5116,14 @@ function createPassRunner(context) {
         field,
         aux,
         aux2,
+        presence,
         width,
         height,
         upsampled: width !== rectWidth || height !== rectHeight
       };
     },
     opticsPass(encoder, args) {
-      const slot = uniformSlot(`optics:${args.groupId}`, 112);
+      const slot = uniformSlot(`optics:${args.resourceId}`, 112);
       const d = slot.data;
       d[0] = args.viewportDevice[0];
       d[1] = args.viewportDevice[1];
@@ -4856,8 +5155,8 @@ function createPassRunner(context) {
       d[27] = args.sizeFold;
       d[28] = args.rimWidth;
       d[29] = args.rimAlpha;
-      d[30] = args.specularPower;
-      d[31] = args.specularGain;
+      d[30] = args.tintChromaScale ?? 1;
+      d[31] = args.tintShadeCollapseRetention ?? 0;
       d[32] = args.lightDirection[0];
       d[33] = args.lightDirection[1];
       d[34] = args.shadowDepth;
@@ -4935,16 +5234,16 @@ function createPassRunner(context) {
       d[106] = 0;
       d[107] = 0;
       d[108] = args.heavyTapEnabled ? 1 : 0;
-      d[109] = 0;
-      d[110] = 0;
-      d[111] = 0;
+      d[109] = args.domMaterial?.mode ?? 0;
+      d[110] = args.domMaterial?.referenceBackdropLuminance ?? 0;
+      d[111] = args.domMaterial?.minimumTintContrast ?? 0;
       slot.write();
       const chain = args.backdrop?.chain ?? placeholderView;
       const body = args.backdrop?.body ?? placeholderView;
       const heavy = args.backdrop?.heavy ?? placeholderView;
       const pipeline = opticsPipeline(args.targetFormat);
       const pass = encoder.beginRenderPass({
-        label: `vitrea:pass:optics:${args.groupId}`,
+        label: `vitrea:pass:optics:${args.resourceId}`,
         ...timed(PASS_LABEL.optics),
         colorAttachments: [{ view: args.target, loadOp: "load", storeOp: "store" }]
       });
@@ -4963,14 +5262,15 @@ function createPassRunner(context) {
           // read at all when the governor shrank them below the group's rect.
           { binding: 6, resource: context.flatSampler },
           { binding: 7, resource: args.fields.aux2.createView() },
-          { binding: 8, resource: heavy }
+          { binding: 8, resource: heavy },
+          { binding: 9, resource: args.fields.presence.createView() }
         ]
       }));
       pass.draw(3);
       pass.end();
     },
     highlightPass(encoder, args) {
-      const slot = uniformSlot(`highlight:${args.groupId}`, 32);
+      const slot = uniformSlot(`highlight:${args.resourceId}`, 32);
       const d = slot.data;
       d[0] = args.viewportDevice[0];
       d[1] = args.viewportDevice[1];
@@ -5008,7 +5308,7 @@ function createPassRunner(context) {
       slot.write();
       const pipeline = highlightPipeline(args.targetFormat);
       const pass = encoder.beginRenderPass({
-        label: `vitrea:pass:highlight:${args.groupId}`,
+        label: `vitrea:pass:highlight:${args.resourceId}`,
         ...timed(PASS_LABEL.highlight),
         colorAttachments: [{ view: args.target, loadOp: "load", storeOp: "store" }]
       });
@@ -5020,7 +5320,8 @@ function createPassRunner(context) {
           { binding: 0, resource: { buffer: slot.buffer } },
           { binding: 1, resource: args.fields.field.createView() },
           { binding: 2, resource: args.fields.aux.createView() },
-          { binding: 3, resource: context.flatSampler }
+          { binding: 3, resource: context.flatSampler },
+          { binding: 4, resource: args.fields.presence.createView() }
         ]
       }));
       pass.draw(3);
@@ -5043,13 +5344,15 @@ function createPassRunner(context) {
     setTimeline(next) {
       timeline = next;
     },
-    forget(groupId) {
-      pool.release(poolKey.groupField(groupId));
-      pool.release(poolKey.groupAux(groupId));
-      pool.release(poolKey.groupAux2(groupId));
-      storages.get(groupId)?.destroy();
-      storages.delete(groupId);
-      for (const key of [`field:${groupId}`, `optics:${groupId}`, `highlight:${groupId}`]) {
+    forget(resourceId) {
+      pool.release(poolKey.groupField(resourceId));
+      pool.release(poolKey.groupAux(resourceId));
+      pool.release(poolKey.groupAux2(resourceId));
+      pool.release(poolKey.groupPresence(resourceId));
+      storages.get(resourceId)?.destroy();
+      storages.delete(resourceId);
+      for (const pass of ["field", "optics", "highlight"]) {
+        const key = `${pass}:${resourceId}`;
         uniforms.get(key)?.buffer.destroy();
         uniforms.delete(key);
       }
@@ -5710,6 +6013,7 @@ function createWebGPURenderer(options = {}) {
   let generations = 0;
   let lastFrameTimeMs;
   let targets;
+  const planesDrawn = /* @__PURE__ */ new Set();
   let pendingEncoder;
   let pendingRebuilds = 0;
   let pendingUnbuilt = [];
@@ -5831,7 +6135,7 @@ function createWebGPURenderer(options = {}) {
       return 0;
     return heavyTapSigmaAtScale(material, viewport.devicePixelRatio) / Math.max(viewport.devicePixelRatio, 1e-3);
   };
-  const groupTintSeed = (input) => input.surfaces.find((surface) => surface.fieldReferenceOnly !== true && (surface.tint?.strength ?? 0) > 0)?.tint?.color;
+  const groupTintSeed = (input) => input.surfaces.find((surface) => drawsMaterial(surface) && (surface.tint?.strength ?? 0) > 0)?.tint?.color;
   const stateOf = (input, resolution) => {
     const resolved = resolution?.groups.find((group) => group.groupId === input.groupId);
     if (resolved === void 0) {
@@ -5933,10 +6237,15 @@ function createWebGPURenderer(options = {}) {
     ];
     const skipped = [];
     let drawn = 0;
+    planesDrawn.add(active.plane);
+    const resourceOf = (groupId) => groupResourceId(active.plane, groupId);
+    const releaseIdle = (groupId) => passes.forget(resourceOf(groupId));
     for (const entry of groups.values()) {
       const input = entry.input;
-      if (input.surfaces.length === 0)
+      if (input.surfaces.length === 0) {
+        releaseIdle(input.groupId);
         continue;
+      }
       const policy = resolution?.accessibility.material ?? accessibility;
       let surfaces;
       try {
@@ -5946,6 +6255,7 @@ function createWebGPURenderer(options = {}) {
           groupId: input.groupId,
           reason: error instanceof Error ? error.message : String(error)
         });
+        releaseIdle(input.groupId);
         continue;
       }
       const union = unionOf(input);
@@ -5958,15 +6268,17 @@ function createWebGPURenderer(options = {}) {
       const shadowReachPx = outerShadowReachPx(shadow, reachOcclusion);
       const snapped = snapRectToDevicePixels(groupFieldRect(surfaces, union, void 0, shadowReachPx), dpr);
       const rectDevice = clipFieldRectToCanvas(snapped, dpr, viewportDevice);
-      if (rectDevice === void 0)
+      if (rectDevice === void 0) {
+        releaseIdle(input.groupId);
         continue;
+      }
       const surfaceRectDevice = shadowReachPx === 0 ? rectDevice : clipFieldRectToCanvas(snapRectToDevicePixels(groupFieldRect(surfaces, union), dpr), dpr, viewportDevice) ?? rectDevice;
       const packed = packInstances(surfaces, [
         rectDevice.x * cssPerDevice,
         rectDevice.y * cssPerDevice
       ]);
       const fields = passes.fieldPass(encoder, {
-        groupId: input.groupId,
+        resourceId: resourceOf(input.groupId),
         family: governor.knobs.fieldFamily,
         rectDevice,
         cssPerDevice,
@@ -5984,11 +6296,7 @@ function createWebGPURenderer(options = {}) {
       const pyramid = sourceId === void 0 ? void 0 : pyramids.resources(sourceId);
       const adapt = sourceId === void 0 ? void 0 : adaptationFor(sourceId).values;
       const nominalOptics = material.optics[variant];
-      const optics = opticsUnderPolicy(pyramid === void 0 && input.unsampledMaterial !== void 0 ? {
-        ...nominalOptics,
-        tint: input.unsampledMaterial.tint,
-        tintAlpha: input.unsampledMaterial.tintAlpha
-      } : nominalOptics, policy, material);
+      const optics = opticsUnderPolicy(nominalOptics, policy, material);
       const backdropTone = [
         material.backdropToneLow,
         material.backdropToneHigh,
@@ -5999,7 +6307,7 @@ function createWebGPURenderer(options = {}) {
       const refraction = effectiveRefraction(accessibilityRefractionCap(policy), state.refraction);
       const refractionScale = material.refractionScale[refraction];
       passes.opticsPass(encoder, {
-        groupId: input.groupId,
+        resourceId: resourceOf(input.groupId),
         target: active.optics,
         targetFormat: active.format,
         rectDevice,
@@ -6043,6 +6351,8 @@ function createWebGPURenderer(options = {}) {
         tintSeed: (policy.glass === "none" ? void 0 : groupTintSeed(input)) ?? optics.tint,
         tintToneAdaptation: tintToneAdaptation(policy, material),
         tintShade: [material.tintShadeDark, material.tintShadeLight, material.tintShadeStrength],
+        tintChromaScale: material.tintChromaScale ?? 1,
+        tintShadeCollapseRetention: material.tintShadeCollapseRetention ?? 0,
         // The band's half-width is a per-scale reading since W23: the reference's
         // rim narrows between the scales where vitrea's widened (claims §5.100
         // §5). At dpr 1, and on any variant whose two anchors are equal, this is
@@ -6091,6 +6401,10 @@ function createWebGPURenderer(options = {}) {
         // itself is already in the texture, so this pass only chooses which of
         // two textures the deep sample comes from.
         heavyTapEnabled: pyramid?.heavy !== void 0,
+        ...pyramid === void 0 && input.unsampledMaterial !== void 0 ? { domMaterial: {
+          ...input.unsampledMaterial,
+          mode: input.backdropTone === void 0 ? 1 : 2
+        } } : {},
         shadowDepth: optics.shadowDepth,
         shadowAlpha: optics.shadowAlpha,
         // The size law's gains, per group (W2); the per-pixel factor they
@@ -6196,9 +6510,9 @@ function createWebGPURenderer(options = {}) {
           shadow.thickOcclusionAt160
         ],
         outerShadowLift: [
-          // The lift needs a chain to copy; without one there is nothing to add,
-          // and `hasBackdrop` in the shader says the same thing a second time.
-          pyramid === void 0 || policy.glass === "none" ? 0 : shadow.liftAmplitude,
+          // A DOM layer can evaluate the lift at its stated tone, but not at
+          // unknown exterior pixels. No tone still means no light to add.
+          policy.glass === "none" || pyramid === void 0 && (input.unsampledMaterial === void 0 || input.backdropTone === void 0) ? 0 : shadow.liftAmplitude,
           shadow.liftSpanMin,
           shadow.liftSpanFull,
           liftChainLod(shadow.liftBlurSigmaCss, pyramid)
@@ -6214,7 +6528,7 @@ function createWebGPURenderer(options = {}) {
       if (active.highlight !== void 0) {
         const lead = surfaces.reduce((best, surface) => surface.channels.glow > best.channels.glow ? surface : best, surfaces[0]);
         passes.highlightPass(encoder, {
-          groupId: input.groupId,
+          resourceId: resourceOf(input.groupId),
           target: active.highlight,
           targetFormat: active.format,
           // The surface's own rect, not the shadow's — see `surfaceRectDevice`.
@@ -6361,7 +6675,8 @@ function createWebGPURenderer(options = {}) {
     },
     removeGroup(groupId) {
       groups.delete(groupId);
-      runner?.forget(groupId);
+      for (const plane of planesDrawn)
+        runner?.forget(groupResourceId(plane, groupId));
     },
     setAccessibility(policy) {
       accessibility = policy;
@@ -6377,7 +6692,8 @@ function createWebGPURenderer(options = {}) {
       targets = {
         optics: next.optics,
         ...next.highlight === void 0 ? {} : { highlight: next.highlight },
-        format: next.format ?? OUTPUT_TEXTURE_FORMAT
+        format: next.format ?? OUTPUT_TEXTURE_FORMAT,
+        plane: next.plane ?? ""
       };
     },
     drawFrame(args) {
@@ -6385,7 +6701,8 @@ function createWebGPURenderer(options = {}) {
       targets = {
         optics: args.optics,
         ...args.highlight === void 0 ? {} : { highlight: args.highlight },
-        format: args.format ?? OUTPUT_TEXTURE_FORMAT
+        format: args.format ?? OUTPUT_TEXTURE_FORMAT,
+        plane: args.plane ?? ""
       };
       pyramids.beginFrame(args.frame.id);
       pyramids.setTimeline(args.timing);
@@ -6503,5 +6820,5 @@ function createWebGPURenderer(options = {}) {
 }
 
 export { ADAPTIVE_LUMINANCE_HIGH, ADAPTIVE_LUMINANCE_LOW, ADAPTIVE_TINT_DARK, ADAPTIVE_TINT_LIGHT, ANALYSIS_DISPATCH, ANALYSIS_GRID, ANALYSIS_PASS_ID, ANALYSIS_STATS_FLOATS, ANALYSIS_TARGET_EXTENT, ANALYSIS_WORKGROUP, BACKDROP_ALPHA_MODES, BACKDROP_COLOR_SPACES, BACKDROP_KINDS, BACKDROP_PASS_ID, BACKDROP_TONE_HIGH, BACKDROP_TONE_LOW, BACKDROP_TONE_MAX, BACKDROP_TONE_SIZE_BIAS, CANVAS_FORMAT, CHAIN_SIGMA_AT_LEVEL_1, CROSS_CHECK_SHAPE_FLOATS, CROSS_CHECK_WORKGROUP, DEFAULT_MATERIAL_PROFILE, FAMILY_C_CROSS_CHECK, FIELD_PASS_ID, GOVERNOR_LADDER, HIGHLIGHT_PASS_ID, IDENTITY_FIT, IDLE_CHANNELS, INCREASED_OCCLUSION_LIFT, INSTANCE_BYTES, INSTANCE_FLOATS, LENS_AMOUNT_MAX, LENS_AMOUNT_PER_SPAN, LENS_EXTENT_GAIN, LENS_HEIGHT_MAX, LENS_HEIGHT_PER_SPAN, LENS_OVALIZATION, LENS_PROFILE_EXPONENT, LENS_REFRACTION_GAIN, LENS_SIZE_GAIN_MAX, LENS_THICKNESS_REFERENCE, LUMINANCE_WEIGHTS, MATERIAL_OPTICS, MATERIAL_VARIANTS, MAX_CHAIN_LEVELS, MIN_LEVEL_EXTENT, NOMINAL_GOVERNOR, NOMINAL_MATERIAL_POLICY, OPTICS_PASS_ID, OUTER_SHADOW, OUTER_SHADOW_THICK_SPANS, OUTER_SHADOW_THIN_L, OUTER_SHADOW_UNMEASURED_BACKDROP_LUMINANCE, OUTPUT_TEXTURE_FORMAT, PASS_LABEL, REFRACTION_LADDER, REFRACTION_SCALE, RENDERER_ERROR_CODES, RENDERER_PASS_IDS, RendererError, SIZE_OCCLUSION_GAIN, SIZE_SCATTER_FLOOR, SIZE_SCATTER_FLOOR_2X, SIZE_SCATTER_GAIN_FAR_2X, SIZE_SCATTER_GAIN_MAX, SIZE_SCATTER_GAIN_MAX_2X, SIZE_SCATTER_RAMP_REACH_1X_PX, SIZE_SCATTER_RAMP_REACH_2X_PX, SIZE_SCATTER_RAMP_START_FAR_1X, SIZE_SCATTER_RAMP_START_FAR_2X, SIZE_SCATTER_RAMP_START_THICK_1X, SIZE_SCATTER_RAMP_START_THICK_2X, SIZE_SCATTER_RAMP_START_THIN_1X, SIZE_SCATTER_RAMP_START_THIN_2X, SIZE_SCATTER_SPAN_MAX, SIZE_SCATTER_SPAN_MAX_2X, SIZE_SHADOW_GAIN_MAX, SIZE_SPAN_MAX, SIZE_SPAN_MIN, SRGB_ENCODING_EXPONENT, SUPPORTED_APP_TEXTURE_FORMATS, WGSL_ANALYSIS_PASS, WGSL_CROSS_CHECK_PASS, WGSL_DOWNSAMPLE_PASS, WGSL_FIELD_KERNELS, WGSL_FIELD_PASS, WGSL_FIELD_SAMPLE, WGSL_HIGHLIGHT_PASS, WGSL_IMPORT_PASS, WGSL_INSTANCE_STRUCT, WGSL_OPTICS_PASS, WGSL_PRELUDE, WGSL_RSUPN_GRAD, WGSL_RSUP_GRAD, WGSL_SMOOTH_UNION, WORKING_TEXTURE_FORMAT, ZERO_STATS, accessibilityRefractionCap, adaptationStrength, adaptedTintAlpha, adaptedTintColour, adaptiveTint, allShaderSource, alphaNormalisationMode, analysisModule, backdropFit, backdropToneAdaptation, backdropToneResponse, backdropToneSizeBiasUnderPolicy, backdropToneSolveWeight, backdropToneUnderPolicy, bodyBlurPlan, chainModule, clipFieldRectToCanvas, collapsedRimUnderPolicy, coverFit, createAdaptationState, createAppTextureProvider, createCopyProvider, createDeviceHost, createGovernor, createGpuContext, createGradientProvider, createPassRunner, createPipelineCache, createPyramidStore, createRebuildLedger, createStorageSlot, createTexturePool, createTimingCollector, createUniformSlot, createVideoProvider, createWebGPURenderer, crossCheckKernelModule, displayP3ToSrgbLinear, effectiveRefraction, encodeOutput, encodeOutputBytes, fieldModule, fieldPassSource, groupFieldRect, heavyTapSigmaAtScale, highlightModule, importColorMatrix, importModule, importPassSource, isUsablePlacement, lensAmountBasePx, lensDepthPx, lensDirection, lensDisplacementPx, lensExtentPx, lensHeightBasePx, lensMagnitudePx, lensOvalizationAt, lensSizeGain, lensSizeGainFromThickness, linearGradientStops, linearToSrgb, linearToSrgbChannel, occlusionAlphaUnderPolicy, opticsModule, opticsUnderPolicy, outerShadowAlpha, outerShadowFalloff, outerShadowLiftRise, outerShadowOcclusionAt, outerShadowReachPx, outerShadowThickOcclusion, outerShadowThinOcclusion, outerShadowUnderPolicy, packInstances, pipelineKey, placementFit, planPyramid, poolKey, readbackDue, refractionRank, relativeLuminance, rendererError, resolveSurfaces, rimAlongSideFactor, rimAlongSideField, samePlacement, scatterDeepThickness, scatterFloorAtScale, scatterGainAt, scatterGainAtScale, scatterGainFarAtScale, scatterHeavyShareThickAtScale, scatterRampAreaMean, scatterRampReachDevicePx, scatterRampStart, scatterSharpShare, scatterSpanMaxAtScale, scatterThickness, shadowDepthPx, sizeOcclusionAlpha, sizeOcclusionAlphaAt, sizeOuterShadowOcclusion, sizeOuterShadowOcclusionAt, sizeScatterSigma, sizeScatterSigmaAt, sizeShadowDepth, sizeShadowDepthAt, sizeThickness, sizeThicknessUnderPolicy, sizeToneLevelFar, snapRectToDevicePixels, srgbToLinear, srgbToLinearChannel, statsFromBuffer, supportsTimestamps, texelsPerCssPx, tintShade, tintShadeLayer, tintToneAdaptation, tintedMaterialColour, validateAppTexture, withMaterialOverrides };
-//# sourceMappingURL=dist-PT4PUS4K.js.map
-//# sourceMappingURL=dist-PT4PUS4K.js.map
+//# sourceMappingURL=dist-C43H3RKY.js.map
+//# sourceMappingURL=dist-C43H3RKY.js.map