@charde/core 0.0.4 → 0.0.5

package/dist/scripts/generate-components.js

@@ -0,0 +1,744 @@
+import * as fs from "fs";
+import * as path from "path";
+import { DesignSystemApiClient } from "../src/utils/api-client";
+import { ComponentGeneratorUtils } from "./utils";
+class StencilComponentGenerator {
+    apiClient;
+    outputDir;
+    stylesDir;
+    componentPrefix = 'chardes';
+    variables = {};
+    // tagName -> className for the index
+    generatedComponents = new Map();
+    constructor() {
+        this.apiClient = new DesignSystemApiClient();
+        this.outputDir = path.join(process.cwd(), 'src', 'components', 'generated');
+        this.stylesDir = path.join(process.cwd(), 'src', 'styles');
+    }
+    async generateAllComponents() {
+        try {
+            console.log('Fetching design system data...');
+            const designSystem = await this.apiClient.fetchDesignSystem();
+            this.variables = designSystem.variables;
+            console.log('Generating design tokens CSS...');
+            await this.generateDesignTokensCSS(designSystem.variables);
+            console.log('Generating utility classes CSS...');
+            await this.generateUtilityClassesCSS(designSystem.components, designSystem.variables);
+            console.log('Generating Stencil components...');
+            await this.generateComponents(designSystem.components, designSystem.variables);
+            console.log('Updating component index...');
+            await this.updateComponentIndex();
+            console.log('All components generated successfully!');
+        }
+        catch (error) {
+            console.error('Error generating components:', error);
+            process.exit(1);
+        }
+    }
+    // ─── Design Tokens CSS ──────────────────────────────────────────────────────
+    async generateDesignTokensCSS(variables) {
+        const cssLines = [':root {'];
+        for (const [varName, token] of Object.entries(variables)) {
+            const value = this.resolveTokenValue(token.value, variables);
+            const comment = token.comment ? `\n  /* ${token.comment} */` : '';
+            cssLines.push(`${comment}\n  ${varName}: ${value};`);
+        }
+        cssLines.push('}');
+        if (!fs.existsSync(this.stylesDir)) {
+            fs.mkdirSync(this.stylesDir, { recursive: true });
+        }
+        fs.writeFileSync(path.join(this.stylesDir, 'design-tokens.css'), cssLines.join('\n'));
+    }
+    resolveTokenValue(value, variables) {
+        if (!value)
+            return '';
+        const varMatch = value.match(/var\(--([^)]+)\)/);
+        if (varMatch) {
+            const tokenName = `--${varMatch[1]}`;
+            const token = variables[tokenName];
+            if (token)
+                return this.resolveTokenValue(token.value, variables);
+            return value;
+        }
+        if (value.startsWith('--')) {
+            const token = variables[value];
+            if (token)
+                return this.resolveTokenValue(token.value, variables);
+        }
+        const token = Object.values(variables).find(t => t.value === value);
+        if (token?.unit && token.type === 'dimension' && !value.includes(token.unit)) {
+            return `${value}${token.unit}`;
+        }
+        return value;
+    }
+    // ─── Utility Classes CSS ────────────────────────────────────────────────────
+    async generateUtilityClassesCSS(components, variables) {
+        const allUtilityClasses = this.extractAllUtilityClassesFromComponents(components);
+        const cssLines = [
+            '/* Auto-generated Utility Classes from Design System */',
+            '/* DO NOT EDIT - Generated from your design system API */',
+            '',
+            ':host, :root {',
+            '  display: block;',
+            '  box-sizing: border-box;',
+            '}',
+            '',
+            '*, *::before, *::after {',
+            '  box-sizing: inherit;',
+            '}',
+            ''
+        ];
+        const escapeClassName = (className) => {
+            if (!className)
+                return className;
+            let escaped = className.replace(/\//g, '\\/');
+            escaped = escaped.replace(/[!#$%&()*+,.<=>?@[\]^`{|}~]/g, (match) => {
+                if (match === '-' || match === '_')
+                    return match;
+                return '\\' + match;
+            });
+            return escaped;
+        };
+        const getTokenValue = (tokenName, defaultValue) => {
+            const token = variables[tokenName];
+            if (!token)
+                return defaultValue;
+            let value = token.value;
+            if (value.startsWith('--'))
+                return `var(${value})`;
+            if (token.unit && token.type === 'dimension' && !value.includes(token.unit))
+                value = `${value}${token.unit}`;
+            return `var(${tokenName}, ${value})`;
+        };
+        allUtilityClasses.forEach(className => {
+            if (!className || className.includes(':'))
+                return;
+            const cssProperties = this.getUtilityClassProperties(className, variables, getTokenValue);
+            if (cssProperties.length > 0) {
+                const escapedClassName = escapeClassName(className);
+                cssLines.push(`.${escapedClassName} {`);
+                cssProperties.forEach(prop => cssLines.push(`  ${prop};`));
+                cssLines.push('}');
+                cssLines.push('');
+            }
+        });
+        const stateClasses = this.extractStateClassesFromComponents(components);
+        stateClasses.forEach(stateClass => {
+            const [state, baseClass] = stateClass.split(':');
+            const cssProperties = this.getUtilityClassProperties(baseClass, variables, getTokenValue);
+            if (cssProperties.length > 0) {
+                const escapedBaseClass = escapeClassName(baseClass);
+                cssLines.push(`.${escapedBaseClass}:${state} {`);
+                cssProperties.forEach(prop => cssLines.push(`  ${prop};`));
+                cssLines.push('}');
+                cssLines.push('');
+            }
+        });
+        fs.writeFileSync(path.join(this.stylesDir, 'utilities.css'), cssLines.join('\n'));
+    }
+    extractAllUtilityClassesFromComponents(components) {
+        const classes = new Set();
+        const walk = (node) => {
+            if (node.linkedElement?.attributes?.class) {
+                this.resolveClassReferences(node.linkedElement.attributes.class)
+                    .split(' ')
+                    .forEach(cls => {
+                    if (cls && !cls.includes(':'))
+                        classes.add(cls);
+                });
+            }
+            if (node.children)
+                Object.values(node.children).forEach(child => walk(child));
+        };
+        Object.values(components).forEach(component => walk(component));
+        return classes;
+    }
+    extractStateClassesFromComponents(components) {
+        const stateClasses = new Set();
+        const walk = (node) => {
+            if (node.linkedElement?.attributes?.class) {
+                this.resolveClassReferences(node.linkedElement.attributes.class)
+                    .split(' ')
+                    .forEach(cls => {
+                    if (cls.includes(':'))
+                        stateClasses.add(cls);
+                });
+            }
+            if (node.children)
+                Object.values(node.children).forEach(child => walk(child));
+        };
+        Object.values(components).forEach(component => walk(component));
+        return stateClasses;
+    }
+    resolveClassReferences(classString) {
+        if (!classString)
+            return '';
+        const parts = classString.split(' ').filter(p => p.trim());
+        const resolvedParts = parts.map(part => {
+            const varMatch = part.match(/var\(--([^)]+)\)/);
+            if (varMatch) {
+                const tokenName = `--${varMatch[1]}`;
+                const token = this.variables[tokenName];
+                if (token) {
+                    if (token.value.startsWith('var(--') || token.value.startsWith('--'))
+                        return this.resolveClassReferences(token.value);
+                    return token.value;
+                }
+                return varMatch[1].replace(/^--/, '');
+            }
+            if (part.startsWith('--')) {
+                const token = this.variables[part];
+                if (token) {
+                    if (token.value.startsWith('var(--') || token.value.startsWith('--'))
+                        return this.resolveClassReferences(token.value);
+                    return token.value;
+                }
+                return part.replace(/^--/, '');
+            }
+            return part;
+        });
+        return resolvedParts.filter(p => p && p.trim()).join(' ');
+    }
+    getUtilityClassProperties(className, variables, getTokenValue) {
+        const utilityMap = {
+            'flex': () => ['display: flex'],
+            'flex-1': () => ['flex: 1 1 0%'],
+            'flex-shrink-0': () => ['flex-shrink: 0'],
+            'flex-col': () => ['flex-direction: column'],
+            'items-center': () => ['align-items: center'],
+            'items-start': () => ['align-items: flex-start'],
+            'justify-between': () => ['justify-content: space-between'],
+            'justify-center': () => ['justify-content: center'],
+            'w-full': () => [`width: ${getTokenValue('--width', '100%')}`],
+            'h-full': () => [`height: ${getTokenValue('--height', '100%')}`],
+            'max-w-md': () => [`max-width: ${getTokenValue('--max-width', '300rem')}`],
+            'mx-auto': () => ['margin-left: auto', 'margin-right: auto'],
+            'overflow-hidden': () => ['overflow: hidden'],
+            'object-cover': () => ['object-fit: cover'],
+            'relative': () => ['position: relative'],
+            'absolute': () => ['position: absolute'],
+            'fixed': () => ['position: fixed'],
+            'inset-0': () => ['top: 0', 'right: 0', 'bottom: 0', 'left: 0'],
+            'top-0': () => ['top: 0'],
+            'left-0': () => ['left: 0'],
+            'top-1/2': () => ['top: 50%'],
+            'left-1/2': () => ['left: 50%'],
+            '-translate-x-1/2': () => ['transform: translateX(-50%)'],
+            '-translate-y-1/2': () => ['transform: translateY(-50%)'],
+            'grid': () => ['display: grid'],
+            'grid-cols-2': () => ['grid-template-columns: repeat(2, minmax(0, 1fr))'],
+            'p-1': () => [`padding: ${getTokenValue('--spacing-1', '0.25rem')}`],
+            'p-2': () => [`padding: ${getTokenValue('--spacing-2', '0.5rem')}`],
+            'p-4': () => [`padding: ${getTokenValue('--spacing-4', '1rem')}`],
+            'p-6': () => [`padding: ${getTokenValue('--spacing-6', '2.5rem')}`],
+            'px-2': () => [`padding-left: ${getTokenValue('--spacing-2', '0.5rem')}`, `padding-right: ${getTokenValue('--spacing-2', '0.5rem')}`],
+            'px-3': () => [`padding-left: ${getTokenValue('--spacing-3', '0.75rem')}`, `padding-right: ${getTokenValue('--spacing-3', '0.75rem')}`],
+            'px-4': () => [`padding-left: ${getTokenValue('--spacing-4', '1rem')}`, `padding-right: ${getTokenValue('--spacing-4', '1rem')}`],
+            'px-6': () => [`padding-left: ${getTokenValue('--spacing-6', '2.5rem')}`, `padding-right: ${getTokenValue('--spacing-6', '2.5rem')}`],
+            'py-1': () => [`padding-top: ${getTokenValue('--spacing-1', '0.25rem')}`, `padding-bottom: ${getTokenValue('--spacing-1', '0.25rem')}`],
+            'py-2': () => [`padding-top: ${getTokenValue('--spacing-2', '0.5rem')}`, `padding-bottom: ${getTokenValue('--spacing-2', '0.5rem')}`],
+            'py-3': () => [`padding-top: ${getTokenValue('--spacing-3', '0.75rem')}`, `padding-bottom: ${getTokenValue('--spacing-3', '0.75rem')}`],
+            'py-4': () => [`padding-top: ${getTokenValue('--spacing-4', '1rem')}`, `padding-bottom: ${getTokenValue('--spacing-4', '1rem')}`],
+            'py-6': () => [`padding-top: ${getTokenValue('--spacing-6', '2.5rem')}`, `padding-bottom: ${getTokenValue('--spacing-6', '2.5rem')}`],
+            'pb-6': () => [`padding-bottom: ${getTokenValue('--spacing-6', '2.5rem')}`],
+            'mt-1': () => [`margin-top: ${getTokenValue('--spacing-1', '0.25rem')}`],
+            'mt-6': () => [`margin-top: ${getTokenValue('--spacing-6', '2.5rem')}`],
+            'mb-1': () => [`margin-bottom: ${getTokenValue('--spacing-1', '0.25rem')}`],
+            'mb-2': () => [`margin-bottom: ${getTokenValue('--spacing-2', '0.5rem')}`],
+            'mb-3': () => [`margin-bottom: ${getTokenValue('--spacing-3', '0.75rem')}`],
+            'ml-3': () => [`margin-left: ${getTokenValue('--spacing-3', '0.75rem')}`],
+            'pl-12': () => ['padding-left: 3rem'],
+            'space-x-2': () => [`> * + * { margin-left: ${getTokenValue('--spacing-2', '0.5rem')}; }`],
+            'space-x-3': () => [`> * + * { margin-left: ${getTokenValue('--spacing-3', '0.75rem')}; }`],
+            'space-x-4': () => [`> * + * { margin-left: ${getTokenValue('--spacing-4', '1rem')}; }`],
+            'space-y-2': () => [`> * + * { margin-top: ${getTokenValue('--spacing-2', '0.5rem')}; }`],
+            'space-y-4': () => [`> * + * { margin-top: ${getTokenValue('--spacing-4', '1rem')}; }`],
+            'space-y-6': () => [`> * + * { margin-top: ${getTokenValue('--spacing-6', '2.5rem')}; }`],
+            'w-3': () => ['width: 0.75rem'],
+            'h-3': () => ['height: 0.75rem'],
+            'w-4': () => ['width: 1rem'],
+            'h-4': () => ['height: 1rem'],
+            'w-5': () => ['width: 1.25rem'],
+            'h-5': () => ['height: 1.25rem'],
+            'w-6': () => ['width: 1.5rem'],
+            'h-6': () => ['height: 1.5rem'],
+            'w-8': () => [`width: ${getTokenValue('--spacing-8', '2rem')}`],
+            'h-8': () => [`height: ${getTokenValue('--spacing-8', '2rem')}`],
+            'w-12': () => [`width: ${getTokenValue('--spacing-12', '3rem')}`],
+            'h-12': () => [`height: ${getTokenValue('--spacing-12', '3rem')}`],
+            'w-14': () => [`width: ${getTokenValue('--spacing-14', '3.5rem')}`],
+            'h-14': () => [`height: ${getTokenValue('--spacing-14', '3.5rem')}`],
+            'bg-white': () => [`background-color: ${getTokenValue('--white', '#ffffff')}`],
+            'bg-black': () => [`background-color: ${getTokenValue('--black', '#000000')}`],
+            'bg-gray-50': () => [`background-color: ${getTokenValue('--gray-50', '#f9f9f9')}`],
+            'bg-gray-100': () => [`background-color: ${getTokenValue('--gray-100', '#f3f4f6')}`],
+            'bg-gray-300': () => [`background-color: ${getTokenValue('--gray-300', '#d5d8dc')}`],
+            'bg-gray-800': () => [`background-color: ${getTokenValue('--gray-800', '#122be2')}`],
+            'bg-gray-900': () => [`background-color: ${getTokenValue('--gray-900', '#f976f5')}`],
+            'bg-blue-50': () => [`background-color: ${getTokenValue('--blue-50', '#eff6ff')}`],
+            'bg-blue-600': () => [`background-color: ${getTokenValue('--blue-600', '#2563eb')}`],
+            'bg-blue-700': () => ['background-color: #1d4ed8'],
+            'bg-green-600': () => ['background-color: #16a34a'],
+            'bg-red-600': () => ['background-color: #dc2626'],
+            'bg-success-50': () => [`background-color: ${getTokenValue('--success-50', '#f0fdf4')}`],
+            'bg-warning-50': () => [`background-color: ${getTokenValue('--warning-50', '#fffbeb')}`],
+            'bg-error-50': () => [`background-color: ${getTokenValue('--error-50', '#fef2f2')}`],
+            'bg-info-50': () => [`background-color: ${getTokenValue('--info-50', '#eff6ff')}`],
+            'bg-transparent': () => ['background-color: transparent'],
+            'text-white': () => [`color: ${getTokenValue('--white', '#ffffff')}`],
+            'text-black': () => [`color: ${getTokenValue('--black', '#000000')}`],
+            'text-gray-300': () => [`color: ${getTokenValue('--gray-300', '#d5d8dc')}`],
+            'text-gray-500': () => [`color: ${getTokenValue('--gray-500', '#7af202')}`],
+            'text-gray-600': () => [`color: ${getTokenValue('--gray-600', '#4b5563')}`],
+            'text-gray-700': () => [`color: ${getTokenValue('--gray-700', '#374151')}`],
+            'text-gray-800': () => [`color: ${getTokenValue('--gray-800', '#122be2')}`],
+            'text-gray-900': () => [`color: ${getTokenValue('--gray-900', '#f976f5')}`],
+            'text-blue-600': () => [`color: ${getTokenValue('--blue-600', '#2563eb')}`],
+            'text-red-600': () => ['color: #dc2626'],
+            'text-green-600': () => ['color: #16a34a'],
+            'text-success-700': () => [`color: ${getTokenValue('--success-700', '#15803d')}`],
+            'text-warning-700': () => [`color: ${getTokenValue('--warning-700', '#b45309')}`],
+            'text-error-700': () => [`color: ${getTokenValue('--error-700', '#b91c1c')}`],
+            'text-info-700': () => [`color: ${getTokenValue('--info-700', '#1d4ed8')}`],
+            'rounded': () => [`border-radius: ${getTokenValue('--border-radius-md', '0.25rem')}`],
+            'rounded-md': () => [`border-radius: ${getTokenValue('--border-radius-md', '0.375rem')}`],
+            'rounded-lg': () => [`border-radius: ${getTokenValue('--border-radius-lg', '8px')}`],
+            'rounded-xl': () => [`border-radius: ${getTokenValue('--border-radius-xl', '2px')}`],
+            'rounded-2xl': () => [`border-radius: ${getTokenValue('--border-radius-2xl', '16px')}`],
+            'rounded-3xl': () => [`border-radius: ${getTokenValue('--border-radius-3xl', '20px')}`],
+            'rounded-full': () => [`border-radius: ${getTokenValue('--border-radius-full', '50%')}`],
+            'border': () => [`border-width: ${getTokenValue('--border-width-1', '1px')}`, `border-style: ${getTokenValue('--border-style-solid', 'solid')}`, `border-color: ${getTokenValue('--gray-200', '#e5e7eb')}`],
+            'border-2': () => ['border-width: 2px', 'border-style: solid', 'border-color: inherit'],
+            'border-b': () => [`border-bottom-width: ${getTokenValue('--border-width-1', '1px')}`, `border-bottom-style: ${getTokenValue('--border-style-solid', 'solid')}`, `border-bottom-color: ${getTokenValue('--gray-200', '#e5e7eb')}`],
+            'border-t': () => [`border-top-width: ${getTokenValue('--border-width-1', '1px')}`, `border-top-style: ${getTokenValue('--border-style-solid', 'solid')}`, `border-top-color: ${getTokenValue('--gray-200', '#e5e7eb')}`],
+            'border-solid': () => ['border-style: solid'],
+            'border-gray-200': () => [`border-color: ${getTokenValue('--gray-200', '#e5e7eb')}`],
+            'border-gray-300': () => [`border-color: ${getTokenValue('--gray-300', '#d1d5db')}`],
+            'border-gray-400': () => [`border-color: ${getTokenValue('--gray-400', '#9ca3af')}`],
+            'border-blue-600': () => [`border-color: ${getTokenValue('--blue-600', '#2563eb')}`],
+            'border-blue-700': () => ['border-color: #1d4ed8'],
+            'border-red-500': () => ['border-color: #ef4444'],
+            'border-green-600': () => ['border-color: #16a34a'],
+            'border-success-200': () => [`border-color: ${getTokenValue('--success-200', '#bbf7d0')}`],
+            'border-warning-200': () => [`border-color: ${getTokenValue('--warning-200', '#fed7aa')}`],
+            'border-error-200': () => [`border-color: ${getTokenValue('--error-200', '#fecaca')}`],
+            'border-info-200': () => [`border-color: ${getTokenValue('--info-200', '#bfdbfe')}`],
+            'font-sans': () => [`font-family: ${getTokenValue('--font-family-sans', 'Inter, system-ui, sans-serif')}`],
+            'font-mono': () => [`font-family: ${getTokenValue('--font-family-mono', 'ui-monospace, monospace')}`],
+            'font-medium': () => ['font-weight: 500'],
+            'font-semibold': () => [`font-weight: ${getTokenValue('--font-weight-semibold', '600')}`],
+            'font-bold': () => ['font-weight: 700'],
+            'text-xs': () => [`font-size: ${getTokenValue('--font-size-xs', '0.75rem')}`, 'line-height: 1rem'],
+            'text-sm': () => [`font-size: ${getTokenValue('--font-size-sm', '0.875rem')}`, 'line-height: 1.25rem'],
+            'text-base': () => [`font-size: ${getTokenValue('--font-size-base', '1rem')}`, 'line-height: 1.5rem'],
+            'text-lg': () => [`font-size: ${getTokenValue('--font-size-lg', '1.125rem')}`, 'line-height: 1.75rem'],
+            'text-xl': () => ['font-size: 1.25rem', 'line-height: 1.75rem'],
+            'leading-relaxed': () => ['line-height: 1.625'],
+            'shadow-lg': () => [`box-shadow: ${getTokenValue('--shadow-lg', '0 10px 15px -3px rgba(0,0,0,0.1)')}`],
+            'shadow-sm': () => [`box-shadow: ${getTokenValue('--shadow-sm', '0 1px 2px 0 rgba(0,0,0,0.05)')}`],
+            'shadow-soft': () => [`box-shadow: ${getTokenValue('--shadow-soft', '0 4px 20px rgba(0,0,0,0.08)')}`],
+            'shadow-subtle': () => [`box-shadow: ${getTokenValue('--shadow-subtle', '0 2px 10px rgba(0,0,0,0.04)')}`],
+            'transition-colors': () => [`transition-property: color, background-color, border-color, box-shadow`, `transition-duration: ${getTokenValue('--duration-200', '0.2s')}`, `transition-timing-function: ease-in-out`],
+            'transition-all': () => ['transition-property: all', `transition-duration: ${getTokenValue('--duration-200', '0.2s')}`, 'transition-timing-function: ease-in-out'],
+            'transition-opacity': () => ['transition-property: opacity', `transition-duration: ${getTokenValue('--duration-200', '0.2s')}`, 'transition-timing-function: ease-in-out'],
+            'duration-200': () => [`transition-duration: ${getTokenValue('--duration-200', '0.2s')}`],
+            'duration-300': () => ['transition-duration: 0.3s'],
+            'ease-out': () => ['transition-timing-function: cubic-bezier(0, 0, 0.2, 1)'],
+            'transform': () => ['transform: translateX(0) translateY(0) rotate(0) scale(1)'],
+            'cursor-pointer': () => ['cursor: pointer'],
+            'cursor-not-allowed': () => ['cursor: not-allowed'],
+            'pointer-events-none': () => ['pointer-events: none'],
+            'opacity-0': () => ['opacity: 0'],
+            'opacity-100': () => ['opacity: 1'],
+            'outline-none': () => ['outline: 2px solid transparent', 'outline-offset: 2px'],
+            'appearance-none': () => ['appearance: none'],
+            'select-none': () => ['user-select: none'],
+        };
+        const generator = utilityMap[className];
+        return generator ? generator() : [];
+    }
+    // ─── Component Generation ───────────────────────────────────────────────────
+    async generateComponents(components, variables) {
+        if (!fs.existsSync(this.outputDir)) {
+            fs.mkdirSync(this.outputDir, { recursive: true });
+        }
+        for (const [componentName, componentData] of Object.entries(components)) {
+            await this.generateCompoundComponents(componentName, componentData, variables);
+        }
+    }
+    async generateCompoundComponents(componentName, componentData, variables) {
+        // Root: charisol-card, charisol-button, charisol-input …
+        await this.generateSingleComponent(componentName, componentData, variables, true);
+        // Children: tag is simply charisol-{childNodeKey}
+        // e.g. child key "card-container" → charisol-card-container
+        //      child key "card-header"    → charisol-card-header
+        // No double-prefixing of the parent name.
+        if (componentData.children) {
+            for (const [childName, childNode] of Object.entries(componentData.children)) {
+                await this.generateSubComponentsRecursive(childName, childNode, variables);
+            }
+        }
+    }
+    /**
+     * Recursively generate one Stencil component per named node.
+     *
+     * TAG NAMING:
+     *   The child node key already carries its full descriptive name, e.g.
+     *   "card-container", "card-header", "card-header-title".
+     *   We just prepend the library prefix: charisol-{nodeName}.
+     *   This prevents the double-name bug (charisol-card-card-container).
+     */
+    async generateSubComponentsRecursive(nodeName, node, variables) {
+        await this.generateSingleComponent(nodeName, node, variables, false);
+        if (node.children) {
+            for (const [childName, childNode] of Object.entries(node.children)) {
+                await this.generateSubComponentsRecursive(childName, childNode, variables);
+            }
+        }
+    }
+    /**
+     * Core component writer.
+     *
+     * PURE HTML — every component renders its subtree as real HTML elements.
+     * No <charisol-*> tags anywhere in the output TSX.
+     *
+     * Props exposed on the root element only (text, svgIcon, src, alt, etc.)
+     * so users can override defaults. Child nodes always use their design-system
+     * defaults since they are rendered inline — users customise via props on the
+     * parent or via customStyle/customClass on the parent.
+     *
+     * TEXT SAFETY — JSON.stringify handles apostrophes and quotes.
+     */
+    async generateSingleComponent(nodeName, node, variables, isRoot) {
+        const kebabTag = `${this.componentPrefix}-${ComponentGeneratorUtils.toKebabCase(nodeName)}`;
+        const pascalName = ComponentGeneratorUtils.toPascalCase(nodeName);
+        const filePath = path.join(this.outputDir, `${kebabTag}.tsx`);
+        const cssPath = path.join(this.outputDir, `${kebabTag}.css`);
+        const tag = node.linkedElement?.htmlTag || 'div';
+        const attrs = this.processAttributes(node.linkedElement?.attributes || {}, variables);
+        const resolvedCls = attrs['class'] || '';
+        const SELF_CLOSING = ['img', 'input', 'br', 'hr', 'meta', 'link'];
+        const isSelfClosing = SELF_CLOSING.includes(tag);
+        const hasChildren = !!(node.children && Object.keys(node.children).length > 0);
+        const rawText = node.textContent || '';
+        const hasSvg = rawText.includes('<svg');
+        const hasText = !!rawText && !hasSvg;
+        // Safe strings
+        const safeDefaultText = hasText ? JSON.stringify(rawText) : '""';
+        const safeSvgLiteral = hasSvg
+            ? rawText.replace(/\\/g, '\\\\').replace(/`/g, '\\`').replace(/\$\{/g, '\\${')
+            : '';
+        // ── Props (on the root element of this component only) ───────────────────
+        const propLines = [
+            `  @Prop() customClass?: string;`,
+            `  @Prop() customStyle?: string;`,
+        ];
+        if (hasText)
+            propLines.push(`  @Prop() text?: string;`);
+        if (hasSvg)
+            propLines.push(`  @Prop() svgIcon?: string;`);
+        if (tag === 'img') {
+            propLines.push(`  @Prop() src?: string;`);
+            propLines.push(`  @Prop() alt?: string;`);
+        }
+        if (tag === 'input') {
+            propLines.push(`  @Prop() type?: string;`);
+            propLines.push(`  @Prop() placeholder?: string;`);
+            propLines.push(`  @Prop() value?: string;`);
+            propLines.push(`  @Prop() inputId?: string;`);
+        }
+        if (tag === 'label')
+            propLines.push(`  @Prop() htmlFor?: string;`);
+        if (tag === 'button') {
+            propLines.push(`  @Prop() btnType?: string;`);
+            propLines.push(`  @Prop() ariaLabel?: string;`);
+        }
+        // ── Children rendered as pure HTML ───────────────────────────────────────
+        // Indented at level 4 (inside render → return → root element)
+        const childrenHtml = hasChildren
+            ? this.buildChildrenJsx(node.children, 4)
+            : '';
+        // ── Render body ──────────────────────────────────────────────────────────
+        const classLine = `    const cls = [${JSON.stringify(resolvedCls)}, this.customClass].filter(Boolean).join(' ');`;
+        const styleLine = `    const sty = this.customStyle as any || undefined;`;
+        let renderReturn = '';
+        if (isSelfClosing) {
+            if (tag === 'img') {
+                const defSrc = this.safeJsString(attrs['src'] || '');
+                const defAlt = this.safeJsString(attrs['alt'] || '');
+                renderReturn =
+                    `      <img
+        class={cls}
+        src={this.src || ${defSrc}}
+        alt={this.alt || ${defAlt}}
+        style={sty}
+      />`;
+            }
+            else if (tag === 'input') {
+                const defType = this.safeJsString(attrs['type'] || 'text');
+                const defPh = this.safeJsString(attrs['placeholder'] || '');
+                const defId = this.safeJsString(attrs['id'] || '');
+                renderReturn =
+                    `      <input
+        class={cls}
+        type={this.type || ${defType}}
+        id={this.inputId || ${defId}}
+        placeholder={this.placeholder || ${defPh}}
+        value={this.value}
+        style={sty}
+      />`;
+            }
+            else {
+                renderReturn = `      <${tag} class={cls} style={sty} />`;
+            }
+        }
+        else if (hasSvg) {
+            // SVG holder — uses innerHTML; user overrides via svgIcon prop
+            renderReturn =
+                `      <${tag}
+        class={cls}
+        style={sty}
+        innerHTML={this.svgIcon || \`${safeSvgLiteral}\`}
+      />`;
+        }
+        else if (tag === 'label') {
+            const defFor = this.safeJsString(attrs['htmlFor'] || attrs['for'] || '');
+            const inner = hasText
+                ? `{this.text || ${safeDefaultText}}`
+                : childrenHtml;
+            renderReturn =
+                `      <label
+        class={cls}
+        htmlFor={this.htmlFor || ${defFor}}
+        style={sty}
+      >
+        ${inner}
+      </label>`;
+        }
+        else if (tag === 'button') {
+            const defBtnType = this.safeJsString(attrs['type'] || 'button');
+            const defAria = this.safeJsString(attrs['aria-label'] || '');
+            const inner = hasText
+                ? `{this.text || ${safeDefaultText}}`
+                : childrenHtml;
+            renderReturn =
+                `      <button
+        class={cls}
+        type={this.btnType || ${defBtnType}}
+        aria-label={this.ariaLabel || ${defAria}}
+        style={sty}
+      >
+        ${inner}
+      </button>`;
+        }
+        else {
+            // div, h1, h2, h3, p, span, section, etc.
+            const inner = hasText
+                ? `{this.text || ${safeDefaultText}}`
+                : childrenHtml;
+            renderReturn =
+                `      <${tag}
+        class={cls}
+        style={sty}
+      >
+        ${inner}
+      </${tag}>`;
+        }
+        // ── Emit file ────────────────────────────────────────────────────────────
+        const componentCode = `import { Component, Prop, h } from '@stencil/core';
+
+/**
+ * ${node.displayName || nodeName}
+ * Auto-generated from Charisol Design System
+ */
+@Component({
+  tag: '${kebabTag}',
+  styleUrl: '${kebabTag}.css',
+  shadow: true,
+})
+export class ${pascalName} {
+${propLines.join('\n')}
+
+  render() {
+${classLine}
+${styleLine}
+    return (
+${renderReturn}
+    );
+  }
+}
+`;
+        fs.writeFileSync(cssPath, '/* Styles from global utilities.css */\n');
+        fs.writeFileSync(filePath, componentCode);
+        this.generatedComponents.set(kebabTag, pascalName);
+        console.log(`✅ Generated: ${kebabTag}.tsx`);
+    }
+    /**
+     * Recursively render a node tree as PURE HTML JSX.
+     * No <charisol-*> tags — only real HTML elements: <div>, <span>, <button>, <img>, etc.
+     *
+     * Each node is rendered using its own htmlTag and resolved CSS classes.
+     * SVG content is emitted via innerHTML. Text is emitted as a JSX expression.
+     * Children are recursed inline.
+     */
+    renderNodeAsHtml(node, indentLevel) {
+        const pad = '  '.repeat(indentLevel);
+        const tag = node.linkedElement?.htmlTag || 'div';
+        const attrs = this.processAttributes(node.linkedElement?.attributes || {}, this.variables);
+        const cls = attrs['class'] || '';
+        const SELF_CLOSING = ['img', 'input', 'br', 'hr', 'meta', 'link'];
+        const isSC = SELF_CLOSING.includes(tag);
+        const rawText = node.textContent || '';
+        const hasSvg = rawText.includes('<svg');
+        const hasText = !!rawText && !hasSvg;
+        const hasChildren = !!(node.children && Object.keys(node.children).length > 0);
+        // Build attribute string for this node's HTML tag
+        const attrParts = [];
+        if (cls)
+            attrParts.push(`class="${cls}"`);
+        if (tag === 'img') {
+            if (attrs['src'])
+                attrParts.push(`src="${this.escapeAttrVal(attrs['src'])}"`);
+            if (attrs['alt'])
+                attrParts.push(`alt="${this.escapeAttrVal(attrs['alt'])}"`);
+        }
+        if (tag === 'input') {
+            if (attrs['type'])
+                attrParts.push(`type="${this.escapeAttrVal(attrs['type'])}"`);
+            if (attrs['placeholder'])
+                attrParts.push(`placeholder="${this.escapeAttrVal(attrs['placeholder'])}"`);
+            if (attrs['id'])
+                attrParts.push(`id="${this.escapeAttrVal(attrs['id'])}"`);
+        }
+        if (tag === 'label') {
+            const forVal = attrs['htmlFor'] || attrs['for'];
+            if (forVal)
+                attrParts.push(`htmlFor="${this.escapeAttrVal(forVal)}"`);
+        }
+        if (tag === 'button') {
+            attrParts.push(`type="${this.escapeAttrVal(attrs['type'] || 'button')}"`);
+            if (attrs['aria-label'])
+                attrParts.push(`aria-label="${this.escapeAttrVal(attrs['aria-label'])}"`);
+        }
+        if (hasSvg) {
+            // innerHTML will be set; no extra attrs needed
+        }
+        const attrStr = attrParts.length > 0 ? ' ' + attrParts.join(' ') : '';
+        // ── Self-closing ──────────────────────────────────────────────────────────
+        if (isSC) {
+            return `${pad}<${tag}${attrStr} />`;
+        }
+        // ── SVG holder — use innerHTML ────────────────────────────────────────────
+        if (hasSvg) {
+            const safeSvg = rawText.replace(/\\/g, '\\\\').replace(/`/g, '\\`').replace(/\$\{/g, '\\${');
+            return `${pad}<${tag}${attrStr} innerHTML={\`${safeSvg}\`} />`;
+        }
+        // ── Open tag ──────────────────────────────────────────────────────────────
+        const lines = [];
+        lines.push(`${pad}<${tag}${attrStr}>`);
+        // ── Text content ──────────────────────────────────────────────────────────
+        if (hasText) {
+            lines.push(`${pad}  {${JSON.stringify(rawText)}}`);
+        }
+        // ── Children ──────────────────────────────────────────────────────────────
+        if (hasChildren) {
+            for (const childNode of Object.values(node.children)) {
+                lines.push(this.renderNodeAsHtml(childNode, indentLevel + 1));
+            }
+        }
+        lines.push(`${pad}</${tag}>`);
+        return lines.join('\n');
+    }
+    /**
+     * Build children JSX by rendering each child node as pure HTML.
+     * Called from generateSingleComponent for container nodes.
+     */
+    buildChildrenJsx(children, indentLevel) {
+        return Object.values(children)
+            .map(child => this.renderNodeAsHtml(child, indentLevel))
+            .join('\n');
+    }
+    // ─── String helpers ──────────────────────────────────────────────────────────
+    /**
+     * Produce a safe JS string literal using JSON.stringify.
+     * Used inside JSX expressions: src={this.src || "default"}
+     */
+    safeJsString(value) {
+        return JSON.stringify(value);
+    }
+    /**
+     * Escape a value for embedding inside a JSX attribute double-quoted string.
+     * e.g.  class="foo &amp; bar"
+     */
+    escapeAttrVal(value) {
+        return (value || '')
+            .replace(/&/g, '&amp;')
+            .replace(/"/g, '&quot;');
+    }
+    processAttributes(attributes = {}, variables) {
+        const processed = {};
+        for (const [key, value] of Object.entries(attributes)) {
+            if (key === 'class') {
+                processed[key] = this.resolveClassReferences(value);
+            }
+            else if (key === 'style') {
+                processed[key] = this.resolveStyleValue(value, variables);
+            }
+            else {
+                processed[key] = this.resolveAttributeValue(value, variables);
+            }
+        }
+        return processed;
+    }
+    resolveStyleValue(value, variables) {
+        if (!value)
+            return '';
+        const varMatch = value.match(/var\(--([^)]+)\)/);
+        if (varMatch) {
+            const tokenName = `--${varMatch[1]}`;
+            const token = variables[tokenName];
+            if (token) {
+                let v = token.value;
+                if (token.unit && token.type === 'dimension' && !v.includes(token.unit))
+                    v = `${v}${token.unit}`;
+                return v;
+            }
+        }
+        return value;
+    }
+    resolveAttributeValue(value, variables) {
+        if (!value)
+            return '';
+        const varMatch = value.match(/var\(--([^)]+)\)/);
+        if (varMatch) {
+            const tokenName = `--${varMatch[1]}`;
+            const token = variables[tokenName];
+            if (token)
+                return token.value;
+        }
+        return value;
+    }
+    buildAttributeString(attributes) {
+        return Object.entries(attributes)
+            .filter(([, v]) => v && v.trim() !== '')
+            .map(([k, v]) => ` ${k}="${v}"`)
+            .join('');
+    }
+    // ─── Index ───────────────────────────────────────────────────────────────────
+    async updateComponentIndex() {
+        const exportLines = [];
+        for (const [tagName, className] of this.generatedComponents.entries()) {
+            exportLines.push(`export { ${className} } from './${tagName}';`);
+        }
+        const generatedIndexPath = path.join(this.outputDir, 'index.ts');
+        fs.writeFileSync(generatedIndexPath, exportLines.join('\n') + '\n');
+        const mainIndexPath = path.join(process.cwd(), 'src', 'components', 'index.ts');
+        fs.mkdirSync(path.dirname(mainIndexPath), { recursive: true });
+        fs.writeFileSync(mainIndexPath, `// Auto-generated component index\nexport * from './generated/index';\n`);
+    }
+}
+if (require.main === module) {
+    const generator = new StencilComponentGenerator();
+    generator.generateAllComponents().catch(console.error);
+}
+export { StencilComponentGenerator };