@atomixstudio/mcp 1.0.24 → 1.0.26

package/README.md

@@ -2,6 +2,8 @@
 
 MCP (Model Context Protocol) server and CLI for Atomix Design System. Query and sync design tokens from AI coding tools (Cursor, Claude Desktop, Windsurf, etc.) or from the command line.
 
+**Version:** 1.0.25 — Pro Figma skill gated by `pro_figma_export`; design-in-Figma skill file renamed to `FIGMA-SKILL.md`; get-started and syncAll only add/write FIGMA-SKILL when the design system has Pro Figma access.
+
 ## Getting Your Credentials
 
 1. Go to [Atomix Studio](https://atomixstudio.eu)
@@ -80,7 +82,7 @@ Returns DS-derived suggestions so the AI can build a "Suggested" vs "Already pre
 - **iconLibrary** — `package`, `nativePackage`, and a performance hint (use individual imports; apply the DS icon sizing/weight token when rendering icons).
 - **fonts** — Font family names from typography tokens + hint to link fonts via URL (e.g. Google Fonts); no need to download or add font files to the repo.
 - **skill** — `path` (e.g. `.cursor/skills/atomix-ds/SKILL.md`) and `content` (generic, platform-agnostic SKILL.md).
-- **skillFigmaDesign** — `path` (`.cursor/skills/atomix-ds/design-in-figma.md`) and `content` (design-in-Figma skill: principal product designer, correct token use, prefer existing Figma variables).
+- **skillFigmaDesign** — `path` (`.cursor/skills/atomix-ds/FIGMA-SKILL.md`) and `content` (design-in-Figma skill: principal product designer, correct token use, prefer existing Figma variables).
 - **tokenFiles** — e.g. `["tokens.css", "tokens.json"]` with copy instructions.
 - **meta** — `dsName`, `platform`, `stack`, `designSystemVersion`, `designSystemExportedAt`. Use `designSystemVersion` to compare with skill frontmatter `atomixDsVersion` and suggest **syncAll** when the design system is newer.
 
@@ -88,7 +90,7 @@ If the design system is unavailable, the tool may fail; the client should tell t
 
 ### syncAll
 
-**syncAll** is the single sync tool: tokens file, AI rules, skills (`.cursor/skills/atomix-ds/SKILL.md`, `design-in-figma.md`), and **atomix-dependencies.json**. The manifest records icon library, font families, and paths. The **/--sync** prompt invokes it. Optional: `output` (default `./tokens.css`), `format` (default `css`), `skipTokens` (if true, only writes skills and manifest).
+**syncAll** is the single sync tool: tokens file, AI rules, skills (`.cursor/skills/atomix-ds/SKILL.md`, `FIGMA-SKILL.md`), and **atomix-dependencies.json**. The manifest records icon library, font families, and paths. The **/--sync** prompt invokes it. Optional: `output` (default `./tokens.css`), `format` (default `css`), `skipTokens` (if true, only writes skills and manifest).
 
 **Skill versioning:** Synced skills get frontmatter `atomixDsVersion` and `atomixDsExportedAt` (from the design system at sync time). The manifest’s `skills.syncedAtVersion` matches. The AI can compare the skill’s `atomixDsVersion` to **getDependencies**’ `meta.designSystemVersion`; if the design system is newer, it can suggest running **syncAll** to update.
 
@@ -119,7 +121,7 @@ The **/--get-started** prompt suggests dependencies for your design system so yo
 5. **Optional: suggest global typeset** — If the project has no global styles that use the design system tokens, offer to build a full typeset (Display, Heading, body, caption) from the DS typography tokens via getToken/listTokens, including fontFamily, fontSize, fontWeight, lineHeight, letterSpacing—not just font imports.
 6. **Report what was created** — After any install/copy steps, list what was created or updated (e.g. "Installed: lucide-react. Added: .cursor/skills/atomix-ds/SKILL.md. Synced: tokens.css.").
 
-**SKILLs:** The get-started flow suggests adding (1) a generic SKILL at `.cursor/skills/atomix-ds/SKILL.md` (coding-platform agnostic; calls `getAIToolRules` for the current environment), and (2) a **Figma design skill** at `.cursor/skills/atomix-ds/design-in-figma.md` for designing in Figma using granular MCP commands (syncToFigma, resolveFigmaIdsForTokens, designCreateFrame, designCreateText, etc.) with no code generation.
+**SKILLs:** The get-started flow suggests adding (1) a generic SKILL at `.cursor/skills/atomix-ds/SKILL.md` (coding-platform agnostic; calls `getAIToolRules` for the current environment), and (2) a **Figma design skill** at `.cursor/skills/atomix-ds/FIGMA-SKILL.md` for designing in Figma using granular MCP commands (syncToFigma, resolveFigmaIdsForTokens, designCreateFrame, designCreateText, etc.) with no code generation.
 
 ## Sync to Figma
 

package/dist/index.js

@@ -1940,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.24"
+    version: "1.0.25"
   },
   {
     capabilities: {
@@ -2029,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.",
@@ -2095,7 +2149,7 @@ server.setRequestHandler(ListToolsRequestSchema, async () => {
     },
     {
       name: "syncAll",
-      description: "Sync tokens, AI rules, skills (SKILL.md, design-in-figma.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).",
+      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: {
@@ -2586,6 +2640,29 @@ Version: ${designSystemData.meta.version}`,
           }]
         };
       }
+      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";
@@ -2880,10 +2957,12 @@ Version: ${designSystemData.meta.version}`,
         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, "design-in-figma.md");
+        const skillPath2 = path2.join(skillsDir, "FIGMA-SKILL.md");
         const manifestPath = path2.resolve(process.cwd(), "atomix-dependencies.json");
         if (dryRun) {
-          parts.push("Would write skills: .cursor/skills/atomix-ds/SKILL.md, .cursor/skills/atomix-ds/design-in-figma.md");
+          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 {
@@ -2894,14 +2973,16 @@ ${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(skillPath1, genericWithVersion);
-        fs2.writeFileSync(skillPath2, figmaWithVersion);
-        allValidation.push(
-          { path: skillPath1, status: fs2.existsSync(skillPath1) ? "OK" : "FAIL", detail: "Written." },
-          { path: skillPath2, status: fs2.existsSync(skillPath2) ? "OK" : "FAIL", detail: "Written." }
+        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 + ")"
         );
-        parts.push("Skills: .cursor/skills/atomix-ds/SKILL.md, .cursor/skills/atomix-ds/design-in-figma.md (synced at DS v" + dsVersion + ")");
         const tokens = data.tokens;
         const typography = tokens?.typography;
         const fontFamily = typography?.fontFamily;
@@ -2932,7 +3013,7 @@ ${reportText}` }]
           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"
           }
         };
@@ -2983,16 +3064,18 @@ ${tokenResponseText}${validationBlock}` : `${summary}${validationBlock}`);
           },
           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."
@@ -3391,7 +3474,7 @@ ${tokenResponseText}${validationBlock}` : `${summary}${validationBlock}`);
             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)
           }]
         };
@@ -3487,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.
 `;
@@ -3552,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; }
@@ -3576,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>
@@ -4212,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
@@ -4227,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.`;