@nghitrum/dsforge 0.1.5-alpha.1 → 0.1.5-alpha.10

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

@@ -1,3 +1,15 @@
+import {
+  PRESETS,
+  RADIUS_PRESETS,
+  SPACING_PRESETS,
+  buildSemanticSpacing,
+  isProUnlocked
+} from "./chunk-YUPXTQZ5.js";
+import {
+  COMPONENT_JSON_DEFINITIONS,
+  COMPONENT_METADATA_DEFINITIONS
+} from "./chunk-A7VW6SII.js";
+
 // src/generators/showcase/types.ts
 function esc(s) {
   return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
@@ -32,31 +44,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 +104,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 +141,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("")}
@@ -228,11 +222,9 @@ var lockedPanel = (label) => `
     <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 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 propsTable = `
+function buildPropsTable(props) {
+  const sorted = [...props].sort((a, b) => (b.required ? 1 : 0) - (a.required ? 1 : 0));
+  return `
     <table class="props-table">
       <thead>
         <tr>
@@ -244,7 +236,7 @@ function buildComponentPage(def, isPro) {
         </tr>
       </thead>
       <tbody>
-        ${def.props.map(
+        ${sorted.map(
     (p) => `
           <tr>
             <td><code class="prop-name">${esc(p.name)}</code></td>
@@ -258,26 +250,83 @@ function buildComponentPage(def, isPro) {
   ).join("")}
       </tbody>
     </table>`;
-  const examplesHtml = def.examples.map(
+}
+function buildExamplesHtml(id, examples) {
+  return examples.map(
     (ex, i) => `
     <div class="example-block">
       <div class="example-header">
         <div class="example-label">${esc(ex.label)}</div>
-        <div class="example-desc">${esc(ex.description)}</div>
+        ${ex.description ? `<div class="example-desc">${esc(ex.description)}</div>` : ""}
       </div>
-      <div class="example-preview">${ex.previewHtml}</div>
+      ${ex.previewHtml ? `<div class="example-preview">${ex.previewHtml}</div>` : ""}
       <div class="example-code-wrap">
         <div class="example-code-bar">
           <span>TSX</span>
-          <button class="copy-btn" onclick="copyCode('${def.id}-ex-${i}', this)">Copy</button>
+          <button class="copy-btn" onclick="copyCode('${id}-ex-${i}', this)">Copy</button>
         </div>
-        <pre class="example-code" id="${def.id}-ex-${i}">${esc(ex.code)}</pre>
+        <pre class="example-code" id="${id}-ex-${i}">${esc(ex.code)}</pre>
       </div>
     </div>`
   ).join("");
-  const a11yHtml = `
+}
+function requirementBadge(val) {
+  if (typeof val === "boolean") {
+    return val ? '<span class="a11y-badge a11y-badge-aa">Yes</span>' : '<span class="a11y-badge" style="background:var(--color-bg-overlay,#f1f5f9);color:var(--color-text-secondary,#64748b);border:1px solid var(--color-border-default,#e2e8f0)">No</span>';
+  }
+  return `<span class="a11y-badge a11y-badge-aa">${esc(val)}</span>`;
+}
+function buildA11yHtml(contract, wcagItems) {
+  const requirements = [
+    {
+      label: "Keyboard operable",
+      value: contract.keyboard,
+      desc: "Component can be fully operated with keyboard alone. No mouse required."
+    },
+    {
+      label: "Focus ring",
+      value: contract.focusRing,
+      desc: "Visible focus indicator requirement when the element receives keyboard focus."
+    },
+    {
+      label: "aria-label",
+      value: contract.ariaLabel,
+      desc: "When a programmatic accessible label must be provided by the consumer."
+    }
+  ];
+  const requirementsHtml = `
+    <div class="a11y-requirements">
+      ${requirements.map(
+    (r) => `
+      <div class="a11y-req-row">
+        <div class="a11y-req-meta">
+          <span class="a11y-req-label">${esc(r.label)}</span>
+          ${requirementBadge(r.value)}
+        </div>
+        <p class="a11y-req-desc">${esc(r.desc)}</p>
+      </div>`
+  ).join("")}
+      ${contract.roles.length > 0 ? `<div class="a11y-req-row">
+        <div class="a11y-req-meta">
+          <span class="a11y-req-label">ARIA roles</span>
+          <span style="display:flex;gap:4px;flex-wrap:wrap">
+            ${contract.roles.map((r) => `<code class="a11y-role-chip">${esc(r)}</code>`).join("")}
+          </span>
+        </div>
+        <p class="a11y-req-desc">The semantic roles this component exposes to assistive technology.</p>
+      </div>` : ""}
+      ${contract.notes.map(
+    (note) => `
+      <div class="a11y-note">
+        <span class="a11y-note-icon">\u21B3</span>
+        <p class="a11y-note-text">${esc(note)}</p>
+      </div>`
+  ).join("")}
+    </div>`;
+  const wcagHtml = wcagItems.length > 0 ? `
+    <div class="group-title" style="margin-top:32px">WCAG Criteria</div>
     <div class="a11y-list">
-      ${def.a11y.map(
+      ${wcagItems.map(
     (item) => `
         <div class="a11y-item">
           <div class="a11y-header">
@@ -287,45 +336,60 @@ function buildComponentPage(def, isPro) {
           <p class="a11y-desc">${esc(item.description)}</p>
         </div>`
   ).join("")}
-    </div>`;
-  const aiJson = JSON.stringify(def.aiMeta, null, 2);
-  const aiHtml = `
+    </div>` : "";
+  return `
+    <div class="group-title">Requirements</div>
+    ${requirementsHtml}
+    ${wcagHtml}`;
+}
+function buildAiMetaHtml(id, meta) {
+  const metaJson = JSON.stringify(meta, null, 2);
+  return `
     <div class="ai-meta-intro">
-      <p>This JSON contract is emitted to <code>dist-ds/metadata/${def.id}.json</code>.
+      <p>This JSON contract is emitted to <code>components/${esc(meta.name)}/${esc(meta.name)}.metadata.json</code>.
       AI coding assistants use it to understand when and how to use this component correctly.</p>
     </div>
     <div class="example-code-wrap" style="margin-top:16px">
       <div class="example-code-bar">
         <span>JSON</span>
-        <button class="copy-btn" onclick="copyCode('${def.id}-ai-meta', this)">Copy</button>
+        <button class="copy-btn" onclick="copyCode('${id}-ai-meta', this)">Copy</button>
       </div>
-      <pre class="example-code" id="${def.id}-ai-meta">${esc(aiJson)}</pre>
+      <pre class="example-code" id="${id}-ai-meta">${esc(metaJson)}</pre>
     </div>
     <div class="ai-guidance">
       <div class="group-title" style="margin-top:24px">AI usage guidance</div>
       <ul class="ai-guidance-list">
-        ${def.aiMeta.aiGuidance.map((g) => `<li>${esc(g)}</li>`).join("")}
+        ${meta.aiGuidance.map((g) => `<li>${esc(g)}</li>`).join("")}
       </ul>
     </div>`;
+}
+function buildComponentPage(input) {
+  const { id, description, overviewHtml, json, showcaseExamples, a11yContract, a11yItems, metadata, isPro } = input;
+  const tabId = (tab) => `${id}-tab-${tab}`;
+  const panelId = (tab) => `${id}-panel-${tab}`;
+  const overviewContent = `
+    <div class="comp-overview">${overviewHtml}</div>
+    <p class="component-description">${esc(description)}</p>`;
+  const propsContent = buildPropsTable(json.props);
+  const examplesContent = buildExamplesHtml(id, showcaseExamples);
+  const a11yContent = a11yContract ? buildA11yHtml(a11yContract, a11yItems) : `<div class="a11y-list">${a11yItems.map((item) => `
+      <div class="a11y-item">
+        <div class="a11y-header">
+          <span class="a11y-criterion">${esc(item.criterion)}</span>
+          <span class="a11y-badge a11y-badge-${item.level.toLowerCase()}">WCAG ${item.level}</span>
+        </div>
+        <p class="a11y-desc">${esc(item.description)}</p>
+      </div>`).join("")}</div>`;
+  const aiContent = isPro && metadata ? buildAiMetaHtml(id, metadata) : lockedPanel("AI Metadata");
   const tabs = [
-    { id: "overview", label: "Overview", content: overviewHtml, locked: false },
-    { id: "props", label: "Props", content: propsTable, locked: false },
-    { id: "examples", label: "Examples", content: examplesHtml, locked: false },
-    {
-      id: "accessibility",
-      label: "Accessibility",
-      content: isPro ? a11yHtml : lockedPanel("Accessibility"),
-      locked: !isPro
-    },
-    {
-      id: "ai-metadata",
-      label: "AI Metadata",
-      content: isPro ? aiHtml : lockedPanel("AI Metadata"),
-      locked: !isPro
-    }
+    { 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 }
   ];
   return `
-    <div class="comp-tabs" id="${def.id}-tabs">
+    <div class="comp-tabs" id="${id}-tabs">
       <div class="comp-tab-bar" role="tablist">
         ${tabs.map(
     (t, i) => `
@@ -335,7 +399,7 @@ function buildComponentPage(def, isPro) {
             role="tab"
             aria-selected="${i === 0}"
             aria-controls="${panelId(t.id)}"
-            onclick="${t.locked ? "return false" : `switchTab('${def.id}', '${t.id}', this)`}"
+            onclick="${t.locked ? "return false" : `switchTab('${id}', '${t.id}', this)`}"
             ${t.locked ? 'title="Unlock with dsforge Pro"' : ""}
           >${esc(t.label)}${t.locked ? " &#x1F512;" : ""}</button>`
   ).join("")}
@@ -366,6 +430,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 +619,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 +831,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>
@@ -901,7 +979,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" },
@@ -913,6 +991,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>
@@ -923,10 +1003,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: [
@@ -1047,25 +1127,30 @@ 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",
     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>
         <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>
@@ -1148,9 +1233,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>`
       },
       {
@@ -1227,24 +1312,26 @@ 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",
     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>
         <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)}
@@ -1327,8 +1414,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>
@@ -1343,8 +1430,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)}
@@ -1425,6 +1512,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>
@@ -1599,17 +1692,23 @@ 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 {
     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>
@@ -1685,11 +1784,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>`
@@ -1713,11 +1812,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>
@@ -1791,6 +1890,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 +2066,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" },
@@ -1982,6 +2100,23 @@ 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)\./, ""),
+      v
+    ])
+  );
+  const lightTheme = config.themes?.["light"] ?? {};
+  const darkTheme = config.themes?.["dark"] ?? {};
+  const lightCssVars = {
+    ...Object.fromEntries(Object.entries(flatTokens).map(([k, v]) => [`--${k}`, v])),
+    ...Object.fromEntries(Object.entries(lightTheme).map(([k, v]) => [`--${k}`, String(v)]))
+  };
+  const darkCssVars = {
+    ...Object.fromEntries(Object.entries(flatTokens).map(([k, v]) => [`--${k}`, v])),
+    ...Object.fromEntries(Object.entries(darkTheme).map(([k, v]) => [`--${k}`, String(v)]))
+  };
+  const resolvedCssVars = { light: lightCssVars, dark: darkCssVars };
   const sections = {
     colors: buildColorSection(config, tokens),
     typography: buildTypographySection(config),
@@ -1990,24 +2125,56 @@ function generateShowcase(config, resolution) {
     elevation: buildElevationSection(config),
     motion: buildMotionSection(config),
     ...Object.fromEntries(
-      SHOWCASE_COMPONENTS.map((entry) => [
-        entry.id,
-        buildComponentPage(entry.def(config, tokens), isPro)
-      ])
+      SHOWCASE_COMPONENTS.map((entry) => {
+        const defData = entry.def(config, tokens);
+        const jsonDef = COMPONENT_JSON_DEFINITIONS[entry.label];
+        const metaDef = COMPONENT_METADATA_DEFINITIONS[entry.label] ?? null;
+        const componentJson = jsonDef ? { ...jsonDef, cssVars: resolvedCssVars } : {
+          name: entry.label,
+          description: entry.pageDescription,
+          props: defData.props,
+          examples: defData.examples.map((ex) => ({ label: ex.label, code: ex.code })),
+          cssVars: resolvedCssVars
+        };
+        return [
+          entry.id,
+          buildComponentPage({
+            id: entry.id,
+            label: entry.label,
+            description: componentJson.description,
+            overviewHtml: defData.overviewHtml,
+            json: componentJson,
+            showcaseExamples: defData.examples,
+            a11yContract: metaDef?.accessibilityContract ?? null,
+            a11yItems: defData.a11y,
+            metadata: isPro ? metaDef : null,
+            isPro
+          })
+        ];
+      })
     )
   };
-  const flatTokens = Object.fromEntries(
-    Object.entries(tokens).map(([k, v]) => [
-      k.replace(/^(global|semantic|component)\./, ""),
-      v
-    ])
-  );
-  const lightTheme = config.themes?.["light"] ?? {};
-  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();
+  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
+      };
+    })
+  };
+  const dataScript = `<script>
+    window.__DSFORGE__ = ${JSON.stringify(showcaseData)};
+  </script>`;
   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 +2189,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 +2257,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; }
@@ -2257,6 +2454,20 @@ ${themeCssDark}
     }
 
     /* \u2500\u2500 Accessibility \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+    /* Requirements grid */
+    .a11y-requirements { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--color-border-default, #e2e8f0); border-radius: 10px; overflow: hidden; margin-bottom: 4px; }
+    .a11y-req-row { padding: 14px 16px; border-bottom: 1px solid var(--color-border-default, #e2e8f0); background: var(--color-bg-default, #fff); }
+    .a11y-req-row:last-child { border-bottom: none; }
+    .a11y-req-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; flex-wrap: wrap; }
+    .a11y-req-label { font-size: 13px; font-weight: 600; color: var(--color-text-primary, #0f172a); }
+    .a11y-req-desc { font-size: 12px; color: var(--color-text-secondary, #64748b); line-height: 1.55; margin: 0; }
+    .a11y-role-chip { font-family: monospace; font-size: 12px; background: var(--color-bg-overlay, #f1f5f9); border: 1px solid var(--color-border-default, #e2e8f0); border-radius: 4px; padding: 1px 7px; color: var(--color-action, #2563eb); }
+    /* Notes */
+    .a11y-note { display: flex; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--color-border-default, #e2e8f0); background: var(--color-bg-subtle, #f8fafc); }
+    .a11y-note:last-child { border-bottom: none; }
+    .a11y-note-icon { font-size: 12px; color: var(--color-text-secondary, #64748b); flex-shrink: 0; padding-top: 1px; }
+    .a11y-note-text { font-size: 12px; color: var(--color-text-secondary, #64748b); line-height: 1.55; margin: 0; }
+    /* WCAG criteria list */
     .a11y-list { display: flex; flex-direction: column; gap: 1px; }
     .a11y-item { padding: 16px; border: 1px solid var(--color-border-default, #e2e8f0); border-radius: 8px; margin-bottom: 10px; background: var(--color-bg-default, #fff); }
     .a11y-header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
@@ -2290,21 +2501,43 @@ ${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); } }
     @media (prefers-reduced-motion: reduce) { @keyframes dsforge-spin { to { transform: none; } } }
   </style>
+  ${dataScript}
 </head>
 <body>
 
@@ -2337,6 +2570,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 +2620,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 +2654,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>`;