@nghitrum/dsforge 0.1.5-alpha.6 → 0.1.5-alpha.8

package/README.md

@@ -24,7 +24,6 @@ design-system.config.json  →  dsforge generate
 dist-ds/
 ├── src/           9 typed React components
 ├── tokens/        CSS custom properties, JS map, Tailwind extension
-├── docs/          MDX documentation per component
 ├── metadata/      AI-readable JSON contracts per component
 └── showcase.html  visual docs — open directly in the browser, no server
 ```
@@ -97,10 +96,6 @@ Each component is typed, themed with your actual tokens, and ships with a prop t
 `tokens.js` — JS token map for runtime use
 `tailwind.js` — Tailwind theme extension, ready to drop into `tailwind.config.js`
 
-### MDX docs
-
-One `.mdx` file per component, generated from your config. Import them into any docs site.
-
 ### AI metadata contracts
 
 Each component emits `dist-ds/metadata/<component>.json`:

package/dist/chunk-JUMR3N5J.js

@@ -0,0 +1,112 @@
+// 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 PRESETS = [
+  "compact",
+  "comfortable",
+  "spacious"
+];
+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 }
+};
+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"]}`
+  };
+}
+function applyPreset(config, preset) {
+  const scale = SPACING_PRESETS[preset];
+  const radius = RADIUS_PRESETS[preset];
+  const baseUnit = PRESET_BASE_UNITS[preset];
+  config.spacing = {
+    ...config.spacing,
+    baseUnit,
+    scale,
+    semantic: buildSemanticSpacing(scale)
+  };
+  config.radius = { ...config.radius, ...radius };
+  config.philosophy = {
+    ...config.philosophy,
+    density: preset
+  };
+}
+
+export {
+  isProUnlocked,
+  PRESETS,
+  SPACING_PRESETS,
+  RADIUS_PRESETS,
+  PRESET_BASE_UNITS,
+  buildSemanticSpacing,
+  applyPreset
+};

package/dist/cli/index.js

@@ -5,8 +5,14 @@ import {
   generateTsConfig
 } from "../chunk-QHE35QQQ.js";
 import {
+  PRESETS,
+  PRESET_BASE_UNITS,
+  RADIUS_PRESETS,
+  SPACING_PRESETS,
+  applyPreset,
+  buildSemanticSpacing,
   isProUnlocked
-} from "../chunk-OAMEFG6Q.js";
+} from "../chunk-JUMR3N5J.js";
 
 // src/cli/index.ts
 import { program } from "commander";
@@ -402,69 +408,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 applyPreset(config, preset) {
-  const spacing = SPACING_PRESETS[preset];
-  const radius = RADIUS_PRESETS[preset];
-  const baseUnit = preset === "compact" ? 2 : preset === "spacious" ? 6 : 4;
-  config.spacing = {
-    ...config.spacing,
-    baseUnit,
-    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"]}`
-    }
-  };
-  config.radius = { ...config.radius, ...radius };
-  config.philosophy = {
-    ...config.philosophy,
-    density: preset
-  };
-}
 function buildInitialConfig(name, preset = "comfortable") {
   const spacing = SPACING_PRESETS[preset];
   const radius = RADIUS_PRESETS[preset];
@@ -655,19 +598,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: {
@@ -1898,6 +1831,34 @@ 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`]);
+    }
+    lines.push(emitBlock(`[data-density="${preset}"]`, entries, `Preset: ${preset}`));
+    lines.push("");
+  }
+  return lines.join("\n");
+}
 function generateCssFiles(config, resolution) {
   const files = [];
   files.push({
@@ -4125,6 +4086,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}
  *
@@ -4136,27 +4153,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;
 }
 
@@ -4174,12 +4191,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);
@@ -4195,13 +4212,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}
   );
 }
 `;
@@ -4858,6 +4875,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);
@@ -4932,7 +4956,7 @@ async function runGenerate(cwd, options) {
     logger.success(`Package files written`);
   }
   logger.step("Generating showcase...");
-  const { generateShowcase } = await import("../html-BJBKRTSX.js");
+  const { generateShowcase } = await import("../html-LQHDCSG4.js");
   const showcaseHtml = generateShowcase(config, resolution);
   await writeFile(path3.join(outRoot, "showcase.html"), showcaseHtml);
   logger.dim(`  \u2192 showcase.html`);
@@ -5319,7 +5343,7 @@ async function runMenu() {
 // package.json
 var package_default = {
   name: "@nghitrum/dsforge",
-  version: "0.1.5-alpha.6",
+  version: "0.1.5-alpha.8",
   description: "AI-native design system generator \u2014 tokens \u2192 components \u2192 docs \u2192 npm",
   keywords: [
     "design-system",

package/dist/{html-BJBKRTSX.js → html-LQHDCSG4.js}

@@ -1,6 +1,10 @@
 import {
+  PRESETS,
+  RADIUS_PRESETS,
+  SPACING_PRESETS,
+  buildSemanticSpacing,
   isProUnlocked
-} from "./chunk-OAMEFG6Q.js";
+} from "./chunk-JUMR3N5J.js";
 
 // src/generators/showcase/types.ts
 function esc(s) {
@@ -96,26 +100,33 @@ function buildTypographySection(config) {
 }
 function buildSpacingSection(config) {
   const scale = config.spacing?.scale ?? {};
-  const baseUnit = config.spacing?.baseUnit ?? 4;
-  const row = (key, val) => `
+  const scaleRow = (key) => `
+    <div class="spacing-row">
+      <span class="spacing-key">spacing-${esc(key)}</span>
+      <div class="spacing-bar-wrap">
+        <div class="spacing-bar" style="width:min(calc(var(--spacing-${esc(key)}) * 2), 320px)"></div>
+      </div>
+      <span class="spacing-val" data-spacing-var="--spacing-${esc(key)}"></span>
+    </div>`;
+  const semanticRow = (key) => `
     <div class="spacing-row">
       <span class="spacing-key">${esc(key)}</span>
       <div class="spacing-bar-wrap">
-        <div class="spacing-bar" style="width:${Math.min(Number(val) * 2, 320)}px"></div>
+        <div class="spacing-bar" style="width:min(calc(var(--${esc(key)}) * 2), 320px)"></div>
       </div>
-      <span class="spacing-val">${val}px</span>
+      <span class="spacing-val" data-spacing-var="--${esc(key)}"></span>
     </div>`;
   return `
     <div class="section-block">
-      <h3 class="group-title">Base Unit: ${baseUnit}px</h3>
+      <h3 class="group-title">Scale</h3>
       <div class="spacing-list">
-        ${Object.entries(scale).map(([k, v]) => row(k, v)).join("")}
+        ${Object.keys(scale).map((k) => scaleRow(k)).join("")}
       </div>
     </div>
     <div class="section-block">
       <h3 class="group-title">Semantic Spacing</h3>
       <div class="spacing-list">
-        ${Object.entries(config.spacing?.semantic ?? {}).map(([k, v]) => row(k, v)).join("")}
+        ${Object.keys(config.spacing?.semantic ?? {}).map((k) => semanticRow(k)).join("")}
       </div>
     </div>
   `;
@@ -126,12 +137,12 @@ function buildRadiusSection(config) {
     <div class="section-block">
       <h3 class="group-title">Border Radius</h3>
       <div class="radius-grid">
-        ${Object.entries(radius).map(
-    ([key, val]) => `
+        ${Object.keys(radius).map(
+    (key) => `
           <div class="radius-item">
-            <div class="radius-box" style="border-radius:${val}px"></div>
+            <div class="radius-box" style="border-radius:var(--radius-${esc(key)})"></div>
             <span class="radius-key">${esc(key)}</span>
-            <span class="radius-val">${val}px</span>
+            <span class="radius-val" data-spacing-var="--radius-${esc(key)}"></span>
           </div>
         `
   ).join("")}
@@ -1983,11 +1994,29 @@ var SHOWCASE_COMPONENTS = [
 ];
 
 // src/generators/showcase/html.ts
+function buildDensityCss() {
+  const blocks = [];
+  for (const preset of PRESETS) {
+    const scale = SPACING_PRESETS[preset];
+    const radius = RADIUS_PRESETS[preset];
+    const semantic = buildSemanticSpacing(scale);
+    const vars = [];
+    for (const [k, v] of Object.entries(scale)) vars.push(`  --spacing-${k}: ${v}px;`);
+    for (const [k, v] of Object.entries(semantic)) vars.push(`  --${k}: ${v}px;`);
+    for (const [k, v] of Object.entries(radius))
+      vars.push(`  --radius-${k}: ${v === 9999 ? "9999px" : `${v}px`};`);
+    blocks.push(`    [data-density="${preset}"] {
+${vars.join("\n")}
+    }`);
+  }
+  return blocks.join("\n");
+}
 function generateShowcase(config, resolution) {
   const tokens = resolution.tokens;
   const name = config.meta?.name ?? "Design System";
   const version = config.meta?.version ?? "0.1.0";
   const themes = Object.keys(config.themes ?? {});
+  const defaultDensity = config.meta?.preset ?? "comfortable";
   const foundationItems = [
     { id: "colors", label: "Colors" },
     { id: "typography", label: "Typography" },
@@ -2023,8 +2052,9 @@ function generateShowcase(config, resolution) {
   const darkTheme = config.themes?.["dark"] ?? {};
   const themeCssLight = Object.entries({ ...flatTokens, ...lightTheme }).map(([k, v]) => `  --${k}: ${v};`).join("\n");
   const themeCssDark = Object.entries({ ...flatTokens, ...darkTheme }).map(([k, v]) => `  --${k}: ${v};`).join("\n");
+  const densityCss = buildDensityCss();
   return `<!DOCTYPE html>
-<html lang="en" data-theme="light">
+<html lang="en" data-theme="light" data-density="${defaultDensity}">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -2039,6 +2069,9 @@ ${themeCssLight}
 ${themeCssDark}
     }
 
+    /* \u2500\u2500 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\u2500\u2500\u2500\u2500\u2500 */
+${densityCss}
+
     /* \u2500\u2500 Reset + base \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
     html { font-size: 16px; }
@@ -2104,6 +2137,33 @@ ${themeCssDark}
       color: var(--color-text-primary, #0f172a); font-weight: 500;
       box-shadow: 0 1px 2px rgb(0 0 0 / 0.06);
     }
+    .density-toggle {
+      display: flex; gap: 3px; align-items: center;
+      background: var(--color-bg-subtle, #f8fafc);
+      border: 1px solid var(--color-border-default, #e2e8f0);
+      border-radius: 7px; padding: 3px;
+    }
+    .density-toggle.locked { opacity: 0.5; cursor: not-allowed; }
+    .density-btn {
+      padding: 3px 10px; border-radius: 4px; border: none;
+      background: transparent; font-size: 12px; cursor: pointer;
+      color: var(--color-text-secondary, #64748b);
+      transition: background 120ms, color 120ms;
+    }
+    .density-btn:disabled { cursor: not-allowed; }
+    .density-btn.active {
+      background: var(--color-bg-default, #fff);
+      color: var(--color-text-primary, #0f172a); font-weight: 500;
+      box-shadow: 0 1px 2px rgb(0 0 0 / 0.06);
+    }
+    .density-lock {
+      font-size: 10px; font-weight: 600; letter-spacing: 0.04em;
+      color: var(--color-text-secondary, #64748b);
+      padding: 2px 6px; border-radius: 4px;
+      background: var(--color-bg-overlay, #f1f5f9);
+      border: 1px solid var(--color-border-default, #e2e8f0);
+      white-space: nowrap;
+    }
     .content { padding: 36px 40px 80px; max-width: 860px; }
     .page { display: none; }
     .page.active { display: block; }
@@ -2307,16 +2367,16 @@ ${themeCssDark}
     .locked-hint code { background: var(--color-bg-overlay, #f1f5f9); padding: 1px 6px; border-radius: 4px; border: 1px solid var(--color-border-default, #e2e8f0); }
 
     /* \u2500\u2500 Component primitives \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
-    .ds-btn { border: none; cursor: pointer; font-size: 14px; font-weight: 500; padding: 8px 16px; transition: filter 120ms; }
+    .ds-btn { border: none; cursor: pointer; font-size: 14px; font-weight: 500; padding: var(--component-padding-sm, 8px) var(--component-padding-md, 16px); border-radius: var(--radius-md, 4px); transition: filter 120ms; }
     .ds-btn:hover:not(:disabled) { filter: brightness(0.92); }
-    .ds-field { display: flex; flex-direction: column; gap: 4px; }
+    .ds-field { display: flex; flex-direction: column; gap: var(--component-padding-xs, 4px); }
     .ds-label { font-size: 13px; font-weight: 500; }
-    .ds-input { border: 1.5px solid; padding: 8px 12px; font-size: 14px; outline: none; transition: border-color 150ms, box-shadow 150ms; width: 100%; }
+    .ds-input { border: 1.5px solid; padding: var(--component-padding-sm, 8px) var(--component-padding-sm, 12px); font-size: 14px; outline: none; border-radius: var(--radius-sm, 2px); transition: border-color 150ms, box-shadow 150ms; width: 100%; }
     .ds-input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-action, #2563eb) 20%, transparent); border-color: var(--color-action, #2563eb) !important; }
-    .ds-card { border: 1px solid; overflow: hidden; width: 220px; }
-    .ds-card-header { padding: 12px 14px; font-size: 14px; font-weight: 600; }
-    .ds-card-body   { padding: 12px 14px; }
-    .ds-card-footer { padding: 10px 14px; display: flex; justify-content: flex-end; }
+    .ds-card { border: 1px solid; overflow: hidden; width: 220px; border-radius: var(--radius-lg, 8px); }
+    .ds-card-header { padding: var(--component-padding-sm, 12px) var(--component-padding-sm, 14px); font-size: 14px; font-weight: 600; }
+    .ds-card-body   { padding: var(--component-padding-sm, 12px) var(--component-padding-sm, 14px); }
+    .ds-card-footer { padding: var(--component-padding-xs, 10px) var(--component-padding-sm, 14px); display: flex; justify-content: flex-end; }
 
     /* \u2500\u2500 Component docs \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
     .component-docs { margin-top: 36px; }
@@ -2375,6 +2435,16 @@ ${themeCssDark}
         ${esc(name)} / <span id="topbar-current">Colors</span>
       </div>
       <div class="topbar-actions">
+        ${isPro ? `<div class="density-toggle" id="density-toggle">
+            ${PRESETS.map((p) => `
+              <button class="density-btn${p === defaultDensity ? " active" : ""}" onclick="setDensity('${p}', this)">${p.charAt(0).toUpperCase() + p.slice(1)}</button>
+            `).join("")}
+          </div>` : `<div class="density-toggle locked" title="Density switching requires dsforge Pro. Set DSFORGE_KEY to unlock.">
+            ${PRESETS.map((p) => `
+              <button class="density-btn${p === defaultDensity ? " active" : ""}" disabled>${p.charAt(0).toUpperCase() + p.slice(1)}</button>
+            `).join("")}
+            <span class="density-lock">\u2298 Pro</span>
+          </div>`}
         ${themes.length >= 2 ? `
           <div class="theme-toggle">
             ${themes.map(
@@ -2415,6 +2485,22 @@ ${themeCssDark}
       btn.classList.add('active');
     }
 
+    function setDensity(name, btn) {
+      document.documentElement.setAttribute('data-density', name);
+      document.querySelectorAll('.density-btn').forEach(b => b.classList.remove('active'));
+      btn.classList.add('active');
+      updateSpacingValues();
+    }
+
+    function updateSpacingValues() {
+      const style = getComputedStyle(document.documentElement);
+      document.querySelectorAll('[data-spacing-var]').forEach(el => {
+        const prop = el.getAttribute('data-spacing-var');
+        const val = style.getPropertyValue(prop).trim();
+        if (val) el.textContent = val;
+      });
+    }
+
     function switchTab(compId, tabId, btn) {
       const tabs   = document.querySelectorAll('#' + compId + '-tabs .comp-tab');
       const panels = document.querySelectorAll('#' + compId + '-tabs .comp-tab-panel');
@@ -2433,6 +2519,9 @@ ${themeCssDark}
         setTimeout(() => { btn.textContent = 'Copy'; btn.classList.remove('copied'); }, 2000);
       });
     }
+
+    // Populate spacing/radius value labels on load
+    document.addEventListener('DOMContentLoaded', updateSpacingValues);
   </script>
 </body>
 </html>`;

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

@@ -1146,8 +1146,29 @@ var rl = readline.createInterface({
 // 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/cli/commands/init.ts
+// src/presets/index.ts
 var SPACING_PRESETS = {
   compact: {
     "1": 2,
@@ -1185,6 +1206,26 @@ 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 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];
@@ -1375,19 +1416,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: {
@@ -2563,6 +2594,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}
  *
@@ -2574,27 +2661,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;
 }
 
@@ -2612,12 +2699,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);
@@ -2633,13 +2720,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}
   );
 }
 `;

package/package.json

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

package/dist/chunk-OAMEFG6Q.js

@@ -1,28 +0,0 @@
-// 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;
-}
-
-export {
-  isProUnlocked
-};