@motion-proto/live-tokens 0.66.0 → 0.67.0

package/CHANGELOG.md

@@ -1,5 +1,137 @@
 # Changelog
 
+## 0.67.0 — Every sketchstyle is a file
+
+### Added
+
+- **A saved sketchstyle ships with your site.** 0.66.0 carried the look a theme
+  holds into a build, which covers one look per theme. Everything else a project
+  saved in the Sketchstyle view stayed behind: the files live in
+  `src/live-tokens/data/sketch-styles/` and only the dev server could read them,
+  so a picker on a built site silently listed the shipped seven and nothing
+  else. Hand them to `bootLiveTokens` and they are real everywhere:
+
+  ```ts
+  const files = import.meta.glob('./live-tokens/data/sketch-styles/*.json', {
+    eager: true,
+    import: 'default',
+  });
+
+  await bootLiveTokens(App, '#app', {
+    sketchLooks: Object.entries(files).map(([path, file]) => {
+      const id = path.split('/').pop().replace('.json', '');
+      return { id, label: file.name || id, settings: file.settings };
+    }),
+  });
+  ```
+
+  Unlike `components`, these register in a build as well as in dev. Reaching a
+  published site is the whole point of them.
+
+  `create` writes this into `src/main.ts`, so a new project publishes what it
+  saves without wiring anything.
+
+- **A Save pill in the Sketchstyle view**, which writes the dials back over the
+  sketchstyle you have selected. Updating a saved sketchstyle used to run
+  through the naming form: open it, accept the pre-filled label, submit, and
+  nothing on screen said a file had been replaced rather than created. Save
+  lights as soon as the dials leave the sketchstyle they name. On one of your
+  own it writes that file; on a shipped one it writes your project's own copy
+  under the same name, which takes its place in the list, and deleting that file
+  brings the shipped look back. **Save As** always creates, and starts its form
+  empty to say so.
+
+### Changed
+
+- **Every sketchstyle ships as a file.** The seven looks were a constant in
+  `sketchStyles.ts`. The Sketchstyle view could save over one, but the thing it
+  saved over had no file to read, copy or compare against, so "restore the
+  shipped Pencil" meant trusting that a deleted file fell back to something
+  nobody could open. They now ship as JSON under
+  `src/live-tokens/data/sketch-styles/`, one per look, and the module reads
+  them: the file is the look.
+
+  A shipped sketchstyle behaves like a shipped colors-and-type. Save over one
+  and your project gets its own copy that shadows it; delete that copy and the
+  packaged file comes back. The listing marks which is which (`isPackage`), and
+  deleting a look that only the package ships answers 403 rather than reporting
+  success and leaving it on screen.
+
+  Pencil, Marker and Whiteboard ship with reworked ink coverage. Pencil's grain
+  is now stretched and turned rather than square (`maskBlobX` 40 to 525 at 67
+  degrees, on turbulence), Marker's blobs are twice the size over a much higher
+  floor with the softness off, and Whiteboard's streak is finer and harder with
+  more rotation on the jitter. The other four are unchanged.
+
+- **Primary and secondary buttons rest one rung lower.**
+  `--button-primary-surface` moves from `--surface-brand-high` to
+  `--surface-brand` and `--button-secondary-surface` from
+  `--surface-neutral-high` to `--surface-neutral`, with `--iconbutton-*`
+  following. The border scale runs at the same lightness as the `-high` surface
+  rung, so a filled button was outlined in its own fill colour: the sketch
+  effect's hatch, which inks itself from the part's stroke, came out invisible
+  on exactly these two variants while Danger, Success, and Warning shaded
+  normally. Those three already rest on `-low`. This puts Primary and Secondary
+  on the rung Badge and CornerBadge already use, and lifts white text off the
+  surface by a further step. The eight preset themes carry the new value.
+
+- **Ink coverage scales on two axes, and the px it states are the px it
+  paints.** The Scale dial fitted a whole number of blobs to a fixed 600px tile,
+  so it could only reach the sizes that divide 600: it read 250px at the top of
+  its travel and painted 300px, there was nothing above that at all, and every
+  reading in between was the nearest fit rather than the number on the dial. The
+  tile is now painted at whatever the dial says, which makes the px exact and
+  opens the travel to 8px speckle and 600px patches.
+
+  The dial is a pair, **Scale across** and **Scale down**, held together by a
+  chain. Click it and the two part company: blobs wider than they are tall read
+  as ink dragged sideways, taller than wide as a vertical grain, and the fill
+  keeps the same field underneath either way. Sketchstyles stored before the
+  split come back square and linked, which is the look they had.
+
+  Unlinked, a **Rotation** dial appears with them and points the stretch
+  wherever you like. It is offered only there because a field the same in every
+  direction is the same field turned. The tile still meets itself at every
+  setting: a turned pattern repeats seamlessly only at the angles that land the
+  page's own axes back on whole noise cells, so the dial takes the nearest of
+  those and reads back the turn it landed on, usually within a degree or two of
+  the one you asked for.
+
+- **Shipped and saved sketchstyles are one list, in one id namespace.** A
+  sketchstyle named after a shipped one replaces it and keeps its place, so a
+  project that wants its own Pencil saves one. The Sketchstyle view shows a
+  single grid; the ✕ marks the rows your project owns.
+
+### Fixed
+
+- **Saving no longer reloads the page.** A project registers its saved
+  sketchstyles with `import.meta.glob`, which is what `create` writes into
+  `main.ts`, so writing one invalidated the entry module and Vite answered with
+  a full reload. The Sketchstyle view the save came from was torn down and
+  rebuilt mid-edit, which read as the editor closing itself every time you
+  pressed Save. The dev server now keeps every JSON under the data directory off
+  its watcher: the editor reads that directory over its own API and re-lists
+  after each write, so the page already holds what the reload would fetch.
+  `tokens.generated.css` and `fonts.css` stay watched, since the page really
+  does import them and CSS updates without a reload. A data file changed from
+  outside the editor, by a CLI run or a branch switch, now needs the page
+  reloaded by hand.
+
+### Breaking
+
+Pre-1.0, and the sketch API is days old. Every consumer we know of is in this
+repo or in a site we own.
+
+- `SKETCH_LOOKS` is now the `sketchLooks` store, since looks register after the
+  module is imported and a constant array would be stale. A picker reads
+  `$sketchLooks` the way it already reads `$themeSketchLook`.
+- `USER_STYLE_PREFIX` and `selectSavedSketchStyle` are gone. A saved
+  sketchstyle's id is its file slug, so `setSketch(id)` and
+  `selectSketchStyle(id)` take it like any other.
+- A `user:` id already in a browser's storage is stripped on read, so no
+  migration is needed and nobody loses their selection. Themes need nothing at
+  all: a theme has always stored its `sketchStyle` by value, never by id.
+
 ## 0.66.0 — A theme's sketchstyle reaches the built site
 
 ### Added

package/dist-plugin/{chunk-NRONZ3T5.js → chunk-T4PMCFJN.js}

@@ -268,65 +268,38 @@ var KNOWN_COMPONENT_CONFIG_KEYS = /* @__PURE__ */ new Set([
   "--sectiondivider-sm-color-family"
 ]);
 
-// src/editor/core/sketch/sketchStyles.ts
-var base = {
-  label: "",
-  blurb: "",
-  fillTravel: 1.5,
-  strokeTravel: 1.5,
-  wobble: 45,
-  roughness: 3,
-  borderWavelength: 1,
-  waveform: 1,
-  strokeWidth: 1.5,
-  doubleStroke: false,
-  retraceOffset: 1.2,
-  retracePass: "copy",
-  fillStyle: "solid",
-  hatchInk: 0.4,
-  strokeStyle: "solid",
-  pressure: 0.25,
-  pressureMod: 0.35,
-  pooling: 1.2,
-  strokeInk: 1,
-  maskOn: true,
-  maskBlob: 100,
-  maskOutputMin: 0.45,
-  maskOutputMax: 1,
-  maskOctaves: 2,
-  maskGrain: "fractal",
-  maskPosterize: 1,
-  maskSoftness: 1.5,
-  jitterX: 2.5,
-  jitterY: 2.5,
-  jitterRot: 0.6,
-  jitterScale: 0.035,
-  cornerSpread: 10,
-  cornerTravel: 8,
-  iconTravel: 1.25,
-  iconWavelength: 0.625,
-  iconMaskOn: true,
-  iconMaskScale: 1
-};
-var SKETCH_STYLES = {
-  pencil: {
-    ...base,
+// src/live-tokens/data/sketch-styles/pencil.json
+var pencil_default = {
+  name: "Pencil",
+  settings: {
     label: "Pencil",
     blurb: "Two graphite passes on their own seeds, so the outline disagrees with itself the way a hand coming back round does. Tight grain, little else.",
     fillTravel: 0.75,
     strokeTravel: 1.25,
     wobble: 30,
     roughness: 3,
+    borderWavelength: 1,
     waveform: 1,
     strokeWidth: 1.25,
     doubleStroke: true,
-    retracePass: "reseeded",
     retraceOffset: 1.5,
+    retracePass: "reseeded",
+    fillStyle: "solid",
+    hatchInk: 0.4,
+    strokeStyle: "solid",
+    pressure: 0.15,
+    pressureMod: 0.3,
+    pooling: 0,
     strokeInk: 0.85,
-    maskBlob: 40,
-    maskOutputMin: 0.62,
+    maskOn: true,
+    maskBlobX: 525,
+    maskBlobY: 47,
+    maskBlobLinked: false,
+    maskAngle: 67,
+    maskOutputMin: 0.59,
     maskOutputMax: 1,
     maskOctaves: 3,
+    maskGrain: "turbulence",
     maskPosterize: 1,
     maskSoftness: 0,
     jitterX: 1.5,
@@ -335,147 +308,243 @@ var SKETCH_STYLES = {
     jitterScale: 0.022,
     cornerSpread: 6,
     cornerTravel: 4.5,
-    pressure: 0.15,
-    pressureMod: 0.3,
-    pooling: 0,
-    iconTravel: 0.75
+    iconTravel: 0.75,
+    iconWavelength: 0.625,
+    iconMaskOn: true,
+    iconMaskScale: 1
   },
-  marker: {
-    ...base,
+  updatedAt: "2026-08-28T14:35:06.291Z",
+  createdAt: "2026-08-28T14:35:06.291Z"
+};
+
+// src/live-tokens/data/sketch-styles/marker.json
+var marker_default = {
+  name: "Marker",
+  settings: {
     label: "Marker",
     blurb: "Broad translucent nib gone round twice on the same line, so the overlap darkens and the ink pools where it slows.",
     fillTravel: 2,
     strokeTravel: 1.5,
     wobble: 56,
-    waveform: 1.4,
+    roughness: 3,
     borderWavelength: 1.3,
+    waveform: 1.4,
     strokeWidth: 4,
     doubleStroke: true,
+    retraceOffset: 2.2,
     retracePass: "copy",
+    fillStyle: "solid",
+    hatchInk: 0.4,
+    strokeStyle: "solid",
+    pressure: 0.2,
+    pressureMod: 0.25,
+    pooling: 2,
     strokeInk: 0.52,
-    retraceOffset: 2.2,
-    maskBlob: 115,
-    maskOutputMin: 0.42,
+    maskOn: true,
+    maskBlobX: 230,
+    maskBlobY: 230,
+    maskBlobLinked: true,
+    maskAngle: 0,
+    maskOutputMin: 0.76,
     maskOutputMax: 1,
     maskOctaves: 3,
+    maskGrain: "fractal",
     maskPosterize: 4,
-    maskSoftness: 4,
+    maskSoftness: 0,
     jitterX: 3,
     jitterY: 3,
     jitterRot: 0.8,
     jitterScale: 0.045,
     cornerSpread: 10,
     cornerTravel: 8,
-    pressure: 0.2,
-    pressureMod: 0.25,
-    pooling: 2,
     iconTravel: 1.25,
+    iconWavelength: 0.625,
+    iconMaskOn: true,
     iconMaskScale: 4
   },
-  whiteboard: {
-    ...base,
+  updatedAt: "2026-08-28T14:45:04.324Z",
+  createdAt: "2026-08-28T14:45:04.324Z"
+};
+
+// src/live-tokens/data/sketch-styles/whiteboard.json
+var whiteboard_default = {
+  name: "Whiteboard",
+  settings: {
     label: "Whiteboard",
     blurb: "The fattest nib on glass. One long smooth undulation, and a veined mask that streaks the fill like a half-wiped board.",
     fillTravel: 2.5,
     strokeTravel: 2.5,
     wobble: 90,
     roughness: 1,
-    waveform: 1,
     borderWavelength: 1.5,
+    waveform: 1,
     strokeWidth: 5.5,
     doubleStroke: true,
+    retraceOffset: 3,
     retracePass: "copy",
+    fillStyle: "solid",
+    hatchInk: 0.4,
+    strokeStyle: "solid",
+    pressure: 0.15,
+    pressureMod: 0.15,
+    pooling: 3.5,
     strokeInk: 0.66,
-    retraceOffset: 3,
-    maskGrain: "turbulence",
-    maskBlob: 180,
-    maskOutputMin: 0.42,
+    maskOn: true,
+    maskBlobX: 180,
+    maskBlobY: 38,
+    maskBlobLinked: false,
+    maskAngle: 0,
+    maskOutputMin: 0.68,
     maskOutputMax: 1,
-    maskOctaves: 1,
+    maskOctaves: 3,
+    maskGrain: "turbulence",
     maskPosterize: 3,
-    maskSoftness: 8,
+    maskSoftness: 0,
     jitterX: 4.5,
     jitterY: 4.5,
-    jitterRot: 1.2,
+    jitterRot: 3,
     jitterScale: 0.07,
     cornerSpread: 14,
     cornerTravel: 11,
-    pressure: 0.15,
-    pressureMod: 0.15,
-    pooling: 3.5,
     iconTravel: 1.75,
+    iconWavelength: 0.625,
+    iconMaskOn: true,
     iconMaskScale: 1.5
   },
-  hatched: {
-    ...base,
+  updatedAt: "2026-08-28T14:46:58.140Z",
+  createdAt: "2026-08-28T14:46:58.140Z"
+};
+
+// src/live-tokens/data/sketch-styles/hatched.json
+var hatched_default = {
+  name: "Hatched",
+  settings: {
     label: "Hatched",
     blurb: "An etching. The fill is angled shading, the outline a single hard-edged scratch that chatters along its length. No mask: the hatch is the texture.",
     fillTravel: 1.25,
     strokeTravel: 1.5,
     wobble: 24,
     roughness: 3,
+    borderWavelength: 1,
     waveform: 3,
     strokeWidth: 1.5,
+    doubleStroke: false,
+    retraceOffset: 1.2,
+    retracePass: "copy",
     fillStyle: "hatched",
     hatchInk: 0.5,
-    doubleStroke: false,
+    strokeStyle: "solid",
+    pressure: 0.3,
+    pressureMod: 0.45,
+    pooling: 0.8,
+    strokeInk: 1,
     maskOn: false,
-    iconMaskOn: false,
+    maskBlobX: 100,
+    maskBlobY: 100,
+    maskBlobLinked: true,
+    maskAngle: 0,
+    maskOutputMin: 0.45,
+    maskOutputMax: 1,
+    maskOctaves: 2,
+    maskGrain: "fractal",
+    maskPosterize: 1,
+    maskSoftness: 1.5,
     jitterX: 1.5,
     jitterY: 1.5,
     jitterRot: 0.4,
     jitterScale: 0.03,
     cornerSpread: 6,
     cornerTravel: 6,
-    pressure: 0.3,
-    pressureMod: 0.45,
-    pooling: 0.8,
     iconTravel: 1.25,
-    iconWavelength: 0.5
+    iconWavelength: 0.5,
+    iconMaskOn: false,
+    iconMaskScale: 1
   },
-  dashed: {
-    ...base,
+  updatedAt: "2026-08-28T15:47:36.934Z",
+  createdAt: "2026-08-28T15:47:36.934Z"
+};
+
+// src/live-tokens/data/sketch-styles/dashed.json
+var dashed_default = {
+  name: "Dashed",
+  settings: {
     label: "Dashed",
     blurb: "A drafting outline. One slow drift along the ruler, broken into strokes, with jitter, mask and pressure all off. The clean pole.",
-    strokeStyle: "dashed",
-    strokeTravel: 1,
     fillTravel: 0.5,
+    strokeTravel: 1,
     wobble: 120,
     roughness: 1,
+    borderWavelength: 1,
     waveform: 1,
     strokeWidth: 1.5,
     doubleStroke: false,
+    retraceOffset: 1.2,
+    retracePass: "copy",
+    fillStyle: "solid",
+    hatchInk: 0.4,
+    strokeStyle: "dashed",
+    pressure: 0,
+    pressureMod: 0,
+    pooling: 0,
+    strokeInk: 1,
     maskOn: false,
-    iconMaskOn: false,
+    maskBlobX: 100,
+    maskBlobY: 100,
+    maskBlobLinked: true,
+    maskAngle: 0,
+    maskOutputMin: 0.45,
+    maskOutputMax: 1,
+    maskOctaves: 2,
+    maskGrain: "fractal",
+    maskPosterize: 1,
+    maskSoftness: 1.5,
     jitterX: 0,
     jitterY: 0,
     jitterRot: 0,
     jitterScale: 0,
     cornerSpread: 4,
     cornerTravel: 3,
-    pressure: 0,
-    pressureMod: 0,
-    pooling: 0,
-    iconTravel: 0
+    iconTravel: 0,
+    iconWavelength: 0.625,
+    iconMaskOn: false,
+    iconMaskScale: 1
   },
-  napkin: {
-    ...base,
+  updatedAt: "2026-08-28T15:47:36.934Z",
+  createdAt: "2026-08-28T15:47:36.934Z"
+};
+
+// src/live-tokens/data/sketch-styles/napkin.json
+var napkin_default = {
+  name: "Napkin",
+  settings: {
     label: "Napkin",
     blurb: "Ballpoint in a hurry. Everything loose at once: a square wave sends every edge to full travel, and the second pass lands wherever it lands.",
     fillTravel: 3,
     strokeTravel: 2.25,
     wobble: 50,
     roughness: 3,
+    borderWavelength: 1,
     waveform: 2.5,
     strokeWidth: 2.25,
     doubleStroke: true,
-    retracePass: "reseeded",
     retraceOffset: 4,
+    retracePass: "reseeded",
+    fillStyle: "solid",
+    hatchInk: 0.4,
+    strokeStyle: "solid",
+    pressure: 0.45,
+    pressureMod: 0.6,
+    pooling: 2.5,
     strokeInk: 1,
-    maskBlob: 150,
+    maskOn: true,
+    maskBlobX: 150,
+    maskBlobY: 150,
+    maskBlobLinked: true,
+    maskAngle: 0,
     maskOutputMin: 0.43,
     maskOutputMax: 0.95,
     maskOctaves: 2,
+    maskGrain: "fractal",
     maskPosterize: 2,
     maskSoftness: 10,
     jitterX: 6,
@@ -484,28 +553,47 @@ var SKETCH_STYLES = {
     jitterScale: 0.1,
     cornerSpread: 20,
     cornerTravel: 17,
-    pressure: 0.45,
-    pressureMod: 0.6,
-    pooling: 2.5,
     iconTravel: 2.25,
+    iconWavelength: 0.625,
+    iconMaskOn: true,
     iconMaskScale: 3.6
   },
-  dry: {
-    ...base,
+  updatedAt: "2026-08-28T15:47:36.934Z",
+  createdAt: "2026-08-28T15:47:36.934Z"
+};
+
+// src/live-tokens/data/sketch-styles/dry.json
+var dry_default = {
+  name: "Dry marker",
+  settings: {
     label: "Dry marker",
     blurb: "Ink that ran out. One scratchy pass that breaks up along its length, over a fill the mask has worn nearly through in patches.",
     fillTravel: 2.25,
     strokeTravel: 1.75,
     wobble: 50,
-    waveform: 2,
+    roughness: 3,
     borderWavelength: 0.5,
+    waveform: 2,
     strokeWidth: 3.5,
     doubleStroke: false,
+    retraceOffset: 1.2,
+    retracePass: "copy",
+    fillStyle: "solid",
+    hatchInk: 0.4,
+    strokeStyle: "solid",
+    pressure: 0.4,
+    pressureMod: 0.8,
+    pooling: 1.5,
     strokeInk: 0.4,
-    maskBlob: 150,
+    maskOn: true,
+    maskBlobX: 150,
+    maskBlobY: 150,
+    maskBlobLinked: true,
+    maskAngle: 0,
     maskOutputMin: 0.24,
     maskOutputMax: 0.91,
     maskOctaves: 2,
+    maskGrain: "fractal",
     maskPosterize: 4,
     maskSoftness: 1.75,
     jitterX: 5,
@@ -514,26 +602,34 @@ var SKETCH_STYLES = {
     jitterScale: 0.08,
     cornerSpread: 16,
     cornerTravel: 13,
-    pressure: 0.4,
-    pressureMod: 0.8,
-    pooling: 1.5,
     iconTravel: 1.75,
+    iconWavelength: 0.625,
+    iconMaskOn: true,
     iconMaskScale: 3.8
-  }
+  },
+  updatedAt: "2026-08-28T15:47:36.934Z",
+  createdAt: "2026-08-28T15:47:36.934Z"
 };
+
+// src/editor/core/sketch/sketchStyles.ts
+var SHIPPED_FILES = { pencil: pencil_default, marker: marker_default, whiteboard: whiteboard_default, hatched: hatched_default, dashed: dashed_default, napkin: napkin_default, dry: dry_default };
+var SKETCH_STYLES = Object.fromEntries(
+  Object.entries(SHIPPED_FILES).map(([id, file]) => [id, file.settings])
+);
 var DEFAULT_SKETCH_STYLE = "marker";
 function hydrateSketchStyle(raw) {
-  const base2 = SKETCH_STYLES[DEFAULT_SKETCH_STYLE];
+  const base = SKETCH_STYLES[DEFAULT_SKETCH_STYLE];
   const stored = raw ?? {};
-  const out = { ...base2 };
-  for (const key of Object.keys(base2)) {
+  const out = { ...base };
+  for (const key of Object.keys(base)) {
     if (stored[key] !== void 0) out[key] = stored[key];
   }
-  if (out.fillStyle === "none") out.fillStyle = base2.fillStyle;
+  if (out.fillStyle === "none") out.fillStyle = base.fillStyle;
   convertTiledMask(stored, out);
   convertCutToLevels(stored, out);
   carryLevelsToOutput(stored, out);
   halveSwingDials(stored, out);
+  splitBlobAxes(stored, out);
   convertCyclesToWavelength(stored, out);
   convertIconTileToScale(stored, out);
   restoreDerivedRetrace(stored, out);
@@ -565,6 +661,13 @@ function convertCyclesToWavelength(stored, out) {
   const layers = stored.octaves;
   if (typeof layers === "number") out.roughness = Math.min(3, Math.max(1, layers));
 }
+function splitBlobAxes(stored, out) {
+  const blob = stored.maskBlob;
+  if (typeof blob !== "number") return;
+  out.maskBlobX = blob;
+  out.maskBlobY = blob;
+  out.maskBlobLinked = true;
+}
 function convertIconTileToScale(stored, out) {
   const tile = stored.iconMaskTile;
   if (typeof tile !== "number") return;
@@ -580,7 +683,10 @@ function convertTiledMask(stored, out) {
   const scale = stored.maskScale;
   if (typeof scale !== "number") return;
   const freq = stored.maskFrequency;
-  if (typeof freq === "number") out.maskBlob = Math.round(scale / (freq * LEGACY_TILE));
+  if (typeof freq === "number") {
+    out.maskBlobX = Math.round(scale / (freq * LEGACY_TILE));
+    out.maskBlobY = out.maskBlobX;
+  }
   const soft = stored.maskSoftness;
   if (typeof soft === "number") out.maskSoftness = Number((soft * scale / LEGACY_TILE).toFixed(1));
 }
@@ -693,12 +799,12 @@ function normalizeTheme(raw, resolvers) {
   }
   const filled = { components: [], aliases: 0, orphans: 0 };
   for (const comp of resolvers.listComponentNames()) {
-    const base2 = asObject(resolvers.readComponentConfig(comp, "default"));
-    const baseAliases = base2 ? asObject(base2.aliases) : null;
-    if (!base2 || !baseAliases) continue;
+    const base = asObject(resolvers.readComponentConfig(comp, "default"));
+    const baseAliases = base ? asObject(base.aliases) : null;
+    if (!base || !baseAliases) continue;
     const entry = componentConfigs[comp];
     if (!entry) {
-      const { schemaVersion: _standaloneStamp, ...rest } = stripFileMarker(base2);
+      const { schemaVersion: _standaloneStamp, ...rest } = stripFileMarker(base);
       componentConfigs[comp] = structuredClone(rest);
       filled.components.push(comp);
       continue;