@tamagui/cli 2.0.0-rc.4 → 2.0.0-rc.40

package/dist/generate-prompt.cjs

@@ -2,355 +2,404 @@ var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf,
-  __hasOwnProp = Object.prototype.hasOwnProperty;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
-    for (var name in all) __defProp(target, name, {
-      get: all[name],
-      enumerable: !0
-    });
-  },
-  __copyProps = (to, from, except, desc) => {
-    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
       get: () => from[key],
       enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
     });
-    return to;
-  };
+  }
+  return to;
+};
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-    value: mod,
-    enumerable: !0
-  }) : target, mod)),
-  __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-    value: !0
-  }), mod);
+// If the importer is in node compatibility mode or this is not an ESM
+// file that has been converted to a CommonJS file using a Babel-
+// compatible transform (i.e. "__esModule" has not been set), then set
+// "default" to the CommonJS "module.exports" for node compatibility.
+isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+  value: mod,
+  enumerable: true
+}) : target, mod));
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
 var generate_prompt_exports = {};
 __export(generate_prompt_exports, {
   generatePrompt: () => generatePrompt
 });
 module.exports = __toCommonJS(generate_prompt_exports);
-var import_node_path = require("node:path"),
-  FS = __toESM(require("fs-extra")),
-  import_static = require("@tamagui/static");
+var import_node_path = require("node:path");
+var FS = __toESM(require("fs-extra"));
 async function generatePrompt(options) {
   const {
     paths,
     output
   } = options;
-  process.env.TAMAGUI_KEEP_THEMES = "1", await (0, import_static.loadTamagui)({
+  const {
+    loadTamagui
+  } = require("@tamagui/static/loadTamagui");
+  process.env.TAMAGUI_KEEP_THEMES = "1";
+  await loadTamagui({
     ...options.tamaguiOptions,
     platform: "web"
   });
   const configPath = (0, import_node_path.join)(paths.dotDir, "tamagui.config.json");
-  if (!FS.existsSync(configPath)) throw new Error(`Config file not found at ${configPath}. Please run 'tamagui generate' first.`);
-  const config = await FS.readJSON(configPath),
-    markdown = generateMarkdown(config),
-    outputPath = output || (0, import_node_path.join)(process.cwd(), "tamagui-prompt.md");
-  await FS.writeFile(outputPath, markdown, "utf-8"), console.info(`
+  if (!FS.existsSync(configPath)) {
+    throw new Error(`Config file not found at ${configPath}. Please run 'tamagui generate' first.`);
+  }
+  const config = await FS.readJSON(configPath);
+  const markdown = generateMarkdown(config);
+  const outputPath = output || (0, import_node_path.join)(process.cwd(), "tamagui-prompt.md");
+  await FS.writeFile(outputPath, markdown, "utf-8");
+  console.info(`
   \u2713 Generated prompt file at ${outputPath}
 `);
 }
 function generateMarkdown(config) {
   const sections = [];
-  sections.push(`# Tamagui Configuration
-
-`), sections.push(`This document provides an overview of the Tamagui configuration for this project.
-
-`);
-  const shorthands = config.tamaguiConfig?.shorthands || {},
-    reverseShorthands = {};
-  for (const [short, full] of Object.entries(shorthands)) reverseShorthands[full] = short;
-  const getPropName = fullProp => (config.tamaguiConfig?.settings || {}).onlyAllowShorthands && reverseShorthands[fullProp] ? reverseShorthands[fullProp] : fullProp,
-    settings = config.tamaguiConfig?.settings || {};
+  sections.push("# Tamagui Configuration\n\n");
+  sections.push("This document provides an overview of the Tamagui configuration for this project.\n\n");
+  const shorthands = config.tamaguiConfig?.shorthands || {};
+  const reverseShorthands = {};
+  for (const [short, full] of Object.entries(shorthands)) {
+    reverseShorthands[full] = short;
+  }
+  const getPropName = fullProp => {
+    const settings2 = config.tamaguiConfig?.settings || {};
+    if (settings2.onlyAllowShorthands && reverseShorthands[fullProp]) {
+      return reverseShorthands[fullProp];
+    }
+    return fullProp;
+  };
+  const settings = config.tamaguiConfig?.settings || {};
   if (Object.keys(settings).length > 0) {
-    sections.push(`## Configuration Settings
-
-`), sections.push(`**IMPORTANT:** These settings affect how you write Tamagui code in this project.
-
-`), settings.defaultFont && (sections.push(`### Default Font: \`${settings.defaultFont}\`
+    sections.push("## Configuration Settings\n\n");
+    sections.push("**IMPORTANT:** These settings affect how you write Tamagui code in this project.\n\n");
+    if (settings.defaultFont) {
+      sections.push(`### Default Font: \`${settings.defaultFont}\`
 
-`), sections.push(`All text components will use the "${settings.defaultFont}" font family by default.
-
-`)), settings.onlyAllowShorthands !== void 0 && (sections.push(`### Only Allow Shorthands: \`${settings.onlyAllowShorthands}\`
-
-`), settings.onlyAllowShorthands ? (sections.push(`**You MUST use shorthand properties in this project.**
-
-`), sections.push(`Full property names are not allowed. For example:
-`), sections.push('- \u2705 `<View w="$10" />` (correct)\n'), sections.push('- \u274C `<View width="$10" />` (will error)\n\n'), sections.push(`See the Shorthand Properties section below for all available shorthands.
-
-`)) : sections.push(`You can use either shorthand or full property names.
+`);
+      sections.push(`All text components will use the "${settings.defaultFont}" font family by default.
 
-`)), settings.themeClassNameOnRoot !== void 0 && (sections.push(`### Theme Class Name on Root: \`${settings.themeClassNameOnRoot}\`
+`);
+    }
+    if (settings.onlyAllowShorthands !== void 0) {
+      sections.push(`### Only Allow Shorthands: \`${settings.onlyAllowShorthands}\`
 
-`), settings.themeClassNameOnRoot && sections.push(`Theme classes are applied to the root HTML element.
+`);
+      if (settings.onlyAllowShorthands) {
+        sections.push("**You MUST use shorthand properties in this project.**\n\n");
+        sections.push("Full property names are not allowed. For example:\n");
+        sections.push('- \u2705 `<View w="$10" />` (correct)\n');
+        sections.push('- \u274C `<View width="$10" />` (will error)\n\n');
+        sections.push("See the Shorthand Properties section below for all available shorthands.\n\n");
+      } else {
+        sections.push("You can use either shorthand or full property names.\n\n");
+      }
+    }
+    if (settings.themeClassNameOnRoot !== void 0) {
+      sections.push(`### Theme Class Name on Root: \`${settings.themeClassNameOnRoot}\`
 
-`));
+`);
+      if (settings.themeClassNameOnRoot) {
+        sections.push("Theme classes are applied to the root HTML element.\n\n");
+      }
+    }
     const platform = settings.platform || settings.defaultProps?.platform;
-    platform && (sections.push(`### Platform Mode: \`${platform}\`
-
-`), platform === "web" ? sections.push(`This project is configured for **web only**.
-
-`) : platform === "native" && sections.push(`This project is configured for **React Native only**.
-
-`)), settings.webContainerType && (sections.push(`### Web Container Type: \`${settings.webContainerType}\`
+    if (platform) {
+      sections.push(`### Platform Mode: \`${platform}\`
 
-`), sections.push(`Enables web-specific container query optimizations.
-
-`)), JSON.stringify(config.tamaguiConfig).includes("semi-strict-web") && (sections.push("### Mode: `semi-strict-web`\n\n"), sections.push(`This configuration uses semi-strict-web mode, which:
-`), sections.push(`- Optimizes for web performance
-`), sections.push(`- May have limited React Native API support
-`), sections.push(`- Focuses on web-first development
+`);
+      if (platform === "web") {
+        sections.push("This project is configured for **web only**.\n\n");
+      } else if (platform === "native") {
+        sections.push("This project is configured for **React Native only**.\n\n");
+      }
+    }
+    if (settings.webContainerType) {
+      sections.push(`### Web Container Type: \`${settings.webContainerType}\`
 
-`));
+`);
+      sections.push("Enables web-specific container query optimizations.\n\n");
+    }
+    const configString = JSON.stringify(config.tamaguiConfig);
+    if (configString.includes("semi-strict-web")) {
+      sections.push("### Mode: `semi-strict-web`\n\n");
+      sections.push("This configuration uses semi-strict-web mode, which:\n");
+      sections.push("- Optimizes for web performance\n");
+      sections.push("- May have limited React Native API support\n");
+      sections.push("- Focuses on web-first development\n\n");
+    }
   }
-  const componentsSection = [],
-    allComponents = [];
+  const componentsSection = [];
+  const allComponents = [];
   for (const componentModule of config.components) {
     const componentNames = Object.keys(componentModule.nameToInfo);
     allComponents.push(...componentNames);
   }
-  const componentGroups = /* @__PURE__ */new Map(),
-    processed = /* @__PURE__ */new Set(),
-    sortedComponents = [...allComponents].sort((a, b) => a.length - b.length);
+  const componentGroups = /* @__PURE__ */new Map();
+  const processed = /* @__PURE__ */new Set();
+  const sortedComponents = [...allComponents].sort((a, b) => a.length - b.length);
   for (const name of sortedComponents) {
     if (processed.has(name)) continue;
     const children = allComponents.filter(other => other !== name && other.startsWith(name) && other[name.length]?.match(/[A-Z]/));
-    children.length > 0 && (componentGroups.set(name, new Set(children)), processed.add(name), children.forEach(child => processed.add(child)));
+    if (children.length > 0) {
+      componentGroups.set(name, new Set(children));
+      processed.add(name);
+      children.forEach(child => processed.add(child));
+    }
   }
   const standaloneComponents = allComponents.filter(name => !processed.has(name));
-  componentsSection.push(`## Components
-
-`), componentsSection.push(`The following components are available:
-
-`);
+  componentsSection.push("## Components\n\n");
+  componentsSection.push("The following components are available:\n\n");
   const allBaseComponents = [...standaloneComponents, ...Array.from(componentGroups.keys())].sort();
-  for (const name of allBaseComponents) if (componentsSection.push(`- ${name}
-`), componentGroups.has(name)) {
-    const children = Array.from(componentGroups.get(name)).sort();
-    for (const child of children) {
-      const suffix = child.slice(name.length);
-      componentsSection.push(`  - ${name}.${suffix}
+  for (const name of allBaseComponents) {
+    componentsSection.push(`- ${name}
+`);
+    if (componentGroups.has(name)) {
+      const children = Array.from(componentGroups.get(name)).sort();
+      for (const child of children) {
+        const suffix = child.slice(name.length);
+        componentsSection.push(`  - ${name}.${suffix}
 `);
+      }
     }
   }
-  componentsSection.push(`
-`), sections.push(`## Shorthand Properties
-
-`), sections.push(`These shorthand properties are available for styling:
-
-`);
+  componentsSection.push("\n");
+  sections.push("## Shorthand Properties\n\n");
+  sections.push("These shorthand properties are available for styling:\n\n");
   const shorthandEntries = Object.entries(shorthands).sort(([a], [b]) => a.localeCompare(b));
-  sections.push(shorthandEntries.map(([short, full]) => `- \`${short}\` \u2192 \`${full}\``).join(`
-`)), sections.push(`
-
-`), sections.push(`## Themes
-
-`);
-  const themes = config.tamaguiConfig?.themes || {},
-    themeNames = Object.keys(themes).sort(),
-    hierarchy = {
-      level1: /* @__PURE__ */new Set(),
-      level2: /* @__PURE__ */new Set(),
-      level3: /* @__PURE__ */new Set(),
-      components: /* @__PURE__ */new Set()
-    };
+  sections.push(shorthandEntries.map(([short, full]) => `- \`${short}\` \u2192 \`${full}\``).join("\n"));
+  sections.push("\n\n");
+  sections.push("## Themes\n\n");
+  const themes = config.tamaguiConfig?.themes || {};
+  const themeNames = Object.keys(themes).sort();
+  const hierarchy = {
+    level1: /* @__PURE__ */new Set(),
+    level2: /* @__PURE__ */new Set(),
+    level3: /* @__PURE__ */new Set(),
+    components: /* @__PURE__ */new Set()
+  };
   for (const themeName of themeNames) {
     const parts = themeName.split("_");
     if (parts[0] === "light" || parts[0] === "dark") {
-      hierarchy.level1.add(parts[0]), parts.length > 1 && parts[1] && !parts[1].startsWith("alt") && parts[1] !== "active" && parts[1][0] === parts[1][0].toLowerCase() && hierarchy.level2.add(parts[1]);
-      for (const part of parts) (part.startsWith("alt") || part === "active") && hierarchy.level3.add(part);
-      for (const part of parts) part[0] && part[0] === part[0].toUpperCase() && part[0] !== part[0].toLowerCase() && hierarchy.components.add(part);
-    } else parts.length === 1 && hierarchy.level1.add(themeName);
+      hierarchy.level1.add(parts[0]);
+      if (parts.length > 1 && parts[1] && !parts[1].startsWith("alt") && parts[1] !== "active") {
+        if (parts[1][0] === parts[1][0].toLowerCase()) {
+          hierarchy.level2.add(parts[1]);
+        }
+      }
+      for (const part of parts) {
+        if (part.startsWith("alt") || part === "active") {
+          hierarchy.level3.add(part);
+        }
+      }
+      for (const part of parts) {
+        if (part[0] && part[0] === part[0].toUpperCase() && part[0] !== part[0].toLowerCase()) {
+          hierarchy.components.add(part);
+        }
+      }
+    } else {
+      if (parts.length === 1) {
+        hierarchy.level1.add(themeName);
+      }
+    }
   }
-  sections.push(`Themes are organized hierarchically and can be combined:
-
-`), hierarchy.level1.size > 0 && (sections.push(`**Level 1 (Base):**
-
-`), sections.push(Array.from(hierarchy.level1).sort().map(name => `- ${name}`).join(`
-`)), sections.push(`
-
-`)), hierarchy.level2.size > 0 && (sections.push(`**Level 2 (Color Schemes):**
-
-`), sections.push(Array.from(hierarchy.level2).sort().map(name => `- ${name}`).join(`
-`)), sections.push(`
-
-`)), hierarchy.level3.size > 0 && (sections.push(`**Level 3 (Variants):**
-
-`), sections.push(Array.from(hierarchy.level3).sort().map(name => `- ${name}`).join(`
-`)), sections.push(`
-
-`)), hierarchy.components.size > 0 && (sections.push(`**Component Themes:**
-
-`), sections.push(Array.from(hierarchy.components).sort().map(name => `- ${name}`).join(`
-`)), sections.push(`
-
-`)), sections.push(`### Theme Usage
-
-`), sections.push("Themes are combined hierarchically. For example, `light_blue_alt1_Button` combines:\n"), sections.push("- Base: `light`\n"), sections.push("- Color: `blue`\n"), sections.push("- Variant: `alt1`\n"), sections.push("- Component: `Button`\n\n"), sections.push(`**Basic usage:**
-
-`), sections.push("```tsx\n"), sections.push(`// Apply a theme to components
-`), sections.push(`export default () => (
-`), sections.push(`  <Theme name="dark">
-`), sections.push(`    <Button>I'm a dark button</Button>
-`), sections.push(`  </Theme>
-`), sections.push(`)
-
-`), sections.push(`// Themes nest and combine automatically
-`), sections.push(`export default () => (
-`), sections.push(`  <Theme name="dark">
-`), sections.push(`    <Theme name="blue">
-`), sections.push(`      <Button>Uses dark_blue theme</Button>
-`), sections.push(`    </Theme>
-`), sections.push(`  </Theme>
-`), sections.push(`)
-`), sections.push("```\n\n"), sections.push(`**Accessing theme values:**
-
-`), sections.push("Components can access theme values using `$` token syntax:\n\n"), sections.push("```tsx\n"), sections.push(`<View ${getPropName("backgroundColor")}="$background" ${getPropName("color")}="$color" />
-`), sections.push("```\n\n"), sections.push(`**Special props:**
-
-`), sections.push("- `inverse`: Automatically swaps light \u2194 dark themes\n"), sections.push("- `reset`: Reverts to grandparent theme\n\n"), sections.push(`## Tokens
-
-`), sections.push("Tokens are design system values that can be referenced using the `$` prefix.\n\n");
+  sections.push("Themes are organized hierarchically and can be combined:\n\n");
+  if (hierarchy.level1.size > 0) {
+    sections.push("**Level 1 (Base):**\n\n");
+    sections.push(Array.from(hierarchy.level1).sort().map(name => `- ${name}`).join("\n"));
+    sections.push("\n\n");
+  }
+  if (hierarchy.level2.size > 0) {
+    sections.push("**Level 2 (Color Schemes):**\n\n");
+    sections.push(Array.from(hierarchy.level2).sort().map(name => `- ${name}`).join("\n"));
+    sections.push("\n\n");
+  }
+  if (hierarchy.level3.size > 0) {
+    sections.push("**Level 3 (Variants):**\n\n");
+    sections.push(Array.from(hierarchy.level3).sort().map(name => `- ${name}`).join("\n"));
+    sections.push("\n\n");
+  }
+  if (hierarchy.components.size > 0) {
+    sections.push("**Component Themes:**\n\n");
+    sections.push(Array.from(hierarchy.components).sort().map(name => `- ${name}`).join("\n"));
+    sections.push("\n\n");
+  }
+  sections.push("### Theme Usage\n\n");
+  sections.push("Themes are combined hierarchically. For example, `light_blue_alt1_Button` combines:\n");
+  sections.push("- Base: `light`\n");
+  sections.push("- Color: `blue`\n");
+  sections.push("- Variant: `alt1`\n");
+  sections.push("- Component: `Button`\n\n");
+  sections.push("**Basic usage:**\n\n");
+  sections.push("```tsx\n");
+  sections.push("// Apply a theme to components\n");
+  sections.push("export default () => (\n");
+  sections.push('  <Theme name="dark">\n');
+  sections.push("    <Button>I'm a dark button</Button>\n");
+  sections.push("  </Theme>\n");
+  sections.push(")\n\n");
+  sections.push("// Themes nest and combine automatically\n");
+  sections.push("export default () => (\n");
+  sections.push('  <Theme name="dark">\n');
+  sections.push('    <Theme name="blue">\n');
+  sections.push("      <Button>Uses dark_blue theme</Button>\n");
+  sections.push("    </Theme>\n");
+  sections.push("  </Theme>\n");
+  sections.push(")\n");
+  sections.push("```\n\n");
+  sections.push("**Accessing theme values:**\n\n");
+  sections.push("Components can access theme values using `$` token syntax:\n\n");
+  sections.push("```tsx\n");
+  sections.push(`<View ${getPropName("backgroundColor")}="$background" ${getPropName("color")}="$color" />
+`);
+  sections.push("```\n\n");
+  sections.push("**Special props:**\n\n");
+  sections.push("- `inverse`: Automatically swaps light \u2194 dark themes\n");
+  sections.push("- `reset`: Reverts to grandparent theme\n\n");
+  sections.push("## Tokens\n\n");
+  sections.push("Tokens are design system values that can be referenced using the `$` prefix.\n\n");
   const tokens = config.tamaguiConfig?.tokens || {};
   if (tokens.space) {
-    sections.push(`### Space Tokens
-
-`);
+    sections.push("### Space Tokens\n\n");
     const spaceTokens = Object.entries(tokens.space).sort(([a], [b]) => {
-      const numA = parseFloat(a),
-        numB = parseFloat(b);
-      return !isNaN(numA) && !isNaN(numB) ? numA - numB : a.localeCompare(b);
+      const numA = parseFloat(a);
+      const numB = parseFloat(b);
+      if (!isNaN(numA) && !isNaN(numB)) {
+        return numA - numB;
+      }
+      return a.localeCompare(b);
     });
-    sections.push(spaceTokens.map(([key, value]) => `- \`${key}\`: ${formatTokenValue(value)}`).join(`
-`)), sections.push(`
-
-`);
+    sections.push(spaceTokens.map(([key, value]) => `- \`${key}\`: ${formatTokenValue(value)}`).join("\n"));
+    sections.push("\n\n");
   }
   if (tokens.size) {
-    sections.push(`### Size Tokens
-
-`);
+    sections.push("### Size Tokens\n\n");
     const sizeTokens = Object.entries(tokens.size).sort(([a], [b]) => {
-      const numA = parseFloat(a),
-        numB = parseFloat(b);
-      return !isNaN(numA) && !isNaN(numB) ? numA - numB : a.localeCompare(b);
+      const numA = parseFloat(a);
+      const numB = parseFloat(b);
+      if (!isNaN(numA) && !isNaN(numB)) {
+        return numA - numB;
+      }
+      return a.localeCompare(b);
     });
-    sections.push(sizeTokens.map(([key, value]) => `- \`${key}\`: ${formatTokenValue(value)}`).join(`
-`)), sections.push(`
-
-`);
+    sections.push(sizeTokens.map(([key, value]) => `- \`${key}\`: ${formatTokenValue(value)}`).join("\n"));
+    sections.push("\n\n");
   }
   if (tokens.radius) {
-    sections.push(`### Radius Tokens
-
-`);
+    sections.push("### Radius Tokens\n\n");
     const radiusTokens = Object.entries(tokens.radius).sort(([a], [b]) => {
-      const numA = parseFloat(a),
-        numB = parseFloat(b);
-      return !isNaN(numA) && !isNaN(numB) ? numA - numB : a.localeCompare(b);
+      const numA = parseFloat(a);
+      const numB = parseFloat(b);
+      if (!isNaN(numA) && !isNaN(numB)) {
+        return numA - numB;
+      }
+      return a.localeCompare(b);
     });
-    sections.push(radiusTokens.map(([key, value]) => `- \`${key}\`: ${formatTokenValue(value)}`).join(`
-`)), sections.push(`
-
-`);
+    sections.push(radiusTokens.map(([key, value]) => `- \`${key}\`: ${formatTokenValue(value)}`).join("\n"));
+    sections.push("\n\n");
   }
   if (tokens.zIndex) {
-    sections.push(`### Z-Index Tokens
-
-`);
+    sections.push("### Z-Index Tokens\n\n");
     const zIndexTokens = Object.entries(tokens.zIndex).sort(([a], [b]) => {
-      const numA = parseFloat(a),
-        numB = parseFloat(b);
-      return !isNaN(numA) && !isNaN(numB) ? numA - numB : a.localeCompare(b);
+      const numA = parseFloat(a);
+      const numB = parseFloat(b);
+      if (!isNaN(numA) && !isNaN(numB)) {
+        return numA - numB;
+      }
+      return a.localeCompare(b);
     });
-    sections.push(zIndexTokens.map(([key, value]) => `- \`${key}\`: ${formatTokenValue(value)}`).join(`
-`)), sections.push(`
-
-`);
+    sections.push(zIndexTokens.map(([key, value]) => `- \`${key}\`: ${formatTokenValue(value)}`).join("\n"));
+    sections.push("\n\n");
   }
   if (tokens.color) {
-    sections.push(`### Color Tokens
-
-`);
+    sections.push("### Color Tokens\n\n");
     const colorTokens = Object.entries(tokens.color).sort(([a], [b]) => a.localeCompare(b));
-    sections.push(colorTokens.map(([key, value]) => `- \`${key}\`: ${formatTokenValue(value)}`).join(`
-`)), sections.push(`
-
-`);
+    sections.push(colorTokens.map(([key, value]) => `- \`${key}\`: ${formatTokenValue(value)}`).join("\n"));
+    sections.push("\n\n");
   }
-  if (sections.push(`### Token Usage
-
-`), sections.push("Tokens can be used in component props with the `$` prefix:\n\n"), sections.push("```tsx\n"), sections.push(`// Space tokens - for margin, padding, gap
-`), sections.push(`<View ${getPropName("padding")}="$4" ${getPropName("gap")}="$2" ${getPropName("margin")}="$3" />
-
-`), sections.push(`// Size tokens - for width, height, dimensions
-`), sections.push(`<View ${getPropName("width")}="$10" ${getPropName("height")}="$6" />
+  sections.push("### Token Usage\n\n");
+  sections.push("Tokens can be used in component props with the `$` prefix:\n\n");
+  sections.push("```tsx\n");
+  sections.push("// Space tokens - for margin, padding, gap\n");
+  sections.push(`<View ${getPropName("padding")}="$4" ${getPropName("gap")}="$2" ${getPropName("margin")}="$3" />
 
-`), sections.push(`// Color tokens - for colors and backgrounds
-`), sections.push(`<View ${getPropName("backgroundColor")}="$blue5" ${getPropName("color")}="$gray12" />
-
-`), sections.push(`// Radius tokens - for border-radius
-`), sections.push(`<View ${getPropName("borderRadius")}="$4" />
-`), sections.push("```\n\n"), config.tamaguiConfig?.media) {
-    sections.push(`## Media Queries
+`);
+  sections.push("// Size tokens - for width, height, dimensions\n");
+  sections.push(`<View ${getPropName("width")}="$10" ${getPropName("height")}="$6" />
 
-`), sections.push(`Available responsive breakpoints:
+`);
+  sections.push("// Color tokens - for colors and backgrounds\n");
+  sections.push(`<View ${getPropName("backgroundColor")}="$blue5" ${getPropName("color")}="$gray12" />
 
 `);
-    const media = config.tamaguiConfig.media,
-      mediaEntries = Object.entries(media).sort(([a], [b]) => a.localeCompare(b));
-    for (const [name, query] of mediaEntries) sections.push(`- **${name}**: ${JSON.stringify(query)}
+  sections.push("// Radius tokens - for border-radius\n");
+  sections.push(`<View ${getPropName("borderRadius")}="$4" />
 `);
-    sections.push(`
-`), sections.push(`### Media Query Usage
-
-`), sections.push("Media queries can be used as style props or with the `useMedia` hook:\n\n"), sections.push("```tsx\n"), sections.push(`// As style props (prefix with $)
+  sections.push("```\n\n");
+  if (config.tamaguiConfig?.media) {
+    sections.push("## Media Queries\n\n");
+    sections.push("Available responsive breakpoints:\n\n");
+    const media = config.tamaguiConfig.media;
+    const mediaEntries = Object.entries(media).sort(([a], [b]) => a.localeCompare(b));
+    for (const [name, query] of mediaEntries) {
+      sections.push(`- **${name}**: ${JSON.stringify(query)}
 `);
+    }
+    sections.push("\n");
+    sections.push("### Media Query Usage\n\n");
+    sections.push("Media queries can be used as style props or with the `useMedia` hook:\n\n");
+    sections.push("```tsx\n");
+    sections.push("// As style props (prefix with $)\n");
     const firstMediaName = mediaEntries[0]?.[0];
-    firstMediaName && sections.push(`<View ${getPropName("width")}="100%" $${firstMediaName}={{ ${getPropName("width")}: "50%" }} />
-
-`), sections.push(`// Using the useMedia hook
-`), sections.push(`const media = useMedia()
-`), firstMediaName && (sections.push(`if (media.${firstMediaName}) {
-`), sections.push(`  // Render for this breakpoint
-`), sections.push(`}
-`)), sections.push("```\n\n");
-  }
-  if (config.tamaguiConfig?.fonts) {
-    sections.push(`## Fonts
-
-`), sections.push(`Available font families:
+    if (firstMediaName) {
+      sections.push(`<View ${getPropName("width")}="100%" $${firstMediaName}={{ ${getPropName("width")}: "50%" }} />
 
 `);
-    const fonts = config.tamaguiConfig.fonts,
-      fontNames = Object.keys(fonts).sort();
-    sections.push(fontNames.map(name => `- ${name}`).join(`
-`)), sections.push(`
-
+    }
+    sections.push("// Using the useMedia hook\n");
+    sections.push("const media = useMedia()\n");
+    if (firstMediaName) {
+      sections.push(`if (media.${firstMediaName}) {
 `);
+      sections.push("  // Render for this breakpoint\n");
+      sections.push("}\n");
+    }
+    sections.push("```\n\n");
+  }
+  if (config.tamaguiConfig?.fonts) {
+    sections.push("## Fonts\n\n");
+    sections.push("Available font families:\n\n");
+    const fonts = config.tamaguiConfig.fonts;
+    const fontNames = Object.keys(fonts).sort();
+    sections.push(fontNames.map(name => `- ${name}`).join("\n"));
+    sections.push("\n\n");
   }
   if (config.tamaguiConfig?.animations) {
-    sections.push(`## Animations
-
-`), sections.push(`Available animation presets:
-
-`);
+    sections.push("## Animations\n\n");
+    sections.push("Available animation presets:\n\n");
     const animations = config.tamaguiConfig.animations;
     if (animations.animations) {
       const animationNames = Object.keys(animations.animations).sort();
-      sections.push(animationNames.map(name => `- ${name}`).join(`
-`)), sections.push(`
-
-`);
+      sections.push(animationNames.map(name => `- ${name}`).join("\n"));
+      sections.push("\n\n");
     }
   }
-  return sections.push(...componentsSection), sections.join("");
+  sections.push(...componentsSection);
+  return sections.join("");
 }
 function formatTokenValue(value) {
-  return typeof value == "object" && value !== null && "val" in value ? String(value.val) : String(value);
+  if (typeof value === "object" && value !== null && "val" in value) {
+    return String(value.val);
+  }
+  return String(value);
 }