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

package/dist/chunk-OAMEFG6Q.js

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

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,10 @@ import {
   generateChangelog,
   generatePackageJson,
   generateTsConfig
-} from "../chunk-RI3XDGKU.js";
+} from "../chunk-QHE35QQQ.js";
+import {
+  isProUnlocked
+} from "../chunk-OAMEFG6Q.js";
 
 // src/cli/index.ts
 import { program } from "commander";
@@ -436,6 +439,32 @@ 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 }
 };
+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];
@@ -775,7 +804,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(
@@ -4761,6 +4798,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] ?? {}])
   );
@@ -4855,7 +4896,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 +4907,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 +4916,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 +4932,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-BJBKRTSX.js");
   const showcaseHtml = generateShowcase(config, resolution);
   await writeFile(path3.join(outRoot, "showcase.html"), showcaseHtml);
   logger.dim(`  \u2192 showcase.html`);
@@ -5299,7 +5319,7 @@ async function runMenu() {
 // package.json
 var package_default = {
   name: "@nghitrum/dsforge",
-  version: "0.1.5-alpha.5",
+  version: "0.1.5-alpha.6",
   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-BJBKRTSX.js}

@@ -1,3 +1,7 @@
+import {
+  isProUnlocked
+} from "./chunk-OAMEFG6Q.js";
+
 // src/generators/showcase/types.ts
 function esc(s) {
   return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
@@ -32,31 +36,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 = [];
@@ -231,7 +210,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 +347,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 +536,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 +748,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 +908,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 +1054,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 +1241,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 +1429,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 +1620,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 +1807,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>
@@ -2301,6 +2318,27 @@ ${themeCssDark}
     .ds-card-body   { padding: 12px 14px; }
     .ds-card-footer { padding: 10px 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); } }
     @media (prefers-reduced-motion: reduce) { @keyframes dsforge-spin { to { transform: none; } } }

package/dist/index.js

@@ -1143,6 +1143,10 @@ var rl = readline.createInterface({
   output: process.stdout
 });
 
+// src/lib/license.ts
+import { readFileSync } from "fs";
+import { join } from "path";
+
 // src/cli/commands/init.ts
 var SPACING_PRESETS = {
   compact: {
@@ -3062,7 +3066,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.6",
   "description": "AI-native design system generator — tokens → components → docs → npm",
   "keywords": [
     "design-system",