@motion-proto/live-tokens 0.56.1 → 0.58.0

package/dist-plugin/index.js

@@ -5,7 +5,7 @@ import {
   parseGradientValue,
   reconcilePalettesFromCssVars,
   sanitizeFileName
-} from "./chunk-PB2JTK2H.js";
+} from "./chunk-LW4SR7AZ.js";
 import {
   THEME_SCHEMA_VERSION,
   detectLegacyLayout,
@@ -23,13 +23,13 @@ import {
   runAdditiveTokensCssMigrations,
   runTokensCssMigrations,
   validateTokensCss
-} from "./chunk-TKZBVIW5.js";
+} from "./chunk-E5QYON4L.js";
 import {
   hexToOklch
-} from "./chunk-YR6GPXW2.js";
+} from "./chunk-XWXIMTWZ.js";
 import {
   resolveDataDirs
-} from "./chunk-D3ZVKOR4.js";
+} from "./chunk-Y5CNFSSV.js";
 
 // vite-plugin/themeFileApi.ts
 import fs from "fs";
@@ -137,6 +137,7 @@ function themeFileApi(opts) {
   const COLORS_AND_TYPE_DIR = dataDirs.colorsAndTypeDir;
   const COMPONENT_CONFIGS_DIR = dataDirs.componentConfigsDir;
   const THEMES_DIR = dataDirs.themesDir;
+  const SKETCH_PRESETS_DIR = dataDirs.sketchPresetsDir;
   const CSS_PATH = path.resolve(opts.tokensCssPath);
   const GENERATED_CSS_PATH = opts.tokensGeneratedCssPath ? path.resolve(opts.tokensGeneratedCssPath) : path.join(dataDirs.dataDir, "tokens.generated.css");
   const FONTS_CSS_PATH = opts.fontsCssPath ? path.resolve(opts.fontsCssPath) : path.join(path.dirname(CSS_PATH), "fonts.css");
@@ -194,6 +195,7 @@ function themeFileApi(opts) {
     dir: THEMES_DIR,
     packageDir: packageThemesDir
   });
+  const sketchPresetsResource = versionedFileResourceServer({ dir: SKETCH_PRESETS_DIR });
   function ensureColorsAndTypeDir() {
     colorsAndTypeResource.ensureDir();
   }
@@ -759,6 +761,8 @@ ${lines.join("\n")}
   const THEME_EXPORT_REGEX = new RegExp(`^${escapedBase}/themes/([a-z0-9\\-_]+)/export$`);
   const THEME_IMPORT_ROUTE = `${API_BASE}/themes/import`;
   const THEME_BY_NAME_REGEX = new RegExp(`^${escapedBase}/themes/([a-z0-9\\-_]+)$`);
+  const SKETCH_PRESETS_ROUTE = `${API_BASE}/sketch-presets`;
+  const SKETCH_PRESET_BY_NAME_REGEX = new RegExp(`^${escapedBase}/sketch-presets/([a-z0-9\\-_]+)$`);
   const PRODUCTION_ROUTE = `${API_BASE}/production`;
   async function handleListColorsAndType(_ctx) {
     const files = colorsAndTypeResource.listNames().map((fileName) => {
@@ -1290,6 +1294,61 @@ ${lines.join("\n")}
       }
     });
   }
+  async function handleListSketchPresets({ res }) {
+    const files = sketchPresetsResource.listNames().map((fileName) => {
+      let data = null;
+      try {
+        data = sketchPresetsResource.readJson(fileName);
+      } catch {
+      }
+      return {
+        name: data?.name || fileName,
+        fileName,
+        updatedAt: data?.updatedAt || ""
+      };
+    });
+    jsonResponse(res, 200, { files });
+  }
+  async function handleSketchPresetByName({ params, req, res }) {
+    const [fileName] = params;
+    if (rejectReservedName(res, fileName)) return;
+    const filePath = sketchPresetsResource.filePath(fileName);
+    if (req.method === "GET") {
+      const raw = sketchPresetsResource.readJson(fileName);
+      if (!raw) {
+        jsonResponse(res, 404, { error: "Not found" });
+        return;
+      }
+      jsonResponse(res, 200, { ...raw, _fileName: fileName });
+      return;
+    }
+    if (req.method === "PUT") {
+      const body = JSON.parse(await readBody(req));
+      if (!body || typeof body !== "object" || !body.settings || typeof body.settings !== "object") {
+        jsonResponse(res, 400, { error: "A sketch preset needs a settings object" });
+        return;
+      }
+      body.name = String(body.name || fileName);
+      body.updatedAt = (/* @__PURE__ */ new Date()).toISOString();
+      if (fs.existsSync(filePath)) {
+        try {
+          const existing = JSON.parse(fs.readFileSync(filePath, "utf-8"));
+          if (existing.createdAt) body.createdAt = existing.createdAt;
+        } catch {
+        }
+      }
+      if (!body.createdAt) body.createdAt = body.updatedAt;
+      sketchPresetsResource.ensureDir();
+      fs.writeFileSync(filePath, JSON.stringify(body, null, 2));
+      jsonResponse(res, 200, { ok: true, fileName });
+      return;
+    }
+    if (req.method === "DELETE") {
+      if (fs.existsSync(filePath)) fs.unlinkSync(filePath);
+      jsonResponse(res, 200, { ok: true });
+      return;
+    }
+  }
   function methodNotAllowed({ res }) {
     jsonResponse(res, 405, { error: "Method not allowed" });
   }
@@ -1366,6 +1425,14 @@ ${lines.join("\n")}
     { method: "PUT", pattern: THEME_BY_NAME_REGEX, handler: handleThemeByName },
     { method: "DELETE", pattern: THEME_BY_NAME_REGEX, handler: handleThemeByName },
     // Production — the whole-look adopt door
+    { method: "GET", pattern: SKETCH_PRESETS_ROUTE, handler: handleListSketchPresets },
+    { method: "PUT", pattern: SKETCH_PRESETS_ROUTE, handler: methodNotAllowed },
+    { method: "POST", pattern: SKETCH_PRESETS_ROUTE, handler: methodNotAllowed },
+    { method: "DELETE", pattern: SKETCH_PRESETS_ROUTE, handler: methodNotAllowed },
+    { method: "GET", pattern: SKETCH_PRESET_BY_NAME_REGEX, handler: handleSketchPresetByName },
+    { method: "PUT", pattern: SKETCH_PRESET_BY_NAME_REGEX, handler: handleSketchPresetByName },
+    { method: "DELETE", pattern: SKETCH_PRESET_BY_NAME_REGEX, handler: handleSketchPresetByName },
+    { method: "POST", pattern: SKETCH_PRESET_BY_NAME_REGEX, handler: methodNotAllowed },
     { method: "PUT", pattern: PRODUCTION_ROUTE, handler: handleAdoptLook },
     { method: "GET", pattern: PRODUCTION_ROUTE, handler: methodNotAllowed },
     { method: "POST", pattern: PRODUCTION_ROUTE, handler: methodNotAllowed },

package/dist-plugin/migrateData/index.cjs

@@ -1659,6 +1659,7 @@ function resolveDataDirs(opts = {}) {
     colorsAndTypeDir: opts.colorsAndTypeDir ? import_path4.default.resolve(opts.colorsAndTypeDir) : fileConfig.colorsAndTypeDir ? import_path4.default.resolve(fileConfig.colorsAndTypeDir) : sub("colors-and-type"),
     componentConfigsDir: opts.componentConfigsDir ? import_path4.default.resolve(opts.componentConfigsDir) : fileConfig.componentConfigsDir ? import_path4.default.resolve(fileConfig.componentConfigsDir) : sub("component-configs"),
     themesDir: opts.themesDir ? import_path4.default.resolve(opts.themesDir) : fileConfig.themesDir ? import_path4.default.resolve(fileConfig.themesDir) : sub("themes"),
+    sketchPresetsDir: sub("sketch-presets"),
     legacyManifestsDir: fileConfig.manifestsDir ? import_path4.default.resolve(fileConfig.manifestsDir) : void 0
   };
 }

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

@@ -1,4 +1,4 @@
-export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-DBN0RPuT.cjs';
+export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-CRfD1LdA.cjs';
 
 interface LegacyRename {
     from: string;

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

@@ -1,4 +1,4 @@
-export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-DBN0RPuT.js';
+export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-CRfD1LdA.js';
 
 interface LegacyRename {
     from: string;

package/dist-plugin/migrateData/index.js

@@ -14,7 +14,7 @@ import {
 import {
   readLiveTokensConfig,
   resolveDataDirs
-} from "../chunk-D3ZVKOR4.js";
+} from "../chunk-Y5CNFSSV.js";
 
 // vite-plugin/migrateData/migrateData.ts
 import fs from "fs";

package/dist-plugin/{themeTypes-BAqtv4XO.d.cts → themeTypes-DSV3Zisf.d.cts}

@@ -7,6 +7,13 @@ interface CurveAnchor {
     outDy: number;
 }
 
+/** The `to <side-or-corner>` keywords CSS accepts in place of an angle. A
+ *  keyword angles the gradient line off the box's own diagonal, so it tracks
+ *  the element's aspect ratio where a fixed angle cannot: `to bottom right`
+ *  reads as ~95deg across a wide heading and ~111deg once that heading wraps.
+ *  That is the whole reason to carry them — a degree cannot express it. */
+declare const LINEAR_DIRECTIONS: readonly ["to top", "to top right", "to right", "to bottom right", "to bottom", "to bottom left", "to left", "to top left"];
+type LinearDirection = (typeof LINEAR_DIRECTIONS)[number];
 interface GradientStop$1 {
     /** 0–100 percentage along the gradient axis. */
     position: number;
@@ -25,6 +32,10 @@ interface GradientStop$1 {
 interface GradientValue {
     type: 'linear' | 'radial' | 'solid' | 'none';
     angle: number;
+    /** Emitted in place of `angle` on a `linear` gradient. `angle` is retained
+     *  underneath so clearing the direction restores the user's degrees, the
+     *  same way a radial keeps its angle. */
+    direction?: LinearDirection;
     radius?: number;
     centerX?: number;
     aspectX?: number;
@@ -136,7 +147,7 @@ interface FontSource {
 }
 type SystemCascadePreset = 'system-ui-sans' | 'system-ui-serif' | 'system-ui-mono';
 type GenericFamily = 'sans-serif' | 'serif' | 'monospace' | 'cursive' | 'fantasy';
-type FontStackVariable = '--font-display' | '--font-sans' | '--font-serif' | '--font-mono';
+type FontStackVariable = '--font-display' | '--font-sans' | '--font-serif' | '--font-mono' | '--font-editorial';
 type FontStackSlot = {
     kind: 'project';
     familyId: string;

package/dist-plugin/{themeTypes-BAqtv4XO.d.ts → themeTypes-DSV3Zisf.d.ts}

@@ -7,6 +7,13 @@ interface CurveAnchor {
     outDy: number;
 }
 
+/** The `to <side-or-corner>` keywords CSS accepts in place of an angle. A
+ *  keyword angles the gradient line off the box's own diagonal, so it tracks
+ *  the element's aspect ratio where a fixed angle cannot: `to bottom right`
+ *  reads as ~95deg across a wide heading and ~111deg once that heading wraps.
+ *  That is the whole reason to carry them — a degree cannot express it. */
+declare const LINEAR_DIRECTIONS: readonly ["to top", "to top right", "to right", "to bottom right", "to bottom", "to bottom left", "to left", "to top left"];
+type LinearDirection = (typeof LINEAR_DIRECTIONS)[number];
 interface GradientStop$1 {
     /** 0–100 percentage along the gradient axis. */
     position: number;
@@ -25,6 +32,10 @@ interface GradientStop$1 {
 interface GradientValue {
     type: 'linear' | 'radial' | 'solid' | 'none';
     angle: number;
+    /** Emitted in place of `angle` on a `linear` gradient. `angle` is retained
+     *  underneath so clearing the direction restores the user's degrees, the
+     *  same way a radial keeps its angle. */
+    direction?: LinearDirection;
     radius?: number;
     centerX?: number;
     aspectX?: number;
@@ -136,7 +147,7 @@ interface FontSource {
 }
 type SystemCascadePreset = 'system-ui-sans' | 'system-ui-serif' | 'system-ui-mono';
 type GenericFamily = 'sans-serif' | 'serif' | 'monospace' | 'cursive' | 'fantasy';
-type FontStackVariable = '--font-display' | '--font-sans' | '--font-serif' | '--font-mono';
+type FontStackVariable = '--font-display' | '--font-sans' | '--font-serif' | '--font-mono' | '--font-editorial';
 type FontStackSlot = {
     kind: 'project';
     familyId: string;

package/dist-plugin/tokensCssMigrations/index.cjs

@@ -462,6 +462,61 @@ 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)",
+  apply(css) {
+    const withStack = 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
+    });
+  }
+};
+
+// vite-plugin/tokensCssMigrations/migrations/2026-08-26-gradient-stops.ts
+var STOPS_RE = /^(?:linear|radial)-gradient\(\s*[^,]+,\s*(.+)\)$/i;
+var tokensCssMigration_2026_08_26_gradientStops = {
+  id: "2026-08-26-gradient-stops",
+  kind: "additive",
+  description: "Add --gradient-N-stops companions to the gradient slots",
+  apply(css) {
+    const values = collectTokenValues(css);
+    const entries = [];
+    for (const [name, value] of values) {
+      if (!/^--gradient-\d+$/.test(name)) continue;
+      const stops = value.match(STOPS_RE);
+      if (stops) entries.push({ name: `${name}-stops`, value: stops[1].trim() });
+    }
+    if (entries.length === 0) return css;
+    return ensureScale(css, { anchorPrefixes: ["--gradient-"], entries });
+  }
+};
+
 // vite-plugin/files/dataPaths.ts
 var import_fs = __toESM(require("fs"), 1);
 var import_path = __toESM(require("path"), 1);
@@ -505,7 +560,9 @@ var TOKENS_CSS_MIGRATIONS = [
   tokensCssMigration_2026_06_04_easingColorAndTypescaleAdditions,
   tokensCssMigration_2026_07_20_lineHeightRename,
   tokensCssMigration_2026_07_20_semanticTextStyles,
-  tokensCssMigration_2026_08_19_oklchColorValues
+  tokensCssMigration_2026_08_19_oklchColorValues,
+  tokensCssMigration_2026_08_25_editorialTypeRole,
+  tokensCssMigration_2026_08_26_gradientStops
 ];
 function runTokensCssMigrations(css) {
   return foldMigrations(css, () => true);

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

@@ -1,4 +1,4 @@
-export { r as readLiveTokensConfig } from '../dataPaths-DBN0RPuT.cjs';
+export { r as readLiveTokensConfig } from '../dataPaths-CRfD1LdA.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-DBN0RPuT.js';
+export { r as readLiveTokensConfig } from '../dataPaths-CRfD1LdA.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-TKZBVIW5.js";
-import "../chunk-YR6GPXW2.js";
+} from "../chunk-E5QYON4L.js";
+import "../chunk-XWXIMTWZ.js";
 import {
   readLiveTokensConfig
-} from "../chunk-D3ZVKOR4.js";
+} from "../chunk-Y5CNFSSV.js";
 export {
   TOKENS_CSS_MIGRATIONS,
   collectDefinedTokens,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motion-proto/live-tokens",
-  "version": "0.56.1",
+  "version": "0.58.0",
   "type": "module",
   "description": "Design token editor with live CSS variable editing. Svelte 5 + Vite 8.",
   "keywords": [
@@ -30,6 +30,7 @@
     "src/live-tokens/data/colors-and-type/midnight-study.json",
     "src/live-tokens/data/colors-and-type/ocean.json",
     "src/live-tokens/data/colors-and-type/royal-velvet.json",
+    "src/live-tokens/data/colors-and-type/sketchy.json",
     "src/live-tokens/data/colors-and-type/spring-meadow.json",
     "src/live-tokens/data/colors-and-type/sunset.json",
     "src/live-tokens/data/themes/autumn.json",
@@ -37,6 +38,7 @@
     "src/live-tokens/data/themes/midnight-study.json",
     "src/live-tokens/data/themes/ocean.json",
     "src/live-tokens/data/themes/royal-velvet.json",
+    "src/live-tokens/data/themes/sketchy.json",
     "src/live-tokens/data/themes/spring-meadow.json",
     "src/live-tokens/data/themes/sunset.json",
     "dist-plugin",

package/src/editor/core/fonts/applyFontPairing.ts

@@ -8,7 +8,7 @@ import type {
 import { parseGoogleFontsUrl } from './fontParse';
 import { familyIndex, resolvedFaceName } from './fontPairing';
 
-export type PairingSlot = 'display' | 'body' | 'serif' | 'mono';
+export type PairingSlot = 'display' | 'body' | 'serif' | 'mono' | 'editorial';
 
 export interface PairingFace {
   name: string;
@@ -44,13 +44,14 @@ export interface FontPairingResult {
 
 /** Slot order is also the order stamped sources land in `fontSources`;
  *  `check:preset-themes` reads the preset pair back out positionally. */
-export const SLOT_ORDER: PairingSlot[] = ['display', 'body', 'serif', 'mono'];
+export const SLOT_ORDER: PairingSlot[] = ['display', 'body', 'serif', 'mono', 'editorial'];
 
 export const SLOT_VARIABLES: Record<PairingSlot, FontStackVariable> = {
   display: '--font-display',
   body: '--font-sans',
   serif: '--font-serif',
   mono: '--font-mono',
+  editorial: '--font-editorial',
 };
 
 export function slugifyFamily(name: string): string {

package/src/editor/core/fonts/fontLoader.ts

@@ -20,6 +20,7 @@ const FONT_STACK_VARIABLES: FontStackVariable[] = [
   '--font-sans',
   '--font-serif',
   '--font-mono',
+  '--font-editorial',
 ];
 
 const LINK_ATTR = 'data-font-source-id';

package/src/editor/core/fonts/fontMigration.ts

@@ -115,9 +115,37 @@ export function defaultFontStacks(sources: FontSource[]): FontStack[] {
         { kind: 'generic', value: 'monospace' },
       ],
     },
+    {
+      variable: '--font-editorial',
+      slots: [
+        ...pick('Manrope'),
+        { kind: 'system', preset: 'system-ui-sans' },
+        { kind: 'generic', value: 'sans-serif' },
+      ],
+    },
   ];
 }
 
+/**
+ * Seed `--font-editorial` from `--font-sans` on files written before the
+ * editorial role existed. The role ships as "the body face until a consumer
+ * repoints it", so cloning the body stack is the migration: a theme that never
+ * touches editorial keeps rendering exactly as it did.
+ *
+ * Presence-based like the rest of this module, so re-running is a no-op and no
+ * schemaVersion step is needed.
+ */
+function ensureEditorialStack(stacks: FontStack[]): boolean {
+  if (stacks.some((s) => s.variable === '--font-editorial')) return false;
+  const sans = stacks.find((s) => s.variable === '--font-sans');
+  if (!sans) return false;
+  stacks.push({
+    variable: '--font-editorial',
+    slots: sans.slots.map((slot) => ({ ...slot })),
+  });
+  return true;
+}
+
 // Older themes have `kind: 'font-face'` sources with embedded cssText that
 // references local woff2 files. The url() resolution for those embedded refs
 // is fragile in consumers, so swap any font-face source whose cssText is for
@@ -161,9 +189,11 @@ export function migrateColorsAndTypeFonts(colorsAndType: ColorsAndType): { migra
   if (!colorsAndType.fontStacks || colorsAndType.fontStacks.length === 0) {
     colorsAndType.fontStacks = defaultFontStacks(colorsAndType.fontSources);
     migrated = true;
+  } else if (ensureEditorialStack(colorsAndType.fontStacks)) {
+    migrated = true;
   }
   if (colorsAndType.cssVariables) {
-    for (const key of ['--font-display', '--font-sans', '--font-serif', '--font-mono']) {
+    for (const key of ['--font-display', '--font-sans', '--font-serif', '--font-mono', '--font-editorial']) {
       if (key in colorsAndType.cssVariables) {
         delete colorsAndType.cssVariables[key];
         migrated = true;

package/src/editor/core/palettes/paletteDerivation.ts

@@ -13,7 +13,7 @@
  * derives the same CSS vars from the persisted config.
  */
 
-import { cssColorToOklch, oklchToCssClamped, gamutClamp, type Oklch } from './oklch';
+import { cssColorToOklch, oklchToCss, gamutClamp, type Oklch } from './oklch';
 import { type CurveAnchor, sampleCurve, makeAnchor, tangentAnchor, resmoothAutoCurve } from '../../ui/curveEngine';
 import type { PaletteConfig } from '../themes/themeTypes';
 
@@ -204,7 +204,14 @@ export type DerivedValue =
  *  then serialized as `oklch()`. Idempotent on the already-in-gamut per-step
  *  derivation output. `raw` passes through untouched. */
 export function serializeDerivedValue(value: DerivedValue): string {
-  return value.kind === 'raw' ? value.css : oklchToCssClamped(value.l, value.c, value.h);
+  // Emitted unclamped: the stored basis is OKLCH, and clamping into sRGB threw
+  // away chroma a wide-gamut display can actually show. Values already inside
+  // sRGB serialize identically (`gamutClamp` returns them untouched), so this
+  // moves nothing in an existing theme; only intent authored beyond sRGB — a
+  // Tailwind v4 ramp, say — now survives to the browser, which does its own
+  // gamut mapping at paint. `oklchToCssClamped` still backs the hex readouts,
+  // where a clamped projection is the whole point.
+  return value.kind === 'raw' ? value.css : oklchToCss(value.l, value.c, value.h);
 }
 
 export function computePaletteOklch(