@vettvangur/design-system 0.0.1

package/dist/generate-astro-DwBkft4p.js

@@ -0,0 +1,820 @@
+#!/usr/bin/env node
+import { promises } from 'node:fs';
+import path from 'node:path';
+import url from 'node:url';
+import process from 'node:process';
+
+// core/typography.mjs
+path.dirname(url.fileURLToPath(import.meta.url));
+const DEFAULT_TYPO_PATH = path.resolve(process.cwd(), 'src/styles/config/typography.css');
+
+/**
+ * Parse CSS custom properties for a given family (e.g. "body" or "headline").
+ * Supports:
+ *   --text-body1: 20px;
+ *   --leading-body1: 30px;
+ *   --text-headline1-mobile: 40px;
+ *   --leading-headline1-mobile: 50px;
+ */
+function parseFamily(css, family) {
+  // desktop
+  const textRe = new RegExp(`--text-${family}(\\d+)\\s*:\\s*([^;]+);`, 'g');
+  const leadRe = new RegExp(`--leading-${family}(\\d+)\\s*:\\s*([^;]+);`, 'g');
+  // mobile overrides
+  const textMobRe = new RegExp(`--text-${family}(\\d+)-mobile\\s*:\\s*([^;]+);`, 'g');
+  const leadMobRe = new RegExp(`--leading-${family}(\\d+)-mobile\\s*:\\s*([^;]+);`, 'g');
+
+  /** @type {Map<string, {text?:string, leading?:string, textMobile?:string, leadingMobile?:string}>} */
+  const map = new Map();
+  for (const m of css.matchAll(textRe)) {
+    const n = m[1];
+    const v = m[2].trim();
+    const e = map.get(n) ?? {};
+    e.text = v;
+    map.set(n, e);
+  }
+  for (const m of css.matchAll(leadRe)) {
+    const n = m[1];
+    const v = m[2].trim();
+    const e = map.get(n) ?? {};
+    e.leading = v;
+    map.set(n, e);
+  }
+  for (const m of css.matchAll(textMobRe)) {
+    const n = m[1];
+    const v = m[2].trim();
+    const e = map.get(n) ?? {};
+    e.textMobile = v;
+    map.set(n, e);
+  }
+  for (const m of css.matchAll(leadMobRe)) {
+    const n = m[1];
+    const v = m[2].trim();
+    const e = map.get(n) ?? {};
+    e.leadingMobile = v;
+    map.set(n, e);
+  }
+
+  // Build output objects
+  const items = [...map.keys()].map(Number).sort((a, b) => a - b).map(n => {
+    const k = String(n);
+    const e = map.get(k) ?? {};
+    const desktop = e.text || e.leading ? {
+      size: e.text ?? null,
+      lineHeight: e.leading ?? null
+    } : null;
+    const mobile = e.textMobile || e.leadingMobile ? {
+      size: e.textMobile ?? null,
+      lineHeight: e.leadingMobile ?? null
+    } : null;
+    const titleBase = family === 'body' ? 'Body' : 'Headline';
+    return {
+      title: `${titleBase} ${n}`,
+      size: e.text ?? null,
+      lineheight: e.leading ?? null,
+      class: `${family}-${n}`,
+      config: {
+        mobile,
+        desktop
+      }
+    };
+  });
+  return items;
+}
+
+/** Read the CSS file and return { bodies, headlines } arrays in your required shape. */
+async function parseTypography(typographyCssPath = DEFAULT_TYPO_PATH) {
+  const css = await promises.readFile(typographyCssPath, 'utf8');
+  const s = {
+    bodies: parseFamily(css, 'body'),
+    headlines: parseFamily(css, 'headline')
+  };
+  return s;
+}
+
+/** CLI: node core/typography.mjs [path/to/typography.css] */
+if (import.meta.url === url.pathToFileURL(process.argv[1]).href) {
+  const file = process.argv[2] ? path.resolve(process.argv[2]) : DEFAULT_TYPO_PATH;
+  parseTypography(file).then(res => {
+    // pretty-print to stdout so other generators can pipe/consume it
+    console.log(JSON.stringify(res, null, 2));
+  }).catch(err => {
+    console.error('Failed to parse typography CSS:', err);
+    process.exit(1);
+  });
+}
+
+// core/colors.mjs
+path.dirname(url.fileURLToPath(import.meta.url));
+const DEFAULT_COLOR_PATH = path.resolve(process.cwd(), 'src/styles/config/color.css');
+
+// Turn "primary-dark-blue" -> "Primary Dark Blue"
+function titleCaseFromKebab(kebab) {
+  return kebab.split('-').map(w => w ? w[0].toUpperCase() + w.slice(1) : w).join(' ');
+}
+
+/**
+ * Parse @theme color vars like:
+ *   --color-primary: #123456;
+ *   --color-secondary-blue: #4566c4;
+ *   --color-transparent: transparent;
+ * and return:
+ *   [{ title, color, class }]
+ */
+async function parseColors(filePath = DEFAULT_COLOR_PATH) {
+  const css = await promises.readFile(filePath, 'utf8');
+
+  // Matches "--color-<name>: <value>;"
+  const re = /--color-([a-z0-9-]+)\s*:\s*([^;]+);/gi;
+  /** @type {Array<{title:string,color:string,class:string}>} */
+  const out = [];
+  for (const m of css.matchAll(re)) {
+    const name = m[1].trim(); // e.g. "primary-dark-blue"
+    const value = m[2].trim(); // e.g. "#292a4b" or "rgba(...)" or "orange"
+    out.push({
+      title: titleCaseFromKebab(name),
+      // "Primary Dark Blue"
+      color: value,
+      // "#292a4b"
+      class: `x-${name}` // "x-primary-dark-blue"
+    });
+  }
+
+  //console.log('out', out)
+
+  return out;
+}
+
+/** CLI usage: node core/colors.mjs [path/to/color.css] */
+if (import.meta.url === url.pathToFileURL(process.argv[1]).href) {
+  const file = process.argv[2] ? path.resolve(process.argv[2]) : DEFAULT_COLOR_PATH;
+  parseColors(file).then(arr => console.log(JSON.stringify(arr, null, 2))).catch(err => {
+    console.error('Failed to parse colors:', err);
+    process.exit(1);
+  });
+}
+
+// core/buttons.mjs
+path.dirname(url.fileURLToPath(import.meta.url));
+const DEFAULT_BUTTON_CSS = path.resolve(process.cwd(), 'src/styles/core/button.css');
+
+/**
+ * Parse @utility blocks from the CSS file.
+ * Returns Map<utilityName, blockContent>
+ */
+function parseUtilityBlocks(css) {
+  const re = /@utility\s+([a-z0-9-]+)\s*\{([\s\S]*?)\}/gi;
+  const map = new Map();
+  for (const m of css.matchAll(re)) {
+    const name = m[1].trim(); // e.g. "button-primary"
+    const body = m[2].trim(); // inner CSS of the utility
+    map.set(name, body);
+  }
+  return map;
+}
+function kebabToTitle(kebab) {
+  return kebab.split('-').filter(Boolean).map(w => w[0].toUpperCase() + w.slice(1)).join(' ');
+}
+
+// A tiny, stable "random" picker for lorem words — keeps output deterministic per name.
+const LOREM = ['Lorem', 'Ipsum', 'Dolor', 'Sit', 'Amet', 'Quasar', 'Nimbus', 'Orbit', 'Vector', 'Nova', 'Pulse'];
+function pickWord(seedStr) {
+  let h = 0;
+  for (let i = 0; i < seedStr.length; i++) {
+    h = h * 131 + seedStr.charCodeAt(i) >>> 0;
+  }
+  return LOREM[h % LOREM.length];
+}
+
+/**
+ * Parse the button utilities and return:
+ * [
+ *   { title: 'Button Primary', class: 'button-primary', text: 'Lorem' },
+ *   { title: 'Button Square',  class: 'button-primary button-square', text: 'Ipsum' },
+ *   ...
+ * ]
+ */
+async function parseButtons(filePath = DEFAULT_BUTTON_CSS) {
+  const css = await promises.readFile(filePath, 'utf8');
+  const utilities = parseUtilityBlocks(css);
+
+  // Identify names
+  const allButtonUtils = [...utilities.keys()].filter(n => n === 'button' || n.startsWith('button-'));
+
+  // Variants are utilities that explicitly apply the base "button" utility
+  const variants = allButtonUtils.filter(n => {
+    if (n === 'button') {
+      return false;
+    }
+    const body = utilities.get(n) || '';
+    return /@apply\s+button\b/.test(body);
+  });
+
+  // Modifiers are other button-* utilities (not "button" and not variants)
+  const modifiers = allButtonUtils.filter(n => n !== 'button' && !variants.includes(n));
+
+  /** @type {Array<{title:string,class:string,text:string}>} */
+  const out = [];
+
+  // Base variants
+  for (const v of variants) {
+    const label = kebabToTitle(v.replace(/^button-/, '')) || 'Base';
+    out.push({
+      title: `Button ${label}`,
+      class: v,
+      text: pickWord(v)
+    });
+  }
+
+  // Variant + modifier combos
+  for (const m of modifiers) {
+    const mLabel = kebabToTitle(m.replace(/^button-/, ''));
+    for (const v of variants) {
+      out.push({
+        title: `Button ${mLabel}`,
+        class: `${v} ${m}`,
+        text: pickWord(`${v}|${m}`)
+      });
+    }
+  }
+  return out;
+}
+
+/** CLI: node core/buttons.mjs [path/to/button.css] */
+if (import.meta.url === url.pathToFileURL(process.argv[1]).href) {
+  const file = process.argv[2] ? path.resolve(process.argv[2]) : DEFAULT_BUTTON_CSS;
+  parseButtons(file).then(arr => console.log(JSON.stringify(arr, null, 2))).catch(err => {
+    console.error('Failed to parse buttons:', err);
+    process.exit(1);
+  });
+}
+
+var ButtonType;
+(function (ButtonType) {
+  ButtonType["Button"] = "button";
+  ButtonType["Submit"] = "submit";
+  ButtonType["Reset"] = "reset";
+})(ButtonType || (ButtonType = {}));
+var InputType;
+(function (InputType) {
+  InputType["Text"] = "text";
+  InputType["Password"] = "password";
+  InputType["Email"] = "email";
+  InputType["Number"] = "number";
+  InputType["Tel"] = "tel";
+  InputType["Url"] = "url";
+  InputType["Search"] = "search";
+  InputType["Date"] = "date";
+  InputType["Time"] = "time";
+  InputType["DateTime"] = "datetime-local";
+  InputType["Month"] = "month";
+  InputType["Week"] = "week";
+  InputType["Color"] = "color";
+  InputType["File"] = "file";
+  InputType["Hidden"] = "hidden";
+  InputType["Range"] = "range";
+  InputType["Checkbox"] = "checkbox";
+  InputType["Radio"] = "radio";
+})(InputType || (InputType = {}));
+var CropFormat;
+(function (CropFormat) {
+  CropFormat["Jpeg"] = "jpeg";
+  CropFormat["Png"] = "png";
+  CropFormat["Webp"] = "webp";
+  CropFormat["Gif"] = "gif";
+})(CropFormat || (CropFormat = {}));
+var CropMode;
+(function (CropMode) {
+  CropMode["Crop"] = "crop";
+  CropMode["BoxPad"] = "boxpad";
+  CropMode["Min"] = "min";
+  CropMode["Max"] = "max";
+  CropMode["Stretch"] = "stretch";
+  CropMode["Pad"] = "pad";
+})(CropMode || (CropMode = {}));
+
+const inputs = [{
+  id: '1',
+  label: 'Input',
+  type: InputType.Text,
+  isDisabled: false,
+  isReadOnly: false,
+  isError: false
+}, {
+  id: '2',
+  label: 'Input Disabled',
+  type: InputType.Text,
+  isDisabled: true,
+  isReadOnly: false,
+  isError: false
+}, {
+  id: '3',
+  label: 'Input Read Only',
+  type: InputType.Text,
+  isDisabled: false,
+  isReadOnly: true,
+  isError: false
+}, {
+  id: '4',
+  label: 'Input Error',
+  type: InputType.Text,
+  isDisabled: false,
+  isReadOnly: false,
+  isError: true
+}];
+const selects = [{
+  id: '5',
+  label: 'Select',
+  isDisabled: false,
+  isReadOnly: false,
+  isError: true
+}, {
+  id: '6',
+  label: 'Select Disabled',
+  isDisabled: true,
+  isReadOnly: false,
+  isError: true
+}, {
+  id: '7',
+  label: 'Select Error',
+  isDisabled: false,
+  isReadOnly: false,
+  isError: true
+}];
+const checkboxes = [{
+  id: '8',
+  label: 'Checbox',
+  name: '',
+  type: InputType.Checkbox,
+  isDisabled: false,
+  isError: false
+}, {
+  id: '9',
+  label: 'Checbox',
+  name: '',
+  type: InputType.Checkbox,
+  isDisabled: false,
+  isError: false
+}, {
+  id: '10',
+  label: 'Checbox Disabled',
+  name: '',
+  type: InputType.Checkbox,
+  isDisabled: true,
+  isError: false
+}, {
+  id: '11',
+  Label: 'Checbox Error',
+  name: '',
+  type: InputType.Checkbox,
+  isDisabled: false,
+  isError: true
+}];
+const radios = [{
+  id: '12',
+  Label: 'Radio',
+  Name: 'prettyradio',
+  type: InputType.Radio,
+  isDisabled: false,
+  isError: false
+}, {
+  id: '13',
+  Label: 'Radio',
+  name: 'prettyradio',
+  type: InputType.Radio,
+  isDisabled: false,
+  isError: false
+}, {
+  id: '14',
+  Label: 'Radio Error',
+  name: 'prettyradio',
+  type: InputType.Radio,
+  isDisabled: false,
+  isError: true
+}, {
+  id: '15',
+  Label: 'Radio Disabled',
+  name: 'prettyradio',
+  type: InputType.Radio,
+  isDisabled: true,
+  isError: false
+}];
+const textareas = [{
+  id: '16',
+  Label: 'Textarea',
+  type: '',
+  isDisabled: false,
+  isReadOnly: false,
+  isError: false
+}, {
+  id: '17',
+  Label: 'Textarea Disabled',
+  type: '',
+  isDisabled: true,
+  isReadOnly: false,
+  isError: false
+}, {
+  id: '18',
+  Label: 'Textarea Read Only',
+  type: '',
+  isDisabled: false,
+  isReadOnly: true,
+  isError: false
+}, {
+  id: '19',
+  Label: 'Textarea Error',
+  type: '',
+  isDisabled: false,
+  isReadOnly: false,
+  isError: true
+}];
+var inputsSpec = {
+  inputs,
+  selects,
+  checkboxes,
+  radios,
+  textareas
+};
+
+// core/astro/generate-astro.mjs
+const CWD = process.cwd();
+
+// Generated components
+const OUT_DIR = path.resolve(CWD, 'src/astrobook/components');
+const OUT_PREVIEW = path.join(OUT_DIR, 'Preview.astro'); // <-- new
+const OUT_COLORS = path.join(OUT_DIR, 'Colors.astro');
+const OUT_BODIES = path.join(OUT_DIR, 'Bodies.astro');
+const OUT_HEADLINES = path.join(OUT_DIR, 'Headlines.astro');
+const OUT_BUTTONS = path.join(OUT_DIR, 'Buttons.astro');
+const OUT_INPUTS = path.join(OUT_DIR, 'Inputs.astro');
+
+// Story folders
+const ASTROBOOK_DIR = path.resolve(CWD, 'src/astrobook');
+const OUT_DIR_TYPOGRAPHY = path.join(ASTROBOOK_DIR, 'Typography');
+const OUT_DIR_UI = path.join(ASTROBOOK_DIR, 'UI');
+const OUT_DIR_COLORS = path.join(ASTROBOOK_DIR, 'Colors');
+async function generateAstro() {
+  // ensure dirs
+  await promises.mkdir(OUT_DIR, {
+    recursive: true
+  });
+  await promises.mkdir(ASTROBOOK_DIR, {
+    recursive: true
+  });
+  await promises.mkdir(OUT_DIR_TYPOGRAPHY, {
+    recursive: true
+  });
+  await promises.mkdir(OUT_DIR_UI, {
+    recursive: true
+  });
+  await promises.mkdir(OUT_DIR_COLORS, {
+    recursive: true
+  });
+
+  // write Preview.astro (to a FILE, not the folder)
+  await promises.writeFile(OUT_PREVIEW, generatePreview(), 'utf8');
+  console.log(`✓ Wrote ${rel(OUT_PREVIEW)} (Preview)`);
+
+  // write story files
+  await renderStoriesAstro();
+  const [colors, typography, buttons] = await Promise.all([parseColors(),
+  // -> [{ title, color, class }]
+  parseTypography(),
+  // -> { bodies: [...], headlines: [...] }
+  parseButtons() // -> [{ title, class, text }]
+  ]);
+
+  // Colors -> Colors.astro
+  if (colors?.length) {
+    await promises.writeFile(OUT_COLORS, renderColorsAstro(colors), 'utf8');
+    console.log(`✓ Wrote ${rel(OUT_COLORS)} (${colors.length} swatches)`);
+  } else {
+    console.warn('• No colors parsed — Colors.astro not written');
+  }
+
+  // Bodies -> Bodies.astro
+  if (typography?.bodies?.length) {
+    await promises.writeFile(OUT_BODIES, renderBodiesAstro(typography.bodies), 'utf8');
+    console.log(`✓ Wrote ${rel(OUT_BODIES)} (${typography.bodies.length} bodies)`);
+  } else {
+    console.warn('• No bodies parsed — Bodies.astro not written');
+  }
+
+  // Headlines -> Headlines.astro
+  if (typography?.headlines?.length) {
+    await promises.writeFile(OUT_HEADLINES, renderHeadlinesAstro(typography.headlines), 'utf8');
+    console.log(`✓ Wrote ${rel(OUT_HEADLINES)} (${typography.headlines.length} headlines)`);
+  } else {
+    console.warn('• No headlines parsed — Headlines.astro not written');
+  }
+
+  // Buttons -> Buttons.astro
+  if (buttons?.length) {
+    await promises.writeFile(OUT_BUTTONS, renderButtonsAstro(buttons), 'utf8');
+    console.log(`✓ Wrote ${rel(OUT_BUTTONS)} (${buttons.length} buttons)`);
+  } else {
+    console.warn('• No buttons parsed — Buttons.astro not written');
+  }
+
+  // Inputs -> Inputs.astro
+  const hasAnyInputs = Object.values(inputsSpec).some(arr => Array.isArray(arr) && arr.length);
+  if (hasAnyInputs) {
+    await promises.writeFile(OUT_INPUTS, renderInputsAstro(inputsSpec), 'utf8');
+    console.log(`✓ Wrote ${rel(OUT_INPUTS)} (inputs:${inputsSpec.inputs?.length ?? 0} selects:${inputsSpec.selects?.length ?? 0} ` + `checkboxes:${inputsSpec.checkboxes?.length ?? 0} radios:${inputsSpec.radios?.length ?? 0} textareas:${inputsSpec.textareas?.length ?? 0})`);
+  } else {
+    console.warn('• No input spec items — Inputs.astro not written');
+  }
+}
+
+/* ---------- story writers ---------- */
+
+async function renderStoriesAstro() {
+  const storyBody = generateStoryBody();
+  const storyColors = generateStoryColors();
+  const storyHeadline = generateStoryHeadline();
+  const storyButton = generateStoryButtons();
+  const storyInputs = generateStoryInputs();
+  const FILE_BODY = path.join(OUT_DIR_TYPOGRAPHY, 'Body.stories.ts');
+  const FILE_HEADLINES = path.join(OUT_DIR_TYPOGRAPHY, 'Headlines.stories.ts');
+  const FILE_BUTTONS = path.join(OUT_DIR_UI, 'Buttons.stories.ts');
+  const FILE_INPUTS = path.join(OUT_DIR_UI, 'Inputs.stories.ts');
+  const FILE_COLORS = path.join(OUT_DIR_COLORS, 'Colors.stories.ts');
+  await promises.writeFile(FILE_BODY, storyBody, 'utf8');
+  await promises.writeFile(FILE_HEADLINES, storyHeadline, 'utf8');
+  await promises.writeFile(FILE_BUTTONS, storyButton, 'utf8');
+  await promises.writeFile(FILE_INPUTS, storyInputs, 'utf8');
+  await promises.writeFile(FILE_COLORS, storyColors, 'utf8');
+  console.log('✓ Wrote story files:');
+  console.log(`  - ${rel(FILE_BODY)}`);
+  console.log(`  - ${rel(FILE_HEADLINES)}`);
+  console.log(`  - ${rel(FILE_BUTTONS)}`);
+  console.log(`  - ${rel(FILE_INPUTS)}`);
+  console.log(`  - ${rel(FILE_COLORS)}`);
+}
+
+/* ---------- code gens ---------- */
+
+function generatePreview() {
+  return `
+---
+/** Auto-generated - do not edit by hand */
+import '@/styles/main.css'
+import Fonts from '@/components/core/utility/Fonts.astro'
+---
+<Fonts />
+<div class="astrobook-preview bg-background">
+  <slot />
+</div>
+`.trimStart();
+}
+function generateStoryBody() {
+  return `
+// Auto-generated — do not edit by hand
+import Preview from '@/astrobook/components/Preview.astro'
+import Bodies from '@/astrobook/components/Bodies.astro'
+
+export default {
+  title: 'Typography/Body',
+  component: Bodies,
+}
+
+export const Overview = {
+  render: () => Preview({ slots: { default: Bodies({}) } }),
+}
+`.trimStart();
+}
+function generateStoryColors() {
+  return `
+// Auto-generated — do not edit by hand
+import Preview from '@/astrobook/components/Preview.astro'
+import Colors from '@/astrobook/components/Colors.astro'
+
+export default {
+  title: 'Colors',
+  component: Colors,
+}
+
+export const Overview = {
+  render: () => Preview({ slots: { default: Colors({}) } }),
+}
+`.trimStart();
+}
+function generateStoryHeadline() {
+  return `
+// Auto-generated — do not edit by hand
+import Preview from '@/astrobook/components/Preview.astro'
+import Headlines from '@/astrobook/components/Headlines.astro'
+
+export default {
+  title: 'Typography/Headlines',
+  component: Headlines,
+}
+
+export const Overview = {
+  render: () => Preview({ slots: { default: Headlines({}) } }),
+}
+`.trimStart();
+}
+function generateStoryButtons() {
+  return `
+// Auto-generated — do not edit by hand
+import Preview from '@/astrobook/components/Preview.astro'
+import Buttons from '@/astrobook/components/Buttons.astro'
+
+export default {
+  title: 'UI/Buttons',
+  component: Buttons,
+}
+
+export const Overview = {
+  render: () => Preview({ slots: { default: Buttons({}) } }),
+}
+`.trimStart();
+}
+function generateStoryInputs() {
+  return `
+// Auto-generated — do not edit by hand
+import Preview from '@/astrobook/components/Preview.astro'
+import Inputs from '@/astrobook/components/Inputs.astro'
+
+export default {
+  title: 'UI/Inputs',
+  component: Inputs,
+}
+
+export const Overview = {
+  render: () => Preview({ slots: { default: Inputs({}) } }),
+}
+`.trimStart();
+}
+
+/* ---------- renderers ---------- */
+
+function renderColorsAstro(colors) {
+  const items = colors.map(({
+    title,
+    color,
+    class: klass
+  }) => {
+    const style = `background:${color};`;
+    return `
+    <div class="flex items-center gap-4 p-3 rounded border border-black/10 bg-white/5">
+      <div class="size-10 rounded shadow-inner ring-1 ring-black/10" style="${style}"></div>
+      <div class="flex flex-col text-sm">
+        <span class="font-medium">${e(title)}</span>
+        <span class="opacity-70">token: <code>--color-${e(klass.replace(/^x-/, ''))}</code></span>
+        <span class="opacity-70">class: <code>${e(klass)}</code></span>
+        <span class="opacity-70">value: <code>${e(color)}</code></span>
+      </div>
+    </div>`.trim();
+  });
+  return `---
+/* Auto-generated — do not edit by hand */
+---
+<div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+${items.join('\n')}
+</div>
+`;
+}
+function renderBodiesAstro(bodies) {
+  const items = bodies.map(b => {
+    const meta = metaText(b.size, b.lineheight, b.config);
+    return `  <p class="${a(b.class)}">${e(b.title)} ${meta}</p>`;
+  });
+  return `---
+/* Auto-generated — do not edit by hand */
+---
+<div class="space-y-4">
+${items.join('\n')}
+</div>
+`;
+}
+function renderHeadlinesAstro(headlines) {
+  const lines = headlines.map(h => {
+    const meta = metaText(h.size, h.lineheight, h.config);
+    return `  <div class="flex items-baseline gap-2">
+    <Headline size="2" text="${a(h.title)}" class="${a(h.class)}" />
+    ${meta}
+  </div>`;
+  });
+  return `---
+/* Auto-generated — do not edit by hand */
+import Headline from '@/components/core/Headline.astro'
+---
+<div class="space-y-4">
+${lines.join('\n')}
+</div>
+`;
+}
+function renderButtonsAstro(buttons) {
+  const lines = buttons.map(b => {
+    const klass = b.class.trim(); // variants already @apply button; don't prepend "button"
+    return `  <div class="flex items-center gap-3">
+    <Button text="${a(b.text)}" modifier="${a(klass)}" />
+    <span class="text-sm opacity-70">${e(b.title)} — <code>${e(klass)}</code></span>
+  </div>`;
+  });
+  return `---
+/* Auto-generated — do not edit by hand */
+import Button from '@/components/core/button/Button.astro'  /* adjust if path differs */
+---
+<div class="space-y-3">
+${lines.join('\n')}
+</div>
+`;
+}
+function renderInputsAstro(spec) {
+  const {
+    inputs = [],
+    selects = [],
+    checkboxes = [],
+    radios = [],
+    textareas = []
+  } = spec;
+  const renderGroup = (title, componentTag, items) => {
+    if (!items?.length) {
+      return '';
+    }
+    const rows = items.map(obj => `    <${componentTag} ${attrs(obj)} />`).join('\n');
+    return `
+  <section>
+    <h3 class="text-sm opacity-70 mb-2">${e(title)}</h3>
+${rows}
+  </section>`;
+  };
+  return `---
+/* Auto-generated — do not edit by hand */
+import Input from '@/components/core/inputs/Input.astro'
+import Select from '@/components/core/inputs/Select.astro'
+import Selection from '@/components/core/inputs/Selection.astro'
+---
+<div class="space-y-8">
+${renderGroup('Inputs', 'Input', inputs)}
+${renderGroup('Selects', 'Select', selects)}
+${renderGroup('Checkboxes', 'Selection', checkboxes)}
+${renderGroup('Radios', 'Selection', radios)}
+${renderGroup('Textareas', 'Select', textareas)}
+</div>
+`;
+}
+
+/* ---------- helpers ---------- */
+
+function attrs(obj = {}) {
+  const parts = [];
+  for (const [key, val] of Object.entries(obj)) {
+    if (val === '' || val === null || val === undefined || val === false) {
+      continue;
+    }
+    if (typeof val === 'string') {
+      parts.push(`${key}="${a(val)}"`);
+    } else if (typeof val === 'number') {
+      parts.push(`${key}={${val}}`);
+    } else if (typeof val === 'boolean') {
+      parts.push(`${key}={true}`);
+    } else {
+      parts.push(`${key}={${JSON.stringify(val)}}`);
+    }
+  }
+  return parts.join(' ');
+}
+function metaText(size, lineheight, config) {
+  const basePair = pair({
+    size,
+    lineHeight: lineheight
+  });
+  const parts = [];
+  if (config?.desktop && (config.desktop.size || config.desktop.lineHeight)) {
+    parts.push(`D: ${pair(config.desktop)}`);
+  }
+  if (config?.mobile && (config.mobile.size || config.mobile.lineHeight)) {
+    parts.push(`M: ${pair(config.mobile)}`);
+  }
+  const label = parts.length ? parts.join(' • ') : basePair;
+  if (!label) {
+    return '';
+  }
+  return `<span class="opacity-60 text-sm">${e(label)}</span>`;
+}
+function pair({
+  size,
+  lineHeight
+} = {}) {
+  const s = size ?? null;
+  const l = lineHeight ?? null;
+  if (!s && !l) {
+    return '';
+  }
+  return `${s ?? '-'} / ${l ?? '-'}`;
+}
+function e(s = '') {
+  return String(s).replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;');
+}
+function a(s = '') {
+  return String(s).replaceAll('"', '&quot;');
+}
+function rel(p) {
+  return path.relative(process.cwd(), p);
+}
+
+export { generateAstro as default };