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

package/dist/index.d.ts

@@ -381,7 +381,19 @@ declare function hasRefs(value: string): boolean;
 
 declare function validateConfig(config: DesignSystemConfig, rules: RulesConfig): ValidationResult;
 
+/**
+ * Density preset definitions.
+ *
+ * This is the single source of truth for compact / comfortable / spacious
+ * spacing and radius values. Imported by:
+ *   - cli/commands/init.ts     (initial config scaffolding)
+ *   - cli/commands/generate.ts (re-applying preset on each generate run)
+ *   - generators/tokens/css-vars.ts (emitting density.css for Pro)
+ *   - generators/showcase/html.ts  (embedding density CSS in showcase)
+ */
+
 type Preset = "compact" | "comfortable" | "spacious";
+
 declare function buildInitialConfig(name: string, preset?: Preset): DesignSystemConfig;
 declare function buildInitialRules(): RulesConfig;
 

package/dist/index.js

@@ -1143,7 +1143,32 @@ var rl = readline.createInterface({
   output: process.stdout
 });
 
-// src/cli/commands/init.ts
+// 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: {
     "1": 2,
@@ -1181,6 +1206,31 @@ 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,
+  spacious: 6
+};
+function buildSemanticSpacing(scale) {
+  return {
+    "component-padding-xs": `${scale["1"]}`,
+    "component-padding-sm": `${scale["2"]}`,
+    "component-padding-md": `${scale["4"]}`,
+    "component-padding-lg": `${scale["5"]}`,
+    "layout-gap-xs": `${scale["2"]}`,
+    "layout-gap-sm": `${scale["3"]}`,
+    "layout-gap-md": `${scale["5"]}`,
+    "layout-gap-lg": `${scale["6"]}`,
+    "layout-section": `${scale["7"]}`
+  };
+}
+
+// src/cli/commands/init.ts
 function buildInitialConfig(name, preset = "comfortable") {
   const spacing = SPACING_PRESETS[preset];
   const radius = RADIUS_PRESETS[preset];
@@ -1371,19 +1421,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: {
@@ -1558,6 +1598,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`]);
@@ -2559,6 +2612,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}
  *
@@ -2570,27 +2679,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;
 }
 
@@ -2608,12 +2717,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);
@@ -2629,13 +2738,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}
   );
 }
 `;
@@ -2652,9 +2761,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");
 }
@@ -3057,12 +3166,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", "docs", "CHANGELOG.md"],
+    files: ["dist", "tokens", "components", "CHANGELOG.md"],
     scripts: {
       build: "tsc",
       prepublishOnly: "npm run build"
@@ -3102,7 +3213,7 @@ function generateTsConfig() {
         moduleResolution: "NodeNext",
         lib: ["ES2020", "DOM"],
         outDir: "./dist",
-        rootDir: "./src",
+        rootDir: ".",
         declaration: true,
         declarationMap: true,
         sourceMap: true,
@@ -3111,7 +3222,7 @@ function generateTsConfig() {
         skipLibCheck: true,
         jsx: "react-jsx"
       },
-      include: ["src/**/*"],
+      include: ["index.ts", "components/**/*"],
       exclude: ["node_modules", "dist"]
     },
     null,
@@ -3160,7 +3271,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
@@ -3235,20 +3349,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.0",
+  "version": "0.1.5-alpha.10",
   "description": "AI-native design system generator — tokens → components → docs → npm",
   "keywords": [
     "design-system",