@atomixstudio/mcp 1.0.29 → 1.0.30

package/dist/index.js

@@ -1288,10 +1288,447 @@ function getTokenStats(data) {
   };
 }
 
+// ../figma-tools/dist/index.js
+function figmaColorNameWithGroup(key) {
+  if (key.includes("/")) {
+    const [group2, ...rest] = key.split("/");
+    const name2 = rest.join("/").trim();
+    if (!name2) return key;
+    const groupDisplay2 = group2.charAt(0).toUpperCase() + group2.slice(1).toLowerCase();
+    return `${groupDisplay2} / ${name2}`;
+  }
+  const firstDash = key.indexOf("-");
+  if (firstDash <= 0) return key;
+  const group = key.slice(0, firstDash);
+  const name = key.slice(firstDash + 1);
+  const groupDisplay = group.charAt(0).toUpperCase() + group.slice(1).toLowerCase();
+  return `${groupDisplay} / ${name}`;
+}
+var FIGMA_SHADOW_ORDER = {
+  none: 0,
+  xs: 1,
+  sm: 2,
+  md: 3,
+  lg: 4,
+  xl: 5,
+  "2xl": 6,
+  focus: 7
+};
+function tokenValueToNumber(s) {
+  if (typeof s !== "string" || !s.trim()) return 0;
+  const t = s.trim();
+  if (t.endsWith("rem")) {
+    const n2 = parseFloat(t.replace(/rem$/, ""));
+    return Number.isFinite(n2) ? Math.round(n2 * 16) : 0;
+  }
+  if (t.endsWith("px")) {
+    const n2 = parseFloat(t.replace(/px$/, ""));
+    return Number.isFinite(n2) ? Math.round(n2) : 0;
+  }
+  const n = parseFloat(t);
+  return Number.isFinite(n) ? n : 0;
+}
+function parseBoxShadowToFigmaEffect(shadowStr) {
+  const s = shadowStr.trim();
+  if (!s || s.toLowerCase() === "none") return null;
+  const parsePx = (x) => typeof x === "string" ? parseFloat(x.replace(/px$/i, "")) : NaN;
+  const colorMatch = s.match(/(rgba?\s*\([^)]+\)|#[0-9A-Fa-f]{3,8})\s*$/i);
+  const colorStr = colorMatch ? colorMatch[1].trim() : void 0;
+  const rest = (colorMatch ? s.slice(0, colorMatch.index) : s).trim();
+  const parts = rest ? rest.split(/\s+/) : [];
+  if (parts.length < 3) return null;
+  const offsetX = parsePx(parts[0]);
+  const offsetY = parsePx(parts[1]);
+  const blur = parsePx(parts[2]);
+  let spread = 0;
+  if (parts.length >= 4) spread = parsePx(parts[3]);
+  let r = 0, g = 0, b = 0, a = 0.1;
+  if (colorStr) {
+    const rgbaMatch = colorStr.match(/rgba?\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+)\s*)?\)/i);
+    if (rgbaMatch) {
+      r = Number(rgbaMatch[1]) / 255;
+      g = Number(rgbaMatch[2]) / 255;
+      b = Number(rgbaMatch[3]) / 255;
+      a = rgbaMatch[4] != null ? parseFloat(rgbaMatch[4]) : 1;
+    } else {
+      const hexMatch = colorStr.match(/^#?([0-9A-Fa-f]{6})([0-9A-Fa-f]{2})?$/);
+      if (hexMatch) {
+        r = parseInt(hexMatch[1].slice(0, 2), 16) / 255;
+        g = parseInt(hexMatch[1].slice(2, 4), 16) / 255;
+        b = parseInt(hexMatch[1].slice(4, 6), 16) / 255;
+        a = hexMatch[2] ? parseInt(hexMatch[2], 16) / 255 : 0.1;
+      }
+    }
+  }
+  if (!Number.isFinite(offsetX) || !Number.isFinite(offsetY) || !Number.isFinite(blur)) return null;
+  return {
+    type: "DROP_SHADOW",
+    offset: { x: offsetX, y: offsetY },
+    radius: Math.max(0, blur),
+    spread: Number.isFinite(spread) ? spread : 0,
+    color: { r, g, b, a },
+    visible: true,
+    blendMode: "NORMAL"
+  };
+}
+function parseBoxShadowToFigmaEffects(shadowStr) {
+  const s = (shadowStr || "").trim();
+  if (!s || s.toLowerCase() === "none") return [];
+  const out = [];
+  const segments = s.split(/\s*,\s*/);
+  for (const seg of segments) {
+    const effect = parseBoxShadowToFigmaEffect(seg.trim());
+    if (effect) out.push(effect);
+  }
+  return out;
+}
+function colorTo8DigitHex(color) {
+  if (!color || typeof color !== "string") return null;
+  const s = color.trim();
+  const rgbaMatch = s.match(/rgba?\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+)\s*)?\)/i);
+  if (rgbaMatch) {
+    const r = Math.max(0, Math.min(255, parseInt(rgbaMatch[1], 10)));
+    const g = Math.max(0, Math.min(255, parseInt(rgbaMatch[2], 10)));
+    const b = Math.max(0, Math.min(255, parseInt(rgbaMatch[3], 10)));
+    const a = rgbaMatch[4] != null ? Math.max(0, Math.min(1, parseFloat(rgbaMatch[4]))) : 1;
+    const aByte = Math.round(a * 255);
+    const hex = "#" + [r, g, b, aByte].map((n) => n.toString(16).padStart(2, "0")).join("").toUpperCase();
+    return hex;
+  }
+  const hexMatch = s.match(/^#?([0-9A-Fa-f]{6})([0-9A-Fa-f]{2})?$/i);
+  if (hexMatch) {
+    const rgb = hexMatch[1];
+    const aa = hexMatch[2] ?? "FF";
+    return `#${rgb}${aa}`.toUpperCase();
+  }
+  return null;
+}
+function typesetKeyToFontFamilyRole(key) {
+  const prefix = (key.split("-")[0] ?? key).toLowerCase();
+  if (prefix === "display" || prefix.startsWith("display")) return "display";
+  if (prefix === "heading" || prefix.startsWith("heading")) return "heading";
+  if (prefix === "mono" || prefix.startsWith("mono")) return "mono";
+  if (prefix.startsWith("body")) return "body";
+  return "body";
+}
+function buildFigmaPayloadsFromDS(data) {
+  const tokens = data.tokens;
+  const colors = tokens?.colors;
+  const typography = tokens?.typography;
+  const modes = [];
+  const variables = [];
+  const paintStyles = [];
+  const hexRe = /^#?[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?$/;
+  const addedNames = /* @__PURE__ */ new Set();
+  if (colors?.modes) {
+    const light = colors.modes.light ?? {};
+    const dark = colors.modes.dark ?? {};
+    if (Object.keys(light).length > 0) modes.push("Light");
+    if (Object.keys(dark).length > 0 && !modes.includes("Dark")) modes.push("Dark");
+    if (modes.length === 0) modes.push("Light");
+    const orderedKeys = [...Object.keys(light)];
+    for (const k of Object.keys(dark)) {
+      if (!orderedKeys.includes(k)) orderedKeys.push(k);
+    }
+    for (const key of orderedKeys) {
+      const lightVal = light[key];
+      const darkVal = dark[key];
+      const lightHex = typeof lightVal === "string" ? colorTo8DigitHex(lightVal) ?? (hexRe.test(lightVal) ? lightVal : null) : null;
+      if (lightHex && hexRe.test(lightHex)) {
+        const figmaName = figmaColorNameWithGroup(key);
+        if (addedNames.has(figmaName)) continue;
+        addedNames.add(figmaName);
+        const darkHex = typeof darkVal === "string" ? colorTo8DigitHex(darkVal) ?? (hexRe.test(darkVal) ? darkVal : null) : null;
+        const values = {};
+        if (modes.includes("Light")) values.Light = lightHex;
+        if (modes.includes("Dark")) values.Dark = darkHex && hexRe.test(darkHex) ? darkHex : lightHex;
+        variables.push({ name: figmaName, values });
+        paintStyles.push({ name: figmaName, color: lightHex });
+      }
+    }
+  }
+  if (colors?.static?.brand && typeof colors.static.brand === "object") {
+    for (const [key, hex] of Object.entries(colors.static.brand)) {
+      if (typeof hex !== "string" || !hexRe.test(hex)) continue;
+      const figmaName = figmaColorNameWithGroup(`brand/${key}`);
+      if (addedNames.has(figmaName)) continue;
+      addedNames.add(figmaName);
+      paintStyles.push({ name: figmaName, color: hex });
+      if (modes.length === 0) modes.push("Light");
+      const values = {};
+      for (const m of modes) values[m] = hex;
+      variables.push({ name: figmaName, values });
+    }
+  }
+  const alphaScales = colors?.alphaScales;
+  if (alphaScales?.whiteAlpha && typeof alphaScales.whiteAlpha === "object") {
+    if (modes.length === 0) modes.push("Light");
+    for (const [step, value] of Object.entries(alphaScales.whiteAlpha)) {
+      if (typeof value !== "string") continue;
+      const hex = colorTo8DigitHex(value);
+      if (!hex || !hexRe.test(hex)) continue;
+      const figmaName = `WhiteAlpha / ${step}`;
+      if (addedNames.has(figmaName)) continue;
+      addedNames.add(figmaName);
+      const values = {};
+      for (const m of modes) values[m] = hex;
+      variables.push({ name: figmaName, values });
+      paintStyles.push({ name: figmaName, color: hex });
+    }
+  }
+  if (alphaScales?.blackAlpha && typeof alphaScales.blackAlpha === "object") {
+    if (modes.length === 0) modes.push("Light");
+    for (const [step, value] of Object.entries(alphaScales.blackAlpha)) {
+      if (typeof value !== "string") continue;
+      const hex = colorTo8DigitHex(value);
+      if (!hex || !hexRe.test(hex)) continue;
+      const figmaName = `BlackAlpha / ${step}`;
+      if (addedNames.has(figmaName)) continue;
+      addedNames.add(figmaName);
+      const values = {};
+      for (const m of modes) values[m] = hex;
+      variables.push({ name: figmaName, values });
+      paintStyles.push({ name: figmaName, color: hex });
+    }
+  }
+  if (variables.length === 0 && modes.length === 0) modes.push("Light");
+  const dsName = data.meta?.name;
+  const collectionPrefix = dsName ? `${dsName} ` : "";
+  const colorCollectionName = `${collectionPrefix}Colors`;
+  const textStyles = [];
+  const sizeToPx = (val, basePx = 16) => {
+    if (typeof val === "number") return Math.round(val);
+    const s = String(val).trim();
+    const pxMatch = s.match(/^([\d.]+)\s*px$/i);
+    if (pxMatch) return Math.round(parseFloat(pxMatch[1]));
+    const remMatch = s.match(/^([\d.]+)\s*rem$/i);
+    if (remMatch) return Math.round(parseFloat(remMatch[1]) * basePx);
+    const n = parseFloat(s);
+    if (Number.isFinite(n)) return n <= 0 ? basePx : n < 50 ? Math.round(n * basePx) : Math.round(n);
+    return basePx;
+  };
+  const letterSpacingToPx = (val, fontSizePx) => {
+    if (val === void 0 || val === null) return void 0;
+    if (typeof val === "number") return Math.round(val);
+    const s = String(val).trim();
+    const pxMatch = s.match(/^([-\d.]+)\s*px$/i);
+    if (pxMatch) return Math.round(parseFloat(pxMatch[1]));
+    const emMatch = s.match(/^([-\d.]+)\s*em$/i);
+    if (emMatch) return Math.round(parseFloat(emMatch[1]) * fontSizePx);
+    const n = parseFloat(s);
+    return Number.isFinite(n) ? Math.round(n) : void 0;
+  };
+  const firstFont = (obj) => {
+    if (typeof obj === "string") {
+      const primary = obj.split(",")[0].trim().replace(/^['"]|['"]$/g, "");
+      return primary || "Inter";
+    }
+    if (obj && typeof obj === "object" && !Array.isArray(obj)) {
+      const v = obj.body ?? obj.heading ?? obj.display ?? Object.values(obj)[0];
+      return firstFont(v);
+    }
+    return "Inter";
+  };
+  const toFontFamilyString = (val) => {
+    if (typeof val === "string") {
+      const s = val.trim().replace(/^["']|["']$/g, "");
+      return s || "Inter";
+    }
+    return firstFont(val);
+  };
+  const fontFamilyMap = typography?.fontFamily ?? {};
+  const defaultFontFamily = typography ? firstFont(typography.fontFamily ?? "Inter") : "Inter";
+  const fontSizeMap = typography?.fontSize;
+  const fontWeightMap = typography?.fontWeight;
+  const lineHeightMap = typography?.lineHeight;
+  const letterSpacingMap = typography?.letterSpacing;
+  const textTransformMap = typography?.textTransform;
+  const textDecorationMap = typography?.textDecoration;
+  if (fontSizeMap && typeof fontSizeMap === "object" && Object.keys(fontSizeMap).length > 0) {
+    for (const [key, sizeVal] of Object.entries(fontSizeMap)) {
+      const fontSize = sizeToPx(sizeVal);
+      if (fontSize <= 0) continue;
+      const role = typesetKeyToFontFamilyRole(key);
+      const fontFamily = toFontFamilyString(
+        fontFamilyMap[role] ?? fontFamilyMap.body ?? fontFamilyMap.heading ?? fontFamilyMap.display ?? defaultFontFamily
+      );
+      const lh = lineHeightMap && typeof lineHeightMap === "object" ? lineHeightMap[key] : void 0;
+      const weight = fontWeightMap && typeof fontWeightMap === "object" ? fontWeightMap[key] : void 0;
+      const fontWeight = weight != null ? String(weight) : "400";
+      const letterSpacingPx = letterSpacingToPx(
+        letterSpacingMap && typeof letterSpacingMap === "object" ? letterSpacingMap[key] : void 0,
+        fontSize
+      );
+      const textTransform = textTransformMap && typeof textTransformMap === "object" ? textTransformMap[key] : void 0;
+      const textDecoration = textDecorationMap && typeof textDecorationMap === "object" ? textDecorationMap[key] : void 0;
+      const namePart = key.replace(/-/g, " / ");
+      const style = {
+        name: namePart.startsWith("Typography") ? namePart : `Typography / ${namePart}`,
+        fontFamily,
+        fontWeight,
+        fontSize,
+        lineHeightUnit: "PERCENT",
+        letterSpacingUnit: "PIXELS",
+        ...letterSpacingPx !== void 0 && letterSpacingPx !== 0 ? { letterSpacingValue: letterSpacingPx } : {}
+      };
+      if (lh != null && typeof lh === "number" && lh > 0) {
+        style.lineHeightValue = lh >= 10 ? Math.round(lh / fontSize * 100) : Math.round(lh * 100);
+      } else {
+        style.lineHeightValue = 150;
+      }
+      if (textTransform === "uppercase") style.textCase = "UPPER";
+      else if (textTransform === "lowercase") style.textCase = "LOWER";
+      else if (textTransform === "capitalize") style.textCase = "TITLE";
+      else style.textCase = "ORIGINAL";
+      if (textDecoration === "underline") style.textDecoration = "UNDERLINE";
+      else style.textDecoration = "NONE";
+      textStyles.push(style);
+    }
+  }
+  const textStylesMap = typography?.textStyles;
+  if (textStyles.length === 0 && textStylesMap && typeof textStylesMap === "object") {
+    for (const [styleName, style] of Object.entries(textStylesMap)) {
+      if (!style || typeof style !== "object") continue;
+      const fontSize = sizeToPx(style.fontSize ?? "1rem");
+      const lhStr = style.lineHeight;
+      const lineHeightUnitless = lhStr != null ? lhStr.endsWith("%") ? parseFloat(lhStr) / 100 : sizeToPx(lhStr) / fontSize : 1.5;
+      const payload = {
+        name: styleName.startsWith("Typography") ? styleName : `Typography / ${styleName.replace(/\//g, " / ")}`,
+        fontFamily: defaultFontFamily,
+        fontWeight: String(style.fontWeight ?? "400"),
+        fontSize,
+        lineHeightUnit: "PERCENT",
+        lineHeightValue: Math.round((Number.isFinite(lineHeightUnitless) ? lineHeightUnitless : 1.5) * 100),
+        letterSpacingUnit: "PIXELS",
+        textCase: "ORIGINAL",
+        textDecoration: "NONE"
+      };
+      textStyles.push(payload);
+    }
+  }
+  textStyles.sort((a, b) => {
+    if (a.fontSize !== b.fontSize) return a.fontSize - b.fontSize;
+    return (a.name || "").localeCompare(b.name || "");
+  });
+  const numberVariableCollections = [];
+  const spacing = tokens?.spacing;
+  if (spacing?.scale && typeof spacing.scale === "object") {
+    const vars = [];
+    for (const [key, val] of Object.entries(spacing.scale)) {
+      const n = tokenValueToNumber(val);
+      if (n >= 0) vars.push({ name: `Spacing / ${key}`, value: n });
+    }
+    vars.sort((a, b) => a.value - b.value);
+    if (vars.length > 0)
+      numberVariableCollections.push({
+        collectionName: `${collectionPrefix}Spacing`,
+        categoryKey: "Spacing",
+        variables: vars,
+        scopes: ["GAP"]
+      });
+  }
+  const radius = tokens?.radius;
+  if (radius?.scale && typeof radius.scale === "object") {
+    const vars = [];
+    for (const [key, val] of Object.entries(radius.scale)) {
+      const n = tokenValueToNumber(val);
+      if (n >= 0) vars.push({ name: `Radius / ${key}`, value: n });
+    }
+    vars.sort((a, b) => a.value - b.value);
+    if (vars.length > 0)
+      numberVariableCollections.push({
+        collectionName: `${collectionPrefix}Radius`,
+        categoryKey: "Radius",
+        variables: vars,
+        scopes: ["CORNER_RADIUS"]
+      });
+  }
+  const borders = tokens?.borders;
+  if (borders?.width && typeof borders.width === "object") {
+    const vars = [];
+    for (const [key, val] of Object.entries(borders.width)) {
+      const n = tokenValueToNumber(val);
+      if (n >= 0) vars.push({ name: `Borders / ${key}`, value: n });
+    }
+    vars.sort((a, b) => a.value - b.value);
+    if (vars.length > 0)
+      numberVariableCollections.push({
+        collectionName: `${collectionPrefix}Borders`,
+        categoryKey: "Borders",
+        variables: vars,
+        scopes: ["STROKE_FLOAT"]
+      });
+  }
+  const sizing = tokens?.sizing;
+  const sizingVariables = [];
+  if (sizing?.height && typeof sizing.height === "object") {
+    for (const [key, val] of Object.entries(sizing.height)) {
+      const n = tokenValueToNumber(val);
+      if (n >= 0) sizingVariables.push({ name: `Height / ${key}`, value: n });
+    }
+  }
+  if (sizing?.icon && typeof sizing.icon === "object") {
+    for (const [key, val] of Object.entries(sizing.icon)) {
+      const n = tokenValueToNumber(val);
+      if (n >= 0) sizingVariables.push({ name: `Icon / ${key}`, value: n });
+    }
+  }
+  sizingVariables.sort((a, b) => a.value - b.value);
+  if (sizingVariables.length > 0) {
+    numberVariableCollections.push({
+      collectionName: `${collectionPrefix}Sizing`,
+      categoryKey: "Sizing",
+      variables: sizingVariables,
+      scopes: ["WIDTH_HEIGHT"]
+    });
+  }
+  const layout = tokens?.layout;
+  if (layout?.breakpoint && typeof layout.breakpoint === "object") {
+    const vars = [];
+    for (const [key, val] of Object.entries(layout.breakpoint)) {
+      const n = tokenValueToNumber(val);
+      if (n >= 0) vars.push({ name: `Breakpoint / ${key}`, value: n });
+    }
+    vars.sort((a, b) => a.value - b.value);
+    if (vars.length > 0)
+      numberVariableCollections.push({
+        collectionName: `${collectionPrefix}Layout`,
+        categoryKey: "Layout",
+        variables: vars,
+        scopes: ["WIDTH_HEIGHT"]
+      });
+  }
+  const effectStyles = [];
+  const shadows = tokens?.shadows;
+  if (shadows?.elevation && typeof shadows.elevation === "object") {
+    for (const [key, val] of Object.entries(shadows.elevation)) {
+      if (typeof val !== "string") continue;
+      const effects = parseBoxShadowToFigmaEffects(val);
+      if (effects.length > 0) effectStyles.push({ name: `Shadow / ${key}`, effects });
+    }
+  }
+  if (shadows?.focus && typeof shadows.focus === "string") {
+    const effects = parseBoxShadowToFigmaEffects(shadows.focus);
+    if (effects.length > 0) effectStyles.push({ name: "Shadow / focus", effects });
+  }
+  effectStyles.sort((a, b) => {
+    const nameA = a.name.startsWith("Shadow / ") ? a.name.slice(9) : a.name;
+    const nameB = b.name.startsWith("Shadow / ") ? b.name.slice(9) : b.name;
+    const orderA = FIGMA_SHADOW_ORDER[nameA] ?? 100;
+    const orderB = FIGMA_SHADOW_ORDER[nameB] ?? 100;
+    if (orderA !== orderB) return orderA - orderB;
+    return nameA.localeCompare(nameB);
+  });
+  return {
+    colorVariables: { collectionName: colorCollectionName, modes, variables },
+    paintStyles,
+    textStyles,
+    numberVariableCollections,
+    effectStyles
+  };
+}
+
 // src/index.ts
-import {
-  buildFigmaPayloadsFromDS
-} from "@atomix/figma_tools";
 import * as path2 from "path";
 import * as fs2 from "fs";
 import { execSync } from "child_process";
@@ -1573,7 +2010,7 @@ async function fetchDesignSystemForMCP(forceRefresh = false) {
   return result.data;
 }
 var TOKEN_CATEGORIES = ["colors", "typography", "spacing", "sizing", "shadows", "radius", "borders", "motion", "zIndex"];
-function typesetKeyToFontFamilyRole(key) {
+function typesetKeyToFontFamilyRole2(key) {
   const prefix = (key.split("-")[0] ?? key).toLowerCase();
   if (prefix === "display" || prefix.startsWith("display")) return "display";
   if (prefix === "heading" || prefix.startsWith("heading")) return "heading";
@@ -1593,7 +2030,7 @@ function buildTypesetsList(typography, cssPrefix = "atmx") {
   const p = cssPrefix ? `${cssPrefix}-` : "";
   const typesets = [];
   for (const key of Object.keys(fontSize)) {
-    const role = typesetKeyToFontFamilyRole(key);
+    const role = typesetKeyToFontFamilyRole2(key);
     const familyName = fontFamily[role] ?? fontFamily.body;
     const fontFamilyVarName = familyName ? `--${p}typography-font-family-${role}` : void 0;
     const fontFamilyVar = familyName ? `var(${fontFamilyVarName})` : "";
@@ -1619,7 +2056,7 @@ function buildTypesetsList(typography, cssPrefix = "atmx") {
 var server = new Server(
   {
     name: "atomix-mcp-user",
-    version: "1.0.28"
+    version: "1.0.29"
   },
   {
     capabilities: {