@nghitrum/dsforge 0.1.5-alpha.9 → 0.2.0

package/dist/generateAiFolder-3OOFWBH7.js

@@ -0,0 +1,70 @@
+// src/adapters/react/generateAiFolder.ts
+function generateSystemPrompt(systemName, tokens, componentNames) {
+  const tokenLines = Object.entries(tokens).map(([cssVar, values]) => `${cssVar.padEnd(35)} ${values.light}  (dark: ${values.dark})`).join("\n");
+  const pkgName = systemName.toLowerCase().replace(/\s+/g, "-");
+  return `# ${systemName} \u2014 AI Context
+
+You are helping a developer build UI using the ${systemName} design system, generated by dsforge.
+
+## Rules
+- Never hardcode colours, spacing, or typography values
+- Always use CSS custom properties from this design system
+- Always import components from '${pkgName}'
+- Never install or suggest third-party component libraries
+
+## Tokens
+${tokenLines}
+
+## Available Components
+${componentNames.join(", ")}
+
+## Usage
+import { ${componentNames.slice(0, 3).join(", ")} } from '${pkgName}'
+import '${pkgName}/tokens/base.css'
+`;
+}
+function generateComponentsJson(systemName, components, metadatas) {
+  const metaMap = Object.fromEntries(metadatas.map((m) => [m.name, m]));
+  const pkgName = systemName.toLowerCase().replace(/\s+/g, "-");
+  const combined = components.map((c) => ({
+    name: c.name,
+    import: `import { ${c.name} } from '${pkgName}'`,
+    description: c.description,
+    props: c.props,
+    examples: c.examples.slice(0, 2),
+    tokens: Object.keys(c.cssVars.light),
+    aiGuidance: metaMap[c.name]?.aiGuidance ?? []
+  }));
+  return JSON.stringify({ system: systemName, components: combined }, null, 2);
+}
+function generateCursorContext(systemName) {
+  return `# Design System Context for Cursor
+
+This project uses the ${systemName} design system. When generating any UI code:
+
+1. Import components from '${systemName.toLowerCase().replace(/\s+/g, "-")}'
+2. Use CSS variables from tokens/base.css for all visual values
+3. Refer to ai/components.json for the full component API and usage rules
+
+@file ../ai/system-prompt.md
+@file ../ai/components.json
+`;
+}
+function generateCopilotInstructions(systemName) {
+  const pkgName = systemName.toLowerCase().replace(/\s+/g, "-");
+  return `# GitHub Copilot Instructions
+
+This project uses the ${systemName} design system.
+
+- Always import components from '${pkgName}'
+- Never hardcode colour, spacing, or typography values \u2014 use CSS custom properties
+- Refer to ai/components.json for component APIs, props, and usage guidance
+- Refer to ai/system-prompt.md for design system rules
+`;
+}
+export {
+  generateComponentsJson,
+  generateCopilotInstructions,
+  generateCursorContext,
+  generateSystemPrompt
+};

package/dist/generateComponentJson-XBEUWCW6.js

@@ -0,0 +1,16 @@
+import {
+  COMPONENT_JSON_DEFINITIONS
+} from "./chunk-A7VW6SII.js";
+
+// src/adapters/react/generateComponentJson.ts
+function generateComponentJson(name, resolvedCssVars) {
+  const definition = COMPONENT_JSON_DEFINITIONS[name];
+  if (!definition) throw new Error(`No JSON definition found for component: ${name}`);
+  return {
+    ...definition,
+    cssVars: resolvedCssVars
+  };
+}
+export {
+  generateComponentJson
+};

package/dist/generateComponentMetadata-2L5VNERD.js

@@ -0,0 +1,13 @@
+import {
+  COMPONENT_METADATA_DEFINITIONS
+} from "./chunk-A7VW6SII.js";
+
+// src/adapters/react/generateComponentMetadata.ts
+function generateComponentMetadata(name) {
+  const definition = COMPONENT_METADATA_DEFINITIONS[name];
+  if (!definition) throw new Error(`No metadata definition found for component: ${name}`);
+  return definition;
+}
+export {
+  generateComponentMetadata
+};

package/dist/generateRegistry-3MEZDJAJ.js

@@ -0,0 +1,19 @@
+// src/adapters/react/generateRegistry.ts
+function generateRegistry(systemName, version, components) {
+  return {
+    $schema: "https://ui.shadcn.com/schema/registry.json",
+    name: systemName,
+    version,
+    description: `Design system generated by dsforge`,
+    items: components.map((c) => ({
+      name: c.name.toLowerCase(),
+      type: "registry:ui",
+      description: c.description,
+      files: [{ path: `components/${c.name}/${c.name}.tsx`, type: "registry:component" }],
+      cssVars: c.cssVars
+    }))
+  };
+}
+export {
+  generateRegistry
+};

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

@@ -2,9 +2,12 @@ import {
   PRESETS,
   RADIUS_PRESETS,
   SPACING_PRESETS,
-  buildSemanticSpacing,
-  isProUnlocked
-} from "./chunk-YUPXTQZ5.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(
@@ -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(