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

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 → chunk-YUPXTQZ5.js}

@@ -66,6 +66,11 @@ var RADIUS_PRESETS = {
   comfortable: { none: 0, sm: 2, md: 4, lg: 8, xl: 16, full: 9999 },
   spacious: { none: 0, sm: 3, md: 6, lg: 12, xl: 20, full: 9999 }
 };
+var CONTROL_SIZE_PRESETS = {
+  compact: { sm: 12, md: 14, lg: 18 },
+  comfortable: { sm: 14, md: 16, lg: 20 },
+  spacious: { sm: 16, md: 18, lg: 24 }
+};
 var PRESET_BASE_UNITS = {
   compact: 2,
   comfortable: 4,
@@ -106,6 +111,7 @@ export {
   PRESETS,
   SPACING_PRESETS,
   RADIUS_PRESETS,
+  CONTROL_SIZE_PRESETS,
   PRESET_BASE_UNITS,
   buildSemanticSpacing,
   applyPreset

package/dist/cli/index.js

@@ -5,6 +5,7 @@ import {
   generateTsConfig
 } from "../chunk-QHE35QQQ.js";
 import {
+  CONTROL_SIZE_PRESETS,
   PRESETS,
   PRESET_BASE_UNITS,
   RADIUS_PRESETS,
@@ -12,7 +13,7 @@ import {
   applyPreset,
   buildSemanticSpacing,
   isProUnlocked
-} from "../chunk-JUMR3N5J.js";
+} from "../chunk-YUPXTQZ5.js";
 
 // src/cli/index.ts
 import { program } from "commander";
@@ -1773,6 +1774,19 @@ function emitBaseCss(config, resolution) {
   if (typoEntries.length > 0) {
     sections.push(emitBlock(":root", typoEntries, "Typography"));
   }
+  const currentPreset = config.philosophy?.density ?? "comfortable";
+  const controlSizes = CONTROL_SIZE_PRESETS[currentPreset] ?? CONTROL_SIZE_PRESETS.comfortable;
+  sections.push(
+    emitBlock(
+      ":root",
+      [
+        ["control-size-sm", `${controlSizes.sm}px`],
+        ["control-size-md", `${controlSizes.md}px`],
+        ["control-size-lg", `${controlSizes.lg}px`]
+      ],
+      "Control sizes"
+    )
+  );
   const radiusEntries = Object.entries(
     config.radius ?? {}
   ).filter(([, v]) => v !== void 0).map(([k, v]) => [`radius-${k}`, v === 9999 ? "9999px" : `${v}px`]);
@@ -1854,6 +1868,10 @@ function emitDensityCss(config) {
     for (const [key, value] of Object.entries(radius)) {
       entries.push([`radius-${key}`, value === 9999 ? "9999px" : `${value}px`]);
     }
+    const controlSizes = CONTROL_SIZE_PRESETS[preset];
+    entries.push(["control-size-sm", `${controlSizes.sm}px`]);
+    entries.push(["control-size-md", `${controlSizes.md}px`]);
+    entries.push(["control-size-lg", `${controlSizes.lg}px`]);
     lines.push(emitBlock(`[data-density="${preset}"]`, entries, `Preset: ${preset}`));
     lines.push("");
   }
@@ -2864,9 +2882,17 @@ export interface CheckboxProps
 // \u2500\u2500\u2500 Size map \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
 
 const SIZE_BOX: Record<"sm" | "md" | "lg", string> = {
-  sm: "14px",
-  md: "16px",
-  lg: "20px",
+  sm: "var(--control-size-sm, 14px)",
+  md: "var(--control-size-md, 16px)",
+  lg: "var(--control-size-lg, 20px)",
+};
+
+// SVG check/dash icon fits inside the box with a 6px inset, via calc() so it
+// tracks the CSS var when density changes at runtime.
+const SVG_SIZE: Record<"sm" | "md" | "lg", string> = {
+  sm: "calc(var(--control-size-sm, 14px) - 6px)",
+  md: "calc(var(--control-size-md, 16px) - 6px)",
+  lg: "calc(var(--control-size-lg, 20px) - 6px)",
 };
 
 const SIZE_FONT: Record<"sm" | "md" | "lg", string> = {
@@ -3010,8 +3036,7 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
           <span style={boxStyle} aria-hidden="true">
             {isActive && (
               <svg
-                width={parseInt(boxSize) - 6}
-                height={parseInt(boxSize) - 6}
+                style={{ width: SVG_SIZE[size], height: SVG_SIZE[size] }}
                 viewBox="0 0 10 10"
                 fill="none"
                 stroke="#fff"
@@ -3113,9 +3138,9 @@ export interface RadioGroupProps {
 // \u2500\u2500\u2500 Size map \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
 
 const SIZE_BOX: Record<"sm" | "md" | "lg", string> = {
-  sm: "14px",
-  md: "16px",
-  lg: "20px",
+  sm: "var(--control-size-sm, 14px)",
+  md: "var(--control-size-md, 16px)",
+  lg: "var(--control-size-lg, 20px)",
 };
 
 const SIZE_FONT: Record<"sm" | "md" | "lg", string> = {
@@ -4956,7 +4981,7 @@ async function runGenerate(cwd, options) {
     logger.success(`Package files written`);
   }
   logger.step("Generating showcase...");
-  const { generateShowcase } = await import("../html-LQHDCSG4.js");
+  const { generateShowcase } = await import("../html-DJJSDXRX.js");
   const showcaseHtml = generateShowcase(config, resolution);
   await writeFile(path3.join(outRoot, "showcase.html"), showcaseHtml);
   logger.dim(`  \u2192 showcase.html`);
@@ -5343,7 +5368,7 @@ async function runMenu() {
 // package.json
 var package_default = {
   name: "@nghitrum/dsforge",
-  version: "0.1.5-alpha.7",
+  version: "0.1.5-alpha.9",
   description: "AI-native design system generator \u2014 tokens \u2192 components \u2192 docs \u2192 npm",
   keywords: [
     "design-system",

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

@@ -4,7 +4,7 @@ import {
   SPACING_PRESETS,
   buildSemanticSpacing,
   isProUnlocked
-} from "./chunk-JUMR3N5J.js";
+} from "./chunk-YUPXTQZ5.js";
 
 // src/generators/showcase/types.ts
 function esc(s) {
@@ -907,7 +907,7 @@ function cardDef(config, tokens) {
 // src/generators/showcase/components/badge.ts
 function badgeDef(config, tokens) {
   const { ff } = componentTokens(config, tokens);
-  const badgeHtml = (label, bg, color) => `<span style="display:inline-flex;align-items:center;font-family:${esc(ff)};font-size:12px;font-weight:500;padding:2px 8px;border-radius:9999px;background:${bg};color:${color};white-space:nowrap">${label}</span>`;
+  const badgeHtml = (label, bg, color) => `<span style="display:inline-flex;align-items:center;font-family:${esc(ff)};font-size:var(--font-size-caption,0.75rem);font-weight:500;padding:2px var(--spacing-2,8px);border-radius:var(--radius-full,9999px);background:${bg};color:${color};white-space:nowrap">${label}</span>`;
   const variants = [
     { label: "Default", bg: "#f1f5f9", color: "#6b7280" },
     { label: "Success", bg: "#dcfce7", color: "#16a34a" },
@@ -931,10 +931,10 @@ function badgeDef(config, tokens) {
       <div class="comp-overview-section">
         <div class="comp-overview-label">Sizes</div>
         <div class="comp-preview-row" style="align-items:center">
-          <span style="display:inline-flex;align-items:center;font-family:${esc(ff)};font-size:11px;font-weight:500;padding:1px 6px;border-radius:9999px;background:#dbeafe;color:#2563eb">Small</span>
-          <span style="display:inline-flex;align-items:center;font-family:${esc(ff)};font-size:12px;font-weight:500;padding:2px 8px;border-radius:9999px;background:#dbeafe;color:#2563eb">Medium</span>
-          <span style="display:inline-flex;align-items:center;font-family:${esc(ff)};font-size:14px;font-weight:500;padding:4px 12px;border-radius:9999px;background:#dbeafe;color:#2563eb">Large</span>
-          <span style="display:inline-flex;width:8px;height:8px;border-radius:50%;background:#16a34a" title="Dot mode"></span>
+          <span style="display:inline-flex;align-items:center;font-family:${esc(ff)};font-size:var(--font-size-caption,0.75rem);font-weight:500;padding:1px var(--spacing-1,4px);border-radius:var(--radius-full,9999px);background:#dbeafe;color:#2563eb">Small</span>
+          <span style="display:inline-flex;align-items:center;font-family:${esc(ff)};font-size:var(--font-size-caption,0.75rem);font-weight:500;padding:2px var(--spacing-2,8px);border-radius:var(--radius-full,9999px);background:#dbeafe;color:#2563eb">Medium</span>
+          <span style="display:inline-flex;align-items:center;font-family:${esc(ff)};font-size:var(--font-size-body,1rem);font-weight:500;padding:var(--spacing-1,4px) var(--spacing-3,12px);border-radius:var(--radius-full,9999px);background:#dbeafe;color:#2563eb">Large</span>
+          <span style="display:inline-flex;width:var(--spacing-2,8px);height:var(--spacing-2,8px);border-radius:50%;background:#16a34a" title="Dot mode"></span>
         </div>
       </div>`,
     props: [
@@ -1055,11 +1055,11 @@ function checkboxDef(config, tokens) {
     const fill = checked || indeterminate ? "#2563eb" : C.bg;
     const borderColor = checked || indeterminate ? "#2563eb" : C.border;
     const mark = checked ? `<svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="1.5,5 4,7.5 8.5,2.5"/></svg>` : indeterminate ? `<svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"><line x1="2" y1="5" x2="8" y2="5"/></svg>` : "";
-    return `<span style="display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:2px;border:2px solid ${borderColor};background:${fill};flex-shrink:0">${mark}</span>`;
+    return `<span style="display:inline-flex;align-items:center;justify-content:center;width:var(--control-size-md,16px);height:var(--control-size-md,16px);border-radius:var(--radius-sm,2px);border:2px solid ${borderColor};background:${fill};flex-shrink:0">${mark}</span>`;
   };
-  const checkboxHtml = (label, checked, opts = "", helper = "") => `<label style="display:inline-flex;align-items:flex-start;gap:8px;cursor:pointer;font-family:${esc(ff)};${opts}">
+  const checkboxHtml = (label, checked, opts = "", helper = "") => `<label style="display:inline-flex;align-items:flex-start;gap:var(--spacing-2,8px);cursor:pointer;font-family:${esc(ff)};${opts}">
       ${boxHtml(checked)}
-      <span style="font-size:14px;color:${C.text};line-height:1.4">${label}${helper ? `<br><span style="font-size:12px;color:${C.textSecondary}">${helper}</span>` : ""}</span>
+      <span style="font-size:var(--font-size-small,0.875rem);color:${C.text};line-height:1.4">${label}${helper ? `<br><span style="font-size:var(--font-size-caption,0.75rem);color:${C.textSecondary}">${helper}</span>` : ""}</span>
     </label>`;
   return {
     id: "checkbox",
@@ -1076,9 +1076,9 @@ function checkboxDef(config, tokens) {
         <div class="comp-preview-col">
           ${checkboxHtml("Unchecked", false)}
           ${checkboxHtml("Checked", true)}
-          <label style="display:inline-flex;align-items:flex-start;gap:8px;cursor:pointer;font-family:${esc(ff)}">
+          <label style="display:inline-flex;align-items:flex-start;gap:var(--spacing-2,8px);cursor:pointer;font-family:${esc(ff)}">
             ${boxHtml(false, true)}
-            <span style="font-size:14px;color:${C.text}">Indeterminate</span>
+            <span style="font-size:var(--font-size-small,0.875rem);color:${C.text}">Indeterminate</span>
           </label>
           ${checkboxHtml("Disabled", false, "opacity:0.4;cursor:not-allowed")}
         </div>
@@ -1161,9 +1161,9 @@ function checkboxDef(config, tokens) {
   label="Select all (3 of 5)"
   indeterminate
 />`,
-        previewHtml: `<label style="display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-family:${esc(ff)}">
+        previewHtml: `<label style="display:inline-flex;align-items:center;gap:var(--spacing-2,8px);cursor:pointer;font-family:${esc(ff)}">
           ${boxHtml(false, true)}
-          <span style="font-size:14px;color:${C.text}">Select all (3 of 5)</span>
+          <span style="font-size:var(--font-size-small,0.875rem);color:${C.text}">Select all (3 of 5)</span>
         </label>`
       },
       {
@@ -1240,13 +1240,13 @@ function radioDef(config, tokens) {
   };
   const circleHtml = (selected) => {
     const borderColor = selected ? C.action : C.border;
-    return `<span style="display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;border:2px solid ${borderColor};background:${C.bg};flex-shrink:0">
-      ${selected ? `<span style="width:8px;height:8px;border-radius:50%;background:${C.action}"></span>` : ""}
+    return `<span style="display:inline-flex;align-items:center;justify-content:center;width:var(--control-size-md,16px);height:var(--control-size-md,16px);border-radius:50%;border:2px solid ${borderColor};background:${C.bg};flex-shrink:0">
+      ${selected ? `<span style="width:calc(var(--control-size-md,16px) / 2);height:calc(var(--control-size-md,16px) / 2);border-radius:50%;background:${C.action}"></span>` : ""}
     </span>`;
   };
-  const radioHtml = (label, selected, opts = "") => `<label style="display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-family:${esc(ff)};${opts}">
+  const radioHtml = (label, selected, opts = "") => `<label style="display:inline-flex;align-items:center;gap:var(--spacing-2,8px);cursor:pointer;font-family:${esc(ff)};${opts}">
       ${circleHtml(selected)}
-      <span style="font-size:14px;color:${C.text}">${label}</span>
+      <span style="font-size:var(--font-size-small,0.875rem);color:${C.text}">${label}</span>
     </label>`;
   return {
     id: "radio",
@@ -1259,7 +1259,7 @@ function radioDef(config, tokens) {
         <div class="comp-overview-label">RadioGroup (vertical)</div>
         <div class="comp-preview-col">
           <fieldset style="border:none;padding:0;margin:0;font-family:${esc(ff)}">
-            <legend style="font-size:13px;font-weight:600;color:${C.text};margin-bottom:8px">Notification preference</legend>
+            <legend style="font-size:var(--font-size-small,0.875rem);font-weight:600;color:${C.text};margin-bottom:var(--spacing-2,8px)">Notification preference</legend>
             <div class="comp-preview-col">
               ${radioHtml("Email", true)}
               ${radioHtml("SMS", false)}
@@ -1342,8 +1342,8 @@ function radioDef(config, tokens) {
   <Radio value="annual" label="Annual (save 20%)" />
 </RadioGroup>`,
         previewHtml: `<fieldset style="border:none;padding:0;margin:0;font-family:${esc(ff)}">
-          <legend style="font-size:13px;font-weight:600;color:${C.text};margin-bottom:8px">Billing cycle</legend>
-          <div style="display:flex;flex-direction:column;gap:8px">
+          <legend style="font-size:var(--font-size-small,0.875rem);font-weight:600;color:${C.text};margin-bottom:var(--spacing-2,8px)">Billing cycle</legend>
+          <div style="display:flex;flex-direction:column;gap:var(--spacing-2,8px)">
             ${radioHtml("Monthly", true)}
             ${radioHtml("Annual (save 20%)", false)}
           </div>
@@ -1358,8 +1358,8 @@ function radioDef(config, tokens) {
   <Radio value="lg" label="L" />
 </RadioGroup>`,
         previewHtml: `<fieldset style="border:none;padding:0;margin:0;font-family:${esc(ff)}">
-          <legend style="font-size:13px;font-weight:600;color:${C.text};margin-bottom:8px">Size</legend>
-          <div style="display:flex;gap:16px">
+          <legend style="font-size:var(--font-size-small,0.875rem);font-weight:600;color:${C.text};margin-bottom:var(--spacing-2,8px)">Size</legend>
+          <div style="display:flex;gap:var(--spacing-4,16px)">
             ${radioHtml("S", false)}
             ${radioHtml("M", true)}
             ${radioHtml("L", false)}
@@ -1620,11 +1620,11 @@ function toastDef(config, tokens) {
     danger: `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>`,
     info: `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>`
   };
-  const alertHtml = (v, title, body) => `<div role="alert" style="display:flex;gap:12px;padding:12px 16px;border-radius:${r};border:1px solid ${v.border};background:${v.bg};font-family:${esc(ff)};max-width:360px">
+  const alertHtml = (v, title, body) => `<div role="alert" style="display:flex;gap:var(--spacing-3,12px);padding:var(--component-padding-sm,12px) var(--component-padding-md,16px);border-radius:${r};border:1px solid ${v.border};background:${v.bg};font-family:${esc(ff)};max-width:360px">
       <span style="color:${v.icon};flex-shrink:0;margin-top:1px">${icons[v.name]}</span>
       <div>
-        <p style="margin:0;font-size:13px;font-weight:600;color:${v.icon}">${title}</p>
-        <p style="margin:4px 0 0;font-size:13px;color:var(--color-text-secondary,#6b7280)">${body}</p>
+        <p style="margin:0;font-size:var(--font-size-small,0.875rem);font-weight:600;color:${v.icon}">${title}</p>
+        <p style="margin:var(--spacing-1,4px) 0 0;font-size:var(--font-size-small,0.875rem);color:var(--color-text-secondary,#6b7280)">${body}</p>
       </div>
     </div>`;
   return {
@@ -1712,11 +1712,11 @@ function toastDef(config, tokens) {
 >
   Upgrade to continue using all features.
 </Alert>`,
-        previewHtml: `<div role="alert" style="display:flex;gap:12px;padding:12px 16px;border-radius:${r};border:1px solid ${vWarning.border};background:${vWarning.bg};font-family:${esc(ff)};max-width:360px">
+        previewHtml: `<div role="alert" style="display:flex;gap:var(--spacing-3,12px);padding:var(--component-padding-sm,12px) var(--component-padding-md,16px);border-radius:${r};border:1px solid ${vWarning.border};background:${vWarning.bg};font-family:${esc(ff)};max-width:360px">
           <span style="color:${vWarning.icon};flex-shrink:0;margin-top:1px">${icons["warning"]}</span>
           <div style="flex:1">
-            <p style="margin:0;font-size:13px;font-weight:600;color:${vWarning.icon}">Your trial expires in 3 days</p>
-            <p style="margin:4px 0 0;font-size:13px;color:var(--color-text-secondary,#6b7280)">Upgrade to continue using all features.</p>
+            <p style="margin:0;font-size:var(--font-size-small,0.875rem);font-weight:600;color:${vWarning.icon}">Your trial expires in 3 days</p>
+            <p style="margin:var(--spacing-1,4px) 0 0;font-size:var(--font-size-small,0.875rem);color:var(--color-text-secondary,#6b7280)">Upgrade to continue using all features.</p>
           </div>
           <button style="background:transparent;border:none;cursor:pointer;color:var(--color-text-secondary,#6b7280);padding:2px;flex-shrink:0" aria-label="Dismiss">\u2715</button>
         </div>`
@@ -1740,11 +1740,11 @@ toast.add({
 });`,
         previewHtml: `<div style="position:relative;background:var(--color-bg-subtle,#f8fafc);border:1px dashed var(--color-border-default,#e2e8f0);border-radius:${r};padding:20px;min-height:80px;font-family:${esc(ff)}">
           <p style="font-size:12px;color:var(--color-text-secondary,#6b7280);margin:0 0 12px">Bottom-right overlay (fixed position)</p>
-          <div style="display:flex;gap:12px;padding:12px 16px;border-radius:${r};border:1px solid var(--color-success-border,#86efac);background:var(--color-success-subtle,#dcfce7);box-shadow:0 4px 12px rgba(0,0,0,0.12)">
+          <div style="display:flex;gap:var(--spacing-3,12px);padding:var(--component-padding-sm,12px) var(--component-padding-md,16px);border-radius:${r};border:1px solid var(--color-success-border,#86efac);background:var(--color-success-subtle,#dcfce7);box-shadow:0 4px 12px rgba(0,0,0,0.12)">
             <span style="color:var(--color-success,#16a34a)">${icons["success"]}</span>
             <div>
-              <p style="margin:0;font-size:13px;font-weight:600;color:var(--color-text-primary,#0f172a)">Saved</p>
-              <p style="margin:4px 0 0;font-size:13px;color:var(--color-text-secondary,#6b7280)">Your changes have been saved.</p>
+              <p style="margin:0;font-size:var(--font-size-small,0.875rem);font-weight:600;color:var(--color-text-primary,#0f172a)">Saved</p>
+              <p style="margin:var(--spacing-1,4px) 0 0;font-size:var(--font-size-small,0.875rem);color:var(--color-text-secondary,#6b7280)">Your changes have been saved.</p>
             </div>
             <button style="background:transparent;border:none;cursor:pointer;color:var(--color-text-secondary,#6b7280);padding:2px" aria-label="Dismiss">\u2715</button>
           </div>

package/dist/index.js

@@ -1206,6 +1206,11 @@ var RADIUS_PRESETS = {
   comfortable: { none: 0, sm: 2, md: 4, lg: 8, xl: 16, full: 9999 },
   spacious: { none: 0, sm: 3, md: 6, lg: 12, xl: 20, full: 9999 }
 };
+var CONTROL_SIZE_PRESETS = {
+  compact: { sm: 12, md: 14, lg: 18 },
+  comfortable: { sm: 14, md: 16, lg: 20 },
+  spacious: { sm: 16, md: 18, lg: 24 }
+};
 var PRESET_BASE_UNITS = {
   compact: 2,
   comfortable: 4,
@@ -1593,6 +1598,19 @@ function emitBaseCss(config, resolution) {
   if (typoEntries.length > 0) {
     sections.push(emitBlock(":root", typoEntries, "Typography"));
   }
+  const currentPreset = config.philosophy?.density ?? "comfortable";
+  const controlSizes = CONTROL_SIZE_PRESETS[currentPreset] ?? CONTROL_SIZE_PRESETS.comfortable;
+  sections.push(
+    emitBlock(
+      ":root",
+      [
+        ["control-size-sm", `${controlSizes.sm}px`],
+        ["control-size-md", `${controlSizes.md}px`],
+        ["control-size-lg", `${controlSizes.lg}px`]
+      ],
+      "Control sizes"
+    )
+  );
   const radiusEntries = Object.entries(
     config.radius ?? {}
   ).filter(([, v]) => v !== void 0).map(([k, v]) => [`radius-${k}`, v === 9999 ? "9999px" : `${v}px`]);

package/package.json

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