@motion-proto/live-tokens 0.94.3 → 0.96.0

package/.claude/skills/live-tokens-create-page/SKILL.md

@@ -38,7 +38,11 @@ The stage is the canvas, player, or strip the work is about. Stretch a section's
 
 ### Grid
 
-The page is the column grid: `display: grid`, `grid-template-columns: repeat(var(--columns-count), 1fr)`, `column-gap: var(--columns-gutter)`, `max-width: var(--columns-max-width)`, `margin: 0 auto`. Each section spans it with `grid-column: 1 / -1`.
+The page is the column grid: `display: grid`, `grid-template-columns: repeat(var(--columns-count), 1fr)`, `column-gap: var(--columns-gutter)`, `box-sizing: content-box`, `max-width: var(--columns-max-width)`, `margin: 0 auto`, and `padding-inline: var(--columns-margin)`. Each section spans it with `grid-column: 1 / -1`. The page sets its top and bottom space with `padding-block`.
+
+The columns span `--columns-max-width`, and the margin sits outside them, where `ColumnsOverlay` draws it. `box-sizing: content-box` keeps a project-wide `border-box` reset from narrowing the columns.
+
+The page keeps the grid at every width. `tokens.css` narrows `--columns-gutter` and `--columns-margin` at 767px and again at 480px, and `--columns-count` holds at every width, so the page grid itself takes no `@media` rule.
 
 To place a section's children at page-column positions:
 
@@ -49,7 +53,7 @@ To place a section's children at page-column positions:
 
 A grid that follows the page columns takes `var(--columns-count)` or a `calc()` of it as its count, so it stays in step with `ColumnsOverlay`. A local grid of two or three equal columns writes its own count. A column number in `grid-column` is fixed to the count read in step 1.
 
-No scaffold collapses the page grid on a phone: the theme's own column gutter alone exceeds a phone's width at the full column count, so every page writes its own `@media (max-width: 767px)` rule setting `grid-template-columns: 1fr` and `column-gap: 0`, with each section's children spanning `grid-column: 1 / -1`. A section's columns then stack in reading order.
+Spans count twelfths of the page at every width, so `span 6` is half the page on a desktop and on a phone. Widen the spans on a narrow screen. In a `@media (max-width: 767px)` rule, give a child that spans 4 on a desktop `span 6`, or give each child `grid-column: 1 / -1` to stack the section in reading order. A column at 390px is about 15px wide, so in a `@media (max-width: 480px)` rule each child spans 12, 6, or 4 columns.
 
 ### Separation
 
@@ -148,7 +152,7 @@ Each position takes one step of the `--space-*` scale. Space inside a group is s
 | Between containers in a section | `--columns-gutter` across, `--space-24` down |
 | Between sections | `--space-16` above a hairline |
 | Page title to first section | `--space-24`, no hairline |
-| Page margin | `--space-32` |
+| Page margin | `--columns-margin`, as the page grid's `padding-inline` |
 
 Every section after the first opens with a hairline: `padding-top: var(--space-16)` and `border-top: var(--border-width-1) solid var(--border-neutral)`. The hairline separates, so the gap between sections is smaller than the gap between the containers inside them. A section's edge is the hairline alone.
 

package/CHANGELOG.md

@@ -1,5 +1,120 @@
 # Changelog
 
+## 0.96.0 — Lightbox zoom readout in natural pixels
+
+### Changed
+
+- **The `ImageLightbox` zoom readout measures the image against its natural
+  resolution.** 100% shows one source pixel per CSS pixel, the unit `maxZoom`
+  already takes. A 2880px image fitted into a 960px box opens at 33%, and
+  `maxZoom={1}` tops out at 100%. The readout used to call the fitted view
+  100% whatever the image's size. Until the natural size is known, from
+  `width`/`height` or the loaded image, the readout measures against the
+  fitted view as before. The zoom steps and caps stay the same.
+
+### Fixed
+
+- **The Testing loops page keeps its diagram text crisp in sketch mode.** The
+  text lies in its own svg above the boxes and arrows, so the sketch filter
+  roughens the shapes and leaves the labels legible.
+
+## 0.95.0 — Responsive columns and production CSS
+
+### Changed (breaking)
+
+- **The column gutter narrows on tablets and phones.** `--columns-gutter`
+  stays 32px on a desktop, becomes 24px at 767px and narrower, and becomes
+  16px at 480px and narrower. `--columns-count` stays 12 at every width, so
+  `span 6` is half the page on a phone and on a desktop. Six tokens hold the
+  values: `--columns-desktop-gutter`, `--columns-tablet-gutter`,
+  `--columns-phone-gutter`, and the three matching `-margin` names.
+  `--columns-gutter` and `--columns-margin` keep their names and point at the
+  desktop values, and `tokens.css` re-points them in a new 767px block and in
+  its 480px block. Set a gutter or a margin through its viewport's name: a
+  theme that sets `--columns-gutter` itself outweighs the breakpoints. The
+  `clamp(0.5rem, 1.5vw, 1.5rem)` default gutter goes. Every shipped theme
+  pinned 32px over it.
+- **The desktop column margin becomes 32px.** `--columns-margin` was `0`.
+  Each viewport's margin now equals its gutter, so it becomes 24px at 767px
+  and narrower and 16px at 480px and narrower. The column overlay insets its
+  columns by the margin, so on a desktop they now line up with a page grid
+  that pads with `--space-32`, as the `create` template's Home did before
+  this release. A theme that stored the old `0px` margin takes the new 32px.
+  The theme migration drops a stored `--columns-margin` of `0px` or `0`, a
+  `--columns-gutter` of `32px`, and a `--columns-count` of `12`, the values
+  every shipped theme held, and moves any other stored gutter or margin to
+  its desktop name.
+- **A custom production theme keeps its old column values in production
+  until you save it.** Its file still stores `--columns-gutter` and
+  `--columns-margin`, and `tokens.generated.css` writes them on `:root:root`,
+  where they outweigh the breakpoints. The editor migrates a theme as it loads
+  it. Open the production theme in the editor, save it once, and Adopt it to
+  write the new values.
+- **A `@media (max-width: 767px)` block below the 480px block overrides the
+  phone values.** Both blocks apply on a phone, and the later one wins. The
+  migration adds the tablet re-points to a 767px block your `tokens.css`
+  already holds, wherever it sits, and otherwise writes a new block above the
+  480px block. Move a 767px block of your own above the 480px block.
+
+### Changed
+
+- **The editor's Columns section edits each viewport.** The count and the
+  max width sit at the top and hold at every width. A Desktop, Tablet and
+  Phone control picks the viewport whose gutter and margin the sliders below
+  it set, and Reset restores that viewport's defaults. A theme stores a
+  viewport's value once it differs from the default.
+- **The shipped pages and the `create` template keep the column grid at
+  every width.** Each page grid pads with `padding-inline:
+  var(--columns-margin)` and declares `box-sizing: content-box`, so its
+  columns span `--columns-max-width` and match the overlay. Spans count
+  twelfths at every width and widen below 768px. The create-page skill
+  teaches the same grid. A page of yours that sets
+  `grid-template-columns: 1fr` below 768px keeps working.
+- **A production build keeps a CSS variable only where its value changes at
+  runtime.** `vite build` with `themeFileApi` removes each custom property no
+  rule reads, writes each one whose value never changes as its value, and
+  declares each one it keeps once on `:root`, so DevTools lists it once. A
+  scaffolded project's build drops from 821 variables on `:root` to 53, and
+  its CSS from 184 kB to 123 kB. Dev and your source files keep every token.
+  A script that reads a token under a name it assembles at runtime, such as
+  `` `--color-${family}-500` ``, now gets an empty string; list each such
+  name under `themeFileApi({ productionCss: { keep: [...] } })`.
+  `productionCss: { substitute: false }` removes unread properties and keeps
+  every other `var()`, and `productionCss: false` keeps every variable. The
+  guide's Production CSS chapter gives the full rule and its limits.
+- **The editor stays out of production builds.** `bootLiveTokens` loads the
+  component registry and the editor store only in dev, `registerComponent`
+  queues registrations from a module of its own, and `package.json` declares
+  `"sideEffects": ["**/*.css"]`. A build drops every editor module and every
+  component the site never imports, which takes a scaffolded project from
+  2,177 variables on `:root` to 821 before the step above. A production
+  theme's own gradients and scrim and tint washes now render; the editor
+  store used to write the default theme's values over them on `:root`.
+
+### Fixed
+
+- **A scaffolded project's saved sketchstyles reach its build.** The `create`
+  template's `main.ts` passed them to `bootLiveTokens` as `sketchLooks`, an
+  option renamed `sketchStyles`, so a built site offered only the shipped
+  sketchstyles. A project scaffolded before this release keeps the old line;
+  rename `sketchLooks` to `sketchStyles` in its `main.ts`.
+
+### Migration
+
+- Run `npx live-tokens migrate`. The `2026-10-15-responsive-columns`
+  tokens.css migration is breaking, so the dev plugin's `autoMigrate` skips
+  it, and check-page reports it as `tokens-breaking-migration` until it runs.
+  It adds the six viewport names, moves a gutter or margin you changed into
+  its desktop name, gives the shipped `clamp()` gutter and `0` margin the new
+  32px, points `--columns-gutter` and `--columns-margin` at the desktop
+  names, and adds the 767px and 480px re-points. It leaves `--columns-count`
+  as it is. Until it runs, `--columns-margin` stays `0`, and the shipped
+  docs, demo and testing pages, which now pad with it, sit flush against the
+  window at every width.
+- A theme migrates when the editor loads it, and the next save writes the
+  result. The entry on custom production themes above gives the step that
+  reaches production.
+
 ## 0.94.3 — Demo bar chrome
 
 ### Fixed

package/README.md

@@ -6,7 +6,7 @@ A design system for styling and building Svelte + Vite microsites. Edit tokens a
 npm install @motion-proto/live-tokens
 ```
 
-The editor is dev-only. Production builds get plain CSS variables and the components you used.
+The editor is dev-only. Production builds get the components you used, and their CSS keeps a variable only for a token whose value can change while the page runs.
 
 ## Features
 
@@ -283,7 +283,7 @@ The dev server reads the open theme and paints what it carries. A built site has
 import { seedSketchFromTheme } from '@motion-proto/live-tokens/sketch';
 import theme from './live-tokens/data/themes/sketchy.json';
 
-seedSketchFromTheme(theme.sketchStyle);
+seedSketchFromTheme(theme.sketchSettings);
 await bootLiveTokens(App, '#app');
 ```
 
@@ -296,7 +296,7 @@ const files = import.meta.glob('./live-tokens/data/sketch-styles/*.json', {
 });
 
 await bootLiveTokens(App, '#app', {
-  sketchLooks: Object.entries(files).map(([path, file]) => {
+  sketchStyles: Object.entries(files).map(([path, file]) => {
     const id = path.split('/').pop().replace('.json', '');
     return { id, label: file.name || id, settings: file.settings };
   }),
@@ -307,7 +307,7 @@ The file's slug is the look's id, so a sketchstyle picked in the editor keeps wo
 
 ### Build a picker
 
-`sketchLooks` is a store holding every look on offer, shipped and your own in one list. Give each row `setSketch(look.id)`, and add a None row yourself: off is a state of the effect rather than one of the looks. `themeSketchLook` carries the theme's own look as one more row, and reads null when the theme carries none.
+`sketchStyles` is a store holding every sketchstyle on offer, shipped and your own, in one list. Give each row `setSketch(style.id)`. Off is a state of the effect, so add a None row yourself that calls `setSketch(null)`. `unsavedSketchStyle` adds one more row when the theme carries sketch settings that no sketchstyle file holds, and reads null otherwise.
 
 ### Draw your own elements
 
@@ -372,7 +372,7 @@ The skill runs `npx live-tokens components --json` and reads each candidate's ca
 
 Ask for a page, a route, or a screen: "build a pricing page", "add a /settings route", "put a hero at the top of Home".
 
-The skill composes the page from shipped components, styles every value with `var(--token-*)` (no hex, no pixel literals, so editor changes repaint the page), places content on the column grid via `--columns-count`, `--columns-gutter`, and `--columns-max-width`, adds the route as a `lazy` import with a `source` so the overlay's "Page Source" button works, and imports `site.css` from the page rather than `main.ts` so page CSS stays out of the editor routes. It writes your page files and the route entry, and never touches the data tree.
+The skill composes the page from shipped components, styles every value with `var(--token-*)` (no hex, no pixel literals, so editor changes repaint the page), places content on the column grid via `--columns-count`, `--columns-gutter`, `--columns-margin`, and `--columns-max-width` at every width, adds the route as a `lazy` import with a `source` so the overlay's "Page Source" button works, and imports `site.css` from the page rather than `main.ts` so page CSS stays out of the editor routes. It writes your page files and the route entry, and never touches the data tree.
 
 ### `live-tokens-create-theme`
 
@@ -438,7 +438,7 @@ The skill runs both checkers, which apply every pending additive `tokens.css` mi
 
 1. Edit on `/live-tokens/editor`, `/live-tokens/colors`, or `/live-tokens/components`. Edits sit in the working buffer (`_working.json`). **Save** in the Theme panel captures the buffer into the open theme at `<dataDir>/themes/{name}.json`.
 2. **Adopt** the theme. It becomes the production theme, and its variables are baked into `tokens.generated.css` next to your authored `tokens.css`. Nothing else writes that file, so trying a look never changes what you ship.
-3. `npm run build` bundles both as plain CSS. No editor code, no JSON lookups, no dev surfaces reach production.
+3. `npm run build` bundles both, with no editor code, JSON lookups, or dev surfaces. `themeFileApi` then rewrites the emitted CSS: it removes each token no rule reads, writes each token whose value never changes as its value, and keeps a variable for the rest. Your source files keep every token name. The user guide's Production CSS chapter covers the rule, the `keep` option, and the limits.
 
 ## File ownership
 

package/dist-plugin/{chunk-7XSUHJUH.js → chunk-4J6JPSVS.js}

@@ -126,7 +126,7 @@ function setTokenValue(css, name, value, opts = {}) {
   }
   return changed ? lines.join("\n") : css;
 }
-function appendMediaBlock(css, query, entries) {
+function appendMediaBlock(css, query, entries, opts = {}) {
   const lines = css.split("\n");
   const at = query.trim();
   const blocks = findTopLevelBlocks(lines, (line) => mediaQueryOf(line) === at);
@@ -138,6 +138,12 @@ function appendMediaBlock(css, query, entries) {
   const media = blocks.find((b) => b.end > b.start);
   if (!media) {
     const block = [`@media ${at} {`, "  :root {", ...declarationLines(missing, "    "), "  }", "}", ""];
+    const before = opts.before?.trim();
+    const next = before === void 0 ? void 0 : findTopLevelBlocks(lines, (line) => mediaQueryOf(line) === before)[0];
+    if (next) {
+      lines.splice(next.start, 0, ...block);
+      return lines.join("\n");
+    }
     while (lines.length > 0 && lines[lines.length - 1].trim() === "") lines.pop();
     return [...lines, "", ...block].join("\n");
   }
@@ -1526,6 +1532,50 @@ var tokensCssMigration_2026_10_08_typeScales = {
   }
 };
 
+// vite-plugin/tokensCssMigrations/migrations/2026-10-15-responsive-columns.ts
+var DESKTOP = [
+  {
+    structural: "--columns-gutter",
+    desktop: "--columns-desktop-gutter",
+    shipped: "clamp(0.5rem, 1.5vw, 1.5rem)",
+    value: "32px"
+  },
+  { structural: "--columns-margin", desktop: "--columns-desktop-margin", shipped: "0", value: "32px" }
+];
+var SMALLER = [
+  { name: "--columns-tablet-gutter", value: "24px" },
+  { name: "--columns-tablet-margin", value: "24px" },
+  { name: "--columns-phone-gutter", value: "16px" },
+  { name: "--columns-phone-margin", value: "16px" }
+];
+var repoints = (viewport) => DESKTOP.map(({ structural }) => ({
+  name: structural,
+  value: `var(${structural.replace("--columns-", `--columns-${viewport}-`)})`
+}));
+var tokensCssMigration_2026_10_15_responsiveColumns = {
+  id: "2026-10-15-responsive-columns",
+  kind: "breaking",
+  description: "Give the column grid a gutter and margin per viewport, and re-point --columns-gutter and --columns-margin at them",
+  apply(css) {
+    const values = collectTokenValues(css);
+    const pending = DESKTOP.filter(({ desktop }) => !values.has(desktop));
+    let out = ensureScale(css, {
+      anchorPrefixes: ["--columns-"],
+      entries: [
+        ...pending.map(({ structural, desktop, shipped, value }) => {
+          const current = values.get(structural);
+          return { name: desktop, value: current === void 0 || current === shipped ? value : current };
+        }),
+        ...SMALLER
+      ]
+    });
+    for (const { structural, desktop } of pending) out = setTokenValue(out, structural, `var(${desktop})`);
+    out = ensureScale(out, { anchorPrefixes: ["--columns-"], entries: repoints("desktop") });
+    out = appendMediaBlock(out, "(max-width: 767px)", repoints("tablet"), { before: "(max-width: 480px)" });
+    return appendMediaBlock(out, "(max-width: 480px)", repoints("phone"));
+  }
+};
+
 // vite-plugin/tokensCssMigrations/index.ts
 var TOKENS_CSS_MIGRATIONS = [
   tokensCssMigration_2026_05_29_typographyScaleAdditions,
@@ -1545,7 +1595,8 @@ var TOKENS_CSS_MIGRATIONS = [
   tokensCssMigration_2026_09_01_tintScale,
   tokensCssMigration_2026_09_20_scrimColorAndOpacity,
   tokensCssMigration_2026_09_21_tintColorAndOpacity,
-  tokensCssMigration_2026_10_08_typeScales
+  tokensCssMigration_2026_10_08_typeScales,
+  tokensCssMigration_2026_10_15_responsiveColumns
 ];
 function runTokensCssMigrations(css) {
   return foldMigrations(css, () => true);

package/dist-plugin/{chunk-W5VQV32K.js → chunk-GYRULB2X.js}

@@ -1,7 +1,7 @@
 import {
   CURRENT_COMPONENT_SCHEMA_VERSION,
   runMigrations
-} from "./chunk-ONYAIXCZ.js";
+} from "./chunk-QQASYPW7.js";
 
 // vite-plugin/files/versionedFileResourceServer.ts
 import fs from "fs";

package/dist-plugin/{chunk-ONYAIXCZ.js → chunk-QQASYPW7.js}

@@ -1258,6 +1258,28 @@ var colorsAndTypeMigration_2026_09_21_washColorAndOpacity = {
   }
 };
 
+// src/editor/core/themes/migrations/2026-10-15-responsive-columns.ts
+var RENAMES8 = {
+  "--columns-gutter": "--columns-desktop-gutter",
+  "--columns-margin": "--columns-desktop-margin"
+};
+var SHIPPED = {
+  "--columns-count": ["12"],
+  "--columns-gutter": ["32px"],
+  "--columns-margin": ["0px", "0"]
+};
+var colorsAndTypeMigration_2026_10_15_responsiveColumns = {
+  id: "2026-10-15-responsive-columns",
+  fromVersion: 9,
+  toVersion: 10,
+  appliesTo: "colors-and-type",
+  apply(rawVars) {
+    return Object.fromEntries(
+      Object.entries(rawVars).filter(([name, value]) => !SHIPPED[name]?.includes(value.trim())).map(([name, value]) => [RENAMES8[name] ?? name, value])
+    );
+  }
+};
+
 // src/editor/core/themes/migrations/2026-09-21-scrim-surface.ts
 var STOPS2 = {
   "--scrim-opacity-low": "--scrim-low",
@@ -1296,7 +1318,7 @@ var componentMigration_2026_09_21_scrimSurface = {
 };
 
 // src/editor/core/themes/migrations/2026-09-13-cornerbadge-prefix.ts
-var RENAMES8 = {
+var RENAMES9 = {
   cornerbadge: {
     "--corner-badge-margin": "--cornerbadge-margin",
     "--corner-badge-outer-radius": "--cornerbadge-outer-radius",
@@ -1346,7 +1368,7 @@ var componentMigration_2026_09_13_cornerbadgePrefix = {
   toVersion: 32,
   appliesTo: "component-config",
   apply(rawVars, meta) {
-    const renames = meta.component ? RENAMES8[meta.component] : void 0;
+    const renames = meta.component ? RENAMES9[meta.component] : void 0;
     if (!renames) return { ...rawVars };
     const out = {};
     for (const [key, value] of Object.entries(rawVars)) {
@@ -1357,7 +1379,7 @@ var componentMigration_2026_09_13_cornerbadgePrefix = {
 };
 
 // src/editor/core/themes/migrations/2026-09-13-toggle-label.ts
-var RENAMES9 = {
+var RENAMES10 = {
   toggle: {
     "--toggle-label-text": "--toggle-label",
     "--toggle-disabled-label-text": "--toggle-disabled-label"
@@ -1369,7 +1391,7 @@ var componentMigration_2026_09_13_toggleLabel = {
   toVersion: 33,
   appliesTo: "component-config",
   apply(rawVars, meta) {
-    const renames = meta.component ? RENAMES9[meta.component] : void 0;
+    const renames = meta.component ? RENAMES10[meta.component] : void 0;
     if (!renames) return { ...rawVars };
     const out = {};
     for (const [key, value] of Object.entries(rawVars)) {
@@ -1380,7 +1402,7 @@ var componentMigration_2026_09_13_toggleLabel = {
 };
 
 // src/editor/core/themes/migrations/2026-09-13-collapsiblesection-open.ts
-var RENAMES10 = {
+var RENAMES11 = {
   collapsiblesection: {
     "--collapsiblesection-chromeless-expanded-padding": "--collapsiblesection-chromeless-open-padding",
     "--collapsiblesection-hairline-expanded-padding": "--collapsiblesection-hairline-open-padding",
@@ -1394,7 +1416,7 @@ var componentMigration_2026_09_13_collapsiblesectionOpen = {
   toVersion: 34,
   appliesTo: "component-config",
   apply(rawVars, meta) {
-    const renames = meta.component ? RENAMES10[meta.component] : void 0;
+    const renames = meta.component ? RENAMES11[meta.component] : void 0;
     if (!renames) return { ...rawVars };
     const out = {};
     for (const [key, value] of Object.entries(rawVars)) {
@@ -1421,7 +1443,7 @@ var BADGE_SUFFIXES = [
   "icon-size"
 ];
 var CORNERBADGE_SUFFIXES = ["surface", "border", "text"];
-var RENAMES11 = {
+var RENAMES12 = {
   badge: Object.fromEntries(
     BADGE_SUFFIXES.map((s) => [`--badge-primary-${s}`, `--badge-brand-${s}`])
   ),
@@ -1435,7 +1457,7 @@ var componentMigration_2026_09_13_badgeBrand = {
   toVersion: 35,
   appliesTo: "component-config",
   apply(rawVars, meta) {
-    const renames = meta.component ? RENAMES11[meta.component] : void 0;
+    const renames = meta.component ? RENAMES12[meta.component] : void 0;
     if (!renames) return { ...rawVars };
     const out = {};
     for (const [key, value] of Object.entries(rawVars)) {
@@ -1493,7 +1515,8 @@ var MIGRATIONS = [
   componentMigration_2026_09_20_imagelightboxScrim,
   componentMigration_2026_09_20_scrimColorAndOpacity,
   colorsAndTypeMigration_2026_09_21_washColorAndOpacity,
-  componentMigration_2026_09_21_scrimSurface
+  componentMigration_2026_09_21_scrimSurface,
+  colorsAndTypeMigration_2026_10_15_responsiveColumns
 ];
 function countFor(kind) {
   return MIGRATIONS.filter((m) => m.appliesTo === kind).length;