@nghitrum/dsforge 0.1.5-alpha.1 → 0.1.5-alpha.10

package/dist/cli/index.js

@@ -3,7 +3,17 @@ import {
   generateChangelog,
   generatePackageJson,
   generateTsConfig
-} from "../chunk-RI3XDGKU.js";
+} from "../chunk-ZZRPNO6Z.js";
+import {
+  CONTROL_SIZE_PRESETS,
+  PRESETS,
+  PRESET_BASE_UNITS,
+  RADIUS_PRESETS,
+  SPACING_PRESETS,
+  applyPreset,
+  buildSemanticSpacing,
+  isProUnlocked
+} from "../chunk-YUPXTQZ5.js";
 
 // src/cli/index.ts
 import { program } from "commander";
@@ -399,43 +409,6 @@ async function confirm(question) {
 }
 
 // src/cli/commands/init.ts
-var SPACING_PRESETS = {
-  compact: {
-    "1": 2,
-    "2": 4,
-    "3": 8,
-    "4": 12,
-    "5": 16,
-    "6": 24,
-    "7": 32,
-    "8": 48
-  },
-  comfortable: {
-    "1": 4,
-    "2": 8,
-    "3": 12,
-    "4": 16,
-    "5": 24,
-    "6": 32,
-    "7": 48,
-    "8": 64
-  },
-  spacious: {
-    "1": 6,
-    "2": 12,
-    "3": 18,
-    "4": 24,
-    "5": 36,
-    "6": 48,
-    "7": 72,
-    "8": 96
-  }
-};
-var RADIUS_PRESETS = {
-  compact: { none: 0, sm: 2, md: 3, lg: 6, xl: 10, full: 9999 },
-  comfortable: { none: 0, sm: 2, md: 4, lg: 8, xl: 16, full: 9999 },
-  spacious: { none: 0, sm: 3, md: 6, lg: 12, xl: 20, full: 9999 }
-};
 function buildInitialConfig(name, preset = "comfortable") {
   const spacing = SPACING_PRESETS[preset];
   const radius = RADIUS_PRESETS[preset];
@@ -626,19 +599,9 @@ function buildInitialConfig(name, preset = "comfortable") {
       }
     },
     spacing: {
-      baseUnit: preset === "compact" ? 2 : preset === "spacious" ? 6 : 4,
+      baseUnit: PRESET_BASE_UNITS[preset],
       scale: spacing,
-      semantic: {
-        "component-padding-xs": `${spacing[1]}`,
-        "component-padding-sm": `${spacing[2]}`,
-        "component-padding-md": `${spacing[4]}`,
-        "component-padding-lg": `${spacing[5]}`,
-        "layout-gap-xs": `${spacing[2]}`,
-        "layout-gap-sm": `${spacing[3]}`,
-        "layout-gap-md": `${spacing[5]}`,
-        "layout-gap-lg": `${spacing[6]}`,
-        "layout-section": `${spacing[7]}`
-      }
+      semantic: buildSemanticSpacing(spacing)
     },
     radius,
     elevation: {
@@ -775,7 +738,15 @@ async function runInit(cwd, options) {
   }
   const name = rawName.replace(/\s+/g, "-").toLowerCase();
   let preset;
-  if (options.preset && VALID_PRESETS.includes(options.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)) {
     preset = options.preset;
   } else {
     const answer = await ask(
@@ -1803,6 +1774,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`]);
@@ -1861,6 +1845,38 @@ function emitThemeCss(themeName, themeOverrides, config) {
   lines.push(emitBlock(`:root[data-theme="${themeName}"]`, entries));
   return lines.join("\n") + "\n";
 }
+function emitDensityCss(config) {
+  const lines = [
+    `/* \u2500\u2500\u2500 ${config.meta.name} \u2014 density presets \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 */`,
+    `/* Generated by dsforge. Do not edit manually.                            */`,
+    `/* Pro feature: import this file to enable runtime density switching.     */`,
+    `/* Usage: <html data-density="compact | comfortable | spacious">          */`,
+    `/*   or wrap with <DensityProvider density="compact">                     */`,
+    ""
+  ];
+  for (const preset of PRESETS) {
+    const scale = SPACING_PRESETS[preset];
+    const radius = RADIUS_PRESETS[preset];
+    const semantic = buildSemanticSpacing(scale);
+    const entries = [];
+    for (const [key, value] of Object.entries(scale)) {
+      entries.push([`spacing-${key}`, `${value}px`]);
+    }
+    for (const [key, value] of Object.entries(semantic)) {
+      entries.push([key, `${value}px`]);
+    }
+    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("");
+  }
+  return lines.join("\n");
+}
 function generateCssFiles(config, resolution) {
   const files = [];
   files.push({
@@ -1891,192 +1907,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 ?? [
@@ -2866,9 +2696,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> = {
@@ -3012,8 +2850,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"
@@ -3115,9 +2952,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> = {
@@ -4088,6 +3925,62 @@ 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}
  *
@@ -4099,27 +3992,27 @@ function generateThemeProvider(config) {
  *   import "@${config.meta.name}/tokens/light.css";  // or dark.css
  *   import { ThemeProvider } from "@${config.meta.name}";
  *
- *   <ThemeProvider theme="light">
+ *   <ThemeProvider theme="light"${isPro ? ` density="${defaultDensity}"` : ""}>
  *     <App />
  *   </ThemeProvider>
  */
 
-import React from "react";
+import React from "react";${densityImport}
 
 // \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 interface ThemeContextValue {
   theme: ThemeName;
   setTheme: (theme: ThemeName) => void;
 }
-
+${densityContextTypes}
 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;
+  onThemeChange?: (theme: ThemeName) => void;${densityProp}${densityOnChangeProp}
   children: React.ReactNode;
 }
 
@@ -4137,12 +4030,12 @@ export const ThemeContext = React.createContext<ThemeContextValue>({
 export function useTheme(): ThemeContextValue {
   return React.useContext(ThemeContext);
 }
-
+${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,
+  onThemeChange,${densityDestructure}
   children,
 }: ThemeProviderProps) {
   const [theme, setThemeState] = React.useState<ThemeName>(initialTheme);
@@ -4158,13 +4051,13 @@ export function ThemeProvider({
     },
     [onThemeChange],
   );
-
-  return (
-    <ThemeContext.Provider value={{ theme, setTheme }}>
-      <div data-theme={theme} style={{ display: "contents" }}>
-        {children}
-      </div>
-    </ThemeContext.Provider>
+${densityState}
+  return (${densityProviderOpen}
+      <ThemeContext.Provider value={{ theme, setTheme }}>
+        <div data-theme={theme}${densityDataAttr} style={{ display: "contents" }}>
+          {children}
+        </div>
+      </ThemeContext.Provider>${densityProviderClose}
   );
 }
 `;
@@ -4181,9 +4074,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");
 }
@@ -4761,6 +4654,13 @@ async function runGenerate(cwd, options) {
       options.debug ?? false
     );
   }
+  const presetValue = config.meta.preset;
+  if (presetValue === "compact" || presetValue === "comfortable" || presetValue === "spacious") {
+    applyPreset(config, presetValue);
+  }
+  const fullRules = Object.fromEntries(
+    REACT_COMPONENTS.map((name) => [name, rules[name] ?? {}])
+  );
   logger.step("Running pre-flight validation...");
   const validation = validateConfig(config, rules);
   const errors = validation.issues.filter((i) => i.severity === "error");
@@ -4814,6 +4714,13 @@ 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`);
+    }
     const tokenFiles = reactAdapter.generateTokenFiles(config, resolution);
     for (const { filename, content } of tokenFiles) {
       await writeFile(path3.join(tokensDir, filename), content);
@@ -4823,21 +4730,55 @@ 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`);
+        if (isProUnlocked()) {
+          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}`
@@ -4845,76 +4786,117 @@ 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 { filename: idxFile, content: idxContent } = reactAdapter.generateComponentIndex(config, generatedNames);
-    await writeFile(path3.join(srcDir, idxFile), idxContent);
-    logger.dim(`  \u2192 src/${idxFile}`);
-    logger.success(`${generatedNames.length} components generated`);
-  }
-  if (!only || only === "metadata") {
-    logger.step("Writing AI metadata...");
-    const metaDir = path3.join(outRoot, "metadata");
-    await ensureDir(metaDir);
-    const metaFiles = generateMetadata(config, rules, 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)`);
-  }
-  if (!only || only === "docs") {
-    logger.step("Generating docs...");
-    const docsDir = path3.join(outRoot, "docs");
-    await ensureDir(docsDir);
-    const metadataFiles = generateMetadata(config, rules, tokenCount);
-    const metadataMap = {};
-    for (const { filename, content } of metadataFiles) {
-      const name = filename.replace(".json", "");
-      if (name !== "index") {
-        metadataMap[name] = JSON.parse(
-          content
+    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`);
+      if (isProUnlocked()) {
+        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 docFiles = reactAdapter.generateDocs(config, rules, metadataMap);
-    for (const { filename, content } of docFiles) {
-      await writeFile(path3.join(docsDir, filename), content);
-      logger.dim(`  \u2192 docs/${filename}`);
-    }
-    logger.success(`Docs written (${docFiles.length} files)`);
+    const { filename: idxFile, content: idxContent } = reactAdapter.generateComponentIndex(config, generatedNames);
+    await writeFile(path3.join(outRoot, idxFile), idxContent);
+    logger.dim(`  \u2192 ${idxFile}`);
+    logger.success(`${generatedNames.length} components generated`);
+    globalThis["__dsforgGeneratedJsons"] = generatedComponentJsons;
   }
   if (!only) {
     logger.step("Writing package files...");
-    const componentNames = Object.keys(rules);
+    const componentNames = Object.keys(fullRules);
     const { filename: pkgFile, content: pkgContent } = reactAdapter.generatePackageManifest(config, componentNames);
     await writeFile(path3.join(outRoot, pkgFile), pkgContent);
     logger.dim(`  \u2192 ${pkgFile}`);
     const tsConfig = generateTsConfig();
     await writeFile(path3.join(outRoot, "tsconfig.json"), tsConfig);
     logger.dim(`  \u2192 tsconfig.json`);
-    const { generateReadme } = await import("../emitter-ZNRPJ4D6.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 (isProUnlocked() && (!only || only === "components")) {
+    logger.step("Writing Pro 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(`Pro outputs written`);
+  }
   logger.step("Generating showcase...");
-  const { generateShowcase } = await import("../html-6SIG34W5.js");
+  const { generateShowcase } = await import("../html-XGJ22SXB.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)) {
@@ -5296,7 +5278,7 @@ async function runMenu() {
 // package.json
 var package_default = {
   name: "@nghitrum/dsforge",
-  version: "0.1.5-alpha.1",
+  version: "0.1.5-alpha.10",
   description: "AI-native design system generator \u2014 tokens \u2192 components \u2192 docs \u2192 npm",
   keywords: [
     "design-system",