@atomixstudio/mcp 1.0.23 → 1.0.25

package/dist/index.js

@@ -1480,15 +1480,6 @@ function figmaColorNameWithGroup(key) {
   const groupDisplay = group.charAt(0).toUpperCase() + group.slice(1).toLowerCase();
   return `${groupDisplay} / ${name}`;
 }
-var FIGMA_COLOR_GROUP_ORDER = {
-  background: 0,
-  text: 1,
-  border: 2,
-  icon: 3,
-  brand: 4,
-  action: 5,
-  feedback: 6
-};
 var FIGMA_SHADOW_ORDER = {
   none: 0,
   xs: 1,
@@ -1582,8 +1573,11 @@ function buildFigmaPayloadsFromDS(data) {
     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 allKeys = /* @__PURE__ */ new Set([...Object.keys(light), ...Object.keys(dark)]);
-    for (const key of allKeys) {
+    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 lightHex = light[key];
       const darkHex = dark[key];
       if (typeof lightHex === "string" && hexRe.test(lightHex)) {
@@ -1612,26 +1606,8 @@ function buildFigmaPayloadsFromDS(data) {
     }
   }
   if (variables.length === 0 && modes.length === 0) modes.push("Light");
-  const colorSortKey = (figmaName) => {
-    const slash = figmaName.indexOf(" / ");
-    const group = slash >= 0 ? figmaName.slice(0, slash).toLowerCase() : "";
-    const name = slash >= 0 ? figmaName.slice(slash + 3) : figmaName;
-    const order = FIGMA_COLOR_GROUP_ORDER[group] ?? 999;
-    return [order, name];
-  };
-  variables.sort((a, b) => {
-    const [oA, nA] = colorSortKey(a.name);
-    const [oB, nB] = colorSortKey(b.name);
-    if (oA !== oB) return oA - oB;
-    return nA.localeCompare(nB);
-  });
-  paintStyles.sort((a, b) => {
-    const [oA, nA] = colorSortKey(a.name);
-    const [oB, nB] = colorSortKey(b.name);
-    if (oA !== oB) return oA - oB;
-    return nA.localeCompare(nB);
-  });
-  const collectionName = data.meta?.name ? `${data.meta.name} Colors` : "Atomix Colors";
+  const dsName = data.meta?.name;
+  const collectionName = dsName ? `${dsName} Foundations` : "Foundations";
   const textStyles = [];
   const sizeToPx = (val, basePx = 16) => {
     if (typeof val === "number") return Math.round(val);
@@ -1735,7 +1711,6 @@ function buildFigmaPayloadsFromDS(data) {
     if (a.fontSize !== b.fontSize) return a.fontSize - b.fontSize;
     return (a.name || "").localeCompare(b.name || "");
   });
-  const dsName = data.meta?.name ?? "Atomix";
   const numberVariableCollections = [];
   const spacing = tokens?.spacing;
   if (spacing?.scale && typeof spacing.scale === "object") {
@@ -1745,7 +1720,7 @@ function buildFigmaPayloadsFromDS(data) {
       if (n >= 0) variables2.push({ name: key, value: n });
     }
     variables2.sort((a, b) => a.value - b.value);
-    if (variables2.length > 0) numberVariableCollections.push({ collectionName: `${dsName} Spacing`, categoryKey: "Spacing", variables: variables2, scopes: ["GAP"] });
+    if (variables2.length > 0) numberVariableCollections.push({ collectionName, categoryKey: "Spacing", variables: variables2, scopes: ["GAP"] });
   }
   const radius = tokens?.radius;
   if (radius?.scale && typeof radius.scale === "object") {
@@ -1755,7 +1730,7 @@ function buildFigmaPayloadsFromDS(data) {
       if (n >= 0) variables2.push({ name: key, value: n });
     }
     variables2.sort((a, b) => a.value - b.value);
-    if (variables2.length > 0) numberVariableCollections.push({ collectionName: `${dsName} Radius`, categoryKey: "Radius", variables: variables2, scopes: ["CORNER_RADIUS"] });
+    if (variables2.length > 0) numberVariableCollections.push({ collectionName, categoryKey: "Radius", variables: variables2, scopes: ["CORNER_RADIUS"] });
   }
   const borders = tokens?.borders;
   if (borders?.width && typeof borders.width === "object") {
@@ -1765,7 +1740,7 @@ function buildFigmaPayloadsFromDS(data) {
       if (n >= 0) variables2.push({ name: key, value: n });
     }
     variables2.sort((a, b) => a.value - b.value);
-    if (variables2.length > 0) numberVariableCollections.push({ collectionName: `${dsName} Borders`, categoryKey: "Borders", variables: variables2, scopes: ["STROKE_FLOAT"] });
+    if (variables2.length > 0) numberVariableCollections.push({ collectionName, categoryKey: "Borders", variables: variables2, scopes: ["STROKE_FLOAT"] });
   }
   const sizing = tokens?.sizing;
   if (sizing?.height && typeof sizing.height === "object") {
@@ -1775,7 +1750,7 @@ function buildFigmaPayloadsFromDS(data) {
       if (n >= 0) variables2.push({ name: key, value: n });
     }
     variables2.sort((a, b) => a.value - b.value);
-    if (variables2.length > 0) numberVariableCollections.push({ collectionName: `${dsName} Height`, categoryKey: "Height", variables: variables2, scopes: ["WIDTH_HEIGHT"] });
+    if (variables2.length > 0) numberVariableCollections.push({ collectionName, categoryKey: "Height", variables: variables2, scopes: ["WIDTH_HEIGHT"] });
   }
   if (sizing?.icon && typeof sizing.icon === "object") {
     const variables2 = [];
@@ -1784,7 +1759,7 @@ function buildFigmaPayloadsFromDS(data) {
       if (n >= 0) variables2.push({ name: key, value: n });
     }
     variables2.sort((a, b) => a.value - b.value);
-    if (variables2.length > 0) numberVariableCollections.push({ collectionName: `${dsName} Icon`, categoryKey: "Icon", variables: variables2, scopes: ["WIDTH_HEIGHT"] });
+    if (variables2.length > 0) numberVariableCollections.push({ collectionName, categoryKey: "Icon", variables: variables2, scopes: ["WIDTH_HEIGHT"] });
   }
   const layout = tokens?.layout;
   if (layout?.breakpoint && typeof layout.breakpoint === "object") {
@@ -1794,7 +1769,7 @@ function buildFigmaPayloadsFromDS(data) {
       if (n >= 0) variables2.push({ name: key, value: n });
     }
     variables2.sort((a, b) => a.value - b.value);
-    if (variables2.length > 0) numberVariableCollections.push({ collectionName: `${dsName} Breakpoint`, categoryKey: "Breakpoint", variables: variables2, scopes: ["WIDTH_HEIGHT"] });
+    if (variables2.length > 0) numberVariableCollections.push({ collectionName, categoryKey: "Breakpoint", variables: variables2, scopes: ["WIDTH_HEIGHT"] });
   }
   const effectStyles = [];
   const shadows = tokens?.shadows;
@@ -1909,6 +1884,43 @@ ${changes.summary}`);
     }
   }
 }
+function validateTokenFileAfterWrite(outputPath, format, expectedMinVariables) {
+  if (!fs2.existsSync(outputPath)) {
+    return { path: outputPath, status: "FAIL", detail: "File not found after write." };
+  }
+  const content = fs2.readFileSync(outputPath, "utf-8");
+  if (!content || content.trim().length === 0) {
+    return { path: outputPath, status: "FAIL", detail: "File is empty after write." };
+  }
+  if (["css", "scss", "less"].includes(format)) {
+    const varPattern = /(--[a-zA-Z0-9-]+):\s*[^;]+;/g;
+    let count = 0;
+    let m;
+    while ((m = varPattern.exec(content)) !== null) count++;
+    if (count < expectedMinVariables) {
+      return {
+        path: outputPath,
+        status: "FAIL",
+        detail: `Expected at least ${expectedMinVariables} variables; found ${count}.`
+      };
+    }
+    return { path: outputPath, status: "OK", detail: `${count} variables written.` };
+  }
+  return { path: outputPath, status: "OK", detail: "File written (non-CSS format)." };
+}
+function formatValidationBlock(entries) {
+  if (entries.length === 0) return "";
+  const displayPath = (p) => p.startsWith("(") ? p : path2.relative(process.cwd(), p);
+  const lines = [
+    "",
+    "\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501",
+    "VALIDATION (confirm sync succeeded)",
+    "\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501",
+    ...entries.map((e) => `  ${displayPath(e.path)}: ${e.status} \u2014 ${e.detail}`),
+    ""
+  ];
+  return lines.join("\n");
+}
 async function fetchDesignSystemForMCP(forceRefresh = false) {
   if (!dsId) throw new Error("Missing --ds-id. Usage: npx @atomixstudio/mcp --ds-id <id> --atomix-token <token>");
   if (!accessToken) throw new Error("Missing --atomix-token. Get your token from the Export modal or Settings.");
@@ -1928,10 +1940,50 @@ async function fetchDesignSystemForMCP(forceRefresh = false) {
   return result.data;
 }
 var TOKEN_CATEGORIES = ["colors", "typography", "spacing", "sizing", "shadows", "radius", "borders", "motion", "zIndex"];
+function typesetKeyToFontFamilyRole(key) {
+  const prefix = key.split("-")[0] ?? "";
+  if (prefix === "display") return "display";
+  if (prefix === "heading") return "heading";
+  if (prefix === "mono") return "mono";
+  if (prefix.startsWith("body")) return "body";
+  return "body";
+}
+function buildTypesetsList(typography, cssPrefix = "atmx") {
+  const fontSize = typography.fontSize;
+  if (!fontSize || typeof fontSize !== "object") return [];
+  const fontFamily = typography.fontFamily ?? {};
+  const fontWeight = typography.fontWeight ?? {};
+  const lineHeight = typography.lineHeight ?? {};
+  const letterSpacing = typography.letterSpacing ?? {};
+  const textTransform = typography.textTransform ?? {};
+  const textDecoration = typography.textDecoration ?? {};
+  const p = cssPrefix ? `${cssPrefix}-` : "";
+  const typesets = [];
+  for (const key of Object.keys(fontSize)) {
+    const role = typesetKeyToFontFamilyRole(key);
+    const familyName = fontFamily[role] ?? fontFamily.body;
+    const fontFamilyVar = familyName ? `var(--${p}typography-font-family-${role})` : "";
+    const keyKebab = key.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+    typesets.push({
+      key,
+      cssClass: `.typeset-${keyKebab}`,
+      fontFamilyVar: fontFamilyVar || "inherit",
+      fontSizeVar: `var(--${p}typography-${key}-size)`,
+      fontWeightVar: `var(--${p}typography-${key}-weight)`,
+      lineHeightVar: `var(--${p}typography-${key}-line-height)`,
+      letterSpacingVar: letterSpacing[key] != null ? `var(--${p}typography-${key}-letter-spacing)` : void 0,
+      textTransformVar: textTransform[key] != null ? `var(--${p}typography-${key}-text-transform)` : void 0,
+      textDecorationVar: textDecoration[key] != null ? `var(--${p}typography-${key}-text-decoration)` : void 0,
+      hasTextTransform: key in textTransform,
+      hasTextDecoration: key in textDecoration
+    });
+  }
+  return typesets;
+}
 var server = new Server(
   {
     name: "atomix-mcp-user",
-    version: "1.0.22"
+    version: "1.0.25"
   },
   {
     capabilities: {
@@ -2017,6 +2069,20 @@ server.setRequestHandler(ListToolsRequestSchema, async () => {
         required: ["query"]
       }
     },
+    {
+      name: "listTypesets",
+      description: "List every typography typeset in the design system with full CSS variable names. Use this when building typeset.css so you emit one class per typeset and include all properties (font-family, font-size, font-weight, line-height, letter-spacing, text-transform, text-decoration) for 1:1 match. Do not skip any typesets.",
+      inputSchema: {
+        type: "object",
+        properties: {
+          cssPrefix: {
+            type: "string",
+            description: "CSS variable prefix (default: atmx). Use the same prefix as the synced tokens file."
+          }
+        },
+        required: []
+      }
+    },
     {
       name: "validateUsage",
       description: "Check if a CSS value follows the design system. Detects hardcoded values that should use tokens.",
@@ -2083,7 +2149,7 @@ server.setRequestHandler(ListToolsRequestSchema, async () => {
     },
     {
       name: "syncAll",
-      description: "Sync tokens, AI rules, skills files (SKILL.md, design-in-figma.md), and atomix-dependencies.json. One tool for full project sync. Use /--sync prompt or call when the user wants to sync. Optional: output (default ./tokens.css), format (default css), skipTokens (if true, only writes skills and manifest).",
+      description: "Sync tokens, AI rules, skills (SKILL.md, FIGMA-SKILL.md), and atomix-dependencies.json. Use dryRun: true first to report what would change without writing; then dryRun: false to apply. Response includes a VALIDATION section\u2014agent must check it to confirm success. Optional: output (default ./tokens.css), format (default css), skipTokens (if true, only skills and manifest), dryRun (if true, report only; no files written).",
       inputSchema: {
         type: "object",
         properties: {
@@ -2099,6 +2165,10 @@ server.setRequestHandler(ListToolsRequestSchema, async () => {
           skipTokens: {
             type: "boolean",
             description: "If true, skip token file and rules sync; only write skills and dependencies manifest. Default: false."
+          },
+          dryRun: {
+            type: "boolean",
+            description: "If true, compute and return what would be written (paths, token counts, diff summary) but do NOT write any files. Call with dryRun: false to apply. Default: false."
           }
         },
         required: []
@@ -2311,7 +2381,7 @@ server.setRequestHandler(CallToolRequestSchema, async (request) => {
         isError: true
       };
     }
-    async function performTokenSyncAndRules(designSystemData, tokenOutput, tokenFormat) {
+    async function performTokenSyncAndRules(designSystemData, tokenOutput, tokenFormat, dryRun) {
       const output = tokenOutput;
       const format = tokenFormat;
       const outputPath = path2.resolve(process.cwd(), output);
@@ -2374,7 +2444,7 @@ server.setRequestHandler(CallToolRequestSchema, async (request) => {
         const lightChanges = diff.added.length + diff.modified.length;
         const darkChanges = diff.addedDark.length + diff.modifiedDark.length;
         const totalChanges = lightChanges + darkChanges + deprecatedCount;
-        if (totalChanges === 0) {
+        if (totalChanges === 0 && !dryRun) {
           const lastUpdated = designSystemData.meta.exportedAt ? new Date(designSystemData.meta.exportedAt).toLocaleString() : "N/A";
           return {
             responseText: `\u2713 Already up to date!
@@ -2383,7 +2453,19 @@ File: ${output}
 Tokens: ${tokenCount}
 Version: ${designSystemData.meta.version}
 Last updated: ${lastUpdated}`,
-            rulesResults: []
+            rulesResults: [],
+            validation: [{ path: outputPath, status: "OK", detail: "No changes needed; file already up to date." }]
+          };
+        }
+        if (totalChanges === 0 && dryRun) {
+          return {
+            responseText: `[DRY RUN] Already up to date. No changes would be written.
+
+File: ${output}
+Tokens: ${tokenCount}
+Version: ${designSystemData.meta.version}`,
+            rulesResults: [],
+            validation: [{ path: "(dry run)", status: "OK", detail: "No files written." }]
           };
         }
         changes = [...diff.modified, ...diff.modifiedDark];
@@ -2397,9 +2479,34 @@ Last updated: ${lastUpdated}`,
           timestamp: (/* @__PURE__ */ new Date()).toISOString()
         };
       }
+      if (dryRun) {
+        const added = diff ? diff.added.length + diff.addedDark.length : 0;
+        const modified = diff ? diff.modified.length + diff.modifiedDark.length : 0;
+        const changeLine = fileExists && diff ? `  Changes: ${added} added, ${modified} modified` : !fileExists ? `  New file would be created with ${tokenCount} tokens.` : "";
+        const report = [
+          "[DRY RUN] No files were written. The following would be written if you run syncAll with dryRun: false.",
+          "",
+          "Token file:",
+          `  Path: ${output}`,
+          `  Format: ${format}`,
+          `  Tokens: ${tokenCount} (${deprecatedCount} deprecated preserved)`,
+          changeLine,
+          "",
+          "Rules: .cursorrules (or existing rules files in project)",
+          "",
+          "Call syncAll again with dryRun: false to apply."
+        ].filter(Boolean).join("\n");
+        return {
+          responseText: report,
+          rulesResults: [],
+          validation: [{ path: "(dry run)", status: "OK", detail: "No files written." }]
+        };
+      }
       const outputDir = path2.dirname(outputPath);
       if (!fs2.existsSync(outputDir)) fs2.mkdirSync(outputDir, { recursive: true });
       fs2.writeFileSync(outputPath, newContent);
+      const validation = [];
+      validation.push(validateTokenFileAfterWrite(outputPath, format, tokenCount));
       let rulesResults = [];
       try {
         rulesResults = await syncRulesFiles({
@@ -2408,6 +2515,14 @@ Last updated: ${lastUpdated}`,
           apiBase: apiBase ?? void 0,
           rulesDir: process.cwd()
         });
+        for (const r of rulesResults) {
+          const fullPath = path2.resolve(process.cwd(), r.path);
+          validation.push({
+            path: fullPath,
+            status: r.success && fs2.existsSync(fullPath) ? "OK" : "FAIL",
+            detail: r.success ? "Written." : r.error || "Write failed."
+          });
+        }
       } catch (error) {
         console.error(`[syncAll] Failed to sync rules: ${error}`);
       }
@@ -2428,7 +2543,7 @@ Last updated: ${lastUpdated}`,
         hasRefactorRecommendation: !!lastSyncAffectedTokens?.removed.length,
         deprecatedTokenCount: lastSyncAffectedTokens?.removed.length || 0
       });
-      return { responseText: response, rulesResults };
+      return { responseText: response, rulesResults, validation };
     }
     switch (name) {
       case "getToken": {
@@ -2525,6 +2640,29 @@ Last updated: ${lastUpdated}`,
           }]
         };
       }
+      case "listTypesets": {
+        const typography = data.tokens.typography;
+        const cssPrefix = args?.cssPrefix || "atmx";
+        const typesets = typography ? buildTypesetsList(typography, cssPrefix) : [];
+        const underlineThickness = typography?.underlineThickness;
+        const underlineOffset = typography?.underlineOffset;
+        return {
+          content: [{
+            type: "text",
+            text: JSON.stringify({
+              count: typesets.length,
+              typesets,
+              instruction: "Emit one CSS rule per typeset using the cssClass and the listed var() properties. Include font-family, font-size, font-weight, line-height; add letter-spacing when present; add text-transform and text-decoration when hasTextTransform/hasTextDecoration are true so the result is 1:1 with the design system.",
+              ...underlineThickness != null && underlineOffset != null && {
+                underlineVars: {
+                  thickness: `var(--${cssPrefix}-typography-underline-thickness)`,
+                  offset: `var(--${cssPrefix}-typography-underline-offset)`
+                }
+              }
+            }, null, 2)
+          }]
+        };
+      }
       case "validateUsage": {
         const value = args?.value;
         const context = args?.context || "any";
@@ -2796,27 +2934,55 @@ Last updated: ${lastUpdated}`,
       }
       case "syncAll": {
         const skipTokens = args?.skipTokens === true;
+        const dryRun = args?.dryRun === true;
         const output = args?.output || "./tokens.css";
         const format = args?.format || "css";
-        const parts = ["\u2713 syncAll complete."];
+        const parts = [dryRun ? "[DRY RUN] syncAll report (no files written)." : "\u2713 syncAll complete."];
         let tokenResponseText = "";
+        const allValidation = [];
         if (!skipTokens) {
-          const { responseText, rulesResults } = await performTokenSyncAndRules(data, output, format);
-          tokenResponseText = responseText;
-          parts.push(`Tokens: ${output} (${format})`);
-          if (rulesResults.length > 0) {
-            parts.push(`Rules: ${rulesResults.map((r) => r.path).join(", ")}`);
+          const result = await performTokenSyncAndRules(data, output, format, dryRun);
+          tokenResponseText = result.responseText;
+          allValidation.push(...result.validation);
+          if (!dryRun && result.rulesResults.length > 0) {
+            parts.push(`Rules: ${result.rulesResults.map((r) => r.path).join(", ")}`);
+          }
+          if (dryRun) {
+            parts.push(`Would write tokens: ${output} (${format})`);
+          } else {
+            parts.push(`Tokens: ${output} (${format})`);
           }
         }
-        const skillsDir = path2.resolve(process.cwd(), ".cursor/skills/atomix-ds");
-        if (!fs2.existsSync(skillsDir)) fs2.mkdirSync(skillsDir, { recursive: true });
         const dsVersion = String(data.meta.version ?? "1.0.0");
         const dsExportedAt = data.meta.exportedAt;
+        const skillsDir = path2.resolve(process.cwd(), ".cursor/skills/atomix-ds");
+        const skillPath1 = path2.join(skillsDir, "SKILL.md");
+        const skillPath2 = path2.join(skillsDir, "FIGMA-SKILL.md");
+        const manifestPath = path2.resolve(process.cwd(), "atomix-dependencies.json");
+        if (dryRun) {
+          parts.push(
+            cachedMcpTier === "pro" ? "Would write skills: .cursor/skills/atomix-ds/SKILL.md, .cursor/skills/atomix-ds/FIGMA-SKILL.md" : "Would write skills: .cursor/skills/atomix-ds/SKILL.md"
+          );
+          parts.push("Would write manifest: atomix-dependencies.json");
+          const reportText = [parts.join("\n"), tokenResponseText].filter(Boolean).join("\n\n---\n\n");
+          return {
+            content: [{ type: "text", text: `syncAllResult: DRY_RUN (no files written)
+
+${reportText}` }]
+          };
+        }
+        if (!fs2.existsSync(skillsDir)) fs2.mkdirSync(skillsDir, { recursive: true });
         const genericWithVersion = injectSkillVersion(GENERIC_SKILL_MD, dsVersion, dsExportedAt);
-        const figmaWithVersion = injectSkillVersion(FIGMA_DESIGN_SKILL_MD, dsVersion, dsExportedAt);
-        fs2.writeFileSync(path2.join(skillsDir, "SKILL.md"), genericWithVersion);
-        fs2.writeFileSync(path2.join(skillsDir, "design-in-figma.md"), figmaWithVersion);
-        parts.push("Skills: .cursor/skills/atomix-ds/SKILL.md, .cursor/skills/atomix-ds/design-in-figma.md (synced at DS v" + dsVersion + ")");
+        fs2.writeFileSync(skillPath1, genericWithVersion);
+        allValidation.push({ path: skillPath1, status: fs2.existsSync(skillPath1) ? "OK" : "FAIL", detail: "Written." });
+        if (cachedMcpTier === "pro") {
+          const figmaWithVersion = injectSkillVersion(FIGMA_DESIGN_SKILL_MD, dsVersion, dsExportedAt);
+          fs2.writeFileSync(skillPath2, figmaWithVersion);
+          allValidation.push({ path: skillPath2, status: fs2.existsSync(skillPath2) ? "OK" : "FAIL", detail: "Written." });
+        }
+        parts.push(
+          cachedMcpTier === "pro" ? "Skills: .cursor/skills/atomix-ds/SKILL.md, .cursor/skills/atomix-ds/FIGMA-SKILL.md (synced at DS v" + dsVersion + ")" : "Skills: .cursor/skills/atomix-ds/SKILL.md (synced at DS v" + dsVersion + ")"
+        );
         const tokens = data.tokens;
         const typography = tokens?.typography;
         const fontFamily = typography?.fontFamily;
@@ -2847,19 +3013,22 @@ Last updated: ${lastUpdated}`,
           fonts: { families: fontNames },
           skills: {
             skill: ".cursor/skills/atomix-ds/SKILL.md",
-            skillFigmaDesign: ".cursor/skills/atomix-ds/design-in-figma.md",
+            ...cachedMcpTier === "pro" ? { skillFigmaDesign: ".cursor/skills/atomix-ds/FIGMA-SKILL.md" } : {},
             syncedAtVersion: data.meta.version ?? "1.0.0"
           }
         };
-        const manifestPath = path2.resolve(process.cwd(), "atomix-dependencies.json");
         fs2.writeFileSync(manifestPath, JSON.stringify(manifest, null, 2));
+        allValidation.push({ path: manifestPath, status: fs2.existsSync(manifestPath) ? "OK" : "FAIL", detail: "Written." });
         parts.push("Manifest: atomix-dependencies.json (icons, fonts, skill paths)");
         const summary = parts.join("\n");
-        const fullText = tokenResponseText ? `${summary}
+        const validationBlock = formatValidationBlock(allValidation);
+        const hasFailure = allValidation.some((e) => e.status === "FAIL");
+        const resultLine = hasFailure ? "syncAllResult: FAIL \u2014 Check VALIDATION section below. Do not report success to the user.\n\n" : "syncAllResult: OK\n\n";
+        const fullText = resultLine + (tokenResponseText ? `${summary}
 
 ---
 
-${tokenResponseText}` : summary;
+${tokenResponseText}${validationBlock}` : `${summary}${validationBlock}`);
         return {
           content: [{ type: "text", text: fullText }]
         };
@@ -2895,16 +3064,18 @@ ${tokenResponseText}` : summary;
           },
           fonts: {
             families: fontNames,
-            performanceHint: "Link fonts via URL (e.g. Google Fonts <link> or CSS @import); no need to download font files or add them to the repo. Prefer font-display: swap when possible. You must also build a typeset: CSS rules (e.g. .typeset-display, .typeset-heading, .typeset-body) that use var(--atmx-typography-*) for font-family, font-size, font-weight, line-height, letter-spacing from getToken/listTokens(typography). Do not create a file that only contains a font import."
+            performanceHint: "Link fonts via URL (e.g. Google Fonts <link> or CSS @import); no need to download font files or add them to the repo. Prefer font-display: swap when possible. You must also build a complete typeset CSS: call listTypesets to get every typeset from the design system, then emit one CSS class per typeset (do not skip any). For each class set font-family, font-size, font-weight, line-height, letter-spacing; when the typeset has text-transform or text-decoration, set those too so the result is 1:1 with the DS. Use the CSS variable names returned by listTypesets. Do not create a file that only contains a font import."
           },
           skill: {
             path: ".cursor/skills/atomix-ds/SKILL.md",
             content: GENERIC_SKILL_MD
           },
-          skillFigmaDesign: {
-            path: ".cursor/skills/atomix-ds/design-in-figma.md",
-            content: FIGMA_DESIGN_SKILL_MD
-          },
+          ...cachedMcpTier === "pro" ? {
+            skillFigmaDesign: {
+              path: ".cursor/skills/atomix-ds/FIGMA-SKILL.md",
+              content: FIGMA_DESIGN_SKILL_MD
+            }
+          } : {},
           tokenFiles: {
             files: ["tokens.css", "tokens.json"],
             copyInstructions: "Call the syncAll MCP tool to create the token file, skills, and atomix-dependencies.json; do not only suggest the user run sync later."
@@ -2971,13 +3142,14 @@ ${tokenResponseText}` : summary;
           if (payloads.numberVariableCollections.length > 0) {
             const numberResults = [];
             try {
+              const foundationsName = payloads.colorVariables.collectionName;
               for (const coll of payloads.numberVariableCollections) {
                 const result = await sendBridgeRequest("create_number_variables", {
-                  collectionName: coll.collectionName,
-                  variables: coll.variables,
+                  collectionName: foundationsName,
+                  variables: coll.variables.map((v) => ({ name: `${coll.categoryKey} / ${v.name}`, value: v.value })),
                   scopes: coll.scopes
                 });
-                numberResults.push({ collectionName: coll.collectionName, result });
+                numberResults.push({ categoryKey: coll.categoryKey, result });
               }
               out.numberVariables = numberResults;
             } catch (e) {
@@ -3302,7 +3474,7 @@ ${tokenResponseText}` : summary;
             type: "text",
             text: JSON.stringify({
               error: `Unknown tool: ${name}`,
-              availableTools: ["getToken", "listTokens", "searchTokens", "validateUsage", "getAIToolRules", "exportMCPConfig", "getSetupInstructions", "syncAll", "getDependencies", "syncToFigma", "getFigmaVariablesAndStyles", "createDesignPlaceholder", "resolveFigmaIdsForTokens", "designCreateFrame", "designCreateText", "designCreateRectangle", "designSetAutoLayout", "designSetLayoutConstraints", "designAppendChild", "getDesignScreenshot", "finalizeDesignFrame"]
+              availableTools: ["getToken", "listTokens", "listTypesets", "searchTokens", "validateUsage", "getAIToolRules", "exportMCPConfig", "getSetupInstructions", "syncAll", "getDependencies", "syncToFigma", "getFigmaVariablesAndStyles", "createDesignPlaceholder", "resolveFigmaIdsForTokens", "designCreateFrame", "designCreateText", "designCreateRectangle", "designSetAutoLayout", "designSetLayoutConstraints", "designAppendChild", "getDesignScreenshot", "finalizeDesignFrame"]
             }, null, 2)
           }]
         };
@@ -3398,7 +3570,7 @@ Use the returned rules and token paths/values when generating or editing code. P
 
 - **Fetch first:** Before writing UI or styles, call getAIToolRules and/or getToken/listTokens so you know the exact tokens and conventions.
 - **Icons:** Apply the design system's icon tokens when rendering icons: sizing via \`getToken("sizing.icon.sm")\` or \`listTokens("sizing")\`, and stroke width via \`getToken("icons.strokeWidth")\` when the DS defines it; do not use hardcoded sizes or stroke widths.
-- **Typography:** Use typography tokens (fontFamily, fontSize, fontWeight, lineHeight, letterSpacing) from the DS for any text; build typesets (Display, Heading, body) from those tokens when creating global styles.
+- **Typography:** Use typography tokens from the DS for any text. When creating global typeset CSS, call **listTypesets** and emit one CSS class per typeset (do not skip any); include text-transform and text-decoration when present for 1:1 match.
 - **No guessing:** If a value is not in the rules or token list, use searchTokens or listTokens to find the closest match rather than inventing a value.
 - **Version check:** If this skill file has frontmatter \`atomixDsVersion\`, compare it to the design system version from **getDependencies** (\`meta.designSystemVersion\`). If the design system is newer, suggest the user run **syncAll** to update skills and tokens.
 `;
@@ -3463,18 +3635,15 @@ var SHOWCASE_HTML_TEMPLATE = `<!DOCTYPE html>
       min-height: 100vh;
       padding: 2rem;
       display: flex;
-      align-items: center;
-      justify-content: center;
-      text-align: center;
     }
     .wrap { width: 375px; max-width: 100%; }
     .icon { width: 2rem; height: 2rem; margin: 0 auto 1rem; }
     h1 {
       font-family: {{HEADING_FONT_VAR}}, {{FONT_FAMILY_VAR}}, system-ui, sans-serif;
-      font-size: clamp(1.5rem, 4vw, 2.25rem);
+      font-size: clamp(3rem, 4vw, 5rem);
       font-weight: 700;
       margin: 0 0 0.75rem;
-      line-height: 1.25;
+      line-height: 1.2;
     }
     .lead { margin: 0 0 1.5rem; font-size: 1rem; line-height: 1.5; opacity: 0.95; }
     .now { margin: 1.5rem 0 0; font-size: 0.875rem; line-height: 1.6; opacity: 0.95; text-align: left; }
@@ -3487,10 +3656,10 @@ var SHOWCASE_HTML_TEMPLATE = `<!DOCTYPE html>
 <body>
   <div class="wrap">
     <div class="icon" aria-hidden="true">
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="32" height="32"><path d="M20 6L9 17l-5-5"/></svg>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="44" height="44"><path d="M20 6L9 17l-5-5"/></svg>
     </div>
     <h1>You're all set with {{DS_NAME}}</h1>
-    <p class="lead">This page uses your design system: brand primary as background, headline and body typesets, and an icon. Token file is linked above.</p>
+    <p class="lead">This page uses your design system: brand primary as background, headline and body typesets, and an icon.</p>
     <div class="now">
       <strong>What you can do now:</strong>
       <ul>
@@ -4123,8 +4292,8 @@ Use \`/color\`, \`/spacing\`, \`/radius\`, \`/typography\`, \`/shadow\`, \`/bord
 
 - Resolve platform/stack: infer from the project (e.g. package.json, build.gradle, Xcode) or ask once: "Which platform? (e.g. web, Android, iOS)" and if relevant "Which stack? (e.g. React, Vue, Next, Swift, Kotlin)." Do not assume a default.
 - Call **getDependencies** with \`platform\` and optional \`stack\`. If it fails, tell the user the design system could not be reached and stop.
-- Scan the repo for: .cursor/skills/atomix-ds/SKILL.md, .cursor/skills/atomix-ds/design-in-figma.md, a tokens file (e.g. tokens.css or src/tokens.css), icon package from getDependencies, font links. **Web:** note any existing CSS (globals.css, main.css, Tailwind, etc.). **Native:** note any theme/style files (SwiftUI, Android themes, Compose).
-- Build two lists: **Suggested** (from getDependencies minus what exists) and **Already present**. Include: icon package, font links, skill (.cursor/skills/atomix-ds/SKILL.md), **Figma design skill** (.cursor/skills/atomix-ds/design-in-figma.md), token files; for web, also include the **showcase page** (atomix-setup-showcase.html) if getDependencies returned a \`showcase\` object.
+- Scan the repo for: .cursor/skills/atomix-ds/SKILL.md, a tokens file (e.g. tokens.css or src/tokens.css), icon package from getDependencies, font links. If getDependencies returned \`skillFigmaDesign\`, also scan for .cursor/skills/atomix-ds/FIGMA-SKILL.md. **Web:** note any existing CSS (globals.css, main.css, Tailwind, etc.). **Native:** note any theme/style files (SwiftUI, Android themes, Compose).
+- Build two lists: **Suggested** (from getDependencies minus what exists) and **Already present**. Include: icon package, font links, skill (.cursor/skills/atomix-ds/SKILL.md). Include **Figma design skill** (.cursor/skills/atomix-ds/FIGMA-SKILL.md) in Suggested/Already present only if getDependencies returned a \`skillFigmaDesign\` object; otherwise omit it. Include token files; for web, also include the **showcase page** (atomix-setup-showcase.html) if getDependencies returned a \`showcase\` object.
 - Do not write, create, or add anything in Phase 1.
 
 ## Phase 2 \u2013 Report and ask
@@ -4138,14 +4307,14 @@ Use \`/color\`, \`/spacing\`, \`/radius\`, \`/typography\`, \`/shadow\`, \`/bord
 - Run only when the user has said yes (all or specific items).
 - For each approved item:
   - **Skill:** Write the skill content from getDependencies \`skill.content\` to \`skill.path\` (.cursor/skills/atomix-ds/SKILL.md).
-  - **Figma design skill:** Write the skill content from getDependencies \`skillFigmaDesign.content\` to \`skillFigmaDesign.path\` (.cursor/skills/atomix-ds/design-in-figma.md). Use this when designing in Figma so the agent follows principal-product-designer rules and prefers existing Figma variables.
+  - **Figma design skill:** Only if getDependencies returned \`skillFigmaDesign\`, write \`skillFigmaDesign.content\` to \`skillFigmaDesign.path\` (.cursor/skills/atomix-ds/FIGMA-SKILL.md). Use this when designing in Figma so the agent follows principal-product-designer rules and prefers existing Figma variables. If \`skillFigmaDesign\` was not in the response, do not add this file.
   - **Token file:** Call **syncAll** with \`output\` set to the path (e.g. "./src/tokens.css" or "./tokens.css"). syncAll also writes skills and atomix-dependencies.json. You must call syncAll; do not only suggest the user run it later.
   - **Icon package:** Install per getDependencies. When rendering icons, apply the design system's icon tokens: use getToken(\`sizing.icon.*\`) or listTokens(\`sizing\`) for size, and getToken(\`icons.strokeWidth\`) for stroke width when the DS defines it; do not use hardcoded sizes or stroke widths.
-  - **Fonts and typeset:** Add font links (e.g. \`<link>\` or \`@import\` from Google Fonts). Then build a **typeset** in CSS: use **getToken** / **listTokens** (category \`typography\`) to get fontFamily, fontSize, fontWeight, lineHeight, letterSpacing for display, heading, and body, and write CSS rules (e.g. \`.typeset-display\`, \`.typeset-heading\`, \`.typeset-body\`, or \`h1\`/\`h2\`/\`p\`) that set those properties to \`var(--atmx-typography-*)\`. The typeset file (or section) must define the full type scale\u2014not only a font import. Do not create a CSS file that contains only a font import.
+  - **Fonts and typeset:** Add font links (e.g. \`<link>\` or \`@import\` from Google Fonts). Then build a **complete typeset CSS**: call **listTypesets** to get every typeset from the owner's design system (do not skip any). Emit **one CSS rule per typeset** using the \`cssClass\` and the \`fontFamilyVar\`, \`fontSizeVar\`, \`fontWeightVar\`, \`lineHeightVar\` (and \`letterSpacingVar\`, \`textTransformVar\`, \`textDecorationVar\` when present) returned by listTypesets. Include text-transform and text-decoration when the typeset has them so the result is **1:1** with the design system. The typeset file must define the full type scale\u2014not only a font import. Do not create a CSS file that contains only a font import.
   - **Showcase page (web only):** If platform is web and getDependencies returned a \`showcase\` object, create the file at \`showcase.path\` using \`showcase.template\`. Replace every placeholder per \`showcase.substitutionInstructions\`: TOKENS_CSS_PATH, DS_NAME, BRAND_PRIMARY_VAR (page background), BRAND_PRIMARY_FOREGROUND_VAR (text on brand), HEADING_FONT_VAR (h1), FONT_FAMILY_VAR (body), FONT_LINK_TAG. Use only CSS variable names that exist in the synced token file. Do not change the HTML structure. After creating the file, launch it in the default browser (e.g. \`open atomix-setup-showcase.html\` on macOS, \`xdg-open atomix-setup-showcase.html\` on Linux, or the equivalent on Windows).
 - Report only what you actually created or updated. Do not claim the token file was added if you did not call syncAll.
 - **After reporting \u2013 styles/theme:**
-  - **Web:** If the project already has at least one CSS file: recommend how to integrate Atomix (e.g. import the synced tokens file, use \`var(--atmx-*)\`). Do not suggest a new global CSS. Only if there is **no** CSS file at all, ask once: "There are no CSS files yet. Do you want me to build a global typeset from the design system?" If yes, create a CSS file that includes: (1) font \`@import\` or document that a font link is needed, and (2) **typeset rules**\u2014CSS classes or element rules that set font-family, font-size, font-weight, line-height, letter-spacing using \`var(--atmx-typography-*)\` from the token file (e.g. \`.typeset-display\`, \`.typeset-heading\`, \`.typeset-body\`). You must call getToken/listTokens to get the exact typography token paths and write the corresponding var() references. The output must not be only a font import; it must define the full typeset (Display, Heading, body) with every style detail from the design system.
+  - **Web:** If the project already has at least one CSS file: recommend how to integrate Atomix (e.g. import the synced tokens file, use \`var(--atmx-*)\`). Do not suggest a new global CSS. Only if there is **no** CSS file at all, ask once: "There are no CSS files yet. Do you want me to build a global typeset from the design system?" If yes, create a CSS file that includes: (1) font \`@import\` or document that a font link is needed, and (2) **typeset rules**\u2014call **listTypesets** and emit **one CSS class per typeset** (do not skip any). For each class set font-family, font-size, font-weight, line-height, letter-spacing; when the typeset has text-transform or text-decoration, set those too for a 1:1 match. Use the CSS variable names returned by listTypesets. The output must not be only a font import; it must define every typeset with every style detail from the design system.
   - **iOS/Android:** If the project already has theme/style files: recommend how to integrate Atomix tokens. Do not suggest a new global theme. Only if there is **no** theme/style at all, ask once: "There's no theme/style setup yet. Do you want a minimal token-based theme?" and add only if the user says yes.
 
 Create your todo list first, then Phase 1 (resolve platform/stack, call getDependencies, scan, build lists), then Phase 2 (report and ask). Do not perform Phase 3 until the user replies.`;