@nghitrum/dsforge 0.1.5-alpha.8 → 0.2.0

package/dist/cli/index.js

@@ -3,16 +3,16 @@ import {
   generateChangelog,
   generatePackageJson,
   generateTsConfig
-} from "../chunk-QHE35QQQ.js";
+} from "../chunk-ZZRPNO6Z.js";
 import {
+  CONTROL_SIZE_PRESETS,
   PRESETS,
   PRESET_BASE_UNITS,
   RADIUS_PRESETS,
   SPACING_PRESETS,
   applyPreset,
-  buildSemanticSpacing,
-  isProUnlocked
-} from "../chunk-JUMR3N5J.js";
+  buildSemanticSpacing
+} from "../chunk-5YT3VNE6.js";
 
 // src/cli/index.ts
 import { program } from "commander";
@@ -737,15 +737,7 @@ async function runInit(cwd, options) {
   }
   const name = rawName.replace(/\s+/g, "-").toLowerCase();
   let preset;
-  if (!isProUnlocked()) {
-    if (options.preset && options.preset !== "comfortable") {
-      logger.hint(
-        `Preset "${options.preset}" requires dsforge Pro`,
-        `Set DSFORGE_KEY to unlock compact and spacious. Using comfortable.`
-      );
-    }
-    preset = "comfortable";
-  } else if (options.preset && VALID_PRESETS.includes(options.preset)) {
+  if (options.preset && VALID_PRESETS.includes(options.preset)) {
     preset = options.preset;
   } else {
     const answer = await ask(
@@ -1773,6 +1765,19 @@ function emitBaseCss(config, resolution) {
   if (typoEntries.length > 0) {
     sections.push(emitBlock(":root", typoEntries, "Typography"));
   }
+  const currentPreset = config.philosophy?.density ?? "comfortable";
+  const controlSizes = CONTROL_SIZE_PRESETS[currentPreset] ?? CONTROL_SIZE_PRESETS.comfortable;
+  sections.push(
+    emitBlock(
+      ":root",
+      [
+        ["control-size-sm", `${controlSizes.sm}px`],
+        ["control-size-md", `${controlSizes.md}px`],
+        ["control-size-lg", `${controlSizes.lg}px`]
+      ],
+      "Control sizes"
+    )
+  );
   const radiusEntries = Object.entries(
     config.radius ?? {}
   ).filter(([, v]) => v !== void 0).map(([k, v]) => [`radius-${k}`, v === 9999 ? "9999px" : `${v}px`]);
@@ -1854,6 +1859,10 @@ function emitDensityCss(config) {
     for (const [key, value] of Object.entries(radius)) {
       entries.push([`radius-${key}`, value === 9999 ? "9999px" : `${value}px`]);
     }
+    const controlSizes = CONTROL_SIZE_PRESETS[preset];
+    entries.push(["control-size-sm", `${controlSizes.sm}px`]);
+    entries.push(["control-size-md", `${controlSizes.md}px`]);
+    entries.push(["control-size-lg", `${controlSizes.lg}px`]);
     lines.push(emitBlock(`[data-density="${preset}"]`, entries, `Preset: ${preset}`));
     lines.push("");
   }
@@ -1889,192 +1898,6 @@ function generateCssFiles(config, resolution) {
   return files;
 }
 
-// src/generators/metadata/generator.ts
-var COMPONENT_DEFAULTS = {
-  button: {
-    description: "Triggers an action or navigation. The primary interactive element.",
-    role: "action-trigger",
-    hierarchyLevel: "primary",
-    interactionModel: "synchronous",
-    layoutImpact: "inline",
-    destructive: false,
-    sizes: ["sm", "md", "lg"]
-  },
-  input: {
-    description: "Accepts user text input. Use with a label for accessibility.",
-    role: "data-entry",
-    hierarchyLevel: "primary",
-    interactionModel: "synchronous",
-    layoutImpact: "block",
-    destructive: false,
-    sizes: ["sm", "md", "lg"]
-  },
-  card: {
-    description: "Groups related content with optional header, body, and footer slots.",
-    role: "content-container",
-    hierarchyLevel: "utility",
-    interactionModel: "none",
-    layoutImpact: "block",
-    destructive: false
-  },
-  badge: {
-    description: "Compact label for status, categories, or counts. Display-only \u2014 not interactive.",
-    role: "status-indicator",
-    hierarchyLevel: "utility",
-    interactionModel: "none",
-    layoutImpact: "inline",
-    destructive: false,
-    sizes: ["sm", "md", "lg"]
-  },
-  checkbox: {
-    description: "Binary toggle for boolean values. Supports indeterminate state for partial selections.",
-    role: "data-entry",
-    hierarchyLevel: "primary",
-    interactionModel: "synchronous",
-    layoutImpact: "inline",
-    destructive: false,
-    sizes: ["sm", "md", "lg"]
-  },
-  radio: {
-    description: "Single selection within a mutually exclusive group. Always use inside RadioGroup.",
-    role: "data-entry",
-    hierarchyLevel: "primary",
-    interactionModel: "synchronous",
-    layoutImpact: "inline",
-    destructive: false,
-    sizes: ["sm", "md", "lg"]
-  },
-  select: {
-    description: "Dropdown picker for selecting from a list of options. Wraps native <select> for accessibility.",
-    role: "data-entry",
-    hierarchyLevel: "primary",
-    interactionModel: "synchronous",
-    layoutImpact: "block",
-    destructive: false,
-    sizes: ["sm", "md", "lg"]
-  },
-  toast: {
-    description: "Feedback messages for user actions. Alert is inline; Toast is an overlay with auto-dismiss.",
-    role: "feedback",
-    hierarchyLevel: "utility",
-    interactionModel: "asynchronous",
-    layoutImpact: "overlay",
-    destructive: false
-  },
-  spinner: {
-    description: "Loading indicator for async operations. Use with an accessible label for screen readers.",
-    role: "loading-indicator",
-    hierarchyLevel: "utility",
-    interactionModel: "asynchronous",
-    layoutImpact: "inline",
-    destructive: false,
-    sizes: ["xs", "sm", "md", "lg", "xl"]
-  }
-};
-function buildComponentMetadata(componentName, rule, config) {
-  const defaults = COMPONENT_DEFAULTS[componentName.toLowerCase()] ?? {};
-  const variants = rule.allowedVariants ?? ["default"];
-  const requiredProps = rule.requiredProps ?? [];
-  const tokens = {};
-  for (const [tokenName] of Object.entries(rule.tokens ?? {})) {
-    tokens[tokenName] = `--${tokenName}`;
-  }
-  const meta = {
-    component: pascalCase(componentName),
-    version: config.meta.version,
-    description: defaults.description ?? `A ${componentName} component.`,
-    role: defaults.role ?? "ui-element",
-    hierarchyLevel: defaults.hierarchyLevel ?? "utility",
-    interactionModel: defaults.interactionModel ?? "none",
-    layoutImpact: defaults.layoutImpact ?? "inline",
-    destructive: componentName.toLowerCase().includes("delete") || variants.includes("danger"),
-    allowedVariants: variants,
-    defaultVariant: variants[0] ?? "default",
-    requiredProps,
-    optionalProps: buildOptionalProps(componentName, defaults),
-    tokens,
-    accessibilityContract: {
-      keyboard: rule.a11y?.keyboard ?? true,
-      focusRing: rule.a11y?.focusRing ?? true,
-      ariaLabel: rule.a11y?.ariaLabel ?? "optional",
-      ...rule.a11y?.role ? { role: rule.a11y.role } : {}
-    },
-    governanceRules: {
-      ...rule.maxWidth ? { maxWidth: rule.maxWidth } : {},
-      ...rule.allowedRadius ? { allowedRadius: rule.allowedRadius } : {},
-      ...rule.allowedShadows ? { allowedShadows: rule.allowedShadows } : {},
-      ...rule.colorPalette ? { colorPalette: rule.colorPalette } : {}
-    }
-  };
-  if (defaults.sizes) {
-    meta.sizes = defaults.sizes;
-  }
-  return meta;
-}
-function buildOptionalProps(componentName, _defaults) {
-  const common = ["className", "style", "id", "data-testid"];
-  const byComponent = {
-    button: [
-      "size",
-      "loading",
-      "disabled",
-      "fullWidth",
-      "iconLeft",
-      "iconRight",
-      "onClick"
-    ],
-    input: [
-      "size",
-      "disabled",
-      "label",
-      "helperText",
-      "errorMessage",
-      "placeholder",
-      "startAdornment",
-      "endAdornment",
-      "onChange"
-    ],
-    card: ["maxWidth", "noPadding", "onClick"],
-    badge: ["size", "dot"],
-    checkbox: ["size", "disabled", "label", "helperText", "indeterminate", "checked", "onChange"],
-    radio: ["size", "disabled", "label", "value", "onChange"],
-    select: ["size", "disabled", "label", "helperText", "errorMessage", "placeholder", "options", "fullWidth", "onChange"],
-    toast: ["variant", "title", "dismissible", "duration", "onDismiss"],
-    spinner: ["size", "variant", "label"]
-  };
-  return [...byComponent[componentName.toLowerCase()] ?? [], ...common];
-}
-function pascalCase(str) {
-  return str.charAt(0).toUpperCase() + str.slice(1);
-}
-function buildIndexMetadata(config, componentNames, tokenCount) {
-  return {
-    name: config.meta.name,
-    version: config.meta.version,
-    generatedAt: (/* @__PURE__ */ new Date()).toISOString(),
-    components: componentNames.map(pascalCase),
-    tokenCount,
-    themes: Object.keys(config.themes ?? {})
-  };
-}
-function generateMetadata(config, rules, tokenCount) {
-  const files = [];
-  const componentNames = Object.keys(rules);
-  for (const [componentName, rule] of Object.entries(rules)) {
-    const metadata = buildComponentMetadata(componentName, rule, config);
-    files.push({
-      filename: `${componentName}.json`,
-      content: JSON.stringify(metadata, null, 2)
-    });
-  }
-  const index = buildIndexMetadata(config, componentNames, tokenCount);
-  files.push({
-    filename: "index.json",
-    content: JSON.stringify(index, null, 2)
-  });
-  return files;
-}
-
 // src/adapters/react/components/button.ts
 function generateButton(config, rule) {
   const variants = rule?.allowedVariants ?? [
@@ -2864,9 +2687,17 @@ export interface CheckboxProps
 // \u2500\u2500\u2500 Size map \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
 
 const SIZE_BOX: Record<"sm" | "md" | "lg", string> = {
-  sm: "14px",
-  md: "16px",
-  lg: "20px",
+  sm: "var(--control-size-sm, 14px)",
+  md: "var(--control-size-md, 16px)",
+  lg: "var(--control-size-lg, 20px)",
+};
+
+// SVG check/dash icon fits inside the box with a 6px inset, via calc() so it
+// tracks the CSS var when density changes at runtime.
+const SVG_SIZE: Record<"sm" | "md" | "lg", string> = {
+  sm: "calc(var(--control-size-sm, 14px) - 6px)",
+  md: "calc(var(--control-size-md, 16px) - 6px)",
+  lg: "calc(var(--control-size-lg, 20px) - 6px)",
 };
 
 const SIZE_FONT: Record<"sm" | "md" | "lg", string> = {
@@ -3010,8 +2841,7 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
           <span style={boxStyle} aria-hidden="true">
             {isActive && (
               <svg
-                width={parseInt(boxSize) - 6}
-                height={parseInt(boxSize) - 6}
+                style={{ width: SVG_SIZE[size], height: SVG_SIZE[size] }}
                 viewBox="0 0 10 10"
                 fill="none"
                 stroke="#fff"
@@ -3113,9 +2943,9 @@ export interface RadioGroupProps {
 // \u2500\u2500\u2500 Size map \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
 
 const SIZE_BOX: Record<"sm" | "md" | "lg", string> = {
-  sm: "14px",
-  md: "16px",
-  lg: "20px",
+  sm: "var(--control-size-sm, 14px)",
+  md: "var(--control-size-md, 16px)",
+  lg: "var(--control-size-lg, 20px)",
 };
 
 const SIZE_FONT: Record<"sm" | "md" | "lg", string> = {
@@ -4086,62 +3916,7 @@ function generateThemeProvider(config) {
   const themeNames = Object.keys(config.themes ?? { light: {}, dark: {} });
   const defaultTheme = themeNames.includes("light") ? "light" : themeNames[0] ?? "light";
   const themeType = themeNames.map((t) => `"${t}"`).join(" | ");
-  const isPro = isProUnlocked();
   const defaultDensity = config.meta.preset ?? "comfortable";
-  const densityImport = isPro ? `
-import "../tokens/density.css";` : "";
-  const densityTypes = isPro ? `
-export type DensityName = "compact" | "comfortable" | "spacious";
-` : "";
-  const densityContextTypes = isPro ? `
-export interface DensityContextValue {
-  density: DensityName;
-  setDensity: (density: DensityName) => void;
-}
-` : "";
-  const densityContext = isPro ? `
-export const DensityContext = React.createContext<DensityContextValue>({
-  density: "${defaultDensity}",
-  setDensity: () => undefined,
-});
-
-/**
- * Hook to read and change the current density.
- * Must be used inside a <ThemeProvider>.
- */
-export function useDensity(): DensityContextValue {
-  return React.useContext(DensityContext);
-}
-` : "";
-  const densityProp = isPro ? `
-  /** Component density. Requires density.css to be imported. Defaults to "${defaultDensity}". */
-  density?: DensityName;` : "";
-  const densityOnChangeProp = isPro ? `
-  /** Called when setDensity is invoked. */
-  onDensityChange?: (density: DensityName) => void;` : "";
-  const densityState = isPro ? `
-  const [density, setDensityState] = React.useState<DensityName>(initialDensity);
-
-  React.useEffect(() => {
-    setDensityState(initialDensity);
-  }, [initialDensity]);
-
-  const setDensity = React.useCallback(
-    (next: DensityName) => {
-      setDensityState(next);
-      onDensityChange?.(next);
-    },
-    [onDensityChange],
-  );
-` : "";
-  const densityDestructure = isPro ? `,
-  density: initialDensity = "${defaultDensity}",
-  onDensityChange,` : "";
-  const densityProviderOpen = isPro ? `
-      <DensityContext.Provider value={{ density, setDensity }}>` : "";
-  const densityDataAttr = isPro ? ` data-density={density}` : "";
-  const densityProviderClose = isPro ? `
-      </DensityContext.Provider>` : "";
   return `/**
  * ThemeProvider \u2014 ${config.meta.name}
  *
@@ -4153,27 +3928,39 @@ export function useDensity(): DensityContextValue {
  *   import "@${config.meta.name}/tokens/light.css";  // or dark.css
  *   import { ThemeProvider } from "@${config.meta.name}";
  *
- *   <ThemeProvider theme="light"${isPro ? ` density="${defaultDensity}"` : ""}>
+ *   <ThemeProvider theme="light" density="${defaultDensity}">
  *     <App />
  *   </ThemeProvider>
  */
 
-import React from "react";${densityImport}
+import React from "react";
+import "../tokens/density.css";
 
 // \u2500\u2500\u2500 Types \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
 
 export type ThemeName = ${themeType};
-${densityTypes}
+
+export type DensityName = "compact" | "comfortable" | "spacious";
+
 export interface ThemeContextValue {
   theme: ThemeName;
   setTheme: (theme: ThemeName) => void;
 }
-${densityContextTypes}
+
+export interface DensityContextValue {
+  density: DensityName;
+  setDensity: (density: DensityName) => void;
+}
+
 export interface ThemeProviderProps {
   /** Initial theme. Defaults to "${defaultTheme}". */
   theme?: ThemeName;
   /** Called when setTheme is invoked \u2014 use to persist theme preference. */
-  onThemeChange?: (theme: ThemeName) => void;${densityProp}${densityOnChangeProp}
+  onThemeChange?: (theme: ThemeName) => void;
+  /** Component density. Requires density.css to be imported. Defaults to "${defaultDensity}". */
+  density?: DensityName;
+  /** Called when setDensity is invoked. */
+  onDensityChange?: (density: DensityName) => void;
   children: React.ReactNode;
 }
 
@@ -4191,12 +3978,27 @@ export const ThemeContext = React.createContext<ThemeContextValue>({
 export function useTheme(): ThemeContextValue {
   return React.useContext(ThemeContext);
 }
-${densityContext}
+
+export const DensityContext = React.createContext<DensityContextValue>({
+  density: "${defaultDensity}",
+  setDensity: () => undefined,
+});
+
+/**
+ * Hook to read and change the current density.
+ * Must be used inside a <ThemeProvider>.
+ */
+export function useDensity(): DensityContextValue {
+  return React.useContext(DensityContext);
+}
+
 // \u2500\u2500\u2500 Provider \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
 
 export function ThemeProvider({
   theme: initialTheme = "${defaultTheme}",
-  onThemeChange,${densityDestructure}
+  onThemeChange,
+  density: initialDensity = "${defaultDensity}",
+  onDensityChange,
   children,
 }: ThemeProviderProps) {
   const [theme, setThemeState] = React.useState<ThemeName>(initialTheme);
@@ -4212,13 +4014,29 @@ export function ThemeProvider({
     },
     [onThemeChange],
   );
-${densityState}
-  return (${densityProviderOpen}
+
+  const [density, setDensityState] = React.useState<DensityName>(initialDensity);
+
+  React.useEffect(() => {
+    setDensityState(initialDensity);
+  }, [initialDensity]);
+
+  const setDensity = React.useCallback(
+    (next: DensityName) => {
+      setDensityState(next);
+      onDensityChange?.(next);
+    },
+    [onDensityChange],
+  );
+
+  return (
+      <DensityContext.Provider value={{ density, setDensity }}>
       <ThemeContext.Provider value={{ theme, setTheme }}>
-        <div data-theme={theme}${densityDataAttr} style={{ display: "contents" }}>
+        <div data-theme={theme} data-density={density} style={{ display: "contents" }}>
           {children}
         </div>
-      </ThemeContext.Provider>${densityProviderClose}
+      </ThemeContext.Provider>
+      </DensityContext.Provider>
   );
 }
 `;
@@ -4235,9 +4053,9 @@ function generateComponentIndex(config, componentNames) {
     ""
   ];
   for (const name of componentNames) {
-    lines.push(`export * from "./${name}";`);
+    lines.push(`export * from "./components/${name}/${name}";`);
   }
-  lines.push(`export * from "./ThemeProvider";`);
+  lines.push(`export * from "./components/ThemeProvider/ThemeProvider";`);
   lines.push("");
   return lines.join("\n");
 }
@@ -4875,13 +4693,11 @@ async function runGenerate(cwd, options) {
       await writeFile(path3.join(tokensDir, filename), content);
       logger.dim(`  \u2192 tokens/${filename}`);
     }
-    if (isProUnlocked()) {
-      await writeFile(
-        path3.join(tokensDir, "density.css"),
-        emitDensityCss(config)
-      );
-      logger.dim(`  \u2192 tokens/density.css`);
-    }
+    await writeFile(
+      path3.join(tokensDir, "density.css"),
+      emitDensityCss(config)
+    );
+    logger.dim(`  \u2192 tokens/density.css`);
     const tokenFiles = reactAdapter.generateTokenFiles(config, resolution);
     for (const { filename, content } of tokenFiles) {
       await writeFile(path3.join(tokensDir, filename), content);
@@ -4891,21 +4707,53 @@ async function runGenerate(cwd, options) {
   }
   if (!only || only === "components") {
     logger.step("Generating React components...");
-    const srcDir = path3.join(outRoot, "src");
-    await ensureDir(srcDir);
+    const componentsDir = path3.join(outRoot, "components");
+    await ensureDir(componentsDir);
     const generatedNames = [];
+    const generatedComponentJsons = [];
+    const flatTokens = {};
+    for (const [k, v] of Object.entries(resolution.tokens)) {
+      flatTokens[`--${k.replace(/^(global|semantic|component)\./, "")}`] = v;
+    }
+    const lightOverrides = config.themes?.["light"] ?? {};
+    const darkOverrides = config.themes?.["dark"] ?? {};
+    const lightCssVars = {
+      ...flatTokens,
+      ...Object.fromEntries(Object.entries(lightOverrides).map(([k, v]) => [`--${k}`, String(v)]))
+    };
+    const darkCssVars = {
+      ...flatTokens,
+      ...Object.fromEntries(Object.entries(darkOverrides).map(([k, v]) => [`--${k}`, String(v)]))
+    };
+    const resolvedCssVars = { light: lightCssVars, dark: darkCssVars };
+    const { generateComponentJson } = await import("../generateComponentJson-XBEUWCW6.js");
+    const { generateComponentMetadata } = await import("../generateComponentMetadata-2L5VNERD.js");
     for (const componentName of REACT_COMPONENTS) {
+      const pascalName = componentName.charAt(0).toUpperCase() + componentName.slice(1);
       try {
         const { filename, content } = reactAdapter.generateComponent(
           componentName,
           config,
           rules[componentName]
         );
-        await writeFile(path3.join(srcDir, filename), content);
-        logger.dim(`  \u2192 src/${filename}`);
-        generatedNames.push(
-          componentName.charAt(0).toUpperCase() + componentName.slice(1)
+        const componentSubDir = path3.join(componentsDir, pascalName);
+        await ensureDir(componentSubDir);
+        await writeFile(path3.join(componentSubDir, filename), content);
+        logger.dim(`  \u2192 components/${pascalName}/${filename}`);
+        generatedNames.push(pascalName);
+        const componentJson = generateComponentJson(pascalName, resolvedCssVars);
+        generatedComponentJsons.push(componentJson);
+        await writeFile(
+          path3.join(componentSubDir, `${pascalName}.json`),
+          JSON.stringify(componentJson, null, 2)
+        );
+        logger.dim(`  \u2192 components/${pascalName}/${pascalName}.json`);
+        const metadata = generateComponentMetadata(pascalName);
+        await writeFile(
+          path3.join(componentSubDir, `${pascalName}.metadata.json`),
+          JSON.stringify(metadata, null, 2)
         );
+        logger.dim(`  \u2192 components/${pascalName}/${pascalName}.metadata.json`);
       } catch (err) {
         logger.warn(
           `[dsforge] Could not generate ${componentName} \u2014 ${err.message}`
@@ -4913,23 +4761,31 @@ async function runGenerate(cwd, options) {
       }
     }
     const { filename: tpFile, content: tpContent } = reactAdapter.generateThemeProvider(config);
-    await writeFile(path3.join(srcDir, tpFile), tpContent);
-    logger.dim(`  \u2192 src/${tpFile}`);
+    const tpDir = path3.join(componentsDir, "ThemeProvider");
+    await ensureDir(tpDir);
+    await writeFile(path3.join(tpDir, tpFile), tpContent);
+    logger.dim(`  \u2192 components/ThemeProvider/${tpFile}`);
+    try {
+      const tpJson = generateComponentJson("ThemeProvider", resolvedCssVars);
+      generatedComponentJsons.push(tpJson);
+      await writeFile(
+        path3.join(tpDir, "ThemeProvider.json"),
+        JSON.stringify(tpJson, null, 2)
+      );
+      logger.dim(`  \u2192 components/ThemeProvider/ThemeProvider.json`);
+      const tpMeta = generateComponentMetadata("ThemeProvider");
+      await writeFile(
+        path3.join(tpDir, "ThemeProvider.metadata.json"),
+        JSON.stringify(tpMeta, null, 2)
+      );
+      logger.dim(`  \u2192 components/ThemeProvider/ThemeProvider.metadata.json`);
+    } catch {
+    }
     const { filename: idxFile, content: idxContent } = reactAdapter.generateComponentIndex(config, generatedNames);
-    await writeFile(path3.join(srcDir, idxFile), idxContent);
-    logger.dim(`  \u2192 src/${idxFile}`);
+    await writeFile(path3.join(outRoot, idxFile), idxContent);
+    logger.dim(`  \u2192 ${idxFile}`);
     logger.success(`${generatedNames.length} components generated`);
-  }
-  if (isProUnlocked() && (!only || only === "metadata")) {
-    logger.step("Writing AI metadata...");
-    const metaDir = path3.join(outRoot, "metadata");
-    await ensureDir(metaDir);
-    const metaFiles = generateMetadata(config, fullRules, tokenCount);
-    for (const { filename, content } of metaFiles) {
-      await writeFile(path3.join(metaDir, filename), content);
-      logger.dim(`  \u2192 metadata/${filename}`);
-    }
-    logger.success(`Metadata written (${metaFiles.length} files)`);
+    globalThis["__dsforgGeneratedJsons"] = generatedComponentJsons;
   }
   if (!only) {
     logger.step("Writing package files...");
@@ -4940,28 +4796,80 @@ async function runGenerate(cwd, options) {
     const tsConfig = generateTsConfig();
     await writeFile(path3.join(outRoot, "tsconfig.json"), tsConfig);
     logger.dim(`  \u2192 tsconfig.json`);
-    const { generateReadme } = await import("../emitter-KNYIQTS5.js");
+    const { generateReadme } = await import("../emitter-IC77G4QF.js");
     await writeFile(
       path3.join(outRoot, "README.md"),
       generateReadme(config, componentNames)
     );
     logger.dim(`  \u2192 README.md`);
     const changelogPath = path3.join(outRoot, "CHANGELOG.md");
-    const fsExtra2 = await import("fs-extra");
-    const fsE2 = fsExtra2.default ?? fsExtra2;
+    const fsExtra = await import("fs-extra");
+    const fsE2 = fsExtra.default ?? fsExtra;
     if (!await fsE2.pathExists(changelogPath)) {
       await writeFile(changelogPath, generateChangelog(config));
       logger.dim(`  \u2192 CHANGELOG.md (seeded)`);
     }
     logger.success(`Package files written`);
   }
+  if (!only || only === "components") {
+    logger.step("Writing registry + AI outputs...");
+    const generatedJsons = globalThis["__dsforgGeneratedJsons"] ?? [];
+    const { generateRegistry } = await import("../generateRegistry-3MEZDJAJ.js");
+    const {
+      generateSystemPrompt,
+      generateComponentsJson,
+      generateCursorContext,
+      generateCopilotInstructions
+    } = await import("../generateAiFolder-3OOFWBH7.js");
+    const systemName = config.meta.name;
+    const version = config.meta.version;
+    const registry = generateRegistry(systemName, version, generatedJsons);
+    await writeFile(path3.join(outRoot, "registry.json"), JSON.stringify(registry, null, 2));
+    logger.dim(`  \u2192 registry.json`);
+    const { COMPONENT_METADATA_DEFINITIONS } = await import("../componentDefinitions-5LFCNFQY.js");
+    const metadataList = generatedJsons.map((c) => COMPONENT_METADATA_DEFINITIONS[c.name]).filter((m) => Boolean(m));
+    const flatTokensForAi = {};
+    for (const [k, v] of Object.entries(resolution.tokens)) {
+      const cssVar2 = `--${k.replace(/^(global|semantic|component)\./, "")}`;
+      flatTokensForAi[cssVar2] = {
+        light: config.themes?.["light"]?.[cssVar2.slice(2)] ?? v,
+        dark: config.themes?.["dark"]?.[cssVar2.slice(2)] ?? v
+      };
+    }
+    const aiDir = path3.join(outRoot, "ai");
+    await ensureDir(aiDir);
+    const cursorDir = path3.join(aiDir, ".cursor");
+    await ensureDir(cursorDir);
+    const componentNames = generatedJsons.map((c) => c.name);
+    await writeFile(
+      path3.join(aiDir, "system-prompt.md"),
+      generateSystemPrompt(systemName, flatTokensForAi, componentNames)
+    );
+    logger.dim(`  \u2192 ai/system-prompt.md`);
+    await writeFile(
+      path3.join(aiDir, "components.json"),
+      generateComponentsJson(systemName, generatedJsons, metadataList)
+    );
+    logger.dim(`  \u2192 ai/components.json`);
+    await writeFile(
+      path3.join(cursorDir, "context.md"),
+      generateCursorContext(systemName)
+    );
+    logger.dim(`  \u2192 ai/.cursor/context.md`);
+    await writeFile(
+      path3.join(outRoot, "copilot-instructions.md"),
+      generateCopilotInstructions(systemName)
+    );
+    logger.dim(`  \u2192 copilot-instructions.md`);
+    logger.success(`Registry + AI outputs written`);
+  }
   logger.step("Generating showcase...");
-  const { generateShowcase } = await import("../html-LQHDCSG4.js");
+  const { generateShowcase } = await import("../html-4DD6GOHE.js");
   const showcaseHtml = generateShowcase(config, resolution);
   await writeFile(path3.join(outRoot, "showcase.html"), showcaseHtml);
   logger.dim(`  \u2192 showcase.html`);
-  const fsExtra = await import("fs-extra");
-  const fsE = fsExtra.default ?? fsExtra;
+  const fsExtraShowcase = await import("fs-extra");
+  const fsE = fsExtraShowcase.default ?? fsExtraShowcase;
   const faviconSrc = path3.join(cwd, "assets", "favicon.svg");
   const faviconDest = path3.join(outRoot, "assets", "favicon.svg");
   if (await fsE.pathExists(faviconSrc)) {
@@ -5343,7 +5251,7 @@ async function runMenu() {
 // package.json
 var package_default = {
   name: "@nghitrum/dsforge",
-  version: "0.1.5-alpha.8",
+  version: "0.2.0",
   description: "AI-native design system generator \u2014 tokens \u2192 components \u2192 docs \u2192 npm",
   keywords: [
     "design-system",