@motion-proto/live-tokens 0.61.0 → 0.63.0

package/dist-plugin/index.cjs

@@ -95,8 +95,8 @@ function formatRadialShape(v) {
   if (ax === 1 && ay === 1) {
     return v.radius && v.radius > 0 ? `circle ${v.radius}px` : "circle";
   }
-  const base = v.radius && v.radius > 0 ? v.radius : RADIAL_BASE_PX;
-  return `ellipse ${(base * ax).toFixed(2)}px ${(base * ay).toFixed(2)}px`;
+  const base2 = v.radius && v.radius > 0 ? v.radius : RADIAL_BASE_PX;
+  return `ellipse ${(base2 * ax).toFixed(2)}px ${(base2 * ay).toFixed(2)}px`;
 }
 function formatGradientValue(v) {
   if (v.type === "none") return "transparent";
@@ -486,14 +486,14 @@ function scaleStepToX(step, scale) {
 function serializeDerivedValue(value) {
   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;
+function computePaletteOklch(index, base2, lightnessCurve, saturationCurve, curveOffset, hueCurve) {
+  const { c: baseC } = base2;
   const xPos = stepIndexToX(index);
   const targetL = Math.max(0, Math.min(100, sampleCurve(lightnessCurve, xPos) + (curveOffset.lightness ?? 0))) / 100;
   const satMul = Math.max(0, Math.min(2, (sampleCurve(saturationCurve, xPos) + (curveOffset.saturation ?? 0)) / 100));
   const targetC = baseC * satMul;
   const hueDelta = (hueCurve ? sampleCurve(hueCurve, xPos) : 0) + (curveOffset.hue ?? 0);
-  const h = hueDelta === 0 ? base.h : wrapHue(base.h + hueDelta);
+  const h = hueDelta === 0 ? base2.h : wrapHue(base2.h + hueDelta);
   return gamutClamp(targetL, targetC, h);
 }
 function nearestPaletteStep(lightnessCurve, baseL) {
@@ -617,7 +617,7 @@ function syncBaseAnchor(cfg) {
     priorHueEndpoints: h ? prev?.priorHueEndpoints ?? h.priorEndpoints : void 0
   };
 }
-function computeDerivedOklch(step, base, scaleTitle, scaleCurves, curveOffset) {
+function computeDerivedOklch(step, base2, scaleTitle, scaleCurves, curveOffset) {
   const scale = SCALES.find((s) => s.title === scaleTitle);
   const xPos = scaleStepToX(step, scale);
   const defs = defaultScaleCurves[scaleTitle];
@@ -627,7 +627,7 @@ function computeDerivedOklch(step, base, scaleTitle, scaleCurves, curveOffset) {
   const lOff = curveOffset[`${scaleTitle}-lightness`] ?? 0;
   const sOff = curveOffset[`${scaleTitle}-saturation`] ?? 0;
   const hOff = curveOffset[`${scaleTitle}-hue`] ?? 0;
-  const { l: baseL, c: baseC, h: baseH } = base;
+  const { l: baseL, c: baseC, h: baseH } = base2;
   let targetL;
   if (scale.isText) {
     const lMul = Math.max(0, Math.min(2, (sampleCurve(lCurve, xPos) + lOff) / 100));
@@ -1904,6 +1904,340 @@ 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,
+    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,
+    waveform: 1,
+    strokeWidth: 1.25,
+    doubleStroke: true,
+    retracePass: "reseeded",
+    retraceOffset: 1.5,
+    strokeInk: 0.85,
+    maskBlob: 40,
+    maskOutputMin: 0.62,
+    maskOutputMax: 1,
+    maskOctaves: 3,
+    maskPosterize: 1,
+    maskSoftness: 0,
+    jitterX: 1.5,
+    jitterY: 1.5,
+    jitterRot: 0.35,
+    jitterScale: 0.022,
+    cornerSpread: 6,
+    cornerTravel: 4.5,
+    pressure: 0.15,
+    pressureMod: 0.3,
+    pooling: 0,
+    iconTravel: 0.75
+  },
+  marker: {
+    ...base,
+    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,
+    borderWavelength: 1.3,
+    strokeWidth: 4,
+    doubleStroke: true,
+    retracePass: "copy",
+    strokeInk: 0.52,
+    retraceOffset: 2.2,
+    maskBlob: 115,
+    maskOutputMin: 0.42,
+    maskOutputMax: 1,
+    maskOctaves: 3,
+    maskPosterize: 4,
+    maskSoftness: 4,
+    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,
+    iconMaskScale: 4
+  },
+  whiteboard: {
+    ...base,
+    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,
+    strokeWidth: 5.5,
+    doubleStroke: true,
+    retracePass: "copy",
+    strokeInk: 0.66,
+    retraceOffset: 3,
+    maskGrain: "turbulence",
+    maskBlob: 180,
+    maskOutputMin: 0.42,
+    maskOutputMax: 1,
+    maskOctaves: 1,
+    maskPosterize: 3,
+    maskSoftness: 8,
+    jitterX: 4.5,
+    jitterY: 4.5,
+    jitterRot: 1.2,
+    jitterScale: 0.07,
+    cornerSpread: 14,
+    cornerTravel: 11,
+    pressure: 0.15,
+    pressureMod: 0.15,
+    pooling: 3.5,
+    iconTravel: 1.75,
+    iconMaskScale: 1.5
+  },
+  hatched: {
+    ...base,
+    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,
+    waveform: 3,
+    strokeWidth: 1.5,
+    fillStyle: "hatched",
+    hatchInk: 0.5,
+    doubleStroke: false,
+    maskOn: false,
+    iconMaskOn: false,
+    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
+  },
+  dashed: {
+    ...base,
+    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,
+    wobble: 120,
+    roughness: 1,
+    waveform: 1,
+    strokeWidth: 1.5,
+    doubleStroke: false,
+    maskOn: false,
+    iconMaskOn: false,
+    jitterX: 0,
+    jitterY: 0,
+    jitterRot: 0,
+    jitterScale: 0,
+    cornerSpread: 4,
+    cornerTravel: 3,
+    pressure: 0,
+    pressureMod: 0,
+    pooling: 0,
+    iconTravel: 0
+  },
+  napkin: {
+    ...base,
+    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,
+    waveform: 2.5,
+    strokeWidth: 2.25,
+    doubleStroke: true,
+    retracePass: "reseeded",
+    retraceOffset: 4,
+    strokeInk: 1,
+    maskBlob: 150,
+    maskOutputMin: 0.43,
+    maskOutputMax: 0.95,
+    maskOctaves: 2,
+    maskPosterize: 2,
+    maskSoftness: 10,
+    jitterX: 6,
+    jitterY: 6,
+    jitterRot: 1.8,
+    jitterScale: 0.1,
+    cornerSpread: 20,
+    cornerTravel: 17,
+    pressure: 0.45,
+    pressureMod: 0.6,
+    pooling: 2.5,
+    iconTravel: 2.25,
+    iconMaskScale: 3.6
+  },
+  dry: {
+    ...base,
+    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,
+    borderWavelength: 0.5,
+    strokeWidth: 3.5,
+    doubleStroke: false,
+    strokeInk: 0.4,
+    maskBlob: 150,
+    maskOutputMin: 0.24,
+    maskOutputMax: 0.91,
+    maskOctaves: 2,
+    maskPosterize: 4,
+    maskSoftness: 1.75,
+    jitterX: 5,
+    jitterY: 5,
+    jitterRot: 1.4,
+    jitterScale: 0.08,
+    cornerSpread: 16,
+    cornerTravel: 13,
+    pressure: 0.4,
+    pressureMod: 0.8,
+    pooling: 1.5,
+    iconTravel: 1.75,
+    iconMaskScale: 3.8
+  }
+};
+var DEFAULT_SKETCH_STYLE = "marker";
+function hydrateSketchStyle(raw) {
+  const base2 = SKETCH_STYLES[DEFAULT_SKETCH_STYLE];
+  const stored = raw ?? {};
+  const out = { ...base2 };
+  for (const key of Object.keys(base2)) {
+    if (stored[key] !== void 0) out[key] = stored[key];
+  }
+  if (out.fillStyle === "none") out.fillStyle = base2.fillStyle;
+  convertTiledMask(stored, out);
+  convertCutToLevels(stored, out);
+  carryLevelsToOutput(stored, out);
+  halveSwingDials(stored, out);
+  convertCyclesToWavelength(stored, out);
+  convertIconTileToScale(stored, out);
+  restoreDerivedRetrace(stored, out);
+  return out;
+}
+function restoreDerivedRetrace(stored, out) {
+  if (stored.retraceOffset === void 0) {
+    out.retraceOffset = Number(Math.max(1.2, out.strokeWidth * 0.55).toFixed(2));
+  }
+}
+var SWING_DIALS = {
+  fillScale: "fillTravel",
+  strokeScale: "strokeTravel",
+  iconScale: "iconTravel",
+  cornerShift: "cornerTravel"
+};
+function convertCyclesToWavelength(stored, out) {
+  const cycles = stored.frequency;
+  if (typeof cycles === "number" && cycles > 0) out.wobble = Math.round(1 / cycles);
+  for (const [legacy, key] of [
+    ["borderFrequency", "borderWavelength"],
+    ["iconFrequency", "iconWavelength"]
+  ]) {
+    const multiple = stored[legacy];
+    if (typeof multiple === "number" && multiple > 0) {
+      out[key] = Number((1 / multiple).toFixed(3));
+    }
+  }
+  const layers = stored.octaves;
+  if (typeof layers === "number") out.roughness = Math.min(3, Math.max(1, layers));
+}
+function convertIconTileToScale(stored, out) {
+  const tile = stored.iconMaskTile;
+  if (typeof tile !== "number") return;
+  out.iconMaskScale = Math.min(5, Math.max(0.5, Number((tile / 90).toFixed(2))));
+}
+function halveSwingDials(stored, out) {
+  for (const [legacy, key] of Object.entries(SWING_DIALS)) {
+    const value = stored[legacy];
+    if (typeof value === "number") out[key] = value / 2;
+  }
+}
+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));
+  const soft = stored.maskSoftness;
+  if (typeof soft === "number") out.maskSoftness = Number((soft * scale / LEGACY_TILE).toFixed(1));
+}
+function convertCutToLevels(stored, out) {
+  const contrast = stored.maskContrast;
+  const coverage = stored.maskCoverage;
+  if (typeof contrast !== "number" || typeof coverage !== "number") return;
+  const veined = out.maskGrain === "turbulence";
+  const [lo, hi] = veined ? LEGACY_RANGE.turbulence : LEGACY_RANGE.fractal;
+  const pivot = veined ? 0.55 - 0.5 * coverage : 0.8 - 0.6 * coverage;
+  const level = (raw) => Math.min(1, Math.max(0, (raw - lo) / (hi - lo)));
+  out.maskOutputMin = Number(level(pivot - 0.5 / contrast).toFixed(2));
+  out.maskOutputMax = Number(Math.max(out.maskOutputMin + 0.02, level(pivot + 0.5 / contrast)).toFixed(2));
+}
+function carryLevelsToOutput(stored, out) {
+  if (typeof stored.maskLevelMin === "number") out.maskOutputMin = stored.maskLevelMin;
+  if (typeof stored.maskLevelMax === "number") out.maskOutputMax = stored.maskLevelMax;
+}
+var LEGACY_RANGE = { fractal: [0.24, 0.77], turbulence: [0.02, 0.6] };
+var LEGACY_TILE = 600;
+
 // vite-plugin/themes/normalizeTheme.ts
 function asObject(value) {
   return value && typeof value === "object" && !Array.isArray(value) ? value : null;
@@ -1995,12 +2329,12 @@ function normalizeTheme(raw, resolvers) {
   }
   const filled = { components: [], aliases: 0, orphans: 0 };
   for (const comp of resolvers.listComponentNames()) {
-    const base = asObject(resolvers.readComponentConfig(comp, "default"));
-    const baseAliases = base ? asObject(base.aliases) : null;
-    if (!base || !baseAliases) continue;
+    const base2 = asObject(resolvers.readComponentConfig(comp, "default"));
+    const baseAliases = base2 ? asObject(base2.aliases) : null;
+    if (!base2 || !baseAliases) continue;
     const entry = componentConfigs[comp];
     if (!entry) {
-      const { schemaVersion: _standaloneStamp, ...rest } = stripFileMarker(base);
+      const { schemaVersion: _standaloneStamp, ...rest } = stripFileMarker(base2);
       componentConfigs[comp] = structuredClone(rest);
       filled.components.push(comp);
       continue;
@@ -2016,6 +2350,8 @@ function normalizeTheme(raw, resolvers) {
       if (!(key in baseAliases)) filled.orphans++;
     }
   }
+  const embeddedSketchStyle = asObject(src.sketchStyle);
+  const sketchStyle = embeddedSketchStyle ? hydrateSketchStyle(embeddedSketchStyle) : void 0;
   return {
     theme: {
       name: asString(src.name, "Untitled"),
@@ -2024,7 +2360,8 @@ function normalizeTheme(raw, resolvers) {
       schemaVersion: THEME_SCHEMA_VERSION,
       colorsAndType,
       componentConfigs,
-      componentSchemaVersion: CURRENT_COMPONENT_SCHEMA_VERSION
+      componentSchemaVersion: CURRENT_COMPONENT_SCHEMA_VERSION,
+      ...sketchStyle ? { sketchStyle } : {}
     },
     dropped,
     migrated,
@@ -2086,7 +2423,7 @@ function resolveDataDirs(opts = {}) {
     colorsAndTypeDir: opts.colorsAndTypeDir ? import_path2.default.resolve(opts.colorsAndTypeDir) : fileConfig.colorsAndTypeDir ? import_path2.default.resolve(fileConfig.colorsAndTypeDir) : sub("colors-and-type"),
     componentConfigsDir: opts.componentConfigsDir ? import_path2.default.resolve(opts.componentConfigsDir) : fileConfig.componentConfigsDir ? import_path2.default.resolve(fileConfig.componentConfigsDir) : sub("component-configs"),
     themesDir: opts.themesDir ? import_path2.default.resolve(opts.themesDir) : fileConfig.themesDir ? import_path2.default.resolve(fileConfig.themesDir) : sub("themes"),
-    sketchPresetsDir: sub("sketch-presets"),
+    sketchStylesDir: sub("sketch-styles"),
     legacyManifestsDir: fileConfig.manifestsDir ? import_path2.default.resolve(fileConfig.manifestsDir) : void 0
   };
 }
@@ -2510,37 +2847,15 @@ 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)",
+  description: "Add the editorial type role (--font-editorial)",
   apply(css) {
-    const withStack = ensureScale(css, {
+    return 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
-    });
   }
 };
 
@@ -2593,6 +2908,84 @@ ${css.slice(at)}`;
   }
 };
 
+// vite-plugin/tokensCssMigrations/migrations/2026-08-27-editorial-size-steps.ts
+var AXES = ["font-family", "font-size", "font-weight", "line-height", "letter-spacing"];
+var BUNDLE2 = [
+  { name: "--editorial-md-font-family", value: "var(--font-editorial)" },
+  { name: "--editorial-md-font-size", value: "var(--font-size-md)" },
+  { name: "--editorial-md-font-weight", value: "var(--font-weight-normal)" },
+  { name: "--editorial-md-line-height", value: "var(--line-height-normal)" },
+  { name: "--editorial-md-letter-spacing", value: "var(--letter-spacing-normal)" },
+  { name: "--editorial-sm-font-family", value: "var(--font-editorial)" },
+  { name: "--editorial-sm-font-size", value: "var(--font-size-sm)" },
+  { name: "--editorial-sm-font-weight", value: "var(--font-weight-normal)" },
+  { name: "--editorial-sm-line-height", value: "var(--line-height-tight)" },
+  { name: "--editorial-sm-letter-spacing", value: "var(--letter-spacing-normal)" }
+];
+var tokensCssMigration_2026_08_27_editorialSizeSteps = {
+  id: "2026-08-27-editorial-size-steps",
+  kind: "breaking",
+  description: "Split the editorial bundle into --editorial-md-* and --editorial-sm-* steps",
+  apply(css) {
+    let out = css;
+    for (const axis of AXES) {
+      out = renameToken2(out, `--editorial-${axis}`, `--editorial-md-${axis}`);
+    }
+    return ensureScale(out, {
+      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-27-editorial-large-steps.ts
+var BUNDLE3 = [
+  { name: "--editorial-xl-font-family", value: "var(--font-editorial)" },
+  { name: "--editorial-xl-font-size", value: "var(--font-size-xl)" },
+  { name: "--editorial-xl-font-weight", value: "var(--font-weight-normal)" },
+  { name: "--editorial-xl-line-height", value: "var(--line-height-tighter)" },
+  { name: "--editorial-xl-letter-spacing", value: "var(--letter-spacing-normal)" },
+  { name: "--editorial-lg-font-family", value: "var(--font-editorial)" },
+  { name: "--editorial-lg-font-size", value: "var(--font-size-lg)" },
+  { name: "--editorial-lg-font-weight", value: "var(--font-weight-normal)" },
+  { name: "--editorial-lg-line-height", value: "var(--line-height-tight)" },
+  { name: "--editorial-lg-letter-spacing", value: "var(--letter-spacing-normal)" }
+];
+var tokensCssMigration_2026_08_27_editorialLargeSteps = {
+  id: "2026-08-27-editorial-large-steps",
+  kind: "additive",
+  description: "Add the --editorial-lg-* and --editorial-xl-* steps above the reading size",
+  apply(css) {
+    return ensureScale(css, {
+      sectionComment: "Editorial \u2014 the steps above the reading size",
+      anchorPrefixes: [
+        "--editorial-",
+        "--eyebrow-",
+        "--code-",
+        "--body-",
+        "--heading-",
+        "--letter-spacing-",
+        "--line-height-",
+        "--font-weight-",
+        "--font-size-",
+        "--font-"
+      ],
+      entries: BUNDLE3
+    });
+  }
+};
+
 // vite-plugin/tokensCssMigrations/index.ts
 var TOKENS_CSS_MIGRATIONS = [
   tokensCssMigration_2026_05_29_typographyScaleAdditions,
@@ -2605,7 +2998,9 @@ var TOKENS_CSS_MIGRATIONS = [
   tokensCssMigration_2026_08_19_oklchColorValues,
   tokensCssMigration_2026_08_25_editorialTypeRole,
   tokensCssMigration_2026_08_26_gradientStops,
-  tokensCssMigration_2026_08_27_backdropPolarity
+  tokensCssMigration_2026_08_27_backdropPolarity,
+  tokensCssMigration_2026_08_27_editorialSizeSteps,
+  tokensCssMigration_2026_08_27_editorialLargeSteps
 ];
 function runTokensCssMigrations(css) {
   return foldMigrations(css, () => true);
@@ -2706,7 +3101,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 SKETCH_STYLES_DIR = dataDirs.sketchStylesDir;
   const CSS_PATH = import_path4.default.resolve(opts.tokensCssPath);
   const GENERATED_CSS_PATH = opts.tokensGeneratedCssPath ? import_path4.default.resolve(opts.tokensGeneratedCssPath) : import_path4.default.join(dataDirs.dataDir, "tokens.generated.css");
   const FONTS_CSS_PATH = opts.fontsCssPath ? import_path4.default.resolve(opts.fontsCssPath) : import_path4.default.join(import_path4.default.dirname(CSS_PATH), "fonts.css");
@@ -2764,7 +3159,7 @@ function themeFileApi(opts) {
     dir: THEMES_DIR,
     packageDir: packageThemesDir
   });
-  const sketchPresetsResource = versionedFileResourceServer({ dir: SKETCH_PRESETS_DIR });
+  const sketchStylesResource = versionedFileResourceServer({ dir: SKETCH_STYLES_DIR });
   function ensureColorsAndTypeDir() {
     colorsAndTypeResource.ensureDir();
   }
@@ -3103,6 +3498,13 @@ ${lines.join("\n")}
       `[live-tokens] This project still uses the data layout from 0.47 and earlier: ${evidence}. Since 0.48 the whole-look theme files live in \`themes/\` and the colors and type live in \`colors-and-type/\`. Nothing in the data directory was written, the editor cannot save, and ${import_path4.default.basename(GENERATED_CSS_PATH)} is left exactly as it is. Run \`npx live-tokens migrate\` to move the directories and heal the tree, then restart the dev server.`
     );
   }
+  function warnOnUnmigratedSketchStyles(warn) {
+    const legacyDir = import_path4.default.join(dataDirs.dataDir, "sketch-presets");
+    if (!import_fs4.default.existsSync(legacyDir)) return;
+    warn(
+      `[live-tokens] Saved sketchstyles still live under the retired ${import_path4.default.basename(legacyDir)}/ directory name. Run \`npx live-tokens migrate\` to rename it to ${import_path4.default.basename(SKETCH_STYLES_DIR)}/; until then they will not show up in the Sketchstyle view.`
+    );
+  }
   const diskThemeResolvers = {
     readColorsAndType: (name) => colorsAndTypeResource.readJson(sanitizeFileName(name)),
     readComponentConfig: (comp, name) => readComponentConfig(comp, sanitizeFileName(name)),
@@ -3342,8 +3744,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 SKETCH_STYLES_ROUTE = `${API_BASE}/sketch-styles`;
+  const SKETCH_STYLE_BY_NAME_REGEX = new RegExp(`^${escapedBase}/sketch-styles/([a-z0-9\\-_]+)$`);
   const PRODUCTION_ROUTE = `${API_BASE}/production`;
   async function handleListColorsAndType(_ctx) {
     const files = colorsAndTypeResource.listNames().map((fileName) => {
@@ -3875,11 +4277,11 @@ ${lines.join("\n")}
       }
     });
   }
-  async function handleListSketchPresets({ res }) {
-    const files = sketchPresetsResource.listNames().map((fileName) => {
+  async function handleListSketchStyles({ res }) {
+    const files = sketchStylesResource.listNames().map((fileName) => {
       let data = null;
       try {
-        data = sketchPresetsResource.readJson(fileName);
+        data = sketchStylesResource.readJson(fileName);
       } catch {
       }
       return {
@@ -3890,12 +4292,12 @@ ${lines.join("\n")}
     });
     jsonResponse(res, 200, { files });
   }
-  async function handleSketchPresetByName({ params, req, res }) {
+  async function handleSketchStyleByName({ params, req, res }) {
     const [fileName] = params;
     if (rejectReservedName(res, fileName)) return;
-    const filePath = sketchPresetsResource.filePath(fileName);
+    const filePath = sketchStylesResource.filePath(fileName);
     if (req.method === "GET") {
-      const raw = sketchPresetsResource.readJson(fileName);
+      const raw = sketchStylesResource.readJson(fileName);
       if (!raw) {
         jsonResponse(res, 404, { error: "Not found" });
         return;
@@ -3906,7 +4308,7 @@ ${lines.join("\n")}
     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" });
+        jsonResponse(res, 400, { error: "A sketchstyle needs a settings object" });
         return;
       }
       body.name = String(body.name || fileName);
@@ -3919,7 +4321,7 @@ ${lines.join("\n")}
         }
       }
       if (!body.createdAt) body.createdAt = body.updatedAt;
-      sketchPresetsResource.ensureDir();
+      sketchStylesResource.ensureDir();
       import_fs4.default.writeFileSync(filePath, JSON.stringify(body, null, 2));
       jsonResponse(res, 200, { ok: true, fileName });
       return;
@@ -4006,14 +4408,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: "GET", pattern: SKETCH_STYLES_ROUTE, handler: handleListSketchStyles },
+    { method: "PUT", pattern: SKETCH_STYLES_ROUTE, handler: methodNotAllowed },
+    { method: "POST", pattern: SKETCH_STYLES_ROUTE, handler: methodNotAllowed },
+    { method: "DELETE", pattern: SKETCH_STYLES_ROUTE, handler: methodNotAllowed },
+    { method: "GET", pattern: SKETCH_STYLE_BY_NAME_REGEX, handler: handleSketchStyleByName },
+    { method: "PUT", pattern: SKETCH_STYLE_BY_NAME_REGEX, handler: handleSketchStyleByName },
+    { method: "DELETE", pattern: SKETCH_STYLE_BY_NAME_REGEX, handler: handleSketchStyleByName },
+    { method: "POST", pattern: SKETCH_STYLE_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 },
@@ -4053,6 +4455,7 @@ ${lines.join("\n")}
           productionPointerHeld,
           (msg) => server.config.logger.warn(msg)
         );
+        warnOnUnmigratedSketchStyles((msg) => server.config.logger.warn(msg));
       }
       server.middlewares.use(async (req, res, next) => {
         if (legacyLayout && req.method !== "GET" && (req.url ?? "").startsWith(API_BASE)) {

package/dist-plugin/index.d.cts

@@ -1,6 +1,6 @@
 import { Plugin } from 'vite';
 export { ComponentSource, MissingToken, RunResult, TOKENS_CSS_MIGRATIONS, TokensCssMigration, ValidateInput, runTokensCssMigrations, validateTokensCss } from './tokensCssMigrations/index.cjs';
-import './dataPaths-CRfD1LdA.cjs';
+import './dataPaths-DZUzVv8H.cjs';
 
 interface ThemeFileApiOptions {
     tokensCssPath: string;