@tamagui/cli 2.7.7 → 3.0.0-beta.1097.1

package/dist/generate-prompt.cjs

@@ -5,401 +5,523 @@ var __getOwnPropNames = Object.getOwnPropertyNames;
 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: true
-  });
+	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;
+	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;
 };
-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: true
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
 }) : target, mod));
-var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: true
-}), mod);
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var generate_prompt_exports = {};
 __export(generate_prompt_exports, {
-  generatePrompt: () => generatePrompt
+	generateMarkdown: () => generateMarkdown,
+	generatePrompt: () => generatePrompt
 });
 module.exports = __toCommonJS(generate_prompt_exports);
 var import_node_path = require("node:path");
 var FS = __toESM(require("fs-extra"));
 async function generatePrompt(options) {
-  const {
-    paths,
-    output
-  } = options;
-  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);
-  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(`
+	const { paths, output } = options;
+	const { loadTamagui } = require("@tamagui/static/loadTamagui");
+	process.env.TAMAGUI_KEEP_THEMES = "1";
+	await loadTamagui({
+		...options.tamaguiOptions,
+		platform: "web"
+	}, true);
+	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);
+	const configSetting = config.tamaguiConfig?.settings?.styleValueSyntax;
+	const explicitChoice = options.styleValueSyntax || process.env.TAMAGUI_STYLE_VALUE_SYNTAX || configSetting;
+	const { resolveStyleValueSyntax } = require("./setup-prompt.cjs");
+	const resolvedSyntax = await resolveStyleValueSyntax(explicitChoice);
+	const markdown = generateMarkdown(config, { styleValueSyntax: resolvedSyntax });
+	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\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\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}\`
+function generateMarkdown(config, options) {
+	const sections = [];
+	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) {
+			if (reverseShorthands[fullProp]) return reverseShorthands[fullProp];
+			if (fullProp === "backgroundColor" && reverseShorthands["background"]) {
+				return reverseShorthands["background"];
+			}
+		}
+		return fullProp;
+	};
+	const settings = config.tamaguiConfig?.settings || {};
+	const syntaxChoice = options?.styleValueSyntax || settings.styleValueSyntax || "both";
+	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.
+		sections.push(`All text components will use the "${settings.defaultFont}" font family by default.
 
 `);
-    }
-    if (settings.onlyAllowShorthands !== void 0) {
-      sections.push(`### Only Allow Shorthands: \`${settings.onlyAllowShorthands}\`
+	}
+	if (settings.onlyAllowShorthands !== void 0) {
+		sections.push(`### Only Allow Shorthands: \`${settings.onlyAllowShorthands}\`
 
 `);
-      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.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("- ✅ `<View w=\"10\" />` (correct)\n");
+			sections.push("- ❌ `<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 (syntaxChoice === "string") {
+		sections.push("### Style value syntax: `string`\n\n");
+		sections.push("Only the string form is allowed in this project (e.g. `bg=\"red hover:blue\"`).\n\n");
+	} else if (syntaxChoice === "object") {
+		sections.push("### Style value syntax: `object`\n\n");
+		sections.push("Only the object form is allowed in this project (e.g. `bg={{ default: 'red', hover: 'blue' }}`).\n\n");
+	} else {
+		sections.push("### Style value syntax\n\n");
+		sections.push("Both string and object style value syntax are allowed.\n\n");
+	}
+	if (settings.addThemeClassName !== void 0) {
+		sections.push(`### Theme Class Name: \`${settings.addThemeClassName}\`
 
 `);
-      if (settings.themeClassNameOnRoot) {
-        sections.push("Theme classes are applied to the root HTML element.\n\n");
-      }
-    }
-    const platform = settings.platform || settings.defaultProps?.platform;
-    if (platform) {
-      sections.push(`### Platform Mode: \`${platform}\`
+		if (settings.addThemeClassName === "html") {
+			sections.push("Theme classes are applied to the root HTML element.\n\n");
+		}
+	}
+	if (settings.allowedStyleValues) {
+		sections.push("### Allowed Style Values\n\n");
+		sections.push(`Type validation: \`${JSON.stringify(settings.allowedStyleValues)}\`.
 
 `);
-      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("Single-token values are type-checked. Run `tamagui check --strict` to also validate conditional payloads.\n\n");
+	}
+	sections.push("## Flat Value Grammar\n\n");
+	sections.push("Conditional style values follow this grammar:\n\n");
+	sections.push("```txt\n");
+	sections.push("value  := base? clause*\n");
+	sections.push("clause := modifier(:modifier)*:payload\n");
+	sections.push("```\n\n");
+	sections.push("- No `$` sigils: bare token names (`bg=\"background\"`, not `bg=\"$background\"`).\n");
+	sections.push("- Kebab-case theme names: `background-hover`, `border-color`, `shadow-color`.\n");
+	sections.push("- Numbers are px: `p={4}` is 4px, while `p=\"4\"` is space token 4.\n");
+	sections.push("- Specificity precedence: platform (`ios:` > `native:` > bare) > condition count > category (media < container < theme < group < state).\n\n");
+	const bgProp = getPropName("background");
+	const pProp = getPropName("padding");
+	if (syntaxChoice === "string") {
+		sections.push("**String form:**\n\n");
+		sections.push("```tsx\n");
+		sections.push(`<View ${bgProp}="background hover:background-hover dark:blue-500" ${pProp}="4 sm:6 max-sm:2" />
+`);
+		sections.push("```\n\n");
+	} else if (syntaxChoice === "object") {
+		sections.push("**Object form:**\n\n");
+		sections.push("```tsx\n");
+		sections.push(`<View ${bgProp}={{ default: 'background', hover: 'background-hover', dark: 'blue-500' }} ${pProp}={{ default: '4', sm: '6', 'max-sm': '2' }} />
+`);
+		sections.push("```\n\n");
+	} else {
+		sections.push("Both forms are allowed:\n\n");
+		sections.push("```tsx\n");
+		sections.push("// string form\n");
+		sections.push(`<View ${bgProp}="background hover:background-hover dark:blue-500" ${pProp}="4 sm:6 max-sm:2" />
+
+`);
+		sections.push("// object form\n");
+		sections.push(`<View ${bgProp}={{ default: 'background', hover: 'background-hover', dark: 'blue-500' }} ${pProp}={{ default: '4', sm: '6', 'max-sm': '2' }} />
+`);
+		sections.push("```\n\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("\n"));
+	sections.push("\n\n");
+	const sizes = config.tamaguiConfig?.sizes;
+	if (sizes && typeof sizes === "object") {
+		sections.push("## Named Control Sizes\n\n");
+		sections.push(`Control components (Button, Input, etc.) use the configured names below. Default is \`${sizes.default ?? "md"}\`.
+
+`);
+		sections.push("| Size | Configuration |\n");
+		sections.push("|---|---|\n");
+		for (const [sizeKey, val] of Object.entries(sizes)) {
+			if (sizeKey === "default") continue;
+			const valStr = typeof val === "object" && val !== null ? JSON.stringify(val) : String(val);
+			const isDefault = sizes.default === sizeKey ? " (default)" : "";
+			sections.push(`| \`${sizeKey}\`${isDefault} | ${valStr} |
+`);
+		}
+		sections.push("\n");
+	}
+	sections.push("## Themes\n\n");
+	const themes = config.tamaguiConfig?.themes || {};
+	const themeNames = Object.keys(themes).sort();
+	sections.push(themeNames.map((name) => `- \`${name}\``).join("\n"));
+	sections.push("\n\nTheme names above are exact configured names. Nested themes resolve relative to their parent. Use an explicit theme boundary in a component skin.\n\n");
+	if (themeNames.length) {
+		sections.push("### Theme Usage\n\n");
+		sections.push(`\`\`\`tsx
+<Theme name=${JSON.stringify(themeNames[0])}>
+  <Button>Uses this theme</Button>
+</Theme>
+\`\`\`
+
+`);
+	}
+	sections.push("**Accessing theme values:**\n\n");
+	sections.push("Components access theme values by their bare names:\n\n");
+	const colorProp = getPropName("color");
+	if (syntaxChoice === "string") {
+		sections.push("```tsx\n");
+		sections.push(`<View ${bgProp}="background hover:background-hover" ${colorProp}="color" />
+`);
+		sections.push("```\n\n");
+	} else if (syntaxChoice === "object") {
+		sections.push("```tsx\n");
+		sections.push(`<View ${bgProp}={{ default: 'background', hover: 'background-hover' }} ${colorProp}={{ default: 'color' }} />
+`);
+		sections.push("```\n\n");
+	} else {
+		sections.push("```tsx\n");
+		sections.push("// string form\n");
+		sections.push(`<View ${bgProp}="background hover:background-hover" ${colorProp}="color" />
+
+`);
+		sections.push("// object form\n");
+		sections.push(`<View ${bgProp}={{ default: 'background', hover: 'background-hover' }} ${colorProp}={{ default: 'color' }} />
+`);
+		sections.push("```\n\n");
+	}
+	sections.push("**Special props:**\n\n");
+	sections.push("- `theme=\"inverse\"`: Uses the opposite light or dark sub-theme\n");
+	sections.push("## Tokens\n\n");
+	sections.push("Tokens are design system values referenced by their bare names.\n\n");
+	const tokens = config.tamaguiConfig?.tokens || {};
+	if (tokens.space && Object.keys(tokens.space).length > 0) {
+		sections.push("### Space Tokens\n\n");
+		const spaceTokens = Object.entries(tokens.space).sort(([a], [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("\n"));
+		sections.push("\n\n");
+	}
+	if (tokens.size && Object.keys(tokens.size).length > 0) {
+		sections.push("### Size Tokens\n\n");
+		const sizeTokens = Object.entries(tokens.size).sort(([a], [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("\n"));
+		sections.push("\n\n");
+	}
+	if (tokens.radius && Object.keys(tokens.radius).length > 0) {
+		sections.push("### Radius Tokens\n\n");
+		const radiusTokens = Object.entries(tokens.radius).sort(([a], [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("\n"));
+		sections.push("\n\n");
+	}
+	if (tokens.zIndex && Object.keys(tokens.zIndex).length > 0) {
+		sections.push("### Z-Index Tokens\n\n");
+		const zIndexTokens = Object.entries(tokens.zIndex).sort(([a], [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("\n"));
+		sections.push("\n\n");
+	}
+	let sampleColorBg = "blue-500";
+	let sampleColorText = "color";
+	if (tokens.color && Object.keys(tokens.color).length > 0) {
+		sections.push("### Color Tokens\n\n");
+		const colorKeys = Object.keys(tokens.color).sort();
+		const paletteMap = /* @__PURE__ */ new Map();
+		const standaloneColors = [];
+		for (const key of colorKeys) {
+			const match = key.match(/^([a-z]+)-(\d+)$/);
+			if (match) {
+				const [, palette, step] = match;
+				if (!paletteMap.has(palette)) {
+					paletteMap.set(palette, /* @__PURE__ */ new Set());
+				}
+				paletteMap.get(palette).add(step);
+			} else {
+				standaloneColors.push([key, tokens.color[key]]);
+			}
+		}
+		if (paletteMap.size >= 4) {
+			const palettes = Array.from(paletteMap.keys()).sort().join(", ");
+			sections.push(`**Tailwind Palettes (\`<name>-<50..950>\`):** ${palettes}
+
+`);
+			if (standaloneColors.length > 0) {
+				sections.push("**Named Colors:**\n\n");
+				sections.push(standaloneColors.map(([k, v]) => `- \`${k}\`: ${formatTokenValue(v)}`).join("\n"));
+				sections.push("\n\n");
+			}
+			sampleColorBg = colorKeys.find((k) => k.startsWith("blue-")) || colorKeys[0];
+			sampleColorText = colorKeys.find((k) => k.startsWith("gray-") || k.startsWith("zinc-")) || colorKeys[1] || "color";
+		} else {
+			sections.push(colorKeys.map((key) => `- \`${key}\`: ${formatTokenValue(tokens.color[key])}`).join("\n"));
+			sections.push("\n\n");
+			sampleColorBg = colorKeys[0] || "background";
+			sampleColorText = colorKeys[1] || "color";
+		}
+	} else {
+		sampleColorBg = "background";
+		sampleColorText = "color";
+	}
+	sections.push("### Token Usage\n\n");
+	sections.push("Tokens can be used in component props by their bare names:\n\n");
+	const paddingProp = getPropName("padding");
+	const gapProp = getPropName("gap");
+	const marginProp = getPropName("margin");
+	const widthProp = getPropName("width");
+	const heightProp = getPropName("height");
+	const radiusProp = getPropName("borderRadius");
+	const sampleRadius = tokens.radius?.md ? "md" : Object.keys(tokens.radius || {})[0] || "0px";
+	if (syntaxChoice === "string") {
+		sections.push("```tsx\n");
+		sections.push(`// Space tokens - for margin, padding, gap
+<View ${paddingProp}="4 sm:6" ${gapProp}="2" ${marginProp}="3" />
+
+`);
+		sections.push(`// Size tokens - for width, height, dimensions
+<View ${widthProp}="10 sm:12" ${heightProp}="6" />
 
 `);
-      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 = [];
-  const allComponents = [];
-  for (const componentModule of config.components) {
-    const componentNames = Object.keys(componentModule.nameToInfo);
-    allComponents.push(...componentNames);
-  }
-  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]/));
-    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\n\n");
-  componentsSection.push("The following components are available:\n\n");
-  const allBaseComponents = [...standaloneComponents, ...Array.from(componentGroups.keys())].sort();
-  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("\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("\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]);
-      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:\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\n\n");
-    const spaceTokens = Object.entries(tokens.space).sort(([a], [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("\n"));
-    sections.push("\n\n");
-  }
-  if (tokens.size) {
-    sections.push("### Size Tokens\n\n");
-    const sizeTokens = Object.entries(tokens.size).sort(([a], [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("\n"));
-    sections.push("\n\n");
-  }
-  if (tokens.radius) {
-    sections.push("### Radius Tokens\n\n");
-    const radiusTokens = Object.entries(tokens.radius).sort(([a], [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("\n"));
-    sections.push("\n\n");
-  }
-  if (tokens.zIndex) {
-    sections.push("### Z-Index Tokens\n\n");
-    const zIndexTokens = Object.entries(tokens.zIndex).sort(([a], [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("\n"));
-    sections.push("\n\n");
-  }
-  if (tokens.color) {
-    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("\n"));
-    sections.push("\n\n");
-  }
-  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
+<View ${bgProp}="${sampleColorBg} hover:${sampleColorBg}" ${colorProp}="${sampleColorText}" />
 
 `);
-  sections.push("// Size tokens - for width, height, dimensions\n");
-  sections.push(`<View ${getPropName("width")}="$10" ${getPropName("height")}="$6" />
+		sections.push(`// Radius tokens - for border-radius
+<View ${radiusProp}="${sampleRadius}" />
+`);
+		sections.push("```\n\n");
+	} else if (syntaxChoice === "object") {
+		sections.push("```tsx\n");
+		sections.push(`// Space tokens - for margin, padding, gap
+<View ${paddingProp}={{ default: '4', sm: '6' }} ${gapProp}="2" ${marginProp}="3" />
+
+`);
+		sections.push(`// Size tokens - for width, height, dimensions
+<View ${widthProp}={{ default: '10', sm: '12' }} ${heightProp}="6" />
+
+`);
+		sections.push(`// Color tokens - for colors and backgrounds
+<View ${bgProp}={{ default: '${sampleColorBg}', hover: '${sampleColorBg}' }} ${colorProp}={{ default: '${sampleColorText}' }} />
 
 `);
-  sections.push("// Color tokens - for colors and backgrounds\n");
-  sections.push(`<View ${getPropName("backgroundColor")}="$blue5" ${getPropName("color")}="$gray12" />
+		sections.push(`// Radius tokens - for border-radius
+<View ${radiusProp}="${sampleRadius}" />
+`);
+		sections.push("```\n\n");
+	} else {
+		sections.push("```tsx\n");
+		sections.push("// String form\n");
+		sections.push(`<View ${paddingProp}="4 sm:6" ${widthProp}="10 sm:12" ${bgProp}="${sampleColorBg}" />
+
+`);
+		sections.push("// Object form\n");
+		sections.push(`<View ${paddingProp}={{ default: '4', sm: '6' }} ${widthProp}={{ default: '10', sm: '12' }} ${bgProp}={{ default: '${sampleColorBg}' }} />
 
 `);
-  sections.push("// Radius tokens - for border-radius\n");
-  sections.push(`<View ${getPropName("borderRadius")}="$4" />
-`);
-  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];
-    if (firstMediaName) {
-      sections.push(`<View ${getPropName("width")}="100%" $${firstMediaName}={{ ${getPropName("width")}: "50%" }} />
+		sections.push(`// Space and radius tokens
+<View ${gapProp}="2" ${marginProp}="3" ${heightProp}="6" ${radiusProp}="${sampleRadius}" />
+`);
+		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}**: ${formatMediaQuery(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");
+		const representative = mediaEntries.find(([n]) => n === "sm" || n === "md")?.[0] || mediaEntries.find(([n]) => !n.includes("-"))?.[0] || mediaEntries[0]?.[0];
+		if (representative) {
+			const isIdentifier = /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(representative);
+			const mediaAccess = isIdentifier ? `media.${representative}` : `media['${representative}']`;
+			sections.push("```tsx\n");
+			if (syntaxChoice === "string") {
+				sections.push("// As a clause in the same style value\n");
+				sections.push(`<View ${widthProp}="100% ${representative}:50%" />
 
 `);
-    }
-    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\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("\n"));
-      sections.push("\n\n");
-    }
-  }
-  sections.push(...componentsSection);
-  return sections.join("");
+			} else if (syntaxChoice === "object") {
+				sections.push("// Using the object form\n");
+				sections.push(`<View ${widthProp}={{ default: '100%', '${representative}': '50%' }} />
+
+`);
+			} else {
+				sections.push("// String form and object form\n");
+				sections.push(`<View ${widthProp}="100% ${representative}:50%" />
+`);
+				sections.push(`<View ${widthProp}={{ default: '100%', '${representative}': '50%' }} />
+
+`);
+			}
+			sections.push("// Using the useMedia hook\n");
+			sections.push("const media = useMedia()\n");
+			sections.push(`if (${mediaAccess}) {
+`);
+			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\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("\n"));
+			sections.push("\n\n");
+		}
+	}
+	const componentsSection = [];
+	const componentSet = /* @__PURE__ */ new Set();
+	let barrelExported = false;
+	const candidateModules = ["tamagui", ...(config.components || []).map((c) => c.moduleName)];
+	for (const modName of candidateModules) {
+		if (!modName) continue;
+		try {
+			const mod = require(modName);
+			for (const [key, val] of Object.entries(mod)) {
+				if (/^[A-Z]/.test(key) && (typeof val === "function" || typeof val === "object" && val !== null)) {
+					if (!key.endsWith("Context") && !key.endsWith("Provider") && key !== "Fragment") {
+						componentSet.add(key);
+						barrelExported = true;
+					}
+				}
+			}
+			if (barrelExported) break;
+		} catch {}
+	}
+	if (!barrelExported && config.components) {
+		for (const componentModule of config.components) {
+			for (const name of Object.keys(componentModule.nameToInfo || {})) {
+				componentSet.add(name);
+			}
+		}
+	}
+	const allComponents = Array.from(componentSet).filter((name) => {
+		if (name.endsWith("Frame")) {
+			const base = name.replace(/Frame$/, "");
+			if (componentSet.has(base) || name.startsWith("Popper") || name.startsWith("DialogPortal") || name.startsWith("SelectScrollButton")) {
+				return false;
+			}
+		}
+		return true;
+	});
+	componentsSection.push("## Components\n\n");
+	componentsSection.push("Available named exports (import these names directly):\n\n");
+	for (const name of allComponents.sort()) {
+		componentsSection.push(`- ${name}
+`);
+	}
+	componentsSection.push("\n");
+	sections.push(...componentsSection);
+	return sections.join("");
 }
 function formatTokenValue(value) {
-  if (typeof value === "object" && value !== null && "val" in value) {
-    return String(value.val);
-  }
-  return String(value);
-}
+	if (typeof value === "object" && value !== null && "val" in value) {
+		return String(value.val);
+	}
+	return String(value);
+}
+function formatMediaQuery(query) {
+	if (typeof query !== "object" || query === null) {
+		return String(query);
+	}
+	const parts = [];
+	if (query.minWidth !== void 0) {
+		parts.push(`min-width: ${query.minWidth}px (screens >= ${query.minWidth}px wide)`);
+	}
+	if (query.maxWidth !== void 0) {
+		parts.push(`max-width: ${query.maxWidth}px (screens <= ${query.maxWidth}px wide)`);
+	}
+	if (query.minHeight !== void 0) {
+		parts.push(`min-height: ${query.minHeight}px (screens >= ${query.minHeight}px tall)`);
+	}
+	if (query.maxHeight !== void 0) {
+		parts.push(`max-height: ${query.maxHeight}px (screens <= ${query.maxHeight}px tall)`);
+	}
+	if (query.hover !== void 0) {
+		parts.push(`pointer: hover (${query.hover})`);
+	}
+	if (query.pointer !== void 0) {
+		parts.push(`pointer: ${query.pointer}`);
+	}
+	if (query.prefersReducedMotion !== void 0) {
+		parts.push(`prefers-reduced-motion: ${query.prefersReducedMotion}`);
+	}
+	if (parts.length === 0) {
+		return JSON.stringify(query);
+	}
+	return parts.join(", ");
+}