@nghitrum/dsforge 0.1.5-alpha.5 → 0.1.5-alpha.7

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/{chunk-RI3XDGKU.js → chunk-QHE35QQQ.js}

@@ -27,7 +27,7 @@ function generatePackageJson(config, componentNames) {
         componentNames.map((c) => [`./metadata/${c}`, `./metadata/${c}.json`])
       )
     },
-    files: ["dist", "tokens", "metadata", "docs", "CHANGELOG.md"],
+    files: ["dist", "tokens", "metadata", "CHANGELOG.md"],
     scripts: {
       build: "tsc",
       prepublishOnly: "npm run build"

package/dist/cli/index.js

@@ -3,7 +3,16 @@ import {
   generateChangelog,
   generatePackageJson,
   generateTsConfig
-} from "../chunk-RI3XDGKU.js";
+} from "../chunk-QHE35QQQ.js";
+import {
+  PRESETS,
+  PRESET_BASE_UNITS,
+  RADIUS_PRESETS,
+  SPACING_PRESETS,
+  applyPreset,
+  buildSemanticSpacing,
+  isProUnlocked
+} from "../chunk-JUMR3N5J.js";
 
 // src/cli/index.ts
 import { program } from "commander";
@@ -399,43 +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 buildInitialConfig(name, preset = "comfortable") {
   const spacing = SPACING_PRESETS[preset];
   const radius = RADIUS_PRESETS[preset];
@@ -626,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: {
@@ -775,7 +737,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(
@@ -1861,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({
@@ -4088,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}
  *
@@ -4099,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;
 }
 
@@ -4137,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);
@@ -4158,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}
   );
 }
 `;
@@ -4761,6 +4815,10 @@ 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] ?? {}])
   );
@@ -4817,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);
@@ -4855,7 +4920,7 @@ async function runGenerate(cwd, options) {
     logger.dim(`  \u2192 src/${idxFile}`);
     logger.success(`${generatedNames.length} components generated`);
   }
-  if (!only || only === "metadata") {
+  if (isProUnlocked() && (!only || only === "metadata")) {
     logger.step("Writing AI metadata...");
     const metaDir = path3.join(outRoot, "metadata");
     await ensureDir(metaDir);
@@ -4866,27 +4931,6 @@ async function runGenerate(cwd, options) {
     }
     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, fullRules, tokenCount);
-    const metadataMap = {};
-    for (const { filename, content } of metadataFiles) {
-      const name = filename.replace(".json", "");
-      if (name !== "index") {
-        metadataMap[name] = JSON.parse(
-          content
-        );
-      }
-    }
-    const docFiles = reactAdapter.generateDocs(config, fullRules, 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)`);
-  }
   if (!only) {
     logger.step("Writing package files...");
     const componentNames = Object.keys(fullRules);
@@ -4896,7 +4940,7 @@ async function runGenerate(cwd, options) {
     const tsConfig = generateTsConfig();
     await writeFile(path3.join(outRoot, "tsconfig.json"), tsConfig);
     logger.dim(`  \u2192 tsconfig.json`);
-    const { generateReadme } = await import("../emitter-ZNRPJ4D6.js");
+    const { generateReadme } = await import("../emitter-KNYIQTS5.js");
     await writeFile(
       path3.join(outRoot, "README.md"),
       generateReadme(config, componentNames)
@@ -4912,7 +4956,7 @@ async function runGenerate(cwd, options) {
     logger.success(`Package files written`);
   }
   logger.step("Generating showcase...");
-  const { generateShowcase } = await import("../html-6SIG34W5.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`);
@@ -5299,7 +5343,7 @@ async function runMenu() {
 // package.json
 var package_default = {
   name: "@nghitrum/dsforge",
-  version: "0.1.5-alpha.5",
+  version: "0.1.5-alpha.7",
   description: "AI-native design system generator \u2014 tokens \u2192 components \u2192 docs \u2192 npm",
   keywords: [
     "design-system",

package/dist/{emitter-ZNRPJ4D6.js → emitter-KNYIQTS5.js}

@@ -3,7 +3,7 @@ import {
   generatePackageJson,
   generateReadme,
   generateTsConfig
-} from "./chunk-RI3XDGKU.js";
+} from "./chunk-QHE35QQQ.js";
 export {
   generateChangelog,
   generatePackageJson,

package/dist/{html-6SIG34W5.js → html-LQHDCSG4.js}

@@ -1,3 +1,11 @@
+import {
+  PRESETS,
+  RADIUS_PRESETS,
+  SPACING_PRESETS,
+  buildSemanticSpacing,
+  isProUnlocked
+} from "./chunk-JUMR3N5J.js";
+
 // src/generators/showcase/types.ts
 function esc(s) {
   return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
@@ -32,31 +40,6 @@ function componentTokens(config, tokens) {
   };
 }
 
-// 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/generators/showcase/foundations.ts
 function buildColorSection(config, tokens) {
   const groups = [];
@@ -117,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>
   `;
@@ -147,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("")}
@@ -231,7 +221,9 @@ var lockedPanel = (label) => `
 function buildComponentPage(def, isPro) {
   const tabId = (tab) => `${def.id}-tab-${tab}`;
   const panelId = (tab) => `${def.id}-panel-${tab}`;
-  const overviewHtml = `<div class="comp-overview">${def.overviewHtml}</div>`;
+  const overviewHtml = `
+    <div class="comp-overview">${def.overviewHtml}</div>
+    <p class="component-description">${esc(def.description)}</p>`;
   const propsTable = `
     <table class="props-table">
       <thead>
@@ -366,6 +358,9 @@ function buttonDef(config, tokens) {
     id: "button",
     label: "Button",
     description: "Triggers an action or event. Use for form submissions, dialogs, and in-page actions.",
+    usageExample: `<Button variant="primary" size="md" onClick={() => {}}>
+  Save changes
+</Button>`,
     overviewHtml: `
       <div class="comp-overview-section">
         <div class="comp-overview-label">Variants</div>
@@ -552,6 +547,13 @@ function inputDef(config, tokens) {
     id: "input",
     label: "Input",
     description: "Single-line text field. Covers all standard input types with label, helper text, and validation states.",
+    usageExample: `<Input
+  label="Email"
+  placeholder="you@example.com"
+  value={email}
+  onChange={(e) => setEmail(e.target.value)}
+  error={emailError}
+/>`,
     overviewHtml: `
       <div class="comp-overview-section">
         <div class="comp-overview-label">States</div>
@@ -757,6 +759,10 @@ function cardDef(config, tokens) {
     id: "card",
     label: "Card",
     description: "A surface that groups related content. Supports header, body, and optional footer slots.",
+    usageExample: `<Card padding="lg">
+  <h2>Card title</h2>
+  <p>Card content goes here.</p>
+</Card>`,
     overviewHtml: `
       <div class="comp-overview-section">
         <div class="comp-overview-label">Variants</div>
@@ -913,6 +919,8 @@ function badgeDef(config, tokens) {
     id: "badge",
     label: "Badge",
     description: "Compact label for status, categories, or counts. Display-only \u2014 not interactive.",
+    usageExample: `<Badge variant="success">Active</Badge>
+<Badge variant="warning">Pending</Badge>`,
     overviewHtml: `
       <div class="comp-overview-section">
         <div class="comp-overview-label">Variants</div>
@@ -1057,6 +1065,11 @@ function checkboxDef(config, tokens) {
     id: "checkbox",
     label: "Checkbox",
     description: "Binary toggle for boolean values. Supports indeterminate state for partial selections.",
+    usageExample: `<Checkbox
+  label="Accept terms"
+  checked={accepted}
+  onChange={(e) => setAccepted(e.target.checked)}
+/>`,
     overviewHtml: `
       <div class="comp-overview-section">
         <div class="comp-overview-label">States</div>
@@ -1239,6 +1252,8 @@ function radioDef(config, tokens) {
     id: "radio",
     label: "Radio",
     description: "Single selection within a mutually exclusive group. Always pair Radio with RadioGroup.",
+    usageExample: `<Radio label="Option A" name="choice" value="a" checked={choice === 'a'} onChange={() => setChoice('a')} />
+<Radio label="Option B" name="choice" value="b" checked={choice === 'b'} onChange={() => setChoice('b')} />`,
     overviewHtml: `
       <div class="comp-overview-section">
         <div class="comp-overview-label">RadioGroup (vertical)</div>
@@ -1425,6 +1440,12 @@ function selectDef(config, tokens) {
     id: "select",
     label: "Select",
     description: "Dropdown picker for selecting from a list of options. Wraps native <select> for full accessibility.",
+    usageExample: `<Select
+  label="Country"
+  options={[{ label: 'Norway', value: 'no' }, { label: 'Sweden', value: 'se' }]}
+  value={country}
+  onChange={(e) => setCountry(e.target.value)}
+/>`,
     overviewHtml: `
       <div class="comp-overview-section">
         <div class="comp-overview-label">States</div>
@@ -1610,6 +1631,12 @@ function toastDef(config, tokens) {
     id: "toast",
     label: "Toast / Alert",
     description: "Feedback for user actions. Alert is inline and static; Toast is an overlay with auto-dismiss and a useToast() hook.",
+    usageExample: `<Toast
+  message="Changes saved successfully"
+  variant="success"
+  duration={3000}
+  onDismiss={() => setToast(null)}
+/>`,
     overviewHtml: `
       <div class="comp-overview-section">
         <div class="comp-overview-label">Alert \u2014 inline variants</div>
@@ -1791,6 +1818,7 @@ function spinnerDef(config, tokens) {
     id: "spinner",
     label: "Spinner",
     description: "Loading indicator for async operations. Includes a visually hidden status label for screen readers.",
+    usageExample: `<Spinner size="lg" label="Saving your changes" />`,
     overviewHtml: `
       <div class="comp-overview-section">
         <div class="comp-overview-label">Sizes</div>
@@ -1966,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" },
@@ -2006,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" />
@@ -2022,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; }
@@ -2087,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; }
@@ -2290,16 +2367,37 @@ ${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; }
+    .component-description {
+      font-size: 14px; color: var(--color-text-secondary, #64748b);
+      line-height: 1.65; margin-bottom: 24px; max-width: 640px;
+    }
+    .component-docs h4 {
+      font-size: 11px; font-weight: 600; text-transform: uppercase;
+      letter-spacing: 0.07em; color: var(--color-text-secondary, #64748b);
+      margin-bottom: 12px; padding-bottom: 8px;
+      border-bottom: 1px solid var(--color-border-default, #e2e8f0);
+    }
+    .usage-example {
+      margin: 0; padding: 16px 18px;
+      background: var(--color-bg-default, #fff);
+      color: var(--color-text-primary, #0f172a);
+      border: 1px solid var(--color-border-default, #e2e8f0); border-radius: 8px;
+      font-family: "SF Mono", "Fira Code", "Cascadia Code", monospace;
+      font-size: 12.5px; line-height: 1.65; overflow-x: auto; white-space: pre;
+    }
 
     /* \u2500\u2500 Spinner animation \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
     @keyframes dsforge-spin { to { transform: rotate(360deg); } }
@@ -2337,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(
@@ -2377,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');
@@ -2395,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

@@ -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,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];
@@ -1371,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: {
@@ -2559,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}
  *
@@ -2570,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;
 }
 
@@ -2608,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);
@@ -2629,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}
   );
 }
 `;
@@ -3062,7 +3153,7 @@ function generatePackageJson(config, componentNames) {
         componentNames.map((c) => [`./metadata/${c}`, `./metadata/${c}.json`])
       )
     },
-    files: ["dist", "tokens", "metadata", "docs", "CHANGELOG.md"],
+    files: ["dist", "tokens", "metadata", "CHANGELOG.md"],
     scripts: {
       build: "tsc",
       prepublishOnly: "npm run build"

package/package.json

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