@motion-proto/live-tokens 0.65.1 → 0.67.0

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

@@ -1,18 +1,42 @@
-import { derived, type Readable } from 'svelte/store';
-import { SKETCH_STYLES } from './sketchStyles';
-import { selectSketchStyle, setSketchEnabled, sketchEnabled, sketchStyleName } from './sketchStore';
+import { derived, get, type Readable } from 'svelte/store';
+import { THEME_SKETCH_ID } from './sketchStyles';
+import { lookById, sketchLooks, type SketchLook } from './sketchRegistry';
+import {
+  sameLook,
+  selectSketchStyle,
+  selectThemeSketchStyle,
+  setSketchEnabled,
+  sketchEnabled,
+  sketchStyleName,
+  themeSketchStyle,
+} from './sketchStore';
 
-export interface SketchLook {
-  /** What `setSketch` takes. */
-  id: string;
-  label: string;
-  blurb: string;
-}
+export { sketchLooks, registerSketchLook } from './sketchRegistry';
+export type { SketchLook, SketchLookSource, RegisterSketchLookInput } from './sketchRegistry';
+
+/** A look as one picker row. The theme's own look is offered this way too, and
+    it belongs to no pool entry, so the fields only a pool entry has are off. */
+export type SketchLookRow = Omit<SketchLook, 'settings' | 'source'>;
 
-/** The shipped sketchstyles. A picker adds its own "None" row: off is a state
-    of the effect, not one of the looks. */
-export const SKETCH_LOOKS: readonly SketchLook[] = Object.entries(SKETCH_STYLES).map(
-  ([id, style]) => ({ id, label: style.label, blurb: style.blurb }),
+/**
+ * The look the open theme carries, as one more row for a picker: same shape as
+ * a shipped look, and `setSketch` takes its id like any other. Null when the
+ * theme carries no sketchstyle, and null when what it carries IS one of the
+ * shipped looks, since that look's own row already names it.
+ *
+ * Without this row the theme's look is a one-way door: a visitor lands on it,
+ * picks Pencil, and nothing can take them back. It is also the only thing that
+ * can name that look, which no shipped label can do honestly. A theme tuned off
+ * `marker` still carries the label "Marker", so a row built from the style's
+ * own label would sit beside the shipped Marker claiming to be it.
+ */
+export const themeSketchLook: Readable<SketchLookRow | null> = derived(
+  [themeSketchStyle, sketchLooks],
+  ([style, looks]) => {
+    if (!style) return null;
+    if (looks.some((look) => sameLook(look.settings, style))) return null;
+    return { id: THEME_SKETCH_ID, label: 'Theme', blurb: 'The look this theme carries.' };
+  },
 );
 
 /**
@@ -27,20 +51,20 @@ export const SKETCH_LOOKS: readonly SketchLook[] = Object.entries(SKETCH_STYLES)
  */
 export type SketchPick =
   | { state: 'off' }
-  | { state: 'look'; look: SketchLook }
+  | { state: 'look'; look: SketchLookRow }
   | { state: 'adjusted' };
 
 export const sketchPick: Readable<SketchPick> = derived(
-  [sketchEnabled, sketchStyleName],
-  ([on, name]): SketchPick => {
+  [sketchEnabled, sketchStyleName, sketchLooks, themeSketchLook],
+  ([on, name, looks, themeLook]): SketchPick => {
     if (!on) return { state: 'off' };
-    const look = SKETCH_LOOKS.find((l) => l.id === name);
-    return look ? { state: 'look', look } : { state: 'adjusted' };
+    const look = looks.find((l) => l.id === name) ?? (themeLook?.id === name ? themeLook : undefined);
+    return look ? { state: 'look', look: { id: look.id, label: look.label, blurb: look.blurb } } : { state: 'adjusted' };
   },
 );
 
 /**
- * Draw the page with one of the shipped looks, or `null` for none.
+ * Draw the page with one of the looks in the pool, or `null` for none.
  *
  * The only supported way for a consumer to drive the effect. Reaching for
  * `applySketchLayer` instead paints a stylesheet the store does not know it
@@ -52,8 +76,16 @@ export function setSketch(id: string | null): void {
     setSketchEnabled(false);
     return;
   }
-  if (!(id in SKETCH_STYLES)) {
-    throw new Error(`Unknown sketchstyle "${id}". Ids come from SKETCH_LOOKS.`);
+  if (id === THEME_SKETCH_ID) {
+    if (!get(themeSketchStyle)) {
+      throw new Error('No theme sketchstyle to draw with. `themeSketchLook` is null unless a theme carries one.');
+    }
+    selectThemeSketchStyle();
+    setSketchEnabled(true);
+    return;
+  }
+  if (!lookById(id)) {
+    throw new Error(`Unknown sketchstyle "${id}". Ids come from sketchLooks and themeSketchLook.`);
   }
   selectSketchStyle(id);
   setSketchEnabled(true);
@@ -68,3 +100,28 @@ export function setSketch(id: string | null): void {
  * key directly is not an option worth offering — it is ours to rename.
  */
 export { hasPersistedSketchState } from './sketchStore';
+
+/**
+ * Draw the page with the sketchstyle a theme carries, unless this browser has
+ * already decided for itself.
+ *
+ * The route from a saved theme to a built page. Hand it the theme's
+ * `sketchStyle` field, raw: a built site has no theme API, so it reads its own
+ * theme JSON and this hydrates what it finds. Absent, `null`, or anything that
+ * is not an object all mean the same thing, which is no sketch.
+ *
+ * Call it before mounting, the way dev boot does (`bootstrap.ts` awaits
+ * `initializeTheme` first), so the look is up on the first frame rather than
+ * arriving over a crisp page.
+ *
+ * A visitor who has recorded a pick of their own keeps it, None included: this
+ * seeds an undecided browser and never overwrites a decided one, so it is safe
+ * to call on every boot. `themeSketchLook` is populated either way, so a picker
+ * can offer the theme's look as a row whether or not this painted it.
+ */
+export { seedSketchFromTheme } from './sketchStore';
+
+/** The dial set a theme's `sketchStyle` field holds, for a consumer typing the
+    value it pulled out of its own theme JSON. `seedSketchFromTheme` takes it
+    raw, so nothing has to be cast to hand it over. */
+export type { SketchStyle } from './sketchStyles';

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

@@ -21,16 +21,120 @@
  */
 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
-    nearest whole fit, never more than a few px off what it says. */
-export const MASK_TILE = 600;
+/** Samples across the tile, on both axes. Fixed, whatever the blobs measure:
+    the field is blobs and gradients, so the browser stretching the tile back to
+    page px costs nothing visible, and the data URI stays one size. */
+const RASTER = 300;
 
-/** Page px per sample. The field is blobs and gradients, so painting it at half
-    resolution and letting the browser scale it up costs nothing visible and
-    quarters both the work and the data URI. */
-const SAMPLE_PX = 2;
-const RASTER = MASK_TILE / SAMPLE_PX;
+/** Blobs per tile, and so how far the field runs before it repeats. Held in
+    this band rather than taken from the blob size alone: under two the lattice
+    is smaller than a pattern, and over forty a blob is down to seven samples
+    across and the finest octave starts to alias. */
+const CELLS = { min: 2, max: 40 };
+
+/** The tile the band is aimed at, in page px. A blob wants enough of them
+    around it that the repeat is not a thing you can see. */
+const TARGET_TILE = 600;
+
+/** How far the cell count is allowed to drift from the tile it is aimed at to
+    buy a degree of rotation, as degrees per e-fold. A tilt the dial cannot
+    reach is worth more than a tile at exactly 600px. */
+const CELL_DRIFT = 12;
+
+type Vec = readonly [number, number];
+
+/**
+ * Where the page's own axes land on the noise lattice, and the tile that puts
+ * them there.
+ *
+ * The field wraps by reducing every lattice point modulo the pair, so both
+ * vectors have to be whole cells. Axis-aligned that is no constraint at all —
+ * a tile some whole number of blobs wide — but a tilted pattern only meets
+ * itself if the turn lands the page's axes back on the lattice, which most
+ * angles do not. The dial is answered with the nearest pair that does, and
+ * `angle` reports what that came out as rather than what was asked for.
+ *
+ * Rotation is dropped when the two blob sizes match: the field under it is the
+ * same in every direction, so turning it only draws a different tile of the
+ * same thing, and the fit is exact left alone.
+ */
+export interface MaskLattice {
+  /** The page's x axis in cells, then its y axis. */
+  vx: Vec;
+  vy: Vec;
+  /** The tile in page px. */
+  w: number;
+  h: number;
+  /** The turn the pair actually describes, in degrees. */
+  angle: number;
+}
+
+export function maskLattice(s: SketchStyle): MaskLattice {
+  const ask = s.maskBlobX === s.maskBlobY ? 0 : s.maskAngle;
+  const rad = ask * (Math.PI / 180);
+  const cos = Math.cos(rad), sin = Math.sin(rad);
+  const dx: Vec = [cos / s.maskBlobX, -sin / s.maskBlobY];
+  const dy: Vec = [sin / s.maskBlobX, cos / s.maskBlobY];
+  const vx = fit(dx, ask, (v) => turnOf(-v[1] * s.maskBlobY, v[0] * s.maskBlobX));
+  let vy = fit(dy, ask, (v) => turnOf(v[0] * s.maskBlobX, v[1] * s.maskBlobY));
+  // Two vectors along one line describe no tile at all. The turn of the first
+  // is the whole look, so the second is the one that gives way.
+  if (vx[0] * vy[1] - vx[1] * vy[0] === 0) vy = [-vx[1], vx[0]];
+  return {
+    vx,
+    vy,
+    w: Math.hypot(...vx) / Math.hypot(...dx),
+    h: Math.hypot(...vy) / Math.hypot(...dy),
+    angle: turnOf(-vx[1] * s.maskBlobY, vx[0] * s.maskBlobX),
+  };
+}
+
+/** A direction as a turn from level, 0 to 180: a stretch has a slant, not a
+    heading, so pointing back the way it came is the same slant. */
+function turnOf(rise: number, run: number): number {
+  return (((Math.atan2(rise, run) * (180 / Math.PI)) % 180) + 180) % 180;
+}
+
+/**
+ * The whole-cell vector that lands the tile nearest the turn the dial asks for,
+ * weighing that against the number of cells it spends getting there.
+ *
+ * Scored on the turn the page ends up showing, never on the one the vector
+ * makes against the lattice. The two part company as soon as the blob sizes
+ * do: at seven to one, a vector a degree off square on the lattice comes out
+ * eight degrees off on the page, and a fit that reads the lattice believes it
+ * has landed.
+ */
+function fit(d: Vec, ask: number, turn: (v: Vec) => number): Vec {
+  const length = Math.hypot(...d);
+  const unit: Vec = [d[0] / length, d[1] / length];
+  const target = Math.min(CELLS.max, Math.max(CELLS.min, TARGET_TILE * length));
+  let best: Vec = [1, 0];
+  let bestCost = Infinity;
+  for (let cells = CELLS.min; cells <= CELLS.max; cells++) {
+    const v: Vec = [Math.round(unit[0] * cells), Math.round(unit[1] * cells)];
+    const spent = Math.hypot(...v);
+    if (spent === 0) continue;
+    const off = Math.abs(turn(v) - ask);
+    const cost = Math.min(off, 180 - off) + CELL_DRIFT * Math.abs(Math.log(spent / target));
+    if (cost < bestCost) { bestCost = cost; best = v; }
+  }
+  return best;
+}
+
+/**
+ * What the tile spans in page px, as `mask-size` takes it.
+ *
+ * A whole number of blobs along each of the page's axes, at exactly the size
+ * the dials state, so the number on the Scale dial is the number of pixels a
+ * blob measures on the page. The tile used to be a fixed 600px with the blobs
+ * fitted to it, which meant the dial could only reach the sizes that divide
+ * 600: it said 250px and painted 300px, and there was nothing above that.
+ */
+export function maskTile(s: SketchStyle): { w: number; h: number } {
+  const { w, h } = maskLattice(s);
+  return { w, h };
+}
 
 /** The stage previews, in the order the field is built. */
 export type MaskStage = 'noise' | 'levels' | 'blur';
@@ -48,8 +152,9 @@ function mulberry32(seed: number): () => number {
 }
 
 /**
- * Perlin noise on a lattice that wraps every `period` cells, so a tile drawn
- * from it meets itself at both edges. Returns roughly -0.7 to 0.7.
+ * Perlin noise on a lattice that wraps on the tile's own two vectors, so a tile
+ * drawn from it meets itself at both edges however the pattern is turned.
+ * Returns roughly -0.7 to 0.7.
  *
  * Hand-rolled because the wrap is the whole requirement and no established
  * noise package offers one: `simplex-noise` and its neighbours all sample an
@@ -57,7 +162,8 @@ function mulberry32(seed: number): () => number {
  * noise, and it degenerates at the ratio this effect works at — a tile only
  * four or five blobs across makes those circles smaller than one noise feature,
  * and the field comes back as a regular grid of dots instead of cloud. A
- * lattice takes its period as an integer and wraps exactly at any size.
+ * lattice wraps exactly at any size, and on any pair of whole-cell vectors,
+ * which is what lets the pattern be turned.
  *
  * Gradients are drawn from the whole circle, one per lattice point, rather than
  * from the eight compass directions the textbook version uses. Eight leaves
@@ -65,7 +171,16 @@ function mulberry32(seed: number): () => number {
  */
 const GRAD_COUNT = 256;
 
-function makePerlin(seed: number): (x: number, y: number, period: number) => number {
+/** One octave's tile vectors, and the determinant that reduces against them. */
+interface Wrap { ax: number; ay: number; bx: number; by: number; det: number }
+
+function wrapOn(vx: Vec, vy: Vec, octave: number): Wrap {
+  const ax = vx[0] * octave, ay = vx[1] * octave;
+  const bx = vy[0] * octave, by = vy[1] * octave;
+  return { ax, ay, bx, by, det: ax * by - bx * ay };
+}
+
+function makePerlin(seed: number): (x: number, y: number, w: Wrap) => number {
   const rand = mulberry32(seed);
   const perm = new Uint8Array(512);
   const src = new Uint8Array(256);
@@ -85,21 +200,26 @@ function makePerlin(seed: number): (x: number, y: number, period: number) => num
   const fade = (t: number) => t * t * t * (t * (t * 6 - 15) + 10);
   const lerp = (t: number, a: number, b: number) => a + t * (b - a);
 
-  return (x, y, period) => {
+  /** The gradient at a lattice point, taken at that point's stand-in inside the
+      tile. Two points a tile apart reduce to the same stand-in and so carry the
+      same gradient, which is the whole of the wrap: it holds on any pair of
+      vectors, not only on the two an axis-aligned tile runs along. */
+  const g = (i: number, j: number, w: Wrap, dx: number, dy: number) => {
+    const alpha = Math.floor((i * w.by - w.bx * j) / w.det);
+    const beta = Math.floor((w.ax * j - i * w.ay) / w.det);
+    const cx = i - alpha * w.ax - beta * w.bx;
+    const cy = j - alpha * w.ay - beta * w.by;
+    const h = perm[(perm[cx & 255] + cy) & 255];
+    return gx[h] * dx + gy[h] * dy;
+  };
+
+  return (x, y, w) => {
     const x0 = Math.floor(x), y0 = Math.floor(y);
     const xf = x - x0, yf = y - y0;
-    const p = Math.max(1, Math.round(period));
-    const xi = ((x0 % p) + p) % p, yi = ((y0 % p) + p) % p;
-    const xi1 = (xi + 1) % p, yi1 = (yi + 1) % p;
-
-    const g = (cx: number, cy: number, dx: number, dy: number) => {
-      const h = perm[(perm[cx & 255] + cy) & 255];
-      return gx[h] * dx + gy[h] * dy;
-    };
     const u = fade(xf), v = fade(yf);
     return lerp(v,
-      lerp(u, g(xi, yi, xf, yf), g(xi1, yi, xf - 1, yf)),
-      lerp(u, g(xi, yi1, xf, yf - 1), g(xi1, yi1, xf - 1, yf - 1)));
+      lerp(u, g(x0, y0, w, xf, yf), g(x0 + 1, y0, w, xf - 1, yf)),
+      lerp(u, g(x0, y0 + 1, w, xf, yf - 1), g(x0 + 1, y0 + 1, w, xf - 1, yf - 1)));
   };
 }
 
@@ -111,22 +231,31 @@ 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: SketchStyle, seed: number, raster: number, cells: number): Float32Array {
+function rawField(
+  s: SketchStyle, seed: number, raster: number, lattice: MaskLattice,
+): Float32Array {
   const noise = makePerlin(seed);
   const veined = s.maskGrain === 'turbulence';
   const octaves = Math.max(1, Math.round(s.maskOctaves));
   const out = new Float32Array(raster * raster);
-  const step = cells / raster;
+  const wraps = Array.from({ length: octaves }, (_, o) => wrapOn(lattice.vx, lattice.vy, 1 << o));
 
   let weightSum = 0;
   for (let o = 0; o < octaves; o++) weightSum += 1 / (1 << o);
 
+  // A sample's place in the tile, carried onto the lattice by the tile's own
+  // two vectors. Square on, they are (cells, 0) and (0, cells) and this is the
+  // walk it always was; turned, they lean, and so does the field.
   for (let y = 0; y < raster; y++) {
+    const ty = y / raster;
     for (let x = 0; x < raster; x++) {
+      const tx = x / raster;
+      const a = tx * lattice.vx[0] + ty * lattice.vy[0];
+      const b = tx * lattice.vx[1] + ty * lattice.vy[1];
       let sum = 0;
       for (let o = 0; o < octaves; o++) {
         const f = 1 << o;
-        const n = noise(x * step * f, y * step * f, cells * f);
+        const n = noise(a * f, b * f, wraps[o]);
         sum += (veined ? Math.abs(n) : n) / f;
       }
       out[y * raster + x] = sum / weightSum;
@@ -200,50 +329,53 @@ function posterise(f: Float32Array, steps: number): Float32Array {
 
     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 {
+    radius is a whole number of samples, so rounding to one put the dial on a
+    ladder with a dead zone at the bottom: every small setting came out
+    perfectly sharp and a spread of them 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.
+
+    Run one axis at a time, since a sample is a different number of page px
+    across than it is down whenever the two blob sizes disagree. A gaussian is
+    separable, so a pass along each axis is the same blur the square one gave. */
+function blur(f: Float32Array, raster: number, stdX: number, stdY: number): Float32Array {
+  return blurAxis(blurAxis(f, raster, stdX, 1), raster, stdY, raster);
+}
+
+function blurAxis(f: Float32Array, n: number, std: number, stride: number): Float32Array {
   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);
+  const low = lower < 1 ? f : boxes(f, n, lower, stride);
   if (mix < 1e-6) return low;
-  const high = boxes(f, raster, lower + 1);
+  const high = boxes(f, n, lower + 1, stride);
   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 {
+function boxes(f: Float32Array, n: number, radius: number, stride: number): Float32Array {
   let cur = f;
-  for (let pass = 0; pass < 3; pass++) cur = boxPass(cur, raster, radius);
+  for (let pass = 0; pass < 3; pass++) cur = boxPass(cur, n, radius, stride);
   return cur;
 }
 
-function boxPass(f: Float32Array, n: number, radius: number): Float32Array {
-  const mid = new Float32Array(f.length);
-  const width = radius * 2 + 1;
-  for (let y = 0; y < n; y++) {
-    const row = y * n;
-    let sum = 0;
-    for (let i = -radius; i <= radius; i++) sum += f[row + ((i % n) + n) % n];
-    for (let x = 0; x < n; x++) {
-      mid[row + x] = sum / width;
-      sum += f[row + ((x + radius + 1) % n)] - f[row + ((x - radius + n) % n)];
-    }
-  }
+/** One pass along a single axis. `stride` is 1 across a row and the raster width
+    down a column, so one sliding window serves both. */
+function boxPass(f: Float32Array, n: number, radius: number, stride: number): Float32Array {
   const out = new Float32Array(f.length);
-  for (let x = 0; x < n; x++) {
+  const lineStep = stride === 1 ? n : 1;
+  const width = radius * 2 + 1;
+  for (let line = 0; line < n; line++) {
+    const base = line * lineStep;
+    const at = (i: number) => f[base + ((((i % n) + n) % n)) * stride];
     let sum = 0;
-    for (let i = -radius; i <= radius; i++) sum += mid[(((i % n) + n) % n) * n + x];
-    for (let y = 0; y < n; y++) {
-      out[y * n + x] = sum / width;
-      sum += mid[((y + radius + 1) % n) * n + x] - mid[((y - radius + n) % n) * n + x];
+    for (let i = -radius; i <= radius; i++) sum += at(i);
+    for (let i = 0; i < n; i++) {
+      out[base + i * stride] = sum / width;
+      sum += at(i + radius + 1) - at(i - radius);
     }
   }
   return out;
@@ -257,11 +389,12 @@ function boxPass(f: Float32Array, n: number, radius: number): Float32Array {
 let rawCache: { key: string; field: Float32Array } | null = null;
 
 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));
-    rawCache = { key, field: rawField(s, seed, RASTER, cells) };
-  }
+  const lattice = maskLattice(s);
+  // Keyed on the tile vectors rather than the blob sizes: most of the Scale
+  // dial's travel paints the same lattice at another size, and the field is
+  // the expensive half of the build.
+  const key = [...lattice.vx, ...lattice.vy, s.maskOctaves, s.maskGrain, seed].join('|');
+  if (rawCache?.key !== key) rawCache = { key, field: rawField(s, seed, RASTER, lattice) };
   return rawCache.field;
 }
 
@@ -284,7 +417,11 @@ export function buildMaskField(
   );
   if (through === 'levels') return { field: levelled, raster: RASTER };
 
-  return { field: blur(levelled, RASTER, s.maskSoftness / SAMPLE_PX), raster: RASTER };
+  const tile = maskTile(s);
+  return {
+    field: blur(levelled, RASTER, s.maskSoftness / (tile.w / RASTER), s.maskSoftness / (tile.h / RASTER)),
+    raster: RASTER,
+  };
 }
 
 /* ------------------------------------------------------------------ png --- */
@@ -398,7 +535,8 @@ export function fieldToPng(field: Float32Array, raster: number): string {
     never triggers another. The tab holds four of them at once, the field at
     three stages beside the finished one, with headroom over that. */
 const KEYS = [
-  'maskBlob', 'maskOctaves', 'maskGrain', 'maskOutputMin', 'maskOutputMax',
+  'maskBlobX', 'maskBlobY', 'maskAngle', 'maskOctaves', 'maskGrain',
+  'maskOutputMin', 'maskOutputMax',
   'maskPosterize', 'maskSoftness',
 ] as const;
 

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

@@ -15,7 +15,7 @@
  *   data-sketch   present = on, absent = off
  */
 import { getSyncedDocuments } from '../cssVarSync';
-import { buildMaskUri, MASK_TILE } from './maskField';
+import { buildMaskUri, maskTile } from './maskField';
 import type { SketchStyle } from './sketchStyles';
 
 const DEFS_ATTR = 'data-sketch-defs';
@@ -664,6 +664,10 @@ export function buildStylesheet(s: SketchStyle): string {
   // can no longer flatten the corners of every other one.
   const registrations = `@property --sketch-radius{syntax:"<length>";inherits:true;initial-value:0px;}`;
 
+  // Two sizes, not one: the field is painted at whatever the blob dials
+  // multiply out to, and they part company as soon as the pair is unlinked.
+  const tile = maskTile(s);
+
   const vars =
     `${on}{` +
       `--sketch-stroke-width:${s.strokeWidth}px;` +
@@ -674,7 +678,8 @@ export function buildStylesheet(s: SketchStyle): string {
       `--sketch-fill-filter:url(#${ID}-fill-0);` +
       `--sketch-stroke-filter:url(#${ID}-stroke-0);` +
       `--sketch-mask:${s.maskOn || s.iconMaskOn ? buildMaskUri(s) : 'none'};` +
-      `--sketch-mask-tile:${MASK_TILE}px;` +
+      `--sketch-mask-tile-w:${Number(tile.w.toFixed(2))}px;` +
+      `--sketch-mask-tile-h:${Number(tile.h.toFixed(2))}px;` +
       `--sketch-icon-mask-tile:${Math.round(s.iconMaskScale * 100)}%;` +
       // Named here rather than on the icons themselves, so an ancestor asking
       // for the soft bank resolves it against a value it can actually see.
@@ -852,7 +857,7 @@ export function buildStylesheet(s: SketchStyle): string {
       // width of the bleed; every other part's token is --shadow-none anyway.
       (bleed === 0 ? 'box-shadow:var(--sketch-shadow, none);' : '') +
       `filter:var(--sketch-fill-filter);` +
-      (s.maskOn ? coverage('var(--sketch-mask-tile) var(--sketch-mask-tile)', '--sketch-mask-pos') : '') +
+      (s.maskOn ? coverage('var(--sketch-mask-tile-w) var(--sketch-mask-tile-h)', '--sketch-mask-pos') : '') +
       `transform:translate(` +
         `calc(var(--sketch-jx, 0) * var(--sketch-jit-x, 0px)),` +
         `calc(var(--sketch-jy, 0) * var(--sketch-jit-y, 0px))` +
@@ -1008,7 +1013,8 @@ export function buildStylesheet(s: SketchStyle): string {
       // lands wholly inside a patch and comes out either untouched or gone.
       // Shrinking the tile puts several blotches across it, which is the same
       // move the icon mask makes for a glyph.
-      `--sketch-mask-tile:${Math.round(MASK_TILE * 0.3)}px;` +
+      `--sketch-mask-tile-w:${Math.round(tile.w * 0.3)}px;` +
+      `--sketch-mask-tile-h:${Math.round(tile.h * 0.3)}px;` +
       `--sketch-jit-rot:calc(var(--sketch-jit-rot-base) * 1.6);` +
       `--sketch-jit-x:calc(var(--sketch-jit-x-base) * 0.5);` +
       `--sketch-jit-y:calc(var(--sketch-jit-y-base) * 0.5);` +

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

@@ -0,0 +1,98 @@
+import { derived, get, writable, type Readable } from 'svelte/store';
+import { SKETCH_STYLES, hydrateSketchStyle, type SketchStyle } from './sketchStyles';
+
+/** Where a look came from, which is what decides the affordances on offer.
+    `shipped` is served by the package: it has a file, but not one in this
+    project, so there is nothing here to save over or delete until the editor
+    writes a copy. `file` lives in this project's data tree, so the editor can
+    save over it and delete it. `registered` was handed to `bootLiveTokens`, so
+    it is real on a built site but owns no file the editor could touch. */
+export type SketchLookSource = 'shipped' | 'file' | 'registered';
+
+export interface SketchLook {
+  /** What `setSketch` takes. A saved sketchstyle's file slug is its id, so a
+      look picked in dev keeps working once the site is built. */
+  id: string;
+  label: string;
+  blurb: string;
+  settings: SketchStyle;
+  source: SketchLookSource;
+}
+
+export interface RegisterSketchLookInput {
+  id: string;
+  label: string;
+  blurb?: string;
+  settings: unknown;
+  /** Only `replaceRegisteredLooks` sets this. A listing carries the package's
+      own sketchstyles as well as the project's, and the two differ in what the
+      editor may do to them, so the row's origin has to survive the trip. */
+  source?: SketchLookSource;
+}
+
+const SHIPPED: ReadonlyMap<string, SketchLook> = new Map(
+  Object.entries(SKETCH_STYLES).map(([id, style]) => [
+    id,
+    { id, label: style.label, blurb: style.blurb, settings: style, source: 'shipped' as const },
+  ]),
+);
+
+/** Seeded with the shipped looks, then written by `registerSketchLook`. A Map
+    because re-setting an existing key keeps its position, so a project's own
+    `pencil` lands where the shipped Pencil sat rather than at the end of the
+    grid. */
+const looks = writable(new Map(SHIPPED));
+
+/**
+ * Every sketchstyle on offer: the shipped looks, plus whatever this project
+ * registered over and beside them. A store rather than a constant, because
+ * registration happens after this module is imported.
+ *
+ * A picker adds its own "None" row, since off is a state of the effect rather
+ * than one of the looks. A theme's own look is not here either; `themeSketchLook`
+ * carries that one row.
+ */
+export const sketchLooks: Readable<SketchLook[]> = derived(looks, (m) => [...m.values()]);
+
+export function lookById(id: string): SketchLook | undefined {
+  return get(looks).get(id);
+}
+
+function put(m: Map<string, SketchLook>, look: RegisterSketchLookInput, source: SketchLookSource) {
+  // Hydrated on the way in: a consumer hands over raw JSON it imported, so this
+  // is the only place a look stored under a retired dial name gets carried
+  // forward, the same job `seedSketchFromTheme` does for a theme.
+  const settings = hydrateSketchStyle(look.settings);
+  return m.set(look.id, {
+    id: look.id,
+    label: look.label,
+    blurb: look.blurb ?? settings.blurb ?? '',
+    settings,
+    source,
+  });
+}
+
+export function registerSketchLook(look: RegisterSketchLookInput): void {
+  looks.update((m) => put(new Map(m), look, 'registered'));
+}
+
+/** Ids the last file listing claimed. The sweep below removes these and nothing
+    else, so a look handed to `bootLiveTokens` survives the editor opening. */
+let fromFiles: string[] = [];
+
+/** The editor re-lists its files after every save and delete, so a file removed
+    on disk has to leave the pool too. A file that had shadowed a shipped look
+    hands the id back on its way out. */
+export function replaceRegisteredLooks(next: RegisterSketchLookInput[]): void {
+  looks.update((m) => {
+    const out = new Map(m);
+    for (const id of fromFiles) {
+      const shipped = SHIPPED.get(id);
+      if (shipped) out.set(id, shipped);
+      else out.delete(id);
+    }
+    for (const look of next) put(out, look, look.source ?? 'file');
+    return out;
+  });
+  fromFiles = next.map((l) => l.id);
+}