@motion-proto/live-tokens 0.61.0 → 0.63.0

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
-    });
   }
 };
 
@@ -547,6 +525,84 @@ ${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/tokensCssMigrations/migrations/2026-08-27-editorial-large-steps.ts
+var BUNDLE3 = [
+  { name: "--editorial-xl-font-family", value: "var(--font-editorial)" },
+  { name: "--editorial-xl-font-size", value: "var(--font-size-xl)" },
+  { name: "--editorial-xl-font-weight", value: "var(--font-weight-normal)" },
+  { name: "--editorial-xl-line-height", value: "var(--line-height-tighter)" },
+  { name: "--editorial-xl-letter-spacing", value: "var(--letter-spacing-normal)" },
+  { name: "--editorial-lg-font-family", value: "var(--font-editorial)" },
+  { name: "--editorial-lg-font-size", value: "var(--font-size-lg)" },
+  { name: "--editorial-lg-font-weight", value: "var(--font-weight-normal)" },
+  { name: "--editorial-lg-line-height", value: "var(--line-height-tight)" },
+  { name: "--editorial-lg-letter-spacing", value: "var(--letter-spacing-normal)" }
+];
+var tokensCssMigration_2026_08_27_editorialLargeSteps = {
+  id: "2026-08-27-editorial-large-steps",
+  kind: "additive",
+  description: "Add the --editorial-lg-* and --editorial-xl-* steps above the reading size",
+  apply(css) {
+    return ensureScale(css, {
+      sectionComment: "Editorial \u2014 the steps above the reading size",
+      anchorPrefixes: [
+        "--editorial-",
+        "--eyebrow-",
+        "--code-",
+        "--body-",
+        "--heading-",
+        "--letter-spacing-",
+        "--line-height-",
+        "--font-weight-",
+        "--font-size-",
+        "--font-"
+      ],
+      entries: BUNDLE3
+    });
+  }
+};
+
 // vite-plugin/files/dataPaths.ts
 var import_fs = __toESM(require("fs"), 1);
 var import_path = __toESM(require("path"), 1);
@@ -593,7 +649,9 @@ var TOKENS_CSS_MIGRATIONS = [
   tokensCssMigration_2026_08_19_oklchColorValues,
   tokensCssMigration_2026_08_25_editorialTypeRole,
   tokensCssMigration_2026_08_26_gradientStops,
-  tokensCssMigration_2026_08_27_backdropPolarity
+  tokensCssMigration_2026_08_27_backdropPolarity,
+  tokensCssMigration_2026_08_27_editorialSizeSteps,
+  tokensCssMigration_2026_08_27_editorialLargeSteps
 ];
 function runTokensCssMigrations(css) {
   return foldMigrations(css, () => true);

package/dist-plugin/tokensCssMigrations/index.d.cts

@@ -1,4 +1,4 @@
-export { r as readLiveTokensConfig } from '../dataPaths-CRfD1LdA.cjs';
+export { r as readLiveTokensConfig } from '../dataPaths-DZUzVv8H.cjs';
 
 /**
  * A `tokens-css` migration: a pure, idempotent transform on the text of a

package/dist-plugin/tokensCssMigrations/index.d.ts

@@ -1,4 +1,4 @@
-export { r as readLiveTokensConfig } from '../dataPaths-CRfD1LdA.js';
+export { r as readLiveTokensConfig } from '../dataPaths-DZUzVv8H.js';
 
 /**
  * A `tokens-css` migration: a pure, idempotent transform on the text of a

package/dist-plugin/tokensCssMigrations/index.js

@@ -13,11 +13,11 @@ import {
   runTokensCssMigrations,
   semverBumpType,
   validateTokensCss
-} from "../chunk-OIOXU7FR.js";
+} from "../chunk-ZHPX7ZYQ.js";
 import "../chunk-7TQQTHI6.js";
 import {
   readLiveTokensConfig
-} from "../chunk-Y5CNFSSV.js";
+} from "../chunk-RVE3MNKM.js";
 export {
   TOKENS_CSS_MIGRATIONS,
   collectDefinedTokens,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motion-proto/live-tokens",
-  "version": "0.61.0",
+  "version": "0.63.0",
   "type": "module",
   "description": "Design token editor with live CSS variable editing. Svelte 5 + Vite 8.",
   "keywords": [
@@ -137,13 +137,15 @@
     "check:token-contract": "node scripts/check-token-contract.mjs",
     "check:preset-themes": "node scripts/check-preset-themes.mjs",
     "check:skills": "node scripts/check-skills.mjs",
+    "check:skill-atlas": "node scripts/sync-skill-atlas.mjs",
     "sync:component-defaults": "node scripts/sync-component-defaults.mjs --write",
     "sync:docs": "node scripts/sync-docs.mjs --write",
+    "sync:skill-atlas": "node scripts/sync-skill-atlas.mjs --write",
     "seed:preset-theme": "node scripts/seed-preset-theme.mjs",
     "collapse:theme": "node scripts/collapse-theme-to-default.mjs",
     "check:smoke-install": "bash scripts/smoke-install.sh",
     "check:smoke-create": "bash scripts/smoke-create.sh",
-    "prepublishOnly": "npm run check:no-style-imports && npm run check:no-tooling-imports && npm run check:slot-prose && npm run check:overlay-portal && npm run check:editor-font-isolation && npm run check:component-defaults && npm run check:production-is-default && npm run check:docs-content && npm run build:lib && npm run check:token-contract && npm run check:preset-themes && npm run check:skills && npm run check:smoke-install && npm run check:smoke-create"
+    "prepublishOnly": "npm run check:no-style-imports && npm run check:no-tooling-imports && npm run check:slot-prose && npm run check:overlay-portal && npm run check:editor-font-isolation && npm run check:component-defaults && npm run check:production-is-default && npm run check:docs-content && npm run build:lib && npm run check:token-contract && npm run check:preset-themes && npm run check:skills && npm run check:skill-atlas && npm run check:smoke-install && npm run check:smoke-create"
   },
   "peerDependencies": {
     "@sveltejs/vite-plugin-svelte": "^7.0",

package/src/app/site.css

@@ -205,6 +205,38 @@ blockquote {
   letter-spacing: var(--body-sm-letter-spacing);
 }
 
+.editorial-xl {
+  font-family: var(--editorial-xl-font-family);
+  font-size: var(--editorial-xl-font-size);
+  font-weight: var(--editorial-xl-font-weight);
+  line-height: var(--editorial-xl-line-height);
+  letter-spacing: var(--editorial-xl-letter-spacing);
+}
+
+.editorial-lg {
+  font-family: var(--editorial-lg-font-family);
+  font-size: var(--editorial-lg-font-size);
+  font-weight: var(--editorial-lg-font-weight);
+  line-height: var(--editorial-lg-line-height);
+  letter-spacing: var(--editorial-lg-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/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/preview/lookPreview.ts

@@ -6,6 +6,7 @@ import { batchCssVarChanges, setCssVar, removeCssVar } from '../cssVarSync';
 import { applyFontSources } from '../fonts/fontLoader';
 import { migrateColorsAndTypeFonts } from '../fonts/fontMigration';
 import { loadTheme } from '../themes/themeService';
+import { previewSketchStyle, revertSketchStylePreview } from '../sketch/sketchStore';
 
 /**
  * Client-side rendering of a saved file, for browsing looks without committing
@@ -20,6 +21,11 @@ import { loadTheme } from '../themes/themeService';
  * of the same theme produces, and a revert re-derives from the live store
  * rather than replaying DOM values scraped before the preview.
  *
+ * A theme's sketchstyle rides along the same way: `previewTheme` paints it
+ * through `previewSketchStyle`, which reaches the page without touching the
+ * live sketch buffer, and a revert re-derives from that buffer exactly as the
+ * CSS vars do.
+ *
  * One preview is live at a time, whichever kind it is: painting reverts first,
  * so every look is a diff against the user's real state.
  */
@@ -76,6 +82,14 @@ export function liveLook(): RenderedLook {
 
 let livePreview: RenderedLook | null = null;
 let defaultsPromise: Promise<Theme> | null = null;
+// Whether the current preview session has a sketchstyle painted over the live
+// buffer, so a colors-only preview (which never previews sketch) and revert
+// know whether there is anything to hand back.
+let sketchPreviewActive = false;
+// Bumped whenever a preview session ends or is superseded. `previewTheme` awaits
+// the defaults theme, and a Cancel landing inside that await was overwritten when
+// it resolved, stranding a preview the picker believed it had already taken down.
+let generation = 0;
 
 function loadDefaults(): Promise<Theme> {
   // A rejected promise must not be memoized, or one failed fetch (a dev-server
@@ -109,30 +123,55 @@ function applyPreview(look: RenderedLook): void {
   livePreview = look;
 }
 
-/** Paint a whole look: the theme's colors and type and every component config
- *  it carries. */
+/** Paint a whole look: the theme's colors and type, every component config
+ *  it carries, and its sketchstyle — present or not, since a theme with none
+ *  paints crisp regardless of what is live (invariant 3). */
 export async function previewTheme(theme: Theme): Promise<void> {
-  applyPreview(themeLook(theme, await loadDefaults()));
+  const gen = generation;
+  const defaults = await loadDefaults();
+  if (gen !== generation) return;
+  applyPreview(themeLook(theme, defaults));
+  previewSketchStyle(theme.sketchStyle);
+  sketchPreviewActive = true;
 }
 
-/** Paint colors and type over the components as they stand. */
+/** Paint colors and type over the components as they stand. Not a whole
+ *  look, so the sketchstyle stays live too — reverting a sketch preview a
+ *  prior row left painted, if one is running. */
 export function previewColorsAndType(colorsAndType: ColorsAndType): void {
+  generation++;
   applyPreview(colorsAndTypeLook(colorsAndType));
+  if (sketchPreviewActive) {
+    revertSketchStylePreview();
+    sketchPreviewActive = false;
+  }
 }
 
 /** Restore the live editor state. No-op when no preview is running. */
 export function revertPreview(): void {
+  generation++;
   if (!livePreview) return;
   paint(liveLook(), livePreview);
   livePreview = null;
+  if (sketchPreviewActive) {
+    revertSketchStylePreview();
+    sketchPreviewActive = false;
+  }
 }
 
 /** Release the preview without repainting. The caller must immediately load
  * the exact look being previewed into the store. This is the Save handoff: the
  * selected theme is already on screen, so restoring the old live look before
- * applying it would add work and create a visible flash across the request. */
+ * applying it would add work and create a visible flash across the request.
+ * The sketchstyle stays painted for the same reason, though the handoff is not
+ * quite free: when the live state was crisp, `openThemeSketchStyle` writes the
+ * settings before the flag, so the sheet and the filter bank come down and go
+ * straight back up in between. That order is still the right one, since writing
+ * the flag first would paint the OLD dials for a frame. */
 export function commitPreview(): void {
+  generation++;
   livePreview = null;
+  sketchPreviewActive = false;
 }
 
 export function isPreviewing(): boolean {
@@ -141,6 +180,8 @@ export function isPreviewing(): boolean {
 
 /** Test-only: drop the live preview and the cached defaults theme. */
 export function __resetPreviewForTests(): void {
+  generation++;
   livePreview = null;
   defaultsPromise = null;
+  sketchPreviewActive = false;
 }

package/src/editor/core/productionPulse.ts

@@ -35,8 +35,12 @@ export function bumpComponentActiveRevision(): void {
  * component editor's Adopt has to clear it for the panel.
  *
  * Set by the client writes that move the live look (`writeWorkingColorsAndType`,
- * `writeWorkingComponentConfig`, `saveActiveTheme`, `saveAsTheme`); cleared by
- * `adoptLook`. Module-level, so it survives the remounts a view switch causes.
+ * `writeWorkingComponentConfig`, `saveActiveTheme`, `saveAsTheme`, and every
+ * sketch gesture that changes what the effect paints: `setSketchEnabled`,
+ * `updateSketchSettings`, `selectSketchStyle`, `selectSavedSketchStyle`);
+ * cleared by `adoptLook` and by `hydrateAppliedTheme`, on this document and on
+ * every peer an Apply broadcasts to. Module-level, so it survives the
+ * remounts a view switch causes.
  */
 export const liveMovedSinceBake = writable(false);
 

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

@@ -8,14 +8,18 @@
  * 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.
  */
-import type { SketchSettings } from './sketchPresets';
+import type { SketchStyle } from './sketchStyles';
 
 /** What the tile spans in page px. Blobs are fitted a whole number to the
     tile, which is what lets the lattice wrap; the dial's px reading is the
@@ -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 --- */
 
@@ -107,7 +111,7 @@ function makePerlin(seed: number): (x: number, y: number, period: number) => num
  * wherever the octave crossed zero, which is the marbled look; plain sum is
  * cloud.
  */
-function rawField(s: SketchSettings, seed: number, raster: number, cells: number): Float32Array {
+function rawField(s: SketchStyle, seed: number, raster: number, cells: number): Float32Array {
   const noise = makePerlin(seed);
   const veined = s.maskGrain === 'turbulence';
   const octaves = Math.max(1, Math.round(s.maskOctaves));
@@ -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;
@@ -222,7 +256,7 @@ function boxPass(f: Float32Array, n: number, radius: number): Float32Array {
     all four; the levels, the posterising and the blur are one pass each. */
 let rawCache: { key: string; field: Float32Array } | null = null;
 
-function cachedRaw(s: SketchSettings, seed: number): Float32Array {
+function cachedRaw(s: SketchStyle, seed: number): Float32Array {
   const key = [s.maskBlob, s.maskOctaves, s.maskGrain, seed].join('|');
   if (rawCache?.key !== key) {
     const cells = Math.max(1, Math.round(MASK_TILE / s.maskBlob));
@@ -234,11 +268,13 @@ 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,
+  s: SketchStyle, seed = 9, through?: MaskStage,
 ): { field: Float32Array; raster: number } {
   const raw = cachedRaw(s, seed);
   if (through === 'noise') return { field: raw, raster: RASTER };
@@ -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 };
 }
@@ -370,7 +406,7 @@ const CACHE_MAX = 6;
 const cache = new Map<string, string>();
 
 /** The field as a `url(...)` for `mask-image`. */
-export function buildMaskUri(s: SketchSettings, seed = 9, through?: MaskStage): string {
+export function buildMaskUri(s: SketchStyle, seed = 9, through?: MaskStage): string {
   const key = [...KEYS.map((k) => s[k]), seed, through ?? 'all'].join('|');
   const hit = cache.get(key);
   if (hit) return hit;