@vitreajs/vitrea 0.17.0 → 0.19.0

package/dist/{dist-T7PRMUM4.js → dist-VQPRX7BX.js}

@@ -1174,6 +1174,10 @@ function rejectMixedBackdropToneArity(anchorX, thin, thick) {
 }
 function withMaterialOverrides(base, patch) {
   rejectRetiredOuterShadowLeaves(patch.outerShadow);
+  const backdropToneAbscissa = patch.backdropToneAbscissa === void 0 ? base.backdropToneAbscissa : patch.backdropToneAbscissa;
+  if (backdropToneAbscissa !== void 0 && backdropToneAbscissa !== "source" && (backdropToneAbscissa === null || typeof backdropToneAbscissa !== "object" || backdropToneAbscissa.kind !== "silhouette" || Object.keys(backdropToneAbscissa).some((key) => key !== "kind"))) {
+    throw new TypeError("backdropToneAbscissa must be source or { kind: silhouette }");
+  }
   const optics = {};
   for (const variant of MATERIAL_VARIANTS) {
     optics[variant] = { ...base.optics[variant], ...patch.optics?.[variant] };
@@ -1255,6 +1259,7 @@ function withMaterialOverrides(base, patch) {
     rimCollapsed: patch.rimCollapsed ?? base.rimCollapsed,
     rimCollapsedTinted: patch.rimCollapsedTinted ?? base.rimCollapsedTinted,
     rimTintChroma: patch.rimTintChroma ?? base.rimTintChroma,
+    ...backdropToneAbscissa === void 0 ? {} : { backdropToneAbscissa },
     backdropToneAnchorX,
     backdropToneResponseThin,
     backdropToneResponseThick,
@@ -3440,7 +3445,7 @@ var WGSL_HIGHLIGHT_PASS = `struct HighlightUniforms {
   glow : vec4f,
   /// highlight colour, linear light (xyz), unused (w)
   colour : vec4f,
-  /// fieldSize.xy, fieldUpsampled (z), unused (w)
+  /// fieldSize.xy, fieldUpsampled (z), local tone field present (w, W28)
   flags : vec4f,
   /// backdrop tone adaptation (W7), exactly as the optics pass takes it:
   /// backdropToneLow, backdropToneHigh, the size bias already divided by the
@@ -3470,6 +3475,7 @@ var WGSL_HIGHLIGHT_PASS = `struct HighlightUniforms {
 /// 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>;
+@group(0) @binding(5) var localToneTexture : texture_2d<f32>;
 
 const TAU = 6.283185307179586;
 
@@ -3499,6 +3505,16 @@ fn fs_highlight(in : FullscreenOut) -> @location(0) vec4f {
     aux = textureLoad(auxTexture, texel, 0);
     presence = textureLoad(presenceTexture, texel, 0);
   }
+  var toneStrength = hu.toneAdapt.w;
+  var toneLevel = hu.toneLevel.x;
+  if (hu.flags.w > 0.5) {
+    if (hu.flags.z > 0.5) {
+      toneLevel = textureSampleLevel(localToneTexture, fieldSampler, fieldUv, 0.0).w;
+    } else {
+      toneLevel = textureLoad(localToneTexture, vec2i(fieldUv * hu.flags.xy), 0).w;
+    }
+  }
+  if (toneLevel < 0.0) { toneStrength = 0.0; }
   let mat = clamp(presence.x, 0.0, 1.0);
   let d = field.x;
   let normal = field.yz;
@@ -3547,14 +3563,14 @@ fn fs_highlight(in : FullscreenOut) -> @location(0) vec4f {
   );
   let sizeK = clamp(spanT * spanT * (3.0 - 2.0 * spanT) * hu.toneLevel.w, 0.0, 1.0);
   var toneAdapt = 0.0;
-  if (hu.toneAdapt.w > 0.0) {
-    let toneX = hu.toneLevel.x + hu.toneAdapt.z * sizeK;
+  if (toneStrength > 0.0) {
+    let toneX = toneLevel + hu.toneAdapt.z * sizeK;
     let toneT = clamp(
       (toneX - hu.toneAdapt.x) / max(hu.toneAdapt.y - hu.toneAdapt.x, 1e-6),
       0.0,
       1.0,
     );
-    toneAdapt = clamp(hu.toneAdapt.w, 0.0, 1.0) * (1.0 - toneT * toneT * (3.0 - 2.0 * toneT));
+    toneAdapt = clamp(toneStrength, 0.0, 1.0) * (1.0 - toneT * toneT * (3.0 - 2.0 * toneT));
   }
 
   /*
@@ -3718,6 +3734,8 @@ var WGSL_OPTICS_PASS = `struct OpticsUniforms {
   /// thick z, and a length gate w. Appended so every three-knot field keeps its
   /// byte offset and its original shader branch.
   toneExtra : vec4f,
+  /// W28: whether the per-surface reference field is present (x).
+  localTone : vec4f,
 };
 
 @group(0) @binding(0) var<uniform> ou : OpticsUniforms;
@@ -3740,6 +3758,7 @@ var WGSL_OPTICS_PASS = `struct OpticsUniforms {
 /// 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>;
+@group(0) @binding(10) var localToneTexture : 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'.
@@ -4064,6 +4083,27 @@ fn fs_optics(in : FullscreenOut) -> @location(0) vec4f {
     presence = textureLoad(presenceTexture, texel, 0);
   }
 
+  // The complete reference changes together: response, collapse colour and
+  // compensation, nominal composition, opacity solve, and the tint/rim readouts.
+  // The source branch retains the old uniforms and arithmetic exactly.
+  var toneStrength = ou.toneAdapt.w;
+  var toneColour = ou.toneColour;
+  var toneLinearMean = ou.toneAnchor.w;
+  if (ou.localTone.x > 0.5) {
+    if (ou.flags.w > 0.5) {
+      toneColour = textureSampleLevel(localToneTexture, fieldSampler, in.uv, 0.0);
+    } else {
+      toneColour = textureLoad(localToneTexture, vec2i(in.uv * ou.flags.yz), 0);
+    }
+    toneLinearMean = dot(toneColour.rgb, vec3f(0.2126, 0.7152, 0.0722));
+    // A fully transparent mask measured no colour and has no local authority.
+    if (toneColour.w < 0.0) {
+      toneStrength = 0.0;
+      toneColour = ou.toneColour;
+      toneLinearMean = ou.toneAnchor.w;
+    }
+  }
+
   let d = field.x;
   let normal = field.yz;
   let coverage = field.w;
@@ -4425,13 +4465,13 @@ fn fs_optics(in : FullscreenOut) -> @location(0) vec4f {
    */
   var toneAdapt = 0.0;
   if (ou.toneAdapt.w > 0.0) {
-    let toneX = ou.toneColour.w + ou.toneAdapt.z * sizeK;
+    let toneX = toneColour.w + ou.toneAdapt.z * sizeK;
     let toneT = clamp(
       (toneX - ou.toneAdapt.x) / max(ou.toneAdapt.y - ou.toneAdapt.x, 1e-6),
       0.0,
       1.0,
     );
-    toneAdapt = clamp(ou.toneAdapt.w, 0.0, 1.0) * (1.0 - toneT * toneT * (3.0 - 2.0 * toneT));
+    toneAdapt = clamp(toneStrength, 0.0, 1.0) * (1.0 - toneT * toneT * (3.0 - 2.0 * toneT));
   }
   /*
    * Both the colour and the alpha move, together and not separately. What the
@@ -4471,9 +4511,9 @@ fn fs_optics(in : FullscreenOut) -> @location(0) vec4f {
    */
   var solvedNeutral = neutral;
   var solvedAlpha = sizedAlpha;
-  if (ou.toneAdapt.w > 0.0 && ou.toneRowThin.w > 0.0 &&
+  if (toneStrength > 0.0 && ou.toneRowThin.w > 0.0 &&
       sizedAlpha > 1e-3 && toneAdapt < 0.995) {
-    let encodedInput = srgb_encode(ou.toneColour.w);
+    let encodedInput = srgb_encode(toneColour.w);
     let anchor = max(ou.toneAnchor.x, 1e-4);
     let authority =
       smoothstep(anchor * 0.5, anchor, encodedInput) * clamp(ou.toneRowThin.w, 0.0, 1.0);
@@ -4481,10 +4521,10 @@ fn fs_optics(in : FullscreenOut) -> @location(0) vec4f {
       let response = tone_response(encodedInput, sizeK, toneLevelFar);
       // The collapse's mean pull is toward L(toneColour.rgb) \u2014 the LINEAR
       // mean, which toneAnchor.w carries \u2014 not toward the encoded level.
-      let preCollapse = (response - toneAdapt * ou.toneAnchor.w) / (1.0 - toneAdapt);
+      let preCollapse = (response - toneAdapt * toneLinearMean) / (1.0 - toneAdapt);
       let neutralLuma = dot(neutral, vec3f(0.2126, 0.7152, 0.0722));
-      let nominal = (1.0 - sizedAlpha) * ou.toneAnchor.w + sizedAlpha * neutralLuma;
-      let shift = (preCollapse - nominal) / sizedAlpha * authority * ou.toneAdapt.w;
+      let nominal = (1.0 - sizedAlpha) * toneLinearMean + sizedAlpha * neutralLuma;
+      let shift = (preCollapse - nominal) / sizedAlpha * authority * toneStrength;
       solvedNeutral = clamp(neutral + vec3f(shift), vec3f(0.0), vec3f(1.0));
       /*
        * The light attractor needs OPACITY. The light scheme's neutral is
@@ -4497,14 +4537,14 @@ fn fs_optics(in : FullscreenOut) -> @location(0) vec4f {
        * collapse's own axis with its own fitted constants.
        */
       let solvedLuma = dot(solvedNeutral, vec3f(0.2126, 0.7152, 0.0722));
-      let achieved = (1.0 - sizedAlpha) * ou.toneAnchor.w + sizedAlpha * solvedLuma;
-      if (preCollapse > achieved + 1e-4 && solvedLuma > ou.toneAnchor.w + 1e-3) {
+      let achieved = (1.0 - sizedAlpha) * toneLinearMean + sizedAlpha * solvedLuma;
+      if (preCollapse > achieved + 1e-4 && solvedLuma > toneLinearMean + 1e-3) {
         let alphaTarget = clamp(
-          (preCollapse - ou.toneAnchor.w) / (solvedLuma - ou.toneAnchor.w),
+          (preCollapse - toneLinearMean) / (solvedLuma - toneLinearMean),
           sizedAlpha,
           1.0,
         );
-        solvedAlpha = mix(sizedAlpha, alphaTarget, authority * ou.toneAdapt.w);
+        solvedAlpha = mix(sizedAlpha, alphaTarget, authority * toneStrength);
       }
     }
   }
@@ -4537,7 +4577,7 @@ fn fs_optics(in : FullscreenOut) -> @location(0) vec4f {
    * lerped toward it would be a black surface rather than a transmitting one.
    * There the CSS tier's own 'backdrop-filter' is what carries the transmission.
    */
-  var toneTarget = ou.toneColour.rgb;
+  var toneTarget = toneColour.rgb;
   if (ou.flags.x > 0.5 || domMaterial) {
     toneTarget = mix(toneTarget, backdrop, clamp(ou.toneRowThick.w, 0.0, 1.0));
   }
@@ -4695,7 +4735,7 @@ fn fs_optics(in : FullscreenOut) -> @location(0) vec4f {
     // 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 u = bodyAlpha * dot(colour, vec3f(0.2126, 0.7152, 0.0722)) + (1.0 - bodyAlpha) * toneColour.w;
     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);
@@ -4812,7 +4852,7 @@ fn fs_optics(in : FullscreenOut) -> @location(0) vec4f {
    *   author tint layer composites with sixty lines above.
    */
   let rimLuma = materialAlpha * dot(materialColour, vec3f(0.2126, 0.7152, 0.0722))
-    + (1.0 - materialAlpha) * ou.toneColour.w;
+    + (1.0 - materialAlpha) * toneColour.w;
   let rimAmplitude = ou.rim.y + ou.rimLaw.x * rimLuma;
   let rimCollapsed = mix(ou.rimLaw.y, ou.rimLaw.z, tintK);
   /*
@@ -4986,6 +5026,112 @@ fn vs_fullscreen(@builtin(vertex_index) index : u32) -> FullscreenOut {
 }
 `;
 
+// ../renderer-webgpu/dist/wgsl/silhouette-tone.js
+var silhouetteReductionModule = () => `${WGSL_PRELUDE}
+struct ToneShape { rect : vec4f, radius : vec4f };
+struct ToneStat { colour : vec4f, stats : vec4f };
+struct ToneUniforms { viewport : vec4f, fit : vec4f };
+@group(0) @binding(0) var<uniform> u : ToneUniforms;
+@group(0) @binding(1) var source : texture_2d<f32>;
+@group(0) @binding(3) var<storage, read> shapes : array<ToneShape>;
+@group(0) @binding(4) var<storage, read_write> tones : array<ToneStat>;
+var<workgroup> sums : array<vec4f, 256>;
+var<workgroup> counts : array<f32, 256>;
+var<workgroup> weights : array<f32, 256>;
+struct RawTone { value : vec4f, alpha : f32 };
+
+fn raw_tone(texel : vec2i) -> RawTone {
+  let dims = vec2i(textureDimensions(source));
+  let rgba = textureLoad(source, clamp(texel, vec2i(0), dims - 1), 0);
+  let rgb = rgba.rgb / max(rgba.a, 1e-6);
+  return RawTone(vec4f(rgb, dot(linear_to_srgb(rgb), vec3f(0.2126, 0.7152, 0.0722))) * rgba.a, rgba.a);
+}
+
+@compute @workgroup_size(256)
+fn reduce_tone(@builtin(local_invocation_index) lane : u32,
+               @builtin(workgroup_id) group : vec3u) {
+  let shape = shapes[group.x];
+  // G0 clips to the capture raster. Clip BEFORE deriving the iteration area so
+  // offscreen geometry cannot create unbounded work or overflow its u32 product.
+  // In-bounds rectangles retain exactly the same lane assignment and arithmetic.
+  let lo = vec2i(clamp(floor(shape.rect.xy), vec2f(0.0), u.viewport.xy));
+  let hi = vec2i(clamp(ceil(shape.rect.xy + shape.rect.zw), vec2f(0.0), u.viewport.xy));
+  let extent = vec2u(max(hi - lo, vec2i(0)));
+  let half = shape.rect.zw * 0.5;
+  let centre = shape.rect.xy + half;
+  let radius = min(shape.radius.x, min(half.x, half.y));
+  var sum = vec4f(0.0);
+  var count = 0.0;
+  var weight = 0.0;
+  for (var i = lane; i < extent.x * extent.y; i += 256u) {
+    let pixel = lo + vec2i(vec2u(i % extent.x, i / extent.x));
+    let p = vec2f(pixel) + 0.5;
+    let q = abs(p - centre) - half + radius;
+    let distance = length(max(q, vec2f(0.0))) + min(max(q.x, q.y), 0.0) - radius;
+    if (distance > 0.0) { continue; }
+    let uv = (p / u.viewport.xy) * u.fit.xy + u.fit.zw;
+    // Interpolate encoded and linear statistics separately. Encoding after
+    // bilinear filtering would reintroduce a Jensen gap on a scaled source.
+    let at = uv * vec2f(textureDimensions(source)) - 0.5;
+    let base = vec2i(floor(at));
+    let f = fract(at);
+    let a = raw_tone(base);
+    let b = raw_tone(base + vec2i(1, 0));
+    let c = raw_tone(base + vec2i(0, 1));
+    let d = raw_tone(base + vec2i(1, 1));
+    sum += mix(mix(a.value, b.value, f.x), mix(c.value, d.value, f.x), f.y);
+    weight += mix(mix(a.alpha, b.alpha, f.x), mix(c.alpha, d.alpha, f.x), f.y);
+    count += 1.0;
+  }
+  sums[lane] = sum;
+  counts[lane] = count;
+  weights[lane] = weight;
+  workgroupBarrier();
+  for (var stride = 128u; stride > 0u; stride /= 2u) {
+    if (lane < stride) {
+      sums[lane] += sums[lane + stride];
+      counts[lane] += counts[lane + stride];
+      weights[lane] += weights[lane + stride];
+    }
+    workgroupBarrier();
+  }
+  if (lane == 0u) {
+    let mean = sums[0] / max(weights[0], 1e-6);
+    let level = srgb_to_linear(vec3f(mean.w)).x;
+    tones[group.x].colour = vec4f(mean.rgb, level);
+    tones[group.x].stats = vec4f(mean.w, luminance(mean.rgb), counts[0], weights[0]);
+  }
+}
+`;
+var silhouetteFieldModule = (family) => `${WGSL_PRELUDE}
+${WGSL_FIELD_KERNELS}
+struct FieldUniforms { screen : vec4f, unionP : vec4f, counts : vec4u, fallback : vec4f };
+struct ToneStat { colour : vec4f, stats : vec4f };
+@group(0) @binding(0) var<uniform> u : FieldUniforms;
+@group(0) @binding(1) var<storage, read> instances : array<Instance>;
+@group(0) @binding(2) var<storage, read> tones : array<ToneStat>;
+fn member_distance(i : u32, p : vec2f) -> f32 {
+  let s = instances[i];
+  return ${family === "rsupn" ? "sd_rsupn_grad" : "sd_rsup_grad"}(
+    p - s.centre, s.half, s.re, vec4f(s.k0, s.k1, s.k2, s.k3), s.k4).d + s.inset;
+}
+fn member_tone(i : u32) -> vec4f {
+  return select(u.fallback, tones[i].colour, tones[i].stats.w > 0.0);
+}
+@fragment
+fn fs_tone(in : FullscreenOut) -> @location(0) vec4f {
+  let p = in.uv * u.screen.xy * u.screen.z;
+  var distance = member_distance(0u, p);
+  var colour = member_tone(0u);
+  for (var i = 1u; i < u.counts.x; i += 1u) {
+    let blend = union_blend(distance, member_distance(i, p), u.unionP.xyz);
+    distance = blend.x;
+    colour = mix(member_tone(i), colour, blend.y);
+  }
+  return colour;
+}
+`;
+
 // ../renderer-webgpu/dist/wgsl/index.js
 var withPrelude = (pass) => `${WGSL_PRELUDE}
 ${pass}
@@ -5006,6 +5152,9 @@ function allShaderSource() {
     importPassSource("external"),
     WGSL_DOWNSAMPLE_PASS,
     WGSL_ANALYSIS_PASS,
+    silhouetteReductionModule(),
+    silhouetteFieldModule("rsupn"),
+    silhouetteFieldModule("rsup"),
     WGSL_OPTICS_PASS,
     WGSL_HIGHLIGHT_PASS
   ].join("\n\n");
@@ -5210,7 +5359,7 @@ function createPassRunner(context) {
       };
     },
     opticsPass(encoder, args) {
-      const slot = uniformSlot(`optics:${args.resourceId}`, 116);
+      const slot = uniformSlot(`optics:${args.resourceId}`, 120);
       const d = slot.data;
       d[0] = args.viewportDevice[0];
       d[1] = args.viewportDevice[1];
@@ -5328,6 +5477,7 @@ function createPassRunner(context) {
       d[113] = args.backdropToneResponseThin[3] ?? args.backdropToneResponseThin[2];
       d[114] = args.backdropToneResponseThick[3] ?? args.backdropToneResponseThick[2];
       d[115] = args.backdropToneAnchorX.length === 4 ? 1 : 0;
+      d[116] = args.localTone === void 0 ? 0 : 1;
       slot.write();
       const chain = args.backdrop?.chain ?? placeholderView;
       const body = args.backdrop?.body ?? placeholderView;
@@ -5354,7 +5504,8 @@ function createPassRunner(context) {
           { binding: 6, resource: context.flatSampler },
           { binding: 7, resource: args.fields.aux2.createView() },
           { binding: 8, resource: heavy },
-          { binding: 9, resource: args.fields.presence.createView() }
+          { binding: 9, resource: args.fields.presence.createView() },
+          { binding: 10, resource: args.localTone ?? placeholderView }
         ]
       }));
       pass.draw(3);
@@ -5382,7 +5533,7 @@ function createPassRunner(context) {
       d[16] = args.fields.width;
       d[17] = args.fields.height;
       d[18] = args.fields.upsampled ? 1 : 0;
-      d[19] = 0;
+      d[19] = args.localTone === void 0 ? 0 : 1;
       d[20] = args.backdropTone[0];
       d[21] = Math.max(args.backdropTone[1], args.backdropTone[0] + 1e-4);
       d[22] = args.backdropTone[2];
@@ -5412,7 +5563,8 @@ function createPassRunner(context) {
           { binding: 1, resource: args.fields.field.createView() },
           { binding: 2, resource: args.fields.aux.createView() },
           { binding: 3, resource: context.flatSampler },
-          { binding: 4, resource: args.fields.presence.createView() }
+          { binding: 4, resource: args.fields.presence.createView() },
+          { binding: 5, resource: args.localTone ?? placeholderView }
         ]
       }));
       pass.draw(3);
@@ -6068,6 +6220,263 @@ function createPyramidStore(context) {
 }
 var ANALYSIS_DISPATCH = { workgroupSize: ANALYSIS_WORKGROUP, workgroups: 1 };
 
+// ../renderer-webgpu/dist/silhouette-tone.js
+function packToneShapes(surfaces, dpr) {
+  const data = new Float32Array(surfaces.length * 8);
+  surfaces.forEach((surface, i) => {
+    const [w, h] = surface.shape.channels.size;
+    data.set([
+      (surface.centre[0] - w / 2) * dpr,
+      (surface.centre[1] - h / 2) * dpr,
+      w * dpr,
+      h * dpr,
+      surface.shape.corner.radius * dpr,
+      0,
+      0,
+      0
+    ], i * 8);
+  });
+  return data;
+}
+function toneReadingsFromBuffer(values, metadata, fallback) {
+  return metadata.flatMap((meta, i) => {
+    if (values[i * 8 + 7] > 0)
+      return [{
+        ...meta,
+        kind: "silhouette",
+        level: 0,
+        color: [values[i * 8], values[i * 8 + 1], values[i * 8 + 2]],
+        luminance: values[i * 8 + 3],
+        encodedLuminance: values[i * 8 + 4],
+        linearLuminance: values[i * 8 + 5],
+        sampleCount: values[i * 8 + 6]
+      }];
+    if (fallback === void 0 || fallback[3] < 0)
+      return [];
+    const [r, g, b, luminance] = fallback;
+    return [{
+      surfaceId: meta.surfaceId,
+      kind: "source",
+      color: [r, g, b],
+      luminance,
+      encodedLuminance: linearToSrgbChannel(luminance),
+      // The local optics field derives this channel from RGB, including fallback.
+      linearLuminance: relativeLuminance([r, g, b]),
+      sampleCount: 0,
+      level: 0,
+      sourceWidth: 0,
+      sourceHeight: 0,
+      sampledWidth: 0,
+      sampledHeight: 0
+    }];
+  });
+}
+function createSilhouetteTonePass(context) {
+  const { device, cache, pool } = context;
+  const createEntry = (count, groupId) => ({
+    groupId,
+    count,
+    shapes: createStorageSlot(device, count * 32, "vitrea:tone-shapes"),
+    instances: createStorageSlot(device, count * 72, "vitrea:tone-instances"),
+    uniform: createUniformSlot(device, 8, "vitrea:tone-uniform"),
+    fieldUniform: createUniformSlot(device, 16, "vitrea:tone-field-uniform"),
+    tones: device.createBuffer({
+      size: count * 32,
+      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC
+    }),
+    readback: device.createBuffer({
+      size: count * 32,
+      usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ
+    }),
+    reduced: void 0,
+    encodedReduction: false,
+    observation: void 0,
+    fallback: void 0,
+    encodedFallback: void 0,
+    queued: void 0,
+    pending: void 0
+  });
+  const entries = /* @__PURE__ */ new Map();
+  const destroyEntry = (entry) => {
+    entry.shapes.destroy();
+    entry.instances.destroy();
+    entry.uniform.buffer.destroy();
+    entry.fieldUniform.buffer.destroy();
+    entry.tones.destroy();
+    entry.readback.destroy();
+  };
+  const forget = (resourceId) => {
+    const entry = entries.get(resourceId);
+    if (entry !== void 0)
+      destroyEntry(entry);
+    entries.delete(resourceId);
+    pool.release(`tone-field:${resourceId}`);
+  };
+  return {
+    draw(encoder, args) {
+      const { field, pyramid, fields } = args;
+      let entry = entries.get(field.resourceId);
+      if (entry !== void 0 && entry.count !== field.instanceCount) {
+        forget(field.resourceId);
+        entry = void 0;
+      }
+      if (entry === void 0) {
+        entry = createEntry(field.instanceCount, args.groupId);
+        entries.set(field.resourceId, entry);
+      }
+      const shapeData = packToneShapes(args.surfaces, 1 / field.cssPerDevice);
+      const geometryKey = JSON.stringify([
+        pyramid.sourceId,
+        pyramid.sizeEpoch,
+        pyramid.sourceWidth,
+        pyramid.sourceHeight,
+        pyramid.plan.width,
+        pyramid.plan.height,
+        ...shapeData,
+        ...args.viewportDevice,
+        ...args.fit,
+        ...args.surfaces.map((surface) => surface.nodeId)
+      ]);
+      const previous = entry.reduced;
+      if (previous === void 0 || previous.chain !== pyramid.chain || previous.geometryKey !== geometryKey || previous.builtEpoch !== pyramid.builtEpoch && (!args.liveSource || readbackDue(previous.timeMs, args.timeMs, args.cadenceHz))) {
+        entry.reduced = {
+          chain: pyramid.chain,
+          geometryKey,
+          builtEpoch: pyramid.builtEpoch,
+          timeMs: args.timeMs,
+          metadata: args.surfaces.map((surface) => ({
+            surfaceId: surface.nodeId,
+            sourceWidth: pyramid.sourceWidth,
+            sourceHeight: pyramid.sourceHeight,
+            sampledWidth: pyramid.plan.width,
+            sampledHeight: pyramid.plan.height
+          }))
+        };
+        entry.encodedReduction = true;
+        entry.shapes.write(shapeData, shapeData.length);
+        entry.uniform.data.set([...args.viewportDevice, 0, 0, ...args.fit]);
+        entry.uniform.write();
+        const pipeline = cache.computePipeline("silhouette-reduction", () => ({
+          layout: "auto",
+          compute: {
+            module: cache.module("silhouette-reduction", silhouetteReductionModule),
+            entryPoint: "reduce_tone"
+          }
+        }));
+        const pass = encoder.beginComputePass({ label: "vitrea:silhouette-reduction" });
+        pass.setPipeline(pipeline);
+        pass.setBindGroup(0, device.createBindGroup({
+          layout: pipeline.getBindGroupLayout(0),
+          entries: [
+            { binding: 0, resource: { buffer: entry.uniform.buffer } },
+            { binding: 1, resource: pyramid.chain.createView({ baseMipLevel: 0, mipLevelCount: 1 }) },
+            { binding: 3, resource: { buffer: entry.shapes.buffer } },
+            { binding: 4, resource: { buffer: entry.tones } }
+          ]
+        }));
+        pass.dispatchWorkgroups(field.instanceCount);
+        pass.end();
+      }
+      entry.instances.write(field.instances, field.instanceCount * 18);
+      entry.encodedFallback = args.fallbackTone;
+      if (entry.queued === void 0 && entry.pending === void 0 && entry.observation?.reduction !== entry.reduced) {
+        encoder.copyBufferToBuffer(entry.tones, 0, entry.readback, 0, entry.count * 32);
+        entry.queued = entry.reduced;
+      }
+      const texture = pool.acquire(`tone-field:${field.resourceId}`, {
+        width: fields.width,
+        height: fields.height,
+        format: "rgba16float",
+        usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING
+      });
+      const u = entry.fieldUniform;
+      u.data.set([
+        field.rectDevice.width,
+        field.rectDevice.height,
+        field.cssPerDevice,
+        0,
+        field.union.neckWidth,
+        field.union.maxBulge,
+        field.union.separationThreshold,
+        0
+      ]);
+      new Uint32Array(u.data.buffer)[8] = field.instanceCount;
+      u.data.set(args.fallbackTone, 12);
+      u.write();
+      const fieldPipeline = cache.renderPipeline(`silhouette-field:${field.family}`, () => ({
+        layout: "auto",
+        vertex: { module: cache.module(`silhouette-field:${field.family}`, () => silhouetteFieldModule(field.family)), entryPoint: "vs_fullscreen" },
+        fragment: {
+          module: cache.module(`silhouette-field:${field.family}`, () => silhouetteFieldModule(field.family)),
+          entryPoint: "fs_tone",
+          targets: [{ format: "rgba16float" }]
+        },
+        primitive: { topology: "triangle-list" }
+      }));
+      const view = texture.createView();
+      const fieldPass = encoder.beginRenderPass({
+        label: "vitrea:silhouette-field",
+        colorAttachments: [{ view, loadOp: "clear", storeOp: "store" }]
+      });
+      fieldPass.setPipeline(fieldPipeline);
+      fieldPass.setBindGroup(0, device.createBindGroup({
+        layout: fieldPipeline.getBindGroupLayout(0),
+        entries: [
+          { binding: 0, resource: { buffer: u.buffer } },
+          { binding: 1, resource: { buffer: entry.instances.buffer } },
+          { binding: 2, resource: { buffer: entry.tones } }
+        ]
+      }));
+      fieldPass.draw(3);
+      fieldPass.end();
+      return view;
+    },
+    afterSubmit() {
+      for (const entry of entries.values()) {
+        entry.encodedReduction = false;
+        if (entry.encodedFallback !== void 0)
+          entry.fallback = entry.encodedFallback;
+        entry.encodedFallback = void 0;
+        const reduction = entry.queued;
+        if (reduction === void 0)
+          continue;
+        entry.queued = void 0;
+        entry.pending = entry.readback.mapAsync(GPUMapMode.READ).then(() => {
+          entry.observation = {
+            reduction,
+            values: new Float32Array(entry.readback.getMappedRange()).slice()
+          };
+          entry.readback.unmap();
+        }).catch(() => {
+          entry.observation = void 0;
+        }).finally(() => {
+          entry.pending = void 0;
+        });
+      }
+    },
+    cancelQueued() {
+      for (const entry of entries.values()) {
+        if (entry.encodedReduction)
+          entry.reduced = void 0;
+        entry.encodedReduction = false;
+        entry.encodedFallback = void 0;
+        entry.queued = void 0;
+      }
+    },
+    async collect() {
+      await Promise.all([...entries.values()].map((entry) => entry.pending));
+    },
+    readings(groupId) {
+      return [...entries.values()].filter((entry) => entry.groupId === groupId).flatMap((entry) => entry.observation === void 0 || entry.observation.reduction !== entry.reduced ? [] : toneReadingsFromBuffer(entry.observation.values, entry.observation.reduction.metadata, entry.fallback));
+    },
+    forget,
+    destroy() {
+      for (const resourceId of entries.keys())
+        forget(resourceId);
+    }
+  };
+}
+
 // ../renderer-webgpu/dist/renderer.js
 var OPTICS_PASS_ID = "vitrea.optics";
 var HIGHLIGHT_PASS_ID = "vitrea.highlight";
@@ -6089,6 +6498,7 @@ function createWebGPURenderer(options = {}) {
   const groups = /* @__PURE__ */ new Map();
   const adaptation = /* @__PURE__ */ new Map();
   const lastReadbackAt = /* @__PURE__ */ new Map();
+  const hintedTones = /* @__PURE__ */ new Map();
   let accessibility = NOMINAL_MATERIAL_POLICY;
   let material = withMaterialOverrides(DEFAULT_MATERIAL_PROFILE, options.materialProfile ?? {});
   let viewport = options.viewport ?? {
@@ -6100,6 +6510,7 @@ function createWebGPURenderer(options = {}) {
   let builtGeneration;
   let store;
   let runner;
+  let silhouetteTone;
   let framesDrawn = 0;
   let generations = 0;
   let lastFrameTimeMs;
@@ -6123,6 +6534,9 @@ function createWebGPURenderer(options = {}) {
   });
   const dropContext = () => {
     store?.destroy();
+    silhouetteTone?.destroy();
+    silhouetteTone = void 0;
+    hintedTones.clear();
     runner?.destroy();
     context?.destroy();
     store = void 0;
@@ -6154,6 +6568,7 @@ function createWebGPURenderer(options = {}) {
       builtGeneration = generation;
       store = createPyramidStore(context);
       runner = createPassRunner(context);
+      silhouetteTone = createSilhouetteTonePass(context);
       if (superseded !== void 0 && superseded !== generation) {
         for (const provider of providers.values()) {
           if (provider.generation !== generation)
@@ -6314,7 +6729,7 @@ function createWebGPURenderer(options = {}) {
     }
     return { built, unbuilt };
   }
-  function drawGroups(encoder, resolution) {
+  function drawGroups(encoder, resolution, timeMs) {
     const { store: pyramids, runner: passes } = ensureContext();
     const active = targets;
     if (active === void 0) {
@@ -6330,7 +6745,11 @@ function createWebGPURenderer(options = {}) {
     let drawn = 0;
     planesDrawn.add(active.plane);
     const resourceOf = (groupId) => groupResourceId(active.plane, groupId);
-    const releaseIdle = (groupId) => passes.forget(resourceOf(groupId));
+    const releaseIdle = (groupId) => {
+      passes.forget(resourceOf(groupId));
+      silhouetteTone?.forget(resourceOf(groupId));
+      hintedTones.delete(resourceOf(groupId));
+    };
     for (const entry of groups.values()) {
       const input = entry.input;
       if (input.surfaces.length === 0) {
@@ -6368,7 +6787,7 @@ function createWebGPURenderer(options = {}) {
         rectDevice.x * cssPerDevice,
         rectDevice.y * cssPerDevice
       ]);
-      const fields = passes.fieldPass(encoder, {
+      const fieldArgs = {
         resourceId: resourceOf(input.groupId),
         family: governor.knobs.fieldFamily,
         rectDevice,
@@ -6380,19 +6799,62 @@ function createWebGPURenderer(options = {}) {
         instances: packed.data,
         instanceCount: packed.count,
         union
-      });
+      };
+      const fields = passes.fieldPass(encoder, fieldArgs);
       const state = stateOf(input, resolution);
       const variant = variantOf(input);
       const sourceId = input.backdropSourceId;
       const pyramid = sourceId === void 0 ? void 0 : pyramids.resources(sourceId);
       const adapt = sourceId === void 0 ? void 0 : adaptationFor(sourceId).values;
+      const localTone = typeof material.backdropToneAbscissa === "object" && input.backdropToneHint !== true && pyramid !== void 0 && sourceId !== void 0 && surfaces.length > 0 ? silhouetteTone?.draw(encoder, {
+        groupId: input.groupId,
+        field: fieldArgs,
+        fields,
+        surfaces,
+        pyramid,
+        viewportDevice,
+        fit: fitFor(sourceId, pyramid),
+        timeMs,
+        cadenceHz: governor.knobs.adaptationCadenceHz,
+        liveSource: providers.get(sourceId)?.kind !== "image" && providers.get(sourceId)?.kind !== "gradient",
+        fallbackTone: [
+          input.backdropTone?.[0] ?? 0,
+          input.backdropTone?.[1] ?? 0,
+          input.backdropTone?.[2] ?? 0,
+          input.backdropTone === void 0 ? -1 : input.backdropToneLevel ?? relativeLuminance(input.backdropTone)
+        ]
+      }) : void 0;
+      if (localTone === void 0)
+        silhouetteTone?.forget(resourceOf(input.groupId));
+      const hintLevel = input.backdropToneLevel ?? (input.backdropTone === void 0 ? void 0 : relativeLuminance(input.backdropTone));
+      if (typeof material.backdropToneAbscissa === "object" && input.backdropToneHint === true && hintLevel !== void 0 && input.backdropTone !== void 0) {
+        const color = input.backdropTone;
+        hintedTones.set(resourceOf(input.groupId), {
+          groupId: input.groupId,
+          readings: surfaces.map((surface) => ({
+            surfaceId: surface.nodeId,
+            kind: "hint",
+            color,
+            encodedLuminance: linearToSrgbChannel(hintLevel),
+            luminance: hintLevel,
+            linearLuminance: input.backdropToneLinearLuminance ?? hintLevel,
+            sampleCount: 0,
+            level: 0,
+            sourceWidth: 0,
+            sourceHeight: 0,
+            sampledWidth: 0,
+            sampledHeight: 0
+          }))
+        });
+      } else
+        hintedTones.delete(resourceOf(input.groupId));
       const nominalOptics = material.optics[variant];
       const optics = opticsUnderPolicy(nominalOptics, policy, material);
       const backdropTone = [
         material.backdropToneLow,
         material.backdropToneHigh,
         backdropToneSizeBiasUnderPolicy(policy, material),
-        input.backdropTone === void 0 ? 0 : backdropToneUnderPolicy(policy, material) * material.backdropToneMax
+        input.backdropTone === void 0 && localTone === void 0 ? 0 : backdropToneUnderPolicy(policy, material) * material.backdropToneMax
       ];
       const backdropToneLevel = shadowBackdropLuminance ?? 0;
       const refraction = effectiveRefraction(accessibilityRefractionCap(policy), state.refraction);
@@ -6403,6 +6865,7 @@ function createWebGPURenderer(options = {}) {
         targetFormat: active.format,
         rectDevice,
         fields,
+        ...localTone === void 0 ? {} : { localTone },
         viewportDevice,
         cssPerDevice,
         coverageRampCss: cssPerDevice,
@@ -6626,6 +7089,7 @@ function createWebGPURenderer(options = {}) {
           rectDevice: surfaceRectDevice,
           fieldRectDevice: rectDevice,
           fields,
+          ...localTone === void 0 ? {} : { localTone },
           viewportDevice,
           cssPerDevice,
           sweep: lead.channels.sweep,
@@ -6766,8 +7230,11 @@ function createWebGPURenderer(options = {}) {
     },
     removeGroup(groupId) {
       groups.delete(groupId);
-      for (const plane of planesDrawn)
+      for (const plane of planesDrawn) {
         runner?.forget(groupResourceId(plane, groupId));
+        silhouetteTone?.forget(groupResourceId(plane, groupId));
+        hintedTones.delete(groupResourceId(plane, groupId));
+      }
     },
     setAccessibility(policy) {
       accessibility = policy;
@@ -6811,12 +7278,14 @@ function createWebGPURenderer(options = {}) {
           if (args.highlight !== void 0)
             passes.clearPass(encoder, args.highlight);
         }
-        result = drawGroups(encoder, args.resolution);
+        result = drawGroups(encoder, args.resolution, args.frame.timeMs);
         args.timing?.resolve(encoder);
         gpu.device.queue.submit([encoder.finish()]);
         pyramids.afterSubmit();
+        silhouetteTone?.afterSubmit();
       } finally {
         pyramids.releaseAcquired();
+        silhouetteTone?.cancelQueued();
       }
       const delta = lastFrameTimeMs === void 0 ? 0 : args.frame.timeMs - lastFrameTimeMs;
       lastFrameTimeMs = args.frame.timeMs;
@@ -6849,6 +7318,7 @@ function createWebGPURenderer(options = {}) {
           } catch (error) {
             pendingEncoder = void 0;
             pyramids.releaseAcquired();
+            silhouetteTone?.cancelQueued();
             throw error;
           }
         },
@@ -6864,12 +7334,14 @@ function createWebGPURenderer(options = {}) {
               passes.clearPass(encoder, targets.optics);
               if (targets.highlight !== void 0)
                 passes.clearPass(encoder, targets.highlight);
-              drawGroups(encoder, frameContext.resolution);
+              drawGroups(encoder, frameContext.resolution, frameContext.frame.timeMs);
             }
             context.device.queue.submit([encoder.finish()]);
             pyramids.afterSubmit();
+            silhouetteTone?.afterSubmit();
           } finally {
             pyramids.releaseAcquired();
+            silhouetteTone?.cancelQueued();
           }
           const delta = lastFrameTimeMs === void 0 ? 0 : frameContext.frame.timeMs - lastFrameTimeMs;
           lastFrameTimeMs = frameContext.frame.timeMs;
@@ -6881,7 +7353,14 @@ function createWebGPURenderer(options = {}) {
         }
       };
     },
+    backdropToneAbscissae(groupId) {
+      return [
+        ...silhouetteTone?.readings(groupId) ?? [],
+        ...[...hintedTones.values()].filter((entry) => entry.groupId === groupId).flatMap((entry) => entry.readings)
+      ];
+    },
     async collectAdaptation() {
+      await silhouetteTone?.collect();
       if (store === void 0)
         return 0;
       const stats = await store.collectStats();
@@ -6911,5 +7390,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, occlusionLiftForPolicy, 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-T7PRMUM4.js.map
-//# sourceMappingURL=dist-T7PRMUM4.js.map
+//# sourceMappingURL=dist-VQPRX7BX.js.map
+//# sourceMappingURL=dist-VQPRX7BX.js.map