@nghitrum/dsforge 0.1.5-alpha.11 → 0.1.5-alpha.13

package/README.md

@@ -194,7 +194,6 @@ Run `dsforge` with no arguments for an interactive menu.
 ## Coming next
 
 - Additional components: Modal, Table, Tooltip, DatePicker
-- **Pro**: AI-assisted token generation from brand guidelines or a Figma file
 - Figma Variables API sync
 - CI integration — fail builds on governance violations
 

package/dist/{chunk-YUPXTQZ5.js → chunk-5YT3VNE6.js}

@@ -1,28 +1,3 @@
-// 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",
@@ -107,7 +82,6 @@ function applyPreset(config, preset) {
 }
 
 export {
-  isProUnlocked,
   PRESETS,
   SPACING_PRESETS,
   RADIUS_PRESETS,

package/dist/cli/index.js

@@ -11,9 +11,8 @@ import {
   RADIUS_PRESETS,
   SPACING_PRESETS,
   applyPreset,
-  buildSemanticSpacing,
-  isProUnlocked
-} from "../chunk-YUPXTQZ5.js";
+  buildSemanticSpacing
+} from "../chunk-5YT3VNE6.js";
 
 // src/cli/index.ts
 import { program } from "commander";
@@ -738,15 +737,7 @@ async function runInit(cwd, options) {
   }
   const name = rawName.replace(/\s+/g, "-").toLowerCase();
   let 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)) {
+  if (options.preset && VALID_PRESETS.includes(options.preset)) {
     preset = options.preset;
   } else {
     const answer = await ask(
@@ -3925,62 +3916,7 @@ function generateThemeProvider(config) {
   const themeNames = Object.keys(config.themes ?? { light: {}, dark: {} });
   const defaultTheme = themeNames.includes("light") ? "light" : themeNames[0] ?? "light";
   const themeType = themeNames.map((t) => `"${t}"`).join(" | ");
-  const isPro = isProUnlocked();
   const defaultDensity = config.meta.preset ?? "comfortable";
-  const densityImport = isPro ? `
-import "../tokens/density.css";` : "";
-  const densityTypes = isPro ? `
-export type DensityName = "compact" | "comfortable" | "spacious";
-` : "";
-  const densityContextTypes = isPro ? `
-export interface DensityContextValue {
-  density: DensityName;
-  setDensity: (density: DensityName) => void;
-}
-` : "";
-  const densityContext = isPro ? `
-export const DensityContext = React.createContext<DensityContextValue>({
-  density: "${defaultDensity}",
-  setDensity: () => undefined,
-});
-
-/**
- * Hook to read and change the current density.
- * Must be used inside a <ThemeProvider>.
- */
-export function useDensity(): DensityContextValue {
-  return React.useContext(DensityContext);
-}
-` : "";
-  const densityProp = isPro ? `
-  /** Component density. Requires density.css to be imported. Defaults to "${defaultDensity}". */
-  density?: DensityName;` : "";
-  const densityOnChangeProp = isPro ? `
-  /** Called when setDensity is invoked. */
-  onDensityChange?: (density: DensityName) => void;` : "";
-  const densityState = isPro ? `
-  const [density, setDensityState] = React.useState<DensityName>(initialDensity);
-
-  React.useEffect(() => {
-    setDensityState(initialDensity);
-  }, [initialDensity]);
-
-  const setDensity = React.useCallback(
-    (next: DensityName) => {
-      setDensityState(next);
-      onDensityChange?.(next);
-    },
-    [onDensityChange],
-  );
-` : "";
-  const densityDestructure = isPro ? `,
-  density: initialDensity = "${defaultDensity}",
-  onDensityChange,` : "";
-  const densityProviderOpen = isPro ? `
-      <DensityContext.Provider value={{ density, setDensity }}>` : "";
-  const densityDataAttr = isPro ? ` data-density={density}` : "";
-  const densityProviderClose = isPro ? `
-      </DensityContext.Provider>` : "";
   return `/**
  * ThemeProvider \u2014 ${config.meta.name}
  *
@@ -3992,27 +3928,39 @@ export function useDensity(): DensityContextValue {
  *   import "@${config.meta.name}/tokens/light.css";  // or dark.css
  *   import { ThemeProvider } from "@${config.meta.name}";
  *
- *   <ThemeProvider theme="light"${isPro ? ` density="${defaultDensity}"` : ""}>
+ *   <ThemeProvider theme="light" density="${defaultDensity}">
  *     <App />
  *   </ThemeProvider>
  */
 
-import React from "react";${densityImport}
+import React from "react";
+import "../tokens/density.css";
 
 // \u2500\u2500\u2500 Types \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
 
 export type ThemeName = ${themeType};
-${densityTypes}
+
+export type DensityName = "compact" | "comfortable" | "spacious";
+
 export interface ThemeContextValue {
   theme: ThemeName;
   setTheme: (theme: ThemeName) => void;
 }
-${densityContextTypes}
+
+export interface DensityContextValue {
+  density: DensityName;
+  setDensity: (density: DensityName) => void;
+}
+
 export interface ThemeProviderProps {
   /** Initial theme. Defaults to "${defaultTheme}". */
   theme?: ThemeName;
   /** Called when setTheme is invoked \u2014 use to persist theme preference. */
-  onThemeChange?: (theme: ThemeName) => void;${densityProp}${densityOnChangeProp}
+  onThemeChange?: (theme: ThemeName) => void;
+  /** Component density. Requires density.css to be imported. Defaults to "${defaultDensity}". */
+  density?: DensityName;
+  /** Called when setDensity is invoked. */
+  onDensityChange?: (density: DensityName) => void;
   children: React.ReactNode;
 }
 
@@ -4030,12 +3978,27 @@ export const ThemeContext = React.createContext<ThemeContextValue>({
 export function useTheme(): ThemeContextValue {
   return React.useContext(ThemeContext);
 }
-${densityContext}
+
+export const DensityContext = React.createContext<DensityContextValue>({
+  density: "${defaultDensity}",
+  setDensity: () => undefined,
+});
+
+/**
+ * Hook to read and change the current density.
+ * Must be used inside a <ThemeProvider>.
+ */
+export function useDensity(): DensityContextValue {
+  return React.useContext(DensityContext);
+}
+
 // \u2500\u2500\u2500 Provider \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
 
 export function ThemeProvider({
   theme: initialTheme = "${defaultTheme}",
-  onThemeChange,${densityDestructure}
+  onThemeChange,
+  density: initialDensity = "${defaultDensity}",
+  onDensityChange,
   children,
 }: ThemeProviderProps) {
   const [theme, setThemeState] = React.useState<ThemeName>(initialTheme);
@@ -4051,13 +4014,29 @@ export function ThemeProvider({
     },
     [onThemeChange],
   );
-${densityState}
-  return (${densityProviderOpen}
+
+  const [density, setDensityState] = React.useState<DensityName>(initialDensity);
+
+  React.useEffect(() => {
+    setDensityState(initialDensity);
+  }, [initialDensity]);
+
+  const setDensity = React.useCallback(
+    (next: DensityName) => {
+      setDensityState(next);
+      onDensityChange?.(next);
+    },
+    [onDensityChange],
+  );
+
+  return (
+      <DensityContext.Provider value={{ density, setDensity }}>
       <ThemeContext.Provider value={{ theme, setTheme }}>
-        <div data-theme={theme}${densityDataAttr} style={{ display: "contents" }}>
+        <div data-theme={theme} data-density={density} style={{ display: "contents" }}>
           {children}
         </div>
-      </ThemeContext.Provider>${densityProviderClose}
+      </ThemeContext.Provider>
+      </DensityContext.Provider>
   );
 }
 `;
@@ -4714,13 +4693,11 @@ 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`);
-    }
+    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);
@@ -4771,14 +4748,12 @@ async function runGenerate(cwd, options) {
           JSON.stringify(componentJson, null, 2)
         );
         logger.dim(`  \u2192 components/${pascalName}/${pascalName}.json`);
-        if (isProUnlocked()) {
-          const metadata = generateComponentMetadata(pascalName);
-          await writeFile(
-            path3.join(componentSubDir, `${pascalName}.metadata.json`),
-            JSON.stringify(metadata, null, 2)
-          );
-          logger.dim(`  \u2192 components/${pascalName}/${pascalName}.metadata.json`);
-        }
+        const metadata = generateComponentMetadata(pascalName);
+        await writeFile(
+          path3.join(componentSubDir, `${pascalName}.metadata.json`),
+          JSON.stringify(metadata, null, 2)
+        );
+        logger.dim(`  \u2192 components/${pascalName}/${pascalName}.metadata.json`);
       } catch (err) {
         logger.warn(
           `[dsforge] Could not generate ${componentName} \u2014 ${err.message}`
@@ -4798,14 +4773,12 @@ async function runGenerate(cwd, options) {
         JSON.stringify(tpJson, null, 2)
       );
       logger.dim(`  \u2192 components/ThemeProvider/ThemeProvider.json`);
-      if (isProUnlocked()) {
-        const tpMeta = generateComponentMetadata("ThemeProvider");
-        await writeFile(
-          path3.join(tpDir, "ThemeProvider.metadata.json"),
-          JSON.stringify(tpMeta, null, 2)
-        );
-        logger.dim(`  \u2192 components/ThemeProvider/ThemeProvider.metadata.json`);
-      }
+      const tpMeta = generateComponentMetadata("ThemeProvider");
+      await writeFile(
+        path3.join(tpDir, "ThemeProvider.metadata.json"),
+        JSON.stringify(tpMeta, null, 2)
+      );
+      logger.dim(`  \u2192 components/ThemeProvider/ThemeProvider.metadata.json`);
     } catch {
     }
     const { filename: idxFile, content: idxContent } = reactAdapter.generateComponentIndex(config, generatedNames);
@@ -4838,8 +4811,8 @@ async function runGenerate(cwd, options) {
     }
     logger.success(`Package files written`);
   }
-  if (isProUnlocked() && (!only || only === "components")) {
-    logger.step("Writing Pro outputs...");
+  if (!only || only === "components") {
+    logger.step("Writing registry + AI outputs...");
     const generatedJsons = globalThis["__dsforgGeneratedJsons"] ?? [];
     const { generateRegistry } = await import("../generateRegistry-3MEZDJAJ.js");
     const {
@@ -4888,10 +4861,10 @@ async function runGenerate(cwd, options) {
       generateCopilotInstructions(systemName)
     );
     logger.dim(`  \u2192 copilot-instructions.md`);
-    logger.success(`Pro outputs written`);
+    logger.success(`Registry + AI outputs written`);
   }
   logger.step("Generating showcase...");
-  const { generateShowcase } = await import("../html-XGJ22SXB.js");
+  const { generateShowcase } = await import("../html-4DD6GOHE.js");
   const showcaseHtml = generateShowcase(config, resolution);
   await writeFile(path3.join(outRoot, "showcase.html"), showcaseHtml);
   logger.dim(`  \u2192 showcase.html`);
@@ -5278,7 +5251,7 @@ async function runMenu() {
 // package.json
 var package_default = {
   name: "@nghitrum/dsforge",
-  version: "0.1.5-alpha.11",
+  version: "0.1.5-alpha.13",
   description: "AI-native design system generator \u2014 tokens \u2192 components \u2192 docs \u2192 npm",
   keywords: [
     "design-system",

package/dist/{html-XGJ22SXB.js → html-4DD6GOHE.js}

@@ -2,9 +2,8 @@ import {
   PRESETS,
   RADIUS_PRESETS,
   SPACING_PRESETS,
-  buildSemanticSpacing,
-  isProUnlocked
-} from "./chunk-YUPXTQZ5.js";
+  buildSemanticSpacing
+} from "./chunk-5YT3VNE6.js";
 import {
   COMPONENT_JSON_DEFINITIONS,
   COMPONENT_METADATA_DEFINITIONS
@@ -215,13 +214,6 @@ function buildMotionSection(config) {
 }
 
 // src/generators/showcase/page.ts
-var lockedPanel = (label) => `
-  <div class="locked-panel">
-    <div class="locked-icon">\u2298</div>
-    <div class="locked-title">${label} \u2014 dsforge Pro</div>
-    <p class="locked-desc">This tab is available with a dsforge Pro license.</p>
-    <p class="locked-hint">Set the <code>DSFORGE_KEY</code> environment variable to unlock.</p>
-  </div>`;
 function buildPropsTable(props) {
   const sorted = [...props].sort((a, b) => (b.required ? 1 : 0) - (a.required ? 1 : 0));
   return `
@@ -364,7 +356,7 @@ function buildAiMetaHtml(id, meta) {
     </div>`;
 }
 function buildComponentPage(input) {
-  const { id, description, overviewHtml, json, showcaseExamples, a11yContract, a11yItems, metadata, isPro } = input;
+  const { id, description, overviewHtml, json, showcaseExamples, a11yContract, a11yItems, metadata } = input;
   const tabId = (tab) => `${id}-tab-${tab}`;
   const panelId = (tab) => `${id}-panel-${tab}`;
   const overviewContent = `
@@ -380,13 +372,13 @@ function buildComponentPage(input) {
         </div>
         <p class="a11y-desc">${esc(item.description)}</p>
       </div>`).join("")}</div>`;
-  const aiContent = isPro && metadata ? buildAiMetaHtml(id, metadata) : lockedPanel("AI Metadata");
+  const aiContent = metadata ? buildAiMetaHtml(id, metadata) : "";
   const tabs = [
-    { id: "overview", label: "Overview", content: overviewContent, locked: false },
-    { id: "props", label: "Props", content: propsContent, locked: false },
-    { id: "examples", label: "Examples", content: examplesContent, locked: false },
-    { id: "accessibility", label: "Accessibility", content: a11yContent, locked: false },
-    { id: "ai-metadata", label: "AI Metadata", content: aiContent, locked: !isPro }
+    { id: "overview", label: "Overview", content: overviewContent },
+    { id: "props", label: "Props", content: propsContent },
+    { id: "examples", label: "Examples", content: examplesContent },
+    { id: "accessibility", label: "Accessibility", content: a11yContent },
+    { id: "ai-metadata", label: "AI Metadata", content: aiContent }
   ];
   return `
     <div class="comp-tabs" id="${id}-tabs">
@@ -394,14 +386,13 @@ function buildComponentPage(input) {
         ${tabs.map(
     (t, i) => `
           <button
-            class="comp-tab${i === 0 ? " active" : ""}${t.locked ? " locked" : ""}"
+            class="comp-tab${i === 0 ? " active" : ""}"
             id="${tabId(t.id)}"
             role="tab"
             aria-selected="${i === 0}"
             aria-controls="${panelId(t.id)}"
-            onclick="${t.locked ? "return false" : `switchTab('${id}', '${t.id}', this)`}"
-            ${t.locked ? 'title="Unlock with dsforge Pro"' : ""}
-          >${esc(t.label)}${t.locked ? " &#x1F512;" : ""}</button>`
+            onclick="switchTab('${id}', '${t.id}', this)"
+          >${esc(t.label)}</button>`
   ).join("")}
       </div>
       ${tabs.map(
@@ -2099,7 +2090,6 @@ function generateShowcase(config, resolution) {
   ];
   const componentItems = SHOWCASE_COMPONENTS.map(({ id, label }) => ({ id, label }));
   const allItems = [...foundationItems, ...componentItems];
-  const isPro = isProUnlocked();
   const flatTokens = Object.fromEntries(
     Object.entries(tokens).map(([k, v]) => [
       k.replace(/^(global|semantic|component)\./, ""),
@@ -2147,8 +2137,7 @@ function generateShowcase(config, resolution) {
             showcaseExamples: defData.examples,
             a11yContract: metaDef?.accessibilityContract ?? null,
             a11yItems: defData.a11y,
-            metadata: isPro ? metaDef : null,
-            isPro
+            metadata: metaDef
           })
         ];
       })
@@ -2160,13 +2149,12 @@ function generateShowcase(config, resolution) {
   const showcaseData = {
     systemName: name,
     generatedAt: (/* @__PURE__ */ new Date()).toISOString(),
-    isPro,
     components: SHOWCASE_COMPONENTS.map((entry) => {
       const jsonDef = COMPONENT_JSON_DEFINITIONS[entry.label];
       const metaDef = COMPONENT_METADATA_DEFINITIONS[entry.label] ?? null;
       return {
         json: jsonDef ? { ...jsonDef, cssVars: resolvedCssVars } : null,
-        metadata: isPro ? metaDef : null
+        metadata: metaDef
       };
     })
   };
@@ -2263,27 +2251,17 @@ ${densityCss}
       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; }
@@ -2485,21 +2463,6 @@ ${densityCss}
     .ai-guidance-list { padding-left: 20px; display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
     .ai-guidance-list li { font-size: 13px; color: var(--color-text-secondary, #64748b); line-height: 1.6; }
 
-    /* \u2500\u2500 Locked tabs \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
-    .comp-tab.locked { opacity: 0.45; cursor: default; }
-    .comp-tab.locked:hover { color: var(--color-text-secondary, #64748b); }
-    .locked-panel {
-      display: flex; flex-direction: column; align-items: center; justify-content: center;
-      padding: 64px 32px; text-align: center;
-      border: 1px dashed var(--color-border-default, #e2e8f0); border-radius: 10px;
-      background: var(--color-bg-subtle, #f8fafc);
-    }
-    .locked-icon { font-size: 28px; color: var(--color-text-secondary, #64748b); margin-bottom: 12px; }
-    .locked-title { font-size: 14px; font-weight: 600; color: var(--color-text-primary, #0f172a); margin-bottom: 8px; }
-    .locked-desc { font-size: 13px; color: var(--color-text-secondary, #64748b); max-width: 360px; line-height: 1.6; margin-bottom: 6px; }
-    .locked-hint { font-size: 12px; color: var(--color-text-secondary, #64748b); font-family: monospace; }
-    .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: 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); }
@@ -2570,16 +2533,11 @@ ${densityCss}
         ${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>`}
+        <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>
         ${themes.length >= 2 ? `
           <div class="theme-toggle">
             ${themes.map(

package/dist/index.js

@@ -1143,31 +1143,6 @@ var rl = readline.createInterface({
   output: process.stdout
 });
 
-// src/lib/license.ts
-import { readFileSync } from "fs";
-import { join } from "path";
-function readKeyFromDotEnv() {
-  try {
-    const content = readFileSync(join(process.cwd(), ".env"), "utf8");
-    for (const raw of content.split("\n")) {
-      const line = raw.trim();
-      if (!line || line.startsWith("#")) continue;
-      const eq = line.indexOf("=");
-      if (eq === -1) continue;
-      const key = line.slice(0, eq).trim();
-      if (key !== "DSFORGE_KEY") continue;
-      const val = line.slice(eq + 1).trim().replace(/^["']|["']$/g, "");
-      return val || void 0;
-    }
-  } catch {
-  }
-  return void 0;
-}
-function isProUnlocked() {
-  const key = process.env["DSFORGE_KEY"] ?? readKeyFromDotEnv();
-  return typeof key === "string" && key.length > 0;
-}
-
 // src/presets/index.ts
 var SPACING_PRESETS = {
   compact: {
@@ -2612,62 +2587,7 @@ function generateThemeProvider(config) {
   const themeNames = Object.keys(config.themes ?? { light: {}, dark: {} });
   const defaultTheme = themeNames.includes("light") ? "light" : themeNames[0] ?? "light";
   const themeType = themeNames.map((t) => `"${t}"`).join(" | ");
-  const isPro = isProUnlocked();
   const defaultDensity = config.meta.preset ?? "comfortable";
-  const densityImport = isPro ? `
-import "../tokens/density.css";` : "";
-  const densityTypes = isPro ? `
-export type DensityName = "compact" | "comfortable" | "spacious";
-` : "";
-  const densityContextTypes = isPro ? `
-export interface DensityContextValue {
-  density: DensityName;
-  setDensity: (density: DensityName) => void;
-}
-` : "";
-  const densityContext = isPro ? `
-export const DensityContext = React.createContext<DensityContextValue>({
-  density: "${defaultDensity}",
-  setDensity: () => undefined,
-});
-
-/**
- * Hook to read and change the current density.
- * Must be used inside a <ThemeProvider>.
- */
-export function useDensity(): DensityContextValue {
-  return React.useContext(DensityContext);
-}
-` : "";
-  const densityProp = isPro ? `
-  /** Component density. Requires density.css to be imported. Defaults to "${defaultDensity}". */
-  density?: DensityName;` : "";
-  const densityOnChangeProp = isPro ? `
-  /** Called when setDensity is invoked. */
-  onDensityChange?: (density: DensityName) => void;` : "";
-  const densityState = isPro ? `
-  const [density, setDensityState] = React.useState<DensityName>(initialDensity);
-
-  React.useEffect(() => {
-    setDensityState(initialDensity);
-  }, [initialDensity]);
-
-  const setDensity = React.useCallback(
-    (next: DensityName) => {
-      setDensityState(next);
-      onDensityChange?.(next);
-    },
-    [onDensityChange],
-  );
-` : "";
-  const densityDestructure = isPro ? `,
-  density: initialDensity = "${defaultDensity}",
-  onDensityChange,` : "";
-  const densityProviderOpen = isPro ? `
-      <DensityContext.Provider value={{ density, setDensity }}>` : "";
-  const densityDataAttr = isPro ? ` data-density={density}` : "";
-  const densityProviderClose = isPro ? `
-      </DensityContext.Provider>` : "";
   return `/**
  * ThemeProvider \u2014 ${config.meta.name}
  *
@@ -2679,27 +2599,39 @@ export function useDensity(): DensityContextValue {
  *   import "@${config.meta.name}/tokens/light.css";  // or dark.css
  *   import { ThemeProvider } from "@${config.meta.name}";
  *
- *   <ThemeProvider theme="light"${isPro ? ` density="${defaultDensity}"` : ""}>
+ *   <ThemeProvider theme="light" density="${defaultDensity}">
  *     <App />
  *   </ThemeProvider>
  */
 
-import React from "react";${densityImport}
+import React from "react";
+import "../tokens/density.css";
 
 // \u2500\u2500\u2500 Types \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
 
 export type ThemeName = ${themeType};
-${densityTypes}
+
+export type DensityName = "compact" | "comfortable" | "spacious";
+
 export interface ThemeContextValue {
   theme: ThemeName;
   setTheme: (theme: ThemeName) => void;
 }
-${densityContextTypes}
+
+export interface DensityContextValue {
+  density: DensityName;
+  setDensity: (density: DensityName) => void;
+}
+
 export interface ThemeProviderProps {
   /** Initial theme. Defaults to "${defaultTheme}". */
   theme?: ThemeName;
   /** Called when setTheme is invoked \u2014 use to persist theme preference. */
-  onThemeChange?: (theme: ThemeName) => void;${densityProp}${densityOnChangeProp}
+  onThemeChange?: (theme: ThemeName) => void;
+  /** Component density. Requires density.css to be imported. Defaults to "${defaultDensity}". */
+  density?: DensityName;
+  /** Called when setDensity is invoked. */
+  onDensityChange?: (density: DensityName) => void;
   children: React.ReactNode;
 }
 
@@ -2717,12 +2649,27 @@ export const ThemeContext = React.createContext<ThemeContextValue>({
 export function useTheme(): ThemeContextValue {
   return React.useContext(ThemeContext);
 }
-${densityContext}
+
+export const DensityContext = React.createContext<DensityContextValue>({
+  density: "${defaultDensity}",
+  setDensity: () => undefined,
+});
+
+/**
+ * Hook to read and change the current density.
+ * Must be used inside a <ThemeProvider>.
+ */
+export function useDensity(): DensityContextValue {
+  return React.useContext(DensityContext);
+}
+
 // \u2500\u2500\u2500 Provider \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
 
 export function ThemeProvider({
   theme: initialTheme = "${defaultTheme}",
-  onThemeChange,${densityDestructure}
+  onThemeChange,
+  density: initialDensity = "${defaultDensity}",
+  onDensityChange,
   children,
 }: ThemeProviderProps) {
   const [theme, setThemeState] = React.useState<ThemeName>(initialTheme);
@@ -2738,13 +2685,29 @@ export function ThemeProvider({
     },
     [onThemeChange],
   );
-${densityState}
-  return (${densityProviderOpen}
+
+  const [density, setDensityState] = React.useState<DensityName>(initialDensity);
+
+  React.useEffect(() => {
+    setDensityState(initialDensity);
+  }, [initialDensity]);
+
+  const setDensity = React.useCallback(
+    (next: DensityName) => {
+      setDensityState(next);
+      onDensityChange?.(next);
+    },
+    [onDensityChange],
+  );
+
+  return (
+      <DensityContext.Provider value={{ density, setDensity }}>
       <ThemeContext.Provider value={{ theme, setTheme }}>
-        <div data-theme={theme}${densityDataAttr} style={{ display: "contents" }}>
+        <div data-theme={theme} data-density={density} style={{ display: "contents" }}>
           {children}
         </div>
-      </ThemeContext.Provider>${densityProviderClose}
+      </ThemeContext.Provider>
+      </DensityContext.Provider>
   );
 }
 `;

package/package.json

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