@motion-proto/live-tokens 0.56.1 → 0.57.0

package/.claude/skills/live-tokens-pair-fonts/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: live-tokens-pair-fonts
-description: Choose and apply a Google Fonts pairing for a live-tokens theme by binding families to the --font-display, --font-sans, --font-serif and --font-mono stacks. Use whenever the user asks to pair fonts, pick a typeface, change or set the fonts, or describes type by voice: give me a font pairing, what font should the headings use, make the type more editorial, friendlier, more technical, more elegant, a serif for headings, a display font for this theme, less generic type, match the fonts to the theme. Also invoked by live-tokens-generate-theme for the type half of a whole look. Changes type only, never color. Not for a single token (use the editor) or for color (see live-tokens-generate-theme).
+description: Choose and apply a Google Fonts pairing for a live-tokens theme by binding families to the --font-display, --font-sans, --font-serif, --font-mono and --font-editorial stacks. Use whenever the user asks to pair fonts, pick a typeface, change or set the fonts, or describes type by voice: give me a font pairing, what font should the headings use, make the type more editorial, friendlier, more technical, more elegant, a serif for headings, a display font for this theme, less generic type, match the fonts to the theme. Also invoked by live-tokens-generate-theme for the type half of a whole look. Changes type only, never color. Not for a single token (use the editor) or for color (see live-tokens-generate-theme).
 ---
 
 # Pairing fonts for a theme
@@ -24,7 +24,7 @@ Flags: `--dry-run` reports without writing. `--no-verify` skips the network and
 { "display": "Fraunces", "body": "Nunito Sans" }
 ```
 
-Every slot is optional and an omitted slot is left exactly as it is. `display` is `--font-display`, `body` is `--font-sans`; `serif` and `mono` exist when a theme needs them. A slot may be `{ "name": "...", "url": "..." }` to pin an exact URL. Spell families as Google does; the CLI reports the canonical spelling back.
+Every slot is optional and an omitted slot is left exactly as it is. `display` is `--font-display`, `body` is `--font-sans`; `serif`, `mono` and `editorial` exist when a theme needs them. `editorial` is `--font-editorial`, the long-reading face behind the `--editorial-*` text style: it tracks the body face until a theme repoints it, so set it only when essays and articles should not carry the body face. A slot may be `{ "name": "...", "url": "..." }` to pin an exact URL. Spell families as Google does; the CLI reports the canonical spelling back.
 
 ## Choose the body face first
 

package/CHANGELOG.md

@@ -1,5 +1,129 @@
 # Changelog
 
+## 0.57.0 — A theme can be drawn by hand
+
+### Added
+
+- **Sketch mode: a fourth editor view, beside Tokens, Colors and Components.**
+  It is an effect layer over the active theme, not a set of theme values. It
+  reads nothing from the theme and writes nothing back. Each component's fill
+  and outline are repainted onto `::before`/`::after` from the tokens that
+  component already owns (`--<component>-<variant>-surface`, `-border`,
+  `-radius`), the real background and border are hidden behind them, and both
+  are pushed around one shared noise field. Turning it off removes every trace.
+  While it is on it applies to the page behind the editor as well as to the
+  preview, because the layer is injected into every document `cssVarSync`
+  tracks. Scope is the `data-sketch` attribute, so it switches on for a whole
+  document root or for one preview container.
+- **Seven shipped looks, and every dial behind them.** Pencil, Marker,
+  Whiteboard, Hatched, Dashed, Napkin and Dry marker, each a complete set of
+  settings with a blurb naming what it is. The dials sit under five headings:
+  **Border** (travel, wavelength, width, ink, pressure, pooling, dashes, a
+  second pass that either copies the first line or runs it through the pen again
+  on its own seed), **Fill** (solid or hatched, travel, per-instance offset,
+  rotation and scale), **Shape** (corner spread, and a corner travel that leans
+  the drawn box into a quadrilateral with no two sides parallel), **Icons and
+  SVG** (glyph travel and wavelength on their own scale, because a glyph is all
+  curves and needs more travel than a card's long straight edge), and **Noise**
+  (the shared displacement field's wavelength, roughness and waveform).
+- **Ink coverage as a generated field.** The mask that thins a fill is a tiling
+  Perlin field rasterised to a greyscale PNG and applied with `mask-mode:
+  luminance`, rather than an `feTurbulence` primitive. Turbulence lands in a
+  narrow band around its own midpoint, so a dial walking a cut across 0 to 1
+  spends most of its travel outside the field and the rest reads as flat grey.
+  Generated, the tile is stretched onto its own measured range first, so Min and
+  Max always mean levels at every grain and octave count. The panel previews the
+  field at each stage: noise, output, blur.
+- **Saved sketch presets.** Any set of dials saves under a name and reloads
+  later, as files under `<dataDir>/sketch-presets/` served by a new
+  `/api/sketch-presets` route on the dev plugin. A sketch look is a draft
+  effect, never part of a theme: it has no active/production pointer, it is not
+  adopted, and it never reaches `tokens.generated.css`. The shipped seven stay
+  in code, so the directory holds nothing but your own files.
+- **A page can hand the layer its own elements.** The effect displaces boxes, so
+  a rule drawn as a `border` is not one of them. `--sketch-fill`,
+  `--sketch-stroke`, `--sketch-hatch-color` and `--sketch-radius` name what an
+  element should be drawn with, and `--sketch-icon-off: none` opts a subtree
+  out. The demo app's kit section draws its rules this way; the editor's own
+  overlay bar opts out, because the effect is for the page being designed and
+  not for the tool looking at it.
+- **A Sketch mode chapter in the user guide.** It sits after Editing tokens and
+  covers the presets, the dials, and the `--sketch-*` properties a page uses to
+  hand the layer its own elements. Editing tokens itself now names all four
+  views; it had been describing two since the Colors view landed.
+- **Sketches ships as an eighth preset theme.** A whole look built on the
+  effect: Cabin Sketch over Shantell Sans, square corners, and component
+  aliases tuned for a page that is drawn rather than rendered. Load it from the
+  Theme panel like any other preset. It stands on its own with Sketch mode off,
+  and the effect is what it was designed under.
+- **The gradient library is open-ended.** `--gradient-N` was a fixed four-slot
+  scale; the Gradients section now has Add and Remove, and any number of
+  numbered slots loads from a theme file. A new slot seeds from the last one, so
+  it lands as a gradient you edit rather than an invisible transparent one.
+- **A gradient can point at a corner.** Alongside degrees, a linear gradient
+  takes CSS's `to top right` and its seven neighbours. A keyword angles the
+  gradient line off the box's own diagonal, so it tracks the element's aspect
+  where a fixed angle cannot: `to bottom right` reads as about 95deg across a
+  wide heading and about 111deg once that heading wraps. The degrees underneath
+  are kept, so clearing the keyword lands on the nearest angle rather than
+  snapping to 0deg.
+- **`--gradient-N-stops`.** Each slot now also emits its stop list on its own,
+  so a consumer can keep the theme's colours and supply their own geometry:
+  `linear-gradient(to top, var(--gradient-5-stops))`. One set of stops then
+  serves every direction a design needs, instead of a token per angle.
+- **The editorial type role.** A fifth font stack (`--font-editorial`) and a
+  ninth text-style bundle (`--editorial-*`), for the long-reading surfaces that
+  should not carry the body face under an expressive display face. Both default
+  to indirections rather than literals: the stack resolves to `var(--font-sans)`
+  and the bundle mirrors `--body-md-*`, so a project that never mentions
+  editorial renders byte-identically. `live-tokens set-fonts` gained a matching
+  `editorial` slot, and the stack is editable in the editor beside the other
+  four.
+
+### Changed
+
+- **Derived palette values serialize unclamped.** A palette's basis is OKLCH,
+  and clamping every derived step into sRGB on the way out threw away chroma a
+  wide-gamut display can show. Values already inside sRGB serialize identically,
+  so nothing moves in an existing theme; intent authored beyond sRGB now
+  survives to the browser, which does its own gamut mapping at paint. The hex
+  readouts still show the clamped projection, which is what a hex readout is
+  for.
+- **The product is spelled LiveTokens.** One word, in the README, the docs and
+  the demo app. The package name is unchanged.
+- **A test fails on any engine load at module top.** `bin/engineLoadsLazily.test.ts`
+  follows every `.mjs` module a test suite can reach, transitively, and rejects
+  a top-level import of the compiled engine. CI runs the suite before it builds
+  the plugin, so such a load is a publish failure rather than a test failure.
+  This is the bug that took down 0.56.0.
+
+### Fixed
+
+- **A session persisted before the OKLCH palette basis no longer throws on
+  hydrate.** Such a session holds hex strings where every palette color is now
+  `{ l, c, h }`. `loadFromFile` migrated those on the way in and `hydrate` did
+  not, so the session reached the renderer with an undefined hue and threw on
+  the first serialization.
+- **The overlay panel's chrome keeps its own font.** `tokens.css` sets the theme
+  font on `:where(*)`, and a matching rule beats inheritance, so the panel's
+  font-family never reached its children. The editor page already restored
+  inheritance for its chrome; the overlay now does the same.
+
+### Migration
+
+- Two **tokens.css migrations** ship here, both additive: `--font-editorial`
+  with the `--editorial-*` bundle, and a `--gradient-N-stops` companion per
+  gradient slot. Each companion is read out of the slot it belongs to rather
+  than hardcoded, so a retuned gradient does not get a stop list contradicting
+  it. Run `npx live-tokens migrate` to apply them to a vendored `tokens.css`, or
+  set the plugin's `autoMigrate` option and let it apply additive migrations on
+  boot. Until then the dev plugin warns on the gap and the new names simply
+  resolve to nothing.
+- The **editorial font stack** is added to a theme file on load, cloned from
+  that theme's `--font-sans`. It is presence-based and idempotent, so there is
+  no schema step and a theme that never touches editorial keeps rendering as it
+  did.
+
 ## 0.56.1 — Release fix
 
 ### Fixed

package/README.md

@@ -1,4 +1,4 @@
-# Live Tokens
+# LiveTokens
 
 A design system for styling and building Svelte + Vite microsites. Edit tokens and components in a dev-only editor and watch the running site repaint on every input. Save the result as a theme file and carry it between projects.
 

package/bin/cli.mjs

@@ -56,7 +56,8 @@ Commands:
                               the report without writing.
   set-fonts <brief.json> [--dry-run] [--no-verify]
                               Bind Google Fonts families to --font-display,
-                              --font-sans, --font-serif and --font-mono (see
+                              --font-sans, --font-serif, --font-mono and
+                              --font-editorial (see
                               the live-tokens-pair-fonts skill). Each family is
                               verified against the Google Fonts API and the URL
                               is negotiated from the weights it actually has.

package/dist-plugin/adjust/index.cjs

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

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

@@ -1,5 +1,5 @@
-import { A as AliasDiskValue, a as ComponentConfig } from '../themeTypes-BAqtv4XO.cjs';
-export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-DBN0RPuT.cjs';
+import { A as AliasDiskValue, a as ComponentConfig } from '../themeTypes-DSV3Zisf.cjs';
+export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-CRfD1LdA.cjs';
 export { C as CURRENT_COMPONENT_SCHEMA_VERSION } from '../index-4N-Orzzi.cjs';
 
 type AdjustKind = 'radius' | 'padding' | 'gap' | 'border-width';

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

@@ -1,5 +1,5 @@
-import { A as AliasDiskValue, a as ComponentConfig } from '../themeTypes-BAqtv4XO.js';
-export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-DBN0RPuT.js';
+import { A as AliasDiskValue, a as ComponentConfig } from '../themeTypes-DSV3Zisf.js';
+export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-CRfD1LdA.js';
 export { C as CURRENT_COMPONENT_SCHEMA_VERSION } from '../index-4N-Orzzi.js';
 
 type AdjustKind = 'radius' | 'padding' | 'gap' | 'border-width';

package/dist-plugin/adjust/index.js

@@ -4,7 +4,7 @@ import {
 import {
   readLiveTokensConfig,
   resolveDataDirs
-} from "../chunk-D3ZVKOR4.js";
+} from "../chunk-Y5CNFSSV.js";
 
 // src/editor/core/components/aliasKinds.ts
 var KIND_PATTERNS = [

package/dist-plugin/{chunk-TKZBVIW5.js → chunk-E5QYON4L.js}

@@ -1,7 +1,7 @@
 import {
   hexToOklch,
   oklchToCss
-} from "./chunk-YR6GPXW2.js";
+} from "./chunk-XWXIMTWZ.js";
 
 // src/editor/core/themes/parsers/globalRootBlock.ts
 function extractGlobalRootBody(source) {
@@ -375,6 +375,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/tokensCssMigrations/index.ts
 var TOKENS_CSS_MIGRATIONS = [
   tokensCssMigration_2026_05_29_typographyScaleAdditions,
@@ -384,7 +439,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/{chunk-PB2JTK2H.js → chunk-LW4SR7AZ.js}

@@ -1,8 +1,8 @@
 import {
   cssColorToOklch,
   gamutClamp,
-  oklchToCssClamped
-} from "./chunk-YR6GPXW2.js";
+  oklchToCss
+} from "./chunk-XWXIMTWZ.js";
 
 // src/editor/core/storage/files/versionedFileResourceClient.ts
 function sanitizeFileName(name) {
@@ -21,6 +21,30 @@ function formatColorOpacity(name, opacity) {
 }
 
 // src/editor/core/themes/parsers/gradient.ts
+var LINEAR_DIRECTIONS = [
+  "to top",
+  "to top right",
+  "to right",
+  "to bottom right",
+  "to bottom",
+  "to bottom left",
+  "to left",
+  "to top left"
+];
+var DIRECTION_ANGLES = {
+  "to top": 0,
+  "to top right": 45,
+  "to right": 90,
+  "to bottom right": 135,
+  "to bottom": 180,
+  "to bottom left": 225,
+  "to left": 270,
+  "to top left": 315
+};
+function parseDirection(raw) {
+  const norm = raw.trim().toLowerCase().replace(/\s+/g, " ");
+  return LINEAR_DIRECTIONS.includes(norm) ? norm : null;
+}
 var RADIAL_BASE_PX = 100;
 function formatStopColor(s) {
   const opacity = s.opacity ?? 100;
@@ -48,11 +72,15 @@ function formatGradientValue(v) {
     return first ? formatStopColor(first) : "transparent";
   }
   const stops = formatGradientStops(v.stops);
-  if (v.type === "linear") return `linear-gradient(${v.angle}deg, ${stops})`;
+  if (v.type === "linear") {
+    return `linear-gradient(${v.direction ?? `${v.angle}deg`}, ${stops})`;
+  }
   return `radial-gradient(${formatRadialShape(v)} at ${v.centerX ?? 50}% 50%, ${stops})`;
 }
 var NUM = String.raw`-?\d+(?:\.\d+)?`;
-var LINEAR_RE = new RegExp(String.raw`^linear-gradient\(\s*(${NUM})deg\s*,\s*(.+)\)$`, "i");
+var HEADING = String.raw`${NUM}deg|to\s+\w+(?:\s+\w+)?`;
+var LINEAR_RE = new RegExp(String.raw`^linear-gradient\(\s*(${HEADING})\s*,\s*(.+)\)$`, "i");
+var DEG_RE = new RegExp(String.raw`^(${NUM})deg$`, "i");
 var RADIAL_RE = new RegExp(
   String.raw`^radial-gradient\(\s*(circle|circle\s+${NUM}px|ellipse\s+${NUM}px\s+${NUM}px)\s+at\s+(${NUM})%\s+50%\s*,\s*(.+)\)$`,
   "i"
@@ -111,8 +139,12 @@ function parseGradientValue(value) {
   const css = value.trim();
   const linear = css.match(LINEAR_RE);
   if (linear) {
+    const deg = linear[1].match(DEG_RE);
+    const direction = deg ? null : parseDirection(linear[1]);
+    if (!deg && !direction) return null;
     const stops2 = parseStops(linear[2]);
-    return stops2 && { type: "linear", angle: parseFloat(linear[1]), stops: stops2 };
+    if (!stops2) return null;
+    return deg ? { type: "linear", angle: parseFloat(deg[1]), stops: stops2 } : { type: "linear", angle: 0, direction, stops: stops2 };
   }
   const radial = css.match(RADIAL_RE);
   if (!radial) return null;
@@ -307,7 +339,7 @@ function scaleStepToX(step, scale) {
   return scale.steps.length > 1 ? idx / (scale.steps.length - 1) * 100 : 50;
 }
 function serializeDerivedValue(value) {
-  return value.kind === "raw" ? value.css : oklchToCssClamped(value.l, value.c, value.h);
+  return value.kind === "raw" ? value.css : oklchToCss(value.l, value.c, value.h);
 }
 function computePaletteOklch(index, base, lightnessCurve, saturationCurve, curveOffset, hueCurve) {
   const { c: baseC } = base;
@@ -587,6 +619,7 @@ function reconcilePalettesFromCssVars(palettes, cssVars) {
 
 export {
   parseColorOpacity,
+  DIRECTION_ANGLES,
   formatGradientValue,
   parseGradientValue,
   sanitizeFileName,

package/dist-plugin/{chunk-YR6GPXW2.js → chunk-XWXIMTWZ.js}

@@ -99,10 +99,6 @@ function oklchToCss(l, c, h) {
   const cs = trim(c, 4);
   return `oklch(${trim(l, 4)} ${cs} ${cs === "0" ? "0" : trim(h, 2)})`;
 }
-function oklchToCssClamped(l, c, h) {
-  const g = gamutClamp(l, c, h);
-  return oklchToCss(g.l, g.c, g.h);
-}
 var OKLCH_RE = /^oklch\(\s*([\d.]+)(%?)\s+([\d.]+)(%?)\s+([\d.]+)(?:deg)?\s*\)$/i;
 var HEX6_RE = /^#[0-9a-f]{6}$/i;
 function parseOklchCss(value) {
@@ -124,6 +120,5 @@ export {
   oklchToHexClamped,
   gamutClamp,
   oklchToCss,
-  oklchToCssClamped,
   cssColorToOklch
 };

package/dist-plugin/{chunk-D3ZVKOR4.js → chunk-Y5CNFSSV.js}

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

package/dist-plugin/{dataPaths-DBN0RPuT.d.cts → dataPaths-CRfD1LdA.d.cts}

@@ -28,6 +28,9 @@ interface ResolvedDataDirs {
     colorsAndTypeDir: string;
     componentConfigsDir: string;
     themesDir: string;
+    /** No per-folder config override: sketch presets are a draft-look artifact
+     *  with no reason to live apart from the rest of the data tree. */
+    sketchPresetsDir: string;
     /** Absolute path of the retired `manifestsDir` key, when the config sets it.
      *  Only the pre-0.48 layout detector and the migration read it. */
     legacyManifestsDir?: string;

package/dist-plugin/{dataPaths-DBN0RPuT.d.ts → dataPaths-CRfD1LdA.d.ts}

@@ -28,6 +28,9 @@ interface ResolvedDataDirs {
     colorsAndTypeDir: string;
     componentConfigsDir: string;
     themesDir: string;
+    /** No per-folder config override: sketch presets are a draft-look artifact
+     *  with no reason to live apart from the rest of the data tree. */
+    sketchPresetsDir: string;
     /** Absolute path of the retired `manifestsDir` key, when the config sets it.
      *  Only the pre-0.48 layout detector and the migration read it. */
     legacyManifestsDir?: string;

package/dist-plugin/fontPairing/index.cjs

@@ -143,12 +143,13 @@ function fontPairingLabel(stacks, sources) {
 }
 
 // src/editor/core/fonts/applyFontPairing.ts
-var SLOT_ORDER = ["display", "body", "serif", "mono"];
+var SLOT_ORDER = ["display", "body", "serif", "mono", "editorial"];
 var SLOT_VARIABLES = {
   display: "--font-display",
   body: "--font-sans",
   serif: "--font-serif",
-  mono: "--font-mono"
+  mono: "--font-mono",
+  editorial: "--font-editorial"
 };
 function slugifyFamily(name) {
   return name.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
@@ -391,6 +392,7 @@ function resolveDataDirs(opts = {}) {
     colorsAndTypeDir: opts.colorsAndTypeDir ? import_path.default.resolve(opts.colorsAndTypeDir) : fileConfig.colorsAndTypeDir ? import_path.default.resolve(fileConfig.colorsAndTypeDir) : sub("colors-and-type"),
     componentConfigsDir: opts.componentConfigsDir ? import_path.default.resolve(opts.componentConfigsDir) : fileConfig.componentConfigsDir ? import_path.default.resolve(fileConfig.componentConfigsDir) : sub("component-configs"),
     themesDir: opts.themesDir ? import_path.default.resolve(opts.themesDir) : fileConfig.themesDir ? import_path.default.resolve(fileConfig.themesDir) : sub("themes"),
+    sketchPresetsDir: sub("sketch-presets"),
     legacyManifestsDir: fileConfig.manifestsDir ? import_path.default.resolve(fileConfig.manifestsDir) : void 0
   };
 }

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

@@ -1,7 +1,7 @@
-import { c as FontStackVariable, C as ColorsAndType, b as FontStack, F as FontSource } from '../themeTypes-BAqtv4XO.cjs';
-export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-DBN0RPuT.cjs';
+import { c as FontStackVariable, C as ColorsAndType, b as FontStack, F as FontSource } from '../themeTypes-DSV3Zisf.cjs';
+export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-CRfD1LdA.cjs';
 
-type PairingSlot = 'display' | 'body' | 'serif' | 'mono';
+type PairingSlot = 'display' | 'body' | 'serif' | 'mono' | 'editorial';
 interface PairingFace {
     name: string;
     url: string;

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

@@ -1,7 +1,7 @@
-import { c as FontStackVariable, C as ColorsAndType, b as FontStack, F as FontSource } from '../themeTypes-BAqtv4XO.js';
-export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-DBN0RPuT.js';
+import { c as FontStackVariable, C as ColorsAndType, b as FontStack, F as FontSource } from '../themeTypes-DSV3Zisf.js';
+export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-CRfD1LdA.js';
 
-type PairingSlot = 'display' | 'body' | 'serif' | 'mono';
+type PairingSlot = 'display' | 'body' | 'serif' | 'mono' | 'editorial';
 interface PairingFace {
     name: string;
     url: string;

package/dist-plugin/fontPairing/index.js

@@ -1,7 +1,7 @@
 import {
   readLiveTokensConfig,
   resolveDataDirs
-} from "../chunk-D3ZVKOR4.js";
+} from "../chunk-Y5CNFSSV.js";
 
 // src/editor/core/fonts/fontParse.ts
 function parseGoogleFontsUrl(url2) {
@@ -101,12 +101,13 @@ function fontPairingLabel(stacks, sources) {
 }
 
 // src/editor/core/fonts/applyFontPairing.ts
-var SLOT_ORDER = ["display", "body", "serif", "mono"];
+var SLOT_ORDER = ["display", "body", "serif", "mono", "editorial"];
 var SLOT_VARIABLES = {
   display: "--font-display",
   body: "--font-sans",
   serif: "--font-serif",
-  mono: "--font-mono"
+  mono: "--font-mono",
+  editorial: "--font-editorial"
 };
 function slugifyFamily(name) {
   return name.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");

package/dist-plugin/generateColorsAndType/index.cjs

@@ -139,10 +139,6 @@ function oklchToCss(l, c, h) {
   const cs = trim(c, 4);
   return `oklch(${trim(l, 4)} ${cs} ${cs === "0" ? "0" : trim(h, 2)})`;
 }
-function oklchToCssClamped(l, c, h) {
-  const g = gamutClamp(l, c, h);
-  return oklchToCss(g.l, g.c, g.h);
-}
 var OKLCH_RE = /^oklch\(\s*([\d.]+)(%?)\s+([\d.]+)(%?)\s+([\d.]+)(?:deg)?\s*\)$/i;
 var HEX6_RE = /^#[0-9a-f]{6}$/i;
 function parseOklchCss(value) {
@@ -336,7 +332,7 @@ function scaleStepToX(step, scale) {
   return scale.steps.length > 1 ? idx / (scale.steps.length - 1) * 100 : 50;
 }
 function serializeDerivedValue(value) {
-  return value.kind === "raw" ? value.css : oklchToCssClamped(value.l, value.c, value.h);
+  return value.kind === "raw" ? value.css : oklchToCss(value.l, value.c, value.h);
 }
 function computePaletteOklch(index, base, lightnessCurve, saturationCurve, curveOffset, hueCurve) {
   const { c: baseC } = base;
@@ -609,6 +605,16 @@ function formatColorOpacity(name, opacity) {
 }
 
 // src/editor/core/themes/parsers/gradient.ts
+var DIRECTION_ANGLES = {
+  "to top": 0,
+  "to top right": 45,
+  "to right": 90,
+  "to bottom right": 135,
+  "to bottom": 180,
+  "to bottom left": 225,
+  "to left": 270,
+  "to top left": 315
+};
 var RADIAL_BASE_PX = 100;
 function formatStopColor(s) {
   const opacity = s.opacity ?? 100;
@@ -636,11 +642,15 @@ function formatGradientValue(v) {
     return first ? formatStopColor(first) : "transparent";
   }
   const stops = formatGradientStops(v.stops);
-  if (v.type === "linear") return `linear-gradient(${v.angle}deg, ${stops})`;
+  if (v.type === "linear") {
+    return `linear-gradient(${v.direction ?? `${v.angle}deg`}, ${stops})`;
+  }
   return `radial-gradient(${formatRadialShape(v)} at ${v.centerX ?? 50}% 50%, ${stops})`;
 }
 var NUM = String.raw`-?\d+(?:\.\d+)?`;
-var LINEAR_RE = new RegExp(String.raw`^linear-gradient\(\s*(${NUM})deg\s*,\s*(.+)\)$`, "i");
+var HEADING = String.raw`${NUM}deg|to\s+\w+(?:\s+\w+)?`;
+var LINEAR_RE = new RegExp(String.raw`^linear-gradient\(\s*(${HEADING})\s*,\s*(.+)\)$`, "i");
+var DEG_RE = new RegExp(String.raw`^(${NUM})deg$`, "i");
 var RADIAL_RE = new RegExp(
   String.raw`^radial-gradient\(\s*(circle|circle\s+${NUM}px|ellipse\s+${NUM}px\s+${NUM}px)\s+at\s+(${NUM})%\s+50%\s*,\s*(.+)\)$`,
   "i"
@@ -655,7 +665,8 @@ function makeDefaultGradients() {
     {
       variable: "--gradient-1",
       type: "linear",
-      angle: 90,
+      angle: DIRECTION_ANGLES["to right"],
+      direction: "to right",
       stops: [
         { position: 0, color: "--color-brand-500" },
         { position: 100, color: "--color-accent-500" }
@@ -673,7 +684,8 @@ function makeDefaultGradients() {
     {
       variable: "--gradient-3",
       type: "linear",
-      angle: 90,
+      angle: DIRECTION_ANGLES["to right"],
+      direction: "to right",
       stops: [
         { position: 0, color: "--color-success-500" },
         { position: 100, color: "--color-info-500" }
@@ -1914,6 +1926,7 @@ function resolveDataDirs(opts = {}) {
     colorsAndTypeDir: opts.colorsAndTypeDir ? import_path.default.resolve(opts.colorsAndTypeDir) : fileConfig.colorsAndTypeDir ? import_path.default.resolve(fileConfig.colorsAndTypeDir) : sub("colors-and-type"),
     componentConfigsDir: opts.componentConfigsDir ? import_path.default.resolve(opts.componentConfigsDir) : fileConfig.componentConfigsDir ? import_path.default.resolve(fileConfig.componentConfigsDir) : sub("component-configs"),
     themesDir: opts.themesDir ? import_path.default.resolve(opts.themesDir) : fileConfig.themesDir ? import_path.default.resolve(fileConfig.themesDir) : sub("themes"),
+    sketchPresetsDir: sub("sketch-presets"),
     legacyManifestsDir: fileConfig.manifestsDir ? import_path.default.resolve(fileConfig.manifestsDir) : void 0
   };
 }

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

@@ -1,5 +1,5 @@
-import { F as FontSource, b as FontStack, G as GradientDiskToken, O as Oklch, H as HarmonyMode, C as ColorsAndType } from '../themeTypes-BAqtv4XO.cjs';
-export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-DBN0RPuT.cjs';
+import { F as FontSource, b as FontStack, G as GradientDiskToken, O as Oklch, H as HarmonyMode, C as ColorsAndType } from '../themeTypes-DSV3Zisf.cjs';
+export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-CRfD1LdA.cjs';
 export { C as CURRENT_COMPONENT_SCHEMA_VERSION } from '../index-4N-Orzzi.cjs';
 
 /**

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

@@ -1,5 +1,5 @@
-import { F as FontSource, b as FontStack, G as GradientDiskToken, O as Oklch, H as HarmonyMode, C as ColorsAndType } from '../themeTypes-BAqtv4XO.js';
-export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-DBN0RPuT.js';
+import { F as FontSource, b as FontStack, G as GradientDiskToken, O as Oklch, H as HarmonyMode, C as ColorsAndType } from '../themeTypes-DSV3Zisf.js';
+export { r as readLiveTokensConfig, a as resolveDataDirs } from '../dataPaths-CRfD1LdA.js';
 export { C as CURRENT_COMPONENT_SCHEMA_VERSION } from '../index-4N-Orzzi.js';
 
 /**