@nghitrum/dsforge 0.1.5-alpha.8 → 0.2.0

package/dist/index.js

@@ -1143,31 +1143,6 @@ var rl = readline.createInterface({
   output: process.stdout
 });
 
-// src/lib/license.ts
-import { readFileSync } from "fs";
-import { join } from "path";
-function readKeyFromDotEnv() {
-  try {
-    const content = readFileSync(join(process.cwd(), ".env"), "utf8");
-    for (const raw of content.split("\n")) {
-      const line = raw.trim();
-      if (!line || line.startsWith("#")) continue;
-      const eq = line.indexOf("=");
-      if (eq === -1) continue;
-      const key = line.slice(0, eq).trim();
-      if (key !== "DSFORGE_KEY") continue;
-      const val = line.slice(eq + 1).trim().replace(/^["']|["']$/g, "");
-      return val || void 0;
-    }
-  } catch {
-  }
-  return void 0;
-}
-function isProUnlocked() {
-  const key = process.env["DSFORGE_KEY"] ?? readKeyFromDotEnv();
-  return typeof key === "string" && key.length > 0;
-}
-
 // src/presets/index.ts
 var SPACING_PRESETS = {
   compact: {
@@ -1206,6 +1181,11 @@ var RADIUS_PRESETS = {
   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 }
 };
+var CONTROL_SIZE_PRESETS = {
+  compact: { sm: 12, md: 14, lg: 18 },
+  comfortable: { sm: 14, md: 16, lg: 20 },
+  spacious: { sm: 16, md: 18, lg: 24 }
+};
 var PRESET_BASE_UNITS = {
   compact: 2,
   comfortable: 4,
@@ -1593,6 +1573,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`]);
@@ -2594,62 +2587,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}
  *
@@ -2661,27 +2599,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;
 }
 
@@ -2699,12 +2649,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);
@@ -2720,13 +2685,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>
   );
 }
 `;
@@ -2743,9 +2724,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");
 }
@@ -3148,12 +3129,14 @@ function generatePackageJson(config, componentNames) {
       ),
       "./tokens": "./tokens/tokens.js",
       "./tailwind": "./tokens/tailwind.js",
-      "./metadata": "./metadata/index.json",
       ...Object.fromEntries(
-        componentNames.map((c) => [`./metadata/${c}`, `./metadata/${c}.json`])
+        componentNames.map((c) => {
+          const pascal = c.charAt(0).toUpperCase() + c.slice(1);
+          return [`./components/${pascal}`, `./components/${pascal}/${pascal}.json`];
+        })
       )
     },
-    files: ["dist", "tokens", "metadata", "CHANGELOG.md"],
+    files: ["dist", "tokens", "components", "CHANGELOG.md"],
     scripts: {
       build: "tsc",
       prepublishOnly: "npm run build"
@@ -3193,7 +3176,7 @@ function generateTsConfig() {
         moduleResolution: "NodeNext",
         lib: ["ES2020", "DOM"],
         outDir: "./dist",
-        rootDir: "./src",
+        rootDir: ".",
         declaration: true,
         declarationMap: true,
         sourceMap: true,
@@ -3202,7 +3185,7 @@ function generateTsConfig() {
         skipLibCheck: true,
         jsx: "react-jsx"
       },
-      include: ["src/**/*"],
+      include: ["index.ts", "components/**/*"],
       exclude: ["node_modules", "dist"]
     },
     null,
@@ -3251,7 +3234,10 @@ function App() {
 ## Components
 
 ${componentNames.map(
-    (c) => `- **${c.charAt(0).toUpperCase() + c.slice(1)}** \u2014 see \`metadata/${c}.json\` for contract`
+    (c) => {
+      const pascal = c.charAt(0).toUpperCase() + c.slice(1);
+      return `- **${pascal}** \u2014 see \`components/${pascal}/${pascal}.json\` for props and usage`;
+    }
   ).join("\n")}
 
 ## Themes
@@ -3326,20 +3312,10 @@ every semantic and component token that references it.
 
 ## AI tool integration
 
-The \`metadata/\` directory contains machine-readable component contracts.
+Each component ships with a machine-readable JSON contract (e.g. \`components/Button/Button.json\`).
 AI coding assistants (Copilot, Cursor, Claude Code) can read these to
 generate UI that respects your governance rules automatically.
 
-\`\`\`json
-// ${pkgName}/metadata/button.json
-{
-  "component": "Button",
-  "allowedVariants": ["primary", "secondary", "danger", "ghost"],
-  "requiredProps": ["aria-label"],
-  "accessibilityContract": { "keyboard": true, "focusRing": true }
-}
-\`\`\`
-
 ---
 
 Generated by [dsforge](https://github.com/nghitrum/dsforge) v${config.meta.version}.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nghitrum/dsforge",
-  "version": "0.1.5-alpha.8",
+  "version": "0.2.0",
   "description": "AI-native design system generator — tokens → components → docs → npm",
   "keywords": [
     "design-system",