@nghitrum/dsforge 0.1.5-alpha.8 → 0.2.0

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

@@ -2,9 +2,12 @@ import {
   PRESETS,
   RADIUS_PRESETS,
   SPACING_PRESETS,
-  buildSemanticSpacing,
-  isProUnlocked
-} from "./chunk-JUMR3N5J.js";
+  buildSemanticSpacing
+} from "./chunk-5YT3VNE6.js";
+import {
+  COMPONENT_JSON_DEFINITIONS,
+  COMPONENT_METADATA_DEFINITIONS
+} from "./chunk-A7VW6SII.js";
 
 // src/generators/showcase/types.ts
 function esc(s) {
@@ -211,20 +214,9 @@ 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 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>
-    <p class="component-description">${esc(def.description)}</p>`;
-  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>
@@ -236,7 +228,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>
@@ -250,26 +242,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">
@@ -279,57 +328,71 @@ 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 } = 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 = metadata ? buildAiMetaHtml(id, 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 },
+    { 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="${def.id}-tabs">
+    <div class="comp-tabs" id="${id}-tabs">
       <div class="comp-tab-bar" role="tablist">
         ${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('${def.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(
@@ -907,7 +970,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 +994,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 +1118,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 +1139,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 +1224,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 +1303,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 +1322,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 +1405,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 +1421,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 +1683,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 +1775,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 +1803,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>
@@ -2027,7 +2090,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),
@@ -2036,23 +2115,52 @@ 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: metaDef
+          })
+        ];
+      })
     )
   };
-  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(),
+    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: metaDef
+      };
+    })
+  };
+  const dataScript = `<script>
+    window.__DSFORGE__ = ${JSON.stringify(showcaseData)};
+  </script>`;
   return `<!DOCTYPE html>
 <html lang="en" data-theme="light" data-density="${defaultDensity}">
 <head>
@@ -2143,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; }
@@ -2334,6 +2432,20 @@ ${densityCss}
     }
 
     /* \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; }
@@ -2351,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); }
@@ -2403,6 +2500,7 @@ ${densityCss}
     @keyframes dsforge-spin { to { transform: rotate(360deg); } }
     @media (prefers-reduced-motion: reduce) { @keyframes dsforge-spin { to { transform: none; } } }
   </style>
+  ${dataScript}
 </head>
 <body>
 
@@ -2435,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(