@motion-proto/live-tokens 0.60.1 → 0.62.0

package/dist-plugin/index.js

@@ -5,7 +5,7 @@ import {
   parseGradientValue,
   reconcilePalettesFromCssVars,
   sanitizeFileName
-} from "./chunk-LW4SR7AZ.js";
+} from "./chunk-O6GQ6GBH.js";
 import {
   THEME_SCHEMA_VERSION,
   detectLegacyLayout,
@@ -23,10 +23,12 @@ import {
   runAdditiveTokensCssMigrations,
   runTokensCssMigrations,
   validateTokensCss
-} from "./chunk-E5QYON4L.js";
+} from "./chunk-OPYOK2CA.js";
 import {
-  hexToOklch
-} from "./chunk-XWXIMTWZ.js";
+  hexToOklch,
+  oklchToRgb255,
+  parseOklchCss
+} from "./chunk-7TQQTHI6.js";
 import {
   resolveDataDirs
 } from "./chunk-Y5CNFSSV.js";
@@ -55,6 +57,87 @@ function migratePaletteColorsToOklch(editorConfigs) {
   return out;
 }
 
+// src/system/backdrop/backdrop.ts
+var LIGHT_BACKDROP = 0.2;
+var OPAQUE = 0.98;
+var HEX_RE = /#([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})\b/gi;
+var OKLCH_RE = /oklch\(\s*[\d.]+%?\s+[\d.]+%?\s+[\d.]+(?:deg)?\s*(?:\/\s*([\d.]+%?)\s*)?\)/gi;
+var RGB_RE = /rgba?\(\s*([\d.]+%?)\s*[, ]\s*([\d.]+%?)\s*[, ]\s*([\d.]+%?)(?:\s*[,/]\s*([\d.]+%?))?\s*\)/gi;
+var EXOTIC_RE = /\b(?:color-mix|hwb|lab|lch|oklab|color)\([^()]*\)/gi;
+function channel(value) {
+  const parsed = Number.parseFloat(value);
+  return value.endsWith("%") ? parsed * 2.55 : parsed;
+}
+function alpha(value) {
+  if (value === void 0) return 1;
+  const parsed = Number.parseFloat(value);
+  return value.endsWith("%") ? parsed / 100 : parsed;
+}
+function parseHex(hex) {
+  const digits = hex.slice(1);
+  const full = digits.length <= 4 ? digits.split("").map((part) => part + part).join("") : digits;
+  return {
+    r: Number.parseInt(full.slice(0, 2), 16),
+    g: Number.parseInt(full.slice(2, 4), 16),
+    b: Number.parseInt(full.slice(4, 6), 16),
+    a: full.length >= 8 ? Number.parseInt(full.slice(6, 8), 16) / 255 : 1
+  };
+}
+function colorsIn(background) {
+  const colors = [];
+  for (const match of background.matchAll(HEX_RE)) colors.push(parseHex(match[0]));
+  for (const match of background.matchAll(OKLCH_RE)) {
+    const parsed = parseOklchCss(match[0]);
+    if (parsed) colors.push({ ...oklchToRgb255(parsed.l, parsed.c, parsed.h), a: alpha(match[1]) });
+  }
+  for (const match of background.matchAll(RGB_RE)) {
+    colors.push({
+      r: channel(match[1]),
+      g: channel(match[2]),
+      b: channel(match[3]),
+      a: alpha(match[4])
+    });
+  }
+  for (const match of background.matchAll(EXOTIC_RE)) {
+    const resolved = viaCanvas(match[0]);
+    if (resolved) colors.push(resolved);
+  }
+  return colors;
+}
+function linearChannel(value) {
+  const srgb = Math.max(0, Math.min(255, value)) / 255;
+  return srgb <= 0.04045 ? srgb / 12.92 : ((srgb + 0.055) / 1.055) ** 2.4;
+}
+function luminance({ r, g, b }) {
+  return 0.2126 * linearChannel(r) + 0.7152 * linearChannel(g) + 0.0722 * linearChannel(b);
+}
+var SEED = "#010203";
+var probe;
+function viaCanvas(value) {
+  if (typeof document === "undefined") return null;
+  if (probe === void 0) {
+    probe = document.createElement("canvas").getContext?.("2d", { willReadFrequently: true }) ?? null;
+  }
+  if (!probe) return null;
+  probe.fillStyle = SEED;
+  probe.fillStyle = value;
+  if (probe.fillStyle === SEED) return null;
+  probe.clearRect(0, 0, 1, 1);
+  probe.fillRect(0, 0, 1, 1);
+  const [r, g, b, a] = probe.getImageData(0, 0, 1, 1).data;
+  return { r, g, b, a: a / 255 };
+}
+function backgroundLuminance(background) {
+  const opaque = colorsIn(background).filter((color) => color.a >= OPAQUE);
+  if (!opaque.length) return null;
+  return opaque.reduce((total, color) => total + luminance(color), 0) / opaque.length;
+}
+function polarityOfBackground(background) {
+  const measured = backgroundLuminance(background);
+  if (measured === null) return null;
+  return measured >= LIGHT_BACKDROP ? "light" : "dark";
+}
+
 // vite-plugin/files/routeTable.ts
 async function dispatch(req, res, routes) {
   const url = req.url || "";
@@ -277,6 +360,7 @@ function themeFileApi(opts) {
     }
     const colorsAndTypeData = productionTheme?.colorsAndType;
     let colorsAndTypeVarCount = 0;
+    let pageBackground = "";
     if (colorsAndTypeData) {
       const cssVars = { ...colorsAndTypeData.cssVariables || {} };
       Object.assign(cssVars, palettesToVars(migratePaletteColorsToOklch(colorsAndTypeData.editorConfigs ?? {})));
@@ -284,6 +368,7 @@ function themeFileApi(opts) {
       for (const [name, value] of Object.entries(resolvedFontVars)) {
         cssVars[name] = value;
       }
+      pageBackground = cssVars["--page-bg"] ?? "";
       colorsAndTypeVarCount = Object.keys(cssVars).length;
       if (colorsAndTypeVarCount > 0) {
         lines.push(`/* Production theme: ${productionThemeName} */`);
@@ -295,6 +380,16 @@ function themeFileApi(opts) {
         lines.push("");
       }
     }
+    {
+      const polarity = pageBackground ? polarityOfBackground(pageBackground) : null;
+      if (polarity) {
+        lines.push(`/* Page polarity, from --page-bg */`);
+        lines.push(":where(:root) {");
+        lines.push(`  color-scheme: ${polarity};`);
+        lines.push("}");
+        lines.push("");
+      }
+    }
     let componentOverrideCount = 0;
     if (fs.existsSync(COMPONENT_CONFIGS_DIR)) {
       const blocks = [];

package/dist-plugin/tokensCssMigrations/index.cjs

@@ -464,37 +464,15 @@ var tokensCssMigration_2026_08_19_oklchColorValues = {
 
 // vite-plugin/tokensCssMigrations/migrations/2026-08-25-editorial-type-role.ts
 var STACK = [{ name: "--font-editorial", value: "var(--font-sans)" }];
-var BUNDLE2 = [
-  { name: "--editorial-font-family", value: "var(--font-editorial)" },
-  { name: "--editorial-font-size", value: "var(--font-size-md)" },
-  { name: "--editorial-font-weight", value: "var(--font-weight-normal)" },
-  { name: "--editorial-line-height", value: "var(--line-height-normal)" },
-  { name: "--editorial-letter-spacing", value: "var(--letter-spacing-normal)" }
-];
 var tokensCssMigration_2026_08_25_editorialTypeRole = {
   id: "2026-08-25-editorial-type-role",
   kind: "additive",
-  description: "Add the editorial type role (--font-editorial and the --editorial-* bundle)",
+  description: "Add the editorial type role (--font-editorial)",
   apply(css) {
-    const withStack = ensureScale(css, {
+    return ensureScale(css, {
       anchorPrefixes: ["--font-mono", "--font-serif", "--font-sans", "--font-display"],
       entries: STACK
     });
-    return ensureScale(withStack, {
-      sectionComment: "Editorial \u2014 the long-reading role, body face until repointed",
-      anchorPrefixes: [
-        "--eyebrow-",
-        "--code-",
-        "--body-",
-        "--heading-",
-        "--letter-spacing-",
-        "--line-height-",
-        "--font-weight-",
-        "--font-size-",
-        "--font-"
-      ],
-      entries: BUNDLE2
-    });
   }
 };
 
@@ -517,6 +495,77 @@ var tokensCssMigration_2026_08_26_gradientStops = {
   }
 };
 
+// vite-plugin/tokensCssMigrations/migrations/2026-08-27-backdrop-polarity.ts
+var MARKER = "[data-backdrop='dark']";
+var RULES = `/* BACKDROP POLARITY \u2014 one attribute says which way a surface leans. State it
+   in markup (\`<section data-backdrop="dark">\`) or let \`use:backdrop\` measure
+   and stamp it. Either way \`light-dark()\` inside resolves the right half, and
+   a rule can key on the attribute for what colour alone cannot carry. */
+
+[data-backdrop='light'] {
+  color-scheme: light;
+}
+
+[data-backdrop='dark'] {
+  color-scheme: dark;
+}
+`;
+var tokensCssMigration_2026_08_27_backdropPolarity = {
+  id: "2026-08-27-backdrop-polarity",
+  kind: "additive",
+  description: "Add the [data-backdrop] \u2192 color-scheme rules",
+  apply(css) {
+    if (css.includes(MARKER)) return css;
+    const at = css.indexOf(":root");
+    if (at === -1) return `${css.trimEnd()}
+
+${RULES}`;
+    return `${css.slice(0, at)}${RULES}
+${css.slice(at)}`;
+  }
+};
+
+// vite-plugin/tokensCssMigrations/migrations/2026-08-27-editorial-size-steps.ts
+var AXES = ["font-family", "font-size", "font-weight", "line-height", "letter-spacing"];
+var BUNDLE2 = [
+  { name: "--editorial-md-font-family", value: "var(--font-editorial)" },
+  { name: "--editorial-md-font-size", value: "var(--font-size-md)" },
+  { name: "--editorial-md-font-weight", value: "var(--font-weight-normal)" },
+  { name: "--editorial-md-line-height", value: "var(--line-height-normal)" },
+  { name: "--editorial-md-letter-spacing", value: "var(--letter-spacing-normal)" },
+  { name: "--editorial-sm-font-family", value: "var(--font-editorial)" },
+  { name: "--editorial-sm-font-size", value: "var(--font-size-sm)" },
+  { name: "--editorial-sm-font-weight", value: "var(--font-weight-normal)" },
+  { name: "--editorial-sm-line-height", value: "var(--line-height-tight)" },
+  { name: "--editorial-sm-letter-spacing", value: "var(--letter-spacing-normal)" }
+];
+var tokensCssMigration_2026_08_27_editorialSizeSteps = {
+  id: "2026-08-27-editorial-size-steps",
+  kind: "breaking",
+  description: "Split the editorial bundle into --editorial-md-* and --editorial-sm-* steps",
+  apply(css) {
+    let out = css;
+    for (const axis of AXES) {
+      out = renameToken(out, `--editorial-${axis}`, `--editorial-md-${axis}`);
+    }
+    return ensureScale(out, {
+      sectionComment: "Editorial \u2014 the long-reading role, body face until repointed",
+      anchorPrefixes: [
+        "--eyebrow-",
+        "--code-",
+        "--body-",
+        "--heading-",
+        "--letter-spacing-",
+        "--line-height-",
+        "--font-weight-",
+        "--font-size-",
+        "--font-"
+      ],
+      entries: BUNDLE2
+    });
+  }
+};
+
 // vite-plugin/files/dataPaths.ts
 var import_fs = __toESM(require("fs"), 1);
 var import_path = __toESM(require("path"), 1);
@@ -562,7 +611,9 @@ var TOKENS_CSS_MIGRATIONS = [
   tokensCssMigration_2026_07_20_semanticTextStyles,
   tokensCssMigration_2026_08_19_oklchColorValues,
   tokensCssMigration_2026_08_25_editorialTypeRole,
-  tokensCssMigration_2026_08_26_gradientStops
+  tokensCssMigration_2026_08_26_gradientStops,
+  tokensCssMigration_2026_08_27_backdropPolarity,
+  tokensCssMigration_2026_08_27_editorialSizeSteps
 ];
 function runTokensCssMigrations(css) {
   return foldMigrations(css, () => true);

package/dist-plugin/tokensCssMigrations/index.js

@@ -13,8 +13,8 @@ import {
   runTokensCssMigrations,
   semverBumpType,
   validateTokensCss
-} from "../chunk-E5QYON4L.js";
-import "../chunk-XWXIMTWZ.js";
+} from "../chunk-OPYOK2CA.js";
+import "../chunk-7TQQTHI6.js";
 import {
   readLiveTokensConfig
 } from "../chunk-Y5CNFSSV.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motion-proto/live-tokens",
-  "version": "0.60.1",
+  "version": "0.62.0",
   "type": "module",
   "description": "Design token editor with live CSS variable editing. Svelte 5 + Vite 8.",
   "keywords": [
@@ -90,6 +90,11 @@
       "svelte": "./src/editor/docs/Docs.svelte",
       "default": "./src/editor/docs/Docs.svelte"
     },
+    "./backdrop": {
+      "svelte": "./src/system/backdrop/index.ts",
+      "types": "./src/system/backdrop/index.ts",
+      "default": "./src/system/backdrop/index.ts"
+    },
     "./components/*": {
       "svelte": "./src/system/components/*",
       "default": "./src/system/components/*"

package/src/app/site.css

@@ -205,6 +205,22 @@ blockquote {
   letter-spacing: var(--body-sm-letter-spacing);
 }
 
+.editorial-md {
+  font-family: var(--editorial-md-font-family);
+  font-size: var(--editorial-md-font-size);
+  font-weight: var(--editorial-md-font-weight);
+  line-height: var(--editorial-md-line-height);
+  letter-spacing: var(--editorial-md-letter-spacing);
+}
+
+.editorial-sm {
+  font-family: var(--editorial-sm-font-family);
+  font-size: var(--editorial-sm-font-size);
+  font-weight: var(--editorial-sm-font-weight);
+  line-height: var(--editorial-sm-line-height);
+  letter-spacing: var(--editorial-sm-letter-spacing);
+}
+
 .eyebrow {
   font-family: var(--eyebrow-font-family);
   font-size: var(--eyebrow-font-size);

package/src/editor/component-editor/CardEditor.svelte

@@ -134,7 +134,7 @@
   }
 </script>
 
-<ComponentEditorBase {component} title="Card" description="Generic card with icon, title, and slotted body." tokens={allTokens} {linked}>
+<ComponentEditorBase {component} title="Card" description="Generic card with icon, title, and slotted body. The bare variant drops the header and keeps every frame and body token." tokens={allTokens} {linked}>
   <VariantGroup
     name="card"
     title="Card"
@@ -165,6 +165,9 @@
         <Card title="Card title" icon="fas fa-star" class={previewClass}>
           <div class="content-placeholder">Content Placeholder</div>
         </Card>
+        <Card variant="bare" class={previewClass}>
+          <div class="content-placeholder">Bare variant</div>
+        </Card>
       </div>
     {/snippet}
   </VariantGroup>
@@ -172,6 +175,9 @@
 
 <style>
   .card-demo {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-space-12);
     min-width: 16rem;
     max-width: 28rem;
   }

package/src/editor/component-editor/ImageLightboxEditor.svelte

@@ -8,6 +8,7 @@
   // for the interactive controls. No second variant.
   const states: Record<string, Token[]> = {
     tile: [
+      { label: 'fill color',    groupKey: 'surface', variable: '--imagelightbox-tile-surface' },
       { label: 'corner radius', groupKey: 'radius', variable: '--imagelightbox-tile-radius' },
       { label: 'border color',  groupKey: 'border', variable: '--imagelightbox-tile-border' },
       { label: 'border width',  groupKey: 'width',  variable: '--imagelightbox-tile-border-width' },
@@ -50,7 +51,7 @@
 <ComponentEditorBase
   {component}
   title="Image Lightbox"
-  description="Click an inline image to expand it into a centered modal with a backdrop. Pass multiple images for a gallery (chevrons + counter). Extended mode adds zoom controls and drag panning. `shadow` picks where the one tile-shadow token falls: `box` casts it from the tile rectangle, `content` from the image's own alpha, or `none`."
+  description="Click an inline image to expand it into a centered modal with a backdrop. Pass multiple images for a gallery (chevrons + counter). Extended mode adds zoom controls and drag panning. `shadow` picks where the one tile-shadow token falls: `box` casts it from the tile rectangle, `content` from the image's own alpha, or `none`. The tile fill sits behind the image in both states: none by default, so cut-out art floats on the page, and any fill you set frames it instead."
   tokens={allTokens}
 >
   <VariantGroup name="imagelightbox" title="Image Lightbox" {states} {component}>

package/src/editor/component-editor/scaffolding/VariantGroup.svelte

@@ -11,6 +11,8 @@
   import type { CssVarRef } from '../../core/store/editorTypes';
   import { cssStringToRef, refToCss } from '../../core/store/cssVarRef';
   import { getEditorContext } from './editorContext';
+  import { setSketchScope } from '../../core/sketch/sketchLayer';
+  import { sketchEnabled, sketchSettings } from '../../core/sketch/sketchStore';
   import type { Token, TypeGroupConfig } from './types';
   import type { Sibling } from './siblings';
 
@@ -84,6 +86,15 @@
   let bgMode: 'default' | 'image' | 'color' = $state('default');
   let bgVar = $derived(`--backdrop-${component ?? name}-surface`);
 
+  // The demo shows the component as the page will draw it, sketch included, so
+  // the scope attribute goes on this wrapper. It stops here: the tab strips and
+  // property rows around it are chrome and run on --ui-* tokens the layer knows
+  // nothing about. Only one of the four render sites below is ever mounted.
+  let sketchStage = $state<HTMLDivElement | undefined>(undefined);
+  $effect(() => {
+    setSketchScope(sketchStage ?? null, $sketchEnabled ? $sketchSettings : null);
+  });
+
   const editorCtx = getEditorContext();
   const linkedOrderStore = editorCtx?.linkedOrder ?? writable<Map<string, number> | null>(null);
   const focusedVariantStore = editorCtx?.focusedVariant ?? writable<string | null>(null);
@@ -397,7 +408,9 @@
         {/if}
       </div>
       {#if unboxedPreview}
-        {@render children?.({ activeState: activeTab })}
+        <div class="sketch-scope" bind:this={sketchStage}>
+          {@render children?.({ activeState: activeTab })}
+        </div>
       {:else}
         <ShadowBackdrop mode={bgMode} colorVariable={bgVar} padding={backdropPadding}>
           {#snippet controls()}
@@ -407,7 +420,9 @@
               {@render canvasToolbarExtras?.()}
             </div>
           {/snippet}
+          <div class="sketch-scope" bind:this={sketchStage}>
           {@render children?.({ activeState: activeTab })}
+        </div>
         </ShadowBackdrop>
       {/if}
 
@@ -508,10 +523,14 @@
     {/if}
   {:else}
     {#if unboxedPreview}
-      {@render children?.({ activeState: '' })}
+      <div class="sketch-scope" bind:this={sketchStage}>
+        {@render children?.({ activeState: '' })}
+      </div>
     {:else}
       <ShadowBackdrop mode={bgMode} colorVariable={bgVar} padding={backdropPadding}>
+        <div class="sketch-scope" bind:this={sketchStage}>
         {@render children?.({ activeState: '' })}
+      </div>
       </ShadowBackdrop>
     {/if}
     <TokenLayout
@@ -572,6 +591,10 @@
     pointer-events: none;
   }
 
+  .sketch-scope {
+    display: contents;
+  }
+
   .preview-header {
     display: flex;
     align-items: center;

package/src/editor/core/sketch/maskField.ts

@@ -8,9 +8,13 @@
  * narrow band around its own midpoint (about 0.24 to 0.77 for fractal noise,
  * whatever the octaves), so a dial that walks a cut across 0 to 1 spends most
  * of its travel outside the field entirely and the little that lands inside
- * comes out as one flat mid-grey. Generated here, the tile is stretched onto
- * its own measured range before any dial sees it, so Min and Max always have
- * the whole field to work with and always read as levels.
+ * comes out as one flat mid-grey.
+ *
+ * Generated here, the tile is auto-levelled before any dial sees it, and the
+ * dials that follow are a levels control: Steps quantises the field, Output
+ * squeezes it into the density range the mask paints between. Neither ever
+ * clips: the field arrives running black to white and every tone survives to
+ * the other end in the order it started.
  *
  * Everything is integer maths on a Float32Array with no DOM, so what a test
  * asserts is what the browser paints.
@@ -29,7 +33,7 @@ const SAMPLE_PX = 2;
 const RASTER = MASK_TILE / SAMPLE_PX;
 
 /** The stage previews, in the order the field is built. */
-export type MaskStage = 'noise' | 'output' | 'blur';
+export type MaskStage = 'noise' | 'levels' | 'blur';
 
 /* ---------------------------------------------------------------- noise --- */
 
@@ -128,41 +132,55 @@ function rawField(s: SketchSettings, seed: number, raster: number, cells: number
       out[y * raster + x] = sum / weightSum;
     }
   }
-  return normalise(out);
+  return equalise(out);
 }
 
+const BINS = 4096;
+
 /**
- * Stretch the field onto 0..1 by its own 0.5th and 99.5th percentiles.
+ * Auto levels: map the field through its own cumulative distribution, so tone
+ * is spread evenly from black to white whatever the noise underneath.
  *
- * This is the difference between levels that work and a grey wash. Noise of any
- * kind piles up around its middle, and how far it reaches depends on the grain
- * and the octave count, so a fixed range would be wrong for every setting but
- * one. Measured per tile, Min and Max always address a field that runs black to
- * white, and the two dials mean the same thing at every other setting.
+ * A black-and-white-point stretch is not enough on its own. Noise piles up
+ * around its middle and the veined fold piles it up at the bottom — half a
+ * one-layer veined tile sits under 0.29 — so a tile stretched by its extremes
+ * still reads as one dark wash, and every dial downstream cuts the range at
+ * points most of the field is nowhere near. Equalised, the median lands at 0.5
+ * and each fifth of the range holds a fifth of the tile, so a handle at 30
+ * addresses the darkest 30% of the field at every grain and octave count.
  *
- * The percentiles rather than the extremes, so one freak pixel cannot flatten
- * the rest of the tile.
+ * Piecewise-linear through a histogram rather than by rank, so the mapping
+ * stays smooth and cannot band a gradient it is meant to spread.
  */
-function normalise(f: Float32Array): Float32Array {
-  const sorted = Float32Array.from(f).sort();
-  const lo = sorted[Math.floor(0.005 * (sorted.length - 1))];
-  const hi = sorted[Math.ceil(0.995 * (sorted.length - 1))];
+function equalise(f: Float32Array): Float32Array {
+  let lo = Infinity, hi = -Infinity;
+  for (const v of f) { if (v < lo) lo = v; if (v > hi) hi = v; }
   const span = hi - lo;
   if (span <= 1e-6) return f.fill(0.5);
-  for (let i = 0; i < f.length; i++) f[i] = Math.min(1, Math.max(0, (f[i] - lo) / span));
+
+  const count = new Float64Array(BINS);
+  for (const v of f) count[Math.min(BINS - 1, Math.floor(((v - lo) / span) * BINS))]++;
+  const below = new Float64Array(BINS + 1);
+  for (let b = 0; b < BINS; b++) below[b + 1] = below[b] + count[b];
+
+  for (let i = 0; i < f.length; i++) {
+    const t = ((f[i] - lo) / span) * BINS;
+    const b = Math.min(BINS - 1, Math.floor(t));
+    f[i] = (below[b] + (t - b) * count[b]) / f.length;
+  }
   return f;
 }
 
 /* ------------------------------------------------------------- levelling --- */
 
-/** Output levels. The field is stretched into the gap between the handles, so
-    the pair states the range the mask paints: nothing is barer than Min or
-    denser than Max, and the field keeps its own shape in between.
+/** Output levels, the same squeeze Photoshop's output handles apply. The whole
+    field is stretched into the gap between them, so the pair states the range
+    the mask paints: nothing is barer than Min or denser than Max, and every
+    tone in between keeps its place in the order.
 
-    Clamping instead makes Min the value most of the field sits AT rather than
-    its rare floor, because the field arrives centred on its own middle: half of
-    it is below 0.5, so a floor of 0.6 piles that half onto 0.6 and the fill
-    comes out a flat wash at the floor with a thin bright tail above it. */
+    Never a cut. Clipping to the handles instead would make Min the value most
+    of the field sits AT rather than its floor, and the fill would come out a
+    flat wash at the floor with a thin bright tail above it. */
 function applyOutput(f: Float32Array, min: number, max: number): Float32Array {
   const span = max - min;
   for (let i = 0; i < f.length; i++) f[i] = min + f[i] * span;
@@ -178,14 +196,30 @@ function posterise(f: Float32Array, steps: number): Float32Array {
   return f;
 }
 
-/** Three box passes, wrapped at the tile edges so the blur cannot draw a rim
-    where the tile repeats.
+/** Wrapped box blur, so the blur cannot draw a rim where the tile repeats.
 
-    The width is the one the filter spec derives for three boxes to land on a
-    gaussian of a given deviation, so the dial's px are the px it gets. */
+    Three boxes at the width the filter spec derives land on a gaussian of a
+    given deviation, which is what makes the dial's px the px it gets. But a box
+    radius is a whole number of samples and a sample is two page px, so rounding
+    to one put the dial on a 2px ladder with a dead zone at the bottom: every
+    setting under 2.5px came out perfectly sharp, and everything from 2.5 to
+    4.2px came out identical. Mixing the two radii either side of the exact one
+    puts the dial back on a continuous scale, and radius zero is the field
+    itself, so the bottom of the travel eases in instead of switching on. */
 function blur(f: Float32Array, raster: number, std: number): Float32Array {
-  const radius = Math.round((std * 3 * Math.sqrt(2 * Math.PI) / 4 - 1) / 2);
-  if (radius < 1) return f;
+  const exact = (std * 3 * Math.sqrt(2 * Math.PI) / 4 - 1) / 2;
+  if (exact <= 0) return f;
+  const lower = Math.floor(exact);
+  const mix = exact - lower;
+  const low = lower < 1 ? f : boxes(f, raster, lower);
+  if (mix < 1e-6) return low;
+  const high = boxes(f, raster, lower + 1);
+  const out = new Float32Array(f.length);
+  for (let i = 0; i < f.length; i++) out[i] = low[i] + (high[i] - low[i]) * mix;
+  return out;
+}
+
+function boxes(f: Float32Array, raster: number, radius: number): Float32Array {
   let cur = f;
   for (let pass = 0; pass < 3; pass++) cur = boxPass(cur, raster, radius);
   return cur;
@@ -234,8 +268,10 @@ function cachedRaw(s: SketchSettings, seed: number): Float32Array {
 /**
  * The finished field, 0 (bare) to 1 (inked), row-major.
  *
- * Three stages and no fourth: the last one IS the result, so the strip of
- * previews in the tab accounts for the whole of what the dials do.
+ * `through` stops the pipeline early. Nothing in the app asks for a part of it
+ * — the tab shows the finished field and nothing else — but the levels are
+ * three passes over one array, and the seam is where the tests read what each
+ * pass did.
  */
 export function buildMaskField(
   s: SketchSettings, seed = 9, through?: MaskStage,
@@ -246,7 +282,7 @@ export function buildMaskField(
   const levelled = applyOutput(
     posterise(Float32Array.from(raw), s.maskPosterize), s.maskOutputMin, s.maskOutputMax,
   );
-  if (through === 'output') return { field: levelled, raster: RASTER };
+  if (through === 'levels') return { field: levelled, raster: RASTER };
 
   return { field: blur(levelled, RASTER, s.maskSoftness / SAMPLE_PX), raster: RASTER };
 }