@motion-proto/live-tokens 0.55.1 → 0.57.0

package/dist-plugin/fontPairing/index.js

@@ -0,0 +1,321 @@
+import {
+  readLiveTokensConfig,
+  resolveDataDirs
+} from "../chunk-Y5CNFSSV.js";
+
+// src/editor/core/fonts/fontParse.ts
+function parseGoogleFontsUrl(url2) {
+  let u;
+  try {
+    u = new URL(url2);
+  } catch {
+    return null;
+  }
+  if (!u.hostname.includes("fonts.googleapis.com")) return null;
+  const familyParams = u.searchParams.getAll("family");
+  if (familyParams.length === 0) return null;
+  return familyParams.map((raw) => {
+    const [rawName, spec] = raw.split(":");
+    const name = decodeURIComponent(rawName).replace(/\+/g, " ");
+    const parsed = { name };
+    if (spec) {
+      const axisMatch = spec.match(/(?:ital,)?wght@([^&]+)/);
+      const italics = spec.startsWith("ital,");
+      if (italics) parsed.italics = true;
+      if (axisMatch) {
+        const tokens = axisMatch[1].split(";");
+        const weights = /* @__PURE__ */ new Set();
+        for (const tok of tokens) {
+          const parts = tok.split(",");
+          const wghtStr = parts.length === 2 ? parts[1] : parts[0];
+          if (wghtStr.includes("..")) {
+            const [lo, hi] = wghtStr.split("..").map((n) => parseInt(n, 10));
+            if (!isNaN(lo) && !isNaN(hi)) {
+              for (let w = lo; w <= hi; w += 100) weights.add(w);
+            }
+          } else {
+            const w = parseInt(wghtStr, 10);
+            if (!isNaN(w)) weights.add(w);
+          }
+        }
+        if (weights.size > 0) parsed.weights = [...weights].sort((a, b) => a - b);
+      }
+    }
+    return parsed;
+  });
+}
+function parseFontFaceText(css) {
+  const rules = [...css.matchAll(/@font-face\s*\{([^}]*)\}/g)];
+  const byName = /* @__PURE__ */ new Map();
+  for (const [, body] of rules) {
+    const nameMatch = body.match(/font-family\s*:\s*([^;]+);/i);
+    if (!nameMatch) continue;
+    const name = nameMatch[1].trim().replace(/^['"]|['"]$/g, "");
+    const weightMatch = body.match(/font-weight\s*:\s*([^;]+);/i);
+    const styleMatch = body.match(/font-style\s*:\s*([^;]+);/i);
+    const entry = byName.get(name) ?? { weights: /* @__PURE__ */ new Set(), italics: false };
+    if (weightMatch) {
+      const val = weightMatch[1].trim();
+      const rangeParts = val.split(/\s+/).map((s) => parseInt(s, 10)).filter((n) => !isNaN(n));
+      if (rangeParts.length === 2) {
+        const [lo, hi] = rangeParts;
+        for (let w = lo; w <= hi; w += 100) entry.weights.add(w);
+      } else if (rangeParts.length === 1) {
+        entry.weights.add(rangeParts[0]);
+      }
+    }
+    if (styleMatch && /italic|oblique/i.test(styleMatch[1])) entry.italics = true;
+    byName.set(name, entry);
+  }
+  return [...byName.entries()].map(([name, e]) => ({
+    name,
+    ...e.weights.size > 0 ? { weights: [...e.weights].sort((a, b) => a - b) } : {},
+    ...e.italics ? { italics: true } : {}
+  }));
+}
+
+// src/editor/core/fonts/fontPairing.ts
+var PAIRING = ["--font-display", "--font-sans"];
+function familyIndex(sources) {
+  const familyById = /* @__PURE__ */ new Map();
+  for (const source of sources) {
+    for (const family of source.families) familyById.set(family.id, family);
+  }
+  return familyById;
+}
+function resolvedFaceName(stack, familyById) {
+  for (const slot of stack?.slots ?? []) {
+    if (slot.kind === "project") {
+      const family = familyById.get(slot.familyId);
+      if (family) return family.name;
+      continue;
+    }
+    if (slot.kind === "system") return "System";
+    return slot.value;
+  }
+  return null;
+}
+function fontPairingLabel(stacks, sources) {
+  const familyById = familyIndex(sources);
+  return PAIRING.map((variable) => resolvedFaceName(stacks.find((s) => s.variable === variable), familyById)).filter((label) => label !== null).join(" / ");
+}
+
+// src/editor/core/fonts/applyFontPairing.ts
+var SLOT_ORDER = ["display", "body", "serif", "mono", "editorial"];
+var SLOT_VARIABLES = {
+  display: "--font-display",
+  body: "--font-sans",
+  serif: "--font-serif",
+  mono: "--font-mono",
+  editorial: "--font-editorial"
+};
+function slugifyFamily(name) {
+  return name.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+}
+function weightsFor(face) {
+  if (face.weights) {
+    return { weights: face.weights, ...face.italics ? { italics: true } : {} };
+  }
+  const parsed = parseGoogleFontsUrl(face.url)?.[0];
+  return {
+    ...parsed?.weights ? { weights: parsed.weights } : {},
+    ...face.italics || parsed?.italics ? { italics: true } : {}
+  };
+}
+function sourceFor(face, idPrefix) {
+  const id = `${idPrefix}${slugifyFamily(face.name)}`;
+  return {
+    id,
+    kind: "google",
+    url: face.url,
+    label: "Google Fonts",
+    families: [
+      {
+        id: `${id}:${slugifyFamily(face.name)}`,
+        name: face.name,
+        cssName: `"${face.name}"`,
+        ...weightsFor(face)
+      }
+    ]
+  };
+}
+function rewriteStack(stacks, variable, familyId) {
+  const stack = stacks.find((s) => s.variable === variable);
+  if (!stack) throw new Error(`colors and type have no ${variable} stack to rewrite`);
+  return stacks.map(
+    (s) => s === stack ? { ...s, slots: [{ kind: "project", familyId }, ...s.slots.filter((slot) => slot.kind !== "project")] } : s
+  );
+}
+function applyFontPairing(colorsAndType, pairing, { idPrefix = "src_google_" } = {}) {
+  const slots = SLOT_ORDER.filter((slot) => pairing[slot]);
+  if (slots.length === 0) throw new Error("pairing names no slot to change");
+  const before = colorsAndType.fontStacks ?? [];
+  const beforeSources = colorsAndType.fontSources ?? [];
+  const beforeIndex = familyIndex(beforeSources);
+  const stamped = slots.map((slot) => ({ slot, source: sourceFor(pairing[slot], idPrefix) }));
+  const stampedIds = new Set(stamped.map((s) => s.source.id));
+  let stacks = before;
+  const changes = [];
+  for (const { slot, source } of stamped) {
+    const variable = SLOT_VARIABLES[slot];
+    const from = resolvedFaceName(before.find((s) => s.variable === variable), beforeIndex);
+    stacks = rewriteStack(stacks, variable, source.families[0].id);
+    changes.push({ slot, variable, from, to: source.families[0].name });
+  }
+  const referenced = new Set(
+    stacks.flatMap((s) => s.slots).filter((s) => s.kind === "project").map((s) => s.familyId)
+  );
+  const kept = [...beforeSources.filter((s) => !stampedIds.has(s.id)), ...stamped.map((s) => s.source)];
+  const sources = kept.filter((s) => s.families.some((f) => referenced.has(f.id)));
+  const dropped = kept.filter((s) => !sources.includes(s)).map((s) => ({ id: s.id, names: s.families.map((f) => f.name) }));
+  const next = { ...colorsAndType, fontSources: sources, fontStacks: stacks };
+  const changed = JSON.stringify([beforeSources, before]) !== JSON.stringify([sources, stacks]);
+  return {
+    colorsAndType: next,
+    report: { changes: changes.filter((c) => c.from !== c.to), dropped, changed }
+  };
+}
+
+// src/editor/core/fonts/googleFontsUrl.ts
+var LADDER = [100, 200, 300, 400, 500, 600, 700, 800, 900];
+function familyParam(name) {
+  return name.trim().replace(/\s+/g, "+");
+}
+function url(name, spec) {
+  const family = spec ? `${familyParam(name)}:${spec}` : familyParam(name);
+  return `https://fonts.googleapis.com/css2?family=${family}&display=swap`;
+}
+function discoveryUrl(name) {
+  const pairs = [
+    ...LADDER.map((w) => `0,${w}`),
+    ...LADDER.map((w) => `1,${w}`)
+  ];
+  return url(name, `ital,wght@${pairs.join(";")}`);
+}
+function isContiguous(weights) {
+  return weights.length > 1 && weights.every((w, i) => i === 0 || w - weights[i - 1] === 100);
+}
+function persistUrlFor(name, weights, italics) {
+  if (weights.length === 0 || weights.length === 1 && weights[0] === 400 && !italics) {
+    return url(name);
+  }
+  if (isContiguous(weights)) {
+    const range = `${weights[0]}..${weights[weights.length - 1]}`;
+    return url(name, italics ? `ital,wght@0,${range};1,${range}` : `wght@${range}`);
+  }
+  const spec = italics ? `ital,wght@${[...weights.map((w) => `0,${w}`), ...weights.map((w) => `1,${w}`)].join(";")}` : `wght@${weights.join(";")}`;
+  return url(name, spec);
+}
+function censusFrom(css, requested) {
+  const families = parseFontFaceText(css);
+  if (families.length === 0) {
+    throw new Error(`Google Fonts returned no @font-face rules for "${requested}".`);
+  }
+  const family = families[0];
+  return {
+    name: family.name,
+    weights: family.weights ?? [],
+    italics: family.italics === true
+  };
+}
+async function resolveGoogleFont(name, fetcher) {
+  const probeUrl = discoveryUrl(name);
+  const probe = await fetcher(probeUrl);
+  if (!probe.ok) {
+    throw new Error(
+      `"${name}" is not on Google Fonts (the API answered ${probe.status}). Check the spelling against fonts.google.com.`
+    );
+  }
+  const census = censusFrom(await probe.text(), name);
+  const candidates = [persistUrlFor(census.name, census.weights, census.italics)];
+  const enumerated = census.weights.length > 0 ? url(
+    census.name,
+    census.italics ? `ital,wght@${[...census.weights.map((w) => `0,${w}`), ...census.weights.map((w) => `1,${w}`)].join(";")}` : `wght@${census.weights.join(";")}`
+  ) : null;
+  if (enumerated && !candidates.includes(enumerated)) candidates.push(enumerated);
+  const bare = url(census.name);
+  if (!candidates.includes(bare)) candidates.push(bare);
+  for (const candidate of candidates) {
+    const res = await fetcher(candidate);
+    if (!res.ok) continue;
+    const served = censusFrom(await res.text(), census.name);
+    return {
+      name: census.name,
+      url: candidate,
+      weights: served.weights,
+      italics: served.italics,
+      probeUrl
+    };
+  }
+  throw new Error(`Could not build a working Google Fonts URL for "${census.name}".`);
+}
+
+// src/editor/core/fonts/fontWeightAvailability.ts
+function inferFontFamilyVariable(weightVariable) {
+  return weightVariable.endsWith("-font-weight") ? `${weightVariable.slice(0, -"-font-weight".length)}-font-family` : null;
+}
+
+// src/editor/core/fonts/weightCoverage.ts
+var STACK_REF = /var\(\s*(--font-(?:display|sans|serif|mono))\s*\)/;
+var VAR_REF = /var\(\s*(--[a-z0-9-]+)/i;
+function declarations(css) {
+  const decls = /* @__PURE__ */ new Map();
+  for (const [, name, value] of css.matchAll(/(--[a-z0-9-]+)\s*:\s*([^;{}]+);/gi)) {
+    decls.set(name, value.trim());
+  }
+  return decls;
+}
+function requiredWeights(tokensCss, overrides = {}) {
+  const decls = declarations(tokensCss);
+  for (const [name, value] of Object.entries(overrides)) decls.set(name, String(value).trim());
+  const scale = /* @__PURE__ */ new Map();
+  for (const [name, value] of decls) {
+    if (name.startsWith("--font-weight-") && /^\d+$/.test(value)) scale.set(name, Number(value));
+  }
+  const seen = /* @__PURE__ */ new Set();
+  const out = [];
+  for (const [name, value] of decls) {
+    const familyVariable = inferFontFamilyVariable(name);
+    if (!familyVariable) continue;
+    const stack = decls.get(familyVariable)?.match(STACK_REF)?.[1];
+    if (!stack) continue;
+    const weight = /^\d+$/.test(value) ? Number(value) : scale.get(value.match(VAR_REF)?.[1] ?? "");
+    if (weight === void 0) continue;
+    const key = `${stack}:${weight}`;
+    if (seen.has(key)) continue;
+    seen.add(key);
+    out.push({ variable: name, stack, weight });
+  }
+  return out;
+}
+function weightCoverage(requirements, faces) {
+  const out = [];
+  for (const [stack, face] of Object.entries(faces)) {
+    const required = [...new Set(requirements.filter((r) => r.stack === stack).map((r) => r.weight))].sort(
+      (a, b) => a - b
+    );
+    out.push({
+      stack,
+      family: face.name,
+      required,
+      available: face.weights,
+      missing: required.filter((w) => !face.weights.includes(w)),
+      italics: face.italics
+    });
+  }
+  return out;
+}
+export {
+  SLOT_ORDER,
+  SLOT_VARIABLES,
+  applyFontPairing,
+  discoveryUrl,
+  fontPairingLabel,
+  persistUrlFor,
+  readLiveTokensConfig,
+  requiredWeights,
+  resolveDataDirs,
+  resolveGoogleFont,
+  slugifyFamily,
+  weightCoverage
+};

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,6 +1,6 @@
-import { F as FontSource, c as FontStack, G as GradientDiskToken, O as Oklch, H as HarmonyMode, a as ColorsAndType } from '../index-DpTIRZ2H.cjs';
-export { C as CURRENT_COMPONENT_SCHEMA_VERSION } from '../index-DpTIRZ2H.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';
 
 /**
  * Pure palette → CSS-variable derivation.

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

@@ -1,6 +1,6 @@
-import { F as FontSource, c as FontStack, G as GradientDiskToken, O as Oklch, H as HarmonyMode, a as ColorsAndType } from '../index-DpTIRZ2H.js';
-export { C as CURRENT_COMPONENT_SCHEMA_VERSION } from '../index-DpTIRZ2H.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';
 
 /**
  * Pure palette → CSS-variable derivation.

package/dist-plugin/generateColorsAndType/index.js

@@ -1,6 +1,7 @@
 import {
   DEFAULT_PALETTE_LIGHTNESS,
   DEFAULT_PALETTE_SATURATION,
+  DIRECTION_ANGLES,
   PALETTE_SPECS,
   PALETTE_STEPS,
   SCALES,
@@ -14,7 +15,7 @@ import {
   scaleToCssVar,
   setCurveAnchor,
   syncBaseAnchor
-} from "../chunk-PB2JTK2H.js";
+} from "../chunk-LW4SR7AZ.js";
 import {
   CURRENT_COLORS_AND_TYPE_SCHEMA_VERSION,
   CURRENT_COMPONENT_SCHEMA_VERSION
@@ -25,11 +26,11 @@ import {
   hexToOklch,
   oklchToHex,
   oklchToHexClamped
-} from "../chunk-YR6GPXW2.js";
+} from "../chunk-XWXIMTWZ.js";
 import {
   readLiveTokensConfig,
   resolveDataDirs
-} from "../chunk-D3ZVKOR4.js";
+} from "../chunk-Y5CNFSSV.js";
 
 // src/editor/core/store/editorCore.ts
 import { writable, derived, get } from "svelte/store";
@@ -50,7 +51,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" }
@@ -68,7 +70,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" }

package/dist-plugin/index-4N-Orzzi.d.cts

@@ -0,0 +1,3 @@
+declare const CURRENT_COMPONENT_SCHEMA_VERSION: number;
+
+export { CURRENT_COMPONENT_SCHEMA_VERSION as C };

package/dist-plugin/index-4N-Orzzi.d.ts

@@ -0,0 +1,3 @@
+declare const CURRENT_COMPONENT_SCHEMA_VERSION: number;
+
+export { CURRENT_COMPONENT_SCHEMA_VERSION as C };