@motion-proto/live-tokens 0.65.1 → 0.67.0

package/CHANGELOG.md

@@ -1,5 +1,189 @@
 # 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
+
+- **`seedSketchFromTheme` carries a theme's sketchstyle into a build.** A theme
+  saved from the Sketchstyle view carries its dials, and 0.63.0 said in as many
+  words that a built site ships no sketch. That left a theme half applied: the
+  page in dev drew with the look the theme records, the page a visitor gets drew
+  with whatever shipped preset the bundle happened to hold. Three links dropped
+  it, and only one of them was a decision. `initializeTheme` runs behind
+  `import.meta.env.DEV`, so nothing in a build ever read the field; the entry
+  point exported no way to apply a look it had not shipped; and there was
+  nothing for the field to be baked into, since the layer is an SVG filter bank
+  rather than a set of custom properties.
+
+  The new export is the whole route. Hand it the theme's `sketchStyle` field
+  before mounting and the built page draws with it:
+
+  ```ts
+  import { seedSketchFromTheme } from '@motion-proto/live-tokens/sketch';
+
+  seedSketchFromTheme(theme.sketchStyle);
+  await bootLiveTokens(App, '#app');
+  ```
+
+  It takes the field raw and hydrates it, because a built site reads its theme
+  JSON with no dev server to run `normalizeTheme` over it first. Absent, `null`,
+  and anything that is not an object all mean no sketch, which is what absence
+  has always meant.
+
+  It is the rule boot already followed, not a second one: `initializeTheme` now
+  calls it too, so one piece of code decides what a theme's sketchstyle means at
+  boot in dev and in production. A visitor who has recorded a pick keeps it,
+  None included. The theme seeds a browser that has decided nothing and never
+  overwrites one that has, so calling it on every boot is safe.
+
+  Adopt still bakes nothing, and `tokens.generated.css` still holds token values
+  only. That half of 0.63.0's note stands; what it said about a built site
+  shipping no sketch does not.
+
+- **`themeSketchLook` is the theme's own look, as a picker row.** A seeded look
+  that no shipped sketchstyle names read as `adjusted` through `sketchPick`, so
+  a picker could only label a look it had just booted into "Adjusted", and a
+  visitor who moved off it had no way back. The new store carries the same
+  `id`/`label`/`blurb` shape a shipped look has, `setSketch` takes its id, and
+  `sketchPick` reports it as the look it is. It is 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.
+
+- **`SketchStyle` is exported from `@motion-proto/live-tokens/sketch`**, so a
+  site can type the field it pulled out of its own theme JSON.
+
 ## 0.65.1 — applyFontStacks returns what it wrote
 
 ### Changed