@solid-design-system/mcp 0.0.1

package/dist/build/components.js

@@ -0,0 +1,264 @@
+import { rmSync } from 'node:fs';
+import fs from 'node:fs/promises';
+import { basename, dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import ora from 'ora';
+import { componentPath, createPath } from '../utilities/index.js';
+/** Absolute path to the docs stories/components directory */
+const DOCS_COMPONENTS_DIR = join(dirname(fileURLToPath(import.meta.url)), '../../../docs/src/stories/components');
+const normalizeMdxTemplateEscapes = (text) => text.replace(/\\`/g, '`');
+const extractMdxContent = async (mdxPath) => {
+    try {
+        const raw = await fs.readFile(mdxPath, 'utf-8');
+        const match = raw.match(/export const content = `([\s\S]*?)`;/);
+        if (!match)
+            return { docs: null };
+        const full = match[1]
+            .split('\n')
+            .filter(line => !line.trimStart().startsWith('<DefaultStory') && !line.trimStart().startsWith('<DocumentationLinks'))
+            .join('\n')
+            .trim();
+        let docs = full.replace(/####\s+Related (?:Components|Templates)\n+((?:.*\n)*?)(?=\n####|\n###|$)/g, '');
+        docs = docs.replace(/^\[.*?\]\(\.\/?path=.*?\)\n?/gm, '');
+        docs = docs.replace(/\nVisit <sd-link[\s\S]*$/, '');
+        docs = normalizeMdxTemplateEscapes(docs.trim());
+        return { docs: docs || null };
+    }
+    catch {
+        return { docs: null };
+    }
+};
+/**
+ * Extracts the content of a lit-html template literal starting at `startIndex`
+ * (immediately after the opening backtick of `html\``).
+ */
+const extractHtmlLiteral = (source, startIndex) => {
+    let i = startIndex;
+    let depth = 0;
+    while (i < source.length) {
+        const c = source[i];
+        if (depth === 0 && c === '`')
+            return source.slice(startIndex, i);
+        if (c === '$' && source[i + 1] === '{') {
+            depth++;
+            i += 2;
+            continue;
+        }
+        if (depth > 0) {
+            if (c === '{')
+                depth++;
+            else if (c === '}')
+                depth--;
+        }
+        i++;
+    }
+    return source.slice(startIndex);
+};
+const dedent = (str) => {
+    const lines = str.split('\n');
+    while (lines.length && !lines[0].trim())
+        lines.shift();
+    while (lines.length && !lines[lines.length - 1].trim())
+        lines.pop();
+    if (!lines.length)
+        return '';
+    const indent = Math.min(...lines.filter(l => l.trim()).map(l => l.match(/^(\s*)/)?.[1].length ?? 0));
+    return lines.map(l => l.slice(indent)).join('\n');
+};
+/** Converts PascalCase/camelCase to kebab-case. e.g. "NoShadow" → "no-shadow" */
+const toKebab = (s) => s.replace(/([A-Z])/g, (_, c, i) => (i === 0 ? c.toLowerCase() : `-${c.toLowerCase()}`));
+/**
+ * Extracts stories from a component .stories.ts file.
+ * Only stories with a JSDoc comment AND a direct html` literal are included.
+ * Default/generateTemplate stories are skipped.
+ */
+const extractStories = async (storiesPath) => {
+    let source;
+    try {
+        source = await fs.readFile(storiesPath, 'utf-8');
+    }
+    catch {
+        return [];
+    }
+    const stories = [];
+    // Match: optional JSDoc, then `export const ExportName = {`
+    const pattern = /(\/\*\*([\s\S]*?)\*\/\s*)?^export const (\w+) = \{/gm;
+    let match;
+    while ((match = pattern.exec(source)) !== null) {
+        const exportName = match[3];
+        if (exportName === 'default')
+            continue;
+        const jsdocRaw = match[2] ?? '';
+        // Clean up JSDoc: remove leading " * " on each line
+        const description = jsdocRaw
+            .split('\n')
+            .map(l => l.replace(/^\s*\*\s?/, '').trim())
+            .filter(Boolean)
+            .join('\n')
+            .trim();
+        // Find `html`` directly inside the render function (not inside generateTemplate)
+        const blockStart = match.index + match[0].length;
+        const blockSlice = source.slice(blockStart);
+        // Skip if this story uses generateTemplate
+        const nextExportIdx = blockSlice.search(/\nexport const /);
+        const block = nextExportIdx === -1 ? blockSlice : blockSlice.slice(0, nextExportIdx);
+        if (block.includes('generateTemplate('))
+            continue;
+        const htmlIdx = block.indexOf('html`');
+        if (htmlIdx === -1)
+            continue;
+        const rawHtml = extractHtmlLiteral(block, htmlIdx + 5);
+        const html = dedent(rawHtml);
+        if (!html)
+            continue;
+        stories.push({ slug: toKebab(exportName), description, html });
+    }
+    return stories;
+};
+const normalizeVersionedTagNames = (text) => text.replace(/\bsd-\d+(?:-\d+){2}-/g, 'sd-');
+const formatPropMeta = (type, defaultVal) => {
+    const parts = [];
+    if (type)
+        parts.push(type.replace(/\s*\|\s*/g, '|'));
+    if (defaultVal !== '' && defaultVal !== undefined)
+        parts.push(`default=${defaultVal}`);
+    return parts.join(', ');
+};
+const extractApiSections = (decl) => {
+    const tagName = decl.tagName ?? '';
+    const summary = normalizeVersionedTagNames(decl.summary ?? '');
+    const members = (decl.members ?? []);
+    const propsLines = members
+        .filter(m => m.kind === 'field' && !m.privacy && m.description)
+        .map(m => {
+        const meta = normalizeVersionedTagNames(formatPropMeta(m.type?.text ?? '', m.default ?? ''));
+        const attrSuffix = m.attribute && m.attribute !== m.name ? ` [attr: ${m.attribute}]` : '';
+        const description = m.description ? normalizeVersionedTagNames(m.description) : '';
+        return `- prop.${m.name}${attrSuffix}: ${meta}${description ? ` — ${description}` : ''}`;
+    });
+    const eventLines = (decl.events ?? []).map(e => {
+        const name = normalizeVersionedTagNames(e.name);
+        const description = normalizeVersionedTagNames(e.description ?? '');
+        return `- event.${name}: ${description}`;
+    });
+    const slotLines = (decl.slots ?? []).map(s => {
+        const description = normalizeVersionedTagNames(s.description ?? '');
+        return `- slot.${s.name || 'default'}: ${description}`;
+    });
+    const partLines = (decl.cssParts ?? []).map(p => {
+        const description = normalizeVersionedTagNames(p.description ?? '');
+        return `- part.${p.name}: ${description}`;
+    });
+    return {
+        tagName,
+        summary,
+        props: propsLines.join('\n'),
+        events: eventLines.join('\n'),
+        slots: slotLines.join('\n'),
+        parts: partLines.join('\n')
+    };
+};
+const loadManifestApiMap = async () => {
+    const candidates = [
+        '../components/dist/custom-elements.json',
+        '../components/dist-versioned/custom-elements.json',
+        '../components/cdn/custom-elements.json'
+    ];
+    for (const relPath of candidates) {
+        const absPath = join(process.cwd(), relPath);
+        try {
+            const raw = await fs.readFile(absPath, 'utf-8');
+            const parsed = JSON.parse(raw);
+            const modules = parsed.modules ?? [];
+            const map = new Map();
+            const declarations = modules
+                .filter(module => module.declarations?.some(declaration => declaration.tagName))
+                .map(module => module.declarations?.find(declaration => declaration.tagName))
+                .filter(Boolean);
+            for (const declaration of declarations) {
+                const api = extractApiSections(declaration);
+                if (!api.tagName)
+                    continue;
+                const normalizedTagName = api.tagName.replace(/^sd-\d+-\d+-\d+-/, 'sd-');
+                map.set(normalizedTagName, { ...api, tagName: normalizedTagName });
+            }
+            return map;
+        }
+        catch {
+            // Try next candidate path.
+        }
+    }
+    return new Map();
+};
+const extractSummaryFromDocs = (docs) => {
+    if (!docs)
+        return '';
+    const lines = docs
+        .split('\n')
+        .map(line => line.trim())
+        .filter(Boolean);
+    for (const line of lines) {
+        if (line.startsWith('#'))
+            continue;
+        if (line.startsWith('<'))
+            continue;
+        if (line.startsWith('['))
+            continue;
+        if (line.startsWith('####') || line.startsWith('###'))
+            break;
+        return line;
+    }
+    return '';
+};
+const getComponentNames = async () => {
+    const files = await fs.readdir(DOCS_COMPONENTS_DIR);
+    const mdxNames = files.filter(file => file.endsWith('.mdx')).map(file => basename(file, '.mdx'));
+    const storyNames = files
+        .filter(file => /^[a-z0-9-]+\.stories\.ts$/.test(file))
+        .map(file => basename(file, '.stories.ts'));
+    return [...new Set([...mdxNames, ...storyNames])].sort();
+};
+export const buildComponents = async () => {
+    const spinner = ora({ prefixText: 'Components:', text: 'Generating static metadata...' }).start();
+    try {
+        const componentNames = await getComponentNames();
+        const apiMap = await loadManifestApiMap();
+        spinner.text = 'Cleaning up old metadata...';
+        rmSync(componentPath, { recursive: true, force: true });
+        spinner.succeed('Old metadata cleaned up.');
+        await createPath(componentPath);
+        spinner.text = 'Generating components metadata...';
+        await Promise.all(componentNames.map(async (name) => {
+            const tagName = `sd-${name}`;
+            const [{ docs }, stories] = await Promise.all([
+                extractMdxContent(join(DOCS_COMPONENTS_DIR, `${name}.mdx`)),
+                extractStories(join(DOCS_COMPONENTS_DIR, `${name}.stories.ts`))
+            ]);
+            const manifestApi = apiMap.get(tagName);
+            const summary = manifestApi?.summary || extractSummaryFromDocs(docs);
+            const api = manifestApi
+                ? { ...manifestApi, summary }
+                : {
+                    tagName,
+                    summary,
+                    props: '',
+                    events: '',
+                    slots: '',
+                    parts: ''
+                };
+            // Store intermediate JSON — buildTemplates will finalise into info.md + story files
+            const intermediate = {
+                api,
+                docs,
+                stories,
+                templates: []
+            };
+            await fs.writeFile(join(componentPath, `${tagName}.json`), JSON.stringify(intermediate));
+        }));
+        spinner.succeed('Components metadata generated successfully.');
+    }
+    catch (error) {
+        spinner.fail(`Failed to generate components metadata. Error: ${error}`);
+        throw error;
+    }
+};

package/dist/build/icons.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Fetches icon metadata from the CDN and writes compact JSON files per library:
+ *   metadata/packages/icons/default/content.json  — default library content icons
+ *   metadata/packages/icons/default/system.json   — default library UI/system icons
+ *   metadata/packages/icons/sd-status-assets/status.json — status indicator icons
+ *   metadata/packages/icons/sd-multi-theming/content.json — multi-theme content icons
+ *   metadata/packages/icons/sd-multi-theming/system.json — multi-theme system icons
+ *
+ * Each icon: { technicalId, displayNameDe, tags }
+ * Use as <sd-icon name="content/{technicalId}"> or <sd-icon name="system/{technicalId}">
+ */
+export declare const buildIcons: () => Promise<void>;

package/dist/build/icons.js

@@ -0,0 +1,79 @@
+import fs from 'node:fs/promises';
+import { mkdirSync, rmSync } from 'node:fs';
+import { join, resolve } from 'node:path';
+import ora from 'ora';
+import { iconsPath } from '../utilities/index.js';
+const CONTENT_URL = 'https://celum-icons.fe.union-investment.de/union-investment/content.json';
+const SYSTEM_URL = 'https://celum-icons.fe.union-investment.de/union-investment/system.json';
+const MULTI_THEMING_CONTENT_URL = 'https://celum-icons.fe.union-investment.de/vb/content.json';
+const MULTI_THEMING_SYSTEM_URL = 'https://celum-icons.fe.union-investment.de/vb/system.json';
+const STATUS_LIBRARY_SOURCE = resolve(iconsPath, '../../../../../packages/components/src/components/icon/library.status.ts');
+const toLabel = (iconId) => iconId
+    .replace(/^status-/, '')
+    .split('-')
+    .map(part => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(' ');
+const getStatusIcons = async () => {
+    const source = await fs.readFile(STATUS_LIBRARY_SOURCE, 'utf-8');
+    const ids = [...source.matchAll(/'(?<id>status-[^']+)'\s*:/g)]
+        .map(match => match.groups?.id)
+        .filter((id) => Boolean(id));
+    return ids.map(id => ({
+        technicalId: id,
+        displayNameDe: toLabel(id),
+        tags: []
+    }));
+};
+const fetchIcons = async (url) => {
+    const res = await fetch(url);
+    if (!res.ok)
+        throw new Error(`Failed to fetch ${url}: ${res.status} ${res.statusText}`);
+    const data = (await res.json());
+    return data.map(({ technicalId, displayNameDe, tags }) => ({
+        technicalId,
+        displayNameDe,
+        tags: tags ?? []
+    }));
+};
+/**
+ * Fetches icon metadata from the CDN and writes compact JSON files per library:
+ *   metadata/packages/icons/default/content.json  — default library content icons
+ *   metadata/packages/icons/default/system.json   — default library UI/system icons
+ *   metadata/packages/icons/sd-status-assets/status.json — status indicator icons
+ *   metadata/packages/icons/sd-multi-theming/content.json — multi-theme content icons
+ *   metadata/packages/icons/sd-multi-theming/system.json — multi-theme system icons
+ *
+ * Each icon: { technicalId, displayNameDe, tags }
+ * Use as <sd-icon name="content/{technicalId}"> or <sd-icon name="system/{technicalId}">
+ */
+export const buildIcons = async () => {
+    const spinner = ora({
+        prefixText: 'Icons:',
+        text: 'Fetching icon metadata from CDN...'
+    }).start();
+    try {
+        rmSync(iconsPath, { recursive: true, force: true });
+        mkdirSync(join(iconsPath, 'default'), { recursive: true });
+        mkdirSync(join(iconsPath, 'sd-status-assets'), { recursive: true });
+        mkdirSync(join(iconsPath, 'sd-multi-theming'), { recursive: true });
+        const [content, system, multiThemingContent, multiThemingSystem, statusIcons] = await Promise.all([
+            fetchIcons(CONTENT_URL),
+            fetchIcons(SYSTEM_URL),
+            fetchIcons(MULTI_THEMING_CONTENT_URL),
+            fetchIcons(MULTI_THEMING_SYSTEM_URL),
+            getStatusIcons()
+        ]);
+        await Promise.all([
+            fs.writeFile(join(iconsPath, 'default', 'content.json'), JSON.stringify(content, null, 2)),
+            fs.writeFile(join(iconsPath, 'default', 'system.json'), JSON.stringify(system, null, 2)),
+            fs.writeFile(join(iconsPath, 'sd-status-assets', 'status.json'), JSON.stringify(statusIcons, null, 2)),
+            fs.writeFile(join(iconsPath, 'sd-multi-theming', 'content.json'), JSON.stringify(multiThemingContent, null, 2)),
+            fs.writeFile(join(iconsPath, 'sd-multi-theming', 'system.json'), JSON.stringify(multiThemingSystem, null, 2))
+        ]);
+        spinner.succeed(`Icon metadata generated successfully (${content.length} default content, ${system.length} default system, ${multiThemingContent.length} multi-theming content, ${multiThemingSystem.length} multi-theming system, ${statusIcons.length} status).`);
+    }
+    catch (error) {
+        spinner.fail(`Failed to generate icon metadata. Error: ${error}`);
+        throw error;
+    }
+};

package/dist/build/package-docs.d.ts

@@ -0,0 +1 @@
+export declare const buildPackageDocs: () => Promise<void>;

package/dist/build/package-docs.js

@@ -0,0 +1,67 @@
+import fs from 'node:fs/promises';
+import { mkdirSync } from 'node:fs';
+import { dirname, join, basename, extname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import ora from 'ora';
+import { componentPackageDocsPath, quickstartPackageDocsPath, stylePackageDocsPath, tokenPackageDocsPath } from '../utilities/index.js';
+const SKIP = new Set(['changelog', 'contributing', 'migration', 'index', '_rolesinfo']);
+/** Absolute path to the docs stories/packages directory */
+const DOCS_PACKAGES_DIR = join(dirname(fileURLToPath(import.meta.url)), '../../../docs/src/stories/packages');
+/**
+ * Strip Storybook-specific syntax from MDX, returning plain Markdown.
+ */
+const cleanMdx = (raw) => raw
+    // Remove import lines
+    .replace(/^import\s+.*\n/gm, '')
+    // Remove <Meta .../>  (single or multi-line)
+    .replace(/<Meta\s[^>]*\/>/gs, '')
+    // Remove html:preview fences → plain html
+    .replace(/```html:preview/g, '```html')
+    // Remove any remaining JSX-style self-closing tags from storybook
+    .replace(/<[A-Z][A-Za-z]*\s[^>]*\/>/gs, '')
+    // Collapse multiple blank lines
+    .replace(/\n{3,}/g, '\n\n')
+    .trim();
+const buildDocsForPackage = async (sourceDir, outputDir, label) => {
+    const spinner = ora({ prefixText: 'MCP:', text: `Building ${label} package docs...` }).start();
+    mkdirSync(outputDir, { recursive: true });
+    let entries;
+    try {
+        entries = await fs.readdir(sourceDir);
+    }
+    catch {
+        spinner.warn(`${label} source dir not found: ${sourceDir}`);
+        return;
+    }
+    const mdxFiles = entries.filter(f => {
+        if (extname(f) !== '.mdx')
+            return false;
+        const slug = basename(f, '.mdx').toLowerCase().replace(/\s+/g, '-');
+        return !SKIP.has(slug);
+    });
+    await Promise.all(mdxFiles.map(async (file) => {
+        const raw = await fs.readFile(join(sourceDir, file), 'utf-8');
+        const cleaned = cleanMdx(raw);
+        const slug = basename(file, '.mdx').toLowerCase().replace(/\s+/g, '-');
+        await fs.writeFile(join(outputDir, `${slug}.md`), cleaned, 'utf-8');
+    }));
+    spinner.succeed(`${label} package docs: ${mdxFiles.length} file(s) written to ${outputDir}`);
+};
+const buildSingleDoc = async (sourceFile, outputFile, label) => {
+    const spinner = ora({ prefixText: 'MCP:', text: `Building ${label}...` }).start();
+    try {
+        const raw = await fs.readFile(sourceFile, 'utf-8');
+        mkdirSync(dirname(outputFile), { recursive: true });
+        await fs.writeFile(outputFile, cleanMdx(raw), 'utf-8');
+        spinner.succeed(`${label}: written to ${outputFile}`);
+    }
+    catch {
+        spinner.warn(`${label} source file not found: ${sourceFile}`);
+    }
+};
+export const buildPackageDocs = async () => {
+    await buildSingleDoc(join(DOCS_PACKAGES_DIR, 'Quickstart.mdx'), join(quickstartPackageDocsPath, 'quickstart.md'), 'Quickstart doc');
+    await buildDocsForPackage(join(DOCS_PACKAGES_DIR, 'components'), componentPackageDocsPath, 'Components');
+    await buildDocsForPackage(join(DOCS_PACKAGES_DIR, 'styles'), stylePackageDocsPath, 'Styles');
+    await buildDocsForPackage(join(DOCS_PACKAGES_DIR, 'tokens'), tokenPackageDocsPath, 'Tokens');
+};

package/dist/build/static.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Sets up all data from the components and framework packages and adds them to the static metadata.
+ */
+export declare const buildStaticFiles: () => Promise<void>;

package/dist/build/static.js

@@ -0,0 +1,39 @@
+import { existsSync } from 'node:fs';
+import { copyFile } from 'node:fs/promises';
+import { basename, join } from 'node:path';
+import ora from 'ora';
+import { componentPath, createPath, getAbsolutePath } from '../utilities/index.js';
+/**
+ * List of static files that should be copied to the static metadata directory.
+ */
+const staticFilesToCopy = [
+    // Copy the breaking changes guide into the components metadata directory
+    [getAbsolutePath('../../../../packages/components/BREAKING_CHANGES.md'), componentPath]
+];
+/**
+ * Sets up all data from the components and framework packages and adds them to the static metadata.
+ */
+export const buildStaticFiles = async () => {
+    const spinner = ora({
+        prefixText: 'Static files:',
+        text: 'Generating static metadata...'
+    }).start();
+    try {
+        // Create the wanted directories if they don't exist
+        const createAllPaths = Promise.all(staticFilesToCopy.map(([, target]) => createPath(target)));
+        await createAllPaths;
+        const staticFiles = staticFilesToCopy
+            .filter(file => existsSync(file.at(0)))
+            .map(([staticFile, target]) => {
+            const targetFileName = join(target, basename(staticFile));
+            return copyFile(staticFile, targetFileName);
+        });
+        await Promise.all(staticFiles);
+        spinner.succeed('Static metadata generated successfully.');
+        spinner.succeed('Generation of metadata generated successfully.');
+    }
+    catch (error) {
+        spinner.fail(`Failed to generate components metadata. Error: ${error}`);
+        throw error;
+    }
+};

package/dist/build/styles.d.ts

@@ -0,0 +1,9 @@
+export interface Story {
+    /** kebab-case slug used as the filename, e.g. "no-shadow" */
+    slug: string;
+    /** JSDoc description extracted from the comment above the export */
+    description: string;
+    /** Rendered HTML content */
+    html: string;
+}
+export declare const buildStyles: () => Promise<void>;

package/dist/build/styles.js

@@ -0,0 +1,178 @@
+import fs from 'node:fs/promises';
+import { rmSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import ora from 'ora';
+import { createPath, stylesPath } from '../utilities/index.js';
+/** Absolute path to the docs stories/styles directory */
+const DOCS_STYLES_DIR = join(dirname(fileURLToPath(import.meta.url)), '../../../docs/src/stories/styles');
+/** Absolute path to the styles CSS modules directory */
+const STYLES_MODULES_DIR = join(dirname(fileURLToPath(import.meta.url)), '../../../styles/src/modules');
+/**
+ * Extracts the `@summary` tag value from a CSS module file's JSDoc comment.
+ */
+const extractCssSummary = async (cssPath) => {
+    try {
+        const raw = await fs.readFile(cssPath, 'utf-8');
+        const match = raw.match(/\*\s+@summary\s+(.+)/);
+        return match ? match[1].trim() : null;
+    }
+    catch {
+        return null;
+    }
+};
+const extractMdxContent = async (mdxPath) => {
+    try {
+        const raw = await fs.readFile(mdxPath, 'utf-8');
+        const match = raw.match(/export const content = `([\s\S]*?)`;/);
+        if (!match)
+            return { docs: null, relatedTemplates: [] };
+        const full = match[1]
+            .split('\n')
+            .filter(line => !line.trimStart().startsWith('<DefaultStory') && !line.trimStart().startsWith('<DocumentationLinks'))
+            .join('\n')
+            .trim();
+        const relTemplBlock = full.match(/####\s+Related Templates\n+([\s\S]*?)(?=\n####|\n###|$)/);
+        const relatedTemplates = [];
+        if (relTemplBlock) {
+            const linkMatches = [...relTemplBlock[1].matchAll(/\[(.*?)\]\(.\/\?path=\/docs\/templates-([\w-]+)/g)];
+            relatedTemplates.push(...linkMatches.map(m => m[2]));
+        }
+        let docs = full.replace(/####\s+Related (?:Components|Templates)\n+((?:.*\n)*?)(?=\n####|\n###|$)/g, '');
+        docs = docs.replace(/^\[.*?\]\(\.\/?path=.*?\)\n?/gm, '');
+        docs = docs.replace(/\nVisit <sd-link[\s\S]*$/, '');
+        docs = docs.trim();
+        return { docs: docs || null, relatedTemplates };
+    }
+    catch {
+        return { docs: null, relatedTemplates: [] };
+    }
+};
+/**
+ * Extracts the content of a lit-html template literal starting at `startIndex`
+ * (immediately after the opening backtick of `html\``).
+ */
+const extractHtmlLiteral = (source, startIndex) => {
+    let i = startIndex;
+    let depth = 0;
+    while (i < source.length) {
+        const c = source[i];
+        if (depth === 0 && c === '`')
+            return source.slice(startIndex, i);
+        if (c === '$' && source[i + 1] === '{') {
+            depth++;
+            i += 2;
+            continue;
+        }
+        if (depth > 0) {
+            if (c === '{')
+                depth++;
+            else if (c === '}')
+                depth--;
+        }
+        i++;
+    }
+    return source.slice(startIndex);
+};
+const dedent = (str) => {
+    const lines = str.split('\n');
+    while (lines.length && !lines[0].trim())
+        lines.shift();
+    while (lines.length && !lines[lines.length - 1].trim())
+        lines.pop();
+    if (!lines.length)
+        return '';
+    const indent = Math.min(...lines.filter(l => l.trim()).map(l => l.match(/^(\s*)/)?.[1].length ?? 0));
+    return lines.map(l => l.slice(indent)).join('\n');
+};
+/** Converts PascalCase/camelCase to kebab-case. e.g. "NoShadow" → "no-shadow" */
+const toKebab = (s) => s.replace(/([A-Z])/g, (_, c, i) => (i === 0 ? c.toLowerCase() : `-${c.toLowerCase()}`));
+/**
+ * Extracts stories from a style .stories.ts file.
+ * Only stories with a JSDoc comment AND a direct html` literal are included.
+ * Default/generateTemplate stories are skipped.
+ */
+const extractStories = async (storiesPath) => {
+    let source;
+    try {
+        source = await fs.readFile(storiesPath, 'utf-8');
+    }
+    catch {
+        return [];
+    }
+    const stories = [];
+    // Match: optional JSDoc, then `export const ExportName = {`
+    const pattern = /(\/\*\*([\s\S]*?)\*\/\s*)?^export const (\w+) = \{/gm;
+    let match;
+    while ((match = pattern.exec(source)) !== null) {
+        const exportName = match[3];
+        if (exportName === 'default')
+            continue;
+        const jsdocRaw = match[2] ?? '';
+        // Clean up JSDoc: remove leading " * " on each line
+        const description = jsdocRaw
+            .split('\n')
+            .map(l => l.replace(/^\s*\*\s?/, '').trim())
+            .filter(Boolean)
+            .join('\n')
+            .trim();
+        // Find `html`` directly inside the render function (not inside generateTemplate)
+        const blockStart = match.index + match[0].length;
+        const blockSlice = source.slice(blockStart);
+        // Skip if this story uses generateTemplate
+        const nextExportIdx = blockSlice.search(/\nexport const /);
+        const block = nextExportIdx === -1 ? blockSlice : blockSlice.slice(0, nextExportIdx);
+        if (block.includes('generateTemplate('))
+            continue;
+        const htmlIdx = block.indexOf('html`');
+        if (htmlIdx === -1)
+            continue;
+        const rawHtml = extractHtmlLiteral(block, htmlIdx + 5);
+        const html = dedent(rawHtml);
+        if (!html)
+            continue;
+        stories.push({ slug: toKebab(exportName), description, html });
+    }
+    return stories;
+};
+export const buildStyles = async () => {
+    const spinner = ora();
+    try {
+        spinner.start('Generating styles metadata...');
+        // Remove existing metadata
+        rmSync(stylesPath, { recursive: true, force: true });
+        await createPath(stylesPath);
+        // List all .mdx files in the styles docs directory to get style names
+        const docsDir = await fs.readdir(DOCS_STYLES_DIR);
+        const styleNames = new Set();
+        for (const file of docsDir) {
+            if (file.endsWith('.mdx')) {
+                // Extract style name from filename: "display.mdx" → "display"
+                const name = file.replace('.mdx', '');
+                styleNames.add(name);
+            }
+        }
+        spinner.text = 'Generating styles metadata...';
+        await Promise.all(Array.from(styleNames).map(async (name) => {
+            const [{ docs, relatedTemplates }, stories, summary] = await Promise.all([
+                extractMdxContent(join(DOCS_STYLES_DIR, `${name}.mdx`)),
+                extractStories(join(DOCS_STYLES_DIR, `${name}.stories.ts`)),
+                extractCssSummary(join(STYLES_MODULES_DIR, `${name}.css`))
+            ]);
+            // Store intermediate JSON — buildTemplates will finalise into info.md + story files
+            const intermediate = {
+                summary,
+                docs,
+                relatedTemplates,
+                stories,
+                classNames: [] // Placeholder; CSS class extraction can be added later
+            };
+            await fs.writeFile(join(stylesPath, `sd-${name}.json`), JSON.stringify(intermediate));
+        }));
+        spinner.succeed('Styles metadata generated successfully.');
+    }
+    catch (error) {
+        spinner.fail(`Failed to generate styles metadata. Error: ${error}`);
+        throw error;
+    }
+};

package/dist/build/templates.d.ts

@@ -0,0 +1 @@
+export declare const buildTemplates: () => Promise<void>;